reshaped 3.0.11-rc.3 → 3.1.1

package/dist/components/Carousel/CarouselControl.js

@@ -36,7 +36,7 @@ const CarouselControl = (props) => {
             if (timer)
                 clearTimeout(timer);
         };
-    }, [scrollPosition, scrollElRef.current, mounted]);
+    }, [scrollPosition, scrollElRef, mounted, isNext]);
     return (_jsx("div", { className: controlClassNames, "aria-hidden": "true", children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", elevated: true, attributes: { "aria-disabled": !visible } }) }));
 };
 export default CarouselControl;

package/dist/components/Resizable/tests/Resizable.stories.js

@@ -54,5 +54,6 @@ export const base = () => (<Example>
 					</Resizable>
 				</Resizable.Item>
 			</Resizable>
+			<div style={{ height: 2000 }}/>
 		</Example.Item>
 	</Example>);

package/dist/components/Tabs/TabsContext.d.ts

@@ -4,14 +4,14 @@ export declare const TabsProvider: React.Provider<T.Context>;
 export declare const useTabs: (value?: string) => {
     panelId: string | undefined;
     buttonId: string | undefined;
-    name?: string;
-    onChange?: (args: {
+    name?: string | undefined;
+    onChange?: ((args: {
         value: string;
         name?: string;
-    }) => void;
-    direction?: "column" | "row";
-    variant?: "bordered" | "borderless" | "pills" | "pills-elevated";
-    itemWidth?: "equal";
+    }) => void) | undefined;
+    direction?: ("column" | "row") | undefined;
+    variant?: ("bordered" | "borderless" | "pills" | "pills-elevated") | undefined;
+    itemWidth?: "equal" | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;

package/dist/components/Toast/ToastRegion.js

@@ -53,7 +53,7 @@ const ToastRegion = (props) => {
         return null;
     return (
     // We only use onClick for touch devices since touchend is not supported
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
             const visibleIndex = filteredLength - index + hiddenCount - 1;
             if (data.status !== "entered")

package/dist/components/Tooltip/tests/Tooltip.stories.js

@@ -123,33 +123,34 @@ export const edgeCases = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title="nested popovers inside a tooltip">
-			<Tooltip position="top" text="Hello">
-				{(tooltipAttributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(attributes) => (<Button color="primary" attributes={{
-                ...tooltipAttributes,
-                ...attributes,
-            }}>
-									Open
-								</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>
-							<View gap={2} align="start">
-								Popover content
-								<Popover position="bottom">
-									<Popover.Trigger>
-										{(attributes) => <Button attributes={attributes}>Open</Button>}
-									</Popover.Trigger>
-									<Popover.Content>
-										<View gap={2} align="start">
-											Popover content
-											<Button onClick={() => { }}>Button</Button>
-										</View>
-									</Popover.Content>
-								</Popover>
-							</View>
-						</Popover.Content>
-					</Popover>)}
-			</Tooltip>
+			<View direction="row" gap={2}>
+				<Tooltip position="top" text="Hello">
+					{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+							<Popover.Trigger>
+								{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
+										Tooltip with popover
+									</Button>)}
+							</Popover.Trigger>
+							<Popover.Content>
+								<View gap={2} align="center" direction="row" justify="space-between">
+									Popover content
+									<Popover position="bottom" width="300px">
+										<Popover.Trigger>
+											{(attributes) => <Button attributes={attributes}>Open</Button>}
+										</Popover.Trigger>
+										<Popover.Content>
+											<Popover.Dismissible align="center" closeAriaLabel="Close">
+												Another popover content
+											</Popover.Dismissible>
+										</Popover.Content>
+									</Popover>
+								</View>
+							</Popover.Content>
+						</Popover>)}
+				</Tooltip>
+				<Tooltip position="top" text="Hello">
+					{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
+				</Tooltip>
+			</View>
 		</Example.Item>
 	</Example>);

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -5,7 +5,6 @@ const FlyoutTrigger = (props) => {
     const { children } = props;
     const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
     let childrenAttributes = {
-        onBlur: handleBlur,
         ref: triggerElRef,
     };
     if (triggerType === "click" || trapFocusMode === "action-menu") {
@@ -18,6 +17,7 @@ const FlyoutTrigger = (props) => {
     // Submenus open on keypress instead of hover
     if ((triggerType === "hover" && !isSubmenu) || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
+        childrenAttributes.onBlur = handleBlur;
         childrenAttributes["aria-describedby"] = id;
     }
     if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -136,10 +136,9 @@ if (!window.customElements.get("custom-element")) {
 export const customPortalTarget = () => {
     const portalRef = React.useRef(null);
     return (<Example>
-			<div style={{ height: 1000 }}/>
 			<Example.Item title="Custom containerRef">
 				<View padding={4} paddingInline={40} height={50} overflow="auto" backgroundColor="neutral-faded" borderRadius="small" attributes={{ ref: portalRef }}>
-					<Flyout position="bottom-end" containerRef={portalRef}>
+					<Flyout position="bottom-end" containerRef={portalRef} active>
 						<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
 						<Flyout.Content>
 							<div style={{
@@ -164,7 +163,7 @@ export const customPortalTarget = () => {
 			</Example.Item>
 		</Example>);
 };
-export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width="600px">
+export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
 		Should work on mobile
 		<button type="button">Item 1</button>
 		<button type="button">Item 2</button>

package/dist/components/_private/Flyout/useFlyout.js

@@ -79,7 +79,7 @@ const flyout = (triggerEl, flyoutEl, options) => {
     }
     const rootNode = triggerEl?.getRootNode();
     const shadowRoot = rootNode instanceof ShadowRoot ? rootNode : null;
-    // const shadowHostBounds = shadowRoot ? shadowRoot.host.getBoundingClientRect() : null;
+    // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
     const containerParent = container || getClosestFlyoutTarget(triggerEl);

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -86,6 +86,7 @@ export class HotkeyStore {
                     const resolvedEvent = pressedMap[pressedId];
                     if (data.options.preventDefault) {
                         resolvedEvent?.preventDefault();
+                        e.preventDefault();
                     }
                     data.callback(resolvedEvent);
                 });

package/dist/hooks/useDrag.js

@@ -42,6 +42,7 @@ const useDrag = (cb, options) => {
         [keys.DOWN]: () => isVertical && handleKeyboard(0, 20),
     }, [], {
         ref: triggerRef,
+        preventDefault: true,
         disabled,
     });
     React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.0.11-rc.3",
+	"version": "3.1.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -84,7 +84,7 @@
 		"test:unit": "jest --config tools/jest/jest.config.ts",
 		"test:size": "size-limit",
 		"lint": "yarn lint:js && yarn lint:css",
-		"lint:js": "eslint --quiet --fix",
+		"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
 		"lint:css": "stylelint 'src/**/*.css'",
 		"commit": "git-cz"
 	},
@@ -92,29 +92,31 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.2.1",
-		"@commitlint/config-conventional": "19.1.0",
+		"@commitlint/cli": "19.4.0",
+		"@commitlint/config-conventional": "19.2.2",
 		"@commitlint/types": "19.0.3",
-		"@size-limit/preset-big-lib": "11.1.2",
-		"@storybook/addon-a11y": "8.0.6",
-		"@storybook/addon-controls": "8.0.6",
-		"@storybook/addon-docs": "8.0.6",
-		"@storybook/addon-storysource": "8.0.6",
-		"@storybook/react": "8.0.6",
-		"@storybook/react-vite": "8.0.6",
-		"@testing-library/jest-dom": "6.4.2",
-		"@testing-library/react": "14.3.0",
+		"@eslint/js": "^9.9.0",
+		"@size-limit/preset-big-lib": "11.1.4",
+		"@storybook/addon-a11y": "8.2.8",
+		"@storybook/addon-controls": "8.2.8",
+		"@storybook/addon-docs": "8.2.8",
+		"@storybook/addon-storysource": "8.2.8",
+		"@storybook/react": "8.2.8",
+		"@storybook/react-vite": "8.2.8",
+		"@testing-library/dom": "10.4.0",
+		"@testing-library/jest-dom": "6.4.8",
+		"@testing-library/react": "16.0.0",
 		"@testing-library/user-event": "14.5.2",
-		"@types/culori": "^2.1.0",
+		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
 		"@types/jest": "29.5.12",
-		"@types/node": "20.12.5",
-		"@types/react": "18.2.74",
-		"@types/react-dom": "18.2.24",
+		"@types/node": "22.2.0",
+		"@types/react": "18.3.3",
+		"@types/react-dom": "18.3.0",
 		"@typescript-eslint/eslint-plugin": "7.6.0",
 		"@typescript-eslint/parser": "7.6.0",
-		"@vitejs/plugin-react": "4.2.1",
-		"chromatic": "11.3.0",
+		"@vitejs/plugin-react": "4.3.1",
+		"chromatic": "11.7.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.56.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
@@ -124,28 +126,30 @@
 		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
+		"globals": "^15.9.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.6.8",
-		"postcss": "8.4.38",
+		"lefthook": "1.7.12",
+		"postcss": "8.4.41",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
-		"postcss-nested": "6.0.1",
-		"prettier": "3.2.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"resolve-tspaths": "0.8.18",
-		"size-limit": "11.1.2",
-		"storybook": "8.0.6",
-		"stylelint": "16.3.1",
+		"postcss-nested": "6.2.0",
+		"prettier": "3.3.3",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"resolve-tspaths": "0.8.19",
+		"size-limit": "11.1.4",
+		"storybook": "8.2.8",
+		"stylelint": "16.8.1",
 		"stylelint-config-prettier": "9.0.5",
-		"stylelint-config-standard": "36.0.0",
-		"ts-jest": "29.1.2",
+		"stylelint-config-standard": "36.0.1",
+		"ts-jest": "29.2.4",
 		"ts-node": "10.9.2",
-		"typescript": "5.5.3",
-		"vite": "5.2.8",
+		"typescript": "5.5.4",
+		"typescript-eslint": "^8.0.1",
+		"vite": "5.4.0",
 		"vite-tsconfig-paths": "4.3.2"
 	},
 	"peerDependencies": {
@@ -154,12 +158,12 @@
 		"react-dom": "^18"
 	},
 	"dependencies": {
-		"@csstools/postcss-global-data": "2.1.1",
+		"@csstools/postcss-global-data": "3.0.0",
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
-		"cssnano": "6.1.2",
+		"cssnano": "7.0.5",
 		"culori": "4.0.1",
-		"postcss-custom-media": "10.0.4"
+		"postcss-custom-media": "11.0.0"
 	},
 	"resolutions": {
 		"jackspeak": "2.1.1"