@cloudscape-design/components-themeable 3.0.838 → 3.0.840
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.scss +9 -0
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/toolbar/styles.scss +0 -5
- package/lib/internal/scss/breadcrumb-group/item/styles.scss +0 -4
- package/lib/internal/scss/breadcrumb-group/styles.scss +4 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js +2 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.d.ts +1 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.js +2 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.d.ts +9 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.js +13 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.css.js +7 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.scoped.css +7 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.selectors.js +8 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.d.ts +6 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.js +9 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts +1 -1
- 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 +4 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.css.js +13 -15
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css +15 -19
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js +13 -15
- package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/implementation.js +5 -7
- package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/index.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/index.js +2 -1
- package/lib/internal/template/breadcrumb-group/index.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/interfaces.d.ts +2 -1
- package/lib/internal/template/breadcrumb-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/interfaces.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/funnel.d.ts +4 -3
- package/lib/internal/template/breadcrumb-group/item/funnel.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/funnel.js +10 -6
- package/lib/internal/template/breadcrumb-group/item/funnel.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.d.ts +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.js +10 -10
- package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -8
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +25 -29
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -8
- package/lib/internal/template/breadcrumb-group/skeleton.d.ts +4 -3
- package/lib/internal/template/breadcrumb-group/skeleton.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/skeleton.js +2 -7
- package/lib/internal/template/breadcrumb-group/skeleton.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/styles.css.js +10 -9
- package/lib/internal/template/breadcrumb-group/styles.scoped.css +14 -10
- package/lib/internal/template/breadcrumb-group/styles.selectors.js +10 -9
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js +2 -2
- package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/lib/internal/template/internal/analytics/selectors.d.ts +1 -1
- package/lib/internal/template/internal/analytics/selectors.d.ts.map +1 -1
- package/lib/internal/template/internal/analytics/selectors.js +2 -4
- package/lib/internal/template/internal/analytics/selectors.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/widgets/index.d.ts +4 -3
- package/lib/internal/template/internal/widgets/index.d.ts.map +1 -1
- package/lib/internal/template/internal/widgets/index.js +2 -2
- package/lib/internal/template/internal/widgets/index.js.map +1 -1
- package/lib/internal/template/wizard/internal.d.ts.map +1 -1
- package/lib/internal/template/wizard/internal.js +2 -2
- package/lib/internal/template/wizard/internal.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
16
16
|
import { checkSafeUrl } from '../internal/utils/check-safe-url';
|
|
17
17
|
import { createWidgetizedComponent } from '../internal/widgets';
|
|
18
18
|
import { BreadcrumbItem } from './item/item';
|
|
19
|
+
import { BreadcrumbGroupSkeleton } from './skeleton';
|
|
19
20
|
import { getEventDetail, getItemsDisplayProperties } from './utils';
|
|
20
21
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
21
22
|
import styles from './styles.css.js';
|
|
@@ -105,13 +106,10 @@ export function BreadcrumbGroupImplementation(_a) {
|
|
|
105
106
|
},
|
|
106
107
|
};
|
|
107
108
|
return (React.createElement("li", Object.assign({ className: clsx(styles.item, !isDisplayed && styles.hide), key: index }, (isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata)), { style: { flexShrink: shrinkFactors[index], minWidth: `${minWidths[index]}px` }, ref: node => setBreadcrumb('real', `${index}`, node) }),
|
|
108
|
-
React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow,
|
|
109
|
-
});
|
|
110
|
-
const hiddenBreadcrumbItems = items.map((item, index) => {
|
|
111
|
-
const isLast = index === items.length - 1;
|
|
112
|
-
return (React.createElement("li", { className: styles['ghost-item'], key: index, ref: node => setBreadcrumb('ghost', `${index}`, node) },
|
|
113
|
-
React.createElement(BreadcrumbItem, { item: item, isLast: isLast, isGhost: true })));
|
|
109
|
+
React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, itemIndex: index, totalCount: items.length, isTruncated: itemsWidths.ghost[index] - itemsWidths.real[index] > 0 })));
|
|
114
110
|
});
|
|
111
|
+
const hiddenBreadcrumbItems = items.map((item, index) => (React.createElement("li", { className: styles['ghost-item'], key: index, ref: node => setBreadcrumb('ghost', `${index}`, node) },
|
|
112
|
+
React.createElement(BreadcrumbItem, { item: item, itemIndex: index, totalCount: items.length, isGhost: true }))));
|
|
115
113
|
const getEventItem = (e) => {
|
|
116
114
|
const { id } = e.detail;
|
|
117
115
|
return items[parseInt(id)];
|
|
@@ -142,5 +140,5 @@ export function BreadcrumbGroupImplementation(_a) {
|
|
|
142
140
|
React.createElement("ol", { className: styles['breadcrumb-group-list'] }, breadcrumbItems),
|
|
143
141
|
React.createElement("ol", { className: clsx(styles['breadcrumb-group-list'], styles.ghost), "aria-hidden": true, tabIndex: -1 }, hiddenBreadcrumbItems)));
|
|
144
142
|
}
|
|
145
|
-
export const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(BreadcrumbGroupImplementation);
|
|
143
|
+
export const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(BreadcrumbGroupImplementation, BreadcrumbGroupSkeleton);
|
|
146
144
|
//# sourceMappingURL=implementation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport {\n GeneratedAnalyticsMetadataBreadcrumbGroupClick,\n GeneratedAnalyticsMetadataBreadcrumbGroupComponent,\n} from './analytics-metadata/interfaces';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { getEventDetail, getItemsDisplayProperties } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n ariaLabel,\n triggerRef,\n disabled,\n testUtilsClass,\n isOpen,\n onClick,\n}: CustomTriggerProps) => {\n return (\n <InternalButton\n ref={triggerRef}\n className={testUtilsClass}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n visible,\n}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={clsx(styles.ellipsis, visible && styles.visible)}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n linkStyle={true}\n analyticsMetadataTransformer={metadata => {\n if (metadata.detail?.id) {\n delete metadata.detail.id;\n }\n if (metadata.detail?.position) {\n metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n }\n return metadata;\n }}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\ninterface ItemsRefsType {\n ghost: Record<string, HTMLLIElement>;\n real: Record<string, HTMLLIElement>;\n}\n\ninterface ItemsWidthsType {\n ghost: Array<number>;\n real: Array<number>;\n}\n\nconst areArrayEqual = (first: Array<number>, second: Array<number>) => {\n if (first.length !== second.length) {\n return false;\n }\n return first.every((item, index) => item === second[index]);\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const [navWidth, navRef] = useContainerQuery<number>(rect => rect.borderBoxWidth);\n const mergedRef = useMergeRefs(navRef, __internalRootRef);\n\n const itemsRefs = useRef<ItemsRefsType>({ ghost: {}, real: {} });\n const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {\n if (node) {\n itemsRefs.current[type][index] = node;\n } else {\n delete itemsRefs.current[type][index];\n }\n };\n\n const [itemsWidths, setItemsWidths] = useState<ItemsWidthsType>({ ghost: [], real: [] });\n\n useEffect(() => {\n if (itemsRefs.current) {\n const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };\n for (const node of Object.values(itemsRefs.current.ghost)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.ghost.push(width);\n }\n for (const node of Object.values(itemsRefs.current.real)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.real.push(width);\n }\n setItemsWidths(oldWidths => {\n if (\n !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||\n !areArrayEqual(newItemsWidths.real, oldWidths.real)\n ) {\n return newItemsWidths;\n } else {\n return oldWidths;\n }\n });\n }\n }, [items, navWidth]);\n\n const { shrinkFactors, minWidths, collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);\n\n let breadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n const isDisplayed = index === 0 || index > collapsed;\n\n const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {\n action: 'click',\n detail: {\n position: `${index + 1}`,\n label: `.${analyticsSelectors['breadcrumb-item']}`,\n href: item.href || '',\n },\n };\n return (\n <li\n className={clsx(styles.item, !isDisplayed && styles.hide)}\n key={index}\n {...(isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata))}\n style={{ flexShrink: shrinkFactors[index], minWidth: `${minWidths[index]}px` }}\n ref={node => setBreadcrumb('real', `${index}`, node)}\n >\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isLast={isLast}\n isTruncated={itemsWidths.ghost[index] - itemsWidths.real[index] > 0}\n />\n </li>\n );\n });\n\n const hiddenBreadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n return (\n <li className={styles['ghost-item']} key={index} ref={node => setBreadcrumb('ghost', `${index}`, node)}>\n <BreadcrumbItem item={item} isLast={isLast} isGhost={true} />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 2) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, 1 + collapsed)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n visible={collapsed > 0}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupComponent = {\n name: 'awsui.BreadcrumbGroup',\n label: { root: 'self' },\n };\n\n return (\n <nav\n {...baseProps}\n className={clsx(styles['breadcrumb-group'], baseProps.className)}\n aria-label={ariaLabel || undefined}\n ref={mergedRef}\n {...(__injectAnalyticsComponentMetadata\n ? {\n ...getAnalyticsMetadataAttribute({\n component: componentAnalyticsMetadata,\n }),\n }\n : {})}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n <ol className={clsx(styles['breadcrumb-group-list'], styles.ghost)} aria-hidden={true} tabIndex={-1}>\n {hiddenBreadcrumbItems}\n </ol>\n </nav>\n );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(BreadcrumbGroupImplementation);\n"]}
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport {\n GeneratedAnalyticsMetadataBreadcrumbGroupClick,\n GeneratedAnalyticsMetadataBreadcrumbGroupComponent,\n} from './analytics-metadata/interfaces';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupSkeleton } from './skeleton';\nimport { getEventDetail, getItemsDisplayProperties } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n ariaLabel,\n triggerRef,\n disabled,\n testUtilsClass,\n isOpen,\n onClick,\n}: CustomTriggerProps) => {\n return (\n <InternalButton\n ref={triggerRef}\n className={testUtilsClass}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n visible,\n}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={clsx(styles.ellipsis, visible && styles.visible)}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n linkStyle={true}\n analyticsMetadataTransformer={metadata => {\n if (metadata.detail?.id) {\n delete metadata.detail.id;\n }\n if (metadata.detail?.position) {\n metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n }\n return metadata;\n }}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\ninterface ItemsRefsType {\n ghost: Record<string, HTMLLIElement>;\n real: Record<string, HTMLLIElement>;\n}\n\ninterface ItemsWidthsType {\n ghost: Array<number>;\n real: Array<number>;\n}\n\nconst areArrayEqual = (first: Array<number>, second: Array<number>) => {\n if (first.length !== second.length) {\n return false;\n }\n return first.every((item, index) => item === second[index]);\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const [navWidth, navRef] = useContainerQuery<number>(rect => rect.borderBoxWidth);\n const mergedRef = useMergeRefs(navRef, __internalRootRef);\n\n const itemsRefs = useRef<ItemsRefsType>({ ghost: {}, real: {} });\n const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {\n if (node) {\n itemsRefs.current[type][index] = node;\n } else {\n delete itemsRefs.current[type][index];\n }\n };\n\n const [itemsWidths, setItemsWidths] = useState<ItemsWidthsType>({ ghost: [], real: [] });\n\n useEffect(() => {\n if (itemsRefs.current) {\n const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };\n for (const node of Object.values(itemsRefs.current.ghost)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.ghost.push(width);\n }\n for (const node of Object.values(itemsRefs.current.real)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.real.push(width);\n }\n setItemsWidths(oldWidths => {\n if (\n !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||\n !areArrayEqual(newItemsWidths.real, oldWidths.real)\n ) {\n return newItemsWidths;\n } else {\n return oldWidths;\n }\n });\n }\n }, [items, navWidth]);\n\n const { shrinkFactors, minWidths, collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);\n\n let breadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n const isDisplayed = index === 0 || index > collapsed;\n\n const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {\n action: 'click',\n detail: {\n position: `${index + 1}`,\n label: `.${analyticsSelectors['breadcrumb-item']}`,\n href: item.href || '',\n },\n };\n return (\n <li\n className={clsx(styles.item, !isDisplayed && styles.hide)}\n key={index}\n {...(isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata))}\n style={{ flexShrink: shrinkFactors[index], minWidth: `${minWidths[index]}px` }}\n ref={node => setBreadcrumb('real', `${index}`, node)}\n >\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n itemIndex={index}\n totalCount={items.length}\n isTruncated={itemsWidths.ghost[index] - itemsWidths.real[index] > 0}\n />\n </li>\n );\n });\n\n const hiddenBreadcrumbItems = items.map((item, index) => (\n <li className={styles['ghost-item']} key={index} ref={node => setBreadcrumb('ghost', `${index}`, node)}>\n <BreadcrumbItem item={item} itemIndex={index} totalCount={items.length} isGhost={true} />\n </li>\n ));\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 2) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, 1 + collapsed)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n visible={collapsed > 0}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupComponent = {\n name: 'awsui.BreadcrumbGroup',\n label: { root: 'self' },\n };\n\n return (\n <nav\n {...baseProps}\n className={clsx(styles['breadcrumb-group'], baseProps.className)}\n aria-label={ariaLabel || undefined}\n ref={mergedRef}\n {...(__injectAnalyticsComponentMetadata\n ? {\n ...getAnalyticsMetadataAttribute({\n component: componentAnalyticsMetadata,\n }),\n }\n : {})}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n <ol className={clsx(styles['breadcrumb-group-list'], styles.ghost)} aria-hidden={true} tabIndex={-1}>\n {hiddenBreadcrumbItems}\n </ol>\n </nav>\n );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(\n BreadcrumbGroupImplementation,\n BreadcrumbGroupSkeleton\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAEhC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EACvG,KAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAgBzB"}
|
|
@@ -6,12 +6,13 @@ import useBaseComponent from '../internal/hooks/use-base-component';
|
|
|
6
6
|
import { useSetGlobalBreadcrumbs } from '../internal/plugins/helpers/use-global-breadcrumbs';
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name.js';
|
|
8
8
|
import { InternalBreadcrumbGroup } from './internal';
|
|
9
|
+
import { BreadcrumbGroupSkeleton } from './skeleton';
|
|
9
10
|
export default function BreadcrumbGroup(_a) {
|
|
10
11
|
var { items = [] } = _a, props = __rest(_a, ["items"]);
|
|
11
12
|
const registeredGlobally = useSetGlobalBreadcrumbs(Object.assign({ items }, props));
|
|
12
13
|
const baseComponentProps = useBaseComponent('BreadcrumbGroup');
|
|
13
14
|
if (registeredGlobally) {
|
|
14
|
-
return React.createElement(
|
|
15
|
+
return React.createElement(BreadcrumbGroupSkeleton, { items: items });
|
|
15
16
|
}
|
|
16
17
|
return (React.createElement(InternalBreadcrumbGroup, Object.assign({ items: items }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true })));
|
|
17
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,oDAAoD,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAkE,EAG/E;QAH+E,EACvG,KAAK,GAAG,EAAE,OAEc,EADrB,KAAK,cAF+F,SAGxG,CADS;IAER,MAAM,kBAAkB,GAAG,uBAAuB,iBAAG,KAAK,IAAK,KAAK,EAAG,CAAC;IACxE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAE/D,IAAI,kBAAkB,EAAE;QACtB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,oDAAoD,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAkE,EAG/E;QAH+E,EACvG,KAAK,GAAG,EAAE,OAEc,EADrB,KAAK,cAF+F,SAGxG,CADS;IAER,MAAM,kBAAkB,GAAG,uBAAuB,iBAAG,KAAK,IAAK,KAAK,EAAG,CAAC;IACxE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAE/D,IAAI,kBAAkB,EAAE;QACtB,OAAO,oBAAC,uBAAuB,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KAClD;IAED,OAAO,CACL,oBAAC,uBAAuB,kBACtB,KAAK,EAAE,KAAK,IACR,KAAK,EACL,kBAAkB,IACtB,kCAAkC,EAAE,IAAI,IACxC,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useSetGlobalBreadcrumbs } from '../internal/plugins/helpers/use-global-breadcrumbs';\nimport { applyDisplayName } from '../internal/utils/apply-display-name.js';\nimport { BreadcrumbGroupProps } from './interfaces';\nimport { InternalBreadcrumbGroup } from './internal';\nimport { BreadcrumbGroupSkeleton } from './skeleton';\n\nexport { BreadcrumbGroupProps };\n\nexport default function BreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ...props\n}: BreadcrumbGroupProps<T>) {\n const registeredGlobally = useSetGlobalBreadcrumbs({ items, ...props });\n const baseComponentProps = useBaseComponent('BreadcrumbGroup');\n\n if (registeredGlobally) {\n return <BreadcrumbGroupSkeleton items={items} />;\n }\n\n return (\n <InternalBreadcrumbGroup\n items={items}\n {...props}\n {...baseComponentProps}\n __injectAnalyticsComponentMetadata={true}\n />\n );\n}\n\napplyDisplayName(BreadcrumbGroup, 'BreadcrumbGroup');\n"]}
|
|
@@ -51,8 +51,9 @@ export type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = B
|
|
|
51
51
|
};
|
|
52
52
|
export interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {
|
|
53
53
|
item: T;
|
|
54
|
+
itemIndex: number;
|
|
55
|
+
totalCount: number;
|
|
54
56
|
isTruncated?: boolean;
|
|
55
|
-
isLast?: boolean;
|
|
56
57
|
isGhost?: boolean;
|
|
57
58
|
onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
|
|
58
59
|
onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CACnG,SAAQ,kBAAkB;IAC1B;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAiB,WAAW,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAC1F,SAAQ,oBAAoB;QAC5B,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;CACF;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IACtG,oBAAoB,CAAC,CAAC,CAAC,GACrB,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEN,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI;IACtE,IAAI,EAAE,CAAC,CAAC;IACR,
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CACnG,SAAQ,kBAAkB;IAC1B;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAiB,WAAW,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAC1F,SAAQ,oBAAoB;QAC5B,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;CACF;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IACtG,oBAAoB,CAAC,CAAC,CAAC,GACrB,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEN,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI;IACtE,IAAI,EAAE,CAAC,CAAC;IACR,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACpD,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,mBAAmB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,oBAAoB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n extends BaseComponentProps {\n /**\n * An array of breadcrumb items that describes the link hierarchy for this navigation.\n * Each option has the following properties:\n\n * * `text` (string) - Specifies the title text of the breadcrumb item.\n * * `href` (string) - Specifies the URL for the link in the breadcrumb item.\n * You should specify the link even if you have a click handler for a breadcrumb item\n * to ensure that valid markup is generated.\n\n * Note: The last breadcrumb item is automatically considered the current item, and it's\n * not a link.\n */\n items: ReadonlyArray<T>;\n /**\n * Provides an `aria-label` to the breadcrumb group that screen readers can read (for accessibility).\n */\n ariaLabel?: string;\n\n /**\n * Provides an `aria-label` to the ellipsis button that screen readers can read (for accessibility).\n * @i18n\n */\n expandAriaLabel?: string;\n /**\n * Called when the user clicks on a breadcrumb item.\n */\n onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n /**\n * Called when the user clicks on a breadcrumb item with the left mouse button\n * without pressing modifier keys (that is, CTRL, ALT, SHIFT, META).\n */\n onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport namespace BreadcrumbGroupProps {\n export interface Item {\n text: string;\n href: string;\n }\n\n export interface ClickDetail<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n extends BaseNavigationDetail {\n item: T;\n text: string;\n href: string;\n }\n}\n\nexport type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n BreadcrumbGroupProps<T> &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n item: T;\n
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n extends BaseComponentProps {\n /**\n * An array of breadcrumb items that describes the link hierarchy for this navigation.\n * Each option has the following properties:\n\n * * `text` (string) - Specifies the title text of the breadcrumb item.\n * * `href` (string) - Specifies the URL for the link in the breadcrumb item.\n * You should specify the link even if you have a click handler for a breadcrumb item\n * to ensure that valid markup is generated.\n\n * Note: The last breadcrumb item is automatically considered the current item, and it's\n * not a link.\n */\n items: ReadonlyArray<T>;\n /**\n * Provides an `aria-label` to the breadcrumb group that screen readers can read (for accessibility).\n */\n ariaLabel?: string;\n\n /**\n * Provides an `aria-label` to the ellipsis button that screen readers can read (for accessibility).\n * @i18n\n */\n expandAriaLabel?: string;\n /**\n * Called when the user clicks on a breadcrumb item.\n */\n onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n /**\n * Called when the user clicks on a breadcrumb item with the left mouse button\n * without pressing modifier keys (that is, CTRL, ALT, SHIFT, META).\n */\n onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport namespace BreadcrumbGroupProps {\n export interface Item {\n text: string;\n href: string;\n }\n\n export interface ClickDetail<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n extends BaseNavigationDetail {\n item: T;\n text: string;\n href: string;\n }\n}\n\nexport type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n BreadcrumbGroupProps<T> &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n item: T;\n itemIndex: number;\n totalCount: number;\n isTruncated?: boolean;\n isGhost?: boolean;\n onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport interface EllipsisDropdownProps {\n ariaLabel?: BreadcrumbGroupProps['expandAriaLabel'];\n dropdownItems: ReadonlyArray<LinkItem>;\n onDropdownItemClick: CancelableEventHandler<{ id: string }>;\n onDropdownItemFollow: CancelableEventHandler<{ id: string }>;\n visible?: boolean;\n}\n"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface FunnelBreadcrumbItemProps {
|
|
3
|
+
className?: string;
|
|
3
4
|
text: string;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
itemIndex: number;
|
|
6
|
+
totalCount: number;
|
|
7
|
+
disableAnalytics?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const FunnelBreadcrumbItem: React.ForwardRefExoticComponent<FunnelBreadcrumbItemProps & React.RefAttributes<HTMLSpanElement>>;
|
|
9
10
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,mGAsBhC,CAAC"}
|
|
@@ -2,14 +2,18 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
|
|
5
|
+
import { DATA_ATTR_FUNNEL_KEY, DATA_ATTR_RESOURCE_TYPE, FUNNEL_KEY_FUNNEL_NAME, } from '../../internal/analytics/selectors';
|
|
6
6
|
import analyticsSelectors from '../analytics-metadata/styles.css.js';
|
|
7
|
-
|
|
8
|
-
export const FunnelBreadcrumbItem = React.forwardRef(({ text, hidden, last, ghost }, ref) => {
|
|
7
|
+
export const FunnelBreadcrumbItem = React.forwardRef(({ className, text, itemIndex, totalCount, disableAnalytics }, ref) => {
|
|
9
8
|
const funnelAttributes = {};
|
|
10
|
-
if (
|
|
11
|
-
|
|
9
|
+
if (!disableAnalytics) {
|
|
10
|
+
if (itemIndex === totalCount - 1) {
|
|
11
|
+
funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
|
|
12
|
+
}
|
|
13
|
+
if (itemIndex === 1) {
|
|
14
|
+
funnelAttributes[DATA_ATTR_RESOURCE_TYPE] = 'true';
|
|
15
|
+
}
|
|
12
16
|
}
|
|
13
|
-
return (React.createElement("span", Object.assign({}, funnelAttributes, { className: clsx(
|
|
17
|
+
return (React.createElement("span", Object.assign({}, funnelAttributes, { className: clsx(className, !disableAnalytics && analyticsSelectors['breadcrumb-item']), ref: ref }), text));
|
|
14
18
|
});
|
|
15
19
|
//# sourceMappingURL=funnel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,
|
|
1
|
+
{"version":3,"file":"funnel.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,oCAAoC,CAAC;AAE5C,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AAUrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAClD,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,gBAAgB,GAA2B,EAAE,CAAC;IACpD,IAAI,CAAC,gBAAgB,EAAE;QACrB,IAAI,SAAS,KAAK,UAAU,GAAG,CAAC,EAAE;YAChC,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,sBAAsB,CAAC;SACjE;QACD,IAAI,SAAS,KAAK,CAAC,EAAE;YACnB,gBAAgB,CAAC,uBAAuB,CAAC,GAAG,MAAM,CAAC;SACpD;KACF;IAED,OAAO,CACL,8CACM,gBAAgB,IACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,gBAAgB,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,CAAC,EACtF,GAAG,EAAE,GAAG,KAEP,IAAI,CACA,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport {\n DATA_ATTR_FUNNEL_KEY,\n DATA_ATTR_RESOURCE_TYPE,\n FUNNEL_KEY_FUNNEL_NAME,\n} from '../../internal/analytics/selectors';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\n\ninterface FunnelBreadcrumbItemProps {\n className?: string;\n text: string;\n itemIndex: number;\n totalCount: number;\n disableAnalytics?: boolean;\n}\n\nexport const FunnelBreadcrumbItem = React.forwardRef<HTMLSpanElement, FunnelBreadcrumbItemProps>(\n ({ className, text, itemIndex, totalCount, disableAnalytics }, ref) => {\n const funnelAttributes: Record<string, string> = {};\n if (!disableAnalytics) {\n if (itemIndex === totalCount - 1) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n if (itemIndex === 1) {\n funnelAttributes[DATA_ATTR_RESOURCE_TYPE] = 'true';\n }\n }\n\n return (\n <span\n {...funnelAttributes}\n className={clsx(className, !disableAnalytics && analyticsSelectors['breadcrumb-item'])}\n ref={ref}\n >\n {text}\n </span>\n );\n }\n);\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';
|
|
3
|
-
export declare function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({ item, onClick, onFollow,
|
|
3
|
+
export declare function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({ item, itemIndex, totalCount, onClick, onFollow, isGhost, isTruncated, }: BreadcrumbItemProps<T>): JSX.Element;
|
|
4
4
|
//# sourceMappingURL=item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AASA,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":";AASA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAuE1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,SAAS,EACT,UAAU,EACV,OAAO,EACP,QAAQ,EACR,OAAe,EACf,WAAmB,GACpB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA8CxB"}
|
|
@@ -10,7 +10,7 @@ import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
|
|
|
10
10
|
import { getEventDetail } from '../utils';
|
|
11
11
|
import { FunnelBreadcrumbItem } from './funnel';
|
|
12
12
|
import styles from './styles.css.js';
|
|
13
|
-
const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, }) => {
|
|
13
|
+
const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, children, }) => {
|
|
14
14
|
const [showPopover, setShowPopover] = useState(false);
|
|
15
15
|
const textRef = useRef(null);
|
|
16
16
|
const popoverContent = React.createElement(Tooltip, { trackRef: textRef, value: item.text, size: "medium" });
|
|
@@ -22,19 +22,19 @@ const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, }) => {
|
|
|
22
22
|
}
|
|
23
23
|
}, [showPopover]);
|
|
24
24
|
return (React.createElement(React.Fragment, null,
|
|
25
|
-
React.createElement(Item, Object.assign({ isLast: isLast, onFocus: () => {
|
|
25
|
+
React.createElement(Item, Object.assign({ ref: textRef, isLast: isLast, onFocus: () => {
|
|
26
26
|
setShowPopover(true);
|
|
27
27
|
}, onBlur: () => setShowPopover(false), onMouseEnter: () => {
|
|
28
28
|
setShowPopover(true);
|
|
29
|
-
}, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }, (isLast ? { tabIndex: 0 } : {})),
|
|
30
|
-
React.createElement(FunnelBreadcrumbItem, { ref: textRef, text: item.text, last: isLast })),
|
|
29
|
+
}, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }, (isLast ? { tabIndex: 0 } : {})), children),
|
|
31
30
|
showPopover && popoverContent));
|
|
32
31
|
};
|
|
33
|
-
const Item = (_a) => {
|
|
32
|
+
const Item = React.forwardRef((_a, ref) => {
|
|
34
33
|
var { anchorAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "children", "isLast"]);
|
|
35
|
-
return isLast ? (React.createElement("span", Object.assign({ className: styles.anchor }, itemAttributes), children)) : (React.createElement("a", Object.assign({ className: styles.anchor }, itemAttributes, anchorAttributes), children));
|
|
36
|
-
};
|
|
37
|
-
export function BreadcrumbItem({ item,
|
|
34
|
+
return isLast ? (React.createElement("span", Object.assign({ ref: ref, className: styles.anchor }, itemAttributes), children)) : (React.createElement("a", Object.assign({ ref: ref, className: styles.anchor }, itemAttributes, anchorAttributes), children));
|
|
35
|
+
});
|
|
36
|
+
export function BreadcrumbItem({ item, itemIndex, totalCount, onClick, onFollow, isGhost = false, isTruncated = false, }) {
|
|
37
|
+
const isLast = itemIndex === totalCount - 1;
|
|
38
38
|
const preventDefault = (event) => event.preventDefault();
|
|
39
39
|
const onClickHandler = (event) => {
|
|
40
40
|
if (isPlainLeftClick(event)) {
|
|
@@ -49,9 +49,9 @@ export function BreadcrumbItem({ item, onClick, onFollow, isLast = false, isGhos
|
|
|
49
49
|
if (isGhost) {
|
|
50
50
|
anchorAttributes.tabIndex = -1;
|
|
51
51
|
}
|
|
52
|
+
const breadcrumbItem = (React.createElement(FunnelBreadcrumbItem, { className: styles.text, itemIndex: itemIndex, totalCount: totalCount, text: item.text, disableAnalytics: isGhost }));
|
|
52
53
|
return (React.createElement("div", { className: clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last) },
|
|
53
|
-
isTruncated && !isGhost ? (React.createElement(BreadcrumbItemWithPopover, { item: item, isLast: isLast, anchorAttributes: anchorAttributes })) : (React.createElement(Item, { isLast: isLast, anchorAttributes: anchorAttributes },
|
|
54
|
-
React.createElement(FunnelBreadcrumbItem, { text: item.text, last: isLast, ghost: isGhost }))),
|
|
54
|
+
isTruncated && !isGhost ? (React.createElement(BreadcrumbItemWithPopover, { item: item, isLast: isLast, anchorAttributes: anchorAttributes }, breadcrumbItem)) : (React.createElement(Item, { isLast: isLast, anchorAttributes: anchorAttributes }, breadcrumbItem)),
|
|
55
55
|
!isLast ? (React.createElement("span", { className: styles.icon },
|
|
56
56
|
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
|
|
57
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,yBAAyB,GAAG,CAAsC,EACtE,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,QAAQ,GAC0B,EAAE,EAAE;IACtC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,oBAAC,OAAO,IAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,EAAE;YACf,OAAO,eAAe,CAAC,GAAG,EAAE;gBAC1B,cAAc,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL;QACE,oBAAC,IAAI,kBACH,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;gBACZ,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE;gBACjB,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,gBAAgB,EAAE,gBAAgB,IAC9B,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAElC,QAAQ,CACJ;QACN,WAAW,IAAI,cAAc,CAC7B,CACJ,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAyD,EAAE,GAAG,EAAE,EAAE;QAAlE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,OAAqB,EAAhB,cAAc,cAAvD,0CAAyD,CAAF;IACtD,OAAA,MAAM,CAAC,CAAC,CAAC,CACP,4CAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IAAM,cAAc,GACzD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,yCAAG,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IAAM,cAAc,EAAM,gBAAgB,GAC5G,QAAQ,CACP,CACL,CAAA;CAAA,CACJ,CAAC;AAEF,MAAM,UAAU,cAAc,CAAsC,EAClE,IAAI,EACJ,SAAS,EACT,UAAU,EACV,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,GACI;IACvB,MAAM,MAAM,GAAG,SAAS,KAAK,UAAU,GAAG,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAkD;QACtE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;QACtB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;KAClD,CAAC;IACF,IAAI,OAAO,EAAE;QACX,gBAAgB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;KAChC;IAED,MAAM,cAAc,GAAG,CACrB,oBAAC,oBAAoB,IACnB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,OAAO,GACzB,CACH,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC,UAAU,EAAE,OAAO,IAAI,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC;QAC9G,WAAW,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB,oBAAC,yBAAyB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,IACtF,cAAc,CACW,CAC7B,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,IACrD,cAAc,CACV,CACR;QACA,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;YAC1B,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,GAAG,CAC9B,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC","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 clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport Tooltip from '../../internal/components/tooltip';\nimport { registerTooltip } from '../../internal/components/tooltip/registry';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport { getEventDetail } from '../utils';\nimport { FunnelBreadcrumbItem } from './funnel';\n\nimport styles from './styles.css.js';\n\ninterface BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n children: React.ReactNode;\n}\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n children,\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const popoverContent = <Tooltip trackRef={textRef} value={item.text} size=\"medium\" />;\n\n useEffect(() => {\n if (showPopover) {\n return registerTooltip(() => {\n setShowPopover(false);\n });\n }\n }, [showPopover]);\n\n return (\n <>\n <Item\n ref={textRef}\n isLast={isLast}\n onFocus={() => {\n setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n {...(isLast ? { tabIndex: 0 } : {})}\n >\n {children}\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 = React.forwardRef<HTMLElement, ItemProps>(\n ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) =>\n isLast ? (\n <span ref={ref} className={styles.anchor} {...itemAttributes}>\n {children}\n </span>\n ) : (\n <a ref={ref as React.Ref<HTMLAnchorElement>} className={styles.anchor} {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n )\n);\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n itemIndex,\n totalCount,\n onClick,\n onFollow,\n isGhost = false,\n isTruncated = false,\n}: BreadcrumbItemProps<T>) {\n const isLast = itemIndex === totalCount - 1;\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 anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n if (isGhost) {\n anchorAttributes.tabIndex = -1;\n }\n\n const breadcrumbItem = (\n <FunnelBreadcrumbItem\n className={styles.text}\n itemIndex={itemIndex}\n totalCount={totalCount}\n text={item.text}\n disableAnalytics={isGhost}\n />\n );\n\n return (\n <div className={clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last)}>\n {isTruncated && !isGhost ? (\n <BreadcrumbItemWithPopover item={item} isLast={isLast} anchorAttributes={anchorAttributes}>\n {breadcrumbItem}\n </BreadcrumbItemWithPopover>\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes}>\n {breadcrumbItem}\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,13 +1,12 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"link": "
|
|
5
|
-
"breadcrumb": "
|
|
6
|
-
"ghost-breadcrumb": "awsui_ghost-
|
|
7
|
-
"icon": "
|
|
8
|
-
"anchor": "
|
|
9
|
-
"text": "
|
|
10
|
-
"last": "
|
|
11
|
-
"text-hidden": "awsui_text-hidden_1kosq_co5oc_233"
|
|
4
|
+
"link": "awsui_link_1kosq_idgry_141",
|
|
5
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_idgry_145",
|
|
6
|
+
"ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_idgry_146",
|
|
7
|
+
"icon": "awsui_icon_1kosq_idgry_149",
|
|
8
|
+
"anchor": "awsui_anchor_1kosq_idgry_155",
|
|
9
|
+
"text": "awsui_text_1kosq_idgry_202",
|
|
10
|
+
"last": "awsui_last_1kosq_idgry_221"
|
|
12
11
|
};
|
|
13
12
|
|
|
@@ -138,22 +138,22 @@
|
|
|
138
138
|
*/
|
|
139
139
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
140
140
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
141
|
-
.
|
|
141
|
+
.awsui_link_1kosq_idgry_141:not(#\9):after {
|
|
142
142
|
display: none;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
.
|
|
146
|
-
.awsui_ghost-
|
|
145
|
+
.awsui_breadcrumb_1kosq_idgry_145:not(#\9),
|
|
146
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146:not(#\9) {
|
|
147
147
|
display: flex;
|
|
148
148
|
}
|
|
149
|
-
.
|
|
150
|
-
.awsui_ghost-
|
|
149
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_icon_1kosq_idgry_149:not(#\9),
|
|
150
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_icon_1kosq_idgry_149:not(#\9) {
|
|
151
151
|
margin-block: 0;
|
|
152
152
|
margin-inline: var(--space-xs-6dgkww, 8px);
|
|
153
153
|
color: var(--color-text-breadcrumb-icon-hqnw0m, #687078);
|
|
154
154
|
}
|
|
155
|
-
.
|
|
156
|
-
.awsui_ghost-
|
|
155
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9),
|
|
156
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
|
|
157
157
|
min-inline-size: 0;
|
|
158
158
|
overflow: hidden;
|
|
159
159
|
text-underline-offset: 0.25em;
|
|
@@ -169,42 +169,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
169
169
|
transition-duration: var(--motion-duration-refresh-only-medium-kd6k1u, 0ms);
|
|
170
170
|
}
|
|
171
171
|
@media (prefers-reduced-motion: reduce) {
|
|
172
|
-
.
|
|
173
|
-
.awsui_ghost-
|
|
172
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9),
|
|
173
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
|
|
174
174
|
animation: none;
|
|
175
175
|
transition: none;
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
|
-
.awsui-motion-disabled .
|
|
178
|
+
.awsui-motion-disabled .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
|
|
179
179
|
animation: none;
|
|
180
180
|
transition: none;
|
|
181
181
|
}
|
|
182
|
-
.
|
|
183
|
-
.awsui_ghost-
|
|
182
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover,
|
|
183
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover {
|
|
184
184
|
cursor: pointer;
|
|
185
185
|
color: var(--color-text-link-hover-jvu4dp, #0a4a74);
|
|
186
186
|
}
|
|
187
|
-
.
|
|
188
|
-
.awsui_ghost-
|
|
187
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus,
|
|
188
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus {
|
|
189
189
|
outline: none;
|
|
190
190
|
}
|
|
191
|
-
.
|
|
192
|
-
.awsui_ghost-
|
|
191
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):active,
|
|
192
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):active {
|
|
193
193
|
color: var(--color-text-link-hover-jvu4dp, #0a4a74);
|
|
194
194
|
}
|
|
195
|
-
.
|
|
195
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):active, .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus, .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):hover {
|
|
196
196
|
text-decoration-line: underline;
|
|
197
197
|
text-decoration-color: currentColor;
|
|
198
198
|
}
|
|
199
|
-
.
|
|
200
|
-
.awsui_ghost-
|
|
199
|
+
.awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155 > .awsui_text_1kosq_idgry_202:not(#\9),
|
|
200
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155 > .awsui_text_1kosq_idgry_202:not(#\9) {
|
|
201
201
|
overflow: hidden;
|
|
202
202
|
text-overflow: ellipsis;
|
|
203
203
|
white-space: nowrap;
|
|
204
204
|
display: block;
|
|
205
205
|
}
|
|
206
|
-
body[data-awsui-focus-visible=true] .
|
|
207
|
-
body[data-awsui-focus-visible=true] .awsui_ghost-
|
|
206
|
+
body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_idgry_145 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus,
|
|
207
|
+
body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_idgry_146 > .awsui_anchor_1kosq_idgry_155:not(#\9):focus {
|
|
208
208
|
outline: thin dotted;
|
|
209
209
|
outline: var(--border-link-focus-ring-outline-bptw2p, 5px auto Highlight);
|
|
210
210
|
outline-offset: 2px;
|
|
@@ -215,18 +215,14 @@ body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_co5oc_146 > .a
|
|
|
215
215
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
|
|
216
216
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-yrkso1, 0px) var(--color-border-item-focused-q68bgg, #0073bb);
|
|
217
217
|
}
|
|
218
|
-
.
|
|
219
|
-
.awsui_ghost-
|
|
218
|
+
.awsui_breadcrumb_1kosq_idgry_145.awsui_last_1kosq_idgry_221 > .awsui_icon_1kosq_idgry_149:not(#\9),
|
|
219
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146.awsui_last_1kosq_idgry_221 > .awsui_icon_1kosq_idgry_149:not(#\9) {
|
|
220
220
|
display: none;
|
|
221
221
|
}
|
|
222
|
-
.
|
|
223
|
-
.awsui_ghost-
|
|
222
|
+
.awsui_breadcrumb_1kosq_idgry_145.awsui_last_1kosq_idgry_221 > .awsui_anchor_1kosq_idgry_155:not(#\9),
|
|
223
|
+
.awsui_ghost-breadcrumb_1kosq_idgry_146.awsui_last_1kosq_idgry_221 > .awsui_anchor_1kosq_idgry_155:not(#\9) {
|
|
224
224
|
color: var(--color-text-breadcrumb-current-e96tx0, #687078);
|
|
225
225
|
font-weight: 700;
|
|
226
226
|
text-decoration: none;
|
|
227
227
|
cursor: default;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.awsui_text-hidden_1kosq_co5oc_233:not(#\9) {
|
|
231
|
-
display: none;
|
|
232
228
|
}
|
|
@@ -2,13 +2,12 @@
|
|
|
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
|
-
"ghost-breadcrumb": "awsui_ghost-
|
|
8
|
-
"icon": "
|
|
9
|
-
"anchor": "
|
|
10
|
-
"text": "
|
|
11
|
-
"last": "
|
|
12
|
-
"text-hidden": "awsui_text-hidden_1kosq_co5oc_233"
|
|
5
|
+
"link": "awsui_link_1kosq_idgry_141",
|
|
6
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_idgry_145",
|
|
7
|
+
"ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_idgry_146",
|
|
8
|
+
"icon": "awsui_icon_1kosq_idgry_149",
|
|
9
|
+
"anchor": "awsui_anchor_1kosq_idgry_155",
|
|
10
|
+
"text": "awsui_text_1kosq_idgry_202",
|
|
11
|
+
"last": "awsui_last_1kosq_idgry_221"
|
|
13
12
|
};
|
|
14
13
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const BreadcrumbGroupSkeleton: React.ForwardRefExoticComponent<import("./interfaces").BreadcrumbGroupProps<import("./interfaces").BreadcrumbGroupProps.Item> & import("../internal/hooks/use-base-component").InternalBaseComponentProps<any> & {
|
|
3
|
+
__injectAnalyticsComponentMetadata?: boolean | undefined;
|
|
4
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
4
5
|
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,uBAAuB;;qCAMlC,CAAC"}
|
|
@@ -2,11 +2,6 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { FunnelBreadcrumbItem } from './item/funnel';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (!lastItem) {
|
|
8
|
-
return React.createElement(React.Fragment, null);
|
|
9
|
-
}
|
|
10
|
-
return React.createElement(FunnelBreadcrumbItem, { hidden: true, last: true, text: lastItem.text });
|
|
11
|
-
}
|
|
5
|
+
import styles from './styles.css.js';
|
|
6
|
+
export const BreadcrumbGroupSkeleton = React.forwardRef(({ items }, ref) => (React.createElement("div", { ref: ref, className: styles['breadcrumbs-skeleton'] }, items.map((item, index) => (React.createElement(FunnelBreadcrumbItem, { itemIndex: index, totalCount: items.length, text: item.text, key: index }))))));
|
|
12
7
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,
|
|
1
|
+
{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAA4C,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACrH,6BAAK,GAAG,EAAE,GAAgC,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,IAClF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,oBAAoB,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAClG,CAAC,CACE,CACP,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { InternalBreadcrumbGroupProps } from './interfaces';\nimport { FunnelBreadcrumbItem } from './item/funnel';\n\nimport styles from './styles.css.js';\n\nexport const BreadcrumbGroupSkeleton = React.forwardRef<HTMLElement, InternalBreadcrumbGroupProps>(({ items }, ref) => (\n <div ref={ref as React.Ref<HTMLDivElement>} className={styles['breadcrumbs-skeleton']}>\n {items.map((item, index) => (\n <FunnelBreadcrumbItem itemIndex={index} totalCount={items.length} text={item.text} key={index} />\n ))}\n </div>\n));\n"]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"breadcrumb-group": "awsui_breadcrumb-
|
|
5
|
-
"breadcrumb-group-list": "awsui_breadcrumb-group-
|
|
6
|
-
"ghost": "
|
|
7
|
-
"item": "
|
|
8
|
-
"ghost-item": "awsui_ghost-
|
|
9
|
-
"ellipsis": "
|
|
10
|
-
"hide": "
|
|
11
|
-
"visible": "
|
|
12
|
-
"icon": "
|
|
4
|
+
"breadcrumb-group": "awsui_breadcrumb-group_d19fg_525rx_141",
|
|
5
|
+
"breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_525rx_179",
|
|
6
|
+
"ghost": "awsui_ghost_d19fg_525rx_190",
|
|
7
|
+
"item": "awsui_item_d19fg_525rx_195",
|
|
8
|
+
"ghost-item": "awsui_ghost-item_d19fg_525rx_196",
|
|
9
|
+
"ellipsis": "awsui_ellipsis_d19fg_525rx_197",
|
|
10
|
+
"hide": "awsui_hide_d19fg_525rx_204",
|
|
11
|
+
"visible": "awsui_visible_d19fg_525rx_210",
|
|
12
|
+
"icon": "awsui_icon_d19fg_525rx_214",
|
|
13
|
+
"breadcrumbs-skeleton": "awsui_breadcrumbs-skeleton_d19fg_525rx_220"
|
|
13
14
|
};
|
|
14
15
|
|