@cloudscape-design/components 3.0.618 → 3.0.620

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/annotation-context/annotation/styles.css.js +24 -24
  2. package/annotation-context/annotation/styles.scoped.css +31 -31
  3. package/annotation-context/annotation/styles.selectors.js +24 -24
  4. package/app-layout/classic.d.ts.map +1 -1
  5. package/app-layout/classic.js +5 -16
  6. package/app-layout/classic.js.map +1 -1
  7. package/app-layout/content-wrapper/index.d.ts +1 -0
  8. package/app-layout/content-wrapper/index.d.ts.map +1 -1
  9. package/app-layout/content-wrapper/index.js +3 -3
  10. package/app-layout/content-wrapper/index.js.map +1 -1
  11. package/app-layout/notifications/styles.css.js +3 -3
  12. package/app-layout/notifications/styles.scoped.css +7 -7
  13. package/app-layout/notifications/styles.selectors.js +3 -3
  14. package/app-layout/utils/sticky-offsets.d.ts +4 -0
  15. package/app-layout/utils/sticky-offsets.d.ts.map +1 -0
  16. package/app-layout/utils/sticky-offsets.js +10 -0
  17. package/app-layout/utils/sticky-offsets.js.map +1 -0
  18. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  19. package/app-layout/visual-refresh/context.js +1 -5
  20. package/app-layout/visual-refresh/context.js.map +1 -1
  21. package/app-layout/visual-refresh/main.d.ts.map +1 -1
  22. package/app-layout/visual-refresh/main.js +6 -4
  23. package/app-layout/visual-refresh/main.js.map +1 -1
  24. package/app-layout/visual-refresh/styles.css.js +81 -81
  25. package/app-layout/visual-refresh/styles.scoped.css +258 -294
  26. package/app-layout/visual-refresh/styles.selectors.js +81 -81
  27. package/container/use-sticky-header.d.ts +1 -5
  28. package/container/use-sticky-header.d.ts.map +1 -1
  29. package/container/use-sticky-header.js +7 -34
  30. package/container/use-sticky-header.js.map +1 -1
  31. package/flashbar/styles.css.js +47 -47
  32. package/flashbar/styles.scoped.css +171 -171
  33. package/flashbar/styles.selectors.js +47 -47
  34. package/header/internal.d.ts.map +1 -1
  35. package/header/internal.js +3 -1
  36. package/header/internal.js.map +1 -1
  37. package/header/styles.css.js +35 -34
  38. package/header/styles.scoped.css +55 -52
  39. package/header/styles.selectors.js +35 -34
  40. package/internal/components/dropdown/styles.css.js +20 -20
  41. package/internal/components/dropdown/styles.scoped.css +41 -41
  42. package/internal/components/dropdown/styles.selectors.js +20 -20
  43. package/internal/context/app-layout-context.d.ts +0 -3
  44. package/internal/context/app-layout-context.d.ts.map +1 -1
  45. package/internal/context/app-layout-context.js +1 -5
  46. package/internal/context/app-layout-context.js.map +1 -1
  47. package/internal/environment.js +1 -1
  48. package/internal/environment.json +1 -1
  49. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  50. package/internal/generated/custom-css-properties/index.js +43 -44
  51. package/internal/generated/custom-css-properties/index.js.map +1 -1
  52. package/internal/manifest.json +1 -1
  53. package/internal/styles/global-vars.d.ts +6 -0
  54. package/internal/styles/global-vars.d.ts.map +1 -0
  55. package/internal/styles/global-vars.js +8 -0
  56. package/internal/styles/global-vars.js.map +1 -0
  57. package/mixed-line-bar-chart/bar-series.d.ts +3 -3
  58. package/mixed-line-bar-chart/bar-series.d.ts.map +1 -1
  59. package/mixed-line-bar-chart/bar-series.js +61 -17
  60. package/mixed-line-bar-chart/bar-series.js.map +1 -1
  61. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.d.ts +7 -0
  62. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.d.ts.map +1 -0
  63. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.js +33 -0
  64. package/mixed-line-bar-chart/create-one-side-rounded-rect-path.js.map +1 -0
  65. package/mixed-line-bar-chart/data-series.d.ts.map +1 -1
  66. package/mixed-line-bar-chart/data-series.js +5 -5
  67. package/mixed-line-bar-chart/data-series.js.map +1 -1
  68. package/mixed-line-bar-chart/utils.d.ts +2 -9
  69. package/mixed-line-bar-chart/utils.d.ts.map +1 -1
  70. package/mixed-line-bar-chart/utils.js +19 -26
  71. package/mixed-line-bar-chart/utils.js.map +1 -1
  72. package/package.json +1 -1
  73. package/spinner/styles.css.js +13 -13
  74. package/spinner/styles.scoped.css +39 -39
  75. package/spinner/styles.selectors.js +13 -13
  76. package/split-panel/implementation.d.ts.map +1 -1
  77. package/split-panel/implementation.js +7 -7
  78. package/split-panel/implementation.js.map +1 -1
  79. package/split-panel/interfaces.d.ts +1 -0
  80. package/split-panel/interfaces.d.ts.map +1 -1
  81. package/split-panel/interfaces.js.map +1 -1
  82. package/split-panel/side.d.ts +1 -1
  83. package/split-panel/side.d.ts.map +1 -1
  84. package/split-panel/side.js +2 -5
  85. package/split-panel/side.js.map +1 -1
  86. package/table/internal.d.ts.map +1 -1
  87. package/table/internal.js +6 -7
  88. package/table/internal.js.map +1 -1
  89. package/table/sticky-scrollbar/sticky-scrollbar.d.ts.map +1 -1
  90. package/table/sticky-scrollbar/sticky-scrollbar.js +1 -7
  91. package/table/sticky-scrollbar/sticky-scrollbar.js.map +1 -1
  92. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts +2 -2
  93. package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
  94. package/table/sticky-scrollbar/use-sticky-scrollbar.js +12 -30
  95. package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
  96. package/theming/index.d.ts +5 -0
  97. package/theming/index.d.ts.map +1 -1
  98. package/theming/index.js +8 -1
  99. package/theming/index.js.map +1 -1
package/spinner/styles.scoped.css CHANGED
@@ -100,51 +100,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
100
100
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
101
101
  SPDX-License-Identifier: Apache-2.0
102
102
  */
103
- @keyframes awsui_spinner-rotator_1612d_wzftr_1 {
103
+ @keyframes awsui_spinner-rotator_1612d_oxpob_1 {
104
104
  0% {
105
- transform: rotate(var(--awsui-spinner-rotator-from-lgosor));
105
+ transform: rotate(var(--awsui-spinner-rotator-from-ud5fvm));
106
106
  }
107
107
  100% {
108
- transform: rotate(var(--awsui-spinner-rotator-to-lgosor));
108
+ transform: rotate(var(--awsui-spinner-rotator-to-ud5fvm));
109
109
  }
110
110
  }
111
- @keyframes awsui_spinner-line-left_1612d_wzftr_1 {
111
+ @keyframes awsui_spinner-line-left_1612d_oxpob_1 {
112
112
  0% {
113
- transform: rotate(var(--awsui-spinner-line-left-from-lgosor));
113
+ transform: rotate(var(--awsui-spinner-line-left-from-ud5fvm));
114
114
  }
115
115
  50% {
116
- transform: rotate(var(--awsui-spinner-line-left-to-lgosor));
116
+ transform: rotate(var(--awsui-spinner-line-left-to-ud5fvm));
117
117
  }
118
118
  100% {
119
- transform: rotate(var(--awsui-spinner-line-left-from-lgosor));
119
+ transform: rotate(var(--awsui-spinner-line-left-from-ud5fvm));
120
120
  }
121
121
  }
122
- @keyframes awsui_spinner-line-right_1612d_wzftr_1 {
122
+ @keyframes awsui_spinner-line-right_1612d_oxpob_1 {
123
123
  0% {
124
- transform: rotate(var(--awsui-spinner-line-right-from-lgosor));
124
+ transform: rotate(var(--awsui-spinner-line-right-from-ud5fvm));
125
125
  }
126
126
  50% {
127
- transform: rotate(var(--awsui-spinner-line-right-to-lgosor));
127
+ transform: rotate(var(--awsui-spinner-line-right-to-ud5fvm));
128
128
  }
129
129
  100% {
130
- transform: rotate(var(--awsui-spinner-line-right-from-lgosor));
130
+ transform: rotate(var(--awsui-spinner-line-right-from-ud5fvm));
131
131
  }
132
132
  }
133
- .awsui_root_1612d_wzftr_133:not(#\9) {
134
- --awsui-spinner-rotator-from-lgosor: 0deg;
135
- --awsui-spinner-rotator-to-lgosor: 360deg;
136
- --awsui-spinner-line-left-from-lgosor: 0deg;
137
- --awsui-spinner-line-left-to-lgosor: 120deg;
138
- --awsui-spinner-line-right-from-lgosor: 90deg;
139
- --awsui-spinner-line-right-to-lgosor: -30deg;
133
+ .awsui_root_1612d_oxpob_133:not(#\9) {
134
+ --awsui-spinner-rotator-from-ud5fvm: 0deg;
135
+ --awsui-spinner-rotator-to-ud5fvm: 360deg;
136
+ --awsui-spinner-line-left-from-ud5fvm: 0deg;
137
+ --awsui-spinner-line-left-to-ud5fvm: 120deg;
138
+ --awsui-spinner-line-right-from-ud5fvm: 90deg;
139
+ --awsui-spinner-line-right-to-ud5fvm: -30deg;
140
140
  display: inline-block;
141
141
  vertical-align: top;
142
142
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
143
- animation: awsui_spinner-rotator_1612d_wzftr_1 0.7s linear infinite;
143
+ animation: awsui_spinner-rotator_1612d_oxpob_1 0.7s linear infinite;
144
144
  box-sizing: border-box;
145
145
  line-height: 0;
146
146
  }
147
- .awsui_root_1612d_wzftr_133.awsui_size-normal_1612d_wzftr_147:not(#\9) {
147
+ .awsui_root_1612d_oxpob_133.awsui_size-normal_1612d_oxpob_147:not(#\9) {
148
148
  inline-size: var(--size-icon-normal-0m1722, 16px);
149
149
  block-size: var(--size-icon-normal-0m1722, 16px);
150
150
  padding-block: calc((var(--size-icon-normal-0m1722, 16px) - 12px) / 2);
@@ -152,7 +152,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
152
152
  margin-block: calc((var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / 2);
153
153
  box-sizing: border-box;
154
154
  }
155
- .awsui_root_1612d_wzftr_133.awsui_size-big_1612d_wzftr_155:not(#\9) {
155
+ .awsui_root_1612d_oxpob_133.awsui_size-big_1612d_oxpob_155:not(#\9) {
156
156
  inline-size: var(--size-icon-big-zkdryd, 32px);
157
157
  block-size: var(--size-icon-big-zkdryd, 32px);
158
158
  padding-block: calc((var(--size-icon-big-zkdryd, 32px) - 24px) / 2);
@@ -160,7 +160,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
160
160
  margin-block: calc((var(--line-height-heading-xl-avbttk, 30px) - var(--size-icon-big-zkdryd, 32px)) / 2);
161
161
  box-sizing: border-box;
162
162
  }
163
- .awsui_root_1612d_wzftr_133.awsui_size-large_1612d_wzftr_163:not(#\9) {
163
+ .awsui_root_1612d_oxpob_133.awsui_size-large_1612d_oxpob_163:not(#\9) {
164
164
  inline-size: var(--size-icon-large-bivhmh, 48px);
165
165
  block-size: var(--size-icon-large-bivhmh, 48px);
166
166
  padding-block: calc((var(--size-icon-large-bivhmh, 48px) - 36px) / 2);
@@ -168,32 +168,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
168
168
  margin-block: calc((var(--line-height-display-l-8nioft, 48px) - var(--size-icon-large-bivhmh, 48px)) / 2);
169
169
  box-sizing: border-box;
170
170
  }
171
- .awsui_root_1612d_wzftr_133.awsui_variant-normal_1612d_wzftr_171:not(#\9) {
171
+ .awsui_root_1612d_oxpob_133.awsui_variant-normal_1612d_oxpob_171:not(#\9) {
172
172
  color: currentColor;
173
173
  }
174
- .awsui_root_1612d_wzftr_133.awsui_variant-disabled_1612d_wzftr_174:not(#\9) {
174
+ .awsui_root_1612d_oxpob_133.awsui_variant-disabled_1612d_oxpob_174:not(#\9) {
175
175
  color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
176
176
  }
177
- .awsui_root_1612d_wzftr_133.awsui_variant-inverted_1612d_wzftr_177:not(#\9) {
177
+ .awsui_root_1612d_oxpob_133.awsui_variant-inverted_1612d_oxpob_177:not(#\9) {
178
178
  color: var(--color-text-inverted-70cpkk, #ffffff);
179
179
  }
180
- .awsui_root_1612d_wzftr_133:not(#\9):dir(rtl) {
181
- --awsui-spinner-rotator-from-lgosor: 360deg;
182
- --awsui-spinner-rotator-to-lgosor: 0deg;
183
- --awsui-spinner-line-left-from-lgosor: 0deg;
184
- --awsui-spinner-line-left-to-lgosor: -120deg;
185
- --awsui-spinner-line-right-from-lgosor: -90deg;
186
- --awsui-spinner-line-right-to-lgosor: 30deg;
180
+ .awsui_root_1612d_oxpob_133:not(#\9):dir(rtl) {
181
+ --awsui-spinner-rotator-from-ud5fvm: 360deg;
182
+ --awsui-spinner-rotator-to-ud5fvm: 0deg;
183
+ --awsui-spinner-line-left-from-ud5fvm: 0deg;
184
+ --awsui-spinner-line-left-to-ud5fvm: -120deg;
185
+ --awsui-spinner-line-right-from-ud5fvm: -90deg;
186
+ --awsui-spinner-line-right-to-ud5fvm: 30deg;
187
187
  }
188
188
 
189
- .awsui_circle_1612d_wzftr_189:not(#\9) {
189
+ .awsui_circle_1612d_oxpob_189:not(#\9) {
190
190
  display: inline-block;
191
191
  inline-size: 50%;
192
192
  block-size: 100%;
193
193
  overflow: hidden;
194
194
  position: relative;
195
195
  }
196
- .awsui_circle_1612d_wzftr_189:not(#\9):after {
196
+ .awsui_circle_1612d_oxpob_189:not(#\9):after {
197
197
  position: absolute;
198
198
  box-sizing: border-box;
199
199
  content: "";
@@ -206,7 +206,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
206
206
  border-inline-end-color: transparent;
207
207
  border-block-end-color: transparent;
208
208
  }
209
- .awsui_circle_1612d_wzftr_189:not(#\9):after {
209
+ .awsui_circle_1612d_oxpob_189:not(#\9):after {
210
210
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
211
211
  animation: 1.5s ease-in-out infinite;
212
212
  inset-block-start: 0;
@@ -214,13 +214,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
214
214
  block-size: 100%;
215
215
  inline-size: 200%;
216
216
  }
217
- .awsui_circle_1612d_wzftr_189.awsui_circle-left_1612d_wzftr_217:not(#\9):after {
217
+ .awsui_circle_1612d_oxpob_189.awsui_circle-left_1612d_oxpob_217:not(#\9):after {
218
218
  inset-inline-start: 0;
219
219
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
220
- animation-name: awsui_spinner-line-left_1612d_wzftr_1;
220
+ animation-name: awsui_spinner-line-left_1612d_oxpob_1;
221
221
  }
222
- .awsui_circle_1612d_wzftr_189.awsui_circle-right_1612d_wzftr_222:not(#\9):after {
222
+ .awsui_circle_1612d_oxpob_189.awsui_circle-right_1612d_oxpob_222:not(#\9):after {
223
223
  inset-inline-start: -100%;
224
224
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
225
- animation-name: awsui_spinner-line-right_1612d_wzftr_1;
225
+ animation-name: awsui_spinner-line-right_1612d_oxpob_1;
226
226
  }
package/spinner/styles.selectors.js CHANGED
@@ -2,18 +2,18 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_1612d_wzftr_133",
6
- "spinner-rotator": "awsui_spinner-rotator_1612d_wzftr_1",
7
- "size-normal": "awsui_size-normal_1612d_wzftr_147",
8
- "size-big": "awsui_size-big_1612d_wzftr_155",
9
- "size-large": "awsui_size-large_1612d_wzftr_163",
10
- "variant-normal": "awsui_variant-normal_1612d_wzftr_171",
11
- "variant-disabled": "awsui_variant-disabled_1612d_wzftr_174",
12
- "variant-inverted": "awsui_variant-inverted_1612d_wzftr_177",
13
- "circle": "awsui_circle_1612d_wzftr_189",
14
- "circle-left": "awsui_circle-left_1612d_wzftr_217",
15
- "spinner-line-left": "awsui_spinner-line-left_1612d_wzftr_1",
16
- "circle-right": "awsui_circle-right_1612d_wzftr_222",
17
- "spinner-line-right": "awsui_spinner-line-right_1612d_wzftr_1"
5
+ "root": "awsui_root_1612d_oxpob_133",
6
+ "spinner-rotator": "awsui_spinner-rotator_1612d_oxpob_1",
7
+ "size-normal": "awsui_size-normal_1612d_oxpob_147",
8
+ "size-big": "awsui_size-big_1612d_oxpob_155",
9
+ "size-large": "awsui_size-large_1612d_oxpob_163",
10
+ "variant-normal": "awsui_variant-normal_1612d_oxpob_171",
11
+ "variant-disabled": "awsui_variant-disabled_1612d_oxpob_174",
12
+ "variant-inverted": "awsui_variant-inverted_1612d_oxpob_177",
13
+ "circle": "awsui_circle_1612d_oxpob_189",
14
+ "circle-left": "awsui_circle-left_1612d_oxpob_217",
15
+ "spinner-line-left": "awsui_spinner-line-left_1612d_oxpob_1",
16
+ "circle-right": "awsui_circle-right_1612d_oxpob_222",
17
+ "spinner-line-right": "awsui_spinner-line-right_1612d_oxpob_1"
18
18
  };
19
19
 
package/split-panel/implementation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAiB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,eAAO,MAAM,wBAAwB,qFAiPpC,CAAC"}
1
+ {"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAiB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,eAAO,MAAM,wBAAwB,qFA6OpC,CAAC"}
package/split-panel/implementation.js CHANGED
@@ -12,13 +12,13 @@ import { usePointerEvents } from '../app-layout/utils/use-pointer-events';
12
12
  import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';
13
13
  import styles from './styles.css.js';
14
14
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
15
- import { AppLayoutContext } from '../internal/context/app-layout-context';
16
15
  import { Transition } from '../internal/components/transition';
17
16
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
18
17
  import { useUniqueId } from '../internal/hooks/use-unique-id';
19
18
  import { SplitPanelContentSide } from './side';
20
19
  import { SplitPanelContentBottom } from './bottom';
21
20
  import { useInternalI18n } from '../i18n/context';
21
+ import globalVars from '../internal/styles/global-vars';
22
22
  export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef) => {
23
23
  var { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings } = _a, restProps = __rest(_a, ["header", "children", "hidePreferencesButton", "closeBehavior", "i18nStrings"]);
24
24
  const isRefresh = useVisualRefresh();
@@ -40,10 +40,10 @@ export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef)
40
40
  };
41
41
  const onSliderPointerDown = usePointerEvents(sizeControlProps);
42
42
  const onKeyDown = useKeyboardEvents(sizeControlProps);
43
- const wrappedChildren = (React.createElement(AppLayoutContext.Provider, { value: {
44
- stickyOffsetTop: topOffset,
45
- stickyOffsetBottom: bottomOffset,
46
- } }, children));
43
+ const contentStyle = {
44
+ [globalVars.stickyVerticalTopOffset]: topOffset,
45
+ [globalVars.stickyVerticalBottomOffset]: bottomOffset,
46
+ };
47
47
  const panelHeaderId = useUniqueId('split-panel-header');
48
48
  const wrappedHeader = (React.createElement("div", { className: styles.header, style: appLayoutMaxWidth },
49
49
  React.createElement("h2", { className: styles['header-text'], id: panelHeaderId }, header),
@@ -92,8 +92,8 @@ export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef)
92
92
  return React.createElement(React.Fragment, null);
93
93
  }
94
94
  return (React.createElement(Transition, { in: isOpen !== null && isOpen !== void 0 ? isOpen : false }, (state, transitioningElementRef) => (React.createElement(React.Fragment, null,
95
- position === 'side' && (React.createElement(SplitPanelContentSide, { resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, openButtonAriaLabel: i18n('i18nStrings.openButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.openButtonAriaLabel), toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId: panelHeaderId }, wrappedChildren)),
96
- position === 'bottom' && (React.createElement(SplitPanelContentBottom, { resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, header: wrappedHeader, panelHeaderId: panelHeaderId, state: state, transitioningElementRef: transitioningElementRef, appLayoutMaxWidth: appLayoutMaxWidth }, wrappedChildren)),
95
+ position === 'side' && (React.createElement(SplitPanelContentSide, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, openButtonAriaLabel: i18n('i18nStrings.openButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.openButtonAriaLabel), toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId: panelHeaderId }, children)),
96
+ position === 'bottom' && (React.createElement(SplitPanelContentBottom, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, header: wrappedHeader, panelHeaderId: panelHeaderId, state: state, transitioningElementRef: transitioningElementRef, appLayoutMaxWidth: appLayoutMaxWidth }, children)),
97
97
  isPreferencesOpen && (React.createElement(PreferencesModal, { visible: true, preferences: { position }, disabledSidePosition: position === 'bottom' && isForcedPosition, isRefresh: isRefresh, i18nStrings: {
98
98
  header: i18n('i18nStrings.preferencesTitle', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesTitle),
99
99
  confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesConfirm),
package/split-panel/implementation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport styles from './styles.css.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { AppLayoutContext } from '../internal/context/app-layout-context';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const wrappedChildren = (\n <AppLayoutContext.Provider\n value={{\n stickyOffsetTop: topOffset,\n stickyOffsetBottom: bottomOffset,\n }}\n >\n {children}\n </AppLayoutContext.Provider>\n );\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {wrappedChildren}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {wrappedChildren}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAG/E,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAIxD,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CACtD,CACE,EAA0G,EAC1G,iBAAiB,EACjB,EAAE;QAFF,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GAAG,KAAK,EAAE,aAAa,GAAG,UAAU,EAAE,WAAW,OAAgB,EAAX,SAAS,cAAxG,+EAA0G,CAAF;IAGxG,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,MAAM,EACN,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,GACL,GAAG,oBAAoB,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,SAAS,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,MAAM,mBAAmB,GAAG,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,CAAC;IACtG,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACnG,CAAC,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,QAAQ,EAAE,mBAAmB;QAC7B,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,QAAQ;KACT,CAAC;IACF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG;QACnB,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,SAAS;QAC/C,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,YAAY;KACtD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,CACpB,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB;QACrD,4BAAI,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,aAAa,IACpD,MAAM,CACJ;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACrC,CAAC,qBAAqB,IAAI,MAAM,IAAI,CACnC;gBACE,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EACvC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,EAC9E,GAAG,EAAE,IAAI,CAAC,WAAW,GACrB;gBACF,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAClC,CACJ;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,QAAQ,EACN,SAAS,IAAI,aAAa,KAAK,UAAU;oBACvC,CAAC,CAAC,QAAQ,KAAK,MAAM;wBACnB,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,YAAY;oBAChB,CAAC,CAAC,OAAO,EAEb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,QAAQ,EACjB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,EACtF,YAAY,EAAE,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EACpF,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,YAAY,EAAE,MAAM,GACpB,CACH,CACG,CACF,CACP,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,6BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,IAAI,CAAC,mCAAmC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,CAAC,mBAC1E,GAAG,mBACH,CAAC,mBAID,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,EAC5D,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB;QAElC,oBAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC,GAAI,CACxF,CACP,CAAC;IAEF;;;;;;;IAOA;IACA,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAEzC,IAAI,IAAI,EAAE;YACR,MAAM,QAAQ,GAAG,WAAW,CAAC;YAC7B,MAAM,cAAc,GAAG,eAAe,CAAC;YAEvC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACzC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC;YAEtC,yDAAyD;YACzD,KAAK,IAAI,CAAC,YAAY,CAAC;YAEvB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,YAAY,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IAEvE,IAAI,aAAa,KAAK,MAAM,IAAI,CAAC,MAAM,EAAE;QACvC,OAAO,yCAAK,CAAC;KACd;IAED;;;;;OAKG;IACH,IAAI,SAAS,IAAI,CAAC,MAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC/C,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,IAC5B,CAAC,KAAK,EAAE,uBAAuB,EAAE,EAAE,CAAC,CACnC;QACG,QAAQ,KAAK,MAAM,IAAI,CACtB,oBAAC,qBAAqB,IACpB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EAC9F,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACa,CACzB;QAEA,QAAQ,KAAK,QAAQ,IAAI,CACxB,oBAAC,uBAAuB,IACtB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,uBAAuB,EAAE,uBAAuB,EAChD,iBAAiB,EAAE,iBAAiB,IAEnC,QAAQ,CACe,CAC3B;QACA,iBAAiB,IAAI,CACpB,oBAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,EAAE,QAAQ,EAAE,EACzB,oBAAoB,EAAE,QAAQ,KAAK,QAAQ,IAAI,gBAAgB,EAC/D,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE;gBACX,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC;gBAC3E,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC;gBAChF,MAAM,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC;gBAC7E,aAAa,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC;gBAClG,mBAAmB,EAAE,IAAI,CACvB,4CAA4C,EAC5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C;gBACD,cAAc,EAAE,IAAI,CAAC,uCAAuC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC;gBACrG,YAAY,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC;aAChG,EACD,SAAS,EAAE,WAAW,CAAC,EAAE;gBACvB,mBAAmB,mBAAM,WAAW,EAAG,CAAC;gBACxC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,GACD,CACH,CACA,CACJ,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport styles from './styles.css.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\nimport globalVars from '../internal/styles/global-vars';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const contentStyle = {\n [globalVars.stickyVerticalTopOffset]: topOffset,\n [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n };\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {children}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {children}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n"]}
package/split-panel/interfaces.d.ts CHANGED
@@ -45,6 +45,7 @@ export declare namespace SplitPanelProps {
45
45
  }
46
46
  }
47
47
  export interface SplitPanelContentProps {
48
+ style: React.CSSProperties;
48
49
  baseProps: BaseComponentProps;
49
50
  isOpen?: boolean;
50
51
  splitPanelRef?: React.Ref<any>;
package/split-panel/interfaces.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;CAC3C;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,WAAW;QAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,8BAA8B,CAAC,EAAE,MAAM,CAAC;QACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;CAC3C;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,WAAW;QAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,8BAA8B,CAAC,EAAE,MAAM,CAAC;QACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}
package/split-panel/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SplitPanelProps extends BaseComponentProps {\n /**\n * Header of the split panel.\n */\n header: string;\n children: React.ReactNode;\n /**\n * Determines whether the split panel collapses or hides completely when closed.\n */\n closeBehavior?: 'collapse' | 'hide';\n /**\n * When set to `true`, the preferences button is not displayed.\n */\n hidePreferencesButton?: boolean;\n /**\n * An object containing all the necessary localized strings required by the component.\n * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n * - `openButtonAriaLabel` - The text of the panel open button aria label.\n * - `preferencesTitle` - The text of the preferences modal header.\n * - `preferencesPositionLabel` - The text of the position preference label.\n * - `preferencesPositionDescription` - The text of the position preference description.\n * - `preferencesPositionSide` - The text of the side position preference label.\n * - `preferencesPositionBottom` - The text of the bottom position preference label.\n * - `preferencesConfirm` - The text of the preference modal confirm button.\n * - `preferencesCancel` - The text of the preference modal cancel button.\n * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n * @i18n\n */\n i18nStrings?: SplitPanelProps.I18nStrings;\n}\n\nexport namespace SplitPanelProps {\n export interface I18nStrings {\n closeButtonAriaLabel?: string;\n openButtonAriaLabel?: string;\n preferencesTitle?: string;\n preferencesPositionLabel?: string;\n preferencesPositionDescription?: string;\n preferencesPositionSide?: string;\n preferencesPositionBottom?: string;\n preferencesConfirm?: string;\n preferencesCancel?: string;\n resizeHandleAriaLabel?: string;\n }\n}\n\nexport interface SplitPanelContentProps {\n baseProps: BaseComponentProps;\n isOpen?: boolean;\n splitPanelRef?: React.Ref<any>;\n cappedSize: number;\n panelHeaderId: string;\n resizeHandle: React.ReactNode;\n header: React.ReactNode;\n children: React.ReactNode;\n onToggle: () => void;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SplitPanelProps extends BaseComponentProps {\n /**\n * Header of the split panel.\n */\n header: string;\n children: React.ReactNode;\n /**\n * Determines whether the split panel collapses or hides completely when closed.\n */\n closeBehavior?: 'collapse' | 'hide';\n /**\n * When set to `true`, the preferences button is not displayed.\n */\n hidePreferencesButton?: boolean;\n /**\n * An object containing all the necessary localized strings required by the component.\n * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n * - `openButtonAriaLabel` - The text of the panel open button aria label.\n * - `preferencesTitle` - The text of the preferences modal header.\n * - `preferencesPositionLabel` - The text of the position preference label.\n * - `preferencesPositionDescription` - The text of the position preference description.\n * - `preferencesPositionSide` - The text of the side position preference label.\n * - `preferencesPositionBottom` - The text of the bottom position preference label.\n * - `preferencesConfirm` - The text of the preference modal confirm button.\n * - `preferencesCancel` - The text of the preference modal cancel button.\n * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n * @i18n\n */\n i18nStrings?: SplitPanelProps.I18nStrings;\n}\n\nexport namespace SplitPanelProps {\n export interface I18nStrings {\n closeButtonAriaLabel?: string;\n openButtonAriaLabel?: string;\n preferencesTitle?: string;\n preferencesPositionLabel?: string;\n preferencesPositionDescription?: string;\n preferencesPositionSide?: string;\n preferencesPositionBottom?: string;\n preferencesConfirm?: string;\n preferencesCancel?: string;\n resizeHandleAriaLabel?: string;\n }\n}\n\nexport interface SplitPanelContentProps {\n style: React.CSSProperties;\n baseProps: BaseComponentProps;\n isOpen?: boolean;\n splitPanelRef?: React.Ref<any>;\n cappedSize: number;\n panelHeaderId: string;\n resizeHandle: React.ReactNode;\n header: React.ReactNode;\n children: React.ReactNode;\n onToggle: () => void;\n}\n"]}
package/split-panel/side.d.ts CHANGED
@@ -5,6 +5,6 @@ interface SplitPanelContentSideProps extends SplitPanelContentProps {
5
5
  openButtonAriaLabel?: string;
6
6
  toggleRef: React.RefObject<ButtonProps.Ref>;
7
7
  }
8
- export declare function SplitPanelContentSide({ baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }: SplitPanelContentSideProps): JSX.Element;
8
+ export declare function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }: SplitPanelContentSideProps): JSX.Element;
9
9
  export {};
10
10
  //# sourceMappingURL=side.d.ts.map
package/split-panel/side.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACT,EAAE,0BAA0B,eA6C5B"}
1
+ {"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItD,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACT,EAAE,0BAA0B,eA8C5B"}
package/split-panel/side.js CHANGED
@@ -6,15 +6,12 @@ import InternalButton from '../button/internal';
6
6
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
7
7
  import styles from './styles.css.js';
8
8
  import { useSplitPanelContext } from '../internal/context/split-panel-context';
9
- export function SplitPanelContentSide({ baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }) {
9
+ export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }) {
10
10
  const { topOffset, bottomOffset } = useSplitPanelContext();
11
11
  const isRefresh = useVisualRefresh();
12
12
  return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.drawer, styles.root, styles['position-side'], {
13
13
  [styles['drawer-closed']]: !isOpen,
14
- }), style: {
15
- width: isOpen && isRefresh ? cappedSize : undefined,
16
- maxWidth: isRefresh ? '100%' : undefined,
17
- }, ref: splitPanelRef }),
14
+ }), style: Object.assign({ width: isOpen && isRefresh ? cappedSize : undefined, maxWidth: isRefresh ? '100%' : undefined }, style), ref: splitPanelRef }),
18
15
  React.createElement("div", { className: clsx(styles['drawer-content-side']), style: {
19
16
  top: topOffset,
20
17
  bottom: bottomOffset,
package/split-panel/side.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAO/E,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACmB;IAC3B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE;YACxF,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;SACnC,CAAC,EACF,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;YACnD,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;SACzC,EACD,GAAG,EAAE,aAAa;QAElB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAC9C,KAAK,EAAE;gBACL,GAAG,EAAE,SAAS;gBACd,MAAM,EAAE,YAAY;aACrB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,qBACnB,aAAa,EAC9B,IAAI,EAAC,QAAQ;YAEZ,MAAM,CAAC,CAAC,CAAC,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,CACpE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAClE,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,iBAAe,CAAC,MAAM;gBAC1D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAG,MAAM,CAAO;gBACxE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,IAAG,QAAQ,CAAO,CACvE,CACF,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n openButtonAriaLabel?: string;\n toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n baseProps,\n splitPanelRef,\n toggleRef,\n header,\n children,\n resizeHandle,\n isOpen,\n cappedSize,\n openButtonAriaLabel,\n panelHeaderId,\n onToggle,\n}: SplitPanelContentSideProps) {\n const { topOffset, bottomOffset } = useSplitPanelContext();\n const isRefresh = useVisualRefresh();\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.drawer, styles.root, styles['position-side'], {\n [styles['drawer-closed']]: !isOpen,\n })}\n style={{\n width: isOpen && isRefresh ? cappedSize : undefined,\n maxWidth: isRefresh ? '100%' : undefined,\n }}\n ref={splitPanelRef}\n >\n <div\n className={clsx(styles['drawer-content-side'])}\n style={{\n top: topOffset,\n bottom: bottomOffset,\n }}\n onClick={() => !isOpen && onToggle()}\n aria-labelledby={panelHeaderId}\n role=\"region\"\n >\n {isOpen ? (\n <div className={styles['slider-wrapper-side']}>{resizeHandle}</div>\n ) : (\n <InternalButton\n className={clsx(styles['open-button'], styles['open-button-side'])}\n iconName=\"angle-left\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={openButtonAriaLabel}\n ariaExpanded={isOpen}\n ref={isRefresh ? null : toggleRef}\n />\n )}\n <div className={styles['content-side']} aria-hidden={!isOpen}>\n <div className={clsx(styles['pane-header-wrapper-side'])}>{header}</div>\n <div className={clsx(styles['pane-content-wrapper-side'])}>{children}</div>\n </div>\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAO/E,MAAM,UAAU,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACmB;IAC3B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE;YACxF,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;SACnC,CAAC,EACF,KAAK,kBACH,KAAK,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACnD,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACrC,KAAK,GAEV,GAAG,EAAE,aAAa;QAElB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAC9C,KAAK,EAAE;gBACL,GAAG,EAAE,SAAS;gBACd,MAAM,EAAE,YAAY;aACrB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,qBACnB,aAAa,EAC9B,IAAI,EAAC,QAAQ;YAEZ,MAAM,CAAC,CAAC,CAAC,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,CACpE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAClE,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,iBAAe,CAAC,MAAM;gBAC1D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAG,MAAM,CAAO;gBACxE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,IAAG,QAAQ,CAAO,CACvE,CACF,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n openButtonAriaLabel?: string;\n toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n style,\n baseProps,\n splitPanelRef,\n toggleRef,\n header,\n children,\n resizeHandle,\n isOpen,\n cappedSize,\n openButtonAriaLabel,\n panelHeaderId,\n onToggle,\n}: SplitPanelContentSideProps) {\n const { topOffset, bottomOffset } = useSplitPanelContext();\n const isRefresh = useVisualRefresh();\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.drawer, styles.root, styles['position-side'], {\n [styles['drawer-closed']]: !isOpen,\n })}\n style={{\n width: isOpen && isRefresh ? cappedSize : undefined,\n maxWidth: isRefresh ? '100%' : undefined,\n ...style,\n }}\n ref={splitPanelRef}\n >\n <div\n className={clsx(styles['drawer-content-side'])}\n style={{\n top: topOffset,\n bottom: bottomOffset,\n }}\n onClick={() => !isOpen && onToggle()}\n aria-labelledby={panelHeaderId}\n role=\"region\"\n >\n {isOpen ? (\n <div className={styles['slider-wrapper-side']}>{resizeHandle}</div>\n ) : (\n <InternalButton\n className={clsx(styles['open-button'], styles['open-button-side'])}\n iconName=\"angle-left\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={openButtonAriaLabel}\n ariaExpanded={isOpen}\n ref={isRefresh ? null : toggleRef}\n />\n )}\n <div className={styles['content-side']} aria-hidden={!isOpen}>\n <div className={clsx(styles['pane-header-wrapper-side'])}>{header}</div>\n <div className={clsx(styles['pane-content-wrapper-side'])}>{children}</div>\n </div>\n </div>\n </div>\n );\n}\n"]}
package/table/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAc,MAAM,cAAc,CAAC;AA2D/D,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAweK,CAAC;AAEzB,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAc,MAAM,cAAc,CAAC;AA0D/D,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAweK,CAAC;AAEzB,eAAe,aAAa,CAAC"}
package/table/internal.js CHANGED
@@ -42,7 +42,6 @@ import { NoDataCell } from './no-data-cell';
42
42
  import { usePerformanceMarks } from '../internal/hooks/use-performance-marks';
43
43
  import { getContentHeaderClassName } from '../internal/utils/content-header-utils';
44
44
  import { useExpandableTableProps } from './expandable-rows/expandable-rows-utils';
45
- import { getLogicalBoundingClientRect } from '../internal/direction';
46
45
  const GRID_NAVIGATION_PAGE_SIZE = 10;
47
46
  const SELECTION_COLUMN_WIDTH = 54;
48
47
  const selectionColumnId = Symbol('selection-column-id');
@@ -79,7 +78,8 @@ const InternalTable = React.forwardRef((_a, ref) => {
79
78
  const _e = useCellEditing({ onCancel: onEditCancel, onSubmit: submitEdit }), { cancelEdit } = _e, cellEditing = __rest(_e, ["cancelEdit"]);
80
79
  usePerformanceMarks('table', true, tableRefObject, () => {
81
80
  var _a, _b, _c, _d;
82
- const headerText = (_c = (_b = (_a = toolsHeaderWrapper.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${headerStyles['heading-text']}`)) === null || _b === void 0 ? void 0 : _b.innerText) !== null && _c !== void 0 ? _c : (_d = toolsHeaderWrapper.current) === null || _d === void 0 ? void 0 : _d.innerText;
81
+ /* istanbul ignore next: performance marks do not work in JSDOM */
82
+ const headerText = (_c = (_b = (_a = toolsHeaderPerformanceMarkRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${headerStyles['heading-text']}`)) === null || _b === void 0 ? void 0 : _b.innerText) !== null && _c !== void 0 ? _c : (_d = toolsHeaderPerformanceMarkRef.current) === null || _d === void 0 ? void 0 : _d.innerText;
83
83
  return {
84
84
  loading: loading !== null && loading !== void 0 ? loading : false,
85
85
  header: headerText,
@@ -206,11 +206,10 @@ const InternalTable = React.forwardRef((_a, ref) => {
206
206
  columnDefinitions: visibleColumnDefinitions,
207
207
  numRows: allItems === null || allItems === void 0 ? void 0 : allItems.length,
208
208
  });
209
- const toolsHeaderWrapper = useRef(null);
209
+ const toolsHeaderPerformanceMarkRef = useRef(null);
210
210
  // If is mobile, we take into consideration the AppLayout's mobile bar and we subtract the tools wrapper height so only the table header is sticky
211
- const toolsHeaderHeight = (toolsHeaderWrapper === null || toolsHeaderWrapper === void 0 ? void 0 : toolsHeaderWrapper.current)
212
- ? getLogicalBoundingClientRect(toolsHeaderWrapper.current).blockSize
213
- : 0;
211
+ const [toolsHeaderHeight, toolsHeaderWrapperMeasureRef] = useContainerQuery(rect => rect.borderBoxHeight);
212
+ const toolsHeaderWrapper = useMergeRefs(toolsHeaderPerformanceMarkRef, toolsHeaderWrapperMeasureRef);
214
213
  const colIndexOffset = selectionType ? 1 : 0;
215
214
  const totalColumnsCount = visibleColumnDefinitions.length + colIndexOffset;
216
215
  return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
@@ -223,7 +222,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
223
222
  stickyHeader && (React.createElement(StickyHeader, { ref: stickyHeaderRef, variant: computedVariant, theadProps: theadProps, wrapperRef: wrapperRefObject, theadRef: theadRef, secondaryWrapperRef: secondaryWrapperRef, tableRef: tableRefObject, onScroll: handleScroll, tableHasHeader: hasHeader, contentDensity: contentDensity, tableRole: tableRole }))), disableHeaderPaddings: true, disableContentPaddings: true, variant: toContainerVariant(computedVariant), __disableFooterPaddings: true, __disableFooterDivider: true, __disableStickyMobile: false, footer: hasFooter ? (React.createElement("div", { className: clsx(styles['footer-wrapper'], styles[`variant-${computedVariant}`]) },
224
223
  React.createElement("div", { className: clsx(styles.footer, hasFooterPagination && styles['footer-with-pagination']) },
225
224
  footer && React.createElement("span", null, footer),
226
- hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination)))) : null, __stickyHeader: stickyHeader, __mobileStickyOffset: toolsHeaderHeight, __stickyOffset: stickyHeaderVerticalOffset }, focusMarkers.root),
225
+ hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination)))) : null, __stickyHeader: stickyHeader, __mobileStickyOffset: toolsHeaderHeight !== null && toolsHeaderHeight !== void 0 ? toolsHeaderHeight : 0, __stickyOffset: stickyHeaderVerticalOffset }, focusMarkers.root),
227
226
  React.createElement("div", Object.assign({ ref: wrapperRef, className: clsx(styles.wrapper, styles[`variant-${computedVariant}`], {
228
227
  [styles['has-footer']]: hasFooter,
229
228
  [styles['has-header']]: hasHeader,