willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/internal/selectablePanelParts.tsx

@@ -0,0 +1,212 @@
+import {
+  type ButtonHTMLAttributes,
+  type ChangeEventHandler,
+  type KeyboardEventHandler,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import {
+  FloatingPanelPortal,
+  FloatingPanelShell,
+} from "#form/internal/floatingPanelParts";
+import type { FloatingPanelPosition } from "#form/internal/useFloatingPanel";
+
+export type SelectablePanelPortalProps = {
+  children: ReactNode;
+  open: boolean;
+};
+
+export function SelectablePanelPortal(props: SelectablePanelPortalProps) {
+  return (
+    <FloatingPanelPortal open={props.open}>
+      {props.children}
+    </FloatingPanelPortal>
+  );
+}
+
+export type SelectablePanelTriggerProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  buttonRef: Ref<HTMLButtonElement>;
+  controls?: string;
+  displayValue: ReactNode;
+  expanded: boolean;
+  hasValue: boolean;
+  invalid?: boolean;
+  placeholderClassName: string;
+  popupRole: "listbox" | "tree";
+  triggerClassName: string;
+  valueClassName: string;
+  iconClassName: string;
+};
+
+export function SelectablePanelTrigger(props: SelectablePanelTriggerProps) {
+  const {
+    buttonRef,
+    controls,
+    displayValue,
+    expanded,
+    hasValue,
+    invalid,
+    placeholderClassName,
+    popupRole,
+    triggerClassName,
+    valueClassName,
+    iconClassName,
+    ...buttonProps
+  } = props;
+
+  return (
+    <button
+      {...buttonProps}
+      ref={buttonRef}
+      type="button"
+      className={triggerClassName}
+      aria-haspopup={popupRole}
+      aria-expanded={expanded}
+      aria-controls={controls}
+      aria-invalid={invalid || undefined}
+    >
+      <span
+        className={classNames(
+          valueClassName,
+          !hasValue && placeholderClassName,
+        )}
+      >
+        {displayValue}
+      </span>
+      <ChevronDownIcon className={iconClassName} aria-hidden="true" />
+    </button>
+  );
+}
+
+export type SelectablePanelClearButtonProps = {
+  ariaLabel: string;
+  className: string;
+  onClear: () => void;
+  triggerRef: { current: HTMLElement | null };
+};
+
+export function SelectablePanelClearButton(
+  props: SelectablePanelClearButtonProps,
+) {
+  const { ariaLabel, className, onClear, triggerRef } = props;
+
+  return (
+    <button
+      className={className}
+      type="button"
+      aria-label={ariaLabel}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClear();
+        triggerRef.current?.focus();
+      }}
+    >
+      <Cross2Icon />
+    </button>
+  );
+}
+
+export type SelectablePanelHiddenInputProps = {
+  name?: string;
+  value: string;
+};
+
+export function SelectablePanelHiddenInput(
+  props: SelectablePanelHiddenInputProps,
+) {
+  if (!props.name) return null;
+
+  return <input type="hidden" name={props.name} value={props.value} readOnly />;
+}
+
+export type SelectablePanelShellProps = {
+  children: ReactNode;
+  className: string;
+  id: string;
+  labelledBy: string;
+  multiselectable?: boolean;
+  panelRef: Ref<HTMLDivElement>;
+  position: FloatingPanelPosition | null;
+  role: "listbox" | "tree";
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+};
+
+export function SelectablePanelShell(props: SelectablePanelShellProps) {
+  const {
+    children,
+    className,
+    id,
+    labelledBy,
+    multiselectable,
+    panelRef,
+    position,
+    role,
+    onKeyDown,
+  } = props;
+
+  return (
+    <FloatingPanelShell
+      panelRef={panelRef}
+      id={id}
+      className={className}
+      role={role}
+      ariaMultiselectable={multiselectable}
+      ariaLabelledBy={labelledBy}
+      onKeyDown={onKeyDown}
+      position={position}
+    >
+      {children}
+    </FloatingPanelShell>
+  );
+}
+
+export type SelectablePanelSearchProps = {
+  className: string;
+  inputRef: Ref<HTMLInputElement>;
+  placeholder: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+};
+
+export function SelectablePanelSearch(props: SelectablePanelSearchProps) {
+  const { className, inputRef, placeholder, value, onChange } = props;
+
+  return (
+    <div className={className}>
+      <input
+        ref={inputRef}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
+
+export type SelectablePanelListProps = {
+  children: ReactNode;
+  className: string;
+  listRef: Ref<HTMLDivElement>;
+  scrollable: boolean;
+  scrollableClassName: string;
+};
+
+export function SelectablePanelList(props: SelectablePanelListProps) {
+  const { children, className, listRef, scrollable, scrollableClassName } =
+    props;
+
+  return (
+    <div
+      ref={listRef}
+      className={classNames(className, scrollable && scrollableClassName)}
+    >
+      {children}
+    </div>
+  );
+}

package/packages/willa-form/src/internal/timePickerParts.ts

@@ -0,0 +1,205 @@
+import { clampNumber } from "@willa-ui/shared";
+
+import type {
+  TimePickerDisabledTime,
+  TimePickerWheelColumn,
+  TimePickerWheelColumns,
+} from "#form/components/TimePicker/types";
+
+export type TimePickerParts = {
+  hour: number;
+  minute: number;
+  second: number;
+};
+
+export type TimePickerWheelOption = {
+  value: number;
+  label: string;
+  disabled: boolean;
+};
+
+export function normalizeTimeWheelColumns(columns: TimePickerWheelColumns) {
+  if (Array.isArray(columns)) return columns;
+  return ["hour", "minute", "second"] satisfies Array<TimePickerWheelColumn>;
+}
+
+export function getTimeWheelParts(value: string) {
+  const now = new Date();
+  const fallback = {
+    hour: now.getHours(),
+    minute: now.getMinutes(),
+    second: now.getSeconds(),
+  };
+
+  if (!value) return normalizeTimeWheelParts(fallback);
+
+  const timeMatch = value.match(/^(\d{2}):(\d{2})(?::(\d{2}))?$/);
+  if (timeMatch) {
+    return normalizeTimeWheelParts({
+      hour: Number(timeMatch[1]),
+      minute: Number(timeMatch[2]),
+      second: Number(timeMatch[3] ?? fallback.second),
+    });
+  }
+
+  const timeWithPrefixMatch = value.match(
+    /^(?:\d{4}-\d{2}-\d{2}[ T])?(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp][Mm])?$/,
+  );
+  if (timeWithPrefixMatch) {
+    const meridiem = timeWithPrefixMatch[4]?.toLowerCase();
+    const hour = Number(timeWithPrefixMatch[1]);
+
+    return normalizeTimeWheelParts({
+      hour:
+        meridiem === "pm" && hour < 12
+          ? hour + 12
+          : meridiem === "am" && hour === 12
+            ? 0
+            : hour,
+      minute: Number(timeWithPrefixMatch[2]),
+      second: Number(timeWithPrefixMatch[3] ?? fallback.second),
+    });
+  }
+
+  return normalizeTimeWheelParts(fallback);
+}
+
+export function normalizeTimeWheelParts(parts: {
+  hour: number;
+  minute: number;
+  second: number;
+}) {
+  return {
+    hour: clampNumber(Math.trunc(parts.hour), 0, 23),
+    minute: clampNumber(Math.trunc(parts.minute), 0, 59),
+    second: clampNumber(Math.trunc(parts.second), 0, 59),
+  };
+}
+
+export function formatTimeWheelValue(
+  parts: TimePickerParts,
+  columns: Array<TimePickerWheelColumn>,
+) {
+  const hasHour = columns.includes("hour");
+  const hasMinute = columns.includes("minute");
+  const hasSecond = columns.includes("second");
+
+  if (!hasHour && !hasMinute && !hasSecond) {
+    return "";
+  }
+
+  const timeParts = [
+    hasHour ? padNumber(parts.hour) : null,
+    hasMinute ? padNumber(parts.minute) : null,
+    hasSecond ? padNumber(parts.second) : null,
+  ].filter((part): part is string => part !== null);
+
+  return timeParts.join(":");
+}
+
+export function formatTimeWheelDisplayValue(
+  value: string,
+  columns: Array<TimePickerWheelColumn>,
+) {
+  const parts = getTimeWheelParts(value);
+
+  return formatTimeWheelValue(parts, columns);
+}
+
+export function createTimeWheelOptions(
+  column: TimePickerWheelColumn,
+  options?: {
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    use12Hours?: boolean;
+    disabledTime?: TimePickerDisabledTime | null;
+    selectedParts?: TimePickerParts;
+    period?: "am" | "pm";
+  },
+) {
+  const hourStep = Math.max(1, Math.trunc(options?.hourStep ?? 1));
+  const minuteStep = Math.max(1, Math.trunc(options?.minuteStep ?? 1));
+  const secondStep = Math.max(1, Math.trunc(options?.secondStep ?? 1));
+  const use12Hours = options?.use12Hours ?? false;
+  const disabledHours = options?.disabledTime?.disabledHours?.() ?? [];
+  const selectedParts = options?.selectedParts ?? getTimeWheelParts("");
+
+  if (column === "hour") {
+    const start = use12Hours ? 1 : 0;
+    const end = use12Hours ? 12 : 23;
+    const period = options?.period;
+
+    return createNumberOptions(start, end, hourStep).map((option) => {
+      const currentHour = use12Hours
+        ? convertDisplayHourTo24Hour(option.value, period)
+        : option.value;
+
+      return {
+        ...option,
+        disabled: disabledHours.includes(currentHour),
+      };
+    });
+  }
+
+  if (column === "minute") {
+    const disabledMinutes =
+      options?.disabledTime?.disabledMinutes?.(selectedParts.hour) ?? [];
+
+    return createNumberOptions(0, 59, minuteStep).map((option) => {
+      return {
+        ...option,
+        disabled: disabledMinutes.includes(option.value),
+      };
+    });
+  }
+
+  const disabledSeconds =
+    options?.disabledTime?.disabledSeconds?.(
+      selectedParts.hour,
+      selectedParts.minute,
+    ) ?? [];
+
+  return createNumberOptions(0, 59, secondStep).map((option) => {
+    return {
+      ...option,
+      disabled: disabledSeconds.includes(option.value),
+    };
+  });
+}
+
+export function getTimeWheelPanelMinWidth(columnCount: number) {
+  return Math.max(244, columnCount * 4.25 * 16);
+}
+
+const createNumberOptions = (start: number, end: number, step: number) => {
+  return Array.from(
+    { length: Math.floor((end - start) / step) + 1 },
+    (_, index) => {
+      const value = start + index * step;
+      return {
+        value,
+        label: padNumber(value),
+      };
+    },
+  ).filter((option) => option.value <= end);
+};
+
+const convertDisplayHourTo24Hour = (
+  displayHour: number,
+  period?: "am" | "pm",
+) => {
+  const normalizedDisplayHour = Math.trunc(displayHour);
+
+  if (period === "pm") {
+    return normalizedDisplayHour === 12 ? 12 : normalizedDisplayHour + 12;
+  }
+  if (period === "am") {
+    return normalizedDisplayHour === 12 ? 0 : normalizedDisplayHour;
+  }
+  return normalizedDisplayHour;
+};
+
+const padNumber = (value: number) => {
+  return String(value).padStart(2, "0");
+};

package/packages/willa-form/src/internal/useComboboxState.ts

@@ -0,0 +1,21 @@
+import {
+  useSelectionModel,
+  type SelectionModelItem,
+  type UseSelectionModelOptions,
+} from "#form/internal/useSelectionModel";
+import {
+  useSelectablePanel,
+  type UseSelectablePanelOptions,
+} from "#form/internal/useSelectablePanel";
+
+export type UseComboboxStateOptions<Item extends SelectionModelItem> =
+  UseSelectionModelOptions<Item> & UseSelectablePanelOptions;
+
+export function useComboboxState<Item extends SelectionModelItem>(
+  options: UseComboboxStateOptions<Item>,
+) {
+  return {
+    ...useSelectionModel(options),
+    ...useSelectablePanel(options),
+  };
+}

package/packages/willa-form/src/internal/useFloatingPanel.ts

@@ -0,0 +1,114 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type RefObject,
+} from "react";
+import { useFloatingLayer } from "@willa-ui/shared";
+
+export type FloatingPanelPosition = {
+  left: number;
+  top: number;
+  width?: number;
+};
+
+export type UseFloatingPanelOptions = {
+  open: boolean;
+  rootRef: RefObject<HTMLElement | null>;
+  triggerRef: RefObject<HTMLElement | null>;
+  panelRef: RefObject<HTMLElement | null>;
+  listRef?: RefObject<HTMLElement | null>;
+  minWidth?: number;
+  matchTriggerWidth?: boolean;
+  fullWidthBelow?: number;
+  fallbackHeight?: number;
+  gap?: number;
+  viewportPadding?: number;
+  onClose: () => void;
+};
+
+export const useFloatingPanel = ({
+  open,
+  rootRef,
+  triggerRef,
+  panelRef,
+  listRef,
+  minWidth,
+  matchTriggerWidth = true,
+  fullWidthBelow,
+  fallbackHeight = 320,
+  gap = 6,
+  viewportPadding = 8,
+  onClose,
+}: UseFloatingPanelOptions) => {
+  const [scrollable, setScrollable] = useState(false);
+  const outsideRefs = useMemo(() => [rootRef], [rootRef]);
+  const { position: layerPosition, updatePosition } = useFloatingLayer({
+    open,
+    triggerRef,
+    floatingRef: panelRef,
+    minWidth,
+    matchAnchorWidth: matchTriggerWidth,
+    fallbackHeight,
+    fullWidthBelow,
+    applyResolvedWidth: true,
+    flipToFit: true,
+    side: "bottom",
+    align: "start",
+    offset: gap,
+    viewportPadding,
+    outsideRefs,
+    onClose,
+  });
+  const position: FloatingPanelPosition | null = layerPosition
+    ? {
+        left: layerPosition.left,
+        top: layerPosition.top,
+        width: layerPosition.width,
+      }
+    : null;
+
+  const updateScrollable = useCallback(() => {
+    const list = listRef?.current;
+
+    if (!list) {
+      setScrollable(false);
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      setScrollable(list.scrollHeight > list.clientHeight + 1);
+    });
+  }, [listRef]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleViewportChange = () => {
+      updateScrollable();
+    };
+
+    updateScrollable();
+    window.addEventListener("resize", handleViewportChange);
+    window.addEventListener("scroll", handleViewportChange, true);
+
+    return () => {
+      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("scroll", handleViewportChange, true);
+    };
+  }, [open, updateScrollable]);
+
+  useEffect(() => {
+    if (open) return;
+
+    setScrollable(false);
+  }, [open]);
+
+  return {
+    position,
+    scrollable,
+    updatePosition,
+    updateScrollable,
+  };
+};

package/packages/willa-form/src/internal/useSelectablePanel.ts

@@ -0,0 +1,152 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+
+import {
+  focusSelectablePanelItem,
+  type SelectablePanelFocusTarget,
+} from "#form/internal/selectablePanelKeyboard";
+import { useFloatingPanel } from "#form/internal/useFloatingPanel";
+
+export type UseSelectablePanelOptions = {
+  contentVersion: unknown;
+  fallbackHeight: number;
+  id?: string;
+  minWidth: number;
+  searchable: boolean;
+};
+
+type SelectablePanelPendingFocus = {
+  selector: string;
+  target: SelectablePanelFocusTarget;
+};
+
+export function useSelectablePanel(options: UseSelectablePanelOptions) {
+  const { contentVersion, fallbackHeight, id, minWidth, searchable } = options;
+  const generatedId = useId();
+  const buttonId = id ?? generatedId;
+  const panelId = `${buttonId}-panel`;
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  const focusTargetRef = useRef<SelectablePanelPendingFocus | null>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const closePanel = useCallback(() => setOpen(false), []);
+  const { position, scrollable, updatePosition, updateScrollable } =
+    useFloatingPanel({
+      open,
+      rootRef,
+      triggerRef,
+      panelRef,
+      listRef,
+      minWidth,
+      fallbackHeight,
+      onClose: closePanel,
+    });
+
+  const focusPanelItem = useCallback(
+    (selector: string, target: SelectablePanelFocusTarget) => {
+      window.setTimeout(() => {
+        focusSelectablePanelItem(panelRef.current, selector, target);
+      }, 0);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (open) {
+      updatePosition();
+      updateScrollable();
+      const focusTarget = focusTargetRef.current;
+      focusTargetRef.current = null;
+
+      if (focusTarget) {
+        focusPanelItem(focusTarget.selector, focusTarget.target);
+      } else if (searchable) {
+        window.setTimeout(() => searchRef.current?.focus(), 0);
+      }
+    } else {
+      setQuery("");
+    }
+  }, [
+    contentVersion,
+    focusPanelItem,
+    open,
+    searchable,
+    updatePosition,
+    updateScrollable,
+  ]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    updatePosition();
+    updateScrollable();
+  }, [contentVersion, open, query, updatePosition, updateScrollable]);
+
+  const focusOrOpen = (
+    selector: string,
+    target: SelectablePanelFocusTarget,
+  ) => {
+    if (open) {
+      focusPanelItem(selector, target);
+      return;
+    }
+
+    focusTargetRef.current = { selector, target };
+    setOpen(true);
+  };
+
+  const handleTriggerKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    options: {
+      selector: string;
+      onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    },
+  ) => {
+    options.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      focusOrOpen(options.selector, event.key === "ArrowUp" ? "last" : "first");
+      return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen((currentOpen) => !currentOpen);
+    }
+  };
+
+  return {
+    buttonId,
+    closePanel,
+    listRef,
+    open,
+    panelId,
+    panelRef,
+    position,
+    query,
+    rootRef,
+    scrollable,
+    searchRef,
+    setOpen,
+    setQuery,
+    triggerRef,
+    handleTriggerKeyDown,
+  };
+}