@carbon/ibm-products 2.0.0-rc.29 → 2.0.0-rc.32

package/lib/components/AddSelect/AddSelectFilter.js

@@ -1,78 +1,63 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddSelectFilter = 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 _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@carbon/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = require("@carbon/react/icons");
-
 var _settings = require("../../settings");
-
 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; }
-
+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; } //
+// 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__global-filter");
 var componentName = 'AddSelectFilter';
-
 var AddSelectFilter = function AddSelectFilter(_ref) {
   var appliedFilters = _ref.appliedFilters,
-      clearFiltersText = _ref.clearFiltersText,
-      filterOpts = _ref.filterOpts,
-      filtersLabel = _ref.filtersLabel,
-      handleFilter = _ref.handleFilter,
-      handleSearch = _ref.handleSearch,
-      hasFiltersApplied = _ref.hasFiltersApplied,
-      iconDescription = _ref.iconDescription,
-      inputLabel = _ref.inputLabel,
-      inputPlaceholder = _ref.inputPlaceholder,
-      multi = _ref.multi,
-      placeholder = _ref.placeholder,
-      primaryButtonText = _ref.primaryButtonText,
-      searchTerm = _ref.searchTerm,
-      secondaryButtonText = _ref.secondaryButtonText;
-
+    clearFiltersText = _ref.clearFiltersText,
+    filterOpts = _ref.filterOpts,
+    filtersLabel = _ref.filtersLabel,
+    handleFilter = _ref.handleFilter,
+    handleSearch = _ref.handleSearch,
+    hasFiltersApplied = _ref.hasFiltersApplied,
+    iconDescription = _ref.iconDescription,
+    inputLabel = _ref.inputLabel,
+    inputPlaceholder = _ref.inputPlaceholder,
+    multi = _ref.multi,
+    placeholder = _ref.placeholder,
+    primaryButtonText = _ref.primaryButtonText,
+    searchTerm = _ref.searchTerm,
+    secondaryButtonText = _ref.secondaryButtonText;
   var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filters = _useState2[0],
-      setFilters = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
   var searchHandler = function searchHandler(e) {
     handleSearch(e.target.value);
   };
-
   var onchangeHandler = function onchangeHandler(_ref2, id) {
     var selectedItem = _ref2.selectedItem;
     setFilters(_objectSpread(_objectSpread({}, filters), {}, (0, _defineProperty2.default)({}, id, selectedItem)));
   };
+
   /**
    * this component needs to manage it's own internal state of filters before they're applied
    * setFilters manages the local filter state
@@ -80,34 +65,26 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
    * resetFilters resets the local state
    * clearFilters resets both
    */
-
-
   var applyFilters = function applyFilters() {
     setOpen(false);
     handleFilter(filters);
   };
-
   var resetFilters = function resetFilters() {
     setFilters({});
   };
-
   var clearFilters = function clearFilters() {
     resetFilters();
     handleFilter({});
   };
-
   var removeTag = function removeTag(key) {
     var newFilters = _objectSpread({}, filters);
-
     delete newFilters[key];
     setFilters(newFilters);
     handleFilter(newFilters);
   };
-
   var getSelectedItem = function getSelectedItem(id) {
     return filters[id] || '';
   };
-
   var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
   var filterBtnClassnames = (0, _classnames.default)("".concat(blockClass, "-toggle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-toggle--open"), open));
   var dirtyInput = Object.keys(filters).length > 0;
@@ -183,7 +160,6 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     onClick: clearFilters
   }, clearFiltersText)));
 };
-
 exports.AddSelectFilter = AddSelectFilter;
 AddSelectFilter.propTypes = {
   appliedFilters: _propTypes.default.object,

package/lib/components/AddSelect/AddSelectFormControl.js

@@ -1,74 +1,57 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddSelectFormControl = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _icons = require("@carbon/react/icons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _settings = require("../../settings");
-
 var _UserProfileImage = require("../UserProfileImage");
-
 var componentName = 'AddSelectFormControl';
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
-
 var AddSelectFormControl = function AddSelectFormControl(_ref) {
   var _controlProps;
-
   var item = _ref.item,
-      onClick = _ref.onClick,
-      selected = _ref.selected,
-      type = _ref.type;
+    onClick = _ref.onClick,
+    selected = _ref.selected,
+    type = _ref.type;
   var controlProps = (_controlProps = {
     onClick: onClick,
     id: item.id,
     className: "".concat(blockClass, "-form-control-wrapper")
   }, (0, _defineProperty2.default)(_controlProps, "aria-label", item.title), (0, _defineProperty2.default)(_controlProps, "size", 20), _controlProps);
-
   var getCheckbox = function getCheckbox() {
     if (selected) {
       return /*#__PURE__*/_react.default.createElement(_icons.CheckboxCheckedFilled, controlProps);
     }
-
     return /*#__PURE__*/_react.default.createElement(_icons.Checkbox, controlProps);
   };
-
   var getRadio = function getRadio() {
     if (selected) {
       return /*#__PURE__*/_react.default.createElement(_icons.RadioButtonChecked, controlProps);
     }
-
     return /*#__PURE__*/_react.default.createElement(_icons.RadioButton, controlProps);
   };
-
   var getFormControl = function getFormControl() {
     if (!item) {
       return;
     }
-
     if (type === 'checkbox') {
       return getCheckbox();
     } else {
       return getRadio();
     }
   };
-
   var getAvatarProps = function getAvatarProps(_ref2) {
     var src = _ref2.src,
-        alt = _ref2.alt,
-        icon = _ref2.icon,
-        backgroundColor = _ref2.backgroundColor,
-        theme = _ref2.theme;
+      alt = _ref2.alt,
+      icon = _ref2.icon,
+      backgroundColor = _ref2.backgroundColor,
+      theme = _ref2.theme;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
@@ -79,12 +62,10 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
       backgroundColor: backgroundColor
     };
   };
-
   var getItemIcon = function getItemIcon(_ref3) {
     var Icon = _ref3.icon;
     return /*#__PURE__*/_react.default.createElement(Icon, null);
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-form-control")
   }, getFormControl(), /*#__PURE__*/_react.default.createElement("div", {
@@ -99,7 +80,6 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
     className: "".concat(blockClass, "-cell-subtitle")
   }, item.subtitle))));
 };
-
 exports.AddSelectFormControl = AddSelectFormControl;
 AddSelectFormControl.propTypes = {
   item: _propTypes.default.object,

package/lib/components/AddSelect/AddSelectList.js

@@ -1,46 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddSelectList = 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 = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _AddSelectRow = require("./AddSelectRow");
-
 var _useFocus3 = _interopRequireDefault(require("./hooks/useFocus"));
-
-var _excluded = ["filteredItems", "multi"];
+var _excluded = ["filteredItems", "multi"]; //
+// 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__selections");
 var componentName = 'AddSelectList';
-
 var AddSelectList = function AddSelectList(_ref) {
   var filteredItems = _ref.filteredItems,
-      multi = _ref.multi,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    multi = _ref.multi,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useFocus = (0, _useFocus3.default)(filteredItems.length),
-      _useFocus2 = (0, _slicedToArray2.default)(_useFocus, 2),
-      focus = _useFocus2[0],
-      setFocus = _useFocus2[1];
-
+    _useFocus2 = (0, _slicedToArray2.default)(_useFocus, 2),
+    focus = _useFocus2[0],
+    setFocus = _useFocus2[1];
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "add-select-focus",
     className: (0, _classnames.default)("".concat(blockClass, "-wrapper"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-wrapper-multi"), multi))
@@ -62,7 +52,6 @@ var AddSelectList = function AddSelectList(_ref) {
     }, rest));
   }))));
 };
-
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   filteredItems: _propTypes.default.array,

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -1,49 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddSelectMetaPanel = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = require("@carbon/react/icons");
-
 var _react2 = require("@carbon/react");
-
 var _settings = require("../../settings");
-
 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; }
-
 //
 // 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__meta-panel");
 var componentName = 'AddSelectMetaPanel';
-
 var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
   var closeIconDescription = _ref.closeIconDescription,
-      meta = _ref.meta,
-      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-      title = _ref.title;
-
+    meta = _ref.meta,
+    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
+    title = _ref.title;
   var onCloseHandler = function onCloseHandler() {
     setDisplayMetaPanel({});
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -75,7 +62,6 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     }, entry === null || entry === void 0 ? void 0 : entry.value));
   }));
 };
-
 exports.AddSelectMetaPanel = AddSelectMetaPanel;
 AddSelectMetaPanel.propTypes = {
   closeIconDescription: _propTypes.default.string.isRequired,

package/lib/components/AddSelect/AddSelectRow.js

@@ -1,109 +1,87 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AddSelectRow = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@carbon/react");
-
 var _icons = require("@carbon/react/icons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _AddSelectFormControl = require("./AddSelectFormControl");
-
 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; }
-
 //
 // 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__selections");
 var componentName = 'AddSelectList';
-
 var AddSelectRow = function AddSelectRow(_ref) {
   var _modifiers$options, _cx;
-
   var appliedModifiers = _ref.appliedModifiers,
-      displayMetalPanel = _ref.displayMetalPanel,
-      index = _ref.index,
-      focus = _ref.focus,
-      item = _ref.item,
-      metaIconDescription = _ref.metaIconDescription,
-      modifiers = _ref.modifiers,
-      multi = _ref.multi,
-      multiSelection = _ref.multiSelection,
-      navIconDescription = _ref.navIconDescription,
-      parentId = _ref.parentId,
-      setAppliedModifiers = _ref.setAppliedModifiers,
-      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-      setFocus = _ref.setFocus,
-      setMultiSelection = _ref.setMultiSelection,
-      setParentSelected = _ref.setParentSelected,
-      setSingleSelection = _ref.setSingleSelection,
-      singleSelection = _ref.singleSelection;
+    displayMetalPanel = _ref.displayMetalPanel,
+    index = _ref.index,
+    focus = _ref.focus,
+    item = _ref.item,
+    metaIconDescription = _ref.metaIconDescription,
+    modifiers = _ref.modifiers,
+    multi = _ref.multi,
+    multiSelection = _ref.multiSelection,
+    navIconDescription = _ref.navIconDescription,
+    parentId = _ref.parentId,
+    parentSelected = _ref.parentSelected,
+    setAppliedModifiers = _ref.setAppliedModifiers,
+    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
+    setFocus = _ref.setFocus,
+    setMultiSelection = _ref.setMultiSelection,
+    setParentSelected = _ref.setParentSelected,
+    setSingleSelection = _ref.setSingleSelection,
+    singleSelection = _ref.singleSelection;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (focus === index) {
       ref.current.focus();
     }
   }, [focus, index]);
-
   var isSelected = function isSelected() {
     if (multi) {
       return multiSelection.includes(item.id);
     }
-
     return item.id === singleSelection;
   };
-
   var getTabIndex = function getTabIndex() {
     // on initial load make the first item tabbable
     if (index === 0 && focus === '') {
       return 0;
-    } // make it so only the last focused item is tabbable
-
+    }
 
+    // make it so only the last focused item is tabbable
     if (focus === index && focus !== '') {
       return 0;
-    } // make unfocused items un-tabbable
-
+    }
 
+    // make unfocused items un-tabbable
     return -1;
   };
-
   var focusHandler = (0, _react.useCallback)(function (reset) {
     setFocus(reset ? '' : index);
   }, [setFocus, index]);
-
   var handleSingleSelection = function handleSingleSelection() {
     setSingleSelection(item.id);
   };
-
   var onSelectKeyDown = function onSelectKeyDown(_ref2) {
     var key = _ref2.key;
-
     if (key === 'Enter' || key === ' ') {
       if (multi) {
         handleMultiSelection();
@@ -114,10 +92,8 @@ var AddSelectRow = function AddSelectRow(_ref) {
       onNavigateItem();
     }
   };
-
   var handleMultiSelection = function handleMultiSelection() {
     var checked = isSelected();
-
     if (!checked) {
       var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [item.id]);
       setMultiSelection(newValues);
@@ -125,16 +101,13 @@ var AddSelectRow = function AddSelectRow(_ref) {
       var _newValues = multiSelection.filter(function (v) {
         return v !== item.id;
       });
-
       setMultiSelection(_newValues);
     }
   };
-
   var onNavigateItem = function onNavigateItem() {
     focusHandler(true);
     setParentSelected(item.id, item.title, parentId);
   };
-
   var modifierHandler = function modifierHandler(id, selectedItem) {
     var modifiersClone = (0, _toConsumableArray2.default)(appliedModifiers);
     var modifierIdx = modifiersClone.findIndex(function (item) {
@@ -145,22 +118,19 @@ var AddSelectRow = function AddSelectRow(_ref) {
     }, modifiers.id, selectedItem);
     setAppliedModifiers(modifiersClone);
   };
-
   var metaPanelHandler = function metaPanelHandler() {
     if (item.meta) {
       setDisplayMetaPanel(item);
     }
   };
-
   var isInMetaPanel = function isInMetaPanel(id) {
     return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
   };
-
   var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
   var tabIndex = getTabIndex();
   var selected = isSelected();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), parentSelected === item.id), _cx)),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,
@@ -221,7 +191,6 @@ var AddSelectRow = function AddSelectRow(_ref) {
     onClick: metaPanelHandler
   }))));
 };
-
 exports.AddSelectRow = AddSelectRow;
 AddSelectRow.propTypes = {
   appliedModifiers: _propTypes.default.array,
@@ -236,6 +205,7 @@ AddSelectRow.propTypes = {
   multiSelection: _propTypes.default.array,
   navIconDescription: _propTypes.default.string,
   parentId: _propTypes.default.string,
+  parentSelected: _propTypes.default.string,
   setAppliedModifiers: _propTypes.default.func,
   setDisplayMetaPanel: _propTypes.default.func,
   setFocus: _propTypes.default.func,