reshaped 2.8.0 → 2.8.2

package/dist/utilities/a11y.js

@@ -0,0 +1,220 @@
+import { TAB, UP, DOWN } from "../constants/keys.js";
+import { keyboardModeAttribute, pseudoFocusAttribute } from "../constants/attributes.js";
+import Chain from "./Chain.js";
+export const isKeyboardMode = () => document.documentElement.hasAttribute(keyboardModeAttribute);
+export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
+export const getActiveElement = () => {
+    const pseudoFocusedEl = document.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || document.activeElement);
+};
+const getFocusableElements = (rootEl, extraElement) => {
+    const focusableElements = Array.from(rootEl.querySelectorAll(focusableSelector));
+    const filteredElements = focusableElements.filter((el) => {
+        if (el.hasAttribute("disabled"))
+            return false;
+        if (el.clientHeight === 0)
+            return false;
+        if (el.type === "radio") {
+            let sameNameRadioEls;
+            if (el.form) {
+                const formInputs = el.form.elements.namedItem(el.name);
+                // Synthetic error handling for narrowing down types
+                // Radio element can't find itself in the form, so we don't need to include it in the array
+                if (!formInputs)
+                    return false;
+                const multipleElementsFound = "length" in formInputs;
+                if (!multipleElementsFound) {
+                    // Single element found is always an input radio since we're inside the condition
+                    sameNameRadioEls = [formInputs];
+                }
+                else {
+                    sameNameRadioEls = Array.from(formInputs).filter((el) => "type" in el && el.type === "radio");
+                }
+            }
+            else {
+                sameNameRadioEls = Array.from(rootEl.querySelectorAll(`[type="radio"][name="${el.name}"]`));
+            }
+            if (sameNameRadioEls === null || sameNameRadioEls === void 0 ? void 0 : sameNameRadioEls.length) {
+                const checkedEl = Array.from(sameNameRadioEls).find((el) => el.checked);
+                if (checkedEl && el !== checkedEl)
+                    return false;
+                if (!checkedEl && el !== sameNameRadioEls[0])
+                    return false;
+            }
+        }
+        return true;
+    });
+    if (extraElement && filteredElements.length)
+        filteredElements.unshift(extraElement);
+    return filteredElements;
+};
+const getFocusData = (args) => {
+    const { root, extraElement, target, mode } = args;
+    const focusable = getFocusableElements(root, extraElement);
+    const focusableLimit = focusable.length - 1;
+    const currentElement = getActiveElement();
+    const currentIndex = focusable.indexOf(currentElement);
+    const positions = {
+        next: currentIndex + 1,
+        prev: currentIndex - 1,
+        first: 0,
+        last: focusableLimit,
+    };
+    let nextIndex = positions[target];
+    const isOverflow = nextIndex > focusableLimit || nextIndex < 0;
+    if (isOverflow) {
+        // Disable circular navigation for action menus
+        if (mode === "action-menu") {
+            nextIndex = target === "prev" ? positions.first : positions.last;
+        }
+        else {
+            nextIndex = target === "prev" ? positions.last : positions.first;
+        }
+    }
+    return { overflow: isOverflow, el: focusable[nextIndex] };
+};
+const focusElement = (el, mode) => {
+    var _a;
+    (_a = document.querySelector(`[${pseudoFocusAttribute}]`)) === null || _a === void 0 ? void 0 : _a.removeAttribute(pseudoFocusAttribute);
+    if (mode === "selection-menu") {
+        el.setAttribute(pseudoFocusAttribute, "true");
+    }
+    else {
+        el.focus();
+    }
+};
+const focusTargetElement = (root, target) => {
+    const data = getFocusData({ root, target });
+    focusElement(data.el);
+};
+export const focusNextElement = (root) => focusTargetElement(root, "next");
+export const focusPreviousElement = (root) => focusTargetElement(root, "prev");
+export const focusFirstElement = (root) => focusTargetElement(root, "first");
+export const focusLastElement = (root) => focusTargetElement(root, "last");
+const trapScreenReader = (() => {
+    let affectedElements = [];
+    const applyHiddenToSiblings = (el) => {
+        let sibling = el.parentNode && el.parentNode.firstChild;
+        while (sibling) {
+            const notCurrent = sibling !== el;
+            const isValid = sibling.nodeType === 1 && !sibling.hasAttribute("aria-hidden");
+            if (notCurrent && isValid) {
+                sibling.setAttribute("aria-hidden", "true");
+                affectedElements.push(sibling);
+            }
+            sibling = sibling.nextSibling;
+        }
+    };
+    const release = () => {
+        affectedElements.forEach((el) => {
+            el.removeAttribute("aria-hidden");
+        });
+        affectedElements = [];
+    };
+    return (el) => {
+        let currentEl = el;
+        if (affectedElements.length)
+            release();
+        while (currentEl !== document.body) {
+            applyHiddenToSiblings(currentEl);
+            currentEl = currentEl.parentElement;
+        }
+        return { release };
+    };
+})();
+export const trapFocus = (() => {
+    let resetListeners = null;
+    let srTrap = null;
+    const chain = new Chain();
+    return (root, options = {}) => {
+        const { mode = "dialog", onNavigateOutside, includeTrigger } = options;
+        const triggerElement = getActiveElement();
+        const isDialog = mode === "dialog";
+        const isContentMenu = mode === "content-menu";
+        const isSelectionMenu = mode === "selection-menu";
+        const isTabMode = isDialog || isContentMenu;
+        const isArrowsMode = mode === "action-menu" || isSelectionMenu;
+        const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
+        let chainId;
+        // Re-focus on the first element if content has changed
+        const observer = new MutationObserver(() => {
+            // Focus stayed inside the wrapper, no need to refocus
+            if (root.contains(document.activeElement))
+                return;
+            const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
+            if (!focusable.length)
+                return;
+            focusElement(focusable[0], mode);
+        });
+        const release = (releaseOptions = {}) => {
+            const { withoutFocusReturn } = releaseOptions;
+            chain.removePreviousTill(chainId, (item) => document.body.contains(item.data.trigger));
+            observer.disconnect();
+            if (triggerElement) {
+                triggerElement.focus({ preventScroll: withoutFocusReturn || !isKeyboardMode() });
+            }
+            if (resetListeners) {
+                resetListeners();
+                if (srTrap)
+                    srTrap.release();
+                resetListeners = null;
+                srTrap = null;
+            }
+            const previousItem = chain.tailId && chain.get(chain.tailId);
+            if (previousItem) {
+                trapFocus(previousItem.data.root, previousItem.data.options);
+            }
+        };
+        const handleKeyDown = (event) => {
+            const key = event.key;
+            const isTab = key === TAB;
+            const isNextTab = isTab && !event.shiftKey;
+            const isBackTab = isTab && event.shiftKey;
+            const isUp = isArrowsMode && key === UP;
+            const isDown = isArrowsMode && key === DOWN;
+            const isPrev = (isBackTab && isTabMode) || isUp;
+            const isNext = (isNextTab && isTabMode) || isDown;
+            const isFocusedOnTrigger = getActiveElement() === triggerElement;
+            const focusData = getFocusData({
+                root,
+                target: isPrev ? "prev" : "next",
+                extraElement: includeTrigger ? triggerElement : undefined,
+                mode,
+            });
+            // Release the trap when tab is used in navigation modes that support arrows
+            const hasNavigatedOutside = (isTab && isArrowsMode) || (isContentMenu && isTab && focusData.overflow);
+            if (hasNavigatedOutside) {
+                // Prevent shift + tab event to avoid focus moving after the trap release
+                if (isBackTab && !isFocusedOnTrigger)
+                    event.preventDefault();
+                release();
+                onNavigateOutside === null || onNavigateOutside === void 0 ? void 0 : onNavigateOutside();
+                return;
+            }
+            // We return after the last condition because Tab can be used for releasing in arrows mode
+            if (!isPrev && !isNext)
+                return;
+            event.preventDefault();
+            if (!focusData.el)
+                return;
+            focusElement(focusData.el, mode);
+        };
+        // Reset event listeners if focus is trapped elsewhere
+        if (resetListeners)
+            resetListeners();
+        if (isDialog)
+            srTrap = trapScreenReader(root);
+        observer.observe(root, { childList: true, subtree: true });
+        if (!focusable.length)
+            return null;
+        document.addEventListener("keydown", handleKeyDown);
+        resetListeners = () => document.removeEventListener("keydown", handleKeyDown);
+        // Don't add back to the chain if we're traversing back
+        const tailItem = chain.tailId && chain.get(chain.tailId);
+        if (!tailItem || root !== tailItem.data.root) {
+            chainId = chain.add({ root, trigger: triggerElement, options });
+            focusElement(focusable[0], mode);
+        }
+        return release;
+    };
+})();

package/dist/utilities/storybook/Example.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type Props = {
+    title?: string | string[];
+    children?: React.ReactNode;
+};
+declare const Example: {
+    (props: {
+        children: React.ReactNode;
+        title?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Item: (props: Props) => import("react/jsx-runtime").JSX.Element;
+};
+export default Example;

package/dist/utilities/storybook/Example.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../../components/View/index.js";
+import Text from "../../components/Text/index.js";
+import s from "./Example.module.css";
+const Example = (props) => {
+    return (_jsxs(View, { gap: 3, attributes: props.title ? { style: { marginTop: -17 } } : undefined, children: [props.title && (_jsx(View, { bleed: 4, paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", borderColor: "neutral-faded", position: "sticky", insetTop: 0, zIndex: 100, children: props.title })), props.children] }));
+};
+const ExampleItem = (props) => {
+    const { children } = props;
+    const title = typeof props.title === "string" ? [props.title] : props.title;
+    return (_jsxs(View, { borderColor: "neutral-faded", borderRadius: "medium", overflow: "hidden", children: [title && (_jsx(View, { paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", children: title.map((line, index) => (_jsx(Text, { variant: "body-3", color: index > 0 ? "neutral-faded" : "neutral", children: line }, index))) })), _jsx(View, { padding: 4, className: s.root, children: children })] }));
+};
+Example.Item = ExampleItem;
+export default Example;

package/dist/utilities/storybook/Placeholder.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    w?: string | number;
+    h?: string | number;
+    children?: React.ReactNode;
+    inverted?: boolean;
+};
+declare const Placeholder: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Placeholder;

package/dist/utilities/storybook/Placeholder.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Placeholder = (props) => {
+    const { w = "auto", h = 50, children } = props;
+    return (_jsx("div", { style: {
+            width: w,
+            height: h,
+            minWidth: h,
+            padding: "var(--rs-unit-x2)",
+            background: "rgba(var(--rs-color-rgb-background-neutral), 0.32)",
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "var(--rs-unit-radius-small)",
+        }, children: children }));
+};
+export default Placeholder;

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.8.0",
+	"version": "2.8.2",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -25,34 +25,69 @@
 		"type": "git",
 		"url": "https://github.com/formaat-design/reshaped"
 	},
-	"main": "./index.js",
-	"module": "./index.js",
-	"types": "./index.d.ts",
-	"files": [
-		"bin/**/*",
-		"cli/**/*",
-		"components/**/*",
-		"config/**/*",
-		"constants/**/*",
-		"hooks/**/*",
-		"icons/**/*",
-		"styles/**/*",
-		"themes/**/*",
-		"types/**/*",
-		"utilities/**/*",
-		"bundle.css",
-		"bundle.d.ts",
-		"bundle.js",
-		"index.d.ts",
-		"index.js"
-	],
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./themes": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./themes/reshaped/theme.css": {
+			"import": "./dist/themes/reshaped/theme.css"
+		},
+		"./themes/slate/theme.css": {
+			"import": "./dist/themes/slate/theme.css"
+		},
+		"./themes/figma/theme.css": {
+			"import": "./dist/themes/figma/theme.css"
+		},
+		"./themes/fragments/twitter/theme.css": {
+			"import": "./dist/themes/fragments/twitter/theme.css"
+		},
+		"./bundle": {
+			"import": "./dist/bundle.js",
+			"types": "./dist/bundle.d.ts"
+		},
+		"./bundle.css": {
+			"import": "./dist/bundle.css"
+		},
+		"./config/postcss": {
+			"import": "./dist/config/postcss.js",
+			"require": "./dist/config/postcss.js",
+			"types": "./dist/config/postcss.d.ts"
+		},
+		"./config/tailwind": {
+			"import": "./dist/config/tailwind.js",
+			"require": "./dist/config/tailwind.js",
+			"types": "./dist/config/tailwind.d.ts"
+		},
+		"./config/postcss.js": {
+			"import": "./dist/config/postcss.js",
+			"require": "./dist/config/postcss.js",
+			"types": "./dist/config/postcss.d.ts"
+		},
+		"./config/tailwind.js": {
+			"import": "./dist/config/tailwind.js",
+			"require": "./dist/config/tailwind.js",
+			"types": "./dist/config/tailwind.d.ts"
+		}
+	},
 	"bin": {
 		"reshaped": "./bin/cli.js"
 	},
+	"files": [
+		"bin/**/*",
+		"dist/**/*"
+	],
 	"scripts": {
 		"dev": "storybook dev -c tools/storybook -p 3001 --disable-telemetry",
 		"clean": "sh ./bin/clean.sh",
-		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths && cp -r dist/* ./",
+		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:cjs && yarn build:css && yarn build:bundle && resolve-tspaths",
 		"build:themes": "node bin/cli.js theming --config cli/theming/reshaped.config.js --output src/themes",
 		"build:esm": "tsc -p tsconfig.esm.json",
 		"build:cjs": "tsc -p tsconfig.cjs.json",
@@ -132,9 +167,9 @@
 		"vite-tsconfig-paths": "4.2.3"
 	},
 	"peerDependencies": {
-		"postcss": "^8.0.0",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"postcss": "^8",
+		"react": "^18",
+		"react-dom": "^18"
 	},
 	"dependencies": {
 		"@csstools/postcss-global-data": "2.1.1",