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

package/lib/components/AddSelect/AddSelectColumn.js

@@ -1,94 +1,71 @@
 "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"];
-
+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,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    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;
-
+    parentSelected = _useParentSelect.parentSelected,
+    setParentSelected = _useParentSelect.setParentSelected;
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
-
+    _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;
-
+    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];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
   var entries = items.entries,
-      filterBy = items.filterBy,
-      sortBy = items.sortBy;
-
+    filterBy = items.filterBy,
+    sortBy = items.sortBy;
   var getSelectedItem = function getSelectedItem() {
     var _entries$find;
-
     var parentInPath = path.find(function (entry) {
       return entry.parentId === parentId;
     });
@@ -96,18 +73,15 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
      * 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
@@ -116,24 +90,22 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
    * 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
+  });
 
+  // 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);
@@ -144,7 +116,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       setMultiSelection(newItems);
     }
   };
-
   var filterHandler = function filterHandler(checked, opt) {
     if (checked) {
       var newFilters = [].concat((0, _toConsumableArray2.default)(filters), [opt]);
@@ -153,28 +124,24 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       var _newFilters = filters.filter(function (o) {
         return o !== opt;
       });
-
       setFilters(_newFilters);
     }
-  }; // filter and sort array functions
-
+  };
 
+  // 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
@@ -184,7 +151,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     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", {
@@ -207,7 +173,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: sortBy
+    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)({
@@ -216,7 +183,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     },
     className: "".concat(colClass, "-overflow"),
     flipped: true,
-    ariaLabel: filterByLabel
+    "aria-label": filterByLabel,
+    iconDescription: filterByLabel
   }, filterByOpts.map(function (opt) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: opt,
@@ -251,7 +219,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     filteredItems: colItems,
     setMultiSelection: setMultiSelection,
     multiSelection: multiSelection,
-    setParentSelected: parentSelectionHandler
+    setParentSelected: parentSelectionHandler,
+    parentSelected: parentSelected
   }))), selectedItem && itemInPath && /*#__PURE__*/_react.default.createElement(AddSelectColumn, (0, _extends2.default)({
     columnInputPlaceholder: columnInputPlaceholder,
     header: selectedItem.title,
@@ -260,10 +229,11 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setMultiSelection: setMultiSelection,
     parentId: selectedItem.id,
     setPath: setPath,
-    path: path
+    path: path,
+    sortByLabel: sortByLabel,
+    filterByLabel: filterByLabel
   }, props)));
 };
-
 exports.AddSelectColumn = AddSelectColumn;
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: _propTypes.default.string,
@@ -274,6 +244,7 @@ AddSelectColumn.propTypes = {
   parentId: _propTypes.default.string,
   path: _propTypes.default.array,
   setMultiSelection: _propTypes.default.func,
-  setPath: _propTypes.default.func
+  setPath: _propTypes.default.func,
+  sortByLabel: _propTypes.default.string
 };
 AddSelectColumn.displayName = componentName;

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;
@@ -132,21 +109,21 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "lg",
+    size: "md",
     tooltipPosition: "left"
-  }), open && /*#__PURE__*/_react.default.createElement("div", {
-    className: blockClass
+  }), open && /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+    className: blockClass,
+    level: 1
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-content")
   }, /*#__PURE__*/_react.default.createElement("p", null, filtersLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/_react.default.createElement(_react2.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);
       },
@@ -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

@@ -0,0 +1,90 @@
+"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;