@carbon/ibm-products 2.0.0-rc.29 → 2.0.0-rc.32

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

@@ -2,11 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -19,70 +16,66 @@ import { Checkbox, DatePicker, DatePickerInput, Dropdown, FormGroup, NumberInput
 import { INSTANT, DATE, CHECKBOX, NUMBER, RADIO, DROPDOWN, PANEL } from '../constants';
 import useInitialStateFromFilters from './useInitialStateFromFilters';
 import { getInitialStateFromFilters } from '../utils';
-
 var useFilters = function useFilters(_ref) {
   var updateMethod = _ref.updateMethod,
-      _ref$filters = _ref.filters,
-      filters = _ref$filters === void 0 ? [] : _ref$filters,
-      setAllFilters = _ref.setAllFilters,
-      variation = _ref.variation,
-      initialFilters = _ref.initialFilters;
-
+    _ref$filters = _ref.filters,
+    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    setAllFilters = _ref.setAllFilters,
+    variation = _ref.variation,
+    initialFilters = _ref.initialFilters;
   /** State */
   var _useInitialStateFromF = useInitialStateFromFilters(filters, variation, initialFilters),
-      _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
-      filtersState = _useInitialStateFromF2[0],
-      setFiltersState = _useInitialStateFromF2[1];
-
+    _useInitialStateFromF2 = _slicedToArray(_useInitialStateFromF, 2),
+    filtersState = _useInitialStateFromF2[0],
+    setFiltersState = _useInitialStateFromF2[1];
   var _useState = useState(initialFilters),
-      _useState2 = _slicedToArray(_useState, 2),
-      filtersObjectArray = _useState2[0],
-      setFiltersObjectArray = _useState2[1]; // When using batch actions we have to store the filters to then apply them later
-
+    _useState2 = _slicedToArray(_useState, 2),
+    filtersObjectArray = _useState2[0],
+    setFiltersObjectArray = _useState2[1];
 
+  // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
   var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
+
   /** Methods */
   // If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
   // there when they opened the flyout
-
   var revertToPreviousFilters = function revertToPreviousFilters() {
     setFiltersState(JSON.parse(prevFiltersRef.current));
     setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
   };
-
   var reset = function reset() {
     // When we reset we want the "initialFilters" to be an empty array
-    var resetFiltersArray = []; // Get the initial values for the filters
+    var resetFiltersArray = [];
 
+    // Get the initial values for the filters
     var initialFiltersState = getInitialStateFromFilters(filters, variation, resetFiltersArray);
-    var initialFiltersObjectArray = []; // Set the state to the initial values
+    var initialFiltersObjectArray = [];
 
+    // Set the state to the initial values
     setFiltersState(initialFiltersState);
     setFiltersObjectArray(initialFiltersObjectArray);
-    setAllFilters([]); // Update their respective refs so everything is in sync
+    setAllFilters([]);
 
+    // Update their respective refs so everything is in sync
     prevFiltersRef.current = JSON.stringify(initialFiltersState);
     prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
   };
-
   var applyFilters = function applyFilters(_ref2) {
     var column = _ref2.column,
-        value = _ref2.value,
-        type = _ref2.type;
-
+      value = _ref2.value,
+      type = _ref2.type;
     // If no end date is selected return because we need the end date to do computations
     if (type === DATE && value.length > 0 && !value[1]) {
       return;
     }
-
-    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray); // // check if the filter already exists in the array
-
-
+    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    // // check if the filter already exists in the array
     var filter = filtersObjectArrayCopy.find(function (item) {
       return item.id === column;
-    }); // // if filter exists in array then update the filter's new value
+    });
 
+    // // if filter exists in array then update the filter's new value
     if (filter) {
       filter.value = value;
     } else {
@@ -91,9 +84,9 @@ var useFilters = function useFilters(_ref) {
         value: value,
         type: type
       });
-    } // ATTENTION: this is where you would reset or remove individual filters from the filters array
-
+    }
 
+    // ATTENTION: this is where you would reset or remove individual filters from the filters array
     if (type === CHECKBOX) {
       /**
       When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
@@ -101,12 +94,12 @@ var useFilters = function useFilters(_ref) {
       */
       var index = filtersObjectArrayCopy.findIndex(function (filter) {
         return filter.id === column;
-      }); // If all the selected state is false remove from array
+      });
 
+      // 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);
       }
@@ -118,9 +111,9 @@ var useFilters = function useFilters(_ref) {
         */
         var _index = filtersObjectArrayCopy.findIndex(function (filter) {
           return filter.id === column;
-        }); // Remove it from the filters array since there is nothing to filter
-
+        });
 
+        // Remove it from the filters array since there is nothing to filter
         filtersObjectArrayCopy.splice(_index, 1);
       }
     } else if (type === DROPDOWN || type === RADIO) {
@@ -131,9 +124,9 @@ var useFilters = function useFilters(_ref) {
         */
         var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
           return filter.id === column;
-        }); // Remove it from the filters array
-
+        });
 
+        // Remove it from the filters array
         filtersObjectArrayCopy.splice(_index2, 1);
       }
     } else if (type === NUMBER) {
@@ -142,37 +135,32 @@ var useFilters = function useFilters(_ref) {
         // Find the column that uses number and displays an empty string
         var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
           return filter.id === column;
-        }); // Remove it from the filters array
-
+        });
 
+        // Remove it from the filters array
         filtersObjectArrayCopy.splice(_index3, 1);
       }
     }
+    setFiltersObjectArray(filtersObjectArrayCopy);
 
-    setFiltersObjectArray(filtersObjectArrayCopy); // // Automatically apply the filters if the updateMethod is instant
-
+    // // Automatically apply the filters if the updateMethod is instant
     if (updateMethod === INSTANT) {
       setAllFilters(filtersObjectArrayCopy);
     }
   };
   /** Render the individual filter component */
-
-
   var renderFilter = function renderFilter(_ref3) {
     var _filtersState$column, _filtersState$column2, _filtersState$column3, _filtersState$column4;
-
     var type = _ref3.type,
-        column = _ref3.column,
-        components = _ref3.props;
+      column = _ref3.column,
+      components = _ref3.props;
     var isPanel = variation === PANEL;
     var filter;
-
     switch (type) {
       case DATE:
         filter = /*#__PURE__*/React.createElement(DatePicker, _extends({}, components.DatePicker, {
           onChange: function onChange(value) {
             var _components$DatePicke, _components$DatePicke2;
-
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: value,
               type: type
@@ -194,7 +182,6 @@ var useFilters = function useFilters(_ref) {
           labelText: "End date"
         }, components.DatePickerInput.end)));
         break;
-
       case NUMBER:
         filter = /*#__PURE__*/React.createElement(NumberInput, _extends({
           step: 1,
@@ -203,7 +190,6 @@ var useFilters = function useFilters(_ref) {
         }, components.NumberInput, {
           onChange: function onChange(event) {
             var _components$NumberInp, _components$NumberInp2;
-
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: event.target.value,
               type: type
@@ -218,7 +204,6 @@ var useFilters = function useFilters(_ref) {
           value: filtersState[column].value
         }));
         break;
-
       case CHECKBOX:
         filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
           return /*#__PURE__*/React.createElement(Checkbox, _extends({
@@ -226,7 +211,6 @@ var useFilters = function useFilters(_ref) {
           }, option, {
             onChange: function onChange(_, _ref4) {
               var _option$onChange;
-
               var isSelected = _ref4.checked;
               var checkboxCopy = filtersState[column].value;
               var foundCheckbox = checkboxCopy.find(function (checkbox) {
@@ -248,13 +232,11 @@ var useFilters = function useFilters(_ref) {
           }));
         }));
         break;
-
       case RADIO:
         filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
           valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
           onChange: function onChange(selected) {
             var _components$RadioButt, _components$RadioButt2;
-
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: selected,
               type: type
@@ -272,20 +254,17 @@ var useFilters = function useFilters(_ref) {
           value: "Any"
         }), components.RadioButton.map(function (radio) {
           var _ref5, _radio$id;
-
           return /*#__PURE__*/React.createElement(RadioButton, _extends({
             key: (_ref5 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref5 !== void 0 ? _ref5 : radio.value
           }, radio));
         })));
         break;
-
       case DROPDOWN:
         filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
           selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
           items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
           onChange: function onChange(_ref6) {
             var _components$Dropdown$, _components$Dropdown;
-
             var selectedItem = _ref6.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: selectedItem,
@@ -301,14 +280,11 @@ var useFilters = function useFilters(_ref) {
         }));
         break;
     }
-
     if (isPanel) {
       return /*#__PURE__*/React.createElement(Layer, null, filter);
     }
-
     return filter;
   };
-
   return {
     filtersState: filtersState,
     setFiltersState: setFiltersState,
@@ -320,5 +296,4 @@ var useFilters = function useFilters(_ref) {
     filtersObjectArray: filtersObjectArray
   };
 };
-
 export default useFilters;

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

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -10,17 +9,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState } from 'react';
 import { FLYOUT } from '../constants';
 import { getInitialStateFromFilters } from '../utils';
-
 var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
   var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
   var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-
   var _useState = useState(getInitialStateFromFilters(filters, variation, initialFilters)),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
   return [state, setState];
 };
-
 export default useInitialStateFromFilters;

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

@@ -1,15 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
  * Copyright IBM Corp. 2023, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 /* eslint-disable jsdoc/check-param-names */
+
 import { useState, useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
+
 /**
  * Keeps track of the button disabled state
  * @param  {string} initialValue - the initial value if the buttons should be enabled or disabled
@@ -17,22 +17,18 @@ import isEqual from 'lodash/isEqual';
  * @param  {object} prevFiltersRef - reference of the prev filterState
  * @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,
-      filtersState = _ref.filtersState,
-      prevFiltersRef = _ref.prevFiltersRef;
-
+    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+    filtersState = _ref.filtersState,
+    prevFiltersRef = _ref.prevFiltersRef;
   var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      shouldDisableButtons = _useState2[0],
-      setShouldDisableButtons = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldDisableButtons = _useState2[0],
+    setShouldDisableButtons = _useState2[1];
   useEffect(function updateDisabledButtonsState() {
     setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
   }, [filtersState, prevFiltersRef]);
   return [shouldDisableButtons, setShouldDisableButtons];
 };
-
 export default useShouldDisableButtons;

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

@@ -6,20 +6,18 @@
  */
 import { useEffect, useContext } from 'react';
 import { FilterContext } from '../FilterProvider';
+
 /**
  * Subscribes to the filter event emitter
  * @param  {string} type - the type of event to call
  * @param  {Function} callback - a callback to run when the event is dispatched
  */
-
 var useSubscribeToEventEmitter = function useSubscribeToEventEmitter(type, callback) {
   var _useContext = useContext(FilterContext),
-      EventEmitter = _useContext.EventEmitter;
-
+    EventEmitter = _useContext.EventEmitter;
   useEffect(function subscribeToEmitter() {
     // This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
     EventEmitter.subscribe(type, callback);
   });
 };
-
 export default useSubscribeToEventEmitter;

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

@@ -4,37 +4,34 @@
  * 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 { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants';
 
+import { CHECKBOX, DATE, DROPDOWN, FLYOUT, NUMBER, PANEL, RADIO } from './constants';
 var applyInitialFilters = function applyInitialFilters(filterState, initialFilters) {
   Object.keys(filterState).forEach(function (key) {
     var hasInitialFilter = initialFilters.find(function (filter) {
       return filter.id === key;
     });
-
     if (hasInitialFilter) {
       filterState[key].value = hasInitialFilter.value;
     }
   });
-}; // This functions takes the filters passed in and makes an object to track it's state
-
+};
 
+// 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] : [];
   var initialFilterState = {};
-
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
-        column = _ref.column,
-        props = _ref.props;
-
+      column = _ref.column,
+      props = _ref.props;
     if (type === CHECKBOX) {
       initialFilterState[column] = {
         value: props.Checkbox.map(function (_ref2) {
           var id = _ref2.id,
-              labelText = _ref2.labelText,
-              value = _ref2.value;
+            labelText = _ref2.labelText,
+            value = _ref2.value;
           return {
             id: id,
             labelText: labelText,
@@ -66,13 +63,12 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
       };
     }
   };
-
   if (variation === FLYOUT) {
     filters.forEach(setInitialState);
   } else if (variation === PANEL) {
     filters.forEach(function (_ref3) {
       var _ref3$filters = _ref3.filters,
-          sections = _ref3$filters === void 0 ? [] : _ref3$filters;
+        sections = _ref3$filters === void 0 ? [] : _ref3$filters;
       sections.forEach(function (_ref4) {
         var filter = _ref4.filter;
         return setInitialState(filter);
@@ -81,10 +77,8 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
   } else {
     console.error('No variation passed into useInitialStateFromFilters');
   }
-
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);
   }
-
   return initialFilterState;
 };

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -7,6 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -14,18 +14,17 @@ import { pkg } from '../../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var InlineEditButton = function InlineEditButton(_ref) {
   var _cx, _cx2;
-
   var label = _ref.label,
-      Icon = _ref.renderIcon,
-      disabled = _ref.disabled,
-      LabelIcon = _ref.labelIcon,
-      placeholder = _ref.placeholder,
-      nonEditCell = _ref.nonEditCell,
-      isActiveCell = _ref.isActiveCell,
-      columnConfig = _ref.columnConfig,
-      totalInlineEditColumns = _ref.totalInlineEditColumns,
-      totalColumns = _ref.totalColumns,
-      type = _ref.type;
+    Icon = _ref.renderIcon,
+    disabled = _ref.disabled,
+    LabelIcon = _ref.labelIcon,
+    placeholder = _ref.placeholder,
+    nonEditCell = _ref.nonEditCell,
+    isActiveCell = _ref.isActiveCell,
+    columnConfig = _ref.columnConfig,
+    totalInlineEditColumns = _ref.totalInlineEditColumns,
+    totalColumns = _ref.totalColumns,
+    type = _ref.type;
   var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
   return /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),