Reshaped Files

reshaped

Minor Changes

• 438da4a Thanks @blvdmitry! - Added the ContentToggle component for swapping between any content with an animated transition. It takes an id property identifying the currently rendered content and a direction property (start or end) controlling which way the content moves: whenever the id changes, the previous content cross-fades out towards that side while the new one comes in from the opposite one, and both are rendered in the same grid cell so the surrounding layout doesn't shift.

• fc2ddff Thanks @blvdmitry! - DropdownMenu: Added the size property which is used by all menu items and nested submenus by default. ContextMenu inherits the same property, and individual DropdownMenu.Item components can still override it.

• add32b0 Thanks @blvdmitry! - Added the Expandable component for animating content in and out by expanding the space it takes. It was previously used internally by Accordion and is now available publicly, with an active property controlling the visibility, an orientation property ("vertical" or "horizontal") picking the axis the content expands along and defaulting to "vertical", and an onAfterClose callback resolving once the closing transition is finished. The root element is only rendered as a region landmark when it's labelled with aria-label or aria-labelledby.

• df25023 Thanks @blvdmitry! - Flyout: Added the active flyout state as a second argument of the trigger render prop, so components like DropdownMenu, Popover and Tooltip can render their trigger based on whether the flyout is open

• 6d08a3e Thanks @blvdmitry! - Added the IconToggle component for swapping between icons with an animated transition. It takes the same properties as Icon, with an extra id property identifying the currently rendered icon: whenever it changes, the previous icon animates out while the new one animates in, and both are rendered in the same grid cell so the surrounding layout doesn't shift.

• abd9635 Thanks @blvdmitry! - ScrollArea: Added an orientation property ("vertical" | "horizontal" | "both") that limits scrolling to the passed direction and constrains the content size in the other direction, defaulting to "both"

• c99149d Thanks @blvdmitry! - ScrollArea: Added scrollbarDisplay="scroll" to show the scrollbar only while the area is being scrolled

• #655 00954ae Thanks @blvdmitry! - Select: Added a renderTrigger prop for rendering a custom trigger element, it receives the flyout attributes as the first argument and the selection state as the second one

Patch Changes

• 4280a15 Thanks @blvdmitry! - Checkbox, Radio: Added outline shadow to the decorator to match TextField and other form controls, error state no longer applies critical border when selected

• fd8b831 Thanks @blvdmitry! - ContextMenu: Added a ContextMenuInstance type export for typing the instanceRef property value

• 1060733 Thanks @blvdmitry! - ContextMenu: Added a triggerRef property for using an element rendered outside of the ContextMenu as the trigger. The menu opens on right click on that element and the scroll is locked based on its position in the DOM, instead of the element wrapping the ContextMenu children.

• #661 69b7413 Thanks @blvdmitry! - Accordion: Fixed the expand animation replaying when React re-attaches the effects of a mounted accordion without changing its state, for example when it's moved between its siblings or hidden and shown by a Suspense boundary. Toggling the accordion while it's still animating now continues from the current height instead of jumping, and transitions bubbling up from the content no longer end the animation early.

• #662 469a1b2 Thanks @blvdmitry! - Badge: Fixed dismiss button following the link when the badge is rendered with the href prop

• #662 469a1b2 Thanks @blvdmitry! - Badge: Limited the width to 100% of the parent element and truncated the long text with an ellipsis

• #666 924b742 Thanks @blvdmitry! - Image: Rendered the fallback when a server rendered image fails to load before React hydrates the page

• #654 b919629 Thanks @blvdmitry! - PostCSS config: Added reshaped/config/postcss.js and reshaped/config/postcss.cjs to the package exports, so importing the config with a file extension no longer fails with ERR_PACKAGE_PATH_NOT_EXPORTED

• 6bda313 Thanks @blvdmitry! - Link: Added fullWidth support

• d34c062 Thanks @blvdmitry! - Keyboard mode: Typing text inside inputs, textareas and contenteditable elements no longer activates the keyboard mode, so the focus rings don't appear on the focused field while entering the content with the mouse. Navigation keys like Tab and arrows still activate it as before

• 3dfda4c Thanks @blvdmitry! - MenuItem: Updated the color="critical" styling so the item renders in neutral colors by default and switches the text and icon to the critical color only on hover, keyboard highlight, and selected states, keeping the neutral background instead of the critical one

• e5ff765 Thanks @blvdmitry! - Motion: Increased the duration-medium token to 250ms and duration-slow to 400ms, switched Checkbox, Radio and Switch selection transitions to easing-decelerate, and made the MenuItem hover/highlighted background appear instantly and only fade out on leave for a more responsive feel

• 28d4edb Thanks @blvdmitry! - ScrollArea: Added a vertical/horizontal padding to the scrollbars so the thumb doesn't overlap rounded corners of the parent element, and kept the thumb visible while dragging it with scrollbarDisplay="hover" even when the pointer leaves the component

• c2554bb Thanks @blvdmitry! - Slider: Rendered the thumb keyboard focus ring as an offset outline instead of an inset box shadow, keeping the thumb halo visible on focus and making the ring show up in forced-colors mode

• #656 792c575 Thanks @blvdmitry! - Button, MenuItem, Tabs, TextField, Select and PinField: Small size now renders caption-1 text, their vertical padding grows by the line height difference so the component size stays the same

• 36abcea Thanks @blvdmitry! - Button, MenuItem, Tabs, TextField and Select: small size now renders a smaller icon with a tighter gap to match its caption-1 text. MenuItem horizontal padding is adjusted across all sizes, and Tabs now matches Button's padding, gap and icon alignment, with icons hanging into the padding of its pill variants.

• fa0d227 Thanks @blvdmitry! - useOnClickOutside: contextmenu event support

• #657 7561531 Thanks @blvdmitry! - useHotkeys: Fixed hotkeys not triggering when switching between different keys while holding Meta on macOS, since the keyup events for regular keys are not emitted while Meta is pressed. Also fixed the pressed keys tracking for quick key sequences, the mod key support in checkHotkeyState, duplicate hotkey calls when multiple Reshaped providers are rendered on the same page and hotkeys removal when the same callback is used by multiple components

• Updated dependencies [531f4af]:

• @reshaped/utilities@4.2.0
• @reshaped/theming@4.2.0

@reshaped/utilities

Patch Changes

• 531f4af Thanks @blvdmitry! - Focus utilities: Moving the focus with focusElement and the focusFirstElement, focusLastElement, focusNextElement and focusPreviousElement helpers now only scrolls the element into view while the keyboard mode is active, matching how TrapFocus returns the focus to the trigger on release. Closing a nested menu with the mouse leaves the focus outside the parent trapped region, and restoring it used to scroll the scrollable parents to the top