@carbon/ibm-products 2.0.1 → 2.1.1

package/lib/global/js/hooks/useResizeObserver.js

@@ -14,13 +14,7 @@ var _react = require("react");
  * LICENSE file in the root directory of this source tree.
  */
 
-var useResizeObserver = function useResizeObserver(ref) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    callback: null,
-    throttleInterval: 0
-  };
-  var callback = options.callback,
-    throttleInterval = options.throttleInterval;
+var useResizeObserver = function useResizeObserver(ref, callback) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
@@ -29,8 +23,14 @@ var useResizeObserver = function useResizeObserver(ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
-  var throttleTimeout = (0, _react.useRef)(null);
   var entriesToHandle = (0, _react.useRef)(null);
+  var cb = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    // ref for callback removes it as dependency fro useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = callback;
+  }, [callback]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -42,29 +42,15 @@ var useResizeObserver = function useResizeObserver(ref) {
       var entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
-      throttleTimeout.current = null;
-      callback && callback(entry.contentRect);
+      cb.current && cb.current(entry.contentRect);
     };
     var observer = new ResizeObserver(function (entries) {
       // always update entriesToHandle
       entriesToHandle.current = entries;
-      if (throttleInterval) {
-        // if a throttleInterval check for running timeout
-        if (throttleTimeout.current === null) {
-          // no live timeout set entries to handle and move on
-
-          // set up throttle
-          throttleTimeout.current = setTimeout(function () {
-            // do callbacks
-            doCallbacks();
-            // reset throttle
-            throttleTimeout.current = null;
-          }, throttleInterval);
-        }
-      } else {
-        // no throttle do callbacks every time
+      window.requestAnimationFrame(function () {
+        // do callbacks
         doCallbacks();
-      }
+      });
     });
 
     // observe all refs passed
@@ -74,7 +60,7 @@ var useResizeObserver = function useResizeObserver(ref) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref, options]);
+  }, [ref]);
   return {
     width: width,
     height: height

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -54,27 +54,27 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.34",
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.35",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.1.1",
-    "glob": "^10.2.3",
-    "jest": "^29.4.2",
-    "jest-config-ibm-cloud-cognitive": "^0.24.21",
-    "jest-environment-jsdom": "^29.4.2",
+    "glob": "^10.2.6",
+    "jest": "^29.5.0",
+    "jest-config-ibm-cloud-cognitive": "^0.24.22",
+    "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "sass": "^1.62.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
+    "@babel/runtime": "^7.22.3",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.13.0",
-    "@carbon/layout": "^11.13.0",
-    "@carbon/motion": "^11.10.0",
-    "@carbon/react": "~1.28.0",
-    "@carbon/themes": "^11.18.0",
-    "@carbon/type": "^11.17.0",
+    "@carbon/grid": "^11.14.0",
+    "@carbon/layout": "^11.14.0",
+    "@carbon/motion": "^11.11.0",
+    "@carbon/react": "~1.30.0",
+    "@carbon/themes": "^11.19.0",
+    "@carbon/type": "^11.18.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "54e21d74eb1784d7d20149f19fc106eee92a69b2"
+  "gitHead": "30b5fa97e450c8587e04b5e2e1be98c9a7379d45"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -77,6 +77,10 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     align-items: center;
   }
 
+  &-form-control-wrapper--radio {
+    cursor: pointer;
+  }
+
   &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -92,6 +92,5 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
 .#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('header');
 }

package/scss/components/ButtonMenu/_button-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -7,7 +7,10 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type';
 
 // TODO: @use(s) of Carbon settings and component styles and other
 // related component styles used by ButtonMenu
@@ -17,9 +20,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
 
 .#{$block-class} {
   min-width: 160px;
+  &.#{$block-class}__wrapper--primary,
+  &.#{$block-class}__wrapper--primary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-primary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--primary:hover {
+    background-color: $button-primary-hover;
+  }
+
+  &.#{$block-class}__wrapper--tertiary,
+  &.#{$block-class}__wrapper--tertiary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-tertiary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--tertiary:hover {
+    background-color: $button-tertiary-hover;
+  }
+
+  &.#{$block-class}__wrapper--ghost,
+  &.#{$block-class}__wrapper--ghost.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: transparent;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--ghost:hover {
+    background-color: $layer-hover;
+  }
 
   .#{$block-class}__trigger {
+    @include type.type-style('body-compact-01');
+
+    display: flex;
     width: 100%;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 $spacing-05;
   }
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 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.
@@ -22,6 +22,7 @@
 
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Datagrid
+@use '../ButtonMenu';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
@@ -33,7 +34,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     display: none;
   }
 
-  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
+    > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
     left: $spacing-01;
     width: 112px;
   }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -114,3 +114,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   margin-right: $spacing-03;
   background-color: $field-01;
 }
+
+.#{c4p-settings.$carbon-prefix}--body--with-modal-open {
+  .#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
+    top: -$spacing-07;
+    left: -$spacing-07;
+    width: 100vw;
+  }
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2020, 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.
+//
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -582,12 +581,6 @@
   width: 100%;
 }
 
-.#{c4p-settings.$carbon-prefix}--body--with-modal-open
-  .#{$block-class}__grid-container {
-  overflow: hidden;
-  height: 100vh;
-}
-
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
   width: 100%;
 }
@@ -632,3 +625,9 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   background-color: $layer-accent;
 }
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$pkg-prefix}--button-menu {
+  padding: 0;
+}

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -54,7 +54,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   top: $spacing-09;
   right: 0;
   overflow: auto;
-  min-width: 22.75rem;
+  min-width: 20rem;
   max-width: 22.75rem;
   min-height: 38.5rem;
   max-height: 38.5rem;

package/scss/components/PageHeader/_page-header.scss

@@ -29,7 +29,6 @@ $block-class: #{$pkg-prefix}--page-header;
 $breadcrumb-block-class: #{$pkg-prefix}--breadcrumb-with-overflow;
 
 $raised-z-index: 99;
-/* stylelint-disable-next-line function-no-unknown */
 $z-index-header-minus: utilities.z('header') - 1;
 
 $left-section-std-width: 60%;

package/scss/components/SidePanel/_side-panel.scss

@@ -64,7 +64,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('modal');
   top: $spacing-09;
   height: calc(100% - 3rem);
@@ -441,7 +440,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}__overlay {
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('overlay');
   width: 100%;
   height: 100%;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -30,7 +30,6 @@ $motion-duration: $duration-moderate-02;
 @include block-wrap($block-class) {
   &.#{$block-class} {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
@@ -44,7 +43,6 @@ $motion-duration: $duration-moderate-02;
 
   &.is-visible {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal');
     align-items: flex-end;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
@@ -58,7 +56,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-1-of-2 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.33);
@@ -66,7 +63,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-1-of-3 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 2;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.11);
@@ -74,7 +70,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-2-of-3 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.25);

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

@@ -1,21 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-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];
-  return [state, setState];
-};
-export default useInitialStateFromFilters;

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

@@ -1,30 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _constants = require("../constants");
-var _utils = require("../utils");
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-
-var useInitialStateFromFilters = function useInitialStateFromFilters(filters) {
-  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
-  var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, initialFilters)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  return [state, setState];
-};
-var _default = useInitialStateFromFilters;
-exports.default = _default;