@cloudscape-design/components 3.0.173 → 3.0.175

package/app-layout/tools-and-split-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tools-and-split-panel.d.ts","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAI1D,UAAU,uBAAuB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEzC,cAAc,EAAE,OAAO,CAAC;IAExB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAE1B,YAAY,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,gBAAgB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC1E,kBAAkB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAE9E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAEzC,sBAAsB,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC;IACjE,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IAEzB,aAAa,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAE9C,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAE7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,cAAc,GACf,EAAE,uBAAuB,eA+CzB"}
+{"version":3,"file":"tools-and-split-panel.d.ts","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAI1D,UAAU,uBAAuB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEzC,cAAc,EAAE,OAAO,CAAC;IAExB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAE1B,YAAY,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,gBAAgB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC1E,kBAAkB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAE9E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAEzC,sBAAsB,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC;IACjE,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IAEzB,aAAa,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAE9C,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAE7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,cAAc,GACf,EAAE,uBAAuB,eA8CzB"}

package/app-layout/tools-and-split-panel.js

@@ -19,6 +19,6 @@ export function ToolsAndSplitPanel(_a) {
                     _b[styles.open] = toolsOpen,
                     _b)), style: __assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
                 splitPanel,
-                !toolsHide && (React.createElement(Drawer, { type: "tools", isMobile: isMobile, width: toolsWidth, isOpen: toolsOpen, onToggle: onToolsToggle, toggleRefs: toggleRefs, onLoseFocus: onLoseToolsFocus, isHidden: isHidden, externalizedToggle: Boolean(splitPanel), contentClassName: clsx(styles.tools, testutilStyles.tools), closeClassName: clsx(styles['tools-close'], testutilStyles['tools-close']), toggleClassName: clsx(styles['tools-toggle'], testutilStyles['tools-toggle']), topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels, extendRight: 0, hasDividerWithSplitPanel: splitPanelVisible }, tools))))));
+                !toolsHide && (React.createElement(Drawer, { type: "tools", isMobile: isMobile, width: toolsWidth, isOpen: toolsOpen, onToggle: onToolsToggle, toggleRefs: toggleRefs, onLoseFocus: onLoseToolsFocus, isHidden: isHidden, contentClassName: clsx(styles.tools, testutilStyles.tools), closeClassName: clsx(styles['tools-close'], testutilStyles['tools-close']), toggleClassName: clsx(styles['tools-toggle'], testutilStyles['tools-toggle']), topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels, extendRight: 0, hasDividerWithSplitPanel: splitPanelVisible }, tools))))));
 }
 //# sourceMappingURL=tools-and-split-panel.js.map

package/app-layout/tools-and-split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmC1D,MAAM,UAAU,kBAAkB,CAAC,EAiBT;;QAhBxB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAChB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA;IAEd,IAAM,iBAAiB,GAAG,cAAc,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhE,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;oBAC3C,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;oBACzB,GAAC,MAAM,CAAC,IAAI,IAAG,SAAS;wBACxB,EACF,KAAK,eACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU;gBACV,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,OAAO,CAAC,UAAU,CAAC,EACvC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAC1D,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC,EAC1E,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,EAC7E,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,EACd,wBAAwB,EAAE,iBAAiB,IAE1C,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ToolsAndSplitPanelProps {\n  toolsHide: boolean;\n  toolsOpen: boolean;\n  isHidden: DesktopDrawerProps['isHidden'];\n\n  splitPanelOpen: boolean;\n\n  drawerWidth: number;\n  toolsWidth: number;\n  splitPanelReportedSize: number;\n  closedDrawerWidth: number;\n\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n  contentHeightStyle: ReturnType<typeof useContentHeight>['contentHeightStyle'];\n\n  tools: React.ReactNode;\n  splitPanel: React.ReactNode;\n\n  ariaLabels: AppLayoutProps['ariaLabels'];\n\n  disableContentPaddings: AppLayoutProps['disableContentPaddings'];\n  isMobile: boolean;\n  isMotionEnabled: boolean;\n\n  onToolsToggle: DesktopDrawerProps['onToggle'];\n\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n\n  onLoseToolsFocus: (event: React.FocusEvent) => void;\n}\n\nexport function ToolsAndSplitPanel({\n  ariaLabels,\n  drawerWidth,\n  footerHeight,\n  headerHeight,\n  isHidden,\n  isMobile,\n  onToolsToggle,\n  panelHeightStyle,\n  splitPanel,\n  toggleRefs,\n  onLoseToolsFocus,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n  splitPanelOpen,\n}: ToolsAndSplitPanelProps) {\n  const splitPanelVisible = splitPanelOpen && Boolean(splitPanel);\n\n  return (\n    <>\n      <div\n        style={{\n          width: drawerWidth,\n        }}\n      >\n        <div\n          className={clsx(styles['panel-wrapper-outer'], {\n            [styles.mobile]: isMobile,\n            [styles.open]: toolsOpen,\n          })}\n          style={{\n            ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n          }}\n        >\n          {splitPanel}\n          {!toolsHide && (\n            <Drawer\n              type=\"tools\"\n              isMobile={isMobile}\n              width={toolsWidth}\n              isOpen={toolsOpen}\n              onToggle={onToolsToggle}\n              toggleRefs={toggleRefs}\n              onLoseFocus={onLoseToolsFocus}\n              isHidden={isHidden}\n              externalizedToggle={Boolean(splitPanel)}\n              contentClassName={clsx(styles.tools, testutilStyles.tools)}\n              closeClassName={clsx(styles['tools-close'], testutilStyles['tools-close'])}\n              toggleClassName={clsx(styles['tools-toggle'], testutilStyles['tools-toggle'])}\n              topOffset={headerHeight}\n              bottomOffset={footerHeight}\n              ariaLabels={ariaLabels}\n              extendRight={0}\n              hasDividerWithSplitPanel={splitPanelVisible}\n            >\n              {tools}\n            </Drawer>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmC1D,MAAM,UAAU,kBAAkB,CAAC,EAiBT;;QAhBxB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,gBAAgB,sBAAA,EAChB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA;IAEd,IAAM,iBAAiB,GAAG,cAAc,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhE,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;oBAC3C,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;oBACzB,GAAC,MAAM,CAAC,IAAI,IAAG,SAAS;wBACxB,EACF,KAAK,eACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU;gBACV,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAC1D,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC,EAC1E,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,EAC7E,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,EACd,wBAAwB,EAAE,iBAAiB,IAE1C,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ToolsAndSplitPanelProps {\n  toolsHide: boolean;\n  toolsOpen: boolean;\n  isHidden: DesktopDrawerProps['isHidden'];\n\n  splitPanelOpen: boolean;\n\n  drawerWidth: number;\n  toolsWidth: number;\n  splitPanelReportedSize: number;\n  closedDrawerWidth: number;\n\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n  contentHeightStyle: ReturnType<typeof useContentHeight>['contentHeightStyle'];\n\n  tools: React.ReactNode;\n  splitPanel: React.ReactNode;\n\n  ariaLabels: AppLayoutProps['ariaLabels'];\n\n  disableContentPaddings: AppLayoutProps['disableContentPaddings'];\n  isMobile: boolean;\n  isMotionEnabled: boolean;\n\n  onToolsToggle: DesktopDrawerProps['onToggle'];\n\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n\n  onLoseToolsFocus: (event: React.FocusEvent) => void;\n}\n\nexport function ToolsAndSplitPanel({\n  ariaLabels,\n  drawerWidth,\n  footerHeight,\n  headerHeight,\n  isHidden,\n  isMobile,\n  onToolsToggle,\n  panelHeightStyle,\n  splitPanel,\n  toggleRefs,\n  onLoseToolsFocus,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n  splitPanelOpen,\n}: ToolsAndSplitPanelProps) {\n  const splitPanelVisible = splitPanelOpen && Boolean(splitPanel);\n\n  return (\n    <>\n      <div\n        style={{\n          width: drawerWidth,\n        }}\n      >\n        <div\n          className={clsx(styles['panel-wrapper-outer'], {\n            [styles.mobile]: isMobile,\n            [styles.open]: toolsOpen,\n          })}\n          style={{\n            ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n          }}\n        >\n          {splitPanel}\n          {!toolsHide && (\n            <Drawer\n              type=\"tools\"\n              isMobile={isMobile}\n              width={toolsWidth}\n              isOpen={toolsOpen}\n              onToggle={onToolsToggle}\n              toggleRefs={toggleRefs}\n              onLoseFocus={onLoseToolsFocus}\n              isHidden={isHidden}\n              contentClassName={clsx(styles.tools, testutilStyles.tools)}\n              closeClassName={clsx(styles['tools-close'], testutilStyles['tools-close'])}\n              toggleClassName={clsx(styles['tools-toggle'], testutilStyles['tools-toggle'])}\n              topOffset={headerHeight}\n              bottomOffset={footerHeight}\n              ariaLabels={ariaLabels}\n              extendRight={0}\n              hasDividerWithSplitPanel={splitPanelVisible}\n            >\n              {tools}\n            </Drawer>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/app-layout/visual-refresh/context.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
 import { FocusControlState } from '../utils/use-focus-control';
+import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 interface AppLayoutInternals extends AppLayoutProps {
     dynamicOverlapHeight: number;
     handleSplitPanelClick: () => void;
@@ -37,6 +38,9 @@ interface AppLayoutInternals extends AppLayoutProps {
     splitPanelPosition: AppLayoutProps.SplitPanelPosition;
     splitPanelReportedSize: number;
     splitPanelReportedHeaderHeight: number;
+    splitPanelToggle: SplitPanelSideToggleProps;
+    setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;
+    splitPanelDisplayed: boolean;
     toolsFocusControl: FocusControlState;
 }
 interface AppLayoutProviderInternalsProps extends AppLayoutProps {

package/app-layout/visual-refresh/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,EAAE,iBAAiB,EAAmB,MAAM,4BAA4B,CAAC;AAIhF,UAAU,kBAAmB,SAAQ,cAAc;IACjD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,iCAAiC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,qBAAqB,KAAK,IAAI,CAAC;IAC1F,sBAAsB,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yBAAyB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iCAAiC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,CAAC;IACtD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,8BAA8B,EAAE,MAAM,CAAC;IACvC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AASD,UAAU,+BAAgC,SAAQ,cAAc;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,uBAMpC;AAED,eAAO,MAAM,0BAA0B,4GA8btC,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,EAAE,iBAAiB,EAAmB,MAAM,4BAA4B,CAAC;AAGhF,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AAEvF,UAAU,kBAAmB,SAAQ,cAAc;IACjD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,iCAAiC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,qBAAqB,KAAK,IAAI,CAAC;IAC1F,sBAAsB,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yBAAyB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iCAAiC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,CAAC;IACtD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,8BAA8B,EAAE,MAAM,CAAC;IACvC,gBAAgB,EAAE,yBAAyB,CAAC;IAC5C,mBAAmB,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjE,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AASD,UAAU,+BAAgC,SAAQ,cAAc;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,uBAMpC;AAED,eAAO,MAAM,0BAA0B,4GAsctC,CAAC"}

package/app-layout/visual-refresh/context.js

@@ -207,7 +207,12 @@ export var AppLayoutInternalsProvider = React.forwardRef(function (_a, forwardRe
      */
     var _t = useState(0), splitPanelReportedSize = _t[0], setSplitPanelReportedSize = _t[1];
     var _u = useState(0), splitPanelReportedHeaderHeight = _u[0], setSplitPanelReportedHeaderHeight = _u[1];
-    var _v = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }), splitPanelSize = _v[0], setSplitPanelSize = _v[1];
+    var _v = useState({
+        displayed: false,
+        ariaLabel: undefined
+    }), splitPanelToggle = _v[0], setSplitPanelToggle = _v[1];
+    var splitPanelDisplayed = !!(splitPanelToggle.displayed || isSplitPanelOpen);
+    var _w = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }), splitPanelSize = _w[0], setSplitPanelSize = _w[1];
     var handleSplitPanelResize = useCallback(function handleSplitPanelChange(detail) {
         setSplitPanelSize(detail.size);
         fireNonCancelableEvent(props.onSplitPanelResize, detail);
@@ -231,10 +236,10 @@ export var AppLayoutInternalsProvider = React.forwardRef(function (_a, forwardRe
      * This value is used to determine the max width constraint calculation
      * for the Tools container.
      */
-    var _w = useContainerQuery(function (rect) { return rect.width; }), layoutContainerQuery = _w[0], layoutElement = _w[1];
+    var _x = useContainerQuery(function (rect) { return rect.width; }), layoutContainerQuery = _x[0], layoutElement = _x[1];
     var layoutWidth = layoutContainerQuery !== null && layoutContainerQuery !== void 0 ? layoutContainerQuery : 0;
     var mainElement = useRef(null);
-    var _x = useState(0), mainOffsetLeft = _x[0], setMainOffsetLeft = _x[1];
+    var _y = useState(0), mainOffsetLeft = _y[0], setMainOffsetLeft = _y[1];
     useLayoutEffect(function handleMainOffsetLeft() {
         var _a, _b;
         setMainOffsetLeft((_b = (_a = mainElement === null || mainElement === void 0 ? void 0 : mainElement.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0);
@@ -280,9 +285,9 @@ export var AppLayoutInternalsProvider = React.forwardRef(function (_a, forwardRe
      * that it is not repeated in various components (such as AppBar) that need to
      * know if the notifications slot is empty.
      */
-    var _y = useContainerQuery(function (rect) { return rect.height; }), notificationsContainerQuery = _y[0], notificationsElement = _y[1];
-    var _z = useState(0), notificationsHeight = _z[0], setNotificationsHeight = _z[1];
-    var _0 = useState(false), hasNotificationsContent = _0[0], setHasNotificationsContent = _0[1];
+    var _z = useContainerQuery(function (rect) { return rect.height; }), notificationsContainerQuery = _z[0], notificationsElement = _z[1];
+    var _0 = useState(0), notificationsHeight = _0[0], setNotificationsHeight = _0[1];
+    var _1 = useState(false), hasNotificationsContent = _1[0], setHasNotificationsContent = _1[1];
     useEffect(function handleNotificationsContent() {
         setNotificationsHeight(notificationsContainerQuery !== null && notificationsContainerQuery !== void 0 ? notificationsContainerQuery : 0);
         setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);
@@ -293,7 +298,7 @@ export var AppLayoutInternalsProvider = React.forwardRef(function (_a, forwardRe
      * position. Use the size property if it is open and the header height if it is closed.
      */
     var offsetBottom = footerHeight;
-    if (splitPanel && splitPanelPosition === 'bottom') {
+    if (splitPanelDisplayed && splitPanelPosition === 'bottom') {
         if (isSplitPanelOpen) {
             offsetBottom += splitPanelReportedSize;
         }
@@ -301,7 +306,7 @@ export var AppLayoutInternalsProvider = React.forwardRef(function (_a, forwardRe
             offsetBottom += splitPanelReportedHeaderHeight;
         }
     }
-    return (React.createElement(AppLayoutInternalsContext.Provider, { value: __assign(__assign({}, props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, hasStickyBackground: hasStickyBackground, isAnyPanelOpen: isAnyPanelOpen, isMobile: isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition: isSplitPanelForcedPosition, isSplitPanelOpen: isSplitPanelOpen, isToolsOpen: isToolsOpen, layoutElement: layoutElement, layoutWidth: layoutWidth, mainElement: mainElement, mainOffsetLeft: mainOffsetLeft, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, navigationHide: navigationHide, notificationsElement: notificationsElement, notificationsHeight: notificationsHeight, offsetBottom: offsetBottom, setDynamicOverlapHeight: setDynamicOverlapHeight, setHasStickyBackground: setHasStickyBackground, setSplitPanelReportedSize: setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight: setSplitPanelReportedHeaderHeight, splitPanel: splitPanel, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelReportedHeaderHeight: splitPanelReportedHeaderHeight, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth, toolsFocusControl: toolsFocusControl }) },
+    return (React.createElement(AppLayoutInternalsContext.Provider, { value: __assign(__assign({}, props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, hasStickyBackground: hasStickyBackground, isAnyPanelOpen: isAnyPanelOpen, isMobile: isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition: isSplitPanelForcedPosition, isSplitPanelOpen: isSplitPanelOpen, isToolsOpen: isToolsOpen, layoutElement: layoutElement, layoutWidth: layoutWidth, mainElement: mainElement, mainOffsetLeft: mainOffsetLeft, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, navigationHide: navigationHide, notificationsElement: notificationsElement, notificationsHeight: notificationsHeight, offsetBottom: offsetBottom, setDynamicOverlapHeight: setDynamicOverlapHeight, setHasStickyBackground: setHasStickyBackground, setSplitPanelReportedSize: setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight: setSplitPanelReportedHeaderHeight, splitPanel: splitPanel, splitPanelDisplayed: splitPanelDisplayed, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelReportedHeaderHeight: splitPanelReportedHeaderHeight, splitPanelSize: splitPanelSize, splitPanelToggle: splitPanelToggle, setSplitPanelToggle: setSplitPanelToggle, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth, toolsFocusControl: toolsFocusControl }) },
         React.createElement(AppLayoutContext.Provider, { value: {
                 stickyOffsetBottom: offsetBottom,
                 stickyOffsetTop: 0,

package/app-layout/visual-refresh/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/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 { AppLayoutProps } from '../interfaces';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { getSplitPanelPosition } from './split-panel';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport styles from './styles.css.js';\nimport { isDevelopment } from '../../internal/is-development';\nimport { warnOnce } from '../../internal/logging';\nimport { applyDefaults } from '../defaults';\nimport { FocusControlState, useFocusControl } from '../utils/use-focus-control';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport { AppLayoutContext } from '../../internal/context/app-layout-context';\n\ninterface AppLayoutInternals extends AppLayoutProps {\n  dynamicOverlapHeight: number;\n  handleSplitPanelClick: () => void;\n  handleNavigationClick: (isOpen: boolean) => void;\n  handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n  handleSplitPanelResize: (detail: { size: number }) => void;\n  handleToolsClick: (value: boolean) => void;\n  hasDefaultToolsWidth: boolean;\n  hasNotificationsContent: boolean;\n  hasStickyBackground: boolean;\n  isAnyPanelOpen: 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  mainElement: React.Ref<HTMLDivElement>;\n  mainOffsetLeft: number;\n  notificationsElement: React.Ref<HTMLDivElement>;\n  notificationsHeight: number;\n  offsetBottom: number;\n  setDynamicOverlapHeight: (value: number) => void;\n  setHasStickyBackground: (value: boolean) => void;\n  setSplitPanelReportedSize: (value: number) => void;\n  setSplitPanelReportedHeaderHeight: (value: number) => void;\n  headerHeight: number;\n  footerHeight: number;\n  splitPanelMaxWidth: number;\n  splitPanelMinWidth: number;\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n  splitPanelReportedSize: number;\n  splitPanelReportedHeaderHeight: number;\n  toolsFocusControl: FocusControlState;\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    /**\n     * The overlap height has a default set in CSS but can also be dynamically overridden\n     * for content types (such as Table and Wizard) that have variable size content in the overlap.\n     * If a child component utilizes a sticky header the hasStickyBackground property will determine\n     * if the background remains in the same vertical position.\n     */\n    const [dynamicOverlapHeight, setDynamicOverlapHeight] = useState(0);\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 AppBar\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 handleNavigationClick = useCallback(\n      function handleNavigationChange(isOpen: boolean) {\n        setIsNavigationOpen(isOpen);\n        fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n      },\n      [props.onNavigationChange, setIsNavigationOpen]\n    );\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 AppBar\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 toolsFocusControl = useFocusControl(isToolsOpen, true);\n\n    const handleToolsClick = useCallback(\n      function handleToolsChange(isOpen: boolean) {\n        setIsToolsOpen(isOpen);\n        fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n      },\n      [props.onToolsChange, setIsToolsOpen]\n    );\n\n    const navigationVisible = !navigationHide && isNavigationOpen;\n    const toolsVisible = !toolsHide && isToolsOpen;\n    const isAnyPanelOpen = navigationVisible || toolsVisible;\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     * 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: toolsFocusControl.setFocus,\n        };\n      },\n      [isMobile, handleNavigationClick, handleToolsClick, toolsFocusControl.setFocus]\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    const handleSplitPanelClick = useCallback(\n      function handleSplitPanelChange() {\n        setIsSplitPanelOpen(!isSplitPanelOpen);\n        fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n      },\n      [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen]\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    /**\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\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        fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n      },\n      [props.onSplitPanelPreferencesChange, setSplitPanelPreferences]\n    );\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.width);\n    const layoutWidth = layoutContainerQuery ?? 0;\n\n    const mainElement = useRef<HTMLDivElement>(null);\n    const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n    useLayoutEffect(\n      function handleMainOffsetLeft() {\n        setMainOffsetLeft(mainElement?.current?.offsetLeft ?? 0);\n      },\n      [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]\n    );\n\n    useLayoutEffect(\n      function handleSplitPanelMaxWidth() {\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        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\n        setSplitPanelMaxWidth(\n          layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsOffsetWidth - toolsFormOffsetWidth\n        );\n      },\n      [isNavigationOpen, isToolsOpen, layoutWidth, mainOffsetLeft, minContentWidth, toolsWidth]\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 AppBar) that need to\n     * know if the notifications slot is empty.\n     */\n    const [notificationsContainerQuery, notificationsElement] = useContainerQuery(rect => rect.height);\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    if (splitPanel && splitPanelPosition === 'bottom') {\n      if (isSplitPanelOpen) {\n        offsetBottom += splitPanelReportedSize;\n      } else {\n        offsetBottom += splitPanelReportedHeaderHeight;\n      }\n    }\n\n    return (\n      <AppLayoutInternalsContext.Provider\n        value={{\n          ...props,\n          contentType,\n          dynamicOverlapHeight,\n          headerHeight,\n          footerHeight,\n          hasDefaultToolsWidth,\n          handleNavigationClick,\n          handleSplitPanelClick,\n          handleSplitPanelPreferencesChange,\n          handleSplitPanelResize,\n          handleToolsClick,\n          hasNotificationsContent,\n          hasStickyBackground,\n          isAnyPanelOpen,\n          isMobile,\n          isNavigationOpen: isNavigationOpen ?? false,\n          isSplitPanelForcedPosition,\n          isSplitPanelOpen,\n          isToolsOpen,\n          layoutElement,\n          layoutWidth,\n          mainElement,\n          mainOffsetLeft,\n          maxContentWidth,\n          minContentWidth,\n          navigationHide,\n          notificationsElement,\n          notificationsHeight,\n          offsetBottom,\n          setDynamicOverlapHeight,\n          setHasStickyBackground,\n          setSplitPanelReportedSize,\n          setSplitPanelReportedHeaderHeight,\n          splitPanel,\n          splitPanelMaxWidth,\n          splitPanelMinWidth,\n          splitPanelPosition,\n          splitPanelPreferences,\n          splitPanelReportedSize,\n          splitPanelReportedHeaderHeight,\n          splitPanelSize,\n          toolsHide,\n          toolsOpen: isToolsOpen,\n          toolsWidth,\n          toolsFocusControl,\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            hasBreadcrumbs: !!props.breadcrumbs,\n            setHasStickyBackground,\n            setDynamicOverlapHeight,\n          }}\n        >\n          {children}\n        </AppLayoutContext.Provider>\n      </AppLayoutInternalsContext.Provider>\n    );\n  }\n);\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/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;AAEf,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAqB,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AA2C7E;;;;GAIG;AACH,IAAM,yBAAyB,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAMjF,MAAM,UAAU,qBAAqB;IACnC,IAAM,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,IAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACxD,UACE,EAWkC,EAClC,UAAyC;;IAXvC,IAAA,SAAS,eAAA,EACE,mBAAmB,eAAA,EAC9B,cAAc,oBAAA,EACE,wBAAwB,oBAAA,EACxC,mBAAuB,EAAvB,WAAW,mBAAG,SAAS,KAAA,EACvB,sBAAwB,EAAxB,cAAc,mBAAG,OAAO,KAAA,EACxB,sBAAwB,EAAxB,cAAc,mBAAG,OAAO,KAAA,EACxB,QAAQ,cAAA,EACR,UAAU,gBAAA,EACP,KAAK,cAVV,2IAWC,CADS;IAIV,IAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,IAAI,aAAa,EAAE;QACjB,IAAI,mBAAmB,IAAI,SAAS,EAAE;YACpC,QAAQ,CACN,WAAW,EACX,4JAAwK,CACzK,CAAC;SACH;KACF;IAED;;;;;OAKG;IACG,IAAA,KAAkD,QAAQ,CAAC,CAAC,CAAC,EAA5D,oBAAoB,QAAA,EAAE,uBAAuB,QAAe,CAAC;IAC9D,IAAA,KAAgD,QAAQ,CAAC,KAAK,CAAC,EAA9D,mBAAmB,QAAA,EAAE,sBAAsB,QAAmB,CAAC;IAEtE;;OAEG;IACH,IAAM,iBAAiB,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IAC/C,IAAM,qBAAqB,GAAG,iBAAiB,GAAG,CAAC,CAAC;IACpD,+FAA+F;IAC/F,gGAAgG;IAChG,IAAM,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,IAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,mCAAI,GAAG,CAAC;IAErD;;;;;;OAMG;IACH,IAAM,mBAAmB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAE,eAAe,iBAAA,EAAE,eAAe,iBAAA,EAAE,EAAE,IAAI,CAAC,CAAC;IAEnG;;;;;;;;;;OAUG;IACG,IAAA,KAAkD,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,EALM,UAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EAAE,mBAAmB,QAKnD,CAAC;IAEF,IAAM,qBAAqB,GAAG,WAAW,CACvC,SAAS,sBAAsB,CAAC,MAAe;QAC7C,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC5B,sBAAsB,CAAC,KAAK,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACrE,CAAC,EACD,CAAC,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAChD,CAAC;IAEF;;;;;;;;;;OAUG;IACH,IAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,GAAG,CAAC;IAC3C,IAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;IAEtD,IAAA,KAAwC,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,EALM,UAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EAAE,cAAc,QAKzC,CAAC;IAEF,IAAM,iBAAiB,GAAG,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAE7D,IAAM,gBAAgB,GAAG,WAAW,CAClC,SAAS,iBAAiB,CAAC,MAAe;QACxC,cAAc,CAAC,MAAM,CAAC,CAAC;QACvB,sBAAsB,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,EAAE,cAAc,CAAC,CACtC,CAAC;IAEF,IAAM,iBAAiB,GAAG,CAAC,cAAc,IAAI,gBAAgB,CAAC;IAC9D,IAAM,YAAY,GAAG,CAAC,SAAS,IAAI,WAAW,CAAC;IAC/C,IAAM,cAAc,GAAG,iBAAiB,IAAI,YAAY,CAAC;IAEzD;;;;;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;;;;;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,iBAAiB,CAAC,QAAQ;SAC5C,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAChF,CAAC;IAEF;;;OAGG;IACH,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAExD;;;;;;OAMG;IACH,IAAM,kBAAkB,GAAG,GAAG,CAAC;IACzB,IAAA,KAA8C,QAAQ,CAAC,kBAAkB,CAAC,EAAzE,kBAAkB,QAAA,EAAE,qBAAqB,QAAgC,CAAC;IAEjF;;;;;;;;;OASG;IACG,IAAA,KAA0C,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,EALM,gBAAgB,QAAA,EAAE,mBAAmB,QAK3C,CAAC;IAEF,IAAM,qBAAqB,GAAG,WAAW,CACvC,SAAS,sBAAsB;QAC7B,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;QACvC,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,CAAC,CAClE,CAAC;IAEF;;;;;;;;;OASG;IACG,IAAA,KAAoD,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,EATM,qBAAqB,QAAA,EAAE,wBAAwB,QASrD,CAAC;IAEF;;;;;;OAMG;IACG,IAAA,KAA4D,QAAQ,CAAC,KAAK,CAAC,EAA1E,0BAA0B,QAAA,EAAE,2BAA2B,QAAmB,CAAC;IAClF,IAAM,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;IACG,IAAA,KAAsD,QAAQ,CAAC,CAAC,CAAC,EAAhE,sBAAsB,QAAA,EAAE,yBAAyB,QAAe,CAAC;IAClE,IAAA,KAAsE,QAAQ,CAAC,CAAC,CAAC,EAAhF,8BAA8B,QAAA,EAAE,iCAAiC,QAAe,CAAC;IAClF,IAAA,KAA0C,QAAQ,CAA4B;QAClF,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,SAAS;KACrB,CAAC,EAHK,gBAAgB,QAAA,EAAE,mBAAmB,QAG1C,CAAC;IACH,IAAM,mBAAmB,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,IAAI,gBAAgB,CAAC,CAAC;IAEzE,IAAA,KAAsC,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,EALM,cAAc,QAAA,EAAE,iBAAiB,QAKvC,CAAC;IAEF,IAAM,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,IAAM,iCAAiC,GAAG,WAAW,CACnD,SAAS,sBAAsB,CAAC,MAA4C;QAC1E,wBAAwB,CAAC,MAAM,CAAC,CAAC;QACjC,sBAAsB,CAAC,KAAK,CAAC,6BAA6B,EAAE,MAAM,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,KAAK,CAAC,6BAA6B,EAAE,wBAAwB,CAAC,CAChE,CAAC;IAEF;;;;;;;;;;;;;;OAcG;IACG,IAAA,KAAwC,iBAAiB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU,CAAC,EAA5E,oBAAoB,QAAA,EAAE,aAAa,QAAyC,CAAC;IACpF,IAAM,WAAW,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,CAAC,CAAC;IAE9C,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC3C,IAAA,KAAsC,QAAQ,CAAC,CAAC,CAAC,EAAhD,cAAc,QAAA,EAAE,iBAAiB,QAAe,CAAC;IAExD,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,eAAe,CACb,SAAS,wBAAwB;QAC/B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,IAAM,eAAe,GAAG,EAAE,CAAC,CAAC,0DAA0D;QACtF,IAAM,oBAAoB,GAAG,GAAG,CAAC,CAAC,0DAA0D;QAC5F,IAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAEtD,qBAAqB,CACnB,WAAW,GAAG,cAAc,GAAG,eAAe,GAAG,eAAe,GAAG,gBAAgB,GAAG,oBAAoB,CAC3G,CAAC;IACJ,CAAC,EACD,CAAC,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,CAAC,CAC1F,CAAC;IAEF;;;;;;;;;;;OAWG;IACG,IAAA,KAAsD,iBAAiB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC,EAA3F,2BAA2B,QAAA,EAAE,oBAAoB,QAA0C,CAAC;IAC7F,IAAA,KAAgD,QAAQ,CAAC,CAAC,CAAC,EAA1D,mBAAmB,QAAA,EAAE,sBAAsB,QAAe,CAAC;IAC5D,IAAA,KAAwD,QAAQ,CAAC,KAAK,CAAC,EAAtE,uBAAuB,QAAA,EAAE,0BAA0B,QAAmB,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;IAChC,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,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IACjC,KAAK,wBACA,KAAK,KACR,WAAW,aAAA,EACX,oBAAoB,sBAAA,EACpB,YAAY,cAAA,EACZ,YAAY,cAAA,EACZ,oBAAoB,sBAAA,EACpB,qBAAqB,uBAAA,EACrB,qBAAqB,uBAAA,EACrB,iCAAiC,mCAAA,EACjC,sBAAsB,wBAAA,EACtB,gBAAgB,kBAAA,EAChB,uBAAuB,yBAAA,EACvB,mBAAmB,qBAAA,EACnB,cAAc,gBAAA,EACd,QAAQ,UAAA,EACR,gBAAgB,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAC3C,0BAA0B,4BAAA,EAC1B,gBAAgB,kBAAA,EAChB,WAAW,aAAA,EACX,aAAa,eAAA,EACb,WAAW,aAAA,EACX,WAAW,aAAA,EACX,cAAc,gBAAA,EACd,eAAe,iBAAA,EACf,eAAe,iBAAA,EACf,cAAc,gBAAA,EACd,oBAAoB,sBAAA,EACpB,mBAAmB,qBAAA,EACnB,YAAY,cAAA,EACZ,uBAAuB,yBAAA,EACvB,sBAAsB,wBAAA,EACtB,yBAAyB,2BAAA,EACzB,iCAAiC,mCAAA,EACjC,UAAU,YAAA,EACV,mBAAmB,qBAAA,EACnB,kBAAkB,oBAAA,EAClB,kBAAkB,oBAAA,EAClB,kBAAkB,oBAAA,EAClB,qBAAqB,uBAAA,EACrB,sBAAsB,wBAAA,EACtB,8BAA8B,gCAAA,EAC9B,cAAc,gBAAA,EACd,gBAAgB,kBAAA,EAChB,mBAAmB,qBAAA,EACnB,SAAS,WAAA,EACT,SAAS,EAAE,WAAW,EACtB,UAAU,YAAA,EACV,iBAAiB,mBAAA;QAGnB,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;gBACL,kBAAkB,EAAE,YAAY;gBAChC,eAAe,EAAE,CAAC;gBAClB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW;gBACnC,sBAAsB,wBAAA;gBACtB,uBAAuB,yBAAA;aACxB,IAEA,QAAQ,CACiB,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 { AppLayoutProps } from '../interfaces';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { getSplitPanelPosition } from './split-panel';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport styles from './styles.css.js';\nimport { isDevelopment } from '../../internal/is-development';\nimport { warnOnce } from '../../internal/logging';\nimport { applyDefaults } from '../defaults';\nimport { FocusControlState, useFocusControl } from '../utils/use-focus-control';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport { AppLayoutContext } from '../../internal/context/app-layout-context';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\n\ninterface AppLayoutInternals extends AppLayoutProps {\n  dynamicOverlapHeight: number;\n  handleSplitPanelClick: () => void;\n  handleNavigationClick: (isOpen: boolean) => void;\n  handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n  handleSplitPanelResize: (detail: { size: number }) => void;\n  handleToolsClick: (value: boolean) => void;\n  hasDefaultToolsWidth: boolean;\n  hasNotificationsContent: boolean;\n  hasStickyBackground: boolean;\n  isAnyPanelOpen: 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  mainElement: React.Ref<HTMLDivElement>;\n  mainOffsetLeft: number;\n  notificationsElement: React.Ref<HTMLDivElement>;\n  notificationsHeight: number;\n  offsetBottom: number;\n  setDynamicOverlapHeight: (value: number) => void;\n  setHasStickyBackground: (value: boolean) => void;\n  setSplitPanelReportedSize: (value: number) => void;\n  setSplitPanelReportedHeaderHeight: (value: number) => void;\n  headerHeight: number;\n  footerHeight: number;\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  toolsFocusControl: FocusControlState;\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    /**\n     * The overlap height has a default set in CSS but can also be dynamically overridden\n     * for content types (such as Table and Wizard) that have variable size content in the overlap.\n     * If a child component utilizes a sticky header the hasStickyBackground property will determine\n     * if the background remains in the same vertical position.\n     */\n    const [dynamicOverlapHeight, setDynamicOverlapHeight] = useState(0);\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 AppBar\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 handleNavigationClick = useCallback(\n      function handleNavigationChange(isOpen: boolean) {\n        setIsNavigationOpen(isOpen);\n        fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n      },\n      [props.onNavigationChange, setIsNavigationOpen]\n    );\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 AppBar\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 toolsFocusControl = useFocusControl(isToolsOpen, true);\n\n    const handleToolsClick = useCallback(\n      function handleToolsChange(isOpen: boolean) {\n        setIsToolsOpen(isOpen);\n        fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n      },\n      [props.onToolsChange, setIsToolsOpen]\n    );\n\n    const navigationVisible = !navigationHide && isNavigationOpen;\n    const toolsVisible = !toolsHide && isToolsOpen;\n    const isAnyPanelOpen = navigationVisible || toolsVisible;\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     * 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: toolsFocusControl.setFocus,\n        };\n      },\n      [isMobile, handleNavigationClick, handleToolsClick, toolsFocusControl.setFocus]\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    const handleSplitPanelClick = useCallback(\n      function handleSplitPanelChange() {\n        setIsSplitPanelOpen(!isSplitPanelOpen);\n        fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n      },\n      [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen]\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    /**\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\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        fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n      },\n      [props.onSplitPanelPreferencesChange, setSplitPanelPreferences]\n    );\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.width);\n    const layoutWidth = layoutContainerQuery ?? 0;\n\n    const mainElement = useRef<HTMLDivElement>(null);\n    const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n    useLayoutEffect(\n      function handleMainOffsetLeft() {\n        setMainOffsetLeft(mainElement?.current?.offsetLeft ?? 0);\n      },\n      [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]\n    );\n\n    useLayoutEffect(\n      function handleSplitPanelMaxWidth() {\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        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\n        setSplitPanelMaxWidth(\n          layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsOffsetWidth - toolsFormOffsetWidth\n        );\n      },\n      [isNavigationOpen, isToolsOpen, layoutWidth, mainOffsetLeft, minContentWidth, toolsWidth]\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 AppBar) that need to\n     * know if the notifications slot is empty.\n     */\n    const [notificationsContainerQuery, notificationsElement] = useContainerQuery(rect => rect.height);\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    if (splitPanelDisplayed && splitPanelPosition === 'bottom') {\n      if (isSplitPanelOpen) {\n        offsetBottom += splitPanelReportedSize;\n      } else {\n        offsetBottom += splitPanelReportedHeaderHeight;\n      }\n    }\n\n    return (\n      <AppLayoutInternalsContext.Provider\n        value={{\n          ...props,\n          contentType,\n          dynamicOverlapHeight,\n          headerHeight,\n          footerHeight,\n          hasDefaultToolsWidth,\n          handleNavigationClick,\n          handleSplitPanelClick,\n          handleSplitPanelPreferencesChange,\n          handleSplitPanelResize,\n          handleToolsClick,\n          hasNotificationsContent,\n          hasStickyBackground,\n          isAnyPanelOpen,\n          isMobile,\n          isNavigationOpen: isNavigationOpen ?? false,\n          isSplitPanelForcedPosition,\n          isSplitPanelOpen,\n          isToolsOpen,\n          layoutElement,\n          layoutWidth,\n          mainElement,\n          mainOffsetLeft,\n          maxContentWidth,\n          minContentWidth,\n          navigationHide,\n          notificationsElement,\n          notificationsHeight,\n          offsetBottom,\n          setDynamicOverlapHeight,\n          setHasStickyBackground,\n          setSplitPanelReportedSize,\n          setSplitPanelReportedHeaderHeight,\n          splitPanel,\n          splitPanelDisplayed,\n          splitPanelMaxWidth,\n          splitPanelMinWidth,\n          splitPanelPosition,\n          splitPanelPreferences,\n          splitPanelReportedSize,\n          splitPanelReportedHeaderHeight,\n          splitPanelSize,\n          splitPanelToggle,\n          setSplitPanelToggle,\n          toolsHide,\n          toolsOpen: isToolsOpen,\n          toolsWidth,\n          toolsFocusControl,\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            hasBreadcrumbs: !!props.breadcrumbs,\n            setHasStickyBackground,\n            setDynamicOverlapHeight,\n          }}\n        >\n          {children}\n        </AppLayoutContext.Provider>\n      </AppLayoutInternalsContext.Provider>\n    );\n  }\n);\n"]}

package/app-layout/visual-refresh/layout.js

@@ -16,18 +16,18 @@ import customCssProps from '../../internal/generated/custom-css-properties';
 export default function Layout(_a) {
     var _b, _c, _d, _e, _f, _g;
     var children = _a.children;
-    var _h = useAppLayoutInternals(), contentHeader = _h.contentHeader, contentType = _h.contentType, disableBodyScroll = _h.disableBodyScroll, disableContentHeaderOverlap = _h.disableContentHeaderOverlap, dynamicOverlapHeight = _h.dynamicOverlapHeight, footerHeight = _h.footerHeight, hasNotificationsContent = _h.hasNotificationsContent, headerHeight = _h.headerHeight, isNavigationOpen = _h.isNavigationOpen, isSplitPanelOpen = _h.isSplitPanelOpen, isToolsOpen = _h.isToolsOpen, layoutElement = _h.layoutElement, layoutWidth = _h.layoutWidth, mainOffsetLeft = _h.mainOffsetLeft, maxContentWidth = _h.maxContentWidth, minContentWidth = _h.minContentWidth, navigationHide = _h.navigationHide, notificationsHeight = _h.notificationsHeight, splitPanel = _h.splitPanel, splitPanelPosition = _h.splitPanelPosition, stickyNotifications = _h.stickyNotifications, toolsHide = _h.toolsHide;
+    var _h = useAppLayoutInternals(), contentHeader = _h.contentHeader, contentType = _h.contentType, disableBodyScroll = _h.disableBodyScroll, disableContentHeaderOverlap = _h.disableContentHeaderOverlap, dynamicOverlapHeight = _h.dynamicOverlapHeight, footerHeight = _h.footerHeight, hasNotificationsContent = _h.hasNotificationsContent, headerHeight = _h.headerHeight, isNavigationOpen = _h.isNavigationOpen, isSplitPanelOpen = _h.isSplitPanelOpen, isToolsOpen = _h.isToolsOpen, layoutElement = _h.layoutElement, layoutWidth = _h.layoutWidth, mainOffsetLeft = _h.mainOffsetLeft, maxContentWidth = _h.maxContentWidth, minContentWidth = _h.minContentWidth, navigationHide = _h.navigationHide, notificationsHeight = _h.notificationsHeight, splitPanelPosition = _h.splitPanelPosition, stickyNotifications = _h.stickyNotifications, splitPanelDisplayed = _h.splitPanelDisplayed, toolsHide = _h.toolsHide;
     var isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);
     // Content gaps on the left and right are used with the minmax function in the CSS grid column definition
     var hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);
-    var hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide);
+    var hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide);
     return (React.createElement("main", { className: clsx(styles.layout, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_b = {},
             _b[styles['disable-body-scroll']] = disableBodyScroll,
             _b[testutilStyles['disable-body-scroll-root']] = disableBodyScroll,
             _b[styles['has-content-gap-left']] = hasContentGapLeft,
             _b[styles['has-content-gap-right']] = hasContentGapRight,
             _b[styles['has-max-content-width']] = maxContentWidth && maxContentWidth > 0,
-            _b[styles['has-split-panel']] = splitPanel,
+            _b[styles['has-split-panel']] = splitPanelDisplayed,
             _b[styles['has-sticky-notifications']] = stickyNotifications && hasNotificationsContent,
             _b[styles['is-overlap-disabled']] = isOverlapDisabled,
             _b), testutilStyles.root), ref: layoutElement, style: __assign(__assign(__assign(__assign((_c = {}, _c[customCssProps.headerHeight] = "".concat(headerHeight, "px"), _c[customCssProps.footerHeight] = "".concat(footerHeight, "px"), _c[customCssProps.layoutWidth] = "".concat(layoutWidth, "px"), _c[customCssProps.mainOffsetLeft] = "".concat(mainOffsetLeft, "px"), _c), (maxContentWidth && (_d = {}, _d[customCssProps.maxContentWidth] = "".concat(maxContentWidth, "px"), _d))), (minContentWidth && (_e = {}, _e[customCssProps.minContentWidth] = "".concat(minContentWidth, "px"), _e))), (_f = {}, _f[customCssProps.notificationsHeight] = "".concat(notificationsHeight, "px"), _f)), (!isOverlapDisabled &&
@@ -41,22 +41,22 @@ export default function Layout(_a) {
  * determine the necessity of utilizing the content gap left property to create
  * horizontal space between the center column and its adjacent siblings.
  */
-function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide) {
+function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide) {
     var hasContentGapRight = false;
     // Main is touching the edge of the Layout and needs a content gap
-    if (!splitPanel && toolsHide) {
+    if (!splitPanelDisplayed && toolsHide) {
         hasContentGapRight = true;
     }
     // Main is touching the Tools drawer and needs a content gap
-    if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
+    if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
         hasContentGapRight = true;
     }
     // Main is touching the edge of the Layout and needs a content gap
-    if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
+    if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
         hasContentGapRight = true;
     }
     // Main is touching the Split Panel drawer and needs a content gap
-    if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {
+    if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {
         hasContentGapRight = true;
     }
     return hasContentGapRight;

package/app-layout/visual-refresh/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    headerHeight,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanel,\n    splitPanelPosition,\n    stickyNotifications,\n    toolsHide,\n  } = useAppLayoutInternals();\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    toolsHide\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanel,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  splitPanel?: React.ReactNode,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanel && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    headerHeight,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanelPosition,\n    stickyNotifications,\n    splitPanelDisplayed,\n    toolsHide,\n  } = useAppLayoutInternals();\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanelDisplayed,\n    toolsHide\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen: boolean | undefined,\n  isToolsOpen: boolean,\n  splitPanelDisplayed: boolean,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanelDisplayed && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}

package/app-layout/visual-refresh/main.js

@@ -8,7 +8,7 @@ import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 export default function Main() {
     var _a, _b;
-    var _c = useAppLayoutInternals(), breadcrumbs = _c.breadcrumbs, content = _c.content, contentHeader = _c.contentHeader, contentType = _c.contentType, disableContentPaddings = _c.disableContentPaddings, dynamicOverlapHeight = _c.dynamicOverlapHeight, hasNotificationsContent = _c.hasNotificationsContent, isNavigationOpen = _c.isNavigationOpen, isSplitPanelOpen = _c.isSplitPanelOpen, isToolsOpen = _c.isToolsOpen, isMobile = _c.isMobile, isAnyPanelOpen = _c.isAnyPanelOpen, mainElement = _c.mainElement, splitPanel = _c.splitPanel, offsetBottom = _c.offsetBottom, footerHeight = _c.footerHeight, splitPanelPosition = _c.splitPanelPosition;
+    var _c = useAppLayoutInternals(), breadcrumbs = _c.breadcrumbs, content = _c.content, contentHeader = _c.contentHeader, contentType = _c.contentType, disableContentPaddings = _c.disableContentPaddings, dynamicOverlapHeight = _c.dynamicOverlapHeight, hasNotificationsContent = _c.hasNotificationsContent, isNavigationOpen = _c.isNavigationOpen, isSplitPanelOpen = _c.isSplitPanelOpen, isToolsOpen = _c.isToolsOpen, isMobile = _c.isMobile, isAnyPanelOpen = _c.isAnyPanelOpen, mainElement = _c.mainElement, splitPanelDisplayed = _c.splitPanelDisplayed, offsetBottom = _c.offsetBottom, footerHeight = _c.footerHeight, splitPanelPosition = _c.splitPanelPosition;
     var isUnfocusable = isMobile && isAnyPanelOpen;
     var splitPanelHeight = offsetBottom - footerHeight;
     return (React.createElement("div", { className: clsx(styles.container, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_a = {},
@@ -17,7 +17,7 @@ export default function Main() {
             _a[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
             _a[styles['has-header']] = contentHeader,
             _a[styles['has-notifications-content']] = hasNotificationsContent,
-            _a[styles['has-split-panel']] = splitPanel,
+            _a[styles['has-split-panel']] = splitPanelDisplayed,
             _a[styles['is-navigation-open']] = isNavigationOpen,
             _a[styles['is-tools-open']] = isToolsOpen,
             _a[styles['is-split-panel-open']] = isSplitPanelOpen,

package/app-layout/visual-refresh/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;;IACpB,IAAA,KAkBF,qBAAqB,EAAE,EAjBzB,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,kBAAkB,wBACO,CAAC;IAE5B,IAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IACjD,IAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,MAAM,CAAC,+BAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAE,CAAC;YAE9D,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,sBAAsB;YAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;YAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,UAAU;YACvC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;YAChD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;YACtC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;YACjD,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;iBAErC,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK;YACH,GAAC,cAAc,CAAC,gBAAgB,IAAG,UAAG,gBAAgB,OAAI;mBAG3D,OAAO,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n    splitPanel,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanel,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;;IACpB,IAAA,KAkBF,qBAAqB,EAAE,EAjBzB,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,mBAAmB,yBAAA,EACnB,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,kBAAkB,wBACO,CAAC;IAE5B,IAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IACjD,IAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,MAAM,CAAC,+BAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAE,CAAC;YAE9D,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,sBAAsB;YAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;YAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,mBAAmB;YAChD,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;YAChD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;YACtC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;YACjD,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;iBAErC,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK;YACH,GAAC,cAAc,CAAC,gBAAgB,IAAG,UAAG,gBAAgB,OAAI;mBAG3D,OAAO,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n    splitPanelDisplayed,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh/split-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAoDjE;kBApDQ,UAAU;;;;AAsDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBAmCtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}
+{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAkDjE;kBAlDQ,UAAU;;;;AAoDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBAmCtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}

package/app-layout/visual-refresh/split-panel.js

@@ -14,9 +14,8 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  */
 function SplitPanel(_a) {
     var children = _a.children;
-    var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
-    var _c = useState(undefined), openButtonAriaLabel = _c[0], setOpenButtonAriaLabel = _c[1];
-    var _d = useState(), splitPanelLastInteraction = _d[0], setSplitPanelLastInteraction = _d[1];
+    var _b = useAppLayoutInternals(), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, setSplitPanelReportedHeaderHeight = _b.setSplitPanelReportedHeaderHeight, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize, setSplitPanelToggle = _b.setSplitPanelToggle, headerHeight = _b.headerHeight, footerHeight = _b.footerHeight;
+    var _c = useState(), splitPanelLastInteraction = _c[0], setSplitPanelLastInteraction = _c[1];
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [isSplitPanelOpen]);
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
     var context = {
@@ -40,8 +39,7 @@ function SplitPanel(_a) {
         rightOffset: 0,
         size: splitPanelSize || 0,
         topOffset: 0,
-        openButtonAriaLabel: openButtonAriaLabel,
-        setOpenButtonAriaLabel: setOpenButtonAriaLabel,
+        setSplitPanelToggle: setSplitPanelToggle,
         lastInteraction: splitPanelLastInteraction
     };
     return React.createElement(SplitPanelContextProvider, { value: context }, children);

package/app-layout/visual-refresh/split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n  SplitPanelContextProvider,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n      // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n      return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n    },\n    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    openButtonAriaLabel,\n    setOpenButtonAriaLabel,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
+{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport {\n  SplitPanelContextProvider,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    setSplitPanelToggle,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n      // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n      return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n    },\n    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    setSplitPanelToggle,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}