reshaped 2.2.1 → 2.3.1

package/components/Tabs/TabsContext.d.ts

@@ -15,4 +15,8 @@ export declare const useTabs: (value?: string) => {
     size: NonNullable<"medium" | "large" | undefined>;
     value?: string | undefined;
     setDefaultValue: (value: string) => void;
+    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    selection: T.SelectionState;
+    setSelection: React.Dispatch<React.SetStateAction<T.SelectionState>>;
 };

package/components/Tabs/TabsControlled.js

@@ -5,12 +5,35 @@ import { TabsProvider } from "./TabsContext.js";
 const TabsControlled = (props) => {
     const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
     const id = useElementId();
+    const elActiveRef = React.useRef(null);
+    const elPrevActiveRef = React.useRef(elActiveRef.current);
+    const [selection, setSelection] = React.useState({
+        scaleX: 0,
+        scaleY: 0,
+        left: 0,
+        top: 0,
+        status: "idle",
+    });
     const setDefaultValue = (value) => {
         if (value === undefined)
             return;
         if (onSilentChange)
             onSilentChange({ value, name });
     };
-    return (React.createElement(TabsProvider, { value: { value, name, size, direction, itemWidth, variant, onChange, id, setDefaultValue } }, children));
+    return (React.createElement(TabsProvider, { value: {
+            value,
+            name,
+            size,
+            direction,
+            itemWidth,
+            variant,
+            onChange,
+            id,
+            setDefaultValue,
+            elActiveRef,
+            elPrevActiveRef,
+            selection,
+            setSelection,
+        } }, children));
 };
 export default TabsControlled;

package/components/Tabs/TabsItem.d.ts

@@ -1,11 +1,4 @@
 import React from "react";
 import type * as T from "./Tabs.types";
-declare const _default: React.ForwardRefExoticComponent<Partial<T.ItemProps> & {
-    value: string;
-    active?: boolean | undefined;
-    visuallySelected?: boolean | undefined;
-    attributes?: (Omit<import("../../types/global").Attributes<"button", void>, "ref"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, `data-${string}` | "form" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "color" | "suppressHydrationWarning" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "type" | keyof React.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name"> & {
-        ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement> | undefined;
-    }) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<T.ItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default _default;

package/components/Tabs/TabsItem.js

@@ -8,8 +8,11 @@ import Text from "../Text/index.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
 const TabsItem = (props, ref) => {
-    const { value, children, icon, active, visuallySelected, attributes } = props;
-    const { onChange, panelId, name, size } = useTabs(value);
+    const { value, children, icon, href, attributes } = props;
+    const { onChange, panelId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, } = useTabs(value);
+    const itemRef = React.useRef(null);
+    const active = tabsValue === value;
+    const visuallySelected = active && selection.status === "idle";
     const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"]);
     const isFormControl = !!name;
     const tabAttributes = {
@@ -17,12 +20,27 @@ const TabsItem = (props, ref) => {
         tabIndex: active ? 0 : -1,
         "aria-selected": active,
     };
+    const updateRefs = React.useCallback(() => {
+        if (!("current" in itemRef)) {
+            throw new Error("Reshaped, Tabs: TabItem is expecting an object ref format but received a function ref");
+        }
+        elPrevActiveRef.current = elActiveRef.current;
+        elActiveRef.current = itemRef.current;
+    }, [elActiveRef, elPrevActiveRef]);
     const handleChange = () => {
+        if (href && !onChange)
+            return;
+        updateRefs();
         if (onChange)
             onChange({ value, name });
     };
-    return (React.createElement("div", { className: itemClassNames, ref: ref, role: "presentation" },
-        React.createElement(Actionable, { insetFocus: true, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: Object.assign(Object.assign(Object.assign({}, attributes), (!isFormControl && tabAttributes)), { "aria-controls": panelId }) },
+    React.useEffect(() => {
+        if (!active)
+            return;
+        updateRefs();
+    }, [active, updateRefs]);
+    return (React.createElement("div", Object.assign({}, attributes, { className: itemClassNames, ref: itemRef, role: "presentation" }),
+        React.createElement(Actionable, { ref: ref, href: href, insetFocus: true, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: Object.assign(Object.assign({}, (!isFormControl && tabAttributes)), { "aria-controls": panelId }) },
             name && (React.createElement(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })),
             React.createElement("span", { className: s.buttonContent },
                 icon && React.createElement(Icon, { svg: icon, className: s.icon, size: 4 }),

package/components/Tabs/TabsList.js

@@ -11,20 +11,18 @@ import IconChevronLeft from "../../icons/ChevronLeft.js";
 import TabsItem from "./TabsItem.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
+const findParentItem = (el, rootEl) => {
+    if (el === rootEl || !el)
+        return null;
+    if (el.classList.contains(s.listItem))
+        return el;
+    return findParentItem(el.parentElement, rootEl);
+};
 const TabsList = (props) => {
     const { children, className, attributes } = props;
-    const { value, setDefaultValue, itemWidth, variant, name, direction, size } = useTabs();
+    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, } = useTabs();
     const [rtl] = useRTL();
     const elScrollableRef = React.useRef(null);
-    const elActiveRef = React.useRef(null);
-    const elPrevActiveRef = React.useRef(elActiveRef.current);
-    const [selection, setSelection] = React.useState({
-        scaleX: 0,
-        scaleY: 0,
-        left: 0,
-        top: 0,
-        status: "idle",
-    });
     const [cutOffSide, setCutOffSide] = React.useState(null);
     const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], cutOffSide && s[`--cut-off-${cutOffSide}`], className);
     const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
@@ -46,11 +44,16 @@ const TabsList = (props) => {
         setSelection((selectionStyle) => (Object.assign(Object.assign({}, selectionStyle), { status: "idle" })));
     };
     const getElementSelectionStyle = React.useCallback((el) => {
+        if (!elScrollableRef.current)
+            return null;
+        const itemEl = findParentItem(el, elScrollableRef.current);
+        if (!itemEl)
+            return null;
         return {
-            scaleX: el.clientWidth,
-            scaleY: el.clientHeight,
-            top: el.offsetTop,
-            left: el.offsetLeft,
+            scaleX: itemEl.clientWidth,
+            scaleY: itemEl.clientHeight,
+            top: itemEl.offsetTop,
+            left: itemEl.offsetLeft,
         };
     }, []);
     const { ref: hotkeysRef } = useHotkeys({
@@ -89,16 +92,20 @@ const TabsList = (props) => {
     }, [value]);
     useIsomorphicLayoutEffect(() => {
         // Do not update selection on mount, until we receive new activeId
-        if (elActiveRef.current === elPrevActiveRef.current)
+        if (!elPrevActiveRef.current || elPrevActiveRef.current === elActiveRef.current)
             return;
         const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
+        if (!selectionStyle)
+            return;
         setSelection(Object.assign(Object.assign({}, selectionStyle), { status: "prepared" }));
     }, [value, getElementSelectionStyle]);
     useIsomorphicLayoutEffect(() => {
-        if (selection.status === "prepared") {
-            const selectionStyle = getElementSelectionStyle(elActiveRef.current);
-            setSelection(Object.assign(Object.assign({}, selectionStyle), { status: "animated" }));
-        }
+        if (selection.status !== "prepared" || !elActiveRef.current)
+            return;
+        const selectionStyle = getElementSelectionStyle(elActiveRef.current);
+        if (!selectionStyle)
+            return;
+        setSelection(Object.assign(Object.assign({}, selectionStyle), { status: "animated" }));
     }, [selection]);
     useIsomorphicLayoutEffect(() => {
         const elScrollable = elScrollableRef.current;
@@ -135,19 +142,10 @@ const TabsList = (props) => {
     return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }),
         React.createElement("div", { className: s.inner, ref: elScrollableRef },
             React.createElement("div", { className: s.list, role: "tablist", ref: hotkeysRef },
-                React.Children.map(children, (child) => {
-                    if (!child || child.type !== TabsItem)
-                        return React.createElement("div", { className: s.item }, child);
-                    const childValue = child.props.value;
-                    const isActive = childValue === value;
-                    return (React.createElement(TabsItem, Object.assign({}, child.props, { ref: (node) => {
-                            if (!node)
-                                return;
-                            if (isActive) {
-                                elPrevActiveRef.current = elActiveRef.current || node;
-                                elActiveRef.current = node;
-                            }
-                        }, value: childValue, key: childValue, active: isActive, visuallySelected: isActive && selection.status === "idle" })));
+                React.Children.map(children, (child, index) => {
+                    if (!child)
+                        return null;
+                    return (React.createElement("div", { className: s.listItem, key: child.props.value || child.key || index }, child));
                 }),
                 React.createElement("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
                         "--rs-tab-selection-x": selection.left,

package/components/Tabs/tests/Tabs.stories.d.ts

@@ -10,4 +10,5 @@ export declare const composition: () => React.JSX.Element;
 export declare const icon: () => React.JSX.Element;
 export declare const equalWidth: () => React.JSX.Element;
 export declare const selection: () => React.JSX.Element;
+export declare const navigation: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;

package/components/Tabs/tests/Tabs.stories.js

@@ -211,6 +211,23 @@ export const selection = () => (<Example>
 			</Tabs>
 		</Example.Item>
 	</Example>);
+export const navigation = () => (<Example>
+		<Example.Item title="href, no onChange">
+			<Tabs value="2">
+				<Tabs.List>
+					<Tabs.Item value="1" href="#item-1" icon={IconZap}>
+						Item 1
+					</Tabs.Item>
+					<Tabs.Item value="2" href="#item-2" icon={IconZap}>
+						Long item 2
+					</Tabs.Item>
+					<Tabs.Item value="3" href="#item-3" icon={IconZap}>
+						Very long item 3
+					</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
 export const edgeCases = () => (<Example>
 		<Example.Item title="Viewport overflow">
 			<Tabs>

package/components/Toast/ToastContainer.js

@@ -53,6 +53,7 @@ const ToastContainer = (props) => {
         if (wrapperRef.current) {
             setToastHeight(wrapperRef.current.clientHeight);
         }
+        console.log("show");
         show(id);
         startTimer();
     }, [show, id, startTimer]);

package/components/Toast/ToastProvider.js

@@ -27,6 +27,8 @@ const toastReducer = (state, action) => {
             nextState = Object.assign({}, state);
             positions.forEach((position) => {
                 nextState[position] = nextState[position].map((item) => {
+                    if (item.status !== "entering")
+                        return item;
                     return item.id === showId ? Object.assign(Object.assign({}, item), { status: "entered" }) : item;
                 });
             });
@@ -52,6 +54,7 @@ const ToastProvider = (props) => {
     const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
     const add = React.useCallback((toastProps) => {
         const id = generateId();
+        console.log("add");
         dispatch({ type: "add", payload: { toastProps, id } });
         return id;
     }, []);
@@ -59,6 +62,7 @@ const ToastProvider = (props) => {
         dispatch({ type: "show", payload: { id } });
     }, []);
     const hide = React.useCallback((id) => {
+        console.log("hide");
         dispatch({ type: "hide", payload: { id } });
     }, []);
     const remove = React.useCallback((id) => {

package/components/Toast/tests/Toast.stories.js

@@ -20,6 +20,7 @@ const Base = () => {
                     <Button onClick={() => toast.hide(id)}>Show</Button>,
                 ],
             });
+            toast.hide(id);
         }}>
 			Show toast
 		</Button>);

package/components/_private/Flyout/FlyoutContent.js

@@ -3,11 +3,12 @@ import React from "react";
 import { classNames } from "../../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../Portal/index.js";
+import { getClosestScrollableParent } from "../../../utilities/dom.js";
 import { useFlyoutContext } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -37,6 +38,7 @@ const FlyoutContent = (props) => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp },
         React.createElement("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames }), children)));
-    return React.createElement(Portal, null, content);
+    const closestScrollable = getClosestScrollableParent(triggerElRef.current);
+    return (React.createElement(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable } }, content));
 };
 export default FlyoutContent;

package/components/_private/Flyout/FlyoutTrigger.js

@@ -24,7 +24,7 @@ const FlyoutTrigger = (props) => {
         childrenAttributes.onMouseEnter = handleMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
     }
-    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
+    if (triggerType === "hover" || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
         childrenAttributes["aria-describedby"] = id;
     }

package/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -12,5 +12,6 @@ export declare const modeDialogHover: () => React.JSX.Element;
 export declare const modeActionMenuHover: () => React.JSX.Element;
 export declare const modeContentMenuHover: () => React.JSX.Element;
 export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
+export declare const testInsideScrollArea: () => React.JSX.Element;
 export declare const widthTrigger: () => React.JSX.Element;
 export declare const scopedTheming: () => React.JSX.Element;

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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     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";
@@ -18,7 +19,9 @@ 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}>{position}</button>}</Flyout.Trigger>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>{position}</Button>}
+			</Flyout.Trigger>
 			<Flyout.Content>
 				<div style={{
             background: "var(--rs-color-background-elevation-overlay)",
@@ -92,6 +95,30 @@ export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" wi
 		<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-unit-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 widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
 		<Flyout.Trigger>
 			{(attributes) => <button {...attributes}>Trigger with long text</button>}

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

@@ -1,9 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import type * as T from "./Portal.types";
-export declare const usePortal: () => T.Context;
+export declare const usePortalScope: () => T.Context;
 /**
  * Disclaimer: Works only for components that don't show the portal immediately
  * That gives Portal time to receive scope on first render
  */
-declare const PortalProvider: (props: T.Props) => JSX.Element;
-export default PortalProvider;
+declare const Portal: {
+    (props: T.Props): JSX.Element;
+    Scope: typeof PortalScope;
+};
+declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): React.JSX.Element;
+export default Portal;

package/components/_private/Portal/Portal.js

@@ -2,20 +2,32 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
-const PortalContext = React.createContext({ scopeRef: undefined });
-export const usePortal = () => {
-    return React.useContext(PortalContext);
+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 PortalProvider = (props) => {
-    var _a;
-    const { children, scopeRef } = props;
-    const portal = usePortal();
-    const nextScopeRef = scopeRef || portal.scopeRef;
-    return ReactDOM.createPortal(React.createElement(PortalContext.Provider, { value: { scopeRef: nextScopeRef } },
-        React.createElement(Theme, null, children)), ((_a = portal.scopeRef) === null || _a === void 0 ? void 0 : _a.current) || document.body);
+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(React.createElement(Theme, null, children), (nextScopeRef === null || nextScopeRef === void 0 ? void 0 : nextScopeRef.current) || document.body);
 };
-export default PortalProvider;
+function PortalScope(props) {
+    const { children } = props;
+    const ref = React.useRef(null);
+    return (React.createElement(PortalScopeContext.Provider, { value: { scopeRef: ref } }, children(ref)));
+}
+Portal.Scope = PortalScope;
+export default Portal;

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

@@ -1,6 +1,11 @@
 import React from "react";
 export type Props = {
     children?: React.ReactNode;
-    scopeRef?: React.RefObject<HTMLElement | null>;
+    targetRef?: React.RefObject<HTMLElement | null>;
+};
+export type ScopeProps<T extends HTMLElement> = {
+    children: (ref: React.RefObject<T>) => React.ReactNode;
+};
+export type Context = {
+    scopeRef: React.RefObject<HTMLElement | null>;
 };
-export type Context = Pick<Props, "scopeRef">;

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

@@ -1,2 +1,2 @@
-export { default, usePortal } from "./Portal";
+export { default } from "./Portal";
 export type { Props as PortalProps } from "./Portal.types";

package/components/_private/Portal/index.js

@@ -1 +1 @@
-export { default, usePortal } from "./Portal.js";
+export { default } from "./Portal.js";

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

@@ -3,16 +3,15 @@ import Portal from "../index.js";
 export default { title: "Utilities/Internal/Portal" };
 export const base = () => {
     const ref = React.useRef(null);
-    return (<div style={{ border: "2px solid #333", padding: 16 }}>
-			App
-			<Portal scopeRef={ref}>
-				<div ref={ref} style={{ border: "2px solid green", padding: 16 }}>
-					Portal scope
-					<div style={{ border: "2px solid red", padding: 16 }}>
-						Stays in red
-						<Portal>Ported to green</Portal>
-					</div>
-				</div>
-			</Portal>
-		</div>);
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return (<>
+			<div style={{ border: "2px solid #333", padding: 16 }}>
+				App
+				{mounted && <Portal targetRef={ref}>Ported to green</Portal>}
+			</div>
+			<div ref={ref} style={{ border: "2px solid green", padding: 16 }}/>
+		</>);
 };

package/config/tailwind.d.ts

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

package/config/tailwind.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTheme = void 0;
 const reshaped_1 = __importDefault(require("../cli/theming/definitions/reshaped"));
 const base_1 = __importDefault(require("../cli/theming/definitions/base"));
-const string_1 = require("../cli/utilities/string");
-const color_1 = require("../cli/utilities/color");
-const mergeDefinitions_1 = __importDefault(require("../cli/theming/utilities/mergeDefinitions"));
+const string_1 = require("../utilities/string");
+const color_1 = require("../utilities/color");
+const mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));
 const getTheme = (theme) => {
     const config = {
         backgroundColor: {},

package/hooks/_private/useFlyout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import useRTL from "../useRTL.js";
-import { usePortal } from "../../components/_private/Portal/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
+import { getClosestScrollableParent } from "../../utilities/dom.js";
 const SCREEN_OFFSET = 16;
 const topPos = ["top-start", "top", "top-end"];
 const bottomPos = ["bottom-start", "bottom", "bottom-end"];
@@ -51,8 +51,8 @@ const fullyVisible = (bounds) => {
 /**
  * Calculate styles for the current position
  */
-const calculatePosition = (originBounds, targetBounds, options) => {
-    const { position: passedPosition, rtl, width, isInsidePortal } = options;
+const calculatePosition = (originBounds, targetBounds, parentOffset, options) => {
+    const { position: passedPosition, rtl, width } = options;
     let left = 0;
     let top = 0;
     let position = passedPosition;
@@ -116,9 +116,8 @@ const calculatePosition = (originBounds, targetBounds, options) => {
     if (top === undefined || left === undefined) {
         throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
     }
-    // When rendered inside portal, we don't need to accommodate for the page scroll
-    top = Math.round(top + (isInsidePortal ? 0 : window.pageYOffset || 0));
-    left = Math.round(left + (isInsidePortal ? 0 : window.pageXOffset || 0));
+    top = Math.round(top + (window.scrollY || 0) - parentOffset.top);
+    left = Math.round(left + (window.scrollX || 0) - parentOffset.left);
     let widthStyle = Math.ceil(targetBounds.width);
     const height = Math.ceil(targetBounds.height);
     if (width === "full") {
@@ -175,7 +174,13 @@ const flyout = (origin, target, options) => {
     }
     document.body.appendChild(targetClone);
     const targetBounds = targetClone.getBoundingClientRect();
-    let calculated = calculatePosition(originBounds, targetBounds, options);
+    const scrollableParent = getClosestScrollableParent(origin);
+    const boundsDelta = scrollableParent.getBoundingClientRect();
+    const parentOffset = {
+        top: boundsDelta.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
+        left: boundsDelta.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
+    };
+    let calculated = calculatePosition(originBounds, targetBounds, parentOffset, options);
     if (!fullyVisible(calculated.styles) && !forcePosition) {
         const order = getPositionOrder(position);
         const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
@@ -183,7 +188,7 @@ const flyout = (origin, target, options) => {
             const { fullWidth } = extraOptions;
             testOrder.some((currentPosition) => {
                 const calculateOptions = Object.assign(Object.assign({}, options), { width: fullWidth ? "full" : options.width, position: currentPosition });
-                const tested = calculatePosition(originBounds, targetBounds, calculateOptions);
+                const tested = calculatePosition(originBounds, targetBounds, parentOffset, calculateOptions);
                 if (fullyVisible(tested.styles)) {
                     calculated = tested;
                     return true;
@@ -202,7 +207,8 @@ const flyout = (origin, target, options) => {
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            return Object.assign(Object.assign({}, state), { status: "rendered" });
+            // Disable events before it's positioned to avoid mouseleave getting triggered
+            return Object.assign(Object.assign({}, state), { status: "rendered", styles: { pointerEvents: "none" } });
         case "position":
             return Object.assign(Object.assign({}, state), { status: state.status === "visible" ? "visible" : "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
         case "show":
@@ -217,8 +223,6 @@ const flyoutReducer = (state, action) => {
 };
 const useFlyout = (originRef, targetRef, options) => {
     const { position: defaultPosition = "bottom", forcePosition, width } = options;
-    const { scopeRef } = usePortal();
-    const isInsidePortal = !!(scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current);
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -245,10 +249,9 @@ const useFlyout = (originRef, targetRef, options) => {
             position: defaultPosition,
             forcePosition,
             rtl: isRTL,
-            isInsidePortal,
         });
         dispatch({ type: "position", payload: nextFlyoutData });
-    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width, isInsidePortal]);
+    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
     React.useEffect(() => {
         if (state.status === "rendered")
             updatePosition();