reshaped 3.1.5 → 3.1.7

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

@@ -6,6 +6,7 @@ import View from "../../../View/index.js";
 import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
+import TextField from "../../../TextField/index.js";
 export default { title: "Utilities/Internal/Flyout" };
 const Demo = (props) => {
     const { position = "bottom-start", children, ...rest } = props;
@@ -17,7 +18,7 @@ const Demo = (props) => {
 				<div style={{
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
-            height: 100,
+            height: 150,
             width: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
@@ -120,6 +121,19 @@ export const disableFlags = () => (<Example>
 			<Demo disableHideAnimation>Content</Demo>
 		</Example.Item>
 	</Example>);
+export const initialFocus = () => {
+    const initialFocusRef = React.useRef(null);
+    return (<Example>
+			<Example.Item title="focuses input on open">
+				<Demo initialFocusRef={initialFocusRef}>
+					<View gap={4}>
+						<Button onClick={() => { }}>Click me</Button>
+						<TextField name="foo" inputAttributes={{ ref: initialFocusRef }}/>
+					</View>
+				</Demo>
+			</Example.Item>
+		</Example>);
+};
 class CustomElement extends window.HTMLElement {
     constructor() {
         super();
@@ -199,36 +213,32 @@ export const testInsideFixed = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const testDynamicBounds = () => {
-    const [left, setLeft] = React.useState("50%");
+    const [left, setLeft] = React.useState(50);
+    const [top, setTop] = React.useState(50);
     const [size, setSize] = React.useState("medium");
     const flyoutRef = React.useRef();
     React.useEffect(() => {
         flyoutRef.current?.updatePosition();
-    }, [left]);
+    }, [left, top]);
     return (<View gap={4}>
 			<View direction="row" gap={2}>
+				<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
+				<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
+				<Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>
+				<Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>
 				<Button onClick={() => {
-            setLeft("20%");
-        }}>
-					Left
-				</Button>
-				<Button onClick={() => {
-            setLeft("50%");
+            setLeft(50);
+            setTop(50);
         }}>
 					Center
 				</Button>
-				<Button onClick={() => {
-            setLeft("70%");
-        }}>
-					Right
-				</Button>
 				<Button onClick={() => setSize("large")}>Large button</Button>
 				<Button onClick={() => setSize("medium")}>Small button</Button>
 			</View>
 			<View height={100}>
-				<Flyout position="bottom" active instanceRef={flyoutRef}>
+				<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick fallbackPositions={["top", "bottom"]}>
 					<Flyout.Trigger>
-						{(attributes) => (<div style={{ position: "absolute", left, top: "50%" }}>
+						{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
 								<Button color="primary" attributes={attributes} size={size}>
 									Open
 								</Button>
@@ -239,12 +249,12 @@ export const testDynamicBounds = () => {
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
             height: 100,
-            width: 160,
+            minWidth: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
             boxSizing: "border-box",
         }}>
-							{"Content"}
+							Content
 						</div>
 					</Flyout.Content>
 				</Flyout>

package/dist/components/_private/Flyout/useFlyout.d.ts

@@ -8,13 +8,14 @@ type PassedFlyoutOptions = {
     width?: T.Width;
     position?: T.Position;
     defaultActive?: boolean;
-    forcePosition?: boolean;
+    fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
 };
 type UseFlyout = (args: PassedFlyoutOptions & {
     triggerElRef: ElementRef;
     flyoutElRef: ElementRef;
     triggerBoundsRef: React.RefObject<DOMRect | undefined>;
+    contentGap?: number;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

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

@@ -1,25 +1,8 @@
 import React from "react";
 import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom/index.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];
-};
+import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
 /**
  * Check if element visually fits on the screen
  */
@@ -60,12 +43,13 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, ...options } = args;
-    const { position, forcePosition, width, container } = options;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentGap = 0, ...options } = args;
+    const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
+    const contentGapModifier = parseInt(getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1"));
     // Reset all styles applied on the previous hook execution
-    targetClone.style = "";
+    targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
         const value = resetStyles[key];
         targetClone.style[key] = value.toString();
@@ -78,8 +62,7 @@ const flyout = (args) => {
             targetClone.style.width = width;
         }
     }
-    const rootNode = triggerEl?.getRootNode();
-    const shadowRoot = rootNode instanceof ShadowRoot ? rootNode : null;
+    const shadowRoot = getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
@@ -89,37 +72,30 @@ const flyout = (args) => {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
         left: containerBounds.left + document.documentElement.scrollLeft - containerParent.scrollLeft,
     };
-    let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
-    if (!fullyVisible(calculated) && !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)) {
-                    calculated = tested;
-                    return true;
-                }
-                return false;
-            });
-        };
-        test(order);
-        if (!fullyVisible(calculated)) {
-            test(mobileOrder, { fullWidth: true });
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition, index) => {
+        const tested = calculatePosition({
+            ...options,
+            triggerBounds,
+            flyoutBounds,
+            scopeOffset,
+            position: currentPosition,
+            contentGap: contentGap * contentGapModifier,
+        });
+        const visible = fullyVisible(tested);
+        const validPosition = visible || fallbackPositions?.length === 0;
+        // Saving first try in case non of the options work
+        if (validPosition || lastUsedFallback === currentPosition) {
+            calculated = tested;
+            onFallback(currentPosition);
         }
+        return validPosition;
+    });
+    if (!calculated) {
+        throw new Error(`Reshaped: Can't calculate styles for the ${position} position`);
     }
-    targetClone.parentNode.removeChild(targetClone);
+    targetClone.parentNode?.removeChild(targetClone);
     return calculated;
 };
 const flyoutReducer = (state, action) => {
@@ -157,8 +133,13 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, ...options } = args;
-    const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, ...options } = args;
+    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
+    const lastUsedFallbackRef = React.useRef(defaultPosition);
+    // Memo the array internally to avoid new arrays triggering useCallback
+    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fallbackPositions?.join(" ")]);
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -177,6 +158,9 @@ const useFlyout = (args) => {
     const remove = React.useCallback(() => {
         dispatch({ type: "remove" });
     }, []);
+    const handleFallback = React.useCallback((position) => {
+        lastUsedFallbackRef.current = position;
+    }, []);
     const updatePosition = React.useCallback((options) => {
         if (!triggerElRef.current || !flyoutElRef.current)
             return;
@@ -186,21 +170,26 @@ const useFlyout = (args) => {
             triggerBounds: triggerBoundsRef.current,
             width,
             position: defaultPosition,
-            forcePosition,
+            fallbackPositions: cachedFallbackPositions,
+            lastUsedFallback: lastUsedFallbackRef.current,
+            onFallback: handleFallback,
             rtl: isRTL,
             container,
+            contentGap,
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
     }, [
         container,
         defaultPosition,
-        forcePosition,
+        cachedFallbackPositions,
         isRTL,
         flyoutElRef,
         triggerElRef,
         triggerBoundsRef,
         width,
+        contentGap,
+        handleFallback,
     ]);
     React.useEffect(() => {
         if (state.status === "rendered")

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

@@ -16,24 +16,29 @@ const centerBySize = (originSize, targetSize) => {
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width } = args;
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, } = args;
+    const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
     let position = passedPosition;
     if (rtl)
         position = getRTLPosition(position);
-    if (width === "full" || width === "trigger") {
+    if (isFullWidth || width === "trigger") {
         position = position.includes("top") ? "top" : "bottom";
     }
+    const isHorizontalPosition = position.match(/^(start|end)/);
+    const isVerticalPosition = position.match(/^(top|bottom)/);
+    const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
+    const flyoutHeight = flyoutBounds.height + (isVerticalPosition ? contentGap : 0);
     switch (position) {
         case "bottom":
         case "top":
-            left = centerBySize(triggerBounds.width, flyoutBounds.width) + triggerBounds.left;
+            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left;
             break;
         case "start":
         case "start-top":
         case "start-bottom":
-            left = triggerBounds.left - flyoutBounds.width;
+            left = triggerBounds.left - flyoutWidth;
             break;
         case "end":
         case "end-top":
@@ -46,7 +51,7 @@ const calculatePosition = (args) => {
             break;
         case "top-end":
         case "bottom-end":
-            left = triggerBounds.right - flyoutBounds.width;
+            left = triggerBounds.right - flyoutWidth;
             break;
         default:
             break;
@@ -55,7 +60,7 @@ const calculatePosition = (args) => {
         case "top":
         case "top-start":
         case "top-end":
-            top = triggerBounds.top - flyoutBounds.height;
+            top = triggerBounds.top - flyoutHeight;
             break;
         case "bottom":
         case "bottom-start":
@@ -64,7 +69,7 @@ const calculatePosition = (args) => {
             break;
         case "start":
         case "end":
-            top = centerBySize(triggerBounds.height, flyoutBounds.height) + triggerBounds.top;
+            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top;
             break;
         case "start-top":
         case "end-top":
@@ -72,7 +77,7 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - flyoutBounds.height;
+            top = triggerBounds.bottom - flyoutHeight;
             break;
         default:
             break;
@@ -82,9 +87,9 @@ const calculatePosition = (args) => {
     }
     top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
     left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
-    let widthStyle = Math.ceil(flyoutBounds.width);
-    const height = Math.ceil(flyoutBounds.height);
-    if (width === "full") {
+    let widthStyle = Math.ceil(flyoutWidth);
+    const height = Math.ceil(flyoutHeight);
+    if (isFullWidth) {
         left = SCREEN_OFFSET;
         widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
     }

package/dist/components/_private/Flyout/utilities/cooldown.d.ts

@@ -1,5 +1,5 @@
 declare class Cooldown {
-    status: "cold" | "warm" | "cooling";
+    status: "warming" | "warm" | "cooling" | "cold";
     timer?: ReturnType<typeof setTimeout>;
     warm: () => void;
     cool: () => void;

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

@@ -1,18 +1,30 @@
+import * as timeouts from "../Flyout.constants.js";
 class Cooldown {
     status = "cold";
     timer;
     warm = () => {
         clearTimeout(this.timer);
-        this.status = "warm";
+        if (this.status === "cooling") {
+            this.status = "warm";
+            return;
+        }
+        this.status = "warming";
+        this.timer = setTimeout(() => {
+            this.status = "warm";
+            this.timer = undefined;
+        }, timeouts.mouseEnterShort);
     };
     cool = () => {
+        clearTimeout(this.timer);
+        if (this.status === "warming") {
+            this.status = "cold";
+            return;
+        }
         this.status = "cooling";
-        const currentTimer = setTimeout(() => {
+        this.timer = setTimeout(() => {
             this.status = "cold";
-            if (currentTimer === this.timer)
-                this.timer = undefined;
+            this.timer = undefined;
         }, 500);
-        this.timer = currentTimer;
     };
 }
 export default new Cooldown();

package/dist/components/_private/Flyout/utilities/getPositionFallbacks.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "../Flyout.types";
+declare const getPositionFallbacks: (position: T.Position, availableFallbacks?: T.Position[]) => T.Position[];
+export default getPositionFallbacks;

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

@@ -0,0 +1,39 @@
+// All available positions for each side
+const positions = {
+    top: ["top-start", "top-end", "top"],
+    bottom: ["bottom-start", "bottom-end", "bottom"],
+    start: ["start-top", "start-bottom", "start"],
+    end: ["end-top", "end-bottom", "end"],
+};
+// Order of sides to try depending on the starting side
+const fallbackOrder = {
+    top: ["bottom", "start", "end"],
+    bottom: ["top", "end", "start"],
+    start: ["end", "top", "bottom"],
+    end: ["start", "bottom", "top"],
+};
+// Get an order of positions to try to fit flyout on the screen based on its starting position
+const getPositionFallbacks = (position, availableFallbacks) => {
+    const result = [position];
+    const chunks = position.split("-");
+    const [firstChunk] = chunks;
+    const passedPositionOrder = positions[firstChunk];
+    const startingFallbackIndex = passedPositionOrder.indexOf(position);
+    const fallbackIndexOrder = [startingFallbackIndex];
+    passedPositionOrder.forEach((_, index) => {
+        if (index === startingFallbackIndex)
+            return;
+        fallbackIndexOrder.push(index);
+    });
+    [firstChunk, ...fallbackOrder[firstChunk]].forEach((fallbackSide) => {
+        const fallbackOrder = positions[fallbackSide];
+        fallbackIndexOrder.forEach((index) => {
+            const position = fallbackOrder[index];
+            if (availableFallbacks?.indexOf(position) === -1)
+                return;
+            result.push(position);
+        });
+    });
+    return result;
+};
+export default getPositionFallbacks;

package/dist/config/tailwind.d.ts

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

package/dist/hooks/_private/useOnClickOutside.js

@@ -7,10 +7,11 @@ const useOnClickOutside = (refs, handler) => {
             return;
         const handleClick = (event) => {
             let isInside = false;
+            const clickedEl = event.composedPath()[0];
             refs.forEach((elRef) => {
                 if (!elRef.current ||
-                    elRef.current === event.target ||
-                    elRef.current.contains(event.target)) {
+                    elRef.current === clickedEl ||
+                    elRef.current.contains(clickedEl)) {
                     isInside = true;
                 }
             });

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -70,17 +70,20 @@ export class HotkeyStore {
         const hotkeyData = this.hotkeyMap[pressedId];
         /**
          * Support for `mod` that represents both Mac and Win keyboards
+         * We create the hotkeyId again to sort the mod key correctly
          */
-        const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
-            this.hotkeyMap[pressedId.replace("control", "mod")];
-        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
+        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
+        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
+        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
+        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
         [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
             if (!hotkeyData)
                 return;
             if (hotkeyData?.size) {
                 hotkeyData.forEach((data) => {
+                    const eventTarget = e.composedPath()[0];
                     if (data.ref?.current &&
-                        !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }
                     const resolvedEvent = pressedMap[pressedId];
@@ -146,14 +149,6 @@ export const SingletonHotkeysProvider = (props) => {
             return false;
         return true;
     };
-    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
-        return () => {
-            setHooksCount((prev) => prev - 1);
-            globalHotkeyStore.unbindHotkeys(hotkeys);
-        };
-    }, []);
     const handleWindowKeyDown = React.useCallback((e) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
@@ -166,6 +161,14 @@ export const SingletonHotkeysProvider = (props) => {
             return;
         removePressedKey(e);
     }, [removePressedKey]);
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);
         window.addEventListener("keyup", handleWindowKeyUp);

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
+import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/index.js";
 const useSingletonKeyboardMode = () => {
     React.useEffect(() => {
         const handleKeyDown = (e) => {

package/dist/hooks/tests/useHotkeys.stories.js

@@ -6,6 +6,9 @@ function Example() {
         "shift + b + n": () => console.log("pressed"),
         "c + v": () => console.log(111),
         "Meta + v": () => console.log(222),
+        "control + enter": () => console.log("control + enter"),
+        "meta + enter": () => console.log("meta + enter"),
+        "mod + enter": () => console.log("mod + enter"),
         "mod + ArrowRight": () => console.log("right"),
         "mod + ArrowUp": () => console.log("top"),
         "shift + ArrowRight": () => console.log("right"),

package/dist/hooks/useDrag.js

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
-import { disableUserSelect, enableUserSelect, disableScroll, enableScroll } from "../utilities/dom.js";
+import { disableUserSelect, enableUserSelect } from "../utilities/dom/index.js";
+import { disableScroll, enableScroll } from "../utilities/scroll/index.js";
 import useToggle from "./useToggle.js";
 import useHotkeys from "./useHotkeys.js";
 import * as keys from "../constants/keys.js";

package/dist/hooks/useScrollLock.js

@@ -1,45 +1,18 @@
 "use client";
 import React from "react";
-const getScrollbarWidth = (() => {
-    let scrollbarWidth;
-    return () => {
-        if (scrollbarWidth)
-            return scrollbarWidth;
-        const scrollDiv = document.createElement("div");
-        scrollDiv.style.position = "absolute";
-        scrollDiv.style.top = "-9999px";
-        scrollDiv.style.width = "50px";
-        scrollDiv.style.height = "50px";
-        scrollDiv.style.overflow = "scroll";
-        document.body.appendChild(scrollDiv);
-        scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
-        document.body.removeChild(scrollDiv);
-        return scrollbarWidth;
-    };
-})();
+import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = () => {
     const [locked, setLocked] = React.useState(false);
-    const overflowStyleRef = React.useRef();
-    const isOverflowingRef = React.useRef(false);
-    const lockScroll = React.useCallback(() => {
-        const targetEl = document.body;
-        const rect = targetEl.getBoundingClientRect();
-        isOverflowingRef.current = rect.left + rect.right < window.innerWidth;
-        overflowStyleRef.current = targetEl.style.overflow;
-        targetEl.style.overflow = "hidden";
-        if (isOverflowingRef.current) {
-            const scrollBarWidth = getScrollbarWidth();
-            targetEl.style.paddingRight = `${scrollBarWidth}px`;
-        }
-        setLocked(true);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
-    const unlockScroll = React.useCallback(() => {
-        const targetEl = document.body;
-        targetEl.style.overflow = overflowStyleRef.current || "";
-        if (isOverflowingRef.current)
-            targetEl.style.paddingRight = "";
-        setLocked(false);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
-    return { scrollLocked: locked, lockScroll, unlockScroll };
+    const handleLockScroll = React.useCallback(() => {
+        lockScroll(() => setLocked(true));
+    }, []);
+    const handleUnlockScroll = React.useCallback(() => {
+        unlockScroll(() => setLocked(false));
+    }, []);
+    return React.useMemo(() => ({
+        scrollLocked: locked,
+        lockScroll: handleLockScroll,
+        unlockScroll: handleUnlockScroll,
+    }), [locked, handleLockScroll, handleUnlockScroll]);
 };
 export default useScrollLock;

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
+export { default as Grid } from "./components/Grid";
+export type { GridProps, GridItemProps } from "./components/Grid";
 export { default as Hidden } from "./components/Hidden";
 export type { HiddenProps } from "./components/Hidden";
 export { default as HiddenVisually } from "./components/HiddenVisually";

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Divider } from "./components/Divider/index.js";
 export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
 export { default as FileUpload } from "./components/FileUpload/index.js";
 export { default as FormControl } from "./components/FormControl/index.js";
+export { default as Grid } from "./components/Grid/index.js";
 export { default as Hidden } from "./components/Hidden/index.js";
 export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Hotkey } from "./components/Hotkey/index.js";

package/dist/styles/align/align.module.css

@@ -0,0 +1 @@
+.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}@media (--rs-viewport-m ){.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}}@media (--rs-viewport-l ){.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}}@media (--rs-viewport-xl ){.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}}

package/dist/styles/align/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getAlignStyles: T.StaticStyleUtility<T.Align>;
+export default getAlignStyles;