@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.36.0-alpha.27+3b4e0fa75",
+  "version": "2.37.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -76,7 +76,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.5",
+    "jest-config-ibm-cloud-cognitive": "^1.1.7",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -90,13 +90,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.33.0",
+    "@carbon/ibm-products-styles": "^2.35.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@ibm/telemetry-js": "^1.2.0",
+    "@ibm/telemetry-js": "^1.5.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "3b4e0fa7593382128900e68051863dbc949a319b"
+  "gitHead": "c2a0c5dcbee48c0da2a211c09e2a505fd39e7203"
 }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -20,7 +20,7 @@
 // TODO: @use '@carbon/react/scss/grid';
 
 // CoachmarkOverlayElements uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElements
+@use '../Carousel/carousel';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -8,7 +8,11 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme';
 
+@use './styles/index';
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
@@ -23,3 +27,25 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 // .#{$block-class} {
 //   // TODO: Styles.
 // }
+
+.#{$block-class}__condition-builder__group {
+  display: flex;
+}
+
+.#{$block-class}__condition-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+.#{$block-class}__gap {
+  margin-right: $spacing-01;
+}
+.#{$block-class}__gap-bottom {
+  margin-bottom: $spacing-01;
+}
+.#{$block-class}__gap-left {
+  margin-left: $spacing-01;
+}
+.#{$block-class}__condition-block {
+  display: flex;
+  flex-direction: row;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -0,0 +1,46 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/motion';
+@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/utilities/focus-outline';
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__condition-block,
+.#{$block-class}__condition-block .#{$block-class}__block {
+  position: relative;
+  display: inline-flex;
+}
+
+[role='row']:focus {
+  @include focus-outline.focus-outline('outline');
+
+  outline-offset: 0;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button:not(
+    .#{$block-class}__statement-button,
+    .#{$block-class}__connector-button
+  ) {
+  background-color: $tag-background-red;
+  color: $tag-color-red;
+}
+
+.#{$block-class}__condition-builder-condition__deletion-preview
+  .#{$block-class}__condition-builder-button:not(
+    .#{$block-class}__statement-button,
+    .#{$block-class}__connector-button
+  ):hover {
+  background-color: $tag-hover-red;
+}
+
+.#{$block-class}__text-ellipsis {
+  display: block;
+  overflow: hidden;
+  max-width: $spacing-13;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -0,0 +1,194 @@
+@use '@carbon/react/scss/theme' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/utilities';
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/utilities/focus-outline';
+@use '@carbon/styles/scss/components/tag';
+
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+.#{$block-class}__content-container * {
+  @include type-style('body-01');
+}
+
+.#{$block-class}__condition-builder-item__content {
+  overflow: auto;
+  min-width: $spacing-07 + $spacing-13;
+  max-width: $spacing-13 + $spacing-13;
+  max-height: $spacing-13 + $spacing-13 + $spacing-07;
+}
+
+.#{$block-class}__condition-builder-item__title {
+  @include type-style('heading-01');
+
+  padding: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__search {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option {
+  height: 2rem;
+  cursor: pointer;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-item-option__option-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option-label {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  column-gap: $spacing-03;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__condition-builder-item-option
+  > ul[aria-multiSelectable='true']
+  .#{$block-class}__condition-builder-item-option__option-label {
+  justify-content: center;
+}
+
+.#{$block-class}__condition-builder-item-option__option:not(:first-of-type)
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start: 0.0625rem solid $border-subtle;
+}
+
+.#{$block-class}__condition-builder-item-option__option:hover
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option:hover
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content,
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
+  + .#{$block-class}__condition-builder-item-option__option
+  .#{$block-class}__condition-builder-item-option__option-content {
+  border-block-start-color: transparent;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true'] {
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__condition-builder-item-option__option[aria-selected='true']:hover {
+  background-color: $layer-selected-hover;
+}
+
+.#{$block-class}__condition-builder-item-date,
+.#{$block-class}__condition-builder-item-text,
+.#{$block-class}__condition-builder-item-number,
+#{$block-class}__condition-builder-item-time {
+  padding-block-end: $spacing-05;
+  padding-inline: $spacing-05;
+}
+
+.#{$block-class}__condition-builder-checkmark {
+  margin-left: auto;
+}
+
+.#{$block-class}__condition-builder-button {
+  @include utilities.button-reset();
+
+  display: inline-flex;
+  height: $spacing-07;
+  align-items: center;
+  background-color: $layer;
+  color: inherit;
+  column-gap: $spacing-02;
+  cursor: pointer;
+  padding-inline: $spacing-03;
+  white-space: nowrap;
+}
+.#{$block-class}__condition-builder-button:hover {
+  background-color: $layer-hover;
+}
+.#{$block-class}__condition-builder__group.hoveredConnector
+  .#{$block-class}__condition-wrapper
+  > .conditionBlockWrapper
+  .#{$block-class}__connector-button {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__condition-builder-button:focus {
+  @include focus-outline.focus-outline('outline');
+
+  content: '';
+  inset: 0;
+}
+
+.#{$block-class}__statement-button,
+.#{$block-class}__connector-button {
+  min-width: $spacing-10;
+  padding-inline: $spacing-03;
+}
+.#{$block-class}__property-field {
+  @include type.type-style('heading-01');
+
+  padding-left: $spacing-03;
+}
+.#{$block-class}__close-condition {
+  padding-right: $spacing-03;
+}
+.#{$block-class}__add-button {
+  padding-right: $spacing-03;
+  padding-left: $spacing-03;
+}
+.#{$block-class}__conditionWrapper {
+  display: flex;
+}
+
+.#{$block-class}__multiselectSelectionStatusContainer {
+  display: flex;
+  align-items: center;
+  padding-inline: $spacing-05;
+  .#{$block-class}__selectAll-button {
+    margin-left: auto;
+  }
+}
+
+.#{$block-class}__condition-builder-item-option__option:focus {
+  @include focus-outline.focus-outline('outline');
+}
+// .#{$block-class}__tree {
+//   .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
+//     flex-basis: 100%;
+//   }
+//   .#{$block-class}__groupConnector {
+//     background-color: $layer;
+//   }
+//   .#{$block-class}__condition-wrapper
+//     > :nth-child(1)
+//     .#{$block-class}__condition-builder-button,
+//   .#{$block-class}__condition-wrapper
+//     > :nth-child(2)
+//     .#{$block-class}__condition-builder-button {
+//     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
+//   }
+// }
+.#{$block-class}__groupOperatorConnector {
+  margin-bottom: $spacing-02;
+}
+.#{$block-class}__option-check-box {
+  display: flex;
+  margin-right: $spacing-03;
+}
+.#{$block-class}__option-icon {
+  align-self: center;
+  margin-left: auto;
+}

package/scss/components/ConditionBuilder/styles/_index.scss

@@ -0,0 +1,2 @@
+@use './conditionBuilderItem';
+@use './conditionBuilderCondition';

package/scss/components/Guidebanner/_guidebanner.scss

@@ -32,6 +32,9 @@
 @use '@carbon/styles/scss/type' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
+// Guidebanner uses the following Carbon for IBM Products components:
+@use '../Carousel/carousel';
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
 

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -17,13 +17,8 @@
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
 // InterstitialScreen uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InterstitialScreen
+@use '../Carousel/carousel';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -55,7 +55,9 @@ $motion-duration: $duration-moderate-02;
     align-items: flex-end;
     color: $text-primary;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration;
+    transition: visibility 0s linear $motion-duration,
+      background-color $motion-duration motion(exit, expressive),
+      opacity $motion-duration motion(exit, expressive);
     --#{$block-class}--stacking-scale-factor-single: 0.95;
     --#{$block-class}--stacking-scale-factor-double: 0.9;
   }

package/telemetry.yml

@@ -788,3 +788,6 @@ collect:
         - 'light-magenta'
         - 'light-purple'
         - 'light-teal'
+  js:
+    functions: {}
+    tokens: null

package/es/components/ConditionBuilder/assets/sampleInput.d.ts

@@ -1,58 +0,0 @@
-export declare const inputData: {
-    properties: ({
-        id: string;
-        label: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
-        type: string;
-        config: {
-            options: {
-                label: string;
-                id: string;
-            }[];
-            includeSearch?: undefined;
-            min?: undefined;
-            step?: undefined;
-            unit?: undefined;
-        };
-    } | {
-        id: string;
-        label: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
-        type: string;
-        config: {
-            options: {
-                label: string;
-                id: string;
-                icon: import("@carbon/react/icons").CarbonIconType;
-            }[];
-            includeSearch: boolean;
-            min?: undefined;
-            step?: undefined;
-            unit?: undefined;
-        };
-    } | {
-        id: string;
-        label: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
-        type: string;
-        config: {
-            options?: undefined;
-            includeSearch?: undefined;
-            min?: undefined;
-            step?: undefined;
-            unit?: undefined;
-        };
-    } | {
-        id: string;
-        label: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
-        type: string;
-        config: {
-            min: number;
-            step: number;
-            unit: string;
-            options?: undefined;
-            includeSearch?: undefined;
-        };
-    })[];
-};

package/es/global/js/utils/keyboardNavigation.d.ts

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Various utilities to help with a11y work
- */
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-export const DOCUMENT_POSITION_BROAD_PRECEDING: number | false;
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located later than `node` in the document or `node` contains `target`.
- */
-export const DOCUMENT_POSITION_BROAD_FOLLOWING: number | false;
-/**
- * CSS selector that selects major nodes that are sequential-focusable.
- */
-export const selectorTabbable: "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
-/**
- * CSS selector that selects major nodes that are click focusable
- */
-export const selectorFocusable: "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";

package/es/global/js/utils/keyboardNavigation.js

@@ -1,33 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Various utilities to help with a11y work
- */
-
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-var DOCUMENT_POSITION_BROAD_PRECEDING =
-// Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
-
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located later than `node` in the document or `node` contains `target`.
- */
-var DOCUMENT_POSITION_BROAD_FOLLOWING =
-// Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
-
-/**
- * CSS selector that selects major nodes that are sequential-focusable.
- */
-var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
-
-export { DOCUMENT_POSITION_BROAD_FOLLOWING, DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable };

package/es/global/js/utils/wrapFocus.d.ts

@@ -1,25 +0,0 @@
-export default wrapFocus;
-/**
- * @param {Node} node A DOM node.
- * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
- * @returns {boolean} `true` of the given `node` is in a floating menu.
- */
-export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
-/**
- * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
- * @param {object} options The options.
- * @param {Node} options.bodyNode The DOM node of the inner modal.
- * @param {Node} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {Node} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {Node} options.currentActiveNode The DOM node that has focus.
- * @param {Node} options.oldActiveNode The DOM node that previously had focus.
- * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
- */
-declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
-    bodyNode: Node;
-    startTrapNode: Node;
-    endTrapNode: Node;
-    currentActiveNode: Node;
-    oldActiveNode: Node;
-    selectorsFloatingMenus?: Node | undefined;
-}): void;

package/es/global/js/utils/wrapFocus.js

@@ -1,68 +0,0 @@
-/**
- * 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.
- */
-
-import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboardNavigation.js';
-import { carbon } from '../../../settings.js';
-
-/**
- * @param {Node} node A DOM node.
- * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
- * @returns {boolean} `true` of the given `node` is in a floating menu.
- */
-function elementOrParentIsFloatingMenu(node) {
-  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
-  if (node && typeof node.closest === 'function') {
-    return selectorsFloatingMenus.some(function (selector) {
-      return node.closest(selector);
-    });
-  }
-}
-
-/**
- * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
- * @param {object} options The options.
- * @param {Node} options.bodyNode The DOM node of the inner modal.
- * @param {Node} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {Node} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {Node} options.currentActiveNode The DOM node that has focus.
- * @param {Node} options.oldActiveNode The DOM node that previously had focus.
- * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
- */
-function wrapFocus(_ref) {
-  var bodyNode = _ref.bodyNode,
-    startTrapNode = _ref.startTrapNode,
-    endTrapNode = _ref.endTrapNode,
-    currentActiveNode = _ref.currentActiveNode,
-    oldActiveNode = _ref.oldActiveNode,
-    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
-  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
-    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
-    if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
-      var arrayNodes = Array.from(bodyNode.querySelectorAll(selectorTabbable));
-      arrayNodes.reverse();
-      var tabbable = arrayNodes.find(function (elem) {
-        return Boolean(elem.offsetParent);
-      });
-      if (tabbable) {
-        tabbable.focus();
-      } else if (bodyNode !== oldActiveNode) {
-        bodyNode.focus();
-      }
-    } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
-      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(selectorTabbable), function (elem) {
-        return Boolean(elem.offsetParent);
-      });
-      if (_tabbable) {
-        _tabbable.focus();
-      } else if (bodyNode !== oldActiveNode) {
-        bodyNode.focus();
-      }
-    }
-  }
-}
-
-export { wrapFocus as default, elementOrParentIsFloatingMenu };