@hyphen/hyphen-components 7.2.0 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.2.0",
+  "version": "7.3.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -124,7 +124,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "sass": "^1.77.8",
     "sass-loader": "^13.3.3",
-    "semantic-release": "^23.1.1",
+    "semantic-release": "^25.0.2",
     "size-limit": "^11.2.0",
     "storybook": "^9.1.3",
     "ts-jest": "^29.4.6",

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -184,14 +184,116 @@ export const SidebarExample = () => {
             </Box>
           )}
           <Card height="100" padding="2xl">
-            content
+            <SidebarTrigger />
+          </Card>
+        </SidebarInset>
+      </SidebarProvider>
+    </ResponsiveProvider>
+  );
+};
+
+export const SidebarRightExample = () => {
+  const [activeTeam, setActiveTeam] = React.useState(data.teams[0]);
+  const isMobile = useIsMobile();
+
+  const STORAGE_KEY = 'sidebar_right_expanded_storybook';
+
+  const startExpanded = localStorage.getItem(STORAGE_KEY) !== 'false';
+
+  return (
+    <ResponsiveProvider>
+      <SidebarProvider
+        storageKey={{ right: STORAGE_KEY }}
+        defaultOpen={startExpanded}
+      >
+        <SidebarInset>
+          {isMobile && (
+            <Box direction="row" gap="sm" alignItems="center">
+              <SidebarTrigger side="right" iconName="cpu" />
+              <CreateMenu />
+            </Box>
+          )}
+          <Card height="100" padding="2xl">
+            <Box alignItems="flex-end" width="100">
+              <SidebarTrigger side="right" iconName="cpu" />
+            </Box>
+          </Card>
+        </SidebarInset>
+        <Sidebar side="right" collapsible="offcanvas">
+          <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
+          <SidebarContent>
+            <Box width="100" background="inverse" color="inverse">
+              content
+            </Box>
+          </SidebarContent>
+          <NavFooter />
+          <SidebarRail />
+        </Sidebar>
+      </SidebarProvider>
+    </ResponsiveProvider>
+  );
+};
+
+export const SidebarBothSides = () => {
+  const [activeTeam, setActiveTeam] = React.useState(data.teams[0]);
+  const isMobile = useIsMobile();
+
+  const STORAGE_KEY = 'sidebar_dual_expanded_storybook';
+
+  return (
+    <ResponsiveProvider>
+      <SidebarProvider storageKey={STORAGE_KEY} defaultOpen>
+        <Sidebar side="left" collapsible="icon">
+          <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
+          <SidebarContent>
+            <NavMain items={data.items} />
+            <NavFavorites favorites={data.favorites} />
+          </SidebarContent>
+          <NavFooter />
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          {isMobile && (
+            <Box width="100" direction="row" gap="sm" alignItems="center">
+              <Box flex="auto" direction="row" gap="sm" alignItems="center">
+                <SidebarTrigger side="left" />
+                <CreateMenu />
+              </Box>
+              <SidebarTrigger side="right" iconName="cpu" />
+            </Box>
+          )}
+          <Card height="100" padding="2xl">
+            <SidebarTrigger />
+            <SidebarTrigger side="right" iconName="cpu" />
+            <ContextContents />
           </Card>
         </SidebarInset>
+        <Sidebar side="right" collapsible="offcanvas">
+          <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
+          <SidebarContent>
+            <NavMain items={data.items} />
+            <NavFavorites favorites={data.favorites} />
+          </SidebarContent>
+          <NavFooter />
+          <SidebarRail />
+        </Sidebar>
       </SidebarProvider>
     </ResponsiveProvider>
   );
 };
 
+const ContextContents = () => {
+  const leftState = useSidebar('left');
+  const rightState = useSidebar('right');
+
+  return (
+    <Box direction="column" gap="sm">
+      <span>Left: {leftState.state}</span>
+      <span>Right: {rightState.state}</span>
+    </Box>
+  );
+};
+
 export const SidebarCollapsed = () => {
   const STORAGE_KEY = 'sidebar_collapsed';
 
@@ -521,6 +623,7 @@ function CreateMenu() {
           background="primary"
           cursor="pointer"
           shadow="xs"
+          aria-label="Create new item..."
         >
           <Icon name="add" />
         </Box>

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,
@@ -13,14 +18,184 @@ describe('Sidebar', () => {
         <Sidebar data-testid="sidebar">
           <div>Content</div>
         </Sidebar>
-        <SidebarTrigger />
+        <SidebarTrigger side="left" />
       </SidebarProvider>
     );
 
     const sidebar = document.querySelector('[data-state]') as HTMLElement;
     expect(sidebar).toHaveAttribute('data-state', 'expanded');
 
-    fireEvent.click(screen.getByLabelText('toggle sidebar'));
+    fireEvent.click(screen.getByLabelText('Toggle left sidebar'));
     expect(sidebar).toHaveAttribute('data-state', 'collapsed');
   });
+
+  test('supports right side placement', () => {
+    render(
+      <SidebarProvider>
+        <Sidebar side="right">
+          <div>Content</div>
+        </Sidebar>
+      </SidebarProvider>
+    );
+
+    const sidebar = document.querySelector(
+      '[data-side="right"]'
+    ) as HTMLElement;
+    expect(sidebar).toBeInTheDocument();
+  });
+
+  test('tracks left and right sidebars independently', () => {
+    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;
+    const rightSidebar = document.querySelector(
+      '[data-side="right"]'
+    ) as HTMLElement;
+
+    expect(leftSidebar).toHaveAttribute('data-state', 'expanded');
+    expect(rightSidebar).toHaveAttribute('data-state', 'expanded');
+
+    fireEvent.click(screen.getByTestId('left-trigger'));
+    expect(leftSidebar).toHaveAttribute('data-state', 'collapsed');
+    expect(rightSidebar).toHaveAttribute('data-state', 'expanded');
+
+    fireEvent.click(screen.getByTestId('right-trigger'));
+    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(
+      <SidebarProvider onOpenChange={onOpenChange}>
+        <Sidebar side="left" />
+        <SidebarTrigger side="left" data-testid="left-trigger" />
+      </SidebarProvider>
+    );
+    fireEvent.click(screen.getByTestId('left-trigger'));
+    expect(onOpenChange).toHaveBeenCalledWith(false, 'left');
+    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);
+  });
 });