@hitachivantara/uikit-react-core/dist/cjs/Dropdown/List/List.cjs

Core React components for the NEXT Design System.

"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;