@cloudscape-design/components 3.0.1061 → 3.0.1063

package/app-layout/utils/use-focus-control.d.ts

@@ -22,4 +22,5 @@ export interface FocusControlMultipleStates {
   loseFocus: () => void;
 }
 export declare function useMultipleFocusControl(restoreFocus: boolean, activeDrawersIds: Array<string>): FocusControlMultipleStates;
-export declare function useFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;
+export declare function useFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;
+export declare function useAsyncFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;

package/app-layout/utils/use-focus-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,CAgE5B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAmDnB"}
+{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,CAmE5B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAmDnB;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAuDnB"}

package/app-layout/utils/use-focus-control.js

@@ -14,9 +14,6 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
     });
     const doFocus = useCallback((drawerId, open = true) => {
         var _a, _b, _c, _d, _e, _f;
-        if (!shouldFocus.current) {
-            return;
-        }
         const ref = refs.current[drawerId];
         if (open) {
             previousFocusedElement.current =
@@ -37,14 +34,15 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
                 (_f = (_e = ref === null || ref === void 0 ? void 0 : ref.toggle) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.focus();
             }
         }
-        shouldFocus.current = false;
     }, [refs, restoreFocus]);
     const setFocus = (params) => {
         const { force = false, drawerId = null, open = true } = params || {};
-        shouldFocus.current = true;
         if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {
             doFocus(drawerId, open);
         }
+        else {
+            shouldFocus.current = true;
+        }
     };
     const loseFocus = useCallback(() => {
         previousFocusedElement.current = undefined;
@@ -52,7 +50,13 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
     const previousFocusedElement = useRef();
     const shouldFocus = useRef(false);
     useEffect(() => {
-        doFocus(activeDrawersIds[0]);
+        const drawerId = activeDrawersIds[0];
+        if (shouldFocus.current) {
+            Promise.resolve().then(() => {
+                doFocus(drawerId);
+                shouldFocus.current = false;
+            });
+        }
     }, [activeDrawersIds, doFocus]);
     return {
         refs: refs.current,
@@ -111,4 +115,60 @@ export function useFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
         loseFocus,
     };
 }
+export function useAsyncFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
+    const refs = {
+        toggle: useRef(null),
+        close: useRef(null),
+        slider: useRef(null),
+    };
+    const previousFocusedElement = useRef();
+    const shouldFocus = useRef(false);
+    const doFocus = () => {
+        var _a, _b, _c;
+        if (isOpen) {
+            previousFocusedElement.current =
+                document.activeElement !== document.body ? document.activeElement : undefined;
+            if (refs.slider.current) {
+                (_a = refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = refs.close.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+        else {
+            if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
+                previousFocusedElement.current.focus();
+                previousFocusedElement.current = undefined;
+            }
+            else {
+                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }
+    };
+    const setFocus = (force) => {
+        if (force && isOpen) {
+            doFocus();
+        }
+        else {
+            shouldFocus.current = true;
+        }
+    };
+    useEffect(() => {
+        if (shouldFocus.current) {
+            Promise.resolve().then(() => {
+                doFocus();
+                shouldFocus.current = false;
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen, activeDrawerId]);
+    const loseFocus = useCallback(() => {
+        previousFocusedElement.current = undefined;
+    }, []);
+    return {
+        refs,
+        setFocus,
+        loseFocus,
+    };
+}
 //# sourceMappingURL=use-focus-control.js.map

package/app-layout/utils/use-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"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 { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n  focus(): void;\n}\n\nexport interface FocusControlRefs {\n  toggle: RefObject<Focusable>;\n  close: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n  refs: FocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n  refs: Record<string, FocusControlRefs>;\n  setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n  loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n  restoreFocus: boolean,\n  activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n  const refs = useRef<Record<string, FocusControlRefs>>({});\n\n  activeDrawersIds.forEach(drawerId => {\n    if (!refs.current[drawerId]) {\n      refs.current[drawerId] = {\n        toggle: createRef<Focusable>(),\n        close: createRef<Focusable>(),\n        slider: createRef<HTMLDivElement>(),\n      };\n    }\n  });\n\n  const doFocus = useCallback(\n    (drawerId: string, open = true) => {\n      if (!shouldFocus.current) {\n        return;\n      }\n      const ref = refs.current[drawerId];\n      if (open) {\n        previousFocusedElement.current =\n          document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n        if (ref?.slider?.current) {\n          ref.slider.current?.focus();\n        } else {\n          ref?.close?.current?.focus();\n        }\n      } else {\n        if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n          previousFocusedElement.current.focus();\n          previousFocusedElement.current = undefined;\n        } else {\n          ref?.toggle?.current?.focus();\n        }\n      }\n      shouldFocus.current = false;\n    },\n    [refs, restoreFocus]\n  );\n\n  const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n    const { force = false, drawerId = null, open = true } = params || {};\n    shouldFocus.current = true;\n    if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n      doFocus(drawerId!, open);\n    }\n  };\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  useEffect(() => {\n    doFocus(activeDrawersIds[0]);\n  }, [activeDrawersIds, doFocus]);\n\n  return {\n    refs: refs.current,\n    setFocus,\n    loseFocus,\n  };\n}\n\nexport function useFocusControl(\n  isOpen: boolean,\n  restoreFocus = false,\n  activeDrawerId?: string | null\n): FocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    close: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      if (refs.slider.current) {\n        refs.slider.current?.focus();\n      } else {\n        refs.close.current?.focus();\n      }\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  const setFocus = (force?: boolean) => {\n    shouldFocus.current = true;\n    if (force && isOpen) {\n      doFocus();\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen, activeDrawerId]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus,\n    loseFocus,\n  };\n}\n"]}
+{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAwB7E,MAAM,UAAU,uBAAuB,CACrC,YAAqB,EACrB,gBAA+B;IAE/B,MAAM,IAAI,GAAG,MAAM,CAAmC,EAAE,CAAC,CAAC;IAE1D,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG;gBACvB,MAAM,EAAE,SAAS,EAAa;gBAC9B,KAAK,EAAE,SAAS,EAAa;gBAC7B,MAAM,EAAE,SAAS,EAAkB;aACpC,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,QAAgB,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;;QAChC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,IAAI,EAAE;YACR,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,0CAAE,OAAO,EAAE;gBACxB,MAAA,GAAG,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;iBAAM;gBACL,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,0CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,0CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF;IACH,CAAC,EACD,CAAC,IAAI,EAAE,YAAY,CAAC,CACrB,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,MAA+D,EAAE,EAAE;QACnF,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;QACrE,IAAI,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE;YAC/D,OAAO,CAAC,QAAS,EAAE,IAAI,CAAC,CAAC;SAC1B;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAClB,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,MAAe,EACf,YAAY,GAAG,KAAK,EACpB,cAA8B;IAE9B,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAY,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;iBAAM;gBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE;QACnC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAAe,EACf,YAAY,GAAG,KAAK,EACpB,cAA8B;IAE9B,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAY,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;iBAAM;gBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE;QACnC,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,EAAE,CAAC;SACX;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,CAAC;gBACV,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,CAAC,CAAC,CAAC;SACJ;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n  focus(): void;\n}\n\nexport interface FocusControlRefs {\n  toggle: RefObject<Focusable>;\n  close: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n  refs: FocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n  refs: Record<string, FocusControlRefs>;\n  setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n  loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n  restoreFocus: boolean,\n  activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n  const refs = useRef<Record<string, FocusControlRefs>>({});\n\n  activeDrawersIds.forEach(drawerId => {\n    if (!refs.current[drawerId]) {\n      refs.current[drawerId] = {\n        toggle: createRef<Focusable>(),\n        close: createRef<Focusable>(),\n        slider: createRef<HTMLDivElement>(),\n      };\n    }\n  });\n\n  const doFocus = useCallback(\n    (drawerId: string, open = true) => {\n      const ref = refs.current[drawerId];\n      if (open) {\n        previousFocusedElement.current =\n          document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n        if (ref?.slider?.current) {\n          ref.slider.current?.focus();\n        } else {\n          ref?.close?.current?.focus();\n        }\n      } else {\n        if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n          previousFocusedElement.current.focus();\n          previousFocusedElement.current = undefined;\n        } else {\n          ref?.toggle?.current?.focus();\n        }\n      }\n    },\n    [refs, restoreFocus]\n  );\n\n  const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n    const { force = false, drawerId = null, open = true } = params || {};\n    if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n      doFocus(drawerId!, open);\n    } else {\n      shouldFocus.current = true;\n    }\n  };\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  useEffect(() => {\n    const drawerId = activeDrawersIds[0];\n    if (shouldFocus.current) {\n      Promise.resolve().then(() => {\n        doFocus(drawerId);\n        shouldFocus.current = false;\n      });\n    }\n  }, [activeDrawersIds, doFocus]);\n\n  return {\n    refs: refs.current,\n    setFocus,\n    loseFocus,\n  };\n}\n\nexport function useFocusControl(\n  isOpen: boolean,\n  restoreFocus = false,\n  activeDrawerId?: string | null\n): FocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    close: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      if (refs.slider.current) {\n        refs.slider.current?.focus();\n      } else {\n        refs.close.current?.focus();\n      }\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  const setFocus = (force?: boolean) => {\n    shouldFocus.current = true;\n    if (force && isOpen) {\n      doFocus();\n    }\n  };\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen, activeDrawerId]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus,\n    loseFocus,\n  };\n}\n\nexport function useAsyncFocusControl(\n  isOpen: boolean,\n  restoreFocus = false,\n  activeDrawerId?: string | null\n): FocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    close: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n\n  const doFocus = () => {\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      if (refs.slider.current) {\n        refs.slider.current?.focus();\n      } else {\n        refs.close.current?.focus();\n      }\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n  };\n\n  const setFocus = (force?: boolean) => {\n    if (force && isOpen) {\n      doFocus();\n    } else {\n      shouldFocus.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (shouldFocus.current) {\n      Promise.resolve().then(() => {\n        doFocus();\n        shouldFocus.current = false;\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, activeDrawerId]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus,\n    loseFocus,\n  };\n}\n"]}

package/app-layout/utils/use-split-panel-focus-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA4BnG"}
+{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA8BnG"}

package/app-layout/utils/use-split-panel-focus-control.js

@@ -9,19 +9,21 @@ export function useSplitPanelFocusControl(dependencies) {
     };
     const lastInteraction = useRef(null);
     useEffect(() => {
-        var _a, _b, _c, _d;
-        switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
-            case 'open':
-                (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
-                break;
-            case 'close':
-                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
-                break;
-            case 'position':
-                (_d = refs.preferences.current) === null || _d === void 0 ? void 0 : _d.focus();
-                break;
-        }
-        lastInteraction.current = null;
+        Promise.resolve().then(() => {
+            var _a, _b, _c, _d;
+            switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'open':
+                    (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    break;
+                case 'close':
+                    (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    break;
+                case 'position':
+                    (_d = refs.preferences.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    break;
+            }
+            lastInteraction.current = null;
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencies);
     return {

package/app-layout/utils/use-split-panel-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,UAAU;gBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n  toggle: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n  preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n  refs: SplitPanelFocusControlRefs;\n  setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n    preferences: useRef<Focusable>(null),\n  };\n  const lastInteraction = useRef<SplitPanelLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        refs.slider.current?.focus();\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n      case 'position':\n        refs.preferences.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return {\n    refs,\n    setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}
+{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;;YAC1B,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;gBACrC,KAAK,MAAM;oBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC7B,MAAM;gBACR,KAAK,OAAO;oBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC7B,MAAM;gBACR,KAAK,UAAU;oBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAClC,MAAM;aACT;YACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n  toggle: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n  preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n  refs: SplitPanelFocusControlRefs;\n  setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n    preferences: useRef<Focusable>(null),\n  };\n  const lastInteraction = useRef<SplitPanelLastInteraction | null>(null);\n\n  useEffect(() => {\n    Promise.resolve().then(() => {\n      switch (lastInteraction.current?.type) {\n        case 'open':\n          refs.slider.current?.focus();\n          break;\n        case 'close':\n          refs.toggle.current?.focus();\n          break;\n        case 'position':\n          refs.preferences.current?.focus();\n          break;\n      }\n      lastInteraction.current = null;\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return {\n    refs,\n    setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}

package/app-layout/visual-refresh-toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAajG,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAc/C,OAAO,EAAE,sBAAsB,EAAsB,MAAM,cAAc,CAAC;AAa1E,QAAA,MAAM,6BAA6B,mGAwgBlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAyB,MAAM,cAAc,CAAC;AAqD7E,QAAA,MAAM,6BAA6B,mGAgClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

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

@@ -1,359 +1,46 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { useMergeRefs, useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
-import { fireNonCancelableEvent } from '../../internal/events';
-import { useControllable } from '../../internal/hooks/use-controllable';
-import { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';
-import { useMobile } from '../../internal/hooks/use-mobile';
-import { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';
-import globalVars from '../../internal/styles/global-vars';
-import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
-import { MIN_DRAWER_SIZE, useDrawers } from '../utils/use-drawers';
-import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';
-import { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';
-import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
-import { ActiveDrawersContext } from '../utils/visibility-context';
-import { computeHorizontalLayout, computeSplitPanelOffsets, computeVerticalLayout, CONTENT_PADDING, } from './compute-layout';
 import { AppLayoutVisibilityContext } from './contexts';
-import { AppLayoutDrawer, AppLayoutGlobalDrawers, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
-import { useMultiAppLayout } from './multi-layout';
+import { AppLayoutWidgetizedState } from './internal';
 import { SkeletonLayout } from './skeleton';
-const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
-    var _b, _c;
-    var { ariaLabels, contentHeader, content, navigationOpen, navigationWidth, navigation, navigationHide, onNavigationChange, tools, toolsOpen: controlledToolsOpen, onToolsChange, toolsHide, toolsWidth, contentType, headerVariant, breadcrumbs, notifications, stickyNotifications, splitPanelPreferences: controlledSplitPanelPreferences, splitPanelOpen: controlledSplitPanelOpen, splitPanel, splitPanelSize: controlledSplitPanelSize, onSplitPanelToggle, onSplitPanelResize, onSplitPanelPreferencesChange, disableContentPaddings, minContentWidth, maxContentWidth, placement, navigationTriggerHide } = _a, rest = __rest(_a, ["ariaLabels", "contentHeader", "content", "navigationOpen", "navigationWidth", "navigation", "navigationHide", "onNavigationChange", "tools", "toolsOpen", "onToolsChange", "toolsHide", "toolsWidth", "contentType", "headerVariant", "breadcrumbs", "notifications", "stickyNotifications", "splitPanelPreferences", "splitPanelOpen", "splitPanel", "splitPanelSize", "onSplitPanelToggle", "onSplitPanelResize", "onSplitPanelPreferencesChange", "disableContentPaddings", "minContentWidth", "maxContentWidth", "placement", "navigationTriggerHide"]);
-    const isMobile = useMobile();
-    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest;
-    const splitPanelControlId = useUniqueId('split-panel');
-    const [toolbarState, setToolbarState] = useState('show');
-    const [toolbarHeight, setToolbarHeight] = useState(0);
-    const [notificationsHeight, setNotificationsHeight] = useState(0);
-    const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);
-    const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);
-    const [isNested, setIsNested] = useState(false);
-    const rootRef = useRef(null);
-    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {
-        componentName: 'AppLayout',
-        controlledProp: 'toolsOpen',
-        changeHandler: 'onToolsChange',
-    });
-    const onToolsToggle = (open) => {
-        setToolsOpen(open);
-        drawersFocusControl.setFocus();
-        fireNonCancelableEvent(onToolsChange, { open });
-    };
-    const onGlobalDrawerFocus = (drawerId, open) => {
-        globalDrawersFocusControl.setFocus({ force: true, drawerId, open });
-    };
-    const onAddNewActiveDrawer = (drawerId) => {
-        var _a, _b;
-        // If a local drawer is already open, and we attempt to open a new one,
-        // it will replace the existing one instead of opening an additional drawer,
-        // since only one local drawer is supported. Therefore, layout calculations are not necessary.
-        if (activeDrawer && (drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === drawerId))) {
-            return;
-        }
-        // get the size of drawerId. it could be either local or global drawer
-        const combinedDrawers = [...(drawers || []), ...globalDrawers];
-        const newDrawer = combinedDrawers.find(drawer => drawer.id === drawerId);
-        if (!newDrawer) {
-            return;
-        }
-        const newDrawerSize = Math.min((_b = (_a = newDrawer.defaultSize) !== null && _a !== void 0 ? _a : drawerSizes[drawerId]) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        //   check if the active drawers could be resized to fit the new drawers
-        //   to do this, we need to take all active drawers, sum up their min sizes, truncate it from resizableSpaceAvailable
-        //   and compare a given number with the new drawer id min size
-        // the total size of all global drawers resized to their min size
-        const availableSpaceForNewDrawer = resizableSpaceAvailable - totalActiveDrawersMinSize;
-        if (availableSpaceForNewDrawer >= newDrawerSize) {
-            return;
-        }
-        // now we made sure we cannot accommodate the new drawer with existing ones
-        closeFirstDrawer();
-    };
-    const { drawers, activeDrawer, minDrawerSize, minGlobalDrawersSizes, activeDrawerSize, ariaLabelsWithDrawers, globalDrawers, activeGlobalDrawers, activeGlobalDrawersIds, activeGlobalDrawersSizes, drawerSizes, drawersOpenQueue, onActiveDrawerChange, onActiveDrawerResize, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, } = useDrawers(Object.assign(Object.assign({}, rest), { onGlobalDrawerFocus, onAddNewActiveDrawer }), ariaLabels, {
-        ariaLabels,
-        toolsHide,
-        toolsOpen,
-        tools,
-        toolsWidth,
-        onToolsToggle,
-    });
-    const onActiveDrawerChangeHandler = (drawerId, params = { initiatedByUserAction: true }) => {
-        onActiveDrawerChange(drawerId, params);
-        drawersFocusControl.setFocus();
-    };
-    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
-        componentName: 'AppLayout',
-        controlledProp: 'splitPanelOpen',
-        changeHandler: 'onSplitPanelToggle',
-    });
-    const onSplitPanelToggleHandler = () => {
-        setSplitPanelAnimationDisabled(false);
-        setSplitPanelOpen(!splitPanelOpen);
-        splitPanelFocusControl.setLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
-        fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
-    };
-    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(controlledSplitPanelPreferences, onSplitPanelPreferencesChange, undefined, {
-        componentName: 'AppLayout',
-        controlledProp: 'splitPanelPreferences',
-        changeHandler: 'onSplitPanelPreferencesChange',
-    });
-    const onSplitPanelPreferencesChangeHandler = (detail) => {
-        setSplitPanelPreferences(detail);
-        splitPanelFocusControl.setLastInteraction({ type: 'position' });
-        fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);
-    };
-    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(controlledSplitPanelSize, onSplitPanelResize, getSplitPanelDefaultSize((_b = splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== null && _b !== void 0 ? _b : 'bottom'), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' });
-    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
-    const [splitPanelHeaderBlockSize, setSplitPanelHeaderBlockSize] = useState(0);
-    const onSplitPanelResizeHandler = (size) => {
-        setSplitPanelSize(size);
-        fireNonCancelableEvent(onSplitPanelResize, { size });
-    };
-    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState({
-        ariaLabel: undefined,
-        displayed: false,
-    });
-    const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
-    const drawersFocusControl = useFocusControl(!!(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id), true, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id);
-    const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);
-    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
-    const onNavigationToggle = useStableCallback((open) => {
-        setNavigationAnimationDisabled(false);
-        navigationFocusControl.setFocus();
-        fireNonCancelableEvent(onNavigationChange, { open });
-    });
-    useImperativeHandle(forwardRef, () => ({
-        closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),
-        openTools: () => onToolsToggle(true),
-        focusToolsClose: () => drawersFocusControl.setFocus(true),
-        focusActiveDrawer: () => drawersFocusControl.setFocus(true),
-        focusSplitPanel: () => { var _a; return (_a = splitPanelFocusControl.refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        focusNavigation: () => navigationFocusControl.setFocus(true),
-    }));
-    const resolvedStickyNotifications = !!stickyNotifications && !isMobile;
-    //navigation must be null if hidden so toolbar knows to hide the toggle button
-    const resolvedNavigation = navigationHide ? null : navigation || React.createElement(React.Fragment, null);
-    //navigation must not be open if navigationHide is true
-    const resolvedNavigationOpen = !!resolvedNavigation && navigationOpen;
-    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition, maxGlobalDrawersSizes, resizableSpaceAvailable, } = computeHorizontalLayout({
-        activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
-        splitPanelSize,
-        minContentWidth,
-        navigationOpen: resolvedNavigationOpen,
-        navigationWidth,
-        placement,
-        splitPanelOpen,
-        splitPanelPosition: splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position,
-        isMobile,
-        activeGlobalDrawersSizes,
-    });
-    const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
-    const { registered, toolbarProps } = useMultiAppLayout({
-        forceDeduplicationType,
-        ariaLabels: ariaLabelsWithDrawers,
-        navigation: resolvedNavigation && !navigationTriggerHide,
-        navigationOpen: resolvedNavigationOpen,
-        onNavigationToggle,
-        navigationFocusRef: navigationFocusControl.refs.toggle,
-        breadcrumbs,
-        activeDrawerId: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _c !== void 0 ? _c : null,
-        // only pass it down if there are non-empty drawers or tools
-        drawers: (drawers === null || drawers === void 0 ? void 0 : drawers.length) || !toolsHide ? drawers : undefined,
-        globalDrawersFocusControl,
-        globalDrawers: (globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.length) ? globalDrawers : undefined,
-        activeGlobalDrawersIds,
-        onActiveGlobalDrawersChange,
-        onActiveDrawerChange: onActiveDrawerChangeHandler,
-        drawersFocusRef: drawersFocusControl.refs.toggle,
-        splitPanel,
-        splitPanelToggleProps: Object.assign(Object.assign({}, splitPanelToggleConfig), { active: splitPanelOpen, controlId: splitPanelControlId, position: splitPanelPosition }),
-        splitPanelFocusRef: splitPanelFocusControl.refs.toggle,
-        onSplitPanelToggle: onSplitPanelToggleHandler,
-        expandedDrawerId,
-        setExpandedDrawerId,
-    }, isIntersecting);
-    const hasToolbar = !embeddedViewMode && !!toolbarProps;
-    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar && !breadcrumbs);
-    const verticalOffsets = computeVerticalLayout({
-        topOffset: placement.insetBlockStart,
-        hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',
-        notificationsHeight: notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0,
-        toolbarHeight: toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : 0,
-        stickyNotifications: resolvedStickyNotifications,
-    });
-    useGlobalScrollPadding(verticalOffsets.header);
-    const appLayoutInternals = {
-        ariaLabels: ariaLabelsWithDrawers,
-        headerVariant,
-        isMobile,
-        breadcrumbs,
-        discoveredBreadcrumbs,
-        stickyNotifications: resolvedStickyNotifications,
-        navigationOpen: resolvedNavigationOpen,
-        navigation: resolvedNavigation,
-        navigationFocusControl,
-        activeDrawer,
-        activeDrawerSize,
-        minDrawerSize,
-        maxDrawerSize,
-        minGlobalDrawersSizes,
-        maxGlobalDrawersSizes,
-        drawers: drawers,
-        globalDrawers,
-        activeGlobalDrawers,
-        activeGlobalDrawersIds,
-        activeGlobalDrawersSizes,
-        onActiveGlobalDrawersChange,
-        drawersFocusControl,
-        globalDrawersFocusControl,
-        splitPanelPosition,
-        splitPanelToggleConfig,
-        splitPanelOpen,
-        splitPanelControlId,
-        splitPanelFocusControl,
-        placement,
-        toolbarState,
-        setToolbarState,
-        verticalOffsets,
-        drawersOpenQueue,
-        setToolbarHeight,
-        setNotificationsHeight,
-        onSplitPanelToggle: onSplitPanelToggleHandler,
-        onNavigationToggle,
-        onActiveDrawerChange: onActiveDrawerChangeHandler,
-        onActiveDrawerResize,
-        splitPanelAnimationDisabled,
-        expandedDrawerId,
-        setExpandedDrawerId,
-    };
-    const splitPanelInternals = {
-        bottomOffset: 0,
-        getMaxHeight: () => {
-            const availableHeight = document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;
-            // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.
-            return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;
-        },
-        maxWidth: maxSplitPanelSize,
-        isForcedPosition: splitPanelForcedPosition,
-        isOpen: splitPanelOpen,
-        leftOffset: 0,
-        onPreferencesChange: onSplitPanelPreferencesChangeHandler,
-        onResize: onSplitPanelResizeHandler,
-        onToggle: onSplitPanelToggleHandler,
-        position: splitPanelPosition,
-        reportSize: size => setSplitPanelReportedSize(size),
-        reportHeaderHeight: size => setSplitPanelHeaderBlockSize(size),
-        headerHeight: splitPanelHeaderBlockSize,
-        rightOffset: 0,
-        size: splitPanelSize,
-        topOffset: 0,
-        setSplitPanelToggle: setSplitPanelToggleConfig,
-        refs: splitPanelFocusControl.refs,
-    };
-    const closeFirstDrawer = useStableCallback(() => {
-        const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];
-        if (activeDrawer && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) === drawerToClose) {
-            onActiveDrawerChange(null, { initiatedByUserAction: true });
-        }
-        else if (activeGlobalDrawersIds.includes(drawerToClose)) {
-            onActiveGlobalDrawersChange(drawerToClose, { initiatedByUserAction: true });
-        }
-    });
-    useEffect(() => {
-        // Close navigation drawer on mobile so that the main content is visible
-        if (isMobile) {
-            onNavigationToggle(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isMobile]);
-    const getTotalActiveDrawersMinSize = () => {
-        var _a;
-        const combinedDrawers = [...(drawers || []), ...globalDrawers];
-        let result = activeGlobalDrawersIds
-            .map(activeDrawerId => {
-            var _a, _b;
-            return Math.min((_b = (_a = combinedDrawers.find(drawer => drawer.id === activeDrawerId)) === null || _a === void 0 ? void 0 : _a.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        })
-            .reduce((acc, curr) => acc + curr, 0);
-        if (activeDrawer) {
-            result += Math.min((_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _a !== void 0 ? _a : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        }
-        return result;
-    };
-    const totalActiveDrawersMinSize = getTotalActiveDrawersMinSize();
-    useEffect(() => {
-        if (isMobile) {
-            return;
-        }
-        const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;
-        const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;
-        const hasHorizontalScroll = scrollWidth > placement.inlineSize;
-        if (hasHorizontalScroll) {
-            if (!navigationHide && navigationOpen) {
-                onNavigationToggle(false);
-                return;
-            }
-            closeFirstDrawer();
-        }
-    }, [
-        totalActiveDrawersMinSize,
-        closeFirstDrawer,
-        isMobile,
-        navigationHide,
-        navigationOpen,
-        navigationWidth,
-        onNavigationToggle,
-        placement.inlineSize,
-    ]);
-    /**
-     * Returns true if the AppLayout is nested
-     * Does not apply to iframe
-     */
-    const getIsNestedInAppLayout = (element) => {
-        var _a;
-        let currentElement = (_a = element === null || element === void 0 ? void 0 : element.parentElement) !== null && _a !== void 0 ? _a : null;
-        // this traverse is needed only for JSDOM
-        // in real browsers the globalVar will be propagated to all descendants and this loops exits after initial iteration
-        while (currentElement) {
-            if (getComputedStyle(currentElement).getPropertyValue(globalVars.stickyVerticalTopOffset)) {
-                return true;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return false;
-    };
+import { useMultiAppLayout } from './skeleton/multi-layout';
+import { getPropsToMerge, mergeProps } from './state/props-merger';
+const AppLayoutStateProvider = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => {
+    const [appLayoutState, setAppLayoutState] = useState({ isIntersecting: true });
+    const [skeletonAttributes, setSkeletonAttributes] = useState({});
+    // use { fn: } object wrapper to avoid confusion with callback form of setState
+    const [deduplicator, setDeduplicator] = useState({ fn: mergeProps });
+    const [deduplicationProps, setDeduplicationProps] = useState(() => getPropsToMerge(appLayoutProps, appLayoutState));
+    const { registered, toolbarProps } = useMultiAppLayout(forceDeduplicationType, appLayoutState.isIntersecting, deduplicationProps, deduplicator.fn);
     useLayoutEffect(() => {
-        if (!hasToolbar) {
-            setIsNested(getIsNestedInAppLayout(rootRef.current));
-        }
-    }, [hasToolbar]);
-    const splitPanelOffsets = computeSplitPanelOffsets({
-        placement,
-        hasSplitPanel: !!splitPanel,
-        splitPanelOpen,
-        splitPanelPosition,
-        splitPanelFullHeight: splitPanelReportedSize,
-        splitPanelHeaderHeight: splitPanelHeaderBlockSize,
-    });
-    return (React.createElement(AppLayoutVisibilityContext.Provider, { value: isIntersecting },
-        !hasToolbar && breadcrumbs ? React.createElement(ScreenreaderOnly, null, breadcrumbs) : null,
-        React.createElement(SkeletonLayout, { ref: useMergeRefs(intersectionObserverRef, rootRef), isNested: isNested, 
-            // Why not use drawerExpandedMode={!!expandedDrawerId || !!toolbarProps?.expandedDrawerId} instead?
-            // Because in nested layouts, the parent layout hides its main content area,
-            // which means the child layout isn't rendered at all in that case
-            drawerExpandedModeInChildLayout: !!(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.expandedDrawerId), drawerExpandedMode: !!expandedDrawerId, style: Object.assign(Object.assign({ paddingBlockEnd: splitPanelOffsets.mainContentPaddingBlockEnd }, (hasToolbar || !isNested
-                ? {
-                    [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
-                    [globalVars.stickyVerticalBottomOffset]: `${splitPanelOffsets.stickyVerticalBottomOffset}px`,
-                }
-                : {})), (!isMobile ? { minWidth: `${minContentWidth}px` } : {})), toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals, toolbarProps: toolbarProps }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), headerVariant: headerVariant, contentHeader: contentHeader, 
-            // delay rendering the content until registration of this instance is complete
-            content: registered ? content : null, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: resolvedNavigationOpen, navigationWidth: navigationWidth, navigationAnimationDisabled: navigationAnimationDisabled, tools: drawers && drawers.length > 0 && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), globalTools: React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalDrawersIds },
-                React.createElement(AppLayoutGlobalDrawers, { appLayoutInternals: appLayoutInternals })), globalToolsOpen: !!activeGlobalDrawersIds.length, toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings })));
+        stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => {
+            unstable_batchedUpdates(() => {
+                setAppLayoutState(appLayoutState);
+                setSkeletonAttributes(skeletonAttributes);
+                setDeduplicationProps(deduplicationProps);
+                setDeduplicator({ fn: mergeProps });
+            });
+        };
+    }, [stateManager]);
+    const hasToolbar = !!toolbarProps;
+    useEffect(() => {
+        var _a, _b;
+        stateManager.current.hasToolbar = hasToolbar;
+        (_b = (_a = stateManager.current).setToolbar) === null || _b === void 0 ? void 0 : _b.call(_a, hasToolbar);
+    }, [stateManager, hasToolbar]);
+    return React.createElement(React.Fragment, null, children(registered, appLayoutState, toolbarProps, skeletonAttributes));
+};
+const AppLayoutVisualRefreshToolbar = React.forwardRef((props, forwardRef) => {
+    const stateManager = useRef({ setState: undefined, hasToolbar: true, setToolbar: undefined });
+    const { __forceDeduplicationType: forceDeduplicationType, __embeddedViewMode: embeddedViewMode } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AppLayoutStateProvider, { forceDeduplicationType: forceDeduplicationType, appLayoutProps: props, stateManager: stateManager }, (registered, appLayoutState, toolbarProps, skeletonAttributes) => (React.createElement(AppLayoutVisibilityContext.Provider, { value: appLayoutState.isIntersecting },
+            (embeddedViewMode || !toolbarProps) && props.breadcrumbs ? (React.createElement(ScreenreaderOnly, null, props.breadcrumbs)) : null,
+            React.createElement(SkeletonLayout, { registered: registered, toolbarProps: toolbarProps, appLayoutProps: props, appLayoutState: appLayoutState, skeletonSlotsAttributes: skeletonAttributes })))),
+        React.createElement(AppLayoutWidgetizedState, { forwardRef: forwardRef, appLayoutProps: props, stateManager: stateManager })));
 });
 export default AppLayoutVisualRefreshToolbar;
 //# sourceMappingURL=index.js.map