reshaped 3.5.3 → 3.6.0-canary.0

package/dist/index.d.ts

@@ -1,10 +1,6 @@
 /**
  * Components
  */
-export { default as Accordion } from "./components/Accordion";
-export type { AccordionProps } from "./components/Accordion";
-export { default as Actionable } from "./components/Actionable";
-export type { ActionableProps, ActionableRef } from "./components/Actionable";
 export { default as ActionBar } from "./components/ActionBar";
 export type { ActionBarProps } from "./components/ActionBar";
 export { default as Alert } from "./components/Alert";
@@ -29,32 +25,16 @@ export { default as Checkbox } from "./components/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
 export type { CheckboxGroupProps } from "./components/CheckboxGroup";
-export { default as Container } from "./components/Container";
-export type { ContainerProps } from "./components/Container";
 export { default as ContextMenu } from "./components/ContextMenu";
 export type { ContextMenuProps } from "./components/ContextMenu";
-export { default as Dismissible } from "./components/Dismissible";
-export type { DismissibleProps } from "./components/Dismissible";
 export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
 export { default as DropdownMenu } from "./components/DropdownMenu";
 export type { DropdownMenuProps, DropdownMenuInstance } from "./components/DropdownMenu";
 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";
-export type { HiddenVisuallyProps } from "./components/HiddenVisually";
 export { default as Hotkey } from "./components/Hotkey";
 export type { HotkeyProps } from "./components/Hotkey";
-export { default as Icon } from "./components/Icon";
-export type { IconProps } from "./components/Icon";
-export { default as Image } from "./components/Image";
-export type { ImageProps } from "./components/Image";
 export { default as Link } from "./components/Link";
 export type { LinkProps } from "./components/Link";
 export { default as Loader } from "./components/Loader";
@@ -65,8 +45,6 @@ export { default as Modal } from "./components/Modal";
 export type { ModalProps } from "./components/Modal";
 export { default as NumberField } from "./components/NumberField";
 export type { NumberFieldProps } from "./components/NumberField";
-export { default as Overlay } from "./components/Overlay";
-export type { OverlayProps } from "./components/Overlay";
 export { default as Pagination } from "./components/Pagination";
 export type { PaginationProps } from "./components/Pagination";
 export { default as PinField } from "./components/PinField";
@@ -81,14 +59,8 @@ export { default as Radio } from "./components/Radio";
 export type { RadioProps } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export type { RadioGroupProps } from "./components/RadioGroup";
-export { default as Reshaped } from "./components/Reshaped";
-export type { ReshapedProps } from "./components/Reshaped";
-export { default as Resizable } from "./components/Resizable";
-export type { ResizableProps, ResizableItemProps, ResizableHandleProps, } from "./components/Resizable";
 export { default as Scrim } from "./components/Scrim";
 export type { ScrimProps } from "./components/Scrim";
-export { default as ScrollArea } from "./components/ScrollArea";
-export type { ScrollAreaProps } from "./components/ScrollArea";
 export { default as Select } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as Skeleton } from "./components/Skeleton";
@@ -103,8 +75,6 @@ export { default as Table } from "./components/Table";
 export type { TableProps, TableBodyProps, TableHeadProps, TableHeadingProps, TableCellProps, TableRowProps, } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
 export type { TabsProps } from "./components/Tabs";
-export { default as Text } from "./components/Text";
-export type { TextProps } from "./components/Text";
 export { default as TextArea } from "./components/TextArea";
 export type { TextAreaProps } from "./components/TextArea";
 export { default as TextField } from "./components/TextField";
@@ -115,6 +85,41 @@ export { useToast, ToastProvider } from "./components/Toast";
 export type { ToastProps, ToastProviderProps, ToastShowProps } from "./components/Toast";
 export { default as Tooltip } from "./components/Tooltip";
 export type { TooltipProps } from "./components/Tooltip";
+/**
+ * Utility components
+ */
+export { default as Reshaped } from "./components/Reshaped";
+export type { ReshapedProps } from "./components/Reshaped";
+export { default as Accordion } from "./components/Accordion";
+export type { AccordionProps } from "./components/Accordion";
+export { default as Actionable } from "./components/Actionable";
+export type { ActionableProps, ActionableRef } from "./components/Actionable";
+export { default as Container } from "./components/Container";
+export type { ContainerProps } from "./components/Container";
+export { default as Dismissible } from "./components/Dismissible";
+export type { DismissibleProps } from "./components/Dismissible";
+export { default as Flyout } from "./components/Flyout";
+export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
+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";
+export type { HiddenVisuallyProps } from "./components/HiddenVisually";
+export { default as Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { default as Image } from "./components/Image";
+export type { ImageProps } from "./components/Image";
+export { default as Overlay } from "./components/Overlay";
+export type { OverlayProps } from "./components/Overlay";
+export { default as Resizable } from "./components/Resizable";
+export type { ResizableProps, ResizableItemProps, ResizableHandleProps, } from "./components/Resizable";
+export { default as ScrollArea } from "./components/ScrollArea";
+export type { ScrollAreaProps } from "./components/ScrollArea";
+export { default as Text } from "./components/Text";
+export type { TextProps } from "./components/Text";
 export { default as View } from "./components/View";
 export type { ViewProps, ViewItemProps } from "./components/View";
 /**
@@ -132,7 +137,7 @@ export { default as useRTL } from "./hooks/useRTL";
 export { default as useScrollLock } from "./hooks/useScrollLock";
 export { default as useToggle } from "./hooks/useToggle";
 /**
- * Utilities
+ * Utility functions
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
 export { TrapFocus } from "./utilities/a11y";

package/dist/index.js

@@ -1,8 +1,6 @@
 /**
  * Components
  */
-export { default as Accordion } from "./components/Accordion/index.js";
-export { default as Actionable } from "./components/Actionable/index.js";
 export { default as ActionBar } from "./components/ActionBar/index.js";
 export { default as Alert } from "./components/Alert/index.js";
 export { default as Autocomplete } from "./components/Autocomplete/index.js";
@@ -15,25 +13,16 @@ export { default as Card } from "./components/Card/index.js";
 export { default as Carousel } from "./components/Carousel/index.js";
 export { default as Checkbox } from "./components/Checkbox/index.js";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/index.js";
-export { default as Container } from "./components/Container/index.js";
 export { default as ContextMenu } from "./components/ContextMenu/index.js";
-export { default as Dismissible } from "./components/Dismissible/index.js";
 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";
-export { default as Icon } from "./components/Icon/index.js";
-export { default as Image } from "./components/Image/index.js";
 export { default as Link } from "./components/Link/index.js";
 export { default as Loader } from "./components/Loader/index.js";
 export { default as MenuItem } from "./components/MenuItem/index.js";
 export { default as Modal } from "./components/Modal/index.js";
 export { default as NumberField } from "./components/NumberField/index.js";
-export { default as Overlay } from "./components/Overlay/index.js";
 export { default as Pagination } from "./components/Pagination/index.js";
 export { default as PinField } from "./components/PinField/index.js";
 export { default as Popover } from "./components/Popover/index.js";
@@ -41,10 +30,7 @@ export { default as Progress } from "./components/Progress/index.js";
 export { default as ProgressIndicator } from "./components/ProgressIndicator/index.js";
 export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
-export { default as Reshaped } from "./components/Reshaped/index.js";
-export { default as Resizable } from "./components/Resizable/index.js";
 export { default as Scrim } from "./components/Scrim/index.js";
-export { default as ScrollArea } from "./components/ScrollArea/index.js";
 export { default as Select } from "./components/Select/index.js";
 export { default as Skeleton } from "./components/Skeleton/index.js";
 export { default as Slider } from "./components/Slider/index.js";
@@ -52,12 +38,30 @@ export { default as Stepper } from "./components/Stepper/index.js";
 export { default as Switch } from "./components/Switch/index.js";
 export { default as Table } from "./components/Table/index.js";
 export { default as Tabs } from "./components/Tabs/index.js";
-export { default as Text } from "./components/Text/index.js";
 export { default as TextArea } from "./components/TextArea/index.js";
 export { default as TextField } from "./components/TextField/index.js";
 export { default as Timeline } from "./components/Timeline/index.js";
 export { useToast, ToastProvider } from "./components/Toast/index.js";
 export { default as Tooltip } from "./components/Tooltip/index.js";
+/**
+ * Utility components
+ */
+export { default as Reshaped } from "./components/Reshaped/index.js";
+export { default as Accordion } from "./components/Accordion/index.js";
+export { default as Actionable } from "./components/Actionable/index.js";
+export { default as Container } from "./components/Container/index.js";
+export { default as Dismissible } from "./components/Dismissible/index.js";
+export { default as Flyout } from "./components/Flyout/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 Icon } from "./components/Icon/index.js";
+export { default as Image } from "./components/Image/index.js";
+export { default as Overlay } from "./components/Overlay/index.js";
+export { default as Resizable } from "./components/Resizable/index.js";
+export { default as ScrollArea } from "./components/ScrollArea/index.js";
+export { default as Text } from "./components/Text/index.js";
 export { default as View } from "./components/View/index.js";
 /**
  * Hooks
@@ -74,7 +78,7 @@ export { default as useRTL } from "./hooks/useRTL.js";
 export { default as useScrollLock } from "./hooks/useScrollLock.js";
 export { default as useToggle } from "./hooks/useToggle.js";
 /**
- * Utilities
+ * Utility functions
  */
 export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
 export { TrapFocus } from "./utilities/a11y/index.js";

package/dist/utilities/dom/find.d.ts

@@ -1,13 +1,10 @@
 export declare const findParent: (element: HTMLElement, condition: (el: HTMLElement) => boolean) => HTMLElement | null;
-/**
- * Containers used for scoping the rendering,
- * mostly used in flyouts since the have to accommodate for positioning and overflow
- */
-export declare const findClosestRenderContainer: (args: {
+export declare const findClosestPositionContainer: (args: {
+    el: HTMLElement | null;
+    iteration?: number;
+}) => HTMLElement;
+export declare const findClosestScrollableContainer: (args: {
     el: HTMLElement | null;
     iteration?: number;
     overflowOnly?: boolean;
-}) => {
-    el: HTMLElement;
-    scrollable?: boolean;
-};
+}) => HTMLElement;

package/dist/utilities/dom/find.js

@@ -8,28 +8,30 @@ export const findParent = (element, condition) => {
     }
     return null;
 };
-/**
- * Containers used for scoping the rendering,
- * mostly used in flyouts since the have to accommodate for positioning and overflow
- */
-export const findClosestRenderContainer = (args) => {
-    const { el, iteration = 0, overflowOnly } = args;
+export const findClosestPositionContainer = (args) => {
+    const { el, iteration = 0 } = args;
     const style = el && window.getComputedStyle(el);
-    const overflowY = style?.overflowY;
     const position = style?.position;
-    const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
     const isFixed = position === "fixed" || position === "sticky";
-    // Only check shadow root on the first run
     if (iteration === 0) {
         const shadowRoot = getShadowRoot(el);
         if (shadowRoot?.firstElementChild)
-            return { el: shadowRoot.firstElementChild };
+            return shadowRoot.firstElementChild;
     }
     if (el === document.body || !el)
-        return { el: document.body };
+        return document.body;
+    if (isFixed)
+        return el;
+    return findClosestPositionContainer({ el: el.parentElement, iteration: iteration + 1 });
+};
+export const findClosestScrollableContainer = (args) => {
+    const { el, iteration = 0 } = args;
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style?.overflowY;
+    const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
+    if (el === document.body || !el)
+        return document.body;
     if (isScrollable && el.scrollHeight > el.clientHeight)
-        return { el, scrollable: true };
-    if (isFixed && !overflowOnly)
-        return { el };
-    return findClosestRenderContainer({ el: el.parentElement, iteration: iteration + 1 });
+        return el;
+    return findClosestScrollableContainer({ el: el.parentElement, iteration: iteration + 1 });
 };

package/dist/utilities/dom/index.d.ts

@@ -1,4 +1,4 @@
 export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { enableUserSelect, disableUserSelect } from "./userSelect";
-export { findParent, findClosestRenderContainer } from "./find";
+export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";

package/dist/utilities/dom/index.js

@@ -1,4 +1,4 @@
 export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { enableUserSelect, disableUserSelect } from "./userSelect.js";
-export { findParent, findClosestRenderContainer } from "./find.js";
+export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";

package/dist/utilities/scroll/lock.js

@@ -1,5 +1,5 @@
 import { isIOS } from "../platform.js";
-import { findClosestRenderContainer } from "../dom/index.js";
+import { findClosestScrollableContainer } from "../dom/index.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
 let bodyLockedCount = 0;
@@ -7,8 +7,9 @@ let reset = () => { };
 export const lockScroll = (args) => {
     const isIOSLock = isIOS() && !args.containerEl && !args.originEl;
     let container = document.body;
-    if (args.originEl && !isIOSLock)
-        container = findClosestRenderContainer({ el: args.originEl }).el;
+    if (args.originEl && !isIOSLock) {
+        container = findClosestScrollableContainer({ el: args.originEl });
+    }
     if (args.containerEl && !isIOSLock)
         container = args.containerEl;
     if (container === document.body)

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.5.3",
+	"version": "3.6.0-canary.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -21,9 +21,10 @@
 	"bugs": {
 		"url": "https://github.com/formaat-design/reshaped/issues"
 	},
-	"sideEffects": [
-		"*.css"
-	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/formaat-design/reshaped"
+	},
 	"files": [
 		"bin/cli.js",
 		"dist/**/*"
@@ -57,6 +58,7 @@
 		"./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*",
 		"./package.json": "./package.json"
 	},
+	"sideEffects": false,
 	"bin": {
 		"reshaped": "./bin/cli.js"
 	},
@@ -74,8 +76,8 @@
 		"build:storybook": "storybook build -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
-		"release:lib": "yarn build && yarn publish && sh ./bin/update-changelog.sh",
-		"release:canary": "yarn build && yarn publish --tag canary && sh ./bin/update-changelog.sh",
+		"release:lib": "yarn build && yarn publish",
+		"release:canary": "yarn build && yarn publish --tag canary",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
 		"release:source": "sh ./bin/release-source.sh",
 		"release:copy": "sh ./bin/release-copy.sh",
@@ -87,7 +89,7 @@
 		"lint": "yarn lint:js && yarn lint:css",
 		"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
 		"lint:css": "stylelint 'src/**/*.css'",
-		"commit": "sh ./bin/commit.sh"
+		"commit": "git-cz"
 	},
 	"browserslist": [
 		"defaults and not IE 11"
@@ -116,7 +118,6 @@
 		"@vitest/coverage-istanbul": "3.1.2",
 		"@vitest/coverage-v8": "3.1.2",
 		"chromatic": "11.28.2",
-		"conventional-changelog-cli": "^5.0.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "9.25.1",
 		"eslint-config-prettier": "10.1.2",
@@ -142,7 +143,7 @@
 		"stylelint-config-standard": "38.0.0",
 		"ts-node": "10.9.2",
 		"typescript": "5.8.3",
-		"typescript-eslint": "8.30.1",
+		"typescript-eslint": "8.31.0",
 		"vite": "6.3.2",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "3.1.2",

package/CHANGELOG-old.md

@@ -1,14 +0,0 @@
-## WIP 3.5.2
-
-- Tailwind 3: Preflight compatibility
-- ScrollArea: fixed maxHeight
-- Updated sideEffects to \*.css
-
-## 3.5.1
-
-- NumberField: user-select none for touch devices
-- Tabs: Fixed arrow navigation
-- Slider: Fixed drag propagation when used in swipeable modals
-- Card: Removed internal content wrapper to fix Safari absolute positioning of contents inside the card
-- [Pro] Storybook: Preserve theme and mode values while navigating stories
-- [Pro] Storybook config: switched to js to resolve TS resolving issues

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

@@ -1,3 +0,0 @@
-export declare const mouseEnter = 800;
-export declare const mouseEnterShort = 100;
-export declare const mouseLeave = 150;

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

@@ -1,3 +0,0 @@
-export const mouseEnter = 800;
-export const mouseEnterShort = 100;
-export const mouseLeave = 150;

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

@@ -1,211 +0,0 @@
-import React from "react";
-import useRTL from "../../../hooks/useRTL.js";
-import { findClosestRenderContainer, getShadowRoot, getRectFromCoordinates } from "../../../utilities/dom/index.js";
-import calculatePosition from "./utilities/calculatePosition.js";
-import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
-import isFullyVisible from "./utilities/isFullyVisible.js";
-/**
- * Order of keys here is responsible for the order of styles applied
- */
-const defaultStyles = {
-    left: 0,
-    top: 0,
-    width: "auto",
-    height: "auto",
-    // z-index doesn't accept strings
-    zIndex: "var(--rs-z-index-flyout)",
-};
-const resetStyles = {
-    left: 0,
-    top: 0,
-    position: "absolute",
-    visibility: "hidden",
-    animation: "none",
-    transition: "none",
-    zIndex: "var(--rs-z-index-tooltip)",
-};
-/**
- * Set position of the target element to fit on the screen
- */
-const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, ...options } = args;
-    const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
-    const targetClone = flyoutEl.cloneNode(true);
-    const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
-    const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
-    const internalTriggerBounds = triggerEl?.getBoundingClientRect();
-    const triggerBounds = passedTriggerBounds || internalTriggerBounds;
-    if (!triggerBounds)
-        return;
-    const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
-    // Reset all styles applied on the previous hook execution
-    targetClone.style.cssText = "";
-    Object.keys(resetStyles).forEach((key) => {
-        const value = resetStyles[key];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (value)
-            targetClone.style[key] = value.toString();
-    });
-    if (width) {
-        if (width === "trigger") {
-            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
-        }
-        else if (width !== "full") {
-            targetClone.style.width = width;
-        }
-    }
-    const shadowRoot = triggerEl && getShadowRoot(triggerEl);
-    // Insert inside shadow root if possible to make sure styles are applied correctly
-    (shadowRoot || document.body).appendChild(targetClone);
-    const flyoutBounds = targetClone.getBoundingClientRect();
-    const closestRenderContainer = !container && triggerEl ? findClosestRenderContainer({ el: triggerEl }) : undefined;
-    const containerParent = container ||
-        // Only render inside non-scrollable container to make sure it doesn't get clipped by overflow auto
-        // We render those cases in the document root and then sync the position on scroll instead
-        (!closestRenderContainer?.scrollable ? closestRenderContainer?.el : undefined) ||
-        document.body;
-    const containerBounds = containerParent.getBoundingClientRect();
-    const scopeOffset = {
-        top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
-        left: containerBounds.left + document.documentElement.scrollLeft - containerParent.scrollLeft,
-    };
-    let calculated = null;
-    const testOrder = getPositionFallbacks(position, fallbackPositions);
-    testOrder.some((currentPosition) => {
-        const tested = calculatePosition({
-            ...options,
-            triggerBounds: resolvedTriggerBounds,
-            flyoutBounds,
-            scopeOffset,
-            position: currentPosition,
-            contentGap: contentGap * unitModifier,
-            contentShift: contentShift * unitModifier,
-        });
-        const visible = isFullyVisible({ ...tested, container });
-        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);
-    return calculated;
-};
-const flyoutReducer = (state, action) => {
-    switch (action.type) {
-        case "render":
-            if (state.status !== "idle")
-                return state;
-            // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
-        case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
-            return {
-                ...state,
-                status: action.payload.sync ? "visible" : "positioned",
-                position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
-            };
-        case "show":
-            if (state.status !== "positioned")
-                return state;
-            return { ...state, status: "visible" };
-        case "hide":
-            if (state.status !== "visible")
-                return state;
-            return { ...state, status: "hidden" };
-        case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
-        default:
-            throw new Error("[Reshaped] Invalid flyout reducer type");
-    }
-};
-const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...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,
-        styles: defaultStyles,
-        status: "idle",
-    });
-    const render = React.useCallback(() => {
-        dispatch({ type: "render" });
-    }, []);
-    const show = React.useCallback(() => {
-        dispatch({ type: "show" });
-    }, []);
-    const hide = React.useCallback(() => {
-        dispatch({ type: "hide" });
-    }, []);
-    const remove = React.useCallback(() => {
-        dispatch({ type: "remove" });
-    }, []);
-    const handleFallback = React.useCallback((position) => {
-        lastUsedFallbackRef.current = position;
-    }, []);
-    const updatePosition = React.useCallback((options) => {
-        if (!flyoutElRef.current)
-            return;
-        const nextFlyoutData = flyout({
-            triggerEl: triggerElRef.current,
-            flyoutEl: flyoutElRef.current,
-            triggerBounds,
-            width,
-            position: defaultPosition,
-            fallbackPositions: cachedFallbackPositions,
-            lastUsedFallback: lastUsedFallbackRef.current,
-            onFallback: handleFallback,
-            rtl: isRTL,
-            container,
-            contentGap,
-            contentShift,
-        });
-        if (nextFlyoutData) {
-            dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
-        }
-    }, [
-        container,
-        defaultPosition,
-        cachedFallbackPositions,
-        isRTL,
-        flyoutElRef,
-        triggerElRef,
-        triggerBounds,
-        width,
-        contentGap,
-        contentShift,
-        handleFallback,
-    ]);
-    React.useEffect(() => {
-        if (state.status === "rendered")
-            updatePosition();
-    }, [state.status, updatePosition]);
-    return React.useMemo(() => ({
-        position: state.position,
-        styles: state.styles,
-        status: state.status,
-        updatePosition,
-        render,
-        hide,
-        remove,
-        show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
-};
-export default useFlyout;

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

@@ -1,19 +0,0 @@
-import type * as T from "../Flyout.types";
-/**
- * Calculate styles for the current position
- */
-declare const calculatePosition: (args: T.Options & {
-    triggerBounds: DOMRect;
-    flyoutBounds: DOMRect;
-    scopeOffset: Record<"left" | "top", number>;
-}) => {
-    styles: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    };
-    position: T.Position;
-    scopeOffset: Record<"left" | "top", number>;
-};
-export default calculatePosition;