@carbon/ibm-products 2.0.0-rc.32 → 2.0.0-rc.34

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

@@ -1,177 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,52 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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

@@ -1,109 +0,0 @@
-/**
- * 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
-};