@carbon/ibm-products 2.21.0 → 2.22.0

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

@@ -119,9 +119,9 @@ var useFilters = function useFilters(_ref2) {
     if (type === DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    var filterCopy = _toConsumableArray(filtersObjectArray);
     // // check if the filter already exists in the array
-    var filter = filtersObjectArrayCopy.find(function (item) {
+    var filter = filterCopy.find(function (item) {
       return item.id === column;
     });
 
@@ -129,81 +129,39 @@ var useFilters = function useFilters(_ref2) {
     if (filter) {
       filter.value = value;
     } else {
-      filtersObjectArrayCopy.push({
+      filterCopy.push({
         id: column,
         value: value,
         type: type
       });
     }
-
-    // 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
-      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);
-      }
-    } else if (type === DATE) {
-      if (value.length === 0) {
-        /**
-        Checks to see if the date value is an empty array, if it is that means the user wants
-        to reset the date filter
-        */
-        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array since there is nothing to filter
-        filtersObjectArrayCopy.splice(_index, 1);
-      }
-    } else if (type === DROPDOWN || type === RADIO) {
-      if (value === 'Any') {
-        /**
-        Checks to see if the selected value is 'Any', that means the user wants
-        to reset specific filter
-        */
-        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array
-        filtersObjectArrayCopy.splice(_index2, 1);
-      }
-    } else if (type === NUMBER) {
-      // If the value is empty remove it from the filtersObjectArray
-      if (value === '') {
-        // 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
-        filtersObjectArrayCopy.splice(_index3, 1);
-      }
+    var index = filterCopy.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === column;
+    });
+    var clearCheckbox = type === CHECKBOX && filterCopy[index].value.every(function (_ref5) {
+      var selected = _ref5.selected;
+      return selected === false;
+    });
+    var clearDate = type === DATE && value.length === 0;
+    var clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
+    var clearNum = type === NUMBER && value === '';
+    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    if (shouldClear) {
+      filterCopy.splice(index, 1);
     }
-    setFiltersObjectArray(filtersObjectArrayCopy);
-
-    // // Automatically apply the filters if the updateMethod is instant
+    setFiltersObjectArray(filterCopy);
     if (updateMethod === INSTANT) {
-      setAllFilters(filtersObjectArrayCopy);
+      setAllFilters(filterCopy);
     }
   };
+
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref4) {
+  var renderFilter = function renderFilter(_ref6) {
     var _filtersState$column3, _filtersState$column4;
-    var type = _ref4.type,
-      column = _ref4.column,
-      components = _ref4.props;
+    var type = _ref6.type,
+      column = _ref6.column,
+      components = _ref6.props;
     var filter;
     var isPanel = variation === PANEL;
     if (!type) {
@@ -224,8 +182,8 @@ var useFilters = function useFilters(_ref2) {
         return /*#__PURE__*/React.createElement(Checkbox, _extends({
           key: option.id
         }, option, {
-          onChange: function onChange(_, _ref5) {
-            var checked = _ref5.checked;
+          onChange: function onChange(_, _ref7) {
+            var checked = _ref7.checked;
             handleCheckboxChange({
               checked: checked,
               filtersState: filtersState,
@@ -316,9 +274,9 @@ var useFilters = function useFilters(_ref2) {
             labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
             value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
           }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref6, _radio$id;
+            var _ref8, _radio$id;
             return /*#__PURE__*/React.createElement(RadioButton, _extends({
-              key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
+              key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
             }, radio));
           })));
         }
@@ -327,9 +285,9 @@ var useFilters = function useFilters(_ref2) {
         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(_ref7) {
+          onChange: function onChange(_ref9) {
             var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref7.selectedItem;
+            var selectedItem = _ref9.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: selectedItem,
               type: type

package/es/components/Datagrid/useRowIsMouseOver.js

@@ -37,7 +37,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       });
     });
     Object.assign(instance, {
-      rows: rowsWithMouseOver
+      rows: rowsWithMouseOver,
+      withMouseHover: true,
+      setMouseOverRowIndex: setMouseOverRowIndex
     });
     hooks.getRowProps.push(getRowProps);
   };

package/es/components/DelimitedList/DelimitedList.docs-page.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
+import * as stories from './DelimitedList.stories';
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/React.createElement(StoryDocsPage, {
+    blocks: [{
+      story: stories.delimited
+    }, {
+      story: stories.notDelimited
+    }, {
+      story: stories.empty
+    }]
+  });
+};
+export default DocsPage;

package/es/components/DelimitedList/DelimitedList.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "delimiter", "items", "truncate"];
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--delimited-list");
+var componentName = 'DelimitedList';
+var defaults = {
+  delimiter: ', ',
+  items: [],
+  truncate: true
+};
+
+/**
+ * `DelimitedList` converts an array of items into a single line of
+ * comma-separated values.
+ */
+export var DelimitedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$delimiter = _ref.delimiter,
+    delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
+    ref: ref
+  }, getDevtoolsProps(componentName)), items.length > 0 ? items.join(delimiter) : '–');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DelimitedList = pkg.checkComponentEnabled(DelimitedList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+DelimitedList.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+DelimitedList.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The character(s) used to separate the items.
+   */
+  delimiter: PropTypes.string,
+  /**
+   * Array of items to be listed.
+   */
+  items: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Toggle the component's ability to truncate or not.
+   */
+  truncate: PropTypes.bool
+};

package/es/components/DelimitedList/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+
+export { DelimitedList } from './DelimitedList';