reshaped 3.9.0-canary.13 → 3.9.0-canary.15

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -131,6 +131,8 @@ type BaseProps = {
     contentShift?: number;
     /** Maximum height for the content */
     contentMaxHeight?: string;
+    /** Maximum width for the content */
+    contentMaxWidth?: string;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
@@ -188,7 +190,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -97,6 +97,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 "--rs-flyout-gap": contentGap,
                 "--rs-flyout-max-h": contentMaxHeight,
+                "--rs-flyout-max-w": contentMaxWidth,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef, children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentCo
 import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -55,12 +55,13 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
     // eslint-disable-next-line react-hooks/refs
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerBoundsRef: originCoordinates ? originCoordinatesRef : triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -147,9 +148,11 @@ const FlyoutControlled = (props) => {
         }
     }, [clearTimer, handleOpen, groupTimeouts]);
     const handleMouseLeave = React.useCallback((e) => {
-        if (e.relatedTarget === flyoutElRef.current)
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
             return;
-        if (e.relatedTarget === triggerElRef.current)
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
             return;
         cooldown.cool();
         clearTimer();
@@ -338,6 +341,7 @@ const FlyoutControlled = (props) => {
             contentAttributes,
             contentGap,
             contentMaxHeight,
+            contentMaxWidth,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -6,7 +6,7 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
+    triggerBoundsRef: React.RefObject<DOMRect | G.Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

package/dist/components/Flyout/useFlyout.js

@@ -26,7 +26,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -60,7 +60,7 @@ const useFlyout = (args) => {
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
@@ -88,7 +88,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBounds,
+        triggerBoundsRef,
         width,
         contentGap,
         contentShift,

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

@@ -1,5 +1,5 @@
+import { SCREEN_OFFSET } from "./constants.js";
 import { getRTLPosition, centerBySize } from "./helpers.js";
-const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */

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

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

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

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

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

@@ -41,8 +41,7 @@ const flyout = (args) => {
         closestFixedContainer ||
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
-    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    const applyPosition = (position) => {
+    const applyPosition = (position, options) => {
         return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
@@ -51,7 +50,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
-            width,
+            width: options?.width || width,
             passedContainer: passedContainer ||
                 (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
             fallbackAdjustLayout,
@@ -60,6 +59,12 @@ const flyout = (args) => {
         });
     };
     const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,
@@ -75,6 +80,17 @@ const flyout = (args) => {
             calculated = tested;
         return visible;
     });
+    // Try full width positions in case it doesn't fit on any side
+    if (!calculated) {
+        const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
+        smallScreenFallbackPositions.some((position) => {
+            const tested = applyPosition(position, { width: "full" });
+            const visible = testVisibility(tested);
+            if (visible)
+                calculated = tested;
+            return visible;
+        });
+    }
     if (!calculated)
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);

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

@@ -1,12 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * 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">;
+    flyoutBounds: Bounds;
     /** Bounds of the container where the flyout content should fit */
-    visualContainerBounds: DOMRect;
+    visualContainerBounds: Bounds;
     /** Bounds of the container where flyout content is rendered */
-    renderContainerBounds: DOMRect;
+    renderContainerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,20 +1,21 @@
+import { SCREEN_OFFSET } from "./constants.js";
 /**
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.right) {
+        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.bottom) {
+        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
         return false;
     }
     return true;

package/dist/components/Tooltip/Tooltip.js

@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
+    const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
     if (!text)
         return children({ ref: null });
     return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", 
         // Disable group timeouts by default since it's not controlled by the default user events
-        groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+        groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 Tooltip.displayName = "Tooltip";
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}
+.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */

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-canary.13",
+  "version": "3.9.0-canary.15",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",