chore: Wrapping up (type adjustments, snapshot upd)

Author: georgylobko

src/app-layout/__integ__/multi-app-layout-global-drawer-child.test.ts

@@ -33,7 +33,7 @@ describe('Visual refresh toolbar only', () => {
   test(
     'global drawers registered from child AppLayout render correctly when __disableRuntimeDrawers is set to true for parent AppLayout',
     setupTest(async page => {
-      await expect(page.isDisplayed(wrapper.findDrawerTriggerById('circle-global').toSelector())).resolves.toBe(true);
+      await expect(page.isClickable(wrapper.findDrawerTriggerById('circle-global').toSelector())).resolves.toBe(true);
       await page.runInsideIframe(iframeId, true, async () => {
         await expect(page.isDisplayed(findDrawerById(secondaryLayout, 'circle-global').toSelector())).resolves.toBe(
           true

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap

@@ -34,7 +34,9 @@ Map {
       "toolsWidth": 290,
     },
     "stateManager": {
-      "current": {},
+      "current": {
+        "set": [Function],
+      },
     },
   },
   [Function] => {
@@ -1297,7 +1299,9 @@ Map {
       "toolsWidth": 290,
     },
     "stateManager": {
-      "current": {},
+      "current": {
+        "set": [Function],
+      },
     },
   },
   [Function] => {

src/app-layout/utils/use-focus-control.ts

@@ -13,7 +13,7 @@ export interface FocusControlRefs {
   close: RefObject<Focusable>;
   slider: RefObject<HTMLDivElement>;
   onMount?: () => void;
-  focusPromise?: any;
+  focusPromise?: Deferred<HTMLElement>;
 }
 
 export interface FocusControlState {
@@ -166,7 +166,7 @@ export function useAsyncFocusControl(
   restoreFocus = false,
   activeDrawerId?: string | null
 ): FocusControlState {
-  const focusPromise = useRef<Deferred<undefined>>(new Deferred());
+  const focusPromise = useRef<Deferred<HTMLElement>>(new Deferred());
   const refs = {
     toggle: useRef<Focusable>(null),
     close: useRef<Focusable>(null),

src/app-layout/utils/use-split-panel-focus-control.ts

@@ -19,7 +19,7 @@ export interface SplitPanelFocusControlState {
 }
 
 export function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {
-  const focusPromise = useRef<Deferred<undefined>>(new Deferred());
+  const focusPromise = useRef<Deferred<HTMLElement>>(new Deferred());
 
   const refs = {
     toggle: useRef<Focusable>(null),

src/app-layout/visual-refresh-toolbar/navigation/index.tsx

@@ -17,7 +17,7 @@ import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
 interface AppLayoutNavigationImplementationProps {
-  appLayoutInternals: AppLayoutInternals;
+  appLayoutInternals: Partial<AppLayoutInternals>;
 }
 
 export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {
@@ -32,7 +32,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
     verticalOffsets,
   } = appLayoutInternals;
 
-  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets!, isMobile!, placement!);
 
   // Close the Navigation drawer on mobile when a user clicks a link inside.
   const onNavigationClick = (event: React.MouseEvent) => {
@@ -41,7 +41,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
       node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href
     );
     if (hasLink && isMobile) {
-      onNavigationToggle(false);
+      onNavigationToggle?.(false);
     }
   };
   const closeMergedRef = useMergeRefs(navigationFocusControl?.refs?.close, navigationFocusControl?.refs?.onMount);
@@ -72,7 +72,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
           <InternalButton
             ariaLabel={ariaLabels?.navigationClose ?? undefined}
             iconName={isMobile ? 'close' : 'angle-left'}
-            onClick={() => onNavigationToggle(false)}
+            onClick={() => onNavigationToggle?.(false)}
             variant="icon"
             formAction="none"
             className={testutilStyles['navigation-close']}

src/app-layout/visual-refresh-toolbar/notifications/index.tsx

@@ -15,7 +15,7 @@ import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
 export interface AppLayoutNotificationsImplementationProps {
-  appLayoutInternals: AppLayoutInternals;
+  appLayoutInternals: Partial<AppLayoutInternals>;
   children: React.ReactNode;
 }
 
@@ -49,7 +49,7 @@ export function AppLayoutNotificationsImplementation({
         appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']
       )}
       style={{
-        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
+        insetBlockStart: stickyNotifications ? verticalOffsets?.notifications : undefined,
       }}
     >
       <div className={testutilStyles.notifications} role="region" aria-label={ariaLabels?.notifications}>

src/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.tsx

@@ -10,7 +10,7 @@ import styles from './styles.css.js';
 
 interface BreadcrumbsSlotProps {
   ownBreadcrumbs: React.ReactNode;
-  discoveredBreadcrumbs: BreadcrumbGroupProps | null;
+  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
 }
 
 export function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {

src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

@@ -11,7 +11,7 @@ import { fireNonCancelableEvent } from '../../../internal/events';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { useGetGlobalBreadcrumbs } from '../../../internal/plugins/helpers/use-global-breadcrumbs';
 import { computeVerticalLayout } from '../compute-layout';
-import { AppLayoutInternalProps } from '../interfaces';
+import { AppLayoutInternalProps, AppLayoutInternals } from '../interfaces';
 import {
   AppLayoutSkeletonBottomContentSlot,
   AppLayoutSkeletonSideSlot,
@@ -25,10 +25,15 @@ import { useSkeletonSlotsAttributes } from './widget-slots/use-skeleton-slots-at
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
+type AppLayoutState = ReturnType<typeof useAppLayout>;
+type SkeletonSlotsAttributes = ReturnType<typeof useSkeletonSlotsAttributes>;
+
 export interface SkeletonLayoutProps {
   appLayoutProps: AppLayoutInternalProps;
   appLayoutState:
-    | (ReturnType<typeof useAppLayout> &
+    | (Partial<Omit<AppLayoutState, 'appLayoutInternals'>> & { appLayoutInternals: Partial<AppLayoutInternals> } &
+        // these props are excluded from the runtime app layout, because they are critical for the initial rendering
+        // to prevent layout shifts
         Partial<ReturnType<typeof useMultiAppLayout>> &
         Partial<{
           hasToolbar: boolean;
@@ -38,7 +43,7 @@ export interface SkeletonLayoutProps {
 }
 
 export interface RootSkeletonLayoutProps extends SkeletonLayoutProps {
-  skeletonSlotsAttributes: ReturnType<typeof useSkeletonSlotsAttributes> | null;
+  skeletonSlotsAttributes: SkeletonSlotsAttributes | null;
 }
 
 export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
@@ -77,7 +82,7 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
         function (open: boolean) {
           fireNonCancelableEvent(onNavigationChange, { open });
         },
-      navigationFocusRef: appLayoutState?.appLayoutInternals?.navigationFocusControl.refs.toggle,
+      navigationFocusRef: appLayoutState?.appLayoutInternals?.navigationFocusControl?.refs.toggle,
       breadcrumbs,
       activeDrawerId: appLayoutState?.activeDrawer?.id ?? null,
       // only pass it down if there are non-empty drawers or tools
@@ -89,15 +94,15 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
       activeGlobalDrawersIds: appLayoutState?.activeGlobalDrawersIds,
       onActiveGlobalDrawersChange: appLayoutState?.appLayoutInternals?.onActiveGlobalDrawersChange,
       onActiveDrawerChange: appLayoutState?.appLayoutInternals?.onActiveDrawerChange,
-      drawersFocusRef: appLayoutState?.appLayoutInternals?.drawersFocusControl.refs.toggle,
+      drawersFocusRef: appLayoutState?.appLayoutInternals?.drawersFocusControl?.refs.toggle,
       splitPanel,
       splitPanelToggleProps: {
         ...appLayoutState?.appLayoutInternals?.splitPanelToggleConfig,
         active: Boolean(appLayoutState?.splitPanelOpen),
         controlId: appLayoutState?.appLayoutInternals?.splitPanelControlId,
         position: appLayoutState?.splitPanelPosition ?? 'side',
       },
-      splitPanelFocusRef: appLayoutState?.appLayoutInternals?.splitPanelFocusControl.refs.toggle,
+      splitPanelFocusRef: appLayoutState?.appLayoutInternals?.splitPanelFocusControl?.refs.toggle,
       onSplitPanelToggle: appLayoutState?.appLayoutInternals?.onSplitPanelToggle ?? function () {},
       expandedDrawerId: appLayoutState?.expandedDrawerId,
       setExpandedDrawerId: appLayoutState?.setExpandedDrawerId ?? function () {},
@@ -113,7 +118,8 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
     toolbarHeight: appLayoutState?.toolbarHeight ?? 0,
     stickyNotifications: Boolean(appLayoutState?.appLayoutInternals?.stickyNotifications),
   });
-  const combinedProps = {
+  // here we merge runtime and built-time props
+  const mergedProps = {
     ...props,
     appLayoutState: {
       ...appLayoutState,
@@ -129,7 +135,7 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
         ariaLabels: appLayoutState?.appLayoutInternals?.ariaLabels ?? ariaLabels,
       },
       toolbarProps,
-      registered,
+      registered: !!registered,
       hasToolbar,
       verticalOffsets,
       resolvedNavigation: appLayoutState?.resolvedNavigation ?? resolvedNavigation,
@@ -161,9 +167,9 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
           }
           ref={ref}
         >
-          <AppLayoutSkeletonTopSlot {...(combinedProps as any)} />
+          <AppLayoutSkeletonTopSlot {...mergedProps} />
           <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>
-            <AppLayoutSkeletonTopContentSlot {...(combinedProps as any)} />
+            <AppLayoutSkeletonTopContentSlot {...mergedProps} />
             <div
               {...contentWrapperElAttributes}
               className={
@@ -177,9 +183,9 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
                 {registered ? content : null}
               </div>
             </div>
-            <AppLayoutSkeletonBottomContentSlot {...(combinedProps as any)} />
+            <AppLayoutSkeletonBottomContentSlot {...mergedProps} />
           </main>
-          <AppLayoutSkeletonSideSlot {...(combinedProps as any)} />
+          <AppLayoutSkeletonSideSlot {...mergedProps} />
         </div>
       </VisualContext>
     </>

src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/side-page-slot.tsx

@@ -9,6 +9,7 @@ import {
   AppLayoutDrawerImplementation as AppLayoutDrawer,
   AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,
 } from '../../drawer';
+import { AppLayoutInternals } from '../../interfaces';
 import { AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide } from '../../split-panel';
 import { SkeletonLayoutProps } from '../index';
 
@@ -58,11 +59,15 @@ const SidePageSlot = (props: SkeletonLayoutProps) => {
           drawerExpandedMode && styles.hidden
         )}
       >
-        {drawers && drawers.length > 0 && <AppLayoutDrawer appLayoutInternals={appLayoutInternals!} />}
+        {drawers && drawers.length > 0 && (
+          // type casting is safe here since 'drawers' only exists at runtime after appLayoutInternals
+          // has been initialized
+          <AppLayoutDrawer appLayoutInternals={appLayoutInternals as AppLayoutInternals} />
+        )}
       </div>
       <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>
         <ActiveDrawersContext.Provider value={activeGlobalDrawersIds ?? []}>
-          <AppLayoutGlobalDrawers appLayoutInternals={appLayoutInternals!} />
+          <AppLayoutGlobalDrawers appLayoutInternals={appLayoutInternals as AppLayoutInternals} />
         </ActiveDrawersContext.Provider>
       </div>
     </>

src/app-layout/visual-refresh-toolbar/split-panel/index.tsx

@@ -10,7 +10,7 @@ import { AppLayoutInternals } from '../interfaces';
 import styles from './styles.css.js';
 
 interface AppLayoutSplitPanelDrawerSideImplementationProps {
-  appLayoutInternals: AppLayoutInternals;
+  appLayoutInternals: Partial<AppLayoutInternals>;
   splitPanelInternals: SplitPanelProviderProps;
   children: React.ReactNode;
 }
@@ -21,7 +21,7 @@ export function AppLayoutSplitPanelDrawerSideImplementation({
   splitPanelInternals,
 }: AppLayoutSplitPanelDrawerSideImplementationProps) {
   const { splitPanelControlId, placement, verticalOffsets, isMobile, splitPanelAnimationDisabled } = appLayoutInternals;
-  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets!, isMobile!, placement!);
 
   return (
     <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>
@@ -40,7 +40,7 @@ export function AppLayoutSplitPanelDrawerSideImplementation({
 }
 
 interface AppLayoutSplitPanelDrawerBottomImplementationProps {
-  appLayoutInternals: AppLayoutInternals;
+  appLayoutInternals: Partial<AppLayoutInternals>;
   splitPanelInternals: SplitPanelProviderProps;
   children: React.ReactNode;
 }