type safety fixes

just-boris · just-boris · commit 85932fd7e1f1 · 2025-08-06T11:57:50.000+02:00
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import { AppLayoutProps } from '../interfaces';
 import { AppLayoutVisibilityContext } from './contexts';
-import { AppLayoutInternalProps, AppLayoutState } from './interfaces';
+import { AppLayoutInternalProps, AppLayoutPendingState } from './interfaces';
 import { AppLayoutWidgetizedState } from './internal';
 import { SkeletonLayout } from './skeleton';
 import { SkeletonSlotsAttributes } from './skeleton/interfaces';
@@ -20,12 +20,12 @@ const AppLayoutStateProvider: React.FC<{
   stateManager: React.MutableRefObject<StateManager>;
   children: (
     registered: boolean,
-    appLayoutState: AppLayoutState,
+    appLayoutState: AppLayoutPendingState,
     toolbarProps: ToolbarProps | null,
     skeletonAttributes: SkeletonSlotsAttributes
   ) => React.ReactNode;
 }> = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => {
-  const [appLayoutState, setAppLayoutState] = useState<AppLayoutState>(() => ({ isIntersecting: true }));
+  const [appLayoutState, setAppLayoutState] = useState<AppLayoutPendingState>(() => ({ isIntersecting: true }));
   const [skeletonAttributes, setSkeletonAttributes] = useState<SkeletonSlotsAttributes>(() => ({}));
   // use { fn: } object wrapper to avoid confusion with callback form of setState
   const [deduplicator, setDeduplicator] = useState({ fn: mergeProps });
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -5,6 +5,7 @@ import React from 'react';
 
 import { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
+import { SomeOptional } from '../../internal/types';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
 import { SplitPanelProviderProps } from '../split-panel';
 import { OnChangeParams } from '../utils/use-drawers';
@@ -73,6 +74,7 @@ export interface AppLayoutInternals {
 interface AppLayoutWidgetizedState extends AppLayoutInternals {
   isNested: boolean;
   verticalOffsets: VerticalLayoutOutput;
+  navigationAnimationDisabled: boolean;
   splitPanelOffsets: {
     stickyVerticalBottomOffset: number;
     mainContentPaddingBlockEnd: number | undefined;
@@ -81,11 +83,16 @@ interface AppLayoutWidgetizedState extends AppLayoutInternals {
 
 // New widget interface
 export interface AppLayoutState {
-  rootRef?: React.Ref<HTMLElement>;
+  rootRef: React.Ref<HTMLElement>;
   isIntersecting: boolean;
   // new state management
-  widgetizedState?: AppLayoutWidgetizedState;
+  widgetizedState: AppLayoutWidgetizedState;
   // the old object shape for backward compatibility
-  appLayoutInternals?: AppLayoutInternals;
-  splitPanelInternals?: SplitPanelProviderProps;
+  appLayoutInternals: AppLayoutInternals;
+  splitPanelInternals: SplitPanelProviderProps;
 }
+
+export type AppLayoutPendingState = SomeOptional<
+  AppLayoutState,
+  'appLayoutInternals' | 'splitPanelInternals' | 'widgetizedState' | 'rootRef'
+>;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -8,7 +8,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';
 import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
-import { AppLayoutInternalProps, AppLayoutState } from '../interfaces';
+import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
 import {
   AppLayoutAfterMainSlot,
   AppLayoutBeforeMainSlot,
@@ -24,7 +24,7 @@ import styles from './styles.css.js';
 export interface SkeletonLayoutProps {
   registered: boolean;
   appLayoutProps: AppLayoutInternalProps;
-  appLayoutState: AppLayoutState;
+  appLayoutState: AppLayoutPendingState;
   toolbarProps: ToolbarProps | null;
   skeletonSlotsAttributes: SkeletonSlotsAttributes;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/interfaces.ts b/src/app-layout/visual-refresh-toolbar/skeleton/interfaces.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { AppLayoutInternalProps, AppLayoutState } from '../interfaces';
+import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
 import { ToolbarProps } from '../toolbar';
 
 interface ElementAttributes {
@@ -21,5 +21,5 @@ export interface SkeletonSlotsAttributes {
 export interface SkeletonPartProps {
   appLayoutProps: AppLayoutInternalProps;
   toolbarProps: ToolbarProps | null;
-  appLayoutState: AppLayoutState;
+  appLayoutState: AppLayoutPendingState;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx
@@ -19,7 +19,6 @@ export const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPart
       <>
         {!!toolbarProps && (
           <ToolbarSlot ref={ref}>
-            {/*TODO: consider discovered breadcrumbs? */}
             <BreadcrumbsSlot ownBreadcrumbs={appLayoutProps.breadcrumbs} />
           </ToolbarSlot>
         )}
diff --git a/src/app-layout/visual-refresh-toolbar/state/invariants.ts b/src/app-layout/visual-refresh-toolbar/state/invariants.ts
@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { AppLayoutPendingState, AppLayoutState } from '../interfaces';
+
+export function isWidgetReady(state: AppLayoutPendingState): state is AppLayoutState {
+  return !!state.widgetizedState;
+}
diff --git a/src/app-layout/visual-refresh-toolbar/state/props-merger.ts b/src/app-layout/visual-refresh-toolbar/state/props-merger.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
-import { AppLayoutInternalProps, AppLayoutState } from '../interfaces';
+import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
 import { ToolbarProps } from '../toolbar';
 import { MergeProps, SharedProps } from './interfaces';
 
@@ -65,7 +65,7 @@ export const mergeProps: MergeProps = (ownProps, additionalProps) => {
   return Object.keys(toolbar).filter(key => key !== 'ariaLabels').length > 0 ? toolbar : null;
 };
 
-export const getPropsToMerge = (props: AppLayoutInternalProps, appLayoutState: AppLayoutState): SharedProps => {
+export const getPropsToMerge = (props: AppLayoutInternalProps, appLayoutState: AppLayoutPendingState): SharedProps => {
   const state = appLayoutState.widgetizedState;
   return {
     breadcrumbs: props.breadcrumbs,
diff --git a/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx b/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx
@@ -15,6 +15,7 @@ import { AppLayoutProps } from '../../interfaces';
 import { SplitPanelProviderProps } from '../../split-panel';
 import { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../../utils/use-drawers';
 import { useAsyncFocusControl, 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 {
   computeHorizontalLayout,
@@ -24,7 +25,6 @@ import {
 } from '../compute-layout';
 import { AppLayoutState } from '../interfaces';
 import { AppLayoutInternalProps, AppLayoutInternals } from '../interfaces';
-import { useGlobalScrollPadding } from '../../utils/use-global-scroll-padding';
 
 export const useAppLayout = (
   hasToolbar: boolean,
@@ -71,7 +71,6 @@ export const useAppLayout = (
   const onMountRootRef = useCallback(node => {
     setIsNested(getIsNestedInAppLayout(node));
   }, []);
-  const rootRef = useMergeRefs(rootRefInternal, onMountRootRef);
 
   const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {
     componentName: 'AppLayout',
@@ -265,6 +264,8 @@ export const useAppLayout = (
 
   const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
 
+  const rootRef = useMergeRefs(rootRefInternal, intersectionObserverRef, onMountRootRef);
+
   useGlobalScrollPadding(verticalOffsets.header ?? 0);
 
   const appLayoutInternals: AppLayoutInternals = {
@@ -430,12 +431,14 @@ export const useAppLayout = (
   });
 
   return {
+    rootRef,
     isIntersecting,
     appLayoutInternals,
     splitPanelInternals,
     widgetizedState: {
       ...appLayoutInternals,
       isNested,
+      navigationAnimationDisabled,
       verticalOffsets,
       splitPanelOffsets,
     },
diff --git a/src/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.tsx b/src/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.tsx
@@ -11,12 +11,13 @@ import {
 } from '../drawer';
 import { SkeletonPartProps } from '../skeleton/interfaces';
 import { AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide } from '../split-panel';
+import { isWidgetReady } from '../state/invariants';
 
 import sharedStyles from '../../resize/styles.css.js';
 import styles from '../skeleton/styles.css.js';
 
 export const AfterMainSlotImplementation = ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => {
-  if (!appLayoutState.appLayoutInternals || !appLayoutState.splitPanelInternals) {
+  if (!isWidgetReady(appLayoutState)) {
     return null;
   }
   const {
@@ -27,7 +28,7 @@ export const AfterMainSlotImplementation = ({ appLayoutState, appLayoutProps }:
     splitPanelOpen,
     drawers,
     splitPanelPosition,
-  } = appLayoutState.widgetizedState ?? {};
+  } = appLayoutState.widgetizedState;
   const drawerExpandedMode = !!expandedDrawerId;
   const toolsOpen = !!activeDrawer;
   const globalToolsOpen = !!activeGlobalDrawersIds?.length;
diff --git a/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx b/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx
@@ -7,15 +7,18 @@ import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';
 import { SkeletonPartProps } from '../skeleton/interfaces';
 import { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';
+import { isWidgetReady } from '../state/invariants';
 import { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';
 
+import sharedStyles from '../../resize/styles.css.js';
 import styles from '../skeleton/styles.css.js';
 
 export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState }: SkeletonPartProps) => {
-  if (!appLayoutState.widgetizedState || !appLayoutState.appLayoutInternals) {
+  if (!isWidgetReady(appLayoutState)) {
     return null;
   }
-  const { activeDrawer, navigationOpen, navigation, expandedDrawerId } = appLayoutState.widgetizedState;
+  const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } =
+    appLayoutState.widgetizedState;
   const drawerExpandedMode = !!expandedDrawerId;
   const toolsOpen = !!activeDrawer;
   // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
@@ -31,8 +34,7 @@ export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState }: S
             styles.navigation,
             !navigationOpen && styles['panel-hidden'],
             toolsOpen && styles['unfocusable-mobile'],
-            // TODO recover
-            // !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],
+            !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],
             (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden
           )}
         >
diff --git a/src/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.tsx b/src/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.tsx
@@ -5,11 +5,12 @@ import React from 'react';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { SkeletonPartProps } from '../skeleton/interfaces';
 import { AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom } from '../split-panel';
+import { isWidgetReady } from '../state/invariants';
 
 import styles from '../skeleton/styles.css.js';
 
 export const BottomContentSlotImplementation = ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => {
-  if (!appLayoutState.widgetizedState || !appLayoutState.appLayoutInternals || !appLayoutState.splitPanelInternals) {
+  if (!isWidgetReady(appLayoutState)) {
     return null;
   }
   const { splitPanelPosition, placement } = appLayoutState.widgetizedState;
diff --git a/src/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.tsx b/src/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.tsx
@@ -7,11 +7,12 @@ import { highContrastHeaderClassName } from '../../../internal/utils/content-hea
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../notifications';
 import { SkeletonPartProps } from '../skeleton/interfaces';
+import { isWidgetReady } from '../state/invariants';
 
 import styles from '../skeleton/styles.css.js';
 
 export const TopContentSlotImplementation = ({ appLayoutProps, appLayoutState }: SkeletonPartProps) => {
-  if (!appLayoutState.appLayoutInternals) {
+  if (!isWidgetReady(appLayoutState)) {
     return null;
   }
   return (
diff --git a/src/internal/types.ts b/src/internal/types.ts
@@ -17,6 +17,16 @@ export type SomeRequired<Type, Keys extends keyof Type> = Type & {
   [Key in Keys]-?: Type[Key];
 };
 
+/**
+ * Makes specified properties optional.
+ *
+ * @example
+ * ```
+ * type PartialAlertProps = SomeOptional<AlertProps, 'type' | 'children'>
+ * ```
+ */
+export type SomeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
 /**
  * Utility type that makes a union of given type and undefined.
  * @example
