tharaday 0.8.2 → 0.8.4

package/src/components/List/List.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+
 import { List } from './List';
 
 const meta = {

package/src/components/List/List.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 
+import { getSpacingStyles } from '../Box/helpers/getSpacingStyles';
 import styles from './List.module.css';
 import type { ListProps } from './List.types';
-import { getSpacingStyles } from '../Box/helpers/getSpacingStyles';
 import { ListItem } from './ListItem';
 
 export const List = ({

package/src/components/List/List.types.ts

@@ -1,5 +1,6 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-import type { BoxPadding, BoxMargin } from '../Box/Box.types';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import type { BoxMargin, BoxPadding } from '../Box/Box.types';
 
 export type ListVariant = 'unordered' | 'ordered' | 'none';
 

package/src/components/List/ListItem.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import type { ListItemProps } from './ListItem.types';
+
 import styles from './ListItem.module.css';
+import type { ListItemProps } from './ListItem.types';
 
 export const ListItem = ({ children, icon, className, ...props }: ListItemProps) => {
   return (

package/src/components/List/ListItem.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
   /** The content of the list item */

package/src/components/Loader/Loader.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Loader } from './Loader.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Loader } from './Loader.tsx';
 
 const meta = {
   title: 'Components/Loader',

package/src/components/Modal/Modal.stories.tsx

@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { fn } from 'storybook/test';
 
-import { Modal } from './Modal.tsx';
 import { Box } from '../Box/Box.tsx';
 import { Button } from '../Button/Button.tsx';
 import { Input } from '../Input/Input.tsx';
 import { Text } from '../Text/Text.tsx';
 import { Textarea } from '../Textarea/Textarea.tsx';
+import { Modal } from './Modal.tsx';
 
 const meta = {
   title: 'Components/Modal',

package/src/components/Modal/Modal.tsx

@@ -1,12 +1,11 @@
 import classnames from 'classnames';
-import { useEffect, useRef } from 'react';
-
-import { useComponentId } from '../../hooks/useComponentId.ts';
 import { createPortal } from 'react-dom';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
+import { useFocusTrap } from '../../hooks/useFocusTrap.ts';
+import { Button } from '../Button/Button.tsx';
 import styles from './Modal.module.css';
 import type { ModalProps } from './Modal.types.ts';
-import { Button } from '../Button/Button.tsx';
 
 export const Modal = ({
   isOpen,
@@ -19,70 +18,10 @@ export const Modal = ({
   className,
   id,
 }: ModalProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const previousFocus = useRef<HTMLElement | null>(null);
-  const onCloseRef = useRef(onClose);
+  const modalRef = useFocusTrap<HTMLDivElement>({ isOpen, onClose, isLoading });
   const componentId = useComponentId('modal', id);
   const titleId = `${componentId}-title`;
 
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !isLoading) {
-        onCloseRef.current();
-        return;
-      }
-
-      if (event.key === 'Tab' && modalRef.current) {
-        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
-        if (!firstElement || !lastElement) {
-          return;
-        }
-
-        if (event.shiftKey) {
-          if (document.activeElement === firstElement) {
-            lastElement.focus();
-            event.preventDefault();
-          }
-        } else {
-          if (document.activeElement === lastElement) {
-            firstElement.focus();
-            event.preventDefault();
-          }
-        }
-      }
-    };
-
-    if (isOpen) {
-      previousFocus.current = document.activeElement as HTMLElement;
-      document.body.style.overflow = 'hidden';
-      window.addEventListener('keydown', handleKeyDown);
-
-      requestAnimationFrame(() => {
-        const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        if (focusableElements && focusableElements.length > 0) {
-          focusableElements[0].focus();
-        }
-      });
-    }
-
-    return () => {
-      document.body.style.overflow = 'unset';
-      window.removeEventListener('keydown', handleKeyDown);
-      previousFocus.current?.focus();
-    };
-  }, [isOpen, isLoading]);
-
   if (!isOpen) {
     return null;
   }

package/src/components/NavBar/NavBar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { NavBar } from './NavBar.tsx';
 import { Button } from '../Button/Button.tsx';
+import { NavBar } from './NavBar.tsx';
 
 const meta: Meta<typeof NavBar> = {
   title: 'Components/NavBar',

package/src/components/Notification/Notification.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
-import { Notification } from './Notification.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Notification } from './Notification.tsx';
 
 const meta = {
   title: 'Components/Notification',

package/src/components/Notification/Notification.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 
+import { Button } from '../Button/Button.tsx';
 import styles from './Notification.module.css';
 import type { NotificationProps } from './Notification.types.ts';
-import { Button } from '../Button/Button.tsx';
 
 export const Notification = ({
   intent = 'neutral',

package/src/components/Pagination/Pagination.tsx

@@ -2,10 +2,9 @@ import classnames from 'classnames';
 import { useMemo, useState } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
-
+import { Button } from '../Button/Button.tsx';
 import styles from './Pagination.module.css';
 import type { PaginationProps } from './Pagination.types.ts';
-import { Button } from '../Button/Button.tsx';
 
 type PageItem = number | 'ellipsis';
 
@@ -16,6 +15,7 @@ const range = (start: number, end: number) => {
   for (let i = start; i <= end; i += 1) {
     items.push(i);
   }
+
   return items;
 };
 

package/src/components/Popover/Popover.module.css

@@ -0,0 +1,52 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-block;
+}
+
+.content {
+  position: absolute;
+  z-index: 500;
+  background-color: var(--ds-surface-0);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-md);
+  padding: var(--ds-space-4);
+  min-width: 12rem;
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-1);
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity 0.15s,
+    visibility 0.15s;
+}
+
+.visible {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* Placements */
+.bottom {
+  top: calc(100% + var(--ds-space-2));
+  left: 0;
+}
+.top {
+  bottom: calc(100% + var(--ds-space-2));
+  left: 0;
+}
+.right {
+  left: calc(100% + var(--ds-space-2));
+  top: 0;
+}
+.left {
+  right: calc(100% + var(--ds-space-2));
+  top: 0;
+}

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '../Box/Box.tsx';
+import { Button } from '../Button/Button.tsx';
+import { Text } from '../Text/Text.tsx';
+import { Popover } from './Popover.tsx';
+
+const meta = {
+  title: 'Components/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    placement: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button size="sm">Open popover</Button>,
+    children: (
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Text variant="body-sm" weight="medium">
+          Popover title
+        </Text>
+        <Text variant="body-sm" color="subtle">
+          This is some popover content.
+        </Text>
+      </Box>
+    ),
+  },
+};
+
+export const Top: Story = {
+  args: {
+    trigger: <Button size="sm">Above</Button>,
+    placement: 'top',
+    children: <Text variant="body-sm">Placed above the trigger.</Text>,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    trigger: <Button size="sm">Right</Button>,
+    placement: 'right',
+    children: <Text variant="body-sm">Placed to the right.</Text>,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    trigger: <Button size="sm">Options</Button>,
+    children: (
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Button variant="subtle" fullWidth>
+          Edit
+        </Button>
+        <Button variant="subtle" intent="danger" fullWidth>
+          Delete
+        </Button>
+      </Box>
+    ),
+  },
+};

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from '../Button/Button.tsx';
+import { Popover } from './Popover.tsx';
+
+const trigger = <Button>Open</Button>;
+const content = <p>Popover content</p>;
+
+describe('Popover', () => {
+  it('renders trigger', () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
+  });
+
+  it('content is hidden by default', () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('shows content when trigger is clicked', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-hidden', 'false');
+  });
+
+  it('hides content when trigger is clicked again', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('closes on Escape', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,78 @@
+import classnames from 'classnames';
+import {
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+
+import { useClickOutside } from '../../hooks/useClickOutside.ts';
+import { useComponentId } from '../../hooks/useComponentId.ts';
+import styles from './Popover.module.css';
+import type { PopoverProps } from './Popover.types.ts';
+
+export const Popover = ({
+  trigger,
+  children,
+  placement = 'bottom',
+  isOpen: controlledOpen,
+  onOpenChange,
+  className,
+  id,
+}: PopoverProps) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const componentId = useComponentId('popover', id);
+  const contentId = `${componentId}-content`;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => {
+    if (!isControlled) {
+      setUncontrolledOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+
+  const toggle = () => {
+    const next = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+
+  useClickOutside(rootRef, close, isOpen);
+
+  const triggerElement = isValidElement(trigger)
+    ? cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+        onClick: (e: React.MouseEvent) => {
+          const existing = (trigger as ReactElement<Record<string, unknown>>).props.onClick;
+          if (typeof existing === 'function') {
+            existing(e);
+          }
+          toggle();
+        },
+        'aria-expanded': isOpen,
+        'aria-controls': contentId,
+        'aria-haspopup': 'dialog',
+      })
+    : trigger;
+
+  return (
+    <div ref={rootRef} className={classnames(styles.root, className)}>
+      <div className={styles.trigger}>{triggerElement}</div>
+      <div
+        id={contentId}
+        role="dialog"
+        aria-modal="false"
+        aria-hidden={!isOpen}
+        className={classnames(styles.content, styles[placement], isOpen && styles.visible)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopoverProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  placement?: PopoverPlacement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { ProgressBar } from './ProgressBar.tsx';
 import { Box } from '../Box/Box.tsx';
+import { ProgressBar } from './ProgressBar.tsx';
 
 const meta = {
   title: 'Components/ProgressBar',

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './ProgressBar.module.css';
 import type { ProgressBarProps } from './ProgressBar.types.ts';
 

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { RadioButton } from './RadioButton.tsx';
 import { Box } from '../Box/Box.tsx';
+import { RadioButton } from './RadioButton.tsx';
 
 const meta = {
   title: 'Components/RadioButton',

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './RadioButton.module.css';
 import type { RadioButtonProps } from './RadioButton.types.ts';
 

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Select } from './Select.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Select } from './Select.tsx';
 
 const meta = {
   title: 'Components/Select',

package/src/components/Select/Select.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './Select.module.css';
 import type { SelectProps } from './Select.types.ts';
 

package/src/components/Select/Select.types.ts

@@ -1,4 +1,4 @@
-import type { SelectHTMLAttributes, ReactNode } from 'react';
+import type { ReactNode, SelectHTMLAttributes } from 'react';
 
 export type SelectSize = 'sm' | 'md' | 'lg';
 

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Skeleton } from './Skeleton.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Skeleton } from './Skeleton.tsx';
 
 const meta = {
   title: 'Components/Skeleton',

package/src/components/Skeleton/Skeleton.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 
+import { Box } from '../Box/Box.tsx';
 import styles from './Skeleton.module.css';
 import type { SkeletonProps } from './Skeleton.types.ts';
-import { Box } from '../Box/Box.tsx';
 
 export const Skeleton = ({
   variant = 'rectangular',

package/src/components/Slider/Slider.tsx

@@ -2,7 +2,6 @@ import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
-
 import { Input } from '../Input/Input.tsx';
 import styles from './Slider.module.css';
 import type { SliderProps, SliderValue } from './Slider.types.ts';
@@ -12,6 +11,7 @@ const toNumber = (value: number | string | undefined, fallback: number): number
     return fallback;
   }
   const parsed = typeof value === 'number' ? value : Number(value);
+
   return Number.isNaN(parsed) ? fallback : parsed;
 };
 
@@ -29,6 +29,7 @@ const alignToStep = (
   }
 
   const steps = Math.round((value - min) / step);
+
   return clamp(min + steps * step, min, max);
 };
 
@@ -40,10 +41,12 @@ const normalizeToPair = (
   if (Array.isArray(value)) {
     const left = clamp(toNumber(value[0], min), min, max);
     const right = clamp(toNumber(value[1], max), min, max);
+
     return left <= right ? [left, right] : [right, left];
   }
 
   const resolved = clamp(toNumber(value, min), min, max);
+
   return [resolved, resolved];
 };
 

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Box } from '../Box/Box.tsx';
 import type { StepOptions } from './Step.types.ts';
 import { Stepper } from './Stepper.tsx';
-import { Box } from '../Box/Box.tsx';
 
 const meta = {
   title: 'Components/Stepper',

package/src/components/Stepper/Stepper.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import { Step } from './Step.tsx';
 import styles from './Stepper.module.css';
 import type { StepperProps } from './Stepper.types.ts';

package/src/components/Stepper/stepper.utils.ts

@@ -1,9 +1,10 @@
-import type { StepperStatus, StepOptions } from './Step.types.ts';
+import type { StepOptions, StepperStatus } from './Step.types.ts';
 
 const clampIndex = (index: number, length: number) => {
   if (Number.isNaN(index) || length <= 0) {
     return -1;
   }
+
   return Math.min(Math.max(index, 0), length - 1);
 };
 
@@ -17,6 +18,7 @@ export const resolveCurrentIndex = (
   if (typeof currentStep === 'string') {
     return steps.findIndex((step) => step.id === currentStep);
   }
+
   return steps.findIndex((step) => step.status === 'current');
 };
 
@@ -37,5 +39,6 @@ export const getStepStatus = (
   if (index === currentIndex) {
     return 'current';
   }
+
   return 'upcoming';
 };

package/src/components/Switch/Switch.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Switch } from './Switch.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Switch } from './Switch.tsx';
 
 const meta = {
   title: 'Components/Switch',

package/src/components/Switch/Switch.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './Switch.module.css';
 import type { SwitchProps } from './Switch.types.ts';
 

package/src/components/Table/Table.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './Table.tsx';
 import { Badge } from '../Badge/Badge.tsx';
 import { Button } from '../Button/Button.tsx';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './Table.tsx';
 
 const meta = {
   title: 'Components/Table',