@hitachivantara/uikit-react-core 5.75.0 → 5.77.0

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -7,6 +7,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const generic = require("../types/generic.cjs");
 const setId = require("../utils/setId.cjs");
 const Dropdown_styles = require("./Dropdown.styles.cjs");
 const utils = require("./utils.cjs");
@@ -32,297 +33,291 @@ const DEFAULT_LABELS = {
   /** The label used in search. */
   multiSelectionConjunction: "/"
 };
-const HvDropdown = React.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
-    } = uikitReactUtils.useDefaultProps("HvDropdown", props);
-    const { classes, cx } = Dropdown_styles.useClasses(classesProp);
-    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-    const elementId = useUniqueId.useUniqueId(id);
-    const [validationState, setValidationState] = useControlled.useControlled(
-      status,
-      "standBy"
-    );
-    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-    const [isOpen, setIsOpen] = useControlled.useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
-    const [selectionLabel, setSelectionLabel] = React.useState(
+const HvDropdown = generic.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
+  } = uikitReactUtils.useDefaultProps("HvDropdown", props);
+  const { classes, cx } = Dropdown_styles.useClasses(classesProp);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const elementId = useUniqueId.useUniqueId(id);
+  const [validationState, setValidationState] = useControlled.useControlled(
+    status,
+    "standBy"
+  );
+  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const [selectionLabel, setSelectionLabel] = React.useState(
+    utils.getSelectionLabel(labels, placeholder, multiSelect, values)
+  );
+  const [internalValues, setInternalValues] = React.useState(values);
+  const internalValuesRef = React.useRef(values);
+  React.useEffect(() => {
+    setInternalValues(values);
+    internalValuesRef.current = values;
+  }, [values]);
+  React.useEffect(() => {
+    setSelectionLabel(
       utils.getSelectionLabel(labels, placeholder, multiSelect, values)
     );
-    const [internalValues, setInternalValues] = React.useState(values);
-    const internalValuesRef = React.useRef(values);
-    React.useEffect(() => {
-      setInternalValues(values);
-      internalValuesRef.current = values;
-    }, [values]);
-    React.useEffect(() => {
-      setSelectionLabel(
-        utils.getSelectionLabel(labels, placeholder, multiSelect, values)
-      );
-    }, [labels, multiSelect, placeholder, values]);
-    const dropdownHeaderRef = React.useRef();
-    const {
-      ref: refProp,
-      dropdownHeaderRef: dropdownHeaderRefProp,
-      ...otherBaseDropdownProps
-    } = baseDropdownProps;
-    const headerForkedRef = utils$1.useForkRef(
-      dropdownHeaderRefProp,
-      dropdownHeaderRef
-    );
-    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
-    const handleToggle = (event, open) => {
-      onToggle?.(event, open);
-      setIsOpen(open);
-      if (!open) {
-        setValidationState(() => {
-          if (required) {
-            const hasSelection = utils.getSelected(internalValuesRef.current).length > 0;
-            if (!hasSelection) {
-              return "invalid";
-            }
-          }
-          return "valid";
-        });
-      }
-    };
-    const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
-      const selected = utils.getSelected(listValues);
-      if (commitChanges) {
-        setInternalValues(listValues);
-        internalValuesRef.current = listValues;
-        setSelectionLabel(
-          utils.getSelectionLabel(labels, placeholder, multiSelect, listValues)
-        );
-        setValidationState(() => {
-          if (required && selected.length === 0) {
+  }, [labels, multiSelect, placeholder, values]);
+  const dropdownHeaderRef = React.useRef();
+  const {
+    ref: refProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    ...otherBaseDropdownProps
+  } = baseDropdownProps;
+  const headerForkedRef = utils$1.useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);
+  const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
+  const handleToggle = (event, open) => {
+    onToggle?.(event, open);
+    setIsOpen(open);
+    if (!open) {
+      setValidationState(() => {
+        if (required) {
+          const hasSelection = utils.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 = utils.getSelected(internalValues).length > 0;
-      return labels?.select || !multiSelect ? /* @__PURE__ */ jsxRuntime.jsx(
-        Typography.HvTypography,
-        {
-          component: "div",
-          variant: "body",
-          className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled,
-            [classes.placeholderClosed]: !(isOpen || hasSelection)
-          }),
-          children: selectionLabel.selected
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(
-        Typography.HvTypography,
-        {
-          component: "div",
-          className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled
-          }),
-          variant: "body",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectionLabel.selected }),
-            ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
-          ]
-        }
+    }
+  };
+  const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
+    const selected = utils.getSelected(listValues);
+    if (commitChanges) {
+      setInternalValues(listValues);
+      internalValuesRef.current = listValues;
+      setSelectionLabel(
+        utils.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 = validationStates.isInvalid(validationState);
-    let errorMessageId;
-    if (isStateInvalid) {
-      errorMessageId = canShowError ? setId.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__ */ jsxRuntime.jsxs(
-      FormElement.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 = utils.getSelected(internalValues).length > 0;
+    return labels?.select || !multiSelect ? /* @__PURE__ */ jsxRuntime.jsx(
+      Typography.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__ */ jsxRuntime.jsxs(
+      Typography.HvTypography,
+      {
+        component: "div",
+        className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled
+        }),
+        variant: "body",
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-              Label.HvLabel,
-              {
-                id: setId.setId(elementId, "label"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
-              InfoMessage.HvInfoMessage,
-              {
-                id: setId.setId(elementId, "description"),
-                className: classes.description,
-                children: description
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BaseDropdown.HvBaseDropdown,
+          /* @__PURE__ */ jsxRuntime.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 = validationStates.isInvalid(validationState);
+  let errorMessageId;
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      id,
+      name,
+      status: validationState,
+      disabled,
+      readOnly,
+      required,
+      className: cx(
+        classes.root,
+        {
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      ...others,
+      children: [
+        (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+          hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            Label.HvLabel,
             {
-              ref: dropdownForkedRef,
-              id: setId.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.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-              "aria-invalid": isStateInvalid ? true : void 0,
-              "aria-errormessage": errorMessageId,
-              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              onFocus,
-              onBlur,
-              dropdownHeaderRef: headerForkedRef,
-              ...otherBaseDropdownProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                List.HvDropdownList,
-                {
-                  id: setId.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.setId(elementId, "label") : void 0,
-                  height,
-                  maxHeight,
-                  virtualized,
-                  ...listProps
-                }
-              )
+              id: setId.setId(elementId, "label"),
+              label,
+              className: classes.label
             }
           ),
-          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
-            WarningText.HvWarningText,
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
+            InfoMessage.HvInfoMessage,
             {
-              id: setId.setId(elementId, "error"),
-              disableBorder: true,
-              className: classes.error,
-              children: validationMessage
+              id: setId.setId(elementId, "description"),
+              className: classes.description,
+              children: description
             }
           )
-        ]
-      }
-    );
-  }
-);
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseDropdown.HvBaseDropdown,
+          {
+            ref: dropdownForkedRef,
+            id: setId.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.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+            "aria-invalid": isStateInvalid ? true : void 0,
+            "aria-errormessage": errorMessageId,
+            "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+            onFocus,
+            onBlur,
+            dropdownHeaderRef: headerForkedRef,
+            ...otherBaseDropdownProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              List.HvDropdownList,
+              {
+                id: setId.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.setId(elementId, "label") : void 0,
+                height,
+                maxHeight,
+                virtualized,
+                ...listProps
+              }
+            )
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+          WarningText.HvWarningText,
+          {
+            id: setId.setId(elementId, "error"),
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
 exports.dropdownClasses = Dropdown_styles.staticClasses;
 exports.HvDropdown = HvDropdown;

package/dist/cjs/Forms/Suggestions/Suggestions.cjs

@@ -5,6 +5,8 @@ const React = require("react");
 const ClickAwayListener = require("@mui/base/ClickAwayListener");
 const Popper = require("@mui/base/Popper");
 const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const document = require("../../utils/document.cjs");
 const setId = require("../../utils/setId.cjs");
 const Suggestions_styles = require("./Suggestions.styles.cjs");
 const SelectionList = require("../../SelectionList/SelectionList.cjs");
@@ -16,6 +18,7 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
     className,
     classes: classesProp,
     expanded = false,
+    enablePortal = false,
     open: openProp,
     anchorEl,
     suggestionValues = [],
@@ -24,6 +27,7 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
     ...others
   } = props;
   const { classes, cx } = Suggestions_styles.useClasses(classesProp);
+  const { rootId } = uikitReactUtils.useTheme();
   const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
   const localId = id ?? setId.setId(elementId, "suggestions");
   const ref = React.useRef(null);
@@ -49,10 +53,17 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Popper.Popper,
             {
+              style: {
+                // @ts-ignore
+                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
+              },
               open: openProp ?? isOpen,
-              disablePortal: true,
+              disablePortal: !enablePortal,
+              container: enablePortal ? document.getContainerElement(rootId) : void 0,
               anchorEl,
-              className: classes.popper,
+              className: cx(classes.popper, {
+                [classes.portal]: enablePortal
+              }),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SelectionList.HvSelectionList,
                 {

package/dist/cjs/Forms/Suggestions/Suggestions.styles.cjs

@@ -11,11 +11,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
     width: "100%"
   },
   popper: {
-    width: "100%",
+    width: "var(--popper-width)",
     position: "absolute",
-    transform: "translate3d(0, -1px, 0) !important",
-    zIndex: uikitStyles.theme.zIndices.tooltip
-  }
+    zIndex: uikitStyles.theme.zIndices.tooltip,
+    ":not($portal)": {
+      transform: "translate3d(0, -1px, 0) !important"
+    }
+  },
+  portal: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -56,11 +56,13 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
     onBlur?.(event, newValue);
   };
   const handleKeyDown = (event) => {
+    let newValue = value;
     if (keyboardUtils.isKey(event, "Esc")) {
+      newValue = cachedValue;
       setEditMode(false);
-      setValue(cachedValue);
+      setValue(newValue);
     }
-    onKeyDown?.(event);
+    onKeyDown?.(event, newValue);
   };
   const handleChange = (event, val) => {
     setValue(val);