reshaped 3.0.7 → 3.0.8-rc.1

package/dist/components/Modal/Modal.js

@@ -39,7 +39,7 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, containerRef, className, attributes, } = props;
+    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, className, attributes, } = props;
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
@@ -164,7 +164,7 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
             const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));

package/dist/components/Modal/Modal.types.d.ts

@@ -28,4 +28,4 @@ export type Props = {
     attributes?: G.Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement | null>;
     };
-} & Pick<OverlayProps, "onClose" | "onOpen" | "active" | "containerRef">;
+} & Pick<OverlayProps, "onClose" | "onOpen" | "active">;

package/dist/components/Modal/tests/Modal.stories.d.ts

@@ -19,6 +19,5 @@ export declare const size: () => React.JSX.Element;
 export declare const padding: () => React.JSX.Element;
 export declare const composition: () => React.JSX.Element;
 export declare const overlay: () => React.JSX.Element;
-export declare const customContainer: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;
 export declare const trapFocusEdgeCases: () => React.JSX.Element;

package/dist/components/Modal/tests/Modal.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
 import { Example } from "../../../utilities/storybook/index.js";
 import Modal from "../index.js";
 import View from "../../View/index.js";
@@ -8,7 +7,6 @@ import Dismissible from "../../Dismissible/index.js";
 import DropdownMenu from "../../DropdownMenu/index.js";
 import Switch from "../../Switch/index.js";
 import TextField from "../../TextField/index.js";
-import Reshaped from "../../Reshaped/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 import Radio from "../../Radio/index.js";
 export default {
@@ -102,40 +100,6 @@ export const overlay = () => (<Example>
 			<View height="1000px"/>
 		</Example.Item>
 	</Example>);
-export const customContainer = () => {
-    const toggle = useToggle();
-    const containerRef = React.useRef(null);
-    const shadowRootRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!shadowRootRef.current)
-            return;
-        if (shadowRootRef.current.shadowRoot)
-            return;
-        const shadowRoot = shadowRootRef.current?.attachShadow({ mode: "open" });
-        const root = createRoot(shadowRoot);
-        root.render(<Reshaped theme="reshaped">
-				<Modal active containerRef={{ current: shadowRootRef.current?.shadowRoot }}>
-					Modal content
-				</Modal>
-			</Reshaped>);
-    }, []);
-    return (<Example>
-			<Example.Item title="inside an element">
-				<View backgroundColor="neutral-faded" height="400px" borderRadius="medium" attributes={{ ref: containerRef }} padding={4} overflow="auto">
-					<View height="5000px">
-						<Button onClick={toggle.activate}>Open</Button>
-					</View>
-				</View>
-				<Modal onClose={toggle.deactivate} active={toggle.active} containerRef={containerRef} position="end">
-					Modal content
-				</Modal>
-			</Example.Item>
-
-			<Example.Item title="shadow DOM">
-				<div ref={shadowRootRef} style={{ height: 400 }}/>
-			</Example.Item>
-		</Example>);
-};
 export const edgeCases = () => {
     const menuModalToggle = useToggle();
     const scrollModalToggle = useToggle();

package/dist/components/Overlay/Overlay.js

@@ -12,14 +12,14 @@ import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
-    const { active, children, transparent, onClose, onOpen, containerRef, className, attributes } = props;
-    const clickThrough = transparent === true && !containerRef?.current;
-    const opacity = transparent === true ? 0 : (1 - (transparent || 0)) * 0.7;
+    const { active, children, transparent, onClose, onOpen, className, attributes } = props;
+    const clickThrough = transparent === true;
+    const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
     const [mounted, setMounted] = React.useState(false);
     const [animated, setAnimated] = React.useState(false);
     const contentRef = React.useRef(null);
     const isMouseDownValidRef = React.useRef(false);
-    const { lockScroll, unlockScroll } = useScrollLock({ ref: containerRef });
+    const { lockScroll, unlockScroll } = useScrollLock();
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     const isDismissible = useIsDismissible(active, contentRef);
@@ -101,6 +101,6 @@ const Overlay = (props) => {
     }, []);
     if (!rendered || !mounted)
         return null;
-    return (_jsx(Portal, { targetRef: containerRef, children: _jsx(Portal.Scope, { children: (ref) => (_jsx("div", { ...attributes, ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) }) }));
+    return (_jsx(Portal, { children: _jsx(Portal.Scope, { children: (ref) => (_jsx("div", { ...attributes, ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) }) }));
 };
 export default Overlay;

package/dist/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;inset:0;position:fixed;z-index:var(--rs-z-index-overlay)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity))}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,transform}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}
+.root{overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;inset:0;opacity:0;position:fixed;z-index:var(--rs-z-index-overlay)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,transform,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}

package/dist/components/Overlay/Overlay.types.d.ts

@@ -8,7 +8,6 @@ export type Props = {
     active?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
-    containerRef?: React.RefObject<HTMLElement | ShadowRoot>;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Overlay/tests/Overlay.stories.d.ts

@@ -9,3 +9,4 @@ declare const _default: {
 };
 export default _default;
 export declare const base: () => import("react").JSX.Element;
+export declare const shadowDom: () => import("react").JSX.Element;

package/dist/components/Overlay/tests/Overlay.stories.js

@@ -1,6 +1,8 @@
+import { createRoot } from "react-dom/client";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
+import Reshaped from "../../Reshaped/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/Overlay",
@@ -32,3 +34,25 @@ export const base = () => {
 			</Example.Item>
 		</Example>);
 };
+class CustomElement extends window.HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        if (!this.shadowRoot)
+            return;
+        const overlay = (<Reshaped>
+				<Overlay active>Content</Overlay>
+			</Reshaped>);
+        const root = createRoot(this.shadowRoot);
+        root.render(overlay);
+    }
+}
+window.customElements.define("custom-element", CustomElement);
+export const shadowDom = () => {
+    return (<Example>
+			<Example.Item>
+				{/* @ts-ignore */}
+				<custom-element />
+			</Example.Item>
+		</Example>);
+};

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

@@ -9,12 +9,14 @@ import useHotkeys from "../../../hooks/useHotkeys.js";
 import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
 import useRTL from "../../../hooks/useRTL.js";
 import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
+import { checkKeyboardMode } from "../../../utilities/a11y/keyboardMode.js";
 import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
 import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext } from "./Flyout.context.js";
 const FlyoutRoot = (props) => {
     const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const resolvedActive = disabled === true ? false : passedActive;
     const parentFlyoutContext = useFlyoutContext();
     const parentFlyoutTriggerContext = useFlyoutTriggerContext();
     const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
@@ -37,7 +39,7 @@ const FlyoutRoot = (props) => {
     const flyout = useFlyout(triggerElRef, flyoutElRef, {
         width,
         position: passedPosition,
-        defaultActive: passedActive,
+        defaultActive: resolvedActive,
         container: containerRef?.current,
         forcePosition,
     });
@@ -53,15 +55,15 @@ const FlyoutRoot = (props) => {
      * Called from the internal actions
      */
     const handleOpen = React.useCallback(() => {
-        const canOpen = !lockedRef.current && status === "idle" && !disabled;
+        const canOpen = !lockedRef.current && status === "idle";
         if (!canOpen)
             return;
         onOpen?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status, disabled]);
+    }, [status]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
-        const canClose = !isLocked && status !== "idle" && !disabled;
+        const canClose = !isLocked && (status !== "idle" || disabled);
         if (!canClose)
             return;
         onClose?.();
@@ -69,11 +71,13 @@ const FlyoutRoot = (props) => {
             parentFlyoutContext?.handleClose?.();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status, isDismissible, triggerType, disabled]);
+    [status, isDismissible, triggerType]);
     /**
      * Trigger event handlers
      */
     const handleBlur = React.useCallback((e) => {
+        if (!checkKeyboardMode())
+            return;
         const focusedContent = flyoutElRef.current?.contains(e.relatedTarget);
         if (
         // Empty flyouts don't move the focus so they have to be closed on blur
@@ -87,6 +91,8 @@ const FlyoutRoot = (props) => {
         handleClose();
     }, [handleClose, triggerType, trapFocusMode]);
     const handleFocus = React.useCallback(() => {
+        if (!checkKeyboardMode())
+            return;
         handleOpen();
     }, [handleOpen]);
     const handleMouseEnter = React.useCallback(() => {
@@ -111,12 +117,12 @@ const FlyoutRoot = (props) => {
     const handleContentMouseDown = () => (lockedBlurEffects.current = true);
     const handleContentMouseUp = () => (lockedBlurEffects.current = false);
     const handleTransitionStart = React.useCallback((e) => {
-        if (!passedActive)
+        if (!resolvedActive)
             return;
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
             return;
         transitionStartedRef.current = true;
-    }, [passedActive]);
+    }, [resolvedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
             return;
@@ -129,10 +135,12 @@ const FlyoutRoot = (props) => {
      * Control the display based on the props
      */
     useIsomorphicLayoutEffect(() => {
-        if (passedActive) {
+        if (resolvedActive) {
             render();
             return;
         }
+        if (disabled)
+            cooldown.cool();
         /**
          * Check that transitions are enabled and it has been triggered on tooltip open
          * - keyboard focus navigation could move too fast and ignore the transitions completely
@@ -148,7 +156,7 @@ const FlyoutRoot = (props) => {
             // In case transitions are disabled globally - remove from the DOM immediately
             remove();
         }
-    }, [passedActive, render, hide, remove, disableHideAnimation]);
+    }, [resolvedActive, render, hide, remove, disableHideAnimation, disabled]);
     React.useEffect(() => {
         // Wait after positioning before show is triggered to animate flyout from the right side
         if (status === "positioned")

package/dist/components/_private/Flyout/utilities/cooldown.js

@@ -11,7 +11,7 @@ class Cooldown {
             this.status = "cold";
             if (currentTimer === this.timer)
                 this.timer = undefined;
-        }, 1000);
+        }, 500);
         this.timer = currentTimer;
     };
 }

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

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
+import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
     return React.useContext(PortalScopeContext);
@@ -13,6 +14,10 @@ export const usePortalScope = () => {
  */
 const Portal = (props) => {
     const { children, targetRef } = props;
+    const rootRef = React.useRef(null);
+    const rootNode = rootRef.current?.getRootNode();
+    const isShadowDom = rootNode instanceof ShadowRoot;
+    const defaultTargetEl = isShadowDom ? rootNode : document.body;
     /**
      * Check for parent portal to render inside it
      * To avoid z-iondex issues
@@ -22,8 +27,9 @@ const Portal = (props) => {
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
+    const targetEl = nextScopeRef?.current || defaultTargetEl;
     /* Preserve the current theme when rendered in body */
-    return ReactDOM.createPortal(_jsx(Theme, { children: children }), nextScopeRef?.current || document.body);
+    return (_jsxs(_Fragment, { children: [ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl), _jsx("div", { ref: rootRef, className: s.root })] }));
 };
 function PortalScope(props) {
     const { children } = props;

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

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

package/dist/hooks/useScrollLock.d.ts

@@ -1,7 +1,4 @@
-import React from "react";
-declare const useScrollLock: (args?: {
-    ref?: React.RefObject<HTMLElement | ShadowRoot>;
-}) => {
+declare const useScrollLock: () => {
     scrollLocked: boolean;
     lockScroll: () => void;
     unlockScroll: () => void;

package/dist/hooks/useScrollLock.js

@@ -17,16 +17,11 @@ const getScrollbarWidth = (() => {
         return scrollbarWidth;
     };
 })();
-const useScrollLock = (args) => {
-    const { ref } = args || {};
+const useScrollLock = () => {
     const [locked, setLocked] = React.useState(false);
     const overflowStyleRef = React.useRef();
     const isOverflowingRef = React.useRef(false);
-    let targetEl = document.body;
-    if (ref?.current) {
-        targetEl =
-            ref?.current instanceof ShadowRoot ? ref?.current?.host : ref.current;
-    }
+    const targetEl = document.body;
     const lockScroll = React.useCallback(() => {
         const rect = targetEl.getBoundingClientRect();
         isOverflowingRef.current = rect.left + rect.right < window.innerWidth;

package/dist/utilities/a11y/TrapFocus.js

@@ -112,9 +112,8 @@ class TrapFocus {
         if (!this.trapped || !this.chainId)
             return;
         this.trapped = false;
-        if (this.trigger) {
-            const preventScroll = withoutFocusReturn || !checkKeyboardMode();
-            this.trigger.focus({ preventScroll });
+        if (this.trigger && !withoutFocusReturn) {
+            this.trigger.focus({ preventScroll: !checkKeyboardMode() });
         }
         TrapFocus.chain.removePreviousTill(this.chainId, (item) => document.body.contains(item.data.trigger));
         this.mutationObserver?.disconnect();

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": "3.0.7",
+	"version": "3.0.8-rc.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",