reshaped 1.0.1 → 2.2.0

package/utilities/a11y.js

@@ -0,0 +1,175 @@
+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 = (el, extraElement) => {
+    const focusableElements = Array.from(el.querySelectorAll(focusableSelector));
+    const filteredElements = focusableElements.filter((el) => {
+        return !el.hasAttribute("disabled") && el.clientHeight > 0;
+    });
+    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;
+        let chainId;
+        const release = (releaseOptions = {}) => {
+            const { withoutFocusReturn } = releaseOptions;
+            chain.removePreviousTill(chainId, (item) => document.body.contains(item.data.trigger));
+            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 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 && getActiveElement() !== triggerElement)
+                    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);
+        const focusable = getFocusableElements(root, includeTrigger ? triggerElement : undefined);
+        if (!focusable.length)
+            return null;
+        // 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);
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        resetListeners = () => document.removeEventListener("keydown", handleKeyDown);
+        return release;
+    };
+})();

package/utilities/animation.d.ts

@@ -0,0 +1,4 @@
+export declare const onNextFrame: (cb: () => void) => void;
+export declare const disableTransitions: () => void;
+export declare const enableTransitions: () => void;
+export declare const checkTransitions: () => boolean;

package/utilities/animation.js

@@ -0,0 +1,15 @@
+export const onNextFrame = (cb) => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => cb());
+    });
+};
+const transitionAttribute = "data-rs-no-transition";
+export const disableTransitions = () => {
+    document.documentElement.setAttribute(transitionAttribute, "true");
+};
+export const enableTransitions = () => {
+    document.documentElement.removeAttribute(transitionAttribute);
+};
+export const checkTransitions = () => {
+    return !document.documentElement.hasAttribute(transitionAttribute);
+};

package/utilities/helpers.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type * as G from "../types/global";
+export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
+export declare function debounceHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
+export declare const throttle: <T extends Function>(cb: T, wait: number) => (...args: unknown[]) => void;
+export declare function throttleHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
+type Value = string | boolean | number | undefined;
+type ClassNameResolver = string | ((value: Value) => string);
+export declare const classNames: (...args: G.ClassName[]) => string;
+export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {
+    excludeValueFromClassName?: boolean;
+}) => string[];
+export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V> | undefined) => Record<`--${string}`, V>;
+export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
+export declare const resolveViewportValue: <T>(viewport: G.Viewport, value: G.Responsive<T>) => T | undefined;
+export {};

package/utilities/helpers.js

@@ -0,0 +1,130 @@
+// from https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
+export const debounce = (cb, wait = 20) => {
+    let timer;
+    const callable = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => cb(...args), wait);
+    };
+    return callable;
+};
+export function debounceHandler(handler, timeout) {
+    const debounced = debounce(handler, timeout);
+    return (event) => {
+        if ("persist" in event)
+            event.persist();
+        return debounced(event);
+    };
+}
+export const throttle = (cb, wait) => {
+    let waiting = false;
+    return (...args) => {
+        if (!waiting) {
+            cb(...args);
+            waiting = true;
+            setTimeout(() => {
+                waiting = false;
+                setTimeout(() => {
+                    if (waiting)
+                        return;
+                    cb(...args);
+                }, wait);
+            }, wait);
+        }
+    };
+};
+export function throttleHandler(handler, timeout) {
+    const throttled = throttle(handler, timeout);
+    return (event) => {
+        if ("persist" in event)
+            event.persist();
+        return throttled(event);
+    };
+}
+export const classNames = (...args) => {
+    return args.reduce((acc, cur) => {
+        if (Array.isArray(cur)) {
+            const className = classNames(...cur);
+            if (!className)
+                return acc;
+            return `${acc} ${className}`;
+        }
+        if (cur)
+            return `${acc} ${cur}`;
+        return acc;
+    }, "");
+};
+const applyClassName = (passedClassName, value, options) => {
+    const { base, excludeValueFromClassName } = options || {};
+    const className = typeof passedClassName === "string" ? passedClassName : passedClassName(value);
+    if ((value === true && base) || excludeValueFromClassName)
+        return className;
+    // CSS should be turned on/off for non base viewport with mobile first approach
+    if (value === true && !base)
+        return `${className}-true`;
+    if (value === false && !base)
+        return `${className}-false`;
+    if (value !== undefined)
+        return `${className}-${value}`;
+    return null;
+};
+export const responsiveClassNames = (s, className, value, options) => {
+    if (typeof value !== "object") {
+        const staticClassName = applyClassName(className, value, {
+            base: true,
+            excludeValueFromClassName: options === null || options === void 0 ? void 0 : options.excludeValueFromClassName,
+        });
+        return staticClassName ? [s[staticClassName]] : [];
+    }
+    return Object.keys(value).reduce((acc, viewport) => {
+        const base = viewport === "s";
+        const viewportClassName = applyClassName(className, value[viewport], {
+            base,
+            excludeValueFromClassName: options === null || options === void 0 ? void 0 : options.excludeValueFromClassName,
+        });
+        const suffix = base ? "" : `--${viewport}`;
+        return [...acc, s[`${viewportClassName}${suffix}`]];
+    }, []);
+};
+export const responsiveVariables = (variableName, value) => {
+    if (value === undefined)
+        return {};
+    if (typeof value !== "object")
+        return { [`${variableName}-s`]: value };
+    return Object.keys(value).reduce((acc, key) => {
+        const viewportValue = value[key];
+        if (viewportValue === undefined)
+            return acc;
+        if (viewportValue === false)
+            return acc;
+        return Object.assign(Object.assign({}, acc), { [`${variableName}-${key}`]: viewportValue });
+    }, {});
+};
+const isResponsive = (prop) => {
+    if (prop === null)
+        return false;
+    return typeof prop === "object" && prop !== null && "s" in prop;
+};
+export const responsivePropDependency = (prop, resolver) => {
+    if (!isResponsive(prop))
+        return resolver(prop, "s");
+    const keys = Object.keys(prop);
+    return keys.reduce((acc, viewport) => {
+        const viewportValue = prop[viewport];
+        if (viewportValue === undefined || viewportValue === null)
+            return acc;
+        return Object.assign(Object.assign({}, acc), { [viewport]: resolver(viewportValue, viewport) });
+    }, {});
+};
+const viewports = ["s", "m", "l", "xl"];
+export const resolveViewportValue = (viewport, value) => {
+    let result;
+    if (!isResponsive(value))
+        return value;
+    for (let currentViewport of viewports) {
+        const viewportValue = value[currentViewport];
+        if (viewportValue !== undefined)
+            result = viewportValue;
+        if (currentViewport === viewport)
+            return result;
+    }
+};

package/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;
+    }): React.JSX.Element;
+    Item: (props: Props) => React.JSX.Element;
+};
+export default Example;

package/utilities/storybook/Example.js

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

package/utilities/storybook/Example.module.css

@@ -0,0 +1 @@
+.root{--demo-bg:var(--rs-color-background-elevation-base);--dot-color:var(--rs-color-border-neutral-faded);background:linear-gradient(90deg,var(--demo-bg) 10px,transparent 1%) 50%,linear-gradient(var(--demo-bg) 10px,transparent 1%) 50%,var(--dot-color);background-size:12px 12px}

package/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) => React.JSX.Element;
+export default Placeholder;

package/utilities/storybook/Placeholder.js

@@ -0,0 +1,17 @@
+import React from "react";
+const Placeholder = (props) => {
+    const { w = "auto", h = 50, children } = props;
+    return (React.createElement("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));
+};
+export default Placeholder;

package/utilities/storybook/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Placeholder } from "./Placeholder";
+export { default as Example } from "./Example";

package/utilities/storybook/index.js

@@ -0,0 +1,2 @@
+export { default as Placeholder } from "./Placeholder.js";
+export { default as Example } from "./Example.js";

package/utilities/testPresets.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type Renderer<P> = (props: P) => React.ReactElement;
+export declare const testChildren: (renderer: Renderer<{
+    children: React.ReactNode;
+}>) => void;
+export declare const testLinkBehavior: (renderer: Renderer<{
+    href: string;
+}>) => void;
+export declare const testLinkButtonBehavior: (renderer: Renderer<{
+    href: string;
+    onClick: () => void;
+}>) => void;
+export declare const testButtonBehavior: (renderer: Renderer<{
+    onClick: () => void;
+}>) => void;
+export declare const testButtonType: (renderer: Renderer<{
+    type: string;
+}>) => void;
+export declare const testDisabledButton: (renderer: Renderer<{
+    onClick: () => void;
+}>) => void;
+export declare const testAriaLabel: (renderer: Renderer<{
+    ariaLabel: string;
+}>) => void;
+export {};

package/utilities/testPresets.js

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+export const testChildren = (renderer) => {
+    test("renders children", () => {
+        render(renderer({ children: "Children" }));
+        expect(screen.getByText("Children")).toBeInTheDocument();
+    });
+};
+export const testLinkBehavior = (renderer) => {
+    test("works as a link", () => {
+        render(renderer({ href: "https://reshaped.so" }));
+        const link = screen.getByRole("link");
+        expect(link).toBeInTheDocument();
+        expect(link.getAttribute("href")).toBe("https://reshaped.so");
+    });
+};
+export const testLinkButtonBehavior = (renderer) => {
+    test("works as a button with href", () => __awaiter(void 0, void 0, void 0, function* () {
+        const noop = jest.fn();
+        render(renderer({ onClick: noop, href: "https://reshaped.so" }));
+        const button = screen.getByRole("link");
+        button.addEventListener("click", (e) => e.preventDefault());
+        expect(button).toBeInTheDocument();
+        yield userEvent.click(button);
+        expect(noop).toBeCalledTimes(1);
+    }));
+};
+export const testButtonBehavior = (renderer) => {
+    test("works as a button", () => __awaiter(void 0, void 0, void 0, function* () {
+        const noop = jest.fn();
+        render(renderer({ onClick: noop }));
+        const button = screen.getByRole("button");
+        expect(button).toBeInTheDocument();
+        yield userEvent.click(button);
+        expect(noop).toBeCalledTimes(1);
+        // fireEvent.keyDown(button, { key: "Enter" });
+        // expect(noop).toBeCalledTimes(2);
+        // fireEvent.keyDown(button, { key: " " });
+        // expect(noop).toBeCalledTimes(3);
+    }));
+};
+export const testButtonType = (renderer) => {
+    test("applies correct button type", () => __awaiter(void 0, void 0, void 0, function* () {
+        const noop = jest.fn();
+        render(React.createElement("form", { onSubmit: noop }, renderer({ type: "button" })));
+        const button = screen.getByRole("button");
+        yield userEvent.click(button);
+        expect(noop).not.toBeCalled();
+    }));
+};
+export const testDisabledButton = (renderer) => {
+    test("disables the button", () => __awaiter(void 0, void 0, void 0, function* () {
+        const noop = jest.fn();
+        render(renderer({ onClick: noop }));
+        const button = screen.getByRole("button");
+        yield userEvent.click(button);
+        expect(noop).not.toBeCalled();
+    }));
+};
+export const testAriaLabel = (renderer) => {
+    test("renders aria-label", () => {
+        render(renderer({ ariaLabel: "Hey" }));
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("aria-label")).toBeDefined();
+    });
+};

package/utilities/tests/Chain.test.d.ts

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

package/utilities/tests/Chain.test.js

@@ -0,0 +1,45 @@
+import Chain from "../Chain.js";
+describe("Chain", () => {
+    test("gets an item", () => {
+        const chain = new Chain();
+        const id = chain.add("Test");
+        expect(chain.get(id).data).toBe("Test");
+    });
+    test("validates last item", () => {
+        const chain = new Chain();
+        const firstId = chain.add("Test");
+        const lastId = chain.add("Test 2");
+        expect(chain.isLast(firstId)).toBe(false);
+        expect(chain.isLast(lastId)).toBe(true);
+    });
+    test("adds items", () => {
+        const chain = new Chain();
+        chain.add("Test");
+        expect(chain.getAll()).toMatchSnapshot();
+    });
+    test("removes item in the middle", () => {
+        const chain = new Chain();
+        chain.add("Test");
+        const id = chain.add("Test 2");
+        chain.add("Test 3");
+        chain.remove(id);
+        expect(chain.getAll()).toMatchSnapshot();
+    });
+    test("removes side items", () => {
+        const chain = new Chain();
+        const idFirst = chain.add("Test");
+        chain.add("Test 2");
+        const idLast = chain.add("Test 3");
+        chain.remove(idFirst);
+        chain.remove(idLast);
+        expect(chain.getAll()).toMatchSnapshot();
+    });
+    test("removes previous elements till condition is true", () => {
+        const chain = new Chain();
+        chain.add("Test");
+        chain.add("Test 2");
+        const id = chain.add("Test 3");
+        chain.removePreviousTill(id, (item) => item.data === "Test 2");
+        expect(chain.getAll()).toMatchSnapshot();
+    });
+});

package/README.md

@@ -1 +0,0 @@
-Check out https://reshaped.so