@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/AddSelect/AddSelectList.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -13,37 +13,35 @@ import { pkg } from '../../settings.js';
 import { AddSelectRow } from './AddSelectRow.js';
 import useFocus from './hooks/useFocus.js';
 
-var _excluded = ["filteredItems", "multi"];
-var blockClass = "".concat(pkg.prefix, "--add-select__selections");
-var componentName = 'AddSelectList';
-var AddSelectList = function AddSelectList(_ref) {
-  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];
+const blockClass = `${pkg.prefix}--add-select__selections`;
+const componentName = 'AddSelectList';
+let AddSelectList = _ref => {
+  let {
+    filteredItems,
+    multi,
+    ...rest
+  } = _ref;
+  const [focus, setFocus] = useFocus(filteredItems.length);
   return /*#__PURE__*/React__default.createElement("div", {
     id: "add-select-focus",
-    className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
+    className: cx(`${blockClass}-wrapper`, {
+      [`${blockClass}-wrapper-multi`]: multi
+    })
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass)
+    className: `${blockClass}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-body"),
+    className: `${blockClass}-body`,
     role: "treegrid",
     "aria-label": "add select tree label"
-  }, filteredItems.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement(AddSelectRow, _extends({
-      key: item.id,
-      index: index,
-      focus: focus,
-      setSize: filteredItems.length,
-      item: item,
-      multi: multi,
-      setFocus: setFocus
-    }, rest));
-  }))));
+  }, filteredItems.map((item, index) => /*#__PURE__*/React__default.createElement(AddSelectRow, _extends({
+    key: item.id,
+    index: index,
+    focus: focus,
+    setSize: filteredItems.length,
+    item: item,
+    multi: multi,
+    setFocus: setFocus
+  }, rest))))));
 };
 AddSelectList.propTypes = {
   filteredItems: PropTypes.array,

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -12,29 +12,29 @@ import { Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--add-select__meta-panel");
-var componentName = 'AddSelectMetaPanel';
-var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
-  var closeIconDescription = _ref.closeIconDescription,
-    meta = _ref.meta,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-    title = _ref.title;
-  var onCloseHandler = function onCloseHandler() {
+const blockClass = `${pkg.prefix}--add-select__meta-panel`;
+const componentName = 'AddSelectMetaPanel';
+let AddSelectMetaPanel = _ref => {
+  let {
+    closeIconDescription,
+    meta,
+    setDisplayMetaPanel,
+    title
+  } = _ref;
+  const onCloseHandler = () => {
     setDisplayMetaPanel({});
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-header")
+    className: `${blockClass}-header`
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "-title")
+    className: `${blockClass}-title`
   }, title), /*#__PURE__*/React__default.createElement(Button, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Close, _extends({
-        size: 16
-      }, props));
-    },
-    className: "".concat(blockClass, "-close"),
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Close, _extends({
+      size: 16
+    }, props)),
+    className: `${blockClass}-close`,
     iconDescription: closeIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",
@@ -42,16 +42,14 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     onClick: onCloseHandler,
     kind: "ghost",
     size: "sm"
-  })), /*#__PURE__*/isValidElement(meta) ? meta : meta.map(function (entry) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: entry === null || entry === void 0 ? void 0 : entry.id,
-      className: "".concat(blockClass, "-entry")
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "".concat(blockClass, "-entry-title")
-    }, entry === null || entry === void 0 ? void 0 : entry.title), /*#__PURE__*/React__default.createElement("p", {
-      className: "".concat(blockClass, "-entry-body")
-    }, entry === null || entry === void 0 ? void 0 : entry.value));
-  }));
+  })), /*#__PURE__*/isValidElement(meta) ? meta : meta.map(entry => /*#__PURE__*/React__default.createElement("div", {
+    key: entry?.id,
+    className: `${blockClass}-entry`
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}-entry-title`
+  }, entry?.title), /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}-entry-body`
+  }, entry?.value))));
 };
 AddSelectMetaPanel.propTypes = {
   closeIconDescription: PropTypes.string.isRequired,

package/es/components/AddSelect/AddSelectRow.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useEffect, useCallback } from 'react';
 import { Layer, MultiSelect, Dropdown, Button } from '@carbon/react';
 import { ChevronRight, View } from '@carbon/react/icons';
@@ -14,43 +14,44 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { AddSelectFormControl } from './AddSelectFormControl.js';
 
-var blockClass = "".concat(pkg.prefix, "--add-select__selections");
-var componentName = 'AddSelectList';
-var AddSelectRow = function AddSelectRow(_ref) {
-  var _modifiers$options;
-  var appliedModifiers = _ref.appliedModifiers,
-    displayMetalPanel = _ref.displayMetalPanel,
-    index = _ref.index,
-    focus = _ref.focus,
-    item = _ref.item,
-    metaIconDescription = _ref.metaIconDescription,
-    modifiers = _ref.modifiers,
-    multi = _ref.multi,
-    multiSelection = _ref.multiSelection,
-    navIconDescription = _ref.navIconDescription,
-    parentId = _ref.parentId,
-    parentSelected = _ref.parentSelected,
-    setAppliedModifiers = _ref.setAppliedModifiers,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-    setFocus = _ref.setFocus,
-    setMultiSelection = _ref.setMultiSelection,
-    setParentSelected = _ref.setParentSelected,
-    setSingleSelection = _ref.setSingleSelection,
-    setSize = _ref.setSize,
-    singleSelection = _ref.singleSelection;
-  var ref = useRef(null);
-  useEffect(function () {
+const blockClass = `${pkg.prefix}--add-select__selections`;
+const componentName = 'AddSelectList';
+let AddSelectRow = _ref => {
+  let {
+    appliedModifiers,
+    displayMetalPanel,
+    index,
+    focus,
+    item,
+    metaIconDescription,
+    modifiers,
+    multi,
+    multiSelection,
+    navIconDescription,
+    parentId,
+    parentSelected,
+    setAppliedModifiers,
+    setDisplayMetaPanel,
+    setFocus,
+    setMultiSelection,
+    setParentSelected,
+    setSingleSelection,
+    setSize,
+    singleSelection
+  } = _ref;
+  const ref = useRef(null);
+  useEffect(() => {
     if (focus === index) {
       ref.current.focus();
     }
   }, [focus, index]);
-  var isSelected = function isSelected() {
+  const isSelected = () => {
     if (multi) {
       return multiSelection.includes(item.id);
     }
     return item.id === singleSelection;
   };
-  var getTabIndex = function getTabIndex() {
+  const getTabIndex = () => {
     // on initial load make the first item tabbable
     if (index === 0 && focus === '') {
       return 0;
@@ -64,14 +65,16 @@ var AddSelectRow = function AddSelectRow(_ref) {
     // make unfocused items un-tabbable
     return -1;
   };
-  var focusHandler = useCallback(function (reset) {
+  const focusHandler = useCallback(reset => {
     setFocus(reset ? '' : index);
   }, [setFocus, index]);
-  var handleSingleSelection = function handleSingleSelection() {
+  const handleSingleSelection = () => {
     setSingleSelection(item.id);
   };
-  var onSelectKeyDown = function onSelectKeyDown(_ref2) {
-    var key = _ref2.key;
+  const onSelectKeyDown = _ref2 => {
+    let {
+      key
+    } = _ref2;
     if (key === 'Enter' || key === ' ') {
       if (multi) {
         handleMultiSelection();
@@ -82,54 +85,54 @@ var AddSelectRow = function AddSelectRow(_ref) {
       onNavigateItem();
     }
   };
-  var handleMultiSelection = function handleMultiSelection() {
-    var checked = isSelected();
+  const handleMultiSelection = () => {
+    const checked = isSelected();
     if (!checked) {
-      var newValues = [].concat(_toConsumableArray(multiSelection), [item.id]);
+      const newValues = [...multiSelection, item.id];
       setMultiSelection(newValues);
     } else {
-      var _newValues = multiSelection.filter(function (v) {
-        return v !== item.id;
-      });
-      setMultiSelection(_newValues);
+      const newValues = multiSelection.filter(v => v !== item.id);
+      setMultiSelection(newValues);
     }
   };
-  var onNavigateItem = function onNavigateItem() {
+  const onNavigateItem = () => {
     focusHandler(true);
     setParentSelected(item.id, item.title, parentId);
   };
-  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);
+  const modifierHandler = (id, selectedItem) => {
+    const modifiersClone = [...appliedModifiers];
+    const modifierIdx = modifiersClone.findIndex(item => item.id === id);
+    modifiersClone[modifierIdx] = {
+      id,
+      [modifiers.id]: selectedItem
+    };
     setAppliedModifiers(modifiersClone);
   };
-  var metaPanelHandler = function metaPanelHandler() {
+  const metaPanelHandler = () => {
     if (item.meta) {
       setDisplayMetaPanel(item);
     }
   };
-  var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
-  };
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
-  var tabIndex = getTabIndex();
-  var selected = isSelected();
-  var expanded = parentSelected === item.id;
-  var sharedSelectProps = {
-    id: "add-select-modifier-".concat(item.id),
-    titleText: modifiers === null || modifiers === void 0 ? void 0 : modifiers.title,
+  const isInMetaPanel = id => id === displayMetalPanel?.id;
+  const hasModifiers = modifiers?.options?.length > 0;
+  const tabIndex = getTabIndex();
+  const selected = isSelected();
+  const expanded = parentSelected === item.id;
+  const sharedSelectProps = {
+    id: `add-select-modifier-${item.id}`,
+    titleText: modifiers?.title,
     type: 'inline',
     disabled: !isSelected(),
-    label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
-    items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options
+    label: modifiers?.label,
+    items: modifiers?.options
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded), "".concat(blockClass, "-row--focused"), focus === index)),
+    className: cx(`${blockClass}-row`, {
+      [`${blockClass}-row--selected`]: isSelected(),
+      [`${blockClass}-row-meta--selected`]: isInMetaPanel(item.id),
+      [`${blockClass}-row--active`]: expanded,
+      [`${blockClass}-row--focused`]: focus === index
+    }),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,
@@ -140,26 +143,30 @@ var AddSelectRow = function AddSelectRow(_ref) {
     "aria-setsize": setSize,
     "aria-expanded": expanded
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-cell"),
+    className: `${blockClass}-cell`,
     role: "gridcell"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-cell-wrapper")
+    className: `${blockClass}-cell-wrapper`
   }, multi ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AddSelectFormControl, {
     type: "checkbox",
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/React__default.createElement(Layer, null, modifiers !== null && modifiers !== void 0 && modifiers.multiSelect ? /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, sharedSelectProps, {
+  }), hasModifiers && /*#__PURE__*/React__default.createElement(Layer, null, modifiers?.multiSelect ? /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, sharedSelectProps, {
     initialSelectedItems: item[modifiers.id],
-    onChange: function onChange(_ref3) {
-      var selectedItems = _ref3.selectedItems;
+    onChange: _ref3 => {
+      let {
+        selectedItems
+      } = _ref3;
       return modifierHandler(item.id, selectedItems);
     }
   })) : /*#__PURE__*/React__default.createElement(Dropdown, _extends({}, sharedSelectProps, {
-    className: "".concat(blockClass, "-dropdown"),
+    className: `${blockClass}-dropdown`,
     initialSelectedItem: item[modifiers.id],
-    onChange: function onChange(_ref4) {
-      var selectedItem = _ref4.selectedItem;
+    onChange: _ref4 => {
+      let {
+        selectedItem
+      } = _ref4;
       return modifierHandler(item.id, selectedItem);
     }
   })))) : /*#__PURE__*/React__default.createElement(AddSelectFormControl, {
@@ -168,12 +175,10 @@ var AddSelectRow = function AddSelectRow(_ref) {
     selected: selected,
     onClick: handleSingleSelection
   }), item.children && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "-view-children"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(ChevronRight, _extends({
-        size: 16
-      }, props));
-    },
+    className: `${blockClass}-view-children`,
+    renderIcon: props => /*#__PURE__*/React__default.createElement(ChevronRight, _extends({
+      size: 16
+    }, props)),
     iconDescription: navIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",
@@ -184,12 +189,10 @@ var AddSelectRow = function AddSelectRow(_ref) {
     tabIndex: -1,
     "aria-hidden": true
   }), item.meta && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "-view-meta"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(View, _extends({
-        size: 16
-      }, props));
-    },
+    className: `${blockClass}-view-meta`,
+    renderIcon: props => /*#__PURE__*/React__default.createElement(View, _extends({
+      size: 16
+    }, props)),
     iconDescription: metaIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",

package/es/components/AddSelect/AddSelectSidebar.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Tag, Accordion, AccordionItem } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
@@ -13,64 +12,66 @@ import { NoDataEmptyState } from '../EmptyStates/NoDataEmptyState/NoDataEmptySta
 import { pkg } from '../../settings.js';
 import { AddSelectMetaPanel } from './AddSelectMetaPanel.js';
 
-var _excluded = ["meta", "icon", "avatar"];
-var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
-var componentName = 'AddSelectSidebar';
-var AddSelectSidebar = function AddSelectSidebar(_ref) {
-  var _modifiers$options;
-  var appliedModifiers = _ref.appliedModifiers,
-    closeIconDescription = _ref.closeIconDescription,
-    displayMetalPanel = _ref.displayMetalPanel,
-    illustrationTheme = _ref.illustrationTheme,
-    influencerTitle = _ref.influencerTitle,
-    items = _ref.items,
-    metaPanelTitle = _ref.metaPanelTitle,
-    modifiers = _ref.modifiers,
-    multiSelection = _ref.multiSelection,
-    noSelectionDescription = _ref.noSelectionDescription,
-    noSelectionTitle = _ref.noSelectionTitle,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel;
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
-  var hasSelections = multiSelection.length > 0;
-  var getNewItem = function getNewItem(item) {
+// 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.
+//
+
+const blockClass = `${pkg.prefix}--add-select__sidebar`;
+const componentName = 'AddSelectSidebar';
+let AddSelectSidebar = _ref => {
+  let {
+    appliedModifiers,
+    closeIconDescription,
+    displayMetalPanel,
+    illustrationTheme,
+    influencerTitle,
+    items,
+    metaPanelTitle,
+    modifiers,
+    multiSelection,
+    noSelectionDescription,
+    noSelectionTitle,
+    setDisplayMetaPanel
+  } = _ref;
+  const hasModifiers = modifiers?.options?.length > 0;
+  const hasSelections = multiSelection.length > 0;
+  const getNewItem = item => {
     // certain properties should not be displayed in the sidebar
     // eslint-disable-next-line no-unused-vars
-    item.meta;
-      item.icon;
-      item.avatar;
-      var newItem = _objectWithoutProperties(item, _excluded);
+    const {
+      meta,
+      icon,
+      avatar,
+      ...newItem
+    } = item;
     return newItem;
   };
-  var sidebarItems = multiSelection.map(function (selectionId) {
+  const sidebarItems = multiSelection.map(selectionId => {
     if (Array.isArray(items)) {
-      var selectedItem = items.find(function (item) {
-        return item.id === selectionId;
-      });
+      const selectedItem = items.find(item => item.id === selectionId);
       return getNewItem(selectedItem);
     }
     return getNewItem(items[selectionId]);
   });
-  var getTitle = function getTitle(item) {
-    var modifierEl;
+  const getTitle = item => {
+    let modifierEl;
     if (hasModifiers) {
-      var _modifiers = appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.find(function (modifier) {
-        return (modifier === null || modifier === void 0 ? void 0 : modifier.id) === (item === null || item === void 0 ? void 0 : item.id);
-      })[modifiers === null || modifiers === void 0 ? void 0 : modifiers.id];
+      const _modifiers = appliedModifiers?.find(modifier => modifier?.id === item?.id)[modifiers?.id];
       modifierEl = _modifiers;
       if (Array.isArray(_modifiers)) {
-        modifierEl = _modifiers === null || _modifiers === void 0 ? void 0 : _modifiers.map(function (_modifier, index) {
-          return "".concat(_modifier).concat(index + 1 !== _modifiers.length ? ', ' : '');
-        });
+        modifierEl = _modifiers?.map((_modifier, index) => `${_modifier}${index + 1 !== _modifiers.length ? ', ' : ''}`);
       }
     }
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "-accordion-title")
+      className: `${blockClass}-accordion-title`
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "-selected-item")
+      className: `${blockClass}-selected-item`
     }, /*#__PURE__*/React__default.createElement("p", {
-      className: "".concat(blockClass, "-selected-item-title")
+      className: `${blockClass}-selected-item-title`
     }, item.title), /*#__PURE__*/React__default.createElement("p", {
-      className: "".concat(blockClass, "-selected-item-subtitle")
+      className: `${blockClass}-selected-item-subtitle`
     }, item.subtitle)), hasModifiers && /*#__PURE__*/React__default.createElement("div", null, modifierEl));
   };
   if (Object.keys(displayMetalPanel).length !== 0) {
@@ -84,30 +85,26 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-header")
+    className: `${blockClass}-header`
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "-title")
+    className: `${blockClass}-title`
   }, influencerTitle), /*#__PURE__*/React__default.createElement(Tag, {
     type: "gray",
     size: "sm"
   }, multiSelection.length)), hasSelections ? /*#__PURE__*/React__default.createElement(Accordion, {
     align: "start"
-  }, sidebarItems.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(AccordionItem, {
-      title: getTitle(item),
-      key: item.id
-    }, Object.keys(item).map(function (key) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(blockClass, "-item"),
-        key: key
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "".concat(blockClass, "-item-header")
-      }, key), /*#__PURE__*/React__default.createElement("p", {
-        className: "".concat(blockClass, "-item-body")
-      }, item[key]));
-    }));
-  })) : /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "-body")
+  }, sidebarItems.map(item => /*#__PURE__*/React__default.createElement(AccordionItem, {
+    title: getTitle(item),
+    key: item.id
+  }, Object.keys(item).map(key => /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}-item`,
+    key: key
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}-item-header`
+  }, key), /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}-item-body`
+  }, item[key])))))) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}-body`
   }, /*#__PURE__*/React__default.createElement(NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,