reshaped 3.9.0 → 3.9.1-canary.3

package/dist/components/Flyout/utilities/safeArea.js

@@ -0,0 +1,100 @@
+/**
+ * Checks if a point is inside a triangle using barycentric coordinates
+ */
+function isPointInTriangle(point, triangle) {
+    const [p1, p2, p3] = triangle;
+    const denominator = (p2.y - p3.y) * (p1.x - p3.x) + (p3.x - p2.x) * (p1.y - p3.y);
+    const a = ((p2.y - p3.y) * (point.x - p3.x) + (p3.x - p2.x) * (point.y - p3.y)) / denominator;
+    const b = ((p3.y - p1.y) * (point.x - p3.x) + (p1.x - p3.x) * (point.y - p3.y)) / denominator;
+    const c = 1 - a - b;
+    return a >= 0 && a <= 1 && b >= 0 && b <= 1 && c >= 0 && c <= 1;
+}
+/**
+ * Gets the two closest corners of the content element based on the flyout position
+ */
+function getContentCorners(contentRect, position) {
+    const corners = {
+        topLeft: { x: contentRect.left, y: contentRect.top },
+        topRight: { x: contentRect.right, y: contentRect.top },
+        bottomLeft: { x: contentRect.left, y: contentRect.bottom },
+        bottomRight: { x: contentRect.right, y: contentRect.bottom },
+    };
+    if (position?.startsWith("bottom")) {
+        return [corners.topLeft, corners.topRight];
+    }
+    else if (position?.startsWith("top")) {
+        return [corners.bottomLeft, corners.bottomRight];
+    }
+    else if (position?.startsWith("start")) {
+        return [corners.topRight, corners.bottomRight];
+    }
+    else {
+        return [corners.topLeft, corners.bottomLeft];
+    }
+}
+/**
+ * Checks if the mouse is over the trigger or content elements
+ */
+function isMouseOverElement(point, contentRef, triggerRef) {
+    const elements = document.elementsFromPoint(point.x, point.y);
+    return elements.some((el) => (contentRef.current && contentRef.current.contains(el)) ||
+        (triggerRef.current && triggerRef.current.contains(el)));
+}
+export function createSafeArea(options) {
+    const { contentRef, triggerRef, position, onClose, origin: passedOrigin } = options;
+    if (!contentRef.current) {
+        // If content doesn't exist, just close immediately
+        onClose();
+        return () => { };
+    }
+    const contentRect = contentRef.current.getBoundingClientRect();
+    const [corner1, corner2] = getContentCorners(contentRect, position);
+    // Add buffer to origin based on position to extend safe area
+    const buffer = 10;
+    const origin = { x: passedOrigin.x, y: passedOrigin.y };
+    if (position?.startsWith("bottom")) {
+        origin.y -= buffer;
+    }
+    else if (position?.startsWith("top")) {
+        origin.y += buffer;
+    }
+    else if (position?.startsWith("start")) {
+        origin.x += buffer;
+    }
+    else if (position?.startsWith("end")) {
+        origin.x -= buffer;
+    }
+    const triangle = [origin, corner1, corner2];
+    let timeoutId = null;
+    const cleanup = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        if (timeoutId)
+            clearTimeout(timeoutId);
+    };
+    // Start timeout for 1 second
+    const startTimeout = () => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            onClose();
+            cleanup();
+        }, 1000);
+    };
+    const handleMouseMove = (e) => {
+        const currentPoint = { x: e.clientX, y: e.clientY };
+        if (isMouseOverElement(currentPoint, contentRef, triggerRef)) {
+            cleanup();
+            return;
+        }
+        if (isPointInTriangle(currentPoint, triangle)) {
+            startTimeout();
+        }
+        else {
+            onClose();
+            cleanup();
+        }
+    };
+    startTimeout();
+    document.addEventListener("mousemove", handleMouseMove);
+    return cleanup;
+}

package/dist/components/Select/Select.js

@@ -9,7 +9,7 @@ const Select = (props) => {
     return (_jsx(SelectRoot, { ...props, children: (props) => {
             const { options } = props;
             const hasOptionChildren = React.Children.toArray(children).some((child) => {
-                return React.isValidElement(child) && child.type === "option";
+                return (React.isValidElement(child) && (child.type === "option" || child.type === "optgroup"));
             });
             const hasOptions = Boolean(options || hasOptionChildren);
             if (!hasOptions) {

package/dist/components/Select/SelectCustomControlled.js

@@ -68,7 +68,6 @@ const SelectCustomControlled = (props) => {
             return child;
         });
     };
-    // eslint-disable-next-line react-hooks/refs
     const resolvedChildren = traverseOptionList(children);
     const handleKeyDown = (e) => {
         const key = e.key;

package/dist/components/Tabs/TabsControlled.js

@@ -7,7 +7,6 @@ const TabsControlled = (props) => {
     const { children, value, onChange, onSilentChange, itemWidth, variant, name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
     const id = useElementId();
     const elActiveRef = React.useRef(null);
-    // eslint-disable-next-line react-hooks/refs
     const elPrevActiveRef = React.useRef(elActiveRef.current);
     const elScrollableRef = React.useRef(null);
     const [selection, setSelection] = React.useState({

package/dist/components/Toast/ToastContainer.js

@@ -89,7 +89,6 @@ const ToastContainer = (props) => {
             // Height + padding + borders
             height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
             // Disable transition when height of the toast can change
-            // eslint-disable-next-line react-hooks/refs
             transitionDuration: resizingRef.current ? "0s" : undefined,
         }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
 };

package/dist/components/_private/Expandable/Expandable.js

@@ -10,9 +10,7 @@ const Expandable = (props) => {
     const rootRef = React.useRef(null);
     const mountedRef = React.useRef(false);
     const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, 
-    // eslint-disable-next-line react-hooks/refs
-    mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

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

@@ -18,7 +18,6 @@ const Portal = (props) => {
     const { children, targetRef } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
-    // eslint-disable-next-line react-hooks/refs
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
     const defaultTargetEl = isShadowDom ? rootNode : document.body;
@@ -31,7 +30,6 @@ const Portal = (props) => {
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
-    // eslint-disable-next-line react-hooks/refs
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     useIsomorphicLayoutEffect(() => {
         mountedToggle.activate();
@@ -39,7 +37,6 @@ const Portal = (props) => {
     }, []);
     /* Preserve the current theme when rendered in body */
     return [
-        // eslint-disable-next-line react-hooks/refs
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
         // Make sure this element doesn't affect components using :last-child when their children use portals
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),

package/dist/core/Actionable/Actionable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Actionable.types";
+declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<T.Ref>>;
+export default Actionable;

package/dist/core/Actionable/Actionable.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as keys from "../../constants/keys.js";
+import { classNames } from "../../utilities/props.js";
+const Actionable = forwardRef((props, ref) => {
+    const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
+    const rootAttributes = { ...attributes };
+    const hasClickHandler = onClick || attributes?.onClick;
+    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
+    const isLink = Boolean(href || attributes?.href);
+    // Including attributes ref for the cases when event listeners are added through it
+    // To make sure it doesn't render a span
+    const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
+    const renderedAsButton = !isLink && isButton && (!as || as === "button");
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let TagName;
+    if (isLink) {
+        TagName = "a";
+        rootAttributes.href = disabled ? undefined : href || attributes?.href;
+    }
+    else if (renderedAsButton) {
+        TagName = "button";
+        rootAttributes.type = type || attributes?.type || "button";
+        rootAttributes.disabled = disabled || attributes?.disabled;
+    }
+    else if (isButton) {
+        const isFocusable = as === "label";
+        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
+        TagName = as || "span";
+        rootAttributes.role = simulateButton ? "button" : undefined;
+        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
+    }
+    else {
+        TagName = as || "span";
+    }
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        onClick?.(event);
+        attributes?.onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        const isSpace = event.key === keys.SPACE;
+        const isEnter = event.key === keys.ENTER;
+        if (!isSpace && !isEnter)
+            return;
+        if (rootAttributes.role !== "button")
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        event.preventDefault();
+        handlePress(event);
+    };
+    const tagAttributes = {
+        ref: ref,
+        // rootAttributes can receive ref from Flyout
+        ...rootAttributes,
+        className: classNames(className),
+        onClick: handlePress,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled ? true : undefined,
+        children: children,
+    };
+    if (render)
+        return render(tagAttributes);
+    return _jsx(TagName, { ...tagAttributes });
+});
+Actionable.displayName = "Actionable";
+export default Actionable;

package/dist/core/Actionable/Actionable.types.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
+type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+    ref?: AttributesRef;
+};
+export type RenderAttributes = G.Attributes<"a"> & {
+    ref: React.RefObject<HTMLAnchorElement | null>;
+    children: React.ReactNode;
+};
+export type Props = {
+    /** Node for inserting the content */
+    children?: React.ReactNode;
+    /** Render a custom root element, useful for integrating with routers */
+    render?: (attributes: RenderAttributes) => React.ReactNode;
+    /** Callback when clicked, renders it as a button tag if href is not provided */
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** URL, renders it as an anchor tag */
+    href?: string;
+    /** Type attribute, renders it as a button tag */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /** Disable from user interaction */
+    disabled?: boolean;
+    /** Prevent the event from bubbling up to the parent */
+    stopPropagation?: boolean;
+    /** Render as a different element */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Additional classname for the root element */
+    className?: G.ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes;
+};
+export type Ref = HTMLButtonElement | HTMLAnchorElement;
+export {};

package/dist/core/Actionable/Actionable.types.js

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

package/dist/core/Actionable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Actionable";
+export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";

package/dist/core/Actionable/index.js

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

package/dist/hooks/_private/usePrevious.js

@@ -12,7 +12,6 @@ const usePrevious = (value, clean = false) => {
     React.useEffect(() => {
         ref.current = clean ? copy(value) : value;
     }, [value, clean]);
-    // eslint-disable-next-line react-hooks/refs
     return ref.current;
 };
 export default usePrevious;

package/dist/hooks/useOnClickOutside.js

@@ -1,4 +1,5 @@
 import React from "react";
+import * as keys from "../constants/keys.js";
 import useHandlerRef from "./useHandlerRef.js";
 const useOnClickOutside = (refs, handler, options) => {
     const { disabled } = options || {};
@@ -25,11 +26,18 @@ const useOnClickOutside = (refs, handler, options) => {
                 }
             });
         };
+        const handleKeyDown = (event) => {
+            if (![keys.ENTER, keys.SPACE].includes(event.key))
+                return;
+            handleMouseDown(event);
+        };
         document.addEventListener("mousedown", handleMouseDown, { passive: true });
         document.addEventListener("touchstart", handleMouseDown, { passive: true });
+        document.addEventListener("keydown", handleKeyDown, { passive: true });
         return () => {
             document.removeEventListener("mousedown", handleMouseDown);
             document.removeEventListener("touchstart", handleMouseDown);
+            document.removeEventListener("keydown", handleKeyDown);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [...refs]);

package/dist/utilities/a11y/TrapFocus.js

@@ -80,6 +80,10 @@ class TrapFocus {
         const el = shadowRoot ?? document;
         el.removeEventListener("keydown", this.#handleKeyDown);
     };
+    #isLast = () => {
+        const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
+        return tailItem && tailItem.data.#root === this.#root;
+    };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
@@ -98,6 +102,8 @@ class TrapFocus {
         this.#mutationObserver = new MutationObserver(() => {
             if (!this.#root)
                 return;
+            if (!this.#isLast())
+                return;
             const currentActiveElement = getActiveElement(this.#root);
             // Focus stayed inside the wrapper, no need to refocus
             if (this.#root.contains(currentActiveElement))
@@ -117,10 +123,10 @@ class TrapFocus {
         this.#addListeners();
         if (mode === "dialog")
             this.#screenReaderTrap.trap();
-        // Don't add back to the chain if we're traversing back
-        const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
         const currentActiveElement = getActiveElement(this.#root);
-        if (!tailItem || this.#root !== tailItem.data.#root) {
+        const isLastInChain = this.#isLast();
+        // Don't add back to the chain if we're traversing back
+        if (!isLastInChain) {
             this.#chainId = _a.chain.add(this);
             // If the focus was moved manually (e.g. with autoFocus) - keep it there
             if (!this.#root.contains(currentActiveElement)) {

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

@@ -1,4 +1,3 @@
-export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
 export { triggerChangeEvent } from "./event";

package/dist/utilities/dom/index.js

@@ -1,4 +1,3 @@
-export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
 export { triggerChangeEvent } from "./event.js";

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.9.0",
+  "version": "3.9.1-canary.3",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -90,10 +90,12 @@
     "cssnano": "7.1.1",
     "csstype": "3.1.3",
     "culori": "4.0.2",
-    "postcss-custom-media": "11.0.6"
+    "postcss-custom-media": "11.0.6",
+    "@reshaped/utilities": "3.9.1-canary.3"
   },
   "scripts": {
     "clean": "sh ./bin/clean.sh",
+    "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",

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

@@ -1,31 +0,0 @@
-import type * as T from "../Flyout.types";
-/**
- * Calculate styles for the current position
- */
-declare const calculatePosition: (args: {
-    triggerBounds: DOMRect;
-    flyoutBounds: {
-        width: number;
-        height: number;
-    };
-    passedContainer?: HTMLElement | null;
-    containerBounds: DOMRect;
-} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
-    position: T.Position;
-    styles: {
-        left: string | null;
-        right: string | null;
-        top: string | null;
-        bottom: string | null;
-        transform: string;
-        height: string | null;
-        width: string | null;
-    };
-    boundaries: {
-        left: number;
-        top: number;
-        height: number;
-        width: number;
-    };
-};
-export default calculatePosition;

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

@@ -1,185 +0,0 @@
-import { SCREEN_OFFSET } from "./constants.js";
-import { getRTLPosition, centerBySize } from "./helpers.js";
-/**
- * Calculate styles for the current position
- */
-const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, 
-    // fallbackMinWidth,
-    fallbackMinHeight, } = args;
-    const isFullWidth = passedWidth === "full" || passedWidth === "100%";
-    let left = 0;
-    let top = 0;
-    let bottom = null;
-    let right = null;
-    let height = undefined;
-    let width = undefined;
-    let position = passedPosition;
-    if (rtl)
-        position = getRTLPosition(position);
-    if (isFullWidth || width === "trigger") {
-        position = position.includes("top") ? "top" : "bottom";
-    }
-    const isHorizontalPosition = !!position.match(/^(start|end)/);
-    // contentGap adds padding to the flyout to make sure it doesn't disapper while moving the mouse to the content
-    // So its width/height is bigger than the visible part of the content
-    const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
-    const flyoutHeight = flyoutBounds.height + (!isHorizontalPosition ? contentGap : 0);
-    const triggerWidth = triggerBounds.width;
-    const triggerHeight = triggerBounds.height;
-    // Detect passed container scroll to sync the flyout position with it
-    const containerX = passedContainer?.scrollLeft;
-    const containerY = passedContainer?.scrollTop;
-    const scrollX = containerX ?? window.scrollX;
-    const scrollY = containerY ?? window.scrollY;
-    const renderContainerHeight = passedContainer?.clientHeight ?? window.innerHeight;
-    const renderContainerWidth = passedContainer?.clientWidth ?? window.innerWidth;
-    // When rendering in the body, bottom bounds will be larrger than the viewport so we calculate it manually
-    const containerBoundsBottom = passedContainer
-        ? containerBounds.bottom
-        : window.innerHeight - scrollY;
-    // When inside a container, adjut position based on the container scroll since flyout is rendered outside the scroll area
-    const relativeLeft = triggerBounds.left - containerBounds.left + (containerX || 0);
-    const relativeRight = containerBounds.right - triggerBounds.right - (containerX || 0);
-    const relativeTop = triggerBounds.top - containerBounds.top + (containerY || 0);
-    const relativeBottom = containerBoundsBottom - triggerBounds.bottom - (containerY || 0);
-    switch (position) {
-        case "start":
-        case "start-top":
-        case "start-bottom":
-            left = relativeLeft - flyoutWidth;
-            right = relativeRight + triggerWidth;
-            break;
-        case "end":
-        case "end-top":
-        case "end-bottom":
-            left = relativeLeft + triggerWidth;
-            break;
-        case "bottom":
-        case "top":
-            left = relativeLeft + centerBySize(triggerWidth, flyoutWidth) + contentShift;
-            break;
-        case "top-start":
-        case "bottom-start":
-            left = relativeLeft + contentShift;
-            break;
-        case "top-end":
-        case "bottom-end":
-            left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
-            right = relativeRight - contentShift;
-            break;
-        default:
-            break;
-    }
-    switch (position) {
-        case "top":
-        case "top-start":
-        case "top-end":
-            top = relativeTop - flyoutHeight;
-            bottom = relativeBottom + triggerHeight;
-            break;
-        case "bottom":
-        case "bottom-start":
-        case "bottom-end":
-            top = relativeTop + triggerHeight;
-            break;
-        case "start":
-        case "end":
-            top = relativeTop + centerBySize(triggerHeight, flyoutHeight) + contentShift;
-            break;
-        case "start-top":
-        case "end-top":
-            top = relativeTop + contentShift;
-            break;
-        case "start-bottom":
-        case "end-bottom":
-            top = relativeTop + triggerHeight - flyoutHeight + contentShift;
-            bottom = relativeBottom - contentShift;
-            break;
-        default:
-            break;
-    }
-    if (fallbackAdjustLayout) {
-        const getOverflow = () => {
-            return {
-                top: -top + scrollY + SCREEN_OFFSET,
-                bottom: top + flyoutHeight + SCREEN_OFFSET - scrollY - renderContainerHeight,
-                left: -left + scrollX + SCREEN_OFFSET,
-                right: left + flyoutWidth + SCREEN_OFFSET - scrollX - renderContainerWidth,
-            };
-        };
-        const overflow = getOverflow();
-        if (isHorizontalPosition) {
-            if (overflow.top > 0) {
-                top = SCREEN_OFFSET + scrollY;
-                if (bottom !== null)
-                    bottom = bottom - overflow.top;
-            }
-            else if (overflow.bottom > 0) {
-                top = top - overflow.bottom;
-            }
-        }
-        else {
-            if (overflow.left > 0) {
-                left = SCREEN_OFFSET + scrollX;
-                if (right !== null)
-                    right = right - overflow.left;
-            }
-            else if (overflow.right > 0) {
-                left = left - overflow.right;
-            }
-        }
-        const updatedOverflow = getOverflow();
-        if (updatedOverflow.top > 0) {
-            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.top);
-            top = top + (flyoutHeight - height);
-        }
-        else if (updatedOverflow.bottom > 0) {
-            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.bottom);
-            if (bottom !== null)
-                bottom = bottom + (flyoutHeight - height);
-        }
-        // TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
-        // if (updatedOverflow.left > 0) {
-        // 	width = Math.max(
-        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
-        // 		flyoutWidth - updatedOverflow.left
-        // 	);
-        // 	left = left + (flyoutWidth - width);
-        // } else if (updatedOverflow.right > 0) {
-        // 	width = Math.max(
-        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
-        // 		flyoutWidth - updatedOverflow.right
-        // 	);
-        // 	if (right !== null) right = right + (flyoutWidth - width);
-        // }
-    }
-    if (isFullWidth) {
-        left = SCREEN_OFFSET;
-        width = window.innerWidth - SCREEN_OFFSET * 2;
-    }
-    else if (passedWidth === "trigger") {
-        width = triggerBounds.width;
-    }
-    const translateX = right !== null ? -right : left;
-    const translateY = bottom !== null ? -bottom : top;
-    return {
-        position,
-        styles: {
-            left: right === null ? "0px" : null,
-            right: right === null ? null : "0px",
-            top: bottom === null ? "0px" : null,
-            bottom: bottom === null ? null : "0px",
-            transform: `translate(${translateX}px, ${translateY}px)`,
-            height: height !== undefined ? `${height}px` : null,
-            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
-        },
-        boundaries: {
-            left,
-            top,
-            height: height ?? Math.ceil(flyoutHeight),
-            width: width ?? Math.ceil(flyoutWidth),
-        },
-    };
-};
-export default calculatePosition;

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

@@ -1 +0,0 @@
-export declare const SCREEN_OFFSET = 8;

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

@@ -1 +0,0 @@
-export const SCREEN_OFFSET = 8;

package/dist/components/Flyout/utilities/flyout.d.ts

@@ -1,11 +0,0 @@
-import type * as T from "../Flyout.types";
-import type * as G from "../../../types/global";
-/**
- * Set position of the target element to fit on the screen
- */
-declare const flyout: (args: T.Options & {
-    flyoutEl: HTMLElement;
-    triggerEl: HTMLElement | null;
-    triggerBounds?: DOMRect | G.Coordinates | null;
-}) => T.FlyoutData | undefined;
-export default flyout;