@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.38

package/lib/components/AddSelect/AddSelectBody.js

@@ -0,0 +1,377 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectBody = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@carbon/react");
+var _Tearsheet = require("../../components/Tearsheet");
+var _NotFoundEmptyState = require("../EmptyStates/NotFoundEmptyState");
+var _AddSelectSidebar = require("./AddSelectSidebar");
+var _AddSelectBreadcrumbs = require("./AddSelectBreadcrumbs");
+var _AddSelectList = require("./AddSelectList");
+var _AddSelectColumn = require("./AddSelectColumn");
+var _AddSelectFilter = require("./AddSelectFilter");
+var _AddSelectSort = require("./AddSelectSort");
+var _addSelectUtils = require("./add-select-utils");
+var _useItemSort2 = require("./hooks/useItemSort");
+var _useParentSelect2 = _interopRequireDefault(require("./hooks/useParentSelect"));
+var _usePath2 = _interopRequireDefault(require("./hooks/usePath"));
+var _settings = require("../../settings");
+var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "sortByLabel", "title", "useNormalizedItems"]; //
+// Copyright IBM Corp. 2022, 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.
+//
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
+var componentName = 'AddSelectBody';
+var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _cx, _path$;
+  var className = _ref.className,
+    clearFiltersText = _ref.clearFiltersText,
+    closeIconDescription = _ref.closeIconDescription,
+    columnInputPlaceholder = _ref.columnInputPlaceholder,
+    defaultModifiers = _ref.defaultModifiers,
+    description = _ref.description,
+    filterByLabel = _ref.filterByLabel,
+    globalFilterOpts = _ref.globalFilterOpts,
+    globalFiltersLabel = _ref.globalFiltersLabel,
+    globalFiltersIconDescription = _ref.globalFiltersIconDescription,
+    globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
+    globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
+    globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
+    globalSearchLabel = _ref.globalSearchLabel,
+    globalSearchPlaceholder = _ref.globalSearchPlaceholder,
+    globalSortBy = _ref.globalSortBy,
+    illustrationTheme = _ref.illustrationTheme,
+    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,
+    searchResultsTitle = _ref.searchResultsTitle,
+    sortByLabel = _ref.sortByLabel,
+    title = _ref.title,
+    useNormalizedItems = _ref.useNormalizedItems,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // hooks
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    singleSelection = _useState2[0],
+    setSingleSelection = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    multiSelection = _useState4[0],
+    setMultiSelection = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    searchTerm = _useState6[0],
+    setSearchTerm = _useState6[1];
+  var _useState7 = (0, _react.useState)({}),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    appliedGlobalFilters = _useState8[0],
+    setAppliedGlobalFilters = _useState8[1];
+  var _useState9 = (0, _react.useState)({}),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    displayMetalPanel = _useState10[0],
+    setDisplayMetaPanel = _useState10[1];
+  var _useState11 = (0, _react.useState)(defaultModifiers),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    appliedModifiers = _useState12[0],
+    setAppliedModifiers = _useState12[1];
+  var _useItemSort = (0, _useItemSort2.useItemSort)(),
+    sortDirection = _useItemSort.sortDirection,
+    setSortDirection = _useItemSort.setSortDirection,
+    sortAttribute = _useItemSort.sortAttribute,
+    setSortAttribute = _useItemSort.setSortAttribute;
+  var _useParentSelect = (0, _useParentSelect2.default)(),
+    parentSelected = _useParentSelect.parentSelected,
+    setParentSelected = _useParentSelect.setParentSelected;
+  var _usePath = (0, _usePath2.default)(itemsLabel),
+    path = _usePath.path,
+    setPath = _usePath.setPath,
+    pathOnclick = _usePath.pathOnclick,
+    resetPath = _usePath.resetPath;
+  var resetState = function resetState() {
+    setSingleSelection('');
+    setMultiSelection([]);
+    setSearchTerm('');
+    setAppliedGlobalFilters({});
+    setDisplayMetaPanel({});
+    setAppliedModifiers(defaultModifiers);
+    setSortAttribute('');
+    setSortDirection('');
+    setParentSelected(null);
+    resetPath();
+  };
+  var onCloseHandler = function onCloseHandler() {
+    resetState();
+    onClose();
+  };
+  var tearsheetClassnames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_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);
+    }
+    onCloseHandler();
+  };
+  var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
+    if (useNormalizedItems === false || searchTerm || globalFiltersApplied) {
+      return false;
+    }
+    return true;
+  };
+  var setShowTags = function setShowTags() {
+    if (searchTerm) {
+      return true;
+    }
+    if (useNormalizedItems && multi) {
+      return false;
+    }
+    return true;
+  };
+  var parentSelectionHandler = function parentSelectionHandler(id, title, parentId) {
+    setParentSelected(id);
+    setPath(id, title, parentId);
+  };
+  var sortFn = (0, _addSelectUtils.sortItems)(sortAttribute, sortDirection);
+  var itemsToDisplay = (0, _addSelectUtils.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 = {
+    displayMetalPanel: displayMetalPanel,
+    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 = _objectSpread(_objectSpread({}, rest), {}, {
+    className: tearsheetClassnames,
+    open: open,
+    title: title,
+    description: description,
+    actions: [{
+      label: onCloseButtonText,
+      kind: 'secondary',
+      onClick: onCloseHandler
+    }, {
+      label: onSubmitButtonText,
+      kind: 'primary',
+      onClick: submitHandler,
+      disabled: multi ? multiSelection.length === 0 : !singleSelection
+    }],
+    portalTarget: portalTarget,
+    ref: ref
+  });
+  var sidebarProps = {
+    appliedModifiers: appliedModifiers,
+    closeIconDescription: closeIconDescription,
+    displayMetalPanel: displayMetalPanel,
+    illustrationTheme: illustrationTheme,
+    influencerTitle: influencerTitle,
+    items: useNormalizedItems ? normalizedItems : items.entries,
+    metaPanelTitle: metaPanelTitle,
+    modifiers: items.modifiers,
+    multiSelection: multiSelection,
+    noSelectionDescription: noSelectionDescription,
+    noSelectionTitle: noSelectionTitle,
+    setDisplayMetaPanel: setDisplayMetaPanel
+  };
+  var displayColumnView = multi && useNormalizedItems && !searchTerm && !globalFiltersApplied;
+
+  // main content
+  var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "add-select",
+    className: "".concat(blockClass, "__header")
+  }, /*#__PURE__*/_react.default.createElement(_AddSelectFilter.AddSelectFilter, {
+    inputLabel: globalSearchLabel,
+    inputPlaceholder: globalSearchPlaceholder,
+    searchTerm: searchTerm,
+    handleSearch: handleSearch,
+    multi: multi,
+    filterOpts: globalFilterOpts,
+    filtersLabel: globalFiltersLabel,
+    handleFilter: handleFilter,
+    primaryButtonText: globalFiltersPrimaryButtonText,
+    secondaryButtonText: globalFiltersSecondaryButtonText,
+    placeholder: globalFiltersPlaceholderText,
+    iconDescription: globalFiltersIconDescription,
+    appliedFilters: appliedGlobalFilters,
+    hasFiltersApplied: globalFiltersApplied,
+    clearFiltersText: clearFiltersText
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(blockClass, "__sub-header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__sub-header-multi"), multi))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__tags")
+  }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
+    path: path,
+    onClick: pathOnclick,
+    multi: multi
+  }) : /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "__tags-label")
+  }, searchTerm ? searchResultsTitle : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_react2.Tag, {
+    type: "gray",
+    size: "sm"
+  }, itemsToDisplay.length)), showSort && /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
+    items: itemsToDisplay,
+    setSortAttribute: setSortAttribute,
+    setSortDirection: setSortDirection,
+    sortAttribute: sortAttribute,
+    sortDirection: sortDirection,
+    sortBy: globalSortBy
+  }))), displayColumnView ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__columns")
+  }, /*#__PURE__*/_react.default.createElement(_AddSelectColumn.AddSelectColumn, (0, _extends2.default)({}, commonListProps, {
+    items: itemsToDisplay,
+    columnInputPlaceholder: columnInputPlaceholder,
+    header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title,
+    filterByLabel: filterByLabel,
+    sortByLabel: sortByLabel
+  }))) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
+    filteredItems: itemsToDisplay,
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers,
+    setAppliedModifiers: setAppliedModifiers,
+    setParentSelected: parentSelectionHandler,
+    parentSelected: parentSelected,
+    parentId: parentSelected || path[0].id
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, /*#__PURE__*/_react.default.createElement(_NotFoundEmptyState.NotFoundEmptyState, {
+    subtitle: noResultsDescription,
+    title: noResultsTitle,
+    illustrationTheme: illustrationTheme
+  }))));
+  if (multi) {
+    return /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
+      influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
+      influencerPosition: "right"
+    }), body);
+  }
+  return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, commonTearsheetProps, body);
+});
+exports.AddSelectBody = AddSelectBody;
+AddSelectBody.propTypes = {
+  className: _propTypes.default.string,
+  clearFiltersText: _propTypes.default.string,
+  closeIconDescription: _propTypes.default.string,
+  columnInputPlaceholder: _propTypes.default.string,
+  defaultModifiers: _propTypes.default.array,
+  description: _propTypes.default.string,
+  filterByLabel: _propTypes.default.string,
+  globalFilterOpts: _propTypes.default.array,
+  globalFiltersIconDescription: _propTypes.default.string,
+  globalFiltersLabel: _propTypes.default.string,
+  globalFiltersPlaceholderText: _propTypes.default.string,
+  globalFiltersPrimaryButtonText: _propTypes.default.string,
+  globalFiltersSecondaryButtonText: _propTypes.default.string,
+  globalSearchLabel: _propTypes.default.string.isRequired,
+  globalSearchPlaceholder: _propTypes.default.string,
+  globalSortBy: _propTypes.default.array,
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
+  influencerTitle: _propTypes.default.string,
+  items: _propTypes.default.shape({
+    modifiers: _propTypes.default.shape({
+      id: _propTypes.default.string,
+      label: _propTypes.default.string,
+      options: _propTypes.default.array
+    }),
+    sortBy: _propTypes.default.array,
+    filterBy: _propTypes.default.array,
+    entries: _propTypes.default.arrayOf(_propTypes.default.shape({
+      avatar: _propTypes.default.shape({
+        alt: _propTypes.default.string,
+        icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+        src: _propTypes.default.string,
+        theme: _propTypes.default.oneOf(['light', 'dark'])
+      }),
+      children: _propTypes.default.object,
+      icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+      id: _propTypes.default.string.isRequired,
+      meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
+        id: _propTypes.default.string,
+        title: _propTypes.default.string,
+        value: _propTypes.default.string
+      })), _propTypes.default.node]),
+      subtitle: _propTypes.default.string,
+      title: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    }))
+  }),
+  itemsLabel: _propTypes.default.string,
+  metaIconDescription: _propTypes.default.string,
+  metaPanelTitle: _propTypes.default.string,
+  multi: _propTypes.default.bool,
+  navIconDescription: _propTypes.default.string,
+  noResultsDescription: _propTypes.default.string,
+  noResultsTitle: _propTypes.default.string,
+  noSelectionDescription: _propTypes.default.string,
+  noSelectionTitle: _propTypes.default.string,
+  normalizedItems: _propTypes.default.object,
+  onClose: _propTypes.default.func,
+  onCloseButtonText: _propTypes.default.string,
+  onSubmit: _propTypes.default.func,
+  onSubmitButtonText: _propTypes.default.string,
+  open: _propTypes.default.bool,
+  portalTarget: _propTypes.default.node,
+  searchResultsTitle: _propTypes.default.string,
+  sortByLabel: _propTypes.default.string,
+  title: _propTypes.default.string,
+  useNormalizedItems: _propTypes.default.bool
+};
+_AddSelectBreadcrumbs.AddSelectBreadcrumbs.displayName = componentName;

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectBreadcrumbs = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
+//
+// Copyright IBM Corp. 2022, 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.
+//
+
+var blockClass = "".concat(_settings.pkg.prefix, "--add-select__breadcrumbs");
+var componentName = 'AddSelectBreadcrumbs';
+var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
+  var multi = _ref.multi,
+    onClick = _ref.onClick,
+    path = _ref.path;
+  var clickHandler = function clickHandler(e, idx) {
+    e.preventDefault();
+    onClick(idx);
+  };
+  var classNames = (0, _classnames.default)(blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "-multi"), multi));
+  return /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, {
+    noTrailingSlash: true,
+    className: classNames
+  }, path.map(function (entry, idx) {
+    var isCurrentPage = idx === path.length - 1;
+    return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
+      key: entry.id,
+      isCurrentPage: isCurrentPage,
+      onClick: function onClick(e) {
+        return clickHandler(e, idx);
+      },
+      href: "#"
+    }, entry.title);
+  }));
+};
+exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
+AddSelectBreadcrumbs.propTypes = {
+  multi: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  path: _propTypes.default.array
+};
+AddSelectBreadcrumbs.displayName = componentName;

package/lib/components/AddSelect/AddSelectColumn.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectColumn = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@carbon/react");
+var _icons = require("@carbon/react/icons");
+var _settings = require("../../settings");
+var _AddSelectList = require("./AddSelectList");
+var _AddSelectSort = require("./AddSelectSort");
+var _addSelectUtils = require("./add-select-utils");
+var _useItemSort2 = require("./hooks/useItemSort");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _useParentSelect2 = _interopRequireDefault(require("./hooks/useParentSelect"));
+var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath", "sortByLabel"]; //
+// Copyright IBM Corp. 2022, 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.
+//
+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; }
+var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
+var colClass = "".concat(blockClass, "__column");
+var componentName = 'AddSelectColumn';
+var AddSelectColumn = function AddSelectColumn(_ref) {
+  var columnInputPlaceholder = _ref.columnInputPlaceholder,
+    filterByLabel = _ref.filterByLabel,
+    header = _ref.header,
+    items = _ref.items,
+    multiSelection = _ref.multiSelection,
+    parentId = _ref.parentId,
+    path = _ref.path,
+    setMultiSelection = _ref.setMultiSelection,
+    setPath = _ref.setPath,
+    sortByLabel = _ref.sortByLabel,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
+  var _useParentSelect = (0, _useParentSelect2.default)(),
+    parentSelected = _useParentSelect.parentSelected,
+    setParentSelected = _useParentSelect.setParentSelected;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useItemSort = (0, _useItemSort2.useItemSort)(),
+    sortDirection = _useItemSort.sortDirection,
+    setSortDirection = _useItemSort.setSortDirection,
+    sortAttribute = _useItemSort.sortAttribute,
+    setSortAttribute = _useItemSort.setSortAttribute;
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
+  var entries = items.entries,
+    filterBy = items.filterBy,
+    sortBy = items.sortBy;
+  var getSelectedItem = function getSelectedItem() {
+    var _entries$find;
+    var parentInPath = path.find(function (entry) {
+      return entry.parentId === parentId;
+    });
+    /**
+     * 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(event, _ref2) {
+    var checked = _ref2.checked;
+    var itemIds = entries.map(function (item) {
+      return item.id;
+    });
+    if (checked) {
+      var newSelections = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(multiSelection), (0, _toConsumableArray2.default)(itemIds))));
+      setMultiSelection(newSelections);
+    } else {
+      var newItems = multiSelection.filter(function (i) {
+        return !itemIds.includes(i);
+      });
+      setMultiSelection(newItems);
+    }
+  };
+  var filterHandler = function filterHandler(checked, opt) {
+    if (checked) {
+      var newFilters = [].concat((0, _toConsumableArray2.default)(filters), [opt]);
+      setFilters(newFilters);
+    } else {
+      var _newFilters = filters.filter(function (o) {
+        return o !== opt;
+      });
+      setFilters(_newFilters);
+    }
+  };
+
+  // filter and sort array functions
+  var filterBySearch = function filterBySearch(item) {
+    return item.title.toLowerCase().includes(searchTerm);
+  };
+  var filterByAttribute = function filterByAttribute(item) {
+    if (filters.length === 0) {
+      return true;
+    }
+    var filterBy = item.filterBy;
+    var filterByValue = item[filterBy];
+    return filters.some(function (filter) {
+      return filter === filterByValue;
+    });
+  };
+  var sortFn = (0, _addSelectUtils.sortItems)(sortAttribute, sortDirection);
+  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
+
+  var parentSelectionHandler = function parentSelectionHandler(id, title) {
+    setParentSelected(id);
+    setPath(id, title, parentId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: colClass
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(colClass, "-search-bar")
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    placeholder: columnInputPlaceholder,
+    className: "".concat(colClass, "-input"),
+    id: (0, _uuidv.default)(),
+    labelText: columnInputPlaceholder,
+    size: "md"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(colClass, "-sort-filter")
+  }, /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
+    items: entries,
+    setSortAttribute: setSortAttribute,
+    setSortDirection: setSortDirection,
+    sortAttribute: sortAttribute,
+    sortDirection: sortDirection,
+    sortBy: sortBy,
+    sortByLabel: sortByLabel
+  }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
+        size: 32
+      }, props));
+    },
+    className: "".concat(colClass, "-overflow"),
+    flipped: true,
+    "aria-label": filterByLabel,
+    iconDescription: filterByLabel
+  }, filterByOpts.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: opt,
+      className: "".concat(carbonPrefix, "--overflow-menu-options__option")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(carbonPrefix, "--overflow-menu-options__btn")
+    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+      id: opt,
+      labelText: opt,
+      onChange: function onChange(event, _ref3) {
+        var checked = _ref3.checked;
+        return filterHandler(checked, opt);
+      },
+      checked: filters.find(function (o) {
+        return o === opt;
+      }) ? true : false
+    })));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__tags")
+  }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+    id: "".concat((0, _uuidv.default)(), "-select-all"),
+    className: "".concat(colClass, "__select-all"),
+    checked: allSelected,
+    onChange: selectAllHandler,
+    labelText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__tag-label")
+    }, header), /*#__PURE__*/_react.default.createElement(_react2.Tag, {
+      type: "gray",
+      size: "sm"
+    }, colItems.length))
+  })), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
+    filteredItems: colItems,
+    setMultiSelection: setMultiSelection,
+    multiSelection: multiSelection,
+    setParentSelected: parentSelectionHandler,
+    parentSelected: parentSelected
+  }))), selectedItem && itemInPath && /*#__PURE__*/_react.default.createElement(AddSelectColumn, (0, _extends2.default)({
+    columnInputPlaceholder: columnInputPlaceholder,
+    header: selectedItem.title,
+    items: selectedItem.children,
+    multiSelection: multiSelection,
+    setMultiSelection: setMultiSelection,
+    parentId: selectedItem.id,
+    setPath: setPath,
+    path: path,
+    sortByLabel: sortByLabel,
+    filterByLabel: filterByLabel
+  }, props)));
+};
+exports.AddSelectColumn = AddSelectColumn;
+AddSelectColumn.propTypes = {
+  columnInputPlaceholder: _propTypes.default.string,
+  filterByLabel: _propTypes.default.string,
+  header: _propTypes.default.string,
+  items: _propTypes.default.object,
+  multiSelection: _propTypes.default.array,
+  parentId: _propTypes.default.string,
+  path: _propTypes.default.array,
+  setMultiSelection: _propTypes.default.func,
+  setPath: _propTypes.default.func,
+  sortByLabel: _propTypes.default.string
+};
+AddSelectColumn.displayName = componentName;