@cloudscape-design/components 3.0.381 → 3.0.383
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/index.d.ts.map +1 -1
- package/app-layout/index.js +4 -2
- package/app-layout/index.js.map +1 -1
- package/app-layout/utils/use-drawers.d.ts +1 -2
- package/app-layout/utils/use-drawers.d.ts.map +1 -1
- package/app-layout/utils/use-drawers.js +2 -4
- package/app-layout/utils/use-drawers.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +2 -2
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +9 -15
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/attribute-editor/interfaces.d.ts.map +1 -1
- package/attribute-editor/interfaces.js.map +1 -1
- package/attribute-editor/row.d.ts.map +1 -1
- package/attribute-editor/row.js +7 -1
- package/attribute-editor/row.js.map +1 -1
- package/container/interfaces.d.ts +2 -4
- package/container/interfaces.d.ts.map +1 -1
- package/container/interfaces.js.map +1 -1
- package/container/styles.css.js +28 -28
- package/container/styles.scoped.css +57 -52
- package/container/styles.selectors.js +28 -28
- package/i18n/messages/all.all.js +12 -0
- package/i18n/messages/all.all.json +12 -0
- package/i18n/messages/all.de.js +1 -0
- package/i18n/messages/all.de.json +1 -0
- package/i18n/messages/all.en-GB.js +1 -0
- package/i18n/messages/all.en-GB.json +1 -0
- package/i18n/messages/all.en.js +1 -0
- package/i18n/messages/all.en.json +1 -0
- package/i18n/messages/all.es.js +1 -0
- package/i18n/messages/all.es.json +1 -0
- package/i18n/messages/all.fr.js +1 -0
- package/i18n/messages/all.fr.json +1 -0
- package/i18n/messages/all.id.js +1 -0
- package/i18n/messages/all.id.json +1 -0
- package/i18n/messages/all.it.js +1 -0
- package/i18n/messages/all.it.json +1 -0
- package/i18n/messages/all.ja.js +1 -0
- package/i18n/messages/all.ja.json +1 -0
- package/i18n/messages/all.ko.js +1 -0
- package/i18n/messages/all.ko.json +1 -0
- package/i18n/messages/all.pt-BR.js +1 -0
- package/i18n/messages/all.pt-BR.json +1 -0
- package/i18n/messages/all.zh-CN.js +1 -0
- package/i18n/messages/all.zh-CN.json +1 -0
- package/i18n/messages/all.zh-TW.js +1 -0
- package/i18n/messages/all.zh-TW.json +1 -0
- package/i18n/messages-types.d.ts +3 -0
- package/i18n/messages-types.d.ts.map +1 -1
- package/i18n/messages-types.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.d.ts +1 -1
- package/internal/analytics/components/analytics-funnel.js +1 -1
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/components/drawer/index.d.ts +4 -0
- package/internal/components/drawer/index.d.ts.map +1 -0
- package/internal/components/drawer/index.js +22 -0
- package/internal/components/drawer/index.js.map +1 -0
- package/internal/components/drawer/interfaces.d.ts +31 -0
- package/internal/components/drawer/interfaces.d.ts.map +1 -0
- package/internal/components/drawer/interfaces.js +2 -0
- package/internal/components/drawer/interfaces.js.map +1 -0
- package/internal/components/drawer/styles.css.js +8 -0
- package/internal/components/drawer/styles.scoped.css +166 -0
- package/internal/components/drawer/styles.selectors.js +9 -0
- package/internal/components/portal/index.d.ts +1 -1
- package/internal/components/portal/index.d.ts.map +1 -1
- package/internal/components/portal/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +11 -0
- package/internal/generated/styles/tokens.js +11 -0
- package/internal/generated/theming/index.cjs +22 -0
- package/internal/generated/theming/index.cjs.d.ts +88 -0
- package/internal/generated/theming/index.d.ts +88 -0
- package/internal/generated/theming/index.js +22 -0
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/header-cell/index.d.ts +2 -1
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +2 -3
- package/table/header-cell/index.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +8 -1
- package/table/internal.js.map +1 -1
- package/table/resizer/index.d.ts +2 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +4 -3
- package/table/resizer/index.js.map +1 -1
- package/table/thead.d.ts +1 -0
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +2 -2
- package/table/thead.js.map +1 -1
- package/wizard/internal.d.ts.map +1 -1
- package/wizard/internal.js +38 -1
- package/wizard/internal.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.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, {\n createContext,\n useCallback,\n useEffect,\n useLayoutEffect,\n useImperativeHandle,\n useRef,\n useState,\n useContext,\n} from 'react';\nimport { applyDefaults } from '../defaults';\nimport { AppLayoutContext } from '../../internal/context/app-layout-context';\nimport { DynamicOverlapContext } from '../../internal/context/dynamic-overlap-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { FocusControlRefs, useFocusControl } from '../utils/use-focus-control';\nimport { DrawerFocusControlRefs, useDrawerFocusControl } from '../utils/use-drawer-focus-control';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { isDevelopment } from '../../internal/is-development';\nimport { getSplitPanelPosition } from './split-panel';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { SplitPanelFocusControlRefs, useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { DrawerItem, InternalDrawerProps } from '../drawer/interfaces';\nimport { useStableCallback, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport useResize from '../utils/use-resize';\nimport styles from './styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport useBackgroundOverlap from './use-background-overlap';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\ninterface AppLayoutInternals extends AppLayoutProps {\n activeDrawerId: string | undefined;\n drawers: Array<DrawerItem>;\n drawersAriaLabel: string | undefined;\n drawersOverflowAriaLabel: string | undefined;\n drawersRefs: DrawerFocusControlRefs;\n drawerSize: number;\n drawersMaxWidth: number;\n drawerRef: React.Ref<HTMLElement>;\n resizeHandle: React.ReactElement;\n drawersTriggerCount: number;\n handleDrawersClick: (activeDrawerId: string | undefined, skipFocusControl?: boolean) => void;\n handleSplitPanelClick: () => void;\n handleNavigationClick: (isOpen: boolean) => void;\n handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n handleSplitPanelResize: (detail: { size: number }) => void;\n handleToolsClick: (value: boolean, skipFocusControl?: boolean) => void;\n hasBackgroundOverlap: boolean;\n hasDefaultToolsWidth: boolean;\n hasDrawerViewportOverlay: boolean;\n hasNotificationsContent: boolean;\n hasOpenDrawer?: boolean;\n hasStickyBackground: boolean;\n isBackgroundOverlapDisabled: boolean;\n isMobile: boolean;\n isNavigationOpen: boolean;\n isSplitPanelForcedPosition: boolean;\n isSplitPanelOpen?: boolean;\n isToolsOpen: boolean;\n layoutElement: React.Ref<HTMLElement>;\n layoutWidth: number;\n loseToolsFocus: () => void;\n loseDrawersFocus: () => void;\n mainElement: React.Ref<HTMLDivElement>;\n mainOffsetLeft: number;\n navigationRefs: FocusControlRefs;\n notificationsElement: React.Ref<HTMLDivElement>;\n notificationsHeight: number;\n offsetBottom: number;\n setHasStickyBackground: (value: boolean) => void;\n setSplitPanelReportedSize: (value: number) => void;\n setSplitPanelReportedHeaderHeight: (value: number) => void;\n headerHeight: number;\n footerHeight: number;\n splitPanelControlId: string;\n splitPanelMaxWidth: number;\n splitPanelMinWidth: number;\n splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n splitPanelReportedSize: number;\n splitPanelReportedHeaderHeight: number;\n splitPanelToggle: SplitPanelSideToggleProps;\n setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;\n splitPanelDisplayed: boolean;\n splitPanelRefs: SplitPanelFocusControlRefs;\n toolsControlId: string;\n toolsRefs: FocusControlRefs;\n}\n\n/**\n * The default values are destructured in the context instantiation to\n * prevent downstream Typescript errors. This could likely be replaced\n * by a context interface definition that extends the AppLayout interface.\n */\nconst AppLayoutInternalsContext = createContext<AppLayoutInternals | null>(null);\n\ninterface AppLayoutProviderInternalsProps extends AppLayoutProps {\n children: React.ReactNode;\n}\n\nexport function useAppLayoutInternals() {\n const ctx = useContext(AppLayoutInternalsContext);\n if (!ctx) {\n throw new Error('Invariant violation: this context is only available inside app layout');\n }\n return ctx;\n}\n\nexport const AppLayoutInternalsProvider = React.forwardRef(\n (\n {\n toolsHide,\n toolsOpen: controlledToolsOpen,\n navigationHide,\n navigationOpen: controlledNavigationOpen,\n contentType = 'default',\n headerSelector = '#b #h',\n footerSelector = '#b #h',\n children,\n splitPanel,\n ...props\n }: AppLayoutProviderInternalsProps,\n forwardRef: React.Ref<AppLayoutProps.Ref>\n ) => {\n const isMobile = useMobile();\n\n if (isDevelopment) {\n if (controlledToolsOpen && toolsHide) {\n warnOnce(\n 'AppLayout',\n `You have enabled both the \\`toolsOpen\\` prop and the \\`toolsHide\\` prop. This is not supported. Set \\`toolsOpen\\` to \\`false\\` when you set \\`toolsHide\\` to \\`true\\`.`\n );\n }\n }\n\n const [hasStickyBackground, setHasStickyBackground] = useState(false);\n\n /**\n * Set the default values for minimum and maximum content width.\n */\n const geckoMaxCssLength = ((1 << 30) - 1) / 60;\n const halfGeckoMaxCssLength = geckoMaxCssLength / 2;\n // CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n // Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n const maxContentWidth =\n props.maxContentWidth && props.maxContentWidth > halfGeckoMaxCssLength\n ? halfGeckoMaxCssLength\n : props.maxContentWidth ?? 0;\n const minContentWidth = props.minContentWidth ?? 280;\n\n /**\n * Determine the default state of the Navigation and Tools drawers.\n * Mobile viewports should be closed by default under all circumstances.\n * If the navigationOpen prop has been set then that should take precedence\n * over the contentType prop. Desktop viewports that do not have the\n * navigationOpen or contentType props set will use the default contentType.\n */\n const contentTypeDefaults = applyDefaults(contentType, { maxContentWidth, minContentWidth }, true);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Navigation drawer. The logic\n * for determining the default state is colocated with the Navigation component.\n *\n * The callback that will be passed to the Navigation and MobileToolbar\n * components to handle the click events that will change the state\n * of the Navigation drawer. It will set the Navigation state with the\n * useControllable hook and also fire the onNavigationChange function to\n * emit the state change.\n */\n const [isNavigationOpen = false, setIsNavigationOpen] = useControllable(\n controlledNavigationOpen,\n props.onNavigationChange,\n isMobile ? false : contentTypeDefaults.navigationOpen,\n { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }\n );\n\n const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(isNavigationOpen);\n\n const handleNavigationClick = useStableCallback(function handleNavigationChange(isOpen: boolean) {\n setIsNavigationOpen(isOpen);\n focusNavButtons();\n fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n });\n\n useEffect(() => {\n // Close navigation drawer on mobile so that the main content is visible\n if (isMobile) {\n handleNavigationClick(false);\n }\n }, [isMobile, handleNavigationClick]);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Tools drawer. The logic\n * for determining the default state is colocated with the Tools component.\n *\n * The callback that will be passed to the Navigation and MobileToolbar\n * components to handle the click events that will change the state\n * of the Tools drawer. It will set the Tools state with the\n * useControllable hook and also fire the onToolsChange function to\n * emit the state change.\n */\n const toolsWidth = props.toolsWidth ?? 290;\n const hasDefaultToolsWidth = props.toolsWidth === undefined;\n\n const [isToolsOpen = false, setIsToolsOpen] = useControllable(\n controlledToolsOpen,\n props.onToolsChange,\n isMobile ? false : contentTypeDefaults.toolsOpen,\n { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }\n );\n\n const {\n refs: toolsRefs,\n setFocus: focusToolsButtons,\n loseFocus: loseToolsFocus,\n } = useFocusControl(isToolsOpen, true);\n\n const handleToolsClick = useCallback(\n function handleToolsChange(isOpen: boolean, skipFocusControl?: boolean) {\n setIsToolsOpen(isOpen);\n !skipFocusControl && focusToolsButtons();\n fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n },\n [props.onToolsChange, setIsToolsOpen, focusToolsButtons]\n );\n\n /**\n * On mobile viewports the navigation and tools drawers are adjusted to a fixed position\n * that consumes 100% of the viewport height and width. The body content could potentially\n * be scrollable underneath the drawer. In order to prevent this a CSS class needs to be\n * added to the document body that sets overflow to hidden.\n */\n useEffect(\n function handleBodyScroll() {\n if (isMobile && (isNavigationOpen || isToolsOpen)) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n\n // Ensure the CSS class is removed from the body on side effect cleanup\n return function cleanup() {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n },\n [isMobile, isNavigationOpen, isToolsOpen]\n );\n\n /**\n * Query the DOM for the header and footer elements based on the selectors provided\n * by the properties and pass the heights to the custom property definitions.\n */\n const headerHeight = useObservedElement(headerSelector);\n const footerHeight = useObservedElement(footerSelector);\n\n /**\n * Set the default values for the minimum and maximum Split Panel width when it is\n * in the side position. The useLayoutEffect will compute the available space in the\n * DOM for the Split Panel given the current state. The minimum and maximum\n * widths will potentially trigger a side effect that will put the Split Panel into\n * a forced position on the bottom.\n */\n const splitPanelMinWidth = 280;\n const [splitPanelMaxWidth, setSplitPanelMaxWidth] = useState(splitPanelMinWidth);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Split Panel. By default\n * the Split Panel should always be closed on page load.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the click events that will change the state of the SplitPanel\n * to open or closed given the current state. It will set the isSplitPanelOpen\n * controlled state and fire the onSplitPanelToggle event.\n */\n const [isSplitPanelOpen, setIsSplitPanelOpen] = useControllable(\n props.splitPanelOpen,\n props.onSplitPanelToggle,\n false,\n { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }\n );\n\n /**\n * The useControllable hook will manage the controlled or uncontrolled\n * state of the splitPanelPreferences. By default the splitPanelPreferences\n * is undefined. When set the object shape should have a single key to indicate\n * either bottom or side position.\n *\n * The callback that will handle changes to the splitPanelPreferences\n * object that will determine if the SplitPanel is rendered either on the\n * bottom of the viewport or within the Tools container.\n */\n const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n props.splitPanelPreferences,\n props.onSplitPanelPreferencesChange,\n undefined,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelPreferences',\n changeHandler: 'onSplitPanelPreferencesChange',\n }\n );\n\n const { refs: splitPanelRefs, setLastInteraction: setSplitPanelLastInteraction } = useSplitPanelFocusControl([\n splitPanelPreferences,\n isSplitPanelOpen,\n ]);\n\n const handleSplitPanelClick = useCallback(\n function handleSplitPanelChange() {\n setIsSplitPanelOpen(!isSplitPanelOpen);\n setSplitPanelLastInteraction({ type: isSplitPanelOpen ? 'close' : 'open' });\n fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n },\n [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen, setSplitPanelLastInteraction]\n );\n\n /**\n * The Split Panel will be in forced (bottom) position if the defined minimum width is\n * greater than the maximum width. In other words, the maximum width is the currently\n * available horizontal space based on all other components that are rendered. If the\n * minimum width exceeds this value then there is not enough horizontal space and we must\n * force it to the bottom position.\n */\n const [isSplitPanelForcedPosition, setSplitPanelForcedPosition] = useState(false);\n const splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);\n\n useLayoutEffect(\n function handleSplitPanelForcePosition() {\n setSplitPanelForcedPosition(splitPanelMinWidth > splitPanelMaxWidth);\n },\n [splitPanelMaxWidth, splitPanelMinWidth]\n );\n\n /**\n * The useControllable hook will set the default size of the SplitPanel based\n * on the default position set in the splitPanelPreferences. The logic for the\n * default size is contained in the SplitPanel component. The splitPanelControlledSize\n * will be bound to the size property in the SplitPanel context for rendering.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the resize events that will change the size of the SplitPanel.\n * It will set the splitPanelControlledSize controlled state and fire the\n * onSplitPanelResize event.\n */\n const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);\n const [splitPanelToggle, setSplitPanelToggle] = useState<SplitPanelSideToggleProps>({\n displayed: false,\n ariaLabel: undefined,\n });\n const splitPanelDisplayed = !!(splitPanelToggle.displayed || isSplitPanelOpen);\n const splitPanelControlId = useUniqueId('split-panel-');\n const toolsControlId = useUniqueId('tools-');\n\n const [splitPanelSize, setSplitPanelSize] = useControllable(\n props.splitPanelSize,\n props.onSplitPanelResize,\n getSplitPanelDefaultSize(splitPanelPosition),\n { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n );\n\n const handleSplitPanelResize = useCallback(\n function handleSplitPanelChange(detail: { size: number }) {\n setSplitPanelSize(detail.size);\n fireNonCancelableEvent(props.onSplitPanelResize, detail);\n },\n [props.onSplitPanelResize, setSplitPanelSize]\n );\n\n const handleSplitPanelPreferencesChange = useCallback(\n function handleSplitPanelChange(detail: AppLayoutProps.SplitPanelPreferences) {\n setSplitPanelPreferences(detail);\n setSplitPanelLastInteraction({ type: 'position' });\n fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n },\n [props.onSplitPanelPreferencesChange, setSplitPanelPreferences, setSplitPanelLastInteraction]\n );\n\n const {\n drawers,\n activeDrawer,\n activeDrawerId,\n onActiveDrawerChange,\n onActiveDrawerResize,\n activeDrawerSize,\n ...drawersProps\n } = useDrawers(\n props as InternalDrawerProps,\n {\n ariaLabels: props.ariaLabels,\n toolsHide,\n toolsOpen: isToolsOpen,\n tools: props.tools,\n toolsWidth,\n },\n contentTypeDefaults\n );\n\n const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);\n\n const {\n refs: drawersRefs,\n setFocus: focusDrawersButtons,\n loseFocus: loseDrawersFocus,\n setLastInteraction: setDrawerLastInteraction,\n } = useDrawerFocusControl([activeDrawerId, activeDrawer?.resizable], true, true);\n\n const drawerRef = useRef<HTMLDivElement>(null);\n const { resizeHandle, drawerSize } = useResize(drawerRef, {\n onActiveDrawerResize,\n activeDrawerSize,\n activeDrawer,\n drawersRefs,\n isToolsOpen,\n drawersMaxWidth,\n });\n\n const handleDrawersClick = (id: string | undefined, skipFocusControl?: boolean) => {\n const newActiveDrawerId = id !== activeDrawerId ? id : undefined;\n\n onActiveDrawerChange(newActiveDrawerId);\n\n !skipFocusControl && focusDrawersButtons();\n setDrawerLastInteraction({ type: activeDrawerId ? 'close' : 'open' });\n };\n\n const drawersTriggerCount =\n drawers.length + (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) + (!toolsHide ? 1 : 0);\n const hasOpenDrawer =\n activeDrawerId !== undefined ||\n isToolsOpen ||\n (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);\n const hasDrawerViewportOverlay =\n isMobile && (!!activeDrawerId || (!navigationHide && isNavigationOpen) || (!toolsHide && isToolsOpen));\n\n /**\n * The Layout element is not necessarily synonymous with the client\n * viewport width. There can be content in the horizontal viewport\n * that exists on either side of the AppLayout. This resize observer\n * will set the custom property of the Layout element width that\n * is used for various horizontal constraints such as the maximum\n * allowed width of the Tools container.\n *\n * The offsetLeft of the Main will return the distance that the\n * Main element has from the left edge of the Layout component.\n * The offsetLeft value can vary based on the presence and state\n * of the Navigation as well as content gaps in the grid definition.\n * This value is used to determine the max width constraint calculation\n * for the Tools container.\n */\n const [layoutContainerQuery, layoutElement] = useContainerQuery(rect => rect.contentBoxWidth);\n const layoutWidth = layoutContainerQuery ?? 0;\n\n const mainElement = useRef<HTMLDivElement>(null);\n const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n const { hasBackgroundOverlap, updateBackgroundOverlapHeight } = useBackgroundOverlap({\n contentHeader: props.contentHeader,\n disableContentHeaderOverlap: props.disableContentHeaderOverlap,\n layoutElement,\n });\n\n useLayoutEffect(\n function handleMainOffsetLeft() {\n setMainOffsetLeft(mainElement?.current?.offsetLeft ?? 0);\n },\n [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]\n );\n\n /**\n * Because the notifications slot does not give us any direction insight into\n * what the state of the child content is we need to have a mechanism for\n * tracking the height of the notifications and whether or not it has content.\n * The height of the notifications is an integer that will be used as a custom\n * property on the Layout component to determine what the sticky offset should\n * be if there are sticky notifications. This could be any number including\n * zero based on how the child content renders. The hasNotificationsContent boolean\n * is simply centralizing the logic of the notifications height being > 0 such\n * that it is not repeated in various components (such as MobileToolbar) that need to\n * know if the notifications slot is empty.\n */\n const [notificationsContainerQuery, notificationsElement] = useContainerQuery(rect => rect.contentBoxHeight);\n const [notificationsHeight, setNotificationsHeight] = useState(0);\n const [hasNotificationsContent, setHasNotificationsContent] = useState(false);\n\n useEffect(\n function handleNotificationsContent() {\n setNotificationsHeight(notificationsContainerQuery ?? 0);\n setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);\n },\n [notificationsContainerQuery]\n );\n\n /**\n * Determine the offsetBottom value based on the presence of a footer element and\n * the SplitPanel component. Ignore the SplitPanel if it is not in the bottom\n * position. Use the size property if it is open and the header height if it is closed.\n */\n let offsetBottom = footerHeight;\n\n if (splitPanelDisplayed && splitPanelPosition === 'bottom') {\n if (isSplitPanelOpen) {\n offsetBottom += splitPanelReportedSize;\n } else {\n offsetBottom += splitPanelReportedHeaderHeight;\n }\n }\n\n /**\n * Warning! This is a hack! In order to accurately calculate if there is adequate\n * horizontal space for the Split Panel to be in the side position we need two values\n * that are not available in JavaScript.\n *\n * The first is the the content gap on the right which is stored in a design token\n * and applied in the Layout CSS:\n *\n * $contentGapRight: #{awsui.$space-scaled-2x-xxxl};\n *\n * The second is the width of the element that has the circular buttons for the\n * Tools and Split Panel. This could be suppressed given the state of the Tools\n * drawer returning a zero value. It would, however, be rendered if the Split Panel\n * were to move into the side position. This is calculated in the Tools CSS and\n * the Trigger button CSS with design tokens:\n *\n * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;\n * width: awsui.$space-layout-toggle-diameter;\n *\n * These values will be defined below as static integers that are rough approximations\n * of their computed width when rendered in the DOM, but doubled to ensure adequate\n * spacing for the Split Panel to be in side position.\n */\n useLayoutEffect(\n function handleSplitPanelMaxWidth() {\n const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety\n const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety\n const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;\n const activeDrawerOffsetWidth = activeDrawerId ? drawerSize : 0;\n\n setSplitPanelMaxWidth(\n layoutWidth -\n mainOffsetLeft -\n minContentWidth -\n contentGapRight -\n toolsOffsetWidth -\n toolsFormOffsetWidth -\n activeDrawerOffsetWidth\n );\n\n setDrawersMaxWidth(layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsFormOffsetWidth);\n },\n [\n activeDrawerId,\n drawerSize,\n isNavigationOpen,\n isToolsOpen,\n layoutWidth,\n mainOffsetLeft,\n minContentWidth,\n toolsWidth,\n ]\n );\n\n /**\n * The useImperativeHandle hook in conjunction with the forwardRef function\n * in the AppLayout component definition expose the following callable\n * functions to component consumers when they put a ref as a property on\n * their component implementation.\n */\n useImperativeHandle(\n forwardRef,\n function createImperativeHandle() {\n return {\n closeNavigationIfNecessary: function () {\n isMobile && handleNavigationClick(false);\n },\n openTools: function () {\n handleToolsClick(true);\n },\n focusToolsClose: () => focusToolsButtons(true),\n focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),\n };\n },\n [isMobile, handleNavigationClick, handleToolsClick, focusToolsButtons, splitPanelRefs.slider]\n );\n\n return (\n <AppLayoutInternalsContext.Provider\n value={{\n ...props,\n activeDrawerId,\n contentType,\n drawers,\n drawersAriaLabel: drawersProps.ariaLabel,\n drawersOverflowAriaLabel: drawersProps.overflowAriaLabel,\n drawersRefs,\n drawersMaxWidth,\n drawerSize,\n drawerRef,\n resizeHandle,\n drawersTriggerCount,\n headerHeight,\n footerHeight,\n hasDefaultToolsWidth,\n hasDrawerViewportOverlay,\n handleDrawersClick,\n handleNavigationClick,\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n handleToolsClick,\n hasBackgroundOverlap,\n hasNotificationsContent,\n hasOpenDrawer,\n hasStickyBackground,\n isBackgroundOverlapDisabled: props.disableContentHeaderOverlap || !hasBackgroundOverlap,\n isMobile,\n isNavigationOpen: isNavigationOpen ?? false,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n isToolsOpen,\n layoutElement,\n layoutWidth,\n loseToolsFocus,\n loseDrawersFocus,\n mainElement,\n mainOffsetLeft,\n maxContentWidth,\n minContentWidth,\n navigationHide,\n navigationRefs,\n notificationsElement,\n notificationsHeight,\n offsetBottom,\n setHasStickyBackground,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelMaxWidth,\n splitPanelMinWidth,\n splitPanelPosition,\n splitPanelPreferences,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n splitPanelSize,\n splitPanelToggle,\n setSplitPanelToggle,\n splitPanelRefs,\n toolsControlId,\n toolsHide,\n toolsOpen: isToolsOpen,\n toolsWidth,\n toolsRefs,\n }}\n >\n <AppLayoutContext.Provider\n value={{\n stickyOffsetBottom: offsetBottom,\n stickyOffsetTop: 0, // not used in this design. Sticky headers read a CSS-var instead\n setHasStickyBackground,\n }}\n >\n <DynamicOverlapContext.Provider value={updateBackgroundOverlapHeight}>\n {children}\n </DynamicOverlapContext.Provider>\n </AppLayoutContext.Provider>\n </AppLayoutInternalsContext.Provider>\n );\n }\n);\n"]}
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/context.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAoB,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAA0B,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAClG,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAA8B,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAE/G,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAC5F,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AA4DjE;;;;GAIG;AACH,MAAM,yBAAyB,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAMjF,MAAM,UAAU,qBAAqB;IACnC,MAAM,GAAG,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAClD,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;KAC1F;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACxD,CACE,EAWkC,EAClC,UAAyC,EACzC,EAAE;;QAbF,EACE,SAAS,EACT,SAAS,EAAE,mBAAmB,EAC9B,cAAc,EACd,cAAc,EAAE,wBAAwB,EACxC,WAAW,GAAG,SAAS,EACvB,cAAc,GAAG,OAAO,EACxB,cAAc,GAAG,OAAO,EACxB,QAAQ,EACR,UAAU,OAEsB,EAD7B,KAAK,cAVV,2IAWC,CADS;IAIV,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,IAAI,aAAa,EAAE;QACjB,IAAI,mBAAmB,IAAI,SAAS,EAAE;YACpC,QAAQ,CACN,WAAW,EACX,wKAAwK,CACzK,CAAC;SACH;KACF;IAED,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE;;OAEG;IACH,MAAM,iBAAiB,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IAC/C,MAAM,qBAAqB,GAAG,iBAAiB,GAAG,CAAC,CAAC;IACpD,+FAA+F;IAC/F,gGAAgG;IAChG,MAAM,eAAe,GACnB,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,GAAG,qBAAqB;QACpE,CAAC,CAAC,qBAAqB;QACvB,CAAC,CAAC,MAAA,KAAK,CAAC,eAAe,mCAAI,CAAC,CAAC;IACjC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,mCAAI,GAAG,CAAC;IAErD;;;;;;OAMG;IACH,MAAM,mBAAmB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,CAAC;IAEnG;;;;;;;;;;OAUG;IACH,MAAM,CAAC,gBAAgB,GAAG,KAAK,EAAE,mBAAmB,CAAC,GAAG,eAAe,CACrE,wBAAwB,EACxB,KAAK,CAAC,kBAAkB,EACxB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,cAAc,EACrD,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,CACtG,CAAC;IAEF,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAE9F,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,sBAAsB,CAAC,MAAe;QAC7F,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC5B,eAAe,EAAE,CAAC;QAClB,sBAAsB,CAAC,KAAK,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,wEAAwE;QACxE,IAAI,QAAQ,EAAE;YACZ,qBAAqB,CAAC,KAAK,CAAC,CAAC;SAC9B;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,GAAG,CAAC;IAC3C,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;IAE5D,MAAM,CAAC,WAAW,GAAG,KAAK,EAAE,cAAc,CAAC,GAAG,eAAe,CAC3D,mBAAmB,EACnB,KAAK,CAAC,aAAa,EACnB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,EAChD,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,CAC5F,CAAC;IAEF,MAAM,EACJ,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,cAAc,GAC1B,GAAG,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAEvC,MAAM,gBAAgB,GAAG,WAAW,CAClC,SAAS,iBAAiB,CAAC,MAAe,EAAE,gBAA0B;QACpE,cAAc,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC,gBAAgB,IAAI,iBAAiB,EAAE,CAAC;QACzC,sBAAsB,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,EAAE,cAAc,EAAE,iBAAiB,CAAC,CACzD,CAAC;IAEF;;;;;OAKG;IACH,SAAS,CACP,SAAS,gBAAgB;QACvB,IAAI,QAAQ,IAAI,CAAC,gBAAgB,IAAI,WAAW,CAAC,EAAE;YACjD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;SAC1D;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;SAC7D;QAED,uEAAuE;QACvE,OAAO,SAAS,OAAO;YACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAC1C,CAAC;IAEF;;;OAGG;IACH,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAExD;;;;;;OAMG;IACH,MAAM,kBAAkB,GAAG,GAAG,CAAC;IAC/B,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAEjF;;;;;;;;;OASG;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,eAAe,CAC7D,KAAK,CAAC,cAAc,EACpB,KAAK,CAAC,kBAAkB,EACxB,KAAK,EACL,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,CACtG,CAAC;IAEF;;;;;;;;;OASG;IACH,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,eAAe,CACvE,KAAK,CAAC,qBAAqB,EAC3B,KAAK,CAAC,6BAA6B,EACnC,SAAS,EACT;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,uBAAuB;QACvC,aAAa,EAAE,+BAA+B;KAC/C,CACF,CAAC;IAEF,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,GAAG,yBAAyB,CAAC;QAC3G,qBAAqB;QACrB,gBAAgB;KACjB,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,WAAW,CACvC,SAAS,sBAAsB;QAC7B,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;QACvC,4BAA4B,CAAC,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC5E,sBAAsB,CAAC,KAAK,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAChF,CAAC,EACD,CAAC,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,4BAA4B,CAAC,CAChG,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,CAAC,0BAA0B,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClF,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;IAEpG,eAAe,CACb,SAAS,6BAA6B;QACpC,2BAA2B,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;IACvE,CAAC,EACD,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CACzC,CAAC;IAEF;;;;;;;;;;OAUG;IACH,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA4B;QAClF,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,SAAS;KACrB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,IAAI,gBAAgB,CAAC,CAAC;IAC/E,MAAM,mBAAmB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,eAAe,CACzD,KAAK,CAAC,cAAc,EACpB,KAAK,CAAC,kBAAkB,EACxB,wBAAwB,CAAC,kBAAkB,CAAC,EAC5C,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,CACtG,CAAC;IAEF,MAAM,sBAAsB,GAAG,WAAW,CACxC,SAAS,sBAAsB,CAAC,MAAwB;QACtD,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC/B,sBAAsB,CAAC,KAAK,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,KAAK,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAC9C,CAAC;IAEF,MAAM,iCAAiC,GAAG,WAAW,CACnD,SAAS,sBAAsB,CAAC,MAA4C;QAC1E,wBAAwB,CAAC,MAAM,CAAC,CAAC;QACjC,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QACnD,sBAAsB,CAAC,KAAK,CAAC,6BAA6B,EAAE,MAAM,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,KAAK,CAAC,6BAA6B,EAAE,wBAAwB,EAAE,4BAA4B,CAAC,CAC9F,CAAC;IAEF,MAAM,KAQF,UAAU,CAAC,KAA4B,EAAE;QAC3C,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS;QACT,SAAS,EAAE,WAAW;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,UAAU;KACX,CAAC,EAdI,EACJ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,OAQhB,EAPG,YAAY,cAPX,iHAQL,CAMC,CAAC;IAEH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAEnE,MAAM,EACJ,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,mBAAmB,EAC7B,SAAS,EAAE,gBAAgB,EAC3B,kBAAkB,EAAE,wBAAwB,GAC7C,GAAG,qBAAqB,CAAC,CAAC,cAAc,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEjF,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,SAAS,EAAE;QACxD,oBAAoB;QACpB,gBAAgB;QAChB,YAAY;QACZ,WAAW;QACX,WAAW;QACX,eAAe;KAChB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,CAAC,EAAsB,EAAE,gBAA0B,EAAE,EAAE;QAChF,MAAM,iBAAiB,GAAG,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAEjE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;QAExC,CAAC,gBAAgB,IAAI,mBAAmB,EAAE,CAAC;QAC3C,wBAAwB,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,mBAAmB,GACvB,OAAO,CAAC,MAAM,GAAG,CAAC,mBAAmB,IAAI,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzG,MAAM,aAAa,GACjB,cAAc,KAAK,SAAS;QAC5B,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC;QAC3B,CAAC,mBAAmB,IAAI,kBAAkB,KAAK,MAAM,IAAI,gBAAgB,CAAC,CAAC;IAC7E,MAAM,wBAAwB,GAC5B,QAAQ,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,cAAc,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAAC;IAEzG;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9F,MAAM,WAAW,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,GAAG,oBAAoB,CAAC;QACnF,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B;QAC9D,aAAa;KACd,CAAC,CAAC;IAEH,eAAe,CACb,SAAS,oBAAoB;;QAC3B,iBAAiB,CAAC,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,0CAAE,UAAU,mCAAI,CAAC,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,sBAAsB,CAAC,CACrE,CAAC;IAEF;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC7G,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9E,SAAS,CACP,SAAS,0BAA0B;QACjC,sBAAsB,CAAC,2BAA2B,aAA3B,2BAA2B,cAA3B,2BAA2B,GAAI,CAAC,CAAC,CAAC;QACzD,0BAA0B,CAAC,2BAA2B,IAAI,2BAA2B,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5G,CAAC,EACD,CAAC,2BAA2B,CAAC,CAC9B,CAAC;IAEF;;;;OAIG;IACH,IAAI,YAAY,GAAG,YAAY,CAAC;IAEhC,IAAI,mBAAmB,IAAI,kBAAkB,KAAK,QAAQ,EAAE;QAC1D,IAAI,gBAAgB,EAAE;YACpB,YAAY,IAAI,sBAAsB,CAAC;SACxC;aAAM;YACL,YAAY,IAAI,8BAA8B,CAAC;SAChD;KACF;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,eAAe,CACb,SAAS,wBAAwB;QAC/B,MAAM,eAAe,GAAG,EAAE,CAAC,CAAC,0DAA0D;QACtF,MAAM,oBAAoB,GAAG,GAAG,CAAC,CAAC,0DAA0D;QAC5F,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,uBAAuB,GAAG,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAEhE,qBAAqB,CACnB,WAAW;YACT,cAAc;YACd,eAAe;YACf,eAAe;YACf,gBAAgB;YAChB,oBAAoB;YACpB,uBAAuB,CAC1B,CAAC;QAEF,kBAAkB,CAAC,WAAW,GAAG,cAAc,GAAG,eAAe,GAAG,eAAe,GAAG,oBAAoB,CAAC,CAAC;IAC9G,CAAC,EACD;QACE,cAAc;QACd,UAAU;QACV,gBAAgB;QAChB,WAAW;QACX,WAAW;QACX,cAAc;QACd,eAAe;QACf,UAAU;KACX,CACF,CAAC;IAEF;;;;;OAKG;IACH,mBAAmB,CACjB,UAAU,EACV,SAAS,sBAAsB;QAC7B,OAAO;YACL,0BAA0B,EAAE;gBAC1B,QAAQ,IAAI,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;YACD,SAAS,EAAE;gBACT,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACzB,CAAC;YACD,eAAe,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC9C,eAAe,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,cAAc,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;SAC9D,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,CAAC,MAAM,CAAC,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IACjC,KAAK,kCACA,KAAK,KACR,cAAc;YACd,WAAW;YACX,OAAO,EACP,gBAAgB,EAAE,YAAY,CAAC,SAAS,EACxC,wBAAwB,EAAE,YAAY,CAAC,iBAAiB,EACxD,WAAW;YACX,eAAe;YACf,UAAU;YACV,SAAS;YACT,YAAY;YACZ,mBAAmB;YACnB,YAAY;YACZ,YAAY;YACZ,oBAAoB;YACpB,wBAAwB;YACxB,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,iCAAiC;YACjC,sBAAsB;YACtB,gBAAgB;YAChB,oBAAoB;YACpB,uBAAuB;YACvB,aAAa;YACb,mBAAmB,EACnB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,IAAI,CAAC,oBAAoB,EACvF,QAAQ,EACR,gBAAgB,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAC3C,0BAA0B;YAC1B,gBAAgB;YAChB,WAAW;YACX,aAAa;YACb,WAAW;YACX,cAAc;YACd,gBAAgB;YAChB,WAAW;YACX,cAAc;YACd,eAAe;YACf,eAAe;YACf,cAAc;YACd,cAAc;YACd,oBAAoB;YACpB,mBAAmB;YACnB,YAAY;YACZ,sBAAsB;YACtB,yBAAyB;YACzB,iCAAiC;YACjC,UAAU;YACV,mBAAmB;YACnB,mBAAmB;YACnB,kBAAkB;YAClB,kBAAkB;YAClB,kBAAkB;YAClB,qBAAqB;YACrB,sBAAsB;YACtB,8BAA8B;YAC9B,cAAc;YACd,gBAAgB;YAChB,mBAAmB;YACnB,cAAc;YACd,cAAc;YACd,SAAS,EACT,SAAS,EAAE,WAAW,EACtB,UAAU;YACV,SAAS;QAGX,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;gBACL,kBAAkB,EAAE,YAAY;gBAChC,eAAe,EAAE,CAAC;gBAClB,sBAAsB;aACvB;YAED,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,6BAA6B,IACjE,QAAQ,CACsB,CACP,CACO,CACtC,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, {\n createContext,\n useCallback,\n useEffect,\n useLayoutEffect,\n useImperativeHandle,\n useRef,\n useState,\n useContext,\n} from 'react';\nimport { applyDefaults } from '../defaults';\nimport { AppLayoutContext } from '../../internal/context/app-layout-context';\nimport { DynamicOverlapContext } from '../../internal/context/dynamic-overlap-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { FocusControlRefs, useFocusControl } from '../utils/use-focus-control';\nimport { DrawerFocusControlRefs, useDrawerFocusControl } from '../utils/use-drawer-focus-control';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { isDevelopment } from '../../internal/is-development';\nimport { getSplitPanelPosition } from './split-panel';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { SplitPanelFocusControlRefs, useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { DrawerItem, InternalDrawerProps } from '../drawer/interfaces';\nimport { useStableCallback, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport useResize from '../utils/use-resize';\nimport styles from './styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport useBackgroundOverlap from './use-background-overlap';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\ninterface AppLayoutInternals extends AppLayoutProps {\n activeDrawerId: string | undefined;\n drawers: Array<DrawerItem>;\n drawersAriaLabel: string | undefined;\n drawersOverflowAriaLabel: string | undefined;\n drawersRefs: DrawerFocusControlRefs;\n drawerSize: number;\n drawersMaxWidth: number;\n drawerRef: React.Ref<HTMLElement>;\n resizeHandle: React.ReactElement;\n drawersTriggerCount: number;\n handleDrawersClick: (activeDrawerId: string | undefined, skipFocusControl?: boolean) => void;\n handleSplitPanelClick: () => void;\n handleNavigationClick: (isOpen: boolean) => void;\n handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n handleSplitPanelResize: (detail: { size: number }) => void;\n handleToolsClick: (value: boolean, skipFocusControl?: boolean) => void;\n hasBackgroundOverlap: boolean;\n hasDefaultToolsWidth: boolean;\n hasDrawerViewportOverlay: boolean;\n hasNotificationsContent: boolean;\n hasOpenDrawer?: boolean;\n hasStickyBackground: boolean;\n isBackgroundOverlapDisabled: boolean;\n isMobile: boolean;\n isNavigationOpen: boolean;\n isSplitPanelForcedPosition: boolean;\n isSplitPanelOpen?: boolean;\n isToolsOpen: boolean;\n layoutElement: React.Ref<HTMLElement>;\n layoutWidth: number;\n loseToolsFocus: () => void;\n loseDrawersFocus: () => void;\n mainElement: React.Ref<HTMLDivElement>;\n mainOffsetLeft: number;\n navigationRefs: FocusControlRefs;\n notificationsElement: React.Ref<HTMLDivElement>;\n notificationsHeight: number;\n offsetBottom: number;\n setHasStickyBackground: (value: boolean) => void;\n setSplitPanelReportedSize: (value: number) => void;\n setSplitPanelReportedHeaderHeight: (value: number) => void;\n headerHeight: number;\n footerHeight: number;\n splitPanelControlId: string;\n splitPanelMaxWidth: number;\n splitPanelMinWidth: number;\n splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n splitPanelReportedSize: number;\n splitPanelReportedHeaderHeight: number;\n splitPanelToggle: SplitPanelSideToggleProps;\n setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;\n splitPanelDisplayed: boolean;\n splitPanelRefs: SplitPanelFocusControlRefs;\n toolsControlId: string;\n toolsRefs: FocusControlRefs;\n}\n\n/**\n * The default values are destructured in the context instantiation to\n * prevent downstream Typescript errors. This could likely be replaced\n * by a context interface definition that extends the AppLayout interface.\n */\nconst AppLayoutInternalsContext = createContext<AppLayoutInternals | null>(null);\n\ninterface AppLayoutProviderInternalsProps extends AppLayoutProps {\n children: React.ReactNode;\n}\n\nexport function useAppLayoutInternals() {\n const ctx = useContext(AppLayoutInternalsContext);\n if (!ctx) {\n throw new Error('Invariant violation: this context is only available inside app layout');\n }\n return ctx;\n}\n\nexport const AppLayoutInternalsProvider = React.forwardRef(\n (\n {\n toolsHide,\n toolsOpen: controlledToolsOpen,\n navigationHide,\n navigationOpen: controlledNavigationOpen,\n contentType = 'default',\n headerSelector = '#b #h',\n footerSelector = '#b #h',\n children,\n splitPanel,\n ...props\n }: AppLayoutProviderInternalsProps,\n forwardRef: React.Ref<AppLayoutProps.Ref>\n ) => {\n const isMobile = useMobile();\n\n if (isDevelopment) {\n if (controlledToolsOpen && toolsHide) {\n warnOnce(\n 'AppLayout',\n `You have enabled both the \\`toolsOpen\\` prop and the \\`toolsHide\\` prop. This is not supported. Set \\`toolsOpen\\` to \\`false\\` when you set \\`toolsHide\\` to \\`true\\`.`\n );\n }\n }\n\n const [hasStickyBackground, setHasStickyBackground] = useState(false);\n\n /**\n * Set the default values for minimum and maximum content width.\n */\n const geckoMaxCssLength = ((1 << 30) - 1) / 60;\n const halfGeckoMaxCssLength = geckoMaxCssLength / 2;\n // CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n // Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n const maxContentWidth =\n props.maxContentWidth && props.maxContentWidth > halfGeckoMaxCssLength\n ? halfGeckoMaxCssLength\n : props.maxContentWidth ?? 0;\n const minContentWidth = props.minContentWidth ?? 280;\n\n /**\n * Determine the default state of the Navigation and Tools drawers.\n * Mobile viewports should be closed by default under all circumstances.\n * If the navigationOpen prop has been set then that should take precedence\n * over the contentType prop. Desktop viewports that do not have the\n * navigationOpen or contentType props set will use the default contentType.\n */\n const contentTypeDefaults = applyDefaults(contentType, { maxContentWidth, minContentWidth }, true);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Navigation drawer. The logic\n * for determining the default state is colocated with the Navigation component.\n *\n * The callback that will be passed to the Navigation and MobileToolbar\n * components to handle the click events that will change the state\n * of the Navigation drawer. It will set the Navigation state with the\n * useControllable hook and also fire the onNavigationChange function to\n * emit the state change.\n */\n const [isNavigationOpen = false, setIsNavigationOpen] = useControllable(\n controlledNavigationOpen,\n props.onNavigationChange,\n isMobile ? false : contentTypeDefaults.navigationOpen,\n { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }\n );\n\n const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(isNavigationOpen);\n\n const handleNavigationClick = useStableCallback(function handleNavigationChange(isOpen: boolean) {\n setIsNavigationOpen(isOpen);\n focusNavButtons();\n fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n });\n\n useEffect(() => {\n // Close navigation drawer on mobile so that the main content is visible\n if (isMobile) {\n handleNavigationClick(false);\n }\n }, [isMobile, handleNavigationClick]);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Tools drawer. The logic\n * for determining the default state is colocated with the Tools component.\n *\n * The callback that will be passed to the Navigation and MobileToolbar\n * components to handle the click events that will change the state\n * of the Tools drawer. It will set the Tools state with the\n * useControllable hook and also fire the onToolsChange function to\n * emit the state change.\n */\n const toolsWidth = props.toolsWidth ?? 290;\n const hasDefaultToolsWidth = props.toolsWidth === undefined;\n\n const [isToolsOpen = false, setIsToolsOpen] = useControllable(\n controlledToolsOpen,\n props.onToolsChange,\n isMobile ? false : contentTypeDefaults.toolsOpen,\n { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }\n );\n\n const {\n refs: toolsRefs,\n setFocus: focusToolsButtons,\n loseFocus: loseToolsFocus,\n } = useFocusControl(isToolsOpen, true);\n\n const handleToolsClick = useCallback(\n function handleToolsChange(isOpen: boolean, skipFocusControl?: boolean) {\n setIsToolsOpen(isOpen);\n !skipFocusControl && focusToolsButtons();\n fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n },\n [props.onToolsChange, setIsToolsOpen, focusToolsButtons]\n );\n\n /**\n * On mobile viewports the navigation and tools drawers are adjusted to a fixed position\n * that consumes 100% of the viewport height and width. The body content could potentially\n * be scrollable underneath the drawer. In order to prevent this a CSS class needs to be\n * added to the document body that sets overflow to hidden.\n */\n useEffect(\n function handleBodyScroll() {\n if (isMobile && (isNavigationOpen || isToolsOpen)) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n\n // Ensure the CSS class is removed from the body on side effect cleanup\n return function cleanup() {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n },\n [isMobile, isNavigationOpen, isToolsOpen]\n );\n\n /**\n * Query the DOM for the header and footer elements based on the selectors provided\n * by the properties and pass the heights to the custom property definitions.\n */\n const headerHeight = useObservedElement(headerSelector);\n const footerHeight = useObservedElement(footerSelector);\n\n /**\n * Set the default values for the minimum and maximum Split Panel width when it is\n * in the side position. The useLayoutEffect will compute the available space in the\n * DOM for the Split Panel given the current state. The minimum and maximum\n * widths will potentially trigger a side effect that will put the Split Panel into\n * a forced position on the bottom.\n */\n const splitPanelMinWidth = 280;\n const [splitPanelMaxWidth, setSplitPanelMaxWidth] = useState(splitPanelMinWidth);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Split Panel. By default\n * the Split Panel should always be closed on page load.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the click events that will change the state of the SplitPanel\n * to open or closed given the current state. It will set the isSplitPanelOpen\n * controlled state and fire the onSplitPanelToggle event.\n */\n const [isSplitPanelOpen, setIsSplitPanelOpen] = useControllable(\n props.splitPanelOpen,\n props.onSplitPanelToggle,\n false,\n { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }\n );\n\n /**\n * The useControllable hook will manage the controlled or uncontrolled\n * state of the splitPanelPreferences. By default the splitPanelPreferences\n * is undefined. When set the object shape should have a single key to indicate\n * either bottom or side position.\n *\n * The callback that will handle changes to the splitPanelPreferences\n * object that will determine if the SplitPanel is rendered either on the\n * bottom of the viewport or within the Tools container.\n */\n const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n props.splitPanelPreferences,\n props.onSplitPanelPreferencesChange,\n undefined,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelPreferences',\n changeHandler: 'onSplitPanelPreferencesChange',\n }\n );\n\n const { refs: splitPanelRefs, setLastInteraction: setSplitPanelLastInteraction } = useSplitPanelFocusControl([\n splitPanelPreferences,\n isSplitPanelOpen,\n ]);\n\n const handleSplitPanelClick = useCallback(\n function handleSplitPanelChange() {\n setIsSplitPanelOpen(!isSplitPanelOpen);\n setSplitPanelLastInteraction({ type: isSplitPanelOpen ? 'close' : 'open' });\n fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n },\n [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen, setSplitPanelLastInteraction]\n );\n\n /**\n * The Split Panel will be in forced (bottom) position if the defined minimum width is\n * greater than the maximum width. In other words, the maximum width is the currently\n * available horizontal space based on all other components that are rendered. If the\n * minimum width exceeds this value then there is not enough horizontal space and we must\n * force it to the bottom position.\n */\n const [isSplitPanelForcedPosition, setSplitPanelForcedPosition] = useState(false);\n const splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);\n\n useLayoutEffect(\n function handleSplitPanelForcePosition() {\n setSplitPanelForcedPosition(splitPanelMinWidth > splitPanelMaxWidth);\n },\n [splitPanelMaxWidth, splitPanelMinWidth]\n );\n\n /**\n * The useControllable hook will set the default size of the SplitPanel based\n * on the default position set in the splitPanelPreferences. The logic for the\n * default size is contained in the SplitPanel component. The splitPanelControlledSize\n * will be bound to the size property in the SplitPanel context for rendering.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the resize events that will change the size of the SplitPanel.\n * It will set the splitPanelControlledSize controlled state and fire the\n * onSplitPanelResize event.\n */\n const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);\n const [splitPanelToggle, setSplitPanelToggle] = useState<SplitPanelSideToggleProps>({\n displayed: false,\n ariaLabel: undefined,\n });\n const splitPanelDisplayed = !!(splitPanelToggle.displayed || isSplitPanelOpen);\n const splitPanelControlId = useUniqueId('split-panel-');\n const toolsControlId = useUniqueId('tools-');\n\n const [splitPanelSize, setSplitPanelSize] = useControllable(\n props.splitPanelSize,\n props.onSplitPanelResize,\n getSplitPanelDefaultSize(splitPanelPosition),\n { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n );\n\n const handleSplitPanelResize = useCallback(\n function handleSplitPanelChange(detail: { size: number }) {\n setSplitPanelSize(detail.size);\n fireNonCancelableEvent(props.onSplitPanelResize, detail);\n },\n [props.onSplitPanelResize, setSplitPanelSize]\n );\n\n const handleSplitPanelPreferencesChange = useCallback(\n function handleSplitPanelChange(detail: AppLayoutProps.SplitPanelPreferences) {\n setSplitPanelPreferences(detail);\n setSplitPanelLastInteraction({ type: 'position' });\n fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n },\n [props.onSplitPanelPreferencesChange, setSplitPanelPreferences, setSplitPanelLastInteraction]\n );\n\n const {\n drawers,\n activeDrawer,\n activeDrawerId,\n onActiveDrawerChange,\n onActiveDrawerResize,\n activeDrawerSize,\n ...drawersProps\n } = useDrawers(props as InternalDrawerProps, {\n ariaLabels: props.ariaLabels,\n toolsHide,\n toolsOpen: isToolsOpen,\n tools: props.tools,\n toolsWidth,\n });\n\n const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);\n\n const {\n refs: drawersRefs,\n setFocus: focusDrawersButtons,\n loseFocus: loseDrawersFocus,\n setLastInteraction: setDrawerLastInteraction,\n } = useDrawerFocusControl([activeDrawerId, activeDrawer?.resizable], true, true);\n\n const drawerRef = useRef<HTMLDivElement>(null);\n const { resizeHandle, drawerSize } = useResize(drawerRef, {\n onActiveDrawerResize,\n activeDrawerSize,\n activeDrawer,\n drawersRefs,\n isToolsOpen,\n drawersMaxWidth,\n });\n\n const handleDrawersClick = (id: string | undefined, skipFocusControl?: boolean) => {\n const newActiveDrawerId = id !== activeDrawerId ? id : undefined;\n\n onActiveDrawerChange(newActiveDrawerId);\n\n !skipFocusControl && focusDrawersButtons();\n setDrawerLastInteraction({ type: activeDrawerId ? 'close' : 'open' });\n };\n\n const drawersTriggerCount =\n drawers.length + (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) + (!toolsHide ? 1 : 0);\n const hasOpenDrawer =\n activeDrawerId !== undefined ||\n (!toolsHide && isToolsOpen) ||\n (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);\n const hasDrawerViewportOverlay =\n isMobile && (!!activeDrawerId || (!navigationHide && isNavigationOpen) || (!toolsHide && isToolsOpen));\n\n /**\n * The Layout element is not necessarily synonymous with the client\n * viewport width. There can be content in the horizontal viewport\n * that exists on either side of the AppLayout. This resize observer\n * will set the custom property of the Layout element width that\n * is used for various horizontal constraints such as the maximum\n * allowed width of the Tools container.\n *\n * The offsetLeft of the Main will return the distance that the\n * Main element has from the left edge of the Layout component.\n * The offsetLeft value can vary based on the presence and state\n * of the Navigation as well as content gaps in the grid definition.\n * This value is used to determine the max width constraint calculation\n * for the Tools container.\n */\n const [layoutContainerQuery, layoutElement] = useContainerQuery(rect => rect.contentBoxWidth);\n const layoutWidth = layoutContainerQuery ?? 0;\n\n const mainElement = useRef<HTMLDivElement>(null);\n const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n const { hasBackgroundOverlap, updateBackgroundOverlapHeight } = useBackgroundOverlap({\n contentHeader: props.contentHeader,\n disableContentHeaderOverlap: props.disableContentHeaderOverlap,\n layoutElement,\n });\n\n useLayoutEffect(\n function handleMainOffsetLeft() {\n setMainOffsetLeft(mainElement?.current?.offsetLeft ?? 0);\n },\n [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]\n );\n\n /**\n * Because the notifications slot does not give us any direction insight into\n * what the state of the child content is we need to have a mechanism for\n * tracking the height of the notifications and whether or not it has content.\n * The height of the notifications is an integer that will be used as a custom\n * property on the Layout component to determine what the sticky offset should\n * be if there are sticky notifications. This could be any number including\n * zero based on how the child content renders. The hasNotificationsContent boolean\n * is simply centralizing the logic of the notifications height being > 0 such\n * that it is not repeated in various components (such as MobileToolbar) that need to\n * know if the notifications slot is empty.\n */\n const [notificationsContainerQuery, notificationsElement] = useContainerQuery(rect => rect.contentBoxHeight);\n const [notificationsHeight, setNotificationsHeight] = useState(0);\n const [hasNotificationsContent, setHasNotificationsContent] = useState(false);\n\n useEffect(\n function handleNotificationsContent() {\n setNotificationsHeight(notificationsContainerQuery ?? 0);\n setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);\n },\n [notificationsContainerQuery]\n );\n\n /**\n * Determine the offsetBottom value based on the presence of a footer element and\n * the SplitPanel component. Ignore the SplitPanel if it is not in the bottom\n * position. Use the size property if it is open and the header height if it is closed.\n */\n let offsetBottom = footerHeight;\n\n if (splitPanelDisplayed && splitPanelPosition === 'bottom') {\n if (isSplitPanelOpen) {\n offsetBottom += splitPanelReportedSize;\n } else {\n offsetBottom += splitPanelReportedHeaderHeight;\n }\n }\n\n /**\n * Warning! This is a hack! In order to accurately calculate if there is adequate\n * horizontal space for the Split Panel to be in the side position we need two values\n * that are not available in JavaScript.\n *\n * The first is the the content gap on the right which is stored in a design token\n * and applied in the Layout CSS:\n *\n * $contentGapRight: #{awsui.$space-scaled-2x-xxxl};\n *\n * The second is the width of the element that has the circular buttons for the\n * Tools and Split Panel. This could be suppressed given the state of the Tools\n * drawer returning a zero value. It would, however, be rendered if the Split Panel\n * were to move into the side position. This is calculated in the Tools CSS and\n * the Trigger button CSS with design tokens:\n *\n * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;\n * width: awsui.$space-layout-toggle-diameter;\n *\n * These values will be defined below as static integers that are rough approximations\n * of their computed width when rendered in the DOM, but doubled to ensure adequate\n * spacing for the Split Panel to be in side position.\n */\n useLayoutEffect(\n function handleSplitPanelMaxWidth() {\n const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety\n const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety\n const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;\n const activeDrawerOffsetWidth = activeDrawerId ? drawerSize : 0;\n\n setSplitPanelMaxWidth(\n layoutWidth -\n mainOffsetLeft -\n minContentWidth -\n contentGapRight -\n toolsOffsetWidth -\n toolsFormOffsetWidth -\n activeDrawerOffsetWidth\n );\n\n setDrawersMaxWidth(layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsFormOffsetWidth);\n },\n [\n activeDrawerId,\n drawerSize,\n isNavigationOpen,\n isToolsOpen,\n layoutWidth,\n mainOffsetLeft,\n minContentWidth,\n toolsWidth,\n ]\n );\n\n /**\n * The useImperativeHandle hook in conjunction with the forwardRef function\n * in the AppLayout component definition expose the following callable\n * functions to component consumers when they put a ref as a property on\n * their component implementation.\n */\n useImperativeHandle(\n forwardRef,\n function createImperativeHandle() {\n return {\n closeNavigationIfNecessary: function () {\n isMobile && handleNavigationClick(false);\n },\n openTools: function () {\n handleToolsClick(true);\n },\n focusToolsClose: () => focusToolsButtons(true),\n focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),\n };\n },\n [isMobile, handleNavigationClick, handleToolsClick, focusToolsButtons, splitPanelRefs.slider]\n );\n\n return (\n <AppLayoutInternalsContext.Provider\n value={{\n ...props,\n activeDrawerId,\n contentType,\n drawers,\n drawersAriaLabel: drawersProps.ariaLabel,\n drawersOverflowAriaLabel: drawersProps.overflowAriaLabel,\n drawersRefs,\n drawersMaxWidth,\n drawerSize,\n drawerRef,\n resizeHandle,\n drawersTriggerCount,\n headerHeight,\n footerHeight,\n hasDefaultToolsWidth,\n hasDrawerViewportOverlay,\n handleDrawersClick,\n handleNavigationClick,\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n handleToolsClick,\n hasBackgroundOverlap,\n hasNotificationsContent,\n hasOpenDrawer,\n hasStickyBackground,\n isBackgroundOverlapDisabled: props.disableContentHeaderOverlap || !hasBackgroundOverlap,\n isMobile,\n isNavigationOpen: isNavigationOpen ?? false,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n isToolsOpen,\n layoutElement,\n layoutWidth,\n loseToolsFocus,\n loseDrawersFocus,\n mainElement,\n mainOffsetLeft,\n maxContentWidth,\n minContentWidth,\n navigationHide,\n navigationRefs,\n notificationsElement,\n notificationsHeight,\n offsetBottom,\n setHasStickyBackground,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelMaxWidth,\n splitPanelMinWidth,\n splitPanelPosition,\n splitPanelPreferences,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n splitPanelSize,\n splitPanelToggle,\n setSplitPanelToggle,\n splitPanelRefs,\n toolsControlId,\n toolsHide,\n toolsOpen: isToolsOpen,\n toolsWidth,\n toolsRefs,\n }}\n >\n <AppLayoutContext.Provider\n value={{\n stickyOffsetBottom: offsetBottom,\n stickyOffsetTop: 0, // not used in this design. Sticky headers read a CSS-var instead\n setHasStickyBackground,\n }}\n >\n <DynamicOverlapContext.Provider value={updateBackgroundOverlapHeight}>\n {children}\n </DynamicOverlapContext.Provider>\n </AppLayoutContext.Provider>\n </AppLayoutInternalsContext.Provider>\n );\n }\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAkBA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA8B9B;AA+ND;;;;;GAKG;AACH,wBAAgB,cAAc,uBAkE7B"}
|
|
@@ -14,6 +14,7 @@ import testutilStyles from '../test-classes/styles.css.js';
|
|
|
14
14
|
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
15
15
|
import OverflowMenu from '../drawer/overflow-menu';
|
|
16
16
|
import { splitItems } from '../drawer/drawers-helpers';
|
|
17
|
+
import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
|
|
17
18
|
/**
|
|
18
19
|
* The Drawers root component is mounted in the AppLayout index file. It will only
|
|
19
20
|
* render if the drawers are defined, and it will take over the mounting of and
|
|
@@ -35,28 +36,23 @@ export default function Drawers() {
|
|
|
35
36
|
React.createElement(ActiveDrawer, null),
|
|
36
37
|
!isMobile && React.createElement(DesktopTriggers, null)));
|
|
37
38
|
}
|
|
38
|
-
/**
|
|
39
|
-
* The ActiveDrawer component will render either the drawer content that corresponds
|
|
40
|
-
* to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.
|
|
41
|
-
* The aria labels, click handling, and focus handling will be updated dynamically
|
|
42
|
-
* based on the active drawer or tools content.
|
|
43
|
-
*/
|
|
44
39
|
function ActiveDrawer() {
|
|
45
40
|
var _a, _b, _c;
|
|
46
|
-
const { activeDrawerId, ariaLabels, drawers, drawersRefs, handleDrawersClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen,
|
|
41
|
+
const { activeDrawerId, ariaLabels, drawers, drawersRefs, handleDrawersClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, navigationHide, toolsRefs, loseDrawersFocus, resizeHandle, drawerSize, drawersMaxWidth, drawerRef, } = useAppLayoutInternals();
|
|
47
42
|
const activeDrawer = (_a = drawers.find(item => item.id === activeDrawerId)) !== null && _a !== void 0 ? _a : null;
|
|
48
43
|
const computedAriaLabels = {
|
|
49
44
|
closeButton: activeDrawerId ? (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
|
|
50
45
|
content: activeDrawerId ? (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.content : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
|
|
51
46
|
};
|
|
52
|
-
const isHidden = !activeDrawerId
|
|
47
|
+
const isHidden = !activeDrawerId;
|
|
53
48
|
const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);
|
|
49
|
+
const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;
|
|
54
50
|
const size = Math.min(drawersMaxWidth, drawerSize);
|
|
55
51
|
return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": isHidden, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, sharedStyles['with-motion'], {
|
|
56
|
-
[styles['is-drawer-open']]: activeDrawerId
|
|
52
|
+
[styles['is-drawer-open']]: activeDrawerId,
|
|
57
53
|
[styles.unfocusable]: isUnfocusable,
|
|
58
54
|
[testutilStyles['active-drawer']]: activeDrawerId,
|
|
59
|
-
[testutilStyles.tools]:
|
|
55
|
+
[testutilStyles.tools]: isToolsDrawer,
|
|
60
56
|
}), style: Object.assign({}, (!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` })), ref: drawerRef, onBlur: e => {
|
|
61
57
|
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
|
|
62
58
|
loseDrawersFocus();
|
|
@@ -66,11 +62,9 @@ function ActiveDrawer() {
|
|
|
66
62
|
React.createElement("div", { className: clsx(styles['drawer-close-button']) },
|
|
67
63
|
React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
|
|
68
64
|
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
|
|
69
|
-
[testutilStyles['tools-close']]:
|
|
70
|
-
}), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => (activeDrawerId ? handleDrawersClick(activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null) : handleToolsClick(false)), ref:
|
|
71
|
-
React.createElement("div", { className: styles['drawer-content'] },
|
|
72
|
-
activeDrawerId && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content),
|
|
73
|
-
isToolsOpen && tools)));
|
|
65
|
+
[testutilStyles['tools-close']]: isToolsDrawer,
|
|
66
|
+
}), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => (activeDrawerId ? handleDrawersClick(activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null) : handleToolsClick(false)), ref: isToolsDrawer ? toolsRefs.close : drawersRefs.close, variant: "icon" })),
|
|
67
|
+
React.createElement("div", { className: styles['drawer-content'] }, activeDrawerId && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content))));
|
|
74
68
|
}
|
|
75
69
|
/**
|
|
76
70
|
* The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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 } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n isNavigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (drawers.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\n/**\n * The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n */\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n isToolsOpen,\n navigationHide,\n tools,\n toolsRefs,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId && !isToolsOpen;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n const size = Math.min(drawersMaxWidth, drawerSize);\n\n return (\n <aside\n id={activeDrawerId}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, sharedStyles['with-motion'], {\n [styles['is-drawer-open']]: activeDrawerId || isToolsOpen,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsOpen,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && resizeHandle}\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsOpen,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n {isToolsOpen && tools}\n </div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n isMobile,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!isMobile || drawers.length === 0) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitIndex = 2;\n\n const { visibleItems, overflowItems } = splitItems(drawers, splitIndex, activeDrawerId, true);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n aria-label={drawersAriaLabel}\n >\n {visibleItems.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n disabled={hasDrawerViewportOverlay}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n />\n ))}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={drawersOverflowAriaLabel}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n </aside>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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 } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n isNavigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (drawers.length === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n navigationHide,\n toolsRefs,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n\n const size = Math.min(drawersMaxWidth, drawerSize);\n\n return (\n <aside\n id={activeDrawerId}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, sharedStyles['with-motion'], {\n [styles['is-drawer-open']]: activeDrawerId,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && resizeHandle}\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsDrawer ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n isMobile,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!isMobile || drawers.length === 0) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitIndex = 2;\n\n const { visibleItems, overflowItems } = splitItems(drawers, splitIndex, activeDrawerId, true);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n aria-label={drawersAriaLabel}\n >\n {visibleItems.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n disabled={hasDrawerViewportOverlay}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n />\n ))}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={drawersOverflowAriaLabel}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n </aside>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QAC3C;;WAEG;QACH,cAAc,IAAI,IAAI,CAAC;KACxB;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QAC3C;;WAEG;QACH,cAAc,IAAI,IAAI,CAAC;KACxB;IAGD,UAAiB,WAAW,CAAC,CAAC,GAAG,GAAG;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAE7B;;WAEG;QACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;KAC7C;CACF;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;OAUG;IACH,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE;;OAEG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAE7C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAE9F;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;CACnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["attribute-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n export interface IsItemRemovableFunction<T> {\n (item: T): boolean;\n }\n\n export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n export interface FieldDefinition<T> {\n label?: React.ReactNode;\n info?: React.ReactNode;\n control?: FieldRenderable<T> | React.ReactNode;\n errorText?: FieldRenderable<T> | React.ReactNode;\n constraintText?: FieldRenderable<T> | React.ReactNode;\n }\n\n export interface RemoveButtonClickDetail {\n itemIndex: number;\n }\n\n export interface Ref {\n /**\n * Focuses the 'remove' button for the given row index.\n */\n focusRemoveButton(itemIndex: number): void;\n /**\n * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n */\n focusAddButton(): void;\n }\n\n export interface I18nStrings<T = any> {\n errorIconAriaLabel?: string;\n itemRemovedAriaLive?: string;\n\n /**\n * @deprecated Use `removeButtonAriaLabel` on the component instead.\n */\n removeButtonAriaLabel?: (item: T) => string;\n }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n /**\n * Displayed when there are no items to display.\n */\n empty?: React.ReactNode;\n\n /**\n * Displayed below the add button. Use it for additional information related to the attribute editor.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Specifies the text that's displayed in the add button.\n */\n addButtonText: string;\n\n /**\n * Specifies the text that's displayed in the remove button.\n * @i18n\n */\n removeButtonText?: string;\n\n /**\n * Adds an `aria-label` to the remove button.\n */\n removeButtonAriaLabel?: (item: T) => string;\n\n /**\n * Specifies the items that serve as the data source for all rows.\n * The display of a row is handled by the `definition` property.\n */\n items?: ReadonlyArray<T>;\n\n /**\n * Function that determines whether an item is removable. When this function returns `false`, the remove\n * button is not rendered and the user can't remove the item.\n * By default, all items are removable.\n */\n isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n /**\n * Determines whether the add button is disabled.\n */\n disableAddButton?: boolean;\n\n /**\n * Defines the editor configuration. Each object in the array represents one form field in the row.\n * * `label` (ReactNode) - Text label for the form field.\n * * `info` (ReactNode) - Info link for the form field.\n * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n * It renders the form field as invalid if the returned value is not `null` or `undefined`.\n * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n *\n * A maximum of four fields are supported.\n */\n definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n /**\n * Called when add button is clicked.\n */\n onAddButtonClick?: NonCancelableEventHandler;\n\n /**\n * Called when remove button is clicked.\n * The event `detail` contains the index of the corresponding item.\n */\n onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["attribute-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n export interface IsItemRemovableFunction<T> {\n (item: T): boolean;\n }\n\n export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n export interface FieldDefinition<T> {\n label?: React.ReactNode;\n info?: React.ReactNode;\n control?: FieldRenderable<T> | React.ReactNode;\n errorText?: FieldRenderable<T> | React.ReactNode;\n constraintText?: FieldRenderable<T> | React.ReactNode;\n }\n\n export interface RemoveButtonClickDetail {\n itemIndex: number;\n }\n\n export interface Ref {\n /**\n * Focuses the 'remove' button for the given row index.\n */\n focusRemoveButton(itemIndex: number): void;\n /**\n * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n */\n focusAddButton(): void;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n export interface I18nStrings<T = any> {\n errorIconAriaLabel?: string;\n itemRemovedAriaLive?: string;\n\n /**\n * @deprecated Use `removeButtonAriaLabel` on the component instead.\n */\n removeButtonAriaLabel?: (item: T) => string;\n }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n /**\n * Displayed when there are no items to display.\n */\n empty?: React.ReactNode;\n\n /**\n * Displayed below the add button. Use it for additional information related to the attribute editor.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Specifies the text that's displayed in the add button.\n */\n addButtonText: string;\n\n /**\n * Specifies the text that's displayed in the remove button.\n * @i18n\n */\n removeButtonText?: string;\n\n /**\n * Adds an `aria-label` to the remove button.\n */\n removeButtonAriaLabel?: (item: T) => string;\n\n /**\n * Specifies the items that serve as the data source for all rows.\n * The display of a row is handled by the `definition` property.\n */\n items?: ReadonlyArray<T>;\n\n /**\n * Function that determines whether an item is removable. When this function returns `false`, the remove\n * button is not rendered and the user can't remove the item.\n * By default, all items are removable.\n */\n isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n /**\n * Determines whether the add button is disabled.\n */\n disableAddButton?: boolean;\n\n /**\n * Defines the editor configuration. Each object in the array represents one form field in the row.\n * * `label` (ReactNode) - Text label for the form field.\n * * `info` (ReactNode) - Info link for the form field.\n * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n * It renders the form field as invalid if the returned value is not `null` or `undefined`.\n * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n *\n * A maximum of four fields are supported.\n */\n definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n /**\n * Called when add button is clicked.\n */\n onAddButtonClick?: NonCancelableEventHandler;\n\n /**\n * Called when remove button is clicked.\n * The event `detail` contains the index of the corresponding item.\n */\n onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":";AAMA,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;
|
|
1
|
+
{"version":3,"file":"row.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":";AAMA,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;AAmBD,eAAO,MAAM,GAAG,6BA6EgB,WAAW,CAAC"}
|
package/attribute-editor/row.js
CHANGED
|
@@ -13,7 +13,13 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
|
13
13
|
import { useInternalI18n } from '../i18n/context';
|
|
14
14
|
const Divider = () => React.createElement(InternalBox, { className: styles.divider, padding: { top: 'l' } });
|
|
15
15
|
function render(item, itemIndex, slot) {
|
|
16
|
-
|
|
16
|
+
if (isSlotFunction(slot)) {
|
|
17
|
+
return slot(item, itemIndex);
|
|
18
|
+
}
|
|
19
|
+
return slot;
|
|
20
|
+
function isSlotFunction(slot) {
|
|
21
|
+
return typeof slot === 'function';
|
|
22
|
+
}
|
|
17
23
|
}
|
|
18
24
|
const GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];
|
|
19
25
|
const REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,oBAAgD,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAI,CAAC;AAexF,SAAS,MAAM,CACb,IAAO,EACP,SAAiB,EACjB,IAA2E;IAE3E,
|
|
1
|
+
{"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../i18n/context';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n breakpoint: ColumnLayoutBreakpoint | null;\n item: T;\n definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n index: number;\n removable: boolean;\n removeButtonText?: string;\n removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n item: T,\n itemIndex: number,\n slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n if (isSlotFunction(slot)) {\n return slot(item, itemIndex);\n }\n return slot;\n\n function isSlotFunction(slot: unknown): slot is AttributeEditorProps.FieldRenderable<T> {\n return typeof slot === 'function';\n }\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n <T,>({\n breakpoint,\n item,\n definition,\n i18nStrings = {},\n index,\n removable,\n removeButtonText,\n removeButtonRefs,\n onRemoveButtonClick,\n removeButtonAriaLabel,\n }: RowProps<T>) => {\n const i18n = useInternalI18n('attribute-editor');\n const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n const isWideViewport = !isNarrowViewport;\n\n const handleRemoveClick = useCallback(() => {\n fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n }, [onRemoveButtonClick, index]);\n\n const firstControlId = useUniqueId('first-control-id-');\n\n return (\n <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n <InternalGrid\n __breakpoint={breakpoint}\n gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n >\n <InternalColumnLayout\n className={styles['row-control']}\n columns={definition.length}\n __breakpoint={breakpoint}\n >\n {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n <InternalFormField\n key={defIndex}\n className={styles.field}\n label={label}\n info={info}\n constraintText={render(item, index, constraintText)}\n errorText={render(item, index, errorText)}\n stretch={true}\n i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n __hideLabel={isWideViewport && index > 0}\n controlId={defIndex === 0 ? firstControlId : undefined}\n >\n {render(item, index, control)}\n </InternalFormField>\n ))}\n </InternalColumnLayout>\n {removable && (\n <ButtonContainer\n index={index}\n isNarrowViewport={isNarrowViewport}\n hasLabel={definition.some(row => row.label)}\n >\n <InternalButton\n className={styles['remove-button']}\n formAction=\"none\"\n ref={ref => {\n removeButtonRefs[index] = ref ?? undefined;\n }}\n ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n onClick={handleRemoveClick}\n >\n {i18n('removeButtonText', removeButtonText)}\n </InternalButton>\n </ButtonContainer>\n )}\n </InternalGrid>\n </div>\n {isNarrowViewport && <Divider />}\n </InternalBox>\n );\n }\n) as <T>(props: RowProps<T>) => JSX.Element;\n\ninterface ButtonContainer {\n index: number;\n children: React.ReactNode;\n isNarrowViewport: boolean;\n hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n <div\n className={clsx({\n [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n [styles['right-align']]: isNarrowViewport,\n })}\n >\n {children}\n </div>\n);\n"]}
|
|
@@ -14,7 +14,7 @@ export interface ContainerProps extends BaseComponentProps {
|
|
|
14
14
|
* Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.
|
|
15
15
|
* You can define different positions and sizes for the media element within the container.
|
|
16
16
|
*
|
|
17
|
-
* * `content` - Use this slot to render your media element. We support `img`, `video` and `
|
|
17
|
+
* * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.
|
|
18
18
|
*
|
|
19
19
|
* * `position` - Defines the media slot's position within the container. Defaults to `top`.
|
|
20
20
|
*
|
|
@@ -61,9 +61,7 @@ export interface ContainerProps extends BaseComponentProps {
|
|
|
61
61
|
export declare namespace ContainerProps {
|
|
62
62
|
interface Media {
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
65
|
-
* Use this slot to render your media element. We support `img`, `video` and `picture` elements.
|
|
66
|
-
*
|
|
64
|
+
* Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.
|
|
67
65
|
*/
|
|
68
66
|
content: React.ReactNode;
|
|
69
67
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,KAAK;QACpB
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,KAAK;QACpB;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface ContainerProps extends BaseComponentProps {\n /**\n * Heading element of the container. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n */\n disableHeaderPaddings?: boolean;\n\n /**\n *\n * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n * You can define different positions and sizes for the media element within the container.\n *\n * * `content` - Use this slot to render your media element. We support `img`, `video` and `
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface ContainerProps extends BaseComponentProps {\n /**\n * Heading element of the container. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n */\n disableHeaderPaddings?: boolean;\n\n /**\n *\n * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n * You can define different positions and sizes for the media element within the container.\n *\n * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n *\n * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n *\n * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n * Note: This value is considered only when `position` is set to `side`.\n * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n *\n * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it. * Note: This value is only considered if `position` is set to `top`.\n * If no height is provided, the media slot will be displayed at its full height.\n *\n */\n media?: ContainerProps.Media;\n\n /**\n * Main content of the container.\n */\n children?: React.ReactNode;\n\n /**\n * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n */\n disableContentPaddings?: boolean;\n\n /**\n * Enabling this property will make the container to fit into available height. If content is too short, the container\n * will stretch, if too long, the container will shrink and show vertical scrollbar.\n *\n * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n */\n fitHeight?: boolean;\n\n /**\n * Footer of the container.\n */\n footer?: React.ReactNode;\n\n /**\n * Specify a container variant with one of the following:\n * * `default` - Use this variant in standalone context.\n * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n * table).\n * @visualrefresh `stacked` variant\n */\n variant?: 'default' | 'stacked';\n}\n\nexport namespace ContainerProps {\n export interface Media {\n /**\n * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n */\n content: React.ReactNode;\n\n /**\n * Defines the media slot's position within the container. Defaults to `top`.\n */\n position?: 'top' | 'side';\n\n /**\n * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n *\n * Note: This value is considered only when `position` is set to `side`.\n * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n */\n width?: string | number;\n\n /**\n * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n *\n * Note: This value is only considered if `position` is set to `top`.\n * If no height is provided, the media slot will be displayed at its full height.\n */\n height?: string | number;\n }\n}\n"]}
|