@carbon/ibm-products 2.14.0 → 2.15.0

package/lib/components/CreateFullPage/CreateFullPage.docs-page.js

@@ -34,6 +34,12 @@ var DocsPage = function DocsPage() {
       source: {
         code: "<CreateFullPage\n  title='Page title'\n  breadcrumbsOverflowAriaLabel='Open and close additional breadcrumb item list.'\n  breadcrumbs={[\n    { key: '0', label: 'Breadcrumb 1', href: '/', title: 'home page' },\n    { key: '1', label: 'Breadcrumb 2', href: '/', },\n    { key: '2', label: 'Breadcrumb 3', href:'/' },\n    { key: '3', label: 'Breadcrumb 4', isCurrentPage: true }\n  ]}\n  maxVisibleBreadcrumbs={3}\n  {...props}\n>\n    <CreateFullPageStep {...createFullPageStepProps}>...</CreateFullPageStep>\n</CreateFullPage>"
       }
+    }, {
+      story: stories.createFullPageWithStepInErrorState,
+      description: "Passing an invalid prop to the step will show up an error icon on the progress indicator step indicating an error state in that step",
+      source: {
+        code: "<CreateFullPage {...createFullPageProps}>\n  <CreateFullPageStep\n    title=\"Topic name\"\n    invalid={true}\n  >\n    Step content\n  </CreateFullPageStep>\n</CreateFullPage>"
+      }
     }, {
       title: 'Using custom components',
       description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -18,7 +18,7 @@ var _react2 = require("@carbon/react");
 var _CreateFullPage = require("./CreateFullPage");
 var _hooks = require("../../global/js/hooks");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
+var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "invalid", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -44,6 +44,7 @@ var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.fo
     _ref$includeStep = _ref.includeStep,
     includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     title = _ref.title,
     hasFieldset = _ref.hasFieldset,
     fieldsetLegendText = _ref.fieldsetLegendText,
@@ -61,6 +62,7 @@ var CreateFullPageStep = exports.CreateFullPageStep = /*#__PURE__*/(0, _react.fo
     currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
   });
   (0, _hooks.useRetrieveStepData)({
+    invalid: invalid,
     stepsContext: stepsContext,
     stepNumber: stepNumber,
     introStep: introStep,
@@ -149,6 +151,10 @@ CreateFullPageStep.propTypes = {
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
   introStep: _propTypes.default.bool,
+  /**
+   * This optional prop will indicate an error icon on the progress indicator step item
+   */
+  invalid: _propTypes.default.bool,
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -69,7 +69,8 @@ var CreateInfluencer = exports.CreateInfluencer = function CreateInfluencer(_ref
       return /*#__PURE__*/_react.default.createElement(_react2.ProgressStep, {
         label: step.title,
         key: stepIndex,
-        secondaryLabel: step.secondaryLabel
+        secondaryLabel: step.secondaryLabel,
+        invalid: step.invalid
       });
     })));
   };

package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js

@@ -30,6 +30,13 @@ var DocsPage = function DocsPage() {
       title: 'Using dynamic steps',
       description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
       code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n  const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n    useState(false);\n  return (\n    <CreateTearsheet {...createTearsheetProps}>\n      <CreateTearsheetStep {...step1Props}>\n        Step 1 content\n        <Checkbox\n          labelText={`Include additional step`}\n          id=\"include-additional-step-checkbox\"\n          onChange={(value) => setShouldIncludeAdditionalStep(value)}\n          checked={shouldIncludeAdditionalStep}\n        />\n      </CreateTearsheetStep>\n      <CreateTearsheetStep\n        {...step2Props}\n        includeStep={shouldIncludeAdditionalStep}\n      >\n        Dynamic step content\n      </CreateTearsheetStep>\n      <CreateTearsheetStep {...step3Props}>\n        Final step content\n      </CreateTearsheetStep>\n    </CreateTearsheet>\n  );\n};"
+    }, {
+      story: stories.withErrorState,
+      title: 'Create tearsheet with step in error state',
+      description: 'Passing an invalid prop to the step will show up an error icon on the progress indicator step indicating an error state in that step',
+      source: {
+        code: "<CreateTearsheet {...createTearsheetProps}>\n      <CreateTearsheetStep\n      {...stepProps}\n      invalid={true}\n    >\n      Step in error state\n    </CreateTearsheetStep>\n  </CreateTearsheet>\n  );\n};"
+      }
     }, {
       title: 'Class names',
       description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                            | Element     | Features                                                   |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__step--title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__step--subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__step--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-tearsheet__step--fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n| `#{$pkg-prefix}--create-tearsheet__section--divider`  | divider     | Includes a `1px` divider line inside the `main` content    |\n"

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -18,7 +18,7 @@ var _CreateTearsheet = require("./CreateTearsheet");
 var _settings = require("../../settings");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _hooks = require("../../global/js/hooks");
-var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
+var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -47,6 +47,7 @@ var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.
     _ref$includeStep = _ref.includeStep,
     includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     onMount = _ref.onMount,
     onNext = _ref.onNext,
     onPrevious = _ref.onPrevious,
@@ -69,7 +70,8 @@ var CreateTearsheetStep = exports.CreateTearsheetStep = /*#__PURE__*/(0, _react.
     introStep: introStep,
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
-    title: title
+    title: title,
+    invalid: invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
@@ -172,6 +174,10 @@ CreateTearsheetStep.propTypes = {
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
   introStep: _propTypes.default.bool,
+  /**
+   * This optional prop will indicate an error icon on the progress indicator step item
+   */
+  invalid: _propTypes.default.bool,
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.

package/lib/components/CreateTearsheet/preview-components/MultiStepWithStepInErrorState.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiStepWithStepInErrorState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../../settings");
+var _CreateTearsheet = require("../CreateTearsheet");
+var _CreateTearsheetStep = require("../CreateTearsheetStep");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable react/prop-types */
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step");
+var MultiStepWithStepInErrorState = exports.MultiStepWithStepInErrorState = function MultiStepWithStepInErrorState(_ref) {
+  var backButtonText = _ref.backButtonText,
+    cancelButtonText = _ref.cancelButtonText,
+    className = _ref.className,
+    description = _ref.description,
+    influencerWidth = _ref.influencerWidth,
+    label = _ref.label,
+    nextButtonText = _ref.nextButtonText,
+    submitButtonText = _ref.submitButtonText,
+    title = _ref.title;
+  var _useState = (0, _react.useState)(750),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    simulatedDelay = _useState2[0];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    stepOneTextInputValue = _useState6[0],
+    setStepOneTextInputValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    topicDescriptionValue = _useState8[0],
+    setTopicDescriptionValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(1),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    stepTwoTextInputValue = _useState10[0],
+    setStepTwoTextInputValue = _useState10[1];
+  (0, _react.useState)('one-day');
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    stepOneIsInvalid = _useState12[0],
+    setStepOneIsInvalid = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    stepTwoIsInvalid = _useState14[0],
+    setStepTwoIsInvalid = _useState14[1];
+  var clearCreateData = function clearCreateData() {
+    setStepOneTextInputValue('');
+    setTopicDescriptionValue('');
+    setStepTwoTextInputValue(1);
+    setStepOneIsInvalid(true);
+    setStepTwoIsInvalid(true);
+    setOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, open ? 'Close CreateTearsheet' : 'Open CreateTearsheet'), /*#__PURE__*/_react.default.createElement(_CreateTearsheet.CreateTearsheet, {
+    influencerWidth: influencerWidth,
+    label: label,
+    className: (0, _classnames.default)(blockClass, className),
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    backButtonText: backButtonText,
+    nextButtonText: nextButtonText,
+    description: description,
+    title: title,
+    open: open,
+    onClose: clearCreateData,
+    onRequestSubmit: function onRequestSubmit() {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          clearCreateData();
+          resolve();
+        }, simulatedDelay);
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Topic name",
+    fieldsetLegendText: "Topic information",
+    disableSubmit: stepOneIsInvalid,
+    subtitle: "This is the unique name used to recognize your topic",
+    invalid: stepOneIsInvalid
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+    labelText: "Topic name",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1",
+    value: stepOneTextInputValue,
+    placeholder: "Enter topic name",
+    onChange: function onChange(event) {
+      setStepOneIsInvalid(!event.target.value.length);
+      setStepOneTextInputValue(event.target.value);
+    },
+    invalid: stepOneIsInvalid,
+    invalidText: "This is a required field",
+    onBlur: function onBlur() {}
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+    labelText: "Topic description (optional)",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
+    value: topicDescriptionValue,
+    placeholder: "Enter topic description",
+    onChange: function onChange(event) {
+      return setTopicDescriptionValue(event.target.value);
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Partitions",
+    disableSubmit: stepTwoIsInvalid,
+    subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
+    description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
+    fieldsetLegendText: "Partition information",
+    invalid: stepTwoIsInvalid
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+    xlg: 3,
+    lg: 3,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
+    iconDescription: "Choose a number",
+    id: "carbon-number",
+    min: 1,
+    max: 100,
+    value: stepTwoTextInputValue,
+    label: "Partitions",
+    helperText: "1 partition is sufficient for getting started but, production systems often have more.",
+    invalidText: "Max partitions is 100, min is 1",
+    hideSteppers: true,
+    onChange: function onChange(event) {
+      event.target.value > 0 && event.target.value <= 100 ? setStepTwoIsInvalid(false) : setStepTwoIsInvalid(true);
+      setStepTwoTextInputValue(event.target.value);
+    }
+  }))))));
+};

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -37,6 +37,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var _cx4;
   var datagridState = _ref.datagridState,
@@ -152,7 +153,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
-    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    className: (0, _classnames.default)("".concat(gcClass), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
@@ -162,7 +163,8 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     updateMethod: "batch"
   }, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
-    filterSections: filterProps.sections
+    filterSections: filterProps.sections,
+    autoHideFilters: filterProps.autoHideFilters
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
   }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -26,8 +26,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * LICENSE file in the root directory of this source tree.
  */
 
-// @flow
-
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -69,38 +67,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     incrementAmount = _useState2[0];
-  var getClientXPosition = function getClientXPosition(event) {
-    var isTouchEvent = false;
-    if (event.type === 'touchstart') {
-      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
-      if (event.touches && event.touches.length > 1) {
-        return;
-      }
-      isTouchEvent = true;
-    }
-    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
-    var closestHeader = event.target.closest('th');
-    var closestHeaderCoords = closestHeader.getBoundingClientRect();
-    var headerOffset = closestHeaderCoords.left;
-    var offsetValue = clientX - headerOffset;
-    return offsetValue;
-  };
-  (0, _react.useEffect)(function () {
-    var isResizing = datagridState.state.isResizing;
-    if (isResizing) {
-      var onColResizeEnd = datagridState.onColResizeEnd;
-      document.addEventListener('mouseup', function () {
-        (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch, onColResizeEnd, isResizing);
-        document.activeElement.blur();
-      });
-    }
-    return function () {
-      document.removeEventListener('mouseup', function () {
-        return (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
@@ -121,8 +87,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       state = datagridState.state,
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
-    var columnResizing = state.columnResizing,
-      isResizing = state.isResizing;
+    var columnResizing = state.columnResizing;
     var columnWidths = columnResizing.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
@@ -130,22 +95,11 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
-      onMouseMove: function onMouseMove(event) {
-        if (isResizing) {
-          var newWidth = getClientXPosition(event);
-          // Sets a min width for resizing so at least one character from the column header is visible
-          if (newWidth >= 50) {
-            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth);
-          }
-        }
-      },
-      onMouseDown: function onMouseDown() {
-        return (0, _stateReducer.handleColumnResizeStartEvent)(dispatch, header.id);
-      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
-          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          var originalColMinWidth = originalCol.minWidth || 90;
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
           if (key === 'ArrowLeft') {
             if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
               var newWidth = currentColumnWidth - incrementAmount;
@@ -159,7 +113,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         }
       },
       onKeyUp: function onKeyUp() {
-        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id);
+        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id, true);
       },
       className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
       type: "range",

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -67,7 +67,9 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    _ref$autoHideFilters = _ref.autoHideFilters,
+    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters;
   /** State */
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -85,7 +87,8 @@ var FilterPanel = function FilterPanel(_ref) {
       variation: _constants.PANEL,
       reactTableFiltersState: reactTableFiltersState,
       onCancel: onCancel,
-      panelOpen: panelOpen
+      panelOpen: panelOpen,
+      autoHideFilters: autoHideFilters
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -248,6 +251,7 @@ var FilterPanel = function FilterPanel(_ref) {
   })), renderActionSet()));
 };
 FilterPanel.propTypes = {
+  autoHideFilters: _propTypes.default.bool,
   closeIconDescription: _propTypes.default.string,
   filterPanelMinHeight: _propTypes.default.number,
   filterSections: _propTypes.default.array,

package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js

@@ -31,7 +31,7 @@ var OverflowCheckboxes = function OverflowCheckboxes(_ref) {
     showAllItems = _useState2[0],
     setShowAllItems = _useState2[1];
   var firstFiveItems = filtersState[column].value.slice(0, 5);
-  var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length - 1);
+  var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length);
   var renderCheckbox = function renderCheckbox(option) {
     return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
       key: option.labelText

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -60,7 +60,8 @@ var useFilters = function useFilters(_ref2) {
     reactTableFiltersState = _ref2.reactTableFiltersState,
     _ref2$onCancel = _ref2.onCancel,
     onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
-    panelOpen = _ref2.panelOpen;
+    panelOpen = _ref2.panelOpen,
+    autoHideFilters = _ref2.autoHideFilters;
   /** State */
   var _useState = (0, _react2.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -212,7 +213,7 @@ var useFilters = function useFilters(_ref2) {
       return console.error("type: ".concat(type, "; does not exist as a type of filter."));
     }
     var renderCheckboxes = function renderCheckboxes() {
-      if (variation === _constants.PANEL && filtersState[column].value.length > 10) {
+      if (variation === _constants.PANEL && filtersState[column].value.length > 10 && !autoHideFilters) {
         return /*#__PURE__*/_react2.default.createElement(_OverflowCheckboxes.default, {
           components: components,
           type: type,

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -4,36 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
+exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _settings = require("../../../../settings");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2023, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-var handleColumnResizeStartEvent = exports.handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
-  dispatch({
-    type: COLUMN_RESIZE_START,
-    payload: {
-      headerId: headerId
-    }
-  });
-};
-var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
     type: COLUMN_RESIZE_END,
     payload: {
       onColResizeEnd: onColResizeEnd,
-      headerId: headerId
+      headerId: headerId,
+      isKeyEvent: isKeyEvent
     }
   });
 };
@@ -67,42 +61,45 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
       }
     case COLUMN_RESIZE_START:
       {
-        var headerId = action.payload.headerId;
+        var _ref = action.payload || {},
+          headerId = _ref.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref = action.payload || {},
-          _headerId = _ref.headerId,
-          newWidth = _ref.newWidth,
-          defaultWidth = _ref.defaultWidth;
+        var _ref2 = action.payload || {},
+          _headerId = _ref2.headerId,
+          newWidth = _ref2.newWidth,
+          defaultWidth = _ref2.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
-          var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            _ = _ref3[0],
-            value = _ref3[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            _ = _ref4[0],
+            value = _ref4[1];
           return !isNaN(value);
         }));
+        var headerIdArray = newState.columnResizing.headerIdWidths || [];
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: _headerId,
           columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
             columnWidth: defaultWidth,
             columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
-            headerIdWidths: [_headerId, newWidth]
+            headerIdWidths: [].concat((0, _toConsumableArray2.default)(headerIdArray), [[_headerId, newWidth]])
           })
         });
       }
     case COLUMN_RESIZE_END:
       {
-        var _action$payload = action.payload,
-          onColResizeEnd = _action$payload.onColResizeEnd,
-          _headerId2 = _action$payload.headerId;
+        var _ref5 = action.payload || {},
+          onColResizeEnd = _ref5.onColResizeEnd,
+          _headerId2 = _ref5.headerId,
+          isKeyEvent = _ref5.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -110,8 +107,22 @@ var stateReducer = exports.stateReducer = function stateReducer(newState, action
         if (isResizing) {
           onColResizeEnd === null || onColResizeEnd === void 0 || onColResizeEnd(currentColumn, allChangedColumns);
         }
+        if (!isKeyEvent) {
+          if (typeof isKeyEvent === 'undefined') {
+            // Blur resizer input if it has focus and is not from a key event resize
+            if (document.activeElement.classList.contains("".concat(blockClass, "__col-resizer-range"))) {
+              var _document;
+              (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
+            }
+            return;
+          }
+        }
         return _objectSpread(_objectSpread({}, newState), {}, {
-          isResizing: false
+          isResizing: false,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            isResizingColumn: false,
+            startX: null
+          })
         });
       }
   }

package/lib/components/Datagrid/useActionsColumn.js

@@ -91,7 +91,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 }
               })));
             })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
-              align: "top-right",
+              align: "left",
               size: "sm",
               flipped: true,
               onClick: function onClick(e) {

package/lib/components/Datagrid/useSortableColumns.js

@@ -116,7 +116,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread(_objectSpread({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : 90
+        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : (0, _toConsumableArray2.default)(sortableColumns);