@khanacademy/wonder-blocks-date-picker 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @khanacademy/wonder-blocks-date-picker
+
+## 0.1.0
+
+### Minor Changes
+
+- d6ae5fb: Add new Date Picker package and related dev settings
+
+### Patch Changes
+
+- 07c38ec: Finalizes support for DatePicker Locales
+- Updated dependencies [d6ae5fb]
+    - @khanacademy/wonder-blocks-core@12.4.3
+    - @khanacademy/wonder-blocks-form@7.5.2
+    - @khanacademy/wonder-blocks-icon@5.3.6
+    - @khanacademy/wonder-blocks-modal@8.5.13
+    - @khanacademy/wonder-blocks-styles@0.2.37
+    - @khanacademy/wonder-blocks-tokens@14.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/date-picker-input.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import type { CustomModifiers } from "../util/types";
+interface Props {
+    /**
+     * The value passed to the input element.
+     */
+    value: string | null | undefined;
+    /**
+     * Whether the input element is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * This id is used to tie the input field to the label that describes it.
+     * Used to match `<label>` with `<input>` elements for screenreaders.
+     */
+    id?: string;
+    /**
+     * Called when the input element loses focus.
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    /**
+     * Called when the input element is clicked.
+     */
+    onClick?: (arg1: React.MouseEvent<Element>) => unknown;
+    /**
+     * Called when the input element gains focus.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    /**
+     * Called if the user press a key inside the input element.
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /**
+     * Called when the selected date changes, this callback is a passed a Date
+     * and the modifiers object containing information about the selected date.
+     *
+     * NOTE: `value` will be null if an invalid date has been entered.
+     */
+    onChange?: (value: Date | null | undefined, modifiers: Partial<CustomModifiers>) => unknown;
+    /**
+     * Used to format the value as a valid Date.
+     */
+    dateFormat?: Array<string> | string;
+    /**
+     * The locale associated to the current Date.
+     */
+    locale?: string;
+    /**
+     * An object of day modifiers (exposed by react-day-picker).
+     * @see https://react-day-picker.js.org/docs/matching-days
+     */
+    modifiers?: Partial<CustomModifiers>;
+    /**
+     * Return the modifiers matching day for the given modifiers  (exposed by
+     * react-day-picker).
+     * @see https://react-day-picker.js.org/api/ModifiersUtils
+     */
+    getModifiersForDay?: (day: Date, modifiers: Partial<CustomModifiers>) => Array<string>;
+    /**
+     * Function to parse user-entered date strings into Date objects.
+     *
+     * This is called as the user types to validate and convert their input
+     * into a Date. If the input matches one of the provided formats, it
+     * returns a Date object. If the input is invalid or doesn't match any
+     * format, it returns null or undefined.
+     *
+     * @param value - The date string to parse (or an existing Date to pass through)
+     * @param format - A single format string or array of format strings to try
+     * @param locale - Optional locale for locale-aware parsing
+     * @returns A Date object if parsing succeeds, null/undefined otherwise
+     *
+     * @example
+     * parseDate("2024-12-25", "YYYY-MM-DD", "en-US") // => Date object
+     * parseDate("invalid", "YYYY-MM-DD", "en-US") // => null
+     */
+    parseDate?: (value: string | Date, format: Array<string> | null | undefined | string | null | undefined, locale?: string | null | undefined) => Date | null | undefined;
+    /**
+     * The placeholder assigned to the date field
+     */
+    placeholder?: string;
+    /**
+     * Test ID used for testing.
+     */
+    testId?: string;
+    /**
+     * Used to define a string that labels the current element.
+     */
+    ["aria-label"]?: string;
+}
+/**
+ * Provides the user with a text field which they can manually input a date.
+ *
+ * There's also an internal mechanism to verify and parse the current value as a
+ * date. In both cases, we provide the necessary information (via onChange) to
+ * notify the parent component the result of the operation.
+ */
+declare const DatePickerInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default DatePickerInput;

package/dist/components/date-picker-overlay.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+interface Props {
+    /**
+     * The children that will be wrapped by PopperJS.
+     */
+    children: React.ReactNode;
+    /**
+     * Called when the popper should be closed/hidden.
+     */
+    onClose: () => unknown;
+    /**
+     * The reference element used to position the popper.
+     */
+    referenceElement: HTMLElement | null | undefined;
+    /**
+     * Styles that will be applied to the children.
+     */
+    style?: StyleType;
+}
+/**
+ * The custom overlay wrapper that will be used to render the calendar popup
+ * component (DayPicker) using PopperJS + React.Portal.
+ *
+ * NOTE: We use this approach to prevent any z-index issues when displaying the
+ * calendar popup in the current view. This includes using it inside a normal
+ * page or inside a Modal component.
+ */
+declare const DatePickerOverlay: ({ children, referenceElement, onClose, style, }: Props) => React.ReactElement | null;
+export default DatePickerOverlay;

package/dist/components/date-picker.d.ts

@@ -0,0 +1,79 @@
+import { Temporal } from "temporal-polyfill";
+import * as React from "react";
+import { type Locale } from "react-day-picker/locale";
+import { type StyleType } from "@khanacademy/wonder-blocks-core";
+import "react-day-picker/style.css";
+interface Props {
+    /**
+     * The locale to use for the dates: a string name matching a Locale object
+     * imported from react-day-picker.
+     * If not provided, it will fall back to enUS.
+     */
+    locale?: Locale;
+    /**
+     * When the selected date changes, this callback is passsed a Temporal object
+     * for midnight on the selected date, set to the user's local time zone.
+     */
+    updateDate: (arg1?: Temporal.PlainDate | null | undefined) => any;
+    /**
+     * Used to format the value as a valid Date.
+     */
+    dateFormat?: Array<string> | string;
+    /**
+     * Whether the DatePicker component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Unique identifier attached to the input field. see DatePickerInput.id for
+     * more details.
+     */
+    id?: string;
+    /**
+     * The maximum date to be allowed to select in the picker container.
+     */
+    maxDate?: Temporal.PlainDate | null | undefined;
+    /**
+     * The minimum date to be allowed to select in the picker container.
+     */
+    minDate?: Temporal.PlainDate | null | undefined;
+    /**
+     * The aria-label to be used for the date picker. This is only needed if there
+     * is no visible label associated with the date picker, such as with LabeledField.
+     */
+    inputAriaLabel?: string;
+    /**
+     * The placeholder assigned to the date field
+     */
+    placeholder?: string;
+    /**
+     * The current valid date associated to the DatePicker component.
+     */
+    selectedDate?: Temporal.PlainDate | null | undefined;
+    /**
+     * Styles for the date picker container.
+     */
+    style?: StyleType;
+    /**
+     * Whether the date picker should close when a date is selected.
+     * Defaults to true.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Allows including elements below the date selection area that can close
+     * the date picker.
+     */
+    footer?: (arg1: {
+        close: () => unknown;
+    }) => React.ReactNode;
+}
+/**
+ * A UI component that allows the user to pick a date by using an input element
+ * or the calendar popup exposed by `react-day-picker`.
+ */
+declare const DatePicker: {
+    (props: Props): React.JSX.Element;
+    defaultProps: {
+        closeOnSelect: boolean;
+    };
+};
+export default DatePicker;

package/dist/components/focus-manager.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+interface Props {
+    /**
+     * The container where we will apply the focus management logic.
+     */
+    children: React.ReactNode;
+    /**
+     * A reference to the element that is used to trigger the container.
+     */
+    referenceElement: HTMLElement | null | undefined;
+    /**
+     * Called when we reach the beginning of the container
+     */
+    onStartFocused?: () => unknown;
+    /**
+     * Called when we reach the end of the container
+     */
+    onEndFocused?: () => unknown;
+}
+/**
+ * This component ensures that focus flows correctly within the children
+ * component (container).
+ *
+ * ╔═══════════╗   ╔════════════╗
+ * ║ reference ║   ║ next focus ║
+ * ╚═══════════╝   ╚════════════╝
+ *     ▲              ▲
+ *     │              │
+ *     ▼              │
+ *  ┌┄┄┄┄┄┄┄┄┄┄┄┄┐    │
+ *  ┊ container  ┊    │
+ *  ┊            ┊    │
+ *  ┊  1 ↔ 2 ↔ 3 ┊◄───┘
+ *  └┄┄┄┄┄┄┄┄┄┄┄┄┘
+ *
+ * Inside the container:
+ * - `tab`: Moves focus to the next focusable element.
+ * - `shift + tab`: Moves focus to the previous focusable element.
+ *
+ * After the focus reaches the start/end of the container, then we handle two
+ * different scenarios:
+ *
+ * 1. If the focus has reached the last focusable element inside the container,
+ *    the next tab will set focus on the next focusable element that exists
+ *    after the reference element.
+ * 2. If the focus is set to the first focusable element inside the container,
+ *    the next shift + tab will set focus on the reference element.
+ *
+ */
+export default function FocusManager(props: Props): React.JSX.Element;
+export {};

package/dist/es/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StyleSheet } from 'aphrodite';
+import { Temporal } from 'temporal-polyfill';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import { enUS } from 'react-day-picker/locale';
+import { useOnMountEffect, View, findFocusableNodes } from '@khanacademy/wonder-blocks-core';
+import { semanticColor, sizing, border, boxShadow, font } from '@khanacademy/wonder-blocks-tokens';
+import { TextField } from '@khanacademy/wonder-blocks-form';
+import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
+import calendarIcon from '@phosphor-icons/core/bold/calendar-blank-bold.svg';
+import { createPortal } from 'react-dom';
+import { Popper } from 'react-popper';
+import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
+import 'react-day-picker/style.css';
+
+const enUSLocaleCode="en-US";function formatDate(date,format,locale=enUSLocaleCode){const formatString=Array.isArray(format)?format[0]:format;if(!formatString){return date.toString()}if(formatString==="YYYY-MM-DD"){return date.toString()}try{const options=getOptionsForFormat(formatString);return date.toLocaleString(locale,options)}catch(error){console.warn(`Failed to format date with format "${formatString}" and locale "${locale}". Falling back to ISO format.`,error);return date.toString()}}function parseDate(str,format,locale){if(!str||str.trim()===""){return undefined}const formats=Array.isArray(format)?format:[format||"YYYY-MM-DD"];try{return Temporal.PlainDate.from(str)}catch{}for(const fmt of formats){try{const parsed=parseWithFormat(str,fmt,locale);if(parsed){return parsed}}catch{continue}}return undefined}const getModifiersForDay=(day,modifiers)=>{const matchedModifiers=[];for(const[modifierName,matcher]of Object.entries(modifiers)){if(!matcher){continue}if(typeof matcher==="function"){if(matcher(day)){matchedModifiers.push(modifierName);}}else if(matcher instanceof Date){if(day.getFullYear()===matcher.getFullYear()&&day.getMonth()===matcher.getMonth()&&day.getDate()===matcher.getDate()){matchedModifiers.push(modifierName);}}}return matchedModifiers};function temporalDateToJsDate(date){return new Date(date.year,date.month-1,date.day)}function jsDateToTemporalDate(date){return Temporal.PlainDate.from({year:date.getFullYear(),month:date.getMonth()+1,day:date.getDate()})}function parseDateToJsDate(value,format,locale){if(value instanceof Date){return value}const temporalDate=parseDate(value,format,locale||undefined);return temporalDate?temporalDateToJsDate(temporalDate):undefined}function getMonths(locale){const format=new Intl.DateTimeFormat(locale||enUSLocaleCode,{month:"long"});const formatShort=new Intl.DateTimeFormat(locale||enUSLocaleCode,{month:"short"});const months=[];for(let i=0;i<12;i++){const date=new Date(2021,i,15);months.push([format.format(date),formatShort.format(date)]);}return months}function getOptionsForFormat(format){const options={};if(format.includes("YYYY")){options.year="numeric";}else if(format.includes("YY")){options.year="2-digit";}if(format.includes("MMMM")){options.month="long";}else if(format.includes("MMM")){options.month="short";}else if(format.includes("MM")){options.month="2-digit";}else if(format.includes("M")){options.month="numeric";}if(format.includes("DD")){options.day="2-digit";}else if(format.includes("D")){options.day="numeric";}if(format.includes("dddd")){options.weekday="long";}else if(format.includes("ddd")){options.weekday="short";}return options}function parseWithFormat(str,format,locale){if(!format){return undefined}if(format==="M/D/YYYY"||format==="M-D-YYYY"||format==="MM/DD/YYYY"||format==="MM-DD-YYYY"){const separator=format.includes("/")?"/":"-";const parts=str.split(separator);if(parts.length===3){try{return Temporal.PlainDate.from({year:parseInt(parts[2],10),month:parseInt(parts[0],10),day:parseInt(parts[1],10)})}catch{return undefined}}}if(format==="MMMM D, YYYY"||format==="MMM D, YYYY"){try{const cleaned=str.trim();const localeStr=locale||enUSLocaleCode;const jsDate=new Date(cleaned);if(!isNaN(jsDate.getTime())){return jsDateToTemporalDate(jsDate)}const parts=cleaned.split(",");if(parts.length===2){const[monthDay,yearStr]=parts;const year=parseInt(yearStr.trim(),10);const months=getMonths(localeStr).map(m=>m[0]);const monthDayParts=monthDay.trim().split(" ");if(monthDayParts.length===2){const monthName=monthDayParts[0];const day=parseInt(monthDayParts[1],10);const monthIndex=months.findIndex(m=>m.toLowerCase()===monthName.toLowerCase()||m.slice(0,3).toLowerCase()===monthName.toLowerCase());if(monthIndex>=0&&!isNaN(day)&&!isNaN(year)){return Temporal.PlainDate.from({year,month:monthIndex+1,day})}}}}catch{return undefined}}return undefined}const startOfIsoWeek=date=>{const dayOfWeek=date.dayOfWeek;return date.subtract({days:dayOfWeek-1})};const startOfDay=date=>{const result=new Date(date);result.setHours(0,0,0,0);return result};const endOfDay=date=>{const result=new Date(date);result.setHours(23,59,59,999);return result};const TemporalLocaleUtils={formatDate,parseDate,parseDateToJsDate,startOfIsoWeek,startOfDay,endOfDay,temporalDateToJsDate,jsDateToTemporalDate,getModifiersForDay};
+
+const DatePickerInput=React.forwardRef((props,ref)=>{const{value:propValue,onBlur,onClick,onFocus,onKeyDown,onChange,dateFormat,locale=enUSLocaleCode,modifiers,getModifiersForDay,parseDate,placeholder,testId,["aria-label"]:ariaLabel,...restProps}=props;const[value,setValue]=React.useState(propValue);const processModifiers=React.useCallback((date,value)=>{if(!getModifiersForDay||!modifiers){return {}}return getModifiersForDay(date,modifiers).reduce((obj,modifier)=>({...obj,[modifier]:true}),{})},[getModifiersForDay,modifiers]);const updateDate=React.useCallback((date,value)=>{if(onChange){onChange(date,processModifiers(date,value));}},[onChange,processModifiers]);const updateDateAsInvalid=React.useCallback(()=>{if(onChange){onChange(null,{});}},[onChange]);const processDate=React.useCallback(inputValue=>{if(!inputValue||inputValue.trim()===""){return}if(!parseDate){return}const date=parseDate(inputValue,dateFormat,locale);if(!date){return}return date},[parseDate,dateFormat,locale]);const maybeUpdateDate=React.useCallback(inputValue=>{const date=processDate(inputValue);if(date){updateDate(date,inputValue);}else {updateDateAsInvalid();}},[processDate,updateDate,updateDateAsInvalid]);const isValid=React.useCallback(()=>{const date=processDate(value);if(!date){return false}const modifiersResult=processModifiers(date,value);if(modifiersResult.disabled){return false}return true},[value,processDate,processModifiers]);React.useEffect(()=>{setValue(propValue);},[propValue]);useOnMountEffect(()=>{if(!isValid()){updateDateAsInvalid();}});const handleBlur=e=>{if(!isValid()){setValue(propValue);}if(onBlur){onBlur(e);}};const handleChange=newValue=>{maybeUpdateDate(newValue);setValue(newValue);};return jsxs(View,{style:styles$1.container,onClick:e=>{if(!restProps.disabled&&onClick){onClick(e);}},children:[jsx(TextField,{ref:ref,...restProps,onBlur:handleBlur,onFocus:onFocus,onKeyDown:onKeyDown,onChange:handleChange,disabled:restProps.disabled,placeholder:placeholder,value:value??"",testId:testId,"aria-label":ariaLabel,autoComplete:"off",type:"text",style:styles$1.textField}),jsx(PhosphorIcon,{icon:calendarIcon,color:restProps.disabled?semanticColor.core.foreground.disabled.default:semanticColor.core.foreground.instructive.default,size:"small",style:styles$1.icon})]})});const styles$1=StyleSheet.create({container:{alignItems:"center",flexDirection:"row",justifyContent:"stretch"},icon:{pointerEvents:"none",position:"absolute",insetInlineEnd:sizing.size_080},textField:{width:"100%"}});
+
+function FocusManager(props){const{children,referenceElement,onStartFocused,onEndFocused}=props;const rootNodeRef=React.useRef(null);const focusableElementsRef=React.useRef([]);const focusableElementsInsideRef=React.useRef([]);const nextFocusableElementRef=React.useRef(null);const getFocusableElements=React.useCallback(()=>{return findFocusableNodes(document)},[]);const getReferenceIndex=React.useCallback(()=>{if(!referenceElement){return -1}return focusableElementsRef.current.indexOf(referenceElement)},[referenceElement]);const getNextFocusableElement=React.useCallback(()=>{const referenceIndex=getReferenceIndex();if(referenceIndex>=0){const nextElementIndex=referenceIndex<focusableElementsRef.current.length-1?referenceIndex+1:0;return focusableElementsRef.current[nextElementIndex]}return undefined},[getReferenceIndex]);React.useEffect(()=>{focusableElementsRef.current=getFocusableElements();nextFocusableElementRef.current=getNextFocusableElement();const handleKeydownReferenceElement=e=>{if(e.key==="Tab"&&!e.shiftKey){e.preventDefault();focusableElementsInsideRef.current[0]?.focus();}};const handleKeydownNextFocusableElement=e=>{if(e.key==="Tab"&&e.shiftKey){e.preventDefault();const lastIndex=focusableElementsInsideRef.current.length-1;focusableElementsInsideRef.current[lastIndex]?.focus();}};if(referenceElement){referenceElement.addEventListener("keydown",handleKeydownReferenceElement,true);}if(nextFocusableElementRef.current){nextFocusableElementRef.current.addEventListener("keydown",handleKeydownNextFocusableElement,true);}return ()=>{if(referenceElement){referenceElement.removeEventListener("keydown",handleKeydownReferenceElement,true);}if(nextFocusableElementRef.current){nextFocusableElementRef.current.removeEventListener("keydown",handleKeydownNextFocusableElement,true);}}},[referenceElement,getNextFocusableElement,getFocusableElements]);const setComponentRootNode=React.useCallback(node=>{if(!node){return}rootNodeRef.current=node;focusableElementsInsideRef.current=findFocusableNodes(node);},[]);const handleFocusPreviousFocusableElement=React.useCallback(()=>{if(referenceElement){referenceElement.focus();}if(onStartFocused){onStartFocused();}},[referenceElement,onStartFocused]);const handleFocusNextFocusableElement=React.useCallback(()=>{if(nextFocusableElementRef.current){nextFocusableElementRef.current.focus();}if(onEndFocused){onEndFocused();}},[onEndFocused]);return jsxs(React.Fragment,{children:[jsx("div",{tabIndex:0,"data-testid":"focus-sentinel-prev",onFocus:handleFocusPreviousFocusableElement,style:{position:"fixed"}}),jsx("div",{"data-testid":"date-picker-overlay",ref:setComponentRootNode,children:children}),jsx("div",{tabIndex:0,"data-testid":"focus-sentinel-next",onFocus:handleFocusNextFocusableElement,style:{position:"fixed"}})]})}
+
+const DEFAULT_STYLE={background:semanticColor.core.background.base.default,borderRadius:border.radius.radius_040,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:boxShadow.mid};const BASE_CONTAINER_STYLES={fontFamily:font.family.sans,padding:sizing.size_100};const OUT_OF_BOUNDARIES_STYLES={pointerEvents:"none",visibility:"hidden"};const DatePickerOverlay=({children,referenceElement,onClose,style=DEFAULT_STYLE})=>{if(!referenceElement){return null}const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return createPortal(jsx(FocusManager,{referenceElement:referenceElement,onEndFocused:onClose,children:jsx(Popper,{referenceElement:referenceElement,placement:"bottom-start",strategy:"fixed",modifiers:[{name:"preventOverflow",options:{rootBoundary:"viewport"}}],children:({placement,ref,style:popperStyle,isReferenceHidden,hasPopperEscaped})=>{const isTestEnvironment=typeof window!=="undefined"&&window.navigator.userAgent.includes("jsdom");const outOfBoundaries=!isTestEnvironment&&(isReferenceHidden||hasPopperEscaped);const combinedStyles={...BASE_CONTAINER_STYLES,...popperStyle,...style,...outOfBoundaries&&OUT_OF_BOUNDARIES_STYLES};return jsx("div",{ref:ref,style:combinedStyles,"data-placement":placement,children:children})}})}),modalHost)};
+
+const customRootStyle={"--rdp-accent-color":semanticColor.core.border.instructive.default};const DatePicker=props=>{const{locale,updateDate,dateFormat,disabled,id,maxDate,minDate,inputAriaLabel,placeholder,selectedDate,style,closeOnSelect=true,footer}=props;const[showOverlay,setShowOverlay]=React.useState(false);const[currentDate,setCurrentDate]=React.useState(selectedDate);const datePickerInputRef=React.useRef(null);const datePickerRef=React.useRef(null);const refWrapper=React.useRef(null);const open=React.useCallback(()=>{if(!disabled){setShowOverlay(true);}},[disabled]);const close=React.useCallback(()=>setShowOverlay(false),[]);const computedLocale=locale??enUS;const dir=refWrapper.current?.closest("[dir]")?.getAttribute("dir")||"ltr";React.useEffect(()=>{setCurrentDate(selectedDate);},[selectedDate]);React.useEffect(()=>{const handleClick=e=>{const target=e.target;const thisElement=refWrapper.current;const dayPickerCalendar=datePickerRef.current;if(showOverlay&&closeOnSelect&&thisElement&&!thisElement.contains(target)&&dayPickerCalendar&&!dayPickerCalendar.contains(target)){setShowOverlay(false);}};document.addEventListener("mouseup",handleClick);return ()=>{document.removeEventListener("mouseup",handleClick);}},[showOverlay,closeOnSelect]);const isLeavingDropdown=e=>{const dayPickerCalendar=datePickerRef.current;if(!dayPickerCalendar){return true}if(e.relatedTarget instanceof Node){return !dayPickerCalendar.contains(e.relatedTarget)}return true};const handleInputBlur=e=>{if(isLeavingDropdown(e)){close();}};const handleInputChange=(selectedDate,modifiers)=>{if(!selectedDate||modifiers.disabled){return}const wrappedDate=TemporalLocaleUtils.jsDateToTemporalDate(selectedDate);setCurrentDate(wrappedDate);updateDate(wrappedDate);};const handleKeyDown=e=>{if(e.key==="Escape"){close();datePickerInputRef.current?.focus();}};const RootWithEsc=props=>{const{onKeyDown,rootRef:_,...rest}=props;return jsx("div",{...rest,tabIndex:-1,onKeyDown:e=>{onKeyDown?.(e);if(e.key==="Escape"){close();datePickerInputRef.current?.focus();}}})};const handleDayClick=(date,{disabled,selected})=>{if(disabled||!date){return}datePickerInputRef.current?.focus();const wrappedDate=TemporalLocaleUtils.jsDateToTemporalDate(date);setCurrentDate(selected?undefined:wrappedDate);setShowOverlay(!closeOnSelect);updateDate(wrappedDate);};const renderInput=modifiers=>{const selectedDateAsValue=currentDate?TemporalLocaleUtils.formatDate(currentDate,dateFormat,enUSLocaleCode):"";return jsx(DatePickerInput,{onBlur:handleInputBlur,onFocus:open,onClick:open,onChange:handleInputChange,onKeyDown:handleKeyDown,"aria-label":inputAriaLabel,disabled:disabled,id:id,placeholder:placeholder,value:selectedDateAsValue,ref:datePickerInputRef,dateFormat:dateFormat,locale:computedLocale.code,parseDate:TemporalLocaleUtils.parseDateToJsDate,modifiers:modifiers,testId:id&&`${id}-input`})};const maybeRenderFooter=()=>{if(!footer){return null}return jsx(View,{testId:"date-picker-footer",style:styles.footer,children:footer({close})})};const selectedDateValue=currentDate?TemporalLocaleUtils.temporalDateToJsDate(currentDate):undefined;const minDateToShow=minDate&&selectedDateValue?Temporal.PlainDate.compare(minDate,currentDate)<0?TemporalLocaleUtils.temporalDateToJsDate(minDate):selectedDateValue:minDate?TemporalLocaleUtils.temporalDateToJsDate(minDate):undefined;const modifiers={selected:selectedDateValue,disabled:date=>{const temporalDate=TemporalLocaleUtils.jsDateToTemporalDate(date);return minDate&&Temporal.PlainDate.compare(temporalDate,minDate)<0||maxDate&&Temporal.PlainDate.compare(temporalDate,maxDate)>0||false}};return jsxs(View,{style:[styles.wrapper,style],ref:refWrapper,children:[renderInput(modifiers),showOverlay&&jsx(DatePickerOverlay,{referenceElement:datePickerInputRef.current,onClose:close,children:jsxs(View,{ref:datePickerRef,children:[jsx(DayPicker,{defaultMonth:selectedDateValue??undefined,startMonth:minDateToShow??undefined,endMonth:maxDate?TemporalLocaleUtils.temporalDateToJsDate(maxDate):undefined,modifiers:modifiers,onDayClick:handleDayClick,components:{Root:RootWithEsc},locale:computedLocale,dir:dir,styles:{root:{...customRootStyle},nav:{width:"auto"}}}),maybeRenderFooter()]})})]})};DatePicker.defaultProps={closeOnSelect:true};const styles=StyleSheet.create({wrapper:{width:225,height:40},footer:{margin:sizing.size_120,marginBlockStart:0}});
+
+export { DatePicker, TemporalLocaleUtils };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from "./components/date-picker";
+import { TemporalLocaleUtils } from "./util/temporal-locale-utils";
+import type { CustomModifiers } from "./util/types";
+export { DatePicker, TemporalLocaleUtils, type CustomModifiers };

package/dist/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var aphrodite = require('aphrodite');
+var temporalPolyfill = require('temporal-polyfill');
+var React = require('react');
+var reactDayPicker = require('react-day-picker');
+var locale = require('react-day-picker/locale');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
+var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
+var calendarIcon = require('@phosphor-icons/core/bold/calendar-blank-bold.svg');
+var reactDom = require('react-dom');
+var reactPopper = require('react-popper');
+var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
+require('react-day-picker/style.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var calendarIcon__default = /*#__PURE__*/_interopDefaultLegacy(calendarIcon);
+
+const enUSLocaleCode="en-US";function formatDate(date,format,locale=enUSLocaleCode){const formatString=Array.isArray(format)?format[0]:format;if(!formatString){return date.toString()}if(formatString==="YYYY-MM-DD"){return date.toString()}try{const options=getOptionsForFormat(formatString);return date.toLocaleString(locale,options)}catch(error){console.warn(`Failed to format date with format "${formatString}" and locale "${locale}". Falling back to ISO format.`,error);return date.toString()}}function parseDate(str,format,locale){if(!str||str.trim()===""){return undefined}const formats=Array.isArray(format)?format:[format||"YYYY-MM-DD"];try{return temporalPolyfill.Temporal.PlainDate.from(str)}catch{}for(const fmt of formats){try{const parsed=parseWithFormat(str,fmt,locale);if(parsed){return parsed}}catch{continue}}return undefined}const getModifiersForDay=(day,modifiers)=>{const matchedModifiers=[];for(const[modifierName,matcher]of Object.entries(modifiers)){if(!matcher){continue}if(typeof matcher==="function"){if(matcher(day)){matchedModifiers.push(modifierName);}}else if(matcher instanceof Date){if(day.getFullYear()===matcher.getFullYear()&&day.getMonth()===matcher.getMonth()&&day.getDate()===matcher.getDate()){matchedModifiers.push(modifierName);}}}return matchedModifiers};function temporalDateToJsDate(date){return new Date(date.year,date.month-1,date.day)}function jsDateToTemporalDate(date){return temporalPolyfill.Temporal.PlainDate.from({year:date.getFullYear(),month:date.getMonth()+1,day:date.getDate()})}function parseDateToJsDate(value,format,locale){if(value instanceof Date){return value}const temporalDate=parseDate(value,format,locale||undefined);return temporalDate?temporalDateToJsDate(temporalDate):undefined}function getMonths(locale){const format=new Intl.DateTimeFormat(locale||enUSLocaleCode,{month:"long"});const formatShort=new Intl.DateTimeFormat(locale||enUSLocaleCode,{month:"short"});const months=[];for(let i=0;i<12;i++){const date=new Date(2021,i,15);months.push([format.format(date),formatShort.format(date)]);}return months}function getOptionsForFormat(format){const options={};if(format.includes("YYYY")){options.year="numeric";}else if(format.includes("YY")){options.year="2-digit";}if(format.includes("MMMM")){options.month="long";}else if(format.includes("MMM")){options.month="short";}else if(format.includes("MM")){options.month="2-digit";}else if(format.includes("M")){options.month="numeric";}if(format.includes("DD")){options.day="2-digit";}else if(format.includes("D")){options.day="numeric";}if(format.includes("dddd")){options.weekday="long";}else if(format.includes("ddd")){options.weekday="short";}return options}function parseWithFormat(str,format,locale){if(!format){return undefined}if(format==="M/D/YYYY"||format==="M-D-YYYY"||format==="MM/DD/YYYY"||format==="MM-DD-YYYY"){const separator=format.includes("/")?"/":"-";const parts=str.split(separator);if(parts.length===3){try{return temporalPolyfill.Temporal.PlainDate.from({year:parseInt(parts[2],10),month:parseInt(parts[0],10),day:parseInt(parts[1],10)})}catch{return undefined}}}if(format==="MMMM D, YYYY"||format==="MMM D, YYYY"){try{const cleaned=str.trim();const localeStr=locale||enUSLocaleCode;const jsDate=new Date(cleaned);if(!isNaN(jsDate.getTime())){return jsDateToTemporalDate(jsDate)}const parts=cleaned.split(",");if(parts.length===2){const[monthDay,yearStr]=parts;const year=parseInt(yearStr.trim(),10);const months=getMonths(localeStr).map(m=>m[0]);const monthDayParts=monthDay.trim().split(" ");if(monthDayParts.length===2){const monthName=monthDayParts[0];const day=parseInt(monthDayParts[1],10);const monthIndex=months.findIndex(m=>m.toLowerCase()===monthName.toLowerCase()||m.slice(0,3).toLowerCase()===monthName.toLowerCase());if(monthIndex>=0&&!isNaN(day)&&!isNaN(year)){return temporalPolyfill.Temporal.PlainDate.from({year,month:monthIndex+1,day})}}}}catch{return undefined}}return undefined}const startOfIsoWeek=date=>{const dayOfWeek=date.dayOfWeek;return date.subtract({days:dayOfWeek-1})};const startOfDay=date=>{const result=new Date(date);result.setHours(0,0,0,0);return result};const endOfDay=date=>{const result=new Date(date);result.setHours(23,59,59,999);return result};const TemporalLocaleUtils={formatDate,parseDate,parseDateToJsDate,startOfIsoWeek,startOfDay,endOfDay,temporalDateToJsDate,jsDateToTemporalDate,getModifiersForDay};
+
+const DatePickerInput=React__namespace.forwardRef((props,ref)=>{const{value:propValue,onBlur,onClick,onFocus,onKeyDown,onChange,dateFormat,locale=enUSLocaleCode,modifiers,getModifiersForDay,parseDate,placeholder,testId,["aria-label"]:ariaLabel,...restProps}=props;const[value,setValue]=React__namespace.useState(propValue);const processModifiers=React__namespace.useCallback((date,value)=>{if(!getModifiersForDay||!modifiers){return {}}return getModifiersForDay(date,modifiers).reduce((obj,modifier)=>({...obj,[modifier]:true}),{})},[getModifiersForDay,modifiers]);const updateDate=React__namespace.useCallback((date,value)=>{if(onChange){onChange(date,processModifiers(date,value));}},[onChange,processModifiers]);const updateDateAsInvalid=React__namespace.useCallback(()=>{if(onChange){onChange(null,{});}},[onChange]);const processDate=React__namespace.useCallback(inputValue=>{if(!inputValue||inputValue.trim()===""){return}if(!parseDate){return}const date=parseDate(inputValue,dateFormat,locale);if(!date){return}return date},[parseDate,dateFormat,locale]);const maybeUpdateDate=React__namespace.useCallback(inputValue=>{const date=processDate(inputValue);if(date){updateDate(date,inputValue);}else {updateDateAsInvalid();}},[processDate,updateDate,updateDateAsInvalid]);const isValid=React__namespace.useCallback(()=>{const date=processDate(value);if(!date){return false}const modifiersResult=processModifiers(date,value);if(modifiersResult.disabled){return false}return true},[value,processDate,processModifiers]);React__namespace.useEffect(()=>{setValue(propValue);},[propValue]);wonderBlocksCore.useOnMountEffect(()=>{if(!isValid()){updateDateAsInvalid();}});const handleBlur=e=>{if(!isValid()){setValue(propValue);}if(onBlur){onBlur(e);}};const handleChange=newValue=>{maybeUpdateDate(newValue);setValue(newValue);};return jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles$1.container,onClick:e=>{if(!restProps.disabled&&onClick){onClick(e);}},children:[jsxRuntime.jsx(wonderBlocksForm.TextField,{ref:ref,...restProps,onBlur:handleBlur,onFocus:onFocus,onKeyDown:onKeyDown,onChange:handleChange,disabled:restProps.disabled,placeholder:placeholder,value:value??"",testId:testId,"aria-label":ariaLabel,autoComplete:"off",type:"text",style:styles$1.textField}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:calendarIcon__default["default"],color:restProps.disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,size:"small",style:styles$1.icon})]})});const styles$1=aphrodite.StyleSheet.create({container:{alignItems:"center",flexDirection:"row",justifyContent:"stretch"},icon:{pointerEvents:"none",position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_080},textField:{width:"100%"}});
+
+function FocusManager(props){const{children,referenceElement,onStartFocused,onEndFocused}=props;const rootNodeRef=React__namespace.useRef(null);const focusableElementsRef=React__namespace.useRef([]);const focusableElementsInsideRef=React__namespace.useRef([]);const nextFocusableElementRef=React__namespace.useRef(null);const getFocusableElements=React__namespace.useCallback(()=>{return wonderBlocksCore.findFocusableNodes(document)},[]);const getReferenceIndex=React__namespace.useCallback(()=>{if(!referenceElement){return -1}return focusableElementsRef.current.indexOf(referenceElement)},[referenceElement]);const getNextFocusableElement=React__namespace.useCallback(()=>{const referenceIndex=getReferenceIndex();if(referenceIndex>=0){const nextElementIndex=referenceIndex<focusableElementsRef.current.length-1?referenceIndex+1:0;return focusableElementsRef.current[nextElementIndex]}return undefined},[getReferenceIndex]);React__namespace.useEffect(()=>{focusableElementsRef.current=getFocusableElements();nextFocusableElementRef.current=getNextFocusableElement();const handleKeydownReferenceElement=e=>{if(e.key==="Tab"&&!e.shiftKey){e.preventDefault();focusableElementsInsideRef.current[0]?.focus();}};const handleKeydownNextFocusableElement=e=>{if(e.key==="Tab"&&e.shiftKey){e.preventDefault();const lastIndex=focusableElementsInsideRef.current.length-1;focusableElementsInsideRef.current[lastIndex]?.focus();}};if(referenceElement){referenceElement.addEventListener("keydown",handleKeydownReferenceElement,true);}if(nextFocusableElementRef.current){nextFocusableElementRef.current.addEventListener("keydown",handleKeydownNextFocusableElement,true);}return ()=>{if(referenceElement){referenceElement.removeEventListener("keydown",handleKeydownReferenceElement,true);}if(nextFocusableElementRef.current){nextFocusableElementRef.current.removeEventListener("keydown",handleKeydownNextFocusableElement,true);}}},[referenceElement,getNextFocusableElement,getFocusableElements]);const setComponentRootNode=React__namespace.useCallback(node=>{if(!node){return}rootNodeRef.current=node;focusableElementsInsideRef.current=wonderBlocksCore.findFocusableNodes(node);},[]);const handleFocusPreviousFocusableElement=React__namespace.useCallback(()=>{if(referenceElement){referenceElement.focus();}if(onStartFocused){onStartFocused();}},[referenceElement,onStartFocused]);const handleFocusNextFocusableElement=React__namespace.useCallback(()=>{if(nextFocusableElementRef.current){nextFocusableElementRef.current.focus();}if(onEndFocused){onEndFocused();}},[onEndFocused]);return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx("div",{tabIndex:0,"data-testid":"focus-sentinel-prev",onFocus:handleFocusPreviousFocusableElement,style:{position:"fixed"}}),jsxRuntime.jsx("div",{"data-testid":"date-picker-overlay",ref:setComponentRootNode,children:children}),jsxRuntime.jsx("div",{tabIndex:0,"data-testid":"focus-sentinel-next",onFocus:handleFocusNextFocusableElement,style:{position:"fixed"}})]})}
+
+const DEFAULT_STYLE={background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:wonderBlocksTokens.boxShadow.mid};const BASE_CONTAINER_STYLES={fontFamily:wonderBlocksTokens.font.family.sans,padding:wonderBlocksTokens.sizing.size_100};const OUT_OF_BOUNDARIES_STYLES={pointerEvents:"none",visibility:"hidden"};const DatePickerOverlay=({children,referenceElement,onClose,style=DEFAULT_STYLE})=>{if(!referenceElement){return null}const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return reactDom.createPortal(jsxRuntime.jsx(FocusManager,{referenceElement:referenceElement,onEndFocused:onClose,children:jsxRuntime.jsx(reactPopper.Popper,{referenceElement:referenceElement,placement:"bottom-start",strategy:"fixed",modifiers:[{name:"preventOverflow",options:{rootBoundary:"viewport"}}],children:({placement,ref,style:popperStyle,isReferenceHidden,hasPopperEscaped})=>{const isTestEnvironment=typeof window!=="undefined"&&window.navigator.userAgent.includes("jsdom");const outOfBoundaries=!isTestEnvironment&&(isReferenceHidden||hasPopperEscaped);const combinedStyles={...BASE_CONTAINER_STYLES,...popperStyle,...style,...outOfBoundaries&&OUT_OF_BOUNDARIES_STYLES};return jsxRuntime.jsx("div",{ref:ref,style:combinedStyles,"data-placement":placement,children:children})}})}),modalHost)};
+
+const customRootStyle={"--rdp-accent-color":wonderBlocksTokens.semanticColor.core.border.instructive.default};const DatePicker=props=>{const{locale: locale$1,updateDate,dateFormat,disabled,id,maxDate,minDate,inputAriaLabel,placeholder,selectedDate,style,closeOnSelect=true,footer}=props;const[showOverlay,setShowOverlay]=React__namespace.useState(false);const[currentDate,setCurrentDate]=React__namespace.useState(selectedDate);const datePickerInputRef=React__namespace.useRef(null);const datePickerRef=React__namespace.useRef(null);const refWrapper=React__namespace.useRef(null);const open=React__namespace.useCallback(()=>{if(!disabled){setShowOverlay(true);}},[disabled]);const close=React__namespace.useCallback(()=>setShowOverlay(false),[]);const computedLocale=locale$1??locale.enUS;const dir=refWrapper.current?.closest("[dir]")?.getAttribute("dir")||"ltr";React__namespace.useEffect(()=>{setCurrentDate(selectedDate);},[selectedDate]);React__namespace.useEffect(()=>{const handleClick=e=>{const target=e.target;const thisElement=refWrapper.current;const dayPickerCalendar=datePickerRef.current;if(showOverlay&&closeOnSelect&&thisElement&&!thisElement.contains(target)&&dayPickerCalendar&&!dayPickerCalendar.contains(target)){setShowOverlay(false);}};document.addEventListener("mouseup",handleClick);return ()=>{document.removeEventListener("mouseup",handleClick);}},[showOverlay,closeOnSelect]);const isLeavingDropdown=e=>{const dayPickerCalendar=datePickerRef.current;if(!dayPickerCalendar){return true}if(e.relatedTarget instanceof Node){return !dayPickerCalendar.contains(e.relatedTarget)}return true};const handleInputBlur=e=>{if(isLeavingDropdown(e)){close();}};const handleInputChange=(selectedDate,modifiers)=>{if(!selectedDate||modifiers.disabled){return}const wrappedDate=TemporalLocaleUtils.jsDateToTemporalDate(selectedDate);setCurrentDate(wrappedDate);updateDate(wrappedDate);};const handleKeyDown=e=>{if(e.key==="Escape"){close();datePickerInputRef.current?.focus();}};const RootWithEsc=props=>{const{onKeyDown,rootRef:_,...rest}=props;return jsxRuntime.jsx("div",{...rest,tabIndex:-1,onKeyDown:e=>{onKeyDown?.(e);if(e.key==="Escape"){close();datePickerInputRef.current?.focus();}}})};const handleDayClick=(date,{disabled,selected})=>{if(disabled||!date){return}datePickerInputRef.current?.focus();const wrappedDate=TemporalLocaleUtils.jsDateToTemporalDate(date);setCurrentDate(selected?undefined:wrappedDate);setShowOverlay(!closeOnSelect);updateDate(wrappedDate);};const renderInput=modifiers=>{const selectedDateAsValue=currentDate?TemporalLocaleUtils.formatDate(currentDate,dateFormat,enUSLocaleCode):"";return jsxRuntime.jsx(DatePickerInput,{onBlur:handleInputBlur,onFocus:open,onClick:open,onChange:handleInputChange,onKeyDown:handleKeyDown,"aria-label":inputAriaLabel,disabled:disabled,id:id,placeholder:placeholder,value:selectedDateAsValue,ref:datePickerInputRef,dateFormat:dateFormat,locale:computedLocale.code,parseDate:TemporalLocaleUtils.parseDateToJsDate,modifiers:modifiers,testId:id&&`${id}-input`})};const maybeRenderFooter=()=>{if(!footer){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{testId:"date-picker-footer",style:styles.footer,children:footer({close})})};const selectedDateValue=currentDate?TemporalLocaleUtils.temporalDateToJsDate(currentDate):undefined;const minDateToShow=minDate&&selectedDateValue?temporalPolyfill.Temporal.PlainDate.compare(minDate,currentDate)<0?TemporalLocaleUtils.temporalDateToJsDate(minDate):selectedDateValue:minDate?TemporalLocaleUtils.temporalDateToJsDate(minDate):undefined;const modifiers={selected:selectedDateValue,disabled:date=>{const temporalDate=TemporalLocaleUtils.jsDateToTemporalDate(date);return minDate&&temporalPolyfill.Temporal.PlainDate.compare(temporalDate,minDate)<0||maxDate&&temporalPolyfill.Temporal.PlainDate.compare(temporalDate,maxDate)>0||false}};return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.wrapper,style],ref:refWrapper,children:[renderInput(modifiers),showOverlay&&jsxRuntime.jsx(DatePickerOverlay,{referenceElement:datePickerInputRef.current,onClose:close,children:jsxRuntime.jsxs(wonderBlocksCore.View,{ref:datePickerRef,children:[jsxRuntime.jsx(reactDayPicker.DayPicker,{defaultMonth:selectedDateValue??undefined,startMonth:minDateToShow??undefined,endMonth:maxDate?TemporalLocaleUtils.temporalDateToJsDate(maxDate):undefined,modifiers:modifiers,onDayClick:handleDayClick,components:{Root:RootWithEsc},locale:computedLocale,dir:dir,styles:{root:{...customRootStyle},nav:{width:"auto"}}}),maybeRenderFooter()]})})]})};DatePicker.defaultProps={closeOnSelect:true};const styles=aphrodite.StyleSheet.create({wrapper:{width:225,height:40},footer:{margin:wonderBlocksTokens.sizing.size_120,marginBlockStart:0}});
+
+exports.DatePicker = DatePicker;
+exports.TemporalLocaleUtils = TemporalLocaleUtils;

package/dist/util/temporal-locale-utils.d.ts

@@ -0,0 +1,92 @@
+import { Temporal } from "temporal-polyfill";
+import { CustomModifiers } from "./types";
+export declare const enUSLocaleCode = "en-US";
+/**
+ * Utility functions for working with Temporal dates in react-day-picker.
+ * These replace the MomentLocaleUtils that were previously used.
+ *
+ * Question: Should we move this to a separate package?
+ */
+/**
+ * Format a Temporal.PlainDate using a format string.
+ * Supports a subset of moment.js format tokens for compatibility.
+ *
+ * @param date - The Temporal.PlainDate to format
+ * @param format - The format string(s) to use for formatting:
+ *   - **string**: Uses the specified format (e.g., "YYYY-MM-DD", "MMM D, YYYY")
+ *   - **Array<string>**: Uses the **first** format in the array (ignores the rest)
+ *   - **null**: Returns ISO 8601 format (YYYY-MM-DD)
+ *   - **undefined**: Returns ISO 8601 format (YYYY-MM-DD)
+ * @param locale - The locale to use for formatting (default: "en-US")
+ * @returns The formatted date string
+ *
+ * @example
+ * formatDate(date, "YYYY-MM-DD", "en-US") // => "2024-01-15"
+ * formatDate(date, ["MMM D, YYYY", "M/D/YYYY"], "en-US") // => "Jan 15, 2024" (uses first format)
+ * formatDate(date, null, "en-US") // => "2024-01-15" (ISO format)
+ * formatDate(date, undefined, "en-US") // => "2024-01-15" (ISO format)
+ * formatDate(date, "MMM D", "invalid-locale") // => "2024-01-15" (falls back to ISO on error)
+ *
+ * @remarks
+ * If formatting fails (e.g., invalid locale, unsupported format), the function
+ * automatically falls back to ISO 8601 format and logs a warning to the console.
+ * This ensures the function never throws errors and always returns a valid date string.
+ */
+export declare function formatDate(date: Temporal.PlainDate, format: string | Array<string> | null | undefined, locale?: string): string;
+/**
+ * Parse a date string into a Temporal.PlainDate.
+ * Attempts multiple formats if an array is provided.
+ */
+export declare function parseDate(str: string, format: string | Array<string> | null | undefined, locale?: string): Temporal.PlainDate | undefined;
+export declare const getModifiersForDay: (day: Date, modifiers: Partial<CustomModifiers>) => Array<string>;
+/**
+ * Convert a Temporal.PlainDate to a JavaScript Date object.
+ * Sets the time to midnight in the local timezone.
+ */
+export declare function temporalDateToJsDate(date: Temporal.PlainDate): Date;
+/**
+ * Convert a JavaScript Date to a Temporal.PlainDate.
+ * Uses local date components (not UTC).
+ */
+export declare function jsDateToTemporalDate(date: Date): Temporal.PlainDate;
+/**
+ * Parse a date string and return a JavaScript Date.
+ * This is a convenience wrapper around parseDate that converts the result
+ * to a Date object for compatibility with react-day-picker.
+ * If a Date is passed in, it's returned as-is.
+ */
+export declare function parseDateToJsDate(value: string | Date, format: string | Array<string> | null | undefined, locale?: string | null | undefined): Date | null | undefined;
+/**
+ * Get the start of the ISO week (Monday) for a given date.
+ * ISO weeks start on Monday (dayOfWeek = 1) and end on Sunday (dayOfWeek = 7).
+ */
+export declare const startOfIsoWeek: (date: Temporal.PlainDate) => Temporal.PlainDate;
+/**
+ * Get the start of day (00:00:00.000) for a given JS Date.
+ * Returns a new Date object; does not mutate the original.
+ */
+export declare const startOfDay: (date: Date) => Date;
+/**
+ * Get the end of day (23:59:59.999) for a given JS Date.
+ * Returns a new Date object; does not mutate the original.
+ */
+export declare const endOfDay: (date: Date) => Date;
+/**
+ * Utility functions for working with Temporal dates.
+ *
+ * NOTE: Locale-specific utilities (getMonths, getWeekdaysLong, etc.) were
+ * removed as they are no longer needed for react-day-picker v9. These may
+ * be added to a shared wonder-blocks-dates package in a future update to
+ * support both DatePicker and BirthdayPicker.
+ */
+export declare const TemporalLocaleUtils: {
+    formatDate: typeof formatDate;
+    parseDate: typeof parseDate;
+    parseDateToJsDate: typeof parseDateToJsDate;
+    startOfIsoWeek: (date: Temporal.PlainDate) => Temporal.PlainDate;
+    startOfDay: (date: Date) => Date;
+    endOfDay: (date: Date) => Date;
+    temporalDateToJsDate: typeof temporalDateToJsDate;
+    jsDateToTemporalDate: typeof jsDateToTemporalDate;
+    getModifiersForDay: (day: Date, modifiers: Partial<CustomModifiers>) => Array<string>;
+};

package/dist/util/types.d.ts

@@ -0,0 +1,2 @@
+import { type Matcher } from "react-day-picker";
+export type CustomModifiers = Record<string, Matcher | Matcher[]>;

package/package.json

@@ -1,21 +1,53 @@
 {
-    "name": "@khanacademy/wonder-blocks-date-picker",
-    "description": "Placeholder package for @khanacademy/wonder-blocks-date-picker",
-    "author": "Khan Academy <opensource+npm@khanacademy.org>",
-    "license": "MIT",
-    "version": "0.0.1",
-    "publishConfig": {
-        "access": "public"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Khan/wonder-blocks.git",
-        "directory": "packages/wonder-blocks-date-picker"
-    },
-    "bugs": {
-        "url": "https://github.com/Khan/wonder-blocks/issues"
-    },
-    "module": "index.js",
-    "main": "index.js"
-}
-
+  "name": "@khanacademy/wonder-blocks-date-picker",
+  "description": "Date picker component for Wonder Blocks.",
+  "author": "Khan Academy",
+  "license": "MIT",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "design": "v1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Khan/wonder-blocks.git",
+    "directory": "packages/wonder-blocks-date-picker"
+  },
+  "bugs": {
+    "url": "https://github.com/Khan/wonder-blocks/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "react-day-picker": "^9.11.1",
+    "@khanacademy/wonder-blocks-core": "12.4.3",
+    "@khanacademy/wonder-blocks-form": "7.5.2",
+    "@khanacademy/wonder-blocks-icon": "5.3.6",
+    "@khanacademy/wonder-blocks-modal": "8.5.13",
+    "@khanacademy/wonder-blocks-styles": "0.2.37",
+    "@khanacademy/wonder-blocks-tokens": "14.1.3"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/core": "^2.0.2",
+    "@popperjs/core": "^2.10.1",
+    "aphrodite": "^1.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-popper": "^2.3.0",
+    "temporal-polyfill": "^0.3.0"
+  },
+  "devDependencies": {
+    "@khanacademy/wb-dev-build-settings": "3.3.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/README.md

@@ -1,4 +0,0 @@
-This package is being published as a placeholder for the 
-@khanacademy/wonder-blocks-date-picker library. This will enable 
-us to configure Trusted Publishing (which can't be enabled 
-until the package has been published at least once).