@keboola/design 2.0.1 → 2.1.0

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

@@ -1,179 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

package/src/components/Sidebar/types.ts

@@ -1,6 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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;
-};