@uniformdev/design-system 19.155.0 → 19.157.0

package/dist/esm/index.js

@@ -15475,8 +15475,10 @@ var details = css54`
   }
 `;
 var detailsContent = css54`
+  position: relative;
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
+  z-index: 1;
 `;
 var detailsContentIndented = css54`
   margin-left: calc(1.25rem / 2);
@@ -17518,8 +17520,10 @@ import { useCallback as useCallback8 } from "react";
 import {
   Popover as AriakitPopover,
   PopoverDisclosure as PopoverDisclosure2,
-  PopoverProvider
+  PopoverProvider,
+  usePopoverStore
 } from "@ariakit/react";
+import { useEffect as useEffect11 } from "react";
 import { Fragment as Fragment13, jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
@@ -17532,9 +17536,14 @@ var Popover3 = ({
   trigger: trigger2,
   children,
   baseId,
+  onInit,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsxs61(PopoverProvider, { placement, children: [
+  const popover2 = usePopoverStore({ placement });
+  useEffect11(() => {
+    onInit == null ? void 0 : onInit({ store: popover2 });
+  }, [popover2]);
+  return /* @__PURE__ */ jsxs61(PopoverProvider, { store: popover2, children: [
     /* @__PURE__ */ jsx94(
       PopoverDisclosure2,
       {
@@ -17707,7 +17716,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
-import React20, { useEffect as useEffect11, useRef as useRef6 } from "react";
+import React20, { useEffect as useEffect12, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css76 } from "@emotion/react";
@@ -17821,7 +17830,7 @@ var Modal = React20.forwardRef(
       },
       shortcut: "escape"
     });
-    useEffect11(() => {
+    useEffect12(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -18876,6 +18885,8 @@ var ParameterMultiSelectInner = (props) => {
   return /* @__PURE__ */ jsx110(
     InputComboBox,
     {
+      menuPortalTarget: document.body,
+      menuPlacement: "auto",
       ...props,
       isMulti: true,
       isClearable: (_a = props.isClearable) != null ? _a : false,
@@ -18883,6 +18894,10 @@ var ParameterMultiSelectInner = (props) => {
       "aria-label": label,
       classNamePrefix: "parameter-multi-select-combobox",
       styles: {
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: "var(--z-tooltip)"
+        }),
         valueContainer: (base) => ({
           ...base,
           padding: "0 var(--spacing-sm)",
@@ -19108,7 +19123,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect16, useRef as useRef8 } from "react";
+import { useEffect as useEffect17, useRef as useRef8 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -19129,10 +19144,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect12(() => {
+  useEffect13(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -19341,7 +19356,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef7, useState as useState14 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef7, useState as useState14 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -19688,13 +19703,13 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
   const linkPopoverElRef = useRef7(null);
   const [isEditorFocused, setIsEditorFocused] = useState14(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState14(false);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -19795,7 +19810,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -19887,7 +19902,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
@@ -19911,7 +19926,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect14(() => {
+  useEffect15(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -19944,7 +19959,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect15, useMemo as useMemo4, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect16, useMemo as useMemo4, useState as useState15 } from "react";
 import { Fragment as Fragment18, jsx as jsx114, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var toolbar = css87`
   background: var(--gray-50);
@@ -20087,7 +20102,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect15(() => {
+  useEffect16(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -20097,7 +20112,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect15(() => {
+  useEffect16(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -20553,12 +20568,12 @@ var RichText = ({
 }) => {
   const editorContainerRef = useRef8(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect16(() => {
+  useEffect17(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect16(() => {
+  useEffect17(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -20570,7 +20585,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs76(Fragment19, { children: [
@@ -20876,7 +20891,7 @@ var ProgressListItem = ({
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css93 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo6, useRef as useRef9, useState as useState16 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo6, useRef as useRef9, useState as useState16 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css92 } from "@emotion/react";
@@ -21090,7 +21105,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo6(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect17(() => {
+  useEffect18(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -21401,7 +21416,7 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback12, useEffect as useEffect18, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo7 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css97 } from "@emotion/react";
@@ -21462,7 +21477,7 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }

package/dist/index.d.mts

@@ -19,7 +19,8 @@ import { CalendarProps as CalendarProps$1, TimeFieldProps, TimeValue } from 'rea
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
 import * as _ariakit_react from '@ariakit/react';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, PopoverStore, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
+export { PopoverStore } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
@@ -22873,7 +22874,7 @@ type ParameterMenuButtonProps = {
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type ParameterMultiSelectOption = InputComboBoxOption;
-type ParameterMultiSelectInnerProps = Pick<InputComboBoxProps<ParameterMultiSelectOption, true>, 'options' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'>;
+type ParameterMultiSelectInnerProps = Pick<InputComboBoxProps<ParameterMultiSelectOption, true>, 'options' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'>;
 type ParameterMultiSelectProps = CommonParameterInputProps & ParameterMultiSelectInnerProps & {
     disabled?: boolean;
 };
@@ -23141,8 +23142,11 @@ type PopoverProps = PopoverProps$1 & {
     trigger?: ReactNode;
     /** @deprecated */
     baseId?: string;
+    onInit?: ({ store }: {
+        store: PopoverStore;
+    }) => void;
 };
-declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, onInit, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;

package/dist/index.d.ts

@@ -19,7 +19,8 @@ import { CalendarProps as CalendarProps$1, TimeFieldProps, TimeValue } from 'rea
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
 import * as _ariakit_react from '@ariakit/react';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, PopoverStore, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
+export { PopoverStore } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
@@ -22873,7 +22874,7 @@ type ParameterMenuButtonProps = {
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type ParameterMultiSelectOption = InputComboBoxOption;
-type ParameterMultiSelectInnerProps = Pick<InputComboBoxProps<ParameterMultiSelectOption, true>, 'options' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'>;
+type ParameterMultiSelectInnerProps = Pick<InputComboBoxProps<ParameterMultiSelectOption, true>, 'options' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'>;
 type ParameterMultiSelectProps = CommonParameterInputProps & ParameterMultiSelectInnerProps & {
     disabled?: boolean;
 };
@@ -23141,8 +23142,11 @@ type PopoverProps = PopoverProps$1 & {
     trigger?: ReactNode;
     /** @deprecated */
     baseId?: string;
+    onInit?: ({ store }: {
+        store: PopoverStore;
+    }) => void;
 };
-declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, onInit, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;