reshaped 3.8.0-canary.0 → 3.8.0-canary.1

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

@@ -3,7 +3,7 @@ import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

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

@@ -21,6 +21,7 @@ export type Options = {
     container?: HTMLElement | null;
     rtl: boolean;
     fallbackPositions?: Position[];
+    fallbackAdjustLayout?: boolean;
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
     contentGap?: number;
@@ -99,6 +100,8 @@ type BaseProps = {
     forcePosition?: boolean;
     /** Fallback positions for the content when it doesn't fit into the viewport or container */
     fallbackPositions?: Position[] | false;
+    /** Adjust the content size and shift its position to fit into the container when none of the fallback positions work */
+    fallbackAdjustLayout?: boolean;
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: TrapMode | false;
     /** Disable the flyout content interactivity */

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -62,6 +62,7 @@ const FlyoutControlled = (props) => {
         defaultActive: resolvedActive,
         container: containerRef?.current,
         fallbackPositions,
+        fallbackAdjustLayout,
         contentGap,
         contentShift,
     });

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

@@ -29,6 +29,10 @@ export declare const positionFallbacks: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const fallbackAdjustLayout: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const originCoordinates: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -40,7 +40,7 @@ const Demo = (props) => {
 export const position = {
     name: "position",
     render: () => {
-        return (<View gap={4} padding={50} align="center" justify="center" height="120vh" width="120%">
+        return (<View gap={4} padding={50} align="center" justify="center" height="100vh" width="120%">
 				<View gap={4} direction="row">
 					<Demo position="top-start" defaultActive/>
 					<Demo position="top"/>
@@ -222,6 +222,64 @@ export const positionFallbacks = {
 			</Example>);
     },
 };
+const FallbackAdjustLayoutControls = ({ containerRef, }) => (<>
+		{/* Left side */}
+		<View position="absolute" insetStart={4} insetTop={10} gap={2}>
+			<Demo contentHeight="200px" position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			<Demo contentHeight="200px" position="end-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+		</View>
+
+		<View position="absolute" insetStart={4} insetTop={80} gap={2}>
+			<Demo position="bottom-end" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
+			<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
+		</View>
+
+		<View position="absolute" insetBottom={4} insetStart={4} gap={2}>
+			<Demo contentHeight="200px" position="end-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			<Demo contentHeight="200px" position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+		</View>
+
+		{/* Right side */}
+
+		<View position="absolute" insetTop={10} insetEnd={4} gap={2}>
+			<Demo contentHeight="200px" position="start" fallbackPositions={false} fallbackAdjustLayout/>
+			<Demo contentHeight="200px" position="start-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+		</View>
+
+		<View position="absolute" insetEnd={4} insetTop={80} gap={2}>
+			<Demo position="top-start" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
+			<Demo position="top" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
+		</View>
+
+		<View position="absolute" insetBottom={4} insetEnd={4} gap={2}>
+			<Demo contentHeight="200px" position="start-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			<Demo contentHeight="200px" position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+		</View>
+	</>);
+export const fallbackAdjustLayout = {
+    name: "fallbackAdjustLayout",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<View gap={10}>
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
+						<FallbackAdjustLayoutControls />
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
+
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
+						<FallbackAdjustLayoutControls containerRef={containerRef}/>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
+
+				<FallbackAdjustLayoutControls />
+				<div style={{ height: "100vh", width: "250%" }}/>
+			</View>);
+    },
+};
 export const originCoordinates = {
     name: "originCoordinates",
     render: () => {

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

@@ -6,6 +6,7 @@ type UseFlyout = (args: {
     position?: T.Position;
     defaultActive?: boolean;
     fallbackPositions?: T.Position[];
+    fallbackAdjustLayout?: boolean;
     contentGap?: number;
     contentShift?: number;
     container?: HTMLElement | null;

package/dist/components/Flyout/useFlyout.js

@@ -38,7 +38,7 @@ const flyoutReducer = (state, action) => {
 };
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
-    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
+    const { position: defaultPosition = "bottom", fallbackPositions, width, container, fallbackAdjustLayout, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
     const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
@@ -76,6 +76,7 @@ const useFlyout = (args) => {
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
+            fallbackAdjustLayout,
             lastUsedPosition: lastUsedPositionRef.current,
             onPositionChoose: handlePosition,
             rtl: isRTL,
@@ -93,6 +94,7 @@ const useFlyout = (args) => {
         container,
         defaultPosition,
         cachedFallbackPositions,
+        fallbackAdjustLayout,
         isRTL,
         flyoutElRef,
         triggerElRef,

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

@@ -10,7 +10,7 @@ declare const calculatePosition: (args: {
     };
     passedContainer?: HTMLElement | null;
     containerBounds: DOMRect;
-} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift">) => {
+} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout">) => {
     position: T.Position;
     styles: {
         width: string | number | undefined;

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

@@ -1,22 +1,10 @@
-const SCREEN_OFFSET = 16;
-const getRTLPosition = (position) => {
-    if (position.includes("start"))
-        return position.replace("start", "end");
-    if (position.includes("end"))
-        return position.replace("end", "start");
-    return position;
-};
-/**
- * Get a position value which centers 2 elements vertically or horizontally
- */
-const centerBySize = (originSize, targetSize) => {
-    return Math.floor(originSize / 2 - targetSize / 2);
-};
+import { getRTLPosition, centerBySize } from "./helpers.js";
+const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, passedContainer, } = args;
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, } = args;
     const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
@@ -29,25 +17,34 @@ const calculatePosition = (args) => {
         position = position.includes("top") ? "top" : "bottom";
     }
     const isHorizontalPosition = !!position.match(/^(start|end)/);
-    const isVerticalPosition = !!position.match(/^(top|bottom)/);
     // 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 + (isVerticalPosition ? contentGap : 0);
-    const triggerHeight = triggerBounds.height;
+    const flyoutHeight = flyoutBounds.height + (!isHorizontalPosition ? contentGap : 0);
     const triggerWidth = triggerBounds.width;
-    const containerY = passedContainer?.scrollTop || 0;
-    const containerX = passedContainer?.scrollLeft || 0;
-    const relativeLeft = triggerBounds.left - containerBounds.left + containerX;
-    const relativeTop = triggerBounds.top - containerBounds.top + containerY;
-    const relativeRight = containerBounds.right - triggerBounds.right - containerX;
-    const relativeBottom = containerBounds.bottom - triggerBounds.bottom - containerY;
+    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":
-            right = relativeRight + triggerWidth;
             left = relativeLeft - flyoutWidth;
+            right = relativeRight + triggerWidth;
             break;
         case "end":
         case "end-top":
@@ -64,8 +61,8 @@ const calculatePosition = (args) => {
             break;
         case "top-end":
         case "bottom-end":
-            right = relativeRight - contentShift;
             left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
+            right = relativeRight - contentShift;
             break;
         default:
             break;
@@ -74,8 +71,8 @@ const calculatePosition = (args) => {
         case "top":
         case "top-start":
         case "top-end":
-            bottom = relativeBottom + triggerHeight;
             top = relativeTop - flyoutHeight;
+            bottom = relativeBottom + triggerHeight;
             break;
         case "bottom":
         case "bottom-start":
@@ -92,12 +89,39 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            bottom = relativeBottom - contentShift;
             top = relativeTop + triggerHeight - flyoutHeight + contentShift;
+            bottom = relativeBottom - contentShift;
             break;
         default:
             break;
     }
+    if (fallbackAdjustLayout) {
+        const topOverflowSize = -top + scrollY + SCREEN_OFFSET;
+        const bottomOverflowSize = top + flyoutHeight + SCREEN_OFFSET - scrollY - renderContainerHeight;
+        const leftOverflowSize = -left + scrollX + SCREEN_OFFSET;
+        const rightOverflowSize = left + flyoutWidth + SCREEN_OFFSET - scrollX - renderContainerWidth;
+        if (isHorizontalPosition) {
+            if (topOverflowSize > 0) {
+                top = SCREEN_OFFSET + scrollY;
+                if (bottom !== null)
+                    bottom = bottom - topOverflowSize;
+            }
+            else if (bottomOverflowSize > 0) {
+                console.log({ bottomOverflowSize, renderContainerHeight });
+                top = top - bottomOverflowSize;
+            }
+        }
+        else {
+            if (leftOverflowSize > 0) {
+                left = SCREEN_OFFSET + scrollX;
+                if (right !== null)
+                    right = right - leftOverflowSize;
+            }
+            else if (rightOverflowSize > 0) {
+                left = left - rightOverflowSize;
+            }
+        }
+    }
     let widthStyle;
     if (isFullWidth) {
         left = SCREEN_OFFSET;

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

@@ -7,7 +7,7 @@ import { resetStyles } from "../Flyout.constants.js";
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
     const targetClone = flyoutEl.cloneNode(true);
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
@@ -42,37 +42,41 @@ const flyout = (args) => {
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
     const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    let calculated = null;
-    const testOrder = getPositionFallbacks(position, fallbackPositions);
-    testOrder.some((currentPosition) => {
-        const tested = calculatePosition({
+    const applyPosition = (position) => {
+        return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
             containerBounds: renderContainerBounds,
-            position: currentPosition,
+            position,
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
             width,
-            passedContainer,
+            passedContainer: passedContainer ||
+                (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
+            fallbackAdjustLayout,
         });
-        const visible = isFullyVisible({
-            flyoutBounds: tested.boundaries,
+    };
+    const testVisibility = (calculated) => {
+        return isFullyVisible({
+            flyoutBounds: calculated.boundaries,
             visualContainerBounds,
             renderContainerBounds,
             container,
         });
-        const validPosition = visible || fallbackPositions?.length === 0;
-        // Saving first try in case none of the options work
-        if (validPosition || lastUsedPosition === currentPosition) {
+    };
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition) => {
+        const tested = applyPosition(currentPosition);
+        const visible = testVisibility(tested);
+        if (visible)
             calculated = tested;
-            onPositionChoose(currentPosition);
-        }
-        return validPosition;
+        return visible;
     });
-    if (!calculated) {
-        throw new Error(`[Reshaped] Can't calculate styles for the ${position} position`);
-    }
+    if (!calculated)
+        calculated = applyPosition(lastUsedPosition);
+    onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
     return calculated;
 };

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

@@ -0,0 +1,7 @@
+import type * as T from "../Flyout.types";
+/** Mirror the position for RTL */
+export declare const getRTLPosition: (position: T.Position) => T.Position;
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+export declare const centerBySize: (originSize: number, targetSize: number) => number;

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

@@ -0,0 +1,14 @@
+/** Mirror the position for RTL */
+export const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+export const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};

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

@@ -1,10 +1,14 @@
 /**
- * Check if element visually fits on the screen
+ * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
+    /** Bounds of the flyout content */
     flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    /** Bounds of the container where the flyout content should fit */
     visualContainerBounds: DOMRect;
+    /** Bounds of the container where flyout content is rendered */
     renderContainerBounds: DOMRect;
+    /** Container where the flyout content is rendered */
     container: HTMLElement;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,5 +1,5 @@
 /**
- * Check if element visually fits on the screen
+ * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds, container } = args;

package/dist/components/PinField/PinField.module.css

@@ -1 +1 @@
-.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}
+.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;clip-path:inset(0 calc(50% + var(--rs-unit-x2)) 0 0);color:transparent;font-size:16px;inset-block:0;inset-inline-start:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/internal/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PinFieldProps>;
@@ -8,6 +10,25 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const variant: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const valueLength: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const pattern: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const formControl: StoryObj;
+export declare const keyboard: StoryObj;