@cloudscape-design/components 3.0.76 → 3.0.78

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

@@ -15,8 +15,8 @@ export default function AppBar() {
     var _a, _b, _c, _d;
     var _e, _f, _g;
     var _h = useContext(AppLayoutContext), ariaLabels = _h.ariaLabels, breadcrumbs = _h.breadcrumbs, contentHeader = _h.contentHeader, contentType = _h.contentType, dynamicOverlapHeight = _h.dynamicOverlapHeight, handleNavigationClick = _h.handleNavigationClick, handleToolsClick = _h.handleToolsClick, hasNotificationsContent = _h.hasNotificationsContent, isMobile = _h.isMobile, navigationHide = _h.navigationHide, isNavigationOpen = _h.isNavigationOpen, isToolsOpen = _h.isToolsOpen, toolsHide = _h.toolsHide, isAnyPanelOpen = _h.isAnyPanelOpen;
-    var focusRefsNav = useFocusControl(isNavigationOpen);
-    var focusRefsTools = useFocusControl(isToolsOpen);
+    var focusRefsNav = useFocusControl(isNavigationOpen).refs;
+    var focusRefsTools = useFocusControl(isToolsOpen, true).refs;
     if (navigationHide && !breadcrumbs && toolsHide) {
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const focusRefsNav = useFocusControl(isNavigationOpen);\n  const focusRefsTools = useFocusControl(isToolsOpen);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const { refs: focusRefsNav } = useFocusControl(isNavigationOpen);\n  const { refs: focusRefsTools } = useFocusControl(isToolsOpen, true);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
+import { FocusControlState } from '../utils/use-focus-control';
 /**
  * The default values are destructured in the context instantiation to
  * prevent downstream Typescript errors. This could likely be replaced
@@ -21,7 +22,7 @@ export declare const AppLayoutContext: React.Context<{
     isNavigationOpen: boolean;
     isSplitPanelForcedPosition: boolean;
     isSplitPanelOpen?: boolean | undefined;
-    isToolsOpen?: boolean | undefined;
+    isToolsOpen: boolean;
     layoutElement: React.Ref<HTMLElement>;
     layoutWidth: number;
     mainElement: React.Ref<HTMLDivElement>;
@@ -40,6 +41,7 @@ export declare const AppLayoutContext: React.Context<{
     splitPanelMinWidth: number;
     splitPanelPosition: AppLayoutProps.SplitPanelPosition;
     splitPanelReportedSize: number;
+    toolsFocusControl: FocusControlState;
     contentType?: AppLayoutProps.ContentType | undefined;
     disableContentPaddings?: boolean | undefined;
     disableBodyScroll?: boolean | undefined;

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;AA0G/C;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;0BAlGL,MAAM;2BACL,MAAM,IAAI;oCACD,OAAO,KAAK,IAAI;gDACJ,eAAe,qBAAqB,KAAK,IAAI;qCACxD;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;8BAChC,OAAO,KAAK,IAAI;0BACpB,OAAO;6BACJ,OAAO;oBAChB,OAAO;cACb,OAAO;sBACC,OAAO;gCACG,OAAO;;;mBAGpB,MAAM,GAAG,CAAC,WAAW,CAAC;iBACxB,MAAM;iBACN,MAAM,GAAG,CAAC,cAAc,CAAC;oBACtB,MAAM;0BACA,MAAM,GAAG,CAAC,cAAc,CAAC;yBAC1B,MAAM;kBACb,MAAM;qCACa,MAAM,KAAK,IAAI;iCACnB,OAAO,KAAK,IAAI;4BACrB,OAAO,KAAK,IAAI;6BACf,MAAM,KAAK,IAAI;uCACL,MAAM,KAAK,IAAI;kBACpC,MAAM;kBACN,MAAM;wBACA,MAAM;wBACN,MAAM;wBACN,eAAe,kBAAkB;4BAC7B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmE8B,CAAC;AAM/D,eAAO,MAAM,iBAAiB;cAHlB,MAAM,SAAS;4CA0a1B,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;AAkGhF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;0BApGL,MAAM;2BACL,MAAM,IAAI;oCACD,OAAO,KAAK,IAAI;gDACJ,eAAe,qBAAqB,KAAK,IAAI;qCACxD;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;8BAChC,OAAO,KAAK,IAAI;0BACpB,OAAO;6BACJ,OAAO;oBAChB,OAAO;cACb,OAAO;sBACC,OAAO;gCACG,OAAO;;iBAEtB,OAAO;mBACL,MAAM,GAAG,CAAC,WAAW,CAAC;iBACxB,MAAM;iBACN,MAAM,GAAG,CAAC,cAAc,CAAC;oBACtB,MAAM;0BACA,MAAM,GAAG,CAAC,cAAc,CAAC;yBAC1B,MAAM;kBACb,MAAM;qCACa,MAAM,KAAK,IAAI;iCACnB,OAAO,KAAK,IAAI;4BACrB,OAAO,KAAK,IAAI;6BACf,MAAM,KAAK,IAAI;uCACL,MAAM,KAAK,IAAI;kBACpC,MAAM;kBACN,MAAM;wBACA,MAAM;wBACN,MAAM;wBACN,eAAe,kBAAkB;4BAC7B,MAAM;uBACX,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEwB,CAAC;AAM/D,eAAO,MAAM,iBAAiB;cAHlB,MAAM,SAAS;4CA8a1B,CAAC"}

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

@@ -12,6 +12,7 @@ import styles from './styles.css.js';
 import { isDevelopment } from '../../internal/is-development';
 import { warnOnce } from '../../internal/logging';
 import { applyDefaults } from '../defaults';
+import { useFocusControl } from '../utils/use-focus-control';
 // TODO simplify default params + typings
 var defaults = {
     breadcrumbs: null,
@@ -68,7 +69,8 @@ var defaults = {
     splitPanelReportedSize: 0,
     splitPanelSize: 0,
     stickyNotifications: false,
-    tools: null
+    tools: null,
+    toolsFocusControl: {}
 };
 /**
  * The default values are destructured in the context instantiation to
@@ -139,6 +141,7 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
     var toolsWidth = (_d = props.toolsWidth) !== null && _d !== void 0 ? _d : 290;
     var hasDefaultToolsWidth = props.toolsWidth === undefined;
     var _l = useControllable(controlledToolsOpen, props.onToolsChange, isMobile ? false : contentTypeDefaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }), _m = _l[0], isToolsOpen = _m === void 0 ? false : _m, setIsToolsOpen = _l[1];
+    var toolsFocusControl = useFocusControl(isToolsOpen, true);
     var handleToolsClick = useCallback(function handleToolsChange(isOpen) {
         setIsToolsOpen(isOpen);
         fireNonCancelableEvent(props.onToolsChange, { open: isOpen });
@@ -177,9 +180,10 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
             },
             openTools: function () {
                 handleToolsClick(true);
-            }
+            },
+            focusToolsClose: toolsFocusControl.setFocus
         };
-    }, [isMobile, handleNavigationClick, handleToolsClick]);
+    }, [isMobile, handleNavigationClick, handleToolsClick, toolsFocusControl.setFocus]);
     /**
      * Query the DOM for the header and footer elements based on the selectors provided
      * by the properties and pass the heights to the custom property definitions.
@@ -340,6 +344,6 @@ export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
      * within the AppLayout, or both.
      */
     var _1 = useState(0), offsetBottom = _1[0], setOffsetBottom = _1[1];
-    return (React.createElement(AppLayoutContext.Provider, { value: __assign(__assign(__assign({}, defaults), props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, 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, setOffsetBottom: setOffsetBottom, setSplitPanelReportedSize: setSplitPanelReportedSize, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth }) }, children));
+    return (React.createElement(AppLayoutContext.Provider, { value: __assign(__assign(__assign({}, defaults), props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, headerHeight: headerHeight, footerHeight: footerHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, 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, setOffsetBottom: setOffsetBottom, setSplitPanelReportedSize: setSplitPanelReportedSize, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth, toolsFocusControl: toolsFocusControl }) }, children));
 });
 //# sourceMappingURL=context.js.map

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  createRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\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, useResizeObserver } 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';\n\ninterface AppLayoutContextProps 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  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  setIsNavigationOpen: (value: boolean) => void;\n  setIsToolsOpen: (value: boolean) => void;\n  setOffsetBottom: (value: number) => void;\n  setSplitPanelReportedSize: (value: number) => void;\n  headerHeight: number;\n  footerHeight: number;\n  splitPanelMaxWidth: number;\n  splitPanelMinWidth: number;\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n  splitPanelReportedSize: number;\n}\n\n// TODO simplify default params + typings\nconst defaults: AppLayoutContextProps = {\n  breadcrumbs: null,\n  content: null,\n  contentHeader: null,\n  contentType: 'default',\n  disableBodyScroll: false,\n  disableContentHeaderOverlap: false,\n  disableContentPaddings: false,\n  dynamicOverlapHeight: 0,\n  headerHeight: 0,\n  footerHeight: 0,\n  handleNavigationClick: (value: boolean) => value,\n  handleSplitPanelClick: () => {},\n  handleSplitPanelPreferencesChange: () => {},\n  handleSplitPanelResize: () => {},\n  handleToolsClick: (value: boolean) => value,\n  hasDefaultToolsWidth: true,\n  hasNotificationsContent: false,\n  isAnyPanelOpen: false,\n  isMobile: false,\n  isNavigationOpen: false,\n  isSplitPanelForcedPosition: false,\n  isSplitPanelOpen: false,\n  isToolsOpen: false,\n  // TODO: these refs are currently only instantiated once globally\n  layoutElement: createRef<HTMLElement>(),\n  layoutWidth: 0,\n  mainElement: createRef<HTMLDivElement>(),\n  mainOffsetLeft: 0,\n  maxContentWidth: 0,\n  minContentWidth: 280,\n  navigation: null,\n  navigationHide: false,\n  navigationOpen: false,\n  notifications: null,\n  notificationsElement: createRef<HTMLDivElement>(),\n  notificationsHeight: 0,\n  offsetBottom: 0,\n  onNavigationChange: () => {},\n  onSplitPanelResize: () => {},\n  onSplitPanelToggle: () => {},\n  onSplitPanelPreferencesChange: () => {},\n  setDynamicOverlapHeight: (value: number) => void value,\n  setIsNavigationOpen: (value: boolean) => value,\n  setIsToolsOpen: (value: boolean) => value,\n  setOffsetBottom: (value: number) => void value,\n  setSplitPanelReportedSize: (value: number) => void value,\n  splitPanelMaxWidth: 280,\n  splitPanelMinWidth: 280,\n  splitPanelOpen: false,\n  splitPanelPosition: 'bottom',\n  splitPanelPreferences: { position: 'bottom' },\n  splitPanelReportedSize: 0,\n  splitPanelSize: 0,\n  stickyNotifications: false,\n  tools: null,\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 */\nexport const AppLayoutContext = createContext({ ...defaults });\n\ntype AppLayoutProviderProps = AppLayoutProps & {\n  children: React.ReactNode;\n};\n\nexport const AppLayoutProvider = 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      ...props\n    }: AppLayoutProviderProps,\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     */\n    const [dynamicOverlapHeight, setDynamicOverlapHeight] = useState(0);\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 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        };\n      },\n      [isMobile, handleNavigationClick, handleToolsClick]\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, setHeaderHeight] = useState(0);\n    const getHeader = useCallback(() => document.querySelector(headerSelector), [headerSelector]);\n    useResizeObserver(getHeader, entry => setHeaderHeight(entry.borderBoxHeight));\n\n    const [footerHeight, setFooterHeight] = useState(0);\n    const getFooter = useCallback(() => document.querySelector(footerSelector), [footerSelector]);\n    useResizeObserver(getFooter, entry => setFooterHeight(entry.borderBoxHeight));\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\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     * The offsetBottom value is used to determine the distance from the bottom of the\n     * viewport a sticky element should be placed. A non-zero value means that there\n     * is either a footer outside of the AppLayout, a SplitPanel in the bottom position\n     * within the AppLayout, or both.\n     */\n    const [offsetBottom, setOffsetBottom] = useState(0);\n\n    return (\n      <AppLayoutContext.Provider\n        value={{\n          ...defaults,\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          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          setOffsetBottom,\n          setSplitPanelReportedSize,\n          splitPanelMaxWidth,\n          splitPanelMinWidth,\n          splitPanelPosition,\n          splitPanelPreferences,\n          splitPanelReportedSize,\n          splitPanelSize,\n          toolsHide,\n          toolsOpen: isToolsOpen,\n          toolsWidth,\n        }}\n      >\n        {children}\n      </AppLayoutContext.Provider>\n    );\n  }\n);\n"]}
+{"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  createRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\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, useResizeObserver } 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';\n\ninterface AppLayoutContextProps 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  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  setIsNavigationOpen: (value: boolean) => void;\n  setIsToolsOpen: (value: boolean) => void;\n  setOffsetBottom: (value: number) => void;\n  setSplitPanelReportedSize: (value: number) => void;\n  headerHeight: number;\n  footerHeight: number;\n  splitPanelMaxWidth: number;\n  splitPanelMinWidth: number;\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n  splitPanelReportedSize: number;\n  toolsFocusControl: FocusControlState;\n}\n\n// TODO simplify default params + typings\nconst defaults: AppLayoutContextProps = {\n  breadcrumbs: null,\n  content: null,\n  contentHeader: null,\n  contentType: 'default',\n  disableBodyScroll: false,\n  disableContentHeaderOverlap: false,\n  disableContentPaddings: false,\n  dynamicOverlapHeight: 0,\n  headerHeight: 0,\n  footerHeight: 0,\n  handleNavigationClick: (value: boolean) => value,\n  handleSplitPanelClick: () => {},\n  handleSplitPanelPreferencesChange: () => {},\n  handleSplitPanelResize: () => {},\n  handleToolsClick: (value: boolean) => value,\n  hasDefaultToolsWidth: true,\n  hasNotificationsContent: false,\n  isAnyPanelOpen: false,\n  isMobile: false,\n  isNavigationOpen: false,\n  isSplitPanelForcedPosition: false,\n  isSplitPanelOpen: false,\n  isToolsOpen: false,\n  // TODO: these refs are currently only instantiated once globally\n  layoutElement: createRef<HTMLElement>(),\n  layoutWidth: 0,\n  mainElement: createRef<HTMLDivElement>(),\n  mainOffsetLeft: 0,\n  maxContentWidth: 0,\n  minContentWidth: 280,\n  navigation: null,\n  navigationHide: false,\n  navigationOpen: false,\n  notifications: null,\n  notificationsElement: createRef<HTMLDivElement>(),\n  notificationsHeight: 0,\n  offsetBottom: 0,\n  onNavigationChange: () => {},\n  onSplitPanelResize: () => {},\n  onSplitPanelToggle: () => {},\n  onSplitPanelPreferencesChange: () => {},\n  setDynamicOverlapHeight: (value: number) => void value,\n  setIsNavigationOpen: (value: boolean) => value,\n  setIsToolsOpen: (value: boolean) => value,\n  setOffsetBottom: (value: number) => void value,\n  setSplitPanelReportedSize: (value: number) => void value,\n  splitPanelMaxWidth: 280,\n  splitPanelMinWidth: 280,\n  splitPanelOpen: false,\n  splitPanelPosition: 'bottom',\n  splitPanelPreferences: { position: 'bottom' },\n  splitPanelReportedSize: 0,\n  splitPanelSize: 0,\n  stickyNotifications: false,\n  tools: null,\n  toolsFocusControl: {} as 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 */\nexport const AppLayoutContext = createContext({ ...defaults });\n\ntype AppLayoutProviderProps = AppLayoutProps & {\n  children: React.ReactNode;\n};\n\nexport const AppLayoutProvider = 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      ...props\n    }: AppLayoutProviderProps,\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     */\n    const [dynamicOverlapHeight, setDynamicOverlapHeight] = useState(0);\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, setHeaderHeight] = useState(0);\n    const getHeader = useCallback(() => document.querySelector(headerSelector), [headerSelector]);\n    useResizeObserver(getHeader, entry => setHeaderHeight(entry.borderBoxHeight));\n\n    const [footerHeight, setFooterHeight] = useState(0);\n    const getFooter = useCallback(() => document.querySelector(footerSelector), [footerSelector]);\n    useResizeObserver(getFooter, entry => setFooterHeight(entry.borderBoxHeight));\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\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     * The offsetBottom value is used to determine the distance from the bottom of the\n     * viewport a sticky element should be placed. A non-zero value means that there\n     * is either a footer outside of the AppLayout, a SplitPanel in the bottom position\n     * within the AppLayout, or both.\n     */\n    const [offsetBottom, setOffsetBottom] = useState(0);\n\n    return (\n      <AppLayoutContext.Provider\n        value={{\n          ...defaults,\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          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          setOffsetBottom,\n          setSplitPanelReportedSize,\n          splitPanelMaxWidth,\n          splitPanelMinWidth,\n          splitPanelPosition,\n          splitPanelPreferences,\n          splitPanelReportedSize,\n          splitPanelSize,\n          toolsHide,\n          toolsOpen: isToolsOpen,\n          toolsWidth,\n          toolsFocusControl,\n        }}\n      >\n        {children}\n      </AppLayoutContext.Provider>\n    );\n  }\n);\n"]}

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

@@ -21,7 +21,7 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  */
 export default function Navigation() {
     var _a = useContext(AppLayoutContext), ariaLabels = _a.ariaLabels, handleNavigationClick = _a.handleNavigationClick, isMobile = _a.isMobile, isNavigationOpen = _a.isNavigationOpen, navigation = _a.navigation, navigationHide = _a.navigationHide, navigationWidth = _a.navigationWidth, isToolsOpen = _a.isToolsOpen, isAnyPanelOpen = _a.isAnyPanelOpen, toolsHide = _a.toolsHide;
-    var focusRefs = useFocusControl(isNavigationOpen);
+    var focusRefs = useFocusControl(isNavigationOpen).refs;
     if (navigationHide) {
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    isAnyPanelOpen,\n    toolsHide,\n  } = useContext(AppLayoutContext);\n\n  const focusRefs = useFocusControl(isNavigationOpen);\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={focusRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={clsx(styles['animated-content'])}>\n              <div className={clsx(styles['hide-navigation'])}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={focusRefs.close}\n                  ariaExpanded={true}\n                  __nativeAttributes={{ 'aria-haspopup': true }}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    isAnyPanelOpen,\n    toolsHide,\n  } = useContext(AppLayoutContext);\n\n  const { refs: focusRefs } = useFocusControl(isNavigationOpen);\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={focusRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={clsx(styles['animated-content'])}>\n              <div className={clsx(styles['hide-navigation'])}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={focusRefs.close}\n                  ariaExpanded={true}\n                  __nativeAttributes={{ 'aria-haspopup': true }}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

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

@@ -16,9 +16,9 @@ export default function Notifications() {
     if (!notifications) {
         return null;
     }
-    return (React.createElement("div", { "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.notifications, (_a = {},
+    return (React.createElement("div", { role: "region", "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.notifications, (_a = {},
             _a[styles['has-notifications-content']] = hasNotificationsContent,
             _a[styles['sticky-notifications']] = stickyNotifications,
-            _a), testutilStyles.notifications, 'awsui-context-content-header'), role: "region", ref: notificationsElement }, notifications));
+            _a), testutilStyles.notifications, 'awsui-context-content-header'), ref: notificationsElement }, notifications));
 }
 //# sourceMappingURL=notifications.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;;;IAC7B,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,UAAU,gBAAA,EAAE,uBAAuB,6BAAA,EAAE,aAAa,mBAAA,EAAE,oBAAoB,0BAAA,EAAE,mBAAmB,yBACvE,CAAC;IAE/B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa;YAElB,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;iBAEvD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B,EACD,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,oBAAoB,IAExB,aAAa,CACV,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Notifications() {\n  const { ariaLabels, hasNotificationsContent, notifications, notificationsElement, stickyNotifications } =\n    useContext(AppLayoutContext);\n\n  if (!notifications) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n      role=\"region\"\n      ref={notificationsElement}\n    >\n      {notifications}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;;;IAC7B,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,UAAU,gBAAA,EAAE,uBAAuB,6BAAA,EAAE,aAAa,mBAAA,EAAE,oBAAoB,0BAAA,EAAE,mBAAmB,yBACvE,CAAC;IAE/B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa;YAElB,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;iBAEvD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B,EACD,GAAG,EAAE,oBAAoB,IAExB,aAAa,CACV,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Notifications() {\n  const { ariaLabels, hasNotificationsContent, notifications, notificationsElement, stickyNotifications } =\n    useContext(AppLayoutContext);\n\n  if (!notifications) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n      ref={notificationsElement}\n    >\n      {notifications}\n    </div>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAa1C,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBA6HrD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,WAU/E"}
+{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBAmIrD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,WAU/E"}

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

@@ -9,7 +9,6 @@ import TriggerButton from './trigger-button';
 import styles from './styles.css.js';
 import splitPanelStyles from '../../split-panel/styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
-import { useFocusControl } from '../utils/use-focus-control';
 import { Transition } from '../../internal/components/transition';
 import customCssProps from '../../internal/generated/custom-css-properties';
 /**
@@ -22,12 +21,12 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  */
 export default function Tools(_a) {
     var children = _a.children;
-    var _b = useContext(AppLayoutContext), ariaLabels = _b.ariaLabels, handleSplitPanelClick = _b.handleSplitPanelClick, handleToolsClick = _b.handleToolsClick, hasDefaultToolsWidth = _b.hasDefaultToolsWidth, isNavigationOpen = _b.isNavigationOpen, isMobile = _b.isMobile, isSplitPanelOpen = _b.isSplitPanelOpen, isToolsOpen = _b.isToolsOpen, splitPanel = _b.splitPanel, tools = _b.tools, toolsHide = _b.toolsHide, toolsWidth = _b.toolsWidth, isAnyPanelOpen = _b.isAnyPanelOpen, navigationHide = _b.navigationHide;
+    var _b = useContext(AppLayoutContext), ariaLabels = _b.ariaLabels, handleSplitPanelClick = _b.handleSplitPanelClick, handleToolsClick = _b.handleToolsClick, hasDefaultToolsWidth = _b.hasDefaultToolsWidth, isNavigationOpen = _b.isNavigationOpen, isMobile = _b.isMobile, isSplitPanelOpen = _b.isSplitPanelOpen, isToolsOpen = _b.isToolsOpen, splitPanel = _b.splitPanel, tools = _b.tools, toolsHide = _b.toolsHide, toolsWidth = _b.toolsWidth, isAnyPanelOpen = _b.isAnyPanelOpen, navigationHide = _b.navigationHide, toolsFocusControl = _b.toolsFocusControl;
     var _c = useContext(SplitPanelContext), splitPanelPosition = _c.position, openButtonAriaLabel = _c.openButtonAriaLabel;
     var hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);
     var hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
     var hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
-    var focusRefs = useFocusControl(isToolsOpen);
+    var focusRefs = toolsFocusControl.refs;
     if (toolsHide && !hasSplitPanel) {
         return null;
     }
@@ -42,7 +41,11 @@ export default function Tools(_a) {
                 _b[customCssProps.toolsAnimationStartingOpacity] = "".concat(hasSplitPanel && isSplitPanelOpen ? 1 : 0),
                 // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.
                 _b[customCssProps.toolsWidth] = hasDefaultToolsWidth ? '' : "".concat(toolsWidth, "px"),
-                _b) },
+                _b), onBlur: function (e) {
+                if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                    toolsFocusControl.loseFocus();
+                }
+            } },
             children,
             !toolsHide && (React.createElement("aside", { "aria-hidden": !isToolsOpen ? true : false, "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _e !== void 0 ? _e : undefined, className: clsx(styles.tools, (_c = {},
                     _c[styles.animating] = state === 'entering',

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

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, openButtonAriaLabel } = useContext(SplitPanelContext);\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const focusRefs = useFocusControl(isToolsOpen);\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                    ariaExpanded={true}\n                    __nativeAttributes={{ 'aria-haspopup': true }}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && (\n                <TriggerButton\n                  ariaLabel={openButtonAriaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanel: React.ReactNode, splitPanelPosition: string) {\n  return splitPanel && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n    toolsFocusControl,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, openButtonAriaLabel } = useContext(SplitPanelContext);\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const { refs: focusRefs } = toolsFocusControl;\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              toolsFocusControl.loseFocus();\n            }\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                    ariaExpanded={true}\n                    __nativeAttributes={{ 'aria-haspopup': true }}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && (\n                <TriggerButton\n                  ariaLabel={openButtonAriaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanel: React.ReactNode, splitPanelPosition: string) {\n  return splitPanel && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}

package/date-range-picker/calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAU7D,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB;AAED,oBAAY,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAMjD,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IACvE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;CACvB;;AAED,wBAAoC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB;AAED,oBAAY,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAMjD,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IACvE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;CACvB;;AAED,wBAAoC"}