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