@carbon/ibm-products 1.25.1 → 1.31.0

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useContext, useRef } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { DataTable } from 'carbon-components-react';
+import DatagridHead from './DatagridHead';
+import DatagridBody from './DatagridBody';
+import DatagridToolbar from './DatagridToolbar';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
+import { pkg } from '../../../settings';
+import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
+import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
+import { useClickOutside } from '../../../global/js/hooks';
+var TableContainer = DataTable.TableContainer,
+    Table = DataTable.Table;
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridContent = function DatagridContent(_ref) {
+  var _getTableProps;
+
+  var datagridState = _ref.datagridState;
+
+  var _useContext = useContext(InlineEditContext),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch;
+
+  var activeCellId = state.activeCellId;
+  var _datagridState$getTab = datagridState.getTableProps,
+      getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+      withVirtualScroll = datagridState.withVirtualScroll,
+      DatagridPagination = datagridState.DatagridPagination,
+      isFetching = datagridState.isFetching,
+      CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
+      leftPanel = datagridState.leftPanel,
+      fullHeightDatagrid = datagridState.fullHeightDatagrid,
+      _datagridState$vertic = datagridState.verticalAlign,
+      verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
+      variableRowHeight = datagridState.variableRowHeight,
+      gridTitle = datagridState.gridTitle,
+      gridDescription = datagridState.gridDescription,
+      useDenseHeader = datagridState.useDenseHeader,
+      withInlineEdit = datagridState.withInlineEdit;
+  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var gridActive = state.gridActive;
+  var gridAreaRef = useRef();
+  useClickOutside(gridAreaRef, function (target) {
+    if (!withInlineEdit) {
+      return;
+    } // We return from here if we find a parent element with the selector below
+    // because that element was initially part of the grid area but was removed
+    // and swapped out with an input, i.e. text, number, selection, or date picker
+
+
+    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
+      return;
+    }
+
+    dispatch({
+      type: 'REMOVE_GRID_ACTIVE_FOCUS',
+      payload: activeCellId
+    });
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
+    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__table-container"),
+    ref: gridAreaRef
+  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__datagridLeftPanel")
+  }, leftPanel.panelContent), /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
+    className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+    role: withInlineEdit && 'grid',
+    tabIndex: withInlineEdit && 0,
+    onKeyDown: withInlineEdit ? function (event) {
+      return handleGridKeyPress(event, dispatch, state, datagridState);
+    } : null,
+    onFocus: withInlineEdit ? function () {
+      return handleGridFocus(state, dispatch);
+    } : null
+  }), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
+    rows: rows
+  }))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
+    instance: datagridState
+  }));
+};
+DatagridContent.propTypes = {
+  datagridState: PropTypes.shape({
+    getTableProps: PropTypes.func,
+    withVirtualScroll: PropTypes.bool,
+    DatagridPagination: PropTypes.element,
+    CustomizeColumnsModal: PropTypes.element,
+    isFetching: PropTypes.bool,
+    leftPanel: PropTypes.object,
+    fullHeightDatagrid: PropTypes.bool,
+    variableRowHeight: PropTypes.bool,
+    useDenseHeader: PropTypes.bool,
+    withInlineEdit: PropTypes.bool,
+    verticalAlign: PropTypes.string,
+    gridTitle: PropTypes.node,
+    gridDescription: PropTypes.node,
+    page: PropTypes.arrayOf(PropTypes.object),
+    rows: PropTypes.arrayOf(PropTypes.object)
+  })
+};

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange"];
 
 /*
@@ -12,21 +13,27 @@ var _excluded = ["onChange"];
 // @flow
 import React from 'react';
 import { DataTable } from 'carbon-components-react';
+import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var SelectAll = function SelectAll(datagridState) {
+  var _columns$;
+
   var isFetching = datagridState.isFetching,
       getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
       getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
       tableId = datagridState.tableId,
       hideSelectAll = datagridState.hideSelectAll,
       DatagridPagination = datagridState.DatagridPagination,
-      radio = datagridState.radio;
+      radio = datagridState.radio,
+      columns = datagridState.columns,
+      withStickyColumn = datagridState.withStickyColumn;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
 
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__head-hidden-select-all")
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
     });
   }
 
@@ -37,7 +44,7 @@ var SelectAll = function SelectAll(datagridState) {
       selectProps = _objectWithoutProperties(_getProps, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__head-select-all ").concat(blockClass, "__checkbox-cell")
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -1,20 +1,148 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+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 { DataTable } from 'carbon-components-react';
-import { pkg } from '../../../settings';
+import React, { useEffect, useState } from 'react';
+import { Add16, OverflowMenuVertical16 } from '@carbon/icons-react';
+import { DataTable, TableBatchActions, TableBatchAction } from 'carbon-components-react';
+import { useResizeDetector } from 'react-resize-detector';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { pkg, carbon } from '../../../settings';
+import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 
+var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayAllInMenu = _useState2[0],
+      setDisplayAllInMenu = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialListWidth = _useState4[0],
+      setInitialListWidth = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      receivedInitialWidth = _useState6[0],
+      setReceivedInitialWidth = _useState6[1];
+
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+      toolbarBatchActions = datagridState.toolbarBatchActions;
+  var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
+  // used to measure when all items are put inside
+  // the ButtonMenu
+
+  useEffect(function () {
+    if (totalSelected === 1 && !receivedInitialWidth) {
+      var batchActionListWidth = ref.current.querySelector(".".concat(carbon.prefix, "--action-list")).offsetWidth;
+      setInitialListWidth(batchActionListWidth);
+      setReceivedInitialWidth(true);
+    }
+  }, [totalSelected, receivedInitialWidth, ref]);
+  useEffect(function () {
+    var summaryWidth = ref.current.querySelector(".".concat(carbon.prefix, "--batch-summary")).offsetWidth;
+
+    if (width < summaryWidth + initialListWidth + 32) {
+      setDisplayAllInMenu(true);
+    } else {
+      setDisplayAllInMenu(false);
+    }
+  }, [width, ref, initialListWidth]); // Render batch actions in ButtonMenu
+
+  var renderBatchActionOverflow = function renderBatchActionOverflow() {
+    var minWidthBeforeOverflowIcon = 380; // Do not render ButtonMenu when there are 3 or less items
+    // and if there is enough available space to render all the items
+
+    if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(ButtonMenu, {
+      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      renderIcon: width > minWidthBeforeOverflowIcon ? Add16 : OverflowMenuVertical16,
+      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
+      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      flipped: true
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2) {
+        if (displayAllInMenu) {
+          return /*#__PURE__*/React.createElement(ButtonMenuItem, {
+            key: "".concat(batchAction.label, "-").concat(index),
+            itemText: batchAction.label,
+            onClick: function onClick() {
+              batchAction.onClick();
+
+              if (batchAction.type === 'select_all') {
+                toggleAllRowsSelected(true);
+              }
+            }
+          });
+        }
+
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(ButtonMenuItem, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        itemText: batchAction.label,
+        onClick: function onClick() {
+          batchAction.onClick();
+
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        }
+      });
+    }));
+  }; // Only display the first two batch actions, the rest are
+  // displayed inside of the ButtonMenu if there are more than
+  // 3 batch actions
+
+
+  return /*#__PURE__*/React.createElement(TableBatchActions, {
+    shouldShowBatchActions: totalSelected > 0,
+    totalSelected: totalSelected,
+    onCancel: function onCancel() {
+      return toggleAllRowsSelected(false);
+    }
+  }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
+      return /*#__PURE__*/React.createElement(TableBatchAction, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        renderIcon: batchAction.renderIcon,
+        onClick: function onClick() {
+          batchAction.onClick();
+
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        },
+        iconDescription: batchAction.label
+      }, batchAction.label);
+    }
+  })), renderBatchActionOverflow());
+};
+
 var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var _useResizeDetector = useResizeDetector(),
+      width = _useResizeDetector.width,
+      ref = _useResizeDetector.ref;
+
   var DatagridActions = datagridState.DatagridActions,
-      DatagridBatchActions = datagridState.DatagridBatchActions;
-  return DatagridActions || DatagridBatchActions ? /*#__PURE__*/React.createElement("div", {
+      DatagridBatchActions = datagridState.DatagridBatchActions,
+      batchActions = datagridState.batchActions;
+  return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "".concat(blockClass, "__table-toolbar")
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
   }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };

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

@@ -22,6 +22,8 @@ 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,
@@ -33,6 +35,7 @@ var DraggableElement = function DraggableElement(_ref) {
       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,
@@ -119,7 +122,7 @@ var DraggableElement = function DraggableElement(_ref) {
     }, "".concat(blockClass, "__draggable-handleStyle"))
   }, /*#__PURE__*/React.createElement(Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
+    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"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -173,6 +176,7 @@ DraggableElement.propTypes = {
   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,9 +1,3 @@
-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; }
-
 // @flow
 
 /*
@@ -13,28 +7,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import { Reset16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
-import { Button, Search } from 'carbon-components-react';
+import { Search } from 'carbon-components-react';
 import * as React from 'react';
-import keyBy from 'lodash/keyBy';
 import { pkg } from '../../../../../settings';
-import { isColumnVisible } from './common';
 var blockClass = "".concat(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;
+      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions"),
-    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-modal--actions")
   }, /*#__PURE__*/React.createElement(Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
@@ -43,27 +27,8 @@ var Actions = function Actions(_ref) {
     onChange: function onChange(e) {
       // TODO: is it performant?
       setSearchText(e.target.value);
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--search")
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      var reset = resetToOriginal(columns, originalColumnDefinitions);
-      setColumnsObject(reset);
-    },
-    size: "sm",
-    kind: "ghost",
-    renderIcon: Reset16,
-    "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
-  }, resetToDefaultLabel));
-};
-
-var resetToOriginal = function resetToOriginal(columnDefinitions, originalColumnDefinitions) {
-  var keyedDefs = keyBy(columnDefinitions, 'id');
-  return originalColumnDefinitions.map(function (colDef) {
-    return _objectSpread(_objectSpread({}, keyedDefs[colDef.id]), {}, {
-      isVisible: isColumnVisible(colDef)
-    });
-  });
+    }
+  }));
 };
 
 Actions.propTypes = {

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
 
@@ -8,7 +9,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 * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -17,6 +18,7 @@ import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 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) {
@@ -34,14 +36,16 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
 };
 
 var Columns = function Columns(_ref) {
-  var filterString = _ref.filterString,
+  var _classNames;
+
+  var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
+      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;
+      assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
+      assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
+      selectAllLabel = _ref.selectAllLabel;
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -88,7 +92,21 @@ var Columns = function Columns(_ref) {
   }, 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) {
+  }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React.createElement("div", {
+    id: "".concat(blockClass, "__customize-columns-select-all"),
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), _defineProperty(_classNames, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _classNames)),
+    selected: getVisibleColumnsCount() > 0
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+    checked: getVisibleColumnsCount() === columns.length,
+    empty: !!getVisibleColumnsCount() === 0,
+    indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
+    onChange: function onChange() {
+      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
+    },
+    id: "".concat(blockClass, "__customization-column-select-all"),
+    labelText: selectAllLabel
+  })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
     return /*#__PURE__*/React.createElement(DraggableElement, {
@@ -117,24 +135,31 @@ var Columns = function Columns(_ref) {
             });
           }
         }
-      }
+      },
+      selected: isColumnVisible(colDef)
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       checked: 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
+      title: colDef.Header.props.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox")
     }));
   }))));
 };
 
 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,
   onSelectColumn: PropTypes.func.isRequired,
+  selectAllLabel: PropTypes.string,
+  setColumnStatus: PropTypes.func,
   setColumnsObject: PropTypes.func.isRequired
 };
 export default Columns;