Skip to content

3.2.1

Latest
Latest
Compare
Choose a tag to compare
@blvdmitry blvdmitry released this 20 Oct 19:00
v3.2.1
40764c2

Full web changelog · Documentation

npm install reshaped

Grid utility

<View width="400px" maxWidth="100%">
  <Grid columns={3} gap={3}>
    <Grid.Item rowSpan={2}>
      <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
    </Grid.Item>
    <Grid.Item colSpan={2}>
      <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
    </Grid.Item>
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid>
</View>

We're introducing a new Grid utility to enhance your experience when working with CSS Grid.
It supports all standard grid properties, such as row and column templates, template areas, individual column sizes, and auto-flow values.
All these properties natively support responsive value syntax.

More Flyout improvements

function Demo() {
  const [left, setLeft] = React.useState(50);
	const flyoutRef = React.useRef();
  const containerRef = React.useRef(null);

	React.useEffect(() => {
		flyoutRef.current?.updatePosition();
	}, [left]);

	return (
		<>
			<View direction="row" gap={2} position="absolute" insetTop={2} insetStart={2} zIndex={10} align="center">
				<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
				<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
        <Text variant="caption-1" weight="medium" color="neutral-faded">Try mobile viewport size<br />to see position fallbacks</Text>
			</View>
      <View height={50} width={100} attributes={{ ref: containerRef }}>
        <Popover
          position="bottom"
          disableCloseOnOutsideClick
          instanceRef={flyoutRef}
          containerRef={containerRef}
        >
          <Popover.Trigger>
            {(attributes) => (
              <div style={{ position: "absolute", left: `${left}%`, top: '50%', whiteSpace: 'nowrap' }}>
                <div style={{ transform: 'translate(-50%, -50%)' }}>
                  <Button color="primary" attributes={attributes}>
                    Show content
                  </Button>
                </div>
              </div>
            )}
          </Popover.Trigger>
          <Popover.Content>
            <Placeholder />
          </Popover.Content>
        </Popover>
      </View>
		</>
	);
}

In our previous release, we introduced numerous improvements to the Tooltip, Popover, Autocomplete, and DropdownMenu components.
This time, we're adding even more enhancements, focusing on their dynamic behavior, shadow DOM support, and performance.
All changes listed under Flyout apply to all four components:

  • Flyout: Improved position calculation for triggers that transform on click.
  • Flyout: Switched to using vanilla event listeners for triggers, allowing you to pass additional custom event handlers without needing to manually merge them.
  • Flyout: Fixed the blur event for content-menu hover flyouts that contain no focusable elements.
  • Flyout: Added automatic shadow DOM detection instead of relying on containerRef.
  • Flyout, trapFocus: Added shadow DOM support for keyboard navigation.
  • Flyout: Improved position fallback order when content doesn't fit into the viewport, based on the position default value.
  • Flyout: Added a fallbackPositions property to manually select available fallback positions. The forcePosition property is now deprecated.
  • Flyout: Introduced a history for the last used fallback to prevent content from reverting to the default position when none of the fallbacks fit the viewport.
  • Flyout: Fixed an edge case where controlled flyouts were blocked from closing after being set to inactive.
  • Flyout: Optimized the internal resize observer to be active only when rendered.
  • Popover: Added initialFocusRef to focus an element when the popover content is opened.

New components variants

We have added new functionality to existing components.
Here are a few highlights, with more improvements listed in the next section.

<Loader size="large" />

Added a large size option for the Loader component, intended for use in larger page areas instead of the Skeleton.

<View width="280px">
  <TextField
    name="food"
    placeholder="Pick your favorite food"
    startSlot={[
      <Badge>Cinnamon bun</Badge>,
      <Badge>Pasta</Badge>,
      <Badge>Ice-cream</Badge>,
      <Badge>Pizza</Badge>
    ]}
    defaultValue="Pineapple"
    multiline
  />
</View>

Introduced a multiline flag for the TextField and Autocomplete components to display selected values.

<View width="300px">
  <Divider>or use one of these options</Divider>
</View>

The Divider component now supports children and contentPosition properties for displaying contextual labels or components.

function Demo() {
	const containerRef = React.useRef<HTMLDivElement>(null);
  const toggle = useToggle(true);

	return (
    <View
      attributes={{ ref: containerRef }}
      borderRadius="medium"
      height="300px"
      width="400px"
      maxWidth="100%"
      overflow="auto"
      backgroundColor="neutral-faded"
      borderColor="neutral-faded"
      padding={4}
    >
      <Button onClick={toggle.activate}>Open modal</Button>
      <Modal
        containerRef={containerRef}
        active={toggle.active}
        onClose={toggle.deactivate}
        position="end"
        size="260px"
      >
        <Placeholder />
      </Modal>
    </View>
	);
};

The Modal and Overlay components can now be rendered within a specified containerRef, enabling scroll lock specifically for the container element.

Other improvements

  • Added a types field to package.json for the old module resolution.
  • Added documentation pages with examples of integrating with recharts and @tanstack/react-table
  • Switched back to handling focus ring styles based on the data-rs-keyboard attribute to address Safari :focus-visible edge cases.
  • Source code: Updated all package dependencies and devDependencies.
  • Theming: Typography rem values are now based on a 16px base value to better align with browser and Tailwind defaults.
  • Theming: Updated the generated background-neutral-faded color to be slightly lighter.
  • Accordion: Fixed animation edge cases.
  • Actionable: Added a disableFocusRing property.
  • Autocomplete: Added an onBackspace handler for easier deletion of selected values.
  • Autocomplete: Added an instanceRef property to programmatically open and close the autocomplete value list.
  • Badge: Added neutral color to the typings.
  • Button: Fixed Safari edge cases causing icons to glitch on hover.
  • FileUpload: Added support for the height property.
  • Icon: Fixed width and height overrides.
  • Image: Added support for passing attributes.style.
  • Modal: Added a visible value for the overflow property.
  • Modal, Overlay: Added a reason argument for the onClose handler.
  • Pagination: Fixed truncation edge cases for a total number of pages less than 8.
  • Reshaped provider: Added a scoped flag to apply all global styles only inside the provider.
  • Switch: Fixed the disabled label color.
  • Table: Aligned the highlighted row background color with other components.
  • Table: Added className and attributes support for Table.Body, Table.Head, and Table.Cell.
  • Tabs: Fixed selection indicator transition when caused by DOM event subscriptions.
  • Tabs: Slightly increased spacing between buttons for better visual balance in tabs with icons.
  • TextField: Added a focused property.
  • Toast: Added warning color support.
  • View: Added responsive value support for the textAlign property.
  • View: Removed the content wrapper when it has only a single child.
  • useHotkeys: Fixed the supported codes for modified keys on Windows/Linux.
  • useOnClickOutside: Added support for shadow DOM.
  • useResponsiveClientValue: Added support for boolean values.
  • useResponsiveClientValue: Added support for custom theme viewport values.
  • useScrollLock: Improved scroll lock behavior for iOS Safari.
Assets 2
Loading