@hyphen/hyphen-components 7.2.0 → 7.3.1

package/src/components/Sidebar/Sidebar.tsx

@@ -23,35 +23,225 @@ import {
 
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_ICON = '44px';
-const SIDEBAR_KEYBOARD_SHORTCUT = '[';
+const SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
+const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
 
-interface SidebarContextProps {
+type SidebarSide = 'left' | 'right';
+
+type SidebarOpenState = Record<SidebarSide, boolean>;
+
+type SidebarOpenValue = boolean | Partial<SidebarOpenState>;
+
+type SidebarStorageKey = string | Partial<Record<SidebarSide, string>>;
+
+interface SidebarContextSideState {
   state: 'expanded' | 'collapsed';
   open: boolean;
-  setOpen: (open: boolean) => void;
+  setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
   openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
+  setOpenMobile: (open: boolean | ((open: boolean) => boolean)) => void;
   toggleSidebar: () => void;
 }
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+const SidebarIsMobileContext = React.createContext<boolean | null>(null);
+const SidebarLeftContext = React.createContext<SidebarContextSideState | null>(
+  null
+);
+const SidebarRightContext = React.createContext<SidebarContextSideState | null>(
+  null
+);
+const SidebarSideContext = React.createContext<SidebarSide>('left');
+
+const resolveSideValue = (
+  value: SidebarOpenValue | undefined,
+  side: SidebarSide,
+  fallback: boolean
+) => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (value && typeof value === 'object' && typeof value[side] === 'boolean') {
+    return value[side] as boolean;
+  }
+
+  return fallback;
+};
+
+const resolveControlledOpen = (
+  value: SidebarOpenValue | undefined,
+  side: SidebarSide
+) => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (value && typeof value === 'object' && typeof value[side] === 'boolean') {
+    return value[side] as boolean;
+  }
+
+  return undefined;
+};
+
+const resolveStorageKey = (
+  storageKey: SidebarStorageKey,
+  side: SidebarSide
+) => {
+  if (typeof storageKey === 'string') {
+    return side === 'left' ? storageKey : `${storageKey}_right`;
+  }
+
+  if (storageKey && typeof storageKey === 'object') {
+    return (
+      storageKey[side] ??
+      (side === 'left' ? 'sidebar_expanded' : 'sidebar_expanded_right')
+    );
+  }
+
+  return side === 'left' ? 'sidebar_expanded' : 'sidebar_expanded_right';
+};
+
+const getSidebarWidth = (
+  state: SidebarContextSideState['state'],
+  collapsible: 'offcanvas' | 'icon' | 'none'
+) =>
+  state === 'collapsed' && collapsible === 'icon'
+    ? 'var(--sidebar-width-icon)'
+    : state === 'collapsed'
+    ? '0'
+    : 'var(--sidebar-width)';
+
+const getSidebarOffsetStyles = (
+  side: SidebarSide,
+  state: SidebarContextSideState['state'],
+  collapsible: 'offcanvas' | 'icon' | 'none'
+) => {
+  const isVisible = state === 'expanded' || collapsible === 'icon';
+  return {
+    left:
+      side === 'left'
+        ? isVisible
+          ? '0'
+          : 'calc(var(--sidebar-width)*-1)'
+        : undefined,
+    right:
+      side === 'right'
+        ? isVisible
+          ? '0'
+          : 'calc(var(--sidebar-width)*-1)'
+        : undefined,
+  };
+};
+
+const useSidebarSideState = ({
+  side,
+  isMobile,
+  defaultOpen,
+  openProp,
+  onOpenChange,
+  storageKey,
+  lastToggledSideRef,
+}: {
+  side: SidebarSide;
+  isMobile: boolean;
+  defaultOpen: SidebarOpenValue | undefined;
+  openProp: SidebarOpenValue | undefined;
+  onOpenChange?: (open: boolean, side?: SidebarSide) => void;
+  storageKey: SidebarStorageKey;
+  lastToggledSideRef: React.MutableRefObject<SidebarSide>;
+}): SidebarContextSideState => {
+  const defaultFallback = typeof defaultOpen === 'boolean' ? defaultOpen : true;
+  const initialDefaultOpen = resolveSideValue(
+    defaultOpen,
+    side,
+    defaultFallback
+  );
+  const controlledOpen = resolveControlledOpen(openProp, side);
+  const isControlled = typeof controlledOpen === 'boolean';
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    controlledOpen ?? initialDefaultOpen
+  );
+  const [openMobile, setOpenMobile] = useState(() =>
+    isMobile ? false : controlledOpen ?? initialDefaultOpen
+  );
+
+  const open = controlledOpen ?? uncontrolledOpen;
+
+  useEffect(() => {
+    if (isMobile) {
+      setOpenMobile(false);
+    } else {
+      setUncontrolledOpen(controlledOpen ?? initialDefaultOpen);
+    }
+  }, [isMobile, controlledOpen, initialDefaultOpen]);
+
+  const setOpen = useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const newOpenState = typeof value === 'function' ? value(open) : value;
+      if (newOpenState === open) {
+        return;
+      }
+
+      if (!isControlled) {
+        setUncontrolledOpen(newOpenState);
+      }
+
+      onOpenChange?.(newOpenState, side);
+
+      const key = resolveStorageKey(storageKey, side);
+      localStorage.setItem(key, `${newOpenState}`);
+    },
+    [open, isControlled, onOpenChange, side, storageKey]
+  );
+
+  const toggleSidebar = useCallback(() => {
+    lastToggledSideRef.current = side;
+    isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
+  }, [isMobile, setOpen, side, lastToggledSideRef]);
+
+  const state = open ? 'expanded' : 'collapsed';
+
+  return useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, openMobile, setOpenMobile, toggleSidebar]
+  );
+};
 
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
+function useSidebar(sideOverride?: SidebarSide) {
+  const isMobile = React.useContext(SidebarIsMobileContext);
+  if (typeof isMobile !== 'boolean') {
     throw new Error('useSidebar must be used within a SidebarProvider.');
   }
-  return context;
+  const contextSide = React.useContext(SidebarSideContext);
+  const side = sideOverride ?? contextSide;
+  const sideContext = React.useContext(
+    side === 'left' ? SidebarLeftContext : SidebarRightContext
+  );
+  if (!sideContext) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return {
+    ...sideContext,
+    isMobile,
+    side,
+  };
 }
 
 const SidebarProvider = forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    storageKey?: string;
-    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: SidebarOpenValue;
+    open?: SidebarOpenValue;
+    storageKey?: SidebarStorageKey;
+    onOpenChange?: (open: boolean, side?: SidebarSide) => void;
   }
 >(
   (
@@ -68,97 +258,103 @@ const SidebarProvider = forwardRef<
     ref
   ) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = useState(() =>
-      isMobile ? false : openProp ?? defaultOpen
-    );
-
-    // Manages sidebar open state with a fallback to internal state when openProp is not provided
-    const [_open, _setOpen] = useState(openProp ?? defaultOpen);
-    const open = openProp ?? _open;
+    const lastToggledSideRef = React.useRef<SidebarSide>('left');
+    const leftToggleRef = React.useRef<
+      SidebarContextSideState['toggleSidebar'] | null
+    >(null);
+    const rightToggleRef = React.useRef<
+      SidebarContextSideState['toggleSidebar'] | null
+    >(null);
+    const leftState = useSidebarSideState({
+      side: 'left',
+      isMobile,
+      defaultOpen,
+      openProp,
+      onOpenChange: setOpenProp,
+      storageKey,
+      lastToggledSideRef,
+    });
+    const rightState = useSidebarSideState({
+      side: 'right',
+      isMobile,
+      defaultOpen,
+      openProp,
+      onOpenChange: setOpenProp,
+      storageKey,
+      lastToggledSideRef,
+    });
 
-    // Update open state when openProp or isMobile changes
     useEffect(() => {
-      if (isMobile) {
-        setOpenMobile(false); // Always start closed on mobile
-      } else {
-        _setOpen(openProp ?? defaultOpen); // Use desktop state
-      }
-    }, [isMobile, openProp, defaultOpen]);
-
-    const setOpen = useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const newOpenState = typeof value === 'function' ? value(open) : value;
-
-        if (newOpenState !== open) {
-          if (setOpenProp) {
-            setOpenProp(newOpenState);
-          } else {
-            _setOpen(newOpenState);
-          }
-
-          localStorage.setItem(storageKey, `${newOpenState}`);
-        }
-      },
-      [setOpenProp, open, storageKey]
-    );
+      leftToggleRef.current = leftState.toggleSidebar;
+    }, [leftState.toggleSidebar]);
 
-    // Toggle sidebar based on screen type
-    const toggleSidebar = useCallback(() => {
-      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+    useEffect(() => {
+      rightToggleRef.current = rightState.toggleSidebar;
+    }, [rightState.toggleSidebar]);
 
-    // Keydown event handler for toggling sidebar
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT) {
-          event.preventDefault();
-          toggleSidebar();
+        const target = event.target as HTMLElement | null;
+        if (
+          target &&
+          (target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.tagName === 'SELECT' ||
+            target.isContentEditable)
+        ) {
+          return;
+        }
+        const shortcutSide =
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT_LEFT
+            ? 'left'
+            : event.key === SIDEBAR_KEYBOARD_SHORTCUT_RIGHT
+            ? 'right'
+            : null;
+
+        if (!shortcutSide) {
+          return;
         }
+
+        event.preventDefault();
+
+        const toggleSidebar =
+          shortcutSide === 'left'
+            ? leftToggleRef.current
+            : rightToggleRef.current;
+        toggleSidebar?.();
       };
 
       window.addEventListener('keydown', handleKeyDown);
       return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [toggleSidebar]);
-
-    // Assign state for data attributes
-    const state = open ? 'expanded' : 'collapsed';
-
-    const contextValue = useMemo<SidebarContextProps>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    );
+    }, []);
 
     return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                '--sidebar-width': SIDEBAR_WIDTH,
-                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-                minBlockSize: '100svh',
-                ...style,
-              } as React.CSSProperties
-            }
-            className={classNames(
-              'display-flex w-100 background-color-secondary',
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
+      <SidebarIsMobileContext.Provider value={isMobile}>
+        <SidebarLeftContext.Provider value={leftState}>
+          <SidebarRightContext.Provider value={rightState}>
+            <TooltipProvider delayDuration={0}>
+              <div
+                style={
+                  {
+                    '--sidebar-width': SIDEBAR_WIDTH,
+                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    minBlockSize: '100svh',
+                    ...style,
+                  } as React.CSSProperties
+                }
+                className={classNames(
+                  'display-flex w-100 background-color-secondary',
+                  className
+                )}
+                ref={ref}
+                {...props}
+              >
+                {children}
+              </div>
+            </TooltipProvider>
+          </SidebarRightContext.Provider>
+        </SidebarLeftContext.Provider>
+      </SidebarIsMobileContext.Provider>
     );
   }
 );
@@ -167,7 +363,7 @@ SidebarProvider.displayName = 'SidebarProvider';
 const Sidebar = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & {
-    side?: 'left'; // no right sidebar yet
+    side?: 'left' | 'right';
     collapsible?: 'offcanvas' | 'icon' | 'none';
   }
 >(
@@ -175,106 +371,116 @@ const Sidebar = React.forwardRef<
     { side = 'left', collapsible = 'offcanvas', className, children, ...props },
     ref
   ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar(side);
 
     if (isMobile) {
       return (
-        <Drawer
-          isOpen={openMobile}
-          onDismiss={() => setOpenMobile(false)}
-          placement={side}
-        >
-          <Box data-sidebar="sidebar" data-mobile="true" height="100">
-            {children}
-          </Box>
-        </Drawer>
+        <SidebarSideContext.Provider value={side}>
+          <Drawer
+            isOpen={openMobile}
+            onDismiss={() => setOpenMobile(false)}
+            placement={side}
+          >
+            <Box data-sidebar="sidebar" data-mobile="true" height="100">
+              {children}
+            </Box>
+          </Drawer>
+        </SidebarSideContext.Provider>
       );
     }
 
     if (collapsible === 'none') {
       return (
-        <div
-          className={classNames(
-            'group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base',
-            className
-          )}
-          style={{
-            width: 'var(--sidebar-width)',
-          }}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
+        <SidebarSideContext.Provider value={side}>
+          <div
+            className={classNames(
+              'group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base',
+              className
+            )}
+            style={{
+              width: 'var(--sidebar-width)',
+            }}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </SidebarSideContext.Provider>
       );
     }
 
     return (
-      <Box
-        ref={ref}
-        background="primary"
-        display={{ base: 'none', desktop: 'block' }}
-        color="base"
-        fontSize="sm"
-        position="relative"
-        data-state={state}
-        data-collapsible={collapsible}
-        data-side={side}
-        className="group"
-      >
-        <div
-          style={{
-            animationTimingFunction: 'var(--sidebar-transition-timing, linear)',
-            transitionTimingFunction:
-              'var(--sidebar-transition-timing, linear)',
-            transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
-            animationDuration: 'var(--sidebar-transition-duration, 200ms)',
-            transitionProperty: 'width',
-            width:
-              state === 'collapsed' && collapsible === 'icon'
-                ? 'var(--sidebar-width-icon)'
-                : state === 'collapsed'
-                ? '0'
-                : 'var(--sidebar-width)',
-            height: '100svh',
-          }}
-          className={classNames('position-relative', className)}
-        />
-        <div
-          className={classNames(
-            'position-absolute display-none display-flex-desktop ',
-            className
-          )}
-          style={{
-            left:
-              state === 'expanded' || collapsible === 'icon'
-                ? '0'
-                : 'calc(var(--sidebar-width)*-1)',
-            top: '0',
-            bottom: '0',
-            zIndex: 'var(--size-z-index-drawer)',
-            animationTimingFunction: 'var(--sidebar-transition-timing, linear)',
-            transitionTimingFunction:
-              'var(--sidebar-transition-timing, linear)',
-            transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
-            animationDuration: 'var(--sidebar-transition-duration, 200ms)',
-            transitionProperty: 'left, right, width',
-            width:
-              state === 'collapsed' && collapsible === 'icon'
-                ? 'var(--sidebar-width-icon)'
-                : 'var(--sidebar-width)',
-            height: '100svh',
-          }}
-          {...props}
+      <SidebarSideContext.Provider value={side}>
+        <Box
+          ref={ref}
+          background="primary"
+          display={{ base: 'none', desktop: 'block' }}
+          color="base"
+          fontSize="sm"
+          position="relative"
+          style={
+            side === 'right' && collapsible === 'offcanvas'
+              ? { overflowX: 'hidden' }
+              : undefined
+          }
+          data-state={state}
+          data-collapsible={collapsible}
+          data-side={side}
+          className="group"
         >
           <div
-            data-sidebar="sidebar"
-            className="display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base"
+            style={{
+              animationTimingFunction:
+                'var(--sidebar-transition-timing, linear)',
+              transitionTimingFunction:
+                'var(--sidebar-transition-timing, linear)',
+              transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
+              animationDuration: 'var(--sidebar-transition-duration, 200ms)',
+              transitionProperty: 'width',
+              width: getSidebarWidth(state, collapsible),
+              height: '100svh',
+            }}
+            className={classNames('position-relative', className)}
+          />
+          <div
+            className={classNames(
+              'position-absolute display-none display-flex-desktop ',
+              className
+            )}
+            style={{
+              ...getSidebarOffsetStyles(side, state, collapsible),
+              top: '0',
+              bottom: '0',
+              zIndex: 'var(--size-z-index-drawer)',
+              animationTimingFunction:
+                'var(--sidebar-transition-timing, linear)',
+              transitionTimingFunction:
+                'var(--sidebar-transition-timing, linear)',
+              transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
+              animationDuration: 'var(--sidebar-transition-duration, 200ms)',
+              transitionProperty: 'left, right, width',
+              width:
+                state === 'collapsed' && collapsible === 'icon'
+                  ? 'var(--sidebar-width-icon)'
+                  : 'var(--sidebar-width)',
+              height: '100svh',
+            }}
+            {...props}
           >
-            {children}
+            <div
+              data-sidebar="sidebar"
+              className={classNames(
+                'display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base',
+                {
+                  'p-right-lg-desktop': side === 'right',
+                }
+              )}
+            >
+              {children}
+            </div>
           </div>
-        </div>
-      </Box>
+        </Box>
+      </SidebarSideContext.Provider>
     );
   }
 );
@@ -282,9 +488,12 @@ Sidebar.displayName = 'Sidebar';
 
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  React.ComponentProps<typeof Button> & {
+    side?: SidebarSide;
+    iconName?: IconName;
+  }
+>(({ className, onClick, side, iconName = 'dock-left', ...props }, ref) => {
+  const { toggleSidebar, side: contextSide } = useSidebar(side);
 
   return (
     <Button
@@ -292,13 +501,19 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="tertiary"
       size="sm"
-      iconPrefix="dock-left"
-      className={classNames('m-left-sm m-left-0-tablet', className)}
+      iconPrefix={iconName}
+      className={classNames(
+        {
+          'm-left-sm m-left-0-tablet': contextSide === 'left',
+          'm-right-sm m-right-0-tablet': contextSide === 'right',
+        },
+        className
+      )}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
-      aria-label="toggle sidebar"
+      aria-label={`Toggle ${contextSide} sidebar`}
       {...props}
     />
   );
@@ -429,7 +644,7 @@ const SidebarMenuButton = React.forwardRef<
     ref
   ) => {
     const Comp = asChild ? Slot : 'button';
-    const { isMobile, state } = useSidebar();
+    const { isMobile, state, side } = useSidebar();
 
     const button = (
       <Comp
@@ -464,7 +679,7 @@ const SidebarMenuButton = React.forwardRef<
       <Tooltip>
         <TooltipTrigger asChild>{button}</TooltipTrigger>
         <TooltipContent
-          side="right"
+          side={side === 'right' ? 'left' : 'right'}
           align="center"
           hidden={state !== 'collapsed' || isMobile}
           {...tooltip}
@@ -594,9 +809,19 @@ const SidebarRail = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<'button'>
 >(({ className, ...props }, ref) => {
-  const { open, toggleSidebar } = useSidebar();
-
-  const caretIcon = open ? 'caret-sm-left' : 'caret-sm-right';
+  const { open, toggleSidebar, side } = useSidebar();
+  const shortcutLabel =
+    side === 'left'
+      ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT
+      : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
+
+  const caretIcon = open
+    ? side === 'right'
+      ? 'caret-sm-right'
+      : 'caret-sm-left'
+    : side === 'right'
+    ? 'caret-sm-left'
+    : 'caret-sm-right';
 
   return (
     <button
@@ -605,20 +830,23 @@ const SidebarRail = React.forwardRef<
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
-      title="Toggle Sidebar ["
+      title={`Toggle Sidebar ${shortcutLabel}`}
       className={classNames(
         styles.rail,
         'hover-show-child background-color-transparent display-flex p-top-5xl p-left-xl p-right-0 justify-content-center position-absolute',
         {
-          'cursor-w-resize': open,
-          'cursor-e-resize': !open,
+          'cursor-w-resize':
+            (open && side === 'left') || (!open && side === 'right'),
+          'cursor-e-resize':
+            (!open && side === 'left') || (open && side === 'right'),
         },
         className
       )}
       style={{
         top: '20px',
         bottom: '20px',
-        right: '-14px',
+        right: side === 'left' ? '-14px' : undefined,
+        left: side === 'right' ? '-14px' : undefined,
         width: '10px',
       }}
       {...props}
@@ -638,8 +866,10 @@ const SidebarRail = React.forwardRef<
         className={classNames(
           'hover-child',
           {
-            'cursor-w-resize': open,
-            'cursor-e-resize': !open,
+            'cursor-w-resize':
+              (open && side === 'left') || (!open && side === 'right'),
+            'cursor-e-resize':
+              (!open && side === 'left') || (open && side === 'right'),
           },
           className
         )}