@carbon/ibm-products 1.35.0 → 1.35.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) 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/CreateTearsheet/CreateTearsheet.js +7 -1
  16. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  17. package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  18. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  19. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  20. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  21. package/es/components/Datagrid/useRowExpander.js +13 -1
  22. package/es/components/InlineEdit/InlineEdit.js +22 -385
  23. package/es/components/InlineEditV1/InlineEditV1.js +406 -0
  24. package/es/components/InlineEditV1/index.js +8 -0
  25. package/es/components/InlineEditV2/InlineEditV2.js +48 -21
  26. package/es/components/InlineEditV2/index.js +7 -0
  27. package/es/components/PageHeader/PageHeader.js +3 -3
  28. package/es/components/index.js +1 -1
  29. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  30. package/es/global/js/package-settings.js +1 -0
  31. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  32. package/lib/components/CreateTearsheet/CreateTearsheet.js +7 -1
  33. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
  35. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
  36. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  37. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
  38. package/lib/components/Datagrid/useColumnOrder.js +2 -1
  39. package/lib/components/Datagrid/useRowExpander.js +13 -1
  40. package/lib/components/InlineEdit/InlineEdit.js +22 -379
  41. package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
  42. package/lib/components/InlineEditV1/index.js +12 -0
  43. package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
  44. package/lib/components/PageHeader/PageHeader.js +3 -3
  45. package/lib/components/index.js +1 -1
  46. package/lib/global/js/hooks/useResetCreateComponent.js +6 -2
  47. package/lib/global/js/package-settings.js +1 -0
  48. package/lib/global/js/utils/getNumberOfHiddenSteps.js +26 -0
  49. package/package.json +10 -10
  50. package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
  51. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  52. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
  53. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  54. package/scss/components/InlineEditV2/_index.scss +1 -1
  55. package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
  56. package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
  57. package/scss/components/_index-released-only.scss +1 -1
  58. package/scss/components/_index.scss +2 -1
@@ -18949,243 +18949,6 @@ button.c4p--add-select__global-filter-toggle--open {
18949
18949
  transition: none;
18950
18950
  }
18951
18951
  }
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
18952
  .c4p--data-spreadsheet {
19190
18953
  --c4p--data-spreadsheet--total-width: 0;
19191
18954
  display: inline-block;
@@ -20246,6 +20009,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
20246
20009
  content: "";
20247
20010
  }
20248
20011
 
20012
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
20013
+ padding: var(--cds-spacing-03, 0.5rem);
20014
+ padding-right: 0;
20015
+ }
20016
+
20017
+ .c4p--datagrid__row-expander.bx--btn {
20018
+ display: flex;
20019
+ width: var(--cds-spacing-07, 2rem);
20020
+ height: var(--cds-spacing-07, 2rem);
20021
+ min-height: var(--cds-spacing-07, 2rem);
20022
+ justify-content: center;
20023
+ padding: 0;
20024
+ }
20025
+ .c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
20026
+ fill: var(--cds-ui-05, #161616);
20027
+ }
20028
+
20249
20029
  /*
20250
20030
  * Licensed Materials - Property of IBM
20251
20031
  * 5724-Q36
@@ -20874,6 +20654,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20874
20654
  color: #ffffff;
20875
20655
  }
20876
20656
 
20657
+ .c4p--inline-edit {
20658
+ --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
20659
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20660
+ --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
20661
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
20662
+ position: relative;
20663
+ display: inline-block;
20664
+ min-width: calc(4 * var(--c4p--inline-edit--size));
20665
+ max-width: 100%;
20666
+ height: var(--c4p--inline-edit--size);
20667
+ background-color: var(--c4p--inline-edit--background-color);
20668
+ cursor: text;
20669
+ 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);
20670
+ vertical-align: middle;
20671
+ white-space: nowrap;
20672
+ }
20673
+ .c4p--inline-edit.c4p--inline-edit--light {
20674
+ --c4p--inline-edit--background-color: transparent;
20675
+ }
20676
+ .c4p--inline-edit:hover {
20677
+ --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
20678
+ }
20679
+ .c4p--inline-edit.c4p--inline-edit--sm {
20680
+ --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
20681
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20682
+ }
20683
+ .c4p--inline-edit.c4p--inline-edit--lg {
20684
+ --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
20685
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
20686
+ }
20687
+ .c4p--inline-edit.c4p--inline-edit--invalid {
20688
+ /* stylelint-disable-next-line carbon/theme-token-use */
20689
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
20690
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20691
+ }
20692
+ @media screen and (prefers-contrast) {
20693
+ .c4p--inline-edit.c4p--inline-edit--invalid {
20694
+ outline-style: dotted;
20695
+ }
20696
+ }
20697
+ .c4p--inline-edit.c4p--inline-edit--editing {
20698
+ /* stylelint-disable-next-line carbon/theme-token-use */
20699
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
20700
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20701
+ background-color: var(--cds-ui-01, #f4f4f4);
20702
+ }
20703
+ @media screen and (prefers-contrast) {
20704
+ .c4p--inline-edit.c4p--inline-edit--editing {
20705
+ outline-style: dotted;
20706
+ }
20707
+ }
20708
+ .c4p--inline-edit .c4p--inline-edit__input {
20709
+ display: inline-block;
20710
+ overflow: hidden;
20711
+ width: calc(
20712
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
20713
+ );
20714
+ max-width: calc(
20715
+ 100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
20716
+ );
20717
+ min-height: var(--c4p--inline-edit--size);
20718
+ /* stylelint-disable-next-line carbon/layout-token-use */
20719
+ margin-right: var(--c4p--inline-edit--toolbar-width);
20720
+ margin-left: var(--cds-spacing-05, 1rem);
20721
+ line-height: var(--c4p--inline-edit--size);
20722
+ }
20723
+ .c4p--inline-edit .c4p--inline-edit__input:focus {
20724
+ outline: none;
20725
+ }
20726
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
20727
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
20728
+ }
20729
+ .c4p--inline-edit .c4p--inline-edit__input::after {
20730
+ position: absolute;
20731
+ top: 0;
20732
+ left: 0;
20733
+ display: block;
20734
+ overflow: hidden;
20735
+ width: 0;
20736
+ margin-left: var(--cds-spacing-05, 1rem);
20737
+ color: var(--cds-text-05, #6f6f6f);
20738
+ content: attr(data-placeholder);
20739
+ opacity: 0;
20740
+ visibility: hidden;
20741
+ }
20742
+ .c4p--inline-edit .c4p--inline-edit__ellipsis {
20743
+ display: inline-block;
20744
+ overflow: hidden;
20745
+ width: 0;
20746
+ height: var(--c4p--inline-edit--size);
20747
+ line-height: var(--c4p--inline-edit--size);
20748
+ opacity: 0;
20749
+ pointer-events: none;
20750
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20751
+ }
20752
+ .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
20753
+ width: initial;
20754
+ opacity: 1;
20755
+ }
20756
+ .c4p--inline-edit .c4p--inline-edit__disabled-cover {
20757
+ position: absolute;
20758
+ top: 0;
20759
+ left: 0;
20760
+ width: 100%;
20761
+ height: 100%;
20762
+ pointer-events: none;
20763
+ }
20764
+ .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
20765
+ cursor: not-allowed;
20766
+ pointer-events: all;
20767
+ }
20768
+ .c4p--inline-edit .c4p--inline-edit__input--empty::after {
20769
+ width: initial;
20770
+ opacity: 1;
20771
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20772
+ visibility: visible;
20773
+ }
20774
+ .c4p--inline-edit .c4p--inline-edit__after-input-elements {
20775
+ --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
20776
+ position: absolute;
20777
+ top: 0;
20778
+ right: 0;
20779
+ display: flex;
20780
+ width: var(--c4p--inline-edit--toolbar-width);
20781
+ height: 100%;
20782
+ justify-content: space-between;
20783
+ cursor: text;
20784
+ }
20785
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
20786
+ --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
20787
+ }
20788
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
20789
+ position: absolute;
20790
+ top: 0;
20791
+ left: 0;
20792
+ display: block;
20793
+ width: 100%;
20794
+ height: 100%;
20795
+ box-sizing: border-box;
20796
+ border: 2px solid var(--cds-focus, #0f62fe);
20797
+ border-left: 0;
20798
+ content: "";
20799
+ pointer-events: none;
20800
+ }
20801
+ .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 {
20802
+ display: inline-flex;
20803
+ width: var(--c4p--inline-edit--size);
20804
+ max-width: var(--c4p--inline-edit--size);
20805
+ height: 100%;
20806
+ min-height: initial;
20807
+ max-height: var(--c4p--inline-edit--size);
20808
+ align-items: center;
20809
+ justify-content: center;
20810
+ border: 2px solid transparent;
20811
+ }
20812
+ .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 {
20813
+ outline: initial;
20814
+ }
20815
+ .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 {
20816
+ border-color: var(--cds-focus, #0f62fe);
20817
+ box-shadow: initial;
20818
+ outline: initial;
20819
+ }
20820
+ .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 {
20821
+ box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
20822
+ }
20823
+ .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 {
20824
+ background-color: transparent;
20825
+ }
20826
+ .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] {
20827
+ border-color: transparent;
20828
+ }
20829
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
20830
+ overflow: visible;
20831
+ width: var(--c4p--inline-edit--edit-size);
20832
+ transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
20833
+ transition-property: margin, padding;
20834
+ }
20835
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
20836
+ overflow: hidden;
20837
+ width: 0;
20838
+ padding: 0;
20839
+ border-right: 0;
20840
+ border-left: 0;
20841
+ }
20842
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
20843
+ display: inline-flex;
20844
+ width: var(--c4p--inline-edit--size);
20845
+ max-width: var(--c4p--inline-edit--size);
20846
+ height: 100%;
20847
+ min-height: initial;
20848
+ max-height: var(--c4p--inline-edit--size);
20849
+ align-items: center;
20850
+ justify-content: center;
20851
+ border: 2px solid transparent;
20852
+ }
20853
+ .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 {
20854
+ border-color: transparent;
20855
+ background-color: transparent;
20856
+ box-shadow: initial;
20857
+ outline: initial;
20858
+ }
20859
+ @media (hover: hover) {
20860
+ .c4p--inline-edit .c4p--inline-edit__edit {
20861
+ opacity: 0;
20862
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
20863
+ }
20864
+ .c4p--inline-edit:hover .c4p--inline-edit__edit {
20865
+ opacity: 1;
20866
+ }
20867
+ }
20868
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
20869
+ opacity: 1;
20870
+ }
20871
+ .c4p--inline-edit .c4p--inline-edit__validation-icon {
20872
+ display: inline-flex;
20873
+ width: var(--c4p--inline-edit--size);
20874
+ max-width: var(--c4p--inline-edit--size);
20875
+ height: 100%;
20876
+ min-height: initial;
20877
+ max-height: var(--c4p--inline-edit--size);
20878
+ align-items: center;
20879
+ justify-content: center;
20880
+ border: 2px solid transparent;
20881
+ }
20882
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
20883
+ color: var(--cds-support-error, #da1e28);
20884
+ }
20885
+ .c4p--inline-edit .c4p--inline-edit__validation-text {
20886
+ display: block;
20887
+ overflow: visible;
20888
+ margin-left: var(--cds-spacing-05, 1rem);
20889
+ }
20890
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
20891
+ color: var(--cds-support-error, #da1e28);
20892
+ }
20893
+
20877
20894
  .c4p--inline-edit-v2 {
20878
20895
  display: flex;
20879
20896
  align-items: center;
@@ -20899,6 +20916,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20899
20916
  .c4p--inline-edit-v2__text-input {
20900
20917
  flex: 1;
20901
20918
  }
20919
+ .c4p--inline-edit-v2__text-input-label {
20920
+ display: none;
20921
+ }
20902
20922
  .c4p--inline-edit-v2__warning-icon {
20903
20923
  /* stylelint-disable-next-line carbon/layout-token-use */
20904
20924
  margin-right: 0.4375rem;