@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/es/components/AddSelect/AddSelectColumn.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { usePrefix, Search, OverflowMenu, Checkbox, Tag } from '@carbon/react';
@@ -18,61 +18,53 @@ import { useItemSort } from './hooks/useItemSort.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import useParentSelect from './hooks/useParentSelect.js';
 
-var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath", "sortByLabel"];
-var blockClass = "".concat(pkg.prefix, "--add-select");
-var colClass = "".concat(blockClass, "__column");
-var componentName = 'AddSelectColumn';
-var _AddSelectColumn = function AddSelectColumn(_ref) {
-  var columnInputPlaceholder = _ref.columnInputPlaceholder,
-    filterByLabel = _ref.filterByLabel,
-    header = _ref.header,
-    items = _ref.items,
-    multiSelection = _ref.multiSelection,
-    parentId = _ref.parentId,
-    path = _ref.path,
-    setMultiSelection = _ref.setMultiSelection,
-    setPath = _ref.setPath,
-    sortByLabel = _ref.sortByLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = usePrefix();
-  var _useParentSelect = useParentSelect(),
-    parentSelected = _useParentSelect.parentSelected,
-    setParentSelected = _useParentSelect.setParentSelected;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useItemSort = useItemSort(),
-    sortDirection = _useItemSort.sortDirection,
-    setSortDirection = _useItemSort.setSortDirection,
-    sortAttribute = _useItemSort.sortAttribute,
-    setSortAttribute = _useItemSort.setSortAttribute;
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
-  var entries = items.entries,
-    filterBy = items.filterBy,
-    sortBy = items.sortBy;
-  var getSelectedItem = function getSelectedItem() {
-    var _entries$find;
-    var parentInPath = path.find(function (entry) {
-      return entry.parentId === parentId;
-    });
+const blockClass = `${pkg.prefix}--add-select`;
+const colClass = `${blockClass}__column`;
+const componentName = 'AddSelectColumn';
+let AddSelectColumn = _ref => {
+  let {
+    columnInputPlaceholder,
+    filterByLabel,
+    header,
+    items,
+    multiSelection,
+    parentId,
+    path,
+    setMultiSelection,
+    setPath,
+    sortByLabel,
+    ...props
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const {
+    parentSelected,
+    setParentSelected
+  } = useParentSelect();
+  const [searchTerm, setSearchTerm] = useState('');
+  const {
+    sortDirection,
+    setSortDirection,
+    sortAttribute,
+    setSortAttribute
+  } = useItemSort();
+  const [filters, setFilters] = useState([]);
+  const {
+    entries,
+    filterBy,
+    sortBy
+  } = items;
+  const getSelectedItem = () => {
+    const parentInPath = path.find(entry => entry.parentId === parentId);
     /**
      * this check helps ensure that when the state of the open columns is cleared by global search
      * that the columns are rebuilt from the data in the path array
      */
     if (parentInPath && !parentSelected) {
-      return entries.find(function (item) {
-        return item.id === parentInPath.id;
-      });
+      return entries.find(item => item.id === parentInPath.id);
     }
-    return (_entries$find = entries.find(function (item) {
-      return item.id === parentSelected;
-    })) !== null && _entries$find !== void 0 ? _entries$find : null;
+    return entries.find(item => item.id === parentSelected) ?? null;
   };
-  var selectedItem = getSelectedItem();
+  const selectedItem = getSelectedItem();
   /**
    * this check helps prevent children from already being open when you switch from parents
    * on the same level. for example- using the storybook example, if you click on folder 1,
@@ -80,83 +72,69 @@ 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);
-  });
+  const itemInPath = selectedItem && path.find(entry => entry.id === selectedItem.id);
+  const allSelected = entries.every(item => multiSelection.includes(item.id));
 
   // filtering
-  var filterByOpts = filterBy ? entries.map(function (item) {
-    return item[filterBy];
-  }) : [];
-  var selectAllHandler = function selectAllHandler(event, _ref2) {
-    var checked = _ref2.checked;
-    var itemIds = entries.map(function (item) {
-      return item.id;
-    });
+  const filterByOpts = filterBy ? entries.map(item => item[filterBy]) : [];
+  const selectAllHandler = (event, _ref2) => {
+    let {
+      checked
+    } = _ref2;
+    const itemIds = entries.map(item => item.id);
     if (checked) {
-      var newSelections = _toConsumableArray(new Set([].concat(_toConsumableArray(multiSelection), _toConsumableArray(itemIds))));
+      const newSelections = [...new Set([...multiSelection, ...itemIds])];
       setMultiSelection(newSelections);
     } else {
-      var newItems = multiSelection.filter(function (i) {
-        return !itemIds.includes(i);
-      });
+      const newItems = multiSelection.filter(i => !itemIds.includes(i));
       setMultiSelection(newItems);
     }
   };
-  var filterHandler = function filterHandler(checked, opt) {
+  const filterHandler = (checked, opt) => {
     if (checked) {
-      var newFilters = [].concat(_toConsumableArray(filters), [opt]);
+      const newFilters = [...filters, opt];
       setFilters(newFilters);
     } else {
-      var _newFilters = filters.filter(function (o) {
-        return o !== opt;
-      });
-      setFilters(_newFilters);
+      const newFilters = filters.filter(o => o !== opt);
+      setFilters(newFilters);
     }
   };
 
   // filter and sort array functions
-  var filterBySearch = function filterBySearch(item) {
-    return item.title.toLowerCase().includes(searchTerm);
-  };
-  var filterByAttribute = function filterByAttribute(item) {
+  const filterBySearch = item => item.title.toLowerCase().includes(searchTerm);
+  const filterByAttribute = item => {
     if (filters.length === 0) {
       return true;
     }
-    var filterBy = item.filterBy;
-    var filterByValue = item[filterBy];
-    return filters.some(function (filter) {
-      return filter === filterByValue;
-    });
+    const {
+      filterBy
+    } = item;
+    const filterByValue = item[filterBy];
+    return filters.some(filter => filter === filterByValue);
   };
-  var sortFn = sortItems(sortAttribute, sortDirection);
-  var colItems = entries.filter(filterBySearch) // first check if the item meets the search
+  const sortFn = sortItems(sortAttribute, sortDirection);
+  const colItems = entries.filter(filterBySearch) // first check if the item meets the search
   .filter(filterByAttribute) // then check if the item is included in the filter
   .sort(sortFn); // then sort the items by whatever criteria
 
-  var parentSelectionHandler = function parentSelectionHandler(id, title) {
+  const parentSelectionHandler = (id, title) => {
     setParentSelected(id);
     setPath(id, title, parentId);
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: colClass
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(colClass, "-search-bar")
+    className: `${colClass}-search-bar`
   }, /*#__PURE__*/React__default.createElement(Search, {
     value: searchTerm,
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    },
+    onChange: e => setSearchTerm(e.target.value),
     placeholder: columnInputPlaceholder,
-    className: "".concat(colClass, "-input"),
+    className: `${colClass}-input`,
     id: uuidv4(),
     labelText: columnInputPlaceholder,
     size: "md"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(colClass, "-sort-filter")
+    className: `${colClass}-sort-filter`
   }, /*#__PURE__*/React__default.createElement(AddSelectSort, {
     items: entries,
     setSortAttribute: setSortAttribute,
@@ -166,41 +144,37 @@ var _AddSelectColumn = function AddSelectColumn(_ref) {
     sortBy: sortBy,
     sortByLabel: sortByLabel
   }), filterByOpts.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Filter, _extends({
-        size: 32
-      }, props));
-    },
-    className: "".concat(colClass, "-overflow"),
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Filter, _extends({
+      size: 32
+    }, props)),
+    className: `${colClass}-overflow`,
     flipped: true,
     "aria-label": filterByLabel,
     iconDescription: filterByLabel
-  }, filterByOpts.map(function (opt) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: opt,
-      className: "".concat(carbonPrefix, "--overflow-menu-options__option")
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(carbonPrefix, "--overflow-menu-options__btn")
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      id: opt,
-      labelText: opt,
-      onChange: function onChange(event, _ref3) {
-        var checked = _ref3.checked;
-        return filterHandler(checked, opt);
-      },
-      checked: filters.find(function (o) {
-        return o === opt;
-      }) ? true : false
-    })));
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__tags")
+  }, filterByOpts.map(opt => /*#__PURE__*/React__default.createElement("div", {
+    key: opt,
+    className: `${carbonPrefix}--overflow-menu-options__option`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${carbonPrefix}--overflow-menu-options__btn`
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    id: opt,
+    labelText: opt,
+    onChange: (event, _ref3) => {
+      let {
+        checked
+      } = _ref3;
+      return filterHandler(checked, opt);
+    },
+    checked: filters.find(o => o === opt) ? true : false
+  }))))))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__tags`
   }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    id: "".concat(uuidv4(), "-select-all"),
-    className: "".concat(colClass, "__select-all"),
+    id: `${uuidv4()}-select-all`,
+    className: `${colClass}__select-all`,
     checked: allSelected,
     onChange: selectAllHandler,
     labelText: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__tag-label")
+      className: `${blockClass}__tag-label`
     }, header), /*#__PURE__*/React__default.createElement(Tag, {
       type: "gray",
       size: "sm"
@@ -211,7 +185,7 @@ var _AddSelectColumn = function AddSelectColumn(_ref) {
     multiSelection: multiSelection,
     setParentSelected: parentSelectionHandler,
     parentSelected: parentSelected
-  }))), selectedItem && itemInPath && /*#__PURE__*/React__default.createElement(_AddSelectColumn, _extends({
+  }))), selectedItem && itemInPath && /*#__PURE__*/React__default.createElement(AddSelectColumn, _extends({
     columnInputPlaceholder: columnInputPlaceholder,
     header: selectedItem.title,
     items: selectedItem.children,
@@ -224,7 +198,7 @@ var _AddSelectColumn = function AddSelectColumn(_ref) {
     filterByLabel: filterByLabel
   }, props)));
 };
-_AddSelectColumn.propTypes = {
+AddSelectColumn.propTypes = {
   columnInputPlaceholder: PropTypes.string,
   filterByLabel: PropTypes.string,
   header: PropTypes.string,
@@ -236,6 +210,6 @@ _AddSelectColumn.propTypes = {
   setPath: PropTypes.func,
   sortByLabel: PropTypes.string
 };
-_AddSelectColumn.displayName = componentName;
+AddSelectColumn.displayName = componentName;
 
-export { _AddSelectColumn as AddSelectColumn };
+export { AddSelectColumn };

package/es/components/AddSelect/AddSelectFilter.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
 import { Search, Button, Layer, Dropdown, ButtonSet, DismissibleTag } from '@carbon/react';
 import cx from 'classnames';
@@ -13,38 +13,39 @@ import PropTypes from '../../_virtual/index.js';
 import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(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;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
-  var searchHandler = function searchHandler(e) {
+const blockClass = `${pkg.prefix}--add-select__global-filter`;
+const componentName = 'AddSelectFilter';
+let AddSelectFilter = _ref => {
+  let {
+    appliedFilters,
+    clearFiltersText,
+    filterOpts,
+    filtersLabel,
+    handleFilter,
+    handleSearch,
+    hasFiltersApplied,
+    iconDescription,
+    inputLabel,
+    inputPlaceholder,
+    multi,
+    placeholder,
+    primaryButtonText,
+    searchTerm,
+    secondaryButtonText
+  } = _ref;
+  const [filters, setFilters] = useState({});
+  const [open, setOpen] = useState(false);
+  const searchHandler = e => {
     handleSearch(e.target.value);
   };
-  var onchangeHandler = function onchangeHandler(_ref2, id) {
-    var selectedItem = _ref2.selectedItem;
-    setFilters(_objectSpread2(_objectSpread2({}, filters), {}, _defineProperty({}, id, selectedItem)));
+  const onchangeHandler = (_ref2, id) => {
+    let {
+      selectedItem
+    } = _ref2;
+    setFilters({
+      ...filters,
+      [id]: selectedItem
+    });
   };
 
   /**
@@ -54,31 +55,35 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
    * resetFilters resets the local state
    * clearFilters resets both
    */
-  var applyFilters = function applyFilters() {
+  const applyFilters = () => {
     setOpen(false);
     handleFilter(filters);
   };
-  var resetFilters = function resetFilters() {
+  const resetFilters = () => {
     setFilters({});
   };
-  var clearFilters = function clearFilters() {
+  const clearFilters = () => {
     resetFilters();
     handleFilter({});
   };
-  var removeTag = function removeTag(key) {
-    var newFilters = _objectSpread2({}, filters);
+  const removeTag = key => {
+    const newFilters = {
+      ...filters
+    };
     delete newFilters[key];
     setFilters(newFilters);
     handleFilter(newFilters);
   };
-  var getSelectedItem = function getSelectedItem(id) {
+  const 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;
+  const showFilter = multi && filterOpts?.length > 0;
+  const filterBtnClassnames = cx(`${blockClass}-toggle`, {
+    [`${blockClass}-toggle--open`]: open
+  });
+  const dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-search")
+    className: `${blockClass}-search`
   }, /*#__PURE__*/React__default.createElement(Search, {
     id: "add-select-global-search-filter",
     labelText: inputLabel,
@@ -86,16 +91,12 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     value: searchTerm,
     onChange: searchHandler
   }), showFilter && /*#__PURE__*/React__default.createElement(Button, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Filter, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Filter, _extends({
+      size: 16
+    }, props)),
     hasIconOnly: true,
     kind: "ghost",
-    onClick: function onClick() {
-      return setOpen(!open);
-    },
+    onClick: () => setOpen(!open),
     iconDescription: iconDescription,
     className: filterBtnClassnames,
     size: "md",
@@ -104,46 +105,38 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     className: blockClass,
     level: 1
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-content")
+    className: `${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(Dropdown, {
-      key: filterOpts.id,
-      id: filterOpts.id,
-      titleText: filterOpts.label,
-      items: filterOpts.opts,
-      onChange: function onChange(value) {
-        return onchangeHandler(value, filterOpts.id);
-      },
-      selectedItem: getSelectedItem(filterOpts.id),
-      label: placeholder
-    });
-  }))), /*#__PURE__*/React__default.createElement(ButtonSet, {
-    className: "".concat(blockClass, "-button-set")
+    className: `${blockClass}-opts`
+  }, filterOpts.map(filterOpts => /*#__PURE__*/React__default.createElement(Dropdown, {
+    key: filterOpts.id,
+    id: filterOpts.id,
+    titleText: filterOpts.label,
+    items: filterOpts.opts,
+    onChange: value => onchangeHandler(value, filterOpts.id),
+    selectedItem: getSelectedItem(filterOpts.id),
+    label: placeholder
+  })))), /*#__PURE__*/React__default.createElement(ButtonSet, {
+    className: `${blockClass}-button-set`
   }, /*#__PURE__*/React__default.createElement(Button, {
     kind: "secondary",
     onClick: resetFilters,
-    className: "".concat(blockClass, "-button"),
+    className: `${blockClass}-button`,
     disabled: !dirtyInput
   }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
     kind: "primary",
     onClick: applyFilters,
-    className: "".concat(blockClass, "-button"),
+    className: `${blockClass}-button`,
     disabled: !dirtyInput && !hasFiltersApplied
   }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-applied")
-  }, Object.keys(appliedFilters).map(function (filterType) {
-    return /*#__PURE__*/React__default.createElement(DismissibleTag, {
-      key: filterType,
-      text: "".concat(filterType, ": ").concat(appliedFilters[filterType]),
-      type: "gray",
-      size: "sm",
-      onClose: function onClose() {
-        return removeTag(filterType);
-      }
-    });
-  }), /*#__PURE__*/React__default.createElement(Button, {
+    className: `${blockClass}-applied`
+  }, Object.keys(appliedFilters).map(filterType => /*#__PURE__*/React__default.createElement(DismissibleTag, {
+    key: filterType,
+    text: `${filterType}: ${appliedFilters[filterType]}`,
+    type: "gray",
+    size: "sm",
+    onClose: () => removeTag(filterType)
+  })), /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters

package/es/components/AddSelect/AddSelectFormControl.js

@@ -5,38 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { CheckboxCheckedFilled, Checkbox, RadioButtonChecked, RadioButton } from '@carbon/react/icons';
 import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
 import { UserProfileImage } from '../UserProfileImage/UserProfileImage.js';
 
-var componentName = 'AddSelectFormControl';
-var blockClass = "".concat(pkg.prefix, "--add-select__selections");
-var AddSelectFormControl = function AddSelectFormControl(_ref) {
-  var item = _ref.item,
-    onClick = _ref.onClick,
-    selected = _ref.selected,
-    type = _ref.type;
-  var controlProps = _defineProperty({
-    onClick: onClick,
-    className: "".concat(blockClass, "-form-control-wrapper ").concat(blockClass, "-form-control-wrapper--").concat(type),
-    size: 20
-  }, "aria-labelledby", "control-label-".concat(item.id));
-  var getCheckbox = function getCheckbox() {
+const componentName = 'AddSelectFormControl';
+const blockClass = `${pkg.prefix}--add-select__selections`;
+let AddSelectFormControl = _ref => {
+  let {
+    item,
+    onClick,
+    selected,
+    type
+  } = _ref;
+  const controlProps = {
+    onClick,
+    className: `${blockClass}-form-control-wrapper ${blockClass}-form-control-wrapper--${type}`,
+    size: 20,
+    [`aria-labelledby`]: `control-label-${item.id}`
+  };
+  const getCheckbox = () => {
     if (selected) {
       return /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, controlProps);
     }
     return /*#__PURE__*/React__default.createElement(Checkbox, controlProps);
   };
-  var getRadio = function getRadio() {
+  const getRadio = () => {
     if (selected) {
       return /*#__PURE__*/React__default.createElement(RadioButtonChecked, controlProps);
     }
     return /*#__PURE__*/React__default.createElement(RadioButton, controlProps);
   };
-  var getFormControl = function getFormControl() {
+  const getFormControl = () => {
     if (!item) {
       return;
     }
@@ -46,39 +48,43 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
       return getRadio();
     }
   };
-  var getAvatarProps = function getAvatarProps(_ref2) {
-    var src = _ref2.src,
-      alt = _ref2.alt,
-      icon = _ref2.icon,
-      backgroundColor = _ref2.backgroundColor,
-      theme = _ref2.theme;
+  const getAvatarProps = _ref2 => {
+    let {
+      src,
+      alt,
+      icon,
+      backgroundColor,
+      theme
+    } = _ref2;
     return {
-      className: "".concat(blockClass, "-cell-avatar"),
+      className: `${blockClass}-cell-avatar`,
       size: 'lg',
-      theme: theme,
+      theme,
       image: src,
       imageDescription: alt,
-      icon: icon,
-      backgroundColor: backgroundColor
+      icon,
+      backgroundColor
     };
   };
-  var getItemIcon = function getItemIcon(_ref3) {
-    var Icon = _ref3.icon;
+  const getItemIcon = _ref3 => {
+    let {
+      icon: Icon
+    } = _ref3;
     return /*#__PURE__*/React__default.createElement(Icon, null);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-form-control")
+    className: `${blockClass}-form-control`
   }, getFormControl(), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-form-control-label-wrapper")
+    className: `${blockClass}-form-control-label-wrapper`
   }, item.avatar && /*#__PURE__*/React__default.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-cell-icon")
+    className: `${blockClass}-cell-icon`
   }, getItemIcon(item)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-form-control-label-text")
+    className: `${blockClass}-form-control-label-text`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "-cell-title"),
-    id: "control-label-".concat(item.id)
+    className: `${blockClass}-cell-title`,
+    id: `control-label-${item.id}`
   }, item.title), item.subtitle && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "-cell-subtitle")
+    className: `${blockClass}-cell-subtitle`
   }, item.subtitle))));
 };
 AddSelectFormControl.propTypes = {