@cloudscape-design/components 3.0.172 → 3.0.174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-layout/content-wrapper/index.d.ts +2 -0
- package/app-layout/content-wrapper/index.d.ts.map +1 -1
- package/app-layout/content-wrapper/index.js +2 -2
- package/app-layout/content-wrapper/index.js.map +1 -1
- package/app-layout/content-wrapper/styles.css.js +3 -2
- package/app-layout/content-wrapper/styles.scoped.css +26 -2
- package/app-layout/content-wrapper/styles.selectors.js +3 -2
- package/app-layout/defaults.d.ts.map +1 -1
- package/app-layout/defaults.js +1 -0
- package/app-layout/defaults.js.map +1 -1
- package/app-layout/drawer.d.ts +0 -1
- package/app-layout/drawer.d.ts.map +1 -1
- package/app-layout/drawer.js.map +1 -1
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +24 -17
- package/app-layout/index.js.map +1 -1
- package/app-layout/interfaces.d.ts +1 -1
- package/app-layout/interfaces.d.ts.map +1 -1
- package/app-layout/interfaces.js.map +1 -1
- package/app-layout/toggles/index.js +1 -1
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/tools-and-split-panel.d.ts.map +1 -1
- package/app-layout/tools-and-split-panel.js +1 -1
- package/app-layout/tools-and-split-panel.js.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +1 -1
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts +4 -0
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +13 -8
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/layout.js +8 -8
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/main.js +2 -2
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
- package/app-layout/visual-refresh/navigation.js +1 -1
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.d.ts.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +3 -5
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +60 -60
- package/app-layout/visual-refresh/styles.scoped.css +164 -160
- package/app-layout/visual-refresh/styles.selectors.js +60 -60
- package/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/app-layout/visual-refresh/tools.js +6 -8
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/internal/context/split-panel-context.d.ts +5 -2
- package/internal/context/split-panel-context.d.ts.map +1 -1
- package/internal/context/split-panel-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/split-panel/index.d.ts +1 -1
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +11 -8
- package/split-panel/index.js.map +1 -1
- package/split-panel/interfaces.d.ts +4 -0
- package/split-panel/interfaces.d.ts.map +1 -1
- package/split-panel/interfaces.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n handleNavigationClick,\n isMobile,\n isNavigationOpen,\n navigation,\n navigationHide,\n navigationWidth,\n isToolsOpen,\n isAnyPanelOpen,\n toolsHide,\n } = useAppLayoutInternals();\n\n const { refs: focusRefs } = useFocusControl(isNavigationOpen);\n\n if (navigationHide) {\n return null;\n }\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n return (\n <Transition in={isNavigationOpen}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['navigation-container'], {\n [testutilStyles['drawer-closed']]: !isNavigationOpen,\n [styles.unfocusable]: isUnfocusable,\n })}\n // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n >\n {!isMobile && (\n <nav\n aria-hidden={isMobile || isNavigationOpen ? true : false}\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles['show-navigation'], {\n [styles.animating]: state === 'exiting',\n [styles['is-navigation-open']]: isNavigationOpen,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => handleNavigationClick(true)}\n ref={focusRefs.toggle}\n />\n </nav>\n )}\n\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(\n styles.navigation,\n {\n [styles.animating]: state === 'entering',\n [styles['is-navigation-open']]: isNavigationOpen,\n },\n testutilStyles.navigation\n )}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n aria-hidden={!isNavigationOpen}\n onClick={event => {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n <div className={clsx(styles['animated-content'])}>\n <div className={clsx(styles['hide-navigation'])}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={focusRefs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n </div>\n )}\n </Transition>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAkDjE;kBAlDQ,UAAU;;;;AAoDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBAmCtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}
|
|
@@ -14,9 +14,8 @@ import customCssProps from '../../internal/generated/custom-css-properties';
|
|
|
14
14
|
*/
|
|
15
15
|
function SplitPanel(_a) {
|
|
16
16
|
var children = _a.children;
|
|
17
|
-
var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
|
|
18
|
-
var _c = useState(
|
|
19
|
-
var _d = useState(), splitPanelLastInteraction = _d[0], setSplitPanelLastInteraction = _d[1];
|
|
17
|
+
var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, setSplitPanelToggle = _b.setSplitPanelToggle, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
|
|
18
|
+
var _c = useState(), splitPanelLastInteraction = _c[0], setSplitPanelLastInteraction = _c[1];
|
|
20
19
|
useEffectOnUpdate(function () { return setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [isSplitPanelOpen]);
|
|
21
20
|
useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
|
|
22
21
|
var context = {
|
|
@@ -40,8 +39,7 @@ function SplitPanel(_a) {
|
|
|
40
39
|
rightOffset: 0,
|
|
41
40
|
size: splitPanelSize || 0,
|
|
42
41
|
topOffset: 0,
|
|
43
|
-
|
|
44
|
-
setOpenButtonAriaLabel: setOpenButtonAriaLabel,
|
|
42
|
+
setSplitPanelToggle: setSplitPanelToggle,
|
|
45
43
|
lastInteraction: splitPanelLastInteraction
|
|
46
44
|
};
|
|
47
45
|
return React.createElement(SplitPanelContextProvider, { value: context }, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.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, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n SplitPanelContextProvider,\n SplitPanelContextProps,\n SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n const {\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n isMobile,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n splitPanelPosition,\n splitPanelSize,\n headerHeight,\n footerHeight,\n } = useAppLayoutInternals();\n\n const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n useEffectOnUpdate(\n () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n [isSplitPanelOpen]\n );\n useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n const context: SplitPanelContextProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n getMaxWidth: () => document.documentElement.clientWidth,\n isForcedPosition: isSplitPanelForcedPosition,\n isMobile,\n isOpen: isSplitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: handleSplitPanelPreferencesChange,\n onResize: handleSplitPanelResize,\n onToggle: handleSplitPanelClick,\n position: splitPanelPosition,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n rightOffset: 0,\n size: splitPanelSize || 0,\n topOffset: 0,\n openButtonAriaLabel,\n setOpenButtonAriaLabel,\n lastInteraction: splitPanelLastInteraction,\n };\n\n return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n const {\n disableBodyScroll,\n isNavigationOpen,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['is-navigation-open']]: isNavigationOpen,\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n [styles['is-tools-open']]: isToolsOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n }}\n >\n <SplitPanel></SplitPanel>\n {splitPanelPosition === 'bottom' && splitPanel}\n </section>\n )}\n </Transition>\n );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n const {\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelMaxWidth,\n splitPanelMinWidth,\n splitPanelReportedSize,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n }}\n >\n <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n </section>\n )}\n </Transition>\n );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n isSplitPanelForcedPosition: boolean,\n splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n splitPanelPosition = 'side';\n }\n\n return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
|
|
1
|
+
{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.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, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n SplitPanelContextProvider,\n SplitPanelContextProps,\n SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n const {\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n isMobile,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n splitPanelPosition,\n splitPanelSize,\n setSplitPanelToggle,\n headerHeight,\n footerHeight,\n } = useAppLayoutInternals();\n\n const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n useEffectOnUpdate(\n () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n [isSplitPanelOpen]\n );\n useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n const context: SplitPanelContextProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n getMaxWidth: () => document.documentElement.clientWidth,\n isForcedPosition: isSplitPanelForcedPosition,\n isMobile,\n isOpen: isSplitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: handleSplitPanelPreferencesChange,\n onResize: handleSplitPanelResize,\n onToggle: handleSplitPanelClick,\n position: splitPanelPosition,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n rightOffset: 0,\n size: splitPanelSize || 0,\n topOffset: 0,\n setSplitPanelToggle,\n lastInteraction: splitPanelLastInteraction,\n };\n\n return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n const {\n disableBodyScroll,\n isNavigationOpen,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['is-navigation-open']]: isNavigationOpen,\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n [styles['is-tools-open']]: isToolsOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n }}\n >\n <SplitPanel></SplitPanel>\n {splitPanelPosition === 'bottom' && splitPanel}\n </section>\n )}\n </Transition>\n );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n const {\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelMaxWidth,\n splitPanelMinWidth,\n splitPanelReportedSize,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n }}\n >\n <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n </section>\n )}\n </Transition>\n );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n isSplitPanelForcedPosition: boolean,\n splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n splitPanelPosition = 'side';\n }\n\n return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
|
|
@@ -1,65 +1,65 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"appbar": "
|
|
5
|
-
"appbar-nav": "awsui_appbar-
|
|
6
|
-
"breadcrumbs": "
|
|
7
|
-
"appbar-tools": "awsui_appbar-
|
|
8
|
-
"has-breadcrumbs": "awsui_has-
|
|
9
|
-
"has-notifications-content": "awsui_has-notifications-
|
|
10
|
-
"has-header": "awsui_has-
|
|
11
|
-
"has-dynamic-overlap-height": "awsui_has-dynamic-overlap-
|
|
12
|
-
"content-type-wizard": "awsui_content-type-
|
|
13
|
-
"content-type-cards": "awsui_content-type-
|
|
14
|
-
"content-type-table": "awsui_content-type-
|
|
15
|
-
"has-sticky-background": "awsui_has-sticky-
|
|
16
|
-
"background": "
|
|
17
|
-
"notifications-appbar-header": "awsui_notifications-appbar-
|
|
18
|
-
"sticky-notifications": "awsui_sticky-
|
|
19
|
-
"overlap": "
|
|
20
|
-
"content": "
|
|
21
|
-
"layout": "
|
|
22
|
-
"has-max-content-width": "awsui_has-max-content-
|
|
23
|
-
"is-overlap-disabled": "awsui_is-overlap-
|
|
24
|
-
"disable-body-scroll": "awsui_disable-body-
|
|
25
|
-
"has-sticky-notifications": "awsui_has-sticky-
|
|
26
|
-
"has-split-panel": "awsui_has-split-
|
|
27
|
-
"split-panel-position-bottom": "awsui_split-panel-position-
|
|
28
|
-
"has-content-gap-left": "awsui_has-content-gap-
|
|
29
|
-
"has-content-gap-right": "awsui_has-content-gap-
|
|
30
|
-
"block-body-scroll": "awsui_block-body-
|
|
31
|
-
"container": "
|
|
32
|
-
"disable-content-paddings": "awsui_disable-content-
|
|
33
|
-
"is-navigation-open": "awsui_is-navigation-
|
|
34
|
-
"is-tools-open": "awsui_is-tools-
|
|
35
|
-
"is-split-panel-open": "awsui_is-split-panel-
|
|
36
|
-
"split-panel-position-side": "awsui_split-panel-position-
|
|
37
|
-
"content-type-default": "awsui_content-type-
|
|
38
|
-
"content-type-form": "awsui_content-type-
|
|
39
|
-
"unfocusable": "
|
|
40
|
-
"navigation-container": "awsui_navigation-
|
|
41
|
-
"show-navigation": "awsui_show-
|
|
42
|
-
"animating": "
|
|
43
|
-
"showButtons": "
|
|
44
|
-
"navigation": "
|
|
45
|
-
"openNavigation": "
|
|
46
|
-
"animated-content": "awsui_animated-
|
|
47
|
-
"hide-navigation": "awsui_hide-
|
|
48
|
-
"notifications": "
|
|
49
|
-
"split-panel-bottom": "awsui_split-panel-
|
|
50
|
-
"position-bottom": "awsui_position-
|
|
51
|
-
"openSplitPanelBottom": "
|
|
52
|
-
"split-panel-side": "awsui_split-panel-
|
|
53
|
-
"position-side": "awsui_position-
|
|
54
|
-
"openSplitPanelSide": "
|
|
55
|
-
"tools-container": "awsui_tools-
|
|
56
|
-
"tools": "
|
|
57
|
-
"openTools": "
|
|
58
|
-
"has-tools-form-persistence": "awsui_has-tools-form-
|
|
59
|
-
"hide-tools": "awsui_hide-
|
|
60
|
-
"show-tools": "awsui_show-
|
|
61
|
-
"has-tools-form": "awsui_has-tools-
|
|
62
|
-
"trigger": "
|
|
63
|
-
"selected": "
|
|
4
|
+
"appbar": "awsui_appbar_hyvsj_geabg_93",
|
|
5
|
+
"appbar-nav": "awsui_appbar-nav_hyvsj_geabg_117",
|
|
6
|
+
"breadcrumbs": "awsui_breadcrumbs_hyvsj_geabg_121",
|
|
7
|
+
"appbar-tools": "awsui_appbar-tools_hyvsj_geabg_125",
|
|
8
|
+
"has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_geabg_166",
|
|
9
|
+
"has-notifications-content": "awsui_has-notifications-content_hyvsj_geabg_173",
|
|
10
|
+
"has-header": "awsui_has-header_hyvsj_geabg_179",
|
|
11
|
+
"has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_geabg_179",
|
|
12
|
+
"content-type-wizard": "awsui_content-type-wizard_hyvsj_geabg_180",
|
|
13
|
+
"content-type-cards": "awsui_content-type-cards_hyvsj_geabg_183",
|
|
14
|
+
"content-type-table": "awsui_content-type-table_hyvsj_geabg_184",
|
|
15
|
+
"has-sticky-background": "awsui_has-sticky-background_hyvsj_geabg_187",
|
|
16
|
+
"background": "awsui_background_hyvsj_geabg_221",
|
|
17
|
+
"notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_geabg_224",
|
|
18
|
+
"sticky-notifications": "awsui_sticky-notifications_hyvsj_geabg_236",
|
|
19
|
+
"overlap": "awsui_overlap_hyvsj_geabg_242",
|
|
20
|
+
"content": "awsui_content_hyvsj_geabg_180",
|
|
21
|
+
"layout": "awsui_layout_hyvsj_geabg_333",
|
|
22
|
+
"has-max-content-width": "awsui_has-max-content-width_hyvsj_geabg_415",
|
|
23
|
+
"is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_geabg_442",
|
|
24
|
+
"disable-body-scroll": "awsui_disable-body-scroll_hyvsj_geabg_445",
|
|
25
|
+
"has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_geabg_449",
|
|
26
|
+
"has-split-panel": "awsui_has-split-panel_hyvsj_geabg_463",
|
|
27
|
+
"split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_geabg_463",
|
|
28
|
+
"has-content-gap-left": "awsui_has-content-gap-left_hyvsj_geabg_475",
|
|
29
|
+
"has-content-gap-right": "awsui_has-content-gap-right_hyvsj_geabg_478",
|
|
30
|
+
"block-body-scroll": "awsui_block-body-scroll_hyvsj_geabg_493",
|
|
31
|
+
"container": "awsui_container_hyvsj_geabg_501",
|
|
32
|
+
"disable-content-paddings": "awsui_disable-content-paddings_hyvsj_geabg_527",
|
|
33
|
+
"is-navigation-open": "awsui_is-navigation-open_hyvsj_geabg_532",
|
|
34
|
+
"is-tools-open": "awsui_is-tools-open_hyvsj_geabg_535",
|
|
35
|
+
"is-split-panel-open": "awsui_is-split-panel-open_hyvsj_geabg_535",
|
|
36
|
+
"split-panel-position-side": "awsui_split-panel-position-side_hyvsj_geabg_535",
|
|
37
|
+
"content-type-default": "awsui_content-type-default_hyvsj_geabg_555",
|
|
38
|
+
"content-type-form": "awsui_content-type-form_hyvsj_geabg_555",
|
|
39
|
+
"unfocusable": "awsui_unfocusable_hyvsj_geabg_596",
|
|
40
|
+
"navigation-container": "awsui_navigation-container_hyvsj_geabg_604",
|
|
41
|
+
"show-navigation": "awsui_show-navigation_hyvsj_geabg_639",
|
|
42
|
+
"animating": "awsui_animating_hyvsj_geabg_661",
|
|
43
|
+
"showButtons": "awsui_showButtons_hyvsj_geabg_1",
|
|
44
|
+
"navigation": "awsui_navigation_hyvsj_geabg_604",
|
|
45
|
+
"openNavigation": "awsui_openNavigation_hyvsj_geabg_1",
|
|
46
|
+
"animated-content": "awsui_animated-content_hyvsj_geabg_722",
|
|
47
|
+
"hide-navigation": "awsui_hide-navigation_hyvsj_geabg_731",
|
|
48
|
+
"notifications": "awsui_notifications_hyvsj_geabg_224",
|
|
49
|
+
"split-panel-bottom": "awsui_split-panel-bottom_hyvsj_geabg_796",
|
|
50
|
+
"position-bottom": "awsui_position-bottom_hyvsj_geabg_842",
|
|
51
|
+
"openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_geabg_1",
|
|
52
|
+
"split-panel-side": "awsui_split-panel-side_hyvsj_geabg_871",
|
|
53
|
+
"position-side": "awsui_position-side_hyvsj_geabg_899",
|
|
54
|
+
"openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_geabg_1",
|
|
55
|
+
"tools-container": "awsui_tools-container_hyvsj_geabg_936",
|
|
56
|
+
"tools": "awsui_tools_hyvsj_geabg_936",
|
|
57
|
+
"openTools": "awsui_openTools_hyvsj_geabg_1",
|
|
58
|
+
"has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_geabg_1021",
|
|
59
|
+
"hide-tools": "awsui_hide-tools_hyvsj_geabg_1031",
|
|
60
|
+
"show-tools": "awsui_show-tools_hyvsj_geabg_1043",
|
|
61
|
+
"has-tools-form": "awsui_has-tools-form_hyvsj_geabg_1021",
|
|
62
|
+
"trigger": "awsui_trigger_hyvsj_geabg_1100",
|
|
63
|
+
"selected": "awsui_selected_hyvsj_geabg_1139"
|
|
64
64
|
};
|
|
65
65
|
|