@carbon/ibm-products 1.22.0 → 1.24.0

package/es/components/AddSelect/AddSelect.js

@@ -1,430 +1,52 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
+var _excluded = ["items", "globalFilters"];
 //
 // Copyright IBM Corp. 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Tag } from 'carbon-components-react';
-import { Tearsheet, TearsheetNarrow } from '../../components/Tearsheet';
-import { NoDataEmptyState } from '../../components/EmptyStates/NoDataEmptyState';
+import { AddSelectBody } from './AddSelectBody';
 import { pkg } from '../../settings';
-import { AddSelectSidebar } from './AddSelectSidebar';
-import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs';
-import { AddSelectList } from './AddSelectList';
-import { AddSelectColumn } from './AddSelectColumn';
-import { normalize, flatten, getGlobalFilterValues } from './add-select-utils';
-import { AddSelectFilter } from './AddSelectFilter';
-import { AddSelectSort } from './AddSelectSort';
-import { sortItems } from './add-select-utils';
-import { useItemSort } from './hooks/useItemSort';
+import { normalize, getGlobalFilterValues } from './add-select-utils';
+var blockClass = "".concat(pkg.prefix, "--add-select");
 var componentName = 'AddSelect';
 export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cx;
-
-  var className = _ref.className,
-      clearFiltersText = _ref.clearFiltersText,
-      closeIconDescription = _ref.closeIconDescription,
-      columnInputPlaceholder = _ref.columnInputPlaceholder,
-      description = _ref.description,
+  var items = _ref.items,
       globalFilters = _ref.globalFilters,
-      globalFiltersIconDescription = _ref.globalFiltersIconDescription,
-      globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
-      globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
-      globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
-      globalSearchLabel = _ref.globalSearchLabel,
-      globalSearchPlaceholder = _ref.globalSearchPlaceholder,
-      globalSortBy = _ref.globalSortBy,
-      influencerTitle = _ref.influencerTitle,
-      items = _ref.items,
-      itemsLabel = _ref.itemsLabel,
-      metaIconDescription = _ref.metaIconDescription,
-      metaPanelTitle = _ref.metaPanelTitle,
-      multi = _ref.multi,
-      navIconDescription = _ref.navIconDescription,
-      noResultsDescription = _ref.noResultsDescription,
-      noResultsTitle = _ref.noResultsTitle,
-      noSelectionDescription = _ref.noSelectionDescription,
-      noSelectionTitle = _ref.noSelectionTitle,
-      onClose = _ref.onClose,
-      onCloseButtonText = _ref.onCloseButtonText,
-      onSubmit = _ref.onSubmit,
-      onSubmitButtonText = _ref.onSubmitButtonText,
-      open = _ref.open,
-      portalTarget = _ref.portalTarget,
-      removeIconDescription = _ref.removeIconDescription,
-      searchResultsLabel = _ref.searchResultsLabel,
-      title = _ref.title,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var blockClass = "".concat(pkg.prefix, "--add-select"); // hooks
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      path = _useState2[0],
-      setPath = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      singleSelection = _useState4[0],
-      setSingleSelection = _useState4[1];
-
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      multiSelection = _useState6[0],
-      setMultiSelection = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      searchTerm = _useState8[0],
-      setSearchTerm = _useState8[1];
-
-  var _useState9 = useState({}),
-      _useState10 = _slicedToArray(_useState9, 2),
-      normalizedItems = _useState10[0],
-      setNormalizedItems = _useState10[1];
-
-  var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      useNormalizedItems = _useState12[0],
-      setUsedNormalizedItems = _useState12[1];
-
-  var _useState13 = useState([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      flatItems = _useState14[0],
-      setFlatItems = _useState14[1];
-
-  var _useState15 = useState([]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      globalFilterOpts = _useState16[0],
-      setGlobalFilterOpts = _useState16[1];
-
-  var _useState17 = useState({}),
-      _useState18 = _slicedToArray(_useState17, 2),
-      appliedGlobalFilters = _useState18[0],
-      setAppliedGlobalFilters = _useState18[1];
-
-  var _useState19 = useState({}),
-      _useState20 = _slicedToArray(_useState19, 2),
-      displayMetalPanel = _useState20[0],
-      setDisplayMetaPanel = _useState20[1];
-
-  var _useItemSort = useItemSort(),
-      sortDirection = _useItemSort.sortDirection,
-      setSortDirection = _useItemSort.setSortDirection,
-      sortAttribute = _useItemSort.sortAttribute,
-      setSortAttribute = _useItemSort.setSortAttribute;
-
-  var _useState21 = useState([]),
-      _useState22 = _slicedToArray(_useState21, 2),
-      appliedModifiers = _useState22[0],
-      setAppliedModifiers = _useState22[1];
-
-  useEffect(function () {
-    var entries = items.entries; // flatItems is just a single array of all entries including children
-
-    var flattenedItems = flatten(entries);
-
-    if (multi) {
-      if (globalFilters !== null && globalFilters !== void 0 && globalFilters.length) {
-        var globalFilterValues = getGlobalFilterValues(globalFilters, flattenedItems);
-        setGlobalFilterOpts(globalFilterValues);
-      }
-
-      if (items.modifiers) {
-        var modifiersToApply = flattenedItems.map(function (item) {
-          var modifierAttribute = items.modifiers.id;
-          return _defineProperty({
-            id: item.id
-          }, modifierAttribute, item[modifierAttribute]);
-        });
-        setAppliedModifiers(modifiersToApply);
-      } // multi select with nested data needs to be normalized
-
-
-      if (entries.find(function (entry) {
-        return entry.children;
-      })) {
-        var newItems = normalize(items);
-        setNormalizedItems(newItems);
-        setUsedNormalizedItems(true);
-      }
-    }
-
-    setFlatItems(flattenedItems);
-  }, [items, multi, globalFilters]); // used to generate columns of results for multi select with hierarchy
-
-  var getPages = function getPages() {
-    var pages = [];
-    var itemIds = Object.keys(normalizedItems); // top level items are just items with no parents so they're the top results
-
-    var topLevelItems = [];
-    itemIds.forEach(function (itemId) {
-      if (!normalizedItems[itemId].parent) {
-        topLevelItems.push(normalizedItems[itemId]);
-      }
-    });
-    pages.push(topLevelItems);
-
-    if (path.length) {
-      /**
-       * the path is set when you initially traverse the child entries
-       * path is an array of item id's
-       * when a path is present the normalized items are searched
-       * any item who's has a matching parent id is added to the results
-       * in the end you have an array of arrays for each column of the hierarchy
-       */
-      var pathIds = path.map(function (p) {
-        return p.id;
-      });
-      pathIds.forEach(function (pathId) {
-        var entries = [];
-        itemIds.forEach(function (itemId) {
-          if (normalizedItems[itemId].parent === pathId) {
-            entries.push(normalizedItems[itemId]);
-          }
-        });
-        pages.push(entries);
-      });
-    }
-
-    return pages;
-  }; // item filtering
-
-
-  var getFilteredItems = function getFilteredItems() {
-    var entries = items.entries;
-    var hasPath = path.length > 0;
-    /**
-     * how to traverse the levels of items-
-     * the path represents the ids of each level / item / breadcrumb
-     * using this path we can drill down into the items until we get to the last one the user selected
-     */
-
-    var itemsToFilter = hasPath ? path.reduce(function (prev, cur) {
-      var _prev$find, _prev$find$children;
-
-      return (_prev$find = prev.find(function (item) {
-        return item.id === cur.id;
-      })) === null || _prev$find === void 0 ? void 0 : (_prev$find$children = _prev$find.children) === null || _prev$find$children === void 0 ? void 0 : _prev$find$children.entries;
-    }, entries) : entries;
-    var results = itemsToFilter.filter(function (item) {
-      if (!searchTerm) {
-        return item;
-      } // otherwise use the default label filter
-
-
-      return item.title.toLowerCase().includes(searchTerm);
-    });
-    return results;
-  };
-
-  var sortFn = sortItems(sortAttribute, sortDirection);
-
-  var getDisplayItems = function getDisplayItems() {
-    if (useNormalizedItems) {
-      // when global search or filter is in use the results are not in column format
-      var filters = Object.keys(appliedGlobalFilters);
-
-      if (searchTerm || filters.length) {
-        var results = flatItems.filter(function (item) {
-          return item.title.toLowerCase().includes(searchTerm);
-        }).filter(function (item) {
-          return filters.every(function (filter) {
-            return item[filter] === appliedGlobalFilters[filter];
-          });
-        }).sort(sortFn);
-        return results;
-      }
-
-      return getPages();
-    }
-
-    return getFilteredItems();
-  }; // only multi select with hierarchy requires the the normalized items
-
-
-  var itemsToDisplay = getDisplayItems();
-  var commonListProps = {
-    metaIconDescription: metaIconDescription,
-    multi: multi,
-    multiSelection: multiSelection,
-    navIconDescription: navIconDescription,
-    path: path,
-    setMultiSelection: setMultiSelection,
-    setPath: setPath,
-    setSingleSelection: setSingleSelection,
-    singleSelection: singleSelection,
-    setDisplayMetaPanel: setDisplayMetaPanel
-  }; // handlers
-
-  var handleSearch = function handleSearch(term) {
-    setSearchTerm(term);
-  };
-
-  var handleFilter = function handleFilter(filters) {
-    setAppliedGlobalFilters(filters);
-  };
-
-  var submitHandler = function submitHandler() {
-    if (multi && appliedModifiers.length > 0) {
-      var selections = multiSelection.map(function (item) {
-        return appliedModifiers.find(function (mod) {
-          return mod.id === item;
-        });
-      });
-      onSubmit(selections);
-    } else if (multi && appliedModifiers.length === 0) {
-      onSubmit(multiSelection);
-    } else {
-      onSubmit(singleSelection);
-    }
-  };
-
-  var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
-  var commonTearsheetProps = {
-    className: classNames,
-    open: open,
-    title: title,
-    description: description,
-    closeIconDescription: 'temp description',
-    actions: [{
-      label: onCloseButtonText,
-      kind: 'secondary',
-      onClick: onClose
-    }, {
-      label: onSubmitButtonText,
-      kind: 'primary',
-      onClick: submitHandler,
-      disabled: multi ? multiSelection.length === 0 : !singleSelection
-    }],
-    portalTarget: portalTarget
-  };
-  var sidebarProps = {
-    closeIconDescription: closeIconDescription,
-    influencerTitle: influencerTitle,
-    items: flatItems,
-    metaPanelTitle: metaPanelTitle,
-    multiSelection: multiSelection,
-    noSelectionDescription: noSelectionDescription,
-    noSelectionTitle: noSelectionTitle,
-    removeIconDescription: removeIconDescription,
-    setMultiSelection: setMultiSelection,
-    displayMetalPanel: displayMetalPanel,
-    setDisplayMetaPanel: setDisplayMetaPanel,
-    modifiers: items.modifiers,
-    appliedModifiers: appliedModifiers
-  };
-
-  var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
-    if (searchTerm) {
-      return false;
-    }
-
-    if (path.length) {
-      return true;
-    }
-
-    return false;
-  };
-
-  var setShowTags = function setShowTags() {
-    if (searchTerm) {
-      return true;
-    }
-
-    if (useNormalizedItems) {
-      return false;
-    }
-
-    return true;
-  };
-
-  var hasResults = itemsToDisplay.length > 0;
-  var globalFiltersApplied = Object.keys(appliedGlobalFilters).length > 0;
-  var showBreadsCrumbs = setShowBreadsCrumbs();
-  var showSort = (searchTerm || globalFiltersApplied) && hasResults;
-  var showTags = setShowTags(); // main content
-
-  var body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__header")
-  }, /*#__PURE__*/React.createElement(AddSelectFilter, {
-    inputLabel: globalSearchLabel,
-    inputPlaceholder: globalSearchPlaceholder,
-    searchTerm: searchTerm,
-    handleSearch: handleSearch,
-    multi: multi,
-    filterOpts: globalFilterOpts,
-    handleFilter: handleFilter,
-    primaryButtonText: globalFiltersPrimaryButtonText,
-    secondaryButtonText: globalFiltersSecondaryButtonText,
-    placeholder: globalFiltersPlaceholderText,
-    iconDescription: globalFiltersIconDescription,
-    appliedFilters: appliedGlobalFilters,
-    hasFiltersApplied: globalFiltersApplied,
-    clearFiltersText: clearFiltersText
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__sub-header")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
-  }, showBreadsCrumbs ? /*#__PURE__*/React.createElement(AddSelectBreadcrumbs, {
-    itemsLabel: itemsLabel,
-    path: path,
-    setPath: setPath
-  }) : /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/React.createElement(Tag, {
-    type: "gray",
-    size: "sm"
-  }, itemsToDisplay.length)), showSort && /*#__PURE__*/React.createElement(AddSelectSort, {
-    items: itemsToDisplay,
-    setSortAttribute: setSortAttribute,
-    setSortDirection: setSortDirection,
-    sortAttribute: sortAttribute,
-    sortDirection: sortDirection,
-    sortBy: globalSortBy
-  }))), useNormalizedItems && !searchTerm && !globalFiltersApplied ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__columns")
-  }, itemsToDisplay.map(function (page, idx) {
-    var _path;
-
-    return /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, commonListProps, {
-      key: idx,
-      filteredItems: page,
-      header: idx === 0 ? itemsLabel : (_path = path[idx - 1]) === null || _path === void 0 ? void 0 : _path.title,
-      columnInputPlaceholder: columnInputPlaceholder
-    }));
-  })) : /*#__PURE__*/React.createElement("div", null, hasResults ? /*#__PURE__*/React.createElement(AddSelectList, _extends({}, commonListProps, {
-    filteredItems: itemsToDisplay,
-    modifiers: items.modifiers,
-    appliedModifiers: appliedModifiers,
-    setAppliedModifiers: setAppliedModifiers
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__body")
-  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
-    subtitle: noResultsDescription,
-    title: noResultsTitle
-  }))));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, rest), multi ? /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
-    influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
-    influencerPosition: "right"
-  }), body) : /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body));
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var useNormalizedItems = !!items.entries.find(function (item) {
+    return item.children;
+  });
+  var normalizedItems = useNormalizedItems ? normalize(items) : null;
+  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? getGlobalFilterValues(globalFilters, normalizedItems) : null;
+  var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
+    var modifierAttribute = items.modifiers.id;
+    return _defineProperty({
+      id: item.id
+    }, modifierAttribute, item[modifierAttribute]);
+  }) : [];
+  return /*#__PURE__*/React.createElement(AddSelectBody, _extends({}, props, {
+    className: blockClass,
+    ref: ref,
+    items: items,
+    normalizedItems: normalizedItems,
+    useNormalizedItems: useNormalizedItems,
+    globalFilterOpts: globalFilterOpts,
+    defaultModifiers: defaultModifiers
+  }));
 });
 AddSelect.propTypes = {
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
-  closeIconDescription: PropTypes.string,
+  closeIconDescription: PropTypes.string.isRequired,
   columnInputPlaceholder: PropTypes.string,
-  description: PropTypes.string,
+  description: PropTypes.string.isRequired,
   globalFilters: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string
@@ -433,7 +55,7 @@ AddSelect.propTypes = {
   globalFiltersPlaceholderText: PropTypes.string,
   globalFiltersPrimaryButtonText: PropTypes.string,
   globalFiltersSecondaryButtonText: PropTypes.string,
-  globalSearchLabel: PropTypes.string,
+  globalSearchLabel: PropTypes.string.isRequired,
   globalSearchPlaceholder: PropTypes.string,
   globalSortBy: PropTypes.array,
   influencerTitle: PropTypes.string,
@@ -462,34 +84,45 @@ AddSelect.propTypes = {
       subtitle: PropTypes.string,
       title: PropTypes.string.isRequired,
       value: PropTypes.string.isRequired
-    }))
-  }),
-  itemsLabel: PropTypes.string,
+    })).isRequired
+  }).isRequired,
+  itemsLabel: PropTypes.string.isRequired,
   metaIconDescription: PropTypes.string,
   metaPanelTitle: PropTypes.string,
-  multi: PropTypes.bool,
+  multi: PropTypes.bool.isRequired,
   navIconDescription: PropTypes.string,
-  noResultsDescription: PropTypes.string,
-  noResultsTitle: PropTypes.string,
+  noResultsDescription: PropTypes.string.isRequired,
+  noResultsTitle: PropTypes.string.isRequired,
   noSelectionDescription: PropTypes.string,
   noSelectionTitle: PropTypes.string,
-  onClose: PropTypes.func,
-  onCloseButtonText: PropTypes.string,
-  onSubmit: PropTypes.func,
-  onSubmitButtonText: PropTypes.string,
-  open: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  onCloseButtonText: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onSubmitButtonText: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
 
   /**
    * portal target for the all tags modal
    */
   portalTarget: PropTypes.node,
-  removeIconDescription: PropTypes.string,
   searchResultsLabel: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string.isRequired
 };
 AddSelect.defaultProps = {
+  closeIconDescription: '',
+  description: '',
+  itemsLabel: '',
   items: {
     entries: []
-  }
+  },
+  multi: false,
+  noResultsDescription: '',
+  noResultsTitle: '',
+  onClose: function onClose() {},
+  onCloseButtonText: '',
+  onSubmit: function onSubmit() {},
+  onSubmitButtonText: '',
+  open: false,
+  title: ''
 };
 AddSelect.displayName = componentName;