@cloudscape-design/components-themeable 3.0.363 → 3.0.365
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/alert/styles.scss +41 -10
- package/lib/internal/scss/breadcrumb-group/item/styles.scss +1 -1
- package/lib/internal/scss/internal/styles/links.scss +2 -0
- package/lib/internal/scss/link/constants.scss +7 -6
- package/lib/internal/template/alert/index.d.ts +3 -2
- package/lib/internal/template/alert/index.d.ts.map +1 -1
- package/lib/internal/template/alert/index.js +4 -3
- package/lib/internal/template/alert/index.js.map +1 -1
- package/lib/internal/template/alert/interfaces.d.ts +6 -0
- package/lib/internal/template/alert/interfaces.d.ts.map +1 -1
- package/lib/internal/template/alert/interfaces.js.map +1 -1
- package/lib/internal/template/alert/internal.d.ts +5 -5
- package/lib/internal/template/alert/internal.d.ts.map +1 -1
- package/lib/internal/template/alert/internal.js +22 -14
- package/lib/internal/template/alert/internal.js.map +1 -1
- package/lib/internal/template/alert/styles.css.js +24 -19
- package/lib/internal/template/alert/styles.scoped.css +72 -35
- package/lib/internal/template/alert/styles.selectors.js +24 -19
- package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +30 -30
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
- package/lib/internal/template/app-layout/visual-refresh/background.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/background.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/background.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/context.d.ts +2 -1
- package/lib/internal/template/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/context.js +9 -11
- package/lib/internal/template/app-layout/visual-refresh/context.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/layout.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/layout.js +3 -11
- package/lib/internal/template/app-layout/visual-refresh/layout.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts +16 -0
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js +41 -0
- package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js.map +1 -0
- package/lib/internal/template/attribute-editor/styles.css.js +14 -14
- package/lib/internal/template/attribute-editor/styles.scoped.css +30 -31
- package/lib/internal/template/attribute-editor/styles.selectors.js +14 -14
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +9 -9
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +21 -21
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +9 -9
- package/lib/internal/template/button/styles.css.js +20 -20
- package/lib/internal/template/button/styles.scoped.css +152 -152
- package/lib/internal/template/button/styles.selectors.js +20 -20
- package/lib/internal/template/cards/index.d.ts.map +1 -1
- package/lib/internal/template/cards/index.js +9 -7
- package/lib/internal/template/cards/index.js.map +1 -1
- package/lib/internal/template/help-panel/index.d.ts.map +1 -1
- package/lib/internal/template/help-panel/index.js +3 -1
- package/lib/internal/template/help-panel/index.js.map +1 -1
- package/lib/internal/template/help-panel/styles.css.js +4 -4
- package/lib/internal/template/help-panel/styles.scoped.css +71 -72
- package/lib/internal/template/help-panel/styles.selectors.js +4 -4
- package/lib/internal/template/internal/base-component/styles.scoped.css +11 -26
- package/lib/internal/template/internal/components/token-list/styles.css.js +9 -9
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +22 -22
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +9 -9
- package/lib/internal/template/internal/context/link-default-variant-context.d.ts +6 -0
- package/lib/internal/template/internal/context/link-default-variant-context.d.ts.map +1 -0
- package/lib/internal/template/internal/context/link-default-variant-context.js +7 -0
- package/lib/internal/template/internal/context/link-default-variant-context.js.map +1 -0
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/generated/theming/index.cjs +0 -40
- package/lib/internal/template/internal/generated/theming/index.js +0 -40
- package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js +1 -9
- package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
- package/lib/internal/template/internal/hooks/container-queries/utils.d.ts +4 -0
- package/lib/internal/template/internal/hooks/container-queries/utils.d.ts.map +1 -0
- package/lib/internal/template/internal/hooks/container-queries/utils.js +10 -0
- package/lib/internal/template/internal/hooks/container-queries/utils.js.map +1 -0
- package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.d.ts +1 -1
- package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.js +11 -5
- package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
- package/lib/internal/template/link/index.d.ts.map +1 -1
- package/lib/internal/template/link/index.js +2 -2
- package/lib/internal/template/link/index.js.map +1 -1
- package/lib/internal/template/link/interfaces.d.ts +7 -0
- package/lib/internal/template/link/interfaces.d.ts.map +1 -1
- package/lib/internal/template/link/interfaces.js.map +1 -1
- package/lib/internal/template/link/internal.d.ts.map +1 -1
- package/lib/internal/template/link/internal.js +4 -1
- package/lib/internal/template/link/internal.js.map +1 -1
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +91 -90
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/popover/internal.d.ts.map +1 -1
- package/lib/internal/template/popover/internal.js +3 -1
- package/lib/internal/template/popover/internal.js.map +1 -1
- package/lib/internal/template/table/internal.d.ts.map +1 -1
- package/lib/internal/template/table/internal.js +58 -56
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/table/sticky-columns/index.d.ts +2 -1
- package/lib/internal/template/table/sticky-columns/index.d.ts.map +1 -1
- package/lib/internal/template/table/sticky-columns/index.js +1 -1
- package/lib/internal/template/table/sticky-columns/index.js.map +1 -1
- package/lib/internal/template/table/sticky-columns/interfaces.d.ts +31 -0
- package/lib/internal/template/table/sticky-columns/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table/sticky-columns/interfaces.js +4 -0
- package/lib/internal/template/table/sticky-columns/interfaces.js.map +1 -0
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts +1 -25
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +18 -51
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
- package/lib/internal/template/table/sticky-columns/utils.d.ts +5 -0
- package/lib/internal/template/table/sticky-columns/utils.d.ts.map +1 -0
- package/lib/internal/template/table/sticky-columns/utils.js +42 -0
- package/lib/internal/template/table/sticky-columns/utils.js.map +1 -0
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +12 -12
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +72 -74
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js +1 -1
- package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map +1 -1
- package/lib/internal/template/tutorial-panel/components/tutorial-list/index.js +1 -1
- package/lib/internal/template/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/lib/internal/template/wizard/wizard-navigation.js +1 -1
- package/lib/internal/template/wizard/wizard-navigation.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-resize-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-resize-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAIrD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAA4B,EAAE,SAA+C;IAC7G,MAAM,eAAe,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAEzD,qIAAqI;IACrI,+GAA+G;IAC/G,iIAAiI;IACjI,eAAe,CACb,GAAG,EAAE;QACH,MAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,0BAA0B,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACzE;IACH,CAAC;IACD,mFAAmF;IACnF,uDAAuD;IACvD,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAC5C,gEAAgE;gBAChE,IAAI,SAAS,EAAE;oBACb,eAAe,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACzD;YACH,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC1B,OAAO,GAAG,EAAE;gBACV,SAAS,GAAG,KAAK,CAAC;gBAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;AACpC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';\nimport React, { useEffect, useLayoutEffect } from 'react';\nimport { useStableEventHandler } from '../use-stable-event-handler';\nimport { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';\nimport { convertResizeObserverEntry } from './utils';\n\ntype ElementReference = (() => Element | null) | React.RefObject<Element>;\n\n/**\n * Attaches resize-observer to the referenced element.\n *\n * Examples:\n * // With React reference\n * const ref = useRef(null)\n * useResizeObserver(ref, (entry) => setState(getWidth(entry)))\n *\n * // With ID reference\n * const getElement = useCallback(() => document.getElementById(id), [id])\n * useResizeObserver(getElement, (entry) => setState(getWidth(entry)))\n *\n * @param elementRef React reference or memoized getter for the target element\n * @param onObserve Function to fire when observation occurs\n */\nexport function useResizeObserver(elementRef: ElementReference, onObserve: (entry: ContainerQueryEntry) => void) {\n const stableOnObserve = useStableEventHandler(onObserve);\n\n // This effect provides a synchronous update required to prevent flakiness when initial state and first observed state are different.\n // Can potentially conflict with React concurrent mode: https://17.reactjs.org/docs/concurrent-mode-intro.html.\n // A possible solution would be to make consumers not render any content until the first (asynchronous) observation is available.\n useLayoutEffect(\n () => {\n const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n if (element) {\n onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));\n }\n },\n // This effect is only needed for the first render to provide a synchronous update.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n useEffect(() => {\n const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n if (element) {\n let connected = true;\n const observer = new ResizeObserver(entries => {\n // Prevent observe notifications on already unmounted component.\n if (connected) {\n stableOnObserve(convertResizeObserverEntry(entries[0]));\n }\n });\n observer.observe(element);\n return () => {\n connected = false;\n observer.disconnect();\n };\n }\n }, [elementRef, stableOnObserve]);\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ResizeObserverEntry } from '@juggle/resize-observer';
|
|
2
|
+
import { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';
|
|
3
|
+
export declare function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry;
|
|
4
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAE3E,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,GAAG,mBAAmB,CAQ1F"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function convertResizeObserverEntry(entry) {
|
|
2
|
+
return {
|
|
3
|
+
target: entry.target,
|
|
4
|
+
contentBoxWidth: entry.contentBoxSize[0].inlineSize,
|
|
5
|
+
contentBoxHeight: entry.contentBoxSize[0].blockSize,
|
|
6
|
+
borderBoxWidth: entry.borderBoxSize[0].inlineSize,
|
|
7
|
+
borderBoxHeight: entry.borderBoxSize[0].blockSize,
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/utils.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,0BAA0B,CAAC,KAA0B;IACnE,OAAO;QACL,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU;QACnD,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU;QACjD,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;KAClD,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserverEntry } from '@juggle/resize-observer';\nimport { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';\n\nexport function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry {\n return {\n target: entry.target,\n contentBoxWidth: entry.contentBoxSize[0].inlineSize,\n contentBoxHeight: entry.contentBoxSize[0].blockSize,\n borderBoxWidth: entry.borderBoxSize[0].inlineSize,\n borderBoxHeight: entry.borderBoxSize[0].blockSize,\n };\n}\n"]}
|
|
@@ -11,5 +11,5 @@ export interface UseDynamicOverlapProps {
|
|
|
11
11
|
* @param props.disabled disables hook if not applicable
|
|
12
12
|
* @returns ref to be measured as overlapping height
|
|
13
13
|
*/
|
|
14
|
-
export declare function useDynamicOverlap(props?: UseDynamicOverlapProps): import("react").
|
|
14
|
+
export declare function useDynamicOverlap(props?: UseDynamicOverlapProps): import("react").MutableRefObject<null>;
|
|
15
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":";AASA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,0CA8B/D"}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useContext, useLayoutEffect } from 'react';
|
|
4
4
|
import { DynamicOverlapContext } from '../../context/dynamic-overlap-context';
|
|
5
|
-
import {
|
|
5
|
+
import { useRef, useCallback } from 'react';
|
|
6
|
+
import { useResizeObserver } from '../container-queries';
|
|
6
7
|
/**
|
|
7
8
|
* Observes the height of an element referenced by the returning ref and sets the value as overlapping
|
|
8
9
|
* height for the surrounding AppLayout component.
|
|
@@ -13,17 +14,22 @@ export function useDynamicOverlap(props) {
|
|
|
13
14
|
var _a;
|
|
14
15
|
const disabled = (_a = props === null || props === void 0 ? void 0 : props.disabled) !== null && _a !== void 0 ? _a : false;
|
|
15
16
|
const setDynamicOverlapHeight = useContext(DynamicOverlapContext);
|
|
16
|
-
const
|
|
17
|
-
|
|
17
|
+
const overlapElementRef = useRef(null);
|
|
18
|
+
const getElement = useCallback(() => overlapElementRef.current, [overlapElementRef]);
|
|
19
|
+
const updateState = useCallback((entry) => {
|
|
18
20
|
if (!disabled) {
|
|
19
|
-
setDynamicOverlapHeight(
|
|
21
|
+
setDynamicOverlapHeight(entry.contentBoxHeight);
|
|
20
22
|
}
|
|
23
|
+
}, [disabled, setDynamicOverlapHeight]);
|
|
24
|
+
useResizeObserver(getElement, updateState);
|
|
25
|
+
useLayoutEffect(function handleDynamicOverlapHeight() {
|
|
26
|
+
// Set overlap height back to 0 when unmounting
|
|
21
27
|
return () => {
|
|
22
28
|
if (!disabled) {
|
|
23
29
|
setDynamicOverlapHeight(0);
|
|
24
30
|
}
|
|
25
31
|
};
|
|
26
|
-
}, [disabled,
|
|
32
|
+
}, [disabled, setDynamicOverlapHeight]);
|
|
27
33
|
return overlapElementRef;
|
|
28
34
|
}
|
|
29
35
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-dynamic-overlap/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAC9D,MAAM,QAAQ,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAC1C,MAAM,uBAAuB,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEvC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACrF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,uBAAuB,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;SACjD;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CACpC,CAAC;IAEF,iBAAiB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE3C,eAAe,CACb,SAAS,0BAA0B;QACjC,+CAA+C;QAC/C,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,QAAQ,EAAE;gBACb,uBAAuB,CAAC,CAAC,CAAC,CAAC;aAC5B;QACH,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CACpC,CAAC;IAEF,OAAO,iBAAiB,CAAC;AAC3B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, useLayoutEffect } from 'react';\n\nimport { DynamicOverlapContext } from '../../context/dynamic-overlap-context';\nimport { useRef, useCallback } from 'react';\nimport { useResizeObserver } from '../container-queries';\nimport { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';\n\nexport interface UseDynamicOverlapProps {\n /**\n * Disables hook if not needed. By default, `false`.\n */\n disabled?: boolean;\n}\n\n/**\n * Observes the height of an element referenced by the returning ref and sets the value as overlapping\n * height for the surrounding AppLayout component.\n * @param props.disabled disables hook if not applicable\n * @returns ref to be measured as overlapping height\n */\nexport function useDynamicOverlap(props?: UseDynamicOverlapProps) {\n const disabled = props?.disabled ?? false;\n const setDynamicOverlapHeight = useContext(DynamicOverlapContext);\n const overlapElementRef = useRef(null);\n\n const getElement = useCallback(() => overlapElementRef.current, [overlapElementRef]);\n const updateState = useCallback(\n (entry: ContainerQueryEntry) => {\n if (!disabled) {\n setDynamicOverlapHeight(entry.contentBoxHeight);\n }\n },\n [disabled, setDynamicOverlapHeight]\n );\n\n useResizeObserver(getElement, updateState);\n\n useLayoutEffect(\n function handleDynamicOverlapHeight() {\n // Set overlap height back to 0 when unmounting\n return () => {\n if (!disabled) {\n setDynamicOverlapHeight(0);\n }\n };\n },\n [disabled, setDynamicOverlapHeight]\n );\n\n return overlapElementRef;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["link/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,QAAA,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["link/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,QAAA,MAAM,IAAI,iFAcT,CAAC;AAGF,eAAe,IAAI,CAAC"}
|
|
@@ -6,9 +6,9 @@ import useBaseComponent from '../internal/hooks/use-base-component';
|
|
|
6
6
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
7
|
import InternalLink from './internal';
|
|
8
8
|
const Link = React.forwardRef((_a, ref) => {
|
|
9
|
-
var {
|
|
9
|
+
var { fontSize = 'body-m', color = 'normal', external = false } = _a, props = __rest(_a, ["fontSize", "color", "external"]);
|
|
10
10
|
const baseComponentProps = useBaseComponent('Link');
|
|
11
|
-
return (React.createElement(InternalLink, Object.assign({
|
|
11
|
+
return (React.createElement(InternalLink, Object.assign({ fontSize: fontSize, color: color, external: external }, props, baseComponentProps, { ref: ref })));
|
|
12
12
|
});
|
|
13
13
|
applyDisplayName(Link, 'Link');
|
|
14
14
|
export default Link;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["link/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AAItC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["link/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AAItC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAgF,EAAE,GAA6B,EAAE,EAAE;QAAnH,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,EAAE,QAAQ,GAAG,KAAK,OAAuB,EAAlB,KAAK,cAAnE,iCAAqE,CAAF;IAClE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACpD,OAAO,CACL,oBAAC,YAAY,kBACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IACd,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/B,eAAe,IAAI,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { LinkProps } from './interfaces';\nimport InternalLink from './internal';\n\nexport { LinkProps };\n\nconst Link = React.forwardRef(\n ({ fontSize = 'body-m', color = 'normal', external = false, ...props }: LinkProps, ref: React.Ref<LinkProps.Ref>) => {\n const baseComponentProps = useBaseComponent('Link');\n return (\n <InternalLink\n fontSize={fontSize}\n color={color}\n external={external}\n {...props}\n {...baseComponentProps}\n ref={ref}\n />\n );\n }\n);\n\napplyDisplayName(Link, 'Link');\nexport default Link;\n"]}
|
|
@@ -11,6 +11,13 @@ export interface LinkProps extends BaseComponentProps {
|
|
|
11
11
|
* This can be used in cases where the interactivity is strongly implied by its context,
|
|
12
12
|
* such as in a table or a list of external links.
|
|
13
13
|
* - `info` - Use for "info" links that link to content in a help panel.
|
|
14
|
+
*
|
|
15
|
+
* The default is `secondary`, except inside the following components where it defaults to `primary`:
|
|
16
|
+
* - Table
|
|
17
|
+
* - Cards
|
|
18
|
+
* - Alert
|
|
19
|
+
* - Popover
|
|
20
|
+
* - Help Panel (main `content` only)
|
|
14
21
|
*/
|
|
15
22
|
variant?: LinkProps.Variant;
|
|
16
23
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC;IAE9B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE1D;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,mBAAmB,CAAC;IAC7E,KAAY,QAAQ,GAChB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;IACd,KAAY,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE1C,KAAY,YAAY,GAAG,oBAAoB,CAAC;IAEhD,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\n\nexport interface LinkProps extends BaseComponentProps {\n /**\n * Determines the visual style of the link as follows:\n * - `primary` - Displays the link text with bold styling for sufficient contrast with surrounding text.\n * Use this for links where the context doesn't imply interactivity such as\n * \"Learn more\" links and links within paragraphs.\n * - `secondary` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).\n * This can be used in cases where the interactivity is strongly implied by its context,\n * such as in a table or a list of external links.\n * - `info` - Use for \"info\" links that link to content in a help panel.\n */\n variant?: LinkProps.Variant;\n\n /**\n * Determines the font size and line height.\n * This property is overridden if the variant is `info`.\n */\n fontSize?: LinkProps.FontSize;\n\n /**\n * Determines the text color of the link and its icon.\n * - `normal`: Use in most cases where a link is required.\n * - `inverted`: Use to style links inside Flashbars.\n *\n * This property is overridden if the variant is `info`.\n */\n color?: LinkProps.Color;\n\n /**\n * Marks the link as external by adding an icon after the text. If `href`\n * is provided, opens the link in a new tab when clicked.\n */\n external?: boolean;\n\n /**\n * Specifies where to open the linked URL. Set this to `_blank` to open the URL\n * in a new tab. If you set this property to `_blank`, the component\n * automatically adds `rel=\"noopener noreferrer\"` to avoid performance\n * and security issues.\n *\n * For other options see the documentation for <a> tag's\n * [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).\n */\n target?: string;\n\n /**\n * The URL that the link points to.\n * If an `href` is not provided, the component will render using a\n * \"button\" role and `target` will not be used.\n */\n href?: string;\n\n /**\n * The text to render inside the link.\n */\n children?: React.ReactNode;\n\n /**\n * Adds an aria-label to the HTML element.\n */\n ariaLabel?: string;\n\n /**\n * Adds an aria-label to the external icon.\n * @i18n\n */\n externalIconAriaLabel?: string;\n\n /**\n * Called when a link is clicked without any modifier keys. If the link has no `href` provided, it will be called on\n * all clicks.\n *\n * If you want to implement client-side routing yourself, use this event and prevent default browser navigation\n * (by calling `preventDefault`).\n */\n onFollow?: CancelableEventHandler<LinkProps.FollowDetail>;\n\n /**\n * Adds a `rel` attribute to the link. If the `rel` property is provided, it overrides the default behaviour.\n * By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `external` is `true` or `target` is `\"_blank\"`.\n */\n rel?: string;\n}\n\nexport namespace LinkProps {\n export type Variant = 'primary' | 'secondary' | 'info' | 'awsui-value-large';\n export type FontSize =\n | 'body-s'\n | 'body-m'\n | 'heading-xs'\n | 'heading-s'\n | 'heading-m'\n | 'heading-l'\n | 'heading-xl'\n | 'display-l'\n | 'inherit';\n export type Color = 'normal' | 'inverted';\n\n export type FollowDetail = BaseNavigationDetail;\n\n export interface Ref {\n /**\n * Sets the browser focus on the anchor element.\n */\n focus(): void;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\n\nexport interface LinkProps extends BaseComponentProps {\n /**\n * Determines the visual style of the link as follows:\n * - `primary` - Displays the link text with bold styling for sufficient contrast with surrounding text.\n * Use this for links where the context doesn't imply interactivity such as\n * \"Learn more\" links and links within paragraphs.\n * - `secondary` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).\n * This can be used in cases where the interactivity is strongly implied by its context,\n * such as in a table or a list of external links.\n * - `info` - Use for \"info\" links that link to content in a help panel.\n *\n * The default is `secondary`, except inside the following components where it defaults to `primary`:\n * - Table\n * - Cards\n * - Alert\n * - Popover\n * - Help Panel (main `content` only)\n */\n variant?: LinkProps.Variant;\n\n /**\n * Determines the font size and line height.\n * This property is overridden if the variant is `info`.\n */\n fontSize?: LinkProps.FontSize;\n\n /**\n * Determines the text color of the link and its icon.\n * - `normal`: Use in most cases where a link is required.\n * - `inverted`: Use to style links inside Flashbars.\n *\n * This property is overridden if the variant is `info`.\n */\n color?: LinkProps.Color;\n\n /**\n * Marks the link as external by adding an icon after the text. If `href`\n * is provided, opens the link in a new tab when clicked.\n */\n external?: boolean;\n\n /**\n * Specifies where to open the linked URL. Set this to `_blank` to open the URL\n * in a new tab. If you set this property to `_blank`, the component\n * automatically adds `rel=\"noopener noreferrer\"` to avoid performance\n * and security issues.\n *\n * For other options see the documentation for <a> tag's\n * [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).\n */\n target?: string;\n\n /**\n * The URL that the link points to.\n * If an `href` is not provided, the component will render using a\n * \"button\" role and `target` will not be used.\n */\n href?: string;\n\n /**\n * The text to render inside the link.\n */\n children?: React.ReactNode;\n\n /**\n * Adds an aria-label to the HTML element.\n */\n ariaLabel?: string;\n\n /**\n * Adds an aria-label to the external icon.\n * @i18n\n */\n externalIconAriaLabel?: string;\n\n /**\n * Called when a link is clicked without any modifier keys. If the link has no `href` provided, it will be called on\n * all clicks.\n *\n * If you want to implement client-side routing yourself, use this event and prevent default browser navigation\n * (by calling `preventDefault`).\n */\n onFollow?: CancelableEventHandler<LinkProps.FollowDetail>;\n\n /**\n * Adds a `rel` attribute to the link. If the `rel` property is provided, it overrides the default behaviour.\n * By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `external` is `true` or `target` is `\"_blank\"`.\n */\n rel?: string;\n}\n\nexport namespace LinkProps {\n export type Variant = 'primary' | 'secondary' | 'info' | 'awsui-value-large';\n export type FontSize =\n | 'body-s'\n | 'body-m'\n | 'heading-xs'\n | 'heading-s'\n | 'heading-m'\n | 'heading-l'\n | 'heading-xl'\n | 'display-l'\n | 'inherit';\n export type Color = 'normal' | 'inverted';\n\n export type FollowDetail = BaseNavigationDetail;\n\n export interface Ref {\n /**\n * Sets the browser focus on the anchor element.\n */\n focus(): void;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAQlD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAQlD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAuBlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA4K1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}
|
|
@@ -18,10 +18,13 @@ import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytic
|
|
|
18
18
|
import { FunnelMetrics } from '../internal/analytics';
|
|
19
19
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
20
20
|
import { DATA_ATTR_FUNNEL_VALUE, getFunnelValueSelector, getNameFromSelector, getSubStepAllSelector, } from '../internal/analytics/selectors';
|
|
21
|
+
import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
|
|
21
22
|
const InternalLink = React.forwardRef((_a, ref) => {
|
|
22
|
-
var { variant
|
|
23
|
+
var { variant: providedVariant, fontSize = 'body-m', color = 'normal', external = false, target, href, rel, ariaLabel, externalIconAriaLabel, onFollow, children, __internalRootRef = null } = _a, props = __rest(_a, ["variant", "fontSize", "color", "external", "target", "href", "rel", "ariaLabel", "externalIconAriaLabel", "onFollow", "children", "__internalRootRef"]);
|
|
23
24
|
checkSafeUrl('Link', href);
|
|
24
25
|
const isButton = !href;
|
|
26
|
+
const { defaultVariant } = useContext(LinkDefaultVariantContext);
|
|
27
|
+
const variant = providedVariant || defaultVariant;
|
|
25
28
|
const specialStyles = ['top-navigation', 'link', 'recovery'];
|
|
26
29
|
const hasSpecialStyle = specialStyles.indexOf(variant) > -1;
|
|
27
30
|
const i18n = useInternalI18n('link');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.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, { useContext, useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport {\n DATA_ATTR_FUNNEL_VALUE,\n getFunnelValueSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n Omit<LinkProps, 'variant'> & {\n variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n };\n\nconst InternalLink = React.forwardRef(\n (\n {\n variant = 'secondary',\n fontSize = 'body-m',\n color = 'normal',\n external = false,\n target,\n href,\n rel,\n ariaLabel,\n externalIconAriaLabel,\n onFollow,\n children,\n __internalRootRef = null,\n ...props\n }: InternalLinkProps,\n ref: React.Ref<LinkProps.Ref>\n ) => {\n checkSafeUrl('Link', href);\n const isButton = !href;\n const specialStyles = ['top-navigation', 'link', 'recovery'];\n const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n const i18n = useInternalI18n('link');\n const baseProps = getBaseProps(props);\n const anchorTarget = target ?? (external ? '_blank' : undefined);\n const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n const uniqueId = useUniqueId('link');\n const linkId = useUniqueId('link-self');\n const infoId = useUniqueId('link-info');\n\n const infoLinkLabelFromContext = useContext(InfoLinkLabelContext);\n\n const { funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const fireFunnelEvent = (funnelInteractionId: string) => {\n if (variant === 'info') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.helpPanelInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n } else if (external) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.externalLinkInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const fireFollowEvent = (event: React.SyntheticEvent) => {\n if (funnelInteractionId) {\n fireFunnelEvent(funnelInteractionId);\n }\n\n fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n };\n\n const handleLinkClick = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollowEvent(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent) => {\n fireFollowEvent(event);\n };\n\n const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n event.preventDefault();\n fireFollowEvent(event);\n }\n };\n\n const linkRef = useRef<HTMLElement>(null);\n const isVisualRefresh = useVisualRefresh();\n useForwardFocus(ref, linkRef);\n\n // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n const sharedProps = {\n id: linkId,\n ...baseProps,\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: useMergeRefs(linkRef as any, __internalRootRef),\n className: clsx(\n styles.link,\n baseProps.className,\n applyButtonStyles ? styles.button : null,\n styles[getVariantStyle(variant)],\n styles[getFontSizeStyle(variant, fontSize)],\n styles[getColorStyle(variant, color)]\n ),\n 'aria-label': ariaLabel,\n 'aria-labelledby': '',\n [DATA_ATTR_FUNNEL_VALUE]: uniqueId,\n };\n\n if (variant === 'info' && infoLinkLabelFromContext && !ariaLabel) {\n sharedProps['aria-labelledby'] = `${sharedProps.id} ${infoId} ${infoLinkLabelFromContext}`;\n }\n\n const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', externalIconAriaLabel);\n const content = (\n <>\n {children}\n {external && (\n <span className={styles['icon-wrapper']}>\n \n <span\n className={styles.icon}\n aria-label={renderedExternalIconAriaLabel}\n role={renderedExternalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" size=\"inherit\" />\n </span>\n </span>\n )}\n {variant === 'info' && (\n <span hidden={true} id={infoId}>\n :\n </span>\n )}\n </>\n );\n\n if (isButton) {\n return (\n <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n {content}\n </a>\n );\n }\n\n return (\n // we dynamically set proper rel in the code above\n // eslint-disable-next-line react/jsx-no-target-blank\n <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n {content}\n </a>\n );\n }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n switch (variant) {\n case 'info':\n return 'font-size-body-s';\n case 'awsui-value-large':\n return 'font-size-display-l';\n default:\n return `font-size-${fontSize}`;\n }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.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, { useContext, useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport {\n DATA_ATTR_FUNNEL_VALUE,\n getFunnelValueSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n Omit<LinkProps, 'variant'> & {\n variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n };\n\nconst InternalLink = React.forwardRef(\n (\n {\n variant: providedVariant,\n fontSize = 'body-m',\n color = 'normal',\n external = false,\n target,\n href,\n rel,\n ariaLabel,\n externalIconAriaLabel,\n onFollow,\n children,\n __internalRootRef = null,\n ...props\n }: InternalLinkProps,\n ref: React.Ref<LinkProps.Ref>\n ) => {\n checkSafeUrl('Link', href);\n const isButton = !href;\n const { defaultVariant } = useContext(LinkDefaultVariantContext);\n const variant = providedVariant || defaultVariant;\n const specialStyles = ['top-navigation', 'link', 'recovery'];\n const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n const i18n = useInternalI18n('link');\n const baseProps = getBaseProps(props);\n const anchorTarget = target ?? (external ? '_blank' : undefined);\n const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n const uniqueId = useUniqueId('link');\n const linkId = useUniqueId('link-self');\n const infoId = useUniqueId('link-info');\n\n const infoLinkLabelFromContext = useContext(InfoLinkLabelContext);\n\n const { funnelInteractionId } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const fireFunnelEvent = (funnelInteractionId: string) => {\n if (variant === 'info') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.helpPanelInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n } else if (external) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.externalLinkInteracted({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n elementSelector: getFunnelValueSelector(uniqueId),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const fireFollowEvent = (event: React.SyntheticEvent) => {\n if (funnelInteractionId) {\n fireFunnelEvent(funnelInteractionId);\n }\n\n fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n };\n\n const handleLinkClick = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollowEvent(event);\n }\n };\n\n const handleButtonClick = (event: React.MouseEvent) => {\n fireFollowEvent(event);\n };\n\n const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n event.preventDefault();\n fireFollowEvent(event);\n }\n };\n\n const linkRef = useRef<HTMLElement>(null);\n const isVisualRefresh = useVisualRefresh();\n useForwardFocus(ref, linkRef);\n\n // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n const sharedProps = {\n id: linkId,\n ...baseProps,\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: useMergeRefs(linkRef as any, __internalRootRef),\n className: clsx(\n styles.link,\n baseProps.className,\n applyButtonStyles ? styles.button : null,\n styles[getVariantStyle(variant)],\n styles[getFontSizeStyle(variant, fontSize)],\n styles[getColorStyle(variant, color)]\n ),\n 'aria-label': ariaLabel,\n 'aria-labelledby': '',\n [DATA_ATTR_FUNNEL_VALUE]: uniqueId,\n };\n\n if (variant === 'info' && infoLinkLabelFromContext && !ariaLabel) {\n sharedProps['aria-labelledby'] = `${sharedProps.id} ${infoId} ${infoLinkLabelFromContext}`;\n }\n\n const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', externalIconAriaLabel);\n const content = (\n <>\n {children}\n {external && (\n <span className={styles['icon-wrapper']}>\n \n <span\n className={styles.icon}\n aria-label={renderedExternalIconAriaLabel}\n role={renderedExternalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" size=\"inherit\" />\n </span>\n </span>\n )}\n {variant === 'info' && (\n <span hidden={true} id={infoId}>\n :\n </span>\n )}\n </>\n );\n\n if (isButton) {\n return (\n <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n {content}\n </a>\n );\n }\n\n return (\n // we dynamically set proper rel in the code above\n // eslint-disable-next-line react/jsx-no-target-blank\n <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n {content}\n </a>\n );\n }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n switch (variant) {\n case 'info':\n return 'font-size-body-s';\n case 'awsui-value-large':\n return 'font-size-display-l';\n default:\n return `font-size-${fontSize}`;\n }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"link": "
|
|
5
|
-
"variant-secondary": "awsui_variant-
|
|
6
|
-
"variant-primary": "awsui_variant-
|
|
7
|
-
"variant-info": "awsui_variant-
|
|
8
|
-
"variant-value-large": "awsui_variant-value-
|
|
9
|
-
"variant-top-navigation": "awsui_variant-top-
|
|
10
|
-
"variant-recovery": "awsui_variant-
|
|
11
|
-
"button": "
|
|
12
|
-
"color-inverted": "awsui_color-
|
|
13
|
-
"font-size-body-s": "awsui_font-size-body-
|
|
14
|
-
"font-size-body-m": "awsui_font-size-body-
|
|
15
|
-
"font-size-heading-xs": "awsui_font-size-heading-
|
|
16
|
-
"font-size-heading-s": "awsui_font-size-heading-
|
|
17
|
-
"font-size-heading-m": "awsui_font-size-heading-
|
|
18
|
-
"font-size-heading-l": "awsui_font-size-heading-
|
|
19
|
-
"font-size-heading-xl": "awsui_font-size-heading-
|
|
20
|
-
"font-size-display-l": "awsui_font-size-display-
|
|
21
|
-
"font-size-inherit": "awsui_font-size-
|
|
22
|
-
"icon-wrapper": "awsui_icon-
|
|
23
|
-
"icon": "
|
|
4
|
+
"link": "awsui_link_4c84z_g9csn_93",
|
|
5
|
+
"variant-secondary": "awsui_variant-secondary_4c84z_g9csn_140",
|
|
6
|
+
"variant-primary": "awsui_variant-primary_4c84z_g9csn_177",
|
|
7
|
+
"variant-info": "awsui_variant-info_4c84z_g9csn_212",
|
|
8
|
+
"variant-value-large": "awsui_variant-value-large_4c84z_g9csn_249",
|
|
9
|
+
"variant-top-navigation": "awsui_variant-top-navigation_4c84z_g9csn_285",
|
|
10
|
+
"variant-recovery": "awsui_variant-recovery_4c84z_g9csn_320",
|
|
11
|
+
"button": "awsui_button_4c84z_g9csn_355",
|
|
12
|
+
"color-inverted": "awsui_color-inverted_4c84z_g9csn_392",
|
|
13
|
+
"font-size-body-s": "awsui_font-size-body-s_4c84z_g9csn_411",
|
|
14
|
+
"font-size-body-m": "awsui_font-size-body-m_4c84z_g9csn_416",
|
|
15
|
+
"font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_g9csn_420",
|
|
16
|
+
"font-size-heading-s": "awsui_font-size-heading-s_4c84z_g9csn_424",
|
|
17
|
+
"font-size-heading-m": "awsui_font-size-heading-m_4c84z_g9csn_429",
|
|
18
|
+
"font-size-heading-l": "awsui_font-size-heading-l_4c84z_g9csn_434",
|
|
19
|
+
"font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_g9csn_439",
|
|
20
|
+
"font-size-display-l": "awsui_font-size-display-l_4c84z_g9csn_444",
|
|
21
|
+
"font-size-inherit": "awsui_font-size-inherit_4c84z_g9csn_449",
|
|
22
|
+
"icon-wrapper": "awsui_icon-wrapper_4c84z_g9csn_455",
|
|
23
|
+
"icon": "awsui_icon_4c84z_g9csn_455"
|
|
24
24
|
};
|
|
25
25
|
|