@carbon/ibm-products 1.42.1 → 1.43.0

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

@@ -21,6 +21,10 @@ import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+import FilterPanel from './addons/Filtering/FilterPanel';
+import { FilterSummary } from '../../FilterSummary';
+import { FilterContext } from './addons/Filtering';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var TableContainer = DataTable.TableContainer,
   Table = DataTable.Table;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -28,16 +32,23 @@ export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
   var datagridState = _ref.datagridState;
   var _useContext = useContext(InlineEditContext),
-    state = _useContext.state,
+    inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
-  var activeCellId = state.activeCellId;
+  var _useContext2 = useContext(FilterContext),
+    filterTags = _useContext2.filterTags,
+    EventEmitter = _useContext2.EventEmitter,
+    leftPanelOpen = _useContext2.leftPanelOpen;
+  var activeCellId = inlineEditState.activeCellId,
+    gridActive = inlineEditState.gridActive,
+    editId = inlineEditState.editId;
   var _datagridState$getTab = datagridState.getTableProps,
     getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+    getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
     isFetching = datagridState.isFetching,
     CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
-    leftPanel = datagridState.leftPanel,
+    filterProps = datagridState.filterProps,
     fullHeightDatagrid = datagridState.fullHeightDatagrid,
     _datagridState$vertic = datagridState.verticalAlign,
     verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
@@ -49,10 +60,9 @@ export var DatagridContent = function DatagridContent(_ref) {
     tableId = datagridState.tableId,
     DatagridActions = datagridState.DatagridActions,
     totalColumnsWidth = datagridState.totalColumnsWidth,
-    gridRef = datagridState.gridRef;
+    gridRef = datagridState.gridRef,
+    state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  var gridActive = state.gridActive,
-    editId = state.editId;
   var gridAreaRef = useRef();
   var multiKeyTrackingRef = useRef();
   useClickOutside(gridAreaRef, function (target) {
@@ -80,14 +90,14 @@ export var DatagridContent = function DatagridContent(_ref) {
         return handleGridKeyPress({
           event: event,
           dispatch: dispatch,
-          state: state,
+          inlineEditState: inlineEditState,
           instance: datagridState,
           keysPressedList: keysPressedList,
           usingMac: usingMac
         });
       } : null,
       onFocus: withInlineEdit ? function () {
-        return handleGridFocus(state, dispatch);
+        return handleGridFocus(inlineEditState, dispatch);
       } : null
     }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
       rows: rows
@@ -113,34 +123,49 @@ export var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
+      className: "".concat(blockClass, "__filter-summary"),
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(CLEAR_FILTERS);
+      }
+    });
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
     className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-container"),
+    className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), leftPanelOpen)),
     ref: gridAreaRef
-  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
+    updateMethod: "batch"
+  }, getFilterFlyoutProps(), {
+    title: filterProps.panelTitle,
+    filterSections: filterProps.sections
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__table-container-inner")
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
 DatagridContent.propTypes = {
   datagridState: PropTypes.shape({
     getTableProps: PropTypes.func,
+    getFilterFlyoutProps: PropTypes.func,
     withVirtualScroll: PropTypes.bool,
     DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     CustomizeColumnsTearsheet: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     isFetching: PropTypes.bool,
-    leftPanel: PropTypes.object,
     fullHeightDatagrid: PropTypes.bool,
+    filterProps: PropTypes.object,
     variableRowHeight: PropTypes.bool,
     useDenseHeader: PropTypes.bool,
     withInlineEdit: PropTypes.bool,
@@ -151,6 +176,9 @@ DatagridContent.propTypes = {
     rows: PropTypes.arrayOf(PropTypes.object),
     tableId: PropTypes.string,
     totalColumnsWidth: PropTypes.number,
-    gridRef: PropTypes.object
+    gridRef: PropTypes.object,
+    setAllFilters: PropTypes.func,
+    getFilterProps: PropTypes.func,
+    state: PropTypes.object
   })
 };

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

@@ -14,10 +14,6 @@ import { useResizeDetector } from 'react-resize-detector';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
-import { FilterSummary } from '../../FilterSummary';
-import { useContext } from 'react';
-import { FilterContext } from './addons/Filtering/FilterProvider';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
@@ -134,25 +130,13 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   var DatagridActions = datagridState.DatagridActions,
     DatagridBatchActions = datagridState.DatagridBatchActions,
     batchActions = datagridState.batchActions,
-    state = datagridState.state,
     rowSize = datagridState.rowSize;
-  var _useContext = useContext(FilterContext),
-    filterTags = _useContext.filterTags,
-    EventEmitter = _useContext.EventEmitter;
-  var renderFilterSummary = function renderFilterSummary() {
-    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
-      filters: filterTags,
-      clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(CLEAR_FILTERS);
-      }
-    });
-  };
   var getRowHeight = rowSize ? rowSize : 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: cx("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 export default DatagridToolbar;

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

@@ -143,7 +143,7 @@ var DraggableElement = function DraggableElement(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "${blockClass}__draggable-handleHolder-droppable"
+    className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
   }, content) : /*#__PURE__*/React.createElement("div", {
     ref: drag,
     "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria

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

@@ -17,14 +17,11 @@ import { Button, Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, Num
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useRef, useState } from 'react';
-import { useEffect } from 'react';
-import { useContext } from 'react';
 import { useClickOutside } from '../../../../../global/js/hooks';
 import { pkg } from '../../../../../settings';
 import { ActionSet } from '../../../../ActionSet';
-import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, INSTANT, NUMBER, RADIO } from './constants';
-import { FilterContext } from './FilterProvider';
-import useInitialStateFromFilters from './hooks/useInitialStateFromFilters';
+import { BATCH, CHECKBOX, CLEAR_FILTERS, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, RADIO } from './constants';
+import { useInitialStateFromFilters, useSubscribeToEventEmitter } from './hooks';
 import { getInitialStateFromFilters } from './utils';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
@@ -50,17 +47,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters;
-  /** Context state and methods */
-  var _useContext = useContext(FilterContext),
-    EventEmitter = _useContext.EventEmitter;
-
+    setAllFilters = _ref.setAllFilters,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useInitialStateFromF = useInitialStateFromFilters(filters),
+  var _useInitialStateFromF = useInitialStateFromFilters(filters, FLYOUT),
     _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
     filtersState = _useInitialStateFromF2[0],
     setFiltersState = _useInitialStateFromF2[1];
@@ -90,6 +85,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     closeFlyout();
+    // From the user
     onApply();
 
     // updates the ref so next time the flyout opens we have records of the previous filters
@@ -106,7 +102,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   };
   var reset = function reset() {
     // Get the initial values for the filters
-    var initialFiltersState = getInitialStateFromFilters(filters);
+    var initialFiltersState = getInitialStateFromFilters(filters, FLYOUT);
     var initialFiltersObjectArray = [];
 
     // Set the state to the initial values
@@ -149,6 +145,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
         type: type
       });
     }
+    if (type === CHECKBOX) {
+      /**
+      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
+      This checks if all the checkboxes are selected = false and removes it from the array
+      */
+      var index = filtersObjectArrayCopy.findIndex(function (filter) {
+        return filter.id === column;
+      });
+
+      // If all the selected state is false remove from array
+      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
+        return val.selected === false;
+      });
+      if (shouldRemoveFromArray) {
+        filtersObjectArrayCopy.splice(index, 1);
+      }
+    }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
     // Automatically apply the filters if the updateMethod is instant
@@ -160,18 +173,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
   /** Effects */
   useClickOutside(filterFlyoutRef, function (target) {
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
-    if (!open || hasClickedOnDatePicker) {
+    var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
+    if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
       return;
     }
     cancel();
   });
-  useEffect(function subscribeToEmitter() {
-    // This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
-    EventEmitter.subscribe(CLEAR_FILTERS, reset);
-  });
+  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
 
   /** Render the individual filter component */
-  var renderFilter = useCallback(function (_ref3) {
+  var renderFilter = function renderFilter(_ref3) {
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -179,7 +190,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       return /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
         onChange: function onChange(value) {
           var _components$DatePicke, _components$DatePicke2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+            value: value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: value,
@@ -187,7 +201,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
         },
-        value: filtersState[column],
+        value: filtersState[column].value,
         datePickerType: "range"
       }), /*#__PURE__*/React.createElement(DatePickerInput, _extends({
         placeholder: "mm/dd/yyyy",
@@ -204,7 +218,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }, components.NumberInput, {
         onChange: function onChange(event) {
           var _components$NumberInp, _components$NumberInp2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, event.target.value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+            value: event.target.value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: event.target.value,
@@ -212,24 +229,27 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
         },
-        value: filtersState[column]
+        value: filtersState[column].value
       }));
     } else if (type === CHECKBOX) {
-      return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].map(function (option) {
+      return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
         return /*#__PURE__*/React.createElement(Checkbox, _extends({
           key: option.labelText
         }, option, {
           onChange: function onChange(isSelected) {
             var _option$onChange;
-            var checkboxCopy = filtersState[column];
+            var checkboxCopy = filtersState[column].value;
             var foundCheckbox = checkboxCopy.find(function (checkbox) {
               return checkbox.value === option.value;
             });
             foundCheckbox.selected = isSelected;
-            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, checkboxCopy)));
+            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+              value: checkboxCopy,
+              type: type
+            })));
             applyFilters({
               column: column,
-              value: _toConsumableArray(filtersState[column]),
+              value: _toConsumableArray(filtersState[column].value),
               type: type
             });
             (_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
@@ -239,10 +259,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }));
     } else if (type === RADIO) {
       return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-        valueSelected: filtersState[column],
+        valueSelected: filtersState[column].value,
         onChange: function onChange(selected) {
           var _components$RadioButt, _components$RadioButt2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, selected)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+            value: selected,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selected,
@@ -258,11 +281,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
       })));
     } else if (type === DROPDOWN) {
       return /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
-        selectedItem: filtersState[column],
+        selectedItem: filtersState[column].value,
         onChange: function onChange(_ref5) {
           var _components$Dropdown$, _components$Dropdown;
           var selectedItem = _ref5.selectedItem;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, selectedItem)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+            value: selectedItem,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selectedItem,
@@ -272,12 +298,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
         }
       }));
     }
-  }, [filtersState, applyFilters, setFiltersState]);
+  };
 
   /** Renders all filters */
-  var renderFilters = useCallback(function () {
+  var renderFilters = function renderFilters() {
     return filters.map(renderFilter);
-  }, [filters, renderFilter]);
+  };
   var renderActionSet = function renderActionSet() {
     return showActionSet && /*#__PURE__*/React.createElement(ActionSet, {
       actions: [{
@@ -306,7 +332,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
     renderIcon: Filter16,
     iconDescription: flyoutIconDescription,
     onClick: open ? closeFlyout : openFlyout,
-    className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open))
+    className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
+    disabled: data.length === 0
   }), /*#__PURE__*/React.createElement("div", {
     ref: filterFlyoutRef,
     className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
@@ -319,6 +346,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {
+  /**
+   * All data rows in the table
+   */
+  data: PropTypes.array.isRequired,
   /**
    * Array of filters to render
    */