@cloudscape-design/components-themeable 3.0.697 → 3.0.699
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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss +4 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +16 -15
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +30 -26
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +16 -15
- package/lib/internal/template/internal/components/tooltip/index.d.ts +3 -2
- package/lib/internal/template/internal/components/tooltip/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/tooltip/index.js +6 -3
- package/lib/internal/template/internal/components/tooltip/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/package.json +1 -1
|
@@ -146,6 +146,10 @@
|
|
|
146
146
|
margin-block-end: awsui.$space-content-header-padding-bottom;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
+
.content {
|
|
150
|
+
display: contents;
|
|
151
|
+
}
|
|
152
|
+
|
|
149
153
|
/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
|
|
150
154
|
.unfocusable-mobile * {
|
|
151
155
|
visibility: hidden;
|
|
@@ -24,7 +24,7 @@ export function SkeletonLayout({ style, notifications, contentHeader, content, n
|
|
|
24
24
|
notifications,
|
|
25
25
|
React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
|
|
26
26
|
contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
|
|
27
|
-
React.createElement("div", { className: testutilStyles.content }, content)),
|
|
27
|
+
React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
|
|
28
28
|
bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom'], !splitPanelOpen && styles['split-panel-hidden']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
|
|
29
29
|
sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
|
|
30
30
|
tools && React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden']) }, tools)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,uBAAuB,GAA8B,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AA0B3F,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,WAAW,EACX,eAAe,EACf,sBAAsB,GACF;IACpB,MAAM,UAAU,GAAG,eAAe,KAAK,MAAM,CAAC,SAAS,IAAI,eAAe,KAAK,MAAM,CAAC,gBAAgB,CAAC;IACvG,MAAM,YAAY,GAAG,cAAc,IAAI,SAAS,CAAC;IACjD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE;YAChD,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvF,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,WAAW,KAAK,WAAW;SACvE,CAAC,EACF,KAAK,EAAE;YACL,YAAY,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC3F,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE;YACrG,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;YACxD,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,GAAG,UAAU,IAAI;SAC/C;QAEA,UAAU,IAAI,CACb,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAC1C,IAEA,UAAU,CACP,CACP;QACA,OAAO;QACR,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,YAAY,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;YACzF,aAAa;YACd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK;gBAC3G,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa,CAAO;gBACjF,6BAAK,SAAS,EAAE,cAAc,CAAC,OAAO,IAAG,OAAO,CAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.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 from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n extends Pick<\n AppLayoutPropsWithDefaults,\n | 'notifications'\n | 'contentHeader'\n | 'content'\n | 'contentType'\n | 'maxContentWidth'\n | 'disableContentPaddings'\n | 'navigation'\n | 'navigationOpen'\n | 'navigationWidth'\n | 'tools'\n | 'toolsOpen'\n | 'toolsWidth'\n | 'placement'\n > {\n style?: React.CSSProperties;\n toolbar?: React.ReactNode;\n splitPanelOpen?: boolean;\n sideSplitPanel?: React.ReactNode;\n bottomSplitPanel?: React.ReactNode;\n}\n\nexport function SkeletonLayout({\n style,\n notifications,\n contentHeader,\n content,\n navigation,\n navigationOpen,\n navigationWidth,\n tools,\n toolsOpen,\n toolsWidth,\n toolbar,\n sideSplitPanel,\n bottomSplitPanel,\n splitPanelOpen,\n placement,\n contentType,\n maxContentWidth,\n disableContentPaddings,\n}: SkeletonLayoutProps) {\n const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n const anyPanelOpen = navigationOpen || toolsOpen;\n return (\n <div\n className={clsx(styles.root, testutilStyles.root, {\n [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n })}\n style={{\n minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n [customCssProps.navigationWidth]: `${navigationWidth}px`,\n [customCssProps.toolsWidth]: `${toolsWidth}px`,\n }}\n >\n {navigation && (\n <div\n className={clsx(\n styles.navigation,\n !navigationOpen && styles['panel-hidden'],\n toolsOpen && styles['unfocusable-mobile']\n )}\n >\n {navigation}\n </div>\n )}\n {toolbar}\n <main className={clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile'])}>\n {notifications}\n <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })} style={style}>\n {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n </div>\n {bottomSplitPanel && (\n <div\n className={clsx(styles['split-panel-bottom'], !splitPanelOpen && styles['split-panel-hidden'])}\n style={{ insetBlockEnd: placement.insetBlockEnd }}\n >\n {bottomSplitPanel}\n </div>\n )}\n </main>\n {sideSplitPanel && (\n <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n {sideSplitPanel}\n </div>\n )}\n {tools && <div className={clsx(styles.tools, !toolsOpen && styles['panel-hidden'])}>{tools}</div>}\n </div>\n );\n}\n"]}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"has-adaptive-widths-default": "awsui_has-adaptive-widths-
|
|
6
|
-
"has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-
|
|
7
|
-
"navigation": "
|
|
8
|
-
"tools": "
|
|
9
|
-
"split-panel-side": "awsui_split-panel-
|
|
10
|
-
"split-panel-bottom": "awsui_split-panel-
|
|
11
|
-
"panel-hidden": "awsui_panel-
|
|
12
|
-
"toolbar-container": "awsui_toolbar-
|
|
13
|
-
"notifications-container": "awsui_notifications-
|
|
14
|
-
"main-landmark": "awsui_main-
|
|
15
|
-
"main": "
|
|
16
|
-
"main-disable-paddings": "awsui_main-disable-
|
|
17
|
-
"content-header": "awsui_content-
|
|
18
|
-
"
|
|
4
|
+
"root": "awsui_root_7nfqu_ly301_101",
|
|
5
|
+
"has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_ly301_150",
|
|
6
|
+
"has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_ly301_165",
|
|
7
|
+
"navigation": "awsui_navigation_7nfqu_ly301_180",
|
|
8
|
+
"tools": "awsui_tools_7nfqu_ly301_181",
|
|
9
|
+
"split-panel-side": "awsui_split-panel-side_7nfqu_ly301_205",
|
|
10
|
+
"split-panel-bottom": "awsui_split-panel-bottom_7nfqu_ly301_211",
|
|
11
|
+
"panel-hidden": "awsui_panel-hidden_7nfqu_ly301_224",
|
|
12
|
+
"toolbar-container": "awsui_toolbar-container_7nfqu_ly301_228",
|
|
13
|
+
"notifications-container": "awsui_notifications-container_7nfqu_ly301_234",
|
|
14
|
+
"main-landmark": "awsui_main-landmark_7nfqu_ly301_241",
|
|
15
|
+
"main": "awsui_main_7nfqu_ly301_241",
|
|
16
|
+
"main-disable-paddings": "awsui_main-disable-paddings_7nfqu_ly301_250",
|
|
17
|
+
"content-header": "awsui_content-header_7nfqu_ly301_260",
|
|
18
|
+
"content": "awsui_content_7nfqu_ly301_260",
|
|
19
|
+
"unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_ly301_269"
|
|
19
20
|
};
|
|
20
21
|
|
|
@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
98
98
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
99
|
SPDX-License-Identifier: Apache-2.0
|
|
100
100
|
*/
|
|
101
|
-
.
|
|
101
|
+
.awsui_root_7nfqu_ly301_101:not(#\9) {
|
|
102
102
|
border-collapse: separate;
|
|
103
103
|
border-spacing: 0;
|
|
104
104
|
box-sizing: border-box;
|
|
@@ -141,45 +141,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
141
141
|
grid-template-rows: min-content min-content 1fr;
|
|
142
142
|
}
|
|
143
143
|
@media (min-width: 689px) {
|
|
144
|
-
.
|
|
144
|
+
.awsui_root_7nfqu_ly301_101:not(#\9) {
|
|
145
145
|
grid-template-areas: "navigation toolbar toolbar toolbar toolbar tools" "navigation . notifications . sideSplitPanel tools" "navigation . main . sideSplitPanel tools";
|
|
146
146
|
grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-sin989, 40px), 1fr) minmax(0, var(--awsui-max-content-width-9rhwr5)) minmax(var(--space-layout-content-horizontal-sin989, 40px), 1fr) min-content min-content;
|
|
147
147
|
grid-template-rows: min-content min-content 1fr min-content;
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
@media (min-width: 689px) and (min-width: 1401px) {
|
|
151
|
-
.
|
|
151
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-default_7nfqu_ly301_150:not(#\9) {
|
|
152
152
|
--awsui-max-content-width-9rhwr5: 1280px;
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
@media (min-width: 689px) and (min-width: 1921px) {
|
|
156
|
-
.
|
|
156
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-default_7nfqu_ly301_150:not(#\9) {
|
|
157
157
|
--awsui-max-content-width-9rhwr5: 1440px;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
@media (min-width: 689px) and (min-width: 2541px) {
|
|
161
|
-
.
|
|
161
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-default_7nfqu_ly301_150:not(#\9) {
|
|
162
162
|
--awsui-max-content-width-9rhwr5: 1620px;
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
@media (min-width: 689px) and (min-width: 1401px) {
|
|
166
|
-
.
|
|
166
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-dashboard_7nfqu_ly301_165:not(#\9) {
|
|
167
167
|
--awsui-max-content-width-9rhwr5: 1280px;
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
@media (min-width: 689px) and (min-width: 1921px) {
|
|
171
|
-
.
|
|
171
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-dashboard_7nfqu_ly301_165:not(#\9) {
|
|
172
172
|
--awsui-max-content-width-9rhwr5: 1620px;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
@media (min-width: 689px) and (min-width: 2541px) {
|
|
176
|
-
.
|
|
176
|
+
.awsui_root_7nfqu_ly301_101.awsui_has-adaptive-widths-dashboard_7nfqu_ly301_165:not(#\9) {
|
|
177
177
|
--awsui-max-content-width-9rhwr5: 2160px;
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
.
|
|
182
|
-
.
|
|
181
|
+
.awsui_navigation_7nfqu_ly301_180:not(#\9),
|
|
182
|
+
.awsui_tools_7nfqu_ly301_181:not(#\9) {
|
|
183
183
|
grid-row: 1/-1;
|
|
184
184
|
grid-column: 1/-1;
|
|
185
185
|
background: var(--color-background-container-content-il2pe5, #ffffff);
|
|
@@ -187,7 +187,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
@media (min-width: 689px) {
|
|
190
|
-
.
|
|
190
|
+
.awsui_navigation_7nfqu_ly301_180:not(#\9) {
|
|
191
191
|
grid-area: navigation;
|
|
192
192
|
inline-size: var(--awsui-navigation-width-9rhwr5);
|
|
193
193
|
border-inline-end: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
|
|
@@ -195,7 +195,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
@media (min-width: 689px) {
|
|
198
|
-
.
|
|
198
|
+
.awsui_tools_7nfqu_ly301_181:not(#\9) {
|
|
199
199
|
grid-area: tools;
|
|
200
200
|
inline-size: var(--awsui-tools-width-9rhwr5);
|
|
201
201
|
border-inline-start: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
|
|
@@ -203,13 +203,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
@media (min-width: 689px) {
|
|
206
|
-
.awsui_split-panel-
|
|
206
|
+
.awsui_split-panel-side_7nfqu_ly301_205:not(#\9) {
|
|
207
207
|
grid-area: sideSplitPanel;
|
|
208
208
|
border-inline-start: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
211
|
|
|
212
|
-
.awsui_split-panel-
|
|
212
|
+
.awsui_split-panel-bottom_7nfqu_ly301_211:not(#\9) {
|
|
213
213
|
position: sticky;
|
|
214
214
|
z-index: 840;
|
|
215
215
|
align-self: end;
|
|
@@ -217,57 +217,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
217
217
|
grid-column: 1/-1;
|
|
218
218
|
}
|
|
219
219
|
@media (min-width: 689px) {
|
|
220
|
-
.awsui_split-panel-
|
|
220
|
+
.awsui_split-panel-bottom_7nfqu_ly301_211:not(#\9) {
|
|
221
221
|
grid-column: 2/span 3;
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
.awsui_panel-
|
|
225
|
+
.awsui_panel-hidden_7nfqu_ly301_224:not(#\9) {
|
|
226
226
|
display: none;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
.awsui_toolbar-
|
|
229
|
+
.awsui_toolbar-container_7nfqu_ly301_228:not(#\9) {
|
|
230
230
|
grid-area: toolbar;
|
|
231
231
|
block-size: 48px;
|
|
232
232
|
border-block-end: 1px solid var(--color-border-divider-panel-bottom-sc2k0v, rgba(0, 28, 36, 0.15));
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.awsui_notifications-
|
|
235
|
+
.awsui_notifications-container_7nfqu_ly301_234:not(#\9) {
|
|
236
236
|
grid-area: notifications;
|
|
237
237
|
}
|
|
238
|
-
.awsui_notifications-
|
|
238
|
+
.awsui_notifications-container_7nfqu_ly301_234:not(#\9):not(:empty) {
|
|
239
239
|
padding-block-start: var(--space-scaled-xs-x91h81, 8px);
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
.awsui_main-
|
|
242
|
+
.awsui_main-landmark_7nfqu_ly301_241:not(#\9) {
|
|
243
243
|
display: contents;
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
-
.
|
|
246
|
+
.awsui_main_7nfqu_ly301_241:not(#\9) {
|
|
247
247
|
grid-area: main;
|
|
248
248
|
margin-block-start: var(--space-scaled-s-9q8n2q, 12px);
|
|
249
249
|
margin-block-end: var(--space-layout-content-bottom-ve4osc, 20px);
|
|
250
250
|
}
|
|
251
|
-
.awsui_main-disable-
|
|
251
|
+
.awsui_main-disable-paddings_7nfqu_ly301_250:not(#\9) {
|
|
252
252
|
grid-column: 1/-1;
|
|
253
253
|
margin-block: 0;
|
|
254
254
|
}
|
|
255
255
|
@media (min-width: 689px) {
|
|
256
|
-
.awsui_main-disable-
|
|
256
|
+
.awsui_main-disable-paddings_7nfqu_ly301_250:not(#\9) {
|
|
257
257
|
grid-column: 2/span 3;
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
260
|
|
|
261
|
-
.awsui_content-
|
|
261
|
+
.awsui_content-header_7nfqu_ly301_260:not(#\9) {
|
|
262
262
|
margin-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
|
|
263
263
|
}
|
|
264
264
|
|
|
265
|
+
.awsui_content_7nfqu_ly301_260:not(#\9) {
|
|
266
|
+
display: contents;
|
|
267
|
+
}
|
|
268
|
+
|
|
265
269
|
/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
|
|
266
|
-
.awsui_unfocusable-
|
|
270
|
+
.awsui_unfocusable-mobile_7nfqu_ly301_269 *:not(#\9) {
|
|
267
271
|
visibility: hidden;
|
|
268
272
|
}
|
|
269
273
|
@media (min-width: 689px) {
|
|
270
|
-
.awsui_unfocusable-
|
|
274
|
+
.awsui_unfocusable-mobile_7nfqu_ly301_269 *:not(#\9) {
|
|
271
275
|
visibility: visible;
|
|
272
276
|
}
|
|
273
277
|
}
|
package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js
CHANGED
|
@@ -2,20 +2,21 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"has-adaptive-widths-default": "awsui_has-adaptive-widths-
|
|
7
|
-
"has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-
|
|
8
|
-
"navigation": "
|
|
9
|
-
"tools": "
|
|
10
|
-
"split-panel-side": "awsui_split-panel-
|
|
11
|
-
"split-panel-bottom": "awsui_split-panel-
|
|
12
|
-
"panel-hidden": "awsui_panel-
|
|
13
|
-
"toolbar-container": "awsui_toolbar-
|
|
14
|
-
"notifications-container": "awsui_notifications-
|
|
15
|
-
"main-landmark": "awsui_main-
|
|
16
|
-
"main": "
|
|
17
|
-
"main-disable-paddings": "awsui_main-disable-
|
|
18
|
-
"content-header": "awsui_content-
|
|
19
|
-
"
|
|
5
|
+
"root": "awsui_root_7nfqu_ly301_101",
|
|
6
|
+
"has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_ly301_150",
|
|
7
|
+
"has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_ly301_165",
|
|
8
|
+
"navigation": "awsui_navigation_7nfqu_ly301_180",
|
|
9
|
+
"tools": "awsui_tools_7nfqu_ly301_181",
|
|
10
|
+
"split-panel-side": "awsui_split-panel-side_7nfqu_ly301_205",
|
|
11
|
+
"split-panel-bottom": "awsui_split-panel-bottom_7nfqu_ly301_211",
|
|
12
|
+
"panel-hidden": "awsui_panel-hidden_7nfqu_ly301_224",
|
|
13
|
+
"toolbar-container": "awsui_toolbar-container_7nfqu_ly301_228",
|
|
14
|
+
"notifications-container": "awsui_notifications-container_7nfqu_ly301_234",
|
|
15
|
+
"main-landmark": "awsui_main-landmark_7nfqu_ly301_241",
|
|
16
|
+
"main": "awsui_main_7nfqu_ly301_241",
|
|
17
|
+
"main-disable-paddings": "awsui_main-disable-paddings_7nfqu_ly301_250",
|
|
18
|
+
"content-header": "awsui_content-header_7nfqu_ly301_260",
|
|
19
|
+
"content": "awsui_content_7nfqu_ly301_260",
|
|
20
|
+
"unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_ly301_269"
|
|
20
21
|
};
|
|
21
22
|
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface TooltipProps {
|
|
3
|
-
value:
|
|
3
|
+
value: React.ReactNode;
|
|
4
4
|
trackRef: React.RefObject<HTMLElement | SVGElement>;
|
|
5
|
+
trackKey?: string | number;
|
|
5
6
|
position?: 'top' | 'right' | 'bottom' | 'left';
|
|
6
7
|
className?: string;
|
|
7
8
|
contentAttributes?: React.HTMLAttributes<HTMLDivElement>;
|
|
8
9
|
}
|
|
9
|
-
export default function Tooltip({ value, trackRef, className, contentAttributes, position, }: TooltipProps): JSX.Element;
|
|
10
|
+
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes, position, }: TooltipProps): JSX.Element;
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,iBAAsB,EACtB,QAAgB,GACjB,EAAE,YAAY,eAgCd"}
|
|
@@ -8,10 +8,13 @@ import PopoverBody from '../../../popover/body';
|
|
|
8
8
|
import Portal from '../portal';
|
|
9
9
|
import popoverStyles from '../../../popover/styles.css.js';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
|
-
export default function Tooltip({ value, trackRef, className, contentAttributes = {}, position = 'top', }) {
|
|
11
|
+
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes = {}, position = 'top', }) {
|
|
12
|
+
if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {
|
|
13
|
+
trackKey = value;
|
|
14
|
+
}
|
|
12
15
|
return (React.createElement(Portal, null,
|
|
13
|
-
React.createElement("div", Object.assign({ className: clsx(styles.root, className) }, contentAttributes),
|
|
14
|
-
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey:
|
|
16
|
+
React.createElement("div", Object.assign({ className: clsx(styles.root, className) }, contentAttributes, { "data-testid": trackKey }),
|
|
17
|
+
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: trackKey, size: "small", fixedWidth: false, position: position, arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
|
|
15
18
|
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
|
|
16
19
|
React.createElement("div", { className: popoverStyles['arrow-inner'] }))) },
|
|
17
20
|
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, onDismiss: undefined, header: undefined }, value)))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,iBAAiB,GAAG,EAAE,EACtB,QAAQ,GAAG,KAAK,GACH;IACb,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,EAAE;QACzE,QAAQ,GAAG,KAAK,CAAC;KAClB;IAED,OAAO,CACL,oBAAC,MAAM;QACL,2CAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,iBAAiB,mBAAe,QAAQ;YACxF,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,IACpG,KAAK,CACM,CACG,CACpB,CACU,CACT,CACC,CACV,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';\n\nimport { Transition } from '../transition';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport Portal from '../portal';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TooltipProps {\n value: React.ReactNode;\n trackRef: React.RefObject<HTMLElement | SVGElement>;\n trackKey?: string | number;\n position?: 'top' | 'right' | 'bottom' | 'left';\n className?: string;\n contentAttributes?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nexport default function Tooltip({\n value,\n trackRef,\n trackKey,\n className,\n contentAttributes = {},\n position = 'top',\n}: TooltipProps) {\n if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {\n trackKey = value;\n }\n\n return (\n <Portal>\n <div className={clsx(styles.root, className)} {...contentAttributes} data-testid={trackKey}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={trackRef}\n trackKey={trackKey}\n size=\"small\"\n fixedWidth={false}\n position={position}\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>\n {value}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n}\n"]}
|