@helpscout/hsds-react/components/DropList/DropList.utils.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.getDropListVariant = getDropListVariant;
exports.displayWarnings = displayWarnings;
exports.useWarnings = useWarnings;
exports.isTogglerOfType = isTogglerOfType;
exports.itemToString = itemToString;
exports.parseSelectionFromProps = parseSelectionFromProps;
exports.isItemSelected = isItemSelected;
exports.getItemContentKeyName = getItemContentKeyName;
exports.objectHasKey = objectHasKey;
exports.findItemInArray = findItemInArray;
exports.removeItemFromArray = removeItemFromArray;
exports.isItemADivider = isItemADivider;
exports.isItemAGroup = isItemAGroup;
exports.isItemAGroupLabel = isItemAGroupLabel;
exports.isItemInert = isItemInert;
exports.isItemAction = isItemAction;
exports.isItemRegular = isItemRegular;
exports.flattenListItems = flattenListItems;
exports.renderListContents = renderListContents;
exports.requiredItemPropsCheck = requiredItemPropsCheck;
exports.checkIfGroupOrDividerItem = checkIfGroupOrDividerItem;
exports.isItemHighlightable = isItemHighlightable;
exports.getEnabledItemIndex = getEnabledItemIndex;
exports.getMenuWidth = getMenuWidth;
exports.emphasizeSubstring = emphasizeSubstring;

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

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

var _lodash = _interopRequireDefault(require("lodash.isplainobject"));

var _lodash2 = _interopRequireDefault(require("lodash.isstring"));

var _lodash3 = _interopRequireDefault(require("lodash.isnil"));

var _DropList = require("./DropList.constants");

var _DropList2 = require("./DropList.togglers");

var _DropList3 = require("./DropList.css");

var _DropList4 = _interopRequireDefault(require("./DropList.Combobox"));

var _DropList5 = _interopRequireDefault(require("./DropList.Select"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function getDropListVariant(_ref) {
  var variant = _ref.variant,
      autoSetComboboxAt = _ref.autoSetComboboxAt,
      numberOfItems = _ref.numberOfItems;
  return variant.toLowerCase() === _DropList.VARIANTS.COMBOBOX || autoSetComboboxAt > 0 && numberOfItems >= autoSetComboboxAt ? _DropList4.default : _DropList5.default;
} // No need to test this helper

/* istanbul ignore next */


function displayWarnings(_ref2) {
  var toggler = _ref2.toggler,
      withMultipleSelection = _ref2.withMultipleSelection,
      menuCSS = _ref2.menuCSS,
      tippyOptions = _ref2.tippyOptions;

  if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
    if (! /*#__PURE__*/_react.default.isValidElement(toggler)) {
      console.info('Pass one of the provided togglers or a custom one to the `toggler` prop');
    }

    if (isTogglerOfType(toggler, _DropList2.SelectTag) && withMultipleSelection) {
      console.info('The Select toggler option should not have withMultipleSelection enabled, it has been disabled for you');
    }

    if (!(0, _lodash3.default)(menuCSS) && tippyOptions.appendTo === undefined) {
      console.error('menuCSS is only needed when using tippyOptions.appendTo to portal the DropList, please use regular styled components if you need custom styles');
    }
  }
}

function useWarnings(props) {
  (0, _react.useEffect)(function () {
    displayWarnings(props); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

function isTogglerOfType(toggler, type) {
  return /*#__PURE__*/_react.default.isValidElement(toggler) && toggler.type === type;
}

function itemToString(item) {
  if ((0, _lodash3.default)(item) || checkIfGroupOrDividerItem(item)) return ''; // Items can be simple strings

  if ((0, _lodash2.default)(item)) return item;

  if ((0, _lodash.default)(item)) {
    // Object items should have 'label' or 'value', obtain which one is used per item
    var itemContentKeyName = getItemContentKeyName(item);
    return itemContentKeyName ? item[itemContentKeyName] : '';
  }

  return '';
}

function parseSelectionFromProps(_ref3) {
  var withMultipleSelection = _ref3.withMultipleSelection,
      selection = _ref3.selection;

  if (withMultipleSelection) {
    return !(0, _lodash3.default)(selection) ? [].concat(selection) : [];
  }

  return !(0, _lodash3.default)(selection) ? selection : null;
}

function isItemSelected(_ref4) {
  var item = _ref4.item,
      selectedItem = _ref4.selectedItem,
      selectedItems = _ref4.selectedItems;
  if ((0, _lodash3.default)(selectedItem) && selectedItems.length === 0) return false;

  if ((0, _lodash.default)(item)) {
    var itemContentKey = getItemContentKeyName(item);
    var itemContent = item[itemContentKey];

    if (!(0, _lodash3.default)(selectedItem) && selectedItems.length === 0) {
      var selectedItemContentKey = getItemContentKeyName(selectedItem);
      var selectedItemContent = selectedItem[selectedItemContentKey];
      return selectedItemContent === itemContent;
    }

    return Boolean(selectedItems.find(function (item) {
      return item[itemContentKey] === itemContent;
    }));
  }

  return selectedItem === item || selectedItems.includes(item);
}

function getItemContentKeyName(item) {
  if (objectHasKey(item, 'label')) return 'label';
  if (objectHasKey(item, 'value')) return 'value';
  return undefined;
}

function objectHasKey(obj, key) {
  return (0, _lodash.default)(obj) && !(0, _lodash3.default)(obj[key]);
}

function findItemInArray(_ref5) {
  var item = _ref5.item,
      arr = _ref5.arr,
      _ref5$key = _ref5.key,
      key = _ref5$key === void 0 ? 'label' : _ref5$key;
  if ((0, _lodash3.default)(item)) return undefined;
  return arr.find(function (i) {
    if ((0, _lodash.default)(i)) {
      return i[key] === item[key];
    }

    if ((0, _lodash.default)(item)) {
      return i === item[key];
    }

    return i === item;
  });
}

function removeItemFromArray(_ref6) {
  var item = _ref6.item,
      arr = _ref6.arr,
      _ref6$key = _ref6.key,
      key = _ref6$key === void 0 ? 'label' : _ref6$key;
  return arr.filter(function (i) {
    if ((0, _lodash.default)(i)) {
      return i[key] !== item[key];
    }

    if ((0, _lodash.default)(item)) {
      return i !== item[key];
    }

    return i !== item;
  });
}

function isItemADivider(item) {
  return objectHasKey(item, 'type') && item.type === _DropList.ITEM_TYPES.DIVIDER;
}

function isItemAGroup(item) {
  return objectHasKey(item, 'type') && item.type === _DropList.ITEM_TYPES.GROUP;
}

function isItemAGroupLabel(item) {
  return objectHasKey(item, 'type') && item.type === _DropList.ITEM_TYPES.GROUP_LABEL;
}

function isItemInert(item) {
  return objectHasKey(item, 'type') && item.type === _DropList.ITEM_TYPES.INERT;
}

function isItemAction(item) {
  return objectHasKey(item, 'type') && item.type === _DropList.ITEM_TYPES.ACTION;
}

function isItemRegular(item) {
  return !isItemADivider(item) && !isItemAGroup(item) && !isItemAGroupLabel(item);
}

function flattenListItems(listItems) {
  return listItems.reduce(function (accumulator, listItem) {
    var contentKey = getItemContentKeyName(listItem);

    if (isItemAGroup(listItem)) {
      var _accumulator$concat;

      var itemsInGroup = listItem.items.map(function (item) {
        return (0, _extends2.default)({}, item, {
          group: listItem[contentKey]
        });
      });
      return itemsInGroup.length > 0 ? accumulator.concat((_accumulator$concat = {
        type: _DropList.ITEM_TYPES.GROUP_LABEL
      }, _accumulator$concat[contentKey] = listItem[contentKey], _accumulator$concat)).concat(itemsInGroup) : accumulator;
    }

    return accumulator.concat(listItem);
  }, []);
}

function renderListContents(_ref7) {
  var customEmptyList = _ref7.customEmptyList,
      inputValue = _ref7.inputValue,
      items = _ref7.items,
      renderListItem = _ref7.renderListItem;
  var isEmptyList = items.length === 0;

  if (!isEmptyList) {
    return items.map(renderListItem);
  }

  if (isEmptyList && customEmptyList) {
    return /*#__PURE__*/_react.default.isValidElement(customEmptyList) ? /*#__PURE__*/_react.default.cloneElement(customEmptyList) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList3.EmptyListUI, {
      children: "No items"
    });
  }

  if (isEmptyList && !customEmptyList && (0, _lodash3.default)(inputValue)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList3.EmptyListUI, {
      children: "No items"
    });
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropList3.ListItemUI, {
    children: ["No results for ", inputValue]
  });
} // No need to test this helper

/* istanbul ignore next */


function requiredItemPropsCheck(props, propName, componentName) {
  if (!props.label && !props.value) {
    return new Error("One of 'label' or 'value' is required by '" + componentName + "' component.");
  }
}

function checkIfGroupOrDividerItem(item) {
  return isItemADivider(item) || isItemAGroup(item) || isItemAGroupLabel(item);
}

function isItemHighlightable(item) {
  return !checkIfGroupOrDividerItem(item) && !item.isDisabled && !isItemInert(item);
}

function getEnabledItemIndex(_ref8) {
  var currentHighlightedIndex = _ref8.currentHighlightedIndex,
      nextHighlightedIndex = _ref8.nextHighlightedIndex,
      items = _ref8.items,
      arrowKey = _ref8.arrowKey;
  // When nextHighlightedIndex === -1 it means there are no items to be highlighted
  // like in the case of a combobox being filtered to "no results"
  if (nextHighlightedIndex === -1) return -1;
  var isNextIndexItemHighlightable = isItemHighlightable(items[nextHighlightedIndex]);

  if (isNextIndexItemHighlightable && currentHighlightedIndex !== nextHighlightedIndex) {
    return nextHighlightedIndex;
  }

  var highlightableItems = items.filter(function (item) {
    return !checkIfGroupOrDividerItem(item) && !item.isDisabled && !isItemInert(item);
  });

  if (highlightableItems.length === 1) {
    return items.findIndex(isItemHighlightable);
  }

  var newNextHighlightedIndex;
  var firstIndex = 0;
  var lastIndex = items.length - 1;

  if (arrowKey === 'UP') {
    var isNextIndexAfterFirst = nextHighlightedIndex - 1 >= firstIndex;
    newNextHighlightedIndex = isNextIndexAfterFirst ? nextHighlightedIndex - 1 : lastIndex;
  } else {
    var isNextIndexBeforeLast = nextHighlightedIndex + 1 <= lastIndex;
    newNextHighlightedIndex = isNextIndexBeforeLast ? nextHighlightedIndex + 1 : firstIndex;
  }

  return getEnabledItemIndex({
    currentHighlightedIndex: currentHighlightedIndex,
    nextHighlightedIndex: newNextHighlightedIndex,
    items: items,
    arrowKey: arrowKey
  });
}

function getMenuWidth(variant, menuWidth) {
  if (!(0, _lodash3.default)(menuWidth)) return menuWidth;
  return variant.toLowerCase() === 'combobox' ? '220px' : '200px';
}
/**
 * Emphasize the first matched section of a string that respects uppercase
 * @param {string} str The string to process
 * @param {string} subsection The section of the string to emphasize
 * @returns string
 */


function emphasizeSubstring(str, subsection, htmlTag) {
  if (htmlTag === void 0) {
    htmlTag = 'strong';
  }

  var strUppercased = str.toUpperCase();
  var subsectionUppercased = subsection.toUpperCase();
  var idx = strUppercased.indexOf(subsectionUppercased);

  if (!subsectionUppercased || idx === -1) {
    return str;
  }

  var l = subsectionUppercased.length;
  return str.substring(0, idx) + ("<" + htmlTag + ">") + str.substring(idx, l + idx) + ("</" + htmlTag + ">") + str.substring(idx + l);
}