@khanacademy/wonder-blocks-birthday-picker 4.1.69 → 4.1.71

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 4.1.71
+
+### Patch Changes
+
+- @khanacademy/wonder-blocks-dropdown@10.13.2
+
+## 4.1.70
+
+### Patch Changes
+
+- 0600a87: Convert `BirthdayPicker` from a class component to a functional component
+- Updated dependencies [4421914]
+    - @khanacademy/wonder-blocks-dropdown@10.13.1
+
 ## 4.1.69
 
 ### Patch Changes

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

@@ -1,4 +1,3 @@
-import { Temporal } from "temporal-polyfill";
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 export type Labels = {
@@ -65,70 +64,6 @@ type Props = {
      */
     locale?: string;
 };
-type State = {
-    /**
-     * The currently selected month.
-     */
-    month: string | null;
-    /**
-     * The currently selected day.
-     */
-    day: string | null;
-    /**
-     * The currently selected year.
-     */
-    year: string | null;
-    /**
-     * The error message to display (in case there's an invalid date).
-     */
-    error: string | null;
-};
 export declare const defaultLabels: Labels;
-export default class BirthdayPicker extends React.Component<Props, State> {
-    /**
-     * Strings used for placeholders and error message. These are used this way
-     * to support i18n.
-     * NOTE: This is a field rather than state to avoid re-rendering the entire
-     * component. Also, we don't need to use state because these strings are
-     * only needed on mount.
-     */
-    labels: Labels;
-    constructor(props: Props);
-    /**
-     * Calculates the initial state values based on the default value.
-     */
-    getStateFromDefault(): State;
-    /**
-     * Determines whether a given date is in the future.
-     *
-     * @param date - The Temporal.PlainDate to check.
-     * @returns True if the provided date comes after today's date, false otherwise.
-     */
-    isFutureDate(date: Temporal.PlainDate): boolean;
-    lastChangeValue: string | null | undefined;
-    /**
-     * Report changes back to the calling component, but only if the value
-     * has actually changed since the last time it was reported
-     * (or initialized).
-     *
-     * @param value the value to report back to the calling component.
-     */
-    reportChange: (value?: string | null | undefined) => void;
-    /**
-     * Handle a change to any of the input fields, confirming if the input is
-     * valid, and then reporting the result back to the calling component via
-     * reportChange.
-     */
-    handleChange: () => void;
-    handleMonthChange: (month: string) => void;
-    handleDayChange: (day: string) => void;
-    handleYearChange: (year: string) => void;
-    maybeRenderError(): React.ReactNode | null | undefined;
-    monthsShort(): string[];
-    renderMonth(): React.ReactNode;
-    maybeRenderDay(): React.ReactNode | null | undefined;
-    getMonthYearWidth(monthYearOnly: boolean | undefined): number;
-    renderYear(): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare const BirthdayPicker: (props: Props) => React.JSX.Element;
+export default BirthdayPicker;

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Temporal } from 'temporal-polyfill';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
@@ -9,6 +9,6 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import infoIcon from '@phosphor-icons/core/bold/info-bold.svg';
 
-const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=StyleSheet.create({wrapper:{flexDirection:"row",gap:sizing.size_080,[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minInlineSize:"100%"}},errorRow:{flexDirection:"row",placeItems:"center",gap:sizing.size_040,marginBlockStart:sizing.size_040},errorText:{color:semanticColor.core.foreground.critical.default}});class BirthdayPicker extends React.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return Temporal.PlainDate.compare(date,Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxs(View,{style:defaultStyles.errorRow,role:"alert",children:[jsx(PhosphorIcon,{size:"small",icon:infoIcon,color:semanticColor.core.foreground.critical.default,"aria-hidden":"true"}),jsx(BodyText,{tag:"span",style:defaultStyles.errorText,children:error})]})}monthsShort(){const format=new Intl.DateTimeFormat(this.props.locale??navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))}renderMonth(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsx(OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsx(SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minInlineSize:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsx(OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsx(OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxs(Fragment,{children:[jsxs(View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}let date;try{if(monthYearOnly){date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){this.setState({error:this.labels.errorMessage});this.reportChange(null);return}if(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
+const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=StyleSheet.create({wrapper:{flexDirection:"row",gap:sizing.size_080,[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minInlineSize:"100%"}},errorRow:{flexDirection:"row",placeItems:"center",gap:sizing.size_040,marginBlockStart:sizing.size_040},errorText:{color:semanticColor.core.foreground.critical.default}});const isFutureDate=date=>{return Temporal.PlainDate.compare(date,Temporal.Now.plainDateISO())===1};const getStateFromDefault=(defaultValue,monthYearOnly,labels)=>{const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};if(defaultValue){let date=null;try{date=Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(isFutureDate(date)){initialState.error=labels.errorMessage;}}return initialState};const getMonthYearWidth=monthYearOnly=>{return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL};const BirthdayPicker=props=>{const{defaultValue,disabled,dropdownStyle,locale,monthYearOnly,onChange,style}=props;const labelsRef=React.useRef({...defaultLabels,...props.labels});const labels=labelsRef.current;const[initialState]=React.useState(()=>getStateFromDefault(defaultValue,monthYearOnly,labels));const[month,setMonth]=React.useState(initialState.month);const[day,setDay]=React.useState(initialState.day);const[year,setYear]=React.useState(initialState.year);const[error,setError]=React.useState(initialState.error);const valuesRef=React.useRef({month:initialState.month,day:initialState.day,year:initialState.year});const lastChangeValueRef=React.useRef(defaultValue||null);const reportChange=React.useCallback(value=>{if(value!==lastChangeValueRef.current){lastChangeValueRef.current=value;onChange(value);}},[onChange]);const handleChange=React.useCallback(()=>{const{month,day,year}=valuesRef.current;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){reportChange(null);return}let date;try{if(monthYearOnly){date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){setError(labels.errorMessage);reportChange(null);return}if(isFutureDate(date)){setError(labels.errorMessage);reportChange(null);}else {setError(null);reportChange(date.toString());}},[labels,monthYearOnly,reportChange]);const handleMonthChange=React.useCallback(month=>{valuesRef.current={...valuesRef.current,month};setMonth(month);handleChange();},[handleChange]);const handleDayChange=React.useCallback(day=>{valuesRef.current={...valuesRef.current,day};setDay(day);handleChange();},[handleChange]);const handleYearChange=React.useCallback(year=>{valuesRef.current={...valuesRef.current,year};setYear(year);handleChange();},[handleChange]);const maybeRenderError=()=>{if(!error){return null}return jsxs(View,{style:defaultStyles.errorRow,role:"alert",children:[jsx(PhosphorIcon,{size:"small",icon:infoIcon,color:semanticColor.core.foreground.critical.default,"aria-hidden":"true"}),jsx(BodyText,{tag:"span",style:defaultStyles.errorText,children:error})]})};const monthsShort=React.useMemo(()=>{const format=new Intl.DateTimeFormat(locale??navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))},[locale]);const renderMonth=()=>{const minWidth=getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":labels.month,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.month,onChange:handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:monthsShort.map((monthShort,i)=>jsx(OptionItem,{label:monthShort,value:String(i+1)},monthShort))})};const maybeRenderDay=()=>{if(monthYearOnly){return null}return jsx(SingleSelect,{"aria-label":labels.day,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.day,onChange:handleDayChange,selectedValue:day,style:[{minInlineSize:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsx(OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})};const renderYear=()=>{const minWidth=getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":labels.year,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.year,onChange:handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsx(OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})};return jsxs(Fragment,{children:[jsxs(View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[renderMonth(),maybeRenderDay(),renderYear()]}),maybeRenderError()]})};
 
 export { BirthdayPicker as default };

package/dist/index.js

@@ -34,6 +34,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var infoIcon__default = /*#__PURE__*/_interopDefaultLegacy(infoIcon);
 
-const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minInlineSize:"100%"}},errorRow:{flexDirection:"row",placeItems:"center",gap:wonderBlocksTokens.sizing.size_040,marginBlockStart:wonderBlocksTokens.sizing.size_040},errorText:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default}});class BirthdayPicker extends React__namespace.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=temporalPolyfill.Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return temporalPolyfill.Temporal.PlainDate.compare(date,temporalPolyfill.Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:defaultStyles.errorRow,role:"alert",children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",icon:infoIcon__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.critical.default,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:defaultStyles.errorText,children:error})]})}monthsShort(){const format=new Intl.DateTimeFormat(this.props.locale??navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))}renderMonth(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minInlineSize:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}let date;try{if(monthYearOnly){date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){this.setState({error:this.labels.errorMessage});this.reportChange(null);return}if(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
+const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minInlineSize:"100%"}},errorRow:{flexDirection:"row",placeItems:"center",gap:wonderBlocksTokens.sizing.size_040,marginBlockStart:wonderBlocksTokens.sizing.size_040},errorText:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default}});const isFutureDate=date=>{return temporalPolyfill.Temporal.PlainDate.compare(date,temporalPolyfill.Temporal.Now.plainDateISO())===1};const getStateFromDefault=(defaultValue,monthYearOnly,labels)=>{const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};if(defaultValue){let date=null;try{date=temporalPolyfill.Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(isFutureDate(date)){initialState.error=labels.errorMessage;}}return initialState};const getMonthYearWidth=monthYearOnly=>{return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL};const BirthdayPicker=props=>{const{defaultValue,disabled,dropdownStyle,locale,monthYearOnly,onChange,style}=props;const labelsRef=React__namespace.useRef({...defaultLabels,...props.labels});const labels=labelsRef.current;const[initialState]=React__namespace.useState(()=>getStateFromDefault(defaultValue,monthYearOnly,labels));const[month,setMonth]=React__namespace.useState(initialState.month);const[day,setDay]=React__namespace.useState(initialState.day);const[year,setYear]=React__namespace.useState(initialState.year);const[error,setError]=React__namespace.useState(initialState.error);const valuesRef=React__namespace.useRef({month:initialState.month,day:initialState.day,year:initialState.year});const lastChangeValueRef=React__namespace.useRef(defaultValue||null);const reportChange=React__namespace.useCallback(value=>{if(value!==lastChangeValueRef.current){lastChangeValueRef.current=value;onChange(value);}},[onChange]);const handleChange=React__namespace.useCallback(()=>{const{month,day,year}=valuesRef.current;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){reportChange(null);return}let date;try{if(monthYearOnly){date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){setError(labels.errorMessage);reportChange(null);return}if(isFutureDate(date)){setError(labels.errorMessage);reportChange(null);}else {setError(null);reportChange(date.toString());}},[labels,monthYearOnly,reportChange]);const handleMonthChange=React__namespace.useCallback(month=>{valuesRef.current={...valuesRef.current,month};setMonth(month);handleChange();},[handleChange]);const handleDayChange=React__namespace.useCallback(day=>{valuesRef.current={...valuesRef.current,day};setDay(day);handleChange();},[handleChange]);const handleYearChange=React__namespace.useCallback(year=>{valuesRef.current={...valuesRef.current,year};setYear(year);handleChange();},[handleChange]);const maybeRenderError=()=>{if(!error){return null}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:defaultStyles.errorRow,role:"alert",children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",icon:infoIcon__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.critical.default,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:defaultStyles.errorText,children:error})]})};const monthsShort=React__namespace.useMemo(()=>{const format=new Intl.DateTimeFormat(locale??navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))},[locale]);const renderMonth=()=>{const minWidth=getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":labels.month,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.month,onChange:handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:monthsShort.map((monthShort,i)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:monthShort,value:String(i+1)},monthShort))})};const maybeRenderDay=()=>{if(monthYearOnly){return null}return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":labels.day,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.day,onChange:handleDayChange,selectedValue:day,style:[{minInlineSize:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})};const renderYear=()=>{const minWidth=getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":labels.year,"aria-invalid":!!error,error:!!error,disabled:disabled,placeholder:labels.year,onChange:handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[renderMonth(),maybeRenderDay(),renderYear()]}),maybeRenderError()]})};
 
 module.exports = BirthdayPicker;

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "4.1.69",
+  "version": "4.1.71",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-dropdown": "10.13.0",
+    "@khanacademy/wonder-blocks-dropdown": "10.13.2",
     "@khanacademy/wonder-blocks-icon": "6.0.2",
     "@khanacademy/wonder-blocks-layout": "3.1.62",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",