@carbon/ibm-products 1.40.0 → 1.41.1

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

@@ -1,12 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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';
@@ -31,7 +29,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
   return newIndex;
 };
 var Columns = function Columns(_ref) {
-  var _classNames;
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
     filterString = _ref.filterString,
     columns = _ref.columns,
@@ -70,12 +67,7 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
@@ -84,7 +76,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, 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)),
+    className: classNames("".concat(blockClass, "__customize-columns-select-all"), _defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/React.createElement(Checkbox, {
     wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -98,6 +90,24 @@ var Columns = function Columns(_ref) {
   })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
     return /*#__PURE__*/React.createElement(DraggableElement, {
       key: colDef.id,
       index: i,
@@ -125,15 +135,7 @@ var Columns = function Columns(_ref) {
         }
       },
       selected: isColumnVisible(colDef)
-    }, /*#__PURE__*/React.createElement(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,
-      className: "".concat(blockClass, "__customize-columns-checkbox")
-    }));
+    }, listContents);
   }))));
 };
 Columns.propTypes = {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js}

@@ -2,31 +2,30 @@ 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
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
-// @flow
+
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'carbon-components-react';
 import { isColumnVisible } from './common';
 import Columns from './Columns';
 import Actions from './Actions';
 import { pkg } from '../../../../../settings';
 import { useCallback } from 'react';
+import { TearsheetNarrow } from '../../../../Tearsheet';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
+var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   var isOpen = _ref.isOpen,
-    setIsModalOpen = _ref.setIsModalOpen,
+    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
     onSaveColumnPrefs = _ref.onSaveColumnPrefs,
     columnDefinitions = _ref.columnDefinitions,
     originalColumnDefinitions = _ref.originalColumnDefinitions,
-    _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-    customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
+    _ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
+    customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
     _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
     primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
     _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
@@ -80,10 +79,10 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
   var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
   };
   var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
     var updatedColumns = columnObjects.map(function (colDef) {
       return {
         id: colDef.id,
@@ -119,21 +118,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     setVisibleColumnsCount(getVisibleColumnsCount());
     setTotalColumns(columnObjects.length);
   }, [getVisibleColumnsCount, columnObjects.length]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,
-    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/React.createElement(Actions, {
+    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    description: instructionsLabel,
+    actions: [{
+      kind: 'secondary',
+      label: secondaryButtonTextLabel,
+      onClick: onRequestClose
+    }, {
+      kind: 'primary',
+      label: primaryButtonTextLabel,
+      onClick: onRequestSubmit,
+      disabled: !isDirty
+    }]
+  }, /*#__PURE__*/React.createElement(Actions, {
     columns: columnObjects,
     originalColumnDefinitions: originalColumnDefinitions,
     searchText: searchText,
@@ -158,11 +158,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     selectAllLabel: selectAllLabel
   }));
 };
-CustomizeColumnsModal.propTypes = {
+CustomizeColumnsTearsheet.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,
   columnDefinitions: PropTypes.array.isRequired,
-  customizeModalHeadingLabel: PropTypes.string,
+  customizeTearsheetHeadingLabel: PropTypes.string,
   findColumnPlaceholderLabel: PropTypes.string,
   instructionsLabel: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
@@ -172,6 +172,6 @@ CustomizeColumnsModal.propTypes = {
   resetToDefaultLabel: PropTypes.string,
   secondaryButtonTextLabel: PropTypes.string,
   selectAllLabel: PropTypes.string,
-  setIsModalOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired
 };
-export default CustomizeColumnsModal;
+export default CustomizeColumnsTearsheet;

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet';
+var TearsheetWrapper = function TearsheetWrapper(_ref) {
+  var instance = _ref.instance;
+  var _instance$customizeCo = instance.customizeColumnsProps,
+    _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
+    isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
+    setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
+    labels = _instance$customizeCo.labels,
+    rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
+  return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
+    isOpen: isTearsheetOpen,
+    setIsTearsheetOpen: setIsTearsheetOpen,
+    columnDefinitions: instance.allColumns,
+    originalColumnDefinitions: instance.columns,
+    onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
+      var hiddenIds = updatedColDefs.filter(function (colDef) {
+        return !colDef.isVisible;
+      }).map(function (colDef) {
+        return colDef.id;
+      });
+      instance.setHiddenColumns(hiddenIds);
+      if (typeof instance.setColumnOrder === 'function') {
+        instance.setColumnOrder(updatedColDefs.map(function (colDef) {
+          return colDef.id;
+        }));
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
+      }
+      if (typeof _onSaveColumnPrefs === 'function') {
+        _onSaveColumnPrefs(updatedColDefs);
+      }
+    }
+  }));
+};
+TearsheetWrapper.propTypes = {
+  instance: PropTypes.object.isRequired
+};
+export default TearsheetWrapper;

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

@@ -1,10 +1,9 @@
-/*
- * 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.
+/**
+ * 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.
  */
 
-export { default as CustomizeColumnsModalWrapper } from './ModalWrapper';
+export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper';
 export { default as ToggleButtonWrapper } from './ButtonWrapper';

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
-    shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters,
-    setFilter = _ref.setFilter;
+    setAllFilters = _ref.setAllFilters;
   /** Context state and methods */
   var _useContext = useContext(FilterContext),
     EventEmitter = _useContext.EventEmitter;
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
     prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
   };
   var cancel = function cancel() {
-    revertToPreviousFilters();
-    onCancel();
+    // Reverting to previous filters only applies when using batch actions
+    if (updateMethod === BATCH) {
+      revertToPreviousFilters();
+      onCancel();
+    }
     closeFlyout();
   };
   var reset = function reset() {
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
     if (type === DATE && !value[1]) {
       return;
     }
-    if (updateMethod === BATCH) {
-      var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
-      // check if the filter already exists in the array
-      var filter = filtersObjectArrayCopy.find(function (item) {
-        return item.id === column;
+    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    // check if the filter already exists in the array
+    var filter = filtersObjectArrayCopy.find(function (item) {
+      return item.id === column;
+    });
+
+    // if filter exists in array then update the filter's new value
+    if (filter) {
+      filter.value = value;
+    } else {
+      filtersObjectArrayCopy.push({
+        id: column,
+        value: value,
+        type: type
       });
+    }
+    setFiltersObjectArray(filtersObjectArrayCopy);
 
-      // if filter exists in array then update the filter's new value
-      if (filter) {
-        filter.value = value;
-      } else {
-        filtersObjectArrayCopy.push({
-          id: column,
-          value: value,
-          type: type
-        });
-      }
-      setFiltersObjectArray(filtersObjectArrayCopy);
-    } else if (updateMethod === INSTANT) {
-      setFilter(column, value);
+    // Automatically apply the filters if the updateMethod is instant
+    if (updateMethod === INSTANT) {
+      setAllFilters(filtersObjectArrayCopy);
     }
-  }, [setFilter, updateMethod, filtersObjectArray]);
+  }, [setAllFilters, updateMethod, filtersObjectArray]);
 
   /** Effects */
   useClickOutside(filterFlyoutRef, function (target) {
-    if (shouldClickOutsideToClose === false) {
-      return;
-    }
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
     if (!open || hasClickedOnDatePicker) {
       return;
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
    * Function that sets all the filters, this comes from the datagridState
    */
   setAllFilters: PropTypes.func.isRequired,
-  /**
-   * Function that sets an individual filter, this comes from the datagridState
-   */
-  setFilter: PropTypes.func.isRequired,
-  /**
-   * Boolean if you want the flyout to close when clicked outside of the parent
-   */
-  shouldClickOutsideToClose: PropTypes.bool,
   /**
    * Title of the filter flyout
    */

package/es/components/Datagrid/Datagrid.stories/index.js

@@ -2,4 +2,4 @@ export { story as CustomizeColumnStory } from './CustomizeColumnStory';
 export { default as StickyActionsColumn } from './StickyActionsColumnStory';
 export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
 export { story as LeftPanelStory } from './LeftPanelStory';
-export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';
+export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';

package/es/components/Datagrid/useCustomizeColumns.js

@@ -3,39 +3,37 @@ 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; }
-// @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.
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import * as React from 'react';
-import { CustomizeColumnsModalWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
+import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
 var useCustomizeColumns = function useCustomizeColumns(hooks) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    isModalOpen = _React$useState2[0],
-    setIsModalOpen = _React$useState2[1];
+    isTearsheetOpen = _React$useState2[0],
+    setIsTearsheetOpen = _React$useState2[1];
   hooks.useInstance.push(function (instance) {
     var customizeColumnsProps = instance.customizeColumnsProps;
     var _ref = customizeColumnsProps || {},
       labels = _ref.labels;
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
-        isModalOpen: isModalOpen,
-        setIsModalOpen: setIsModalOpen
+        isTearsheetOpen: isTearsheetOpen,
+        setIsTearsheetOpen: setIsTearsheetOpen
       }),
       CustomizeColumnsButton: function CustomizeColumnsButton(props) {
         return /*#__PURE__*/React.createElement(ToggleButtonWrapper, _extends({
           iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
-          isModalOpen: isModalOpen,
-          setIsModalOpen: setIsModalOpen
+          isTearsheetOpen: isTearsheetOpen,
+          setIsTearsheetOpen: setIsTearsheetOpen
         }, props));
       },
-      CustomizeColumnsModal: CustomizeColumnsModalWrapper
+      CustomizeColumnsTearsheet: CustomizeColumnsTearsheetWrapper
     });
   });
 };

package/es/components/Datagrid/useFiltering.js

@@ -61,7 +61,6 @@ var useFiltering = function useFiltering(hooks) {
   hooks.useInstance.push(function (instance) {
     var filterProps = instance.filterProps,
       setAllFilters = instance.setAllFilters,
-      setFilter = instance.setFilter,
       headers = instance.headers;
     var defaultProps = {
       variation: 'flyout'
@@ -69,7 +68,6 @@ var useFiltering = function useFiltering(hooks) {
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
         setAllFilters: setAllFilters,
-        setFilter: setFilter,
         headers: headers
       });
     };

package/es/components/Datagrid/useParentDimensions.js

@@ -12,6 +12,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
   var headRef = useRef();
   var innerListRef = useRef();
   var listRef = useRef();
+  var gridRef = useRef();
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     tableHeight = _useState2[0],
@@ -47,7 +48,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
       headRef: headRef,
       innerListRef: innerListRef,
       handleResize: handleResize,
-      listRef: listRef
+      listRef: listRef,
+      gridRef: gridRef
     });
   };
   hooks.useInstance.push(useInstance);

package/es/components/Datagrid/utils/getArgTypes.js

@@ -90,5 +90,10 @@ export var ARG_TYPES = {
   customizeColumnsProps: {
     control: 'object',
     description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  },
+  filterProps: {
+    name: 'Filter props',
+    control: 'object',
+    description: 'This is an object for all the props passed into the filter flyout and filter panel'
   }
 };

package/es/components/Datagrid/utils/getInlineEditColumns.js

@@ -74,8 +74,13 @@ export var getInlineEditColumns = function getInlineEditColumns() {
     accessor: 'visits',
     width: 120,
     inlineEdit: {
+      validator: function validator(n) {
+        return n && n < 10;
+      },
       type: 'number',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 10 or greater'
+      } // These props are passed to the Carbon component used for inline editing
     }
   }, {
     Header: 'Active since',

package/es/components/ImportModal/ImportModal.js

@@ -111,51 +111,49 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt) {
       var fileName, pendingFile, response, blob, fetchedFile, failedFile;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              evt.preventDefault();
-              fileName = importUrl.substring(importUrl.lastIndexOf('/') + 1).split('?')[0];
-              pendingFile = {
-                name: fileName,
-                status: 'uploading',
-                uuid: uuidv4()
-              };
-              setFiles([pendingFile]);
-              _context.prev = 4;
-              _context.next = 7;
-              return fetch(importUrl);
-            case 7:
-              response = _context.sent;
-              if (!(!response.ok || response.status !== 200)) {
-                _context.next = 10;
-                break;
-              }
-              throw new Error(response.status);
-            case 10:
-              _context.next = 12;
-              return response.blob();
-            case 12:
-              blob = _context.sent;
-              fetchedFile = new File([blob], fileName, {
-                type: blob.type
-              });
-              fetchedFile.invalidFileType = isInvalidFileType(fetchedFile);
-              fetchedFile.uuid = pendingFile.uuid;
-              updateFiles([fetchedFile]);
-              _context.next = 23;
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            evt.preventDefault();
+            fileName = importUrl.substring(importUrl.lastIndexOf('/') + 1).split('?')[0];
+            pendingFile = {
+              name: fileName,
+              status: 'uploading',
+              uuid: uuidv4()
+            };
+            setFiles([pendingFile]);
+            _context.prev = 4;
+            _context.next = 7;
+            return fetch(importUrl);
+          case 7:
+            response = _context.sent;
+            if (!(!response.ok || response.status !== 200)) {
+              _context.next = 10;
               break;
-            case 19:
-              _context.prev = 19;
-              _context.t0 = _context["catch"](4);
-              failedFile = _objectSpread(_objectSpread({}, pendingFile), {}, {
-                fetchError: true
-              });
-              updateFiles([failedFile]);
-            case 23:
-            case "end":
-              return _context.stop();
-          }
+            }
+            throw new Error(response.status);
+          case 10:
+            _context.next = 12;
+            return response.blob();
+          case 12:
+            blob = _context.sent;
+            fetchedFile = new File([blob], fileName, {
+              type: blob.type
+            });
+            fetchedFile.invalidFileType = isInvalidFileType(fetchedFile);
+            fetchedFile.uuid = pendingFile.uuid;
+            updateFiles([fetchedFile]);
+            _context.next = 23;
+            break;
+          case 19:
+            _context.prev = 19;
+            _context.t0 = _context["catch"](4);
+            failedFile = _objectSpread(_objectSpread({}, pendingFile), {}, {
+              fetchError: true
+            });
+            updateFiles([failedFile]);
+          case 23:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[4, 19]]);
     }));

package/es/components/index.js

@@ -37,7 +37,7 @@ export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProv
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';