@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -1,315 +0,0 @@
-"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/Dropdown.styles.cjs

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown", {
-  root: {
-    width: "100%",
-    position: "relative",
-    display: "inline-block"
-  },
-  labelContainer: {},
-  label: {},
-  description: {},
-  error: {},
-  placeholder: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  placeholderClosed: {
-    color: uikitStyles.theme.colors.textSubtle
-  },
-  selectionDisabled: {
-    lineHeight: uikitStyles.theme.space.md,
-    color: uikitStyles.theme.colors.textDisabled
-  },
-  dropdown: {
-    width: "100%",
-    borderRadius: uikitStyles.theme.radii.base
-  },
-  arrow: {},
-  dropdownHeader: {},
-  dropdownHeaderInvalid: {
-    borderColor: uikitStyles.theme.form.errorColor
-  },
-  dropdownHeaderOpen: {},
-  dropdownListContainer: {},
-  rootList: {},
-  disabled: {
-    color: uikitStyles.theme.colors.textDisabled
-  },
-  readOnly: {
-    "& $dropdownHeader": {
-      borderColor: uikitStyles.theme.colors.textSubtle,
-      backgroundColor: uikitStyles.theme.colors.bgContainer
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Dropdown/List/List.cjs

@@ -1,199 +0,0 @@
-"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/Dropdown/List/List.styles.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownList", {
-  rootList: {},
-  dropdownListContainer: {
-    overflow: "auto",
-    padding: 4,
-    margin: -4,
-    maxWidth: "var(--maxW)",
-    maxHeight: "var(--maxH)"
-  },
-  virtualized: {
-    maxWidth: "inherit",
-    maxHeight: "inherit",
-    overflow: "inherit",
-    padding: 0
-  },
-  searchContainer: { marginBottom: uikitStyles.theme.space.xs },
-  listBorderDown: {},
-  listContainer: { padding: uikitStyles.theme.space.sm },
-  selectAll: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Dropdown/utils.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getSelected = (list = []) => list.filter((elem) => elem.selected);
-const getSelectionLabel = (labels, placeholder, multiSelect, list = []) => {
-  const { select } = labels || {};
-  const selected = getSelected(list);
-  if (select) return { selected: select };
-  if (multiSelect) {
-    return {
-      selected: selected.length,
-      total: list.length
-    };
-  }
-  return { selected: selected.length > 0 ? selected[0].label : placeholder };
-};
-exports.getSelected = getSelected;
-exports.getSelectionLabel = getSelectionLabel;

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -1,50 +0,0 @@
-"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;