@arbor-education/design-system.components 0.25.7 → 0.25.9

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -13,12 +13,24 @@ import {
   type DateDisplayFormat,
   type DateTimePickerDisplayFormat,
 } from 'Components/datePicker/dateInputUtils';
+import { DatePickerCalendar } from 'Components/datePicker/DatePickerCalendar';
 import { DatePickerCalendarHeader } from 'Components/datePicker/DatePickerCalendarHeader';
 import { TextInput } from 'Components/formField/inputs/text/TextInput';
-import { TimeInput, type TimeGranularity, type TimeValue } from 'Components/formField/inputs/time/TimeInput';
+import {
+  TimeInput,
+  type TimeGranularity,
+  type TimeValue,
+} from 'Components/formField/inputs/time/TimeInput';
 import { Popover } from 'radix-ui';
-import { useCallback, useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
-import { DayPicker } from 'react-day-picker';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type PointerEvent,
+} from 'react';
 import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 export type DateTimePickerProps = {
@@ -62,7 +74,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     (date: Date) =>
       displayFormat === 'native'
         ? formatNativeDateTimeInputValue(date, granularity)
-        : formatDateTimeInputValue(date, displayFormat as DateDisplayFormat, granularity),
+        : formatDateTimeInputValue(
+            date,
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ),
     [displayFormat, granularity],
   );
 
@@ -70,31 +86,43 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     (raw: string) =>
       displayFormat === 'native'
         ? parseNativeDateTimeInputValue(raw, granularity)
-        : parseDateTimeInputValue(raw, displayFormat as DateDisplayFormat, granularity),
+        : parseDateTimeInputValue(
+            raw,
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ),
     [displayFormat, granularity],
   );
 
-  const resolvedPlaceholder = placeholder ?? (
-    isNative
-      ? getNativeDateTimePlaceholder(granularity)
-      : getDateTimePlaceholder(displayFormat as DateDisplayFormat, granularity)
-  );
+  const resolvedPlaceholder
+    = placeholder
+      ?? (isNative
+        ? getNativeDateTimePlaceholder(granularity)
+        : getDateTimePlaceholder(
+            displayFormat as DateDisplayFormat,
+            granularity,
+          ));
 
   const initialValue = value ?? defaultValue;
   const isControlled = value !== undefined;
   const [month, setMonth] = useState(initialValue ?? new Date());
-  const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(initialValue);
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(
+    initialValue,
+  );
   const [inputValue, setInputValue] = useState(
     initialValue ? formatInputValue(initialValue) : '',
   );
-  const [timeInputValue, setTimeInputValue] = useState(initialValue ? formatTimeInputValue(initialValue, granularity) : '');
+  const [timeInputValue, setTimeInputValue] = useState(
+    initialValue ? formatTimeInputValue(initialValue, granularity) : '',
+  );
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const selectedDateTimeRef = useRef(selectedDateTime);
   selectedDateTimeRef.current = selectedDateTime;
 
-  const showFieldHint = isNative && selectedDateTime === undefined && inputValue === '';
+  const showFieldHint
+    = isNative && selectedDateTime === undefined && inputValue === '';
   const hasCustomEmptyHint = showFieldHint && placeholder !== undefined;
 
   /** Custom empty hint in native mode: open only on pointer (not Tab focus). */
@@ -163,7 +191,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       return;
     }
 
-    const nextDateTime = mergeDateAndTime(selectedDateTime, nextTimeValue, granularity);
+    const nextDateTime = mergeDateAndTime(
+      selectedDateTime,
+      nextTimeValue,
+      granularity,
+    );
     setSelectedDateTime(nextDateTime);
     setInputValue(formatInputValue(nextDateTime));
     onChange?.(nextDateTime);
@@ -178,7 +210,11 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       return;
     }
 
-    const nextDateTime = mergeDateAndTime(nextDate, timeInputValue, granularity);
+    const nextDateTime = mergeDateAndTime(
+      nextDate,
+      timeInputValue,
+      granularity,
+    );
     setSelectedDateTime(nextDateTime);
     setMonth(nextDateTime);
     setInputValue(formatInputValue(nextDateTime));
@@ -204,10 +240,9 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
   return (
     <div className={classNames('ds-date-time-picker', className)}>
       <div
-        className={classNames(
-          'ds-date-time-picker__field',
-          { 'ds-date-time-picker__field--show-hint': showFieldHint },
-        )}
+        className={classNames('ds-date-time-picker__field', {
+          'ds-date-time-picker__field--show-hint': showFieldHint,
+        })}
       >
         <TextInput
           ref={inputRef}
@@ -232,7 +267,10 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
             )
           : null}
       </div>
-      <Popover.Root open={isPickerOpen} onOpenChange={open => setIsPickerOpen(open)}>
+      <Popover.Root
+        open={isPickerOpen}
+        onOpenChange={open => setIsPickerOpen(open)}
+      >
         <Popover.Trigger asChild>
           <Button
             className="ds-date-time-picker__button"
@@ -263,26 +301,16 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
                 highlightStringMatches={highlightStringMatches}
                 hasError={hasError}
               />
-              <DatePickerCalendarHeader month={month} onMonthChange={setMonth} />
-              <DayPicker
-                className="ds-date-time-picker__calendar"
+              <DatePickerCalendarHeader
                 month={month}
                 onMonthChange={setMonth}
-                autoFocus
-                role="application"
-                mode="single"
-                selected={selectedDateTime}
-                onSelect={handleDayPickerSelect}
-                hideNavigation
-                footer={(
-                  <Button
-                    variant="text-link"
-                    onClick={handleTodayClick}
-                    className="ds-date-time-picker__today-button"
-                  >
-                    Today
-                  </Button>
-                )}
+              />
+              <DatePickerCalendar
+                month={month}
+                setMonth={setMonth}
+                selectedDate={selectedDateTime}
+                onDayPickerSelect={handleDayPickerSelect}
+                handleTodayClick={handleTodayClick}
               />
             </div>
           </Popover.Content>

package/src/components/dateTimePicker/dateTimePicker.scss

@@ -13,5 +13,3 @@
 .ds-date-time-picker__time {
   width: 100%;
 }
-
-@include shell.ds-date-picker-shell-calendar("date-time-picker");

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

@@ -87,6 +87,7 @@ const DEVELOPER_NOTES = [
   '| `dsSelectDropdownCellRenderer` | `Table.SelectDropdownCellRenderer` | Renders a `SelectDropdown` in a cell |',
   '| `dsBooleanCellRenderer` | `Table.BooleanCellRenderer` | Read-only boolean display |',
   '| `dsCheckboxCellRenderer` | `Table.CheckboxCellRenderer` | Editable boolean checkbox |',
+  '| `dsNumberInputCellRenderer` | `Table.NumberInputCellRenderer` | Editable numeric input |',
   '| `dsDateCellEditor` | `Table.DateCellEditor` | Date picker cell editor |',
   '',
   '---',
@@ -2408,4 +2409,48 @@ export const WithComboboxCellRenderer: Story = {
   },
 };
 
+const numberInputSampleData = [
+  { name: 'Alice Johnson', sessions: 12, score: 95 },
+  { name: 'Bob Smith', sessions: 8, score: 72 },
+  { name: 'Charlie Brown', sessions: 15, score: 88 },
+  { name: 'Diana Prince', sessions: 3, score: 60 },
+];
+
+const numberInputColDefs: (ColDef | ColGroupDef)[] = [
+  { field: 'name', headerName: 'Name', flex: 2 },
+  {
+    field: 'sessions',
+    headerName: 'Sessions',
+    flex: 1,
+    editable: false,
+    cellRenderer: 'dsNumberInputCellRenderer',
+    cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+  },
+  {
+    field: 'score',
+    headerName: 'Score (/100)',
+    flex: 1,
+    editable: false,
+    cellRenderer: 'dsNumberInputCellRenderer',
+    cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+  },
+];
+
+export const WithNumberInputCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns can use the `dsNumberInputCellRenderer` cell renderer to display an editable numeric input inside the cell. Pass `min` and `max` via `cellRendererParams` to constrain the allowed range — the spinners disable at the bounds.',
+      },
+    },
+  },
+  args: {
+    rowData: numberInputSampleData,
+    columnDefs: numberInputColDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

package/src/components/table/Table.tsx

@@ -35,6 +35,7 @@ import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer.js';
 import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer.js';
 import { ComboboxCellRenderer } from './cellRenderers/ComboboxCellRenderer.js';
 import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer.js';
+import { NumberInputCellRenderer } from './cellRenderers/NumberInputCellRenderer.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -210,6 +211,7 @@ export const Table = (props: TableProps) => {
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
               dsComboboxCellRenderer: ComboboxCellRenderer,
+              dsNumberInputCellRenderer: NumberInputCellRenderer,
               ...components,
             }}
             {...rest}
@@ -245,6 +247,7 @@ Table.ComboboxCellRenderer = ComboboxCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;
+Table.NumberInputCellRenderer = NumberInputCellRenderer;
 
 Table.Spacing = TABLE_SPACING;
 Table.SettingsItems = TABLE_SETTINGS_ITEMS;

package/src/components/table/cellRenderers/NumberInputCellRenderer.stories.tsx

@@ -0,0 +1,346 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Controls,
+  Heading as DocHeading,
+  Markdown,
+  Primary as DocPrimary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { NumberInputCellRenderer } from './NumberInputCellRenderer.js';
+import { Table } from 'Components/table/Table';
+
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+
+const DESCRIPTION_INTRO = [
+  '`NumberInputCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `NumberInput`',
+  'permanently inside a table cell. On change, it calls `node.setDataValue` to update the row data in-place.',
+  '',
+  'Register it via the string key `dsNumberInputCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+].join('\n');
+
+const USAGE_GUIDANCE = [
+  '### When to use',
+  '',
+  '- On numeric columns where the user edits a value directly in the table without opening a form',
+  '- Quantities, counts, scores, or any bounded numeric field that should be editable inline',
+  '',
+  '---',
+  '',
+  '### When NOT to use',
+  '',
+  '| Situation | Use instead |',
+  '|---|---|',
+  '| Display-only number (no editing) | Plain AG Grid value formatting or `DefaultCellRenderer` |',
+  '| The edit requires confirmation or a side effect | Handle in a modal; do not edit inline |',
+  '| Free-form decimal entry without step constraints | A form in a slideover |',
+].join('\n');
+
+const DEVELOPER_NOTES = [
+  '### Critical usage patterns',
+  '',
+  '**`colDef.field` must be set for changes to persist.**',
+  'On change, the renderer calls `node.setDataValue(colDef.field, parsedValue)`. If `field` is not set',
+  'on the column definition, the change is silently ignored.',
+  '',
+  '**Non-finite input (empty or non-numeric) is coerced to `0`.**',
+  'If the user clears the input, `setDataValue` is called with `0` rather than `NaN`.',
+  '',
+  '**Pass `min`, `max`, and `disabled` via `cellRendererParams`.**',
+  'These are forwarded directly to `NumberInput`.',
+  '',
+  '```tsx',
+  "import { Table } from '@arbor-education/design-system.components';",
+  '',
+  'const colDefs = [',
+  '  {',
+  "    field: 'quantity',",
+  "    headerName: 'Quantity',",
+  "    cellRenderer: 'dsNumberInputCellRenderer',",
+  '    cellRendererParams: { min: 0, max: 100 },',
+  '  },',
+  '];',
+  '```',
+  '',
+  '---',
+  '',
+  '### TypeScript types',
+  '',
+  '```ts',
+  "import { NumberInputCellRenderer } from '@arbor-education/design-system.components';",
+  '```',
+  '',
+  '`NumberInputCellRenderer` accepts `CustomCellRendererProps` from AG Grid plus `value: number | null`,',
+  '`min?: number`, `max?: number`, and `disabled?: boolean` (passed via `cellRendererParams`).',
+].join('\n');
+
+const RELATED_COMPONENTS = [
+  '## Related components',
+  '',
+  '[Table](?path=/docs/components-table--docs) · [NumberInput](?path=/docs/components-numberinput--docs) · [CheckboxCellRenderer](?path=/docs/components-table-cellrenderers-checkboxcellrenderer--docs)',
+].join('\n');
+
+const PROPS_INTRO = 'The preview below uses a mock AG Grid row node. Type a value or use the +/− spinners — `node.setDataValue` is wired to local state in this preview; in a real table it updates the row data in-place.';
+
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+
+function NumberInputCellRendererDocsPage() {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Markdown>{DESCRIPTION_INTRO}</Markdown>
+      <DocHeading>Interactive example</DocHeading>
+      <Markdown>{PROPS_INTRO}</Markdown>
+      <DocPrimary />
+      <Controls />
+      <DocHeading>Usage guidance</DocHeading>
+      <Markdown>{USAGE_GUIDANCE}</Markdown>
+      <DocHeading>Developer notes</DocHeading>
+      <Markdown>{DEVELOPER_NOTES}</Markdown>
+      <DocHeading>Examples</DocHeading>
+      <Stories title="" />
+      <Markdown>{RELATED_COMPONENTS}</Markdown>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Table/CellRenderers/NumberInputCellRenderer',
+  component: NumberInputCellRenderer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: { page: NumberInputCellRendererDocsPage },
+  },
+  argTypes: {
+    value: {
+      control: false,
+      description: 'Current numeric value. `null` is rendered as `0`. On change, the parsed float is written back via `node.setDataValue`.',
+      table: {
+        type: { summary: 'number | null' },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    min: {
+      control: false,
+      description: 'Minimum allowed value. The minus spinner is disabled when the value reaches this bound.',
+      table: { type: { summary: 'number' } },
+    },
+    max: {
+      control: false,
+      description: 'Maximum allowed value. The plus spinner is disabled when the value reaches this bound.',
+      table: { type: { summary: 'number' } },
+    },
+    disabled: {
+      control: false,
+      description: 'When `true`, the input and spinners are non-interactive.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    node: {
+      control: false,
+      description: 'AG Grid row node. The renderer calls `node.setDataValue` on each value change.',
+      table: { type: { summary: 'IRowNode' } },
+    },
+    colDef: {
+      control: false,
+      description: '`colDef.field` is used as the key passed to `node.setDataValue`. Changes are silently ignored when `field` is absent.',
+      table: { type: { summary: 'ColDef' } },
+    },
+  },
+} satisfies Meta<typeof NumberInputCellRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof NumberInputCellRenderer>;
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+const withDescription = (story: Story, description: string): Story => ({
+  ...story,
+  parameters: {
+    ...story.parameters,
+    docs: { ...story.parameters?.docs, description: { story: description } },
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Template components
+// ---------------------------------------------------------------------------
+
+const InteractiveTemplate = () => {
+  const [count, setCount] = useState<number>(5);
+  const mockNode = { setDataValue: (_: unknown, val: number) => setCount(val) } as CustomCellRendererProps['node'];
+
+  return (
+    <NumberInputCellRenderer
+      {...({} as unknown as CustomCellRendererProps)}
+      value={count}
+      node={mockNode}
+      colDef={{ field: 'count' }}
+    />
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: InteractiveTemplate,
+  },
+  'Interactive `NumberInput` backed by a mock row node. Use the +/− spinners or type directly — `node.setDataValue` updates local state in this preview; in a real table it updates AG Grid row data in-place.',
+);
+
+export const WithMinMax: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => {
+      const [val, setVal] = useState<number>(5);
+      const mockNode = { setDataValue: (_: unknown, v: number) => setVal(v) } as CustomCellRendererProps['node'];
+
+      return (
+        <NumberInputCellRenderer
+          {...({} as unknown as CustomCellRendererProps)}
+          value={val}
+          min={0}
+          max={10}
+          node={mockNode}
+          colDef={{ field: 'count' }}
+        />
+      );
+    },
+  },
+  'Bounded range via `min={0}` and `max={10}`. The minus spinner disables at `0`; the plus spinner disables at `10`. Values typed outside the range are clamped on blur.',
+);
+
+export const NullValue: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <NumberInputCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={null}
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        colDef={{ field: 'count' }}
+      />
+    ),
+  },
+  '`value={null}` is coerced to `0` before being passed to `NumberInput`. This keeps the input always controlled with a valid numeric display.',
+);
+
+export const Disabled: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <NumberInputCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={7}
+        disabled
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        colDef={{ field: 'count' }}
+      />
+    ),
+  },
+  'Disabled state — pass `disabled: true` via `cellRendererParams` to prevent editing. Useful for read-only rows or conditional editing logic.',
+);
+
+const NUMBER_INPUT_TABLE_DATA = [
+  { name: 'Alice Johnson', sessions: 12, score: 95 },
+  { name: 'Bob Smith', sessions: 8, score: 72 },
+  { name: 'Charlie Brown', sessions: 15, score: 88 },
+  { name: 'Diana Prince', sessions: 3, score: 60 },
+];
+
+export const InATable: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Table } from '@arbor-education/design-system.components';
+
+const rowData = [
+  { name: 'Alice Johnson', sessions: 12, score: 95 },
+  { name: 'Bob Smith', sessions: 8, score: 72 },
+  { name: 'Charlie Brown', sessions: 15, score: 88 },
+  { name: 'Diana Prince', sessions: 3, score: 60 },
+];
+
+function NumberInputCellRendererExample() {
+  return (
+    <Table
+      rowData={rowData}
+      columnDefs={[
+        { field: 'name', headerName: 'Name', flex: 2 },
+        {
+          field: 'sessions',
+          headerName: 'Sessions',
+          flex: 1,
+          editable: false,
+          cellRenderer: 'dsNumberInputCellRenderer',
+          cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+        },
+        {
+          field: 'score',
+          headerName: 'Score (/100)',
+          flex: 1,
+          editable: false,
+          cellRenderer: 'dsNumberInputCellRenderer',
+          cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+        },
+      ]}
+      defaultColDef={{ flex: 1, minWidth: 120 }}
+      domLayout="autoHeight"
+    />
+  );
+}
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <Table
+        rowData={NUMBER_INPUT_TABLE_DATA}
+        columnDefs={[
+          { field: 'name', headerName: 'Name', flex: 2 },
+          {
+            field: 'sessions',
+            headerName: 'Sessions',
+            flex: 1,
+            editable: false,
+            cellRenderer: 'dsNumberInputCellRenderer',
+            cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+          },
+          {
+            field: 'score',
+            headerName: 'Score (/100)',
+            flex: 1,
+            editable: false,
+            cellRenderer: 'dsNumberInputCellRenderer',
+            cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+          },
+        ]}
+        defaultColDef={{ flex: 1, minWidth: 120 }}
+        domLayout="autoHeight"
+      />
+    ),
+  },
+  '`dsNumberInputCellRenderer` wired up inside a full `Table`. Sessions has `min={0}`; Score has `min={0}` and `max={100}`. Edit any cell — AG Grid calls `node.setDataValue` which updates the row data in-place.',
+);