@keboola/design 1.0.0

package/src/components/Sidebar/SidebarProvider/useTransitionPresence.test.ts

@@ -0,0 +1,179 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useTransitionPresence } from './useTransitionPresence';
+
+describe('useTransitionPresence', () => {
+  describe('initial state', () => {
+    it('starts mounted when mounted is true', () => {
+      const { result } = renderHook(() => useTransitionPresence({ mounted: true }));
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('starts unmounted when mounted is false', () => {
+      const { result } = renderHook(() => useTransitionPresence({ mounted: false }));
+      expect(result.current.isMounted).toBe(false);
+    });
+  });
+
+  describe('reactive mounted changes', () => {
+    it('transitions to mounted when mounted changes to true', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: false } },
+      );
+
+      expect(result.current.isMounted).toBe(false);
+
+      rerender({ mounted: true });
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('suspends unmount when mounted changes to false', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      expect(result.current.isMounted).toBe(true);
+
+      rerender({ mounted: false });
+      // still mounted during transition (unmountSuspended)
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('unmounts after completeUnmount following mounted=false', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      rerender({ mounted: false });
+      expect(result.current.isMounted).toBe(true);
+
+      act(() => result.current.completeUnmount());
+      expect(result.current.isMounted).toBe(false);
+    });
+  });
+
+  describe('completeUnmount', () => {
+    it('is a no-op when mounted', () => {
+      const { result } = renderHook(() => useTransitionPresence({ mounted: true }));
+
+      act(() => result.current.completeUnmount());
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('is a no-op when already unmounted', () => {
+      const { result } = renderHook(() => useTransitionPresence({ mounted: false }));
+
+      act(() => result.current.completeUnmount());
+      expect(result.current.isMounted).toBe(false);
+    });
+  });
+
+  describe('full cycle', () => {
+    it('mounted → unmount → completeUnmount → mount', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      expect(result.current.isMounted).toBe(true);
+
+      rerender({ mounted: false });
+      expect(result.current.isMounted).toBe(true);
+
+      act(() => result.current.completeUnmount());
+      expect(result.current.isMounted).toBe(false);
+
+      rerender({ mounted: true });
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('remounting cancels pending unmount', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      rerender({ mounted: false });
+      expect(result.current.isMounted).toBe(true);
+
+      rerender({ mounted: true });
+      expect(result.current.isMounted).toBe(true);
+
+      // completeUnmount should be a no-op since we're back to mounted
+      act(() => result.current.completeUnmount());
+      expect(result.current.isMounted).toBe(true);
+    });
+  });
+
+  describe('fallback timeout', () => {
+    it('auto-completes unmount when onTransitionEnd never fires', () => {
+      vi.useFakeTimers();
+
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      rerender({ mounted: false });
+      expect(result.current.isMounted).toBe(true);
+
+      // Advance past the fallback timeout (500ms)
+      act(() => vi.advanceTimersByTime(500));
+      expect(result.current.isMounted).toBe(false);
+
+      vi.useRealTimers();
+    });
+
+    it('clears fallback timeout when remounting before timeout fires', () => {
+      vi.useFakeTimers();
+
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: true } },
+      );
+
+      rerender({ mounted: false });
+      expect(result.current.isMounted).toBe(true);
+
+      // Remount before timeout fires
+      act(() => vi.advanceTimersByTime(200));
+      rerender({ mounted: true });
+      expect(result.current.isMounted).toBe(true);
+
+      // Timeout fires but should be a no-op (state is 'mounted')
+      act(() => vi.advanceTimersByTime(300));
+      expect(result.current.isMounted).toBe(true);
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('keepMounted', () => {
+    it('isMounted is always true regardless of mounted prop', () => {
+      const { result, rerender } = renderHook(
+        (props: { mounted: boolean; keepMounted: boolean }) => useTransitionPresence(props),
+        { initialProps: { mounted: false, keepMounted: true } },
+      );
+
+      expect(result.current.isMounted).toBe(true);
+
+      rerender({ mounted: true, keepMounted: true });
+      expect(result.current.isMounted).toBe(true);
+
+      rerender({ mounted: false, keepMounted: true });
+      expect(result.current.isMounted).toBe(true);
+    });
+
+    it('isMounted is true even when mounted is false', () => {
+      const { result } = renderHook(() =>
+        useTransitionPresence({ mounted: false, keepMounted: true }),
+      );
+
+      expect(result.current.isMounted).toBe(true);
+    });
+  });
+});

package/src/components/Sidebar/SidebarProvider/useTransitionPresence.ts

@@ -0,0 +1,53 @@
+import { useEffect, useLayoutEffect, useMemo, useReducer } from 'react';
+
+type MountState = 'mounted' | 'unmountSuspended' | 'unmounted';
+type MountEvent = 'MOUNT' | 'TRANSITION_OUT' | 'TRANSITION_END';
+
+type UseTransitionPresenceOptions = {
+  mounted: boolean;
+  keepMounted?: boolean;
+};
+
+const FALLBACK_TIMEOUT_MS = 500;
+
+const reducer = (state: MountState, event: MountEvent): MountState => {
+  switch (event) {
+    case 'MOUNT':
+      return 'mounted';
+    case 'TRANSITION_OUT':
+      return state === 'mounted' ? 'unmountSuspended' : state;
+    case 'TRANSITION_END':
+      return state === 'unmountSuspended' ? 'unmounted' : state;
+    default:
+      return state;
+  }
+};
+
+export const useTransitionPresence = ({
+  mounted,
+  keepMounted = false,
+}: UseTransitionPresenceOptions) => {
+  const [state, send] = useReducer(reducer, mounted ? 'mounted' : 'unmounted');
+
+  useLayoutEffect(() => {
+    if (keepMounted) return;
+    mounted ? send('MOUNT') : send('TRANSITION_OUT');
+  }, [mounted, keepMounted]);
+
+  // Fallback: complete unmount if onTransitionEnd never fires
+  // (e.g. prefers-reduced-motion, interrupted or missing transitions)
+  useEffect(() => {
+    if (state !== 'unmountSuspended') return;
+
+    const id = setTimeout(() => send('TRANSITION_END'), FALLBACK_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [state]);
+
+  return useMemo(
+    () => ({
+      isMounted: keepMounted || state !== 'unmounted',
+      completeUnmount: () => send('TRANSITION_END'),
+    }),
+    [state, keepMounted],
+  );
+};

package/src/components/Sidebar/SidebarResizeHandle.tsx

@@ -0,0 +1,28 @@
+import { cn } from '../../utils';
+
+import type { SidebarSide } from './types';
+import { useResizeSidebar } from './useResizeSidebar';
+
+type Props = {
+  side: SidebarSide;
+  minWidth?: number;
+  maxWidth?: number;
+};
+
+export const SidebarResizeHandle = ({ side, minWidth, maxWidth }: Props) => {
+  const { handleProps, isResizable } = useResizeSidebar({ side, minWidth, maxWidth });
+
+  if (!isResizable) return null;
+
+  return (
+    <div
+      {...handleProps}
+      aria-hidden
+      className={cn(
+        'tw-absolute tw-inset-y-0 tw-z-10 tw-w-3',
+        side === 'right' ? 'tw-left-0' : 'tw-right-0',
+        'tw-cursor-col-resize',
+      )}
+    />
+  );
+};

package/src/components/Sidebar/SidebarSeparator.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Separator } from '../Separator';
+
+type Props = Omit<ComponentProps<typeof Separator>, 'orientation' | 'size'>;
+
+export const SidebarSeparator = ({ className, ...props }: Props) => (
+  <Separator
+    {...props}
+    orientation="horizontal"
+    size="full"
+    className={cn('before:tw-bg-sidebar-border tw-p-2', className)}
+  />
+);

package/src/components/Sidebar/SidebarTrigger.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps, MouseEventHandler } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+
+import { useSidebar } from './SidebarProvider';
+import type { SidebarSide } from './types';
+
+type Props = ComponentProps<typeof Slot> & {
+  side?: SidebarSide;
+  hideWhenCollapsed?: boolean;
+};
+
+export const SidebarTrigger = ({
+  side = 'left',
+  onClick,
+  hideWhenCollapsed = false,
+  className,
+  ...rest
+}: Props) => {
+  const { toggle } = useSidebar(side);
+
+  const handleOnClick: MouseEventHandler<HTMLElement> = (event) => {
+    toggle();
+    onClick?.(event);
+  };
+
+  return (
+    <Slot
+      {...rest}
+      onClick={handleOnClick}
+      className={cn(
+        {
+          'group-data-[state=collapsed]/sidebar:tw-hidden': hideWhenCollapsed,
+        },
+        className,
+      )}
+    />
+  );
+};

package/src/components/Sidebar/index.ts

@@ -0,0 +1,3 @@
+export * from './Sidebar';
+export { useSidebar, SidebarProvider } from './SidebarProvider';
+export type { SidebarMode, SidebarSide } from './types';

package/src/components/Sidebar/types.ts

@@ -0,0 +1,6 @@
+export type SidebarMode = 'expanded' | 'collapsed' | 'expand-on-hover';
+export type SidebarSide = 'left' | 'right';
+export type SidebarState = 'expanded' | 'collapsed';
+export type SidebarCollapsible = 'icon' | 'off-canvas';
+
+export type SidebarVariant = 'sided-floating' | 'inset' | 'floating' | 'none';

package/src/components/Sidebar/useResizeSidebar.ts

@@ -0,0 +1,112 @@
+import { type MouseEventHandler, useCallback, useEffect, useRef } from 'react';
+
+import { useSidebar } from './SidebarProvider';
+import type { SidebarSide } from './types';
+import { SidebarWidthInPx } from './utils';
+
+const DEFAULT_MIN_WIDTH = 384;
+const DEFAULT_MAX_WIDTH = 800;
+
+type UseResizeSidebarInput = {
+  side: SidebarSide;
+  minWidth?: number;
+  maxWidth?: number;
+};
+
+export const useResizeSidebar = ({
+  side,
+  minWidth = DEFAULT_MIN_WIDTH,
+  maxWidth = DEFAULT_MAX_WIDTH,
+}: UseResizeSidebarInput) => {
+  const { onWidthChange, baseWidth, isFill, state, isDragging, setIsDragging, setDragWidth } =
+    useSidebar(side);
+  const isResizable = state === 'expanded' && !isFill && onWidthChange !== undefined;
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, []);
+
+  const clampToRange = useCallback(
+    (width: number) => {
+      const effectiveMax = Math.max(minWidth, Math.min(maxWidth, window.innerWidth * 0.5));
+      return Math.round(Math.min(effectiveMax, Math.max(minWidth, width)));
+    },
+    [minWidth, maxWidth],
+  );
+
+  const handleMouseDown: MouseEventHandler = useCallback(
+    (e) => {
+      if (!isResizable || isDragging) return;
+
+      cleanupRef.current?.();
+      setIsDragging(true);
+
+      startWidthRef.current = baseWidth ?? SidebarWidthInPx.MIN_DEFAULT;
+      startXRef.current = e.clientX;
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        const delta =
+          side === 'right'
+            ? startXRef.current - moveEvent.clientX
+            : moveEvent.clientX - startXRef.current;
+        setDragWidth(clampToRange(startWidthRef.current + delta));
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        const delta =
+          side === 'right'
+            ? startXRef.current - upEvent.clientX
+            : upEvent.clientX - startXRef.current;
+        onWidthChange?.(clampToRange(startWidthRef.current + delta));
+        setIsDragging(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        cleanupRef.current = null;
+      };
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      cleanupRef.current = () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        setIsDragging(false);
+        setDragWidth(null);
+      };
+    },
+    [
+      isResizable,
+      isDragging,
+      side,
+      onWidthChange,
+      baseWidth,
+      setIsDragging,
+      setDragWidth,
+      clampToRange,
+    ],
+  );
+
+  const handleDoubleClick = useCallback(() => {
+    onWidthChange?.(minWidth);
+  }, [onWidthChange, minWidth]);
+
+  return {
+    handleProps: {
+      onMouseDown: handleMouseDown,
+      onDoubleClick: handleDoubleClick,
+    },
+    isDragging,
+    isResizable,
+  };
+};

package/src/components/Sidebar/utils.test.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+
+import { calcEffectiveWidths } from './utils';
+
+type Input = Parameters<typeof calcEffectiveWidths>[0];
+
+const BASE: Input = {
+  mode: 'expanded',
+  state: 'expanded',
+  collapsible: 'icon',
+  variant: 'inset',
+};
+
+describe(calcEffectiveWidths.name, () => {
+  // ─────────────────────────────────────────────────────────────────────────
+  // sidebarWidth — the CSS width applied to the sidebar wrapper div
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('sidebarWidth', () => {
+    describe('variant padding', () => {
+      it('inset → no padding (0 sides)', () => {
+        expect(calcEffectiveWidths({ ...BASE, state: 'expanded' }).sidebar).toBe(256);
+      });
+
+      it('sided-floating → +8px (1 side)', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, variant: 'sided-floating', state: 'expanded' }).sidebar,
+        ).toBe(264);
+      });
+
+      it('floating → +16px (2 sides)', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, variant: 'floating', state: 'expanded' }).sidebar,
+        ).toBe(272);
+      });
+    });
+
+    describe('width clamping to MIN_DEFAULT (256)', () => {
+      it('no width provided → 256', () => {
+        expect(calcEffectiveWidths({ ...BASE }).sidebar).toBe(256);
+      });
+
+      it('width below minimum → clamped to 256', () => {
+        expect(calcEffectiveWidths({ ...BASE, width: 100 }).sidebar).toBe(256);
+      });
+
+      it('width above minimum → used as-is', () => {
+        expect(calcEffectiveWidths({ ...BASE, width: 400 }).sidebar).toBe(400);
+      });
+
+      it('custom width + variant padding combined', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, width: 400, variant: 'sided-floating' }).sidebar,
+        ).toBe(408);
+      });
+    });
+
+    describe('icon collapsible: state controls which width is used', () => {
+      it('expanded → full expanded width', () => {
+        expect(calcEffectiveWidths({ ...BASE, state: 'expanded' }).sidebar).toBe(256);
+      });
+
+      it('collapsed → icon strip width (52px base)', () => {
+        expect(calcEffectiveWidths({ ...BASE, state: 'collapsed' }).sidebar).toBe(52);
+      });
+
+      it('collapsed + floating → icon strip + padding', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, state: 'collapsed', variant: 'floating' }).sidebar,
+        ).toBe(68); // 52 + 16
+      });
+    });
+
+    describe('off-canvas collapsible: always full expanded width', () => {
+      // Hiding is done via CSS translate, not by shrinking width, to support transitions
+      it('expanded → full width', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'expanded' }).sidebar,
+        ).toBe(256);
+      });
+
+      it('collapsed → still full width (CSS translate hides it)', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'collapsed' }).sidebar,
+        ).toBe(256);
+      });
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // gapWidth — the empty gap reserved in the page layout beside the sidebar
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('gapWidth', () => {
+    describe('icon collapsible', () => {
+      it('expand-on-hover → always icon width regardless of state', () => {
+        // Keeps layout stable while the sidebar visually hovers over content on expand
+        expect(
+          calcEffectiveWidths({ ...BASE, mode: 'expand-on-hover', state: 'expanded' }).gap,
+        ).toBe(52);
+      });
+
+      it('any other mode, expanded → sidebarWidth', () => {
+        expect(calcEffectiveWidths({ ...BASE, mode: 'expanded', state: 'expanded' }).gap).toBe(256);
+      });
+
+      it('any other mode, collapsed → sidebarWidth (= icon width)', () => {
+        expect(calcEffectiveWidths({ ...BASE, mode: 'collapsed', state: 'collapsed' }).gap).toBe(
+          52,
+        );
+      });
+    });
+
+    describe('off-canvas collapsible: gap is state-driven, mode is ignored', () => {
+      // When collapsed the gap closes so page content fills the space;
+      // the sidebar itself hides via CSS translate (not via gap shrinking)
+      it('collapsed → 0', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'collapsed' }).gap,
+        ).toBe(8);
+      });
+
+      it('expanded → full sidebar width', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'expanded' }).gap,
+        ).toBe(256);
+      });
+    });
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // fillWidth — used by the *opposite* sidebar when it fills the content area:
+  //   opposite fill width = calc(100svw - fillWidth)
+  // One FLOATING_VARIANT_PADDING (8px) is always subtracted so the filling
+  // sidebar overlaps the floating inner-side margin of the opposite sidebar.
+  // ─────────────────────────────────────────────────────────────────────────
+  describe('fillWidth', () => {
+    describe('icon collapsible: inset has no reduction, floating variants subtract 8', () => {
+      it('inset, expanded → gap with no reduction', () => {
+        expect(calcEffectiveWidths({ ...BASE, state: 'expanded' }).fill).toBe(256); // gap 256, no reduction for inset
+      });
+
+      it('inset, collapsed → icon gap with no reduction', () => {
+        expect(calcEffectiveWidths({ ...BASE, state: 'collapsed' }).fill).toBe(52); // gap 52, no reduction for inset
+      });
+
+      it('sided-floating, expanded → gap - 8', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, variant: 'sided-floating', state: 'expanded' }).fill,
+        ).toBe(256); // 264 - 8
+      });
+
+      it('floating, collapsed → icon gap - 8', () => {
+        expect(calcEffectiveWidths({ ...BASE, variant: 'floating', state: 'collapsed' }).fill).toBe(
+          60,
+        ); // 68 - 8
+      });
+
+      it('expand-on-hover, expanded → stays at icon fill width (no reduction for inset)', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, mode: 'expand-on-hover', state: 'expanded' }).fill,
+        ).toBe(52); // iconWidth 52, no reduction for inset
+      });
+    });
+
+    describe('off-canvas collapsible: inset has no reduction', () => {
+      it('expanded → gap with no reduction', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'expanded' }).fill,
+        ).toBe(256); // gap 256, no reduction for inset
+      });
+
+      it('collapsed → FLOATING_VARIANT_PADDING with no reduction', () => {
+        expect(
+          calcEffectiveWidths({ ...BASE, collapsible: 'off-canvas', state: 'collapsed' }).fill,
+        ).toBe(8); // gap 8, no reduction for inset
+      });
+    });
+  });
+});

package/src/components/Sidebar/utils.ts

@@ -0,0 +1,70 @@
+import type { SidebarCollapsible, SidebarMode, SidebarState, SidebarVariant } from './types';
+
+export const SidebarWidthInPx = {
+  MIN_DEFAULT: 256,
+
+  // 8 px / 36 px / 8 px = 52 px
+  // left padding / icon width / right padding
+  COLLAPSED_ICON: 52,
+
+  // padding from every side for floating variant (see --sidebar-floating-padding)
+  FLOATING_VARIANT_PADDING: 8,
+} as const;
+
+const floatingSideCount: Record<SidebarVariant, number> = {
+  'sided-floating': 1,
+  floating: 2,
+  inset: 0,
+  none: 0,
+};
+
+type Input = {
+  variant: SidebarVariant;
+  width?: number;
+  collapsible: SidebarCollapsible;
+  mode: SidebarMode;
+  state: SidebarState;
+};
+
+type EffectiveWidths = {
+  sidebar: number;
+  gap: number;
+  fill: number;
+};
+
+export const calcEffectiveWidths = ({
+  variant,
+  width: customWidth,
+  collapsible,
+  state,
+  mode,
+}: Input) => {
+  if (variant === 'none') return { sidebar: 0, gap: 0, fill: 0 };
+
+  const padding = floatingSideCount[variant] * SidebarWidthInPx.FLOATING_VARIANT_PADDING;
+  const width = Math.max(customWidth ?? 0, SidebarWidthInPx.MIN_DEFAULT) + padding;
+  const iconWidth = SidebarWidthInPx.COLLAPSED_ICON + padding;
+  const isExpanded = state === 'expanded';
+
+  // Only compensate for floating padding when this sidebar itself has padding,
+  // so the opposite filled sidebar doesn't double-count the gap.
+  const reduction = variant === 'inset' ? 0 : SidebarWidthInPx.FLOATING_VARIANT_PADDING;
+
+  const iconWidths = ((): EffectiveWidths => {
+    const sidebar = isExpanded ? width : iconWidth;
+    const gap = mode === 'expand-on-hover' ? iconWidth : sidebar;
+    // Use gap (not sidebar) so the opposite filled sidebar stays stable
+    // during expand-on-hover — gap stays at iconWidth while sidebar grows
+    const fill = gap - reduction;
+    return { sidebar, gap, fill };
+  })();
+
+  const offCanvasWidths = ((): EffectiveWidths => {
+    const sidebar = width; //We use CSS translate to hide elements because it allows for transitions without shrinking the width.
+    const gap = isExpanded ? width : SidebarWidthInPx.FLOATING_VARIANT_PADDING; // The gap is invisible and needs to be shrunk to move the content to its place.
+    const fill = gap - reduction;
+    return { sidebar, gap, fill };
+  })();
+
+  return collapsible === 'icon' ? iconWidths : offCanvasWidths;
+};