@carbon/ibm-products 1.22.0 → 1.23.0

package/es/components/AddSelect/AddSelectBody.js

@@ -0,0 +1,349 @@
+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", "defaultModifiers", "description", "globalFilterOpts", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title", "useNormalizedItems"];
+//
+// 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, { useState } 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 { AddSelectSidebar } from './AddSelectSidebar';
+import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs';
+import { AddSelectList } from './AddSelectList';
+import { AddSelectColumn } from './AddSelectColumn';
+import { AddSelectFilter } from './AddSelectFilter';
+import { AddSelectSort } from './AddSelectSort';
+import { sortItems, getFilteredItems } from './add-select-utils';
+import { useItemSort } from './hooks/useItemSort';
+import useParentSelect from './hooks/useParentSelect';
+import usePath from './hooks/usePath';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--add-select");
+var componentName = 'AddSelectBody';
+export var AddSelectBody = function AddSelectBody(_ref) {
+  var _cx, _path$;
+
+  var className = _ref.className,
+      clearFiltersText = _ref.clearFiltersText,
+      closeIconDescription = _ref.closeIconDescription,
+      columnInputPlaceholder = _ref.columnInputPlaceholder,
+      defaultModifiers = _ref.defaultModifiers,
+      description = _ref.description,
+      globalFilterOpts = _ref.globalFilterOpts,
+      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,
+      normalizedItems = _ref.normalizedItems,
+      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,
+      useNormalizedItems = _ref.useNormalizedItems,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // hooks
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      singleSelection = _useState2[0],
+      setSingleSelection = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      multiSelection = _useState4[0],
+      setMultiSelection = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchTerm = _useState6[0],
+      setSearchTerm = _useState6[1];
+
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      appliedGlobalFilters = _useState8[0],
+      setAppliedGlobalFilters = _useState8[1];
+
+  var _useState9 = useState({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      displayMetalPanel = _useState10[0],
+      setDisplayMetaPanel = _useState10[1];
+
+  var _useState11 = useState(defaultModifiers),
+      _useState12 = _slicedToArray(_useState11, 2),
+      appliedModifiers = _useState12[0],
+      setAppliedModifiers = _useState12[1];
+
+  var _useItemSort = useItemSort(),
+      sortDirection = _useItemSort.sortDirection,
+      setSortDirection = _useItemSort.setSortDirection,
+      sortAttribute = _useItemSort.sortAttribute,
+      setSortAttribute = _useItemSort.setSortAttribute;
+
+  var _useParentSelect = useParentSelect(),
+      parentSelected = _useParentSelect.parentSelected,
+      setParentSelected = _useParentSelect.setParentSelected;
+
+  var _usePath = usePath(itemsLabel),
+      path = _usePath.path,
+      setPath = _usePath.setPath,
+      pathOnclick = _usePath.pathOnclick;
+
+  var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
+  var globalFilterKeys = Object.keys(appliedGlobalFilters);
+  var globalFiltersApplied = globalFilterKeys.length > 0; // 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 setShowBreadsCrumbs = function setShowBreadsCrumbs() {
+    if (searchTerm || globalFiltersApplied || !path || path.length === 0) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var setShowTags = function setShowTags() {
+    if (searchTerm) {
+      return true;
+    }
+
+    if (useNormalizedItems) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var parentSelectionHandler = function parentSelectionHandler(id, title, parentId) {
+    setParentSelected(id);
+    setPath(id, title, parentId);
+  };
+
+  var sortFn = sortItems(sortAttribute, sortDirection);
+  var itemsToDisplay = getFilteredItems(useNormalizedItems, normalizedItems, searchTerm, globalFiltersApplied, globalFilterKeys, appliedGlobalFilters, sortFn, multi, items, path);
+  var hasResults = itemsToDisplay.length > 0;
+  var showBreadsCrumbs = setShowBreadsCrumbs();
+  var showSort = (searchTerm || globalFiltersApplied) && hasResults;
+  var showTags = setShowTags();
+  var commonListProps = {
+    metaIconDescription: metaIconDescription,
+    multi: multi,
+    multiSelection: multiSelection,
+    navIconDescription: navIconDescription,
+    path: path,
+    setMultiSelection: setMultiSelection,
+    setPath: setPath,
+    setSingleSelection: setSingleSelection,
+    singleSelection: singleSelection,
+    setDisplayMetaPanel: setDisplayMetaPanel,
+    parentId: path[0].id
+  };
+  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: useNormalizedItems ? normalizedItems : items.entries,
+    metaPanelTitle: metaPanelTitle,
+    multiSelection: multiSelection,
+    noSelectionDescription: noSelectionDescription,
+    noSelectionTitle: noSelectionTitle,
+    removeIconDescription: removeIconDescription,
+    setMultiSelection: setMultiSelection,
+    displayMetalPanel: displayMetalPanel,
+    setDisplayMetaPanel: setDisplayMetaPanel,
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers
+  };
+  var displayColumnView = multi && useNormalizedItems && !searchTerm && !globalFiltersApplied; // 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, {
+    path: path,
+    onClick: pathOnclick
+  }) : /*#__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
+  }))), displayColumnView ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__columns")
+  }, /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, commonListProps, {
+    items: itemsToDisplay,
+    columnInputPlaceholder: columnInputPlaceholder,
+    header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title
+  }))) : /*#__PURE__*/React.createElement("div", null, hasResults ? /*#__PURE__*/React.createElement(AddSelectList, _extends({}, commonListProps, {
+    filteredItems: itemsToDisplay,
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers,
+    setAppliedModifiers: setAppliedModifiers,
+    setParentSelected: parentSelectionHandler,
+    parentSelected: parentSelected,
+    parentId: parentSelected || path[0].id
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
+    subtitle: noResultsDescription,
+    title: noResultsTitle
+  }))));
+  return /*#__PURE__*/React.createElement("div", rest, multi ? /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
+    influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
+    influencerPosition: "right"
+  }), body) : /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body));
+};
+AddSelectBody.propTypes = {
+  className: PropTypes.string,
+  clearFiltersText: PropTypes.string,
+  closeIconDescription: PropTypes.string,
+  columnInputPlaceholder: PropTypes.string,
+  defaultModifiers: PropTypes.array,
+  description: PropTypes.string,
+  globalFilterOpts: PropTypes.array,
+  globalFiltersIconDescription: PropTypes.string,
+  globalFiltersPlaceholderText: PropTypes.string,
+  globalFiltersPrimaryButtonText: PropTypes.string,
+  globalFiltersSecondaryButtonText: PropTypes.string,
+  globalSearchLabel: PropTypes.string,
+  globalSearchPlaceholder: PropTypes.string,
+  globalSortBy: PropTypes.array,
+  influencerTitle: PropTypes.string,
+  items: PropTypes.shape({
+    modifiers: PropTypes.shape({
+      id: PropTypes.string,
+      label: PropTypes.string,
+      options: PropTypes.array
+    }),
+    sortBy: PropTypes.array,
+    filterBy: PropTypes.array,
+    entries: PropTypes.arrayOf(PropTypes.shape({
+      avatar: PropTypes.shape({
+        alt: PropTypes.string,
+        icon: PropTypes.object,
+        src: PropTypes.string
+      }),
+      children: PropTypes.object,
+      icon: PropTypes.object,
+      id: PropTypes.string.isRequired,
+      meta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        title: PropTypes.string,
+        value: PropTypes.string
+      })), PropTypes.node]),
+      subtitle: PropTypes.string,
+      title: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
+    }))
+  }),
+  itemsLabel: PropTypes.string,
+  metaIconDescription: PropTypes.string,
+  metaPanelTitle: PropTypes.string,
+  multi: PropTypes.bool,
+  navIconDescription: PropTypes.string,
+  noResultsDescription: PropTypes.string,
+  noResultsTitle: PropTypes.string,
+  noSelectionDescription: PropTypes.string,
+  noSelectionTitle: PropTypes.string,
+  normalizedItems: PropTypes.object,
+  onClose: PropTypes.func,
+  onCloseButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  onSubmitButtonText: PropTypes.string,
+  open: PropTypes.bool,
+  portalTarget: PropTypes.node,
+  removeIconDescription: PropTypes.string,
+  searchResultsLabel: PropTypes.string,
+  title: PropTypes.string,
+  useNormalizedItems: PropTypes.bool
+};
+AddSelectBreadcrumbs.displayName = componentName;

package/es/components/AddSelect/AddSelectBreadcrumbs.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
 // Copyright IBM Corp. 2022
 //
@@ -10,47 +9,28 @@ import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 var componentName = 'AddSelectBreadcrumbs';
 export var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
-  var itemsLabel = _ref.itemsLabel,
-      path = _ref.path,
-      setPath = _ref.setPath;
+  var path = _ref.path,
+      onClick = _ref.onClick;
 
-  var clickHandler = function clickHandler(id) {
-    var pathIdx = path.findIndex(function (entry) {
-      return entry.id === id;
-    });
-
-    var finalPath = _toConsumableArray(path).splice(0, pathIdx + 1);
-
-    setPath(finalPath);
-  };
-
-  var resetPath = function resetPath() {
-    setPath([]);
+  var clickHandler = function clickHandler(idx) {
+    onClick(idx);
   };
 
   return /*#__PURE__*/React.createElement(Breadcrumb, {
     noTrailingSlash: true
-  }, /*#__PURE__*/React.createElement(BreadcrumbItem, {
-    onClick: resetPath
-  }, itemsLabel), path.map(function (entry, idx, arr) {
-    var isCurrentPage = idx === arr.length - 1;
-
-    var crumbHandler = function crumbHandler() {
-      if (!isCurrentPage) {
-        clickHandler(entry.id);
-      }
-    };
-
+  }, path.map(function (entry, idx) {
+    var isCurrentPage = idx === path.length - 1;
     return /*#__PURE__*/React.createElement(BreadcrumbItem, {
       key: entry.id,
       isCurrentPage: isCurrentPage,
-      onClick: crumbHandler
+      onClick: function onClick() {
+        return clickHandler(idx);
+      }
     }, entry.title);
   }));
 };
 AddSelectBreadcrumbs.propTypes = {
-  itemsLabel: PropTypes.string,
-  path: PropTypes.array,
-  setPath: PropTypes.func
+  onClick: PropTypes.func,
+  path: PropTypes.array
 };
 AddSelectBreadcrumbs.displayName = componentName;

package/es/components/AddSelect/AddSelectColumn.js

@@ -2,43 +2,46 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["columnInputPlaceholder", "filteredItems", "header", "multiSelection", "setMultiSelection"];
+var _excluded = ["columnInputPlaceholder", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
 //
 // 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, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput, Tag, OverflowMenu, Checkbox } from 'carbon-components-react';
 import { Filter32 } from '@carbon/icons-react';
 import { pkg, carbon } from '../../settings';
 import { AddSelectList } from './AddSelectList';
 import { AddSelectSort } from './AddSelectSort';
-import { sortItems, getSortBy } from './add-select-utils';
+import { sortItems } from './add-select-utils';
 import { useItemSort } from './hooks/useItemSort';
 import uuidv4 from '../../global/js/utils/uuidv4';
-var componentName = 'AddSelect';
+import useParentSelect from './hooks/useParentSelect';
+var blockClass = "".concat(pkg.prefix, "--add-select");
+var colClass = "".concat(blockClass, "__column");
+var componentName = 'AddSelectColumn';
 export var AddSelectColumn = function AddSelectColumn(_ref) {
-  var _filteredItems$find;
-
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
-      filteredItems = _ref.filteredItems,
       header = _ref.header,
+      items = _ref.items,
       multiSelection = _ref.multiSelection,
+      parentId = _ref.parentId,
+      path = _ref.path,
       setMultiSelection = _ref.setMultiSelection,
+      setPath = _ref.setPath,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      allSelected = _useState2[0],
-      setAllSelected = _useState2[1];
+  var _useParentSelect = useParentSelect(),
+      parentSelected = _useParentSelect.parentSelected,
+      setParentSelected = _useParentSelect.setParentSelected;
 
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      searchTerm = _useState4[0],
-      setSearchTerm = _useState4[1];
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchTerm = _useState2[0],
+      setSearchTerm = _useState2[1];
 
   var _useItemSort = useItemSort(),
       sortDirection = _useItemSort.sortDirection,
@@ -46,29 +49,59 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       sortAttribute = _useItemSort.sortAttribute,
       setSortAttribute = _useItemSort.setSortAttribute;
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      filters = _useState6[0],
-      setFilters = _useState6[1];
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      filters = _useState4[0],
+      setFilters = _useState4[1];
+
+  var entries = items.entries,
+      filterBy = items.filterBy,
+      sortBy = items.sortBy;
 
-  var blockClass = "".concat(pkg.prefix, "--add-select");
-  var colClass = "".concat(blockClass, "__column");
-  useEffect(function () {
-    var isAllSelected = filteredItems.every(function (item) {
-      return multiSelection.includes(item.id);
+  var getSelectedItem = function getSelectedItem() {
+    var _entries$find;
+
+    var parentInPath = path.find(function (entry) {
+      return entry.parentId === parentId;
     });
-    setAllSelected(isAllSelected);
-  }, [filteredItems, multiSelection]); // filtering
-
-  var colFilterBy = (_filteredItems$find = filteredItems.find(function (item) {
-    return item.filterBy;
-  })) === null || _filteredItems$find === void 0 ? void 0 : _filteredItems$find.filterBy;
-  var filterByOpts = colFilterBy ? filteredItems.map(function (item) {
-    return item[colFilterBy];
+    /**
+     * this check helps ensure that when the state of the open columns is cleared by global search
+     * that the columns are rebuilt from the data in the path array
+     */
+
+    if (parentInPath && !parentSelected) {
+      return entries.find(function (item) {
+        return item.id === parentInPath.id;
+      });
+    }
+
+    return (_entries$find = entries.find(function (item) {
+      return item.id === parentSelected;
+    })) !== null && _entries$find !== void 0 ? _entries$find : null;
+  };
+
+  var selectedItem = getSelectedItem();
+  /**
+   * this check helps prevent children from already being open when you switch from parents
+   * on the same level. for example- using the storybook example, if you click on folder 1,
+   * file 1, folder 2, and then folder 1 again file 1 children shouldn't be expanded. this
+   * check ensures that when a user navigates to parents on the same level that the open state
+   * of their children is cleared by referencing the path array.
+   */
+
+  var itemInPath = selectedItem && path.find(function (entry) {
+    return entry.id === selectedItem.id;
+  });
+  var allSelected = entries.every(function (item) {
+    return multiSelection.includes(item.id);
+  }); // filtering
+
+  var filterByOpts = filterBy ? entries.map(function (item) {
+    return item[filterBy];
   }) : [];
 
   var selectAllHandler = function selectAllHandler(checked) {
-    var itemIds = filteredItems.map(function (item) {
+    var itemIds = entries.map(function (item) {
       return item.id;
     });
 
@@ -113,12 +146,16 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
   };
 
   var sortFn = sortItems(sortAttribute, sortDirection);
-  var sortBy = getSortBy(filteredItems);
-  var colItems = filteredItems.filter(filterBySearch) // first check if the item meets the search
+  var colItems = entries.filter(filterBySearch) // first check if the item meets the search
   .filter(filterByAttribute) // then check if the item is included in the filter
   .sort(sortFn); // then sort the items by whatever criteria
 
-  return /*#__PURE__*/React.createElement("div", {
+  var parentSelectionHandler = function parentSelectionHandler(id, title) {
+    setParentSelected(id);
+    setPath(id, title, parentId);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: colClass
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(colClass, "-search-bar")
@@ -135,7 +172,7 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(colClass, "-sort-filter")
   }, /*#__PURE__*/React.createElement(AddSelectSort, {
-    items: filteredItems,
+    items: entries,
     setSortAttribute: setSortAttribute,
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
@@ -176,14 +213,27 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
   })), /*#__PURE__*/React.createElement(AddSelectList, _extends({}, props, {
     filteredItems: colItems,
     setMultiSelection: setMultiSelection,
-    multiSelection: multiSelection
-  })));
+    multiSelection: multiSelection,
+    setParentSelected: parentSelectionHandler
+  }))), selectedItem && itemInPath && /*#__PURE__*/React.createElement(AddSelectColumn, _extends({
+    columnInputPlaceholder: columnInputPlaceholder,
+    header: selectedItem.title,
+    items: selectedItem.children,
+    multiSelection: multiSelection,
+    setMultiSelection: setMultiSelection,
+    parentId: selectedItem.id,
+    setPath: setPath,
+    path: path
+  }, props)));
 };
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: PropTypes.string,
-  filteredItems: PropTypes.array,
   header: PropTypes.string,
+  items: PropTypes.object,
   multiSelection: PropTypes.array,
-  setMultiSelection: PropTypes.func
+  parentId: PropTypes.string,
+  path: PropTypes.array,
+  setMultiSelection: PropTypes.func,
+  setPath: PropTypes.func
 };
 AddSelectColumn.displayName = componentName;

package/es/components/AddSelect/AddSelectFilter.js

@@ -17,6 +17,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Filter16 } from '@carbon/icons-react';
 import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
 var componentName = 'AddSelectFilter';
 export var AddSelectFilter = function AddSelectFilter(_ref) {
   var appliedFilters = _ref.appliedFilters,
@@ -44,8 +45,6 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
       open = _useState4[0],
       setOpen = _useState4[1];
 
-  var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
-
   var searchHandler = function searchHandler(e) {
     handleSearch(e.target.value);
   };