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

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _groupBy = _interopRequireDefault(require("lodash/groupBy"));

var _Box = _interopRequireDefault(require("../../Box"));

var _MenuItem = _interopRequireDefault(require("../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.default.useMemo(function () {
    return (0, _groupBy.default)(items, itemToGroup);
  }, [items, itemToGroup]);

  if (!itemToGroup) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (item) {
      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, (0, _extends2.default)({}, 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.default.createElement(_react.default.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.default.createElement(_Box.default, {
      "aria-label": "Group " + groupName,
      as: "li",
      key: groupName,
      listStyle: "none"
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      position: "sticky",
      top: 0,
      textTransform: "uppercase",
      fontWeight: "bold",
      zIndex: 1
    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, (0, _extends2.default)({}, allowMultipleSelection && (0, _extends2.default)({}, 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.default.createElement(_Box.default, {
      as: "ul",
      role: "listbox"
    }, items.map(function (item) {
      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, (0, _extends2.default)({}, 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));
    })));
  }));
}

var _default = ComboBoxItems;
exports.default = _default;