@elementor/editor-controls 3.35.0-350 → 3.35.0-352

package/dist/index.d.mts

@@ -378,22 +378,11 @@ declare const DateTimeControl: ControlComponent$1<({ inputDisabled }: {
     inputDisabled?: boolean;
 }) => React$1.JSX.Element>;
 
-declare const InlineEditingControl: ControlComponent$1<() => React$1.JSX.Element>;
-
-type InlineEditorProps = {
-    value: string;
-    setValue: (value: string) => void;
-    attributes?: Record<string, string>;
+declare const InlineEditingControl: ControlComponent$1<({ sx, attributes, props, }: {
     sx?: SxProps<Theme>;
-    showToolbar?: boolean;
-    props?: React$1.ComponentProps<'div'>;
-};
-declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<HTMLDivElement>>;
-
-type InlineEditorToolbarProps = {
-    editor: Editor;
-};
-declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+    attributes?: Record<string, string>;
+    props?: React$1.ComponentProps<"div">;
+}) => React$1.JSX.Element>;
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
@@ -563,6 +552,27 @@ declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
     children?: React$1.ReactNode | undefined;
 } & React$1.RefAttributes<unknown>>;
 
+type InlineEditorProps = {
+    value: string | null;
+    setValue: (value: string | null) => void;
+    attributes?: Record<string, string>;
+    sx?: SxProps<Theme>;
+    onBlur?: (event: Event) => void;
+    showToolbar?: boolean;
+    autofocus?: boolean;
+    getInitialPopoverPosition?: () => {
+        left: number;
+        top: number;
+    };
+    expectedTag?: string | null;
+};
+declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
+
+type InlineEditorToolbarProps = {
+    editor: Editor;
+};
+declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent$1<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {

package/dist/index.d.ts

@@ -378,22 +378,11 @@ declare const DateTimeControl: ControlComponent$1<({ inputDisabled }: {
     inputDisabled?: boolean;
 }) => React$1.JSX.Element>;
 
-declare const InlineEditingControl: ControlComponent$1<() => React$1.JSX.Element>;
-
-type InlineEditorProps = {
-    value: string;
-    setValue: (value: string) => void;
-    attributes?: Record<string, string>;
+declare const InlineEditingControl: ControlComponent$1<({ sx, attributes, props, }: {
     sx?: SxProps<Theme>;
-    showToolbar?: boolean;
-    props?: React$1.ComponentProps<'div'>;
-};
-declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<HTMLDivElement>>;
-
-type InlineEditorToolbarProps = {
-    editor: Editor;
-};
-declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+    attributes?: Record<string, string>;
+    props?: React$1.ComponentProps<"div">;
+}) => React$1.JSX.Element>;
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
@@ -563,6 +552,27 @@ declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
     children?: React$1.ReactNode | undefined;
 } & React$1.RefAttributes<unknown>>;
 
+type InlineEditorProps = {
+    value: string | null;
+    setValue: (value: string | null) => void;
+    attributes?: Record<string, string>;
+    sx?: SxProps<Theme>;
+    onBlur?: (event: Event) => void;
+    showToolbar?: boolean;
+    autofocus?: boolean;
+    getInitialPopoverPosition?: () => {
+        left: number;
+        top: number;
+    };
+    expectedTag?: string | null;
+};
+declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
+
+type InlineEditorToolbarProps = {
+    editor: Editor;
+};
+declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent$1<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {

package/dist/index.js

@@ -5915,6 +5915,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 // src/controls/inline-editing-control.tsx
 var React102 = __toESM(require("react"));
 var import_editor_props52 = require("@elementor/editor-props");
+var import_ui88 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
 var React101 = __toESM(require("react"));
@@ -5923,8 +5924,10 @@ var import_ui87 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
 var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
+var import_extension_heading = __toESM(require("@tiptap/extension-heading"));
 var import_extension_italic = __toESM(require("@tiptap/extension-italic"));
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
+var import_extension_paragraph = __toESM(require("@tiptap/extension-paragraph"));
 var import_extension_strike = __toESM(require("@tiptap/extension-strike"));
 var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
@@ -5932,6 +5935,16 @@ var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
 var import_react56 = require("@tiptap/react");
 
+// src/utils/inline-editing.ts
+function isEmpty(value = "") {
+  if (!value) {
+    return true;
+  }
+  const pseudoElement = document.createElement("div");
+  pseudoElement.innerHTML = value;
+  return !pseudoElement.textContent?.length;
+}
+
 // src/components/inline-editor-toolbar.tsx
 var React100 = __toESM(require("react"));
 var import_react53 = require("react");
@@ -6074,7 +6087,7 @@ var InlineEditorToolbar = ({ editor }) => {
   const [urlValue, setUrlValue] = (0, import_react53.useState)("");
   const [openInNewTab, setOpenInNewTab] = (0, import_react53.useState)(false);
   const toolbarRef = (0, import_react53.useRef)(null);
-  const popupState = (0, import_ui86.usePopupState)({ variant: "popover" });
+  const linkPopupState = (0, import_ui86.usePopupState)({ variant: "popover" });
   const editorState = (0, import_react54.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
@@ -6084,7 +6097,7 @@ var InlineEditorToolbar = ({ editor }) => {
     const linkAttrs = editor.getAttributes("link");
     setUrlValue(linkAttrs.href || "");
     setOpenInNewTab(linkAttrs.target === "_blank");
-    popupState.open(toolbarRef.current);
+    linkPopupState.open(toolbarRef.current);
   };
   const handleUrlChange = (event) => {
     setUrlValue(event.target.value);
@@ -6101,16 +6114,16 @@ var InlineEditorToolbar = ({ editor }) => {
     } else {
       editor.chain().focus().unsetLink().run();
     }
-    popupState.close();
+    linkPopupState.close();
   };
+  React100.useEffect(() => {
+    editor?.commands?.focus();
+  }, [editor]);
   return /* @__PURE__ */ React100.createElement(
     import_ui86.Box,
     {
       ref: toolbarRef,
       sx: {
-        position: "absolute",
-        left: 0,
-        top: -40,
         display: "inline-flex",
         gap: 0.5,
         padding: 0.5,
@@ -6118,7 +6131,8 @@ var InlineEditorToolbar = ({ editor }) => {
         backgroundColor: "background.paper",
         boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
         alignItems: "center",
-        visibility: popupState.isOpen ? "hidden" : "visible"
+        visibility: linkPopupState.isOpen ? "hidden" : "visible",
+        pointerEvents: linkPopupState.isOpen ? "none" : "all"
       }
     },
     /* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React100.createElement(import_ui86.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
@@ -6150,7 +6164,14 @@ var InlineEditorToolbar = ({ editor }) => {
           value: button.action,
           "aria-label": button.label,
           size: "tiny",
-          onClick: () => button.action === "link" ? handleLinkClick() : button.method?.(editor)
+          onClick: () => {
+            if (button.action === "link") {
+              handleLinkClick();
+            } else {
+              button.method?.(editor);
+            }
+            editor?.commands?.focus();
+          }
         },
         button.icon
       )))
@@ -6158,7 +6179,7 @@ var InlineEditorToolbar = ({ editor }) => {
     /* @__PURE__ */ React100.createElement(
       UrlPopover,
       {
-        popupState,
+        popupState: linkPopupState,
         anchorRef: toolbarRef,
         restoreValue: handleUrlSubmit,
         value: urlValue,
@@ -6182,22 +6203,67 @@ var useOnUpdate = (callback, dependencies) => {
   }, dependencies);
 };
 var InlineEditor = React101.forwardRef(
-  ({ value, setValue, attributes = {}, showToolbar = false, sx, ...props }, ref) => {
+  ({
+    value,
+    setValue,
+    attributes = {},
+    showToolbar = false,
+    autofocus = false,
+    sx = {},
+    onBlur = void 0,
+    getInitialPopoverPosition = void 0,
+    expectedTag = null
+  }, ref) => {
+    const containerRef = React101.useRef(null);
+    const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
+    const [hasSelectedContent, setHasSelectedContent] = React101.useState(false);
+    const documentContentSettings = !!expectedTag ? "block+" : "inline*";
+    const onSelectionEnd = (view) => {
+      setHasSelectedContent(() => !view.state.selection.empty);
+      queueMicrotask(() => view.focus());
+    };
+    const onKeyDown = (_, event) => {
+      if (event.key === "Escape") {
+        onBlur?.(event);
+      }
+    };
+    const toolbarRelatedListeners = showToolbar ? {
+      mouseup: onSelectionEnd,
+      keyup: onSelectionEnd,
+      keydown: onKeyDown
+    } : void 0;
     const editor = (0, import_react56.useEditor)({
       extensions: [
         import_extension_document.default.extend({
-          content: "inline*"
+          content: documentContentSettings
+        }),
+        import_extension_paragraph.default.extend({
+          renderHTML({ HTMLAttributes }) {
+            const tag = expectedTag ?? "p";
+            return [tag, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+          }
+        }),
+        import_extension_heading.default.extend({
+          renderHTML({ node, HTMLAttributes }) {
+            if (expectedTag) {
+              return [expectedTag, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+            }
+            const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
+            return [`h${level}`, { ...HTMLAttributes, style: "margin:0;padding:0;" }, 0];
+          }
+        }).configure({
+          levels: [1, 2, 3, 4, 5, 6]
+        }),
+        import_extension_link.default.configure({
+          openOnClick: false
         }),
         import_extension_text.default,
         import_extension_bold.default,
         import_extension_italic.default,
         import_extension_strike.default,
-        import_extension_underline.default,
         import_extension_superscript.default,
         import_extension_subscript.default,
-        import_extension_link.default.configure({
-          openOnClick: false
-        }),
+        import_extension_underline.default,
         import_extension_hard_break.default.extend({
           addKeyboardShortcuts() {
             return {
@@ -6207,7 +6273,19 @@ var InlineEditor = React101.forwardRef(
         })
       ],
       content: value,
-      onUpdate: ({ editor: updatedEditor }) => setValue(updatedEditor.getHTML())
+      onUpdate: ({ editor: updatedEditor }) => {
+        const newValue = updatedEditor.getHTML();
+        setValue(isEmpty(newValue) ? null : newValue);
+      },
+      autofocus,
+      editorProps: {
+        attributes: {
+          ...attributes,
+          class: attributes.class ?? "",
+          role: "textbox"
+        },
+        handleDOMEvents: toolbarRelatedListeners
+      }
     });
     useOnUpdate(() => {
       if (!editor) {
@@ -6218,10 +6296,64 @@ var InlineEditor = React101.forwardRef(
         editor.commands.setContent(value, { emitUpdate: false });
       }
     }, [editor, value]);
-    return /* @__PURE__ */ React101.createElement(
-      import_ui87.Box,
+    const computePopupPosition = () => {
+      const positionFallback = { left: 0, top: 0 };
+      const { left, top } = containerRef.current?.getBoundingClientRect() ?? positionFallback;
+      const initial = getInitialPopoverPosition?.() ?? positionFallback;
+      return {
+        left: left + initial.left,
+        top: top + initial.top
+      };
+    };
+    const Wrapper = ({ children }) => {
+      const wrappedChildren = /* @__PURE__ */ React101.createElement(import_ui87.Box, { ref: containerRef, ...sx }, children);
+      return onBlur ? /* @__PURE__ */ React101.createElement(
+        import_ui87.ClickAwayListener,
+        {
+          onClickAway: (event) => {
+            if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
+              return;
+            }
+            onBlur?.(event);
+          }
+        },
+        wrappedChildren
+      ) : /* @__PURE__ */ React101.createElement(React101.Fragment, null, wrappedChildren);
+    };
+    return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Wrapper, null, /* @__PURE__ */ React101.createElement(import_react56.EditorContent, { ref, editor })), showToolbar && containerRef.current && /* @__PURE__ */ React101.createElement(
+      import_ui87.Popover,
+      {
+        slotProps: {
+          root: {
+            sx: {
+              pointerEvents: "none"
+            }
+          }
+        },
+        ...(0, import_ui87.bindPopover)(popupState),
+        open: hasSelectedContent,
+        anchorReference: "anchorPosition",
+        anchorPosition: computePopupPosition(),
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" }
+      },
+      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor })
+    ));
+  }
+);
+
+// src/controls/inline-editing-control.tsx
+var InlineEditingControl = createControl(
+  ({
+    sx,
+    attributes,
+    props
+  }) => {
+    const { value, setValue } = useBoundProp(import_editor_props52.htmlPropTypeUtil);
+    const handleChange = (newValue) => setValue(newValue);
+    return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
+      import_ui88.Box,
       {
-        ref,
         sx: {
           p: 0.8,
           border: "1px solid",
@@ -6245,39 +6377,34 @@ var InlineEditor = React101.forwardRef(
               color: "inherit"
             }
           },
+          ".strip-styles *": {
+            all: "unset"
+          },
           ...sx
         },
         ...attributes,
         ...props
       },
-      showToolbar && /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor }),
-      /* @__PURE__ */ React101.createElement(import_react56.EditorContent, { editor })
-    );
+      /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+    ));
   }
 );
 
-// src/controls/inline-editing-control.tsx
-var InlineEditingControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props52.htmlPropTypeUtil);
-  const handleChange = (newValue) => setValue(newValue);
-  return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange }));
-});
-
 // src/components/icon-buttons/clear-icon-button.tsx
 var React103 = __toESM(require("react"));
 var import_icons35 = require("@elementor/icons");
-var import_ui88 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui88.styled)(import_ui88.IconButton)(({ theme }) => ({
+var import_ui89 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui89.styled)(import_ui89.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React103.createElement(import_ui88.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
 var React104 = __toESM(require("react"));
 var import_react57 = require("react");
 var import_icons36 = require("@elementor/icons");
-var import_ui89 = require("@elementor/ui");
+var import_ui90 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
@@ -6360,7 +6487,7 @@ var Repeater3 = ({
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
   const addButton = /* @__PURE__ */ React104.createElement(
-    import_ui89.IconButton,
+    import_ui90.IconButton,
     {
       size: SIZE9,
       sx: {
@@ -6373,14 +6500,14 @@ var Repeater3 = ({
     /* @__PURE__ */ React104.createElement(import_icons36.PlusIcon, { fontSize: SIZE9 })
   );
   return /* @__PURE__ */ React104.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React104.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React104.createElement(
-    import_ui89.Infotip,
+    import_ui90.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React104.createElement(import_ui89.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React104.createElement(import_ui90.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
   ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
@@ -6445,16 +6572,16 @@ var RepeaterItem = ({
       label,
       ref: setRef,
       "aria-label": (0, import_i18n52.__)("Open item", "elementor"),
-      ...(0, import_ui89.bindTrigger)(popoverState),
+      ...(0, import_ui90.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(import_ui89.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui89.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui89.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui90.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = (0, import_react57.useState)(null);
-  const popoverState = (0, import_ui89.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui89.bindPopover)(popoverState);
+  const popoverState = (0, import_ui90.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui90.bindPopover)(popoverState);
   (0, import_react57.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);