@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -0,0 +1,315 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils$1 = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+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 CounterLabel = require("../utils/CounterLabel.cjs");
+const setId = require("../utils/setId.cjs");
+const Dropdown_styles = require("./Dropdown.styles.cjs");
+const utils = require("./utils.cjs");
+const List = require("./List/List.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const utils$2 = require("../FormElement/utils.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const DEFAULT_LABELS = {
+  /** Label for overwrite the default header behavior. */
+  select: void 0,
+  /** Label used for the All checkbox action. @deprecated unused */
+  selectAll: "All",
+  /** Cancel button label. */
+  cancelLabel: "Cancel",
+  /** Apply button label. */
+  applyLabel: "Apply",
+  /** The label used in the middle of the multiSelection count. */
+  searchPlaceholder: "Search",
+  /** The label used in search. */
+  multiSelectionConjunction: "/"
+};
+const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    required,
+    disabled,
+    readOnly,
+    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)
+    );
+  }, [labels, multiSelect, placeholder, values]);
+  const dropdownHeaderRef = React.useRef(void 0);
+  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) {
+          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;
+    });
+  };
+  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.jsx(
+      CounterLabel.CounterLabel,
+      {
+        selected: selectionLabel.selected,
+        total: selectionLabel.total,
+        conjunctionLabel: labels.multiSelectionConjunction,
+        className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled
+        })
+      }
+    );
+  };
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+  const isStateInvalid = utils$2.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: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.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": label ? setId.setId(elementId, "label") : void 0,
+                height,
+                maxHeight,
+                virtualized,
+                "data-is-dropdown": "true",
+                ...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/Dropdown/List/List.cjs

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const context = require("../../BaseDropdown/context.cjs");
+const CounterLabel = require("../../utils/CounterLabel.cjs");
+const setId = require("../../utils/setId.cjs");
+const utils = require("../utils.cjs");
+const List_styles = require("./List.styles.cjs");
+const ActionBar = require("../../ActionBar/ActionBar.cjs");
+const Button = require("../../Button/Button.cjs");
+const List = require("../../List/List.cjs");
+const Input = require("../../Input/Input.cjs");
+const CheckBox = require("../../CheckBox/CheckBox.cjs");
+const clone = (values) => values.map((value) => ({ ...value }));
+const cleanHidden = (lst) => lst.map((item) => ({ ...item, isHidden: false }));
+const valuesExist = (values) => values != null && values?.length > 0;
+const getSelectedIds = (list) => utils.getSelected(list).map((item) => item.id || item.label);
+const HvDropdownList = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    values = [],
+    multiSelect = false,
+    showSearch = false,
+    onChange,
+    onCancel,
+    labels,
+    notifyChangesOnFirstRender = false,
+    hasTooltips = false,
+    singleSelectionToggle,
+    height: heightProp,
+    maxHeight: maxHeightProp,
+    virtualized = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDropdownList", props);
+  const { classes, cx } = List_styles.useClasses(classesProp);
+  const [searchStr, setSearchStr] = React.useState("");
+  const [list, setList] = React.useState(clone(values));
+  const [allSelected, setAllSelected] = React.useState(false);
+  const [anySelected, setAnySelected] = React.useState(false);
+  const { popper } = context.useBaseDropdownContext();
+  const { maxWidth, maxHeight } = popper?.styles.popper || {};
+  const hasChanges = React.useMemo(() => {
+    return String(getSelectedIds(values)) !== String(getSelectedIds(list));
+  }, [list, values]);
+  const newLabels = {
+    selectAll: labels?.selectAll,
+    selectionConjunction: labels?.multiSelectionConjunction
+  };
+  const updateSelectAll = (listValues) => {
+    if (!listValues) return;
+    const nbrSelected = utils.getSelected(listValues).length;
+    const hasSelection = nbrSelected > 0;
+    const allSelect = nbrSelected === listValues.length;
+    setAnySelected(hasSelection);
+    setAllSelected(hasSelection && allSelect);
+  };
+  React.useEffect(() => {
+    if (!valuesExist(values)) return;
+    setList(clone(values));
+    updateSelectAll(values);
+    if (notifyChangesOnFirstRender) {
+      onChange?.(values, false, false, true);
+    }
+  }, [values, notifyChangesOnFirstRender, onChange]);
+  const handleSearch = (str) => {
+    const results = list?.filter(({ searchValue, label, value }) => {
+      const stringValue = typeof searchValue === "string" && searchValue || typeof label === "string" && label || typeof value === "string" && value || "";
+      return stringValue.toLowerCase().indexOf(str.toLowerCase()) >= 0;
+    });
+    if (results != null) {
+      const newList = list.map((elem) => {
+        const isResult = results.find((result) => result.label === elem.label);
+        return { ...elem, isHidden: !isResult };
+      });
+      setList(newList);
+      setSearchStr(str);
+    }
+    return str;
+  };
+  const renderSearch = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      id: setId.setId(id, "search"),
+      type: "search",
+      value: searchStr,
+      placeholder: labels?.searchPlaceholder,
+      "aria-label": labels?.searchPlaceholder,
+      onChange: (event, str) => handleSearch(str)
+    }
+  ) });
+  const handleSelectAll = () => {
+    const newList = list.map((elem) => {
+      if (elem.disabled) return elem;
+      return { ...elem, selected: !anySelected };
+    });
+    setList(newList);
+    updateSelectAll(newList);
+  };
+  const renderSelectAll = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CheckBox.HvCheckBox,
+      {
+        id: setId.setId(id, "select-all"),
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: utils.getSelected(list).length,
+            total: list.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
+        onChange: handleSelectAll,
+        className: classes.selectAll,
+        indeterminate: anySelected && !allSelected,
+        checked: allSelected
+      }
+    );
+  };
+  const onSelection = (listValues) => {
+    if (!multiSelect) {
+      onChange(cleanHidden(listValues), true, true, true);
+    } else {
+      updateSelectAll(listValues);
+      setList(clone(listValues));
+    }
+  };
+  const renderActions = () => {
+    const applyLabel = labels?.applyLabel;
+    const cancelLabel = labels?.cancelLabel;
+    return /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, { id: setId.setId(id, "actions"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.HvButton,
+        {
+          id: setId.setId(id, "actions-apply"),
+          disabled: !hasChanges,
+          onClick: () => onChange(cleanHidden(list), true, true, true),
+          variant: "primaryGhost",
+          children: applyLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.HvButton,
+        {
+          id: setId.setId(id, "actions-cancel"),
+          onClick: onCancel,
+          variant: "primaryGhost",
+          children: cancelLabel
+        }
+      )
+    ] });
+  };
+  const showList = valuesExist(values);
+  const elementsSize = uikitStyles.theme.spacing(
+    5 + 2 + (showSearch ? 5 : 0) + (showList && multiSelect ? 4 + 6 : 0)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rootList, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.listBorderDown }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.listContainer, children: [
+      showSearch && renderSearch(),
+      showList && multiSelect && renderSelectAll(),
+      showList && /* @__PURE__ */ jsxRuntime.jsx(
+        List.HvList,
+        {
+          id: setId.setId(id, "list"),
+          style: uikitReactUtils.mergeStyles(void 0, {
+            height: heightProp,
+            "--maxW": maxWidth,
+            "--maxH": maxHeightProp ?? `calc(${maxHeight} - ${elementsSize})`
+          }),
+          classes: {
+            root: cx(classes.dropdownListContainer, {
+              [classes.virtualized]: virtualized
+            })
+          },
+          values: list,
+          multiSelect,
+          useSelector: multiSelect,
+          showSelectAll: false,
+          onChange: onSelection,
+          labels: newLabels,
+          hasTooltips,
+          selectable: true,
+          condensed: true,
+          singleSelectionToggle,
+          height: heightProp,
+          virtualized,
+          ...others
+        }
+      )
+    ] }),
+    showList && multiSelect ? renderActions() : null
+  ] });
+};
+exports.dropdownListClasses = List_styles.staticClasses;
+exports.HvDropdownList = HvDropdownList;

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const DropdownButton_styles = require("./DropdownButton.styles.cjs");
+const Button = require("../Button/Button.cjs");
+const HvDropdownButton = React.forwardRef(function HvDropdownButton2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    placement = "bottom",
+    disabled,
+    open,
+    icon,
+    readOnly,
+    children: childrenProp,
+    variant,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvDropdownButton", props);
+  const { classes, cx } = DropdownButton_styles.useClasses(classesProp, false);
+  const endIcon = !icon && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: open });
+  const children = childrenProp && typeof childrenProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.placeholder, children: childrenProp }) : childrenProp;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      ref,
+      icon,
+      disabled: disabled || readOnly,
+      "data-popper-placement": placement,
+      className: cx(
+        classes.root,
+        {
+          [classes.open]: open,
+          [classes.readOnly]: readOnly,
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      classes: { endIcon: classes.arrowContainer },
+      endIcon,
+      variant: open ? "secondarySubtle" : variant,
+      ...others,
+      children: icon ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children })
+    }
+  );
+});
+exports.dropdownButtonClasses = DropdownButton_styles.staticClasses;
+exports.HvDropdownButton = HvDropdownButton;

package/dist/cjs/EmptyState/EmptyState.cjs

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const EmptyState_styles = require("./EmptyState.styles.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const HvEmptyState = React.forwardRef(function HvEmptyState2(props, ref) {
+  const {
+    action,
+    icon,
+    title,
+    message,
+    classes: classesProp,
+    className,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvEmptyState", props);
+  const { classes, cx, css } = EmptyState_styles.useClasses(classesProp);
+  const muiTheme = styles.useTheme();
+  const onlyXs = useMediaQuery__default.default(muiTheme.breakpoints.only("xs"));
+  const upSm = useMediaQuery__default.default(muiTheme.breakpoints.up("sm"));
+  const messageOnly = !!(message && !(title || action));
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant, className: style, children: node });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(
+        classes.container,
+        onlyXs && css({
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center"
+        }),
+        {
+          [classes.containerMessageOnly]: messageOnly
+        },
+        onlyXs && messageOnly && css({ flexDirection: "row" })
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cx(
+              classes.textContainer,
+              upSm && css({ marginLeft: uikitStyles.theme.space.xs })
+            ),
+            children: [
+              renderNode("title4", title, classes.titleContainer),
+              renderNode("body", message, classes.messageContainer),
+              renderNode("body", action, classes.actionContainer)
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+});
+exports.emptyStateClasses = EmptyState_styles.staticClasses;
+exports.HvEmptyState = HvEmptyState;