@hitachivantara/uikit-react-core 5.75.0 → 5.76.0

package/dist/esm/Dropdown/Dropdown.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { fixedForwardRef } from "../types/generic.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Dropdown.styles.js";
 import { staticClasses } from "./Dropdown.styles.js";
@@ -31,298 +32,292 @@ const DEFAULT_LABELS = {
   /** The label used in search. */
   multiSelectionConjunction: "/"
 };
-const HvDropdown = forwardRef(
-  (props, ref) => {
-    const {
-      classes: classesProp,
-      className,
-      id,
-      name,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      placeholder = "Select...",
-      onChange,
-      status,
-      statusMessage,
-      "aria-errormessage": ariaErrorMessage,
-      onCancel,
-      onToggle,
-      onClickOutside,
-      onFocus,
-      onBlur,
-      values,
-      multiSelect = false,
-      showSearch = false,
-      expanded,
-      defaultExpanded = false,
-      notifyChangesOnFirstRender = false,
-      labels: labelsProp,
-      hasTooltips = false,
-      disablePortal = false,
-      singleSelectionToggle = true,
-      placement,
-      variableWidth = false,
-      popperProps = {},
-      height,
-      maxHeight,
-      virtualized = false,
-      baseDropdownProps = {},
-      listProps = {},
-      ...others
-    } = useDefaultProps("HvDropdown", props);
-    const { classes, cx } = useClasses(classesProp);
-    const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const elementId = useUniqueId(id);
-    const [validationState, setValidationState] = useControlled(
-      status,
-      "standBy"
-    );
-    const [validationMessage] = useControlled(statusMessage, "Required");
-    const [isOpen, setIsOpen] = useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
-    const [selectionLabel, setSelectionLabel] = useState(
+const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    placeholder = "Select...",
+    onChange,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    onCancel,
+    onToggle,
+    onClickOutside,
+    onFocus,
+    onBlur,
+    values,
+    multiSelect = false,
+    showSearch,
+    expanded,
+    defaultExpanded,
+    notifyChangesOnFirstRender,
+    labels: labelsProp,
+    hasTooltips,
+    disablePortal,
+    singleSelectionToggle = true,
+    placement,
+    variableWidth,
+    popperProps = {},
+    height,
+    maxHeight,
+    virtualized,
+    baseDropdownProps = {},
+    listProps = {},
+    ...others
+  } = useDefaultProps("HvDropdown", props);
+  const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const elementId = useUniqueId(id);
+  const [validationState, setValidationState] = useControlled(
+    status,
+    "standBy"
+  );
+  const [validationMessage] = useControlled(statusMessage, "Required");
+  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const [selectionLabel, setSelectionLabel] = useState(
+    getSelectionLabel(labels, placeholder, multiSelect, values)
+  );
+  const [internalValues, setInternalValues] = useState(values);
+  const internalValuesRef = useRef(values);
+  useEffect(() => {
+    setInternalValues(values);
+    internalValuesRef.current = values;
+  }, [values]);
+  useEffect(() => {
+    setSelectionLabel(
       getSelectionLabel(labels, placeholder, multiSelect, values)
     );
-    const [internalValues, setInternalValues] = useState(values);
-    const internalValuesRef = useRef(values);
-    useEffect(() => {
-      setInternalValues(values);
-      internalValuesRef.current = values;
-    }, [values]);
-    useEffect(() => {
-      setSelectionLabel(
-        getSelectionLabel(labels, placeholder, multiSelect, values)
-      );
-    }, [labels, multiSelect, placeholder, values]);
-    const dropdownHeaderRef = useRef();
-    const {
-      ref: refProp,
-      dropdownHeaderRef: dropdownHeaderRefProp,
-      ...otherBaseDropdownProps
-    } = baseDropdownProps;
-    const headerForkedRef = useForkRef(
-      dropdownHeaderRefProp,
-      dropdownHeaderRef
-    );
-    const dropdownForkedRef = useForkRef(ref, refProp);
-    const handleToggle = (event, open) => {
-      onToggle?.(event, open);
-      setIsOpen(open);
-      if (!open) {
-        setValidationState(() => {
-          if (required) {
-            const hasSelection = getSelected(internalValuesRef.current).length > 0;
-            if (!hasSelection) {
-              return "invalid";
-            }
-          }
-          return "valid";
-        });
-      }
-    };
-    const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
-      const selected = getSelected(listValues);
-      if (commitChanges) {
-        setInternalValues(listValues);
-        internalValuesRef.current = listValues;
-        setSelectionLabel(
-          getSelectionLabel(labels, placeholder, multiSelect, listValues)
-        );
-        setValidationState(() => {
-          if (required && selected.length === 0) {
+  }, [labels, multiSelect, placeholder, values]);
+  const dropdownHeaderRef = useRef();
+  const {
+    ref: refProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    ...otherBaseDropdownProps
+  } = baseDropdownProps;
+  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);
+  const dropdownForkedRef = useForkRef(ref, refProp);
+  const handleToggle = (event, open) => {
+    onToggle?.(event, open);
+    setIsOpen(open);
+    if (!open) {
+      setValidationState(() => {
+        if (required) {
+          const hasSelection = getSelected(internalValuesRef.current).length > 0;
+          if (!hasSelection) {
             return "invalid";
           }
-          return "valid";
-        });
-      }
-      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);
-      if (toggle) {
-        handleToggle(void 0, false);
-        dropdownHeaderRef.current?.focus({ preventScroll: true });
-      }
-    };
-    const handleCancel = (evt) => {
-      onCancel?.(evt);
-      handleToggle(evt, false);
-      dropdownHeaderRef.current?.focus({ preventScroll: true });
-    };
-    const handleClickOutside = (evt) => {
-      onClickOutside?.(evt);
-      onCancel?.(evt);
-    };
-    const setFocusToContent = (containerRef) => {
-      const inputs = containerRef?.getElementsByTagName("input");
-      if (inputs && inputs.length > 0) {
-        inputs[0].focus();
-        return;
-      }
-      const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
-      listItems.every((listItem) => {
-        if (listItem.tabIndex >= 0) {
-          listItem.focus();
-          return false;
         }
-        return true;
+        return "valid";
       });
-    };
-    const buildHeaderLabel = () => {
-      const hasSelection = getSelected(internalValues).length > 0;
-      return labels?.select || !multiSelect ? /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          component: "div",
-          variant: "body",
-          className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled,
-            [classes.placeholderClosed]: !(isOpen || hasSelection)
-          }),
-          children: selectionLabel.selected
-        }
-      ) : /* @__PURE__ */ jsxs(
-        HvTypography,
-        {
-          component: "div",
-          className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled
-          }),
-          variant: "body",
-          children: [
-            /* @__PURE__ */ jsx("b", { children: selectionLabel.selected }),
-            ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
-          ]
-        }
+    }
+  };
+  const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
+    const selected = getSelected(listValues);
+    if (commitChanges) {
+      setInternalValues(listValues);
+      internalValuesRef.current = listValues;
+      setSelectionLabel(
+        getSelectionLabel(labels, placeholder, multiSelect, listValues)
       );
-    };
-    const hasLabel = label != null;
-    const hasDescription = description != null;
-    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const isStateInvalid = isInvalid(validationState);
-    let errorMessageId;
-    if (isStateInvalid) {
-      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+      setValidationState(() => {
+        if (required && selected.length === 0) {
+          return "invalid";
+        }
+        return "valid";
+      });
+    }
+    if (notifyChanges) {
+      onChange?.(multiSelect ? selected : selected[0]);
+    }
+    if (toggle) {
+      handleToggle(void 0, false);
+      dropdownHeaderRef.current?.focus({ preventScroll: true });
     }
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
+  };
+  const handleCancel = (evt) => {
+    onCancel?.(evt);
+    handleToggle(evt, false);
+    dropdownHeaderRef.current?.focus({ preventScroll: true });
+  };
+  const handleClickOutside = (evt) => {
+    onClickOutside?.(evt);
+    onCancel?.(evt);
+  };
+  const setFocusToContent = (containerRef) => {
+    const inputs = containerRef?.getElementsByTagName("input");
+    if (inputs && inputs.length > 0) {
+      inputs[0].focus();
+      return;
+    }
+    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
+    listItems.every((listItem) => {
+      if (listItem.tabIndex >= 0) {
+        listItem.focus();
+        return false;
+      }
+      return true;
+    });
+  };
+  const buildHeaderLabel = () => {
+    const hasSelection = getSelected(internalValues).length > 0;
+    return labels?.select || !multiSelect ? /* @__PURE__ */ jsx(
+      HvTypography,
       {
-        id,
-        name,
-        status: validationState,
-        disabled,
-        readOnly,
-        required,
-        className: cx(
-          classes.root,
-          {
-            [classes.disabled]: disabled
-          },
-          className
-        ),
-        ...others,
+        component: "div",
+        variant: "body",
+        className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled,
+          [classes.placeholderClosed]: !(isOpen || hasSelection)
+        }),
+        children: selectionLabel.selected
+      }
+    ) : /* @__PURE__ */ jsxs(
+      HvTypography,
+      {
+        component: "div",
+        className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled
+        }),
+        variant: "body",
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                id: setId(elementId, "label"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            HvBaseDropdown,
+          /* @__PURE__ */ jsx("b", { children: selectionLabel.selected }),
+          ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
+        ]
+      }
+    );
+  };
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+  const isStateInvalid = isInvalid(validationState);
+  let errorMessageId;
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+  }
+  return /* @__PURE__ */ jsxs(
+    HvFormElement,
+    {
+      id,
+      name,
+      status: validationState,
+      disabled,
+      readOnly,
+      required,
+      className: cx(
+        classes.root,
+        {
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      ...others,
+      children: [
+        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+          hasLabel && /* @__PURE__ */ jsx(
+            HvLabel,
             {
-              ref: dropdownForkedRef,
-              id: setId(id, "dropdown"),
-              classes: {
-                root: cx(classes.dropdown, {
-                  [classes.readOnly]: readOnly
-                }),
-                arrow: classes.arrow,
-                header: cx(classes.dropdownHeader, {
-                  [classes.dropdownHeaderInvalid]: isStateInvalid
-                }),
-                headerOpen: classes.dropdownHeaderOpen
-              },
-              expanded: isOpen,
-              disabled,
-              readOnly,
-              required,
-              disablePortal,
-              placement,
-              popperProps,
-              placeholder: buildHeaderLabel(),
-              onToggle: handleToggle,
-              onClickOutside: handleClickOutside,
-              onContainerCreation: setFocusToContent,
-              role: "combobox",
-              variableWidth,
-              "aria-label": ariaLabel,
-              "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-              "aria-invalid": isStateInvalid ? true : void 0,
-              "aria-errormessage": errorMessageId,
-              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              onFocus,
-              onBlur,
-              dropdownHeaderRef: headerForkedRef,
-              ...otherBaseDropdownProps,
-              children: /* @__PURE__ */ jsx(
-                HvDropdownList,
-                {
-                  id: setId(elementId, "values"),
-                  classes: {
-                    rootList: classes.rootList,
-                    dropdownListContainer: classes.dropdownListContainer
-                  },
-                  values: internalValues,
-                  multiSelect,
-                  showSearch,
-                  onChange: handleSelection,
-                  onCancel: handleCancel,
-                  labels,
-                  notifyChangesOnFirstRender,
-                  hasTooltips,
-                  singleSelectionToggle,
-                  "aria-label": ariaLabel,
-                  "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0,
-                  height,
-                  maxHeight,
-                  virtualized,
-                  ...listProps
-                }
-              )
+              id: setId(elementId, "label"),
+              label,
+              className: classes.label
             }
           ),
-          canShowError && /* @__PURE__ */ jsx(
-            HvWarningText,
+          hasDescription && /* @__PURE__ */ jsx(
+            HvInfoMessage,
             {
-              id: setId(elementId, "error"),
-              disableBorder: true,
-              className: classes.error,
-              children: validationMessage
+              id: setId(elementId, "description"),
+              className: classes.description,
+              children: description
             }
           )
-        ]
-      }
-    );
-  }
-);
+        ] }),
+        /* @__PURE__ */ jsx(
+          HvBaseDropdown,
+          {
+            ref: dropdownForkedRef,
+            id: setId(id, "dropdown"),
+            classes: {
+              root: cx(classes.dropdown, {
+                [classes.readOnly]: readOnly
+              }),
+              arrow: classes.arrow,
+              header: cx(classes.dropdownHeader, {
+                [classes.dropdownHeaderInvalid]: isStateInvalid
+              }),
+              headerOpen: classes.dropdownHeaderOpen
+            },
+            expanded: isOpen,
+            disabled,
+            readOnly,
+            required,
+            disablePortal,
+            placement,
+            popperProps,
+            placeholder: buildHeaderLabel(),
+            onToggle: handleToggle,
+            onClickOutside: handleClickOutside,
+            onContainerCreation: setFocusToContent,
+            role: "combobox",
+            variableWidth,
+            "aria-label": ariaLabel,
+            "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+            "aria-invalid": isStateInvalid ? true : void 0,
+            "aria-errormessage": errorMessageId,
+            "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+            onFocus,
+            onBlur,
+            dropdownHeaderRef: headerForkedRef,
+            ...otherBaseDropdownProps,
+            children: /* @__PURE__ */ jsx(
+              HvDropdownList,
+              {
+                id: setId(elementId, "values"),
+                classes: {
+                  rootList: classes.rootList,
+                  dropdownListContainer: classes.dropdownListContainer
+                },
+                values: internalValues,
+                multiSelect,
+                showSearch,
+                onChange: handleSelection,
+                onCancel: handleCancel,
+                labels,
+                notifyChangesOnFirstRender,
+                hasTooltips,
+                singleSelectionToggle,
+                "aria-label": ariaLabel,
+                "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0,
+                height,
+                maxHeight,
+                virtualized,
+                ...listProps
+              }
+            )
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsx(
+          HvWarningText,
+          {
+            id: setId(elementId, "error"),
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   HvDropdown,
   staticClasses as dropdownClasses