@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
@@ -5353,14 +5353,17 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5353
5353
  font-weight: var(--cds-body-short-01-font-weight, 400);
5354
5354
  line-height: var(--cds-body-short-01-line-height, 1.28572);
5355
5355
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
5356
- height: var(--cds-spacing-10, 4rem);
5357
5356
  align-items: center;
5357
+ margin: 0;
5358
+ }
5359
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
5360
+ height: var(--cds-spacing-10, 4rem);
5358
5361
  padding-top: var(--cds-spacing-05, 1rem);
5359
5362
  padding-bottom: var(--cds-spacing-07, 2rem);
5360
- margin: 0;
5361
5363
  }
5362
5364
 
5363
- .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive {
5365
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive,
5366
+ .c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn {
5364
5367
  max-width: none;
5365
5368
  }
5366
5369
 
@@ -18949,243 +18952,6 @@ button.c4p--add-select__global-filter-toggle--open {
18949
18952
  transition: none;
18950
18953
  }
18951
18954
  }
18952
- .c4p--inline-edit {
18953
- --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
18954
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
18955
- --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
18956
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
18957
- position: relative;
18958
- display: inline-block;
18959
- min-width: calc(4 * var(--c4p--inline-edit--size));
18960
- max-width: 100%;
18961
- height: var(--c4p--inline-edit--size);
18962
- background-color: var(--c4p--inline-edit--background-color);
18963
- cursor: text;
18964
- 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);
18965
- vertical-align: middle;
18966
- white-space: nowrap;
18967
- }
18968
- .c4p--inline-edit.c4p--inline-edit--light {
18969
- --c4p--inline-edit--background-color: transparent;
18970
- }
18971
- .c4p--inline-edit:hover {
18972
- --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
18973
- }
18974
- .c4p--inline-edit.c4p--inline-edit--sm {
18975
- --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
18976
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
18977
- }
18978
- .c4p--inline-edit.c4p--inline-edit--lg {
18979
- --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
18980
- --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
18981
- }
18982
- .c4p--inline-edit.c4p--inline-edit--invalid {
18983
- /* stylelint-disable-next-line carbon/theme-token-use */
18984
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
18985
- outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
18986
- }
18987
- @media screen and (prefers-contrast) {
18988
- .c4p--inline-edit.c4p--inline-edit--invalid {
18989
- outline-style: dotted;
18990
- }
18991
- }
18992
- .c4p--inline-edit.c4p--inline-edit--editing {
18993
- /* stylelint-disable-next-line carbon/theme-token-use */
18994
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
18995
- outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
18996
- background-color: var(--cds-ui-01, #f4f4f4);
18997
- }
18998
- @media screen and (prefers-contrast) {
18999
- .c4p--inline-edit.c4p--inline-edit--editing {
19000
- outline-style: dotted;
19001
- }
19002
- }
19003
- .c4p--inline-edit .c4p--inline-edit__input {
19004
- display: inline-block;
19005
- overflow: hidden;
19006
- width: calc(
19007
- 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
19008
- );
19009
- max-width: calc(
19010
- 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
19011
- );
19012
- min-height: var(--c4p--inline-edit--size);
19013
- /* stylelint-disable-next-line carbon/layout-token-use */
19014
- margin-right: var(--c4p--inline-edit--toolbar-width);
19015
- margin-left: var(--cds-spacing-05, 1rem);
19016
- line-height: var(--c4p--inline-edit--size);
19017
- }
19018
- .c4p--inline-edit .c4p--inline-edit__input:focus {
19019
- outline: none;
19020
- }
19021
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
19022
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
19023
- }
19024
- .c4p--inline-edit .c4p--inline-edit__input::after {
19025
- position: absolute;
19026
- top: 0;
19027
- left: 0;
19028
- display: block;
19029
- overflow: hidden;
19030
- width: 0;
19031
- margin-left: var(--cds-spacing-05, 1rem);
19032
- color: var(--cds-text-05, #6f6f6f);
19033
- content: attr(data-placeholder);
19034
- opacity: 0;
19035
- visibility: hidden;
19036
- }
19037
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
19038
- display: inline-block;
19039
- overflow: hidden;
19040
- width: 0;
19041
- height: var(--c4p--inline-edit--size);
19042
- line-height: var(--c4p--inline-edit--size);
19043
- opacity: 0;
19044
- pointer-events: none;
19045
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
19046
- }
19047
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
19048
- width: initial;
19049
- opacity: 1;
19050
- }
19051
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
19052
- position: absolute;
19053
- top: 0;
19054
- left: 0;
19055
- width: 100%;
19056
- height: 100%;
19057
- pointer-events: none;
19058
- }
19059
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
19060
- cursor: not-allowed;
19061
- pointer-events: all;
19062
- }
19063
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
19064
- width: initial;
19065
- opacity: 1;
19066
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
19067
- visibility: visible;
19068
- }
19069
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
19070
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
19071
- position: absolute;
19072
- top: 0;
19073
- right: 0;
19074
- display: flex;
19075
- width: var(--c4p--inline-edit--toolbar-width);
19076
- height: 100%;
19077
- justify-content: space-between;
19078
- cursor: text;
19079
- }
19080
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
19081
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
19082
- }
19083
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
19084
- position: absolute;
19085
- top: 0;
19086
- left: 0;
19087
- display: block;
19088
- width: 100%;
19089
- height: 100%;
19090
- box-sizing: border-box;
19091
- border: 2px solid var(--cds-focus, #0f62fe);
19092
- border-left: 0;
19093
- content: "";
19094
- pointer-events: none;
19095
- }
19096
- .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 {
19097
- display: inline-flex;
19098
- width: var(--c4p--inline-edit--size);
19099
- max-width: var(--c4p--inline-edit--size);
19100
- height: 100%;
19101
- min-height: initial;
19102
- max-height: var(--c4p--inline-edit--size);
19103
- align-items: center;
19104
- justify-content: center;
19105
- border: 2px solid transparent;
19106
- }
19107
- .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 {
19108
- outline: initial;
19109
- }
19110
- .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 {
19111
- border-color: var(--cds-focus, #0f62fe);
19112
- box-shadow: initial;
19113
- outline: initial;
19114
- }
19115
- .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 {
19116
- box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
19117
- }
19118
- .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 {
19119
- background-color: transparent;
19120
- }
19121
- .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] {
19122
- border-color: transparent;
19123
- }
19124
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
19125
- overflow: visible;
19126
- width: var(--c4p--inline-edit--edit-size);
19127
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
19128
- transition-property: margin, padding;
19129
- }
19130
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
19131
- overflow: hidden;
19132
- width: 0;
19133
- padding: 0;
19134
- border-right: 0;
19135
- border-left: 0;
19136
- }
19137
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
19138
- display: inline-flex;
19139
- width: var(--c4p--inline-edit--size);
19140
- max-width: var(--c4p--inline-edit--size);
19141
- height: 100%;
19142
- min-height: initial;
19143
- max-height: var(--c4p--inline-edit--size);
19144
- align-items: center;
19145
- justify-content: center;
19146
- border: 2px solid transparent;
19147
- }
19148
- .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 {
19149
- border-color: transparent;
19150
- background-color: transparent;
19151
- box-shadow: initial;
19152
- outline: initial;
19153
- }
19154
- @media (hover: hover) {
19155
- .c4p--inline-edit .c4p--inline-edit__edit {
19156
- opacity: 0;
19157
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
19158
- }
19159
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
19160
- opacity: 1;
19161
- }
19162
- }
19163
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
19164
- opacity: 1;
19165
- }
19166
- .c4p--inline-edit .c4p--inline-edit__validation-icon {
19167
- display: inline-flex;
19168
- width: var(--c4p--inline-edit--size);
19169
- max-width: var(--c4p--inline-edit--size);
19170
- height: 100%;
19171
- min-height: initial;
19172
- max-height: var(--c4p--inline-edit--size);
19173
- align-items: center;
19174
- justify-content: center;
19175
- border: 2px solid transparent;
19176
- }
19177
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
19178
- color: var(--cds-support-error, #da1e28);
19179
- }
19180
- .c4p--inline-edit .c4p--inline-edit__validation-text {
19181
- display: block;
19182
- overflow: visible;
19183
- margin-left: var(--cds-spacing-05, 1rem);
19184
- }
19185
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
19186
- color: var(--cds-support-error, #da1e28);
19187
- }
19188
-
19189
18955
  .c4p--data-spreadsheet {
19190
18956
  --c4p--data-spreadsheet--total-width: 0;
19191
18957
  display: inline-block;
@@ -19870,6 +19636,21 @@ button.c4p--add-select__global-filter-toggle--open {
19870
19636
  border-bottom: none;
19871
19637
  }
19872
19638
 
19639
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
19640
+ position: relative;
19641
+ }
19642
+
19643
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
19644
+ position: absolute;
19645
+ /* stylelint-disable-next-line carbon/layout-token-use */
19646
+ top: -1px;
19647
+ left: 0;
19648
+ width: 100%;
19649
+ height: 1px;
19650
+ background-color: var(--cds-border-subtle, #e0e0e0);
19651
+ content: "";
19652
+ }
19653
+
19873
19654
  /*
19874
19655
  * Licensed Materials - Property of IBM
19875
19656
  * 5724-Q36
@@ -20246,6 +20027,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
20246
20027
  content: "";
20247
20028
  }
20248
20029
 
20030
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
20031
+ padding: var(--cds-spacing-03, 0.5rem);
20032
+ padding-right: 0;
20033
+ }
20034
+
20035
+ .c4p--datagrid__row-expander.bx--btn {
20036
+ display: flex;
20037
+ width: var(--cds-spacing-07, 2rem);
20038
+ height: var(--cds-spacing-07, 2rem);
20039
+ min-height: var(--cds-spacing-07, 2rem);
20040
+ justify-content: center;
20041
+ padding: 0;
20042
+ }
20043
+ .c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
20044
+ fill: var(--cds-ui-05, #161616);
20045
+ }
20046
+
20249
20047
  /*
20250
20048
  * Licensed Materials - Property of IBM
20251
20049
  * 5724-Q36
@@ -20874,6 +20672,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20874
20672
  color: #ffffff;
20875
20673
  }
20876
20674
 
20675
+ .c4p--inline-edit {
20676
+ --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
20677
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20678
+ --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
20679
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
20680
+ position: relative;
20681
+ display: inline-block;
20682
+ min-width: calc(4 * var(--c4p--inline-edit--size));
20683
+ max-width: 100%;
20684
+ height: var(--c4p--inline-edit--size);
20685
+ background-color: var(--c4p--inline-edit--background-color);
20686
+ cursor: text;
20687
+ 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);
20688
+ vertical-align: middle;
20689
+ white-space: nowrap;
20690
+ }
20691
+ .c4p--inline-edit.c4p--inline-edit--light {
20692
+ --c4p--inline-edit--background-color: transparent;
20693
+ }
20694
+ .c4p--inline-edit:hover {
20695
+ --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
20696
+ }
20697
+ .c4p--inline-edit.c4p--inline-edit--sm {
20698
+ --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
20699
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20700
+ }
20701
+ .c4p--inline-edit.c4p--inline-edit--lg {
20702
+ --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
20703
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20704
+ }
20705
+ .c4p--inline-edit.c4p--inline-edit--invalid {
20706
+ /* stylelint-disable-next-line carbon/theme-token-use */
20707
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
20708
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20709
+ }
20710
+ @media screen and (prefers-contrast) {
20711
+ .c4p--inline-edit.c4p--inline-edit--invalid {
20712
+ outline-style: dotted;
20713
+ }
20714
+ }
20715
+ .c4p--inline-edit.c4p--inline-edit--editing {
20716
+ /* stylelint-disable-next-line carbon/theme-token-use */
20717
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
20718
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20719
+ background-color: var(--cds-ui-01, #f4f4f4);
20720
+ }
20721
+ @media screen and (prefers-contrast) {
20722
+ .c4p--inline-edit.c4p--inline-edit--editing {
20723
+ outline-style: dotted;
20724
+ }
20725
+ }
20726
+ .c4p--inline-edit .c4p--inline-edit__input {
20727
+ display: inline-block;
20728
+ overflow: hidden;
20729
+ width: calc(
20730
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
20731
+ );
20732
+ max-width: calc(
20733
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
20734
+ );
20735
+ min-height: var(--c4p--inline-edit--size);
20736
+ /* stylelint-disable-next-line carbon/layout-token-use */
20737
+ margin-right: var(--c4p--inline-edit--toolbar-width);
20738
+ margin-left: var(--cds-spacing-05, 1rem);
20739
+ line-height: var(--c4p--inline-edit--size);
20740
+ }
20741
+ .c4p--inline-edit .c4p--inline-edit__input:focus {
20742
+ outline: none;
20743
+ }
20744
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
20745
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
20746
+ }
20747
+ .c4p--inline-edit .c4p--inline-edit__input::after {
20748
+ position: absolute;
20749
+ top: 0;
20750
+ left: 0;
20751
+ display: block;
20752
+ overflow: hidden;
20753
+ width: 0;
20754
+ margin-left: var(--cds-spacing-05, 1rem);
20755
+ color: var(--cds-text-05, #6f6f6f);
20756
+ content: attr(data-placeholder);
20757
+ opacity: 0;
20758
+ visibility: hidden;
20759
+ }
20760
+ .c4p--inline-edit .c4p--inline-edit__ellipsis {
20761
+ display: inline-block;
20762
+ overflow: hidden;
20763
+ width: 0;
20764
+ height: var(--c4p--inline-edit--size);
20765
+ line-height: var(--c4p--inline-edit--size);
20766
+ opacity: 0;
20767
+ pointer-events: none;
20768
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20769
+ }
20770
+ .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
20771
+ width: initial;
20772
+ opacity: 1;
20773
+ }
20774
+ .c4p--inline-edit .c4p--inline-edit__disabled-cover {
20775
+ position: absolute;
20776
+ top: 0;
20777
+ left: 0;
20778
+ width: 100%;
20779
+ height: 100%;
20780
+ pointer-events: none;
20781
+ }
20782
+ .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
20783
+ cursor: not-allowed;
20784
+ pointer-events: all;
20785
+ }
20786
+ .c4p--inline-edit .c4p--inline-edit__input--empty::after {
20787
+ width: initial;
20788
+ opacity: 1;
20789
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20790
+ visibility: visible;
20791
+ }
20792
+ .c4p--inline-edit .c4p--inline-edit__after-input-elements {
20793
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
20794
+ position: absolute;
20795
+ top: 0;
20796
+ right: 0;
20797
+ display: flex;
20798
+ width: var(--c4p--inline-edit--toolbar-width);
20799
+ height: 100%;
20800
+ justify-content: space-between;
20801
+ cursor: text;
20802
+ }
20803
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
20804
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
20805
+ }
20806
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
20807
+ position: absolute;
20808
+ top: 0;
20809
+ left: 0;
20810
+ display: block;
20811
+ width: 100%;
20812
+ height: 100%;
20813
+ box-sizing: border-box;
20814
+ border: 2px solid var(--cds-focus, #0f62fe);
20815
+ border-left: 0;
20816
+ content: "";
20817
+ pointer-events: none;
20818
+ }
20819
+ .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 {
20820
+ display: inline-flex;
20821
+ width: var(--c4p--inline-edit--size);
20822
+ max-width: var(--c4p--inline-edit--size);
20823
+ height: 100%;
20824
+ min-height: initial;
20825
+ max-height: var(--c4p--inline-edit--size);
20826
+ align-items: center;
20827
+ justify-content: center;
20828
+ border: 2px solid transparent;
20829
+ }
20830
+ .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 {
20831
+ outline: initial;
20832
+ }
20833
+ .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 {
20834
+ border-color: var(--cds-focus, #0f62fe);
20835
+ box-shadow: initial;
20836
+ outline: initial;
20837
+ }
20838
+ .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 {
20839
+ box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
20840
+ }
20841
+ .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 {
20842
+ background-color: transparent;
20843
+ }
20844
+ .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] {
20845
+ border-color: transparent;
20846
+ }
20847
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
20848
+ overflow: visible;
20849
+ width: var(--c4p--inline-edit--edit-size);
20850
+ transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20851
+ transition-property: margin, padding;
20852
+ }
20853
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
20854
+ overflow: hidden;
20855
+ width: 0;
20856
+ padding: 0;
20857
+ border-right: 0;
20858
+ border-left: 0;
20859
+ }
20860
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
20861
+ display: inline-flex;
20862
+ width: var(--c4p--inline-edit--size);
20863
+ max-width: var(--c4p--inline-edit--size);
20864
+ height: 100%;
20865
+ min-height: initial;
20866
+ max-height: var(--c4p--inline-edit--size);
20867
+ align-items: center;
20868
+ justify-content: center;
20869
+ border: 2px solid transparent;
20870
+ }
20871
+ .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 {
20872
+ border-color: transparent;
20873
+ background-color: transparent;
20874
+ box-shadow: initial;
20875
+ outline: initial;
20876
+ }
20877
+ @media (hover: hover) {
20878
+ .c4p--inline-edit .c4p--inline-edit__edit {
20879
+ opacity: 0;
20880
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
20881
+ }
20882
+ .c4p--inline-edit:hover .c4p--inline-edit__edit {
20883
+ opacity: 1;
20884
+ }
20885
+ }
20886
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
20887
+ opacity: 1;
20888
+ }
20889
+ .c4p--inline-edit .c4p--inline-edit__validation-icon {
20890
+ display: inline-flex;
20891
+ width: var(--c4p--inline-edit--size);
20892
+ max-width: var(--c4p--inline-edit--size);
20893
+ height: 100%;
20894
+ min-height: initial;
20895
+ max-height: var(--c4p--inline-edit--size);
20896
+ align-items: center;
20897
+ justify-content: center;
20898
+ border: 2px solid transparent;
20899
+ }
20900
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
20901
+ color: var(--cds-support-error, #da1e28);
20902
+ }
20903
+ .c4p--inline-edit .c4p--inline-edit__validation-text {
20904
+ display: block;
20905
+ overflow: visible;
20906
+ margin-left: var(--cds-spacing-05, 1rem);
20907
+ }
20908
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
20909
+ color: var(--cds-support-error, #da1e28);
20910
+ }
20911
+
20877
20912
  .c4p--inline-edit-v2 {
20878
20913
  display: flex;
20879
20914
  align-items: center;
@@ -20899,6 +20934,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20899
20934
  .c4p--inline-edit-v2__text-input {
20900
20935
  flex: 1;
20901
20936
  }
20937
+ .c4p--inline-edit-v2__text-input-label {
20938
+ display: none;
20939
+ }
20902
20940
  .c4p--inline-edit-v2__warning-icon {
20903
20941
  /* stylelint-disable-next-line carbon/layout-token-use */
20904
20942
  margin-right: 0.4375rem;