@carbon/ibm-products 1.35.1 → 1.36.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/css/index-full-carbon.css +278 -240
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +6 -3
  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 +278 -240
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +278 -240
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ActionSet/ActionSet.js +6 -3
  18. package/es/components/AddSelect/add-select-utils.js +2 -2
  19. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  20. package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  21. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  22. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  23. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  24. package/es/components/Datagrid/useNestedRowExpander.js +8 -3
  25. package/es/components/Datagrid/useRowExpander.js +13 -1
  26. package/es/components/InlineEdit/InlineEdit.js +22 -385
  27. package/es/components/InlineEditV1/InlineEditV1.js +406 -0
  28. package/es/components/InlineEditV1/index.js +8 -0
  29. package/es/components/InlineEditV2/InlineEditV2.js +48 -21
  30. package/es/components/InlineEditV2/index.js +7 -0
  31. package/es/components/OptionsTile/OptionsTile.js +25 -10
  32. package/es/components/index.js +1 -1
  33. package/es/global/js/hooks/index.js +2 -1
  34. package/es/global/js/hooks/useControllableState.js +74 -0
  35. package/es/global/js/package-settings.js +1 -0
  36. package/lib/components/ActionSet/ActionSet.js +6 -3
  37. package/lib/components/AddSelect/add-select-utils.js +2 -2
  38. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  39. package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  40. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  41. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  42. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  43. package/lib/components/Datagrid/useColumnOrder.js +2 -1
  44. package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
  45. package/lib/components/Datagrid/useRowExpander.js +13 -1
  46. package/lib/components/InlineEdit/InlineEdit.js +22 -379
  47. package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
  48. package/lib/components/InlineEditV1/index.js +12 -0
  49. package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
  50. package/lib/components/OptionsTile/OptionsTile.js +25 -10
  51. package/lib/components/index.js +1 -1
  52. package/lib/global/js/hooks/index.js +8 -1
  53. package/lib/global/js/hooks/useControllableState.js +80 -0
  54. package/lib/global/js/package-settings.js +1 -0
  55. package/package.json +10 -10
  56. package/scss/components/ActionSet/_action-set.scss +9 -4
  57. package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
  58. package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
  59. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  60. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
  61. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  62. package/scss/components/InlineEditV2/_index.scss +1 -1
  63. package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
  64. package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
  65. package/scss/components/_index-released-only.scss +1 -1
  66. package/scss/components/_index.scss +2 -1
@@ -267,14 +267,17 @@
267
267
  font-weight: var(--cds-body-short-01-font-weight, 400);
268
268
  line-height: var(--cds-body-short-01-line-height, 1.28572);
269
269
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
270
- height: var(--cds-spacing-10, 4rem);
271
270
  align-items: center;
271
+ margin: 0;
272
+ }
273
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
274
+ height: var(--cds-spacing-10, 4rem);
272
275
  padding-top: var(--cds-spacing-05, 1rem);
273
276
  padding-bottom: var(--cds-spacing-07, 2rem);
274
- margin: 0;
275
277
  }
276
278
 
277
- .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive {
279
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive,
280
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn {
278
281
  max-width: none;
279
282
  }
280
283
 
@@ -6244,243 +6247,6 @@ button.c4p--add-select__global-filter-toggle--open {
6244
6247
  transition: none;
6245
6248
  }
6246
6249
  }
6247
- .c4p--inline-edit {
6248
- --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
6249
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
6250
- --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
6251
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
6252
- position: relative;
6253
- display: inline-block;
6254
- min-width: calc(4 * var(--c4p--inline-edit--size));
6255
- max-width: 100%;
6256
- height: var(--c4p--inline-edit--size);
6257
- background-color: var(--c4p--inline-edit--background-color);
6258
- cursor: text;
6259
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
6260
- vertical-align: middle;
6261
- white-space: nowrap;
6262
- }
6263
- .c4p--inline-edit.c4p--inline-edit--light {
6264
- --c4p--inline-edit--background-color: transparent;
6265
- }
6266
- .c4p--inline-edit:hover {
6267
- --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
6268
- }
6269
- .c4p--inline-edit.c4p--inline-edit--sm {
6270
- --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
6271
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
6272
- }
6273
- .c4p--inline-edit.c4p--inline-edit--lg {
6274
- --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
6275
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
6276
- }
6277
- .c4p--inline-edit.c4p--inline-edit--invalid {
6278
- /* stylelint-disable-next-line carbon/theme-token-use */
6279
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
6280
- outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
6281
- }
6282
- @media screen and (prefers-contrast) {
6283
- .c4p--inline-edit.c4p--inline-edit--invalid {
6284
- outline-style: dotted;
6285
- }
6286
- }
6287
- .c4p--inline-edit.c4p--inline-edit--editing {
6288
- /* stylelint-disable-next-line carbon/theme-token-use */
6289
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
6290
- outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
6291
- background-color: var(--cds-ui-01, #f4f4f4);
6292
- }
6293
- @media screen and (prefers-contrast) {
6294
- .c4p--inline-edit.c4p--inline-edit--editing {
6295
- outline-style: dotted;
6296
- }
6297
- }
6298
- .c4p--inline-edit .c4p--inline-edit__input {
6299
- display: inline-block;
6300
- overflow: hidden;
6301
- width: calc(
6302
- 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
6303
- );
6304
- max-width: calc(
6305
- 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
6306
- );
6307
- min-height: var(--c4p--inline-edit--size);
6308
- /* stylelint-disable-next-line carbon/layout-token-use */
6309
- margin-right: var(--c4p--inline-edit--toolbar-width);
6310
- margin-left: var(--cds-spacing-05, 1rem);
6311
- line-height: var(--c4p--inline-edit--size);
6312
- }
6313
- .c4p--inline-edit .c4p--inline-edit__input:focus {
6314
- outline: none;
6315
- }
6316
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
6317
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
6318
- }
6319
- .c4p--inline-edit .c4p--inline-edit__input::after {
6320
- position: absolute;
6321
- top: 0;
6322
- left: 0;
6323
- display: block;
6324
- overflow: hidden;
6325
- width: 0;
6326
- margin-left: var(--cds-spacing-05, 1rem);
6327
- color: var(--cds-text-05, #6f6f6f);
6328
- content: attr(data-placeholder);
6329
- opacity: 0;
6330
- visibility: hidden;
6331
- }
6332
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
6333
- display: inline-block;
6334
- overflow: hidden;
6335
- width: 0;
6336
- height: var(--c4p--inline-edit--size);
6337
- line-height: var(--c4p--inline-edit--size);
6338
- opacity: 0;
6339
- pointer-events: none;
6340
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
6341
- }
6342
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
6343
- width: initial;
6344
- opacity: 1;
6345
- }
6346
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
6347
- position: absolute;
6348
- top: 0;
6349
- left: 0;
6350
- width: 100%;
6351
- height: 100%;
6352
- pointer-events: none;
6353
- }
6354
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
6355
- cursor: not-allowed;
6356
- pointer-events: all;
6357
- }
6358
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
6359
- width: initial;
6360
- opacity: 1;
6361
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
6362
- visibility: visible;
6363
- }
6364
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
6365
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
6366
- position: absolute;
6367
- top: 0;
6368
- right: 0;
6369
- display: flex;
6370
- width: var(--c4p--inline-edit--toolbar-width);
6371
- height: 100%;
6372
- justify-content: space-between;
6373
- cursor: text;
6374
- }
6375
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
6376
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
6377
- }
6378
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
6379
- position: absolute;
6380
- top: 0;
6381
- left: 0;
6382
- display: block;
6383
- width: 100%;
6384
- height: 100%;
6385
- box-sizing: border-box;
6386
- border: 2px solid var(--cds-focus, #0f62fe);
6387
- border-left: 0;
6388
- content: "";
6389
- pointer-events: none;
6390
- }
6391
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
6392
- display: inline-flex;
6393
- width: var(--c4p--inline-edit--size);
6394
- max-width: var(--c4p--inline-edit--size);
6395
- height: 100%;
6396
- min-height: initial;
6397
- max-height: var(--c4p--inline-edit--size);
6398
- align-items: center;
6399
- justify-content: center;
6400
- border: 2px solid transparent;
6401
- }
6402
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
6403
- outline: initial;
6404
- }
6405
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
6406
- border-color: var(--cds-focus, #0f62fe);
6407
- box-shadow: initial;
6408
- outline: initial;
6409
- }
6410
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
6411
- box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
6412
- }
6413
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
6414
- background-color: transparent;
6415
- }
6416
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
6417
- border-color: transparent;
6418
- }
6419
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
6420
- overflow: visible;
6421
- width: var(--c4p--inline-edit--edit-size);
6422
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
6423
- transition-property: margin, padding;
6424
- }
6425
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
6426
- overflow: hidden;
6427
- width: 0;
6428
- padding: 0;
6429
- border-right: 0;
6430
- border-left: 0;
6431
- }
6432
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
6433
- display: inline-flex;
6434
- width: var(--c4p--inline-edit--size);
6435
- max-width: var(--c4p--inline-edit--size);
6436
- height: 100%;
6437
- min-height: initial;
6438
- max-height: var(--c4p--inline-edit--size);
6439
- align-items: center;
6440
- justify-content: center;
6441
- border: 2px solid transparent;
6442
- }
6443
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
6444
- border-color: transparent;
6445
- background-color: transparent;
6446
- box-shadow: initial;
6447
- outline: initial;
6448
- }
6449
- @media (hover: hover) {
6450
- .c4p--inline-edit .c4p--inline-edit__edit {
6451
- opacity: 0;
6452
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
6453
- }
6454
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
6455
- opacity: 1;
6456
- }
6457
- }
6458
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
6459
- opacity: 1;
6460
- }
6461
- .c4p--inline-edit .c4p--inline-edit__validation-icon {
6462
- display: inline-flex;
6463
- width: var(--c4p--inline-edit--size);
6464
- max-width: var(--c4p--inline-edit--size);
6465
- height: 100%;
6466
- min-height: initial;
6467
- max-height: var(--c4p--inline-edit--size);
6468
- align-items: center;
6469
- justify-content: center;
6470
- border: 2px solid transparent;
6471
- }
6472
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
6473
- color: var(--cds-support-error, #da1e28);
6474
- }
6475
- .c4p--inline-edit .c4p--inline-edit__validation-text {
6476
- display: block;
6477
- overflow: visible;
6478
- margin-left: var(--cds-spacing-05, 1rem);
6479
- }
6480
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
6481
- color: var(--cds-support-error, #da1e28);
6482
- }
6483
-
6484
6250
  .c4p--data-spreadsheet {
6485
6251
  --c4p--data-spreadsheet--total-width: 0;
6486
6252
  display: inline-block;
@@ -7165,6 +6931,21 @@ button.c4p--add-select__global-filter-toggle--open {
7165
6931
  border-bottom: none;
7166
6932
  }
7167
6933
 
6934
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
6935
+ position: relative;
6936
+ }
6937
+
6938
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
6939
+ position: absolute;
6940
+ /* stylelint-disable-next-line carbon/layout-token-use */
6941
+ top: -1px;
6942
+ left: 0;
6943
+ width: 100%;
6944
+ height: 1px;
6945
+ background-color: var(--cds-border-subtle, #e0e0e0);
6946
+ content: "";
6947
+ }
6948
+
7168
6949
  /*
7169
6950
  * Licensed Materials - Property of IBM
7170
6951
  * 5724-Q36
@@ -7541,6 +7322,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
7541
7322
  content: "";
7542
7323
  }
7543
7324
 
7325
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
7326
+ padding: var(--cds-spacing-03, 0.5rem);
7327
+ padding-right: 0;
7328
+ }
7329
+
7330
+ .c4p--datagrid__row-expander.bx--btn {
7331
+ display: flex;
7332
+ width: var(--cds-spacing-07, 2rem);
7333
+ height: var(--cds-spacing-07, 2rem);
7334
+ min-height: var(--cds-spacing-07, 2rem);
7335
+ justify-content: center;
7336
+ padding: 0;
7337
+ }
7338
+ .c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
7339
+ fill: var(--cds-ui-05, #161616);
7340
+ }
7341
+
7544
7342
  /*
7545
7343
  * Licensed Materials - Property of IBM
7546
7344
  * 5724-Q36
@@ -8169,6 +7967,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
8169
7967
  color: #ffffff;
8170
7968
  }
8171
7969
 
7970
+ .c4p--inline-edit {
7971
+ --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
7972
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7973
+ --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
7974
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
7975
+ position: relative;
7976
+ display: inline-block;
7977
+ min-width: calc(4 * var(--c4p--inline-edit--size));
7978
+ max-width: 100%;
7979
+ height: var(--c4p--inline-edit--size);
7980
+ background-color: var(--c4p--inline-edit--background-color);
7981
+ cursor: text;
7982
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
7983
+ vertical-align: middle;
7984
+ white-space: nowrap;
7985
+ }
7986
+ .c4p--inline-edit.c4p--inline-edit--light {
7987
+ --c4p--inline-edit--background-color: transparent;
7988
+ }
7989
+ .c4p--inline-edit:hover {
7990
+ --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
7991
+ }
7992
+ .c4p--inline-edit.c4p--inline-edit--sm {
7993
+ --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
7994
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7995
+ }
7996
+ .c4p--inline-edit.c4p--inline-edit--lg {
7997
+ --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
7998
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7999
+ }
8000
+ .c4p--inline-edit.c4p--inline-edit--invalid {
8001
+ /* stylelint-disable-next-line carbon/theme-token-use */
8002
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
8003
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
8004
+ }
8005
+ @media screen and (prefers-contrast) {
8006
+ .c4p--inline-edit.c4p--inline-edit--invalid {
8007
+ outline-style: dotted;
8008
+ }
8009
+ }
8010
+ .c4p--inline-edit.c4p--inline-edit--editing {
8011
+ /* stylelint-disable-next-line carbon/theme-token-use */
8012
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
8013
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
8014
+ background-color: var(--cds-ui-01, #f4f4f4);
8015
+ }
8016
+ @media screen and (prefers-contrast) {
8017
+ .c4p--inline-edit.c4p--inline-edit--editing {
8018
+ outline-style: dotted;
8019
+ }
8020
+ }
8021
+ .c4p--inline-edit .c4p--inline-edit__input {
8022
+ display: inline-block;
8023
+ overflow: hidden;
8024
+ width: calc(
8025
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
8026
+ );
8027
+ max-width: calc(
8028
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
8029
+ );
8030
+ min-height: var(--c4p--inline-edit--size);
8031
+ /* stylelint-disable-next-line carbon/layout-token-use */
8032
+ margin-right: var(--c4p--inline-edit--toolbar-width);
8033
+ margin-left: var(--cds-spacing-05, 1rem);
8034
+ line-height: var(--c4p--inline-edit--size);
8035
+ }
8036
+ .c4p--inline-edit .c4p--inline-edit__input:focus {
8037
+ outline: none;
8038
+ }
8039
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
8040
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
8041
+ }
8042
+ .c4p--inline-edit .c4p--inline-edit__input::after {
8043
+ position: absolute;
8044
+ top: 0;
8045
+ left: 0;
8046
+ display: block;
8047
+ overflow: hidden;
8048
+ width: 0;
8049
+ margin-left: var(--cds-spacing-05, 1rem);
8050
+ color: var(--cds-text-05, #6f6f6f);
8051
+ content: attr(data-placeholder);
8052
+ opacity: 0;
8053
+ visibility: hidden;
8054
+ }
8055
+ .c4p--inline-edit .c4p--inline-edit__ellipsis {
8056
+ display: inline-block;
8057
+ overflow: hidden;
8058
+ width: 0;
8059
+ height: var(--c4p--inline-edit--size);
8060
+ line-height: var(--c4p--inline-edit--size);
8061
+ opacity: 0;
8062
+ pointer-events: none;
8063
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8064
+ }
8065
+ .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
8066
+ width: initial;
8067
+ opacity: 1;
8068
+ }
8069
+ .c4p--inline-edit .c4p--inline-edit__disabled-cover {
8070
+ position: absolute;
8071
+ top: 0;
8072
+ left: 0;
8073
+ width: 100%;
8074
+ height: 100%;
8075
+ pointer-events: none;
8076
+ }
8077
+ .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
8078
+ cursor: not-allowed;
8079
+ pointer-events: all;
8080
+ }
8081
+ .c4p--inline-edit .c4p--inline-edit__input--empty::after {
8082
+ width: initial;
8083
+ opacity: 1;
8084
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8085
+ visibility: visible;
8086
+ }
8087
+ .c4p--inline-edit .c4p--inline-edit__after-input-elements {
8088
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
8089
+ position: absolute;
8090
+ top: 0;
8091
+ right: 0;
8092
+ display: flex;
8093
+ width: var(--c4p--inline-edit--toolbar-width);
8094
+ height: 100%;
8095
+ justify-content: space-between;
8096
+ cursor: text;
8097
+ }
8098
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
8099
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
8100
+ }
8101
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
8102
+ position: absolute;
8103
+ top: 0;
8104
+ left: 0;
8105
+ display: block;
8106
+ width: 100%;
8107
+ height: 100%;
8108
+ box-sizing: border-box;
8109
+ border: 2px solid var(--cds-focus, #0f62fe);
8110
+ border-left: 0;
8111
+ content: "";
8112
+ pointer-events: none;
8113
+ }
8114
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
8115
+ display: inline-flex;
8116
+ width: var(--c4p--inline-edit--size);
8117
+ max-width: var(--c4p--inline-edit--size);
8118
+ height: 100%;
8119
+ min-height: initial;
8120
+ max-height: var(--c4p--inline-edit--size);
8121
+ align-items: center;
8122
+ justify-content: center;
8123
+ border: 2px solid transparent;
8124
+ }
8125
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
8126
+ outline: initial;
8127
+ }
8128
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
8129
+ border-color: var(--cds-focus, #0f62fe);
8130
+ box-shadow: initial;
8131
+ outline: initial;
8132
+ }
8133
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
8134
+ box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
8135
+ }
8136
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
8137
+ background-color: transparent;
8138
+ }
8139
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
8140
+ border-color: transparent;
8141
+ }
8142
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
8143
+ overflow: visible;
8144
+ width: var(--c4p--inline-edit--edit-size);
8145
+ transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8146
+ transition-property: margin, padding;
8147
+ }
8148
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
8149
+ overflow: hidden;
8150
+ width: 0;
8151
+ padding: 0;
8152
+ border-right: 0;
8153
+ border-left: 0;
8154
+ }
8155
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
8156
+ display: inline-flex;
8157
+ width: var(--c4p--inline-edit--size);
8158
+ max-width: var(--c4p--inline-edit--size);
8159
+ height: 100%;
8160
+ min-height: initial;
8161
+ max-height: var(--c4p--inline-edit--size);
8162
+ align-items: center;
8163
+ justify-content: center;
8164
+ border: 2px solid transparent;
8165
+ }
8166
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
8167
+ border-color: transparent;
8168
+ background-color: transparent;
8169
+ box-shadow: initial;
8170
+ outline: initial;
8171
+ }
8172
+ @media (hover: hover) {
8173
+ .c4p--inline-edit .c4p--inline-edit__edit {
8174
+ opacity: 0;
8175
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
8176
+ }
8177
+ .c4p--inline-edit:hover .c4p--inline-edit__edit {
8178
+ opacity: 1;
8179
+ }
8180
+ }
8181
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
8182
+ opacity: 1;
8183
+ }
8184
+ .c4p--inline-edit .c4p--inline-edit__validation-icon {
8185
+ display: inline-flex;
8186
+ width: var(--c4p--inline-edit--size);
8187
+ max-width: var(--c4p--inline-edit--size);
8188
+ height: 100%;
8189
+ min-height: initial;
8190
+ max-height: var(--c4p--inline-edit--size);
8191
+ align-items: center;
8192
+ justify-content: center;
8193
+ border: 2px solid transparent;
8194
+ }
8195
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
8196
+ color: var(--cds-support-error, #da1e28);
8197
+ }
8198
+ .c4p--inline-edit .c4p--inline-edit__validation-text {
8199
+ display: block;
8200
+ overflow: visible;
8201
+ margin-left: var(--cds-spacing-05, 1rem);
8202
+ }
8203
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
8204
+ color: var(--cds-support-error, #da1e28);
8205
+ }
8206
+
8172
8207
  .c4p--inline-edit-v2 {
8173
8208
  display: flex;
8174
8209
  align-items: center;
@@ -8194,6 +8229,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
8194
8229
  .c4p--inline-edit-v2__text-input {
8195
8230
  flex: 1;
8196
8231
  }
8232
+ .c4p--inline-edit-v2__text-input-label {
8233
+ display: none;
8234
+ }
8197
8235
  .c4p--inline-edit-v2__warning-icon {
8198
8236
  /* stylelint-disable-next-line carbon/layout-token-use */
8199
8237
  margin-right: 0.4375rem;