@carbon/ibm-products 2.54.0-canary.11 → 2.54.0-canary.15

package/es/components/EditSidePanel/EditSidePanel.js

@@ -25,7 +25,9 @@ var componentName = 'EditSidePanel';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
+ * **This component is deprecated.** <br>
  * Use with medium complexity edits if the user needs page context.
+ * @deprecated
  */
 var EditSidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -92,6 +94,12 @@ var EditSidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }, children));
 });
 
+/**@ts-ignore*/
+EditSidePanel.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 EditSidePanel = pkg.checkComponentEnabled(EditSidePanel, componentName);
 

package/es/components/EditTearsheet/EditTearsheet.d.ts

@@ -81,7 +81,9 @@ interface EditTearsheetProps extends PropsWithChildren {
     verticalPosition?: 'normal' | 'lower';
 }
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/EditTearsheet/EditTearsheet.js

@@ -38,7 +38,9 @@ var defaults = {
 // corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cancelButtonText = _ref.cancelButtonText,
@@ -171,6 +173,12 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   })))));
 });
 
+/**@ts-ignore*/
+EditTearsheet.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 EditTearsheet = pkg.checkComponentEnabled(EditTearsheet, componentName);
 

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -16,6 +16,8 @@ export interface EditTearsheetNarrowProps {
     className?: string;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -38,7 +38,9 @@ var componentName = 'EditTearsheetNarrow';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 var EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -59,6 +61,12 @@ var EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }, getDevtoolsProps(componentName)), children);
 });
 
+/**@ts-ignore*/
+EditTearsheetNarrow.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 EditTearsheetNarrow = pkg.checkComponentEnabled(EditTearsheetNarrow, componentName);
 

package/es/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -102,9 +102,11 @@ export interface EditUpdateCardsProps {
     titleSize?: 'default' | 'large';
 }
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 export declare let EditUpdateCards: React.ForwardRefExoticComponent<EditUpdateCardsProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -41,9 +41,11 @@ var componentName = 'EditUpdateCards';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actionIcons = _ref.actionIcons,
@@ -95,6 +97,12 @@ var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }, editMode && conditionalProps), editMode === false && /*#__PURE__*/React__default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React__default.createElement("div", null, editChildren)));
 });
 
+/**@ts-ignore*/
+EditUpdateCards.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 EditUpdateCards = pkg.checkComponentEnabled(EditUpdateCards, componentName);
 

package/lib/components/EditFullPage/EditFullPage.d.ts

@@ -16,7 +16,9 @@ export interface EditFullPageProps {
     children: ReactNode;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
  * See usage guidance for further details.
+ * @deprecated
  */
 export declare let EditFullPage: React.ForwardRefExoticComponent<EditFullPageProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditFullPage/EditFullPage.js

@@ -40,8 +40,10 @@ var componentName = 'EditFullPage';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
  * See usage guidance for further details.
+ * @deprecated
  */
 exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -62,6 +64,12 @@ exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, devtools.getDevtoolsProps(componentName)), children);
 });
 
+/**@ts-ignore*/
+exports.EditFullPage.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditFullPage = settings.pkg.checkComponentEnabled(exports.EditFullPage, componentName);
 

package/lib/components/EditSidePanel/EditSidePanel.d.ts

@@ -89,6 +89,8 @@ export interface EditSidePanelProps {
     title: string;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use with medium complexity edits if the user needs page context.
+ * @deprecated
  */
 export declare let EditSidePanel: React.ForwardRefExoticComponent<EditSidePanelProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -27,7 +27,9 @@ var componentName = 'EditSidePanel';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
+ * **This component is deprecated.** <br>
  * Use with medium complexity edits if the user needs page context.
+ * @deprecated
  */
 exports.EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -94,6 +96,12 @@ exports.EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children));
 });
 
+/**@ts-ignore*/
+exports.EditSidePanel.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditSidePanel = settings.pkg.checkComponentEnabled(exports.EditSidePanel, componentName);
 

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -81,7 +81,9 @@ interface EditTearsheetProps extends PropsWithChildren {
     verticalPosition?: 'normal' | 'lower';
 }
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -40,7 +40,9 @@ var defaults = {
 // corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cancelButtonText = _ref.cancelButtonText,
@@ -173,6 +175,12 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })))));
 });
 
+/**@ts-ignore*/
+exports.EditTearsheet.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditTearsheet = settings.pkg.checkComponentEnabled(exports.EditTearsheet, componentName);
 

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -16,6 +16,8 @@ export interface EditTearsheetNarrowProps {
     className?: string;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -40,7 +40,9 @@ var componentName = 'EditTearsheetNarrow';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 exports.EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -61,6 +63,12 @@ exports.EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, devtools.getDevtoolsProps(componentName)), children);
 });
 
+/**@ts-ignore*/
+exports.EditTearsheetNarrow.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditTearsheetNarrow = settings.pkg.checkComponentEnabled(exports.EditTearsheetNarrow, componentName);
 

package/lib/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -102,9 +102,11 @@ export interface EditUpdateCardsProps {
     titleSize?: 'default' | 'large';
 }
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 export declare let EditUpdateCards: React.ForwardRefExoticComponent<EditUpdateCardsProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -43,9 +43,11 @@ var componentName = 'EditUpdateCards';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 exports.EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actionIcons = _ref.actionIcons,
@@ -97,6 +99,12 @@ exports.EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, editMode && conditionalProps), editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
 });
 
+/**@ts-ignore*/
+exports.EditUpdateCards.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditUpdateCards = settings.pkg.checkComponentEnabled(exports.EditUpdateCards, componentName);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.11+535e87142",
+  "version": "2.54.0-canary.15+2ef70ba6f",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.13.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.13.0-rc.1",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.50.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.50.0-rc.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "535e87142413695c530952f7b314201c8a35becc"
+  "gitHead": "2ef70ba6fd56983d30d1a1d2f6658ce155b01acf"
 }

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

@@ -44,7 +44,7 @@
 
       .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
-        z-index: 1;
+        z-index: 10;
         left: 0;
       }
     }
@@ -413,17 +413,27 @@
     }
   }
 
-  .#{$block-class}__carbon-row td {
+  .#{$block-class}__carbon-row .#{$block-class}__left-sticky-column-cell,
+  .#{$block-class}__carbon-row .#{$block-class}__right-sticky-column-cell,
+  .#{$block-class}__carbon-row .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-01;
   }
 
-  .#{$block-class}__carbon-row:hover td {
+  .#{$block-class}__carbon-row:hover .#{$block-class}__left-sticky-column-cell,
+  .#{$block-class}__carbon-row:hover .#{$block-class}__right-sticky-column-cell,
+  .#{$block-class}__carbon-row:hover
+    .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-hover-01;
   }
 
-  .#{c4p-settings.$carbon-prefix}--data-table--selected td {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__left-sticky-column-cell,
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__right-sticky-column-cell,
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-selected-01;
   }
@@ -522,7 +532,7 @@
 }
 
 .#{$block-class}__resizableColumn:hover {
-  background-color: $background-selected-hover;
+  background-color: $layer-selected-hover;
 
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $border-strong-01;
@@ -562,7 +572,7 @@
 
   &.#{$block-class}__select-all-sticky-left {
     position: sticky;
-    z-index: 1;
+    z-index: 10;
     left: 0;
     background-color: $layer-accent-01;
   }

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -36,7 +36,7 @@
 .#{variables.$block-class}__left-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  z-index: 1;
+  z-index: 10;
   left: 0;
   border-right: 1px solid $border-subtle;
 }
@@ -67,6 +67,6 @@
 
 .#{variables.$block-class}__select-all-toggle-on.#{variables.$block-class}__select-all-sticky-left {
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   left: 0;
 }