pouncejs/dist/esm/components/utils/ComboBoxItems/ComboBoxItems.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import groupBy from 'lodash/groupBy';
import Box from '../../Box';
import MenuItem from '../MenuItem';

/**
 * Acts as a wrapper of MenuItems in a list of dropdown options,
 * to allow grouping.
 */
function ComboBoxItems(_ref) {
  var items = _ref.items,
      itemToGroup = _ref.itemToGroup,
      getItemProps = _ref.getItemProps,
      itemToString = _ref.itemToString,
      disableItem = _ref.disableItem,
      selectedItems = _ref.selectedItems,
      allowMultipleSelection = _ref.allowMultipleSelection;
  var groupedItems = React.useMemo(function () {
    return groupBy(items, itemToGroup);
  }, [items, itemToGroup]);

  if (!itemToGroup) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (item) {
      return /*#__PURE__*/React.createElement(MenuItem, _extends({}, getItemProps({
        item: item,
        disabled: disableItem(item)
      }), {
        as: "li",
        listStyle: "none",
        key: itemToString(item),
        selected: !!selectedItems && selectedItems.map(function (item) {
          return itemToString(item);
        }).includes(itemToString(item)),
        withCheckMark: allowMultipleSelection
      }), itemToString(item));
    }));
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, Object.entries(groupedItems).map(function (_ref2) {
    var groupName = _ref2[0],
        items = _ref2[1];
    var enabledItems = items.filter(function (i) {
      return !disableItem(i);
    });
    var disabled = enabledItems.length === 0;
    return /*#__PURE__*/React.createElement(Box, {
      "aria-label": "Group " + groupName,
      as: "li",
      key: groupName,
      listStyle: "none"
    }, /*#__PURE__*/React.createElement(Box, {
      position: "sticky",
      top: 0,
      textTransform: "uppercase",
      fontWeight: "bold",
      zIndex: 1
    }, /*#__PURE__*/React.createElement(MenuItem, _extends({}, allowMultipleSelection && _extends({}, getItemProps({
      item: enabledItems,
      disabled: disabled
    })), {
      selected: allowMultipleSelection && !!selectedItems && !disabled && enabledItems.every(function (item) {
        return selectedItems.map(itemToString).includes(itemToString(item));
      }),
      backgroundColor: "navyblue-350",
      selectedBackgroundColor: "navyblue-600",
      withCheckMark: allowMultipleSelection
    }), groupName)), /*#__PURE__*/React.createElement(Box, {
      as: "ul",
      role: "listbox"
    }, items.map(function (item) {
      return /*#__PURE__*/React.createElement(MenuItem, _extends({}, getItemProps({
        item: item,
        disabled: disableItem(item)
      }), {
        as: "li",
        listStyle: "none",
        nested: true,
        key: itemToString(item),
        selected: selectedItems == null ? void 0 : selectedItems.map(function (item) {
          return itemToString(item);
        }).includes(itemToString(item)),
        withCheckMark: allowMultipleSelection
      }), itemToString(item));
    })));
  }));
}

export default ComboBoxItems;