@fragments-sdk/ui 0.12.0 → 0.13.0

package/src/components/Command/index.tsx

@@ -74,6 +74,16 @@ function defaultFilter(value: string, search: string, keywords?: string[]): numb
   return 0;
 }
 
+function getTextContent(node: React.ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join(' ');
+  if (React.isValidElement(node)) {
+    const childProps = node.props as { children?: React.ReactNode };
+    return getTextContent(childProps.children);
+  }
+  return '';
+}
+
 // ============================================
 // Context
 // ============================================
@@ -95,6 +105,7 @@ interface CommandContextValue {
   loop: boolean;
   listRef: React.RefObject<HTMLDivElement | null>;
   visibleCount: number;
+  listId: string;
 }
 
 const CommandContext = React.createContext<CommandContextValue | null>(null);
@@ -150,6 +161,8 @@ function CommandRoot({
   const [items, setItems] = React.useState<Map<string, ItemRegistration>>(new Map());
   const [activeId, setActiveId] = React.useState<string | null>(null);
   const listRef = React.useRef<HTMLDivElement | null>(null);
+  const generatedListId = React.useId();
+  const listId = `command-list-${generatedListId}`;
 
   const setSearch = React.useCallback(
     (value: string) => {
@@ -213,8 +226,9 @@ function CommandRoot({
       loop,
       listRef,
       visibleCount,
+      listId,
     }),
-    [search, setSearch, filter, scores, registerItem, unregisterItem, activeId, loop, visibleCount]
+    [search, setSearch, filter, scores, registerItem, unregisterItem, activeId, loop, visibleCount, listId]
   );
 
   return (
@@ -230,8 +244,13 @@ function CommandRoot({
   );
 }
 
-function CommandInput({ className, ...htmlProps }: CommandInputProps) {
-  const { search, setSearch, listRef, setActiveId, activeId, loop } = useCommandContext();
+function CommandInput({
+  className,
+  onChange,
+  onKeyDown,
+  ...htmlProps
+}: CommandInputProps) {
+  const { search, setSearch, listRef, setActiveId, activeId, loop, listId } = useCommandContext();
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getEnabledItems = React.useCallback(() => {
@@ -243,7 +262,7 @@ function CommandInput({ className, ...htmlProps }: CommandInputProps) {
   }, [listRef]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    htmlProps.onKeyDown?.(event);
+    onKeyDown?.(event);
     if (event.defaultPrevented) return;
 
     const items = getEnabledItems();
@@ -307,32 +326,36 @@ function CommandInput({ className, ...htmlProps }: CommandInputProps) {
         type="text"
         role="combobox"
         aria-expanded={true}
-        aria-controls="command-list"
+        aria-controls={listId}
         aria-autocomplete="list"
         aria-activedescendant={activeId ?? undefined}
         autoComplete="off"
         autoCorrect="off"
         spellCheck={false}
         value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        {...htmlProps}
+        onChange={(e) => {
+          onChange?.(e);
+          if (e.defaultPrevented) return;
+          setSearch(e.target.value);
+        }}
         onKeyDown={handleKeyDown}
         className={[styles.input, className].filter(Boolean).join(' ')}
-        {...htmlProps}
       />
     </div>
   );
 }
 
 function CommandList({ children, className, ...htmlProps }: CommandListProps) {
-  const { listRef } = useCommandContext();
+  const { listRef, listId } = useCommandContext();
 
   return (
     <div
       ref={listRef}
-      id="command-list"
+      {...htmlProps}
+      id={listId}
       role="listbox"
       className={[styles.list, className].filter(Boolean).join(' ')}
-      {...htmlProps}
     >
       {children}
     </div>
@@ -346,6 +369,10 @@ function CommandItem({
   disabled = false,
   onItemSelect,
   className,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  style,
   ...htmlProps
 }: CommandItemProps) {
   const { scores, registerItem, unregisterItem, activeId, setActiveId } = useCommandContext();
@@ -356,8 +383,7 @@ function CommandItem({
   // Extract text content for filtering if no value prop
   const textValue = React.useMemo(() => {
     if (valueProp) return valueProp;
-    if (typeof children === 'string') return children;
-    return '';
+    return getTextContent(children).trim();
   }, [valueProp, children]);
 
   // Register with context
@@ -377,12 +403,20 @@ function CommandItem({
     }
   }, [isActive]);
 
-  const handleClick = () => {
+  const activateItem = () => {
     if (disabled) return;
     onItemSelect?.();
   };
 
-  const handleMouseEnter = () => {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    activateItem();
+  };
+
+  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+    onMouseEnter?.(event);
+    if (event.defaultPrevented) return;
     if (!disabled) {
       setActiveId(itemId);
     }
@@ -400,7 +434,14 @@ function CommandItem({
       data-active={isActive || undefined}
       data-disabled={disabled || undefined}
       onClick={handleClick}
-      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
+      onKeyDown={(e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          activateItem();
+        }
+      }}
       onMouseEnter={handleMouseEnter}
       className={[
         styles.item,
@@ -410,7 +451,7 @@ function CommandItem({
       ]
         .filter(Boolean)
         .join(' ')}
-      style={{ display: isVisible ? undefined : 'none' }}
+      style={{ ...style, display: isVisible ? undefined : 'none' }}
     >
       {children}
     </div>
@@ -431,14 +472,16 @@ function CommandGroup({ children, heading, className, ...htmlProps }: CommandGro
     setHasVisibleChildren(anyVisible);
   }, [scores]);
 
+  const { style, ...restHtmlProps } = htmlProps;
+
   return (
     <div
       ref={groupRef}
-      {...htmlProps}
+      {...restHtmlProps}
       role="group"
       aria-labelledby={heading ? labelId : undefined}
       className={[styles.group, className].filter(Boolean).join(' ')}
-      style={{ display: hasVisibleChildren ? undefined : 'none' }}
+      style={{ ...style, display: hasVisibleChildren ? undefined : 'none' }}
     >
       {heading && (
         <div id={labelId} className={styles.groupHeading}>

package/src/components/DataTable/DataTable.test.tsx

@@ -41,9 +41,18 @@ describe('DataTable', () => {
   });
 
   it('shows empty state message when data is empty', () => {
-    render(<DataTable columns={columns} data={[]} emptyMessage="Nothing here" aria-label="People" />);
+    render(
+      <DataTable
+        columns={columns}
+        data={[]}
+        emptyMessage="Nothing here"
+        caption="People Table"
+        aria-label="People"
+      />
+    );
     expect(screen.getByText('Nothing here')).toBeInTheDocument();
-    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.getByRole('table', { name: /people/i })).toBeInTheDocument();
+    expect(screen.getByText('People Table')).toBeInTheDocument();
   });
 
   it('defaults to "No data available" empty message', () => {

package/src/components/DataTable/index.tsx

@@ -270,8 +270,28 @@ function DataTableRoot<T>({
 
   if (isEmpty) {
     return (
-      <div className={styles.emptyState}>
-        <span className={styles.emptyMessage}>{emptyMessage}</span>
+      <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
+        <table
+          {...htmlProps}
+          className={rootClasses}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+        >
+          {caption && (
+            <caption className={captionHidden ? styles.captionHidden : styles.caption}>
+              {caption}
+            </caption>
+          )}
+          <tbody className={styles.tbody}>
+            <tr className={styles.row}>
+              <td className={styles.td} colSpan={Math.max(columns.length, 1)}>
+                <div className={styles.emptyState}>
+                  <span className={styles.emptyMessage}>{emptyMessage}</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     );
   }

package/src/components/DatePicker/DatePicker.test.tsx

@@ -175,6 +175,38 @@ describe('DatePicker', () => {
 
       expect(onSelect).toHaveBeenCalledWith(presetDate);
     });
+
+    it('preset forwards html props', async () => {
+      const user = userEvent.setup();
+      const onSelect = vi.fn();
+      const onPresetClick = vi.fn();
+      const presetDate = new Date(2025, 5, 2);
+
+      render(
+        <DatePicker onSelect={onSelect}>
+          <DatePicker.Trigger placeholder="Pick a date" />
+          <DatePicker.Content>
+            <DatePicker.Preset
+              id="preset-june-2"
+              data-testid="preset"
+              aria-label="Preset June 2"
+              onClick={onPresetClick}
+              date={presetDate}
+            >
+              June 2nd
+            </DatePicker.Preset>
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+
+      await user.click(screen.getByRole('button', { name: /pick a date/i }));
+      await user.click(screen.getByTestId('preset'));
+
+      expect(screen.getByTestId('preset')).toHaveAttribute('id', 'preset-june-2');
+      expect(onPresetClick).toHaveBeenCalled();
+      expect(onSelect).toHaveBeenCalledWith(presetDate);
+    });
   });
 
   describe('keyboard', () => {
@@ -216,6 +248,53 @@ describe('DatePicker', () => {
       expect(screen.getByRole('button')).toHaveTextContent('Apr 01, 2025');
       expect(screen.getByRole('button')).toHaveTextContent('Apr 07, 2025');
     });
+
+    it('requests close after single selection when open is controlled', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+      const onSelect = vi.fn();
+
+      render(
+        <DatePicker open onOpenChange={onOpenChange} onSelect={onSelect}>
+          <DatePicker.Trigger placeholder="Pick a date" />
+          <DatePicker.Content>
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+
+      await screen.findByRole('grid');
+
+      const dayButtons = screen.getAllByRole('gridcell');
+      const day10 = dayButtons.find((cell) => {
+        const btn = cell.querySelector('button');
+        return btn?.textContent === '10';
+      });
+
+      await user.click(day10!.querySelector('button')!);
+
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+      }, { timeout: 500 });
+    });
+  });
+
+  describe('forms', () => {
+    it('serializes selected date to a date-only hidden input value', () => {
+      render(
+        <DatePicker name="appointment" selected={new Date(2025, 0, 15)}>
+          <DatePicker.Trigger />
+          <DatePicker.Content>
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+
+      const input = document.querySelector<HTMLInputElement>('input[type="hidden"][name="appointment"]');
+      expect(input).toBeTruthy();
+      expect(input?.value).toBe('2025-01-15');
+    });
   });
 
   describe('multi-month', () => {

package/src/components/DatePicker/index.tsx

@@ -67,13 +67,12 @@ export interface DatePickerCalendarProps {
   className?: string;
 }
 
-export interface DatePickerPresetProps {
+export interface DatePickerPresetProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   /** Date to select (single mode) */
   date?: Date;
   /** Range to select (range mode) */
   range?: DateRange;
-  className?: string;
 }
 
 // ============================================
@@ -226,6 +225,14 @@ function defaultFormatRange(range: DateRange): string {
   return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
 }
 
+function formatDateForHiddenInput(date?: Date): string {
+  if (!date) return '';
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
 // ============================================
 // ClassNames mapping (built lazily)
 // ============================================
@@ -327,15 +334,14 @@ function DatePickerRoot({
       }
       onSelect?.(date);
 
-      // Auto-close after single selection (uncontrolled)
-      if (!isControlledOpen && date) {
+      // Auto-close after single selection (controlled and uncontrolled).
+      if (date) {
         setTimeout(() => {
-          setInternalOpen(false);
-          onOpenChange?.(false);
+          handleOpenChange(false);
         }, 150);
       }
     },
-    [selectedProp, onSelect, isControlledOpen, onOpenChange]
+    [selectedProp, onSelect, handleOpenChange]
   );
 
   const setSelectedRange = React.useCallback(
@@ -412,10 +418,10 @@ function DatePickerRoot({
           type="hidden"
           name={name}
           value={
-            mode === 'single'
-              ? (contextValue.selected?.toISOString() ?? '')
+              mode === 'single'
+              ? formatDateForHiddenInput(contextValue.selected ?? undefined)
               : contextValue.selectedRange
-                ? `${contextValue.selectedRange.from?.toISOString() ?? ''},${contextValue.selectedRange.to?.toISOString() ?? ''}`
+                ? `${formatDateForHiddenInput(contextValue.selectedRange.from)},${formatDateForHiddenInput(contextValue.selectedRange.to)}`
                 : ''
           }
         />
@@ -555,20 +561,29 @@ function DatePickerCalendar({ numberOfMonths: numberOfMonthsProp, className }: D
   );
 }
 
-function DatePickerPreset({ children, date, range, className }: DatePickerPresetProps) {
+function DatePickerPreset({
+  children,
+  date,
+  range,
+  className,
+  onClick,
+  ...htmlProps
+}: DatePickerPresetProps) {
   const ctx = useDatePickerContext();
   const classes = [styles.preset, className].filter(Boolean).join(' ');
 
-  const handleClick = React.useCallback(() => {
+  const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
     if (ctx.mode === 'single' && date) {
       ctx.setSelected(date);
     } else if (ctx.mode === 'range' && range) {
       ctx.setSelectedRange(range);
     }
-  }, [ctx, date, range]);
+  }, [ctx, date, range, onClick]);
 
   return (
-    <button type="button" className={classes} onClick={handleClick}>
+    <button type="button" {...htmlProps} className={classes} onClick={handleClick}>
       {children}
     </button>
   );

package/src/components/Dialog/Dialog.test.tsx

@@ -71,6 +71,29 @@ describe('Dialog', () => {
     });
   });
 
+  it('forwards html props to trigger, title, description, and close', async () => {
+    const user = userEvent.setup();
+    render(
+      <Dialog>
+        <Dialog.Trigger id="dialog-trigger">Open</Dialog.Trigger>
+        <Dialog.Content>
+          <Dialog.Title id="dialog-title">Dialog Title</Dialog.Title>
+          <Dialog.Description id="dialog-description">Dialog Description</Dialog.Description>
+          <Dialog.Close data-testid="dialog-close" />
+        </Dialog.Content>
+      </Dialog>
+    );
+
+    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'dialog-trigger');
+    await user.click(screen.getByRole('button', { name: /open/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Dialog Title')).toHaveAttribute('id', 'dialog-title');
+      expect(screen.getByText('Dialog Description')).toHaveAttribute('id', 'dialog-description');
+      expect(screen.getByTestId('dialog-close')).toBeInTheDocument();
+    });
+  });
+
   it('renders compound sub-components (Header, Body, Footer)', async () => {
     renderDialog({ defaultOpen: true });
 

package/src/components/Dialog/index.tsx

@@ -33,14 +33,12 @@ export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement>
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
-export interface DialogTitleProps {
+export interface DialogTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface DialogDescriptionProps {
+export interface DialogDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
 export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -55,16 +53,14 @@ export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface DialogTriggerProps {
+export interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
-export interface DialogCloseProps {
+export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 // ============================================
@@ -118,17 +114,18 @@ function DialogTrigger({
   children,
   asChild,
   className,
+  ...htmlProps
 }: DialogTriggerProps) {
   if (asChild) {
     return (
-      <BaseDialog.Trigger className={className} render={children as React.ReactElement}>
+      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
         {null}
       </BaseDialog.Trigger>
     );
   }
 
   return (
-    <BaseDialog.Trigger className={className}>
+    <BaseDialog.Trigger {...htmlProps} className={className}>
       {children}
     </BaseDialog.Trigger>
   );
@@ -161,15 +158,15 @@ function DialogHeader({ children, className, ...htmlProps }: DialogHeaderProps)
   return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function DialogTitle({ children, className }: DialogTitleProps) {
+function DialogTitle({ children, className, ...htmlProps }: DialogTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <BaseDialog.Title className={classes}>{children}</BaseDialog.Title>;
+  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;
 }
 
-function DialogDescription({ children, className }: DialogDescriptionProps) {
+function DialogDescription({ children, className, ...htmlProps }: DialogDescriptionProps) {
   const classes = [styles.description, className].filter(Boolean).join(' ');
   return (
-    <BaseDialog.Description className={classes}>
+    <BaseDialog.Description {...htmlProps} className={classes}>
       {children}
     </BaseDialog.Description>
   );
@@ -185,11 +182,12 @@ function DialogFooter({ children, className, ...htmlProps }: DialogFooterProps)
   return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function DialogClose({ children, asChild, className }: DialogCloseProps) {
+function DialogClose({ children, asChild, className, ...htmlProps }: DialogCloseProps) {
   // If no children, render the default X close button
   if (!children) {
     return (
       <BaseDialog.Close
+        {...htmlProps}
         data-dialog-close
         aria-label="Close dialog"
         className={[styles.close, className].filter(Boolean).join(' ')}
@@ -202,6 +200,7 @@ function DialogClose({ children, asChild, className }: DialogCloseProps) {
   if (asChild) {
     return (
       <BaseDialog.Close
+        {...htmlProps}
         data-dialog-close
         className={className}
         render={children as React.ReactElement}
@@ -212,7 +211,7 @@ function DialogClose({ children, asChild, className }: DialogCloseProps) {
   }
 
   return (
-    <BaseDialog.Close data-dialog-close className={className}>
+    <BaseDialog.Close {...htmlProps} data-dialog-close className={className}>
       {children}
     </BaseDialog.Close>
   );

package/src/components/Drawer/Drawer.test.tsx

@@ -66,6 +66,33 @@ describe('Drawer', () => {
     });
   });
 
+  it('forwards html props to trigger, title, description, and close', async () => {
+    const user = userEvent.setup();
+    render(
+      <Drawer>
+        <Drawer.Trigger id="drawer-trigger">Open</Drawer.Trigger>
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title id="drawer-title">Drawer Title</Drawer.Title>
+            <Drawer.Close data-testid="drawer-close" />
+          </Drawer.Header>
+          <Drawer.Body>
+            <Drawer.Description id="drawer-description">Drawer Description</Drawer.Description>
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'drawer-trigger');
+    await user.click(screen.getByRole('button', { name: /open/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toHaveAttribute('id', 'drawer-title');
+      expect(screen.getByText('Drawer Description')).toHaveAttribute('id', 'drawer-description');
+      expect(screen.getByTestId('drawer-close')).toBeInTheDocument();
+    });
+  });
+
   it('renders compound sub-components (Header, Body, Footer)', async () => {
     renderDrawer({ defaultOpen: true });