@hyphen/hyphen-components 7.3.0 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Sidebar/Sidebar.test.tsx

@@ -1,6 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { Sidebar, SidebarProvider, SidebarTrigger } from './Sidebar';
+import {
+  Sidebar,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from './Sidebar';
 
 jest.mock('../../hooks/useIsMobile/useIsMobile', () => ({
   useIsMobile: () => false,
@@ -71,6 +76,54 @@ describe('Sidebar', () => {
     expect(rightSidebar).toHaveAttribute('data-state', 'collapsed');
   });
 
+  test('toggles left sidebar with keyboard shortcut', () => {
+    render(
+      <SidebarProvider>
+        <Sidebar side="left">
+          <div>Left</div>
+        </Sidebar>
+        <Sidebar side="right">
+          <div>Right</div>
+        </Sidebar>
+        <SidebarTrigger side="left" data-testid="left-trigger" />
+        <SidebarTrigger side="right" data-testid="right-trigger" />
+      </SidebarProvider>
+    );
+
+    const leftSidebar = document.querySelector(
+      '[data-side="left"]'
+    ) as HTMLElement;
+
+    expect(leftSidebar).toHaveAttribute('data-state', 'expanded');
+
+    fireEvent.keyDown(window, { key: '[' });
+    expect(leftSidebar).toHaveAttribute('data-state', 'collapsed');
+  });
+
+  test('toggles right sidebar with keyboard shortcut', () => {
+    render(
+      <SidebarProvider>
+        <Sidebar side="left">
+          <div>Left</div>
+        </Sidebar>
+        <Sidebar side="right">
+          <div>Right</div>
+        </Sidebar>
+        <SidebarTrigger side="left" data-testid="left-trigger" />
+        <SidebarTrigger side="right" data-testid="right-trigger" />
+      </SidebarProvider>
+    );
+
+    const rightSidebar = document.querySelector(
+      '[data-side="right"]'
+    ) as HTMLElement;
+
+    expect(rightSidebar).toHaveAttribute('data-state', 'expanded');
+
+    fireEvent.keyDown(window, { key: ']' });
+    expect(rightSidebar).toHaveAttribute('data-state', 'collapsed');
+  });
+
   test('calls onOpenChange callback when sidebar state changes', () => {
     const onOpenChange = jest.fn();
     render(
@@ -84,4 +137,65 @@ describe('Sidebar', () => {
     fireEvent.click(screen.getByTestId('left-trigger'));
     expect(onOpenChange).toHaveBeenCalledWith(true, 'left');
   });
+
+  test.each([
+    ['input', <input aria-label="input-field" />],
+    ['textarea', <textarea aria-label="textarea-field" />],
+    ['select', <select aria-label="select-field" />],
+    ['contenteditable', <div aria-label="editable-field" contentEditable />],
+  ])('ignores keyboard shortcuts for %s elements', (label, field) => {
+    render(
+      <SidebarProvider>
+        <Sidebar side="left">
+          <div>Left</div>
+        </Sidebar>
+        {field}
+      </SidebarProvider>
+    );
+
+    const leftSidebar = document.querySelector(
+      '[data-side="left"]'
+    ) as HTMLElement;
+
+    expect(leftSidebar).toHaveAttribute('data-state', 'expanded');
+
+    const target = screen.getByLabelText(/field/) as HTMLElement;
+    if (label === 'contenteditable') {
+      Object.defineProperty(target, 'isContentEditable', {
+        configurable: true,
+        value: true,
+      });
+    }
+    fireEvent.keyDown(target, { key: '[' });
+    expect(leftSidebar).toHaveAttribute('data-state', 'expanded');
+  });
+
+  test('avoids re-rendering right consumers when left toggles', () => {
+    const onRender = jest.fn();
+    const RightConsumer = React.memo(
+      ({ onRender: onRenderProp }: { onRender: jest.Mock }) => {
+        useSidebar('right');
+        onRenderProp();
+        return null;
+      }
+    );
+
+    render(
+      <SidebarProvider>
+        <Sidebar side="left" />
+        <Sidebar side="right" />
+        <RightConsumer onRender={onRender} />
+        <SidebarTrigger side="left" data-testid="left-trigger" />
+        <SidebarTrigger side="right" data-testid="right-trigger" />
+      </SidebarProvider>
+    );
+
+    expect(onRender).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByTestId('left-trigger'));
+    expect(onRender).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByTestId('right-trigger'));
+    expect(onRender).toHaveBeenCalledTimes(2);
+  });
 });

package/src/components/Sidebar/Sidebar.tsx

@@ -22,8 +22,10 @@ import {
 } from '../Tooltip/Tooltip';
 
 const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_RIGHT_WIDTH = '24rem';
 const SIDEBAR_WIDTH_ICON = '44px';
-const SIDEBAR_KEYBOARD_SHORTCUT = '[';
+const SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
+const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
 
 type SidebarSide = 'left' | 'right';
 
@@ -42,12 +44,13 @@ interface SidebarContextSideState {
   toggleSidebar: () => void;
 }
 
-interface SidebarContextProps {
-  isMobile: boolean;
-  sides: Record<SidebarSide, SidebarContextSideState>;
-}
-
-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 = (
@@ -99,6 +102,38 @@ const resolveStorageKey = (
   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,
@@ -182,15 +217,21 @@ const useSidebarSideState = ({
 };
 
 function useSidebar(sideOverride?: SidebarSide) {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
+  const isMobile = React.useContext(SidebarIsMobileContext);
+  if (typeof isMobile !== 'boolean') {
     throw new Error('useSidebar must be used within a SidebarProvider.');
   }
   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 {
-    ...context.sides[side],
-    isMobile: context.isMobile,
+    ...sideContext,
+    isMobile,
     side,
   };
 }
@@ -219,6 +260,12 @@ const SidebarProvider = forwardRef<
   ) => {
     const isMobile = useIsMobile();
     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,
@@ -238,54 +285,77 @@ const SidebarProvider = forwardRef<
       lastToggledSideRef,
     });
 
-    // Keydown event handler for toggling sidebar
+    useEffect(() => {
+      leftToggleRef.current = leftState.toggleSidebar;
+    }, [leftState.toggleSidebar]);
+
+    useEffect(() => {
+      rightToggleRef.current = rightState.toggleSidebar;
+    }, [rightState.toggleSidebar]);
+
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT) {
-          event.preventDefault();
-          const sideToToggle = lastToggledSideRef.current;
-          (sideToToggle === 'left' ? leftState : rightState).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);
-    }, [leftState, rightState]);
-
-    const contextValue = useMemo<SidebarContextProps>(
-      () => ({
-        isMobile,
-        sides: {
-          left: leftState,
-          right: rightState,
-        },
-      }),
-      [isMobile, leftState, rightState]
-    );
+    }, []);
 
     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 overflow-hidden',
+                  className
+                )}
+                ref={ref}
+                {...props}
+              >
+                {children}
+              </div>
+            </TooltipProvider>
+          </SidebarRightContext.Provider>
+        </SidebarLeftContext.Provider>
+      </SidebarIsMobileContext.Provider>
     );
   }
 );
@@ -303,6 +373,7 @@ const Sidebar = React.forwardRef<
     ref
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar(side);
+    const sidebarWidth = side === 'right' ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
 
     if (isMobile) {
       return (
@@ -328,9 +399,12 @@ const Sidebar = React.forwardRef<
               'group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base',
               className
             )}
-            style={{
-              width: 'var(--sidebar-width)',
-            }}
+            style={
+              {
+                '--sidebar-width': sidebarWidth,
+                width: 'var(--sidebar-width)',
+              } as React.CSSProperties
+            }
             ref={ref}
             {...props}
           >
@@ -350,9 +424,9 @@ const Sidebar = React.forwardRef<
           fontSize="sm"
           position="relative"
           style={
-            side === 'right' && collapsible === 'offcanvas'
-              ? { overflowX: 'hidden' }
-              : undefined
+            {
+              '--sidebar-width': sidebarWidth,
+            } as React.CSSProperties
           }
           data-state={state}
           data-collapsible={collapsible}
@@ -368,12 +442,7 @@ const Sidebar = React.forwardRef<
               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)',
+              width: getSidebarWidth(state, collapsible),
               height: '100svh',
             }}
             className={classNames('position-relative', className)}
@@ -384,20 +453,7 @@ const Sidebar = React.forwardRef<
               className
             )}
             style={{
-              left:
-                side === 'left' &&
-                (state === 'expanded' || collapsible === 'icon')
-                  ? '0'
-                  : side === 'left'
-                  ? 'calc(var(--sidebar-width)*-1)'
-                  : undefined,
-              right:
-                side === 'right' &&
-                (state === 'expanded' || collapsible === 'icon')
-                  ? '0'
-                  : side === 'right'
-                  ? 'calc(var(--sidebar-width)*-1)'
-                  : undefined,
+              ...getSidebarOffsetStyles(side, state, collapsible),
               top: '0',
               bottom: '0',
               zIndex: 'var(--size-z-index-drawer)',
@@ -759,6 +815,10 @@ const SidebarRail = React.forwardRef<
   React.ComponentProps<'button'>
 >(({ className, ...props }, ref) => {
   const { open, toggleSidebar, side } = useSidebar();
+  const shortcutLabel =
+    side === 'left'
+      ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT
+      : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
 
   const caretIcon = open
     ? side === 'right'
@@ -775,7 +835,7 @@ 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',
@@ -791,9 +851,10 @@ const SidebarRail = React.forwardRef<
         top: '20px',
         bottom: '20px',
         right: side === 'left' ? '-14px' : undefined,
-        left: side === 'right' ? '-14px' : undefined,
+        left: side === 'right' ? '-18px' : undefined,
         width: '10px',
       }}
+      type="button"
       {...props}
     >
       <Box