@carbon/ibm-products 1.35.1 → 1.35.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/css/index-full-carbon.css +257 -237
  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.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +257 -237
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +257 -237
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +2 -2
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  16. package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  17. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  18. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  19. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  20. package/es/components/Datagrid/useRowExpander.js +13 -1
  21. package/es/components/InlineEdit/InlineEdit.js +22 -385
  22. package/es/components/InlineEditV1/InlineEditV1.js +406 -0
  23. package/es/components/InlineEditV1/index.js +8 -0
  24. package/es/components/InlineEditV2/InlineEditV2.js +48 -21
  25. package/es/components/InlineEditV2/index.js +7 -0
  26. package/es/components/index.js +1 -1
  27. package/es/global/js/package-settings.js +1 -0
  28. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  29. package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  30. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  31. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  32. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  33. package/lib/components/Datagrid/useColumnOrder.js +2 -1
  34. package/lib/components/Datagrid/useRowExpander.js +13 -1
  35. package/lib/components/InlineEdit/InlineEdit.js +22 -379
  36. package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
  37. package/lib/components/InlineEditV1/index.js +12 -0
  38. package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
  39. package/lib/components/index.js +1 -1
  40. package/lib/global/js/package-settings.js +1 -0
  41. package/package.json +10 -10
  42. package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
  43. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  44. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
  45. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  46. package/scss/components/InlineEditV2/_index.scss +1 -1
  47. package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
  48. package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
  49. package/scss/components/_index-released-only.scss +1 -1
  50. package/scss/components/_index.scss +2 -1
@@ -6244,243 +6244,6 @@ button.c4p--add-select__global-filter-toggle--open {
6244
6244
  transition: none;
6245
6245
  }
6246
6246
  }
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
6247
  .c4p--data-spreadsheet {
6485
6248
  --c4p--data-spreadsheet--total-width: 0;
6486
6249
  display: inline-block;
@@ -7541,6 +7304,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
7541
7304
  content: "";
7542
7305
  }
7543
7306
 
7307
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
7308
+ padding: var(--cds-spacing-03, 0.5rem);
7309
+ padding-right: 0;
7310
+ }
7311
+
7312
+ .c4p--datagrid__row-expander.bx--btn {
7313
+ display: flex;
7314
+ width: var(--cds-spacing-07, 2rem);
7315
+ height: var(--cds-spacing-07, 2rem);
7316
+ min-height: var(--cds-spacing-07, 2rem);
7317
+ justify-content: center;
7318
+ padding: 0;
7319
+ }
7320
+ .c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
7321
+ fill: var(--cds-ui-05, #161616);
7322
+ }
7323
+
7544
7324
  /*
7545
7325
  * Licensed Materials - Property of IBM
7546
7326
  * 5724-Q36
@@ -8169,6 +7949,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
8169
7949
  color: #ffffff;
8170
7950
  }
8171
7951
 
7952
+ .c4p--inline-edit {
7953
+ --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
7954
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7955
+ --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
7956
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
7957
+ position: relative;
7958
+ display: inline-block;
7959
+ min-width: calc(4 * var(--c4p--inline-edit--size));
7960
+ max-width: 100%;
7961
+ height: var(--c4p--inline-edit--size);
7962
+ background-color: var(--c4p--inline-edit--background-color);
7963
+ cursor: text;
7964
+ 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);
7965
+ vertical-align: middle;
7966
+ white-space: nowrap;
7967
+ }
7968
+ .c4p--inline-edit.c4p--inline-edit--light {
7969
+ --c4p--inline-edit--background-color: transparent;
7970
+ }
7971
+ .c4p--inline-edit:hover {
7972
+ --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
7973
+ }
7974
+ .c4p--inline-edit.c4p--inline-edit--sm {
7975
+ --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
7976
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7977
+ }
7978
+ .c4p--inline-edit.c4p--inline-edit--lg {
7979
+ --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
7980
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
7981
+ }
7982
+ .c4p--inline-edit.c4p--inline-edit--invalid {
7983
+ /* stylelint-disable-next-line carbon/theme-token-use */
7984
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
7985
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
7986
+ }
7987
+ @media screen and (prefers-contrast) {
7988
+ .c4p--inline-edit.c4p--inline-edit--invalid {
7989
+ outline-style: dotted;
7990
+ }
7991
+ }
7992
+ .c4p--inline-edit.c4p--inline-edit--editing {
7993
+ /* stylelint-disable-next-line carbon/theme-token-use */
7994
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
7995
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
7996
+ background-color: var(--cds-ui-01, #f4f4f4);
7997
+ }
7998
+ @media screen and (prefers-contrast) {
7999
+ .c4p--inline-edit.c4p--inline-edit--editing {
8000
+ outline-style: dotted;
8001
+ }
8002
+ }
8003
+ .c4p--inline-edit .c4p--inline-edit__input {
8004
+ display: inline-block;
8005
+ overflow: hidden;
8006
+ width: calc(
8007
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
8008
+ );
8009
+ max-width: calc(
8010
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
8011
+ );
8012
+ min-height: var(--c4p--inline-edit--size);
8013
+ /* stylelint-disable-next-line carbon/layout-token-use */
8014
+ margin-right: var(--c4p--inline-edit--toolbar-width);
8015
+ margin-left: var(--cds-spacing-05, 1rem);
8016
+ line-height: var(--c4p--inline-edit--size);
8017
+ }
8018
+ .c4p--inline-edit .c4p--inline-edit__input:focus {
8019
+ outline: none;
8020
+ }
8021
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
8022
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
8023
+ }
8024
+ .c4p--inline-edit .c4p--inline-edit__input::after {
8025
+ position: absolute;
8026
+ top: 0;
8027
+ left: 0;
8028
+ display: block;
8029
+ overflow: hidden;
8030
+ width: 0;
8031
+ margin-left: var(--cds-spacing-05, 1rem);
8032
+ color: var(--cds-text-05, #6f6f6f);
8033
+ content: attr(data-placeholder);
8034
+ opacity: 0;
8035
+ visibility: hidden;
8036
+ }
8037
+ .c4p--inline-edit .c4p--inline-edit__ellipsis {
8038
+ display: inline-block;
8039
+ overflow: hidden;
8040
+ width: 0;
8041
+ height: var(--c4p--inline-edit--size);
8042
+ line-height: var(--c4p--inline-edit--size);
8043
+ opacity: 0;
8044
+ pointer-events: none;
8045
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8046
+ }
8047
+ .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
8048
+ width: initial;
8049
+ opacity: 1;
8050
+ }
8051
+ .c4p--inline-edit .c4p--inline-edit__disabled-cover {
8052
+ position: absolute;
8053
+ top: 0;
8054
+ left: 0;
8055
+ width: 100%;
8056
+ height: 100%;
8057
+ pointer-events: none;
8058
+ }
8059
+ .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
8060
+ cursor: not-allowed;
8061
+ pointer-events: all;
8062
+ }
8063
+ .c4p--inline-edit .c4p--inline-edit__input--empty::after {
8064
+ width: initial;
8065
+ opacity: 1;
8066
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8067
+ visibility: visible;
8068
+ }
8069
+ .c4p--inline-edit .c4p--inline-edit__after-input-elements {
8070
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
8071
+ position: absolute;
8072
+ top: 0;
8073
+ right: 0;
8074
+ display: flex;
8075
+ width: var(--c4p--inline-edit--toolbar-width);
8076
+ height: 100%;
8077
+ justify-content: space-between;
8078
+ cursor: text;
8079
+ }
8080
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
8081
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
8082
+ }
8083
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
8084
+ position: absolute;
8085
+ top: 0;
8086
+ left: 0;
8087
+ display: block;
8088
+ width: 100%;
8089
+ height: 100%;
8090
+ box-sizing: border-box;
8091
+ border: 2px solid var(--cds-focus, #0f62fe);
8092
+ border-left: 0;
8093
+ content: "";
8094
+ pointer-events: none;
8095
+ }
8096
+ .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 {
8097
+ display: inline-flex;
8098
+ width: var(--c4p--inline-edit--size);
8099
+ max-width: var(--c4p--inline-edit--size);
8100
+ height: 100%;
8101
+ min-height: initial;
8102
+ max-height: var(--c4p--inline-edit--size);
8103
+ align-items: center;
8104
+ justify-content: center;
8105
+ border: 2px solid transparent;
8106
+ }
8107
+ .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 {
8108
+ outline: initial;
8109
+ }
8110
+ .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 {
8111
+ border-color: var(--cds-focus, #0f62fe);
8112
+ box-shadow: initial;
8113
+ outline: initial;
8114
+ }
8115
+ .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 {
8116
+ box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
8117
+ }
8118
+ .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 {
8119
+ background-color: transparent;
8120
+ }
8121
+ .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] {
8122
+ border-color: transparent;
8123
+ }
8124
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
8125
+ overflow: visible;
8126
+ width: var(--c4p--inline-edit--edit-size);
8127
+ transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
8128
+ transition-property: margin, padding;
8129
+ }
8130
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
8131
+ overflow: hidden;
8132
+ width: 0;
8133
+ padding: 0;
8134
+ border-right: 0;
8135
+ border-left: 0;
8136
+ }
8137
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
8138
+ display: inline-flex;
8139
+ width: var(--c4p--inline-edit--size);
8140
+ max-width: var(--c4p--inline-edit--size);
8141
+ height: 100%;
8142
+ min-height: initial;
8143
+ max-height: var(--c4p--inline-edit--size);
8144
+ align-items: center;
8145
+ justify-content: center;
8146
+ border: 2px solid transparent;
8147
+ }
8148
+ .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 {
8149
+ border-color: transparent;
8150
+ background-color: transparent;
8151
+ box-shadow: initial;
8152
+ outline: initial;
8153
+ }
8154
+ @media (hover: hover) {
8155
+ .c4p--inline-edit .c4p--inline-edit__edit {
8156
+ opacity: 0;
8157
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
8158
+ }
8159
+ .c4p--inline-edit:hover .c4p--inline-edit__edit {
8160
+ opacity: 1;
8161
+ }
8162
+ }
8163
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
8164
+ opacity: 1;
8165
+ }
8166
+ .c4p--inline-edit .c4p--inline-edit__validation-icon {
8167
+ display: inline-flex;
8168
+ width: var(--c4p--inline-edit--size);
8169
+ max-width: var(--c4p--inline-edit--size);
8170
+ height: 100%;
8171
+ min-height: initial;
8172
+ max-height: var(--c4p--inline-edit--size);
8173
+ align-items: center;
8174
+ justify-content: center;
8175
+ border: 2px solid transparent;
8176
+ }
8177
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
8178
+ color: var(--cds-support-error, #da1e28);
8179
+ }
8180
+ .c4p--inline-edit .c4p--inline-edit__validation-text {
8181
+ display: block;
8182
+ overflow: visible;
8183
+ margin-left: var(--cds-spacing-05, 1rem);
8184
+ }
8185
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
8186
+ color: var(--cds-support-error, #da1e28);
8187
+ }
8188
+
8172
8189
  .c4p--inline-edit-v2 {
8173
8190
  display: flex;
8174
8191
  align-items: center;
@@ -8194,6 +8211,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
8194
8211
  .c4p--inline-edit-v2__text-input {
8195
8212
  flex: 1;
8196
8213
  }
8214
+ .c4p--inline-edit-v2__text-input-label {
8215
+ display: none;
8216
+ }
8197
8217
  .c4p--inline-edit-v2__warning-icon {
8198
8218
  /* stylelint-disable-next-line carbon/layout-token-use */
8199
8219
  margin-right: 0.4375rem;