@cloudscape-design/components 3.0.338 → 3.0.340
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/alert/index.d.ts.map +1 -1
- package/alert/index.js +36 -1
- package/alert/index.js.map +1 -1
- package/app-layout/drawer/index.js +6 -5
- package/app-layout/drawer/index.js.map +1 -1
- package/app-layout/drawer/interfaces.d.ts +6 -3
- package/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/app-layout/drawer/interfaces.js.map +1 -1
- package/app-layout/drawer/styles.css.js +10 -10
- package/app-layout/drawer/styles.scoped.css +32 -35
- package/app-layout/drawer/styles.selectors.js +10 -10
- package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/app-layout/mobile-toolbar/index.js +6 -5
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/mobile-toolbar/styles.css.js +8 -6
- package/app-layout/mobile-toolbar/styles.scoped.css +11 -23
- package/app-layout/mobile-toolbar/styles.selectors.js +8 -6
- package/app-layout/toggles/index.d.ts +3 -1
- package/app-layout/toggles/index.d.ts.map +1 -1
- package/app-layout/toggles/index.js +6 -3
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/toggles/interfaces.d.ts +3 -2
- package/app-layout/toggles/interfaces.d.ts.map +1 -1
- package/app-layout/toggles/interfaces.js.map +1 -1
- package/app-layout/toggles/styles.css.js +2 -1
- package/app-layout/toggles/styles.scoped.css +31 -1
- package/app-layout/toggles/styles.selectors.js +2 -1
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +2 -2
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.d.ts +1 -0
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +2 -2
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +2 -2
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/hooks/use-funnel.js +1 -1
- package/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/internal/base-component/styles.scoped.css +0 -5
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +0 -27
- package/internal/generated/theming/index.js +0 -27
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +22 -3
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +28 -28
- package/table/body-cell/styles.scoped.css +93 -77
- package/table/body-cell/styles.selectors.js +28 -28
- package/test-utils/dom/app-layout/index.d.ts +1 -0
- package/test-utils/dom/app-layout/index.js +3 -0
- package/test-utils/dom/app-layout/index.js.map +1 -1
- package/test-utils/selectors/app-layout/index.d.ts +1 -0
- package/test-utils/selectors/app-layout/index.js +3 -0
- package/test-utils/selectors/app-layout/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
package/alert/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAyCpF"}
|
package/alert/index.js
CHANGED
|
@@ -1,13 +1,48 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
6
6
|
import InternalAlert from './internal';
|
|
7
7
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
8
|
+
import { FunnelMetrics } from '../internal/analytics';
|
|
9
|
+
import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
10
|
+
import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';
|
|
8
11
|
export default function Alert(_a) {
|
|
9
12
|
var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
|
|
10
13
|
const baseComponentProps = useBaseComponent('Alert');
|
|
14
|
+
const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
|
|
15
|
+
const { stepNumber, stepNameSelector } = useFunnelStep();
|
|
16
|
+
const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {
|
|
19
|
+
const stepName = getNameFromSelector(stepNameSelector);
|
|
20
|
+
const subStepName = getNameFromSelector(subStepNameSelector);
|
|
21
|
+
errorCount.current++;
|
|
22
|
+
if (subStepSelector) {
|
|
23
|
+
FunnelMetrics.funnelSubStepError({
|
|
24
|
+
funnelInteractionId,
|
|
25
|
+
subStepSelector,
|
|
26
|
+
subStepName,
|
|
27
|
+
subStepNameSelector,
|
|
28
|
+
stepNumber,
|
|
29
|
+
stepName,
|
|
30
|
+
stepNameSelector,
|
|
31
|
+
subStepAllSelector: getSubStepAllSelector(),
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
FunnelMetrics.funnelError({
|
|
36
|
+
funnelInteractionId,
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
return () => {
|
|
40
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
+
errorCount.current--;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
|
+
}, [funnelInteractionId, visible, submissionAttempt, errorCount]);
|
|
11
46
|
return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps));
|
|
12
47
|
}
|
|
13
48
|
applyDisplayName(Alert, 'Alert');
|
package/alert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAI7F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACxF,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACzD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,IAAI,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC5F,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,eAAe;oBACf,WAAW;oBACX,mBAAmB;oBACnB,UAAU;oBACV,QAAQ;oBACR,gBAAgB;oBAChB,kBAAkB,EAAE,qBAAqB,EAAE;iBAC5C,CAAC,CAAC;aACJ;iBAAM;gBACL,aAAa,CAAC,WAAW,CAAC;oBACxB,mBAAmB;iBACpB,CAAC,CAAC;aACJ;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAElE,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n const baseComponentProps = useBaseComponent('Alert');\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n useEffect(() => {\n if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n if (subStepSelector) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n } else {\n FunnelMetrics.funnelError({\n funnelInteractionId,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import React, { useRef } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { ToggleButton, CloseButton, togglesConfig } from '../toggles';
|
|
6
6
|
import testutilStyles from '../test-classes/styles.css.js';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
|
|
@@ -34,7 +34,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
|
|
|
34
34
|
});
|
|
35
35
|
const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);
|
|
36
36
|
const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
|
|
37
|
-
React.createElement(
|
|
37
|
+
React.createElement(ToggleButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
|
|
38
38
|
return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
|
|
39
39
|
[styles['drawer-closed']]: !isOpen,
|
|
40
40
|
[testutilStyles['drawer-closed']]: !isOpen,
|
|
@@ -58,7 +58,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
} },
|
|
61
|
-
React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
|
|
61
|
+
React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
|
|
62
62
|
!isMobile && regularOpenButton,
|
|
63
63
|
resizeHandle,
|
|
64
64
|
React.createElement(TagName, { "aria-label": drawers ? drawerMainLabel : mainLabel, "aria-hidden": !isOpen },
|
|
@@ -73,9 +73,10 @@ export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers,
|
|
|
73
73
|
return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
|
|
74
74
|
[styles['drawer-mobile']]: isMobile,
|
|
75
75
|
}) },
|
|
76
|
-
React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className:
|
|
76
|
+
React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: styles['drawer-content'] }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
|
|
77
77
|
var _a;
|
|
78
|
-
return (React.createElement(
|
|
78
|
+
return (React.createElement("span", { key: index, className: clsx(styles['drawer-trigger'], drawers.activeDrawerId === item.id && styles['drawer-trigger-active']), onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }) },
|
|
79
|
+
React.createElement(ToggleButton, { className: toggleClassName, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
|
|
79
80
|
}))))));
|
|
80
81
|
}
|
|
81
82
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n drawerMainLabel: labels?.content,\n drawerOpenLabel: labels?.triggerButton,\n drawerCloseLabel: labels?.closeButton,\n });\n const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <AppLayoutButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target ||\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['non-interactive'])}\n >\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <AppLayoutButton\n className={clsx(\n toggleClassName,\n styles.trigger,\n styles['trigger-drawer'],\n drawers.activeDrawerId === item.id && styles.selected\n )}\n key={`drawer-trigger-${index}`}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n ariaExpanded={drawers.activeDrawerId !== undefined}\n />\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n drawerMainLabel: labels?.content,\n drawerOpenLabel: labels?.triggerButton,\n drawerCloseLabel: labels?.closeButton,\n });\n const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target ||\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div style={{ top: topOffset, bottom: bottomOffset }} className={styles['drawer-content']}>\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <span\n key={index}\n className={clsx(\n styles['drawer-trigger'],\n drawers.activeDrawerId === item.id && styles['drawer-trigger-active']\n )}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n >\n <ToggleButton\n className={toggleClassName}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps } from '../../button/interfaces';
|
|
3
2
|
import { togglesConfig } from '../toggles';
|
|
4
3
|
import { AppLayoutProps } from '../interfaces';
|
|
5
4
|
import { IconProps } from '../../icon/interfaces';
|
|
@@ -10,8 +9,12 @@ export interface DesktopDrawerProps {
|
|
|
10
9
|
toggleClassName: string;
|
|
11
10
|
closeClassName: string;
|
|
12
11
|
toggleRefs: {
|
|
13
|
-
toggle: React.Ref<
|
|
14
|
-
|
|
12
|
+
toggle: React.Ref<{
|
|
13
|
+
focus(): void;
|
|
14
|
+
}>;
|
|
15
|
+
close: React.Ref<{
|
|
16
|
+
focus(): void;
|
|
17
|
+
}>;
|
|
15
18
|
};
|
|
16
19
|
width: number;
|
|
17
20
|
topOffset: number | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n ariaLabels: AppLayoutProps.Labels | undefined;\n drawersAriaLabels?: DrawerItemAriaLabels | undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string | undefined;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"toggle": "
|
|
5
|
-
"drawer-triggers": "awsui_drawer-
|
|
6
|
-
"drawer": "
|
|
7
|
-
"drawer-mobile": "awsui_drawer-
|
|
8
|
-
"drawer-closed": "awsui_drawer-
|
|
9
|
-
"drawer-content": "awsui_drawer-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"trigger
|
|
13
|
-
"
|
|
4
|
+
"toggle": "awsui_toggle_1uo6m_18jbl_97",
|
|
5
|
+
"drawer-triggers": "awsui_drawer-triggers_1uo6m_18jbl_102",
|
|
6
|
+
"drawer": "awsui_drawer_1uo6m_18jbl_102",
|
|
7
|
+
"drawer-mobile": "awsui_drawer-mobile_1uo6m_18jbl_112",
|
|
8
|
+
"drawer-closed": "awsui_drawer-closed_1uo6m_18jbl_115",
|
|
9
|
+
"drawer-content": "awsui_drawer-content_1uo6m_18jbl_122",
|
|
10
|
+
"drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_18jbl_137",
|
|
11
|
+
"drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_18jbl_148",
|
|
12
|
+
"drawer-trigger": "awsui_drawer-trigger_1uo6m_18jbl_102",
|
|
13
|
+
"drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_18jbl_166"
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -94,79 +94,76 @@ 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_toggle_1uo6m_18jbl_97:not(#\9) {
|
|
98
98
|
box-sizing: border-box;
|
|
99
99
|
padding: var(--space-xxs-ja5cp8, 4px) 7px;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
.awsui_drawer-
|
|
102
|
+
.awsui_drawer-triggers_1uo6m_18jbl_102:not(#\9) {
|
|
103
103
|
box-sizing: border-box;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
.
|
|
106
|
+
.awsui_drawer_1uo6m_18jbl_102:not(#\9) {
|
|
107
107
|
flex-shrink: 0;
|
|
108
108
|
position: relative;
|
|
109
109
|
word-wrap: break-word;
|
|
110
110
|
box-shadow: var(--shadow-panel-pj5weo, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
|
|
111
111
|
}
|
|
112
|
-
.
|
|
112
|
+
.awsui_drawer_1uo6m_18jbl_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_18jbl_112) {
|
|
113
113
|
z-index: 830;
|
|
114
114
|
}
|
|
115
|
-
.awsui_drawer-
|
|
115
|
+
.awsui_drawer-closed_1uo6m_18jbl_115:not(#\9) {
|
|
116
116
|
min-width: 40px;
|
|
117
|
-
cursor: pointer;
|
|
118
117
|
}
|
|
119
|
-
.awsui_drawer-
|
|
118
|
+
.awsui_drawer-closed_1uo6m_18jbl_115.awsui_drawer-mobile_1uo6m_18jbl_112:not(#\9) {
|
|
120
119
|
display: none;
|
|
121
120
|
}
|
|
122
121
|
|
|
123
|
-
.awsui_drawer-
|
|
122
|
+
.awsui_drawer-content_1uo6m_18jbl_122:not(#\9) {
|
|
124
123
|
position: fixed;
|
|
125
124
|
overflow: auto;
|
|
126
125
|
background-color: var(--color-background-layout-panel-content-6tvac7, #ffffff);
|
|
127
126
|
}
|
|
128
|
-
.awsui_drawer-
|
|
127
|
+
.awsui_drawer-mobile_1uo6m_18jbl_112 > .awsui_drawer-content_1uo6m_18jbl_122:not(#\9) {
|
|
129
128
|
z-index: 1001;
|
|
130
129
|
top: 0;
|
|
131
130
|
bottom: 0;
|
|
132
131
|
left: 0;
|
|
133
132
|
right: 0;
|
|
134
133
|
}
|
|
135
|
-
.awsui_drawer-
|
|
134
|
+
.awsui_drawer-closed_1uo6m_18jbl_115 > .awsui_drawer-content_1uo6m_18jbl_122:not(#\9) {
|
|
136
135
|
width: 40px;
|
|
137
136
|
}
|
|
138
|
-
.awsui_drawer-
|
|
139
|
-
|
|
137
|
+
.awsui_drawer-closed_1uo6m_18jbl_115 > .awsui_drawer-content_1uo6m_18jbl_122.awsui_drawer-content-clickable_1uo6m_18jbl_137:not(#\9) {
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
color: var(--color-text-interactive-default-2sml2m, #414d5c);
|
|
140
140
|
}
|
|
141
|
-
.awsui_drawer-
|
|
142
|
-
background: var(--color-background-layout-panel-
|
|
143
|
-
cursor: default;
|
|
141
|
+
.awsui_drawer-closed_1uo6m_18jbl_115 > .awsui_drawer-content_1uo6m_18jbl_122.awsui_drawer-content-clickable_1uo6m_18jbl_137:not(#\9):hover {
|
|
142
|
+
background: var(--color-background-layout-panel-hover-4hingm, #e9ebed);
|
|
144
143
|
}
|
|
145
|
-
.awsui_drawer-
|
|
144
|
+
.awsui_drawer-content_1uo6m_18jbl_122 > [aria-hidden=true]:not(#\9) {
|
|
146
145
|
display: none;
|
|
147
146
|
}
|
|
148
147
|
|
|
149
|
-
.awsui_drawer-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
padding: var(--space-scaled-xs-wbfgrv, 8px) var(--space-s-hdd878, 12px);
|
|
155
|
-
margin-top: 1px;
|
|
156
|
-
}
|
|
157
|
-
.awsui_drawer-content_1uo6m_184sl_123 > .awsui_drawer-triggers_1uo6m_184sl_102 > .awsui_trigger_1uo6m_184sl_149:not(#\9):not(:last-child) {
|
|
158
|
-
box-shadow: 0px 1px var(--color-shadow-layout-toggle-u6bbly, #d1d5db);
|
|
159
|
-
}
|
|
160
|
-
.awsui_drawer-content_1uo6m_184sl_123 > .awsui_drawer-triggers_1uo6m_184sl_102 > .awsui_trigger-drawer_1uo6m_184sl_160:not(#\9):hover:not(.awsui_selected_1uo6m_184sl_160) {
|
|
161
|
-
color: var(--color-text-layout-toggle-hover-dhzmbj, #0972d3);
|
|
148
|
+
.awsui_drawer-triggers-wrapper_1uo6m_18jbl_148:not(#\9) {
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
text-align: center;
|
|
152
|
+
align-items: stretch;
|
|
162
153
|
}
|
|
163
|
-
|
|
164
|
-
|
|
154
|
+
|
|
155
|
+
.awsui_drawer-trigger_1uo6m_18jbl_102:not(#\9) {
|
|
156
|
+
padding: var(--space-xxs-ja5cp8, 4px) 7px;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
color: var(--color-text-interactive-default-2sml2m, #414d5c);
|
|
159
|
+
}
|
|
160
|
+
.awsui_drawer-trigger_1uo6m_18jbl_102:not(#\9):not(:first-child) {
|
|
161
|
+
border-top: 1px solid var(--color-border-layout-wyrb3c, #d1d5db);
|
|
162
|
+
}
|
|
163
|
+
.awsui_drawer-trigger_1uo6m_18jbl_102:not(#\9):hover {
|
|
164
|
+
color: var(--color-text-layout-toggle-hover-dhzmbj, #0972d3);
|
|
165
165
|
}
|
|
166
|
-
.awsui_drawer-
|
|
166
|
+
.awsui_drawer-trigger-active_1uo6m_18jbl_166:not(#\9), .awsui_drawer-trigger-active_1uo6m_18jbl_166:not(#\9):hover {
|
|
167
167
|
background-color: var(--color-background-layout-toggle-selected-default-ir617m, #0972d3);
|
|
168
|
-
border-top: 1px solid var(--color-background-layout-toggle-selected-default-ir617m, #0972d3);
|
|
169
|
-
box-shadow: none;
|
|
170
168
|
color: var(--color-text-layout-toggle-active-lzrbla, #ffffff);
|
|
171
|
-
margin: 0;
|
|
172
169
|
}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"toggle": "
|
|
6
|
-
"drawer-triggers": "awsui_drawer-
|
|
7
|
-
"drawer": "
|
|
8
|
-
"drawer-mobile": "awsui_drawer-
|
|
9
|
-
"drawer-closed": "awsui_drawer-
|
|
10
|
-
"drawer-content": "awsui_drawer-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"trigger
|
|
14
|
-
"
|
|
5
|
+
"toggle": "awsui_toggle_1uo6m_18jbl_97",
|
|
6
|
+
"drawer-triggers": "awsui_drawer-triggers_1uo6m_18jbl_102",
|
|
7
|
+
"drawer": "awsui_drawer_1uo6m_18jbl_102",
|
|
8
|
+
"drawer-mobile": "awsui_drawer-mobile_1uo6m_18jbl_112",
|
|
9
|
+
"drawer-closed": "awsui_drawer-closed_1uo6m_18jbl_115",
|
|
10
|
+
"drawer-content": "awsui_drawer-content_1uo6m_18jbl_122",
|
|
11
|
+
"drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_18jbl_137",
|
|
12
|
+
"drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_18jbl_148",
|
|
13
|
+
"drawer-trigger": "awsui_drawer-trigger_1uo6m_18jbl_102",
|
|
14
|
+
"drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_18jbl_166"
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eA8DpB"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import React, { useEffect } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { ToggleButton, togglesConfig } from '../toggles';
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import sharedStyles from '../styles.css.js';
|
|
8
8
|
import testutilStyles from '../test-classes/styles.css.js';
|
|
9
9
|
const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled, onClick }, ref) => {
|
|
10
10
|
const { TagName, iconName, getLabels } = togglesConfig[type];
|
|
11
11
|
const { mainLabel, openLabel } = getLabels(ariaLabels);
|
|
12
|
-
return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
|
|
13
|
-
React.createElement(
|
|
12
|
+
return (React.createElement(TagName, { className: clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`]), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
|
|
13
|
+
React.createElement(ToggleButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
|
|
14
14
|
});
|
|
15
15
|
export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
|
|
16
16
|
useEffect(() => {
|
|
@@ -28,9 +28,10 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
|
|
|
28
28
|
!navigationHide && (React.createElement(MobileToggle, { ref: toggleRefs.navigation, type: "navigation", className: testutilStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
|
|
29
29
|
React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: testutilStyles.breadcrumbs }, children)),
|
|
30
30
|
!toolsHide && !drawers && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })),
|
|
31
|
-
drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['
|
|
31
|
+
drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container']) }, drawers.items.map((item, index) => {
|
|
32
32
|
var _a;
|
|
33
|
-
return (React.createElement(
|
|
33
|
+
return (React.createElement("span", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index },
|
|
34
|
+
React.createElement(ToggleButton, { className: testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
|
|
34
35
|
})))));
|
|
35
36
|
}
|
|
36
37
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-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 clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n className?: string;\n ariaLabels?: AppLayoutProps.Labels;\n type: keyof typeof togglesConfig;\n disabled?: boolean;\n onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n return (\n <TagName\n className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n aria-hidden={disabled}\n aria-label={mainLabel}\n onClick={e => e.target === e.currentTarget && onClick()}\n >\n <ToggleButton\n ref={ref}\n className={className}\n iconName={iconName}\n onClick={onClick}\n ariaLabel={openLabel}\n disabled={disabled}\n ariaExpanded={disabled}\n />\n </TagName>\n );\n }\n);\ninterface MobileToolbarProps {\n anyPanelOpen: boolean | undefined;\n unfocusable: boolean | undefined;\n toggleRefs: {\n navigation: React.Ref<ButtonProps.Ref>;\n tools: React.Ref<ButtonProps.Ref>;\n };\n navigationHide: boolean | undefined;\n toolsHide: boolean | undefined;\n topOffset?: number;\n ariaLabels?: AppLayoutProps.Labels;\n mobileBarRef: React.Ref<HTMLDivElement>;\n children: React.ReactNode;\n onNavigationOpen: () => void;\n onToolsOpen: () => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string | undefined;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport function MobileToolbar({\n ariaLabels = {},\n toggleRefs,\n topOffset,\n navigationHide,\n toolsHide,\n anyPanelOpen = false,\n unfocusable,\n children,\n onNavigationOpen,\n onToolsOpen,\n drawers,\n mobileBarRef,\n}: MobileToolbarProps) {\n useEffect(() => {\n if (anyPanelOpen) {\n document.body.classList.add(styles['block-body-scroll']);\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n }, [anyPanelOpen]);\n return (\n <div\n ref={mobileBarRef}\n className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n style={{ top: topOffset }}\n >\n {!navigationHide && (\n <MobileToggle\n ref={toggleRefs.navigation}\n type=\"navigation\"\n className={testutilStyles['navigation-toggle']}\n ariaLabels={ariaLabels}\n disabled={anyPanelOpen}\n onClick={onNavigationOpen}\n />\n )}\n <div className={styles['mobile-bar-breadcrumbs']}>\n {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n </div>\n {!toolsHide && !drawers && (\n <MobileToggle\n ref={toggleRefs.tools}\n type=\"tools\"\n className={testutilStyles['tools-toggle']}\n ariaLabels={ariaLabels}\n disabled={anyPanelOpen}\n onClick={onToolsOpen}\n />\n )}\n {drawers && (\n <aside\n aria-label={drawers.ariaLabel}\n className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n >\n {drawers.items.map((item: DrawerItem, index: number) => (\n <span className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])} key={index}>\n <ToggleButton\n className={testutilStyles['drawers-trigger']}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\n </aside>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"block-body-scroll": "awsui_block-body-
|
|
5
|
-
"mobile-bar": "awsui_mobile-
|
|
6
|
-
"mobile-bar-breadcrumbs": "awsui_mobile-bar-
|
|
7
|
-
"mobile-
|
|
8
|
-
"mobile-toggle": "awsui_mobile-
|
|
9
|
-
"mobile-toggle-
|
|
4
|
+
"block-body-scroll": "awsui_block-body-scroll_19d8l_15f1h_97",
|
|
5
|
+
"mobile-bar": "awsui_mobile-bar_19d8l_15f1h_101",
|
|
6
|
+
"mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_15f1h_114",
|
|
7
|
+
"mobile-toggle": "awsui_mobile-toggle_19d8l_15f1h_121",
|
|
8
|
+
"mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_15f1h_129",
|
|
9
|
+
"mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_15f1h_132",
|
|
10
|
+
"mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_15f1h_132",
|
|
11
|
+
"drawers-container": "awsui_drawers-container_19d8l_15f1h_139"
|
|
10
12
|
};
|
|
11
13
|
|
|
@@ -94,12 +94,11 @@ 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
|
-
.awsui_block-body-
|
|
97
|
+
.awsui_block-body-scroll_19d8l_15f1h_97:not(#\9) {
|
|
98
98
|
overflow: hidden;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.awsui_mobile-
|
|
102
|
-
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
101
|
+
.awsui_mobile-bar_19d8l_15f1h_101:not(#\9) {
|
|
103
102
|
position: sticky;
|
|
104
103
|
display: flex;
|
|
105
104
|
align-items: center;
|
|
@@ -112,43 +111,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
112
111
|
height: calc(2 * var(--space-m-h2th94, 16px) + var(--space-scaled-xs-wbfgrv, 8px));
|
|
113
112
|
}
|
|
114
113
|
|
|
115
|
-
.awsui_mobile-bar-
|
|
114
|
+
.awsui_mobile-bar-breadcrumbs_19d8l_15f1h_114:not(#\9) {
|
|
116
115
|
min-width: 0;
|
|
117
116
|
flex: 1;
|
|
118
117
|
margin-left: var(--space-m-h2th94, 16px);
|
|
119
118
|
margin-right: var(--space-m-h2th94, 16px);
|
|
120
119
|
}
|
|
121
120
|
|
|
122
|
-
.awsui_mobile-
|
|
123
|
-
width: 40px;
|
|
124
|
-
display: flex;
|
|
125
|
-
justify-content: center;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.awsui_mobile-toggle_19d8l_1xapg_128:not(#\9) {
|
|
121
|
+
.awsui_mobile-toggle_19d8l_15f1h_121:not(#\9) {
|
|
129
122
|
box-sizing: border-box;
|
|
130
123
|
cursor: pointer;
|
|
131
124
|
z-index: 1;
|
|
132
125
|
padding: var(--space-xxs-ja5cp8, 4px) 7px;
|
|
133
126
|
width: 40px;
|
|
127
|
+
color: var(--color-text-interactive-default-2sml2m, #414d5c);
|
|
134
128
|
}
|
|
135
|
-
.awsui_mobile-
|
|
129
|
+
.awsui_mobile-toggle-type-navigation_19d8l_15f1h_129:not(#\9) {
|
|
136
130
|
border-right: 1px solid var(--color-border-layout-wyrb3c, #d1d5db);
|
|
137
131
|
}
|
|
138
|
-
.awsui_mobile-
|
|
132
|
+
.awsui_mobile-toggle-type-tools_19d8l_15f1h_132:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_15f1h_132:not(#\9) {
|
|
139
133
|
border-left: 1px solid var(--color-border-layout-wyrb3c, #d1d5db);
|
|
140
134
|
}
|
|
141
|
-
.awsui_mobile-
|
|
135
|
+
.awsui_mobile-toggle_19d8l_15f1h_121:not(#\9):hover {
|
|
142
136
|
background: var(--color-background-layout-panel-hover-4hingm, #e9ebed);
|
|
143
137
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
width: auto;
|
|
147
|
-
padding: 0;
|
|
148
|
-
height: 100%;
|
|
149
|
-
}
|
|
150
|
-
.awsui_mobile-toggle-with-drawers_19d8l_1xapg_138 > .awsui_mobile-trigger-with-drawers_19d8l_1xapg_122:not(#\9) {
|
|
151
|
-
border-left: 1px solid var(--color-border-layout-wyrb3c, #d1d5db);
|
|
138
|
+
|
|
139
|
+
.awsui_drawers-container_19d8l_15f1h_139:not(#\9) {
|
|
152
140
|
display: flex;
|
|
153
|
-
align-items:
|
|
141
|
+
align-items: stretch;
|
|
154
142
|
}
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"block-body-scroll": "awsui_block-body-
|
|
6
|
-
"mobile-bar": "awsui_mobile-
|
|
7
|
-
"mobile-bar-breadcrumbs": "awsui_mobile-bar-
|
|
8
|
-
"mobile-
|
|
9
|
-
"mobile-toggle": "awsui_mobile-
|
|
10
|
-
"mobile-toggle-
|
|
5
|
+
"block-body-scroll": "awsui_block-body-scroll_19d8l_15f1h_97",
|
|
6
|
+
"mobile-bar": "awsui_mobile-bar_19d8l_15f1h_101",
|
|
7
|
+
"mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_15f1h_114",
|
|
8
|
+
"mobile-toggle": "awsui_mobile-toggle_19d8l_15f1h_121",
|
|
9
|
+
"mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_15f1h_129",
|
|
10
|
+
"mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_15f1h_132",
|
|
11
|
+
"mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_15f1h_132",
|
|
12
|
+
"drawers-container": "awsui_drawers-container_19d8l_15f1h_139"
|
|
11
13
|
};
|
|
12
14
|
|
|
@@ -22,7 +22,9 @@ export declare const togglesConfig: {
|
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
|
-
export declare const
|
|
25
|
+
export declare const ToggleButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<{
|
|
26
|
+
focus(): void;
|
|
27
|
+
}>>;
|
|
26
28
|
interface CloseButtonProps {
|
|
27
29
|
className?: string;
|
|
28
30
|
ariaLabel: string | undefined;
|