@carbon/ibm-products 1.11.2 → 1.14.0

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["onChange"];
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020, 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+// @flow
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import InlineCheckbox from 'carbon-components-react/lib/components/InlineCheckbox';
+import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { CaretDown16 } from '@carbon/icons-react';
+import { pkg } from '../../../settings'; // cspell:words columnheader
+
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var SELECT_ALL_PAGE_ROWS = 'pageRows';
+var SELECT_ALL_ROWS = 'allRows';
+
+var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var tableId = _ref.tableId,
+      isFetching = _ref.isFetching,
+      isAllRowsSelected = _ref.isAllRowsSelected,
+      selectAllToggle = _ref.selectAllToggle,
+      getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
+      getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+      _ref$allPageRowsLabel = _ref.allPageRowsLabel,
+      allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
+      _ref$allRowsLabel = _ref.allRowsLabel,
+      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel;
+
+  var _useState = useState(SELECT_ALL_PAGE_ROWS),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectAllMode = _useState2[0],
+      setSelectAllMode = _useState2[1];
+
+  useEffect(function () {
+    if (onSelectAllRows) {
+      onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
+    }
+  }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
+
+  var _ref2 = selectAllToggle || {},
+      onSelectAllRows = _ref2.onSelectAllRows,
+      labels = _ref2.labels;
+
+  if (labels) {
+    allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
+    allRowsLabel = labels.allRows || allRowsLabel;
+  }
+
+  var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+
+  var _getProps = getProps(),
+      onChange = _getProps.onChange,
+      selectProps = _objectWithoutProperties(_getProps, _excluded);
+
+  var disabled = isFetching || selectProps.disabled;
+  return /*#__PURE__*/React.createElement("th", {
+    role: "columnheader",
+    scope: "col",
+    className: "".concat(blockClass, "__select-all-toggle-on")
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineCheckbox, _extends({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onClick: function onClick(e) {
+      onChange(e);
+    },
+    disabled: disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id")
+  }))), /*#__PURE__*/React.createElement(OverflowMenu, {
+    renderIcon: CaretDown16,
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: allPageRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_PAGE_ROWS); // deselect all rows first
+
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: false
+        }
+      }); // select all row on current page
+
+      getToggleAllPageRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: allRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_ROWS);
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  })));
+};
+
+SelectAllWithToggle.propTypes = {
+  allPageRowsLabel: PropTypes.string,
+  allRowsLabel: PropTypes.string,
+  getToggleAllPageRowsSelectedProps: PropTypes.func.isRequired,
+  getToggleAllRowsSelectedProps: PropTypes.func.isRequired,
+  isAllRowsSelected: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool,
+  selectAllToggle: PropTypes.object,
+  tableId: PropTypes.string.isRequired
+};
+export default SelectAllWithToggle;

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -0,0 +1,36 @@
+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
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+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 TableBody = DataTable.TableBody;
+
+var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+      rows = datagridState.rows,
+      prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
+    className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+  }), rows.map(function (row) {
+    prepareRow(row);
+    return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    }));
+  }));
+};
+
+export default DatagridSimpleBody;

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

@@ -0,0 +1,22 @@
+/*
+ * 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 React from 'react';
+import { DataTable } from 'carbon-components-react';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var TableToolbar = DataTable.TableToolbar;
+
+var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var DatagridActions = datagridState.DatagridActions,
+      DatagridBatchActions = datagridState.DatagridBatchActions;
+  return DatagridActions || DatagridBatchActions ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__table-toolbar")
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+
+export default DatagridToolbar;

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

@@ -0,0 +1,87 @@
+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
+ * (c) Copyright IBM Corp. 2020 - 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React, { useEffect } from 'react';
+import { VariableSizeList } from 'react-window';
+import { DataTable } from 'carbon-components-react';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var TableBody = DataTable.TableBody;
+var rowSizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+  // TODO: deprecate the below values in next major release (v8) on carbon-components-react
+  short: 32,
+  compact: 24,
+  normal: 48,
+  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;
+  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,
+    itemCount: visibleRows.length,
+    itemSize: function itemSize(index) {
+      return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
+    },
+    estimatedItemSize: rowHeight,
+    onScroll: onScroll,
+    innerRef: innerListRef,
+    ref: listRef,
+    className: "".concat(blockClass, "__virtual-scrollbar")
+  }, function (_ref) {
+    var index = _ref.index,
+        style = _ref.style;
+    var row = visibleRows[index];
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        overflow: withOverflowRow ? 'visible' : 'hidden'
+      })
+    }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    })));
+  }));
+};
+
+export default DatagridVirtualBody;

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

@@ -0,0 +1,188 @@
+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 { Draggable16 } from '@carbon/icons-react';
+import { useDrag, useDrop } from 'react-dnd';
+import cx from 'classnames';
+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 = 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 = _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
+    }, 'wkc-draggable-handleStyle')
+  }, /*#__PURE__*/React.createElement(Draggable16, null)), children);
+  return /*#__PURE__*/React.createElement("li", {
+    className: cx({
+      '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: cx({
+      'wkc-draggable-handleStyle': !disabled
+    }, 'wkc-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,
+  listData: PropTypes.array.isRequired,
+  moveElement: PropTypes.func.isRequired,
+  onArrowKeyDown: PropTypes.func.isRequired,
+  onGrab: PropTypes.func.isRequired,
+  positionLabel: PropTypes.string,
+  type: PropTypes.string.isRequired
+};
+export default DraggableElement;

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

@@ -0,0 +1,78 @@
+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
+
+/*
+ * 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 { Reset16 } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import { Button, 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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-modal--actions"),
+    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+  }, /*#__PURE__*/React.createElement(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(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 = {
+  columns: PropTypes.array.isRequired,
+  findColumnPlaceholderLabel: PropTypes.string,
+  originalColumnDefinitions: PropTypes.array.isRequired,
+  resetToDefaultLabel: PropTypes.string,
+  searchText: PropTypes.string.isRequired,
+  setColumnsObject: PropTypes.func.isRequired,
+  setSearchText: PropTypes.func.isRequired
+};
+export default Actions;

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

@@ -0,0 +1,51 @@
+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
+ * (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 { 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);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    renderIcon: 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.string,
+  isModalOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  setIsModalOpen: PropTypes.func.isRequired
+};
+export default ButtonWrapper;