@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/es/components/AddSelect/AddSelectFilter.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 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) { _defineProperty(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.
 //
+
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, Search, Tag } from '@carbon/react';
+import { Button, ButtonSet, Dropdown, Search, Tag, Layer } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Filter } from '@carbon/react/icons';
@@ -22,39 +20,36 @@ var blockClass = "".concat(pkg.prefix, "--add-select__global-filter");
 var componentName = 'AddSelectFilter';
 export 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 = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      filters = _useState2[0],
-      setFilters = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
+    _useState4 = _slicedToArray(_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), {}, _defineProperty({}, id, selectedItem)));
   };
+
   /**
    * this component needs to manage it's own internal state of filters before they're applied
    * setFilters manages the local filter state
@@ -62,34 +57,26 @@ export 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 = cx("".concat(blockClass, "-toggle"), _defineProperty({}, "".concat(blockClass, "-toggle--open"), open));
   var dirtyInput = Object.keys(filters).length > 0;
@@ -114,21 +101,21 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "lg",
+    size: "md",
     tooltipPosition: "left"
-  }), open && /*#__PURE__*/React.createElement("div", {
-    className: blockClass
+  }), open && /*#__PURE__*/React.createElement(Layer, {
+    className: blockClass,
+    level: 1
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-content")
   }, /*#__PURE__*/React.createElement("p", null, filtersLabel), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/React.createElement(Dropdown, {
-      id: filterOpts.id,
       key: filterOpts.id,
+      id: filterOpts.id,
       titleText: filterOpts.label,
       items: filterOpts.opts,
-      light: true,
       onChange: function onChange(value) {
         return onchangeHandler(value, filterOpts.id);
       },

package/es/components/AddSelect/AddSelectFormControl.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { RadioButton, RadioButtonChecked, Checkbox, CheckboxCheckedFilled } from '@carbon/react/icons';
+import PropTypes from 'prop-types';
+import { pkg } from '../../settings';
+import { UserProfileImage } from '../UserProfileImage';
+var componentName = 'AddSelectFormControl';
+var blockClass = "".concat(pkg.prefix, "--add-select__selections");
+export 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")
+  }, _defineProperty(_controlProps, "aria-label", item.title), _defineProperty(_controlProps, "size", 20), _controlProps);
+  var getCheckbox = function getCheckbox() {
+    if (selected) {
+      return /*#__PURE__*/React.createElement(CheckboxCheckedFilled, controlProps);
+    }
+    return /*#__PURE__*/React.createElement(Checkbox, controlProps);
+  };
+  var getRadio = function getRadio() {
+    if (selected) {
+      return /*#__PURE__*/React.createElement(RadioButtonChecked, controlProps);
+    }
+    return /*#__PURE__*/React.createElement(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.createElement(Icon, null);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-form-control")
+  }, getFormControl(), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-form-control-label-wrapper")
+  }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-cell-icon")
+  }, getItemIcon(item)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-form-control-label-text")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "-cell-title")
+  }, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "-cell-subtitle")
+  }, item.subtitle))));
+};
+AddSelectFormControl.propTypes = {
+  item: PropTypes.object,
+  onClick: PropTypes.func,
+  selected: PropTypes.bool,
+  type: PropTypes.oneOf(['checkbox', 'radio'])
+};
+AddSelectFormControl.displayName = componentName;

package/es/components/AddSelect/AddSelectList.js

@@ -1,243 +1,55 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
 //
+
 import React from 'react';
-import { Button, Checkbox, Dropdown, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody } from '@carbon/react';
-import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { UserProfileImage } from '../UserProfileImage';
+import { AddSelectRow } from './AddSelectRow';
+import useFocus from './hooks/useFocus';
 var blockClass = "".concat(pkg.prefix, "--add-select__selections");
 var componentName = 'AddSelectList';
 export var AddSelectList = function AddSelectList(_ref) {
-  var _modifiers$options;
-
-  var appliedModifiers = _ref.appliedModifiers,
-      displayMetalPanel = _ref.displayMetalPanel,
-      filteredItems = _ref.filteredItems,
-      metaIconDescription = _ref.metaIconDescription,
-      modifiers = _ref.modifiers,
-      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(_toConsumableArray(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.createElement(Icon, null);
-  };
-
-  var modifierHandler = function modifierHandler(id, selectedItem) {
-    var modifiersClone = _toConsumableArray(appliedModifiers);
-
-    var modifierIdx = modifiersClone.findIndex(function (item) {
-      return item.id === id;
-    });
-    modifiersClone[modifierIdx] = _defineProperty({
-      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);
-  };
-
+  var filteredItems = _ref.filteredItems,
+    multi = _ref.multi,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useFocus = useFocus(filteredItems.length),
+    _useFocus2 = _slicedToArray(_useFocus, 2),
+    focus = _useFocus2[0],
+    setFocus = _useFocus2[1];
   return /*#__PURE__*/React.createElement("div", {
+    id: "add-select-focus",
     className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
-  }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
-    selection: true,
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass)
-  }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
-    var _cx2;
-
-    return /*#__PURE__*/React.createElement(StructuredListRow, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-body"),
+    role: "treegrid",
+    "aria-label": "add select tree label"
+  }, filteredItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(AddSelectRow, _extends({
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
-      onClick: function onClick(evt) {
-        return metaPanelHandler(item, evt);
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell"),
-      onClick: function onClick() {
-        metaPanelHandler(item);
-      },
-      onKeyDown: function onKeyDown() {
-        metaPanelHandler(item);
-      },
-      role: "button",
-      tabIndex: "0"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox")
-    },
-    /*#__PURE__*/
-    // hacky way to prevent checkbox from triggering the meta onclick handler
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", {
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      onChange: handleMultiSelection,
-      labelText: item.title,
-      id: item.id,
-      checked: isSelected(item.id),
-      className: "".concat(blockClass, "-checkbox-wrapper")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-wrapper")
-    }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell-icon")
-    }, getItemIcon(item)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-text")
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "-cell-title")
-    }, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
-      id: "add-select-modifier-".concat(item.id),
-      type: "inline",
-      items: modifiers.options,
-      light: true,
-      label: modifiers.label,
-      disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
-      initialSelectedItem: item[modifiers.id],
-      onChange: function onChange(_ref6) {
-        var selectedItem = _ref6.selectedItem;
-        return modifierHandler(item.id, selectedItem);
-      }
-    })) : /*#__PURE__*/React.createElement(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.createElement(Button, {
-      className: "".concat(blockClass, "-view-children"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(ChevronRight, _extends({
-          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.createElement("div", {
-      className: "".concat(blockClass, "-hidden-hover")
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(blockClass, "-view-meta"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(View, _extends({
-          size: 16
-        }, props));
-      },
-      iconDescription: metaIconDescription,
-      tooltipPosition: "left",
-      tooltipAlignment: "center",
-      hasIconOnly: true,
-      kind: "ghost",
-      size: "sm"
-    })))));
+      index: index,
+      focus: focus,
+      setSize: filteredItems.length,
+      item: item,
+      multi: multi,
+      setFocus: setFocus
+    }, rest));
   }))));
 };
 AddSelectList.propTypes = {
-  appliedModifiers: PropTypes.array,
-  displayMetalPanel: PropTypes.object,
   filteredItems: PropTypes.array,
-  metaIconDescription: PropTypes.string,
-  modifiers: PropTypes.object,
-  multi: PropTypes.bool,
-  multiSelection: PropTypes.array,
-  navIconDescription: PropTypes.string,
-  parentId: PropTypes.string,
-  setAppliedModifiers: PropTypes.func,
-  setDisplayMetaPanel: PropTypes.func,
-  setMultiSelection: PropTypes.func,
-  setParentSelected: PropTypes.func,
-  setSingleSelection: PropTypes.func,
-  singleSelection: PropTypes.string
+  focus: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  multi: PropTypes.bool
 };
 AddSelectList.displayName = componentName;

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // 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, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/react/icons';
@@ -14,14 +15,12 @@ var blockClass = "".concat(pkg.prefix, "--add-select__meta-panel");
 var componentName = 'AddSelectMetaPanel';
 export 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.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {