@carbon/ibm-products 1.45.0 → 1.46.1

package/README.md

@@ -41,6 +41,23 @@ Then you can import the component styles in your `index.js`.
 import '@carbon/ibm-products/css/index.min.css';
 ```
 
+### Webpack 4
+
+Our package requires support for ES modules (see
+[#2378](https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/2378#issuecomment-1319276192)).
+In Webpack 5, these are supported by default. In Webpack 4, you will need to add
+the [following rule](https://stackoverflow.com/a/72149467) to your config.
+
+```js
+rules: [
+  {
+    test: /\.mjs$/,
+    include: /node_modules/,
+    type: 'javascript/auto',
+  },
+],
+```
+
 ### Peer dependencies
 
 `@carbon/ibm-products` is built on top of Carbon components and has a number of

package/css/index-full-carbon.css

@@ -20594,12 +20594,19 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--options-tile {
+  position: relative;
   border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
   background-color: var(--cds-ui-01, #f4f4f4);
 }
 
 .c4p--options-tile__toggle-container {
-  position: relative;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: calc(
+      var(--cds-spacing-05, 1rem) + 2rem + var(--cds-spacing-05, 1rem)
+    );
 }
 
 .c4p--options-tile__toggle {
@@ -21374,7 +21381,9 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: var(--cds-spacing-05, 1rem);
 }
 .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
+  display: flex;
   flex: 1 0 auto;
+  align-items: flex-end;
 }
 .c4p--datagrid__dense-header .bx--table-toolbar {
   background: transparent;
@@ -21382,9 +21391,6 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__dense-header .bx__table-container {
   flex: 1 1 100%;
 }
-.c4p--datagrid__dense-header .bx--table-toolbar {
-  padding-top: var(--cds-spacing-07, 2rem);
-}
 .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
   position: relative;
 }
@@ -21572,13 +21578,12 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-ui-03, #e0e0e0);
 }
 
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* 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.
+ */
 .c4p--datagrid__sortableColumn .bx--table-header-label .header-title {
   display: inline-block;
   width: auto;
@@ -21588,39 +21593,51 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 100%;
   height: 100%;
 }
-.c4p--datagrid__sortableColumn .bx--table-header-label button:focus,
-.c4p--datagrid__sortableColumn .bx--table-header-label button:active,
-.c4p--datagrid__sortableColumn .bx--table-header-label button:focus svg {
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort:focus,
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort:active,
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort:focus svg {
   /* stylelint-disable-next-line declaration-no-important */
   background: none !important;
   /* stylelint-disable-next-line declaration-no-important */
   color: var(--cds-text-01, #161616) !important;
-  /* stylelint-disable-next-line declaration-no-important */
-  outline: none !important;
 }
-.c4p--datagrid__sortableColumn .bx--table-header-label button {
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort:focus + .c4p--datagrid__resizer,
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort:active + .c4p--datagrid__resizer {
+  z-index: -1;
+}
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort {
   width: 100%;
   min-width: 100%;
-  min-height: 0;
-  padding: 0;
+  padding: 0 var(--cds-spacing-05, 1rem);
   border: none;
   /* stylelint-disable-next-line declaration-no-important */
   background: none !important;
-  box-shadow: none;
   /* stylelint-disable-next-line declaration-no-important */
   color: var(--cds-text-01, #161616) !important;
   font: inherit;
 }
-.c4p--datagrid__sortableColumn .bx--table-header-label button svg {
+.c4p--datagrid__sortableColumn .bx--table-header-label .bx--table-sort svg {
   fill: var(--cds-text-01, #161616);
+  opacity: 0;
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   visibility: hidden;
 }
+.c4p--datagrid__sortableColumn .bx--table-sort.c4p--datagrid--table-sort {
+  width: calc(100% + var(--cds-spacing-07, 2rem));
+  margin: 0 calc(-1 * var(--cds-spacing-05, 1rem));
+}
 
 .c4p--datagrid__sortableColumn:hover .bx--table-header-label svg,
+.c4p--datagrid__sortableColumn:focus-within .bx--table-header-label svg,
 .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .bx--table-header-label svg {
+  opacity: 1;
   visibility: visible;
 }
 
+.c4p--datagrid__sortableColumn .c4p--datagrid--table-sort--desc svg {
+  transform: rotate(180deg);
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36