@hyphen/hyphen-components 7.3.2 → 7.3.4

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -1,23 +1,543 @@
-import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
 } from './DropdownMenu';
 
 describe('DropdownMenu', () => {
-  test('renders item when menu is open', () => {
-    render(
-      <DropdownMenu open>
-        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem>Item</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-
-    expect(screen.getByText('Item')).toBeInTheDocument();
+  describe('Basic rendering', () => {
+    test('renders item when menu is open', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Item')).toBeInTheDocument();
+    });
+
+    test('does not render content when menu is closed', () => {
+      render(
+        <DropdownMenu open={false}>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.queryByText('Item')).not.toBeInTheDocument();
+    });
+
+    test('renders trigger button', () => {
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Open Menu')).toBeInTheDocument();
+    });
+  });
+
+  describe('Opening and closing', () => {
+    test('opens menu when trigger is clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+      });
+    });
+
+    test('controlled open state works', () => {
+      const { rerender } = render(
+        <DropdownMenu open={false}>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      // Verify the menu starts closed
+      expect(screen.queryByText('Item')).not.toBeInTheDocument();
+
+      // Rerender with open = true
+      rerender(
+        <DropdownMenu open={true}>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Item')).toBeInTheDocument();
+    });
+  });
+
+  describe('Menu items', () => {
+    test('renders multiple menu items', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+            <DropdownMenuItem>Item 3</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+      expect(screen.getByText('Item 3')).toBeInTheDocument();
+    });
+
+    test('calls onSelect when item is clicked', async () => {
+      const handleSelect = jest.fn();
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={handleSelect}>
+              Clickable Item
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const item = screen.getByText('Clickable Item');
+      fireEvent.click(item);
+
+      expect(handleSelect).toHaveBeenCalled();
+    });
+
+    test('renders disabled menu items with correct styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem disabled>Disabled Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const item = screen.getByText('Disabled Item');
+      expect(item).toHaveClass('cursor-not-allowed', 'font-color-disabled');
+    });
+
+    test('does not call onSelect when disabled item is clicked', async () => {
+      const handleSelect = jest.fn();
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem disabled onSelect={handleSelect}>
+              Disabled Item
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const item = screen.getByText('Disabled Item');
+      fireEvent.click(item);
+
+      expect(handleSelect).not.toHaveBeenCalled();
+    });
+
+    test('renders item with inset styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem inset>Inset Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const item = screen.getByText('Inset Item');
+      expect(item).toHaveClass('p-left-md');
+    });
+
+    test('applies custom className to item', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem className="custom-class">
+              Custom Item
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const item = screen.getByText('Custom Item');
+      expect(item).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Menu label', () => {
+    test('renders menu label', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>Section Label</DropdownMenuLabel>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Section Label')).toBeInTheDocument();
+    });
+
+    test('renders label with inset styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel inset>Inset Label</DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const label = screen.getByText('Inset Label');
+      expect(label).toHaveClass('p-left-md');
+    });
+
+    test('applies custom className to label', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel className="custom-label-class">
+              Custom Label
+            </DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const label = screen.getByText('Custom Label');
+      expect(label).toHaveClass('custom-label-class');
+    });
+  });
+
+  describe('Menu separator', () => {
+    test('renders menu separator', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuSeparator data-testid="separator" />
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByTestId('separator')).toBeInTheDocument();
+    });
+
+    test('applies correct separator styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuSeparator data-testid="separator" />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const separator = screen.getByTestId('separator');
+      expect(separator).toHaveClass('h-2xs', 'm-v-xs', 'bw-top-sm');
+    });
+  });
+
+  describe('Menu shortcut', () => {
+    test('renders keyboard shortcut', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              Save
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('⌘S')).toBeInTheDocument();
+    });
+
+    test('applies shortcut styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <DropdownMenuShortcut data-testid="shortcut">
+                ⌘K
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const shortcut = screen.getByTestId('shortcut');
+      expect(shortcut).toHaveClass('m-left-auto', 'font-size-xs');
+    });
+  });
+
+  describe('Menu group', () => {
+    test('renders grouped items', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>Grouped Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Grouped Item 2</DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('Grouped Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Grouped Item 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Submenu', () => {
+    test('renders submenu trigger', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Sub Item</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(screen.getByText('More Options')).toBeInTheDocument();
+    });
+
+    test('submenu trigger has chevron icon', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Sub Item</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const subtrigger = screen
+        .getByText('More Options')
+        .closest('[role="menuitem"]');
+      // The Icon component uses data-testid with "icon-testid--" prefix
+      const icon = subtrigger?.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('renders submenu trigger with inset styling', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger inset>
+                Inset Submenu
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Sub Item</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const subtrigger = screen
+        .getByText('Inset Submenu')
+        .closest('[role="menuitem"]');
+      expect(subtrigger).toHaveClass('p-left-md');
+    });
+  });
+
+  describe('Content styling', () => {
+    test('applies correct content styling classes', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent data-testid="content">
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const content = screen.getByTestId('content');
+      expect(content).toHaveClass(
+        'z-index-popover',
+        'p-xs',
+        'overflow-hidden',
+        'br-sm',
+        'bw-sm'
+      );
+    });
+
+    test('applies custom className to content', () => {
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent className="custom-content-class">
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const content = screen.getByText('Item').closest('[role="menu"]');
+      expect(content).toHaveClass('custom-content-class');
+    });
+  });
+
+  describe('Keyboard navigation', () => {
+    test('focuses first item when menu opens', async () => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>First Item</DropdownMenuItem>
+            <DropdownMenuItem>Second Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const trigger = screen.getByText('Open');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('First Item')).toBeInTheDocument();
+      });
+    });
+
+    test('closes menu when escape is pressed', async () => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      const trigger = screen.getByText('Open');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Item')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Item')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Ref forwarding', () => {
+    test('forwards ref to DropdownMenuItem', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem ref={ref}>Item with ref</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    test('forwards ref to DropdownMenuLabel', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel ref={ref}>Label with ref</DropdownMenuLabel>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    test('forwards ref to DropdownMenuSeparator', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(
+        <DropdownMenu open>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuSeparator ref={ref} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  describe('Display names', () => {
+    test('components have display names defined', () => {
+      expect(DropdownMenuItem.displayName).toBeDefined();
+      expect(DropdownMenuLabel.displayName).toBeDefined();
+      expect(DropdownMenuSeparator.displayName).toBeDefined();
+      expect(DropdownMenuShortcut.displayName).toBe('DropdownMenuShortcut');
+      expect(DropdownMenuSubTrigger.displayName).toBeDefined();
+      expect(DropdownMenuSubContent.displayName).toBeDefined();
+    });
   });
 });

package/src/components/FormControl/FormControl.tsx

@@ -76,3 +76,5 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     );
   }
 );
+
+FormControl.displayName = 'FormControl';

package/src/components/Formik/Formik.stories.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react';
 import { Calendar } from '../Calendar/Calendar';
-import { Field, Form, Formik } from 'formik';
+import { Field, Form, Formik, FormikHelpers } from 'formik';
 import { FormikTextInput } from './FormikTextInput/FormikTextInput';
 import { FormikCheckboxInput } from './FormikCheckboxInput/FormikCheckboxInput';
 import { FormikSelectInput } from './FormikSelectInput/FormikSelectInput';
@@ -36,6 +36,28 @@ const meta = {
 
 export default meta;
 
+type FormValues = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  areTermsChecked: boolean;
+  areTermsChecked2: boolean;
+  flavor: string | null;
+  flavor2: string | null;
+  colors: Array<{ value: string; label: string }>;
+  colors2: string;
+  sizes: string | null;
+  timePicker: string | null;
+  timePickerNative: string | null;
+  dateInput: Date | undefined;
+  message: string;
+  country: string;
+  availability: string;
+  locations: string[];
+  meal: string;
+};
+
 export const FormikForm = () =>
   (() => {
     const flavorOptions = [
@@ -94,8 +116,8 @@ export const FormikForm = () =>
         downtime: '5.26 minutes/year',
       },
     ];
-    const handleValidation = (values: Record<string, any>) => {
-      const errors: Record<string, string> = {};
+    const handleValidation = (values: FormValues) => {
+      const errors: Partial<Record<keyof FormValues, string>> = {};
       if (!values.firstName) {
         errors.firstName = 'required';
       }
@@ -151,8 +173,8 @@ export const FormikForm = () =>
       return errors;
     };
     const handleSubmit = (
-      values: Record<string, any>,
-      { setSubmitting }: any
+      values: FormValues,
+      { setSubmitting }: FormikHelpers<FormValues>
     ) => {
       // Make API calls here
       setTimeout(() => {
@@ -163,8 +185,8 @@ export const FormikForm = () =>
         );
       }, 2000);
     };
-    const formatOutput = (
-      values: Record<string, any>,
+    const formatOutput = <T extends Record<string, unknown>>(
+      values: T,
       isSubmitting?: boolean
     ) => {
       return { ...values, isSubmitting };
@@ -191,6 +213,7 @@ export const FormikForm = () =>
             country: '',
             availability: '99',
             locations: [] as string[],
+            meal: '',
           }}
           validate={handleValidation}
           onSubmit={handleSubmit}

package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx

@@ -16,7 +16,7 @@ export interface FormikSelectInputProps
     errors: FormikErrors<FormikValues>;
   };
   onChange?: SelectInputProps['onChange'];
-  error?: any[] | string;
+  error?: string | Array<{ label?: string }>;
 }
 
 export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
@@ -29,13 +29,14 @@ export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
   error: errorProp,
   ...props
 }) => {
-  let errorMessage;
-  const error = errorProp ?? (getIn(touched, name) && getIn(errors, name));
+  let errorMessage: string | undefined;
+  const error: unknown =
+    errorProp ?? (getIn(touched, name) && getIn(errors, name));
 
   if (typeof error === 'string') {
     errorMessage = error;
-  } else if (error && typeof error !== 'string') {
-    errorMessage = error?.find((err: any) => err?.label)?.label;
+  } else if (Array.isArray(error)) {
+    errorMessage = error.find((err) => err?.label)?.label;
   }
 
   return (

package/src/components/Formik/FormikToggleGroup/FormikToggleGroup.tsx

@@ -15,7 +15,7 @@ export interface FormikToggleGroupProps {
   form: {
     touched: FormikTouched<FormikValues>;
     errors: FormikErrors<FormikValues>;
-    setFieldValue: (field: string, value: any) => void;
+    setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
   };
   options: Array<{
     id: string;

package/src/components/HelpText/HelpText.tsx

@@ -31,3 +31,5 @@ export const HelpText = forwardRef<HTMLDivElement, HelpTextProps>(
     </Box>
   )
 );
+
+HelpText.displayName = 'HelpText';

package/src/components/Icon/Icon.stories.tsx

@@ -41,7 +41,7 @@ export const Colors = () => (
 );
 
 export const UnknownIcon = () => (
-  <Icon name={'does-not-exist' as any} className="font-size-2xl" />
+  <Icon name={'does-not-exist' as IconName} className="font-size-2xl" />
 );
 
 export const AvailableIcons = () => (