Requesting code review for RAC date picker customization

[binaryartifex]

Gday folks, long story short ive kinda hijacked the RAC DatePicker and DatePickerRange components in such a way that ive removed the segments and am left with just the button, whos label is a formated date or date value (ie. 3 Aug 2023 instead of 03-08-2023). Storybook isn't complaining about the accessibility and by all appearances it works like a charm. however theres that part of me that needs a little vindication to make sure im not setting myself for disaster by using the spray can in a manner other than directed....id of pushed this up into a codesandbox, however i got no idea how to get tailwind to work in that damn thing so this will have to suffice. Cheers folks.

import { type DateValue } from "@internationalized/date";
import { RangeValue } from "@react-types/shared";
import { Fragment, useMemo, useRef, useState } from "react";
import { useDateFormatter } from "react-aria";
import { Button, DateRangePicker, Dialog } from "react-aria-components";
import { RangeCalendar } from "../../date-time";
import { Icon } from "../../display";
import { Popover } from "../../overlays";
import { dateSelectStyles } from "../date-select/date-select.styles";
import { FieldIcon } from "../field-icon";
import { FieldLabel } from "../field-label";
import { FieldMessage } from "../field-message";
import { getMinDate, parseSQLDateString } from "../utils";
import { DEFAULT_RANGE } from "./date-range-select.const";
import type { DateRangeSelectProps } from "./date-range-select.types";
import { formatDateRange } from "./date-range-select.utils";

export function DateRangeSelect({
  defaultOpen,
  description,
  errorMessage,
  hideLabel = false,
  icon,
  isOpen: _isOpen,
  label,
  maxValue,
  minValue,
  ...props
}: DateRangeSelectProps) {
  const triggerRef = useRef<HTMLButtonElement>(null);
  const [isOpen, onOpenChange] = useState(Boolean(defaultOpen || _isOpen));
  const [value, setValue] = useState<RangeValue<DateValue>>(DEFAULT_RANGE);
  const formatter = useDateFormatter({ dateStyle: "medium" });

  const formattedDateRange = useMemo(() => {
    return formatDateRange(formatter, value);
  }, [value, formatter]);

  const parsedMaxRange = useMemo(() => {
    const parsedMaxDate = parseSQLDateString(maxValue);
    const parsedMinDate = parseSQLDateString(minValue);
    const baseMinDate = getMinDate(parsedMinDate);

    return {
      max: parsedMaxDate,
      min: baseMinDate,
    };
  }, [maxValue, minValue]);

  const isInvalid = Boolean(errorMessage);
  const hasIcon = Boolean(icon);

  const { button, buttonIcon, buttonIconWrapper, buttonValue, datePicker } =
    dateSelectStyles({ hasIcon, isInvalid });

  return (
    <DateRangePicker
      {...props}
      className={datePicker()}
      isOpen={isOpen}
      maxValue={parsedMaxRange.max}
      minValue={parsedMaxRange.min}
      onChange={setValue}
      onOpenChange={onOpenChange}
      value={value}
    >
      <FieldLabel hidden={hideLabel}>{label}</FieldLabel>
      <Button
        className={button()}
        data-open={isOpen || undefined}
        ref={triggerRef}
      >
        {({ isFocusVisible, isHovered, isPressed }) => (
          <Fragment>
            {icon && (
              <FieldIcon
                icon={icon}
                isActive={isFocusVisible || isHovered || isPressed || isOpen}
                isInvalid={isInvalid}
              />
            )}
            <span className={buttonValue()}>
              {formattedDateRange ?? "Select a date range"}
            </span>
            <div aria-hidden className={buttonIconWrapper()}>
              <Icon.Interface.CalendarSearch className={buttonIcon()} />
            </div>
          </Fragment>
        )}
      </Button>
      <FieldMessage description={description} errorMessage={errorMessage} />

      <Popover
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        triggerRef={triggerRef}
      >
        <Dialog>
          <RangeCalendar aria-label={label} />
        </Dialog>
      </Popover>
    </DateRangePicker>
  );
}

[devongovett]

If you're not using the date segments I guess I wouldn't use the DateRangePicker component at all. You could just use a button that triggers a popover yourself, e.g. using DialogTrigger.

Pseudo code:

let [value, setValue] = useState(...);

<DialogTrigger>
  <Button>{formatDateValue(value)}</Button>
  <Popover>
    <Dialog>
      <RangeCalendar value={value} onChange={setValue} />
    </Dialog>
  </Popover>
</DialogTrigger>

[binaryartifex]

@devongovett yeah honestly ive gone down a pretty hectic rabbit hole and ultimately settled back on doing it the original way. the DateRangePicker already comes prebaked with state management, labels, description/error messaging, popover event handling, aria prop distribution, etc. trying to get it to behave like an actual form field via your suggestion i got so close to coming full circle back to the original DateRangePicker at this point id much prefer to leverage whats already there minus the editable date segments in favour of a button who's label tracks the current value in a much more readable format. Only issue i seem to be having, actually its just me being fussy, is a random description-id being generated, something like react-aria-description-2 on the button as one of the aria-describedby props but it still manages to apply an id to either a description or error message. screen reader (NVDA) isn't too bad, bit verbose but beggers can't be choosers

revised crack at the cherry ->

export function DatePicker({ description, errorMessage, hideLabel, ...props }: DatePickerProps) {
  const triggerRef = useRef<HTMLButtonElement>(null);
  const isInvalid = Boolean(errorMessage);
  const styles = datePickerStyles({ isInvalid });

  return (
    <AriaDatePicker {...props} granularity="day">
      <Group className={styles.base()}>
        <FieldLabel hidden={hideLabel}>{props.label}</FieldLabel>
        <Button className={styles.field()} ref={triggerRef}>
          <DatePickerValue className={styles.input()} placeholder={props.placeholder} />
          <Adornment isInvalid={isInvalid} />
        </Button>
        <FieldMessage description={description} errorMessage={errorMessage} />
      </Group>
      <Popover className={styles.popover()} triggerRef={triggerRef}>
        <Dialog>
          <Calendar />
        </Dialog>
      </Popover>
    </AriaDatePicker>
  );
}

export function DatePickerValue({
  className,
  placeholder = "Select a date",
}: DatePickerValueProps) {
  const state = useContext(DatePickerStateContext);
  const timezone = getLocalTimeZone();
  const formatter = useDateFormatter({ dateStyle: "medium" });
  const value = state && state.value ? formatter.format(state.value.toDate(timezone)) : placeholder;

  return <span className={className}>{value}</span>;
}

[binaryartifex]

im actually beginning to wonder if a readonly input field and a toggle icon button grouped together would make more sense both semantically and to appease the WAI ARIA gods...sigh.....