@cloudscape-design/components-themeable 3.0.1127 → 3.0.1128
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/input/styles.scss +62 -9
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +99 -87
- package/lib/internal/scss/internal/styles/forms/mixins.scss +42 -19
- package/lib/internal/template/alert/styles.css.js +27 -27
- package/lib/internal/template/alert/styles.scoped.css +50 -50
- package/lib/internal/template/alert/styles.selectors.js +27 -27
- package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +32 -32
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
- package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
- package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.js +5 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js +3 -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/skeleton-parts.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js +4 -5
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js +8 -3
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.d.ts +20 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.js +19 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.js +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js +7 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/autosuggest/index.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/index.js +3 -2
- package/lib/internal/template/autosuggest/index.js.map +1 -1
- package/lib/internal/template/autosuggest/interfaces.d.ts +4 -0
- package/lib/internal/template/autosuggest/interfaces.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/interfaces.js.map +1 -1
- package/lib/internal/template/autosuggest/internal.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/internal.js +3 -3
- package/lib/internal/template/autosuggest/internal.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
- package/lib/internal/template/button/styles.css.js +22 -22
- package/lib/internal/template/button/styles.scoped.css +256 -256
- package/lib/internal/template/button/styles.selectors.js +22 -22
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +16 -16
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +27 -27
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -16
- package/lib/internal/template/button-group/icon-toggle-button-item.d.ts +2 -2
- package/lib/internal/template/button-group/icon-toggle-button-item.d.ts.map +1 -1
- package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
- package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
- package/lib/internal/template/button-group/interfaces.d.ts +4 -1
- package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button-group/interfaces.js.map +1 -1
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +11 -11
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +27 -27
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/copy-to-clipboard/internal.d.ts.map +1 -1
- package/lib/internal/template/copy-to-clipboard/internal.js +18 -5
- package/lib/internal/template/copy-to-clipboard/internal.js.map +1 -1
- package/lib/internal/template/date-range-picker/dropdown.d.ts +2 -1
- package/lib/internal/template/date-range-picker/dropdown.d.ts.map +1 -1
- package/lib/internal/template/date-range-picker/dropdown.js +2 -2
- package/lib/internal/template/date-range-picker/dropdown.js.map +1 -1
- package/lib/internal/template/date-range-picker/index.d.ts.map +1 -1
- package/lib/internal/template/date-range-picker/index.js +2 -2
- package/lib/internal/template/date-range-picker/index.js.map +1 -1
- package/lib/internal/template/date-range-picker/interfaces.d.ts +6 -0
- package/lib/internal/template/date-range-picker/interfaces.d.ts.map +1 -1
- package/lib/internal/template/date-range-picker/interfaces.js.map +1 -1
- package/lib/internal/template/date-range-picker/relative-range/index.d.ts +2 -1
- package/lib/internal/template/date-range-picker/relative-range/index.d.ts.map +1 -1
- package/lib/internal/template/date-range-picker/relative-range/index.js +4 -1
- package/lib/internal/template/date-range-picker/relative-range/index.js.map +1 -1
- package/lib/internal/template/flashbar/styles.css.js +50 -50
- package/lib/internal/template/flashbar/styles.scoped.css +187 -187
- package/lib/internal/template/flashbar/styles.selectors.js +50 -50
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +73 -73
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/input/index.d.ts.map +1 -1
- package/lib/internal/template/input/index.js +3 -2
- package/lib/internal/template/input/index.js.map +1 -1
- package/lib/internal/template/input/interfaces.d.ts +48 -0
- package/lib/internal/template/input/interfaces.d.ts.map +1 -1
- package/lib/internal/template/input/interfaces.js.map +1 -1
- package/lib/internal/template/input/internal.d.ts.map +1 -1
- package/lib/internal/template/input/internal.js +3 -2
- package/lib/internal/template/input/internal.js.map +1 -1
- package/lib/internal/template/input/styles.css.js +13 -13
- package/lib/internal/template/input/styles.d.ts +3 -0
- package/lib/internal/template/input/styles.d.ts.map +1 -0
- package/lib/internal/template/input/styles.js +42 -0
- package/lib/internal/template/input/styles.js.map +1 -0
- package/lib/internal/template/input/styles.scoped.css +66 -49
- package/lib/internal/template/input/styles.selectors.js +13 -13
- package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts +1 -0
- package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js +5 -2
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/lib/internal/template/internal/analytics/interfaces.d.ts +1 -0
- package/lib/internal/template/internal/analytics/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/interfaces.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +20 -20
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +48 -48
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
- package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +12 -0
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/lib/internal/template/internal/generated/custom-css-properties/index.js +98 -86
- package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +0 -4
- package/lib/internal/template/internal/generated/styles/tokens.js +0 -4
- package/lib/internal/template/internal/generated/theming/index.cjs +0 -84
- package/lib/internal/template/internal/generated/theming/index.js +0 -84
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +103 -103
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/popover/container.d.ts.map +1 -1
- package/lib/internal/template/popover/container.js +2 -5
- package/lib/internal/template/popover/container.js.map +1 -1
- package/lib/internal/template/popover/use-position-observer.d.ts +1 -2
- package/lib/internal/template/popover/use-position-observer.d.ts.map +1 -1
- package/lib/internal/template/popover/use-position-observer.js +10 -8
- package/lib/internal/template/popover/use-position-observer.js.map +1 -1
- package/lib/internal/template/radio-group/styles.css.js +10 -10
- package/lib/internal/template/radio-group/styles.scoped.css +22 -22
- package/lib/internal/template/radio-group/styles.selectors.js +10 -10
- package/lib/internal/template/select/parts/filter.d.ts +1 -1
- package/lib/internal/template/select/parts/filter.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/interfaces.d.ts +4 -0
- package/lib/internal/template/side-navigation/interfaces.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/interfaces.js.map +1 -1
- package/lib/internal/template/side-navigation/parts.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/parts.js +4 -1
- package/lib/internal/template/side-navigation/parts.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +86 -86
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +39 -39
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/test-utils/dom/multiselect/index.d.ts +8 -0
- package/lib/internal/template/test-utils/dom/multiselect/index.js +18 -4
- package/lib/internal/template/test-utils/dom/multiselect/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/multiselect/index.d.ts +8 -0
- package/lib/internal/template/test-utils/selectors/multiselect/index.js +18 -4
- package/lib/internal/template/test-utils/selectors/multiselect/index.js.map +1 -1
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +66 -66
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +23 -23
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/lib/internal/template/toggle-button/internal.d.ts +1 -0
- package/lib/internal/template/toggle-button/internal.d.ts.map +1 -1
- package/lib/internal/template/toggle-button/internal.js +2 -2
- package/lib/internal/template/toggle-button/internal.js.map +1 -1
- package/lib/internal/template/wizard/index.d.ts.map +1 -1
- package/lib/internal/template/wizard/index.js +2 -1
- package/lib/internal/template/wizard/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,22 +3,24 @@
|
|
|
3
3
|
/* istanbul ignore file - Tested with integration tests */
|
|
4
4
|
import { useEffect } from 'react';
|
|
5
5
|
import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
|
|
6
|
-
export default function usePositionObserver(
|
|
6
|
+
export default function usePositionObserver(getTrack, trackKey, callback) {
|
|
7
7
|
const stableCallback = useStableCallback(callback);
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
|
|
9
|
+
const track = getTrack();
|
|
10
|
+
if (!track) {
|
|
10
11
|
return;
|
|
11
12
|
}
|
|
12
13
|
let lastTrackKey = trackKey;
|
|
13
14
|
let lastPosition = {
|
|
14
|
-
x:
|
|
15
|
-
y:
|
|
15
|
+
x: track.getBoundingClientRect().x,
|
|
16
|
+
y: track.getBoundingClientRect().y,
|
|
16
17
|
};
|
|
17
18
|
const observer = new MutationObserver(() => {
|
|
18
|
-
|
|
19
|
+
const track = getTrack();
|
|
20
|
+
if (!track) {
|
|
19
21
|
return;
|
|
20
22
|
}
|
|
21
|
-
const { x, y } =
|
|
23
|
+
const { x, y } = track.getBoundingClientRect();
|
|
22
24
|
// Only trigger the callback when the position changes or the track key changes
|
|
23
25
|
if (x !== lastPosition.x || y !== lastPosition.y || trackKey !== lastTrackKey) {
|
|
24
26
|
lastTrackKey = trackKey;
|
|
@@ -27,13 +29,13 @@ export default function usePositionObserver(triggerRef, trackKey, callback) {
|
|
|
27
29
|
}
|
|
28
30
|
});
|
|
29
31
|
// Observe the entire ownerDocument for DOM changes
|
|
30
|
-
observer.observe(
|
|
32
|
+
observer.observe(track.ownerDocument, {
|
|
31
33
|
attributes: true,
|
|
32
34
|
subtree: true,
|
|
33
35
|
childList: true,
|
|
34
36
|
});
|
|
35
37
|
return () => observer.disconnect();
|
|
36
38
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
37
|
-
}, [
|
|
39
|
+
}, [getTrack, stableCallback]); // trackKey excluded to avoid the observer being recreated everytime the value changes, causing rendering issues for Tooltip
|
|
38
40
|
}
|
|
39
41
|
//# sourceMappingURL=use-position-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-position-observer.js","sourceRoot":"","sources":["../../../src/popover/use-position-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,0DAA0D;AAE1D,
|
|
1
|
+
{"version":3,"file":"use-position-observer.js","sourceRoot":"","sources":["../../../src/popover/use-position-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,0DAA0D;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAOlF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,QAA8B,EAC9B,QAAqC,EACrC,QAAoB;IAEpB,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,IAAI,YAAY,GAAG,QAAQ,CAAC;QAE5B,IAAI,YAAY,GAAW;YACzB,CAAC,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;YAClC,CAAC,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACnC,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO;aACR;YAED,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;YAE/C,+EAA+E;YAC/E,IAAI,CAAC,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,CAAC,CAAC,IAAI,QAAQ,KAAK,YAAY,EAAE;gBAC7E,YAAY,GAAG,QAAQ,CAAC;gBACxB,YAAY,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,CAAC,CAAC;QAEH,mDAAmD;QACnD,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,EAAE;YACpC,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QACnC,uDAAuD;IACzD,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,4HAA4H;AAC9J,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/* istanbul ignore file - Tested with integration tests */\n\nimport { useEffect } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\ninterface Coords {\n x?: number;\n y?: number;\n}\n\nexport default function usePositionObserver(\n getTrack: () => null | Element,\n trackKey: string | number | undefined,\n callback: () => void\n) {\n const stableCallback = useStableCallback(callback);\n\n useEffect(() => {\n const track = getTrack();\n if (!track) {\n return;\n }\n\n let lastTrackKey = trackKey;\n\n let lastPosition: Coords = {\n x: track.getBoundingClientRect().x,\n y: track.getBoundingClientRect().y,\n };\n\n const observer = new MutationObserver(() => {\n const track = getTrack();\n if (!track) {\n return;\n }\n\n const { x, y } = track.getBoundingClientRect();\n\n // Only trigger the callback when the position changes or the track key changes\n if (x !== lastPosition.x || y !== lastPosition.y || trackKey !== lastTrackKey) {\n lastTrackKey = trackKey;\n lastPosition = { x, y };\n stableCallback();\n }\n });\n\n // Observe the entire ownerDocument for DOM changes\n observer.observe(track.ownerDocument, {\n attributes: true,\n subtree: true,\n childList: true,\n });\n\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [getTrack, stableCallback]); // trackKey excluded to avoid the observer being recreated everytime the value changes, causing rendering issues for Tooltip\n}\n"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"radio": "
|
|
6
|
-
"radio--has-description": "awsui_radio--has-
|
|
7
|
-
"radio-control": "awsui_radio-
|
|
8
|
-
"outline": "
|
|
9
|
-
"styled-circle-border": "awsui_styled-circle-
|
|
10
|
-
"styled-circle-disabled": "awsui_styled-circle-
|
|
11
|
-
"styled-circle-readonly": "awsui_styled-circle-
|
|
12
|
-
"styled-circle-fill": "awsui_styled-circle-
|
|
13
|
-
"styled-circle-checked": "awsui_styled-circle-
|
|
4
|
+
"root": "awsui_root_1mabk_qjk5d_145",
|
|
5
|
+
"radio": "awsui_radio_1mabk_qjk5d_178",
|
|
6
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_qjk5d_186",
|
|
7
|
+
"radio-control": "awsui_radio-control_1mabk_qjk5d_190",
|
|
8
|
+
"outline": "awsui_outline_1mabk_qjk5d_198",
|
|
9
|
+
"styled-circle-border": "awsui_styled-circle-border_1mabk_qjk5d_221",
|
|
10
|
+
"styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_qjk5d_225",
|
|
11
|
+
"styled-circle-readonly": "awsui_styled-circle-readonly_1mabk_qjk5d_225",
|
|
12
|
+
"styled-circle-fill": "awsui_styled-circle-fill_1mabk_qjk5d_230",
|
|
13
|
+
"styled-circle-checked": "awsui_styled-circle-checked_1mabk_qjk5d_246"
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_1mabk_qjk5d_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -175,19 +175,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
175
175
|
display: block;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.
|
|
178
|
+
.awsui_radio_1mabk_qjk5d_178:not(#\9) {
|
|
179
179
|
/*used in test-utils*/
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
-
.
|
|
182
|
+
.awsui_radio_1mabk_qjk5d_178 + .awsui_radio_1mabk_qjk5d_178:not(#\9) {
|
|
183
183
|
margin-block-start: var(--space-scaled-xxs-jatbiv, 4px);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.awsui_radio--has-
|
|
186
|
+
.awsui_radio--has-description_1mabk_qjk5d_186 + .awsui_radio_1mabk_qjk5d_178:not(#\9) {
|
|
187
187
|
margin-block-start: var(--space-scaled-xs-sppte9, 8px);
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
-
.awsui_radio-
|
|
190
|
+
.awsui_radio-control_1mabk_qjk5d_190:not(#\9) {
|
|
191
191
|
margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-control-lkpwjy, 14px)) / 2);
|
|
192
192
|
min-block-size: var(--size-control-lkpwjy, 14px);
|
|
193
193
|
min-inline-size: var(--size-control-lkpwjy, 14px);
|
|
@@ -195,15 +195,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
195
195
|
inline-size: var(--size-control-lkpwjy, 14px);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.
|
|
199
|
-
--awsui-style-focus-ring-box-shadow-
|
|
198
|
+
.awsui_outline_1mabk_qjk5d_198:not(#\9) {
|
|
199
|
+
--awsui-style-focus-ring-box-shadow-b75yp7: 0 0 0 var(--awsui-style-focus-ring-border-width-b75yp7, 2px) var(--awsui-style-focus-ring-border-color-b75yp7, var(--color-border-item-focused-r5f6xl, #0073bb));
|
|
200
200
|
position: relative;
|
|
201
201
|
}
|
|
202
|
-
.
|
|
202
|
+
.awsui_outline_1mabk_qjk5d_198:not(#\9) {
|
|
203
203
|
outline: 2px dotted transparent;
|
|
204
204
|
outline-offset: calc(2px - 1px);
|
|
205
205
|
}
|
|
206
|
-
.
|
|
206
|
+
.awsui_outline_1mabk_qjk5d_198:not(#\9)::before {
|
|
207
207
|
content: " ";
|
|
208
208
|
display: block;
|
|
209
209
|
position: absolute;
|
|
@@ -211,46 +211,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
211
211
|
inset-block-start: calc(-1 * 2px);
|
|
212
212
|
inline-size: calc(100% + 2px + 2px);
|
|
213
213
|
block-size: calc(100% + 2px + 2px);
|
|
214
|
-
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-
|
|
215
|
-
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-
|
|
216
|
-
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-
|
|
217
|
-
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-
|
|
218
|
-
box-shadow: var(--awsui-style-focus-ring-box-shadow-
|
|
214
|
+
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
|
|
215
|
+
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
|
|
216
|
+
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
|
|
217
|
+
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-b75yp7, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
|
|
218
|
+
box-shadow: var(--awsui-style-focus-ring-box-shadow-b75yp7);
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
.awsui_styled-circle-
|
|
221
|
+
.awsui_styled-circle-border_1mabk_qjk5d_221:not(#\9) {
|
|
222
222
|
stroke: var(--color-border-control-default-e686ow, #687078);
|
|
223
223
|
fill: var(--color-background-control-default-wjdczs, #ffffff);
|
|
224
224
|
}
|
|
225
|
-
.awsui_styled-circle-
|
|
225
|
+
.awsui_styled-circle-border_1mabk_qjk5d_221.awsui_styled-circle-disabled_1mabk_qjk5d_225:not(#\9), .awsui_styled-circle-border_1mabk_qjk5d_221.awsui_styled-circle-readonly_1mabk_qjk5d_225:not(#\9) {
|
|
226
226
|
fill: var(--color-background-control-disabled-2ixett, #d5dbdb);
|
|
227
227
|
stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
.awsui_styled-circle-
|
|
230
|
+
.awsui_styled-circle-fill_1mabk_qjk5d_230:not(#\9) {
|
|
231
231
|
stroke: var(--color-background-control-checked-se0x0e, #0073bb);
|
|
232
232
|
fill: var(--color-foreground-control-default-rf7v4a, #ffffff);
|
|
233
233
|
opacity: 0;
|
|
234
234
|
transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
|
|
235
235
|
}
|
|
236
236
|
@media (prefers-reduced-motion: reduce) {
|
|
237
|
-
.awsui_styled-circle-
|
|
237
|
+
.awsui_styled-circle-fill_1mabk_qjk5d_230:not(#\9) {
|
|
238
238
|
animation: none;
|
|
239
239
|
transition: none;
|
|
240
240
|
}
|
|
241
241
|
}
|
|
242
|
-
.awsui-motion-disabled .awsui_styled-circle-
|
|
242
|
+
.awsui-motion-disabled .awsui_styled-circle-fill_1mabk_qjk5d_230:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1mabk_qjk5d_230:not(#\9) {
|
|
243
243
|
animation: none;
|
|
244
244
|
transition: none;
|
|
245
245
|
}
|
|
246
|
-
.awsui_styled-circle-
|
|
246
|
+
.awsui_styled-circle-fill_1mabk_qjk5d_230.awsui_styled-circle-checked_1mabk_qjk5d_246:not(#\9) {
|
|
247
247
|
opacity: 1;
|
|
248
248
|
}
|
|
249
|
-
.awsui_styled-circle-
|
|
249
|
+
.awsui_styled-circle-fill_1mabk_qjk5d_230.awsui_styled-circle-disabled_1mabk_qjk5d_225:not(#\9) {
|
|
250
250
|
fill: var(--color-foreground-control-disabled-kj751b, #ffffff);
|
|
251
251
|
stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
|
|
252
252
|
}
|
|
253
|
-
.awsui_styled-circle-
|
|
253
|
+
.awsui_styled-circle-fill_1mabk_qjk5d_230.awsui_styled-circle-readonly_1mabk_qjk5d_225:not(#\9) {
|
|
254
254
|
fill: var(--color-foreground-control-read-only-cgy3yn, #687078);
|
|
255
255
|
stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
|
|
256
256
|
}
|
|
@@ -2,15 +2,15 @@
|
|
|
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
|
-
"radio": "
|
|
7
|
-
"radio--has-description": "awsui_radio--has-
|
|
8
|
-
"radio-control": "awsui_radio-
|
|
9
|
-
"outline": "
|
|
10
|
-
"styled-circle-border": "awsui_styled-circle-
|
|
11
|
-
"styled-circle-disabled": "awsui_styled-circle-
|
|
12
|
-
"styled-circle-readonly": "awsui_styled-circle-
|
|
13
|
-
"styled-circle-fill": "awsui_styled-circle-
|
|
14
|
-
"styled-circle-checked": "awsui_styled-circle-
|
|
5
|
+
"root": "awsui_root_1mabk_qjk5d_145",
|
|
6
|
+
"radio": "awsui_radio_1mabk_qjk5d_178",
|
|
7
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_qjk5d_186",
|
|
8
|
+
"radio-control": "awsui_radio-control_1mabk_qjk5d_190",
|
|
9
|
+
"outline": "awsui_outline_1mabk_qjk5d_198",
|
|
10
|
+
"styled-circle-border": "awsui_styled-circle-border_1mabk_qjk5d_221",
|
|
11
|
+
"styled-circle-disabled": "awsui_styled-circle-disabled_1mabk_qjk5d_225",
|
|
12
|
+
"styled-circle-readonly": "awsui_styled-circle-readonly_1mabk_qjk5d_225",
|
|
13
|
+
"styled-circle-fill": "awsui_styled-circle-fill_1mabk_qjk5d_230",
|
|
14
|
+
"styled-circle-checked": "awsui_styled-circle-checked_1mabk_qjk5d_246"
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -5,6 +5,6 @@ export interface FilterProps extends InternalInputProps {
|
|
|
5
5
|
ref?: React.Ref<HTMLInputElement>;
|
|
6
6
|
filteringType: SelectProps.FilteringType;
|
|
7
7
|
}
|
|
8
|
-
declare const Filter: React.ForwardRefExoticComponent<Pick<FilterProps, "disabled" | "autoComplete" | "autoFocus" | "name" | "className" | "id" | "placeholder" | "inputMode" | "type" | "readOnly" | "step" | "value" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "warning" | "ariaLabel" | "ariaLabelledby" | "ariaDescribedby" | "clearAriaLabel" | "__internalRootRef" | "__injectAnalyticsComponentMetadata" | "__skipNativeAttributesWarnings" | "invalid" | "controlId" | "ariaRequired" | "filteringType" | "nativeInputAttributes" | "disableBrowserAutocorrect" | "spellcheck" | "__leftIcon" | "__leftIconVariant" | "__onLeftIconClick" | "__rightIcon" | "__onRightIconClick" | "__noBorderRadius" | "__onDelayedInput" | "__onBlurWithDetail" | "__inheritFormFieldProps"> & React.RefAttributes<HTMLInputElement>>;
|
|
8
|
+
declare const Filter: React.ForwardRefExoticComponent<Pick<FilterProps, "style" | "disabled" | "autoComplete" | "autoFocus" | "name" | "className" | "id" | "placeholder" | "inputMode" | "type" | "readOnly" | "step" | "value" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "warning" | "ariaLabel" | "ariaLabelledby" | "ariaDescribedby" | "clearAriaLabel" | "__internalRootRef" | "__injectAnalyticsComponentMetadata" | "__skipNativeAttributesWarnings" | "invalid" | "controlId" | "ariaRequired" | "filteringType" | "nativeInputAttributes" | "disableBrowserAutocorrect" | "spellcheck" | "__leftIcon" | "__leftIconVariant" | "__onLeftIconClick" | "__rightIcon" | "__onRightIconClick" | "__noBorderRadius" | "__onDelayedInput" | "__onBlurWithDetail" | "__inheritFormFieldProps"> & React.RefAttributes<HTMLInputElement>>;
|
|
9
9
|
export default Filter;
|
|
10
10
|
//# sourceMappingURL=filter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAsB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAsB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,2yBA0BV,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -43,6 +43,7 @@ export interface SideNavigationProps extends BaseComponentProps {
|
|
|
43
43
|
* The anchor also has the attributes `target="_blank"` and `rel="noopener"`.
|
|
44
44
|
* Additionally, the `activeHref` property won't be modified when a user chooses the link.
|
|
45
45
|
* - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.
|
|
46
|
+
* Note: Deprecated, use i18nStrings.externalIconAriaLabel instead.
|
|
46
47
|
* - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
|
|
47
48
|
* our UX guidelines allow only to add a Badge and/or a "New" label.
|
|
48
49
|
*
|
|
@@ -134,6 +135,9 @@ export declare namespace SideNavigationProps {
|
|
|
134
135
|
text: string;
|
|
135
136
|
href: string;
|
|
136
137
|
external?: boolean;
|
|
138
|
+
/**
|
|
139
|
+
* @deprecated Use i18nStrings.externalIconAriaLabel instead.
|
|
140
|
+
*/
|
|
137
141
|
externalIconAriaLabel?: string;
|
|
138
142
|
info?: React.ReactNode;
|
|
139
143
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE7G,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC;IAEpC;;QAEI;IACJ,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /**\n * Controls the header that appears at the top of the navigation component.\n *\n * It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n */\n header?: SideNavigationProps.Header;\n\n /**\n * A slot located below the header and above the items.\n **/\n itemsControl?: React.ReactNode;\n\n /**\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n *\n * `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n */\n activeHref?: string;\n\n /**\n * Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n *\n * You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n *\n * #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n *\n * #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n *\n * #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### Section Group\n * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n * - `type`: `'section-group'`.\n * - `title` (string) - Specifies the text to display as a title of the section group.\n * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n *\n * #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### ExpandableLinkGroup\n *\n * Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n */\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /**\n * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n *\n * If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n */\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /**\n * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n *\n * - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n *\n * Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n */\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src: string;\n alt?: string;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface SectionGroup {\n type: 'section-group';\n title: string;\n items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;\n }\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n info?: React.ReactNode;\n items: ReadonlyArray<Item>;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;\n\n export interface ChangeDetail {\n item: Section | ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';\n info?: React.ReactNode;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /**\n * Controls the header that appears at the top of the navigation component.\n *\n * It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n */\n header?: SideNavigationProps.Header;\n\n /**\n * A slot located below the header and above the items.\n **/\n itemsControl?: React.ReactNode;\n\n /**\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n *\n * `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n */\n activeHref?: string;\n\n /**\n * Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n *\n * You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n *\n * #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * Note: Deprecated, use i18nStrings.externalIconAriaLabel instead.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n *\n * #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n *\n * #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### Section Group\n * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n * - `type`: `'section-group'`.\n * - `title` (string) - Specifies the text to display as a title of the section group.\n * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n *\n * #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### ExpandableLinkGroup\n *\n * Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n */\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /**\n * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n *\n * If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n */\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /**\n * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n *\n * - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n *\n * Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n */\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src: string;\n alt?: string;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n /**\n * @deprecated Use i18nStrings.externalIconAriaLabel instead.\n */\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface SectionGroup {\n type: 'section-group';\n title: string;\n items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;\n }\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n info?: React.ReactNode;\n items: ReadonlyArray<Item>;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;\n\n export interface ChangeDetail {\n item: Section | ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';\n info?: React.ReactNode;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAcpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,eA+CzE;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACxF;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,GACd,EAAE,wBAAwB,eA8I1B"}
|
|
@@ -5,6 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
6
6
|
import InternalBox from '../box/internal';
|
|
7
7
|
import InternalExpandableSection from '../expandable-section/internal';
|
|
8
|
+
import { useInternalI18n } from '../i18n/context';
|
|
8
9
|
import InternalIcon from '../icon/internal';
|
|
9
10
|
import { isPlainLeftClick } from '../internal/events';
|
|
10
11
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
@@ -119,6 +120,7 @@ function Divider({ variant = 'default', isPresentational = false }) {
|
|
|
119
120
|
function Link({ definition, expanded, activeHref, fireFollow, position }) {
|
|
120
121
|
checkSafeUrl('SideNavigation', definition.href);
|
|
121
122
|
const isActive = definition.href === activeHref;
|
|
123
|
+
const i18n = useInternalI18n('link');
|
|
122
124
|
const onClick = useCallback((event) => {
|
|
123
125
|
if (isPlainLeftClick(event)) {
|
|
124
126
|
fireFollow(definition, event);
|
|
@@ -133,10 +135,11 @@ function Link({ definition, expanded, activeHref, fireFollow, position }) {
|
|
|
133
135
|
position,
|
|
134
136
|
},
|
|
135
137
|
};
|
|
138
|
+
const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', definition.externalIconAriaLabel);
|
|
136
139
|
return (React.createElement(React.Fragment, null,
|
|
137
140
|
React.createElement("a", Object.assign({ href: definition.href, className: clsx(styles.link, { [styles['link-active']]: isActive }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-expanded": expanded, "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick }, getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)),
|
|
138
141
|
React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
|
|
139
|
-
definition.external && (React.createElement("span", { "aria-label":
|
|
142
|
+
definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
|
|
140
143
|
React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] })))),
|
|
141
144
|
definition.info && React.createElement("span", { className: clsx(styles.info, testUtilStyles.info) }, definition.info)));
|
|
142
145
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../../src/side-navigation/parts.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, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { ExpandableSectionProps } from '../expandable-section/interfaces';\nimport InternalExpandableSection from '../expandable-section/internal';\nimport InternalIcon from '../icon/internal';\nimport { isPlainLeftClick, NonCancelableCustomEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataSideNavigationClick } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { hasActiveLink } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface BaseItemComponentProps {\n activeHref?: string;\n fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;\n fireFollow: (\n item:\n | SideNavigationProps.Link\n | SideNavigationProps.Header\n | SideNavigationProps.LinkGroup\n | SideNavigationProps.ExpandableLinkGroup,\n event: React.SyntheticEvent | Event\n ) => void;\n position?: string;\n}\n\ninterface HeaderProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Header;\n}\n\nexport function Header({ definition, activeHref, fireFollow }: HeaderProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n const clickActionAnalyticsMetadata: GeneratedAnalyticsMetadataSideNavigationClick = {\n action: 'click',\n detail: {\n label: `.${analyticsSelectors['header-link-text']}`,\n external: 'false',\n href: definition.href,\n position: 'header',\n },\n };\n\n return (\n <>\n <h2 className={styles.header}>\n <a\n href={definition.href}\n className={clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo })}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n {...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)}\n >\n {definition.logo && (\n <img\n className={clsx(styles['header-logo'], {\n [styles['header-logo--stretched']]: !definition.text,\n })}\n {...definition.logo}\n />\n )}\n <span className={clsx(styles['header-link-text'], analyticsSelectors['header-link-text'])}>\n {definition.text}\n </span>\n </a>\n </h2>\n <Divider isPresentational={true} variant=\"header\" />\n </>\n );\n}\n\ninterface NavigationItemsListProps extends BaseItemComponentProps {\n items: ReadonlyArray<SideNavigationProps.Item>;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\ninterface Item {\n element?: ReactNode;\n listVariant?: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n items?: Array<Item>;\n}\n\nexport function NavigationItemsList({\n items,\n variant,\n activeHref,\n fireChange,\n fireFollow,\n position = '',\n}: NavigationItemsListProps) {\n const lists: Array<Item> = [];\n let currentListIndex = 0;\n lists[currentListIndex] = {\n listVariant: variant,\n items: [],\n };\n\n items.forEach((item, index) => {\n const itemid = index + 1;\n const itemPosition = `${position ? `${position},` : ''}${itemid}`;\n switch (item.type) {\n case 'divider': {\n const dividerIndex = lists.length;\n lists[dividerIndex] = {\n element: (\n <div data-itemid={`item-${itemid}`}>\n <Divider variant=\"default\" />\n </div>\n ),\n };\n currentListIndex = lists.length;\n lists[currentListIndex] = {\n listVariant: variant,\n items: [],\n };\n return;\n }\n case 'link': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <Link\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'section': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <Section\n definition={item}\n activeHref={activeHref}\n variant={variant}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'section-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <SectionGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'link-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <LinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'expandable-link-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <ExpandableLinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n variant={variant}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n }\n });\n\n return (\n <>\n {lists.map((list, index) => {\n if (!list.items || list.items.length === 0) {\n return (\n <div\n key={`hr-${index}`}\n className={clsx(styles.list, styles[`list-variant-${variant}`], {\n [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,\n })}\n >\n {list.element}\n </div>\n );\n } else {\n return (\n <ul\n key={`list-${index}`}\n className={clsx(styles.list, styles[`list-variant-${list.listVariant}`], {\n [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,\n })}\n >\n {list.items.map(item => item.element)}\n </ul>\n );\n }\n })}\n </>\n );\n}\n\ninterface DividerProps {\n variant: 'default' | 'header';\n isPresentational?: boolean;\n}\n\nfunction Divider({ variant = 'default', isPresentational = false }: DividerProps) {\n return (\n <hr\n className={clsx(styles.divider, styles[`divider-${variant}`])}\n role={isPresentational ? 'presentation' : undefined}\n />\n );\n}\n\ninterface LinkProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Link;\n expanded?: boolean;\n}\n\nfunction Link({ definition, expanded, activeHref, fireFollow, position }: LinkProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const isActive = definition.href === activeHref;\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n const clickActionAnalyticsMetadata: GeneratedAnalyticsMetadataSideNavigationClick = {\n action: 'click',\n detail: {\n label: `.${analyticsSelectors['link-text']}`,\n external: `${!!definition.external}`,\n href: definition.href,\n position,\n },\n };\n\n return (\n <>\n <a\n href={definition.href}\n className={clsx(styles.link, { [styles['link-active']]: isActive })}\n target={definition.external ? '_blank' : undefined}\n rel={definition.external ? 'noopener noreferrer' : undefined}\n aria-expanded={expanded}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n {...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)}\n >\n <span className={analyticsSelectors['link-text']}>{definition.text}</span>\n {definition.external && (\n <span\n aria-label={definition.externalIconAriaLabel}\n role={definition.externalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" className={styles['external-icon']} />\n </span>\n )}\n </a>\n {definition.info && <span className={clsx(styles.info, testUtilStyles.info)}>{definition.info}</span>}\n </>\n );\n}\n\ninterface SectionProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Section;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction Section({ definition, activeHref, fireFollow, fireChange, variant, position }: SectionProps) {\n const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);\n const isVisualRefresh = useVisualRefresh();\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n useEffect(() => {\n setExpanded(definition.defaultExpanded ?? true);\n }, [definition]);\n\n return (\n <InternalExpandableSection\n variant=\"footer\"\n expanded={expanded}\n onChange={onExpandedChange}\n className={clsx(\n styles.section,\n variant === 'section-group' && styles['section--no-ident'],\n isVisualRefresh && styles.refresh\n )}\n headerText={definition.text}\n >\n <NavigationItemsList\n variant=\"section\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </InternalExpandableSection>\n );\n}\n\ninterface SectionGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.SectionGroup;\n}\n\nfunction SectionGroup({ definition, activeHref, fireFollow, fireChange, position }: SectionGroupProps) {\n return (\n <div className={styles['section-group']}>\n <InternalBox className={styles['section-group-title']} variant=\"h3\">\n {definition.title}\n </InternalBox>\n <NavigationItemsList\n variant=\"section-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </div>\n );\n}\n\ninterface LinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.LinkGroup;\n}\n\nfunction LinkGroup({ definition, activeHref, fireFollow, fireChange, position }: LinkGroupProps) {\n checkSafeUrl('SideNavigation', definition.href);\n\n return (\n <>\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text, info: definition.info }}\n fireFollow={(_, event) => fireFollow(definition, event)}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n <NavigationItemsList\n variant=\"link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </>\n );\n}\n\ninterface ExpandableLinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.ExpandableLinkGroup;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction ExpandableLinkGroup({\n definition,\n fireFollow,\n fireChange,\n activeHref,\n variant,\n position,\n}: ExpandableLinkGroupProps) {\n // Check whether the definition contains an active link and memoize it to avoid\n // rechecking every time.\n const containsActiveLink = useMemo(() => {\n return activeHref ? hasActiveLink(definition.items, activeHref) : false;\n }, [activeHref, definition.items]);\n\n const [expanded, setExpanded] = useState<boolean>(() => {\n return definition.defaultExpanded ?? (definition.href === activeHref || containsActiveLink);\n });\n\n const [userExpanded, setUserExpanded] = useState<boolean | undefined>();\n\n // Reset user expansion status when the items property is updated.\n useEffect(() => setUserExpanded(undefined), [definition]);\n\n // By default, the expandable section is open when there's an active link inside.\n useEffect(() => {\n setExpanded(definition.href === activeHref || containsActiveLink);\n }, [definition.href, containsActiveLink, activeHref]);\n\n // If the definition object itself is updated, reset the expansion state to default.\n useEffect(() => {\n if (definition.defaultExpanded !== undefined) {\n setExpanded(definition.defaultExpanded);\n }\n }, [definition]);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setUserExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n const onHeaderFollow: LinkProps['fireFollow'] = (_, event) => {\n fireFollow(definition, event);\n setUserExpanded(true);\n if (!expanded) {\n fireChange(definition, true);\n }\n };\n\n return (\n <InternalExpandableSection\n className={clsx(\n styles['expandable-link-group'],\n variant === 'section-group' && styles['expandable-link-group--no-ident']\n )}\n variant=\"navigation\"\n expanded={userExpanded ?? expanded}\n onChange={onExpandedChange}\n headerText={\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n expanded={userExpanded ?? expanded}\n fireFollow={onHeaderFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n }\n >\n <NavigationItemsList\n variant=\"expandable-link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </InternalExpandableSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../../src/side-navigation/parts.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, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { ExpandableSectionProps } from '../expandable-section/interfaces';\nimport InternalExpandableSection from '../expandable-section/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { isPlainLeftClick, NonCancelableCustomEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataSideNavigationClick } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { hasActiveLink } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface BaseItemComponentProps {\n activeHref?: string;\n fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;\n fireFollow: (\n item:\n | SideNavigationProps.Link\n | SideNavigationProps.Header\n | SideNavigationProps.LinkGroup\n | SideNavigationProps.ExpandableLinkGroup,\n event: React.SyntheticEvent | Event\n ) => void;\n position?: string;\n}\n\ninterface HeaderProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Header;\n}\n\nexport function Header({ definition, activeHref, fireFollow }: HeaderProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n const clickActionAnalyticsMetadata: GeneratedAnalyticsMetadataSideNavigationClick = {\n action: 'click',\n detail: {\n label: `.${analyticsSelectors['header-link-text']}`,\n external: 'false',\n href: definition.href,\n position: 'header',\n },\n };\n\n return (\n <>\n <h2 className={styles.header}>\n <a\n href={definition.href}\n className={clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo })}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n {...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)}\n >\n {definition.logo && (\n <img\n className={clsx(styles['header-logo'], {\n [styles['header-logo--stretched']]: !definition.text,\n })}\n {...definition.logo}\n />\n )}\n <span className={clsx(styles['header-link-text'], analyticsSelectors['header-link-text'])}>\n {definition.text}\n </span>\n </a>\n </h2>\n <Divider isPresentational={true} variant=\"header\" />\n </>\n );\n}\n\ninterface NavigationItemsListProps extends BaseItemComponentProps {\n items: ReadonlyArray<SideNavigationProps.Item>;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\ninterface Item {\n element?: ReactNode;\n listVariant?: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n items?: Array<Item>;\n}\n\nexport function NavigationItemsList({\n items,\n variant,\n activeHref,\n fireChange,\n fireFollow,\n position = '',\n}: NavigationItemsListProps) {\n const lists: Array<Item> = [];\n let currentListIndex = 0;\n lists[currentListIndex] = {\n listVariant: variant,\n items: [],\n };\n\n items.forEach((item, index) => {\n const itemid = index + 1;\n const itemPosition = `${position ? `${position},` : ''}${itemid}`;\n switch (item.type) {\n case 'divider': {\n const dividerIndex = lists.length;\n lists[dividerIndex] = {\n element: (\n <div data-itemid={`item-${itemid}`}>\n <Divider variant=\"default\" />\n </div>\n ),\n };\n currentListIndex = lists.length;\n lists[currentListIndex] = {\n listVariant: variant,\n items: [],\n };\n return;\n }\n case 'link': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <Link\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'section': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <Section\n definition={item}\n activeHref={activeHref}\n variant={variant}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'section-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <SectionGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'link-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <LinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n case 'expandable-link-group': {\n lists[currentListIndex].items?.push({\n element: (\n <li key={index} data-itemid={`item-${itemid}`} className={styles['list-item']}>\n <ExpandableLinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n variant={variant}\n position={itemPosition}\n />\n </li>\n ),\n });\n return;\n }\n }\n });\n\n return (\n <>\n {lists.map((list, index) => {\n if (!list.items || list.items.length === 0) {\n return (\n <div\n key={`hr-${index}`}\n className={clsx(styles.list, styles[`list-variant-${variant}`], {\n [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,\n })}\n >\n {list.element}\n </div>\n );\n } else {\n return (\n <ul\n key={`list-${index}`}\n className={clsx(styles.list, styles[`list-variant-${list.listVariant}`], {\n [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,\n })}\n >\n {list.items.map(item => item.element)}\n </ul>\n );\n }\n })}\n </>\n );\n}\n\ninterface DividerProps {\n variant: 'default' | 'header';\n isPresentational?: boolean;\n}\n\nfunction Divider({ variant = 'default', isPresentational = false }: DividerProps) {\n return (\n <hr\n className={clsx(styles.divider, styles[`divider-${variant}`])}\n role={isPresentational ? 'presentation' : undefined}\n />\n );\n}\n\ninterface LinkProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Link;\n expanded?: boolean;\n}\n\nfunction Link({ definition, expanded, activeHref, fireFollow, position }: LinkProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const isActive = definition.href === activeHref;\n const i18n = useInternalI18n('link');\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n const clickActionAnalyticsMetadata: GeneratedAnalyticsMetadataSideNavigationClick = {\n action: 'click',\n detail: {\n label: `.${analyticsSelectors['link-text']}`,\n external: `${!!definition.external}`,\n href: definition.href,\n position,\n },\n };\n\n const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', definition.externalIconAriaLabel);\n\n return (\n <>\n <a\n href={definition.href}\n className={clsx(styles.link, { [styles['link-active']]: isActive })}\n target={definition.external ? '_blank' : undefined}\n rel={definition.external ? 'noopener noreferrer' : undefined}\n aria-expanded={expanded}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n {...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata)}\n >\n <span className={analyticsSelectors['link-text']}>{definition.text}</span>\n {definition.external && (\n <span aria-label={renderedExternalIconAriaLabel} role={renderedExternalIconAriaLabel ? 'img' : undefined}>\n <InternalIcon name=\"external\" className={styles['external-icon']} />\n </span>\n )}\n </a>\n {definition.info && <span className={clsx(styles.info, testUtilStyles.info)}>{definition.info}</span>}\n </>\n );\n}\n\ninterface SectionProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Section;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction Section({ definition, activeHref, fireFollow, fireChange, variant, position }: SectionProps) {\n const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);\n const isVisualRefresh = useVisualRefresh();\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n useEffect(() => {\n setExpanded(definition.defaultExpanded ?? true);\n }, [definition]);\n\n return (\n <InternalExpandableSection\n variant=\"footer\"\n expanded={expanded}\n onChange={onExpandedChange}\n className={clsx(\n styles.section,\n variant === 'section-group' && styles['section--no-ident'],\n isVisualRefresh && styles.refresh\n )}\n headerText={definition.text}\n >\n <NavigationItemsList\n variant=\"section\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </InternalExpandableSection>\n );\n}\n\ninterface SectionGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.SectionGroup;\n}\n\nfunction SectionGroup({ definition, activeHref, fireFollow, fireChange, position }: SectionGroupProps) {\n return (\n <div className={styles['section-group']}>\n <InternalBox className={styles['section-group-title']} variant=\"h3\">\n {definition.title}\n </InternalBox>\n <NavigationItemsList\n variant=\"section-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </div>\n );\n}\n\ninterface LinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.LinkGroup;\n}\n\nfunction LinkGroup({ definition, activeHref, fireFollow, fireChange, position }: LinkGroupProps) {\n checkSafeUrl('SideNavigation', definition.href);\n\n return (\n <>\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text, info: definition.info }}\n fireFollow={(_, event) => fireFollow(definition, event)}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n <NavigationItemsList\n variant=\"link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </>\n );\n}\n\ninterface ExpandableLinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.ExpandableLinkGroup;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction ExpandableLinkGroup({\n definition,\n fireFollow,\n fireChange,\n activeHref,\n variant,\n position,\n}: ExpandableLinkGroupProps) {\n // Check whether the definition contains an active link and memoize it to avoid\n // rechecking every time.\n const containsActiveLink = useMemo(() => {\n return activeHref ? hasActiveLink(definition.items, activeHref) : false;\n }, [activeHref, definition.items]);\n\n const [expanded, setExpanded] = useState<boolean>(() => {\n return definition.defaultExpanded ?? (definition.href === activeHref || containsActiveLink);\n });\n\n const [userExpanded, setUserExpanded] = useState<boolean | undefined>();\n\n // Reset user expansion status when the items property is updated.\n useEffect(() => setUserExpanded(undefined), [definition]);\n\n // By default, the expandable section is open when there's an active link inside.\n useEffect(() => {\n setExpanded(definition.href === activeHref || containsActiveLink);\n }, [definition.href, containsActiveLink, activeHref]);\n\n // If the definition object itself is updated, reset the expansion state to default.\n useEffect(() => {\n if (definition.defaultExpanded !== undefined) {\n setExpanded(definition.defaultExpanded);\n }\n }, [definition]);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setUserExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n const onHeaderFollow: LinkProps['fireFollow'] = (_, event) => {\n fireFollow(definition, event);\n setUserExpanded(true);\n if (!expanded) {\n fireChange(definition, true);\n }\n };\n\n return (\n <InternalExpandableSection\n className={clsx(\n styles['expandable-link-group'],\n variant === 'section-group' && styles['expandable-link-group--no-ident']\n )}\n variant=\"navigation\"\n expanded={userExpanded ?? expanded}\n onChange={onExpandedChange}\n headerText={\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n expanded={userExpanded ?? expanded}\n fireFollow={onHeaderFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n }\n >\n <NavigationItemsList\n variant=\"expandable-link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n position={position}\n />\n </InternalExpandableSection>\n );\n}\n"]}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"slider": "
|
|
6
|
-
"slider-track": "awsui_slider-
|
|
7
|
-
"slider-range": "awsui_slider-
|
|
8
|
-
"disabled": "
|
|
9
|
-
"readonly": "
|
|
10
|
-
"error": "
|
|
11
|
-
"warning": "
|
|
12
|
-
"active": "
|
|
13
|
-
"error-active": "awsui_error-
|
|
14
|
-
"warning-active": "awsui_warning-
|
|
15
|
-
"labels": "
|
|
16
|
-
"labels-noref": "awsui_labels-
|
|
17
|
-
"labels-reference": "awsui_labels-
|
|
18
|
-
"labels-min": "awsui_labels-
|
|
19
|
-
"labels-max": "awsui_labels-
|
|
20
|
-
"labels-aria-description": "awsui_labels-aria-
|
|
21
|
-
"ticks": "
|
|
22
|
-
"ticks-wrapper": "awsui_ticks-
|
|
23
|
-
"tick": "
|
|
24
|
-
"middle": "
|
|
25
|
-
"filled": "
|
|
26
|
-
"tooltip-thumb": "awsui_tooltip-
|
|
27
|
-
"thumb": "
|
|
28
|
-
"min": "
|
|
29
|
-
"max": "
|
|
4
|
+
"root": "awsui_root_pcgz5_1mxeo_153",
|
|
5
|
+
"slider": "awsui_slider_pcgz5_1mxeo_190",
|
|
6
|
+
"slider-track": "awsui_slider-track_pcgz5_1mxeo_194",
|
|
7
|
+
"slider-range": "awsui_slider-range_pcgz5_1mxeo_194",
|
|
8
|
+
"disabled": "awsui_disabled_pcgz5_1mxeo_209",
|
|
9
|
+
"readonly": "awsui_readonly_pcgz5_1mxeo_213",
|
|
10
|
+
"error": "awsui_error_pcgz5_1mxeo_222",
|
|
11
|
+
"warning": "awsui_warning_pcgz5_1mxeo_225",
|
|
12
|
+
"active": "awsui_active_pcgz5_1mxeo_228",
|
|
13
|
+
"error-active": "awsui_error-active_pcgz5_1mxeo_231",
|
|
14
|
+
"warning-active": "awsui_warning-active_pcgz5_1mxeo_234",
|
|
15
|
+
"labels": "awsui_labels_pcgz5_1mxeo_245",
|
|
16
|
+
"labels-noref": "awsui_labels-noref_pcgz5_1mxeo_251",
|
|
17
|
+
"labels-reference": "awsui_labels-reference_pcgz5_1mxeo_254",
|
|
18
|
+
"labels-min": "awsui_labels-min_pcgz5_1mxeo_261",
|
|
19
|
+
"labels-max": "awsui_labels-max_pcgz5_1mxeo_267",
|
|
20
|
+
"labels-aria-description": "awsui_labels-aria-description_pcgz5_1mxeo_275",
|
|
21
|
+
"ticks": "awsui_ticks_pcgz5_1mxeo_293",
|
|
22
|
+
"ticks-wrapper": "awsui_ticks-wrapper_pcgz5_1mxeo_299",
|
|
23
|
+
"tick": "awsui_tick_pcgz5_1mxeo_293",
|
|
24
|
+
"middle": "awsui_middle_pcgz5_1mxeo_314",
|
|
25
|
+
"filled": "awsui_filled_pcgz5_1mxeo_317",
|
|
26
|
+
"tooltip-thumb": "awsui_tooltip-thumb_pcgz5_1mxeo_345",
|
|
27
|
+
"thumb": "awsui_thumb_pcgz5_1mxeo_358",
|
|
28
|
+
"min": "awsui_min_pcgz5_1mxeo_394",
|
|
29
|
+
"max": "awsui_max_pcgz5_1mxeo_397"
|
|
30
30
|
};
|
|
31
31
|
|