@carbon/ibm-products 1.34.1 → 1.35.1

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -31,35 +28,33 @@ var rowSizeMap = {
   tall: 64
 };
 var defaultRowHeight = rowSizeMap.lg;
-
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
-      rows = datagridState.rows,
-      prepareRow = datagridState.prepareRow,
-      onScroll = datagridState.onScroll,
-      innerListRef = datagridState.innerListRef,
-      _datagridState$tableH = datagridState.tableHeight,
-      tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
-      listRef = datagridState.listRef,
-      rowSize = datagridState.rowSize,
-      DatagridPagination = datagridState.DatagridPagination,
-      page = datagridState.page,
-      handleResize = datagridState.handleResize,
-      withOverflowRow = datagridState.withOverflowRow;
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow,
+    onScroll = datagridState.onScroll,
+    innerListRef = datagridState.innerListRef,
+    _datagridState$tableH = datagridState.tableHeight,
+    tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+    virtualHeight = datagridState.virtualHeight,
+    listRef = datagridState.listRef,
+    rowSize = datagridState.rowSize,
+    DatagridPagination = datagridState.DatagridPagination,
+    page = datagridState.page,
+    handleResize = datagridState.handleResize,
+    withOverflowRow = datagridState.withOverflowRow;
   useEffect(function () {
     handleResize();
   }, [handleResize]);
   var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
-
   if (listRef && listRef.current) {
     listRef.current.resetAfterIndex(0);
   }
-
   var visibleRows = DatagridPagination && page || rows;
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     onScroll: onScroll
   }), /*#__PURE__*/React.createElement(VariableSizeList, {
-    height: tableHeight,
+    height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
       return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
@@ -71,7 +66,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     className: "".concat(blockClass, "__virtual-scrollbar")
   }, function (_ref) {
     var index = _ref.index,
-        style = _ref.style;
+      style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
     return /*#__PURE__*/React.createElement("div", {
@@ -83,5 +78,4 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     })));
   }));
 };
-
 export default DatagridVirtualBody;

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -16,105 +15,96 @@ import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var useEffect = React.useEffect,
-    useRef = React.useRef,
-    useState = React.useState;
+  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,
-      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;
+    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,
+    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;
+      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;
       }
-
-      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];
-
+    }),
+    _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];
-
+      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];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isGrabbed = _useState2[0],
+    setIsGrabbed = _useState2[1];
   var _useState3 = useState(isFocused),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocusedOnItem = _useState4[0],
-      setIsFocusedOnItem = _useState4[1];
-
+    _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({
@@ -161,7 +151,6 @@ var DraggableElement = function DraggableElement(_ref) {
     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,

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

@@ -1,5 +1,4 @@
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -7,16 +6,16 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 import PropTypes from 'prop-types';
 import { Search } from 'carbon-components-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;
+    setSearchText = _ref.setSearchText,
+    findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-modal--actions")
   }, /*#__PURE__*/React.createElement(Search, {
@@ -30,7 +29,6 @@ var Actions = function Actions(_ref) {
     }
   }));
 };
-
 Actions.propTypes = {
   columns: PropTypes.array.isRequired,
   findColumnPlaceholderLabel: PropTypes.string,

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -10,21 +9,20 @@ var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"]
  * 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 { Column16 } from '@carbon/icons-react';
 import { Button } from 'carbon-components-react';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(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 = _objectWithoutProperties(_ref, _excluded);
-
+    setIsModalOpen = _ref.setIsModalOpen,
+    isModalOpen = _ref.isModalOpen,
+    _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: Column16,
     iconDescription: iconTooltipLabel,
@@ -34,14 +32,12 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
       setIsModalOpen(!isModalOpen);
-
       if (typeof _onClick === 'function') {
         _onClick();
       }
     }
   }));
 };
-
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
   isModalOpen: PropTypes.bool.isRequired,

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -9,6 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
@@ -20,43 +20,34 @@ import DraggableElement from '../../DraggableElement';
 import { isColumnVisible } from './common';
 import classNames from 'classnames';
 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 _classNames;
-
   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;
-
+    filterString = _ref.filterString,
+    columns = _ref.columns,
+    setColumnsObject = _ref.setColumnsObject,
+    onSelectColumn = _ref.onSelectColumn,
+    assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
+    selectAllLabel = _ref.selectAllLabel;
   var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      ariaRegionText = _React$useState2[0],
-      setAriaRegionText = _React$useState2[1];
-
+    _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];
-
+    _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, {
@@ -73,7 +64,6 @@ var Columns = function Columns(_ref) {
     "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();
@@ -125,7 +115,6 @@ var Columns = function Columns(_ref) {
           var nextIndex = getNextIndex(columns, currentIndex, e.key);
           e.preventDefault();
           e.stopPropagation();
-
           if (nextIndex >= 0) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
@@ -147,7 +136,6 @@ var Columns = function Columns(_ref) {
     }));
   }))));
 };
-
 Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,

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

@@ -1,10 +1,7 @@
 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; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -22,78 +19,69 @@ import Actions from './Actions';
 import { pkg } from '../../../../../settings';
 import { useCallback } from 'react';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
   var isOpen = _ref.isOpen,
-      setIsModalOpen = _ref.setIsModalOpen,
-      onSaveColumnPrefs = _ref.onSaveColumnPrefs,
-      columnDefinitions = _ref.columnDefinitions,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
-      _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;
-
+    setIsModalOpen = _ref.setIsModalOpen,
+    onSaveColumnPrefs = _ref.onSaveColumnPrefs,
+    columnDefinitions = _ref.columnDefinitions,
+    originalColumnDefinitions = _ref.originalColumnDefinitions,
+    _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
+    customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
+    _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];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleColumnsCount = _useState2[0],
+    setVisibleColumnsCount = _useState2[1];
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      totalColumns = _useState4[0],
-      setTotalColumns = _useState4[1];
-
+    _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 // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return !!colDef.Header.props;
-  }) // 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];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchText = _useState6[0],
+    setSearchText = _useState6[1];
+  var _useState7 = useState(columnDefinitions
+    // hide the columns without Header, e.g the sticky actions, spacer
+    .filter(function (colDef) {
+      return !!colDef.Header.props;
+    })
+    // 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];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    isDirty = _useState10[0],
+    setIsDirty = _useState10[1];
   var onRequestClose = function onRequestClose() {
     setIsModalOpen(false);
   };
-
   var onRequestSubmit = function onRequestSubmit() {
     setIsModalOpen(false);
     var updatedColumns = columnObjects.map(function (colDef) {
@@ -104,7 +92,6 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     });
     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) {
@@ -112,19 +99,16 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
           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;
@@ -174,7 +158,6 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     selectAllLabel: selectAllLabel
   }));
 };
-
 CustomizeColumnsModal.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,