@chassis-ui/react 0.0.0-20260831090525

package/src/components/combobox/ComboboxListBox.tsx

@@ -0,0 +1,98 @@
+import React, { RefObject, useRef } from 'react'
+import classNames from 'classnames'
+import { AriaListBoxOptions, useListBox, useOption } from 'react-aria'
+import { ComboBoxState, Node } from 'react-stately'
+
+import { getVirtualFocusStyle } from '../../utils/virtualFocusStyle'
+import { ComboboxEntry, ComboboxSelectionMode } from '../../utils/comboboxCollection'
+import { Icon } from '../icon/Icon'
+
+interface ComboboxListBoxProps<M extends ComboboxSelectionMode = 'single'> {
+  listBoxProps: AriaListBoxOptions<ComboboxEntry>
+  listBoxRef: RefObject<HTMLElement | null>
+  state: ComboBoxState<ComboboxEntry, M>
+}
+
+// Generic over `M` (single- vs multi-select) purely so both `Combobox` (always single) and
+// `Autocomplete` (either) can pass their own `ComboBoxState` here without a cast — nothing in
+// this file's rendering logic actually depends on which mode is active.
+export const ComboboxListBox = <M extends ComboboxSelectionMode = 'single'>({
+  listBoxProps,
+  listBoxRef,
+  state
+}: ComboboxListBoxProps<M>) => {
+  const { listBoxProps: domListBoxProps } = useListBox(listBoxProps, state, listBoxRef)
+
+  return (
+    <div {...domListBoxProps} ref={listBoxRef as RefObject<HTMLDivElement>}>
+      {[...state.collection].map((node) =>
+        node.type === 'section' ? (
+          <ComboboxSection key={node.key} node={node} state={state} />
+        ) : (
+          <ComboboxOption key={node.key} item={node} state={state} />
+        )
+      )}
+    </div>
+  )
+}
+
+interface ComboboxSectionProps<M extends ComboboxSelectionMode = 'single'> {
+  node: Node<ComboboxEntry>
+  state: ComboBoxState<ComboboxEntry, M>
+}
+
+// Chassis-css groups are `.menu-header` siblings interleaved with `.menu-item`s, no wrapping
+// element — plain, static markup, so there's no need for react-aria's `useListBoxSection`.
+// `useComboBoxState`'s filtering hides child items whose text doesn't match, but doesn't drop an
+// emptied-out section node itself, so a fully-filtered-out group's header is skipped by hand here
+// rather than left to render on its own.
+const ComboboxSection = <M extends ComboboxSelectionMode = 'single'>({
+  node,
+  state
+}: ComboboxSectionProps<M>) => {
+  const childNodes = [...state.collection.getChildren!(node.key)]
+  if (childNodes.length === 0) return null
+
+  return (
+    <>
+      <div className="menu-header" role="presentation">
+        {node.rendered}
+      </div>
+      {childNodes.map((child) => (
+        <ComboboxOption key={child.key} item={child} state={state} />
+      ))}
+    </>
+  )
+}
+
+interface ComboboxOptionProps<M extends ComboboxSelectionMode = 'single'> {
+  item: Node<ComboboxEntry>
+  state: ComboBoxState<ComboboxEntry, M>
+}
+
+const ComboboxOption = <M extends ComboboxSelectionMode = 'single'>({
+  item,
+  state
+}: ComboboxOptionProps<M>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
+    { key: item.key },
+    state,
+    ref
+  )
+
+  return (
+    <div
+      className={classNames('menu-item', {
+        selected: isSelected,
+        disabled: isDisabled
+      })}
+      style={getVirtualFocusStyle(isFocused)}
+      {...optionProps}
+      ref={ref}
+    >
+      {item.rendered}
+      {isSelected && <Icon name="check-solid" className="menu-item-check" />}
+    </div>
+  )
+}

package/src/components/combobox/index.ts

@@ -0,0 +1,6 @@
+export { Combobox } from './Combobox'
+export type { ComboboxProps } from './Combobox'
+export { ComboboxGroup } from './ComboboxGroup'
+export type { ComboboxGroupProps } from './ComboboxGroup'
+export { ComboboxItem } from './ComboboxItem'
+export type { ComboboxItemProps } from './ComboboxItem'

package/src/components/datepicker/CalendarToggleButton.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useRef } from 'react'
+import { AriaButtonProps, useButton } from 'react-aria'
+import { OverlayTriggerState } from 'react-stately'
+
+import { useForkedRef } from '../../hooks'
+
+interface CalendarToggleButtonProps {
+  buttonProps: AriaButtonProps
+  state: OverlayTriggerState
+}
+
+// Shared by `DatePicker` and `DateRangePicker` — both trigger their calendar overlay with an
+// identical calendar-icon button. `buttonProps.onPress` (from that caller's own `useDatePicker`/
+// `useDateRangePicker`) only ever opens the overlay (matches upstream react-aria), so re-clicking
+// the button while it's already open would otherwise do nothing — overridden here to actually
+// toggle. Forwards its ref so callers can move focus onto it explicitly — e.g. `ClearButton` sits
+// immediately before it and unmounts itself on press, so focus needs somewhere to land.
+export const CalendarToggleButton = forwardRef<HTMLButtonElement, CalendarToggleButtonProps>(
+  ({ buttonProps, state }, forwardedRef) => {
+    const internalRef = useRef<HTMLButtonElement>(null)
+    const ref = useForkedRef(internalRef, forwardedRef)
+    const { buttonProps: toggleProps } = useButton(
+      { ...buttonProps, onPress: () => state.toggle() },
+      internalRef
+    )
+
+    return (
+      <button {...toggleProps} className="input-adorn" ref={ref} type="button">
+        <svg
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            height="12"
+            rx="1.5"
+            stroke="currentColor"
+            strokeWidth="1.25"
+            width="13"
+            x="1.5"
+            y="3"
+          />
+          <path d="M1.5 6.5h13" stroke="currentColor" strokeWidth="1.25" />
+          <path
+            d="M4.5 1.5v3M11.5 1.5v3"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="1.25"
+          />
+        </svg>
+      </button>
+    )
+  }
+)
+
+CalendarToggleButton.displayName = 'CalendarToggleButton'

package/src/components/datepicker/ClearButton.tsx

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react'
+import { useButton } from 'react-aria'
+
+interface ClearButtonProps {
+  isDisabled?: boolean
+  onPress: () => void
+}
+
+// Shared by `DatePicker` and `DateRangePicker` — a trailing "×" adornment that resets the
+// current selection to empty. Rendered only while there's something to clear (see each caller's
+// own conditional). `useButton` for the same reason `CalendarToggleButton` uses it: proper
+// 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)
+
+  return (
+    <button {...buttonProps} className="input-adorn" ref={ref} type="button">
+      <svg
+        fill="none"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 4l8 8M12 4l-8 8"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeWidth="1.25"
+        />
+      </svg>
+    </button>
+  )
+}

package/src/components/datepicker/DateField.tsx

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react'
+import classNames from 'classnames'
+import { AriaDateFieldProps, DateValue, useDateField, useDateSegment, useLocale } from 'react-aria'
+import { DateFieldState, DateSegment as DateSegmentType, useDateFieldState } from 'react-stately'
+import { createCalendar } from '@internationalized/date'
+
+interface DateFieldProps {
+  fieldProps: AriaDateFieldProps<DateValue>
+}
+
+// Builds its own segment state from the `fieldProps` `DatePicker` hands down — mirrors react
+// aria's own documented composition (the top-level `useDatePickerState`/`useDatePicker` pair
+// manages the *selected value*; the field's individually-editable segments are a separate piece
+// of state derived from `locale`/`createCalendar`, owned here).
+export const DateField = ({ fieldProps }: DateFieldProps) => {
+  const { locale } = useLocale()
+  const state = useDateFieldState({
+    ...fieldProps,
+    createCalendar,
+    locale
+  })
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { fieldProps: domFieldProps } = useDateField(fieldProps, state, ref)
+
+  return (
+    <div {...domFieldProps} className="datepicker-field" ref={ref}>
+      {state.segments.map((segment, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <DateSegment key={index} segment={segment} state={state} />
+      ))}
+    </div>
+  )
+}
+
+interface DateSegmentProps {
+  segment: DateSegmentType
+  state: DateFieldState
+}
+
+const DateSegment = ({ segment, state }: DateSegmentProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const { segmentProps } = useDateSegment(segment, state, ref)
+
+  return (
+    <span
+      {...segmentProps}
+      className={classNames('datepicker-segment', { placeholder: segment.isPlaceholder })}
+      ref={ref}
+    >
+      {segment.text}
+    </span>
+  )
+}

package/src/components/datepicker/DatePicker.scss

@@ -0,0 +1,51 @@
+/*
+ * DatePicker's segmented field reuses chassis-css's existing `.form-input`/`.input-adorn`/
+ * `.ghost-input` classes as-is (input chrome, trailing-button layout, sizing modifiers all come
+ * for free). The popover shell is chassis-css's real `.datepicker` class too now (not the custom
+ * `.datepicker-calendar` this used to be) — rendered *without* `data-cx-inline`, so it gets
+ * chassis-css's native popover treatment (position, z-index, padding, border, box-shadow)
+ * directly, while `Calendar` nested inside it stays `data-cx-inline` (no border/shadow of its
+ * own — see `Calendar.scss`'s comment) so there's only one bordered/shadowed box, not two. Only
+ * the segments themselves are genuinely new visual territory with no chassis-css equivalent.
+ * Built on chassis-css's globally-defined `--cx-*` tokens so it stays on the same design language
+ * (and adapts to light/dark) — except `--cx-form-idle-fg-inactive`, which is only ever defined
+ * inside chassis-css's own `.form-input` block, not `:root`; see `Calendar.scss`'s comment on why
+ * that one internal-token exception was kept anyway.
+ */
+
+@use "@chassis-ui/css/scss/mixins" as *;
+
+/*
+ * chassis-css's own `.datepicker` rule sets `display: flex` unconditionally, which — same-
+ * specificity, later-declared-layer concerns aside — otherwise wins over the browser's default
+ * `[hidden] { display: none }` UA rule (author styles always beat UA styles). Layered here to
+ * land in the same cascade layer as chassis-css's own rule (see `Calendar.scss`'s comment on
+ * why), with the `[hidden]` attribute bumping specificity enough to reliably win within it.
+ */
+@layer components {
+  .datepicker[hidden] {
+    display: none;
+  }
+}
+
+.datepicker-field {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+
+.datepicker-segment {
+  padding-inline: var(--cx-space-3xsmall);
+  @include border-radius(var(--cx-border-radius-small));
+  outline: 0;
+}
+
+.datepicker-segment.placeholder {
+  color: var(--cx-form-idle-fg-inactive);
+}
+
+.datepicker-segment:focus {
+  color: var(--cx-primary-contrast);
+  background-color: var(--cx-primary);
+}
+