@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.26

package/es/components/InlineEditV2/InlineEditV2.js

@@ -11,7 +11,7 @@ var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "l
  * LICENSE file in the root directory of this source tree.
  */
 import React, { useState, useEffect, forwardRef, useRef } from 'react';
-import { Button } from '@carbon/react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Edit, Checkmark, Close, // EditOff,
@@ -21,6 +21,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var componentName = 'InlineEditV2';
 var blockClass = "".concat(pkg.prefix, "--inline-edit-v2");
 export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+
   var cancelLabel = _ref.cancelLabel,
       editLabel = _ref.editLabel,
       id = _ref.id,
@@ -147,7 +149,7 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "-focused"), focused)),
+    className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement("label", {
@@ -162,55 +164,43 @@ export var InlineEditV2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: inputRef // readOnly={readOnly}
     ,
     onKeyDown: onKeyHandler
-  }), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__toolbar")
+  }, focused ? /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
     size: 16,
     className: "".concat(blockClass, "__warning-icon")
-  }), /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Close, {
-        size: 24
-      });
-    },
+  }), /*#__PURE__*/React.createElement(IconButton, {
     size: "sm",
-    iconDescription: cancelLabel,
+    label: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "cancel",
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
-  }), /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Checkmark, {
-        size: 24
-      });
-    },
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: 16
+  })), /*#__PURE__*/React.createElement(IconButton, {
     size: "sm",
-    iconDescription: saveLabel,
+    label: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "save",
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
     disabled: !canSave
-  })) : /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Checkmark, {
+    size: 16
+  }))) : /*#__PURE__*/React.createElement(IconButton, {
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
-    hasIconOnly: true // renderIcon={readOnly ? EditOff24 : Edit24}
-    ,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Edit, {
-        size: 24
-      });
-    },
-    size: "sm" // iconDescription={readOnly ? readOnlyLabel : editLabel}
-    ,
-    iconDescription: editLabel,
+    size: "sm",
+    label: editLabel,
     onClick: onFocusHandler,
     kind: "ghost",
     tabIndex: 0,
     key: "edit"
-  })), focused && invalid && /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(Edit, {
+    size: 16
+  })))), focused && invalid && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__warning-text")
   }, invalidLabel));
 });

package/es/components/index.js

@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';

package/es/global/js/package-settings.js

@@ -79,7 +79,8 @@ var defaults = {
   // feature level flags
   feature: {
     'a-new-feature': false,
-    'default-portal-target-body': true
+    'default-portal-target-body': true,
+    'Datagrid.useInfiniteScroll': false
   }
 };
 
@@ -91,6 +92,10 @@ var warningMessageFeature = function warningMessageFeature(property) {
   return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
 };
 
+var errorMessageFeature = function errorMessageFeature(property) {
+  return "Carbon for IBM Products (Error): Feature \"".concat(property, "\" not enabled. To enable see the notes on feature flags in the README.");
+};
+
 var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
 var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures'; // Values to represent overrides for component or feature settings.
 // Each value maps the initial value to the value that should be returned.
@@ -111,7 +116,11 @@ var allFeatures = all.INITIAL;
 var silent = false;
 var component = new Proxy(_objectSpread({}, defaults.component), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageComponent(property));
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageComponent(property));
+    }
+
     target[property] = value;
     return true; // value set
   },
@@ -123,7 +132,11 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
 });
 var feature = new Proxy(_objectSpread({}, defaults.feature), {
   set: function set(target, property, value) {
-    value && !silent && console.warn(warningMessageFeature(property));
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageFeature(property));
+    }
+
     target[property] = value;
     return true; // value set
   },
@@ -153,6 +166,14 @@ export default {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return byDefault ? defaults.feature[featureName] : feature[featureName];
   },
+  checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
+    if (feature[featureName]) {
+      // NOTE: Warning emitted if feature flag is enabled (see Proxy above)
+      return true;
+    } else {
+      console.error(errorMessageFeature(featureName));
+    }
+  },
   isFeaturePublic: function isFeaturePublic(featureName) {
     var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);

package/es/global/js/utils/story-helper.js

@@ -76,4 +76,13 @@ CodesandboxLink.propTypes = {
    * directory withing examples codesandbox will be found
    */
   exampleDirectory: PropTypes.string
+};
+/**
+ * A helper function that finds the designated theme on the Storybook canvas.
+ * @returns "dark" or "light"
+ */
+
+export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
+  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };

package/es/global/js/utils/test-helper.js

@@ -198,6 +198,43 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
   warn.mockRestore();
   return result;
 };
+
+var checkLogging = function checkLogging(mock, message) {
+  if (message) {
+    var _expect4;
+
+    expect(mock).toBeCalled();
+
+    (_expect4 = expect(mock)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
+  }
+};
+/**
+ * A helper function to enable a test to expect a single call to
+ * console.error, for example when intentionally omitting a required prop
+ * or supplying an invalid prop type or value for the purposes of the test.
+ * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * console.error or console.warn, which must be called exactly once. A single string or regex or an
+ * expect matcher can be used to match a single-argument call to console.error (most common),
+ * while an array of strings and/or regex and/or expect matchers can be used to match a
+ * multiple-argument call. Strings can be full or substring matches to the corresponding
+ * argument.
+ * @param {Function} test the test function to call, during which the call to
+ * console.error will be expected.
+ */
+
+
+export var expectLogging = function expectLogging(_ref2, test) {
+  var errors = _ref2.errors,
+      warnings = _ref2.warnings;
+  var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+  var result = test();
+  checkLogging(error, errors);
+  checkLogging(warn, warnings);
+  error.mockRestore();
+  warn.mockRestore();
+  return result;
+};
 /**
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
@@ -213,14 +250,9 @@ export var expectMultipleWarn = function expectMultipleWarn(messages, test) {
  */
 
 export var expectError = function expectError(message, test) {
-  var _expect4;
-
   var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
   var result = test();
-  expect(error).toBeCalledTimes(1);
-
-  (_expect4 = expect(error)).toHaveBeenCalledWith.apply(_expect4, _toConsumableArray(makeMatcherArray(message)));
-
+  checkLogging(error, message);
   error.mockRestore();
   return result;
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -282,6 +282,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   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,

package/lib/components/AddSelect/AddSelectFormControl.js

@@ -0,0 +1,110 @@
+"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;
+  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;
+    return {
+      className: "".concat(blockClass, "-cell-avatar"),
+      size: 'lg',
+      theme: theme,
+      image: src,
+      imageDescription: alt,
+      icon: icon,
+      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", {
+    className: "".concat(blockClass, "-form-control-label-wrapper")
+  }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-cell-icon")
+  }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-form-control-label-text")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(blockClass, "-cell-title")
+  }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(blockClass, "-cell-subtitle")
+  }, item.subtitle))));
+};
+
+exports.AddSelectFormControl = AddSelectFormControl;
+AddSelectFormControl.propTypes = {
+  item: _propTypes.default.object,
+  onClick: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  type: _propTypes.default.oneOf(['checkbox', 'radio'])
+};
+AddSelectFormControl.displayName = componentName;

package/lib/components/AddSelect/AddSelectList.js

@@ -11,13 +11,11 @@ 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@carbon/react");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _icons = require("@carbon/react/icons");
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,222 +23,50 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _UserProfileImage = require("../UserProfileImage");
+var _AddSelectRow = require("./AddSelectRow");
+
+var _useFocus3 = _interopRequireDefault(require("./hooks/useFocus"));
 
-//
-// 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 _excluded = ["filteredItems", "multi"];
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
 var componentName = 'AddSelectList';
 
 var AddSelectList = function AddSelectList(_ref) {
-  var _modifiers$options;
-
-  var appliedModifiers = _ref.appliedModifiers,
-      displayMetalPanel = _ref.displayMetalPanel,
-      filteredItems = _ref.filteredItems,
-      metaIconDescription = _ref.metaIconDescription,
-      modifiers = _ref.modifiers,
+  var filteredItems = _ref.filteredItems,
       multi = _ref.multi,
-      multiSelection = _ref.multiSelection,
-      navIconDescription = _ref.navIconDescription,
-      parentId = _ref.parentId,
-      setAppliedModifiers = _ref.setAppliedModifiers,
-      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-      setMultiSelection = _ref.setMultiSelection,
-      setParentSelected = _ref.setParentSelected,
-      setSingleSelection = _ref.setSingleSelection,
-      singleSelection = _ref.singleSelection;
-  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 handleSingleSelection = function handleSingleSelection(value) {
-    setSingleSelection(value);
-  };
-
-  var handleMultiSelection = function handleMultiSelection(event, _ref2) {
-    var checked = _ref2.checked,
-        id = _ref2.id;
-
-    if (checked) {
-      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
-      setMultiSelection(newValues);
-    } else {
-      var _newValues = multiSelection.filter(function (v) {
-        return v !== id;
-      });
-
-      setMultiSelection(_newValues);
-    }
-  };
-
-  var onNavigateItem = function onNavigateItem(_ref3) {
-    var id = _ref3.id,
-        title = _ref3.title;
-    setParentSelected(id, title, parentId);
-  };
-
-  var isSelected = function isSelected(id) {
-    if (multi) {
-      return multiSelection.includes(id);
-    }
-
-    return id === singleSelection;
-  };
-
-  var getAvatarProps = function getAvatarProps(_ref4) {
-    var src = _ref4.src,
-        alt = _ref4.alt,
-        icon = _ref4.icon,
-        backgroundColor = _ref4.backgroundColor,
-        theme = _ref4.theme;
-    return {
-      className: "".concat(blockClass, "-cell-avatar"),
-      size: 'lg',
-      theme: theme,
-      image: src,
-      imageDescription: alt,
-      icon: icon,
-      backgroundColor: backgroundColor
-    };
-  };
-
-  var getItemIcon = function getItemIcon(_ref5) {
-    var Icon = _ref5.icon;
-    return /*#__PURE__*/_react.default.createElement(Icon, null);
-  };
-
-  var modifierHandler = function modifierHandler(id, selectedItem) {
-    var modifiersClone = (0, _toConsumableArray2.default)(appliedModifiers);
-    var modifierIdx = modifiersClone.findIndex(function (item) {
-      return item.id === id;
-    });
-    modifiersClone[modifierIdx] = (0, _defineProperty2.default)({
-      id: id
-    }, modifiers.id, selectedItem);
-    setAppliedModifiers(modifiersClone);
-  };
-
-  var metaPanelHandler = function metaPanelHandler(item) {
-    if (item.meta) {
-      setDisplayMetaPanel(item);
-    }
-  };
-
-  var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
-  };
+      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];
 
   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))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-body")
-  }, filteredItems.map(function (item) {
-    var _cx2;
-
-    return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-body"),
+    role: "treegrid",
+    "aria-label": "add select tree label"
+  }, filteredItems.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_AddSelectRow.AddSelectRow, (0, _extends2.default)({
       key: item.id,
-      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2))
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-cell")
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-checkbox")
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      onChange: handleMultiSelection,
-      labelText: item.title,
-      id: item.id,
-      checked: isSelected(item.id),
-      className: "".concat(blockClass, "-checkbox-wrapper")
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-wrapper")
-    }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-cell-icon")
-    }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-text")
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "-cell-title")
-    }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
-      id: "add-select-modifier-".concat(item.id),
-      type: "inline",
-      items: modifiers.options,
-      label: modifiers.label,
-      disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown"),
-      initialSelectedItem: item[modifiers.id],
-      onChange: function onChange(_ref6) {
-        var selectedItem = _ref6.selectedItem;
-        return modifierHandler(item.id, selectedItem);
-      }
-    })) : /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
-      className: "".concat(blockClass, "-radio"),
-      name: "add-select-selections",
-      id: item.id,
-      value: item.value,
-      labelText: item.title,
-      onChange: function onChange() {
-        return handleSingleSelection(item.id);
-      },
-      checked: isSelected(item.id)
-    }), item.children && /*#__PURE__*/_react.default.createElement(_react2.Button, {
-      className: "".concat(blockClass, "-view-children"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, (0, _extends2.default)({
-          size: 16
-        }, props));
-      },
-      iconDescription: navIconDescription,
-      tooltipPosition: "left",
-      tooltipAlignment: "center",
-      hasIconOnly: true,
-      onClick: function onClick() {
-        return onNavigateItem(item);
-      },
-      kind: "ghost",
-      size: "sm"
-    }), item.meta && /*#__PURE__*/_react.default.createElement(_react2.Button, {
-      className: "".concat(blockClass, "-view-meta"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.View, (0, _extends2.default)({
-          size: 16
-        }, props));
-      },
-      iconDescription: metaIconDescription,
-      tooltipPosition: "left",
-      tooltipAlignment: "center",
-      hasIconOnly: true,
-      kind: "ghost",
-      size: "sm",
-      onClick: function onClick() {
-        return metaPanelHandler(item);
-      }
-    }))));
+      index: index,
+      focus: focus,
+      setSize: filteredItems.length,
+      item: item,
+      multi: multi,
+      setFocus: setFocus
+    }, rest));
   }))));
 };
 
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
-  appliedModifiers: _propTypes.default.array,
-  displayMetalPanel: _propTypes.default.object,
   filteredItems: _propTypes.default.array,
-  metaIconDescription: _propTypes.default.string,
-  modifiers: _propTypes.default.object,
-  multi: _propTypes.default.bool,
-  multiSelection: _propTypes.default.array,
-  navIconDescription: _propTypes.default.string,
-  parentId: _propTypes.default.string,
-  setAppliedModifiers: _propTypes.default.func,
-  setDisplayMetaPanel: _propTypes.default.func,
-  setMultiSelection: _propTypes.default.func,
-  setParentSelected: _propTypes.default.func,
-  setSingleSelection: _propTypes.default.func,
-  singleSelection: _propTypes.default.string
+  focus: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  multi: _propTypes.default.bool
 };
 AddSelectList.displayName = componentName;