@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.js

@@ -8,12 +8,14 @@
 import React__default, { forwardRef, isValidElement } from 'react';
 import PropTypes from '../../../../../_virtual/index.js';
 
-var DatagridAILabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var aiLabel = _ref.aiLabel;
+const DatagridAILabel = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    aiLabel
+  } = _ref;
   if (aiLabel && /*#__PURE__*/isValidElement(aiLabel)) {
-    var normalizedAILabel = /*#__PURE__*/React__default.cloneElement(aiLabel, {
+    const normalizedAILabel = /*#__PURE__*/React__default.cloneElement(aiLabel, {
       size: 'mini',
-      ref: ref
+      ref
     });
     return normalizedAILabel;
   }

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -10,19 +10,21 @@ import { Search } from '@carbon/react';
 import * as React from 'react';
 import { pkg } from '../../../../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var Actions = function Actions(_ref) {
-  var searchText = _ref.searchText,
-    setSearchText = _ref.setSearchText,
-    findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
+const blockClass = `${pkg.prefix}--datagrid`;
+const Actions = _ref => {
+  let {
+    searchText,
+    setSearchText,
+    findColumnPlaceholderLabel
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
+    className: `${blockClass}__customize-columns-tearsheet--actions`
   }, /*#__PURE__*/React.createElement(Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
     size: "lg",
     labelText: findColumnPlaceholderLabel,
-    onChange: function onChange(e) {
+    onChange: e => {
       // TODO: is it performant?
       setSearchText(e.target.value);
     }

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -5,43 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import PropTypes from '../../../../../_virtual/index.js';
 import { Column } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { pkg } from '../../../../../settings.js';
 
-var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var ButtonWrapper = function ButtonWrapper(_ref) {
-  var _onClick = _ref.onClick,
-    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
-    isTearsheetOpen = _ref.isTearsheetOpen,
-    _ref$iconTooltipLabel = _ref.iconTooltipLabel,
-    iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const blockClass = `${pkg.prefix}--datagrid`;
+const ButtonWrapper = _ref => {
+  let {
+    onClick,
+    setIsTearsheetOpen,
+    isTearsheetOpen,
+    iconTooltipLabel = 'Customize columns',
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Column, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React.createElement(Column, _extends({
+      size: 16
+    }, props)),
     iconDescription: iconTooltipLabel,
     tooltipPosition: "bottom",
     kind: "ghost",
     hasIconOnly: true,
-    "test-id": "".concat(blockClass, "__customize-columns-trigger"),
-    onClick: function onClick() {
+    "test-id": `${blockClass}__customize-columns-trigger`,
+    onClick: () => {
       setIsTearsheetOpen(!isTearsheetOpen);
-      if (typeof _onClick === 'function') {
-        _onClick();
+      if (typeof onClick === 'function') {
+        onClick();
       }
     }
   }));
 };
 ButtonWrapper.defaultProps = {
-  onClick: function onClick() {}
+  onClick: () => {}
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from '../../../../../_virtual/index.js';
 import { Checkbox } from '@carbon/react';
@@ -14,63 +13,62 @@ import cx from 'classnames';
 import { DraggableItemsList } from './DraggableItemsList.js';
 import uuidv4 from '../../../../../global/js/utils/uuidv4.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var Columns = function Columns(_ref) {
-  var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
-    filterString = _ref.filterString,
-    columns = _ref.columns,
-    setColumnsObject = _ref.setColumnsObject,
-    onSelectColumn = _ref.onSelectColumn,
-    assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
-    assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel,
-    customizeTearsheetHeadingLabel = _ref.customizeTearsheetHeadingLabel;
-  var listId = useRef(uuidv4()); // keep id between renders
-  var listRef = useRef(null);
-  var _React$useState = React__default.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    ariaRegionText = _React$useState2[0],
-    setAriaRegionText = _React$useState2[1];
+const blockClass = `${pkg.prefix}--datagrid`;
+const Columns = _ref => {
+  let {
+    getVisibleColumnsCount,
+    filterString,
+    columns,
+    setColumnsObject,
+    onSelectColumn,
+    assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel,
+    selectAllLabel,
+    customizeTearsheetHeadingLabel
+  } = _ref;
+  const listId = useRef(uuidv4()); // keep id between renders
+  const listRef = useRef(null);
+  const [ariaRegionText, setAriaRegionText] = React__default.useState('');
   // after a drag/drop action set the columns
-  var moveElement = React__default.useCallback(function (from, to) {
-    setColumnsObject(function (prev) {
-      var prevClone = _toConsumableArray(prev);
-      var item = prevClone[from];
+  const moveElement = React__default.useCallback((from, to) => {
+    setColumnsObject(prev => {
+      const prevClone = [...prev];
+      const item = prevClone[from];
       prevClone.splice(from, 1);
       prevClone.splice(to, 0, item);
       return prevClone;
     });
   }, [setColumnsObject]);
-  var filteredStickyColumn = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
-    return !item.sticky;
-  });
+  const filteredStickyColumn = columns?.filter(item => !item.sticky);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-column-list"),
+    className: `${blockClass}__customize-columns-column-list`,
     ref: listRef
   }, /*#__PURE__*/React__default.createElement("ol", {
-    className: "".concat(blockClass, "__customize-columns-column-list--focus"),
+    className: `${blockClass}__customize-columns-column-list--focus`,
     role: "listbox",
     "aria-label": customizeTearsheetHeadingLabel,
-    "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
+    "aria-describedby": `${blockClass}__customize-columns--instructions`,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("span", {
     "aria-live": "assertive",
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
+    className: `${blockClass}__shared-ui--assistive-text`
   }, ariaRegionText), /*#__PURE__*/React__default.createElement("span", {
-    id: "".concat(blockClass, "__customize-columns--instructions"),
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
+    id: `${blockClass}__customize-columns--instructions`,
+    className: `${blockClass}__shared-ui--assistive-text`
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React__default.createElement("div", {
-    id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: cx("".concat(blockClass, "__customize-columns-select-all"), _defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
+    id: `${blockClass}__customize-columns-select-all`,
+    className: cx(`${blockClass}__customize-columns-select-all`, {
+      [`${blockClass}__customize-columns-select-all--selected`]: getVisibleColumnsCount() > 0
+    }),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+    className: `${blockClass}__customize-columns-checkbox-wrapper`,
     checked: getVisibleColumnsCount() === columns.length,
     indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
-    onChange: function onChange() {
+    onChange: () => {
       onSelectColumn(filteredStickyColumn, getVisibleColumnsCount() !== columns.length);
     },
-    id: "".concat(blockClass, "__customization-column-select-all"),
+    id: `${blockClass}__customization-column-select-all`,
     labelText: selectAllLabel
   })), /*#__PURE__*/React__default.createElement(DraggableItemsList, {
     id: listId.current,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../_virtual/index.js';
 import '../../../../Tearsheet/Tearsheet.js';
@@ -14,126 +13,98 @@ import Columns from './Columns.js';
 import Actions from './Actions.js';
 import { pkg } from '../../../../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
-  var isOpen = _ref.isOpen,
-    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
-    onSaveColumnPrefs = _ref.onSaveColumnPrefs,
-    columnDefinitions = _ref.columnDefinitions,
-    originalColumnDefinitions = _ref.originalColumnDefinitions,
-    _ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
-    customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
-    _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
-    primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
-    _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
-    secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
-    _ref$instructionsLabe = _ref.instructionsLabel,
-    instructionsLabel = _ref$instructionsLabe === void 0 ? 'Select columns to display them. Click and drag the box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe,
-    _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
-    findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
-    _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
-    resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa,
-    _ref$assistiveTextIns = _ref.assistiveTextInstructionsLabel,
-    assistiveTextInstructionsLabel = _ref$assistiveTextIns === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$assistiveTextIns,
-    _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
-    assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
-    _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleColumnsCount = _useState2[0],
-    setVisibleColumnsCount = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    totalColumns = _useState4[0],
-    setTotalColumns = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchText = _useState6[0],
-    setSearchText = _useState6[1];
-  var _useState7 = useState(columnDefinitions),
-    _useState8 = _slicedToArray(_useState7, 2),
-    columnObjects = _useState8[0],
-    setColumnObjects = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isDirty = _useState10[0],
-    setIsDirty = _useState10[1];
-  var prevColumnDefinitions = useRef(undefined);
-  var onRequestClose = function onRequestClose() {
+const blockClass = `${pkg.prefix}--datagrid`;
+const CustomizeColumnsTearsheet = _ref => {
+  let {
+    isOpen,
+    setIsTearsheetOpen,
+    onSaveColumnPrefs,
+    columnDefinitions,
+    originalColumnDefinitions,
+    customizeTearsheetHeadingLabel = 'Customize columns',
+    primaryButtonTextLabel = 'Save',
+    secondaryButtonTextLabel = 'Cancel',
+    instructionsLabel = 'Select columns to display them. Click and drag the box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.',
+    findColumnPlaceholderLabel = 'Find column',
+    resetToDefaultLabel = 'Reset to default',
+    assistiveTextInstructionsLabel = 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.',
+    assistiveTextDisabledInstructionsLabel = 'Reordering columns are disabled because they are filtered currently.',
+    selectAllLabel = 'Column name'
+  } = _ref;
+  const [visibleColumnsCount, setVisibleColumnsCount] = useState('');
+  const [totalColumns, setTotalColumns] = useState('');
+  const [searchText, setSearchText] = useState('');
+  const [columnObjects, setColumnObjects] = useState(columnDefinitions);
+  const [isDirty, setIsDirty] = useState(false);
+  const prevColumnDefinitions = useRef(undefined);
+  const onRequestClose = () => {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
   };
-  var onRequestSubmit = function onRequestSubmit() {
+  const onRequestSubmit = () => {
     setIsTearsheetOpen(false);
-    var updatedColumns = columnObjects.map(function (colDef) {
-      return {
-        id: colDef.id,
-        isVisible: colDef.isVisible
-      };
-    });
+    const updatedColumns = columnObjects.map(colDef => ({
+      id: colDef.id,
+      isVisible: colDef.isVisible
+    }));
     onSaveColumnPrefs(updatedColumns);
   };
-  var onCheckboxCheck = function onCheckboxCheck(col, value) {
+  const onCheckboxCheck = (col, value) => {
     // Update the visibility of columns based on a single column or an array of columns
-    var changedDefinitions = columnObjects.map(function (definition) {
+    const changedDefinitions = columnObjects.map(definition => {
       // If select all is clicked
       if (Array.isArray(col)) {
-        return col.includes(definition) && definition.canFilter && !definition.disabled ? _objectSpread2(_objectSpread2({}, definition), {}, {
+        return col.includes(definition) && definition.canFilter && !definition.disabled ? {
+          ...definition,
           isVisible: value
-        }) : definition;
+        } : definition;
       }
       // If a single checkbox is clicked which is written below as a default return
-      return col.id === definition.id ? _objectSpread2(_objectSpread2({}, definition), {}, {
+      return col.id === definition.id ? {
+        ...definition,
         isVisible: value
-      }) : definition;
+      } : definition;
     });
 
     // Count the number of visible columns excluding certain IDs after 1st mutation
-    var selectedColumnsCount = changedDefinitions.filter(function (definition) {
-      return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
-    }).length;
+    const selectedColumnsCount = changedDefinitions.filter(definition => definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id)).length;
 
     // Ensure special columns are visible if any other columns are visible
-    var finalDefinitions = changedDefinitions.map(function (definition) {
+    const finalDefinitions = changedDefinitions.map(definition => {
       // If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
       if (selectedColumnsCount > 0) {
-        return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
+        return ['datagridSelection', 'actions'].includes(definition.id) ? {
+          ...definition,
           isVisible: true
-        }) : definition;
+        } : definition;
       }
       // Else we remove selection column and actions column
-      return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
+      return ['datagridSelection', 'actions'].includes(definition.id) ? {
+        ...definition,
         isVisible: false
-      }) : definition;
+      } : definition;
     });
     setColumnObjects(finalDefinitions);
     setIsDirty(selectedColumnsCount !== 0);
   };
-  var getVisibleColumnsCount = useCallback(function () {
-    return columnObjects.filter(function (col) {
-      return col.isVisible;
-    }).length;
+  const getVisibleColumnsCount = useCallback(() => {
+    return columnObjects.filter(col => col.isVisible).length;
   }, [columnObjects]);
-  var string = searchText.trim().toLowerCase();
-  useEffect(function () {
+  const string = searchText.trim().toLowerCase();
+  useEffect(() => {
     if (prevColumnDefinitions.current !== columnDefinitions) {
       setColumnObjects(columnDefinitions);
     }
-    var actionCount = columnObjects.filter(function (col) {
-      return col.id === 'actions';
-    }).length;
-    var datagridSelectionCount = columnObjects.filter(function (col) {
-      return col.id === 'datagridSelection';
-    }).length;
+    const actionCount = columnObjects.filter(col => col.id === 'actions').length;
+    const datagridSelectionCount = columnObjects.filter(col => col.id === 'datagridSelection').length;
     setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
     setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
     prevColumnDefinitions.current = columnDefinitions;
   }, [getVisibleColumnsCount, columnObjects, columnDefinitions]);
   return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
-    className: "".concat(blockClass, "__customize-columns-tearsheet"),
+    className: `${blockClass}__customize-columns-tearsheet`,
     open: isOpen,
-    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    title: `${customizeTearsheetHeadingLabel} (${visibleColumnsCount}/${totalColumns})`,
     description: instructionsLabel,
     actions: [{
       kind: 'secondary',
@@ -149,7 +120,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     columns: columnObjects,
     originalColumnDefinitions: originalColumnDefinitions,
     searchText: searchText,
-    setColumnsObject: function setColumnsObject(cols) {
+    setColumnsObject: cols => {
       setColumnObjects(cols);
       setIsDirty(true);
     },
@@ -163,7 +134,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     columns: columnObjects,
     filterString: string,
     onSelectColumn: onCheckboxCheck,
-    setColumnsObject: function setColumnsObject(cols) {
+    setColumnsObject: cols => {
       setColumnObjects(cols);
       setIsDirty(getVisibleColumnsCount() !== 0);
     },