@codecademy/gamut 68.1.3-alpha.ce69cb.0 → 68.1.3-alpha.da9068.0

package/dist/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,135 @@
+import { breakpoints } from '@codecademy/gamut-styles';
+import { useEffect, useId, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import { Box, FlexBox } from '../Box';
+import { Calendar, CalendarBody, CalendarFooter, CalendarHeader } from './Calendar';
+import { useDatePicker } from './DatePickerContext';
+import { handleDateSelectRange, handleDateSelectSingle } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Calendar that composes Calendar, CalendarHeader, CalendarBody, CalendarFooter.
+ * When inside DatePicker: owns local visibleDate and focusedDate; updates shared
+ * state via context. Supports single-date and range modes.
+ */
+export const DatePickerCalendar = ({
+  dialogId,
+  weekStartsOn = 0
+}) => {
+  const context = useDatePicker();
+  const generatedId = useId();
+  const fallbackDialogId = `datepicker-calendar-${generatedId.replace(/:/g, '')}`;
+  const headingId = dialogId ?? context?.calendarDialogId ?? fallbackDialogId;
+  if (context == null) {
+    throw new Error('DatePickerCalendar must be used inside a DatePicker (it reads shared state from context).');
+  }
+  const {
+    mode,
+    startOrSelectedDate,
+    setSelection,
+    disabledDates,
+    locale,
+    closeCalendar,
+    isCalendarOpen,
+    translations
+  } = context;
+  const isRange = mode === 'range';
+  const endDate = isRange ? context.endDate : undefined;
+  const firstOfMonth = date => new Date(date.getFullYear(), date.getMonth(), 1);
+  const [visibleDate, setVisibleDate] = useState(() => firstOfMonth(startOrSelectedDate ?? new Date()));
+  const [focusedDate, setFocusedDate] = useState(() => startOrSelectedDate ?? endDate ?? new Date());
+  const wasOpenRef = useRef(false);
+
+  // Sync visible month to selection only when the calendar opens, not on every
+  // date click. Otherwise clicking a date in the second month would jump the view.
+  useEffect(() => {
+    const justOpened = isCalendarOpen && !wasOpenRef.current;
+    wasOpenRef.current = isCalendarOpen;
+    if (!justOpened) return;
+    const anchor = startOrSelectedDate ?? endDate;
+    if (anchor) {
+      setVisibleDate(firstOfMonth(anchor));
+      setFocusedDate(startOrSelectedDate ?? endDate ?? new Date());
+    }
+  }, [isCalendarOpen, startOrSelectedDate, endDate]);
+  const onDateSelect = date => {
+    if (!isRange) {
+      handleDateSelectSingle(date, startOrSelectedDate, setSelection);
+    } else {
+      context.setActiveRangePart(null);
+      handleDateSelectRange(date, context.activeRangePart, startOrSelectedDate, context.endDate, setSelection, disabledDates);
+    }
+  };
+  const handleClearDate = () => {
+    setSelection(null);
+    setFocusedDate(visibleDate);
+  };
+  const handleTodayClick = () => {
+    const today = new Date();
+    setSelection(today);
+    setVisibleDate(firstOfMonth(today));
+    setFocusedDate(today);
+  };
+  const focusTarget = focusedDate ?? startOrSelectedDate ?? endDate ?? new Date();
+  const addMonths = (date, n) => new Date(date.getFullYear(), date.getMonth() + n, 1);
+  const secondMonthDate = addMonths(visibleDate, 1);
+  const isTwoMonthsVisible = useMedia(`(min-width: ${breakpoints.xs})`);
+  return /*#__PURE__*/_jsxs(Calendar, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      p: 24,
+      children: [/*#__PURE__*/_jsx(CalendarHeader, {
+        currentMonthYear: visibleDate,
+        headingId: headingId,
+        locale: locale,
+        secondMonthYear: secondMonthDate,
+        onCurrentMonthYearChange: setVisibleDate
+      }), /*#__PURE__*/_jsxs(FlexBox, {
+        children: [/*#__PURE__*/_jsx(CalendarBody, {
+          disabledDates: disabledDates,
+          endDate: endDate,
+          focusedDate: focusTarget,
+          hasAdjacentMonthRight: isTwoMonthsVisible,
+          labelledById: headingId,
+          locale: locale,
+          selectedDate: startOrSelectedDate,
+          visibleDate: visibleDate,
+          weekStartsOn: weekStartsOn,
+          onDateSelect: onDateSelect,
+          onEscapeKeyPress: closeCalendar,
+          onFocusedDateChange: setFocusedDate,
+          onVisibleDateChange: setVisibleDate
+        }), /*#__PURE__*/_jsx(Box, {
+          display: {
+            _: 'none',
+            xs: 'initial'
+          },
+          pl: {
+            _: 0,
+            xs: 32
+          },
+          children: /*#__PURE__*/_jsx(CalendarBody, {
+            disabledDates: disabledDates,
+            endDate: endDate,
+            focusedDate: focusTarget,
+            hasAdjacentMonthLeft: isTwoMonthsVisible,
+            labelledById: headingId,
+            locale: locale,
+            selectedDate: startOrSelectedDate,
+            visibleDate: secondMonthDate,
+            weekStartsOn: weekStartsOn,
+            onDateSelect: onDateSelect,
+            onEscapeKeyPress: closeCalendar,
+            onFocusedDateChange: setFocusedDate,
+            onVisibleDateChange: setVisibleDate
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(CalendarFooter, {
+      clearText: translations.clearText,
+      disabled: startOrSelectedDate === null && endDate === null,
+      locale: locale,
+      showClearButton: isRange,
+      onClearDate: handleClearDate,
+      onTodayClick: handleTodayClick
+    })]
+  });
+};

package/dist/DatePicker/DatePickerContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { DatePickerContextValue as DatePickerContextValueType } from './types';
+export declare const DatePickerContext: import("react").Context<DatePickerContextValueType | null>;
+/** Provider component; DatePicker uses this to set the context value. */
+export declare const DatePickerProvider: import("react").Provider<DatePickerContextValueType | null>;
+/**
+ * Returns the DatePicker context value (shared state and callbacks).
+ * Must be used inside a DatePicker. For composed layouts, use this to get
+ * openCalendar, closeCalendar, isCalendarOpen, inputRef, calendarDialogId, etc.
+ */
+export declare const useDatePicker: () => DatePickerContextValueType;

package/dist/DatePicker/DatePickerContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+export const DatePickerContext = /*#__PURE__*/createContext(null);
+
+/** Provider component; DatePicker uses this to set the context value. */
+export const DatePickerProvider = DatePickerContext.Provider;
+
+/**
+ * Returns the DatePicker context value (shared state and callbacks).
+ * Must be used inside a DatePicker. For composed layouts, use this to get
+ * openCalendar, closeCalendar, isCalendarOpen, inputRef, calendarDialogId, etc.
+ */
+export const useDatePicker = () => {
+  const value = useContext(DatePickerContext);
+  if (value == null) {
+    throw new Error('useDatePickerContext must be used within a DatePicker.');
+  }
+  return value;
+};

package/dist/DatePicker/DatePickerInput.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Input } from '../Form/inputs/Input';
+/**
+ * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
+ * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
+ */
+export type DatePickerInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'icon'> & {
+    /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
+    rangePart?: 'start' | 'end';
+};
+/**
+ * Date input. When inside DatePicker: owns local input value state and syncs to
+ * shared selectedDate via context on blur/parse; opens calendar on click/arrow down.
+ * When outside DatePicker: fully controlled by props.
+ */
+export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/DatePicker/DatePickerInput.js

@@ -0,0 +1,137 @@
+import { MiniCalendarIcon } from '@codecademy/gamut-icons';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { FormGroup } from '../Form/elements/FormGroup';
+import { Input } from '../Form/inputs/Input';
+import { formatDateForInput, getDateFormatPattern, parseDateFromInput } from './Calendar/utils/format';
+import { useDatePicker } from './DatePickerContext';
+
+/**
+ * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
+ * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Date input. When inside DatePicker: owns local input value state and syncs to
+ * shared selectedDate via context on blur/parse; opens calendar on click/arrow down.
+ * When outside DatePicker: fully controlled by props.
+ */
+export const DatePickerInput = /*#__PURE__*/forwardRef(({
+  placeholder,
+  label,
+  rangePart,
+  ...rest
+}, ref) => {
+  const context = useDatePicker();
+  // do we want to do this or just throw an error?
+  // if (context == null) {
+  //   return (
+  //     <Input
+  //       {...rest}
+  //       icon={CalendarIcon}
+  //       placeholder={placeholder ?? 'MM/DD/YYYY'}
+  //       ref={ref}
+  //       type="text"
+  //     />
+  //   );
+  // }
+  if (context == null) {
+    throw new Error('DatePickerInput must be used inside a DatePicker (it reads shared state from context).');
+  }
+  const {
+    mode,
+    startOrSelectedDate,
+    setSelection,
+    openCalendar,
+    locale,
+    isCalendarOpen,
+    calendarDialogId,
+    translations
+  } = context;
+  const isRange = mode === 'range';
+  const inputID = useId();
+  const inputId = `datepicker-input-${inputID.replace(/:/g, '')}`;
+
+  // Range with two inputs: each input binds to one part. Single or range combined: one value.
+  const boundDate = isRange && rangePart === 'end' ? context.endDate : startOrSelectedDate;
+  const formattedValue = boundDate != null ? formatDateForInput(boundDate, locale) : '';
+  const [inputValue, setInputValue] = useState(() => formattedValue);
+  const isInputFocusedRef = useRef(false);
+
+  // Sync input from shared state. Skip when focused so we don't overwrite while typing.
+  useEffect(() => {
+    if (!isInputFocusedRef.current) {
+      setInputValue(formattedValue);
+    }
+  }, [formattedValue]);
+
+  /** Apply raw input string to selection state. Returns formatted string if parsed so caller can sync input (e.g. on blur). */
+  const applyValueToSelection = raw => {
+    const trimmed = raw.trim();
+    if (!trimmed) {
+      if (isRange && rangePart) {
+        if (rangePart === 'start') setSelection(null, context.endDate);else setSelection(startOrSelectedDate, null);
+      } else setSelection(null);
+      return undefined;
+    }
+    const parsed = parseDateFromInput(trimmed, locale);
+    if (!parsed) return undefined;
+    if (isRange && rangePart) {
+      if (rangePart === 'start') setSelection(parsed, context.endDate);else setSelection(startOrSelectedDate, parsed);
+    } else setSelection(parsed);
+    return formatDateForInput(parsed, locale);
+  };
+  const handleChange = e => {
+    const raw = e.target.value;
+    setInputValue(raw);
+    applyValueToSelection(raw);
+  };
+  const handleBlur = () => {
+    isInputFocusedRef.current = false;
+    const formatted = applyValueToSelection(inputValue.trim());
+    if (formatted) setInputValue(formatted);else if (inputValue.trim()) setInputValue(formattedValue);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.preventDefault();
+      openCalendar();
+    }
+  };
+  const handleOpenCalendar = () => {
+    openCalendar();
+  };
+  const defaultLabel = !isRange ? translations.dateLabel : rangePart === 'end' ? translations.endDateLabel : translations.startDateLabel;
+  return /*#__PURE__*/_jsx(FormGroup, {
+    htmlFor: inputId,
+    isSoloField: true // should probaly be based on a prop
+    ,
+    label: label ?? defaultLabel,
+    mb: 0,
+    pb: 0,
+    spacing: "tight",
+    width: "170px",
+    children: /*#__PURE__*/_jsx(Input, {
+      ...rest,
+      "aria-autocomplete": "none",
+      "aria-controls": calendarDialogId,
+      "aria-expanded": isCalendarOpen,
+      "aria-haspopup": "dialog",
+      icon: () => /*#__PURE__*/_jsx(MiniCalendarIcon, {
+        size: 16
+      }),
+      id: inputId,
+      placeholder: placeholder ?? getDateFormatPattern(locale),
+      ref: ref,
+      role: "combobox",
+      type: "text",
+      value: inputValue,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onClick: handleOpenCalendar,
+      onFocus: () => {
+        isInputFocusedRef.current = true;
+        if (isRange && rangePart) context.setActiveRangePart(rangePart);
+      },
+      onKeyDown: handleKeyDown
+    })
+  });
+});

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DatePicker – Single-date and range picker with input + calendar popover.
+ */
+export type { DatePickerContextValue, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, } from './types';
+export { DatePicker } from './DatePicker';
+export { DatePickerContext, DatePickerProvider, useDatePicker, } from './DatePickerContext';
+export { DatePickerCalendar } from './DatePickerCalendar';
+export type { DatePickerCalendarProps } from './DatePickerCalendar';
+export { DatePickerInput } from './DatePickerInput';
+export type { DatePickerInputProps } from './DatePickerInput';
+export { Calendar, CalendarHeader, CalendarBody, CalendarFooter, } from './Calendar';
+export type { CalendarHeaderProps, CalendarBodyProps, CalendarFooterProps, QuickAction, } from './Calendar/types';
+export * from './Calendar/utils';

package/dist/DatePicker/index.js

@@ -0,0 +1,10 @@
+/**
+ * DatePicker – Single-date and range picker with input + calendar popover.
+ */
+
+export { DatePicker } from './DatePicker';
+export { DatePickerContext, DatePickerProvider, useDatePicker } from './DatePickerContext';
+export { DatePickerCalendar } from './DatePickerCalendar';
+export { DatePickerInput } from './DatePickerInput';
+export { Calendar, CalendarHeader, CalendarBody, CalendarFooter } from './Calendar';
+export * from './Calendar/utils';

package/dist/DatePicker/translations.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerTranslations } from './types';
+/** Default UI strings; pass translations prop to override. */
+export declare const DEFAULT_DATE_PICKER_TRANSLATIONS: Required<DatePickerTranslations>;

package/dist/DatePicker/translations.js

@@ -0,0 +1,8 @@
+/** Default UI strings; pass translations prop to override. */
+export const DEFAULT_DATE_PICKER_TRANSLATIONS = {
+  clearText: 'Clear',
+  dateLabel: 'Date',
+  startDateLabel: 'Start date',
+  endDateLabel: 'End date',
+  calendarDialogAriaLabel: 'Choose date'
+};

package/dist/DatePicker/types.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Public and internal types for the DatePicker (single-date and range).
+ */
+/// <reference types="react" />
+/** Result of custom validation; null means valid. */
+export interface DatePickerValidationResult {
+    errorMessage: string;
+    errorType: string;
+}
+/** Shared props for all DatePicker modes. */
+export interface DatePickerBaseProps {
+    /** Locale for formatting (e.g. 'en-US'). */
+    locale?: string;
+    /** Dates that are disabled (unselectable) in the calendar. */
+    disabledDates?: Date[];
+    /** When provided, only the provider is rendered and children compose Input + Calendar. */
+    children?: React.ReactNode;
+    /** Placeholder for the input. */
+    placeholder?: string;
+    /** Override UI strings (e.g. clear button). Merged with defaults. */
+    translations?: DatePickerTranslations;
+}
+/** Props for the DatePicker (single-date mode). */
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: 'single';
+    /** Controlled selected date. */
+    selectedDate: Date | null;
+    /** Called when the user selects a date. */
+    setSelectedDate: (date: Date | null) => void;
+    /** Label for the input. */
+    label?: string;
+}
+/** Props for the DatePicker (range mode). */
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: 'range';
+    /** Controlled start date. */
+    startDate: Date | null;
+    /** Controlled end date. */
+    endDate: Date | null;
+    /** Called when the user changes the start date. */
+    setStartDate: (date: Date | null) => void;
+    /** Called when the user changes the end date. */
+    setEndDate: (date: Date | null) => void;
+    /** Label for the start date input. */
+    startLabel?: string;
+    /** Label for the end date input. */
+    endLabel?: string;
+}
+/** Props for the DatePicker provider / standalone component. */
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/** Which range input is active (focused); null = calendar drives both (selection mode). */
+export type ActiveRangePart = 'start' | 'end' | null;
+/** Optional translations for DatePicker UI strings. Pass to override defaults. */
+export interface DatePickerTranslations {
+    /** Label for the clear date button (default: "Clear"). */
+    clearText?: string;
+    /** Default label for the date input in single mode (default: "Date"). */
+    dateLabel?: string;
+    /** Default label for the start date input in range mode (default: "Start date"). */
+    startDateLabel?: string;
+    /** Default label for the end date input in range mode (default: "End date"). */
+    endDateLabel?: string;
+    /** aria-label for the calendar dialog (default: "Choose date"). */
+    calendarDialogAriaLabel?: string;
+}
+/** Shared state provided by DatePicker via context. */
+export interface DatePickerBaseContextValue {
+    isCalendarOpen: boolean;
+    openCalendar: () => void;
+    closeCalendar: () => void;
+    locale?: string;
+    disabledDates: Date[];
+    calendarDialogId: string;
+    /** UI string overrides (e.g. clear button). */
+    translations: Required<DatePickerTranslations>;
+    /** Start date (range) or selected date (single). */
+    startOrSelectedDate: Date | null;
+    /** Set selection. Single: (date). Range: (start, end). */
+    setSelection: (startOrSelectedDate: Date | null, endDate?: Date | null) => void;
+}
+export interface DatePickerSingleContextValue extends DatePickerBaseContextValue {
+    mode: 'single';
+}
+export interface DatePickerRangeContextValue extends DatePickerBaseContextValue {
+    mode: 'range';
+    /** Range only: end date. */
+    endDate: Date | null;
+    /** Range only: which input is active (start/end focused); null = selection mode. */
+    activeRangePart: ActiveRangePart;
+    /** Range only: set which input is active (e.g. when input receives focus). */
+    setActiveRangePart: (part: ActiveRangePart) => void;
+}
+export type DatePickerContextValue = DatePickerSingleContextValue | DatePickerRangeContextValue;

package/dist/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/DatePicker/utils.d.ts

@@ -0,0 +1,5 @@
+import { ActiveRangePart } from './types';
+/** True if any disabled date falls within [start, end] (inclusive, by calendar day). */
+export declare const rangeContainsDisabled: (start: Date, end: Date, disabledDates: Date[]) => boolean;
+export declare const handleDateSelectSingle: (date: Date, selectedDate: Date | null, setSelection: (date: Date | null) => void) => void;
+export declare const handleDateSelectRange: (date: Date, activeRangePart: ActiveRangePart, startDate: Date | null, endDate: Date | null, setSelection: (startDate: Date | null, endDate?: Date | null) => void, disabledDates: Date[]) => void;

package/dist/DatePicker/utils.js

@@ -0,0 +1,90 @@
+import { isDateInRange, isSameDay } from './Calendar/utils/dateGrid';
+/** True if any disabled date falls within [start, end] (inclusive, by calendar day). */
+export const rangeContainsDisabled = (start, end, disabledDates) => {
+  return disabledDates.some(date => isSameDay(date, start) || isSameDay(date, end) || isDateInRange(date, start, end));
+};
+export const handleDateSelectSingle = (date, selectedDate, setSelection) => {
+  // If clicked date is the same as Start Date: Clear Start Date
+  if (selectedDate && date.getTime() === selectedDate.getTime()) {
+    setSelection(null);
+    return;
+  }
+  // If clicked date is not the same as Start Date: Set Start Date to clicked date
+  setSelection(date);
+};
+const applyRangeOrNewStart = (start, end, clickedDate, disabledDates, setSelection) => {
+  // if range contains disabled dates, set start date to clicked date and end date to null
+  if (rangeContainsDisabled(start, end, disabledDates)) {
+    setSelection(clickedDate, null);
+  } else {
+    setSelection(start, end);
+  }
+};
+export const handleDateSelectRange = (date, activeRangePart, startDate, endDate, setSelection, disabledDates) => {
+  // Range mode: field targeting (start or end input was focused)
+  if (activeRangePart === 'start') {
+    if (date.getTime() === startDate?.getTime()) {
+      setSelection(null, endDate);
+      return;
+    }
+    const newEnd = endDate != null && date.getTime() <= endDate.getTime() ? endDate : null;
+    if (newEnd != null) {
+      applyRangeOrNewStart(date, newEnd, date, disabledDates, setSelection);
+    } else {
+      setSelection(date, newEnd);
+    }
+    return;
+  }
+  if (activeRangePart === 'end') {
+    if (date.getTime() === endDate?.getTime()) {
+      setSelection(startDate, null);
+      return;
+    }
+    const newStart = startDate != null && date.getTime() >= startDate.getTime() ? startDate : null;
+    if (newStart != null) {
+      applyRangeOrNewStart(newStart, date, date, disabledDates, setSelection);
+    } else {
+      setSelection(newStart, date);
+    }
+    return;
+  }
+
+  // Range selection mode (no field focused: calendar drives both)
+  if (startDate && endDate) {
+    // if start date is end date and is clicked, clears everything
+    if (startDate.getTime() === endDate.getTime() && date.getTime() === startDate.getTime()) {
+      setSelection(null, null);
+      return;
+    }
+    // if clicked on start date, end date becomes start date
+    if (date.getTime() === startDate.getTime()) {
+      setSelection(endDate, null);
+      return;
+    }
+    // if clicked on end date, clears end date and start remains
+    if (date.getTime() === endDate.getTime()) {
+      setSelection(startDate, null);
+      return;
+    }
+    // If clicked date > Start: Updates End Date to new date (Start remains)
+    if (date.getTime() > startDate.getTime()) {
+      applyRangeOrNewStart(startDate, date, date, disabledDates, setSelection);
+      return;
+    }
+    // If clicked date < Start: Updates Start Date to new date (End remains) - extends range to the left
+    applyRangeOrNewStart(date, endDate, date, disabledDates, setSelection);
+    return;
+  }
+  // Start is Set, End is Empty
+  if (startDate && !endDate) {
+    // If clicked date < Start: Restarts selection with clicked date as new Start
+    if (date.getTime() < startDate.getTime()) {
+      setSelection(date, null);
+    } else {
+      // If clicked date > Start: Sets it as End Date (if range valid)
+      applyRangeOrNewStart(startDate, date, date, disabledDates, setSelection);
+    }
+    return;
+  }
+  setSelection(date, null);
+};