npm - @hitachivantara/uikit-react-core - Versions diffs - 5.66.6 → 5.66.7 - Mend

@hitachivantara/uikit-react-core 5.66.6 → 5.66.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/esm/BaseDropdown/BaseDropdown.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement } from "react";
+import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
@@ -15,91 +15,253 @@ import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
-import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
+import BaseDropdownContext, { useBaseDropdownContext } from "./BaseDropdownContext/BaseDropdownContext.js";
 import { HvTypography } from "../Typography/Typography.js";
+const BaseDropdown = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    className,
+    classes: classesProp,
+    children,
+    role,
+    placeholder,
+    component,
+    adornment,
+    expanded,
+    dropdownHeaderProps,
+    defaultExpanded,
+    disabled,
+    readOnly,
+    required,
+    disablePortal,
+    "aria-expanded": ariaExpandedProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    onToggle,
+    onClickOutside,
+    ...others
+  } = props;
+  const { classes, cx } = useClasses(classesProp);
+  const {
+    popperPlacement,
+    popper,
+    popperElement,
+    referenceElement,
+    setPopperElement,
+    setReferenceElement
+  } = useBaseDropdownContext();
+  const { rootId } = useTheme();
+  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const handleDropdownHeaderRefProp = useForkRef(
+    dropdownHeaderRefProp,
+    dropdownHeaderProps?.ref
+  );
+  const handleDropdownHeaderRef = useForkRef(
+    setReferenceElement,
+    handleDropdownHeaderRefProp
+  );
+  const ariaRole = role || (component == null ? "combobox" : void 0);
+  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+  const id = useUniqueId(idProp);
+  const containerId = setId(id, "children-container");
+  const headerControlArias = {
+    "aria-required": required ?? void 0,
+    "aria-readonly": readOnly ?? void 0,
+    "aria-disabled": disabled ?? void 0,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": isOpen ? containerId : void 0,
+    "aria-controls": isOpen ? containerId : void 0
+  };
+  const headerAriaLabels = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp
+  };
+  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+  const handleToggle = useCallback(
+    (event) => {
+      if (event && !isKey(event, "Tab")) {
+        event.preventDefault();
+      }
+      const notControlKey = !!event?.code && !isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+      const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || isKey(event, "Tab") && !isOpen;
+      if (disabled || notControlKey || ignoredCombinations)
+        return;
+      const newOpen = !isOpen;
+      setIsOpen(() => {
+        if (!newOpen) {
+          referenceElement?.focus({ preventScroll: true });
+        }
+        return newOpen;
+      });
+      onToggle?.(event, newOpen);
+    },
+    [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+  );
+  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+  const defaultHeaderElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: setId(id, "header"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom")
+      }),
+      role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
+      style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleDropdownHeaderRef,
+      ...dropdownHeaderProps,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            className: cx(classes.placeholder, {
+              [classes.selectionDisabled]: disabled
+            }),
+            variant: "body",
+            children: placeholder
+          }
+        ) : placeholder }),
+        /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
+          ExpanderComponent,
+          {
+            iconSize: "XS",
+            color: disabled ? "secondary_60" : void 0,
+            className: classes.arrow
+          }
+        ) })
+      ]
+    }
+  );
+  const headerElement = component && isValidElement(component) ? cloneElement(component, {
+    ref: handleDropdownHeaderRef,
+    ...headerControlArias
+  }) : defaultHeaderElement;
+  const containerComponent = (() => {
+    const handleContainerKeyDown = (event) => {
+      if (isKey(event, "Esc")) {
+        handleToggle(event);
+      }
+      if (isKey(event, "Tab") && !event.shiftKey) {
+        const focusList = getFirstAndLastFocus(popperElement);
+        if (document.activeElement === focusList?.last) {
+          event.preventDefault();
+          focusList?.first?.focus();
+        }
+      }
+    };
+    const handleOutside = (event) => {
+      const isButtonClick = referenceElement?.contains(event.target);
+      if (!isButtonClick) {
+        onClickOutside?.(event);
+        setIsOpen(false);
+        onToggle?.(event, false);
+      }
+    };
+    const container = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setPopperElement,
+        className: classes.container,
+        style: popper?.styles.popper,
+        ...popper?.attributes.popper,
+        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
+          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(classes.inputExtensionOpen, {
+                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: containerId,
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
+              }),
+              children
+            }
+          ),
+          popperPlacement?.includes("top") && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(
+                classes.inputExtensionOpen,
+                classes.inputExtensionOpenShadow,
+                {
+                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+                }
+              )
+            }
+          )
+        ] }) })
+      }
+    );
+    if (disablePortal)
+      return container;
+    return createPortal(
+      container,
+      document.getElementById(rootId || "") || document.body
+    );
+  })();
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        className: cx(
+          classes.anchor,
+          { [classes.rootDisabled]: disabled },
+          className
+        ),
+        ...!readOnly && {
+          onKeyDown: handleToggle,
+          onClick: handleToggle
+        },
+        ...ariaRole && {
+          role: ariaRole,
+          ...headerAriaLabels,
+          ...headerControlArias
+        },
+        tabIndex: -1,
+        ...others,
+        children: headerElement
+      }
+    ),
+    isOpen && containerComponent
+  ] });
+});
 const HvBaseDropdown = forwardRef(
   (props, ref) => {
     const {
-      id: idProp,
-      className,
-      classes: classesProp,
-      children,
-      role,
-      placeholder,
-      component,
-      adornment,
-      expanded,
-      dropdownHeaderProps,
-      defaultExpanded,
-      disabled,
-      readOnly,
-      required,
-      disablePortal,
+      popperProps = {},
       variableWidth,
       placement: placementProp = "right",
-      "aria-expanded": ariaExpandedProp,
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp,
-      popperProps = {},
-      dropdownHeaderRef: dropdownHeaderRefProp,
-      onToggle,
-      onClickOutside,
       onContainerCreation,
       ...others
     } = useDefaultProps("HvBaseDropdown", props);
-    const { classes, cx } = useClasses(classesProp);
-    const { rootId } = useTheme();
-    const [isOpen, setIsOpen] = useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
+    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
+    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(
       null
     );
     const [popperMaxSize, setPopperMaxSize] = useState({});
-    const handleDropdownHeaderRefProp = useForkRef(
-      dropdownHeaderRefProp,
-      dropdownHeaderProps?.ref
-    );
-    const handleDropdownHeaderRef = useForkRef(
-      setReferenceElement,
-      handleDropdownHeaderRefProp
-    );
-    const ariaRole = role || (component == null ? "combobox" : void 0);
-    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-    const id = useUniqueId(idProp);
-    const containerId = setId(id, "children-container");
-    const headerControlArias = {
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
-      "aria-disabled": disabled ?? void 0,
-      "aria-expanded": ariaExpanded,
-      "aria-owns": isOpen ? containerId : void 0,
-      "aria-controls": isOpen ? containerId : void 0
-    };
-    const headerAriaLabels = {
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp
-    };
-    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
-    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
     const onFirstUpdate = useCallback(() => {
       onContainerCreation?.(popperElement);
     }, [onContainerCreation, popperElement]);
-    const widthCalculator = useCallback(
-      ({ state }) => {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      []
-    );
-    const widthCalculatorEffect = useCallback(
-      ({ state }) => {
-        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-      },
-      []
-    );
     const applyMaxSizeCalculator = useCallback(
       ({ state }) => {
         const { width, height } = state.modifiersData.maxSize;
@@ -114,6 +276,18 @@ const HvBaseDropdown = forwardRef(
       },
       [popperMaxSize]
     );
+    const widthCalculator = useCallback(
+      ({ state }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      []
+    );
+    const widthCalculatorEffect = useCallback(
+      ({ state }) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+      },
+      []
+    );
     const maxSizeCalculator = useCallback(
       ({ state, name, options }) => {
         const overflow = detectOverflow(state, options);
@@ -166,181 +340,25 @@ const HvBaseDropdown = forwardRef(
         widthCalculatorEffect
       ]
     );
-    const { styles: popperStyles, attributes } = usePopper(
-      referenceElement,
-      popperElement,
-      {
-        placement,
-        modifiers,
-        onFirstUpdate,
-        ...otherPopperProps
-      }
-    );
-    const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
-    const handleToggle = useCallback(
-      (event) => {
-        if (event && !isKey(event, "Tab")) {
-          event.preventDefault();
-        }
-        const notControlKey = !!event?.code && !isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
-        const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || isKey(event, "Tab") && !isOpen;
-        if (disabled || notControlKey || ignoredCombinations)
-          return;
-        const newOpen = !isOpen;
-        setIsOpen(() => {
-          if (!newOpen) {
-            referenceElement?.focus({ preventScroll: true });
-          }
-          return newOpen;
-        });
-        onToggle?.(event, newOpen);
-      },
-      [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+    const popper = usePopper(referenceElement, popperElement, {
+      placement,
+      modifiers,
+      onFirstUpdate,
+      ...otherPopperProps
+    });
+    const value = useMemo(
+      () => ({
+        ...popperMaxSize,
+        popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
+        popper,
+        popperElement,
+        setPopperElement,
+        referenceElement,
+        setReferenceElement
+      }),
+      [popper, popperElement, popperMaxSize, referenceElement]
     );
-    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
-    const defaultHeaderElement = /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: setId(id, "header"),
-        className: cx(classes.header, {
-          [classes.headerDisabled]: disabled,
-          [classes.headerReadOnly]: readOnly,
-          [classes.headerOpen]: isOpen,
-          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
-          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
-        }),
-        role: ariaRole === "combobox" ? "textbox" : void 0,
-        ...headerAriaLabels,
-        style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
-        tabIndex: disabled ? -1 : 0,
-        ref: handleDropdownHeaderRef,
-        ...dropdownHeaderProps,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(
-            HvTypography,
-            {
-              className: cx(classes.placeholder, {
-                [classes.selectionDisabled]: disabled
-              }),
-              variant: "body",
-              children: placeholder
-            }
-          ) : placeholder }),
-          /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
-            ExpanderComponent,
-            {
-              iconSize: "XS",
-              color: disabled ? "secondary_60" : void 0,
-              className: classes.arrow
-            }
-          ) })
-        ]
-      }
-    );
-    const headerElement = component && isValidElement(component) ? cloneElement(component, {
-      ref: handleDropdownHeaderRef,
-      ...headerControlArias
-    }) : defaultHeaderElement;
-    const containerComponent = (() => {
-      const handleContainerKeyDown = (event) => {
-        if (isKey(event, "Esc")) {
-          handleToggle(event);
-        }
-        if (isKey(event, "Tab") && !event.shiftKey) {
-          const focusList = getFirstAndLastFocus(popperElement);
-          if (document.activeElement === focusList?.last) {
-            event.preventDefault();
-            focusList?.first?.focus();
-          }
-        }
-      };
-      const handleOutside = (event) => {
-        const isButtonClick = referenceElement?.contains(event.target);
-        if (!isButtonClick) {
-          onClickOutside?.(event);
-          setIsOpen(false);
-          onToggle?.(event, false);
-        }
-      };
-      const container = /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: setPopperElement,
-          className: classes.container,
-          style: popperStyles.popper,
-          ...attributes.popper,
-          children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
-            popperPlacement.includes("bottom") && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: { width: extensionWidth },
-                className: cx(classes.inputExtensionOpen, {
-                  [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-                })
-              }
-            ),
-            /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value: popperMaxSize, children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                id: containerId,
-                className: cx(classes.panel, {
-                  [classes.panelOpenedUp]: popperPlacement.includes("top"),
-                  [classes.panelOpenedDown]: popperPlacement.includes("bottom")
-                }),
-                children
-              }
-            ) }),
-            popperPlacement.includes("top") && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: { width: extensionWidth },
-                className: cx(
-                  classes.inputExtensionOpen,
-                  classes.inputExtensionOpenShadow,
-                  {
-                    [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
-                    [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
-                  }
-                )
-              }
-            )
-          ] }) })
-        }
-      );
-      if (disablePortal)
-        return container;
-      return createPortal(
-        container,
-        document.getElementById(rootId || "") || document.body
-      );
-    })();
-    return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          id,
-          className: cx(
-            classes.anchor,
-            { [classes.rootDisabled]: disabled },
-            className
-          ),
-          ...!readOnly && {
-            onKeyDown: handleToggle,
-            onClick: handleToggle
-          },
-          ...ariaRole && {
-            role: ariaRole,
-            ...headerAriaLabels,
-            ...headerControlArias
-          },
-          tabIndex: -1,
-          ...others,
-          children: headerElement
-        }
-      ),
-      isOpen && containerComponent
-    ] });
+    return /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsx(BaseDropdown, { ref, ...others }) });
   }
 );
 export {

package/dist/esm/BaseDropdown/BaseDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport ClickAwayListener, {\n ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport {\n detectOverflow,\n ModifierArguments,\n Options,\n Placement,\n} from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n (props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref,\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp,\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n [],\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n [],\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (\n width !== popperMaxSize?.width \|\|\n height !== popperMaxSize?.height\n ) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize],\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n [],\n );\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ],\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n },\n );\n\n const popperPlacement =\n (attributes.popper?.[\"data-popper-placement\"] as Placement) ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]:\n popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n },\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body,\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n ref={ref}\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className,\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerElement}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport ClickAwayListener, {\n ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport {\n detectOverflow,\n ModifierArguments,\n Options,\n Placement,\n} from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport { useBaseDropdownContext } from \"./BaseDropdownContext/BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n HTMLDivElement,\n Omit<\n HvBaseDropdownProps,\n \"popperProps\" \| \"variableWidth\" \| \"placement\" \| \"onContainerCreation\"\n >\n>((props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n ...others\n } = props;\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n popperPlacement,\n popper,\n popperElement,\n referenceElement,\n setPopperElement,\n setReferenceElement,\n } = useBaseDropdownContext();\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref,\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp,\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popper?.styles.popper}\n {...popper?.attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement?.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement?.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement?.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n {popperPlacement?.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n },\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body,\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n ref={ref}\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className,\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerElement}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n (props, ref) => {\n const {\n popperProps = {},\n variableWidth,\n placement: placementProp = \"right\",\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (\n width !== popperMaxSize?.width \|\|\n height !== popperMaxSize?.height\n ) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize],\n );\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n [],\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n [],\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n [],\n );\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ],\n );\n\n const popper = usePopper(referenceElement, popperElement, {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n });\n\n const value = useMemo(\n () => ({\n ...popperMaxSize,\n popperPlacement:\n popper?.attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\",\n popper,\n popperElement,\n setPopperElement,\n referenceElement,\n setReferenceElement,\n }),\n [popper, popperElement, popperMaxSize, referenceElement],\n );\n\n return (\n <BaseDropdownContext.Provider value={value}>\n <BaseDropdown ref={ref} {...others} />\n </BaseDropdownContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":"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"}