@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Table/TableFooter.tsx

@@ -13,24 +13,11 @@ export interface TableFooterProps extends BaseProps<HTMLTableSectionElement> {
   children: ReactNode;
 }
 
-export function TableFooter({
-  ref,
-  children,
-  xstyle,
-  className,
-  style,
-  ...rest
-}: TableFooterProps) {
+export function TableFooter({ref, children, xstyle}: TableFooterProps) {
   return (
     <tfoot
       ref={ref}
-      {...mergeProps(
-        themeProps('table-footer'),
-        stylex.props(xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+      {...mergeProps(themeProps('table-footer'), stylex.props(xstyle))}>
       {children}
     </tfoot>
   );

package/src/Table/TableHeader.tsx

@@ -13,24 +13,11 @@ export interface TableHeaderProps extends BaseProps<HTMLTableSectionElement> {
   children: ReactNode;
 }
 
-export function TableHeader({
-  ref,
-  children,
-  xstyle,
-  className,
-  style,
-  ...rest
-}: TableHeaderProps) {
+export function TableHeader({ref, children, xstyle}: TableHeaderProps) {
   return (
     <thead
       ref={ref}
-      {...mergeProps(
-        themeProps('table-header'),
-        stylex.props(xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+      {...mergeProps(themeProps('table-header'), stylex.props(xstyle))}>
       {children}
     </thead>
   );

package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx

@@ -551,19 +551,6 @@ describe('useTableColumnResize', () => {
       expect(handle).toHaveAttribute('aria-valuenow', '200');
     });
 
-    it('handle has a numeric aria-valuenow on initial render (before any width is measured)', () => {
-      // A focusable role="separator" requires aria-valuenow per the ARIA spec.
-      // Before the column width has been measured there is no override width, so
-      // the handle must fall back to a defined numeric value (the column
-      // minWidth) rather than omitting the attribute.
-      render(<ResizeTable minWidth={80} />);
-      const handle = getResizeHandles()[0];
-      const valueNow = handle.getAttribute('aria-valuenow');
-      expect(valueNow).not.toBeNull();
-      expect(Number.isNaN(Number(valueNow))).toBe(false);
-      expect(valueNow).toBe('80');
-    });
-
     it('handle has aria-label with column header text', () => {
       render(<ResizeTable />);
       const handle = getResizeHandles()[0];

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -676,9 +676,7 @@ function ResizeHandle({
     <div
       role="separator"
       aria-orientation="vertical"
-      // A focusable role="separator" requires a numeric aria-valuenow, so fall
-      // back to the column's minWidth before the width has been measured.
-      aria-valuenow={currentWidth ?? minWidth}
+      aria-valuenow={currentWidth ?? undefined}
       aria-valuemin={minWidth}
       aria-valuemax={maxWidth === Infinity ? undefined : maxWidth}
       aria-label={ariaLabel}

package/src/Table/plugins/pagination/paginateData.ts

@@ -38,10 +38,6 @@ export function paginateData<T>(
   const size = Number.isFinite(pageSize)
     ? Math.max(1, Math.floor(pageSize))
     : 10;
-  // page needs the same coercion: a negative start index makes Array.slice
-  // count from the END of the data (page -1 returns the tail dressed up as a
-  // page), and a fractional page returns a slice straddling two pages.
-  const p = Number.isFinite(page) ? Math.max(1, Math.floor(page)) : 1;
-  const start = (p - 1) * size;
+  const start = (page - 1) * size;
   return data.slice(start, start + size);
 }

package/src/Table/plugins/pagination/useTablePagination.test.tsx

@@ -132,19 +132,6 @@ describe('paginateData', () => {
     expect(paginateData([], 1, 10)).toEqual([]);
   });
 
-  it('clamps invalid page numbers to the first page (#3593)', () => {
-    const data = generateItems(30);
-    // Negative pages previously fed a negative index to Array.slice, which
-    // counts from the END of the data — the tail dressed up as a page.
-    expect(paginateData(data, -1, 10)[0].id).toBe('1');
-    expect(paginateData(data, 0, 10)[0].id).toBe('1');
-    expect(paginateData(data, NaN, 10)[0].id).toBe('1');
-    // Fractional pages floor to the containing page instead of straddling two.
-    expect(paginateData(data, 1.5, 10).map(i => i.id)).toEqual(
-      paginateData(data, 1, 10).map(i => i.id),
-    );
-  });
-
   it('returns empty array when page exceeds data', () => {
     const data = generateItems(10);
     expect(paginateData(data, 5, 10)).toEqual([]);

package/src/Table/plugins/selection/useTableSelectionState.test.tsx

@@ -302,29 +302,6 @@ describe('useTableSelectionState with filtered data', () => {
     expect(screen.getByTestId('selected-keys')).toHaveTextContent('1,3');
   });
 
-  it('select-all is unchecked when the filter matches nothing (#3591)', async () => {
-    const user = userEvent.setup();
-    render(<FilteredSelectionTable />);
-
-    // Select Bob, then filter to an empty result set.
-    const checkboxes = screen.getAllByLabelText('Select row');
-    await user.click(checkboxes[1]);
-    expect(screen.getByTestId('selected-keys')).toHaveTextContent('2');
-
-    const input = screen.getByTestId('filter-input');
-    await user.clear(input);
-    await user.type(input, 'zzz');
-
-    // Zero visible rows must not read as "all selected" — previously the
-    // header checkbox rendered checked here and deselect-all was a no-op.
-    const selectAll = screen.getByLabelText('Select all rows');
-    expect(selectAll).not.toBeChecked();
-
-    // The hidden selection itself is preserved (frozen), as designed.
-    await user.clear(input);
-    expect(screen.getByTestId('selected-keys')).toHaveTextContent('2');
-  });
-
   it('selections persist when filter changes', async () => {
     const user = userEvent.setup();
     render(<FilteredSelectionTable />);

package/src/Table/plugins/selection/useTableSelectionState.tsx

@@ -125,17 +125,12 @@ export function useTableSelectionState<T extends Record<string, unknown>>(
     [selectedKeys, selectableIDs],
   );
 
-  const getAllSelected = useCallback(() => {
-    // Require at least one actionable row: with zero visible selectable
-    // rows (e.g. a filter with no matches while a selection exists), the
-    // union-based size comparison would read any non-empty selection as
-    // "all selected" — a checked header checkbox over an empty table that
-    // deselect-all can't clear, since the invisible keys count as frozen.
-    if (selectableIDs.size === 0) {
-      return false;
-    }
-    return allSelectableIDs.size === selectedKeys.size;
-  }, [allSelectableIDs, selectableIDs, selectedKeys]);
+  const getAllSelected = useCallback(
+    () =>
+      allSelectableIDs.size === selectedKeys.size &&
+      allSelectableIDs.size !== 0,
+    [allSelectableIDs, selectedKeys],
+  );
 
   // Use refs to keep onSelectAll stable
   const frozenSelectedIDsRef = useRef(frozenSelectedIDs);

package/src/Table/plugins/sortable/useTableSortableState.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, renderHook, screen, within} from '@testing-library/react';
+import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useState} from 'react';
 import {Table} from '../../Table';
@@ -421,40 +421,6 @@ describe('useTableSortableState', () => {
     });
   });
 
-  describe('NaN handling', () => {
-    it('keeps valid numbers sorted when a NaN cell is present', () => {
-      const data: Employee[] = [
-        {id: '1', name: 'A', age: 5, department: 'X', salary: 1},
-        {id: '2', name: 'B', age: NaN, department: 'X', salary: 1},
-        {id: '3', name: 'C', age: 1, department: 'X', salary: 1},
-        {id: '4', name: 'D', age: 3, department: 'X', salary: 1},
-      ];
-      const {result} = renderHook(() =>
-        useTableSortableState({
-          data,
-          defaultSort: [{sortKey: 'age', direction: 'ascending'}],
-        }),
-      );
-      // NaN groups at the end like null; the valid numbers stay ordered.
-      expect(result.current.sortedData.map(e => e.age)).toEqual([1, 3, 5, NaN]);
-    });
-
-    it('sorts NaN to the start in descending order, like null', () => {
-      const data: Employee[] = [
-        {id: '1', name: 'A', age: 5, department: 'X', salary: 1},
-        {id: '2', name: 'B', age: NaN, department: 'X', salary: 1},
-        {id: '3', name: 'C', age: 1, department: 'X', salary: 1},
-      ];
-      const {result} = renderHook(() =>
-        useTableSortableState({
-          data,
-          defaultSort: [{sortKey: 'age', direction: 'descending'}],
-        }),
-      );
-      expect(result.current.sortedData.map(e => e.age)).toEqual([NaN, 5, 1]);
-    });
-  });
-
   describe('null/undefined handling', () => {
     it('sorts null values to the end', () => {
       const data: Employee[] = [

package/src/Table/plugins/sortable/useTableSortableState.tsx

@@ -168,18 +168,14 @@ function defaultCompare<T extends Record<string, unknown>>(
   const aVal = a[sortKey];
   const bVal = b[sortKey];
 
-  // null/undefined/NaN sort to the end. NaN must not reach the numeric fast
-  // path: a NaN comparator result reads as "equal" to Array.sort, which makes
-  // the comparator inconsistent and corrupts the order of the other rows.
-  const aMissing = aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
-  const bMissing = bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
-  if (aMissing && bMissing) {
+  // null/undefined sort to the end
+  if (aVal == null && bVal == null) {
     return 0;
   }
-  if (aMissing) {
+  if (aVal == null) {
     return 1;
   }
-  if (bMissing) {
+  if (bVal == null) {
     return -1;
   }
 

package/src/TextArea/TextArea.test.tsx

@@ -13,7 +13,7 @@ import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {TestIcon} from '../__tests__/TestIcon';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
 import {TextArea} from './TextArea';
 
 // Mock showPopover/hidePopover since jsdom does not implement them. Used by the
@@ -193,7 +193,7 @@ describe('TextArea', () => {
         label="Description"
         value=""
         onChange={() => {}}
-        startIcon={TestIcon}
+        startIcon={MagnifyingGlassIcon}
       />,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -577,7 +577,7 @@ describe('TextArea', () => {
           label="Notes"
           value=""
           onChange={() => {}}
-          startIcon={<TestIcon />}
+          startIcon={<MagnifyingGlassIcon />}
         />,
       );
 

package/src/TextInput/TextInput.test.tsx

@@ -12,7 +12,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {TestIcon} from '../__tests__/TestIcon';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
 import {TextInput} from './TextInput';
 
 // Mock showPopover/hidePopover since jsdom does not implement them. Used by the
@@ -163,7 +163,7 @@ describe('TextInput', () => {
         label="Search"
         value=""
         onChange={() => {}}
-        startIcon={TestIcon}
+        startIcon={MagnifyingGlassIcon}
       />,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -482,7 +482,7 @@ describe('TextInput', () => {
           label="Search"
           value=""
           onChange={() => {}}
-          startIcon={<TestIcon />}
+          startIcon={<MagnifyingGlassIcon />}
         />,
       );
 

package/src/Thumbnail/Thumbnail.test.tsx

@@ -37,45 +37,11 @@ describe('Thumbnail', () => {
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
-  it('exposes the label as an accessible name via a valid group role', () => {
+  it('uses label as accessible name on root', () => {
     render(<Thumbnail label="photo.png" data-testid="thumb" />);
-    // The accessible name must be carried by a valid named role (group),
-    // not by a bare aria-label on a generic div (aria-prohibited-attr).
-    const group = screen.getByRole('group', {name: 'photo.png'});
-    expect(group).toBe(screen.getByTestId('thumb'));
+    expect(screen.getByTestId('thumb')).toHaveAttribute('aria-label', 'photo.png');
   });
 
-  it('does not put aria-label on a generic (roleless) element', () => {
-    render(<Thumbnail label="photo.png" data-testid="thumb" />);
-    const thumb = screen.getByTestId('thumb');
-    // The labeled element must declare a role so the name is legitimate.
-    expect(thumb).toHaveAttribute('role', 'group');
-  });
-
-  it('keeps interactive children accessible while exposing the group name', () => {
-    const onRemove = vi.fn();
-    render(
-      <Thumbnail
-        src="/img.jpg"
-        alt="Clickable"
-        label="file.png"
-        onClick={vi.fn()}
-        onRemove={onRemove}
-      />,
-    );
-    // A group role (unlike img) must not hide descendant controls.
-    expect(
-      screen.getByRole('group', {name: 'file.png — Clickable'}),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Open file.png — Clickable'}),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Remove file.png — Clickable'}),
-    ).toBeInTheDocument();
-  });
-
-
   it('label is shown via tooltip, not as inline text', () => {
     render(<Thumbnail label="photo.png" data-testid="thumb" />);
     // Label should exist in DOM (tooltip) but not as a direct child text node

package/src/Thumbnail/Thumbnail.tsx

@@ -58,9 +58,8 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   alt?: string;
   /**
    * Accessible label for the thumbnail (e.g. file name).
-   * Not rendered visually — shown in a tooltip on hover, exposed as the
-   * accessible name of the thumbnail group, and used as the accessible
-   * name for the remove button.
+   * Not rendered visually — shown in a tooltip on hover and used
+   * as accessible name for the remove button.
    */
   label?: string;
   /**
@@ -297,7 +296,6 @@ export function Thumbnail({
     <div
       ref={ref}
       data-testid={testId}
-      role="group"
       aria-label={accessibleName}
       {...mergeProps(
         themeProps('thumbnail'),

package/src/TimeInput/TimeInput.test.tsx

@@ -160,43 +160,6 @@ describe('TimeInput', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('sets aria-invalid="true" when typed input is out of range', () => {
-    render(<TimeInput label="Time" onChange={() => {}} />);
-
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: '25:99'}});
-
-    expect(input).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('does not set aria-invalid when typed input is a valid time', () => {
-    render(<TimeInput label="Time" onChange={() => {}} />);
-
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: '3:45 pm'}});
-
-    expect(input).not.toHaveAttribute('aria-invalid');
-  });
-
-  it('announces an alert message when typed input is invalid', () => {
-    render(<TimeInput label="Time" onChange={() => {}} />);
-
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: '25:99'}});
-
-    expect(screen.getByRole('alert')).toHaveTextContent('Invalid time');
-  });
-
-  it('does not announce an alert message when input is valid', () => {
-    render(<TimeInput label="Time" onChange={() => {}} />);
-
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: '3:45 pm'}});
-
-    expect(screen.getByRole('alert')).toHaveTextContent('');
-    expect(screen.queryByText('Invalid time')).not.toBeInTheDocument();
-  });
-
   it('calls onChange on blur when input is valid', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();

package/src/TimeInput/TimeInput.tsx

@@ -635,9 +635,7 @@ export function TimeInput({
         data-autofocus={hasAutoFocus || undefined}
         aria-describedby={ariaDescribedBy}
         aria-required={isRequired === true ? 'true' : undefined}
-        aria-invalid={
-          status?.type === 'error' || !isInputValid ? 'true' : undefined
-        }
+        aria-invalid={status?.type === 'error' ? 'true' : undefined}
         aria-busy={isBusy || undefined}
         aria-labelledby={ariaLabelledBy}
         {...stylex.props(
@@ -646,14 +644,6 @@ export function TimeInput({
           !isInputValid && styles.inputInvalid,
         )}
       />
-      {/*
-          Live region announcing invalid typed input to assistive technology.
-          The value silently reverts on blur, so without this a screen-reader
-          user would get no feedback that their entry was rejected (WCAG 3.3.1).
-        */}
-      <VisuallyHidden as="div" role="alert" aria-live="assertive">
-        {!isInputValid ? 'Invalid time' : ''}
-      </VisuallyHidden>
       {isBusy && <Spinner size="sm" />}
       {hasClear && value && !isDisabled && (
         <button

package/src/Timestamp/Timestamp.doc.mjs

@@ -84,7 +84,7 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-timestamp', visualProps: ['type', 'color', 'format']},
+      {className: 'astryx-timestamp', visualProps: ['type', 'color']},
     ],
   },
   usage: {

package/src/Timestamp/Timestamp.test.tsx

@@ -33,31 +33,6 @@ describe('Timestamp', () => {
     expect(screen.getByText('2 hours ago')).toBeInTheDocument();
   });
 
-  it('does not round a tier up past its own boundary', () => {
-    // Just under each threshold the count must stay within the tier, e.g.
-    // 59.98 minutes is "59 minutes ago", never "60 minutes ago".
-    const {rerender} = render(
-      <Timestamp value={Date.now() / 1000 - 3599} format="relative" />,
-    );
-    expect(screen.getByText('59 minutes ago')).toBeInTheDocument();
-
-    rerender(
-      <Timestamp value={Date.now() / 1000 - 86399} format="relative" />,
-    );
-    expect(screen.getByText('23 hours ago')).toBeInTheDocument();
-
-    rerender(
-      <Timestamp value={Date.now() / 1000 - 2591999} format="relative" />,
-    );
-    expect(screen.getByText('29 days ago')).toBeInTheDocument();
-
-    // Same guarantee on the future side.
-    rerender(
-      <Timestamp value={Date.now() / 1000 + 3599} format="relative" />,
-    );
-    expect(screen.getByText('in 59 minutes')).toBeInTheDocument();
-  });
-
   it('renders "now" for very recent times', () => {
     const fiveSecondsAgo = Date.now() / 1000 - 5;
     render(<Timestamp value={fiveSecondsAgo} format="relative" />);
@@ -315,31 +290,4 @@ describe('Timestamp', () => {
     const el = screen.getByRole('time');
     expect(el.textContent).not.toContain('ago');
   });
-
-  // --- Invalid values ---
-
-  it('renders nothing instead of crashing on an unparseable string value', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    try {
-      const {container} = render(
-        <Timestamp value="not-a-date" data-testid="ts" />,
-      );
-      expect(container).toBeEmptyDOMElement();
-      expect(warn).toHaveBeenCalledWith(
-        expect.stringContaining('could not parse value'),
-      );
-    } finally {
-      warn.mockRestore();
-    }
-  });
-
-  it('renders nothing instead of crashing on a NaN value', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    try {
-      const {container} = render(<Timestamp value={NaN} data-testid="ts" />);
-      expect(container).toBeEmptyDOMElement();
-    } finally {
-      warn.mockRestore();
-    }
-  });
 });

package/src/Timestamp/Timestamp.tsx

@@ -180,22 +180,22 @@ function getRelativeTimeString(date: Date, now: Date): string {
       return 'in a few seconds';
     }
     if (absDiff < HOUR) {
-      const mins = Math.floor(absDiff / MINUTE);
+      const mins = Math.round(absDiff / MINUTE);
       return `in ${mins} ${mins === 1 ? 'minute' : 'minutes'}`;
     }
     if (absDiff < DAY) {
-      const hours = Math.floor(absDiff / HOUR);
+      const hours = Math.round(absDiff / HOUR);
       return `in ${hours} ${hours === 1 ? 'hour' : 'hours'}`;
     }
     if (absDiff < MONTH) {
-      const days = Math.floor(absDiff / DAY);
+      const days = Math.round(absDiff / DAY);
       return `in ${days} ${days === 1 ? 'day' : 'days'}`;
     }
     if (absDiff < YEAR) {
-      const months = Math.floor(absDiff / MONTH);
+      const months = Math.round(absDiff / MONTH);
       return `in ${months} ${months === 1 ? 'month' : 'months'}`;
     }
-    const years = Math.floor(absDiff / YEAR);
+    const years = Math.round(absDiff / YEAR);
     return `in ${years} ${years === 1 ? 'year' : 'years'}`;
   }
 
@@ -203,25 +203,25 @@ function getRelativeTimeString(date: Date, now: Date): string {
     return `${diffSeconds} seconds ago`;
   }
   if (diffSeconds < HOUR) {
-    const mins = Math.floor(diffSeconds / MINUTE);
+    const mins = Math.round(diffSeconds / MINUTE);
     return `${mins} ${mins === 1 ? 'minute' : 'minutes'} ago`;
   }
   if (diffSeconds < DAY) {
-    const hours = Math.floor(diffSeconds / HOUR);
+    const hours = Math.round(diffSeconds / HOUR);
     return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
   }
   if (diffSeconds < 2 * DAY) {
     return 'yesterday';
   }
   if (diffSeconds < MONTH) {
-    const days = Math.floor(diffSeconds / DAY);
+    const days = Math.round(diffSeconds / DAY);
     return `${days} days ago`;
   }
   if (diffSeconds < YEAR) {
-    const months = Math.floor(diffSeconds / MONTH);
+    const months = Math.round(diffSeconds / MONTH);
     return `${months} ${months === 1 ? 'month' : 'months'} ago`;
   }
-  const years = Math.floor(diffSeconds / YEAR);
+  const years = Math.round(diffSeconds / YEAR);
   return `${years} ${years === 1 ? 'year' : 'years'} ago`;
 }
 
@@ -360,12 +360,7 @@ export function Timestamp({
   const [now, setNow] = useState(() => new Date());
 
   const date = parseValue(value);
-  // An unparseable value (a malformed date string, or a NaN timestamp from
-  // missing data) yields an Invalid Date, and formatting one throws "Invalid
-  // time value" — crashing the whole tree. Compute nothing from it here and
-  // bail out below (after the hooks) instead.
-  const isValidDate = !Number.isNaN(date.getTime());
-  const isoString = isValidDate ? date.toISOString() : '';
+  const isoString = date.toISOString();
 
   // Determine effective format
   const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
@@ -377,20 +372,19 @@ export function Timestamp({
       : format;
 
   // Format the display text
-  const displayText = !isValidDate
-    ? ''
-    : effectiveFormat === 'relative'
+  const displayText =
+    effectiveFormat === 'relative'
       ? getRelativeTimeString(date, now)
       : isAbsoluteFormat(effectiveFormat)
         ? formatTimestamp(date, effectiveFormat, isTimezoneShown)
         : '';
 
   // Full absolute text for tooltip and aria-label
-  const fullAbsoluteText = isValidDate ? getFullAbsoluteString(date) : '';
+  const fullAbsoluteText = getFullAbsoluteString(date);
 
   // Live updates
   useEffect(() => {
-    if (!isLive || !isValidDate || effectiveFormat !== 'relative') {
+    if (!isLive || effectiveFormat !== 'relative') {
       return;
     }
 
@@ -400,15 +394,7 @@ export function Timestamp({
     }, interval);
 
     return () => clearInterval(timer);
-  }, [isLive, isValidDate, effectiveFormat, diffSeconds]);
-
-  // Placed after all hooks so the hook order stays stable across renders.
-  if (!isValidDate) {
-    console.warn(
-      `Timestamp: could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`,
-    );
-    return null;
-  }
+  }, [isLive, effectiveFormat, diffSeconds]);
 
   const showTooltip = hasTooltip && effectiveFormat === 'relative';