reshaped 2.11.11 → 3.0.0

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

@@ -0,0 +1,183 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Example } from "../../../../utilities/storybook/index.js";
+import View from "../../../View/index.js";
+import Theme from "../../../Theme/index.js";
+import Button from "../../../Button/index.js";
+import Flyout from "../index.js";
+export default { title: "Utilities/Internal/Flyout" };
+const Demo = (props) => {
+    const { position = "bottom-start", children } = props, rest = __rest(props, ["position", "children"]);
+    return (<Flyout triggerType="click" position={position} {...rest}>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>{position}</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<div style={{
+            background: "var(--rs-color-background-elevation-overlay)",
+            padding: "var(--rs-unit-x4)",
+            height: 100,
+            width: 160,
+            borderRadius: "var(--rs-radius-medium)",
+            border: "1px solid var(--rs-color-border-neutral-faded)",
+            boxSizing: "border-box",
+        }}>
+					{children || "Content"}
+				</div>
+			</Flyout.Content>
+		</Flyout>);
+};
+export const positions = () => (<div style={{ paddingTop: 200 }}>
+		<View gap={3} direction="row">
+			<Demo position="bottom-start"/>
+			<Demo position="bottom-end"/>
+			<Demo position="bottom"/>
+
+			<Demo position="top-start"/>
+			<Demo position="top-end"/>
+			<Demo position="top"/>
+
+			<Demo position="end"/>
+			<Demo position="end-top"/>
+			<Demo position="end-bottom"/>
+
+			<Demo position="start"/>
+			<Demo position="start-top"/>
+			<Demo position="start-bottom"/>
+		</View>
+	</div>);
+export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
+		<Demo position="top"/>
+	</div>);
+export const modeDialogClick = () => (<Demo position="bottom-start" trapFocusMode="dialog">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeActionMenuClick = () => (<Demo position="bottom-start" trapFocusMode="action-menu">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeContentMenuClick = () => (<Demo position="bottom-start" trapFocusMode="content-menu">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeDialogHover = () => (<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeActionMenuHover = () => (<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+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>
+		<button type="button">Close</button>
+	</Demo>);
+export const testInsideScrollArea = () => (<Example>
+		<Example.Item title="should move the content on area scroll">
+			<div style={{ overflow: "scroll", height: 200, margin: 40, position: "relative" }}>
+				<Flyout triggerType="click" position="bottom-start">
+					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
+					<Flyout.Content>
+						<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        height: 100,
+        width: 160,
+        borderRadius: "var(--rs-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+							{"Content"}
+						</div>
+					</Flyout.Content>
+				</Flyout>
+				<View height="300px" backgroundColor="neutral-faded"/>
+			</div>
+			<div style={{ height: 2000 }}/>
+		</Example.Item>
+	</Example>);
+export const testInsideFixed = () => (<Example>
+		<Example.Item title="should move the content on page scroll">
+			<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
+				<Flyout triggerType="click" position="bottom-start">
+					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
+					<Flyout.Content>
+						<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        height: 100,
+        width: 160,
+        borderRadius: "var(--rs-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+							{"Content"}
+						</div>
+					</Flyout.Content>
+				</Flyout>
+			</View>
+			<div style={{ height: 2000 }}/>
+		</Example.Item>
+	</Example>);
+export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
+		<Flyout.Trigger>
+			{(attributes) => <button {...attributes}>Trigger with long text</button>}
+		</Flyout.Trigger>
+		<Flyout.Content>
+			<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        borderRadius: "var(--rs-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}></div>
+		</Flyout.Content>
+	</Flyout>);
+export const scopedTheming = () => (<View gap={3} align="start">
+		<Button color="primary">Reshaped button</Button>
+		<Theme name="twitter">
+			<Flyout triggerType="click" active position="bottom-start">
+				<Flyout.Trigger>
+					{(attributes) => (<Button color="primary" attributes={attributes}>
+							Twitter button
+						</Button>)}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: 8,
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+						<View gap={1}>
+							<View.Item>Portal content, rendered in body</View.Item>
+							<Button color="primary">Twitter button</Button>
+						</View>
+					</div>
+				</Flyout.Content>
+			</Flyout>
+		</Theme>
+	</View>);

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

@@ -0,0 +1,198 @@
+import React from "react";
+import useRTL from "../../../hooks/useRTL.js";
+import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import calculatePosition from "./utilities/calculatePosition.js";
+const topPos = ["top-start", "top", "top-end"];
+const bottomPos = ["bottom-start", "bottom", "bottom-end"];
+const startPos = ["start", "start-bottom", "start-top"];
+const endPos = ["end", "end-bottom", "end-top"];
+const order = {
+    top: [...topPos, ...bottomPos, ...endPos, ...startPos],
+    bottom: [...bottomPos, ...topPos, ...endPos, ...startPos],
+    start: [...startPos, ...endPos, ...topPos, ...bottomPos],
+    end: [...endPos, ...startPos, ...topPos, ...bottomPos],
+};
+/**
+ * Get an order of positions to try to fit popover on the screen based on its starting position
+ */
+const getPositionOrder = (position) => {
+    const types = ["top", "bottom", "start", "end"];
+    const type = types.find((type) => position.startsWith(type)) || "bottom";
+    return order[type];
+};
+/**
+ * Check if element visually fits on the screen
+ */
+const fullyVisible = (bounds) => {
+    const htmlEl = document.documentElement;
+    const pageLeft = htmlEl.scrollLeft;
+    const pageRight = pageLeft + htmlEl.clientWidth;
+    const pageTop = htmlEl.scrollTop;
+    const pageBottom = pageTop + htmlEl.clientHeight;
+    return (bounds.left >= pageLeft &&
+        bounds.left + bounds.width <= pageRight &&
+        bounds.top >= pageTop &&
+        bounds.top + bounds.height <= pageBottom);
+};
+/**
+ * Order of keys here is responsible for the order of styles applied
+ */
+const defaultStyles = {
+    left: 0,
+    top: 0,
+    width: "auto",
+    height: "auto",
+    // z-index doesn't accept strings
+    zIndex: "var(--rs-z-index-flyout)",
+};
+const resetStyles = {
+    left: 0,
+    top: 0,
+    position: "fixed",
+    // opacity: 0,
+    visibility: "hidden",
+    animation: "none",
+    transition: "none",
+    zIndex: "var(--rs-z-index-tooltip)",
+};
+/**
+ * Set position of the target element to fit on the screen
+ */
+const flyout = (triggerEl, flyoutEl, options) => {
+    const { position, forcePosition, width } = options;
+    const targetClone = flyoutEl.cloneNode(true);
+    const triggerBounds = triggerEl.getBoundingClientRect();
+    // Reset all styles applied on the previous hook execution
+    targetClone.style = "";
+    Object.keys(resetStyles).forEach((key) => {
+        const value = resetStyles[key];
+        targetClone.style[key] = value.toString();
+    });
+    if (width) {
+        if (width === "trigger") {
+            targetClone.style.width = `${triggerBounds.width}px`;
+        }
+        else if (width !== "full") {
+            targetClone.style.width = width;
+        }
+    }
+    document.body.appendChild(targetClone);
+    const flyoutBounds = targetClone.getBoundingClientRect();
+    const scrollableParent = getClosestFlyoutTarget(triggerEl);
+    const scopeBounds = scrollableParent.getBoundingClientRect();
+    const scopeOffset = {
+        top: scopeBounds.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
+        left: scopeBounds.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
+    };
+    let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
+    if (!fullyVisible(calculated.styles) && !forcePosition) {
+        const order = getPositionOrder(position);
+        const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
+        const test = (testOrder, extraOptions = {}) => {
+            const { fullWidth } = extraOptions;
+            testOrder.some((currentPosition) => {
+                const calculateOptions = {
+                    ...options,
+                    width: fullWidth ? "full" : options.width,
+                    position: currentPosition,
+                };
+                const tested = calculatePosition({
+                    triggerBounds,
+                    flyoutBounds,
+                    scopeOffset,
+                    ...calculateOptions,
+                });
+                if (fullyVisible(tested.styles)) {
+                    calculated = tested;
+                    return true;
+                }
+                return false;
+            });
+        };
+        test(order);
+        if (!fullyVisible(calculated.styles)) {
+            test(mobileOrder, { fullWidth: true });
+        }
+    }
+    targetClone.parentNode.removeChild(targetClone);
+    return calculated;
+};
+const flyoutReducer = (state, action) => {
+    switch (action.type) {
+        case "render":
+            if (state.status !== "idle")
+                return state;
+            // Disable events before it's positioned to avoid mouseleave getting triggered
+            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+        case "position":
+            if (state.status !== "rendered")
+                return state;
+            return {
+                ...state,
+                status: "positioned",
+                position: action.payload.position,
+                styles: { ...defaultStyles, ...action.payload.styles },
+            };
+        case "show":
+            if (state.status !== "positioned")
+                return state;
+            return { ...state, status: "visible" };
+        case "hide":
+            if (state.status !== "visible")
+                return state;
+            return { ...state, status: "hidden" };
+        case "remove":
+            if (state.status !== "hidden" && state.status !== "visible")
+                return state;
+            return { ...state, status: "idle", styles: resetStyles };
+        default:
+            throw new Error("Invalid reducer type");
+    }
+};
+const useFlyout = (originRef, targetRef, options) => {
+    const { position: defaultPosition = "bottom", forcePosition, width } = options;
+    const [isRTL] = useRTL();
+    const [state, dispatch] = React.useReducer(flyoutReducer, {
+        position: defaultPosition,
+        styles: defaultStyles,
+        status: "idle",
+    });
+    const render = React.useCallback(() => {
+        dispatch({ type: "render" });
+    }, []);
+    const show = React.useCallback(() => {
+        dispatch({ type: "show" });
+    }, []);
+    const hide = React.useCallback(() => {
+        dispatch({ type: "hide" });
+    }, []);
+    const remove = React.useCallback(() => {
+        dispatch({ type: "remove" });
+    }, []);
+    const updatePosition = React.useCallback(() => {
+        if (!originRef.current || !targetRef.current)
+            return;
+        const nextFlyoutData = flyout(originRef.current, targetRef.current, {
+            width,
+            position: defaultPosition,
+            forcePosition,
+            rtl: isRTL,
+        });
+        dispatch({ type: "position", payload: nextFlyoutData });
+    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
+    React.useEffect(() => {
+        if (state.status === "rendered")
+            updatePosition();
+    }, [state.status, updatePosition]);
+    return React.useMemo(() => ({
+        position: state.position,
+        styles: state.styles,
+        status: state.status,
+        updatePosition,
+        render,
+        hide,
+        remove,
+        show,
+    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+};
+export default useFlyout;

package/dist/components/_private/HiddenInput/HiddenInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./HiddenInput.module.css";
+const HiddenInput = (props) => {
+    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
+};
+export default HiddenInput;

package/dist/components/_private/Portal/Portal.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom";
+import Theme from "../../Theme/index.js";
+const PortalScopeContext = React.createContext({});
+export const usePortalScope = () => {
+    return React.useContext(PortalScopeContext);
+};
+/**
+ * Disclaimer: Works only for components that don't show the portal immediately
+ * That gives Portal time to receive scope on first render
+ */
+const Portal = (props) => {
+    const { children, targetRef } = props;
+    /**
+     * Check for parent portal to render inside it
+     * To avoid z-iondex issues
+     * Example:
+     * Dropdown rendered on the page should render under the modal
+     * Dropdown inside the modal should render above it
+     */
+    const portal = usePortalScope();
+    const nextScopeRef = targetRef || portal.scopeRef;
+    /* Preserve the current theme when rendered in body */
+    return ReactDOM.createPortal(_jsx(Theme, { children: children }), nextScopeRef?.current || document.body);
+};
+function PortalScope(props) {
+    const { children } = props;
+    const ref = React.useRef(null);
+    return (_jsx(PortalScopeContext.Provider, { value: { scopeRef: ref }, children: children(ref) }));
+}
+Portal.Scope = PortalScope;
+export default Portal;

package/dist/config/postcss.d.ts

@@ -0,0 +1,28 @@
+export declare const config: {
+    plugins: {
+        "@csstools/postcss-global-data": {
+            files: string[];
+        };
+        "postcss-custom-media": {};
+        cssnano: {
+            preset: (string | {
+                calc: boolean;
+            })[];
+        };
+    };
+};
+export declare const getConfig: (options: {
+    themeMediaCSSPath: string;
+}) => {
+    plugins: {
+        "@csstools/postcss-global-data": {
+            files: string[];
+        };
+        "postcss-custom-media": {};
+        cssnano: {
+            preset: (string | {
+                calc: boolean;
+            })[];
+        };
+    };
+};

package/dist/config/postcss.js

@@ -0,0 +1,26 @@
+import path from "path";
+const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/reshaped/media.css");
+// Using [plugin]: { ...options } format here because it's supported by the most frameworks
+// - require('plugin') is not supported by Next
+// - ['plugin', options] is not supported by Vite
+export const config = {
+    plugins: {
+        "@csstools/postcss-global-data": {
+            files: [defaultThemeMediaCSSPath],
+        },
+        "postcss-custom-media": {},
+        cssnano: { preset: ["default", { calc: false }] },
+    },
+};
+export const getConfig = (options) => {
+    const { themeMediaCSSPath = defaultThemeMediaCSSPath } = options;
+    return {
+        plugins: {
+            "@csstools/postcss-global-data": {
+                files: [themeMediaCSSPath],
+            },
+            "postcss-custom-media": {},
+            cssnano: { preset: ["default", { calc: false }] },
+        },
+    };
+};

package/dist/config/tailwind.d.ts

@@ -0,0 +1,2 @@
+import { ThemeDefinition } from "../themes/_generator/tokens/types";
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/config/tailwind.js

@@ -0,0 +1,83 @@
+import reshapedDefinition from "../themes/_generator/definitions/reshaped.js";
+import { camelToKebab } from "../utilities/string.js";
+import mergeDefinitions from "../themes/_generator/utilities/mergeDefinitions.js";
+import { bgWithDynamicForeground } from "../themes/_generator/constants.js";
+export const getTheme = (theme) => {
+    const config = {
+        backgroundColor: {},
+        textColor: {},
+        borderColor: {},
+        colors: {},
+        borderRadius: {},
+        spacing: {},
+        boxShadow: {},
+        screens: {},
+    };
+    const definition = theme
+        ? mergeDefinitions(reshapedDefinition, theme)
+        : reshapedDefinition;
+    Object.keys(definition.color).forEach((tokenName) => {
+        const cssTokenName = camelToKebab(tokenName);
+        const cssVariable = ["rs", "color", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        if (tokenName.startsWith("background")) {
+            const name = cssTokenName.replace("background-", "");
+            config.backgroundColor[name] = configValue;
+            if (bgWithDynamicForeground.includes(tokenName)) {
+                const cssVariable = ["rs", "color", "on", cssTokenName].join("-");
+                const configValue = `var(--${cssVariable})`;
+                config.textColor[`on-${name}`] = configValue;
+            }
+            return;
+        }
+        if (tokenName.startsWith("foreground")) {
+            const name = cssTokenName.replace("foreground-", "");
+            config.textColor[name] = configValue;
+            return;
+        }
+        if (tokenName.startsWith("border")) {
+            const name = cssTokenName.replace("border-", "");
+            config.borderColor[name] = configValue;
+            return;
+        }
+        config.backgroundColor[cssTokenName] = configValue;
+        config.borderColor[cssTokenName] = configValue;
+        config.textColor[cssTokenName] = configValue;
+        config.colors[cssTokenName] = configValue;
+    });
+    Object.keys(definition.unit).forEach((tokenName) => {
+        const cssTokenName = camelToKebab(tokenName);
+        const cssVariable = ["rs", "unit", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        if (tokenName.startsWith("radius")) {
+            const name = cssTokenName.replace("radius-", "");
+            config.borderRadius[name] = configValue;
+            return;
+        }
+        if (tokenName.startsWith("base")) {
+            [...Array(11).keys()].forEach((i) => {
+                if (i === 0) {
+                    config.spacing["0"] = "0px";
+                }
+                else {
+                    config.spacing[`x${i}`] = `var(--rs-unit-x${i})`;
+                }
+            });
+            return;
+        }
+    });
+    Object.keys(definition.shadow).forEach((tokenName) => {
+        const cssTokenName = camelToKebab(tokenName);
+        const cssVariable = ["rs", "shadow", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        const name = cssTokenName.replace("shadow-", "");
+        config.boxShadow[name] = configValue;
+        return;
+    });
+    Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
+        if (!tokenValue.minPx)
+            return;
+        config.screens[tokenName] = `${tokenValue.minPx}px`;
+    });
+    return config;
+};

package/dist/hooks/_private/useIsDismissible.js

@@ -0,0 +1,44 @@
+/**
+ * Singleton hook to check if multiple elements can be dismissed and returns flag only for the latest one
+ * Example: Use to only close the latest opened Flyout/Modal
+ */
+import React from "react";
+import useElementId from "../useElementId.js";
+let queue = {};
+let latestId = null;
+const removeFromQueue = (id) => {
+    // Ignore removal of non-existing ids when called on component mount with active: false
+    if (!queue[id])
+        return;
+    if (id === latestId)
+        latestId = queue[id].parentId;
+    delete queue[id];
+    // Clear up all unused ids after the queue is resolved
+    if (latestId === null)
+        queue = {};
+};
+const addToQueue = (id, contentRef, triggerRef) => {
+    const parentItem = latestId ? queue[latestId] : undefined;
+    const insideParent = triggerRef?.current &&
+        parentItem &&
+        parentItem.contentRef.current?.contains(triggerRef.current);
+    if (!insideParent && triggerRef && latestId) {
+        removeFromQueue(latestId);
+    }
+    queue[id] = { parentId: latestId, triggerRef, contentRef };
+    latestId = id;
+};
+const useIsDismissible = (active = false, contentRef, triggerRef) => {
+    const id = useElementId();
+    const isDismissible = React.useCallback(() => latestId === id, [id]);
+    React.useEffect(() => {
+        if (active) {
+            addToQueue(id, contentRef, triggerRef);
+        }
+        else {
+            removeFromQueue(id);
+        }
+    }, [active, id, contentRef, triggerRef]);
+    return isDismissible;
+};
+export default useIsDismissible;