@carbon/ibm-products 2.50.0 → 2.51.0

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -47,7 +47,8 @@ var componentName = 'ConditionBuilder';
 var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     inputConfig = _ref.inputConfig,
-    startConditionLabel = _ref.startConditionLabel,
+    _ref$startConditionLa = _ref.startConditionLabel,
+    startConditionLabel = _ref$startConditionLa === void 0 ? 'Add Condition' : _ref$startConditionLa,
     popOverSearchThreshold = _ref.popOverSearchThreshold,
     getOptions = _ref.getOptions,
     initialState = _ref.initialState,
@@ -146,27 +147,32 @@ ConditionBuilder.propTypes = {
    */
   getOptions: PropTypes.func,
   /**
-   * Optional prop if you want to pass a saved condition state.
-   *  This object should respect the structure of condition state that is available in getConditionState callback
+   * Optional prop if you want to pass a saved condition state, pass as "initialState.state".
+   * "initialState.enabledDefault" will populate the builder with the provided initial state before clicking Add Condition button.
+   *
+   *  This state should respect the structure of condition state that is available in getConditionState callback
    */
   /**@ts-ignore */
   initialState: PropTypes.shape({
-    groups: PropTypes.arrayOf(PropTypes.shape({
-      groupOperator: PropTypes.string,
-      statement: PropTypes.string,
-      conditions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
-        property: PropTypes.string,
-        operator: PropTypes.string,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
-          id: PropTypes.string,
-          label: PropTypes.string
-        })), PropTypes.shape({
-          id: PropTypes.string,
-          label: PropTypes.string
-        })])
-      }), PropTypes.object]))
-    })),
-    operator: PropTypes.string
+    state: PropTypes.shape({
+      groups: PropTypes.arrayOf(PropTypes.shape({
+        groupOperator: PropTypes.string,
+        statement: PropTypes.string,
+        conditions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+          property: PropTypes.string,
+          operator: PropTypes.string,
+          value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
+            id: PropTypes.string,
+            label: PropTypes.string
+          })), PropTypes.shape({
+            id: PropTypes.string,
+            label: PropTypes.string
+          })])
+        }), PropTypes.object]))
+      })),
+      operator: PropTypes.string
+    }),
+    enabledDefault: PropTypes.bool
   }),
   /**
    * This is a mandatory prop that defines the input to the condition builder.
@@ -199,7 +205,7 @@ ConditionBuilder.propTypes = {
   /**
    * Provide a label to the button that starts condition builder
    */
-  startConditionLabel: PropTypes.string.isRequired,
+  startConditionLabel: PropTypes.string,
   /**
    * Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
    * This callback function will receive the message id and you need to return the corresponding text for that id.

package/es/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -122,17 +122,21 @@ export type Action = {
 export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
 export type ConditionBuilderProps = {
     inputConfig: inputConfig;
-    initialState?: ConditionBuilderState;
+    initialState?: InitialState;
     getActionsState?: (state: Action[] | undefined) => void;
     getConditionState: (state: ConditionBuilderState | undefined) => void;
     getOptions?: (state: ConditionBuilderState, condition: Condition) => Promise<Option[]>;
     actions?: Action[];
     className?: string;
     popOverSearchThreshold: number;
-    startConditionLabel: string;
+    startConditionLabel?: string;
     variant?: 'Non-Hierarchical' | 'Hierarchical';
     translateWithId: (id: string) => string;
 };
+export type InitialState = {
+    state: ConditionBuilderState;
+    enabledDefault?: boolean;
+};
 export interface ConditionBuilderContextInputProps extends PropsWithChildren {
     children?: ReactNode;
     inputConfig?: inputConfig;

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { Action, ConditionBuilderState } from '../ConditionBuilder.types';
+import { Action, ConditionBuilderState, InitialState } from '../ConditionBuilder.types';
 interface ConditionBuilderContentProps {
     startConditionLabel: string;
     getConditionState: (state: ConditionBuilderState) => void;
     getActionsState?: (state: Action[]) => void;
-    initialState?: ConditionBuilderState;
+    initialState?: InitialState;
     actions?: Action[];
 }
 declare const ConditionBuilderContent: {
@@ -35,12 +35,15 @@ declare const ConditionBuilderContent: {
          * Optional prop if the condition building need to start from a predefined initial state
          */
         initialState: PropTypes.Requireable<PropTypes.InferProps<{
-            groups: PropTypes.Requireable<(PropTypes.InferProps<{
-                groupOperator: PropTypes.Requireable<string>;
-                statement: PropTypes.Requireable<string>;
-                conditions: PropTypes.Requireable<(object | null | undefined)[]>;
-            }> | null | undefined)[]>;
-            operator: PropTypes.Requireable<string>;
+            state: PropTypes.Requireable<PropTypes.InferProps<{
+                groups: PropTypes.Requireable<(PropTypes.InferProps<{
+                    groupOperator: PropTypes.Requireable<string>;
+                    statement: PropTypes.Requireable<string>;
+                    conditions: PropTypes.Requireable<(object | null | undefined)[]>;
+                }> | null | undefined)[]>;
+                operator: PropTypes.Requireable<string>;
+            }>>;
+            enabledDefault: PropTypes.Requireable<boolean>;
         }>>;
         startConditionLabel: PropTypes.Validator<string>;
     };

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useEffect, useCallback } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Button, Section, Heading } from '@carbon/react';
 import { Add, TextNewLine } from '@carbon/react/icons';
@@ -33,6 +33,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     setRootState = _useContext.setRootState,
     variant = _useContext.variant,
     actionState = _useContext.actionState;
+  var initialConditionState = useRef(initialState !== null && initialState !== void 0 && initialState.state ? JSON.parse(JSON.stringify(initialState === null || initialState === void 0 ? void 0 : initialState.state)) : null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
@@ -69,10 +70,24 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     getActionsState === null || getActionsState === void 0 || getActionsState(actionState !== null && actionState !== void 0 ? actionState : []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionState]);
+  useEffect(function () {
+    if (initialState !== null && initialState !== void 0 && initialState.enabledDefault) {
+      setRootState === null || setRootState === void 0 || setRootState(initialConditionState.current);
+      initialConditionState.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialState]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
+    var _initialConditionStat;
     //when add condition button is clicked.
     setIsConditionBuilderActive(true);
-    setRootState === null || setRootState === void 0 || setRootState(initialState !== null && initialState !== void 0 ? initialState : emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    if (initialConditionState !== null && initialConditionState !== void 0 && (_initialConditionStat = initialConditionState.current) !== null && _initialConditionStat !== void 0 && (_initialConditionStat = _initialConditionStat.groups) !== null && _initialConditionStat !== void 0 && _initialConditionStat.length) {
+      setRootState === null || setRootState === void 0 || setRootState(initialConditionState.current);
+      initialConditionState.current = null;
+    } else {
+      setRootState === null || setRootState === void 0 || setRootState(emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    }
+
     //or we can even pre-populate some existing builder and continue editing
   };
   var _onRemove = useCallback(function (groupId) {
@@ -130,14 +145,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       onClick: onStartConditionBuilder
     }, startConditionLabel);
   }
+  var wrapperRole = variant === HIERARCHICAL_VARIANT ? {
+    role: 'treegrid',
+    'aria-label': conditionBuilderHierarchicalText
+  } : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Section, {
     className: "".concat(blockClass, "__heading"),
     level: 4
-  }, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content-container"),
-    role: "treegrid",
-    "aria-label": conditionBuilderHierarchicalText
-  }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups4 = rootState.groups) === null || _rootState$groups4 === void 0 ? void 0 : _rootState$groups4.map(function (eachGroup, groupIndex) {
+  }, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "".concat(blockClass, "__content-container")
+  }, wrapperRole), rootState && (rootState === null || rootState === void 0 || (_rootState$groups4 = rootState.groups) === null || _rootState$groups4 === void 0 ? void 0 : _rootState$groups4.map(function (eachGroup, groupIndex) {
     var _ref2;
     return /*#__PURE__*/React__default.createElement("div", {
       key: eachGroup.id,
@@ -208,22 +225,25 @@ ConditionBuilderContent.propTypes = {
    * Optional prop if the condition building need to start from a predefined initial state
    */
   initialState: PropTypes.shape({
-    groups: PropTypes.arrayOf(PropTypes.shape({
-      groupOperator: PropTypes.string,
-      statement: PropTypes.string,
-      conditions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
-        property: PropTypes.string,
-        operator: PropTypes.string,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
-          id: PropTypes.string,
-          label: PropTypes.string
-        })), PropTypes.shape({
-          id: PropTypes.string,
-          label: PropTypes.string
-        })])
-      }), PropTypes.object]))
-    })),
-    operator: PropTypes.string
+    state: PropTypes.shape({
+      groups: PropTypes.arrayOf(PropTypes.shape({
+        groupOperator: PropTypes.string,
+        statement: PropTypes.string,
+        conditions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+          property: PropTypes.string,
+          operator: PropTypes.string,
+          value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
+            id: PropTypes.string,
+            label: PropTypes.string
+          })), PropTypes.shape({
+            id: PropTypes.string,
+            label: PropTypes.string
+          })])
+        }), PropTypes.object]))
+      })),
+      operator: PropTypes.string
+    }),
+    enabledDefault: PropTypes.bool
   }),
   /* Provide a label to the button that starts condition builder
    */

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -8,7 +8,7 @@ import React, { ReactNode } from 'react';
 import { StepsContextType } from '../CreateTearsheet/CreateTearsheet';
 export declare const StepsContext: React.Context<StepsContextType | null>;
 export declare const StepNumberContext: React.Context<number>;
-interface HeaderBreadcrumbs {
+interface HeaderBreadcrumb {
     /** breadcrumb item key */
     key: string;
     /** breadcrumb item label */
@@ -27,13 +27,15 @@ type CreateFullPageBreadcrumbsProps = {
      * Label for open/close overflow button used for breadcrumb items that do not fit
      */
     breadcrumbsOverflowAriaLabel?: never;
+    breadcrumbOverflowTooltipAlign?: never;
 } | {
     /** The header breadcrumbs */
-    breadcrumbs: HeaderBreadcrumbs;
+    breadcrumbs: HeaderBreadcrumb[];
     /**
      * Label for open/close overflow button used for breadcrumb items that do not fit
      */
     breadcrumbsOverflowAriaLabel: string;
+    breadcrumbOverflowTooltipAlign?: string;
 };
 type CreateFullPageBaseProps = {
     /**

package/es/components/CreateFullPage/CreateFullPage.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+import { Tooltip, Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
 import React__default, { useState, useEffect, createContext } from 'react';
 import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
@@ -23,7 +23,7 @@ import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateCom
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
 
-var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
+var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle", "breadcrumbOverflowTooltipAlign"];
 var blockClass = "".concat(pkg.prefix, "--create-full-page");
 var componentName = 'CreateFullPage';
 
@@ -68,6 +68,8 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     noTrailingSlash = _ref.noTrailingSlash,
     title = _ref.title,
     secondaryTitle = _ref.secondaryTitle,
+    _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? 'right' : _ref$breadcrumbOverfl,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -190,7 +192,8 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     noTrailingSlash: noTrailingSlash,
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
     maxVisible: maxVisibleBreadcrumbs,
-    className: "".concat(blockClass, "__header")
+    className: "".concat(blockClass, "__header"),
+    overflowTooltipAlign: breadcrumbOverflowTooltipAlign
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__influencer-and-body-container")
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -273,6 +276,10 @@ CreateFullPage.propTypes = {
    * The back button text
    */
   backButtonText: PropTypes.string.isRequired,
+  /**
+   * align breadcrumb overflow tooltip
+   */
+  breadcrumbOverflowTooltipAlign: Tooltip.propTypes.align,
   /** The header breadcrumbs */
   /**@ts-ignore */
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({

package/es/components/CreateFullPage/CreateFullPageStep.d.ts

@@ -60,10 +60,12 @@ interface CreateFullPageStepBaseProps extends PropsWithChildren {
     title: ReactNode;
 }
 type CreateFullPageStepFieldsetProps = {
+    fieldsetLegendText?: string;
+} | {
     hasFieldset: false;
     fieldsetLegendText?: string;
 } | {
-    hasFieldset?: true;
+    hasFieldset: true;
     fieldsetLegendText: string;
 };
 export type CreateFullPageStepProps = CreateFullPageStepBaseProps & CreateFullPageStepFieldsetProps;

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -24,6 +24,11 @@ var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
 var defaults = {
   includeStep: true
 };
+
+// Try to specify the hasFieldset and fieldsetLegendText Typescript requirements.
+// Basically, fieldsetLegendText should only be specified when hasFieldset is true.
+// And usually, hasFieldset won't be specified at all unless it's being set to true.
+
 var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -134,7 +139,6 @@ CreateFullPageStep.propTypes = {
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */
-  /**@ts-ignore */
   disableSubmit: PropTypes.bool,
   /**
    * This is the legend text that appears above a fieldset html element for accessibility purposes. It is required when the optional `hasFieldset` prop is provided to a FullPageStep.
@@ -147,7 +151,6 @@ CreateFullPageStep.propTypes = {
   /**
    * This optional prop will render your form content inside of a fieldset html element
    */
-  /**@ts-ignore */
   hasFieldset: PropTypes.bool,
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator

package/es/components/Datagrid/Datagrid/Datagrid.d.ts

@@ -18,6 +18,6 @@ export interface DatagridProps {
     datagridState: DataGridState;
 }
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -20,7 +20,7 @@ var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,

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

@@ -40,9 +40,20 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     getRowId = datagridState.getRowId,
     batchActionMenuButtonLabel = datagridState.batchActionMenuButtonLabel,
     translateWithIdBatchActions = datagridState.translateWithIdBatchActions;
+  var _useState7 = useState(rows.length),
+    _useState8 = _slicedToArray(_useState7, 2),
+    availableRowsCount = _useState8[0],
+    setAvailableRowsCount = _useState8[1];
   var batchActionMenuButtonLabelText = batchActionMenuButtonLabel !== null && batchActionMenuButtonLabel !== void 0 ? batchActionMenuButtonLabel : 'More';
   var selectedKeys = Object.keys(selectedRowIds || {});
   var totalSelected = selectedKeys.length;
+  useEffect(function () {
+    var _rows$find, _rows$find$getRowProp;
+    var countDisabledRows = ((_rows$find = rows.find(function (row) {
+      return row.getRowProps;
+    })) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.nonselectablerows) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.length) || 0;
+    rows && setAvailableRowsCount(rows.length - countDisabledRows);
+  }, [rows]);
 
   // Get initial width of batch actions container,
   // used to measure when all items are put inside
@@ -145,7 +156,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     totalSelected: totalSelected,
     onCancel: onCancelHandler,
     onSelectAll: onSelectAllHandler,
-    totalCount: rows && rows.length,
+    totalCount: availableRowsCount,
     translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (!toolbarBatchActionsDisplayMin && index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin) {

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

@@ -53,6 +53,7 @@ var DraggableElement = function DraggableElement(_ref) {
     ref: setNodeRef,
     style: style
   }, attributes, listeners, {
+    "aria-disabled": undefined,
     "aria-selected": selected,
     role: "option"
   }), /*#__PURE__*/React__default.createElement("span", {

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

@@ -108,12 +108,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       }) : definition;
     });
     setColumnObjects(finalDefinitions);
-    setDirty();
-  };
-  var setDirty = function setDirty() {
-    if (!isDirty) {
-      setIsDirty(true);
-    }
+    setIsDirty(selectedColumnsCount !== 0);
   };
   var getVisibleColumnsCount = useCallback(function () {
     return columnObjects.filter(function (col) {
@@ -156,7 +151,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     searchText: searchText,
     setColumnsObject: function setColumnsObject(cols) {
       setColumnObjects(cols);
-      setDirty();
+      setIsDirty(true);
     },
     setSearchText: setSearchText,
     findColumnPlaceholderLabel: findColumnPlaceholderLabel,
@@ -170,7 +165,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     onSelectColumn: onCheckboxCheck,
     setColumnsObject: function setColumnsObject(cols) {
       setColumnObjects(cols);
-      setDirty();
+      setIsDirty(getVisibleColumnsCount() !== 0);
     },
     selectAllLabel: selectAllLabel,
     customizeTearsheetHeadingLabel: customizeTearsheetHeadingLabel

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

@@ -36,20 +36,22 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,
     onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-      var hiddenIds = updatedColDefs.filter(function (colDef) {
-        return !colDef.isVisible;
-      }).map(function (colDef) {
-        return colDef.id;
-      });
-      instance.setHiddenColumns(hiddenIds);
-      if (typeof instance.setColumnOrder === 'function') {
-        instance.setColumnOrder(updatedColDefs.map(function (colDef) {
+      setTimeout(function () {
+        var hiddenIds = updatedColDefs.filter(function (colDef) {
+          return !colDef.isVisible;
+        }).map(function (colDef) {
           return colDef.id;
-        }));
-      } else {
-        // eslint-disable-next-line no-console
-        console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
-      }
+        });
+        instance.setHiddenColumns(hiddenIds);
+        if (typeof instance.setColumnOrder === 'function') {
+          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
+            return colDef.id;
+          }));
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
+        }
+      }, 0);
       if (typeof _onSaveColumnPrefs === 'function') {
         _onSaveColumnPrefs(updatedColDefs);
       }

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

@@ -6,15 +6,16 @@
  */
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { BATCH, INSTANT, FLYOUT, CLEAR_FILTERS } from './constants.js';
+import { BATCH, INSTANT, FLYOUT, CLEAR_FILTERS, SAVED_FILTERS } from './constants.js';
 import { usePrefix, IconButton } from '@carbon/react';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useContext, useEffect } from 'react';
 import { breakpoints, px } from '@carbon/layout';
 import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 import { Filter } from '@carbon/react/icons';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { pkg } from '../../../../../settings.js';
+import { FilterContext } from './FilterProvider.js';
 import useFilters from './hooks/useFilters.js';
 import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
 import { useWindowResize } from '../../../../../global/js/hooks/useWindowResize.js';
@@ -138,6 +139,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
     handleResize(current);
   });
 
+  /** Context */
+  var _useContext = useContext(FilterContext),
+    localDispatch = _useContext.dispatch;
+
   /** Memos */
   var showActionSet = updateMethod === BATCH;
   var carbonPrefix = usePrefix();
@@ -174,6 +179,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
 
     // Update the last applied filters
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
+
+    // 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: SAVED_FILTERS,
+      payload: {
+        savedFilters: filtersObjectArray
+      }
+    });
   };
 
   /** Renders all filters */

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

@@ -7,7 +7,7 @@
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button, Layer, Search, Accordion, AccordionItem } from '@carbon/react';
-import { PANEL, BATCH, CLEAR_FILTERS, INSTANT } from './constants.js';
+import { PANEL, BATCH, CLEAR_FILTERS, INSTANT, SAVED_FILTERS } from './constants.js';
 import React__default, { useState, useContext, useRef, useMemo, useEffect, useCallback } from 'react';
 import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
 import { motion, useReducedMotion } from 'framer-motion';
@@ -80,7 +80,8 @@ var FilterPanel = function FilterPanel(_ref) {
   /** Context */
   var _useContext = useContext(FilterContext),
     panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen;
+    setPanelOpen = _useContext.setPanelOpen,
+    localDispatch = _useContext.dispatch;
   var _useFilters = useFilters({
       updateMethod: updateMethod,
       filters: filterSections,
@@ -145,6 +146,16 @@ var FilterPanel = function FilterPanel(_ref) {
 
     // Update the last applied filters
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
+
+    // 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: SAVED_FILTERS,
+      payload: {
+        savedFilters: filtersObjectArray
+      }
+    });
   };
   var renderActionSet = function renderActionSet() {
     return showActionSet && /*#__PURE__*/React__default.createElement(MotionActionSet, {

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

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { MULTISELECT, DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, SAVED_FILTERS, INSTANT, PANEL } from '../constants.js';
+import { MULTISELECT, DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, INSTANT, PANEL } from '../constants.js';
 import { MultiSelect, Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
 import React__default, { useContext, useState, useRef, useCallback, useEffect } from 'react';
 import OverflowCheckboxes from '../OverflowCheckboxes.js';
@@ -31,7 +31,6 @@ var useFilters = function useFilters(_ref) {
     isFetching = _ref.isFetching;
   var _useContext = useContext(FilterContext),
     state = _useContext.state,
-    localDispatch = _useContext.dispatch,
     contextTableId = _useContext.tableId;
   var savedFilters = state.savedFilters;
   /** State */
@@ -136,16 +135,6 @@ 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: SAVED_FILTERS,
-      payload: {
-        savedFilters: filterCopy
-      }
-    });
     if (updateMethod === INSTANT) {
       setAllFilters(filterCopy);
     }

package/es/components/Datagrid/types/index.d.ts

@@ -11,6 +11,7 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
 import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
+import { TableRowProps } from 'react-table';
 import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
 import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableState, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
@@ -276,4 +277,7 @@ export interface PropGetterMeta {
     instance?: DataGridTableInstance;
     row?: Partial<Row<any> & DatagridRow<any>>;
 }
+export interface DatagridRowProps extends TableRowProps {
+    nonselectablerows: Array<number>;
+}
 export {};