reshaped 2.4.5 → 2.4.8

package/components/TextField/tests/TextField.stories.js

@@ -3,6 +3,9 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import IconZap from "../../../icons/Zap.js";
 import TextField from "../index.js";
 import FormControl from "../../FormControl/index.js";
+import View from "../../View/index.js";
+import Text from "../../Text/index.js";
+import Button from "../../Button/index.js";
 export default { title: "Components/TextField" };
 export const value = () => (<Example>
 		<Example.Item title="no value, placeholder">
@@ -98,3 +101,16 @@ export const formControl = () => (<Example>
 			</FormControl>
 		</Example.Item>
 	</Example>);
+export const aligner = () => (<Example>
+		<Example.Item title="aligner">
+			<View gap={2}>
+				<Text variant="featured-2">What problem are you trying to solve?</Text>
+				<TextField.Aligner>
+					<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+				</TextField.Aligner>
+				<View.Item>
+					<Button>Next</Button>
+				</View.Item>
+			</View>
+		</Example.Item>
+	</Example>);

package/components/Theme/GlobalColorMode.js

@@ -7,10 +7,14 @@ const GlobalColorMode = (props) => {
     const { defaultMode, children } = props;
     const [mode, setMode] = React.useState(defaultMode || "light");
     const changeColorMode = React.useCallback((targetMode) => {
-        // Avoid components styles animating when switching to another color mode
-        disableTransitions();
         document.documentElement.setAttribute("data-rs-color-mode", targetMode);
-        setMode(targetMode);
+        setMode((prevMode) => {
+            if (prevMode !== targetMode) {
+                // Avoid components styles animating when switching to another color mode
+                disableTransitions();
+            }
+            return targetMode;
+        });
     }, []);
     useIsomorphicLayoutEffect(() => {
         onNextFrame(() => {

package/components/_private/Aligner/Aligner.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
+import React from "react";
+import type * as T from "./Aligner.types";
+declare const Aligner: (props: T.Props) => React.JSX.Element;
+export default Aligner;

package/components/_private/Aligner/Aligner.js

@@ -0,0 +1,18 @@
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./Aligner.module.css";
+const Aligner = (props) => {
+    const { side: passedSide = "all", children, className, attributes } = props;
+    const sides = typeof passedSide === "string" ? [passedSide] : passedSide;
+    const rootClassNames = classNames(s.root, sides.map((side) => s[`--side-${side}`]), className);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }), children));
+};
+export default Aligner;

package/components/_private/Aligner/Aligner.module.css

@@ -0,0 +1 @@
+.root [data-rs-aligner-target]{--rs-aligner-p-h:var(--rs-p-h,var(--rs-p));--rs-aligner-p-v:var(--rs-p-v,var(--rs-p))}.root.--side-all [data-rs-aligner-target]{margin:calc(var(--rs-aligner-p-v) * -1) calc(var(--rs-aligner-p-h) * -1)}.root.--side-inline [data-rs-aligner-target],.root.--side-start [data-rs-aligner-target]{margin-inline-start:calc(var(--rs-aligner-p-h) * -1)}.root.--side-end [data-rs-aligner-target],.root.--side-inline [data-rs-aligner-target]{margin-inline-end:calc(var(--rs-aligner-p-h) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-top [data-rs-aligner-target]{margin-block-start:calc(var(--rs-aligner-p-v) * -1)}.root.--side-block [data-rs-aligner-target],.root.--side-bottom [data-rs-aligner-target]{margin-block-end:calc(var(--rs-aligner-p-v) * -1)}

package/components/_private/Aligner/Aligner.types.d.ts

@@ -0,0 +1,9 @@
+import type * as G from "../../../types/global";
+type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
+export type Props = {
+    children: React.ReactElement;
+    side?: Side | Side[];
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export {};

package/components/_private/Aligner/Aligner.types.js

@@ -0,0 +1 @@
+export {};

package/components/_private/Aligner/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Aligner";
+export type { Props as AlignerProps } from "./Aligner.types";

package/components/_private/Aligner/index.js

@@ -0,0 +1 @@
+export { default } from "./Aligner.js";

package/components/_private/Flyout/FlyoutTrigger.js

@@ -1,30 +1,21 @@
 "use client";
 import React from "react";
-import useHotkeys from "../../../hooks/useHotkeys.js";
-import * as keys from "../../../constants/keys.js";
 import { useFlyoutContext } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, handleOpen, trapFocusMode, } = useFlyoutContext();
-    useHotkeys({
-        [`${keys.UP},${keys.DOWN}`]: () => {
-            if (flyout.status !== "idle")
-                return;
-            handleOpen();
-        },
-    }, [handleOpen, flyout.status], { ref: triggerElRef });
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, } = useFlyoutContext();
     let childrenAttributes = {
         onBlur: handleBlur,
         ref: triggerElRef,
     };
-    if (triggerType === "click") {
+    if (triggerType === "click" || trapFocusMode === "action-menu") {
         childrenAttributes.onClick = handleClick;
     }
     if (triggerType === "hover") {
         childrenAttributes.onMouseEnter = handleMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
     }
-    if (triggerType === "hover" || triggerType === "focus") {
+    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
         childrenAttributes["aria-describedby"] = id;
     }

package/components/_private/Portal/Portal.d.ts

@@ -6,7 +6,7 @@ export declare const usePortalScope: () => T.Context;
  * That gives Portal time to receive scope on first render
  */
 declare const Portal: {
-    (props: T.Props): JSX.Element;
+    (props: T.Props): any;
     Scope: typeof PortalScope;
 };
 declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): React.JSX.Element;

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": "2.4.5",
+	"version": "2.4.8",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -80,19 +80,19 @@
 	],
 	"devDependencies": {
 		"@size-limit/preset-big-lib": "9.0.0",
-		"@storybook/addon-a11y": "7.4.0",
-		"@storybook/react": "7.4.0",
-		"@storybook/react-vite": "7.4.0",
-		"@testing-library/jest-dom": "6.1.3",
+		"@storybook/addon-a11y": "7.4.6",
+		"@storybook/react": "7.4.6",
+		"@storybook/react-vite": "7.4.6",
+		"@testing-library/jest-dom": "6.1.4",
 		"@testing-library/react": "14.0.0",
-		"@testing-library/user-event": "14.4.3",
+		"@testing-library/user-event": "14.5.1",
 		"@types/events": "3.0.0",
-		"@types/jest": "29.5.4",
-		"@types/node": "20.6.0",
-		"@types/react": "18.2.21",
-		"@types/react-dom": "18.2.7",
-		"@typescript-eslint/eslint-plugin": "6.6.0",
-		"@typescript-eslint/parser": "6.6.0",
+		"@types/jest": "29.5.5",
+		"@types/node": "20.8.6",
+		"@types/react": "18.2.28",
+		"@types/react-dom": "18.2.13",
+		"@typescript-eslint/eslint-plugin": "6.7.5",
+		"@typescript-eslint/parser": "6.7.5",
 		"@vitejs/plugin-react": "4.0.4",
 		"chromatic": "7.1.0",
 		"eslint": "8.49.0",
@@ -104,11 +104,11 @@
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"identity-obj-proxy": "3.0.0",
-		"jest": "29.6.4",
-		"jest-environment-jsdom": "29.6.4",
+		"jest": "29.7.0",
+		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.4.10",
-		"postcss": "8.4.29",
+		"lefthook": "1.5.2",
+		"postcss": "8.4.31",
 		"postcss-cli": "10.1.0",
 		"postcss-each": "1.1.0",
 		"postcss-import": "15.1.0",
@@ -118,7 +118,7 @@
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.15",
 		"size-limit": "9.0.0",
-		"storybook": "7.4.0",
+		"storybook": "7.4.6",
 		"stylelint": "15.10.3",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",

package/types/global.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 type ClassNameValue = string | null | undefined | false;
-export type ClassName = ClassNameValue | ClassNameValue[];
+export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
 export type StyleAttribute = React.CSSProperties & Record<CSSVariable, string | number | undefined>;
 type DataAttributes = Record<`data-${string}`, string | boolean>;

package/config/next.d.ts

@@ -1,4 +0,0 @@
-/**
- * TODO: Work in progress
- * Needs named exports support before we can use it
- */

package/config/next.js

@@ -1,22 +0,0 @@
-"use strict";
-/**
- * TODO: Work in progress
- * Needs named exports support before we can use it
- */
-// export const config = {
-// 	modularizeImports: {
-// 		reshaped: {
-// 			transform: {
-// 				// Utilities
-// 				// classNames: "reshaped/utilities/classNames",
-// 				// Hooks
-// 				useToast: "reshaped/components/Toast",
-// 				useFormControl: "reshaped/components/FormControl",
-// 				useTheme: "reshaped/components/Theme",
-// 				"use.*": "reshaped/hooks/{{ member }}",
-// 				// Components
-// 				"*": "reshaped/components/{{ member }}",
-// 			},
-// 		},
-// 	},
-// };