reshaped 3.0.11-rc.3 → 3.1.0

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/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/_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/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.0",
 	"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"