@cloudscape-design/components 3.0.761 → 3.0.763
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/app-layout/classic.js +2 -2
- package/app-layout/classic.js.map +1 -1
- package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
- package/app-layout/visual-refresh/navigation.js +1 -1
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.js +9 -1
- package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/index.js +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/skeleton/index.js +2 -2
- package/app-layout/visual-refresh-toolbar/skeleton/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/index.js +5 -3
- package/app-layout/visual-refresh-toolbar/split-panel/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js +15 -4
- package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/styles.css.js +13 -12
- package/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css +18 -14
- package/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js +13 -12
- package/breadcrumb-group/implementation.js +1 -1
- package/breadcrumb-group/implementation.js.map +1 -1
- package/breadcrumb-group/styles.css.js +9 -8
- package/breadcrumb-group/styles.scoped.css +10 -9
- package/breadcrumb-group/styles.selectors.js +9 -8
- package/container/use-sticky-header.d.ts.map +1 -1
- package/container/use-sticky-header.js +1 -1
- package/container/use-sticky-header.js.map +1 -1
- package/flashbar/collapsible-flashbar.js +1 -1
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/internal/components/options-list/index.d.ts.map +1 -1
- package/internal/components/options-list/index.js +1 -1
- package/internal/components/options-list/index.js.map +1 -1
- package/internal/components/visual-context/index.js +1 -1
- package/internal/components/visual-context/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/dom.d.ts +0 -1
- package/internal/utils/dom.d.ts.map +1 -1
- package/internal/utils/dom.js +1 -13
- package/internal/utils/dom.js.map +1 -1
- package/internal/utils/node-belongs.js +2 -2
- package/internal/utils/node-belongs.js.map +1 -1
- package/internal/utils/scrollable-containers.d.ts.map +1 -1
- package/internal/utils/scrollable-containers.js +1 -1
- package/internal/utils/scrollable-containers.js.map +1 -1
- package/package.json +1 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +2 -0
- package/table/resizer/index.js.map +1 -1
- package/table/selection/use-selection-focus-move.d.ts.map +1 -1
- package/table/selection/use-selection-focus-move.js +1 -1
- package/table/selection/use-selection-focus-move.js.map +1 -1
- package/table/use-row-events.d.ts.map +1 -1
- package/table/use-row-events.js +1 -1
- package/table/use-row-events.js.map +1 -1
|
@@ -69,8 +69,19 @@ toolbarProps = {}, }) {
|
|
|
69
69
|
window.removeEventListener('scroll', updateScrollDirection);
|
|
70
70
|
};
|
|
71
71
|
}, [pinnedToolbar, setToolbarState, toolbarState]);
|
|
72
|
+
const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (anyPanelOpenInMobile) {
|
|
75
|
+
document.body.classList.add(styles['block-body-scroll']);
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
document.body.classList.remove(styles['block-body-scroll']);
|
|
79
|
+
}
|
|
80
|
+
return () => {
|
|
81
|
+
document.body.classList.remove(styles['block-body-scroll']);
|
|
82
|
+
};
|
|
83
|
+
}, [anyPanelOpenInMobile]);
|
|
72
84
|
const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;
|
|
73
|
-
const disableButtons = !!isMobile && (!!activeDrawerId || !!navigationOpen);
|
|
74
85
|
return (React.createElement(ToolbarSlot, { ref: ref, className: clsx(styles['universal-toolbar'], testutilStyles.toolbar, {
|
|
75
86
|
[testutilStyles['mobile-bar']]: isMobile,
|
|
76
87
|
[styles['toolbar-hidden']]: toolbarHidden,
|
|
@@ -79,12 +90,12 @@ toolbarProps = {}, }) {
|
|
|
79
90
|
} },
|
|
80
91
|
React.createElement("div", { className: styles['toolbar-container'] },
|
|
81
92
|
hasNavigation && (React.createElement("nav", { className: clsx(styles['universal-toolbar-nav']) },
|
|
82
|
-
React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen), ref: navigationFocusRef, selected: navigationOpen, disabled:
|
|
93
|
+
React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen), ref: navigationFocusRef, selected: navigationOpen, disabled: anyPanelOpenInMobile }))),
|
|
83
94
|
(breadcrumbs || discoveredBreadcrumbs) && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) },
|
|
84
95
|
breadcrumbs,
|
|
85
96
|
discoveredBreadcrumbs && (React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))),
|
|
86
|
-
((drawers && drawers.length > 0) || (hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("
|
|
87
|
-
React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: drawers !== null && drawers !== void 0 ? drawers : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled:
|
|
97
|
+
((drawers && drawers.length > 0) || (hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("div", { className: clsx(styles['universal-toolbar-drawers']) },
|
|
98
|
+
React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: drawers !== null && drawers !== void 0 ? drawers : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled: anyPanelOpenInMobile }))))));
|
|
88
99
|
}
|
|
89
100
|
export const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);
|
|
90
101
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n return {\n ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n drawers: toolbarProps.drawers ?? legacyProps.drawers,\n drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n ...legacyProps.splitPanelToggleConfig,\n active: legacyProps.splitPanelOpen,\n controlId: legacyProps.splitPanelControlId,\n position: legacyProps.splitPanelPosition,\n },\n onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n };\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = convertLegacyProps(toolbarProps, appLayoutInternals);\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n const disableButtons = !!isMobile && (!!activeDrawerId || !!navigationOpen);\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && (\n <nav className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(!navigationOpen)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n disabled={disableButtons}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && (\n <BreadcrumbGroupImplementation\n {...discoveredBreadcrumbs}\n data-awsui-discovered-breadcrumbs={true}\n __injectAnalyticsComponentMetadata={true}\n />\n )}\n </div>\n )}\n {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <span className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={disableButtons}\n />\n </span>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.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 } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n return {\n ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n drawers: toolbarProps.drawers ?? legacyProps.drawers,\n drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n ...legacyProps.splitPanelToggleConfig,\n active: legacyProps.splitPanelOpen,\n controlId: legacyProps.splitPanelControlId,\n position: legacyProps.splitPanelPosition,\n },\n onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n };\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = convertLegacyProps(toolbarProps, appLayoutInternals);\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && (\n <nav className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(!navigationOpen)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && (\n <BreadcrumbGroupImplementation\n {...discoveredBreadcrumbs}\n data-awsui-discovered-breadcrumbs={true}\n __injectAnalyticsComponentMetadata={true}\n />\n )}\n </div>\n )}\n {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n />\n </div>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"universal-toolbar": "awsui_universal-
|
|
5
|
-
"disable-body-scroll": "awsui_disable-body-
|
|
6
|
-
"toolbar-hidden": "awsui_toolbar-
|
|
7
|
-
"toolbar-container": "awsui_toolbar-
|
|
8
|
-
"universal-toolbar-nav": "awsui_universal-toolbar-
|
|
9
|
-
"universal-toolbar-breadcrumbs": "awsui_universal-toolbar-
|
|
10
|
-
"universal-toolbar-drawers": "awsui_universal-toolbar-
|
|
11
|
-
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-
|
|
12
|
-
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-
|
|
13
|
-
"drawers-trigger-content": "awsui_drawers-trigger-
|
|
14
|
-
"group-divider": "awsui_group-
|
|
15
|
-
"drawers-trigger": "awsui_drawers-
|
|
4
|
+
"universal-toolbar": "awsui_universal-toolbar_1kzri_b9cfh_141",
|
|
5
|
+
"disable-body-scroll": "awsui_disable-body-scroll_1kzri_b9cfh_162",
|
|
6
|
+
"toolbar-hidden": "awsui_toolbar-hidden_1kzri_b9cfh_165",
|
|
7
|
+
"toolbar-container": "awsui_toolbar-container_1kzri_b9cfh_168",
|
|
8
|
+
"universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_b9cfh_177",
|
|
9
|
+
"universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_b9cfh_181",
|
|
10
|
+
"universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_b9cfh_186",
|
|
11
|
+
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_b9cfh_194",
|
|
12
|
+
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_b9cfh_195",
|
|
13
|
+
"drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_b9cfh_241",
|
|
14
|
+
"group-divider": "awsui_group-divider_1kzri_b9cfh_250",
|
|
15
|
+
"drawers-trigger": "awsui_drawers-trigger_1kzri_b9cfh_241",
|
|
16
|
+
"block-body-scroll": "awsui_block-body-scroll_1kzri_b9cfh_263"
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -138,7 +138,7 @@
|
|
|
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
|
-
.awsui_universal-
|
|
141
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141:not(#\9) {
|
|
142
142
|
background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
|
|
143
143
|
box-sizing: border-box;
|
|
144
144
|
padding-block: 0;
|
|
@@ -150,22 +150,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
150
150
|
transition-property: inset-block-start, opacity;
|
|
151
151
|
}
|
|
152
152
|
@media (prefers-reduced-motion: reduce) {
|
|
153
|
-
.awsui_universal-
|
|
153
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141:not(#\9) {
|
|
154
154
|
animation: none;
|
|
155
155
|
transition: none;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
-
.awsui-motion-disabled .awsui_universal-
|
|
158
|
+
.awsui-motion-disabled .awsui_universal-toolbar_1kzri_b9cfh_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_b9cfh_141:not(#\9) {
|
|
159
159
|
animation: none;
|
|
160
160
|
transition: none;
|
|
161
161
|
}
|
|
162
|
-
.awsui_universal-
|
|
162
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141.awsui_disable-body-scroll_1kzri_b9cfh_162:not(#\9) {
|
|
163
163
|
inset-block-start: 0px;
|
|
164
164
|
}
|
|
165
|
-
.awsui_universal-
|
|
165
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141.awsui_toolbar-hidden_1kzri_b9cfh_165:not(#\9) {
|
|
166
166
|
opacity: 0;
|
|
167
167
|
}
|
|
168
|
-
.awsui_universal-
|
|
168
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141 > .awsui_toolbar-container_1kzri_b9cfh_168:not(#\9) {
|
|
169
169
|
block-size: 100%;
|
|
170
170
|
align-items: center;
|
|
171
171
|
display: grid;
|
|
@@ -174,16 +174,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
174
174
|
grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
|
|
175
175
|
grid-template-rows: 1fr;
|
|
176
176
|
}
|
|
177
|
-
.awsui_universal-
|
|
177
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141 > .awsui_toolbar-container_1kzri_b9cfh_168 > .awsui_universal-toolbar-nav_1kzri_b9cfh_177:not(#\9) {
|
|
178
178
|
grid-column: 1;
|
|
179
179
|
padding-inline-end: var(--space-static-xxs-82cdfi, 4px);
|
|
180
180
|
}
|
|
181
|
-
.awsui_universal-
|
|
181
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141 > .awsui_toolbar-container_1kzri_b9cfh_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_b9cfh_181:not(#\9) {
|
|
182
182
|
grid-column: 2;
|
|
183
183
|
background-color: transparent;
|
|
184
184
|
flex: 1 0;
|
|
185
185
|
}
|
|
186
|
-
.awsui_universal-
|
|
186
|
+
.awsui_universal-toolbar_1kzri_b9cfh_141 > .awsui_toolbar-container_1kzri_b9cfh_168 > .awsui_universal-toolbar-drawers_1kzri_b9cfh_186:not(#\9) {
|
|
187
187
|
grid-column: 3;
|
|
188
188
|
column-gap: var(--space-static-xs-7sfb63, 8px);
|
|
189
189
|
display: flex;
|
|
@@ -191,8 +191,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
191
191
|
block-size: 100%;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.awsui_drawers-desktop-triggers-
|
|
195
|
-
.awsui_drawers-mobile-triggers-
|
|
194
|
+
.awsui_drawers-desktop-triggers-container_1kzri_b9cfh_194:not(#\9),
|
|
195
|
+
.awsui_drawers-mobile-triggers-container_1kzri_b9cfh_195:not(#\9) {
|
|
196
196
|
border-collapse: separate;
|
|
197
197
|
border-spacing: 0;
|
|
198
198
|
box-sizing: border-box;
|
|
@@ -239,7 +239,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
239
239
|
inline-size: 100%;
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
.awsui_drawers-trigger-
|
|
242
|
+
.awsui_drawers-trigger-content_1kzri_b9cfh_241:not(#\9) {
|
|
243
243
|
block-size: 100%;
|
|
244
244
|
align-items: center;
|
|
245
245
|
display: flex;
|
|
@@ -248,15 +248,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
248
248
|
justify-content: flex-end;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
-
.awsui_group-
|
|
251
|
+
.awsui_group-divider_1kzri_b9cfh_250:not(#\9) {
|
|
252
252
|
border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
253
253
|
block-size: 60%;
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
@media (max-width: 688px) {
|
|
257
|
-
.awsui_drawers-
|
|
257
|
+
.awsui_drawers-trigger_1kzri_b9cfh_241:not(#\9) {
|
|
258
258
|
display: flex;
|
|
259
259
|
justify-content: center;
|
|
260
260
|
align-items: center;
|
|
261
261
|
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.awsui_block-body-scroll_1kzri_b9cfh_263:not(#\9) {
|
|
265
|
+
overflow: hidden;
|
|
262
266
|
}
|
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"universal-toolbar": "awsui_universal-
|
|
6
|
-
"disable-body-scroll": "awsui_disable-body-
|
|
7
|
-
"toolbar-hidden": "awsui_toolbar-
|
|
8
|
-
"toolbar-container": "awsui_toolbar-
|
|
9
|
-
"universal-toolbar-nav": "awsui_universal-toolbar-
|
|
10
|
-
"universal-toolbar-breadcrumbs": "awsui_universal-toolbar-
|
|
11
|
-
"universal-toolbar-drawers": "awsui_universal-toolbar-
|
|
12
|
-
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-
|
|
13
|
-
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-
|
|
14
|
-
"drawers-trigger-content": "awsui_drawers-trigger-
|
|
15
|
-
"group-divider": "awsui_group-
|
|
16
|
-
"drawers-trigger": "awsui_drawers-
|
|
5
|
+
"universal-toolbar": "awsui_universal-toolbar_1kzri_b9cfh_141",
|
|
6
|
+
"disable-body-scroll": "awsui_disable-body-scroll_1kzri_b9cfh_162",
|
|
7
|
+
"toolbar-hidden": "awsui_toolbar-hidden_1kzri_b9cfh_165",
|
|
8
|
+
"toolbar-container": "awsui_toolbar-container_1kzri_b9cfh_168",
|
|
9
|
+
"universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_b9cfh_177",
|
|
10
|
+
"universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_b9cfh_181",
|
|
11
|
+
"universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_b9cfh_186",
|
|
12
|
+
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_b9cfh_194",
|
|
13
|
+
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_b9cfh_195",
|
|
14
|
+
"drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_b9cfh_241",
|
|
15
|
+
"group-divider": "awsui_group-divider_1kzri_b9cfh_250",
|
|
16
|
+
"drawers-trigger": "awsui_drawers-trigger_1kzri_b9cfh_241",
|
|
17
|
+
"block-body-scroll": "awsui_block-body-scroll_1kzri_b9cfh_263"
|
|
17
18
|
};
|
|
18
19
|
|
|
@@ -109,7 +109,7 @@ export function BreadcrumbGroupImplementation(_a) {
|
|
|
109
109
|
});
|
|
110
110
|
const hiddenBreadcrumbItems = items.map((item, index) => {
|
|
111
111
|
const isLast = index === items.length - 1;
|
|
112
|
-
return (React.createElement("li", { className: styles
|
|
112
|
+
return (React.createElement("li", { className: styles['ghost-item'], key: index, ref: node => setBreadcrumb('ghost', `${index}`, node) },
|
|
113
113
|
React.createElement(BreadcrumbItem, { item: item, isLast: isLast, isGhost: true })));
|
|
114
114
|
});
|
|
115
115
|
const getEventItem = (e) => {
|
|
@@ -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.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 { 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,13 +1,14 @@
|
|
|
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
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
4
|
+
"breadcrumb-group": "awsui_breadcrumb-group_d19fg_fgkxz_141",
|
|
5
|
+
"breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_fgkxz_179",
|
|
6
|
+
"ghost": "awsui_ghost_d19fg_fgkxz_190",
|
|
7
|
+
"item": "awsui_item_d19fg_fgkxz_195",
|
|
8
|
+
"ghost-item": "awsui_ghost-item_d19fg_fgkxz_196",
|
|
9
|
+
"ellipsis": "awsui_ellipsis_d19fg_fgkxz_197",
|
|
10
|
+
"hide": "awsui_hide_d19fg_fgkxz_204",
|
|
11
|
+
"visible": "awsui_visible_d19fg_fgkxz_210",
|
|
12
|
+
"icon": "awsui_icon_d19fg_fgkxz_214"
|
|
12
13
|
};
|
|
13
14
|
|
|
@@ -138,7 +138,7 @@
|
|
|
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
|
-
.awsui_breadcrumb-
|
|
141
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141:not(#\9) {
|
|
142
142
|
border-collapse: separate;
|
|
143
143
|
border-spacing: 0;
|
|
144
144
|
box-sizing: border-box;
|
|
@@ -177,7 +177,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
177
177
|
padding-block: var(--space-xxs-p8yyaw, 4px);
|
|
178
178
|
padding-inline: 0;
|
|
179
179
|
}
|
|
180
|
-
.awsui_breadcrumb-
|
|
180
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179:not(#\9) {
|
|
181
181
|
display: flex;
|
|
182
182
|
align-items: center;
|
|
183
183
|
padding-block: 0;
|
|
@@ -188,30 +188,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
188
188
|
inline-size: 100%;
|
|
189
189
|
flex-wrap: nowrap;
|
|
190
190
|
}
|
|
191
|
-
.awsui_breadcrumb-
|
|
191
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179.awsui_ghost_d19fg_fgkxz_190:not(#\9) {
|
|
192
192
|
flex-wrap: wrap;
|
|
193
193
|
position: absolute;
|
|
194
194
|
inset-inline-start: -9000px;
|
|
195
195
|
}
|
|
196
|
-
.awsui_breadcrumb-
|
|
197
|
-
.awsui_breadcrumb-
|
|
196
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_item_d19fg_fgkxz_195:not(#\9),
|
|
197
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_ghost-item_d19fg_fgkxz_196:not(#\9),
|
|
198
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_ellipsis_d19fg_fgkxz_197:not(#\9) {
|
|
198
199
|
display: inline-block;
|
|
199
200
|
padding-block: 0;
|
|
200
201
|
padding-inline: 0;
|
|
201
202
|
margin-block: 0;
|
|
202
203
|
margin-inline: 0;
|
|
203
204
|
}
|
|
204
|
-
.awsui_breadcrumb-
|
|
205
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_item_d19fg_fgkxz_195.awsui_hide_d19fg_fgkxz_204:not(#\9) {
|
|
205
206
|
display: none;
|
|
206
207
|
}
|
|
207
|
-
.awsui_breadcrumb-
|
|
208
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_ellipsis_d19fg_fgkxz_197:not(#\9) {
|
|
208
209
|
display: none;
|
|
209
210
|
}
|
|
210
|
-
.awsui_breadcrumb-
|
|
211
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_ellipsis_d19fg_fgkxz_197.awsui_visible_d19fg_fgkxz_210:not(#\9) {
|
|
211
212
|
display: flex;
|
|
212
213
|
flex-shrink: 0;
|
|
213
214
|
}
|
|
214
|
-
.awsui_breadcrumb-
|
|
215
|
+
.awsui_breadcrumb-group_d19fg_fgkxz_141 > .awsui_breadcrumb-group-list_d19fg_fgkxz_179 > .awsui_ellipsis_d19fg_fgkxz_197 > .awsui_icon_d19fg_fgkxz_214:not(#\9) {
|
|
215
216
|
margin-block: 0;
|
|
216
217
|
margin-inline: 10px;
|
|
217
218
|
color: var(--color-text-breadcrumb-icon-ma8w3r, #7d8998);
|
|
@@ -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
|
-
"breadcrumb-group": "awsui_breadcrumb-
|
|
6
|
-
"breadcrumb-group-list": "awsui_breadcrumb-group-
|
|
7
|
-
"ghost": "
|
|
8
|
-
"item": "
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
5
|
+
"breadcrumb-group": "awsui_breadcrumb-group_d19fg_fgkxz_141",
|
|
6
|
+
"breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_fgkxz_179",
|
|
7
|
+
"ghost": "awsui_ghost_d19fg_fgkxz_190",
|
|
8
|
+
"item": "awsui_item_d19fg_fgkxz_195",
|
|
9
|
+
"ghost-item": "awsui_ghost-item_d19fg_fgkxz_196",
|
|
10
|
+
"ellipsis": "awsui_ellipsis_d19fg_fgkxz_197",
|
|
11
|
+
"hide": "awsui_hide_d19fg_fgkxz_204",
|
|
12
|
+
"visible": "awsui_visible_d19fg_fgkxz_210",
|
|
13
|
+
"icon": "awsui_icon_d19fg_fgkxz_214"
|
|
13
14
|
};
|
|
14
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAqD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAqD,MAAM,OAAO,CAAC;AASpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,GACnB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM,oBACX,OAAO;;;;;;;;;;CAoE1B,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { createContext, useCallback, useEffect, useLayoutEffect, useState } from 'react';
|
|
4
|
+
import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
|
|
4
5
|
import * as tokens from '../internal/generated/styles/tokens';
|
|
5
6
|
import { useMobile } from '../internal/hooks/use-mobile';
|
|
6
7
|
import globalVars from '../internal/styles/global-vars';
|
|
7
|
-
import { findUpUntil } from '../internal/utils/dom';
|
|
8
8
|
import { getOverflowParents } from '../internal/utils/scrollable-containers';
|
|
9
9
|
export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }) {
|
|
10
10
|
const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAa,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpG,OAAO,KAAK,MAAM,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"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 { createContext, RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\ninterface StickyHeaderContextProps {\n isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n isMobile: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n hasInnerOverflowParents: boolean;\n __additionalOffset?: boolean;\n}\n\nexport function computeOffset({\n isMobile,\n __stickyOffset,\n __mobileStickyOffset,\n hasInnerOverflowParents,\n __additionalOffset,\n}: ComputeOffsetProps): string {\n const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n return `${localOffset}px`;\n }\n const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n isStuck: false,\n});\n\nexport const useStickyHeader = (\n rootRef: RefObject<HTMLDivElement>,\n headerRef: RefObject<HTMLDivElement>,\n __stickyHeader?: boolean,\n __stickyOffset?: number,\n __mobileStickyOffset?: number,\n __disableMobile?: boolean,\n __additionalOffset = false\n) => {\n const isMobile = useMobile();\n const disableSticky = isMobile && __disableMobile;\n const isSticky = !disableSticky && !!__stickyHeader;\n\n // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n const [isStuck, setIsStuck] = useState(false);\n useLayoutEffect(() => {\n if (rootRef.current) {\n const overflowParents = getOverflowParents(rootRef.current);\n const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n // In both versions of the app layout, the scrolling element for disableBodyScroll\n // is the <main>. If the closest overflow parent is also the closest <main> and we have\n // offset values, it's safe to assume that it's the app layout scroll root and we\n // should stop there.\n setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n }\n }, [rootRef]);\n\n const computedOffset = computeOffset({\n isMobile,\n __stickyOffset,\n __mobileStickyOffset,\n hasInnerOverflowParents,\n __additionalOffset,\n });\n\n const stickyStyles = isSticky\n ? {\n style: {\n top: computedOffset,\n },\n }\n : {};\n\n // \"stuck\" state, when the header has moved from its original posititon has a\n // box-shadow, applied here by a \"header-stuck\" className\n const checkIfStuck = useCallback(() => {\n if (rootRef.current && headerRef.current) {\n const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n const headerTop = headerRef.current.getBoundingClientRect().top;\n\n if (rootTop < headerTop) {\n setIsStuck(true);\n } else {\n setIsStuck(false);\n }\n }\n }, [rootRef, headerRef]);\n useEffect(() => {\n if (isSticky) {\n window.addEventListener('scroll', checkIfStuck, true);\n window.addEventListener('resize', checkIfStuck);\n return () => {\n window.removeEventListener('scroll', checkIfStuck, true);\n window.removeEventListener('resize', checkIfStuck);\n };\n }\n }, [isSticky, checkIfStuck]);\n return {\n isSticky,\n isStuck,\n stickyStyles,\n };\n};\n"]}
|
|
@@ -4,6 +4,7 @@ import { __rest } from "tslib";
|
|
|
4
4
|
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { TransitionGroup } from 'react-transition-group';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
+
import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
|
|
7
8
|
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
8
9
|
import { useInternalI18n } from '../i18n/context';
|
|
9
10
|
import InternalIcon from '../icon/internal';
|
|
@@ -13,7 +14,6 @@ import { getVisualContextClassname } from '../internal/components/visual-context
|
|
|
13
14
|
import customCssProps from '../internal/generated/custom-css-properties';
|
|
14
15
|
import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
|
|
15
16
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
16
|
-
import { findUpUntil } from '../internal/utils/dom';
|
|
17
17
|
import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
|
|
18
18
|
import { throttle } from '../internal/utils/throttle';
|
|
19
19
|
import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';
|