@dxos/react-ui 0.7.5-main.499c70c → 0.7.5-main.6a330ac

package/src/components/Dialogs/AlertDialog.tsx

@@ -95,7 +95,9 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
+type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
+  blockAlign?: 'center' | 'start' | 'end';
+};
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,

package/src/components/Dialogs/Dialog.stories.tsx

@@ -59,7 +59,7 @@ export const Default = {
   argTypes: {
     blockAlign: {
       type: 'select',
-      options: ['center', 'start'],
+      options: ['center', 'start', 'end'],
     },
   },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -85,7 +85,7 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   inOverlayLayout: false,
 });
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -94,15 +94,7 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx(
-          'dialog.overlay',
-          'dialog__overlay',
-          {},
-          classNames,
-          'data-[block-align=start]:justify-center',
-          'data-[block-align=start]:items-start',
-          'data-[block-align=center]:place-content-center',
-        )}
+        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
         ref={forwardedRef}
         data-block-align={blockAlign}
       >
@@ -114,17 +106,22 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
 
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps>;
+type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
         {...props}
-        className={tx('dialog.content', 'dialog', { inOverlayLayout }, classNames)}
+        className={tx(
+          'dialog.content',
+          'dialog',
+          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
+          classNames,
+        )}
         ref={forwardedRef}
       >
         {children}

package/src/components/Icon/Icon.tsx

@@ -12,7 +12,10 @@ import { type ThemedClassName } from '../../util';
 
 const ICONS_URL = '/icons.svg';
 
-export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
+export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
+  icon: string;
+  size?: Size;
+};
 
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {

package/src/components/Input/Input.tsx

@@ -307,7 +307,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     return (
       <input
         type='checkbox'
-        className='ch-checkbox--switch ch-focus-ring'
+        className='dx-checkbox--switch dx-focus-ring'
         checked={checked}
         onChange={(event) => {
           onCheckedChange(event.target.checked);

package/src/components/Lists/ListDropIndicator.tsx

@@ -15,8 +15,10 @@ const edgeToOrientationMap: Record<Edge, Orientation> = {
 };
 
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
-  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
+  horizontal:
+    'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
+  vertical:
+    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
@@ -33,14 +35,19 @@ const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 export type DropIndicatorProps = {
   edge: Edge;
   gap?: number;
+  terminalInset?: number;
+  lineInset?: number;
 };
 
 /**
  * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
  */
-export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
+export const ListDropIndicator = ({
+  edge,
+  gap = 0,
+  lineInset = 0,
+  terminalInset = lineInset - terminalSize,
+}: DropIndicatorProps) => {
   const orientation = edgeToOrientationMap[edge];
 
   return (
@@ -49,10 +56,11 @@ export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
       style={
         {
           '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
+          '--line-offset': `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+          '--line-inset': `${lineInset}px`,
           '--terminal-size': `${terminalSize}px`,
           '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
+          '--terminal-inset': `${terminalInset}px`,
           '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
         } as CSSProperties
       }

package/src/components/Main/Main.stories.tsx

@@ -24,7 +24,7 @@ const ComplementarySidebarToggle = () => {
 
 const StoryMain = (_args: StoryMainArgs) => {
   return (
-    <Main.Root defaultComplementarySidebarOpen>
+    <Main.Root>
       <Main.Overlay />
       <Main.NavigationSidebar classNames='p-4'>
         <p>Navigation sidebar content, hi!</p>

package/src/components/Main/Main.tsx

@@ -3,7 +3,6 @@
 //
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { createContext } from '@radix-ui/react-context';
 import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -36,12 +35,14 @@ const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
 const MAIN_NAME = 'Main';
 const GENERIC_CONSUMER_NAME = 'GenericConsumer';
 
+type SidebarState = 'expanded' | 'collapsed' | 'closed';
+
 type MainContextValue = {
   resizing: boolean;
-  navigationSidebarOpen: boolean;
-  setNavigationSidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
-  complementarySidebarOpen: boolean;
-  setComplementarySidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
+  navigationSidebarState: SidebarState;
+  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+  complementarySidebarState: SidebarState;
+  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
 };
 
 const landmarkAttr = 'data-main-landmark';
@@ -74,73 +75,77 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
   resizing: false,
-  navigationSidebarOpen: false,
-  setNavigationSidebarOpen: (nextOpen) => {
+  navigationSidebarState: 'closed',
+  setNavigationSidebarState: (nextState) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
-  complementarySidebarOpen: false,
-  setComplementarySidebarOpen: (nextOpen) => {
+  complementarySidebarState: 'closed',
+  setComplementarySidebarState: (nextState) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
 });
 
 const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } =
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
     useMainContext(consumerName);
   return {
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
+    navigationSidebarState,
+    setNavigationSidebarState,
     toggleNavigationSidebar: useCallback(
-      () => setNavigationSidebarOpen(!navigationSidebarOpen),
-      [navigationSidebarOpen, setNavigationSidebarOpen],
+      () => setNavigationSidebarState(navigationSidebarState === 'expanded' ? 'closed' : 'expanded'),
+      [navigationSidebarState, setNavigationSidebarState],
     ),
-    openNavigationSidebar: useCallback(() => setNavigationSidebarOpen(true), [setNavigationSidebarOpen]),
-    closeNavigationSidebar: useCallback(() => setNavigationSidebarOpen(false), [setNavigationSidebarOpen]),
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
+    openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
+    collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
+    closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
     toggleComplementarySidebar: useCallback(
-      () => setComplementarySidebarOpen(!complementarySidebarOpen),
-      [complementarySidebarOpen, setComplementarySidebarOpen],
+      () => setComplementarySidebarState(complementarySidebarState === 'expanded' ? 'closed' : 'expanded'),
+      [complementarySidebarState, setComplementarySidebarState],
     ),
-    openComplementarySidebar: useCallback(() => setComplementarySidebarOpen(true), [setComplementarySidebarOpen]),
-    closeComplementarySidebar: useCallback(() => setComplementarySidebarOpen(false), [setComplementarySidebarOpen]),
+    openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
+    collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
+    closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
   };
 };
 
 type MainRootProps = PropsWithChildren<{
-  navigationSidebarOpen?: boolean;
-  defaultNavigationSidebarOpen?: boolean;
-  onNavigationSidebarOpenChange?: (nextOpen: boolean) => void;
-  complementarySidebarOpen?: boolean;
-  defaultComplementarySidebarOpen?: boolean;
-  onComplementarySidebarOpenChange?: (nextOpen: boolean) => void;
+  navigationSidebarState?: SidebarState;
+  defaultNavigationSidebarState?: SidebarState;
+  onNavigationSidebarStateChange?: (nextState: SidebarState) => void;
+  complementarySidebarState?: SidebarState;
+  defaultComplementarySidebarState?: SidebarState;
+  onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
 }>;
 
 const resizeDebounce = 3000;
 
 const MainRoot = ({
-  navigationSidebarOpen: propsNavigationSidebarOpen,
-  defaultNavigationSidebarOpen,
-  onNavigationSidebarOpenChange,
-  complementarySidebarOpen: propsComplementarySidebarOpen,
-  defaultComplementarySidebarOpen,
-  onComplementarySidebarOpenChange,
+  navigationSidebarState: propsNavigationSidebarState,
+  defaultNavigationSidebarState,
+  onNavigationSidebarStateChange,
+  complementarySidebarState: propsComplementarySidebarState,
+  defaultComplementarySidebarState,
+  onComplementarySidebarStateChange,
   children,
   ...props
 }: MainRootProps) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState<boolean>({
-    prop: propsNavigationSidebarOpen,
-    defaultProp: defaultNavigationSidebarOpen,
-    onChange: onNavigationSidebarOpenChange,
-  });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState<boolean>({
-    prop: propsComplementarySidebarOpen,
-    defaultProp: defaultComplementarySidebarOpen,
-    onChange: onComplementarySidebarOpenChange,
-  });
+  const [navigationSidebarState = isLg ? 'expanded' : 'collapsed', setNavigationSidebarState] =
+    useControllableState<SidebarState>({
+      prop: propsNavigationSidebarState,
+      defaultProp: defaultNavigationSidebarState,
+      onChange: onNavigationSidebarStateChange,
+    });
+  const [complementarySidebarState = isLg ? 'expanded' : 'collapsed', setComplementarySidebarState] =
+    useControllableState<SidebarState>({
+      prop: propsComplementarySidebarState,
+      defaultProp: defaultComplementarySidebarState,
+      onChange: onComplementarySidebarStateChange,
+    });
 
   const [resizing, setResizing] = useState(false);
   const resizeInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -165,10 +170,10 @@ const MainRoot = ({
     <MainProvider
       {...props}
       {...{
-        navigationSidebarOpen,
-        setNavigationSidebarOpen,
-        complementarySidebarOpen,
-        setComplementarySidebarOpen,
+        navigationSidebarState,
+        setNavigationSidebarState,
+        complementarySidebarState,
+        setComplementarySidebarState,
       }}
       resizing={resizing}
     >
@@ -185,15 +190,15 @@ const handleOpenAutoFocus = (event: Event) => {
 
 type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
   swipeToDismiss?: boolean;
-  open: boolean;
+  state?: SidebarState;
   resizing?: boolean;
-  setOpen: Dispatch<SetStateAction<boolean | undefined>>;
+  onStateChange?: (nextState: SidebarState) => void;
   side: 'inline-start' | 'inline-end';
 };
 
 const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   (
-    { classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props },
+    { classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props },
     forwardedRef,
   ) => {
     const [isLg] = useMediaQuery('lg', { ssr: false });
@@ -201,7 +206,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-      onDismiss: () => setOpen(false),
+      onDismiss: () => onStateChange?.('closed'),
     });
     const handleKeyDown = useCallback(
       (event: KeyboardEvent<HTMLDivElement>) => {
@@ -214,16 +219,16 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     );
     const Root = isLg ? Primitive.div : DialogContent;
     return (
-      <DialogRoot open={open} modal={false}>
+      <DialogRoot open={state !== 'closed'} modal={false}>
         <Root
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...props}
           data-side={side === 'inline-end' ? 'ie' : 'is'}
-          data-state={open ? 'open' : 'closed'}
+          data-state={state}
           data-resizing={resizing ? 'true' : 'false'}
           className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
           onKeyDown={handleKeyDown}
-          {...(!open && { inert: 'true' })}
+          {...(state === 'closed' && { inert: 'true' })}
           ref={ref}
         >
           {children}
@@ -233,17 +238,17 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   },
 );
 
-type MainNavigationSidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
+type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '0');
   return (
     <MainSidebar
       {...mover}
       {...props}
-      open={navigationSidebarOpen}
-      setOpen={setNavigationSidebarOpen}
+      state={navigationSidebarState}
+      onStateChange={setNavigationSidebarState}
       resizing={resizing}
       side='inline-start'
       ref={forwardedRef}
@@ -253,18 +258,18 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
 
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 
-type MainComplementarySidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
+type MainComplementarySidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 
 const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySidebarProps>((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } =
+  const { complementarySidebarState, setComplementarySidebarState, resizing } =
     useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '2');
   return (
     <MainSidebar
       {...mover}
       {...props}
-      open={complementarySidebarOpen}
-      setOpen={setComplementarySidebarOpen}
+      state={complementarySidebarState}
+      onStateChange={setComplementarySidebarState}
       resizing={resizing}
       side='inline-end'
       ref={forwardedRef}
@@ -282,7 +287,7 @@ type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> &
 
 const MainContent = forwardRef<HTMLDivElement, MainProps>(
   ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainProps, forwardedRef) => {
-    const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+    const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : role ? 'div' : 'main';
 
@@ -293,8 +298,8 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
         role={role}
         {...(handlesFocus && { ...mover })}
         {...props}
-        data-sidebar-inline-start-state={navigationSidebarOpen ? 'open' : 'closed'}
-        data-sidebar-inline-end-state={complementarySidebarOpen ? 'open' : 'closed'}
+        data-sidebar-inline-start-state={navigationSidebarState}
+        data-sidebar-inline-end-state={complementarySidebarState}
         className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
@@ -310,72 +315,37 @@ type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primit
 
 const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } =
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
     useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return (
     <div
       onClick={() => {
-        setNavigationSidebarOpen(false);
-        setComplementarySidebarOpen(false);
+        setNavigationSidebarState('collapsed');
+        setComplementarySidebarState('collapsed');
       }}
       {...props}
       className={tx(
         'main.overlay',
         'main__overlay',
-        { isLg, inlineStartSidebarOpen: navigationSidebarOpen, inlineEndSidebarOpen: complementarySidebarOpen },
+        { isLg, inlineStartSidebarOpen: navigationSidebarState, inlineEndSidebarOpen: complementarySidebarState },
         classNames,
       )}
-      data-state={navigationSidebarOpen || complementarySidebarOpen ? 'open' : 'closed'}
+      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
       aria-hidden='true'
       ref={forwardedRef}
     />
   );
 });
 
-type MainNotchProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
-
-const MainNotch = forwardRef<HTMLDivElement, MainNotchProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  // Notch is concerned with the nav sidebar, whichever side it might be on.
-  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = useRef<HTMLDivElement | null>(null);
-  const ref = useComposedRefs(forwardedRef, notchElement);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      switch (event.key) {
-        case 'Escape':
-          props?.onKeyDown?.(event);
-          notchElement.current?.focus();
-      }
-    },
-    [props?.onKeyDown],
-  );
-
-  const mover = useLandmarkMover(handleKeyDown, '3');
-
-  return (
-    <div
-      role='toolbar'
-      {...mover}
-      {...props}
-      data-nav-sidebar-state={navigationSidebarOpen ? 'open' : 'closed'}
-      className={tx('main.notch', 'main__notch', {}, classNames)}
-      ref={ref}
-    />
-  );
-});
-
 export const Main = {
   Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
-  Notch: MainNotch,
 };
 
-export { useMainContext, useSidebars };
+export { useMainContext, useSidebars, useLandmarkMover };
 
-export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps };
+export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };

package/src/components/Menus/ContextMenu.tsx

@@ -7,6 +7,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
@@ -26,13 +27,14 @@ type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuC
 };
 
 const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <ContextMenuPrimitive.Content
-        collisionPadding={8}
         {...props}
+        collisionPadding={safeCollisionPadding}
         className={tx('menu.content', 'menu', { elevation }, classNames)}
         ref={forwardedRef}
       >

package/src/components/Menus/DropdownMenu.tsx

@@ -29,6 +29,7 @@ import React, {
 } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -232,19 +233,20 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
-
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
           if (!hasInteractedOutsideRef.current) {

package/src/components/Popover/Popover.tsx

@@ -37,6 +37,7 @@ import React, {
 import { RemoveScroll } from 'react-remove-scroll';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 /* -------------------------------------------------------------------------------------------------
@@ -428,6 +429,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onPointerDownOutside,
       onFocusOutside,
       onInteractOutside,
+      collisionPadding = 8,
       classNames,
       ...contentProps
     } = props;
@@ -435,6 +437,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
 
     // Make sure the whole tree has focus guards as our `Popover` may be
     // the last element in the DOM (because of the `Portal`)
@@ -463,6 +466,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             id={context.contentId}
             {...popperScope}
             {...contentProps}
+            collisionPadding={safeCollisionPadding}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{

package/src/components/Select/Select.tsx

@@ -7,6 +7,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
@@ -53,12 +54,14 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
 type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <SelectPrimitive.Content
         {...props}
+        collisionPadding={safeCollisionPadding}
         className={tx('select.content', 'select__content', { elevation }, classNames)}
         position='popper'
         ref={forwardedRef}