@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/css/index-full-carbon.css +29 -74
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +29 -74
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +28 -74
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelectBody.js +1 -1
  18. package/es/components/AddSelect/hooks/usePath.js +8 -1
  19. package/es/components/CreateFullPage/CreateFullPage.js +9 -2
  20. package/es/components/CreateTearsheet/CreateTearsheet.js +9 -2
  21. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  22. package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -3
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
  24. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -13
  25. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +28 -27
  26. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +31 -31
  27. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
  28. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
  29. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +8 -4
  30. package/es/components/Datagrid/useCustomizeColumns.js +8 -8
  31. package/es/components/Datagrid/utils/getInlineEditColumns.js +1 -0
  32. package/es/components/Datagrid/utils/makeData.js +1 -1
  33. package/es/components/index.js +1 -1
  34. package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
  35. package/lib/components/AddSelect/AddSelectBody.js +1 -1
  36. package/lib/components/AddSelect/hooks/usePath.js +7 -0
  37. package/lib/components/CreateFullPage/CreateFullPage.js +9 -2
  38. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -2
  39. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  40. package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -3
  41. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
  42. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +6 -6
  43. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +30 -28
  44. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +27 -25
  45. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +31 -36
  46. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
  47. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +8 -4
  48. package/lib/components/Datagrid/useCustomizeColumns.js +7 -7
  49. package/lib/components/Datagrid/utils/getInlineEditColumns.js +1 -0
  50. package/lib/components/Datagrid/utils/makeData.js +1 -1
  51. package/lib/components/index.js +6 -0
  52. package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
  53. package/package.json +2 -2
  54. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  55. package/scss/components/Datagrid/styles/_draggableElement.scss +9 -8
  56. package/scss/components/Datagrid/styles/_index.scss +7 -8
  57. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +65 -0
  58. package/scss/components/Tearsheet/_tearsheet.scss +2 -0
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
  60. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -93
@@ -3620,6 +3620,7 @@
3620
3620
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3621
3621
  -webkit-box-orient: vertical;
3622
3622
  -webkit-line-clamp: 2;
3623
+ word-break: break-all;
3623
3624
  }
3624
3625
  @media (min-width: 42rem) {
3625
3626
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -10740,6 +10741,11 @@ button.c4p--add-select__global-filter-toggle--open {
10740
10741
  justify-content: center;
10741
10742
  }
10742
10743
 
10744
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
10745
+ flex: 0 0 auto;
10746
+ margin-right: 0.5rem;
10747
+ }
10748
+
10743
10749
  .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
10744
10750
  width: 10px;
10745
10751
  height: 7px;
@@ -11043,55 +11049,22 @@ button.c4p--add-select__global-filter-toggle--open {
11043
11049
  fill: var(--cds-layer-selected-disabled, #8d8d8d);
11044
11050
  }
11045
11051
 
11046
- /*
11047
- * Licensed Materials - Property of IBM
11048
- * 5724-Q36
11049
- * (c) Copyright IBM Corp. 2021, 2022
11050
- * US Government Users Restricted Rights - Use, duplication or disclosure
11051
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11052
- */
11053
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
11054
- position: inherit;
11052
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
11055
11053
  display: flex;
11056
11054
  flex-flow: column;
11057
- padding: 0;
11058
- margin: 0;
11059
11055
  }
11060
11056
 
11061
- .c4p--datagrid__customize-columns-checkbox-wrapper {
11062
- margin-bottom: 0;
11057
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
11058
+ height: 3rem;
11059
+ padding-left: 3rem;
11060
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
11063
11061
  }
11064
11062
 
11065
11063
  .c4p--datagrid__customize-columns-checkbox-wrapper {
11066
11064
  display: flex;
11067
11065
  justify-content: center;
11068
- }
11069
-
11070
- .c4p--datagrid__customize-columns-modal--actions {
11071
- display: flex;
11072
- height: 3rem;
11073
- flex-flow: row;
11074
- background-color: var(--cds-field-02, #ffffff);
11075
- }
11076
-
11077
- .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11078
- height: 3rem;
11079
- padding-left: 2.5rem;
11080
- border-bottom: none;
11081
- }
11082
-
11083
- .c4p--datagrid__customize-columns-modal--actions > button {
11084
- margin-left: 1rem;
11085
- }
11086
-
11087
- .c4p--datagrid__customize-columns-instructions {
11088
- padding-left: 1rem;
11089
- margin-bottom: 1.5rem;
11090
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
11091
- font-weight: var(--cds-body-long-01-font-weight, 400);
11092
- line-height: var(--cds-body-long-01-line-height, 1.42857);
11093
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11094
- color: var(--cds-text-primary, #161616);
11066
+ padding-left: 0.5rem;
11067
+ margin-bottom: 0;
11095
11068
  }
11096
11069
 
11097
11070
  .c4p--datagrid__customize-columns-column-list {
@@ -11099,34 +11072,28 @@ button.c4p--add-select__global-filter-toggle--open {
11099
11072
  overflow: auto;
11100
11073
  }
11101
11074
 
11102
- .c4p--datagrid__customize-columns-select-all {
11075
+ .c4p--datagrid__customize-columns-select-all,
11076
+ .c4p--datagrid__customize-columns-select-all--selected {
11077
+ position: sticky;
11078
+ z-index: 1;
11079
+ top: 0;
11103
11080
  display: flex;
11104
11081
  height: 3rem;
11105
- align-items: center;
11106
11082
  padding-left: 2.5rem;
11107
11083
  border-bottom: 1px solid var(--cds-layer-active);
11108
- background-color: var(--cds-layer-01, #f4f4f4);
11109
- }
11110
-
11111
- .c4p--datagrid__customize-columns-select-all:hover {
11112
- background-color: var(--cds-layer-hover-01, #e8e8e8);
11084
+ background-color: var(--cds-layer);
11113
11085
  }
11114
-
11115
- .c4p--datagrid__customize-columns-select-all-selected {
11116
- display: flex;
11117
- height: 3rem;
11118
- align-items: center;
11119
- padding-left: 2.5rem;
11120
- border-bottom: 1px solid var(--cds-layer-active);
11121
- background-color: var(--cds-layer-selected-01, #e0e0e0);
11086
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
11087
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
11088
+ font-weight: 600;
11122
11089
  }
11123
11090
 
11124
- .c4p--datagrid__customize-columns-select-all-selected:hover {
11125
- background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11091
+ .c4p--datagrid__customize-columns-select-all:hover {
11092
+ background-color: var(--cds-layer-hover);
11126
11093
  }
11127
11094
 
11128
- .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11129
- margin-bottom: 0;
11095
+ .c4p--datagrid__customize-columns-select-all--selected {
11096
+ background-color: var(--cds-layer-selected);
11130
11097
  }
11131
11098
 
11132
11099
  /*
@@ -11304,13 +11271,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
11304
11271
  fill: var(--cds-layer-selected-inverse, #161616);
11305
11272
  }
11306
11273
 
11307
- /*
11308
- * Licensed Materials - Property of IBM
11309
- * 5724-Q36
11310
- * (c) Copyright IBM Corp. 2022
11311
- * US Government Users Restricted Rights - Use, duplication or disclosure
11312
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11313
- */
11314
11274
  .c4p--datagrid__draggable-handleStyle {
11315
11275
  display: flex;
11316
11276
  align-items: center;
@@ -11322,7 +11282,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11322
11282
  pointer-events: none;
11323
11283
  }
11324
11284
 
11325
- svg.c4p--datagrid__draggable-handleStyle.disable {
11285
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
11326
11286
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11327
11287
  }
11328
11288
 
@@ -11358,6 +11318,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11358
11318
  .c4p--datagrid__draggable-handleHolder-droppable {
11359
11319
  display: flex;
11360
11320
  width: 100%;
11321
+ align-items: center;
11361
11322
  }
11362
11323
 
11363
11324
  .c4p--datagrid__draggable-handleHolder-grabbed {
@@ -11736,13 +11697,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11736
11697
  background-color: var(--cds-support-error, #da1e28);
11737
11698
  }
11738
11699
 
11739
- /*
11740
- * Licensed Materials - Property of IBM
11741
- * 5724-Q36
11742
- * (c) Copyright IBM Corp. 2020, 2021
11743
- * US Government Users Restricted Rights - Use, duplication or disclosure
11744
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11745
- */
11746
11700
  /* stylelint-disable max-nesting-depth */
11747
11701
  .c4p--datagrid__datagridWrap {
11748
11702
  display: block;
@@ -14009,6 +13963,7 @@ a.cds--side-nav__link--current::before {
14009
13963
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14010
13964
  -webkit-box-orient: vertical;
14011
13965
  -webkit-line-clamp: 2;
13966
+ word-break: break-all;
14012
13967
  }
14013
13968
 
14014
13969
  @media (min-width: 42rem) {