@carbon/ibm-products 2.26.0 → 2.27.0

package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkForHoldingKey = function checkForHoldingKey(event, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key == 'cmd') {
+    return event.metaKey || event.ctrlKey;
+  } else {
+    return event[key];
+  }
+};
+
+exports.checkForHoldingKey = checkForHoldingKey;

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

@@ -24,7 +24,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["datagridState", "title"];
+var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 
@@ -34,6 +34,7 @@ var componentName = 'Datagrid';
 exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
     title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole["default"].warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -49,7 +50,8 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
     title: title,
-    datagridState: datagridState
+    datagridState: datagridState,
+    ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default["default"].createElement(FilterProvider.FilterProvider, {
     filters: filters,
@@ -70,6 +72,11 @@ exports.Datagrid = settings.pkg.checkComponentEnabled(exports.Datagrid, componen
 // is used in preference to relying on function.name.
 exports.Datagrid.displayName = componentName;
 exports.Datagrid.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaToolbarLabel: index$1["default"].string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */

package/lib/components/Datagrid/Datagrid/DatagridContent.d.ts

@@ -1,9 +1,11 @@
-export function DatagridContent({ datagridState, title }: {
+export function DatagridContent({ datagridState, title, ariaToolbarLabel }: {
     datagridState: any;
     title: any;
+    ariaToolbarLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace DatagridContent {
     namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
         let datagridState: PropTypes.Requireable<PropTypes.InferProps<{
             getTableProps: PropTypes.Requireable<(...args: any[]) => any>;
             getFilterFlyoutProps: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -38,7 +38,8 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = function DatagridContent(_ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title;
+    title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel;
   var _useContext = React.useContext(InlineEditContext.InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -159,7 +160,9 @@ var DatagridContent = function DatagridContent(_ref) {
     className: index["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__default["default"].createElement(DatagridToolbar["default"], datagridState), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(DatagridToolbar["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    ariaToolbarLabel: ariaToolbarLabel
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
   }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps(), {
@@ -179,6 +182,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }));
 };
 DatagridContent.propTypes = {
+  ariaToolbarLabel: index$1["default"].string,
   datagridState: index$1["default"].shape({
     getTableProps: index$1["default"].func,
     getFilterFlyoutProps: index$1["default"].func,

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

@@ -50,7 +50,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     minWidth = _ref.minWidth,
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
-    resizerAriaLabel = _ref.resizerAriaLabel;
+    resizerAriaLabel = _ref.resizerAriaLabel,
+    isFetching = _ref.isFetching;
   // eslint-disable-next-line no-unused-vars
   resizerProps.role;
     var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(resizerProps, _excluded);
@@ -88,7 +89,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     className: "".concat(blockClass, "__col-resizer-range"),
     type: "range",
     defaultValue: originalCol.width,
-    "aria-label": resizerAriaLabel || 'Resize column'
+    "aria-label": resizerAriaLabel || 'Resize column',
+    disabled: isFetching
   })), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
@@ -96,7 +98,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
-    rows = datagridState.rows;
+    rows = datagridState.rows,
+    isFetching = datagridState.isFetching;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   React.useEffect(function () {
@@ -197,7 +200,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       minWidth: minWidth,
       dispatch: dispatch,
       onColResizeEnd: onColResizeEnd,
-      resizerAriaLabel: resizerAriaLabel
+      resizerAriaLabel: resizerAriaLabel,
+      isFetching: isFetching
     }));
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts

@@ -1,2 +1,11 @@
 export default DatagridToolbar;
-declare function DatagridToolbar(datagridState: any): import("react/jsx-runtime").JSX.Element | null;
+declare function DatagridToolbar({ ariaToolbarLabel, ...datagridState }: {
+    [x: string]: any;
+    ariaToolbarLabel: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DatagridToolbar {
+    namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var index$1 = require('../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
 var settings = require('../../../settings.js');
@@ -21,6 +22,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _excluded = ["ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid__table-toolbar");
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = React.useState(false),
@@ -115,6 +117,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   };
   var onCancelHandler = function onCancelHandler() {
+    stateReducer.handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: [],
+      getRowId: getRowId,
+      isChecked: false
+    });
     toggleAllRowsSelected(false);
     setGlobalFilter(null);
   };
@@ -152,7 +160,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   })), renderBatchActionOverflow());
 };
-var DatagridToolbar = function DatagridToolbar(datagridState) {
+var DatagridToolbar = function DatagridToolbar(_ref2) {
+  var ariaToolbarLabel = _ref2.ariaToolbarLabel,
+    datagridState = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
   var ref = React.useRef(null);
   var _useResizeObserver = useResizeObserver.useResizeObserver(ref),
     width = _useResizeObserver.width;
@@ -164,9 +174,16 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
     className: index["default"]([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableToolbar, null, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(react.TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: blockClass
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableToolbar, null, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React__default["default"].createElement(react.TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default["default"].createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+DatagridToolbar.propTypes = {
+  ariaToolbarLabel: index$1["default"].string
 };
 var DatagridToolbar$1 = DatagridToolbar;
 

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

@@ -147,22 +147,45 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
   });
   return tags;
 };
-var FilterProvider = function FilterProvider(_ref3) {
-  var children = _ref3.children,
-    filters = _ref3.filters,
-    filterProps = _ref3.filterProps;
-  var _ref4 = filterProps || {},
-    renderDateLabel = _ref4.renderDateLabel;
+var filteringReducer = function filteringReducer(state, action) {
+  switch (action.type) {
+    case constants.SAVED_FILTERS:
+      {
+        var _ref3 = action.payload || {},
+          savedFilters = _ref3.savedFilters;
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+          savedFilters: savedFilters
+        });
+      }
+    default:
+      return state;
+  }
+};
+var FilterProvider = function FilterProvider(_ref4) {
+  var children = _ref4.children,
+    filters = _ref4.filters,
+    filterProps = _ref4.filterProps;
+  var _ref5 = filterProps || {},
+    renderDateLabel = _ref5.renderDateLabel;
   var filterTags = prepareFiltersForTags(filters, renderDateLabel);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     panelOpen = _useState2[0],
     setPanelOpen = _useState2[1];
+  var initialState = {
+    savedFilters: []
+  };
+  var _useReducer = React.useReducer(filteringReducer, initialState),
+    _useReducer2 = _rollupPluginBabelHelpers.slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var value = {
     filterTags: filterTags,
     EventEmitter: EventEmitter,
     panelOpen: panelOpen,
-    setPanelOpen: setPanelOpen
+    setPanelOpen: setPanelOpen,
+    state: state,
+    dispatch: dispatch
   };
   return /*#__PURE__*/React__default["default"].createElement(FilterContext.Provider, {
     value: value

package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * 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.
@@ -22,3 +22,5 @@ export const CLEAR_SINGLE_FILTER: "clearSingleFilter";
 /** Constants for panel dimensions */
 export const PANEL_WIDTH: 320;
 export const ACTION_SET_HEIGHT: 64;
+/** Constants for local reducer */
+export const SAVED_FILTERS: "savedFilters";

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

@@ -32,6 +32,9 @@ var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 var PANEL_WIDTH = 320;
 var ACTION_SET_HEIGHT = 64;
 
+/** Constants for local reducer */
+var SAVED_FILTERS = 'savedFilters';
+
 exports.ACTION_SET_HEIGHT = ACTION_SET_HEIGHT;
 exports.BATCH = BATCH;
 exports.CHECKBOX = CHECKBOX;
@@ -45,3 +48,4 @@ exports.NUMBER = NUMBER;
 exports.PANEL = PANEL;
 exports.PANEL_WIDTH = PANEL_WIDTH;
 exports.RADIO = RADIO;
+exports.SAVED_FILTERS = SAVED_FILTERS;

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

@@ -15,6 +15,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var OverflowCheckboxes = require('../OverflowCheckboxes.js');
 var utils = require('../utils.js');
+var FilterProvider = require('../FilterProvider.js');
 var handleCheckboxChange = require('../handleCheckboxChange.js');
 var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
 
@@ -33,6 +34,10 @@ var useFilters = function useFilters(_ref) {
     panelOpen = _ref.panelOpen,
     autoHideFilters = _ref.autoHideFilters,
     isFetching = _ref.isFetching;
+  var _useContext = React.useContext(FilterProvider.FilterContext),
+    state = _useContext.state,
+    localDispatch = _useContext.dispatch;
+  var savedFilters = state.savedFilters;
   /** State */
   var _useState = React.useState(utils.getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -130,6 +135,16 @@ var useFilters = function useFilters(_ref) {
       filterCopy.splice(index, 1);
     }
     setFiltersObjectArray(filterCopy);
+
+    // Dispatch action from local filter context to track filters in order
+    // to keep history if `isFetching` becomes true. If so, react-table
+    // clears all filter history
+    localDispatch({
+      type: constants.SAVED_FILTERS,
+      payload: {
+        savedFilters: filterCopy
+      }
+    });
     if (updateMethod === constants.INSTANT) {
       setAllFilters(filterCopy);
     }
@@ -320,10 +335,27 @@ var useFilters = function useFilters(_ref) {
       setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       setFetchingReset(true);
     }
+    if (isFetching && fetchingReset) {
+      var cleanFilters = function cleanFilters(originalFilterState) {
+        var copy = _rollupPluginBabelHelpers.objectSpread2({}, originalFilterState);
+        var updatedFilters = savedFilters.map(function (f) {
+          if (Object.hasOwn(copy, f.id)) {
+            copy[f.id] = f;
+            return copy;
+          }
+          return copy;
+        });
+        return updatedFilters[0];
+      };
+      setFiltersObjectArray(savedFilters);
+      var filterStateCopy = cleanFilters(filtersState);
+      setFiltersState(filterStateCopy);
+    }
     if (!isFetching) {
       setFetchingReset(false);
     }
-  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
   var cancel = function cancel() {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === constants.BATCH) {

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

@@ -120,7 +120,7 @@ var stateReducer = function stateReducer(newState, action) {
           var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
             var _ref6 = _rollupPluginBabelHelpers.slicedToArray(_ref5, 1),
               key = _ref6[0];
-            return parseInt(key) !== parseInt(rowData.index);
+            return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
           }));
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
             selectedRowData: dataWithRemovedRow

package/lib/components/Datagrid/useSelectAllToggle.js

@@ -15,6 +15,7 @@ var index = require('../../node_modules/classnames/index.js');
 var commonColumnIds = require('./common-column-ids.js');
 var DatagridSelectAllWithToggle = require('./Datagrid/DatagridSelectAllWithToggle.js');
 var settings = require('../../settings.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,11 +45,12 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
   hooks.useInstance.push(useInstance);
 };
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
-  React.useLayoutEffect(function () {
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/lib/components/SidePanel/SidePanel.js

@@ -25,8 +25,8 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var variants = require('./motion/variants.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
-var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,6 +48,7 @@ var defaults = {
   placement: 'right',
   size: 'md'
 };
+var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
 
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -115,6 +116,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var shouldReduceMotion = framerMotion.useReducedMotion();
   React.useEffect(function () {
     setDoAnimateTitle(animateTitle);
   }, [animateTitle]);
@@ -437,7 +439,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     initial: "hidden",
     animate: "visible",
     exit: "exit",
-    custom: placement
+    custom: {
+      placement: placement,
+      shouldReduceMotion: shouldReduceMotion
+    }
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -446,10 +451,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: animatedScrollRef,
     className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(ActionSet.ActionSet, {
+  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size === 'xs' ? 'sm' : size
+    size: size === 'xs' ? 'sm' : size,
+    custom: shouldReduceMotion,
+    variants: variants.actionSetVariants
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",

package/lib/components/SidePanel/motion/variants.d.ts

@@ -16,27 +16,54 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export namespace visible_1 {
-        export let x: number;
-        export namespace transition_1 {
-            let duration_1: number;
-            export { duration_1 as duration };
-            let ease_1: number[];
-            export { ease_1 as ease };
-        }
-        export { transition_1 as transition };
-    }
+    export function visible_1({ shouldReduceMotion }: {
+        shouldReduceMotion: any;
+    }): {
+        x: number;
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+        opacity: any;
+    };
     export { visible_1 as visible };
-    export function hidden_1(placement: any): {
+    export function hidden_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
+        opacity: any;
     };
     export { hidden_1 as hidden };
-    export function exit_1(placement: any): {
+    export function exit_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
         transition: {
             duration: number;
             ease: number[];
         };
+        opacity: any;
     };
     export { exit_1 as exit };
 }
+export namespace actionSetVariants {
+    export function hidden_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+        };
+    };
+    export { hidden_2 as hidden };
+    export function visible_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+            delay: number;
+        };
+    };
+    export { visible_2 as visible };
+}

package/lib/components/SidePanel/motion/variants.js

@@ -27,28 +27,60 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: {
-    x: 0,
-    transition: {
-      duration: motionConstants.DURATIONS.moderate02,
-      ease: motionConstants.EASINGS.productive.standard
-    }
+  visible: function visible(_ref) {
+    var shouldReduceMotion = _ref.shouldReduceMotion;
+    return {
+      x: 0,
+      transition: {
+        duration: motionConstants.DURATIONS.moderate02,
+        ease: motionConstants.EASINGS.productive.standard
+      },
+      opacity: shouldReduceMotion && 1
+    };
   },
-  hidden: function hidden(placement) {
+  hidden: function hidden(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
+      opacity: shouldReduceMotion && 0
     };
   },
-  exit: function exit(placement) {
+  exit: function exit(_ref3) {
+    var placement = _ref3.placement,
+      shouldReduceMotion = _ref3.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320,
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: motionConstants.DURATIONS.moderate01,
         ease: motionConstants.EASINGS.productive.exit
+      },
+      opacity: shouldReduceMotion && 0
+    };
+  }
+};
+var actionSetVariants = {
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? motionConstants.DURATIONS.moderate01 : motionConstants.DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : motionConstants.EASINGS.productive.exit
+      }
+    };
+  },
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? motionConstants.DURATIONS.moderate01 : motionConstants.DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : motionConstants.EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
       }
     };
   }
 };
 
+exports.actionSetVariants = actionSetVariants;
 exports.overlayVariants = overlayVariants;
 exports.panelVariants = panelVariants;

package/lib/components/StringFormatter/StringFormatter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+export let StringFormatter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';