@uniformdev/design-system 20.53.1-alpha.7 → 20.53.1

package/dist/esm/index.js

@@ -11895,7 +11895,7 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 // src/components/Modal/Modal.tsx
 import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React16, { useEffect as useEffect17, useRef as useRef11 } from "react";
+import React16, { useCallback as useCallback9, useEffect as useEffect17, useRef as useRef11, useState as useState16 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -12001,6 +12001,19 @@ var Modal = React16.forwardRef(
   }, ref) => {
     const mouseDownInsideModal = useRef11(false);
     const dialogRef = useRef11(null);
+    const [portalTarget, setPortalTarget] = useState16(null);
+    const setDialogRef = useCallback9(
+      (element) => {
+        dialogRef.current = element;
+        setPortalTarget(element);
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          ref.current = element;
+        }
+      },
+      [ref]
+    );
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -12029,17 +12042,7 @@ var Modal = React16.forwardRef(
     return /* @__PURE__ */ jsx108(
       "dialog",
       {
-        ref: (element) => {
-          dialogRef.current = element;
-          if (!ref) {
-            return;
-          }
-          if (typeof ref === "function") {
-            ref(element);
-          } else {
-            ref.current = element;
-          }
-        },
+        ref: setDialogRef,
         css: [modalStyles, !width ? size[modalSize] : void 0],
         style: {
           width,
@@ -12064,7 +12067,7 @@ var Modal = React16.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ jsx108(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs73(
+        children: /* @__PURE__ */ jsx108(PortalContext.Provider, { value: portalTarget, children: /* @__PURE__ */ jsxs73(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
@@ -12448,7 +12451,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect18, useRef as useRef12, useState as useState16 } from "react";
+import { useEffect as useEffect18, useRef as useRef12, useState as useState17 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css87 } from "@emotion/react";
@@ -12474,7 +12477,7 @@ var ObjectGridItemHeading2 = ({
   tooltip,
   ...props
 }) => {
-  const [hasTruncation, setHasTruncation] = useState16(false);
+  const [hasTruncation, setHasTruncation] = useState17(false);
   const headingRef = useRef12(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
@@ -13174,7 +13177,7 @@ var ParameterGroup = forwardRef21(
 import { forwardRef as forwardRef23, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -13217,7 +13220,7 @@ var previewModalImage = css96`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { Fragment as Fragment13, jsx as jsx126, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState17(false);
+  const [showModal, setShowModal] = useState18(false);
   return imageSrc ? /* @__PURE__ */ jsxs85("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx126(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx126(
@@ -13249,7 +13252,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css99 } from "@emotion/react";
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 import { css as css97 } from "@emotion/react";
@@ -13697,7 +13700,7 @@ var ParameterShell = ({
   menuWithoutPortal,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState18(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState19(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs86("div", { css: inputContainer2, ...props, id, children: [
@@ -14209,10 +14212,10 @@ var ParameterNameAndPublicIdInput = ({
 import { forwardRef as forwardRef27 } from "react";
 
 // src/components/Slider/Slider.tsx
-import { forwardRef as forwardRef26, useCallback as useCallback9, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef26, useCallback as useCallback10, useMemo as useMemo8 } from "react";
 
 // src/components/Slider/SliderLabels.tsx
-import { useEffect as useEffect19, useRef as useRef14, useState as useState19 } from "react";
+import { useEffect as useEffect19, useRef as useRef14, useState as useState20 } from "react";
 
 // src/components/Slider/styles/Slider.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -14638,7 +14641,7 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
 }
 function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
   const containerRef = useRef14(null);
-  const [measuredWidth, setMeasuredWidth] = useState19(containerWidth);
+  const [measuredWidth, setMeasuredWidth] = useState20(containerWidth);
   useEffect19(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
@@ -14771,14 +14774,14 @@ var Slider = forwardRef26(
     }, [isOptionsMode, options, propMin, propMax, propStep]);
     const isValueUnset = value === void 0 || value === null || typeof value === "number" && isNaN(value);
     const clampedValue = isValueUnset ? min : Math.min(Math.max(value, min), max);
-    const handleSliderChange = useCallback9(
+    const handleSliderChange = useCallback10(
       (event) => {
         const newValue = Number(event.target.value);
         onChange(newValue);
       },
       [onChange]
     );
-    const handleNumberInputChange = useCallback9(
+    const handleNumberInputChange = useCallback10(
       (event) => {
         if (event.target.value === "") {
           onChange(void 0);
@@ -15017,7 +15020,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect28, useState as useState25 } from "react";
+import { useEffect as useEffect28, useState as useState26 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -15374,7 +15377,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect22, useRef as useRef15, useState as useState20 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef15, useState as useState21 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -15747,10 +15750,10 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState20();
+  const [linkPopoverState, setLinkPopoverState] = useState21();
   const linkPopoverElRef = useRef15(null);
-  const [isEditorFocused, setIsEditorFocused] = useState20(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState20(false);
+  const [isEditorFocused, setIsEditorFocused] = useState21(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState21(false);
   useEffect22(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -15861,7 +15864,7 @@ function LinkNodePlugin({
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback10(() => {
+  const maybeShowLinkToolbar = useCallback11(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -16121,7 +16124,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
-import { forwardRef as forwardRef28, useCallback as useCallback11, useEffect as useEffect24, useLayoutEffect, useState as useState21 } from "react";
+import { forwardRef as forwardRef28, useCallback as useCallback12, useEffect as useEffect24, useLayoutEffect, useState as useState22 } from "react";
 import { jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -16136,7 +16139,7 @@ var tableActionMenuTrigger = css103`
 `;
 var TableActionMenuTrigger = forwardRef28((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState21({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState22({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16170,12 +16173,12 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState21(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState21({
+  const [tableCellNode, updateTableCellNode] = useState22(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState22({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState21(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState22(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
@@ -16201,7 +16204,7 @@ function TableActionMenu({
       }
     });
   }, [editor]);
-  const clearTableSelection = useCallback11(() => {
+  const clearTableSelection = useCallback12(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -16218,7 +16221,7 @@ function TableActionMenu({
       $setSelection(null);
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = useCallback11(
+  const insertTableRowAtSelection = useCallback12(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.rows; i++) {
@@ -16228,7 +16231,7 @@ function TableActionMenu({
     },
     [editor, selectionCounts.rows]
   );
-  const insertTableColumnAtSelection = useCallback11(
+  const insertTableColumnAtSelection = useCallback12(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.columns; i++) {
@@ -16238,26 +16241,26 @@ function TableActionMenu({
     },
     [editor, selectionCounts.columns]
   );
-  const deleteTableRowAtSelection = useCallback11(() => {
+  const deleteTableRowAtSelection = useCallback12(() => {
     editor.update(() => {
       $deleteTableRowAtSelection();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const deleteTableAtSelection = useCallback11(() => {
+  const deleteTableAtSelection = useCallback12(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = useCallback11(() => {
+  const deleteTableColumnAtSelection = useCallback12(() => {
     editor.update(() => {
       $deleteTableColumnAtSelection();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const toggleTableRowIsHeader = useCallback11(() => {
+  const toggleTableRowIsHeader = useCallback12(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
@@ -16277,7 +16280,7 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = useCallback11(() => {
+  const toggleTableColumnIsHeader = useCallback12(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
@@ -16368,9 +16371,9 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState21(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState21(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState21(null);
+  const [tableCellNode, setTableMenuCellNode] = useState22(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState22(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState22(null);
   useEffect24(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
@@ -16379,14 +16382,14 @@ function TableCellActionMenuContainer({
       newPortalEl.remove();
     };
   }, [menuPortalEl]);
-  const setTableMenuCellNodeElem = useCallback11((elem) => {
+  const setTableMenuCellNodeElem = useCallback12((elem) => {
     if (elem) {
       _setTableMenuCellNodeEl(elem);
     } else {
       _setTableMenuCellNodeEl(null);
     }
   }, []);
-  const $moveMenu = useCallback11(() => {
+  const $moveMenu = useCallback12(() => {
     const selection = $getSelection3();
     const nativeSelection = window.getSelection();
     const activeElement = document.activeElement;
@@ -16454,7 +16457,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback12, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef17, useState as useState22 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef17, useState as useState23 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment17, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
@@ -16485,11 +16488,11 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const resizerRef = useRef17(null);
   const tableRectRef = useRef17(null);
   const mouseStartPosRef = useRef17(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState22(null);
-  const [activeCell, updateActiveCell] = useState22(null);
-  const [isMouseDown, updateIsMouseDown] = useState22(false);
-  const [draggingDirection, updateDraggingDirection] = useState22(null);
-  const resetState = useCallback12(() => {
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState23(null);
+  const [activeCell, updateActiveCell] = useState23(null);
+  const [isMouseDown, updateIsMouseDown] = useState23(false);
+  const [draggingDirection, updateDraggingDirection] = useState23(null);
+  const resetState = useCallback13(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -16566,7 +16569,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     }
     return false;
   };
-  const updateRowHeight = useCallback12(
+  const updateRowHeight = useCallback13(
     (heightChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -16628,7 +16631,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
       }
     }
   };
-  const updateColumnWidth = useCallback12(
+  const updateColumnWidth = useCallback13(
     (widthChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -16662,7 +16665,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, editor]
   );
-  const mouseUpHandler = useCallback12(
+  const mouseUpHandler = useCallback13(
     (direction) => {
       const handler = (event) => {
         event.preventDefault();
@@ -16691,7 +16694,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, resetState, updateColumnWidth, updateRowHeight]
   );
-  const toggleResize = useCallback12(
+  const toggleResize = useCallback13(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -16708,7 +16711,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, mouseUpHandler]
   );
-  const getResizers = useCallback12(() => {
+  const getResizers = useCallback13(() => {
     if (activeCell) {
       const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
       const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16798,10 +16801,10 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect26, useState as useState23 } from "react";
+import { useEffect as useEffect26, useState as useState24 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState23(null);
+  const [closestTableCellNode, setClosestTableCellNode] = useState24(null);
   useEffect26(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
@@ -16871,7 +16874,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback13, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect27 } from "react";
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -16887,7 +16890,7 @@ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
-import { useMemo as useMemo10, useState as useState24 } from "react";
+import { useMemo as useMemo10, useState as useState25 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
   const enabledBuiltInFormats = useMemo10(() => {
@@ -16908,7 +16911,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState24([]);
+  const [activeFormats, setActiveFormats] = useState25([]);
   const visibleFormatsWithIcon = useMemo10(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -16929,7 +16932,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState24("paragraph");
+  const [activeElement, setActiveElement] = useState25("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -16944,7 +16947,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState24(false);
+  const [isLink, setIsLink] = useState25(false);
   const linkElementVisible = useMemo10(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -17133,7 +17136,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   };
-  const updateToolbar = useCallback13(() => {
+  const updateToolbar = useCallback14(() => {
     const selection = $getSelection5();
     if (!$isRangeSelection5(selection)) {
       return;
@@ -17608,13 +17611,13 @@ var RichText = ({
   useEffect28(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState25(null);
+  const [editorContainerRef, setEditorContainerRef] = useState26(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState25(null);
+  const [portalContainerRef, setPortalContainerRef] = useState26(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
@@ -17723,7 +17726,7 @@ var ParameterSelectInner = forwardRef29(
 );
 
 // src/components/ParameterInputs/ParameterSelectSlider.tsx
-import { forwardRef as forwardRef30, useCallback as useCallback14, useMemo as useMemo11 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback15, useMemo as useMemo11 } from "react";
 import { jsx as jsx145 } from "@emotion/react/jsx-runtime";
 var ParameterSelectSlider = forwardRef30(
   (props, ref) => {
@@ -17740,7 +17743,7 @@ var ParameterSelectSliderInner = forwardRef30(({ options, value, onChange, ...pr
     const index = options.findIndex((option) => option.value === value);
     return index >= 0 ? index : void 0;
   }, [options, value]);
-  const handleChange = useCallback14(
+  const handleChange = useCallback15(
     (newValue) => {
       var _a;
       if (newValue === void 0) {
@@ -18022,7 +18025,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css111 } from "@emotion/react";
-import { useCallback as useCallback15, useEffect as useEffect29, useMemo as useMemo13, useRef as useRef18, useState as useState26 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect29, useMemo as useMemo13, useRef as useRef18, useState as useState27 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css110 } from "@emotion/react";
@@ -18202,9 +18205,9 @@ var SegmentedControl = ({
   ...props
 }) => {
   const wrapperRef = useRef18(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState26(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState26(false);
-  const onOptionChange = useCallback15(
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState27(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState27(false);
+  const onOptionChange = useCallback16(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -18863,7 +18866,7 @@ var Spinner = ({
 };
 
 // src/components/StackedModal/hooks/StackedModalProvider.tsx
-import { createContext as createContext6, useCallback as useCallback16, useContext as useContext6, useMemo as useMemo14, useRef as useRef20, useState as useState27 } from "react";
+import { createContext as createContext6, useCallback as useCallback17, useContext as useContext6, useMemo as useMemo14, useRef as useRef20, useState as useState28 } from "react";
 import { jsx as jsx153 } from "@emotion/react/jsx-runtime";
 var StackedModalContext = createContext6(null);
 function useStackedModal() {
@@ -18883,10 +18886,10 @@ function useStepTransition(index) {
   };
 }
 function StackedModalProvider({ children, totalSteps, initialStep }) {
-  const [currentStep, setCurrentStep] = useState27(initialStep);
-  const [direction, setDirection] = useState27("forward");
+  const [currentStep, setCurrentStep] = useState28(initialStep);
+  const [direction, setDirection] = useState28("forward");
   const previousStepRef = useRef20(initialStep);
-  const nextStep = useCallback16(() => {
+  const nextStep = useCallback17(() => {
     setCurrentStep((prev) => {
       if (prev >= totalSteps - 1) {
         return prev;
@@ -18896,7 +18899,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
       return prev + 1;
     });
   }, [totalSteps]);
-  const goBack = useCallback16(() => {
+  const goBack = useCallback17(() => {
     setCurrentStep((prev) => {
       if (prev <= 0) {
         return prev;
@@ -18906,7 +18909,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
       return prev - 1;
     });
   }, []);
-  const goToStep = useCallback16(
+  const goToStep = useCallback17(
     (index) => {
       setCurrentStep((prev) => {
         if (index < 0 || index >= totalSteps || index === prev) {
@@ -19453,7 +19456,7 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback17, useMemo as useMemo16 } from "react";
+import { useCallback as useCallback18, useMemo as useMemo16 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css117 } from "@emotion/react";
@@ -19501,7 +19504,7 @@ var Tabs = ({
     if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const onTabSelect = useCallback17(
+  const onTabSelect = useCallback18(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);

package/dist/index.js

@@ -13913,6 +13913,19 @@ var Modal = import_react131.default.forwardRef(
   }, ref) => {
     const mouseDownInsideModal = (0, import_react131.useRef)(false);
     const dialogRef = (0, import_react131.useRef)(null);
+    const [portalTarget, setPortalTarget] = (0, import_react131.useState)(null);
+    const setDialogRef = (0, import_react131.useCallback)(
+      (element) => {
+        dialogRef.current = element;
+        setPortalTarget(element);
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          ref.current = element;
+        }
+      },
+      [ref]
+    );
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -13941,17 +13954,7 @@ var Modal = import_react131.default.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       "dialog",
       {
-        ref: (element) => {
-          dialogRef.current = element;
-          if (!ref) {
-            return;
-          }
-          if (typeof ref === "function") {
-            ref(element);
-          } else {
-            ref.current = element;
-          }
-        },
+        ref: setDialogRef,
         css: [modalStyles, !width ? size[modalSize] : void 0],
         style: {
           width,
@@ -13976,7 +13979,7 @@ var Modal = import_react131.default.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react130.PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react130.PortalContext.Provider, { value: portalTarget, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.53.1-alpha.7+1c3bd56284",
+  "version": "20.53.1",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -35,8 +35,8 @@
     "@storybook/react-vite": "10.1.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@uniformdev/canvas": "^20.53.1-alpha.7+1c3bd56284",
-    "@uniformdev/richtext": "^20.53.1-alpha.7+1c3bd56284",
+    "@uniformdev/canvas": "^20.53.1",
+    "@uniformdev/richtext": "^20.53.1",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
     "jsdom": "20.0.3",
@@ -88,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c3bd56284db96f16318a18e62b3b6e83cb09f9b"
+  "gitHead": "2a33fdce31a3a0f83b7b762356e03cdd65013a42"
 }