@carbon/ibm-products 2.25.0 → 2.27.0

package/lib/global/js/hooks/index.d.ts

@@ -9,4 +9,6 @@ export { useRetrieveStepData } from "./useRetrieveStepData";
 export { useValidCreateStepCount } from "./useValidCreateStepCount";
 export { useControllableState } from "./useControllableState";
 export { usePrefix } from "./usePrefix";
+export { useFocus } from "./useFocus";
+export { useIsomorphicEffect } from "./useIsomorphicEffect";
 export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/lib/global/js/hooks/useFocus.d.ts

@@ -0,0 +1,11 @@
+export function useFocus(modalRef: any): {
+    firstElement: any;
+    lastElement: any;
+    allElements: any;
+    keyDownListener: (event: any) => void;
+    getFocusable: () => {
+        first: any;
+        last: any;
+        all: any;
+    };
+};

package/lib/global/js/hooks/useFocus.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@carbon/react');
+var settings = require('../../../settings.js');
+var React = require('react');
+
+var useFocus = function useFocus(modalRef) {
+  var carbonPrefix = react.usePrefix();
+  var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
+  // Querying focusable element in the modal
+  // Query to exclude hidden elements in the modal from querySelectorAll() method
+  // feel free to include more if needed :)
+  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
+  // Queries to include element types button, input, select, textarea
+  var queryButton = "button".concat(notQuery);
+  var queryInput = "input".concat(notQuery);
+  var querySelect = "select".concat(notQuery);
+  var queryTextarea = "textarea".concat(notQuery);
+  var queryLink = "[href]".concat(notQuery);
+  // Final query
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea);
+  var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
+  var getFocusable = React.useCallback(function () {
+    // Selecting all focusable elements based on the above conditions
+    var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
+    var first = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
+    var last = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[(focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) - 1];
+    var all = focusableElements;
+    return {
+      first: first,
+      last: last,
+      all: all
+    };
+  }, [modalEl, query]);
+  React.useEffect(function () {
+    getFocusable();
+  }, [getFocusable]);
+  var handleKeyDown = function handleKeyDown(event) {
+    // Checking whether the key is tab or not
+    if (event.key === 'Tab') {
+      // updating the focusable elements list
+      var _getFocusable = getFocusable(),
+        first = _getFocusable.first,
+        last = _getFocusable.last,
+        all = _getFocusable.all;
+      setTimeout(function () {
+        var _document, _document2;
+        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+          // Prevents the default "Tab" behavior
+          event.preventDefault();
+          // if the user press shift+tab and the current element not in focusable items
+          last === null || last === void 0 || last.focus();
+        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+          event.preventDefault();
+          // user pressing tab key only then
+          // focusing the first element if the current element is not in focusable items
+          first === null || first === void 0 || first.focus();
+        }
+      }, 0);
+    }
+  };
+  return {
+    firstElement: getFocusable().first,
+    lastElement: getFocusable().last,
+    allElements: getFocusable().all,
+    keyDownListener: handleKeyDown,
+    getFocusable: getFocusable
+  };
+};
+
+exports.useFocus = useFocus;

package/lib/global/js/hooks/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+export const useIsomorphicEffect: typeof useEffect;
+import { useEffect } from 'react';

package/lib/global/js/hooks/useIsomorphicEffect.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
+// useLayoutEffect on the client, useEffect on the server
+var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+exports.useIsomorphicEffect = useIsomorphicEffect;

package/lib/global/js/package-settings.d.ts

@@ -75,9 +75,11 @@ declare namespace defaults {
         let EditTearsheetNarrow: boolean;
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
+        let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let StringFormatter: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

package/lib/global/js/package-settings.js

@@ -78,9 +78,11 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    StringFormatter: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/lib/index.js

@@ -103,6 +103,7 @@ var InlineTip = require('./components/InlineTip/InlineTip.js');
 var InlineTipButton = require('./components/InlineTip/InlineTipButton.js');
 var InlineTipLink = require('./components/InlineTip/InlineTipLink.js');
 var NonLinearReading = require('./components/NonLinearReading/NonLinearReading.js');
+var BigNumbers = require('./components/BigNumbers/BigNumbers.js');
 var TruncatedList = require('./components/TruncatedList/TruncatedList.js');
 var InterstitialScreen = require('./components/InterstitialScreen/InterstitialScreen.js');
 var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
@@ -110,6 +111,7 @@ var InterstitialScreenViewModule = require('./components/InterstitialScreenViewM
 var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
+var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 
 
@@ -422,6 +424,10 @@ Object.defineProperty(exports, 'NonLinearReading', {
 	enumerable: true,
 	get: function () { return NonLinearReading.NonLinearReading; }
 });
+Object.defineProperty(exports, 'BigNumbers', {
+	enumerable: true,
+	get: function () { return BigNumbers.BigNumbers; }
+});
 Object.defineProperty(exports, 'TruncatedList', {
 	enumerable: true,
 	get: function () { return TruncatedList.TruncatedList; }
@@ -450,6 +456,10 @@ Object.defineProperty(exports, 'SearchBar', {
 	enumerable: true,
 	get: function () { return SearchBar.SearchBar; }
 });
+Object.defineProperty(exports, 'StringFormatter', {
+	enumerable: true,
+	get: function () { return StringFormatter.StringFormatter; }
+});
 Object.defineProperty(exports, 'UserAvatar', {
 	enumerable: true,
 	get: function () { return UserAvatar.UserAvatar; }

package/lib/settings.d.ts

@@ -61,9 +61,11 @@ export const pkg: {
         EditTearsheetNarrow: boolean;
         EditFullPage: boolean;
         EditUpdateCards: boolean;
+        BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        StringFormatter: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -75,7 +75,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.3",
+    "jest-config-ibm-cloud-cognitive": "^1.1.4",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -84,12 +84,12 @@
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.70.0",
-    "typescript-config-carbon": "^0.2.0",
+    "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.24.0",
+    "@carbon/ibm-products-styles": "^2.26.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
@@ -106,11 +106,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.49.0",
-    "@carbon/themes": "^11.30.0",
+    "@carbon/react": "^1.50.0",
+    "@carbon/themes": "^11.31.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "81d80c8227765937cee54e2068800de818ebefb6"
+  "gitHead": "c42c0c622d6ad2a1dfc2e2122d0dd53337780243"
 }

package/scss/components/BigNumbers/_big-numbers.scss

@@ -0,0 +1,151 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+// BigNumbers uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by BigNumbers
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--big-numbers;
+$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
+
+.#{$block-class}__label {
+  @include type-style('label-01');
+
+  display: block;
+  margin: 0;
+  color: $text-secondary;
+}
+
+.#{$block-class}__value {
+  @include type-style('heading-04');
+
+  margin-bottom: 0;
+}
+
+.#{$block-class}__total {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}__total,
+.#{$block-class}__percentage-mark {
+  margin-top: auto;
+  margin-bottom: $spacing-02;
+}
+
+.#{$block-class}__info {
+  vertical-align: top;
+}
+
+.#{$block-class}__trend {
+  margin-top: $spacing-03;
+  vertical-align: top;
+}
+
+.#{$block-class}__row {
+  display: flex;
+}
+
+.#{$block-class}__info {
+  padding-left: $spacing-03;
+}
+
+.#{$block-class}__percentage {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}__percentage-mark {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--lg .#{$block-class}__value,
+.#{$block-class}--lg .#{$block-class}__percentage {
+  @include type-style('heading-06');
+}
+
+.#{$block-class}--lg .#{$block-class}__total,
+.#{$block-class}--lg .#{$block-class}__percentage-mark {
+  @include type-style('heading-03');
+}
+
+.#{$block-class}--xl .#{$block-class}__label {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--xl .#{$block-class}__value,
+.#{$block-class}--xl .#{$block-class}__percentage {
+  @include type-style('heading-07');
+}
+
+.#{$block-class}--xl .#{$block-class}__total,
+.#{$block-class}--xl .#{$block-class}__percentage-mark {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}--xl .#{$block-class}__trend {
+  margin-top: $spacing-04;
+}
+
+.#{$skeleton-block-class} {
+  width: 4rem;
+}
+
+.#{$skeleton-block-class}__label {
+  height: $spacing-04;
+  margin-top: 0;
+  margin-bottom: $spacing-03;
+}
+
+.#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-08 !important;
+  margin: 0;
+}
+
+.#{$skeleton-block-class}--lg {
+  width: 5rem;
+}
+
+.#{$skeleton-block-class}--xl {
+  width: 6rem;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-09 !important;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-10 !important;
+}
+
+.#{$block-class} .#{$block-class}__tooltip-trigger:focus {
+  outline: 1px solid $focus;
+}

package/scss/components/BigNumbers/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// 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 any Carbon component styles used from BigNumbers in this file.
+// BigNumbers uses the following Carbon components:
+@use '@carbon/react/scss/components/skeleton-styles';
+@use '@carbon/react/scss/components/tooltip';

package/scss/components/BigNumbers/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './big-numbers';

package/scss/components/BigNumbers/_index.scss

@@ -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.
+//
+
+@use './big-numbers';

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

@@ -162,6 +162,15 @@
   @include ai-gradient('top', 100%);
 }
 
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:has(> .#{$block-class}__table-row-ai-enabled) {
+  @include ai-gradient('left', 50%);
+
+  background-attachment: fixed;
+}
+
 .#{$block-class}
   th.#{$block-class}__with-slug
   .#{c4p-settings.$carbon-prefix}--slug {
@@ -791,3 +800,13 @@
 .#{$block-class} .#{$block-class}__col-resizer-range::-moz-range-thumb {
   visibility: hidden;
 }
+
+.#{$block-class} .#{$block-class}__table-row-ai-enabled {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class} .#{$block-class}__table-row-ai-spacer,
+.#{$block-class} .#{$block-class}__table-row-ai-enabled {
+  width: $spacing-05;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -17,7 +17,7 @@ $block-class: #{$pkg-prefix}--filter-summary;
   width: 100%;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   height: to-rem(48px);
-  align-items: start;
+  align-items: flex-start;
   padding: $spacing-03;
   border-top: 1px solid $border-subtle-01;
   background: $layer-01;

package/scss/components/FullPageError/_full-page-error.scss

@@ -43,8 +43,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
     padding: 0 $spacing-07 0 0;
   }
 }
-.#{$block-class}__error-svg {
-  margin: auto $spacing-03 $spacing-11 $spacing-03;
+
+.#{$block-class}__error-svg-container {
+  display: flex;
+  height: 100%;
+  padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
+  @include breakpoint(md) {
+    padding: auto $spacing-03 $spacing-11 $spacing-03;
+  }
 }
 
 .#{$block-class}__error-label,
@@ -53,6 +59,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 }
 
 .#{$block-class}__error-label {
+  display: block;
   color: $text-error;
 }
 .#{$block-class}__error-title {
@@ -64,3 +71,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 
   margin-bottom: $spacing-07;
 }
+
+// safari rendering fix
+.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg {
+  width: 100%;
+}
+
+// svg theme styles
+.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg path {
+  fill: $background;
+  stroke: $border-inverse;
+}

package/scss/components/ProductiveCard/_productive-card.scss

@@ -99,6 +99,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__header-container {
-    align-items: start;
+    align-items: flex-start;
   }
 }

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

@@ -353,7 +353,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: fixed;
+    position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;

package/scss/components/StringFormatter/_carbon-imports.scss

@@ -0,0 +1,10 @@
+//
+// 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 any Carbon component styles used from StringFormatter in this file.
+// StringFormatter uses the following Carbon components:
+@use '@carbon/react/scss/components/tooltip';

package/scss/components/StringFormatter/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './string-formatter';

package/scss/components/StringFormatter/_index.scss

@@ -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.
+//
+
+@use './string-formatter';

package/scss/components/StringFormatter/_string-formatter.scss

@@ -0,0 +1,97 @@
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// StringFormatter uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by StringFormatter
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--string-formatter;
+$popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
+
+.#{$block-class} {
+  display: inline-block;
+  text-align: left;
+}
+
+.#{$block-class}--content {
+  display: inline-block;
+  text-align: left;
+}
+
+.#{$block-class}--truncate {
+  display: -webkit-box;
+  overflow: hidden;
+  max-width: 80ch;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.#{$block-class}__tooltip > button {
+  border-width: 0;
+  color: currentColor;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.#{$popover-block-class} {
+  max-width: $spacing-05;
+  margin: 0 auto;
+}
+
+.#{$block-class} .#{$popover-block-class}-content {
+  max-inline-size: 20rem;
+}
+
+.#{$block-class} .#{$popover-block-class}--left .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-bottom .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-top .#{$popover-block-class} {
+  margin: 0;
+}
+
+.#{$block-class} .#{$popover-block-class}--right .#{$popover-block-class},
+.#{$block-class}
+  .#{$popover-block-class}--right-bottom
+  .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--right-top .#{$popover-block-class} {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.#{$block-class} .#{$popover-block-class}--top .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-start: -1px !important;
+}
+
+.#{$block-class}
+  .#{$popover-block-class}--bottom
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-end: -1px !important;
+}