@cloudscape-design/components-themeable 3.0.600 → 3.0.601
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/breadcrumb-group/item/styles.scss +0 -3
- package/lib/internal/scss/internal/components/tooltip/styles.scss +8 -0
- package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.js +2 -11
- package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +8 -9
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +16 -20
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +8 -9
- package/lib/internal/template/internal/components/tooltip/index.d.ts +7 -0
- package/lib/internal/template/internal/components/tooltip/index.d.ts.map +1 -0
- package/lib/internal/template/internal/components/tooltip/index.js +19 -0
- package/lib/internal/template/internal/components/tooltip/index.js.map +1 -0
- package/lib/internal/template/internal/components/tooltip/styles.css.js +6 -0
- package/lib/internal/template/internal/components/tooltip/styles.scoped.css +7 -0
- package/lib/internal/template/internal/components/tooltip/styles.selectors.js +7 -0
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/popover/body.d.ts +1 -1
- package/lib/internal/template/popover/body.d.ts.map +1 -1
- package/lib/internal/template/popover/body.js +2 -2
- package/lib/internal/template/popover/body.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAiG1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA8CxB"}
|
|
@@ -7,13 +7,9 @@ import styles from './styles.css.js';
|
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
|
|
9
9
|
import { getEventDetail } from '../internal';
|
|
10
|
-
import { Transition } from '../../internal/components/transition';
|
|
11
|
-
import PopoverContainer from '../../popover/container';
|
|
12
|
-
import PopoverBody from '../../popover/body';
|
|
13
|
-
import Portal from '../../internal/components/portal';
|
|
14
|
-
import popoverStyles from '../../popover/styles.css.js';
|
|
15
10
|
import { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';
|
|
16
11
|
import { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
|
|
12
|
+
import Tooltip from '../../internal/components/tooltip';
|
|
17
13
|
const BreadcrumbItemWithPopover = (_a) => {
|
|
18
14
|
var { item, isLast, anchorAttributes, funnelAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes", "funnelAttributes"]);
|
|
19
15
|
const [showPopover, setShowPopover] = useState(false);
|
|
@@ -30,12 +26,7 @@ const BreadcrumbItemWithPopover = (_a) => {
|
|
|
30
26
|
}
|
|
31
27
|
return false;
|
|
32
28
|
};
|
|
33
|
-
const popoverContent =
|
|
34
|
-
React.createElement("div", { className: styles['item-popover'] },
|
|
35
|
-
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: textRef, size: "small", fixedWidth: false, position: "bottom", arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
|
|
36
|
-
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
|
|
37
|
-
React.createElement("div", { className: popoverStyles['arrow-inner'] }))) },
|
|
38
|
-
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, onDismiss: () => { }, header: undefined }, item.text)))))));
|
|
29
|
+
const popoverContent = React.createElement(Tooltip, { trackRef: textRef, value: item.text });
|
|
39
30
|
useEffect(() => {
|
|
40
31
|
const onKeyDown = (event) => {
|
|
41
32
|
if (event.key === 'Escape') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.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, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n funnelAttributes: Record<string, string>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n funnelAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span {...funnelAttributes} className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const funnelAttributes: Record<string, string> = {};\n if (isLast) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n funnelAttributes={funnelAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span {...funnelAttributes} className={styles.text}>\n {item.text}\n </span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.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, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\n\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\nimport Tooltip from '../../internal/components/tooltip';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n funnelAttributes: Record<string, string>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n funnelAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = <Tooltip trackRef={textRef} value={item.text} />;\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span {...funnelAttributes} className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const funnelAttributes: Record<string, string> = {};\n if (isLast) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n funnelAttributes={funnelAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span {...funnelAttributes} className={styles.text}>\n {item.text}\n </span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"link": "
|
|
5
|
-
"breadcrumb": "
|
|
6
|
-
"icon": "
|
|
7
|
-
"anchor": "
|
|
8
|
-
"last": "
|
|
9
|
-
"compressed": "
|
|
10
|
-
"text": "
|
|
11
|
-
"virtual-item": "awsui_virtual-
|
|
12
|
-
"item-popover": "awsui_item-popover_1kosq_15dcm_185"
|
|
4
|
+
"link": "awsui_link_1kosq_2uf8g_99",
|
|
5
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_2uf8g_103",
|
|
6
|
+
"icon": "awsui_icon_1kosq_2uf8g_106",
|
|
7
|
+
"anchor": "awsui_anchor_1kosq_2uf8g_111",
|
|
8
|
+
"last": "awsui_last_1kosq_2uf8g_157",
|
|
9
|
+
"compressed": "awsui_compressed_1kosq_2uf8g_167",
|
|
10
|
+
"text": "awsui_text_1kosq_2uf8g_171",
|
|
11
|
+
"virtual-item": "awsui_virtual-item_1kosq_2uf8g_178"
|
|
13
12
|
};
|
|
14
13
|
|
|
@@ -96,19 +96,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
96
96
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
97
97
|
SPDX-License-Identifier: Apache-2.0
|
|
98
98
|
*/
|
|
99
|
-
.
|
|
99
|
+
.awsui_link_1kosq_2uf8g_99:not(#\9):after {
|
|
100
100
|
display: none;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.
|
|
103
|
+
.awsui_breadcrumb_1kosq_2uf8g_103:not(#\9) {
|
|
104
104
|
display: flex;
|
|
105
105
|
}
|
|
106
|
-
.
|
|
106
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_icon_1kosq_2uf8g_106:not(#\9) {
|
|
107
107
|
margin-block: 0;
|
|
108
108
|
margin-inline: var(--space-xs-xf5ch3, 8px);
|
|
109
109
|
color: var(--color-text-breadcrumb-icon-egad48, #687078);
|
|
110
110
|
}
|
|
111
|
-
.
|
|
111
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9) {
|
|
112
112
|
color: var(--color-text-link-default-hop3gv, #0073bb);
|
|
113
113
|
font-weight: inherit;
|
|
114
114
|
letter-spacing: normal;
|
|
@@ -122,30 +122,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
122
122
|
text-decoration-thickness: 1px;
|
|
123
123
|
}
|
|
124
124
|
@media (prefers-reduced-motion: reduce) {
|
|
125
|
-
.
|
|
125
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9) {
|
|
126
126
|
animation: none;
|
|
127
127
|
transition: none;
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
|
-
.awsui-motion-disabled .
|
|
130
|
+
.awsui-motion-disabled .awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9) {
|
|
131
131
|
animation: none;
|
|
132
132
|
transition: none;
|
|
133
133
|
}
|
|
134
|
-
.
|
|
134
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):hover {
|
|
135
135
|
cursor: pointer;
|
|
136
136
|
color: var(--color-text-link-hover-8s5z9d, #0a4a74);
|
|
137
137
|
}
|
|
138
|
-
.
|
|
138
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):focus {
|
|
139
139
|
outline: none;
|
|
140
140
|
}
|
|
141
|
-
.
|
|
141
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):active {
|
|
142
142
|
color: var(--color-text-link-hover-8s5z9d, #0a4a74);
|
|
143
143
|
}
|
|
144
|
-
.
|
|
144
|
+
.awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):active, .awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):focus, .awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):hover {
|
|
145
145
|
text-decoration-line: underline;
|
|
146
146
|
text-decoration-color: currentColor;
|
|
147
147
|
}
|
|
148
|
-
body[data-awsui-focus-visible=true] .
|
|
148
|
+
body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_2uf8g_103 > .awsui_anchor_1kosq_2uf8g_111:not(#\9):focus {
|
|
149
149
|
outline: thin dotted;
|
|
150
150
|
outline: var(--border-link-focus-ring-outline-gygm43, 5px auto Highlight);
|
|
151
151
|
outline-offset: 2px;
|
|
@@ -156,34 +156,30 @@ body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_15dcm_103 > .awsui_a
|
|
|
156
156
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
|
|
157
157
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-efbp5h, 0px) var(--color-border-item-focused-v8nq2m, #0073bb);
|
|
158
158
|
}
|
|
159
|
-
.
|
|
159
|
+
.awsui_breadcrumb_1kosq_2uf8g_103.awsui_last_1kosq_2uf8g_157 > .awsui_icon_1kosq_2uf8g_106:not(#\9) {
|
|
160
160
|
display: none;
|
|
161
161
|
}
|
|
162
|
-
.
|
|
162
|
+
.awsui_breadcrumb_1kosq_2uf8g_103.awsui_last_1kosq_2uf8g_157 > .awsui_anchor_1kosq_2uf8g_111:not(#\9) {
|
|
163
163
|
color: var(--color-text-breadcrumb-current-pm5uhh, #687078);
|
|
164
164
|
font-weight: 700;
|
|
165
165
|
text-decoration: none;
|
|
166
166
|
cursor: default;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
.
|
|
169
|
+
.awsui_compressed_1kosq_2uf8g_167:not(#\9) {
|
|
170
170
|
min-inline-size: 0;
|
|
171
171
|
overflow: hidden;
|
|
172
172
|
}
|
|
173
|
-
.
|
|
173
|
+
.awsui_compressed_1kosq_2uf8g_167 > .awsui_text_1kosq_2uf8g_171:not(#\9) {
|
|
174
174
|
overflow: hidden;
|
|
175
175
|
text-overflow: ellipsis;
|
|
176
176
|
white-space: nowrap;
|
|
177
177
|
display: block;
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
.awsui_virtual-
|
|
180
|
+
.awsui_virtual-item_1kosq_2uf8g_178:not(#\9) {
|
|
181
181
|
position: absolute !important;
|
|
182
182
|
inset-block-start: -9999px !important;
|
|
183
183
|
inset-inline-start: -9999px !important;
|
|
184
184
|
visibility: hidden;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.awsui_item-popover_1kosq_15dcm_185:not(#\9) {
|
|
188
|
-
/* used in tests */
|
|
189
185
|
}
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"link": "
|
|
6
|
-
"breadcrumb": "
|
|
7
|
-
"icon": "
|
|
8
|
-
"anchor": "
|
|
9
|
-
"last": "
|
|
10
|
-
"compressed": "
|
|
11
|
-
"text": "
|
|
12
|
-
"virtual-item": "awsui_virtual-
|
|
13
|
-
"item-popover": "awsui_item-popover_1kosq_15dcm_185"
|
|
5
|
+
"link": "awsui_link_1kosq_2uf8g_99",
|
|
6
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_2uf8g_103",
|
|
7
|
+
"icon": "awsui_icon_1kosq_2uf8g_106",
|
|
8
|
+
"anchor": "awsui_anchor_1kosq_2uf8g_111",
|
|
9
|
+
"last": "awsui_last_1kosq_2uf8g_157",
|
|
10
|
+
"compressed": "awsui_compressed_1kosq_2uf8g_167",
|
|
11
|
+
"text": "awsui_text_1kosq_2uf8g_171",
|
|
12
|
+
"virtual-item": "awsui_virtual-item_1kosq_2uf8g_178"
|
|
14
13
|
};
|
|
15
14
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,eA4BhE"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { Transition } from '../transition';
|
|
6
|
+
import PopoverContainer from '../../../popover/container';
|
|
7
|
+
import PopoverBody from '../../../popover/body';
|
|
8
|
+
import Portal from '../portal';
|
|
9
|
+
import popoverStyles from '../../../popover/styles.css.js';
|
|
10
|
+
import styles from './styles.css.js';
|
|
11
|
+
export default function Tooltip({ value, trackRef }) {
|
|
12
|
+
return (React.createElement(Portal, null,
|
|
13
|
+
React.createElement("div", { className: styles.root },
|
|
14
|
+
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: value, size: "small", fixedWidth: false, position: "top", arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
|
|
15
|
+
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
|
|
16
|
+
React.createElement("div", { className: popoverStyles['arrow-inner'] }))) },
|
|
17
|
+
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, onDismiss: undefined, header: undefined }, value)))))));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAgB;IAC/D,OAAO,CACL,oBAAC,MAAM;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,KAAK,EACd,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,IACpG,KAAK,CACM,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { Transition } from '../transition';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport Portal from '../portal';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TooltipProps {\n value: number | string;\n trackRef: React.RefObject<Element>;\n}\n\nexport default function Tooltip({ value, trackRef }: TooltipProps) {\n return (\n <Portal>\n <div className={styles.root}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={trackRef}\n trackKey={value}\n size=\"small\"\n fixedWidth={false}\n position=\"top\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>\n {value}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
export interface PopoverBodyProps {
|
|
3
3
|
dismissButton: boolean;
|
|
4
4
|
dismissAriaLabel: string | undefined;
|
|
5
|
-
onDismiss: () => void;
|
|
5
|
+
onDismiss: (() => void) | undefined;
|
|
6
6
|
header: React.ReactNode | undefined;
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
variant?: 'annotation';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAEpC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAS,EACT,cAAc,GACf,EAAE,gBAAgB,eA6ElB"}
|
|
@@ -16,7 +16,7 @@ export default function PopoverBody({ dismissButton: showDismissButton, dismissA
|
|
|
16
16
|
const onKeyDown = useCallback((event) => {
|
|
17
17
|
if (event.keyCode === KeyCode.escape) {
|
|
18
18
|
event.stopPropagation();
|
|
19
|
-
onDismiss();
|
|
19
|
+
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
|
|
20
20
|
}
|
|
21
21
|
}, [onDismiss]);
|
|
22
22
|
// Implement our own auto-focus rather than using FocusLock's,
|
|
@@ -30,7 +30,7 @@ export default function PopoverBody({ dismissButton: showDismissButton, dismissA
|
|
|
30
30
|
dismissButtonFocused.current = showDismissButton;
|
|
31
31
|
}, [showDismissButton]);
|
|
32
32
|
const dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", { className: styles.dismiss },
|
|
33
|
-
React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => onDismiss(), ref: dismissButtonRef })));
|
|
33
|
+
React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(), ref: dismissButtonRef })));
|
|
34
34
|
const isDialog = showDismissButton;
|
|
35
35
|
const shouldTrapFocus = showDismissButton && variant !== 'annotation';
|
|
36
36
|
const dialogProps = isDialog
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgBlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAS,EACT,cAAc,GACG;IACjB,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,gBAAgB,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YACpC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,SAAS,
|
|
1
|
+
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\n\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../i18n/context';\n\nexport interface PopoverBodyProps {\n dismissButton: boolean;\n dismissAriaLabel: string | undefined;\n onDismiss: (() => void) | undefined;\n\n header: React.ReactNode | undefined;\n children: React.ReactNode;\n variant?: 'annotation';\n overflowVisible?: 'content' | 'both';\n\n className?: string;\n ariaLabelledby?: string;\n}\n\nexport default function PopoverBody({\n dismissButton: showDismissButton,\n dismissAriaLabel,\n header,\n children,\n onDismiss,\n variant,\n overflowVisible,\n className,\n ariaLabelledby,\n}: PopoverBodyProps) {\n const i18n = useInternalI18n('popover');\n const labelledById = useUniqueId('awsui-popover-');\n const dismissButtonFocused = useRef(false);\n const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n event.stopPropagation();\n onDismiss?.();\n }\n },\n [onDismiss]\n );\n\n // Implement our own auto-focus rather than using FocusLock's,\n // because we also want to focus the dismiss button when it\n // is added dynamically (e.g. in chart popovers)\n useEffect(() => {\n if (showDismissButton && !dismissButtonFocused.current) {\n dismissButtonRef.current?.focus({ preventScroll: true });\n }\n dismissButtonFocused.current = showDismissButton;\n }, [showDismissButton]);\n\n const dismissButton = (showDismissButton ?? null) && (\n <div className={styles.dismiss}>\n <InternalButton\n variant=\"icon\"\n formAction=\"none\"\n iconName=\"close\"\n className={styles['dismiss-control']}\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => onDismiss?.()}\n ref={dismissButtonRef}\n />\n </div>\n );\n\n const isDialog = showDismissButton;\n const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n const dialogProps = isDialog\n ? {\n role: 'dialog',\n 'aria-modal': shouldTrapFocus ? true : undefined,\n 'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n }\n : {};\n\n return (\n <div\n className={clsx(styles.body, className, {\n [styles['body-overflow-visible']]: overflowVisible === 'both',\n })}\n onKeyDown={onKeyDown}\n {...dialogProps}\n >\n <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\n {header && (\n <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n {dismissButton}\n <div className={styles.header} id={labelledById}>\n <h2>{header}</h2>\n </div>\n </div>\n )}\n <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n {!header && dismissButton}\n <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n {children}\n </div>\n </div>\n </FocusLock>\n </div>\n );\n}\n"]}
|