reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -6,6 +6,6 @@
  * 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 type * as T from "./Aligner.types";
+import type * as T from "./Aligner.types.js";
 declare const Aligner: React.FC<T.Props>;
 export default Aligner;

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../../types/global";
+import type { Attributes } from "../../../types/global.js";
 type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
 export type Props = {
     /** Node for inserting children components */

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

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

package/dist/components/_private/Aligner/index.js

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

package/dist/components/_private/Freeze/Freeze.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Freeze.types.js";
+declare const Freeze: React.FC<T.Props>;
+export default Freeze;

package/dist/components/_private/Freeze/Freeze.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import s from "./Freeze.module.css";
+/**
+ * Transitions never commit an already visible Suspense boundary switching to its fallback,
+ * so we stop freezing if the frozen render isn't committed in time instead of blocking them forever
+ */
+const COMMIT_TIMEOUT = 100;
+const infinitePromise = new Promise(() => { });
+const Suspend = (props) => {
+    const state = props.stateRef.current;
+    if (state.expired)
+        return null;
+    if (state.committed)
+        throw infinitePromise;
+    state.pending ??= new Promise((resolve) => {
+        setTimeout(() => {
+            state.expired = !state.committed;
+            resolve();
+        }, COMMIT_TIMEOUT);
+    });
+    throw state.pending;
+};
+const Freeze = (props) => {
+    const { frozen, children } = props;
+    const stateRef = React.useRef({});
+    const elRef = React.useRef(null);
+    // Insertion effect is the earliest opportunity to undo the Suspense display: none
+    React.useInsertionEffect(() => {
+        if (!frozen) {
+            stateRef.current = {};
+            return;
+        }
+        if (stateRef.current.expired)
+            return;
+        stateRef.current.committed = true;
+        elRef.current?.style.removeProperty("display");
+    }, [frozen]);
+    return (_jsx(React.Suspense, { children: _jsxs("div", { className: s.root, ref: (el) => {
+                if (el)
+                    elRef.current = el;
+            }, children: [frozen && _jsx(Suspend, { stateRef: stateRef }), children] }) }));
+};
+Freeze.displayName = "Freeze";
+export default Freeze;

package/dist/components/_private/Freeze/Freeze.module.css

@@ -0,0 +1 @@
+.root{display:contents}

package/dist/components/_private/Freeze/Freeze.types.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+export type Props = {
+    /** Stop committing updates to the children and keep their last rendered output on the screen */
+    frozen: boolean;
+    /** Node for inserting children */
+    children?: React.ReactNode;
+};
+export type State = {
+    /** Frozen render was committed, children stay suspended until unfrozen */
+    committed?: boolean;
+    /** Frozen render wasn't committed in time, children render without freezing */
+    expired?: boolean;
+    pending?: Promise<void>;
+};

package/dist/components/_private/Freeze/Freeze.types.js

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

package/dist/components/_private/Freeze/index.d.ts

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

package/dist/components/_private/Freeze/index.js

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

package/dist/components/_private/Freeze/tests/Freeze.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const transition: StoryObj;

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import Freeze from "../../../../components/_private/Freeze/index.js";
+import Button from "../../../../components/Button/index.js";
+import View from "../../../../components/View/index.js";
+export default { title: "Internal/Freeze" };
+const ValueContext = React.createContext(0);
+const ContextValue = () => {
+    const value = React.useContext(ValueContext);
+    return <div data-testid="context-value">Context: {value}</div>;
+};
+const Demo = (props) => {
+    const [frozen, setFrozen] = React.useState(false);
+    const [value, setValue] = React.useState(0);
+    const update = (nextFrozen) => {
+        const apply = () => {
+            setFrozen(nextFrozen);
+            setValue((prev) => prev + 1);
+        };
+        if (props.transition) {
+            React.startTransition(apply);
+        }
+        else {
+            apply();
+        }
+    };
+    return (<View gap={4}>
+			<View direction="row" gap={2}>
+				<Button onClick={() => update(true)}>Freeze and update</Button>
+				<Button onClick={() => update(false)}>Unfreeze and update</Button>
+			</View>
+
+			<div data-testid="frozen-state">{frozen ? "Frozen" : "Active"}</div>
+
+			<ValueContext.Provider value={value}>
+				<Freeze frozen={frozen}>
+					<div data-testid="prop-value">Prop: {value}</div>
+					<ContextValue />
+				</Freeze>
+			</ValueContext.Provider>
+		</View>);
+};
+export const base = {
+    name: "base",
+    render: () => <Demo />,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const [freezeButton, unfreezeButton] = canvas.getAllByRole("button");
+        await userEvent.click(freezeButton);
+        // Updates coming in the same render as freezing are ignored
+        expect(canvas.getByTestId("frozen-state")).toHaveTextContent("Frozen");
+        expect(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 0");
+        expect(canvas.getByTestId("context-value")).toHaveTextContent("Context: 0");
+        // Frozen content stays visible even though it's suspended
+        expect(canvas.getByTestId("prop-value")).toBeVisible();
+        expect(canvas.getByTestId("context-value")).toBeVisible();
+        await userEvent.click(freezeButton);
+        expect(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 0");
+        await userEvent.click(unfreezeButton);
+        await waitFor(() => {
+            expect(canvas.getByTestId("frozen-state")).toHaveTextContent("Active");
+            expect(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 3");
+            expect(canvas.getByTestId("context-value")).toHaveTextContent("Context: 3");
+        });
+        expect(canvas.getByTestId("prop-value")).toBeVisible();
+    },
+};
+export const transition = {
+    name: "test: freezing in a transition",
+    render: () => <Demo transition/>,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const [freezeButton] = canvas.getAllByRole("button");
+        await userEvent.click(freezeButton);
+        // Transitions can't commit a frozen render, so they shouldn't be blocked by it
+        await waitFor(() => {
+            expect(canvas.getByTestId("frozen-state")).toHaveTextContent("Frozen");
+            expect(canvas.getByTestId("prop-value")).toHaveTextContent("Prop: 1");
+        });
+        expect(canvas.getByTestId("prop-value")).toBeVisible();
+    },
+};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Portal.types";
+import type * as T from "./Portal.types.js";
 export declare const usePortalScope: () => T.Context;
 /**
  * Disclaimer: Works only for components that don't show the portal immediately

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom";
-import Theme from "../../../components/Theme";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
-import useToggle from "../../../hooks/useToggle";
+import Theme from "../../../components/Theme/index.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import useToggle from "../../../hooks/useToggle.js";
 import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
@@ -18,9 +18,15 @@ const Portal = (props) => {
     const { children, targetRef, colorMode } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
+    const shadowRootRef = React.useRef(null);
+    /**
+     * Root element is removed after mount, so the detected shadow root is stored
+     * to keep rendering into it on the next renders
+     */
     const rootNode = rootRef.current?.getRootNode();
-    const isShadowDom = rootNode instanceof ShadowRoot;
-    const defaultTargetEl = isShadowDom ? rootNode : document.body;
+    if (rootNode instanceof ShadowRoot)
+        shadowRootRef.current = rootNode;
+    const defaultTargetEl = shadowRootRef.current ?? document.body;
     /**
      * Check for parent portal to render inside it
      * To avoid z-index issues

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ThemeProps } from "../../../components/Theme";
+import { ThemeProps } from "../../../components/Theme/index.js";
 export type Props = {
     children?: React.ReactNode;
     targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;

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

@@ -1,6 +1,6 @@
-import Portal, { PortalScope } from "./Portal";
+import Portal, { PortalScope } from "./Portal.js";
 declare const PortalRoot: typeof Portal & {
     Scope: typeof PortalScope;
 };
 export default PortalRoot;
-export type { Props as PortalProps } from "./Portal.types";
+export type { Props as PortalProps } from "./Portal.types.js";

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

@@ -1,4 +1,4 @@
-import Portal, { PortalScope } from "./Portal";
+import Portal, { PortalScope } from "./Portal.js";
 const PortalRoot = Portal;
 PortalRoot.Scope = PortalScope;
 export default PortalRoot;

package/dist/components/_private/Portal/tests/Portal.stories.d.ts

@@ -1,6 +1,8 @@
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const base: () => React.JSX.Element;
+export declare const testShadowRoot: StoryObj;

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

@@ -1,24 +1,49 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const Portal_1 = __importDefault(require("../../../../components/_private/Portal"));
-exports.default = { title: "Internal/Portal" };
-const base = () => {
-    const ref = react_1.default.useRef(null);
-    const [mounted, setMounted] = react_1.default.useState(false);
-    react_1.default.useEffect(() => {
+import React from "react";
+import root from "react-shadow";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import Portal from "../../../../components/_private/Portal/index.js";
+export default { title: "Internal/Portal" };
+export const base = () => {
+    const ref = React.useRef(null);
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
         setMounted(true);
     }, []);
     return (<>
 			<div style={{ border: "2px solid #333", padding: 16 }}>
 				App
-				{mounted && <Portal_1.default targetRef={ref}>Ported to green</Portal_1.default>}
+				{mounted && <Portal targetRef={ref}>Ported to green</Portal>}
 			</div>
 			<div ref={ref} style={{ border: "2px solid green", padding: 16 }}/>
 		</>);
 };
-exports.base = base;
+const ShadowPortal = () => {
+    const [mounted, setMounted] = React.useState(false);
+    const [count, setCount] = React.useState(0);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return (<root.div data-testid="shadow-host">
+			<button type="button" onClick={() => setCount((prev) => prev + 1)}>
+				Rerender {count}
+			</button>
+			{mounted && <Portal>Ported in shadow root</Portal>}
+		</root.div>);
+};
+export const testShadowRoot = {
+    name: "test: shadow root",
+    render: () => <ShadowPortal />,
+    play: async ({ canvas }) => {
+        const shadowRoot = canvas.getByTestId("shadow-host").shadowRoot;
+        const shadowCanvas = within(shadowRoot);
+        await waitFor(() => {
+            expect(shadowCanvas.getByText("Ported in shadow root")).toBeInTheDocument();
+        });
+        await userEvent.click(shadowCanvas.getByRole("button"));
+        await userEvent.click(shadowCanvas.getByRole("button"));
+        // Portal content should stay inside the shadow root after re-rendering
+        expect(shadowCanvas.getByText("Rerender 2")).toBeInTheDocument();
+        expect(shadowCanvas.getByText("Ported in shadow root")).toBeInTheDocument();
+        expect(document.body.textContent).not.toContain("Ported in shadow root");
+    },
+};

package/dist/components/_private/Presence/Presence.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Presence.types";
+import type * as T from "./Presence.types.js";
 declare function Presence<As extends keyof React.JSX.IntrinsicElements = "span">(props: T.Props<As>): React.JSX.Element;
 declare namespace Presence {
     var displayName: string;

package/dist/components/_private/Presence/Presence.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./Presence.module.css";
 const PresenceItem = (props) => {
     const { as, entry, status, itemClassName, enterClassName, exitClassName, onExited } = props;

package/dist/components/_private/Presence/Presence.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../../types/global";
+import type { Attributes } from "../../../types/global.js";
 export type Status = "enter" | "exit";
 export type Entry = {
     id: number;

package/dist/components/_private/Presence/index.d.ts

@@ -1 +1 @@
-export { default } from "./Presence";
+export { default } from "./Presence.js";

package/dist/components/_private/Presence/index.js

@@ -1 +1 @@
-export { default } from "./Presence";
+export { default } from "./Presence.js";

package/dist/hooks/_internal/useDrag.js

@@ -1,10 +1,10 @@
 "use client";
 import React from "react";
 import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useHotkeys from "../../hooks/useHotkeys";
-import useToggle from "../../hooks/useToggle";
-import * as keys from "../../constants/keys";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useToggle from "../../hooks/useToggle.js";
+import * as keys from "../../constants/keys.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "both" } = options || {};
     const cbRef = useHandlerRef(cb);

package/dist/hooks/_internal/useFadeSide.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import { rafThrottle } from "@reshaped/utilities/internal";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import useRTL from "../../hooks/useRTL";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useRTL from "../../hooks/useRTL.js";
 const useFadeSide = (scrollableRef, options = {}) => {
     const { disabled } = options;
     const [rtl] = useRTL();

package/dist/hooks/_internal/useSingletonHotkeys.js

@@ -173,6 +173,10 @@ const HotkeysProvider = (props) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
             return;
+        // Keys handled by an IME are not hotkeys. Safari fires the Enter that confirms
+        // a composition after compositionend, so only keyCode 229 marks it
+        if (e.isComposing || e.keyCode === 229)
+            return;
         const nextPressedMap = addPressedKey(e) ?? pressedMapRef.current;
         globalHotkeyStore.handleKeyDown(nextPressedMap, e);
     }, [addPressedKey]);

package/dist/hooks/_internal/useSingletonRTL.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
+type Context = {
+    rtl: [boolean, (state: boolean) => void];
+};
+export declare const SingletonRTLContext: React.Context<Context>;
 export declare const useSingletonRTL: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 export declare const SingletonRTLProvider: React.FC<{
     children: React.ReactNode;
     defaultRTL?: boolean;
 }>;
+export {};

package/dist/hooks/_internal/useSingletonRTL.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { isRTL } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect";
-const SingletonRTLContext = React.createContext({
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+export const SingletonRTLContext = React.createContext({
     rtl: [false, () => { }],
 });
 export const useSingletonRTL = (defaultRTL) => {

package/dist/hooks/_internal/useSingletonViewport.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as G from "../../types/global";
+import type * as G from "../../types/global.js";
 export declare const SingletonViewportProvider: React.FC<{
     children: React.ReactNode;
     defaultViewport?: G.Viewport;

package/dist/hooks/_internal/useSingletonViewport.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { breakpoints as defaultBreakpoints } from "@reshaped/theming";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const SingletonViewportContext = React.createContext({
     viewport: "s",
 });