@carbon/ibm-products 2.0.0 → 2.0.1

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -0,0 +1,177 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+// @flow
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Draggable, Locked } from '@carbon/react/icons';
+import { useDrag, useDrop } from 'react-dnd';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+var useEffect = React.useEffect,
+  useRef = React.useRef,
+  useState = React.useState;
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
+var DraggableElement = function DraggableElement(_ref) {
+  var _cx;
+  var id = _ref.id,
+    index = _ref.index,
+    listData = _ref.listData,
+    children = _ref.children,
+    type = _ref.type,
+    disabled = _ref.disabled,
+    ariaLabel = _ref.ariaLabel,
+    onGrab = _ref.onGrab,
+    onArrowKeyDown = _ref.onArrowKeyDown,
+    isFocused = _ref.isFocused,
+    isSticky = _ref.isSticky,
+    moveElement = _ref.moveElement,
+    selected = _ref.selected,
+    _ref$positionLabel = _ref.positionLabel,
+    positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
+    _ref$grabbedLabel = _ref.grabbedLabel,
+    grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
+    _ref$droppedLabel = _ref.droppedLabel,
+    droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
+  var ref = useRef();
+  var _useDrop = useDrop({
+      accept: DRAG_TYPE + type,
+      collect: function collect(monitor) {
+        return {
+          isOver: !!monitor.isOver()
+        };
+      },
+      drop: function drop(item) {
+        moveElement(item.index, index);
+      },
+      canDrop: function canDrop() {
+        return !disabled;
+      },
+      hover: function hover(item) {
+        var dragIndex = item.index;
+        var hoverIndex = index;
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex || disabled) {
+          return;
+        }
+        moveElement(dragIndex, hoverIndex);
+        // Time to actually perform the action
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        // eslint-disable-next-line no-param-reassign
+        item.index = hoverIndex;
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    isOver = _useDrop2[0].isOver,
+    drop = _useDrop2[1];
+  var _useDrag = useDrag({
+      type: DRAG_TYPE + type,
+      item: {
+        id: id,
+        index: index
+      },
+      canDrag: function canDrag() {
+        return !disabled;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
+  useEffect(function () {
+    if (isFocused && ref && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isGrabbed = _useState2[0],
+    setIsGrabbed = _useState2[1];
+  var _useState3 = useState(isFocused),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocusedOnItem = _useState4[0],
+    setIsFocusedOnItem = _useState4[1];
+  drop(ref);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cx({
+      disabled: disabled
+    }, "".concat(blockClass, "__draggable-handleStyle"))
+  }, isSticky ? /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(Draggable, {
+    size: 16
+  })), children);
+  return /*#__PURE__*/React.createElement("li", {
+    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
+    ref: ref,
+    "aria-selected": isFocused,
+    role: "option",
+    tabIndex: isFocused ? 0 : -1,
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === ' ' && e.target === e.currentTarget && !disabled) {
+        var positionText = positionLabel.replace('{index}', index + 1).replace('{total}', listData.length);
+        var grabAriaText = (isGrabbed ? droppedLabel : grabbedLabel).replace('{itemName}', ariaLabel);
+        onGrab(grabAriaText + positionText);
+        setIsGrabbed(!isGrabbed);
+        e.preventDefault();
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        onArrowKeyDown(e, isGrabbed, index);
+      }
+    },
+    onBlur: function onBlur(e) {
+      // handle when focus move to inner elements
+      setIsFocusedOnItem(e.currentTarget === e.target);
+    },
+    onFocus: function onFocus(e) {
+      // handle when focus move to li element
+      setIsFocusedOnItem(e.currentTarget === e.target);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
+  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
+    ref: preview,
+    className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
+  }, content) : /*#__PURE__*/React.createElement("div", {
+    ref: drag,
+    "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
+    ,
+    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
+  }, (!isOver || disabled) && content));
+};
+DraggableElement.propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+  disabled: PropTypes.bool,
+  droppedLabel: PropTypes.string,
+  grabbedLabel: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isFocused: PropTypes.bool.isRequired,
+  isSticky: PropTypes.bool,
+  listData: PropTypes.array.isRequired,
+  moveElement: PropTypes.func.isRequired,
+  onArrowKeyDown: PropTypes.func.isRequired,
+  onGrab: PropTypes.func.isRequired,
+  positionLabel: PropTypes.string,
+  selected: PropTypes.bool,
+  type: PropTypes.string.isRequired
+};
+export default DraggableElement;

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import { Search } from '@carbon/react';
+import * as React from 'react';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var Actions = function Actions(_ref) {
+  var searchText = _ref.searchText,
+    setSearchText = _ref.setSearchText,
+    findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
+  }, /*#__PURE__*/React.createElement(Search, {
+    placeholder: findColumnPlaceholderLabel,
+    value: searchText,
+    size: "lg",
+    labelText: findColumnPlaceholderLabel,
+    onChange: function onChange(e) {
+      // TODO: is it performant?
+      setSearchText(e.target.value);
+    }
+  }));
+};
+Actions.propTypes = {
+  columns: PropTypes.array.isRequired,
+  findColumnPlaceholderLabel: PropTypes.string,
+  originalColumnDefinitions: PropTypes.array.isRequired,
+  resetToDefaultLabel: PropTypes.string,
+  searchText: PropTypes.string.isRequired,
+  setColumnsObject: PropTypes.func.isRequired,
+  setSearchText: PropTypes.func.isRequired
+};
+export default Actions;

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

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Column } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import { pkg } from '../../../../../settings';
+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);
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Column, _extends({
+        size: 16
+      }, props));
+    },
+    iconDescription: iconTooltipLabel,
+    tooltipPosition: "left",
+    kind: "ghost",
+    hasIconOnly: true,
+    "test-id": "".concat(blockClass, "__customize-columns-trigger"),
+    onClick: function onClick() {
+      setIsTearsheetOpen(!isTearsheetOpen);
+      if (typeof _onClick === 'function') {
+        _onClick();
+      }
+    }
+  }));
+};
+ButtonWrapper.defaultProps = {
+  onClick: function onClick() {}
+};
+ButtonWrapper.propTypes = {
+  iconTooltipLabel: PropTypes.string,
+  isTearsheetOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  setIsTearsheetOpen: PropTypes.func.isRequired
+};
+export default ButtonWrapper;

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

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Checkbox } from '@carbon/react';
+import update from 'immutability-helper';
+import { pkg } from '../../../../../settings';
+import cx from 'classnames';
+import { DraggableItemsList } from './DraggableItemsList';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var getNextIndex = function getNextIndex(array, currentIndex, key) {
+  var newIndex = -1;
+  if (key === 'ArrowUp') {
+    newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
+  }
+  if (key === 'ArrowDown') {
+    newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
+  }
+  return newIndex;
+};
+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,
+    isTableSortable = _ref.isTableSortable;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    ariaRegionText = _React$useState2[0],
+    setAriaRegionText = _React$useState2[1];
+  var _React$useState3 = React.useState(-1),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focusIndex = _React$useState4[0],
+    setFocusIndex = _React$useState4[1];
+  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
+    var dragCard = columns[dragIndex];
+    setColumnsObject(update(columns, {
+      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
+    }));
+  }, [columns, setColumnsObject]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-column-list")
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "".concat(blockClass, "__customize-columns-column-list--focus"),
+    role: "listbox",
+    "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
+    onKeyDown: function onKeyDown(e) {
+      var nextIndex = getNextIndex(columns, focusIndex, e.key);
+      if (nextIndex >= 0) {
+        setFocusIndex(nextIndex);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-live": "assertive",
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
+  }, ariaRegionText), /*#__PURE__*/React.createElement("span", {
+    id: "".concat(blockClass, "__customize-columns--instructions"),
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
+  }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React.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)),
+    selected: getVisibleColumnsCount() > 0
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+    checked: getVisibleColumnsCount() === columns.length,
+    indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
+    onChange: function onChange() {
+      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
+    },
+    id: "".concat(blockClass, "__customization-column-select-all"),
+    labelText: selectAllLabel
+  })), /*#__PURE__*/React.createElement(DraggableItemsList, {
+    columns: columns,
+    filterString: filterString,
+    focusIndex: focusIndex,
+    getNextIndex: getNextIndex,
+    isTableSortable: isTableSortable,
+    moveElement: moveElement,
+    onSelectColumn: onSelectColumn,
+    setAriaRegionText: setAriaRegionText,
+    setColumnsObject: setColumnsObject,
+    setFocusIndex: setFocusIndex
+  }))));
+};
+Columns.propTypes = {
+  assistiveTextDisabledInstructionsLabel: PropTypes.string,
+  assistiveTextInstructionsLabel: PropTypes.string,
+  columns: PropTypes.array.isRequired,
+  disabledInstructionsLabel: PropTypes.string,
+  filterString: PropTypes.string.isRequired,
+  getVisibleColumnsCount: PropTypes.func.isRequired,
+  instructionsLabel: PropTypes.string,
+  isTableSortable: PropTypes.bool.isRequired,
+  onSelectColumn: PropTypes.func.isRequired,
+  selectAllLabel: PropTypes.string,
+  setColumnStatus: PropTypes.func,
+  setColumnsObject: PropTypes.func.isRequired
+};
+export default Columns;

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

@@ -0,0 +1,176 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { isColumnVisible } from './common';
+import { TearsheetNarrow } from '../../../../Tearsheet';
+import Columns from './Columns';
+import Actions from './Actions';
+import { pkg } from '../../../../../settings';
+import { useCallback } from 'react';
+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,
+    isTableSortable = _ref.isTableSortable;
+  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
+    // only sort the hidden column to the end when modal reopen
+    .sort(function (defA, defB) {
+      var isVisibleA = isColumnVisible(defA);
+      var isVisibleB = isColumnVisible(defB);
+      if (isVisibleA && !isVisibleB) {
+        return -1;
+      }
+      if (!isVisibleA && isVisibleB) {
+        return 1;
+      }
+      return 0;
+    })),
+    _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 onRequestClose = function onRequestClose() {
+    setIsTearsheetOpen(false);
+  };
+  var onRequestSubmit = function onRequestSubmit() {
+    setIsTearsheetOpen(false);
+    var updatedColumns = columnObjects.map(function (colDef) {
+      return {
+        id: colDef.id,
+        isVisible: colDef.isVisible
+      };
+    });
+    onSaveColumnPrefs(updatedColumns);
+  };
+  var onCheckboxCheck = function onCheckboxCheck(col, value) {
+    var changedDefinitions = columnObjects.map(function (definition) {
+      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
+        return _objectSpread(_objectSpread({}, definition), {}, {
+          isVisible: value
+        });
+      }
+      return definition;
+    });
+    setColumnObjects(changedDefinitions);
+    setDirty();
+  };
+  var setDirty = function setDirty() {
+    if (!isDirty) {
+      setIsDirty(true);
+    }
+  };
+  var getVisibleColumnsCount = useCallback(function () {
+    return columnObjects.filter(function (col) {
+      return col.isVisible;
+    }).length;
+  }, [columnObjects]);
+  var string = searchText.trim().toLowerCase();
+  useEffect(function () {
+    setVisibleColumnsCount(getVisibleColumnsCount());
+    setTotalColumns(columnObjects.length);
+  }, [getVisibleColumnsCount, columnObjects.length]);
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
+    open: isOpen,
+    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    description: instructionsLabel,
+    actions: [{
+      kind: 'secondary',
+      label: secondaryButtonTextLabel,
+      onClick: onRequestClose
+    }, {
+      kind: 'primary',
+      label: primaryButtonTextLabel,
+      onClick: onRequestSubmit,
+      disabled: !isDirty
+    }]
+  }, /*#__PURE__*/React.createElement(Actions, {
+    columns: columnObjects,
+    originalColumnDefinitions: originalColumnDefinitions,
+    searchText: searchText,
+    setColumnsObject: function setColumnsObject(cols) {
+      setColumnObjects(cols);
+      setDirty();
+    },
+    setSearchText: setSearchText,
+    findColumnPlaceholderLabel: findColumnPlaceholderLabel,
+    resetToDefaultLabel: resetToDefaultLabel
+  }), isOpen && /*#__PURE__*/React.createElement(Columns, {
+    assistiveTextInstructionsLabel: assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel: assistiveTextDisabledInstructionsLabel,
+    getVisibleColumnsCount: getVisibleColumnsCount,
+    columns: columnObjects,
+    filterString: string,
+    onSelectColumn: onCheckboxCheck,
+    setColumnsObject: function setColumnsObject(cols) {
+      setColumnObjects(cols);
+      setDirty();
+    },
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
+  }));
+};
+CustomizeColumnsTearsheet.propTypes = {
+  assistiveTextDisabledInstructionsLabel: PropTypes.string,
+  assistiveTextInstructionsLabel: PropTypes.string,
+  columnDefinitions: PropTypes.array.isRequired,
+  customizeTearsheetHeadingLabel: PropTypes.string,
+  findColumnPlaceholderLabel: PropTypes.string,
+  instructionsLabel: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  isTableSortable: PropTypes.bool.isRequired,
+  onSaveColumnPrefs: PropTypes.func.isRequired,
+  originalColumnDefinitions: PropTypes.array.isRequired,
+  primaryButtonTextLabel: PropTypes.string,
+  resetToDefaultLabel: PropTypes.string,
+  secondaryButtonTextLabel: PropTypes.string,
+  selectAllLabel: PropTypes.string,
+  setIsTearsheetOpen: PropTypes.func.isRequired
+};
+export default CustomizeColumnsTearsheet;

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Checkbox } from '@carbon/react';
+import { isColumnVisible } from './common';
+import DraggableElement from '../../DraggableElement';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DraggableItemsList = function DraggableItemsList(_ref) {
+  var columns = _ref.columns,
+    filterString = _ref.filterString,
+    focusIndex = _ref.focusIndex,
+    getNextIndex = _ref.getNextIndex,
+    isTableSortable = _ref.isTableSortable,
+    moveElement = _ref.moveElement,
+    onSelectColumn = _ref.onSelectColumn,
+    setAriaRegionText = _ref.setAriaRegionText,
+    setColumnsObject = _ref.setColumnsObject,
+    setFocusIndex = _ref.setFocusIndex;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns
+  // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    var _colDef$Header$props$, _colDef$Header$props;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
+    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
+  }).filter(function (colDef) {
+    return !colDef.isAction;
+  }).filter(function (colDef) {
+    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+  }).map(function (colDef, i) {
+    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var isFrozenColumn = !!colDef.sticky;
+    var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: isColumnVisible(colDef),
+      disabled: isFrozenColumn,
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      },
+      className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
+    }));
+    return /*#__PURE__*/React.createElement(DraggableElement, {
+      key: colDef.id,
+      index: i,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0 || isFrozenColumn,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var _columns$nextIndex;
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      },
+      isSticky: isFrozenColumn,
+      selected: isColumnVisible(colDef)
+    }, listContents);
+  }));
+};
+DraggableItemsList.propTypes = {
+  columns: PropTypes.array.isRequired,
+  filterString: PropTypes.string.isRequired,
+  focusIndex: PropTypes.number.isRequired,
+  getNextIndex: PropTypes.func.isRequired,
+  isTableSortable: PropTypes.bool,
+  moveElement: PropTypes.func.isRequired,
+  onSelectColumn: PropTypes.func.isRequired,
+  setAriaRegionText: PropTypes.func.isRequired,
+  setColumnsObject: PropTypes.func.isRequired,
+  setFocusIndex: PropTypes.func.isRequired
+};