feat(dropdown): TEDI-Ready Dropdown component #94

package.json

@@ -107,6 +107,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "baseline-browser-mapping": "^2.10.0",
     "chromatic": "^13.3.4",
     "cross-env": "^7.0.3",
     "dompurify": "^3.3.0",

src/community/components/dropdown/dropdown.stories.tsx

@@ -5,6 +5,11 @@ import { Dropdown, DropdownItem, DropdownProps } from './dropdown';
 export default {
   component: Dropdown,
   title: 'Community/Dropdown',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 } as Meta;
 
 const items: DropdownItem[] = [

src/tedi/components/overlays/dropdown/dropdown-content/dropdown-content.spec.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+
+import { DropdownContent } from './dropdown-content';
+
+const mockSetContent = jest.fn();
+
+jest.mock('../dropdown-context', () => ({
+  useDropdownContext: () => ({
+    setContent: mockSetContent,
+  }),
+}));
+
+describe('DropdownContent', () => {
+  beforeEach(() => {
+    mockSetContent.mockClear();
+  });
+
+  it('sets content on mount', () => {
+    render(
+      <DropdownContent>
+        <div>Menu content</div>
+      </DropdownContent>
+    );
+
+    expect(mockSetContent).toHaveBeenCalledWith(expect.objectContaining({ props: { children: 'Menu content' } }));
+  });
+
+  it('clears content on unmount', () => {
+    const { unmount } = render(
+      <DropdownContent>
+        <div>Menu content</div>
+      </DropdownContent>
+    );
+
+    unmount();
+    expect(mockSetContent).toHaveBeenLastCalledWith(null);
+  });
+});

src/tedi/components/overlays/dropdown/dropdown-content/dropdown-content.tsx

@@ -0,0 +1,14 @@
+import { ReactNode, useEffect } from 'react';
+
+import { useDropdownContext } from '../dropdown-context';
+
+export const DropdownContent = ({ children }: { children: ReactNode }) => {
+  const { setContent } = useDropdownContext();
+
+  useEffect(() => {
+    setContent(children);
+    return () => setContent(null);
+  }, [children, setContent]);
+
+  return null;
+};

src/tedi/components/overlays/dropdown/dropdown-context.spec.tsx

@@ -0,0 +1,115 @@
+import { render, renderHook } from '@testing-library/react';
+import React from 'react';
+
+import { DropdownContext, type DropdownContextValue, useDropdownContext } from './dropdown-context';
+
+jest.mock('@floating-ui/react', () => ({
+  useFloating: jest.fn(() => ({
+    refs: {
+      setReference: jest.fn(),
+      setFloating: jest.fn(),
+      reference: { current: null },
+      floating: { current: null },
+    },
+    x: 0,
+    y: 0,
+    strategy: 'absolute',
+    placement: 'bottom-start',
+  })),
+  useInteractions: jest.fn(() => ({
+    getReferenceProps: jest.fn((userProps) => ({ ...userProps })),
+    getFloatingProps: jest.fn((userProps) => ({ ...userProps })),
+    getItemProps: jest.fn((userProps) => ({ ...userProps })),
+  })),
+}));
+
+describe('DropdownContext + useDropdownContext', () => {
+  const mockSetOpen = jest.fn();
+  const mockSetActiveIndex = jest.fn();
+  const mockSetContent = jest.fn();
+
+  const mockContextValue: DropdownContextValue = {
+    open: true,
+    setOpen: mockSetOpen,
+    refs: {
+      setReference: jest.fn(),
+      setFloating: jest.fn(),
+      reference: { current: null },
+      floating: { current: null },
+      domReference: { current: null },
+      setPositionReference: jest.fn(),
+    },
+    getReferenceProps: jest.fn(),
+    getFloatingProps: jest.fn(),
+    getItemProps: jest.fn(),
+    listItemsRef: { current: [] },
+    activeIndex: 2,
+    setActiveIndex: mockSetActiveIndex,
+    placement: 'bottom-start',
+    content: <div>Mock content</div>,
+    setContent: mockSetContent,
+    divided: true,
+    variant: 'tree',
+  };
+
+  const wrapperWithContext = ({ children }: { children: React.ReactNode }) => (
+    <DropdownContext.Provider value={mockContextValue}>{children}</DropdownContext.Provider>
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('throws error when useDropdownContext is used outside DropdownContext', () => {
+    expect(() => {
+      renderHook(() => useDropdownContext());
+    }).toThrow('Dropdown components must be used within <Dropdown />');
+  });
+
+  it('returns context value when used inside provider', () => {
+    const { result } = renderHook(() => useDropdownContext(), {
+      wrapper: wrapperWithContext,
+    });
+
+    expect(result.current).toEqual(mockContextValue);
+    expect(result.current?.open).toBe(true);
+    expect(result.current?.activeIndex).toBe(2);
+    expect(result.current?.variant).toBe('tree');
+    expect(result.current?.content).toEqual(<div>Mock content</div>);
+  });
+
+  it('does not throw when context is provided (smoke test)', () => {
+    const TestConsumer = () => {
+      const ctx = useDropdownContext();
+      return <div data-testid="consumer">{ctx?.open ? 'Open' : 'Closed'}</div>;
+    };
+
+    const { getByTestId } = render(<TestConsumer />, {
+      wrapper: wrapperWithContext,
+    });
+
+    expect(getByTestId('consumer')).toHaveTextContent('Open');
+  });
+
+  it('context value has all expected keys', () => {
+    const { result } = renderHook(() => useDropdownContext(), {
+      wrapper: wrapperWithContext,
+    });
+
+    const ctx = result.current;
+    expect(ctx).toHaveProperty('open');
+    expect(ctx).toHaveProperty('setOpen');
+    expect(ctx).toHaveProperty('refs');
+    expect(ctx).toHaveProperty('getReferenceProps');
+    expect(ctx).toHaveProperty('getFloatingProps');
+    expect(ctx).toHaveProperty('getItemProps');
+    expect(ctx).toHaveProperty('listItemsRef');
+    expect(ctx).toHaveProperty('activeIndex');
+    expect(ctx).toHaveProperty('setActiveIndex');
+    expect(ctx).toHaveProperty('placement');
+    expect(ctx).toHaveProperty('content');
+    expect(ctx).toHaveProperty('setContent');
+    expect(ctx).toHaveProperty('divided');
+    expect(ctx).toHaveProperty('variant');
+  });
+});

src/tedi/components/overlays/dropdown/dropdown-context.tsx

@@ -0,0 +1,29 @@
+import { useFloating, useInteractions } from '@floating-ui/react';
+import React, { useContext } from 'react';
+
+export type DropdownContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  refs: ReturnType<typeof useFloating>['refs'];
+  getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];
+  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];
+  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+  listItemsRef: React.MutableRefObject<Array<HTMLButtonElement | null>>;
+  activeIndex: number | null;
+  setActiveIndex: (index: number | null) => void;
+  placement?: string;
+  content: React.ReactNode;
+  setContent: (content: React.ReactNode) => void;
+  divided?: boolean;
+  variant?: 'default' | 'tree';
+};
+
+export const DropdownContext = React.createContext<DropdownContextValue | null>(null);
+
+export const useDropdownContext = () => {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error('Dropdown components must be used within <Dropdown />');
+  }
+  return ctx;
+};

src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.module.scss

@@ -0,0 +1,132 @@
+@use '@tedi-design-system/core/mixins';
+
+:root {
+  --tree-trunk-width: 2px;
+  --tree-branch-width: 12px;
+  --tree-bullet-size: 8px;
+  --tree-line-color: var(--navigation-vertical-tree-neutral-default);
+  --tree-indent-base: 0.75rem;
+}
+
+.tedi-dropdown__item {
+  @include mixins.button-reset;
+
+  position: relative;
+  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+  padding-left: var(--dropdown-indent, var(--dropdown-item-padding-x));
+  color: var(--dropdown-item-default-text);
+  text-align: left;
+  border-radius: 0;
+  transition: all 0.2s ease;
+
+  &:first-child {
+    border-radius: var(--form-select-area-radius) var(--form-select-area-radius) 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 var(--form-select-area-radius) var(--form-select-area-radius);
+  }
+
+  &--active {
+    color: var(--dropdown-item-active-text);
+    background-color: var(--dropdown-item-active-background);
+
+    p,
+    label {
+      color: var(--dropdown-item-active-text);
+    }
+  }
+
+  &--disabled {
+    color: var(--color-text-disabled);
+    pointer-events: none;
+    background-color: var(--color-bg-disabled);
+  }
+
+  &--divided {
+    border-bottom: 1px solid var(--general-border-primary);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &--tree-item {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(((var(--dropdown-item-padding-x) / 2) + var(--dropdown-item-padding-x)));
+      width: var(--tree-trunk-width);
+      content: '';
+      background-color: var(--navigation-vertical-tree-neutral-default);
+      border-radius: 0;
+    }
+
+    &::after {
+      position: absolute;
+      top: 20px;
+      bottom: 0;
+      left: calc(((var(--dropdown-item-padding-x) / 2) + var(--dropdown-item-padding-x)));
+      width: var(--tree-branch-width);
+      height: var(--tree-trunk-width);
+      content: '';
+      background-color: var(--navigation-vertical-tree-neutral-default);
+      border-radius: 0 var(--button-radius-sm) var(--button-radius-sm) 0;
+    }
+
+    &:last-child::before {
+      height: calc(50% + var(--tree-trunk-width));
+    }
+  }
+
+  &--tree-parent {
+    &::before {
+      top: 50%;
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: calc(
+        ((var(--dropdown-item-padding-x) / 2) + var(--dropdown-item-padding-x)) - (var(--tree-bullet-size) / 3)
+      );
+      width: var(--tree-bullet-size);
+      height: var(--tree-bullet-size);
+      content: '';
+      background-color: var(--tree-line-color);
+      border-radius: 100%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &:hover {
+    color: var(--dropdown-item-hover-text);
+    cursor: pointer;
+    background-color: var(--dropdown-item-hover-background);
+    outline: 0;
+
+    p,
+    label {
+      color: var(--dropdown-item-hover-text);
+    }
+  }
+
+  &:focus-visible {
+    &:not(.tedi-dropdown__item--disabled) {
+      cursor: pointer;
+      outline: 0;
+      box-shadow: 0 0 0 1px var(--tedi-neutral-100), 0 0 0 3px var(--general-surface-selected);
+    }
+  }
+
+  &--indent {
+    padding-left: calc(var(--dropdown-indent) + var(--dropdown-item-padding-x));
+
+    &.tedi-dropdown__item--tree-item {
+      padding-left: calc(var(--dropdown-item-padding-x) + var(--tree-indent-base) + var(--dropdown-indent));
+    }
+  }
+}