@charcuterie/ui 3.0.0 → 3.2.0

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,852 @@
+import {
+  useUniqueId,
+  useVisibility,
+} from "@charcuterie/logic"
+import type { ControlSize } from "@charcuterie/tokens"
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+} from "@floating-ui/react"
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+} from "react"
+import { useRef, useState } from "react"
+
+import { Button } from "../Button/Button.tsx"
+import { CONTROL_SIZE_CLASS } from "../controlStyles.ts"
+import { IconButton } from "../IconButton/IconButton.tsx"
+import {
+  DISABLED_CLASS,
+  FOCUS_RING_CLASS,
+} from "../intentStyles.ts"
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.ts"
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.ts"
+import type { SlotProps } from "../slotProps.ts"
+import { mergeSlotProps } from "../slotProps.ts"
+import { toClassName } from "../toClassName.ts"
+import { DateGrid } from "./DateGrid.tsx"
+import type { DatePreset } from "./datePresets.ts"
+import { DEFAULT_DATE_PRESETS } from "./datePresets.ts"
+import type { DateInputKeywords } from "./parseDateInput.ts"
+import { parseDateInput } from "./parseDateInput.ts"
+import type { DateRange, PlainDate } from "./plainDate.ts"
+import {
+  addDays,
+  addMonths,
+  clampPlainDate,
+  comparePlainDates,
+  formatPlainDate,
+  getFirstDayOfWeek,
+  getIsWithinRange,
+  getLocalPlainDate,
+  parseIsoDate,
+  toIsoDate,
+} from "./plainDate.ts"
+
+export type DatePickerProps = SlotProps & {
+  className?: string
+  /**
+   * Sunday 0 through Saturday 6. Omit and the locale decides, via
+   * `Intl.Locale`'s `getWeekInfo` — which is why there is no
+   * `isMondayFirst` here.
+   */
+  firstDayOfWeek?: number
+  isDisabled?: boolean
+  /**
+   * Start-and-end mode. A **mode, not a sibling component** — see
+   * the component docblock, and the `Combobox` `isMultiple`
+   * precedent it follows.
+   */
+  isRange?: boolean
+  /** Override the English relative words (`today`, `next`, `+3d`). */
+  keywords?: DateInputKeywords
+  /**
+   * Required. It names the field for a screen reader **and** names
+   * the calendar dialog and its grids, which a `role="dialog"` takes
+   * from nothing else. Inside a `Field`, pass the same text as the
+   * `Field`'s own `label` — they are the same name and WCAG 2.5.3
+   * wants them to agree.
+   */
+  label: string
+  /** Omit for the platform's resolved locale. */
+  locale?: string
+  /** ISO `YYYY-MM-DD`. Days after this are unselectable. */
+  maxValue?: string
+  /** ISO `YYYY-MM-DD`. Days before this are unselectable. */
+  minValue?: string
+  /**
+   * An ISO `YYYY-MM-DD` in single mode, a `{ end, start }` of them in
+   * range mode, and `null` when cleared. Never a `Date`, and that is
+   * the point — see the docblock.
+   */
+  onChange?: (value: DateRange | null | string) => void
+  placeholder?: string
+  /** Pass `[]` to drop the shortcut row entirely. */
+  presets?: readonly DatePreset[]
+  size?: ControlSize
+  /**
+   * Which zone's calendar "today" is read from, when `today` is
+   * omitted. Ignored when `today` is supplied — which is what every
+   * test and every story does.
+   */
+  timeZone?: string
+  /**
+   * The clock, injected, as an ISO `YYYY-MM-DD`.
+   *
+   * Every relative form (`tomorrow`, `next fri`, `+14d`), the
+   * `aria-current="date"` marker, and the preset row resolve against
+   * this. Supplying it is what makes the component testable at all:
+   * a date picker tested against the real "today" passes on the day
+   * it was written and fails silently afterwards. Omitted, it is
+   * read **once**, at mount, from `timeZone` or the device.
+   */
+  today?: string
+  /** **Initial** only, like every other value prop in this library. */
+  value?: DateRange | string
+}
+
+const CHEVRON_PREVIOUS = (
+  <svg
+    aria-hidden="true"
+    className="size-4"
+    fill="none"
+    focusable={false}
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1.75}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+)
+
+const CHEVRON_NEXT = (
+  <svg
+    aria-hidden="true"
+    className="size-4"
+    fill="none"
+    focusable={false}
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1.75}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+)
+
+const INPUT_CLASS =
+  "w-full min-w-0 rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard placeholder:text-content-muted hover:border-border-strong aria-invalid:border-intent-danger-border"
+
+type Endpoint = "end" | "start"
+
+/**
+ * A date field: a text input you can actually type into, and a
+ * calendar dialog hanging off it.
+ *
+ * ### The value is a calendar date, never an instant
+ *
+ * `onChange` reports an ISO `YYYY-MM-DD` string — the same format
+ * `<input type="date">` uses — and never a `Date`. A `Date` is a
+ * count of milliseconds, so reading one back always goes through the
+ * browser's timezone, and a due date picked at 23:30 in Denver comes
+ * back as the previous day in London. `plainDate.ts` has the full
+ * argument and the arithmetic; `plainDate.test.ts` re-runs it under
+ * UTC+14 and UTC-11 and asserts nothing moves.
+ *
+ * ### Typing is the feature
+ *
+ * The grid is the fallback, not the interface. `tomorrow`,
+ * `next fri`, `+14d`, `19 aug`, `8/19`, `2026-08-19` and a bare `19`
+ * all resolve, in the active locale, against an injected `today` —
+ * and **the resolution is echoed underneath the field, in a live
+ * region, before anything commits.** Nothing here guesses in
+ * silence: an ambiguous month prefix comes back as "'ju' could be
+ * June or July", not as June. `parseDateInput.ts` is the grammar and
+ * the reasoning.
+ *
+ * ### Range is a mode, not a sibling
+ *
+ * `isRange` follows
+ * [Combobox's `isMultiple`](../../../docs/decisions/2026-08-05-combobox-multi-select-stays-ismultiple-not-a-separate-component.md)
+ * for the same three reasons, which hold even harder here:
+ *
+ *  - **No distinct role.** The family is named by ARIA role. A range
+ *    picker is the same `role="dialog"` over the same `role="grid"`;
+ *    there is no `daterange` role to name a `DateRangePicker` after,
+ *    so the name would describe a *presentation*.
+ *  - **The delta is small and the shared part is everything.** The
+ *    parser, the locale plumbing, the min/max clamp, the keyboard
+ *    grid, the panel, the presets and the echo line are identical.
+ *    What changes is a second input, a second month, and a band
+ *    drawn between two days.
+ *  - **`Combobox` already set the precedent for the value shape.**
+ *    Its `selectedValue` is `readonly string[] | string`; this one is
+ *    `DateRange | string`. A discriminated props union would type
+ *    better and was rejected for that consistency, and because
+ *    Storybook's docgen renders a union props type as an untyped
+ *    object control.
+ *
+ * ### The panel is a container, and it is queried as one
+ *
+ * `@container` sits on the panel, and everything inside sizes to the
+ * panel's own inline size rather than to the window: one-letter
+ * weekday headers and 32px cells below `--cq-xs`, two-letter and
+ * 36px above it, 40px above `--cq-sm`, and in range mode the two
+ * months stack below `--cq-sm` and sit side by side above it. That
+ * is not the same question a media query asks — the owner browses
+ * zoomed in, where a 390px phone reports a 195px layout viewport and
+ * a desktop window at 200% has no room either. The `size` middleware
+ * clamps the panel to the space actually available, and the
+ * container query reads what it got.
+ *
+ * ### It owns its own open state, and its own value
+ *
+ * Assembled, like [`Picker`](../Picker/Picker.tsx): the
+ * `useVisibility` is in here, because a field that needs the caller
+ * to wire `isVisible` is a field the caller has to assemble. And
+ * `value` **seeds** rather than controls, matching `Select`,
+ * `SegmentedControl` and `Combobox` — one owner for the value, which
+ * is the whole of the state layer's argument.
+ */
+export const DatePicker = ({
+  className,
+  firstDayOfWeek,
+  isDisabled = false,
+  isRange = false,
+  keywords,
+  label,
+  locale,
+  maxValue,
+  minValue,
+  onChange,
+  placeholder = "e.g. tomorrow, 8/19, +14d",
+  presets = DEFAULT_DATE_PRESETS,
+  size = "md",
+  timeZone,
+  today,
+  value,
+  ...receivedSlotProps
+}: DatePickerProps): ReactNode => {
+  const baseId = useUniqueId()
+
+  const anchorElement = useRef<HTMLDivElement>(null)
+
+  const inputElements = useRef(
+    new Map<Endpoint, HTMLInputElement>(),
+  )
+
+  const { hide, isVisible, show } = useVisibility()
+
+  /**
+   * Read once, lazily, and never again.
+   *
+   * A component that re-read the clock on every render would change
+   * what `tomorrow` means underneath a user typing it at midnight,
+   * and would make every test a race. `today` as a prop is the
+   * supported way to control it, and every story and test passes it.
+   */
+  const [resolvedToday] = useState(
+    () =>
+      parseIsoDate(today) ??
+      getLocalPlainDate(new Date(), timeZone),
+  )
+
+  const todayDate = parseIsoDate(today) ?? resolvedToday
+
+  const minimum = parseIsoDate(minValue) ?? undefined
+
+  const maximum = parseIsoDate(maxValue) ?? undefined
+
+  const resolvedFirstDayOfWeek =
+    firstDayOfWeek ?? getFirstDayOfWeek(locale)
+
+  const seededRange: DateRange =
+    typeof value === "string"
+      ? { end: null, start: value }
+      : (value ?? { end: null, start: null })
+
+  const [range, setRange] = useState<DateRange>(seededRange)
+
+  const toDisplayText = (isoDate: null | string) => {
+    const date = parseIsoDate(isoDate)
+
+    return date === null
+      ? ""
+      : formatPlainDate(date, {
+          dateStyle: "medium",
+          locale,
+        })
+  }
+
+  const [texts, setTexts] = useState({
+    end: toDisplayText(seededRange.end),
+    start: toDisplayText(seededRange.start),
+  })
+
+  const [activeEndpoint, setActiveEndpoint] =
+    useState<Endpoint>("start")
+
+  const [isGridFocused, setIsGridFocused] = useState(false)
+
+  const [hoveredDate, setHoveredDate] =
+    useState<null | PlainDate>(null)
+
+  const [focusedDate, setFocusedDate] = useState<PlainDate>(
+    () =>
+      clampPlainDate(
+        parseIsoDate(seededRange.start) ?? todayDate,
+        minimum,
+        maximum,
+      ),
+  )
+
+  const [visibleMonth, setVisibleMonth] =
+    useState<PlainDate>(
+      () => parseIsoDate(seededRange.start) ?? todayDate,
+    )
+
+  const parsed = parseDateInput(texts[activeEndpoint], {
+    keywords,
+    locale,
+    today: todayDate,
+  })
+
+  const echoId = `${baseId}-echo`
+
+  const dismiss = () => {
+    hide()
+
+    setIsGridFocused(false)
+
+    setHoveredDate(null)
+
+    inputElements.current.get(activeEndpoint)?.focus()
+  }
+
+  const {
+    context,
+    floatingStyles,
+    getFloatingProps,
+    setFloating,
+  } = useAnchoredOverlay({
+    anchorRef: anchorElement,
+    isVisible,
+    maxHeightPx: 520,
+    maxWidthPx: isRange ? 656 : 320,
+    offsetValue: 4,
+    onDismiss: () => {
+      dismiss()
+    },
+    role: "dialog",
+    trigger: undefined,
+  })
+
+  const { id: panelId, ...floatingProps } =
+    getFloatingProps() as Record<string, unknown> & {
+      id: string
+    }
+
+  const report = (nextRange: DateRange) => {
+    setRange(nextRange)
+
+    if (isRange) {
+      onChange?.(
+        nextRange.end === null && nextRange.start === null
+          ? null
+          : nextRange,
+      )
+
+      return
+    }
+
+    onChange?.(nextRange.start)
+  }
+
+  const writeEndpoint = (
+    endpoint: Endpoint,
+    date: null | PlainDate,
+  ) => {
+    const isoDate = date === null ? null : toIsoDate(date)
+
+    setTexts((previous) => ({
+      ...previous,
+      [endpoint]:
+        date === null ? "" : toDisplayText(isoDate),
+    }))
+
+    const nextRange = isRange
+      ? { ...range, [endpoint]: isoDate }
+      : { end: null, start: isoDate }
+
+    // A range whose end precedes its start is not a range anybody
+    // typed on purpose, and rejecting it would throw away the day
+    // they just picked. Swapping keeps both dates and matches every
+    // range control in the wild.
+    const isBackwards =
+      isRange &&
+      nextRange.end !== null &&
+      nextRange.start !== null &&
+      nextRange.end < nextRange.start
+
+    report(
+      isBackwards
+        ? { end: nextRange.start, start: nextRange.end }
+        : nextRange,
+    )
+  }
+
+  const commitText = (endpoint: Endpoint) => {
+    const result = parseDateInput(texts[endpoint], {
+      keywords,
+      locale,
+      today: todayDate,
+    })
+
+    if (result.kind === "empty") {
+      writeEndpoint(endpoint, null)
+
+      return
+    }
+
+    if (result.kind === "unparsed") {
+      // The text stays exactly as typed. Clearing it would throw
+      // away what the user has to edit, and rewriting it to the last
+      // good value would silently discard the thing they meant.
+      return
+    }
+
+    writeEndpoint(
+      endpoint,
+      clampPlainDate(result.date, minimum, maximum),
+    )
+  }
+
+  const handleTextChange = (
+    endpoint: Endpoint,
+    nextText: string,
+  ) => {
+    setTexts((previous) => ({
+      ...previous,
+      [endpoint]: nextText,
+    }))
+
+    const result = parseDateInput(nextText, {
+      keywords,
+      locale,
+      today: todayDate,
+    })
+
+    // Live preview: the grid follows what has been typed so far
+    // without committing it, which is what makes `next fri` legible
+    // rather than an act of faith.
+    if (result.kind === "date") {
+      setFocusedDate(result.date)
+
+      setVisibleMonth(result.date)
+    }
+  }
+
+  const chooseDate = (date: PlainDate) => {
+    setFocusedDate(date)
+
+    if (!isRange) {
+      writeEndpoint("start", date)
+
+      dismiss()
+
+      return
+    }
+
+    const isStartingOver =
+      range.start === null || range.end !== null
+
+    if (isStartingOver) {
+      setTexts((previous) => ({ ...previous, end: "" }))
+
+      setRange({ end: null, start: toIsoDate(date) })
+
+      setTexts((previous) => ({
+        ...previous,
+        start: toDisplayText(toIsoDate(date)),
+      }))
+
+      setActiveEndpoint("end")
+
+      return
+    }
+
+    writeEndpoint("end", date)
+
+    dismiss()
+  }
+
+  const handleInputKeyDown = (
+    keyEvent: ReactKeyboardEvent<HTMLInputElement>,
+    endpoint: Endpoint,
+  ) => {
+    if (keyEvent.key === "ArrowDown") {
+      keyEvent.preventDefault()
+
+      show()
+
+      setIsGridFocused(true)
+
+      return
+    }
+
+    if (keyEvent.key === "Enter") {
+      keyEvent.preventDefault()
+
+      commitText(endpoint)
+
+      if (isVisible) {
+        dismiss()
+      }
+
+      return
+    }
+
+    if (keyEvent.key === "Escape" && isVisible) {
+      keyEvent.preventDefault()
+
+      dismiss()
+    }
+  }
+
+  const selectedDates = [
+    parseIsoDate(range.start),
+    parseIsoDate(range.end),
+  ].filter((one) => one !== null)
+
+  const rangeStartDate = parseIsoDate(range.start)
+
+  const previewEnd = isRange
+    ? (parseIsoDate(range.end) ??
+      (rangeStartDate === null
+        ? null
+        : (hoveredDate ??
+          (comparePlainDates(focusedDate, rangeStartDate) >
+          0
+            ? focusedDate
+            : null))))
+    : null
+
+  const secondMonth = addMonths(visibleMonth, 1)
+
+  const monthLabel = (month: PlainDate) =>
+    formatPlainDate(month, {
+      locale,
+      month: "long",
+      year: "numeric",
+    })
+
+  const echoText =
+    parsed.kind === "date"
+      ? formatPlainDate(parsed.date, {
+          dateStyle: "full",
+          locale,
+        })
+      : parsed.kind === "unparsed"
+        ? parsed.reason
+        : ""
+
+  const isInvalid = parsed.kind === "unparsed"
+
+  const renderInput = (endpoint: Endpoint) => {
+    const ownProps = {
+      "aria-controls": isVisible ? panelId : undefined,
+      "aria-describedby": echoId,
+      "aria-expanded": isVisible,
+      "aria-haspopup": "dialog" as const,
+      "aria-invalid":
+        activeEndpoint === endpoint && isInvalid
+          ? true
+          : undefined,
+      "aria-label": isRange
+        ? `${label} ${endpoint}`
+        : label,
+      autoComplete: "off",
+      className: toClassName(
+        INPUT_CLASS,
+        CONTROL_SIZE_CLASS[size],
+        FOCUS_RING_CLASS,
+        DISABLED_CLASS,
+      ),
+      disabled: isDisabled,
+      id: `${baseId}-${endpoint}`,
+      // A date is digits far more often than it is words, and a
+      // numeric-leaning soft keyboard with letters still available is
+      // what lets `8/19` and `next fri` both be typed on a phone.
+      inputMode: "text" as const,
+      onChange: (changeEvent: {
+        currentTarget: { value: string }
+      }) => {
+        handleTextChange(
+          endpoint,
+          changeEvent.currentTarget.value,
+        )
+      },
+      onClick: () => {
+        setActiveEndpoint(endpoint)
+
+        show()
+      },
+      onFocus: () => {
+        setActiveEndpoint(endpoint)
+      },
+      onKeyDown: (
+        keyEvent: ReactKeyboardEvent<HTMLInputElement>,
+      ) => {
+        handleInputKeyDown(keyEvent, endpoint)
+      },
+      placeholder,
+      ref: (element: HTMLInputElement | null) => {
+        if (element) {
+          inputElements.current.set(endpoint, element)
+        } else {
+          inputElements.current.delete(endpoint)
+        }
+      },
+      role: "combobox" as const,
+      type: "text" as const,
+      value: texts[endpoint],
+    }
+
+    return (
+      <input
+        // The `Field` above clones `id`, `aria-describedby`,
+        // `aria-invalid` and `required` onto this component; they
+        // belong on the input, not on the wrapper, and only on the
+        // first one — a `<label for>` names one control.
+        {...(endpoint === "start"
+          ? mergeSlotProps(receivedSlotProps, ownProps)
+          : ownProps)}
+        key={endpoint}
+      />
+    )
+  }
+
+  const renderGrid = (month: PlainDate) => (
+    <DateGrid
+      firstDayOfWeek={resolvedFirstDayOfWeek}
+      focusedDate={focusedDate}
+      gridMonth={month}
+      isGridFocused={isGridFocused}
+      isRange={isRange}
+      key={`${month.year}-${month.month}`}
+      label={monthLabel(month)}
+      locale={locale}
+      maximum={maximum}
+      minimum={minimum}
+      onFocusDate={(date) => {
+        setFocusedDate(date)
+
+        setVisibleMonth(date)
+      }}
+      onHoverDate={setHoveredDate}
+      onSelectDate={chooseDate}
+      previewEnd={previewEnd}
+      rangeStart={rangeStartDate}
+      selectedDates={selectedDates}
+      today={todayDate}
+    />
+  )
+
+  return (
+    // The overlay anchors to THIS box, not to the input row, so the echo
+    // line below stays visible while the calendar is open. It is the line
+    // that says what a typed value resolved to; a panel covering it turns
+    // the one anti-guess mechanism off at exactly the moment it matters.
+    <div
+      className={toClassName(
+        "flex flex-col gap-1",
+        className,
+      )}
+      ref={anchorElement}
+    >
+      <div className="flex items-center gap-2">
+        {renderInput("start")}
+
+        {isRange ? (
+          <>
+            <span
+              aria-hidden="true"
+              className="shrink-0 text-content-secondary text-sm"
+            >
+              to
+            </span>
+
+            {renderInput("end")}
+          </>
+        ) : null}
+      </div>
+
+      {/*
+        The anti-silent-guess mechanism, and the reason this component
+        is allowed to accept `8/19` at all. It is a live region so the
+        resolution is announced while typing, and it is wired into the
+        input's `aria-describedby` so it is read again on focus. A
+        parser this permissive without this line would be a field that
+        quietly files things in the wrong month.
+      */}
+      <p
+        aria-live="polite"
+        className={toClassName(
+          "min-h-5 text-sm",
+          isInvalid
+            ? "text-intent-danger-content"
+            : "text-content-secondary",
+        )}
+        id={echoId}
+        role="status"
+      >
+        {echoText}
+      </p>
+
+      {isVisible ? (
+        <FloatingPortal>
+          <FloatingFocusManager
+            context={context}
+            // Focus stays where the user is typing until they ask for
+            // the grid with ArrowDown or a click. A calendar that
+            // steals the caret on open is a calendar you cannot type
+            // into, which is the whole point of this field.
+            disabled
+            modal={false}
+          >
+            <div
+              {...floatingProps}
+              aria-label={`${label} calendar`}
+              className={toClassName(
+                PANEL_SURFACE_CLASS,
+                // `overflow-hidden`, because `maxHeightPx` reaches the
+                // panel as a `max-height` from the `size` middleware and
+                // nothing else clips: on a phone the preset row simply
+                // spilled out past the panel's own rounded edge and sat
+                // on the page behind it. The *months* are what scrolls
+                // (below), so the month nav and the shortcut row stay
+                // put — a preset you have to scroll to find is not a
+                // shortcut, and it is the fastest control here on a
+                // phone.
+                "@container z-[var(--layer-modal)] flex flex-col gap-3 overflow-hidden p-3 text-content-primary",
+                isRange ? "w-[41rem]" : "w-80",
+              )}
+              id={panelId}
+              ref={setFloating}
+              role="dialog"
+              style={floatingStyles}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <IconButton
+                  appearance="ghost"
+                  label="Previous month"
+                  onClick={() => {
+                    setVisibleMonth(
+                      addMonths(visibleMonth, -1),
+                    )
+                  }}
+                  size="sm"
+                  type="button"
+                >
+                  {CHEVRON_PREVIOUS}
+                </IconButton>
+
+                <span
+                  // Announced on change, so paging with the buttons
+                  // says which month you landed on rather than
+                  // silently redrawing 35 cells.
+                  aria-live="polite"
+                  className="font-medium text-sm"
+                >
+                  {isRange
+                    ? `${monthLabel(visibleMonth)} – ${monthLabel(secondMonth)}`
+                    : monthLabel(visibleMonth)}
+                </span>
+
+                <IconButton
+                  appearance="ghost"
+                  label="Next month"
+                  onClick={() => {
+                    setVisibleMonth(
+                      addMonths(visibleMonth, 1),
+                    )
+                  }}
+                  size="sm"
+                  type="button"
+                >
+                  {CHEVRON_NEXT}
+                </IconButton>
+              </div>
+
+              <div className="charcuterie-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto cq-sm:flex-row">
+                {renderGrid(visibleMonth)}
+
+                {isRange ? renderGrid(secondMonth) : null}
+              </div>
+
+              {presets.length > 0 ||
+              range.start !== null ? (
+                <div className="flex flex-wrap items-center gap-1 border-border-subtle border-t pt-2">
+                  {presets.map((preset) => {
+                    const presetDate = addDays(
+                      todayDate,
+                      preset.days,
+                    )
+
+                    return (
+                      <Button
+                        appearance="ghost"
+                        isDisabled={
+                          !getIsWithinRange(
+                            presetDate,
+                            minimum,
+                            maximum,
+                          )
+                        }
+                        key={preset.label}
+                        onClick={() => {
+                          setVisibleMonth(presetDate)
+
+                          chooseDate(presetDate)
+                        }}
+                        size="sm"
+                        type="button"
+                      >
+                        {preset.label}
+                      </Button>
+                    )
+                  })}
+
+                  {range.start === null ? null : (
+                    <Button
+                      appearance="ghost"
+                      className="ms-auto"
+                      intent="danger"
+                      onClick={() => {
+                        setTexts({ end: "", start: "" })
+
+                        report({ end: null, start: null })
+
+                        setActiveEndpoint("start")
+                      }}
+                      size="sm"
+                      type="button"
+                    >
+                      Clear
+                    </Button>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      ) : null}
+    </div>
+  )
+}