@carbon/ibm-products 1.12.0 → 1.15.0

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _reactDnd = require("react-dnd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// @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.
+ */
+var useEffect = React.useEffect,
+    useRef = React.useRef,
+    useState = React.useState;
+var DRAG_TYPE = 'wkc-shared-ui-draggable-element';
+
+var DraggableElement = function DraggableElement(_ref) {
+  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,
+      moveElement = _ref.moveElement,
+      _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 = (0, _reactDnd.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
+
+      // 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
+
+      // 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 = (0, _slicedToArray2.default)(_useDrop, 2),
+      isOver = _useDrop2[0].isOver,
+      drop = _useDrop2[1];
+
+  var _useDrag = (0, _reactDnd.useDrag)({
+    type: DRAG_TYPE + type,
+    item: {
+      id: id,
+      index: index
+    },
+    canDrag: function canDrag() {
+      return !disabled;
+    },
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    }
+  }),
+      _useDrag2 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useState, 2),
+      isGrabbed = _useState2[0],
+      setIsGrabbed = _useState2[1];
+
+  var _useState3 = useState(isFocused),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isFocusedOnItem = _useState4[0],
+      setIsFocusedOnItem = _useState4[1];
+
+  drop(ref);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)({
+      disabled: disabled
+    }, 'wkc-draggable-handleStyle')
+  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
+  return /*#__PURE__*/React.createElement("li", {
+    className: (0, _classnames.default)({
+      'wkc-draggable-handleHolder-isOver': isOver && !disabled
+    }, {
+      'wkc-draggable-handleHolder--grabbed': isGrabbed
+    }, 'wkc-draggable-handleHolder'),
+    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: "wkc-shared-ui--assistive-text"
+  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
+    ref: preview,
+    className: "wkc-draggable-handleHolder-droppable"
+  }, content) : /*#__PURE__*/React.createElement("div", {
+    ref: drag,
+    "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
+    ,
+    className: (0, _classnames.default)({
+      'wkc-draggable-handleStyle': !disabled
+    }, 'wkc-draggable-handleHolder-droppable')
+  }, (!isOver || disabled) && content));
+};
+
+DraggableElement.propTypes = {
+  ariaLabel: _propTypes.default.string.isRequired,
+  children: _propTypes.default.element.isRequired,
+  disabled: _propTypes.default.bool,
+  droppedLabel: _propTypes.default.string,
+  grabbedLabel: _propTypes.default.string,
+  id: _propTypes.default.string.isRequired,
+  index: _propTypes.default.number.isRequired,
+  isFocused: _propTypes.default.bool.isRequired,
+  listData: _propTypes.default.array.isRequired,
+  moveElement: _propTypes.default.func.isRequired,
+  onArrowKeyDown: _propTypes.default.func.isRequired,
+  onGrab: _propTypes.default.func.isRequired,
+  positionLabel: _propTypes.default.string,
+  type: _propTypes.default.string.isRequired
+};
+var _default = DraggableElement;
+exports.default = _default;

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _keyBy = _interopRequireDefault(require("lodash/keyBy"));
+
+var _settings = require("../../../../../settings");
+
+var _common = require("./common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var Actions = function Actions(_ref) {
+  var searchText = _ref.searchText,
+      columns = _ref.columns,
+      originalColumnDefinitions = _ref.originalColumnDefinitions,
+      setColumnsObject = _ref.setColumnsObject,
+      setSearchText = _ref.setSearchText,
+      _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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-modal--actions"),
+    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+  }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Search, {
+    placeholder: findColumnPlaceholderLabel,
+    value: searchText,
+    size: "sm",
+    labelText: findColumnPlaceholderLabel,
+    onChange: function onChange(e) {
+      // TODO: is it performant?
+      setSearchText(e.target.value);
+    },
+    "test-id": "".concat(blockClass, "__customize-columns-modal--search")
+  }), /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
+    onClick: function onClick() {
+      var reset = resetToOriginal(columns, originalColumnDefinitions);
+      setColumnsObject(reset);
+    },
+    size: "sm",
+    kind: "ghost",
+    renderIcon: _iconsReact.Reset16,
+    "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
+  }, resetToDefaultLabel));
+};
+
+var resetToOriginal = function resetToOriginal(columnDefinitions, originalColumnDefinitions) {
+  var keyedDefs = (0, _keyBy.default)(columnDefinitions, 'id');
+  return originalColumnDefinitions.map(function (colDef) {
+    return _objectSpread(_objectSpread({}, keyedDefs[colDef.id]), {}, {
+      isVisible: (0, _common.isColumnVisible)(colDef)
+    });
+  });
+};
+
+Actions.propTypes = {
+  columns: _propTypes.default.array.isRequired,
+  findColumnPlaceholderLabel: _propTypes.default.string,
+  originalColumnDefinitions: _propTypes.default.array.isRequired,
+  resetToDefaultLabel: _propTypes.default.string,
+  searchText: _propTypes.default.string.isRequired,
+  setColumnsObject: _propTypes.default.func.isRequired,
+  setSearchText: _propTypes.default.func.isRequired
+};
+var _default = Actions;
+exports.default = _default;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _settings = require("../../../../../settings");
+
+var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var ButtonWrapper = function ButtonWrapper(_ref) {
+  var _onClick = _ref.onClick,
+      setIsModalOpen = _ref.setIsModalOpen,
+      isModalOpen = _ref.isModalOpen,
+      _ref$iconTooltipLabel = _ref.iconTooltipLabel,
+      iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+    renderIcon: _iconsReact.Column16,
+    iconDescription: iconTooltipLabel,
+    tooltipPosition: "left",
+    kind: "ghost",
+    hasIconOnly: true,
+    "test-id": "".concat(blockClass, "__customize-columns-trigger"),
+    onClick: function onClick() {
+      setIsModalOpen(!isModalOpen);
+
+      if (typeof _onClick === 'function') {
+        _onClick();
+      }
+    }
+  }));
+};
+
+ButtonWrapper.propTypes = {
+  iconTooltipLabel: _propTypes.default.string,
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  setIsModalOpen: _propTypes.default.func.isRequired
+};
+var _default = ButtonWrapper;
+exports.default = _default;

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

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+
+var _settings = require("../../../../../settings");
+
+var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
+
+var _common = require("./common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// @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.
+ */
+var blockClass = "".concat(_settings.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 filterString = _ref.filterString,
+      columns = _ref.columns,
+      setColumnsObject = _ref.setColumnsObject,
+      onSelectColumn = _ref.onSelectColumn,
+      _ref$instructionsLabe = _ref.instructionsLabel,
+      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$instructionsLabe,
+      _ref$disabledInstruct = _ref.disabledInstructionsLabel,
+      disabledInstructionsLabel = _ref$disabledInstruct === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$disabledInstruct;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      ariaRegionText = _React$useState2[0],
+      setAriaRegionText = _React$useState2[1];
+
+  var _React$useState3 = React.useState(-1),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      focusIndex = _React$useState4[0],
+      setFocusIndex = _React$useState4[1];
+
+  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
+    var dragCard = columns[dragIndex];
+    setColumnsObject((0, _immutabilityHelper.default)(columns, {
+      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
+    }));
+  }, [columns, setColumnsObject]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-column-list")
+  }, /*#__PURE__*/React.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.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,
+    onFocus: function onFocus(e) {
+      if (e.target === e.currentTarget) {
+        setFocusIndex(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 ? instructionsLabel : disabledInstructionsLabel), columns.filter(function (colDef) {
+    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
+  }).map(function (colDef, i) {
+    return /*#__PURE__*/React.createElement(_DraggableElement.default, {
+      key: colDef.id,
+      index: i,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0,
+      ariaLabel: colDef.Header.props.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (nextIndex >= 0) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      }
+    }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
+      checked: (0, _common.isColumnVisible)(colDef),
+      onChange: onSelectColumn.bind(null, colDef),
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: colDef.Header.props.title,
+      title: colDef.Header.props.title
+    }));
+  }))));
+};
+
+Columns.propTypes = {
+  columns: _propTypes.default.array.isRequired,
+  disabledInstructionsLabel: _propTypes.default.string,
+  filterString: _propTypes.default.string.isRequired,
+  instructionsLabel: _propTypes.default.string,
+  onSelectColumn: _propTypes.default.func.isRequired,
+  setColumnsObject: _propTypes.default.func.isRequired
+};
+var _default = Columns;
+exports.default = _default;