reshaped 3.5.4-canary.0 → 3.6.0-canary.1

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

@@ -0,0 +1,79 @@
+import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
+import calculatePosition from "./calculatePosition.js";
+import getPositionFallbacks from "./getPositionFallbacks.js";
+import isFullyVisible from "./isFullyVisible.js";
+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, lastUsedFallback, onFallback, rtl, } = args;
+    const targetClone = flyoutEl.cloneNode(true);
+    const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
+    const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
+    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
+    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 === "trigger") {
+        targetClone.style.width = `${resolvedTriggerBounds.width}px`;
+    }
+    else if (width && 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 cloneRect = targetClone.getBoundingClientRect();
+    const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
+    const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
+    const container = passedContainer ||
+        // Render inside fixed position container automatically to keep their position synced on scroll
+        closestFixedContainer ||
+        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({
+            triggerBounds: resolvedTriggerBounds,
+            flyoutBounds,
+            containerBounds: renderContainerBounds,
+            position: currentPosition,
+            contentGap: contentGap * unitModifier,
+            contentShift: contentShift * unitModifier,
+            rtl,
+            width,
+            passedContainer,
+        });
+        const visible = isFullyVisible({
+            flyoutBounds: tested.boundaries,
+            visualContainerBounds,
+            renderContainerBounds,
+            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;
+};
+export default flyout;

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

@@ -0,0 +1,10 @@
+/**
+ * Check if element visually fits on the screen
+ */
+declare const isFullyVisible: (args: {
+    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    visualContainerBounds: DOMRect;
+    renderContainerBounds: DOMRect;
+    container: HTMLElement;
+}) => boolean;
+export default isFullyVisible;

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

@@ -0,0 +1,24 @@
+/**
+ * Check if element visually fits on the screen
+ */
+const isFullyVisible = (args) => {
+    const { flyoutBounds, visualContainerBounds, renderContainerBounds, container } = args;
+    const scrollX = container === document.body ? window.scrollX : container.scrollLeft;
+    const scrollY = container === document.body ? window.scrollY : container.scrollTop;
+    if (renderContainerBounds.left + flyoutBounds.left - scrollX < visualContainerBounds.left) {
+        return false;
+    }
+    if (renderContainerBounds.top + flyoutBounds.top - scrollY < visualContainerBounds.top) {
+        return false;
+    }
+    if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width - scrollX >
+        visualContainerBounds.right) {
+        return false;
+    }
+    if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height - scrollY >
+        visualContainerBounds.bottom) {
+        return false;
+    }
+    return true;
+};
+export default isFullyVisible;

package/dist/components/FormControl/FormControl.context.d.ts

@@ -184,8 +184,6 @@ export declare const useFormControl: () => {
         onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;

package/dist/components/Grid/Grid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import getAlignStyles from "../../styles/align/index.js";
 import getJustifyStyles from "../../styles/justify/index.js";
 import s from "./Grid.module.css";

package/dist/components/Hidden/Hidden.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;

package/dist/components/Hotkey/Hotkey.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Text from "../Text/index.js";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Hotkey.module.css";
 const Hotkey = (props) => {
     const { children, active, className, attributes } = props;

package/dist/components/Icon/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import getHeightStyles from "../../styles/height/index.js";
 import s from "./Icon.module.css";
 const Icon = (props) => {

package/dist/components/Image/Image.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Image.module.css";
 import getRadiusStyles from "../../styles/radius/index.js";
 import getWidthStyles from "../../styles/width/index.js";

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ActionableRef } from "../Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "type" | "onClick" | "href" | "stopPropagation"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "children" | "className" | "attributes" | "type" | "href" | "onClick" | "stopPropagation"> & {
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

package/dist/components/Link/Link.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import s from "./Link.module.css";

package/dist/components/Loader/Loader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Loader.module.css";
 const Loader = (props) => {
     const { size = "small", color = "primary", className, attributes } = props;

package/dist/components/MenuItem/MenuItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";

package/dist/components/NumberField/NumberFieldControlled.js

@@ -13,7 +13,7 @@ import useElementId from "../../hooks/useElementId.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import * as keys from "../../constants/keys.js";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./NumberField.module.css";
 const NumberFieldControlled = (props) => {
     const { increaseAriaLabel, decreaseAriaLabel, min, max, step = 1, name, value, onChange, size = "medium", ...textFieldProps } = props;

package/dist/components/Overlay/Overlay.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { TrapFocus } from "../../utilities/a11y/index.js";
 import useToggle from "../../hooks/useToggle.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";

package/dist/components/PinField/PinFieldControlled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/helpers.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import View from "../View/index.js";
 import Text from "../Text/index.js";
 import useHotkeys from "../../hooks/useHotkeys.js";

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import Flyout from "../_private/Flyout";
+import Flyout from "../Flyout";
 import { type DismissibleProps } from "../Dismissible";
 import type * as T from "./Popover.types";
 declare const Popover: React.FC<T.Props> & {

package/dist/components/Popover/Popover.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import Flyout, { useFlyoutContext } from "../_private/Flyout/index.js";
+import { classNames } from "../../utilities/props.js";
+import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
 const Popover = (props) => {
-    const { width, variant = "elevated", triggerType = "click", position = "bottom", ...flyoutProps } = props;
+    const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
     const paddingStyles = getPaddingStyles(padding);
-    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`]);
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`]);
     return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
 };
 const PopoverDismissible = (props) => {

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

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

@@ -1,8 +1,10 @@
 import type React from "react";
-import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
+import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
 export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     children?: React.ReactNode;
     padding?: number;
+    elevation?: "raised" | "overlay";
+    /** @deprecated use Flyout utility instead, will be removed in v4 */
     variant?: "elevated" | "headless";
 };

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

@@ -1,9 +1,11 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PopoverProps> & {
         Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
+        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../../Flyout").FlyoutContentProps>;
     };
     parameters: {
         iframe: {
@@ -12,10 +14,47 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => import("react").JSX.Element;
-export declare const width: () => import("react").JSX.Element;
-export declare const variant: () => import("react").JSX.Element;
-export declare const padding: () => import("react").JSX.Element;
-export declare const triggerType: () => import("react").JSX.Element;
-export declare const dismissible: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const widthNumber: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const widthFull: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const padding: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const elevation: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const active: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const activeFalse: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const dismissible: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const testWithTooltip: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};