@cloudscape-design/components-themeable 3.0.232 → 3.0.234
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/drawer/styles.scss +59 -0
- package/lib/internal/scss/app-layout/split-panel-drawer/styles.scss +13 -0
- package/lib/internal/scss/app-layout/styles.scss +0 -98
- package/lib/internal/template/app-layout/{drawer.d.ts → drawer/index.d.ts} +12 -12
- package/lib/internal/template/app-layout/drawer/index.d.ts.map +1 -0
- package/lib/internal/template/app-layout/{drawer.js → drawer/index.js} +6 -7
- package/lib/internal/template/app-layout/drawer/index.js.map +1 -0
- package/lib/internal/template/app-layout/drawer/styles.css.js +10 -0
- package/lib/internal/template/app-layout/drawer/styles.scoped.css +139 -0
- package/lib/internal/template/app-layout/drawer/styles.selectors.js +11 -0
- package/lib/internal/template/app-layout/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/index.js +6 -23
- package/lib/internal/template/app-layout/index.js.map +1 -1
- package/lib/internal/template/app-layout/split-panel-drawer/index.d.ts +11 -0
- package/lib/internal/template/app-layout/split-panel-drawer/index.d.ts.map +1 -0
- package/lib/internal/template/app-layout/split-panel-drawer/index.js +10 -0
- package/lib/internal/template/app-layout/split-panel-drawer/index.js.map +1 -0
- package/lib/internal/template/app-layout/split-panel-drawer/styles.css.js +7 -0
- package/lib/internal/template/app-layout/split-panel-drawer/styles.scoped.css +103 -0
- package/lib/internal/template/app-layout/split-panel-drawer/styles.selectors.js +8 -0
- package/lib/internal/template/app-layout/styles.css.js +13 -26
- package/lib/internal/template/app-layout/styles.scoped.css +13 -100
- package/lib/internal/template/app-layout/styles.selectors.js +13 -26
- package/lib/internal/template/app-layout/toggles/index.d.ts +0 -2
- package/lib/internal/template/app-layout/toggles/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/toggles/index.js +2 -2
- package/lib/internal/template/app-layout/toggles/index.js.map +1 -1
- package/lib/internal/template/app-layout/utils/use-content-height.d.ts +0 -3
- package/lib/internal/template/app-layout/utils/use-content-height.d.ts.map +1 -1
- package/lib/internal/template/app-layout/utils/use-content-height.js +0 -3
- package/lib/internal/template/app-layout/utils/use-content-height.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/events/index.d.ts +2 -1
- package/lib/internal/template/internal/events/index.d.ts.map +1 -1
- package/lib/internal/template/internal/events/index.js +4 -6
- package/lib/internal/template/internal/events/index.js.map +1 -1
- package/lib/internal/template/tabs/tab-header-bar.js +2 -2
- package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
- package/package.json +1 -1
- package/lib/internal/template/app-layout/drawer.d.ts.map +0 -1
- package/lib/internal/template/app-layout/drawer.js.map +0 -1
- package/lib/internal/template/app-layout/navigation-panel.d.ts +0 -21
- package/lib/internal/template/app-layout/navigation-panel.d.ts.map +0 -1
- package/lib/internal/template/app-layout/navigation-panel.js +0 -16
- package/lib/internal/template/app-layout/navigation-panel.js.map +0 -1
- package/lib/internal/template/app-layout/tools-and-split-panel.d.ts +0 -23
- package/lib/internal/template/app-layout/tools-and-split-panel.d.ts.map +0 -1
- package/lib/internal/template/app-layout/tools-and-split-panel.js +0 -20
- package/lib/internal/template/app-layout/tools-and-split-panel.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAwB,EACzF,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n navigation: {\n TagName: 'nav',\n iconName: 'menu',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.navigation,\n openLabel: labels.navigationToggle,\n closeLabel: labels.navigationClose,\n }),\n },\n tools: {\n TagName: 'aside',\n iconName: 'status-info',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.tools,\n openLabel: labels.toolsToggle,\n closeLabel: labels.toolsClose,\n }),\n },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n (\n { className, ariaLabel, ariaExpanded, iconName, disabled, onClick }: AppLayoutButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n return (\n <InternalButton\n ref={ref}\n className={className}\n ariaLabel={ariaLabel}\n variant=\"icon\"\n formAction=\"none\"\n onClick={onClick}\n iconName={iconName}\n disabled={disabled}\n ariaExpanded={ariaExpanded ? undefined : false}\n __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n />\n );\n }\n);\n\ninterface CloseButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n return (\n <span className={styles['close-button']}>\n <AppLayoutButton\n ref={ref}\n className={className}\n ariaExpanded={true}\n ariaLabel={ariaLabel}\n iconName=\"close\"\n onClick={onClick}\n />\n </span>\n );\n }\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-content-height.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,iBAAiB,CAAC,EAAE,OAAO
|
|
1
|
+
{"version":3,"file":"use-content-height.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,iBAAiB,CAAC,EAAE,OAAO;;;;;;EAsBnH"}
|
|
@@ -20,9 +20,6 @@ export default function useContentHeight(headerSelector, footerSelector, disable
|
|
|
20
20
|
contentHeightStyle: {
|
|
21
21
|
[disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,
|
|
22
22
|
},
|
|
23
|
-
panelHeightStyle: {
|
|
24
|
-
height: heightStyleValue,
|
|
25
|
-
},
|
|
26
23
|
};
|
|
27
24
|
}
|
|
28
25
|
//# sourceMappingURL=use-content-height.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-content-height.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAsB,EAAE,cAAsB,EAAE,iBAA2B;IAClH,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,yFAAyF;IACzF,+FAA+F;IAC/F,yEAAyE;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC;QAC3F,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,gBAAgB,kBAAkB,KAAK,CAAC;IAEjE,OAAO;QACL,YAAY;QACZ,YAAY;QACZ,kBAAkB,EAAE;YAClB,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,gBAAgB;SAC/D;
|
|
1
|
+
{"version":3,"file":"use-content-height.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAsB,EAAE,cAAsB,EAAE,iBAA2B;IAClH,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,yFAAyF;IACzF,+FAA+F;IAC/F,yEAAyE;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC;QAC3F,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,gBAAgB,kBAAkB,KAAK,CAAC;IAEjE,OAAO;QACL,YAAY;QACZ,YAAY;QACZ,kBAAkB,EAAE;YAClB,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,gBAAgB;SAC/D;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\nimport { useObservedElement } from './use-observed-element';\n\nexport default function useContentHeight(headerSelector: string, footerSelector: string, disableBodyScroll?: boolean) {\n const headerHeight = useObservedElement(headerSelector);\n const footerHeight = useObservedElement(footerSelector);\n const [headerFooterHeight, setHeaderFooterHeight] = useState(0);\n\n // Delay applying changes in header/footer height, as applying them immediately can cause\n // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects\n // further up the tree, therefore blocking notifications to prevent loops\n useEffect(() => {\n const id = requestAnimationFrame(() => setHeaderFooterHeight(headerHeight + footerHeight));\n return () => cancelAnimationFrame(id);\n }, [headerHeight, footerHeight]);\n\n const heightStyleValue = `calc(100vh - ${headerFooterHeight}px)`;\n\n return {\n headerHeight,\n footerHeight,\n contentHeightStyle: {\n [disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,\n },\n };\n}\n"]}
|
|
@@ -26,5 +26,6 @@ export declare function createCustomEvent<T>({ cancelable, detail }: CustomEvent
|
|
|
26
26
|
export declare function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T): void;
|
|
27
27
|
export declare function fireCancelableEvent<T>(handler: CancelableEventHandler<T> | undefined, detail: T, sourceEvent?: React.SyntheticEvent | Event): boolean;
|
|
28
28
|
export declare function fireKeyboardEvent(handler: CancelableEventHandler<BaseKeyDetail>, reactEvent: React.KeyboardEvent): boolean;
|
|
29
|
-
export declare function
|
|
29
|
+
export declare function hasModifierKeys(event: React.MouseEvent | React.KeyboardEvent): boolean;
|
|
30
|
+
export declare function isPlainLeftClick(event: React.MouseEvent | React.KeyboardEvent): boolean;
|
|
30
31
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,CAAC,MAAM,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEvG,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEvF,MAAM,MAAM,wBAAwB,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAgBnG,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAE/F;AAED,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,QAM7G;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9C,MAAM,EAAE,CAAC,EACT,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,WAc3C;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,sBAAsB,CAAC,aAAa,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,aAAa,WAahH;AAMD,wBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,CAAC,MAAM,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEvG,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEvF,MAAM,MAAM,wBAAwB,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAgBnG,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAE/F;AAED,wBAAgB,sBAAsB,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,QAM7G;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9C,MAAM,EAAE,CAAC,EACT,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,WAc3C;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,sBAAsB,CAAC,aAAa,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,aAAa,WAahH;AAMD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,WAE5E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,WAE7E"}
|
|
@@ -49,12 +49,10 @@ export function fireKeyboardEvent(handler, reactEvent) {
|
|
|
49
49
|
const isMouseEvent = (e) => {
|
|
50
50
|
return e.button !== undefined;
|
|
51
51
|
};
|
|
52
|
+
export function hasModifierKeys(event) {
|
|
53
|
+
return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
|
|
54
|
+
}
|
|
52
55
|
export function isPlainLeftClick(event) {
|
|
53
|
-
return (event &&
|
|
54
|
-
(!isMouseEvent(event) || event.button === 0) &&
|
|
55
|
-
!event.ctrlKey &&
|
|
56
|
-
!event.altKey &&
|
|
57
|
-
!event.shiftKey &&
|
|
58
|
-
!event.metaKey);
|
|
56
|
+
return event && (!isMouseEvent(event) || event.button === 0) && !hasModifierKeys(event);
|
|
59
57
|
}
|
|
60
58
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAYA,MAAM,eAAe;IAGnB,YAAmB,aAAsB,KAAK,EAAS,SAAmB,IAAI;QAA3D,eAAU,GAAV,UAAU,CAAiB;QAAS,WAAM,GAAN,MAAM,CAAiB;QAF9E,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAC4D,CAAC;IAElF,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;CACF;AAyBD,MAAM,UAAU,iBAAiB,CAAI,EAAE,UAAU,EAAE,MAAM,EAAsB;IAC7E,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAA8C,EAAE,UAA+B;IAC/G,OAAO,mBAAmB,CACxB,OAAO,EACP;QACE,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,EACD,UAAU,CACX,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,CAAyC,EAAyB,EAAE;IACxF,OAAQ,CAAsB,CAAC,MAAM,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAYA,MAAM,eAAe;IAGnB,YAAmB,aAAsB,KAAK,EAAS,SAAmB,IAAI;QAA3D,eAAU,GAAV,UAAU,CAAiB;QAAS,WAAM,GAAN,MAAM,CAAiB;QAF9E,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAC4D,CAAC;IAElF,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;CACF;AAyBD,MAAM,UAAU,iBAAiB,CAAI,EAAE,UAAU,EAAE,MAAM,EAAsB;IAC7E,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAA8C,EAAE,UAA+B;IAC/G,OAAO,mBAAmB,CACxB,OAAO,EACP;QACE,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,EACD,UAAU,CACX,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,CAAyC,EAAyB,EAAE;IACxF,OAAQ,CAAsB,CAAC,MAAM,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,KAA6C;IAC3E,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAA6C;IAC5E,OAAO,KAAK,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\n// This is a part of our public types API. We cannot change this in the current major version\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CancelableEventHandler<Detail = {}> = (event: CustomEvent<Detail>) => void;\n\nexport type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, 'preventDefault'>;\n\nclass CustomEventStub<T> {\n defaultPrevented = false;\n cancelBubble = false;\n constructor(public cancelable: boolean = false, public detail: T | null = null) {}\n\n preventDefault() {\n this.defaultPrevented = true;\n }\n\n stopPropagation() {\n this.cancelBubble = true;\n }\n}\n\nexport interface BaseKeyDetail {\n keyCode: number;\n key: string;\n ctrlKey: boolean;\n shiftKey: boolean;\n altKey: boolean;\n metaKey: boolean;\n}\n\nexport interface ClickDetail {\n button: number;\n ctrlKey: boolean;\n shiftKey: boolean;\n altKey: boolean;\n metaKey: boolean;\n}\n\nexport interface BaseNavigationDetail {\n href: string | undefined;\n external?: boolean;\n target?: string;\n}\n\nexport function createCustomEvent<T>({ cancelable, detail }: CustomEventInit<T>): CustomEvent<T> {\n return new CustomEventStub(cancelable, detail) as CustomEvent;\n}\n\nexport function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {\n if (!handler) {\n return;\n }\n const event = createCustomEvent({ cancelable: false, detail });\n handler(event);\n}\n\nexport function fireCancelableEvent<T>(\n handler: CancelableEventHandler<T> | undefined,\n detail: T,\n sourceEvent?: React.SyntheticEvent | Event\n) {\n if (!handler) {\n return false;\n }\n const event = createCustomEvent({ cancelable: true, detail });\n handler(event);\n if (event.defaultPrevented && sourceEvent) {\n sourceEvent.preventDefault();\n }\n if (event.cancelBubble && sourceEvent) {\n sourceEvent.stopPropagation();\n }\n return event.defaultPrevented;\n}\n\nexport function fireKeyboardEvent(handler: CancelableEventHandler<BaseKeyDetail>, reactEvent: React.KeyboardEvent) {\n return fireCancelableEvent(\n handler,\n {\n keyCode: reactEvent.keyCode,\n key: reactEvent.key,\n ctrlKey: reactEvent.ctrlKey,\n shiftKey: reactEvent.shiftKey,\n altKey: reactEvent.altKey,\n metaKey: reactEvent.metaKey,\n },\n reactEvent\n );\n}\n\nconst isMouseEvent = (e: React.MouseEvent | React.KeyboardEvent): e is React.MouseEvent => {\n return (e as React.MouseEvent).button !== undefined;\n};\n\nexport function hasModifierKeys(event: React.MouseEvent | React.KeyboardEvent) {\n return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;\n}\n\nexport function isPlainLeftClick(event: React.MouseEvent | React.KeyboardEvent) {\n return event && (!isMouseEvent(event) || event.button === 0) && !hasModifierKeys(event);\n}\n"]}
|
|
@@ -8,7 +8,7 @@ import useFocusVisible from '../internal/hooks/focus-visible';
|
|
|
8
8
|
import { useContainerQuery } from '../internal/hooks/container-queries';
|
|
9
9
|
import { KeyCode } from '../internal/keycode';
|
|
10
10
|
import { onPaginationClick, hasHorizontalOverflow, hasLeftOverflow, hasRightOverflow, scrollIntoView, } from './scroll-utils';
|
|
11
|
-
import { isPlainLeftClick } from '../internal/events';
|
|
11
|
+
import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
|
|
12
12
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
13
13
|
export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
|
|
14
14
|
const focusVisible = useFocusVisible();
|
|
@@ -104,7 +104,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
104
104
|
const handleKeyDown = function (event) {
|
|
105
105
|
const { keyCode } = event;
|
|
106
106
|
const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
|
|
107
|
-
if (specialKeys.indexOf(keyCode) === -1) {
|
|
107
|
+
if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {
|
|
108
108
|
return;
|
|
109
109
|
}
|
|
110
110
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const focusVisible = useFocusVisible();\n\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18nStrings?.scrollLeftAriaLabel}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18nStrings?.scrollRightAriaLabel}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n ...focusVisible,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasLeftOverflow,\n hasRightOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const focusVisible = useFocusVisible();\n\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n const leftOverflowButton = useRef<HTMLElement>(null);\n\n const isVisualRefresh = useVisualRefresh();\n\n const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [leftOverflow, setLeftOverflow] = useState(false);\n const [rightOverflow, setRightOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n setRightOverflow(hasRightOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: leftOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: rightOverflow,\n });\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={leftOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!leftOverflow}\n onClick={() => onPaginationClick(headerBarRef, -1)}\n ariaLabel={i18nStrings?.scrollLeftAriaLabel}\n />\n </span>\n )}\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!rightOverflow}\n onClick={() => onPaginationClick(headerBarRef, 1)}\n ariaLabel={i18nStrings?.scrollRightAriaLabel}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n const highlightTab = function (enabledTabIndex: number) {\n const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const handleKeyDown = function (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) {\n const { keyCode } = event;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n return;\n }\n event.preventDefault();\n const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n switch (keyCode) {\n case KeyCode.right:\n if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n highlightTab(0);\n } else {\n highlightTab(activeIndex + 1);\n }\n return;\n case KeyCode.left:\n if (activeIndex === 0) {\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n } else {\n highlightTab(activeIndex - 1);\n }\n return;\n case KeyCode.end:\n highlightTab(enabledTabsWithCurrentTab.length - 1);\n return;\n case KeyCode.home:\n highlightTab(0);\n return;\n case KeyCode.pageDown:\n if (rightOverflow) {\n onPaginationClick(headerBarRef, 1);\n }\n return;\n case KeyCode.pageUp:\n if (leftOverflow) {\n onPaginationClick(headerBarRef, -1);\n }\n return;\n }\n };\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id);\n if (clickedTabRef) {\n const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n if (childElement && childElement !== document.activeElement) {\n childElement.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n ...focusVisible,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n if (tab.id === activeTabId) {\n commonProps.ref = activeTabHeaderRef;\n commonProps.tabIndex = 0;\n commonProps.onKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n ) => handleKeyDown(event);\n } else {\n commonProps.tabIndex = -1;\n }\n\n let trigger = null;\n if (tab.href) {\n const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n anchorProps.href = tab.href;\n trigger = <a {...anchorProps} />;\n } else {\n const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n buttonProps.type = 'button';\n if (tab.disabled) {\n buttonProps.disabled = true;\n }\n trigger = <button {...buttonProps} />;\n }\n\n return (\n <li\n ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n {trigger}\n </li>\n );\n }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/app-layout/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAgC,aAAa,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACjD;AAmBD,wBAAgB,MAAM,CAAC,EACrB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE,kBAAkB,eAqEpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/app-layout/drawer.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 from 'react';\nimport { ButtonProps } from '../button/interfaces';\nimport { AppLayoutButton, CloseButton, togglesConfig } from './toggles';\nimport { AppLayoutProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface DesktopDrawerProps {\n contentClassName?: string;\n toggleClassName?: string;\n closeClassName?: string;\n toggleRefs: {\n toggle: React.Ref<ButtonProps.Ref>;\n close: React.Ref<ButtonProps.Ref>;\n };\n width: number;\n topOffset?: number;\n bottomOffset?: number;\n ariaLabels?: AppLayoutProps.Labels;\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}\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)\n\nexport function Drawer({\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n}: DesktopDrawerProps) {\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 const closeIconName = 'close';\n\n const regularOpenButton = (\n <TagName 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 className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{\n width: drawerContentWidth,\n }}\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\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if ((event.target as Element).tagName !== 'BUTTON') {\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 <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => onToggle(false)}\n iconName={closeIconName}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { AppLayoutProps } from './interfaces';
|
|
3
|
-
import { DesktopDrawerProps } from './drawer';
|
|
4
|
-
import useContentHeight from './utils/use-content-height';
|
|
5
|
-
interface NavigationPanelProps {
|
|
6
|
-
navigationOpen: boolean;
|
|
7
|
-
navigationDrawerWidth: number;
|
|
8
|
-
navigationWidth: number;
|
|
9
|
-
headerHeight: DesktopDrawerProps['topOffset'];
|
|
10
|
-
footerHeight: DesktopDrawerProps['bottomOffset'];
|
|
11
|
-
panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];
|
|
12
|
-
navigation: React.ReactNode;
|
|
13
|
-
ariaLabels: AppLayoutProps['ariaLabels'];
|
|
14
|
-
isMobile: boolean;
|
|
15
|
-
onNavigationToggle: DesktopDrawerProps['onToggle'];
|
|
16
|
-
onClick: DesktopDrawerProps['onClick'];
|
|
17
|
-
toggleRefs: DesktopDrawerProps['toggleRefs'];
|
|
18
|
-
}
|
|
19
|
-
export declare function NavigationPanel({ ariaLabels, footerHeight, headerHeight, isMobile, navigation, navigationDrawerWidth, navigationWidth, navigationOpen, onClick, onNavigationToggle, panelHeightStyle, toggleRefs, }: NavigationPanelProps): JSX.Element;
|
|
20
|
-
export {};
|
|
21
|
-
//# sourceMappingURL=navigation-panel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-panel.d.ts","sourceRoot":"","sources":["../../../src/app-layout/navigation-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AAGtD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAE1D,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,CAAC;IAExB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,gBAAgB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAE1E,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAEzC,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEvC,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GACX,EAAE,oBAAoB,eAgCtB"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { Drawer } from './drawer';
|
|
6
|
-
import styles from './styles.css.js';
|
|
7
|
-
import testutilStyles from './test-classes/styles.css.js';
|
|
8
|
-
export function NavigationPanel({ ariaLabels, footerHeight, headerHeight, isMobile, navigation, navigationDrawerWidth, navigationWidth, navigationOpen, onClick, onNavigationToggle, panelHeightStyle, toggleRefs, }) {
|
|
9
|
-
return (React.createElement("div", { className: styles['navigation-panel'], style: { width: navigationDrawerWidth } },
|
|
10
|
-
React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], {
|
|
11
|
-
[styles.mobile]: isMobile,
|
|
12
|
-
[styles.open]: navigationOpen,
|
|
13
|
-
}), style: Object.assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
|
|
14
|
-
React.createElement(Drawer, { type: "navigation", isMobile: isMobile, width: navigationWidth, isOpen: navigationOpen, onToggle: onNavigationToggle, toggleRefs: toggleRefs, onClick: onClick, contentClassName: testutilStyles.navigation, closeClassName: testutilStyles['navigation-close'], toggleClassName: testutilStyles['navigation-toggle'], topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels }, navigation))));
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=navigation-panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-panel.js","sourceRoot":"","sources":["../../../src/app-layout/navigation-panel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAwB1D,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GACW;IACrB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE;QACjF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE;gBAC7C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ;gBACzB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,cAAc;aAC9B,CAAC,EACF,KAAK,oBACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAGhF,oBAAC,MAAM,IACL,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,kBAAkB,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,cAAc,CAAC,UAAU,EAC3C,cAAc,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAClD,eAAe,EAAE,cAAc,CAAC,mBAAmB,CAAC,EACpD,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,UAAU,CACJ,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { AppLayoutProps } from './interfaces';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport useContentHeight from './utils/use-content-height';\n\ninterface NavigationPanelProps {\n navigationOpen: boolean;\n\n navigationDrawerWidth: number;\n navigationWidth: number;\n headerHeight: DesktopDrawerProps['topOffset'];\n footerHeight: DesktopDrawerProps['bottomOffset'];\n panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n\n navigation: React.ReactNode;\n\n ariaLabels: AppLayoutProps['ariaLabels'];\n\n isMobile: boolean;\n\n onNavigationToggle: DesktopDrawerProps['onToggle'];\n onClick: DesktopDrawerProps['onClick'];\n\n toggleRefs: DesktopDrawerProps['toggleRefs'];\n}\n\nexport function NavigationPanel({\n ariaLabels,\n footerHeight,\n headerHeight,\n isMobile,\n navigation,\n navigationDrawerWidth,\n navigationWidth,\n navigationOpen,\n onClick,\n onNavigationToggle,\n panelHeightStyle,\n toggleRefs,\n}: NavigationPanelProps) {\n return (\n <div className={styles['navigation-panel']} style={{ width: navigationDrawerWidth }}>\n <div\n className={clsx(styles['panel-wrapper-outer'], {\n [styles.mobile]: isMobile,\n [styles.open]: navigationOpen,\n })}\n style={{\n ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n }}\n >\n <Drawer\n type=\"navigation\"\n isMobile={isMobile}\n width={navigationWidth}\n isOpen={navigationOpen}\n onToggle={onNavigationToggle}\n toggleRefs={toggleRefs}\n onClick={onClick}\n contentClassName={testutilStyles.navigation}\n closeClassName={testutilStyles['navigation-close']}\n toggleClassName={testutilStyles['navigation-toggle']}\n topOffset={headerHeight}\n bottomOffset={footerHeight}\n ariaLabels={ariaLabels}\n >\n {navigation}\n </Drawer>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { DesktopDrawerProps } from './drawer';
|
|
3
|
-
import { AppLayoutProps } from './interfaces';
|
|
4
|
-
import useContentHeight from './utils/use-content-height';
|
|
5
|
-
interface ToolsAndSplitPanelProps {
|
|
6
|
-
toolsHide: boolean;
|
|
7
|
-
toolsOpen: boolean;
|
|
8
|
-
drawerWidth: number;
|
|
9
|
-
toolsWidth: number;
|
|
10
|
-
headerHeight: DesktopDrawerProps['topOffset'];
|
|
11
|
-
footerHeight: DesktopDrawerProps['bottomOffset'];
|
|
12
|
-
panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];
|
|
13
|
-
tools: React.ReactNode;
|
|
14
|
-
splitPanel: React.ReactNode;
|
|
15
|
-
ariaLabels: AppLayoutProps['ariaLabels'];
|
|
16
|
-
isMobile: boolean;
|
|
17
|
-
onToolsToggle: DesktopDrawerProps['onToggle'];
|
|
18
|
-
toggleRefs: DesktopDrawerProps['toggleRefs'];
|
|
19
|
-
onLoseToolsFocus: (event: React.FocusEvent) => void;
|
|
20
|
-
}
|
|
21
|
-
export declare function ToolsAndSplitPanel({ ariaLabels, drawerWidth, footerHeight, headerHeight, isMobile, onToolsToggle, panelHeightStyle, splitPanel, toggleRefs, onLoseToolsFocus, tools, toolsHide, toolsOpen, toolsWidth, }: ToolsAndSplitPanelProps): JSX.Element;
|
|
22
|
-
export {};
|
|
23
|
-
//# sourceMappingURL=tools-and-split-panel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tools-and-split-panel.d.ts","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAI1D,UAAU,uBAAuB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,gBAAgB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC1E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC9C,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,GACX,EAAE,uBAAuB,eAyCzB"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { Drawer } from './drawer';
|
|
6
|
-
import styles from './styles.css.js';
|
|
7
|
-
import testutilStyles from './test-classes/styles.css.js';
|
|
8
|
-
export function ToolsAndSplitPanel({ ariaLabels, drawerWidth, footerHeight, headerHeight, isMobile, onToolsToggle, panelHeightStyle, splitPanel, toggleRefs, onLoseToolsFocus, tools, toolsHide, toolsOpen, toolsWidth, }) {
|
|
9
|
-
return (React.createElement(React.Fragment, null,
|
|
10
|
-
React.createElement("div", { style: {
|
|
11
|
-
width: drawerWidth,
|
|
12
|
-
} },
|
|
13
|
-
React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], {
|
|
14
|
-
[styles.mobile]: isMobile,
|
|
15
|
-
[styles.open]: toolsOpen,
|
|
16
|
-
}), style: Object.assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
|
|
17
|
-
splitPanel,
|
|
18
|
-
!toolsHide && (React.createElement(Drawer, { type: "tools", isMobile: isMobile, width: toolsWidth, isOpen: toolsOpen, onToggle: onToolsToggle, toggleRefs: toggleRefs, onLoseFocus: onLoseToolsFocus, contentClassName: testutilStyles.tools, closeClassName: testutilStyles['tools-close'], toggleClassName: testutilStyles['tools-toggle'], topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels }, tools))))));
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=tools-and-split-panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmB1D,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,GACc;IACxB,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE;oBAC7C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ;oBACzB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS;iBACzB,CAAC,EACF,KAAK,oBACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU;gBACV,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,cAAc,CAAC,KAAK,EACtC,cAAc,EAAE,cAAc,CAAC,aAAa,CAAC,EAC7C,eAAe,EAAE,cAAc,CAAC,cAAc,CAAC,EAC/C,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAErB,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ToolsAndSplitPanelProps {\n toolsHide: boolean;\n toolsOpen: boolean;\n drawerWidth: number;\n toolsWidth: number;\n headerHeight: DesktopDrawerProps['topOffset'];\n footerHeight: DesktopDrawerProps['bottomOffset'];\n panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n tools: React.ReactNode;\n splitPanel: React.ReactNode;\n ariaLabels: AppLayoutProps['ariaLabels'];\n isMobile: boolean;\n onToolsToggle: DesktopDrawerProps['onToggle'];\n toggleRefs: DesktopDrawerProps['toggleRefs'];\n onLoseToolsFocus: (event: React.FocusEvent) => void;\n}\n\nexport function ToolsAndSplitPanel({\n ariaLabels,\n drawerWidth,\n footerHeight,\n headerHeight,\n isMobile,\n onToolsToggle,\n panelHeightStyle,\n splitPanel,\n toggleRefs,\n onLoseToolsFocus,\n tools,\n toolsHide,\n toolsOpen,\n toolsWidth,\n}: ToolsAndSplitPanelProps) {\n return (\n <>\n <div\n style={{\n width: drawerWidth,\n }}\n >\n <div\n className={clsx(styles['panel-wrapper-outer'], {\n [styles.mobile]: isMobile,\n [styles.open]: toolsOpen,\n })}\n style={{\n ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n }}\n >\n {splitPanel}\n {!toolsHide && (\n <Drawer\n type=\"tools\"\n isMobile={isMobile}\n width={toolsWidth}\n isOpen={toolsOpen}\n onToggle={onToolsToggle}\n toggleRefs={toggleRefs}\n onLoseFocus={onLoseToolsFocus}\n contentClassName={testutilStyles.tools}\n closeClassName={testutilStyles['tools-close']}\n toggleClassName={testutilStyles['tools-toggle']}\n topOffset={headerHeight}\n bottomOffset={footerHeight}\n ariaLabels={ariaLabels}\n >\n {tools}\n </Drawer>\n )}\n </div>\n </div>\n </>\n );\n}\n"]}
|