Data table API

const Root = ({ className, ...props }: RootSlotProps) => (
  <div className={cx("sdt", className)} {...props} />
);

const Table = ({ className, ...props }: TableSlotProps) => (
  <table className={cx("sdt__table", className)} {...props} />
);

const Head = ({ className, ...props }: SectionSlotProps) => (
  <thead className={cx("sdt__head", className)} {...props} />
);

const Body = ({ className, ...props }: SectionSlotProps) => (
  <tbody className={cx("sdt__body", className)} {...props} />
);

const HeaderRow = ({ className, ...props }: RowSlotProps) => (
  <tr className={cx("sdt__row", className)} {...props} />
);

const HeaderCell = ({ className, ...props }: HeaderCellSlotProps) => (
  <th className={cx("sdt__cell", className)} {...props} />
);

const Foot = ({ className, ...props }: SectionSlotProps) => (
  <tfoot className={cx("sdt__foot", className)} {...props} />
);

const FooterRow = ({ className, ...props }: RowSlotProps) => (
  <tr className={cx("sdt__row", className)} {...props} />
);

const FooterCell = ({ className, ...props }: CellSlotProps) => (
  <td className={cx("sdt__cell", className)} {...props} />
);

const Row = ({ className, ...props }: RowSlotProps) => (
  <tr className={cx("sdt__row", className)} {...props} />
);

const Cell = ({ className, ...props }: CellSlotProps) => (
  <td className={cx("sdt__cell", className)} {...props} />
);

const Checkbox = ({ checked, indeterminate, disabled, onCheckedChange, ...aria }: CheckboxSlotProps) => {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (ref.current) ref.current.indeterminate = indeterminate;
  }, [indeterminate]);

  return (
    <input
      ref={ref}
      type="checkbox"
      className="sdt__checkbox"
      checked={checked}
      disabled={disabled}
      onChange={(event) => onCheckedChange(event.target.checked)}
      onClick={(event) => event.stopPropagation()}
      {...aria}
    />
  );
};

const SortTrigger = ({ direction, onClick, children }: SortTriggerSlotProps) => {
  const { components } = useDataTableContext();
  return (
    <button type="button" className="sdt__sort" data-sorted={direction || undefined} onClick={onClick}>
      {children}
      <span className="sdt__sort-icon">
        <components.SortIcon direction={direction} />
      </span>
    </button>
  );
};

const SortIcon = ({ direction }: SortIconSlotProps) =>
direction === "asc" ? <ArrowUpIcon /> : direction === "desc" ? <ArrowDownIcon /> : <ArrowUpDownIcon />;

const ExpandToggle = ({ expanded, onToggle, depth: _depth, ...aria }: ExpandToggleSlotProps) => (
  <button
    type="button"
    className="sdt__expand"
    aria-expanded={expanded}
    data-expanded={expanded || undefined}
    onClick={(event) => {
      event.stopPropagation();
      onToggle();
    }}
    {...aria}
  >
    <ChevronIcon direction="next" />
  </button>
);

const Skeleton = (_: SkeletonSlotProps) => <div className="sdt__skeleton" />;

const Empty = ({ message }: EmptySlotProps) => <div className="sdt__message">{message}</div>;

const ErrorState = ({ message, retryLabel, onRetry }: ErrorSlotProps) => (
  <div className="sdt__error" role="alert">
    <span>{message}</span>
    {onRetry && (
      <button type="button" className="sdt__button" onClick={onRetry}>
        {retryLabel}
      </button>
    )}
  </div>
);

const Pagination = (props: PaginationSlotProps) => {
  const { components } = useDataTableContext();
  const { labels } = props;
  return (
    <nav className="sdt__pagination" aria-label={labels.pagination}>
      <div className="sdt__pagination-buttons">
        <components.PaginationButton
          direction="previous"
          disabled={!props.canPreviousPage}
          onClick={props.previousPage}
          aria-label={labels.previousPage}
        />
        <components.PaginationButton
          direction="next"
          disabled={!props.canNextPage}
          onClick={props.nextPage}
          aria-label={labels.nextPage}
        />
      </div>
      <span className="sdt__pagination-info" aria-live="polite">
        {labels.pageInfo(props.pageIndex + 1, props.pageCount)}
      </span>
      <components.PageSizeSelect
        value={props.pageSize}
        options={props.pageSizeOptions}
        onValueChange={props.setPageSize}
        label={labels.rowsPerPage}
      />
    </nav>
  );
};

const PaginationButton = ({ direction, ...props }: PaginationButtonSlotProps) => (
  <button type="button" className="sdt__button sdt__button--icon" {...props}>
    <ChevronIcon direction={direction} />
  </button>
);

const PageSizeSelect = ({ value, options, onValueChange, label }: PageSizeSelectSlotProps) => {
  const id = useId();
  const { locale } = useDataTableContext();
  const { code } = useLocaleSection("table", locale);
  const root = useRef<HTMLDivElement>(null);
  const items = useMemo(() => {
    const number = code === undefined ? String : createNumber(code);
    return options.map((option) => ({ value: option, label: number(option) }));
  }, [options, code]);
  return (
    <div className="sdt__page-size" ref={root}>
      <span id={id} onClick={() => root.current?.querySelector<HTMLElement>("[role=combobox]")?.focus()}>
        {label}
      </span>
      <Autocomplete
        className="sdt__page-size-select"
        aria-labelledby={id}
        options={items}
        value={value}
        onChange={(next: OptionValue | null) => {
          if (next !== null) onValueChange(Number(next));
        }}
        searchable={false}
        clearable={false}
        matchTriggerWidth={false}
        locale={locale}
      />
    </div>
  );
};

const DragHandle = ({ className, ...props }: DragHandleSlotProps) => (
  <button type="button" className={cx("sdt__drag", className)} {...props}>
    <GripIcon />
  </button>
);

const CellEditor = (props: CellEditorSlotProps) => {
  const { locale, spreadsheet } = useDataTableContext();
  const errorId = useId();
  const invalid = props.error !== null;
  const message = invalid ? (
    <span id={errorId} role="alert" className="sdt__editor-error" style={ERROR_LAYOUT}>
      {props.error}
    </span>
  ) : null;
  const described = invalid ? errorId : undefined;

  if (props.kind === "select") {
    const { options, onCommit } = props;
    const items = options.map((label, index) => ({ value: index, label }));
    const index = options.indexOf(props.value);
    return (
      <div className="sdt__editor" style={EDITOR_LAYOUT}>
        <Autocomplete
          className="sdt__editor-control"
          slotProps={{ trigger: { className: "sdt__editor-trigger" } }}
          options={items}
          value={index >= 0 ? index : null}
          onChange={(next: OptionValue | null) => {
            if (next !== null) onCommit(options[Number(next)]);
          }}
          defaultOpen
          // Opened by typing over the cell, the typed text searches; otherwise it is a plain list.
          searchable={props.search !== ""}
          searchIn={props.search !== "" ? "trigger" : undefined}
          defaultSearchQuery={props.search || undefined}
          clearable={false}
          matchTriggerWidth={false}
          invalid={invalid}
          aria-label={props["aria-label"]}
          aria-describedby={described}
          locale={locale}
        />
        {message}
      </div>
    );
  }

  if (props.kind === "date") {
    const { onCommit, onValueChange } = props;
    // The slotsmith DatePicker when the app passed it (`spreadsheet.datePicker`), else the browser's own.
    const Picker = spreadsheet.datePicker;
    return (
      <div className="sdt__editor" style={EDITOR_LAYOUT}>
        {Picker ? (
          <Picker
            className="sdt__editor-control"
            slotProps={{ trigger: { className: "sdt__editor-trigger" } }}
            mode="single"
            trigger="button"
            valueFormat="YYYY-MM-DD"
            value={props.value === "" ? null : props.value}
            onChange={(date) => onCommit(date ?? "")}
            defaultOpen
            invalid={invalid}
            aria-label={props["aria-label"]}
            aria-describedby={described}
            locale={locale}
          />
        ) : (
          <input
            type="date"
            className="sdt__editor-input"
            value={props.value}
            onChange={(event) => onValueChange(event.target.value)}
            aria-label={props["aria-label"]}
            aria-invalid={invalid || undefined}
            aria-describedby={described}
          />
        )}
        {message}
      </div>
    );
  }

  const { onValueChange } = props;
  return (
    <div className="sdt__editor" style={EDITOR_LAYOUT}>
      <input
        className="sdt__editor-input"
        value={props.value}
        onChange={(event) => onValueChange(event.target.value)}
        inputMode={props.kind === "number" ? "decimal" : undefined}
        autoComplete="off"
        spellCheck={false}
        aria-label={props["aria-label"]}
        aria-invalid={invalid || undefined}
        aria-describedby={described}
      />
      {message}
    </div>
  );
};

const FillHandle = ({ className, ...props }: FillHandleSlotProps) => (
  <span className={cx("sdt__fill-handle", className)} {...props} />
);