@cloudscape-design/components 3.0.655 → 3.0.656
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/breadcrumb-group/implementation.d.ts +1 -4
- package/breadcrumb-group/implementation.d.ts.map +1 -1
- package/breadcrumb-group/implementation.js.map +1 -1
- package/breadcrumb-group/interfaces.d.ts +2 -0
- package/breadcrumb-group/interfaces.d.ts.map +1 -1
- package/breadcrumb-group/interfaces.js.map +1 -1
- package/breadcrumb-group/item/funnel.d.ts +9 -0
- package/breadcrumb-group/item/funnel.d.ts.map +1 -0
- package/breadcrumb-group/item/funnel.js +14 -0
- package/breadcrumb-group/item/funnel.js.map +1 -0
- package/breadcrumb-group/item/item.d.ts.map +1 -1
- package/breadcrumb-group/item/item.js +5 -10
- package/breadcrumb-group/item/item.js.map +1 -1
- package/breadcrumb-group/item/styles.css.js +9 -8
- package/breadcrumb-group/item/styles.scoped.css +20 -16
- package/breadcrumb-group/item/styles.selectors.js +9 -8
- package/breadcrumb-group/skeleton.d.ts +4 -0
- package/breadcrumb-group/skeleton.d.ts.map +1 -0
- package/breadcrumb-group/skeleton.js +12 -0
- package/breadcrumb-group/skeleton.js.map +1 -0
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BreadcrumbGroupProps } from './interfaces';
|
|
3
|
-
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
|
-
type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = BreadcrumbGroupProps<T> & InternalBaseComponentProps;
|
|
2
|
+
import { BreadcrumbGroupProps, InternalBreadcrumbGroupProps } from './interfaces';
|
|
5
3
|
export declare function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({ items, ariaLabel, expandAriaLabel, onClick, onFollow, __internalRootRef, ...props }: InternalBreadcrumbGroupProps<T>): JSX.Element;
|
|
6
4
|
export declare const createWidgetizedBreadcrumbGroup: (Loader?: typeof BreadcrumbGroupImplementation | undefined) => typeof BreadcrumbGroupImplementation;
|
|
7
|
-
export {};
|
|
8
5
|
//# sourceMappingURL=implementation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAkEzG,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC7G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAmEjC;AAED,eAAO,MAAM,+BAA+B,qGAGZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;
|
|
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 from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { getEventDetail } from './utils';\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}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={isLast}\n isDisplayed={!isMobile || isLast || index === 0}\n />\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, items.length - 1)\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 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 return (\n <nav\n {...baseProps}\n className={clsx(\n styles['breadcrumb-group'],\n isMobile && styles.mobile,\n items.length <= 2 && styles['mobile-short'],\n baseProps.className\n )}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent<\n BreadcrumbGroupProps,\n typeof BreadcrumbGroupImplementation\n>(BreadcrumbGroupImplementation);\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';
|
|
2
2
|
import { LinkItem } from '../button-dropdown/interfaces';
|
|
3
3
|
import { BaseComponentProps } from '../internal/base-component';
|
|
4
|
+
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
5
|
export interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> extends BaseComponentProps {
|
|
5
6
|
/**
|
|
6
7
|
* An array of breadcrumb items that describes the link hierarchy for this navigation.
|
|
@@ -45,6 +46,7 @@ export declare namespace BreadcrumbGroupProps {
|
|
|
45
46
|
href: string;
|
|
46
47
|
}
|
|
47
48
|
}
|
|
49
|
+
export type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = BreadcrumbGroupProps<T> & InternalBaseComponentProps;
|
|
48
50
|
export interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {
|
|
49
51
|
item: T;
|
|
50
52
|
isDisplayed: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,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,GAAG,0BAA0B,CAAC;AAEvD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI;IACtE,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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;CAC9D"}
|
|
@@ -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 { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/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 * attributed with the proper `aria-current` value and rendered as inactive.\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 interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n item: T;\n isDisplayed: boolean;\n isLast?: boolean;\n isCompressed?: 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}\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 { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\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 * attributed with the proper `aria-current` value and rendered as inactive.\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> & InternalBaseComponentProps;\n\nexport interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n item: T;\n isDisplayed: boolean;\n isLast?: boolean;\n isCompressed?: 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}\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface FunnelBreadcrumbItemProps {
|
|
3
|
+
text: string;
|
|
4
|
+
last: boolean;
|
|
5
|
+
hidden?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const FunnelBreadcrumbItem: React.ForwardRefExoticComponent<FunnelBreadcrumbItemProps & React.RefAttributes<HTMLSpanElement>>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=funnel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,yBAAyB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,mGAahC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
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 { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
|
|
5
|
+
import styles from './styles.css.js';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
export const FunnelBreadcrumbItem = React.forwardRef(({ text, hidden, last }, ref) => {
|
|
8
|
+
const funnelAttributes = {};
|
|
9
|
+
if (last) {
|
|
10
|
+
funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
|
|
11
|
+
}
|
|
12
|
+
return (React.createElement("span", Object.assign({}, funnelAttributes, { className: clsx(styles.text, hidden && styles['text-hidden']), ref: ref }), text));
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=funnel.js.map
|
|
@@ -0,0 +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,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAClG,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAClD,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,MAAM,gBAAgB,GAA2B,EAAE,CAAC;IACpD,IAAI,IAAI,EAAE;QACR,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,sBAAsB,CAAC;KACjE;IAED,OAAO,CACL,8CAAU,gBAAgB,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAChG,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 { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\ninterface FunnelBreadcrumbItemProps {\n text: string;\n last: boolean;\n hidden?: boolean;\n}\n\nexport const FunnelBreadcrumbItem = React.forwardRef<HTMLSpanElement, FunnelBreadcrumbItemProps>(\n ({ text, hidden, last }, ref) => {\n const funnelAttributes: Record<string, string> = {};\n if (last) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <span {...funnelAttributes} className={clsx(styles.text, hidden && styles['text-hidden'])} ref={ref}>\n {text}\n </span>\n );\n }\n);\n"]}
|
|
@@ -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;AA4F1E,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,eAsCxB"}
|
|
@@ -6,12 +6,11 @@ import InternalIcon from '../../icon/internal';
|
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
|
|
9
|
-
import { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';
|
|
10
|
-
import { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
|
|
11
9
|
import Tooltip from '../../internal/components/tooltip';
|
|
12
10
|
import { getEventDetail } from '../utils';
|
|
11
|
+
import { FunnelBreadcrumbItem } from './funnel';
|
|
13
12
|
const BreadcrumbItemWithPopover = (_a) => {
|
|
14
|
-
var { item, isLast, anchorAttributes
|
|
13
|
+
var { item, isLast, anchorAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes"]);
|
|
15
14
|
const [showPopover, setShowPopover] = useState(false);
|
|
16
15
|
const textRef = useRef(null);
|
|
17
16
|
const virtualTextRef = useRef(null);
|
|
@@ -46,7 +45,7 @@ const BreadcrumbItemWithPopover = (_a) => {
|
|
|
46
45
|
}, onBlur: () => setShowPopover(false), onMouseEnter: () => {
|
|
47
46
|
isTruncated(textRef, virtualTextRef) && setShowPopover(true);
|
|
48
47
|
}, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }),
|
|
49
|
-
React.createElement(
|
|
48
|
+
React.createElement(FunnelBreadcrumbItem, { ref: textRef, text: item.text, last: isLast }),
|
|
50
49
|
React.createElement("span", { className: styles['virtual-item'], ref: virtualTextRef }, item.text)),
|
|
51
50
|
showPopover && popoverContent));
|
|
52
51
|
};
|
|
@@ -69,13 +68,9 @@ export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast =
|
|
|
69
68
|
href: item.href || '#',
|
|
70
69
|
onClick: isLast ? preventDefault : onClickHandler,
|
|
71
70
|
};
|
|
72
|
-
const funnelAttributes = {};
|
|
73
|
-
if (isLast) {
|
|
74
|
-
funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
|
|
75
|
-
}
|
|
76
71
|
return (React.createElement("div", { className: clsx(styles.breadcrumb, isLast && styles.last) },
|
|
77
|
-
isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes
|
|
78
|
-
React.createElement(
|
|
72
|
+
isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes),
|
|
73
|
+
React.createElement(FunnelBreadcrumbItem, { text: item.text, last: isLast }))),
|
|
79
74
|
!isLast ? (React.createElement("span", { className: styles.icon },
|
|
80
75
|
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
|
|
81
76
|
}
|
|
@@ -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;AAE3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,
|
|
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';\n\nimport Tooltip from '../../internal/components/tooltip';\nimport { getEventDetail } from '../utils';\nimport { FunnelBreadcrumbItem } from './funnel';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\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 <FunnelBreadcrumbItem ref={textRef} text={item.text} last={isLast} />\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 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 {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <FunnelBreadcrumbItem text={item.text} last={isLast} />\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,14 @@
|
|
|
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-
|
|
4
|
+
"link": "awsui_link_1kosq_101th_97",
|
|
5
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_101th_101",
|
|
6
|
+
"icon": "awsui_icon_1kosq_101th_104",
|
|
7
|
+
"anchor": "awsui_anchor_1kosq_101th_109",
|
|
8
|
+
"last": "awsui_last_1kosq_101th_155",
|
|
9
|
+
"compressed": "awsui_compressed_1kosq_101th_165",
|
|
10
|
+
"text": "awsui_text_1kosq_101th_169",
|
|
11
|
+
"virtual-item": "awsui_virtual-item_1kosq_101th_176",
|
|
12
|
+
"text-hidden": "awsui_text-hidden_1kosq_101th_183"
|
|
12
13
|
};
|
|
13
14
|
|
|
@@ -94,19 +94,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.
|
|
97
|
+
.awsui_link_1kosq_101th_97:not(#\9):after {
|
|
98
98
|
display: none;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.
|
|
101
|
+
.awsui_breadcrumb_1kosq_101th_101:not(#\9) {
|
|
102
102
|
display: flex;
|
|
103
103
|
}
|
|
104
|
-
.
|
|
104
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_icon_1kosq_101th_104:not(#\9) {
|
|
105
105
|
margin-block: 0;
|
|
106
106
|
margin-inline: var(--space-xs-zb16t3, 8px);
|
|
107
107
|
color: var(--color-text-breadcrumb-icon-ma8w3r, #7d8998);
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9) {
|
|
110
110
|
color: var(--color-text-link-default-latg1a, #0972d3);
|
|
111
111
|
font-weight: inherit;
|
|
112
112
|
letter-spacing: normal;
|
|
@@ -120,30 +120,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
120
120
|
text-decoration-thickness: 1px;
|
|
121
121
|
}
|
|
122
122
|
@media (prefers-reduced-motion: reduce) {
|
|
123
|
-
.
|
|
123
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9) {
|
|
124
124
|
animation: none;
|
|
125
125
|
transition: none;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
.awsui-motion-disabled .
|
|
128
|
+
.awsui-motion-disabled .awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9) {
|
|
129
129
|
animation: none;
|
|
130
130
|
transition: none;
|
|
131
131
|
}
|
|
132
|
-
.
|
|
132
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):hover {
|
|
133
133
|
cursor: pointer;
|
|
134
134
|
color: var(--color-text-link-hover-8j6p14, #033160);
|
|
135
135
|
}
|
|
136
|
-
.
|
|
136
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):focus {
|
|
137
137
|
outline: none;
|
|
138
138
|
}
|
|
139
|
-
.
|
|
139
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):active {
|
|
140
140
|
color: var(--color-text-link-hover-8j6p14, #033160);
|
|
141
141
|
}
|
|
142
|
-
.
|
|
142
|
+
.awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):active, .awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):focus, .awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):hover {
|
|
143
143
|
text-decoration-line: underline;
|
|
144
144
|
text-decoration-color: currentColor;
|
|
145
145
|
}
|
|
146
|
-
body[data-awsui-focus-visible=true] .
|
|
146
|
+
body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_101th_101 > .awsui_anchor_1kosq_101th_109:not(#\9):focus {
|
|
147
147
|
outline: thin dotted;
|
|
148
148
|
outline: var(--border-link-focus-ring-outline-kkfop6, 0);
|
|
149
149
|
outline-offset: 2px;
|
|
@@ -154,30 +154,34 @@ body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_qx613_101 > .awsui_a
|
|
|
154
154
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
155
155
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-v8hkrl, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
156
156
|
}
|
|
157
|
-
.
|
|
157
|
+
.awsui_breadcrumb_1kosq_101th_101.awsui_last_1kosq_101th_155 > .awsui_icon_1kosq_101th_104:not(#\9) {
|
|
158
158
|
display: none;
|
|
159
159
|
}
|
|
160
|
-
.
|
|
160
|
+
.awsui_breadcrumb_1kosq_101th_101.awsui_last_1kosq_101th_155 > .awsui_anchor_1kosq_101th_109:not(#\9) {
|
|
161
161
|
color: var(--color-text-breadcrumb-current-bnqeha, #5f6b7a);
|
|
162
162
|
font-weight: 700;
|
|
163
163
|
text-decoration: none;
|
|
164
164
|
cursor: default;
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
-
.
|
|
167
|
+
.awsui_compressed_1kosq_101th_165:not(#\9) {
|
|
168
168
|
min-inline-size: 0;
|
|
169
169
|
overflow: hidden;
|
|
170
170
|
}
|
|
171
|
-
.
|
|
171
|
+
.awsui_compressed_1kosq_101th_165 > .awsui_text_1kosq_101th_169:not(#\9) {
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
text-overflow: ellipsis;
|
|
174
174
|
white-space: nowrap;
|
|
175
175
|
display: block;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.awsui_virtual-
|
|
178
|
+
.awsui_virtual-item_1kosq_101th_176:not(#\9) {
|
|
179
179
|
position: absolute !important;
|
|
180
180
|
inset-block-start: -9999px !important;
|
|
181
181
|
inset-inline-start: -9999px !important;
|
|
182
182
|
visibility: hidden;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.awsui_text-hidden_1kosq_101th_183:not(#\9) {
|
|
186
|
+
display: none;
|
|
183
187
|
}
|
|
@@ -2,13 +2,14 @@
|
|
|
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-
|
|
5
|
+
"link": "awsui_link_1kosq_101th_97",
|
|
6
|
+
"breadcrumb": "awsui_breadcrumb_1kosq_101th_101",
|
|
7
|
+
"icon": "awsui_icon_1kosq_101th_104",
|
|
8
|
+
"anchor": "awsui_anchor_1kosq_101th_109",
|
|
9
|
+
"last": "awsui_last_1kosq_101th_155",
|
|
10
|
+
"compressed": "awsui_compressed_1kosq_101th_165",
|
|
11
|
+
"text": "awsui_text_1kosq_101th_169",
|
|
12
|
+
"virtual-item": "awsui_virtual-item_1kosq_101th_176",
|
|
13
|
+
"text-hidden": "awsui_text-hidden_1kosq_101th_183"
|
|
13
14
|
};
|
|
14
15
|
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BreadcrumbGroupProps, InternalBreadcrumbGroupProps } from './interfaces';
|
|
3
|
+
export declare function BreadcrumbGroupSkeleton<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({ items, }: InternalBreadcrumbGroupProps<T>): JSX.Element;
|
|
4
|
+
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/skeleton.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAElF,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EACvG,KAAK,GACN,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAMjC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
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 { FunnelBreadcrumbItem } from './item/funnel';
|
|
5
|
+
export function BreadcrumbGroupSkeleton({ items, }) {
|
|
6
|
+
const lastItem = items[items.length - 1];
|
|
7
|
+
if (!lastItem) {
|
|
8
|
+
return React.createElement(React.Fragment, null);
|
|
9
|
+
}
|
|
10
|
+
return React.createElement(FunnelBreadcrumbItem, { hidden: true, last: true, text: lastItem.text });
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=skeleton.js.map
|
|
@@ -0,0 +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;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,UAAU,uBAAuB,CAAkE,EACvG,KAAK,GAC2B;IAChC,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,yCAAK,CAAC;KACd;IACD,OAAO,oBAAC,oBAAoB,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAI,CAAC;AACjF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { FunnelBreadcrumbItem } from './item/funnel';\nimport { BreadcrumbGroupProps, InternalBreadcrumbGroupProps } from './interfaces';\n\nexport function BreadcrumbGroupSkeleton<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items,\n}: InternalBreadcrumbGroupProps<T>) {\n const lastItem = items[items.length - 1];\n if (!lastItem) {\n return <></>;\n }\n return <FunnelBreadcrumbItem hidden={true} last={true} text={lastItem.text} />;\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED