@carbon/ibm-products 2.19.2 → 2.21.0

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -168,7 +168,6 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       onClick: handleSelectAllClick,
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
-      var _cx2;
       var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React.createElement("div", _extends({
         key: "column_".concat(index),
@@ -188,7 +187,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));

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

@@ -29,7 +29,6 @@ import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 export var DatagridContent = function DatagridContent(_ref) {
-  var _cx5;
   var datagridState = _ref.datagridState,
     title = _ref.title;
   var _useContext = useContext(InlineEditContext),
@@ -132,8 +131,6 @@ export var DatagridContent = function DatagridContent(_ref) {
   useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
     return clearSingleFilter(id, setAllFilters, state);
   });
-
-  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -146,15 +143,13 @@ export var DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
-    className: cx("".concat(gcClass), (_cx5 = {}, _defineProperty(_cx5, "".concat(gcClass, "-active"), gridActive), _defineProperty(_cx5, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), _defineProperty(_cx5, "".concat(gcClass, "-inline-edit"), withInlineEdit), _defineProperty(_cx5, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), _defineProperty(_cx5, "".concat(blockClass, "__with-pagination"), DatagridPagination), _defineProperty(_cx5, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx5)),
+    className: cx("".concat(gcClass), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
-    updateMethod: "batch"
-  }, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -46,6 +46,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
     resizerAriaLabel = _ref.resizerAriaLabel;
+  // eslint-disable-next-line no-unused-vars
   var role = resizerProps.role,
     headerProps = _objectWithoutProperties(resizerProps, _excluded);
   var mouseDownHandler = function mouseDownHandler(evt) {
@@ -71,9 +72,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
   var keyUpHandler = function keyUpHandler() {
     handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, headerProps, role === 'separator' && {
-    role: role
-  }, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, headerProps, {
     onMouseDown: mouseDownHandler,
     onKeyDown: keyDownHandler,
     onKeyUp: keyUpHandler,
@@ -128,16 +127,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     headerGroupClassName = _headerGroup$getHeade.className,
     role = _headerGroup$getHeade.role,
     headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
-  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, role === 'row' && {
-    role: role
-  }, {
+  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, {
     className: cx("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index) {
-    var _header$getResizerPro, _cx;
+    var _header$getResizerPro;
     if (header.id === selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
@@ -160,12 +157,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), resizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _defineProperty(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx)),
+      className: cx(headerClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction)),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header), role === 'columnheader' && {
-      role: role
-    }), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -29,7 +29,6 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _cx;
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
@@ -93,7 +92,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -102,6 +101,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
+
+  // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps(),
     role = _row$getRowProps.role,
     rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
@@ -116,11 +117,10 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps(), role === 'row' && {
-    role: role
-  }), row.cells.map(function (cell, index) {
-    var _cell$column;
+  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
+    var _cell$column, _content$props;
     var cellProps = cell.getCellProps();
+    // eslint-disable-next-line no-unused-vars
     var children = cellProps.children,
       role = cellProps.role,
       restProps = _objectWithoutProperties(cellProps, _excluded2);
@@ -131,13 +131,12 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
+    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     return /*#__PURE__*/React.createElement(TableCell, _extends({
       className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
-      key: cell.column.id
-      // avoid unnecessary role assignment to cells
-    }, role === 'cell' && {
-      role: role
+      key: cell.column.id,
+      title: title
     }), content);
   })), renderExpandedRow());
 };

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

@@ -17,7 +17,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { useSortable } from '@dnd-kit/sortable';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DraggableElement = function DraggableElement(_ref) {
-  var _cx;
   var id = _ref.id,
     children = _ref.children,
     classList = _ref.classList,
@@ -49,7 +48,7 @@ var DraggableElement = function DraggableElement(_ref) {
     transition: transition
   };
   return /*#__PURE__*/React.createElement("li", _extends({
-    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging), _cx)),
+    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
     id: id,
     ref: setNodeRef,
     style: style

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,25 +13,30 @@ import { IconButton, usePrefix } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
-import { useClickOutside } from '../../../../../global/js/hooks';
+import { useClickOutside, useWindowResize } from '../../../../../global/js/hooks';
 import { pkg } from '../../../../../settings';
 import { ActionSet } from '../../../../ActionSet';
 import { BATCH, CLEAR_FILTERS, FLYOUT, INSTANT } from './constants';
 import { useSubscribeToEventEmitter, useFilters, useShouldDisableButtons } from './hooks';
+import { px, breakpoints } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
+var defaults = {
+  flyoutIconDescription: 'Open filters',
+  title: 'Filter',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel'
+};
 var FilterFlyout = function FilterFlyout(_ref) {
-  var _cx2;
-  var _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
+  var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
-    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? 'Open filters' : _ref$flyoutIconDescri,
+    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$onFlyoutOpen = _ref.onFlyoutOpen,
     onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
     _ref$onFlyoutClose = _ref.onFlyoutClose,
@@ -41,7 +46,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -52,6 +57,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    stackedLayout = _useState4[0],
+    setStackedLayout = _useState4[1];
   var _useFilters = useFilters({
       updateMethod: updateMethod,
       filters: filters,
@@ -68,9 +77,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
     renderFilter = _useFilters.renderFilter,
     filtersObjectArray = _useFilters.filtersObjectArray,
     lastAppliedFilters = _useFilters.lastAppliedFilters;
+  var width = breakpoints.md.width;
+  var mdPxWidth = parseInt(width) * 16;
 
   /** Refs */
   var filterFlyoutRef = useRef(null);
+  var flyoutInnerRef = useRef(null);
+  var flyoutFiltersContainerRef = useRef(null);
 
   /** State from hooks */
   var _useShouldDisableButt = useShouldDisableButtons({
@@ -82,6 +95,36 @@ var FilterFlyout = function FilterFlyout(_ref) {
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
 
+  // Skip resize testing
+  /* istanbul ignore next */
+  var handleResize = function handleResize(current) {
+    var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
+    var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
+    // Check to see if left value from flyout getBoundingClientRect is a negative number
+    // If it is, that is the amount we need to subtract from the flyout width
+    if (Math.sign(filterFlyoutRefPosition.left) === -1) {
+      var newFlyoutWidth = originalFlyoutWidth - Math.abs(filterFlyoutRefPosition.left);
+      flyoutInnerRef.current.style.width = px(newFlyoutWidth);
+    }
+    // Check to see if left value from flyout getBoundingClientRect is a positive number or 0
+    // If it is, that is the amount we need to add to the flyout width until we reach the
+    // max-width of the flyout (642)
+    if (originalFlyoutWidth < 642 && Math.sign(filterFlyoutRefPosition.left) === 1 || Math.sign(filterFlyoutRefPosition.left).toString() === '0') {
+      var _newFlyoutWidth = originalFlyoutWidth + Math.abs(filterFlyoutRefPosition.left);
+      flyoutInnerRef.current.style.width = px(_newFlyoutWidth);
+    }
+    // Begin stacking filters at this specific point
+    if ((current === null || current === void 0 ? void 0 : current.innerWidth) <= mdPxWidth + 254) {
+      setStackedLayout(true);
+    } else {
+      setStackedLayout(false);
+    }
+  };
+  useWindowResize(function (_ref2) {
+    var current = _ref2.current;
+    handleResize(current);
+  });
+
   /** Memos */
   var showActionSet = updateMethod === BATCH;
   var carbonPrefix = usePrefix();
@@ -94,7 +137,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
   var closeFlyout = function closeFlyout() {
     setOpen(false);
     onFlyoutClose();
+    flyoutInnerRef.current.style.width = px(642);
   };
+  useEffect(function () {
+    // Initialize flyout width
+    flyoutInnerRef.current.style.width = px(642);
+  }, []);
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     closeFlyout();
@@ -162,13 +210,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
     className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
-    className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
+    className: cx(componentClass, _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
+    ref: flyoutInnerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(componentClass, "__inner-container")
   }, /*#__PURE__*/React.createElement("span", {
     className: "".concat(componentClass, "__title")
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__filters")
+    className: cx("".concat(componentClass, "__filters"), _defineProperty({}, "".concat(componentClass, "__stacked"), stackedLayout)),
+    ref: flyoutFiltersContainerRef
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,20 +20,26 @@ import { Close } from '@carbon/react/icons';
 import { FilterContext } from '.';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 import { pkg } from '../../../../../settings';
 import { rem } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = motion(ActionSet);
+var defaults = {
+  title: 'Filter',
+  closeIconDescription: 'Close filter panel',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel',
+  searchLabelText: 'Filter search',
+  searchPlaceholder: 'Find filters'
+};
 var FilterPanel = function FilterPanel(_ref) {
-  var _cx;
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
-    _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    updateMethod = _ref.updateMethod,
     filterSections = _ref.filterSections,
     setAllFilters = _ref.setAllFilters,
     _ref$onApply = _ref.onApply,
@@ -49,13 +55,13 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
     filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     _ref$searchLabelText = _ref.searchLabelText,
-    searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
     _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
@@ -107,6 +113,7 @@ var FilterPanel = function FilterPanel(_ref) {
     _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
+  var shouldReduceMotion = useReducedMotion();
 
   /** Memos */
   var showActionSet = useMemo(function () {
@@ -149,6 +156,7 @@ var FilterPanel = function FilterPanel(_ref) {
       }],
       className: "".concat(componentClass, "__action-set"),
       ref: actionSetRef,
+      custom: shouldReduceMotion,
       variants: actionSetVariants
     });
   };
@@ -178,16 +186,19 @@ var FilterPanel = function FilterPanel(_ref) {
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
     var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
-    var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)");
+    var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
+    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)");
     return height;
   };
   return /*#__PURE__*/React.createElement(motion.div, {
     ref: filterPanelRef,
-    className: cx(componentClass, "".concat(componentClass, "__container"), (_cx = {}, _defineProperty(_cx, "".concat(componentClass, "--open"), panelOpen), _defineProperty(_cx, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
+    className: cx(componentClass, "".concat(componentClass, "__container"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
+    custom: shouldReduceMotion,
     variants: panelVariants
   }, /*#__PURE__*/React.createElement(motion.div, {
+    custom: shouldReduceMotion,
     variants: innerContainerVariants
   }, /*#__PURE__*/React.createElement("header", {
     ref: filterHeadingRef,
@@ -206,7 +217,10 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/React.createElement("div", {
+  }), showFilterSearch &&
+  /*#__PURE__*/
+  /* istanbul ignore next */
+  React.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(Search, {

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

@@ -50,8 +50,7 @@ var useFilters = function useFilters(_ref2) {
     setAllFilters = _ref2.setAllFilters,
     variation = _ref2.variation,
     reactTableFiltersState = _ref2.reactTableFiltersState,
-    _ref2$onCancel = _ref2.onCancel,
-    onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
+    onCancel = _ref2.onCancel,
     panelOpen = _ref2.panelOpen,
     autoHideFilters = _ref2.autoHideFilters,
     isFetching = _ref2.isFetching;

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2023, 2023
+ * Copyright IBM Corp. 2023, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,8 +18,7 @@ import isEqual from 'lodash/isEqual';
  * @returns {Array} returns a tuple of the state and setter function
  */
 var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+  var initialValue = _ref.initialValue,
     filtersState = _ref.filtersState,
     prevFiltersRef = _ref.prevFiltersRef;
   var _useState = useState(initialValue),

package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js

@@ -1,55 +1,77 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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 { DURATIONS, EASINGS } from '../../../../../../global/js/utils/motionConstants';
 import { ACTION_SET_HEIGHT, PANEL_WIDTH } from '../constants';
 export var panelVariants = {
-  hidden: {
-    width: 0,
-    overflow: 'hidden',
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.exit,
-      when: 'afterChildren'
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      width: 0,
+      overflow: 'hidden',
+      transition: {
+        duration: shouldReduceMotion ? 0 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit,
+        when: 'afterChildren'
+      }
+    };
   },
-  visible: {
-    width: PANEL_WIDTH,
-    overflow: 'visible',
-    transition: {
-      duration: DURATIONS.moderate02,
-      ease: EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      width: PANEL_WIDTH,
+      overflow: 'visible',
+      transition: {
+        duration: shouldReduceMotion ? 0 : DURATIONS.moderate02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        when: 'beforeChildren'
+      }
+    };
   }
 };
 export var innerContainerVariants = {
-  hidden: {
-    opacity: 0,
-    transition: {
-      duration: DURATIONS.fast01,
-      ease: EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: 0,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        when: shouldReduceMotion ? null : 'beforeChildren'
+      }
+    };
   }
 };
 export var actionSetVariants = {
-  hidden: {
-    y: ACTION_SET_HEIGHT,
-    transition: {
-      duration: DURATIONS.fast01,
-      ease: EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      y: shouldReduceMotion ? 0 : ACTION_SET_HEIGHT,
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    y: 0,
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.entrance
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
+      }
+    };
   }
 };

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

@@ -23,9 +23,7 @@ var applyInitialFilters = function applyInitialFilters(filterState, initialFilte
 };
 
 // This functions takes the filters passed in and makes an object to track it's state
-export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
-  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
-  var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+export var getInitialStateFromFilters = function getInitialStateFromFilters(filters, variation, initialFilters) {
   var initialFilterState = {};
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
@@ -80,8 +78,6 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
         return setInitialState(filter);
       });
     });
-  } else {
-    console.error('No variation passed into useInitialStateFromFilters');
   }
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);