@carbon/ibm-products 2.42.1-canary.2 → 2.42.1-canary.22

package/lib/components/Datagrid/useSelectRows.d.ts

@@ -1,2 +1,9 @@
+/**
+ * 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.
+ */
+import { Hooks } from 'react-table';
+declare const useSelectRows: (hooks: Hooks) => void;
 export default useSelectRows;
-declare function useSelectRows(hooks: any): void;

package/lib/components/Datagrid/useSelectRows.js

@@ -117,7 +117,8 @@ var SelectRow = function SelectRow(datagridState) {
       dispatch: dispatch,
       rowData: row,
       isChecked: event.target.checked,
-      getRowId: getRowId
+      getRowId: getRowId,
+      selectAll: null
     });
   };
   var selectDisabled = isFetching || row.getRowProps().disabled;
@@ -137,7 +138,7 @@ var SelectRow = function SelectRow(datagridState) {
     onSelect: onSelectHandler,
     id: rowId,
     name: "".concat(rowId, "-name"),
-    className: cx__default["default"]([checkboxClass, cellProps.className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
+    className: cx__default["default"]([checkboxClass, cellProps.className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && Number(windowSize) > 671)]),
     ariaLabel: title,
     disabled: selectDisabled
   }));

package/lib/components/Datagrid/useSortableColumns.d.ts

@@ -1,6 +1,13 @@
-export function getNewSortOrder(sortOrder: any): {
-    newSortDesc: undefined;
+/**
+ * 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 { Hooks } from 'react-table';
+export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
+    newSortDesc: boolean;
     newOrder: string;
 };
+declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;
-declare function useSortableColumns(hooks: any): void;

package/lib/components/Datagrid/useSortableColumns.js

@@ -31,7 +31,7 @@ var ordering = {
 };
 var getNewSortOrder = function getNewSortOrder(sortOrder) {
   var order = {
-    newSortDesc: undefined,
+    newSortDesc: false,
     newOrder: ordering.NONE
   };
   if (sortOrder === false || sortOrder === ordering.DESC) {
@@ -146,7 +146,8 @@ var useSortableColumns = function useSortableColumns(hooks) {
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _rollupPluginBabelHelpers.toConsumableArray(sortableColumns);
   };
   var sortInstanceProps = function sortInstanceProps(instance) {
-    var onSort = instance.onSort;
+    var _ref3 = instance,
+      onSort = _ref3.onSort;
     Object.assign(instance, {
       manualSortBy: !!onSort,
       isTableSortable: true

package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.d.ts

@@ -1 +1,8 @@
-export function getAutoSizedColumnWidth(rows: Array<object>, accessor: string, headerText: string): number;
+/**
+ * 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.
+ */
+import { Row } from 'react-table';
+export declare const getAutoSizedColumnWidth: (rows: Array<Row<object>>, accessor: string, headerText: string) => number;

package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js

@@ -18,13 +18,6 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * Calculates the auto sized width of a column
- * @param {Array<object>} rows - The datagrid rows
- * @param {string} accessor - The accessor for the column
- * @param {string} headerText - The header text for the column
- */
-
 var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
   var maxWidth = 400;
   var minWidth = 58;

package/lib/components/InterstitialScreenView/InterstitialScreenView.d.ts

@@ -20,7 +20,7 @@ interface InterstitialScreenViewProps extends PropsWithChildren {
     stepTitle: string;
 }
 /**
- * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
  */
 export declare let InterstitialScreenView: React.ForwardRefExoticComponent<InterstitialScreenViewProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/InterstitialScreenView/InterstitialScreenView.js

@@ -30,7 +30,7 @@ var _excluded = ["children", "className", "stepTitle"];
 var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen-view");
 var componentName = 'InterstitialScreenView';
 /**
- * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
  */
 exports.InterstitialScreenView = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/SidePanel/SidePanel.d.ts

@@ -11,7 +11,7 @@ type SidePanelBaseProps = {
     /**
      * Sets the action toolbar buttons
      */
-    actionToolbarButtons?: ButtonProps[];
+    actionToolbarButtons?: ButtonProps<any>[];
     /**
      * The primary actions to be shown in the side panel. Each action is
      * specified as an object that will render expressive Buttons. Any Button
@@ -20,7 +20,7 @@ type SidePanelBaseProps = {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps[];
+    actions?: ButtonProps<any>[];
     /**
      * Determines if the title will animate on scroll
      */

package/lib/components/SidePanel/SidePanel.js

@@ -332,12 +332,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
           if (primeFocusEl) {
             primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
           }
-        } else {
+        } else if (!slideIn) {
           firstElement === null || firstElement === void 0 || firstElement.focus();
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
@@ -457,7 +457,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: keyDownListener
+    onKeyDown: slideIn ? undefined : keyDownListener
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
@@ -480,6 +480,7 @@ exports.SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
+  /**@ts-ignore */
   actionToolbarButtons: index["default"].arrayOf(index["default"].shape({
     label: index["default"].string,
     leading: index["default"].bool,
@@ -513,6 +514,7 @@ exports.SidePanel.propTypes = {
     label: index["default"].string,
     loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore */
     onClick: react.Button.propTypes.onClick
   })))]),
   /**

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts

@@ -20,7 +20,7 @@ interface SteppedAnimatedMediaProps {
     playStep?: number;
 }
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * The SteppedAnimatedMedia is an Onboarding internal component and is not intended for general use.
  */
 export declare const SteppedAnimatedMedia: React.ForwardRefExoticComponent<SteppedAnimatedMediaProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -38,7 +38,7 @@ var defaults = {
   playStep: 0
 };
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * The SteppedAnimatedMedia is an Onboarding internal component and is not intended for general use.
  */
 var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/lib/feature-flags.js

@@ -0,0 +1,40 @@
+/**
+ * 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';
+
+var FeatureFlags = require('@carbon/feature-flags');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+FeatureFlags__namespace.merge({
+  'default-portal-target-body': true,
+  'enable-datagrid-useInlineEdit': false,
+  'enable-datagrid-useEditableCell': false,
+  'enable-datagrid-useCustomizeColumns': false,
+  'ExampleComponent.secondaryIcon': false,
+  'ExampleComponent.useExample': false,
+  'enable-example-flag': false
+});

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

@@ -102,7 +102,7 @@ var defaults = {
     GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
-    // Novice to pro components not yet reviewed and released:
+    // Onboarding components not yet reviewed and released:
     Coachmark: false,
     CoachmarkBeacon: false,
     CoachmarkButton: false,
@@ -122,7 +122,7 @@ var defaults = {
     UserAvatar: false,
     /* new component flags here - comment used by generate CLI */
 
-    // Novice to pro components not yet reviewed and released:
+    // Onboarding components not yet reviewed and released:
     EmptyStateV2: false,
     Guidebanner: false,
     GuidebannerElement: false,

package/lib/index.d.ts

@@ -4,6 +4,7 @@
  * 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 './feature-flags';
 export { pkg } from './settings';
 export { usePrefix } from './global/js/hooks';
 export * from './components';

package/lib/index.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('./feature-flags.js');
 var settings = require('./settings.js');
 var reactTable = require('react-table');
 var usePrefix = require('./global/js/hooks/usePrefix.js');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.42.1-canary.2+254149c10",
+  "version": "2.42.1-canary.22+bf7c0c878",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -97,7 +97,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.38.2-canary.2+254149c10",
+    "@carbon/ibm-products-styles": "^2.38.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -121,5 +121,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "254149c106786ec59a59572b3fc2602fa63637f6"
+  "gitHead": "bf7c0c878d500b064d623355d607b75717f8a799"
 }

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

@@ -27,7 +27,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 // .#{$block-class} {
 //   // TODO: Styles.
 // }
-
+.#{$block-class} {
+  padding: $spacing-06;
+}
 .#{$block-class}__condition-builder__group {
   display: flex;
 }
@@ -47,5 +49,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
+  width: max-content;
   flex-direction: row;
 }
+.#{$block-class}__content-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+}
+.#{$block-class}__heading {
+  margin-top: $spacing-03;
+  margin-bottom: $spacing-03;
+}
+.#{$block-class}__tree
+  .#{$block-class}__actions-container
+  .#{$block-class}__condition-wrapper {
+  flex-direction: column;
+}
+.#{$block-class}__group-separator {
+  margin-top: $spacing-02;
+}

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

@@ -1,3 +1,4 @@
+@use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/motion';
 @use '@carbon/styles/scss/components/tag' as *;
@@ -5,6 +6,7 @@
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/utilities';
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
@@ -14,12 +16,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   display: inline-flex;
 }
 
-[role='row']:focus {
+.#{$block-class} [role='row'] {
+  position: relative;
+  outline: none;
+}
+.#{$block-class} [role='row']:focus::after {
   @include focus-outline.focus-outline('outline');
 
-  outline-offset: 0;
+  position: absolute;
+  content: '';
+  inset: 0;
 }
-
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
@@ -44,3 +51,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
+.#{$block-class}__group-preview {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.#{$block-class}__connector-disabled {
+  display: flex;
+  min-width: $spacing-10;
+  align-items: center;
+  background-color: $layer;
+  color: $text-helper;
+  padding-inline: $spacing-03;
+}

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

@@ -1,3 +1,5 @@
+@use 'sass:list';
+@use 'sass:string';
 @use '@carbon/react/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
@@ -8,10 +10,11 @@
 @use '@carbon/styles/scss/components/tag';
 
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/colors' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
-.#{$block-class}__content-container * {
+.#{$block-class}__condition-wrapper * {
   @include type-style('body-01');
 }
 
@@ -120,7 +123,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-builder__group.hoveredConnector
   .#{$block-class}__condition-wrapper
-  > .conditionBlockWrapper
+  > .#{$block-class}__condition-block
   .#{$block-class}__connector-button {
   background-color: $layer-hover;
 }
@@ -149,9 +152,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   padding-right: $spacing-03;
   padding-left: $spacing-03;
 }
-.#{$block-class}__conditionWrapper {
-  display: flex;
-}
 
 .#{$block-class}__multiselectSelectionStatusContainer {
   display: flex;
@@ -165,22 +165,59 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__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}__button,
-//   .#{$block-class}__condition-wrapper
-//     > :nth-child(2)
-//     .#{$block-class}__button {
-//     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
-//   }
-// }
+//need to revamp to a simpler logic
+$colors: (
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30, $purple-20),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30, $cyan-20),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30, $teal-20),
+  (
+    $magenta-70,
+    $magenta-60,
+    $magenta-50,
+    $magenta-40,
+    $magenta-30,
+    $magenta-20
+  ),
+  ($red-70, $red-60, $red-50, $red-40, $red-30, $red-20),
+  ($orange-70, $orange-60, $orange-50, $orange-40, $orange-30, $orange-20),
+  ($yellow-70, $yellow-60, $yellow-50, $yellow-40, $yellow-30, $yellow-20),
+  ($green-70, $green-60, $green-50, $green-40, $green-30, $green-20)
+);
+
+@for $i from 1 through list.length($colors) {
+  $selector: (
+    string.unquote(
+      '.#{$block-class}__content-container > .#{$block-class}__group-wrapper:nth-of-type(#{list.length($colors)}n+#{$i})'
+    )
+  );
+  $group-colors: list.nth($colors, $i);
+  @each $color in $group-colors {
+    #{$selector} {
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      --#{$block-class}__condition-wrapper-color: #{$color};
+    }
+
+    $selector: list.append(
+      $selector,
+      string.unquote('.#{$block-class}__group')
+    );
+  }
+}
+
+.#{$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}__button,
+  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
+  }
+}
+
 .#{$block-class}__groupOperatorConnector {
   margin-bottom: $spacing-02;
 }

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -104,7 +104,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
   padding: $spacing-03 $spacing-04;
   border-left: to-rem(1.25px) solid $text-primary;
   margin: $spacing-02 0;
-  // Novice to pro does not always use Carbon defaults/tokens
+  // Onboarding does not always use Carbon defaults/tokens
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: fade 600ms;