@khanacademy/wonder-blocks-birthday-picker 4.1.73 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 4.2.1
+
+### Patch Changes
+
+- @khanacademy/wonder-blocks-dropdown@10.13.6
+
+## 4.2.0
+
+### Minor Changes
+
+- 6bd5d0c: The default month, day and year placeholders and the error message in BirthdayPicker now read translated strings from `WonderBlocksConfigProvider`. The `labels` prop overrides the built-in translations.
+
+### Patch Changes
+
+- Updated dependencies [6bd5d0c]
+- Updated dependencies [8e11e83]
+    - @khanacademy/wonder-blocks-config@0.5.0
+    - @khanacademy/wonder-blocks-dropdown@10.13.5
+
 ## 4.1.73
 
 ### Patch Changes

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

@@ -34,6 +34,9 @@ type Props = {
     disabled?: boolean;
     /**
      * The object containing the custom labels used inside this component.
+     *
+     * Each label overrides the translated string from
+     * `WonderBlocksConfigProvider`.
      */
     labels?: Labels;
     /**
@@ -64,6 +67,5 @@ type Props = {
      */
     locale?: string;
 };
-export declare const defaultLabels: Labels;
 declare const BirthdayPicker: (props: Props) => React.JSX.Element;
 export default BirthdayPicker;

package/dist/es/index.js

@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Temporal } from 'temporal-polyfill';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { sizing, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { BodyText } from '@khanacademy/wonder-blocks-typography';
@@ -9,6 +10,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}});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()]})};
+const CUR_YEAR=new Date().getYear()+1900;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{strings}=useWonderBlocksI18n();const labelsRef=React.useRef({errorMessage:props.labels?.errorMessage||strings.birthdateErrorMessage,month:props.labels?.month||strings.fieldLabelMonth,year:props.labels?.year||strings.fieldLabelYear,day:props.labels?.day||strings.fieldLabelDay});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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var temporalPolyfill = require('temporal-polyfill');
 var React = require('react');
 var aphrodite = require('aphrodite');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -34,6 +35,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}});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()]})};
+const CUR_YEAR=new Date().getYear()+1900;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{strings}=wonderBlocksConfig.useWonderBlocksI18n();const labelsRef=React__namespace.useRef({errorMessage:props.labels?.errorMessage||strings.birthdateErrorMessage,month:props.labels?.month||strings.fieldLabelMonth,year:props.labels?.year||strings.fieldLabelYear,day:props.labels?.day||strings.fieldLabelDay});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.73",
+  "version": "4.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -20,8 +20,9 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@khanacademy/wonder-blocks-config": "0.5.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-dropdown": "10.13.4",
+    "@khanacademy/wonder-blocks-dropdown": "10.13.6",
     "@khanacademy/wonder-blocks-icon": "6.0.3",
     "@khanacademy/wonder-blocks-layout": "3.2.1",
     "@khanacademy/wonder-blocks-tokens": "18.1.0",