@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/esm/components/BaseDropdown/BaseDropdown.js

@@ -17,268 +17,331 @@ import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvBaseDropdown = forwardRef((props, ref) => {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    children,
-    role,
-    placeholder,
-    component,
-    adornment,
-    expanded,
-    dropdownHeaderProps,
-    defaultExpanded,
-    disabled,
-    readOnly,
-    required,
-    disablePortal,
-    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 [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, "hvbasedropdown");
-  const containerId = setId(id, "children-container");
-  const headerControlArias = {
-    "aria-required": required ?? void 0,
-    "aria-readonly": readOnly ?? 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 HvBaseDropdown = forwardRef(
+  (props, ref) => {
     const {
-      width,
-      height
-    } = state.modifiersData.maxSize;
-    if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
-      setPopperMaxSize({
-        width,
-        height
-      });
-    }
-    state.styles.popper = {
-      ...state.styles.popper,
-      maxWidth: `${width}px`,
-      maxHeight: `${height}px`
+      id: idProp,
+      className,
+      classes: classesProp,
+      children,
+      role,
+      placeholder,
+      component,
+      adornment,
+      expanded,
+      dropdownHeaderProps,
+      defaultExpanded,
+      disabled,
+      readOnly,
+      required,
+      disablePortal,
+      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 [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, "hvbasedropdown");
+    const containerId = setId(id, "children-container");
+    const headerControlArias = {
+      "aria-required": required ?? void 0,
+      "aria-readonly": readOnly ?? void 0,
+      "aria-expanded": ariaExpanded,
+      "aria-owns": isOpen ? containerId : void 0,
+      "aria-controls": isOpen ? containerId : void 0
     };
-  }, [popperMaxSize]);
-  const maxSizeCalculator = useCallback(({
-    state,
-    name,
-    options
-  }) => {
-    const overflow = detectOverflow(state, options);
-    const x = state.modifiersData.preventOverflow?.x || 0;
-    const y = state.modifiersData.preventOverflow?.y || 0;
-    const popperWidth = state.rects.popper.width;
-    const popperHeight = state.rects.popper.height;
-    const basePlacement = state.placement.split("-")[0];
-    const widthProp = basePlacement === "left" ? "left" : "right";
-    const heightProp = basePlacement === "top" ? "top" : "bottom";
-    state.modifiersData[name] = {
-      width: popperWidth - overflow[widthProp] - x,
-      height: popperHeight - overflow[heightProp] - y
+    const headerAriaLabels = {
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp
     };
-  }, []);
-  const modifiers = useMemo(() => [{
-    name: "variableWidth",
-    enabled: !variableWidth,
-    phase: "beforeWrite",
-    requires: ["computeStyles"],
-    fn: widthCalculator,
-    effect: widthCalculatorEffect
-  }, {
-    name: "maxSize",
-    enabled: true,
-    phase: "main",
-    requiresIfExists: ["offset", "preventOverflow", "flip"],
-    fn: maxSizeCalculator
-  }, {
-    name: "applyMaxSize",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["maxSize"],
-    fn: applyMaxSizeCalculator
-  }, ...popperPropsModifiers], [maxSizeCalculator, applyMaxSizeCalculator, popperPropsModifiers, variableWidth, widthCalculator, 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 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 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;
+        if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
+          setPopperMaxSize({ width, height });
+        }
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxWidth: `${width}px`,
+          maxHeight: `${height}px`
+        };
+      },
+      [popperMaxSize]
+    );
+    const maxSizeCalculator = useCallback(
+      ({ state, name, options }) => {
+        const overflow = detectOverflow(state, options);
+        const x = state.modifiersData.preventOverflow?.x || 0;
+        const y = state.modifiersData.preventOverflow?.y || 0;
+        const popperWidth = state.rects.popper.width;
+        const popperHeight = state.rects.popper.height;
+        const basePlacement = state.placement.split("-")[0];
+        const widthProp = basePlacement === "left" ? "left" : "right";
+        const heightProp = basePlacement === "top" ? "top" : "bottom";
+        state.modifiersData[name] = {
+          width: popperWidth - overflow[widthProp] - x,
+          height: popperHeight - overflow[heightProp] - y
+        };
+      },
+      []
+    );
+    const modifiers = useMemo(
+      () => [
+        {
+          name: "variableWidth",
+          enabled: !variableWidth,
+          phase: "beforeWrite",
+          requires: ["computeStyles"],
+          fn: widthCalculator,
+          effect: widthCalculatorEffect
+        },
+        {
+          name: "maxSize",
+          enabled: true,
+          phase: "main",
+          requiresIfExists: ["offset", "preventOverflow", "flip"],
+          fn: maxSizeCalculator
+        },
+        {
+          name: "applyMaxSize",
+          enabled: true,
+          phase: "beforeWrite",
+          requires: ["maxSize"],
+          fn: applyMaxSizeCalculator
+        },
+        ...popperPropsModifiers
+      ],
+      [
+        maxSizeCalculator,
+        applyMaxSizeCalculator,
+        popperPropsModifiers,
+        variableWidth,
+        widthCalculator,
+        widthCalculatorEffect
       ]
-    }
-  );
-  const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
-    ref: handleDropdownHeaderRef,
-    ...headerControlArias
-  }) : defaultHeaderElement;
-  const containerComponent = (() => {
-    const handleContainerKeyDown = (event) => {
-      if (isKey(event, "Esc")) {
-        handleToggle(event);
+    );
+    const { styles: popperStyles, attributes } = usePopper(
+      referenceElement,
+      popperElement,
+      {
+        placement,
+        modifiers,
+        onFirstUpdate,
+        ...otherPopperProps
       }
-      if (isKey(event, "Tab") && !event.shiftKey) {
-        const focusList = getFirstAndLastFocus(popperElement);
-        if (document.activeElement === focusList?.last) {
+    );
+    const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
+    const handleToggle = useCallback(
+      (event) => {
+        if (event && !isKey(event, "Tab")) {
           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(
+        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",
       {
-        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
+        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
+            }
+          ) })
+        ]
       }
-    ),
-    isOpen && containerComponent
-  ] });
-});
+    );
+    const headerElement = component && React__default.isValidElement(component) ? React__default.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
+    ] });
+  }
+);
 export {
   HvBaseDropdown,
   staticClasses as baseDropdownClasses