@chassis-ui/react 0.1.0 → 0.1.1

package/src/components/datagrid/useColumnGeometry.ts

@@ -0,0 +1,161 @@
+import { RefObject, useEffect, useMemo, useState } from 'react'
+import { Key } from 'react-aria-components'
+import { ColumnSize, ColumnStaticSize } from 'react-stately'
+
+export interface ColumnGeometryColumn {
+  /**
+   * The column's unique id — matches `DataGridColumn`'s `id`/collection key.
+   */
+  id: Key
+  /**
+   * Mirrors `DataGridColumn`'s prop of the same name.
+   */
+  defaultWidth?: ColumnSize | null
+  /**
+   * Mirrors `DataGridColumn`'s prop of the same name.
+   */
+  minWidth?: ColumnStaticSize | null
+  /**
+   * Mirrors `DataGridColumn`'s prop of the same name.
+   */
+  maxWidth?: ColumnStaticSize | null
+}
+
+export interface ColumnOffset {
+  id: Key
+  /**
+   * Cumulative distance in pixels from the start edge of the row to this column's start edge.
+   */
+  offset: number
+  width: number
+}
+
+const STATIC_SIZE_PATTERN = /^\d+(\.\d+)?%?$/
+
+/**
+ * Whether a `ColumnSize` resolves to a definite pixel value without waiting for layout: a plain
+ * number, a numeric string (`'150'`), or a percentage string (`'50%'`) — resolvable as soon as
+ * the container's own width is known. An `'<n>fr'` string is proportional — it only resolves to
+ * pixels once the layout engine has distributed the container's remaining space among every
+ * fractional column, so it's excluded here.
+ */
+export const isStaticColumnSize = (size: ColumnSize | null | undefined): size is ColumnStaticSize =>
+  size != null && (typeof size === 'number' || STATIC_SIZE_PATTERN.test(size))
+
+const resolveStaticWidth = (size: ColumnStaticSize, containerWidth: number): number => {
+  if (typeof size === 'number') return size
+  return size.endsWith('%') ? (parseFloat(size) / 100) * containerWidth : parseFloat(size)
+}
+
+/**
+ * Computes cumulative left-edge offsets for a list of columns from their declared
+ * `defaultWidth`/`minWidth`/`maxWidth` props, without reading the DOM. Only correct for a column
+ * whose own width — and every preceding column's width — is statically resolvable (see
+ * `isStaticColumnSize`): a column at or after the first `fr`-sized column has no offset that can
+ * be known before layout runs, so it resolves to `null`. Callers should fall back to
+ * `useColumnGeometry`'s DOM measurement for those.
+ */
+export function calculateStaticColumnOffsets(
+  columns: readonly ColumnGeometryColumn[],
+  containerWidth: number
+): Map<Key, ColumnOffset | null> {
+  const offsets = new Map<Key, ColumnOffset | null>()
+  let offset = 0
+  let resolvable = true
+
+  for (const column of columns) {
+    if (!resolvable || !isStaticColumnSize(column.defaultWidth)) {
+      resolvable = false
+      offsets.set(column.id, null)
+      continue
+    }
+
+    let width = resolveStaticWidth(column.defaultWidth, containerWidth)
+    if (isStaticColumnSize(column.minWidth)) {
+      width = Math.max(width, resolveStaticWidth(column.minWidth, containerWidth))
+    }
+    if (isStaticColumnSize(column.maxWidth)) {
+      width = Math.min(width, resolveStaticWidth(column.maxWidth, containerWidth))
+    }
+
+    offsets.set(column.id, { id: column.id, offset, width })
+    offset += width
+  }
+
+  return offsets
+}
+
+interface MeasuredRect {
+  offset: number
+  width: number
+}
+
+/**
+ * Measures the mounted column-header cells, keyed by their 0-based column position.
+ *
+ * Keyed off each cell's own `aria-colindex` (1-based, assigned from the column's position in the
+ * resolved collection) rather than its position among the cells that happen to be in the DOM: the
+ * layout engine windows columns horizontally as well as rows, so `querySelectorAll` returns only
+ * the headers intersecting the horizontal viewport. Matching those positionally to the full column
+ * list — as this used to — mapped every column past the first unmounted one onto the wrong rect.
+ * A header without the attribute is skipped rather than guessed at.
+ */
+const measureColumnHeaders = (container: HTMLElement): Map<number, MeasuredRect> => {
+  const measured = new Map<number, MeasuredRect>()
+  container.querySelectorAll<HTMLElement>('[role="columnheader"]').forEach((cell) => {
+    const colIndex = Number(cell.getAttribute('aria-colindex'))
+    if (!Number.isInteger(colIndex) || colIndex < 1) return
+    measured.set(colIndex - 1, { offset: cell.offsetLeft, width: cell.offsetWidth })
+  })
+  return measured
+}
+
+/**
+ * Resolves each column's rendered left-offset and width, independent of the virtualizer's
+ * private layout internals. Statically-sized columns (see `isStaticColumnSize`) resolve
+ * immediately from their declared props; `fr`-sized (proportional) columns fall back to
+ * `ResizeObserver`-measured DOM rects of the mounted `[role="columnheader"]` cells inside
+ * `containerRef`, matched to `columns` by `aria-colindex` (see `measureColumnHeaders`), since
+ * those only resolve to real pixels after the layout engine has actually distributed space.
+ */
+export function useColumnGeometry(
+  columns: readonly ColumnGeometryColumn[],
+  containerRef: RefObject<HTMLElement | null>
+): Map<Key, ColumnOffset> {
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [measured, setMeasured] = useState<Map<number, MeasuredRect>>(() => new Map())
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || typeof ResizeObserver === 'undefined') return
+
+    const measure = () => {
+      setContainerWidth(container.clientWidth)
+      setMeasured(measureColumnHeaders(container))
+    }
+
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [containerRef])
+
+  const staticOffsets = useMemo(
+    () => calculateStaticColumnOffsets(columns, containerWidth),
+    [columns, containerWidth]
+  )
+
+  return useMemo(() => {
+    const result = new Map<Key, ColumnOffset>()
+    columns.forEach((column, index) => {
+      const staticOffset = staticOffsets.get(column.id)
+      const measuredRect = measured.get(index)
+      if (staticOffset) {
+        result.set(column.id, staticOffset)
+      } else if (measuredRect) {
+        result.set(column.id, { id: column.id, ...measuredRect })
+      }
+    })
+    return result
+  }, [columns, staticOffsets, measured])
+}

package/src/components/datepicker/ClearButton.tsx

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react'
 import { useButton } from 'react-aria'
 
+import { useCalendarLabels } from '../calendar/labels'
+
 interface ClearButtonProps {
   isDisabled?: boolean
   onPress: () => void
@@ -12,7 +14,8 @@ interface ClearButtonProps {
 // press/keyboard semantics consistent with the rest of this library, rather than a raw `onClick`.
 export const ClearButton = ({ isDisabled, onPress }: ClearButtonProps) => {
   const ref = useRef<HTMLButtonElement>(null)
-  const { buttonProps } = useButton({ 'aria-label': 'Clear', isDisabled, onPress }, ref)
+  const labels = useCalendarLabels()
+  const { buttonProps } = useButton({ 'aria-label': labels.clear, isDisabled, onPress }, ref)
 
   return (
     <button {...buttonProps} className="input-adorn" ref={ref} type="button">

package/src/components/datepicker/DatePicker.scss

@@ -35,8 +35,8 @@
 }
 
 .datepicker-segment {
-  padding-inline: var(--cx-space-3xsmall);
-  @include border-radius(var(--cx-border-radius-small));
+  padding-inline: var(--cx-space-3xs);
+  @include border-radius(var(--cx-border-radius-sm));
   outline: 0;
 }
 

package/src/components/datepicker/DatePicker.tsx

@@ -17,6 +17,7 @@ import { ClearButton } from './ClearButton'
 import { DateField } from './DateField'
 import { renderDatePickerShell } from './renderDatePickerShell'
 import './DatePicker.scss'
+import { CalendarLabels, CalendarLabelsProvider, DEFAULT_CALENDAR_LABELS } from '../calendar/labels'
 
 interface DatePickerBaseProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -72,6 +73,14 @@ interface DatePickerBaseProps extends Omit<
    * shown but cannot be selected.
    */
   isDateUnavailable?: (date: DateValue) => boolean
+  /**
+   * Overrides for the strings this component and its calendar render themselves rather than
+   * getting from the active locale — the calendar trigger, the clear adornment, and the calendar's
+   * own year-view arrows/announcements. Date segment order, month and weekday names all follow
+   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,
+   * so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>
   /**
    * Whether the calendar popover is open (controlled).
    */
@@ -100,9 +109,9 @@ interface DatePickerBaseProps extends Omit<
    */
   onOpenChange?: (isOpen: boolean) => void
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
    * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
@@ -202,6 +211,7 @@ const DatePickerSingle = forwardRef<HTMLDivElement, DatePickerSingleProps>(
       isDateUnavailable,
       isOpen,
       label,
+      labels,
       maxValue,
       minValue,
       name,
@@ -290,76 +300,84 @@ const DatePickerSingle = forwardRef<HTMLDivElement, DatePickerSingleProps>(
     // `Calendar` merges onto its root.
     const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)
 
-    return renderFormField({
-      children: (
-        <>
-          {renderDatePickerShell({
-            calendar: (
-              <Calendar
-                {...domDialogProps}
-                autoFocus
-                disabled={disabled}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={combinedIsDateUnavailable}
-                maxValue={maxValue}
-                minValue={minValue}
-                onChange={calendarProps.onChange}
-                ref={calendarRef}
-                value={calendarProps.value}
-                visibleMonths={visibleMonths}
-              />
-            ),
-            className,
-            clearButton: state.value && !disabled && (
-              <ClearButton
-                onPress={() => {
-                  state.setValue(null)
-                  // `ClearButton` unmounts itself once `state.value` clears — without this, focus
-                  // would otherwise drop to `document.body` (same failure mode fixed for the
-                  // calendar's own month/year view switch — see `CalendarMonthYearPicker`'s comment).
-                  toggleButtonRef.current?.focus()
-                }}
-              />
-            ),
-            disabled,
-            field: <DateField fieldProps={fieldProps} />,
-            fieldClassName: 'w-100 overflow-x-scroll',
-            groupProps: {
-              ...mergeProps(groupProps, rest),
-              'aria-describedby': describedBy,
-              'aria-labelledby': labelledBy
-            },
-            groupRef: forkedGroupRef,
-            invalid,
-            isOpen: state.isOpen,
-            overlayDismissProps,
-            overlayRef,
-            overlayStyle,
-            placementAttr,
-            size,
-            toggleButton: (
-              <CalendarToggleButton buttonProps={buttonProps} ref={toggleButtonRef} state={state} />
-            ),
-            valid
-          })}
-          {name && (
-            <input
-              disabled={disabled}
-              name={name}
-              type="hidden"
-              value={state.value ? state.value.toString() : ''}
-            />
-          )}
-        </>
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
+    return (
+      <CalendarLabelsProvider labels={labels}>
+        {renderFormField({
+          children: (
+            <>
+              {renderDatePickerShell({
+                calendar: (
+                  <Calendar
+                    {...domDialogProps}
+                    autoFocus
+                    disabled={disabled}
+                    firstDayOfWeek={firstDayOfWeek}
+                    isDateUnavailable={combinedIsDateUnavailable}
+                    maxValue={maxValue}
+                    minValue={minValue}
+                    onChange={calendarProps.onChange}
+                    ref={calendarRef}
+                    value={calendarProps.value}
+                    visibleMonths={visibleMonths}
+                  />
+                ),
+                className,
+                clearButton: state.value && !disabled && (
+                  <ClearButton
+                    onPress={() => {
+                      state.setValue(null)
+                      // `ClearButton` unmounts itself once `state.value` clears — without this, focus
+                      // would otherwise drop to `document.body` (same failure mode fixed for the
+                      // calendar's own month/year view switch — see `CalendarMonthYearPicker`'s comment).
+                      toggleButtonRef.current?.focus()
+                    }}
+                  />
+                ),
+                disabled,
+                field: <DateField fieldProps={fieldProps} />,
+                fieldClassName: 'w-100 overflow-x-scroll',
+                groupProps: {
+                  ...mergeProps(groupProps, rest),
+                  'aria-describedby': describedBy,
+                  'aria-labelledby': labelledBy
+                },
+                groupRef: forkedGroupRef,
+                invalid,
+                isOpen: state.isOpen,
+                overlayDismissProps,
+                overlayRef,
+                overlayStyle,
+                placementAttr,
+                size,
+                toggleButton: (
+                  <CalendarToggleButton
+                    buttonProps={buttonProps}
+                    ref={toggleButtonRef}
+                    state={state}
+                  />
+                ),
+                valid
+              })}
+              {name && (
+                <input
+                  disabled={disabled}
+                  name={name}
+                  type="hidden"
+                  value={state.value ? state.value.toString() : ''}
+                />
+              )}
+            </>
+          ),
+          help,
+          ids: { feedback: feedbackId, help: helpId, label: labelId },
+          invalid,
+          invalidFeedback,
+          label,
+          valid,
+          validFeedback
+        })}
+      </CalendarLabelsProvider>
+    )
   }
 )
 
@@ -389,6 +407,7 @@ const DatePickerMultiple = forwardRef<HTMLDivElement, DatePickerMultipleProps>(
       isDateUnavailable,
       isOpen,
       label,
+      labels,
       maxValue,
       minValue,
       name,
@@ -457,87 +476,100 @@ const DatePickerMultiple = forwardRef<HTMLDivElement, DatePickerMultipleProps>(
       calendarRef
     )
 
+    // This variant builds its own trigger button props rather than getting them from
+    // `useDatePicker` (see the component comment), so it has to resolve the label itself — it's
+    // the provider here, so it can't read the context it's about to publish.
+    const mergedLabels = { ...DEFAULT_CALENDAR_LABELS, ...labels }
+
     const buttonProps: AriaButtonProps = {
       'aria-expanded': state.isOpen,
       'aria-haspopup': 'dialog',
-      'aria-label': 'Calendar',
+      'aria-label': mergedLabels.calendar,
       isDisabled: disabled
     }
 
-    return renderFormField({
-      children: (
-        <>
-          {renderDatePickerShell({
-            calendar: (
-              <Calendar
-                {...domDialogProps}
-                autoFocus
-                disabled={disabled}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={combinedIsDateUnavailable}
-                maxValue={maxValue}
-                minValue={minValue}
-                onChange={setValues}
-                ref={calendarRef}
-                selectionMode="multiple"
-                value={values}
-                visibleMonths={visibleMonths}
-              />
-            ),
-            className,
-            clearButton: values.length > 0 && !disabled && (
-              <ClearButton
-                onPress={() => {
-                  setValues([])
-                  // See the single-selection `ClearButton` usage above for why this is needed.
-                  toggleButtonRef.current?.focus()
-                }}
-              />
-            ),
-            disabled,
-            field: <MultiDateField values={values} />,
-            fieldClassName: 'w-100 overflow-x-scroll',
-            groupProps: {
-              ...mergeProps(rest),
-              'aria-describedby': describedBy,
-              'aria-disabled': disabled || undefined,
-              'aria-labelledby': labelledBy,
-              id: groupId,
-              role: 'group'
-            },
-            groupRef: forkedGroupRef,
-            invalid,
-            isOpen: state.isOpen,
-            overlayDismissProps,
-            overlayRef,
-            overlayStyle,
-            placementAttr,
-            size,
-            toggleButton: (
-              <CalendarToggleButton buttonProps={buttonProps} ref={toggleButtonRef} state={state} />
-            ),
-            valid
-          })}
-          {name &&
-            values.map((date) => (
-              <input
-                disabled={disabled}
-                key={date.toString()}
-                name={name}
-                type="hidden"
-                value={date.toString()}
-              />
-            ))}
-        </>
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
+    return (
+      <CalendarLabelsProvider labels={labels}>
+        {renderFormField({
+          children: (
+            <>
+              {renderDatePickerShell({
+                calendar: (
+                  <Calendar
+                    {...domDialogProps}
+                    autoFocus
+                    disabled={disabled}
+                    firstDayOfWeek={firstDayOfWeek}
+                    isDateUnavailable={combinedIsDateUnavailable}
+                    maxValue={maxValue}
+                    minValue={minValue}
+                    onChange={setValues}
+                    ref={calendarRef}
+                    selectionMode="multiple"
+                    value={values}
+                    visibleMonths={visibleMonths}
+                  />
+                ),
+                className,
+                clearButton: values.length > 0 && !disabled && (
+                  <ClearButton
+                    onPress={() => {
+                      setValues([])
+                      // See the single-selection `ClearButton` usage above for why this is needed.
+                      toggleButtonRef.current?.focus()
+                    }}
+                  />
+                ),
+                disabled,
+                field: <MultiDateField values={values} />,
+                fieldClassName: 'w-100 overflow-x-scroll',
+                groupProps: {
+                  ...mergeProps(rest),
+                  'aria-describedby': describedBy,
+                  'aria-disabled': disabled || undefined,
+                  'aria-labelledby': labelledBy,
+                  id: groupId,
+                  role: 'group'
+                },
+                groupRef: forkedGroupRef,
+                invalid,
+                isOpen: state.isOpen,
+                overlayDismissProps,
+                overlayRef,
+                overlayStyle,
+                placementAttr,
+                size,
+                toggleButton: (
+                  <CalendarToggleButton
+                    buttonProps={buttonProps}
+                    ref={toggleButtonRef}
+                    state={state}
+                  />
+                ),
+                valid
+              })}
+              {name &&
+                values.map((date) => (
+                  <input
+                    disabled={disabled}
+                    key={date.toString()}
+                    name={name}
+                    type="hidden"
+                    value={date.toString()}
+                  />
+                ))}
+            </>
+          ),
+          help,
+          ids: { feedback: feedbackId, help: helpId, label: labelId },
+          invalid,
+          invalidFeedback,
+          label,
+          valid,
+          validFeedback
+        })}
+      </CalendarLabelsProvider>
+    )
   }
 )