@popsure/dirty-swan 0.65.1 → 0.66.1

package/src/lib/components/searchableDropdown/style.module.scss

@@ -0,0 +1,137 @@
+@use '../../scss/public/colors' as *;
+@use '../../scss/public/shadows' as *;
+
+.container {
+  position: relative;
+}
+
+.selectTrigger {
+  padding: 10px 12px;
+  border: 1px solid $ds-neutral-300;
+
+  &:hover {
+    border-color: $ds-neutral-500;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $ds-neutral-900;
+    outline-offset: 1px;
+  }
+
+  &Open {
+    border-color: $ds-neutral-900;
+    box-shadow: $bs-xs;
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.condensed {
+  width: auto;
+  padding: 8px 10px;
+  gap: 8px;
+}
+
+.bordered {
+  border: 1px solid $ds-neutral-300;
+
+  &:hover {
+    border-color: $ds-neutral-500;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 280px;
+  border: 1px solid $ds-neutral-300;
+  box-shadow: $bs-md;
+  z-index: 10;
+}
+
+.dropdownRight {
+  left: auto;
+  right: 0;
+}
+
+.dropdownUp {
+  top: auto;
+  bottom: calc(100% + 4px);
+
+  .searchContainer {
+    order: 2;
+    padding-bottom: 0;
+    padding-top: 8px;
+  }
+
+  .optionList {
+    order: 1;
+  }
+}
+
+.searchContainer {
+  position: sticky;
+  top: 0;
+}
+
+.optionList {
+  max-height: 308px;
+  overflow-y: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.optionWrapper {
+  position: relative;
+}
+
+.optionRadio {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:focus-visible + label {
+    outline: 2px solid $ds-neutral-900;
+    outline-offset: -2px;
+    border-radius: 8px;
+  }
+}
+
+.option {
+  padding: 10px 12px;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    background-color: $ds-neutral-100;
+  }
+
+  &Selected {
+    background-color: $ds-purple-100;
+
+    &:hover {
+      background-color: $ds-purple-100;
+    }
+  }
+}
+
+.optionIcon {
+  flex-shrink: 0;
+}
+
+.noResults {
+  padding: 10px 12px;
+}

package/src/lib/hooks/useDropdownAlignment.test.ts

@@ -0,0 +1,210 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { RefObject } from 'react';
+
+import { useDropdownAlignment } from './useDropdownAlignment';
+
+const createRef = <T>(value: T | null = null): RefObject<T | null> => ({
+  current: value,
+});
+
+const mockContainerRect = (rect: Partial<DOMRect>) =>
+  ({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => {},
+    ...rect,
+  }) as DOMRect;
+
+describe('useDropdownAlignment', () => {
+  let containerEl: HTMLElement;
+  let dropdownEl: HTMLElement;
+  let containerRef: RefObject<HTMLElement | null>;
+  let dropdownRef: RefObject<HTMLElement | null>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    window.innerWidth = 1024;
+    window.innerHeight = 768;
+
+    containerEl = document.createElement('div');
+    dropdownEl = document.createElement('div');
+
+    containerRef = createRef(containerEl);
+    dropdownRef = createRef(dropdownEl);
+
+    Object.defineProperty(dropdownEl, 'offsetWidth', {
+      value: 200,
+      configurable: true,
+    });
+    Object.defineProperty(dropdownEl, 'offsetHeight', {
+      value: 300,
+      configurable: true,
+    });
+  });
+
+  it('should return alignRight and alignUp as false by default', () => {
+    const { result } = renderHook(() =>
+      useDropdownAlignment(containerRef, dropdownRef, false)
+    );
+
+    expect(result.current.alignRight).toBe(false);
+    expect(result.current.alignUp).toBe(false);
+  });
+
+  it('should not compute alignment when isOpen is false', () => {
+    jest
+      .spyOn(containerEl, 'getBoundingClientRect')
+      .mockReturnValue(mockContainerRect({ left: 900, bottom: 600, top: 600 }));
+
+    renderHook(() => useDropdownAlignment(containerRef, dropdownRef, false));
+
+    expect(containerEl.getBoundingClientRect).not.toHaveBeenCalled();
+  });
+
+  it('should not compute alignment when refs are null', () => {
+    const nullContainerRef = createRef<HTMLElement>(null);
+    const nullDropdownRef = createRef<HTMLElement>(null);
+
+    const { result } = renderHook(() =>
+      useDropdownAlignment(nullContainerRef, nullDropdownRef, true)
+    );
+
+    expect(result.current.alignRight).toBe(false);
+    expect(result.current.alignUp).toBe(false);
+  });
+
+  describe('horizontal alignment', () => {
+    it('should set alignRight to false when there is enough space on the right', () => {
+      jest.spyOn(containerEl, 'getBoundingClientRect').mockReturnValue(
+        mockContainerRect({ left: 100, bottom: 100, top: 100 })
+      );
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      // spaceOnRight = 1024 - 100 = 924, dropdownWidth = 200 → enough space
+      expect(result.current.alignRight).toBe(false);
+    });
+
+    it('should set alignRight to true when there is not enough space on the right', () => {
+      jest.spyOn(containerEl, 'getBoundingClientRect').mockReturnValue(
+        mockContainerRect({ left: 900, bottom: 100, top: 100 })
+      );
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      // spaceOnRight = 1024 - 900 = 124, dropdownWidth = 200 → not enough space
+      expect(result.current.alignRight).toBe(true);
+    });
+  });
+
+  describe('vertical alignment', () => {
+    it('should set alignUp to false when there is enough space below', () => {
+      jest.spyOn(containerEl, 'getBoundingClientRect').mockReturnValue(
+        mockContainerRect({ left: 100, bottom: 100, top: 100 })
+      );
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      // spaceBelow = 768 - 100 = 668, dropdownHeight = 300 → enough space
+      expect(result.current.alignUp).toBe(false);
+    });
+
+    it('should set alignUp to true when not enough space below and more space above', () => {
+      jest.spyOn(containerEl, 'getBoundingClientRect').mockReturnValue(
+        mockContainerRect({ left: 100, bottom: 600, top: 600 })
+      );
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      // spaceBelow = 768 - 600 = 168, dropdownHeight = 300 → not enough below
+      // containerRect.top = 600 > spaceBelow = 168 → more space above
+      expect(result.current.alignUp).toBe(true);
+    });
+
+    it('should set alignUp to false when not enough space below but more space below than above', () => {
+      jest.spyOn(containerEl, 'getBoundingClientRect').mockReturnValue(
+        mockContainerRect({ left: 100, bottom: 500, top: 100 })
+      );
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      // spaceBelow = 768 - 500 = 268, dropdownHeight = 300 → not enough below
+      // containerRect.top = 100 < spaceBelow = 268 → more space below
+      expect(result.current.alignUp).toBe(false);
+    });
+  });
+
+  describe('ResizeObserver', () => {
+    it('should observe document.documentElement when isOpen is true', () => {
+      jest
+        .spyOn(containerEl, 'getBoundingClientRect')
+        .mockReturnValue(mockContainerRect({ left: 100, bottom: 100, top: 100 }));
+
+      renderHook(() => useDropdownAlignment(containerRef, dropdownRef, true));
+
+      const observerInstance = (ResizeObserver as jest.Mock).mock.results[0].value;
+      expect(observerInstance.observe).toHaveBeenCalledWith(
+        document.documentElement
+      );
+    });
+
+    it('should disconnect observer when isOpen changes to false', () => {
+      jest
+        .spyOn(containerEl, 'getBoundingClientRect')
+        .mockReturnValue(mockContainerRect({ left: 100, bottom: 100, top: 100 }));
+
+      const { rerender } = renderHook(
+        ({ isOpen }) => useDropdownAlignment(containerRef, dropdownRef, isOpen),
+        { initialProps: { isOpen: true } }
+      );
+
+      const observerInstance = (ResizeObserver as jest.Mock).mock.results[0].value;
+
+      rerender({ isOpen: false });
+
+      expect(observerInstance.disconnect).toHaveBeenCalled();
+    });
+
+    it('should recalculate alignment when ResizeObserver fires', () => {
+      jest
+        .spyOn(containerEl, 'getBoundingClientRect')
+        .mockReturnValue(mockContainerRect({ left: 100, bottom: 100, top: 100 }));
+
+      const { result } = renderHook(() =>
+        useDropdownAlignment(containerRef, dropdownRef, true)
+      );
+
+      expect(result.current.alignRight).toBe(false);
+
+      // Simulate viewport change: now not enough space on the right
+      jest
+        .spyOn(containerEl, 'getBoundingClientRect')
+        .mockReturnValue(mockContainerRect({ left: 900, bottom: 100, top: 100 }));
+
+      // Get the callback passed to ResizeObserver and invoke it
+      const observerCallback = (ResizeObserver as jest.Mock).mock.calls[0][0];
+      act(() => {
+        observerCallback();
+      });
+
+      expect(result.current.alignRight).toBe(true);
+    });
+  });
+});

package/src/lib/hooks/useDropdownAlignment.ts

@@ -0,0 +1,34 @@
+import { RefObject, useCallback, useEffect, useState } from 'react';
+
+export const useDropdownAlignment = (
+  containerRef: RefObject<HTMLElement | null>,
+  dropdownRef: RefObject<HTMLElement | null>,
+  isOpen: boolean
+) => {
+  const [alignRight, setAlignRight] = useState(false);
+  const [alignUp, setAlignUp] = useState(false);
+
+  const updateAlignment = useCallback(() => {
+    if (containerRef.current && dropdownRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const dropdownWidth = dropdownRef.current.offsetWidth;
+      const dropdownHeight = dropdownRef.current.offsetHeight;
+      const spaceOnRight = window.innerWidth - containerRect.left;
+      const spaceBelow = window.innerHeight - containerRect.bottom;
+      setAlignRight(spaceOnRight < dropdownWidth);
+      setAlignUp(spaceBelow < dropdownHeight && containerRect.top > spaceBelow);
+    }
+  }, [containerRef, dropdownRef]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    updateAlignment();
+
+    const observer = new ResizeObserver(updateAlignment);
+    observer.observe(document.documentElement);
+    return () => observer.disconnect();
+  }, [isOpen, updateAlignment]);
+
+  return { alignRight, alignUp };
+};

package/src/lib/index.tsx

@@ -41,6 +41,11 @@ import {
   TableHeader,
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
+import {
+  SearchableDropdown,
+  SearchableDropdownProps,
+  SearchableDropdownOption,
+} from './components/searchableDropdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -91,6 +96,7 @@ export {
   TableRowHeader,
   TableButton,
   TableInfoButton,
+  SearchableDropdown,
   SegmentedControl,
   Checkbox,
   Radio,
@@ -120,6 +126,8 @@ export {
 
 export type {
   AccordionProps,
+  SearchableDropdownProps,
+  SearchableDropdownOption,
   BadgeProps,
   IllustrationKeys,
   InformationBoxProps,