@box/metadata-filter 2.3.1 → 2.3.2

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field-relative.js

@@ -1 +1 @@
-import{n as RangeLabelType}from"../../../../../../chunks/types.js";import{convertToFormikValueRanged,getCustomFromToValues,getRelativeFromToValues}from"./date-conversion-utils.js";import messages from"../../../../messages.js";import{DEFAULT_MAX_DATE}from"./constants.js";import{t as metadata_date_field_module_default}from"../../../../../../chunks/metadata-date-field.module.js";import{t as ErrorType}from"../../../../../../chunks/types2.js";import{useDateValidation}from"./use-date-validation.js";import{getDynamicMaxMinValue}from"./utils.js";import{DateI18nProvider,DatePicker,Radio,Select,Text}from"@box/blueprint-web";import{Field,getIn,useFormikContext}from"formik";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useIntl}from"react-intl";import clsx from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var relDaysMessageStrategies={next:messages.nextDaysAmt,past:messages.pastDaysAmt,olderThan:messages.olderThanDaysAmt},daysPresets=[1,3,15,45,60,120,365],isRelativeType=value=>value in relDaysMessageStrategies||value===`today`||value===`customRange`,MetadataDateFieldRelative=({customDateFilterOptions,disableForm,fieldNamePrefix,label,locale,portalElement,hasAccordion})=>{let[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),[shouldUpdateFromToFields,setShouldUpdateFromToFields]=useState(!1),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,relTypeFieldName=`${fieldNamePrefix}.value.relativeType`,relDaysFieldName=`${fieldNamePrefix}.value.relativeDays`,customTypeFieldName=`${fieldNamePrefix}.value.customType`,customDaysFieldName=`${fieldNamePrefix}.value.customDays`,{values,setFieldTouched,setFieldValue}=useFormikContext(),{validateDates,fromDatePickerValue,toDatePickerValue,fromErrorType,toErrorType}=useDateValidation(values,fromFieldName,toFieldName,locale,!0),intl=useIntl(),relTypeFieldValue=getIn(values,relTypeFieldName),customTypeFieldValue=getIn(values,customTypeFieldName),hasFromOrToValues=fromDatePickerValue||toDatePickerValue,defaultSelectedRelValue=`anyTime`,defaultSelectedCustomDateFilterValue=`anyTime`;isRelativeType(relTypeFieldValue)?defaultSelectedRelValue=relTypeFieldValue:customTypeFieldValue?defaultSelectedCustomDateFilterValue=customTypeFieldValue:hasFromOrToValues&&(defaultSelectedRelValue=`customRange`,defaultSelectedCustomDateFilterValue=`customRange`);let[selectedRelValue,setSelectedRelValue]=useState(defaultSelectedRelValue),prevRelTypeFieldValue=useRef(relTypeFieldValue),prevCustomTypeFieldValue=useRef(customTypeFieldValue),relDaysFieldValue=getIn(values,relDaysFieldName),customDaysFieldValue=getIn(values,customDaysFieldName),[selectedCustomDateFilterValue,setSelectedCustomDateFilterValue]=useState(defaultSelectedCustomDateFilterValue),fromValidationRef=useRef(fromDatePickerValue),toValidationRef=useRef(toDatePickerValue),sharedDatePickerProps={clearDatePickerAriaLabel:intl.formatMessage(messages.clearSelectedDate),nextMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth),openCalendarDropdownAriaLabel:intl.formatMessage(messages.openCalendar),previousMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth)},clearFromToFields=()=>{setFieldValue(fromFieldName,void 0),setFieldValue(toFieldName,void 0),fromValidationRef.current=void 0,toValidationRef.current=void 0},handleFromOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.FROM);fromValidationRef.current=datePickerValue,setFieldValue(fromFieldName,formikValue),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.TO);toValidationRef.current=datePickerValue,setFieldValue(toFieldName,formikValue),setLastChangedField(RangeLabelType.TO)},handleOnBlur=rangeLabelType=>{setFieldTouched(rangeLabelType===RangeLabelType.FROM?fromFieldName:toFieldName,!0),setLastChangedField(rangeLabelType)},handleRelativeTypeChange=value=>{let relValue;isRelativeType(value)&&(relValue=value),value===`customRange`&&(fromValidationRef.current=void 0,toValidationRef.current=void 0),setFieldValue(relTypeFieldName,relValue),setSelectedRelValue(value),setFieldValue(relDaysFieldName,void 0),setShouldUpdateFromToFields(!0)},handleCustomDateFilterChange=optionName=>{setFieldValue(customTypeFieldName,optionName),setSelectedCustomDateFilterValue(optionName),setFieldValue(customDaysFieldName,void 0),clearFromToFields();let selectedOption=customDateFilterOptions.find(option=>option.name===optionName);if(selectedOption&&selectedOption.type===`text`){let{from,to}=getCustomFromToValues(selectedOption.from,selectedOption.to);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to)}},updateFromToFields=useCallback(()=>{let{from,to}=getRelativeFromToValues(selectedRelValue,relDaysFieldValue);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to)},[fromFieldName,relDaysFieldValue,selectedRelValue,setFieldValue,toFieldName]);useEffect(()=>{shouldUpdateFromToFields&&(updateFromToFields(),setShouldUpdateFromToFields(!1))},[shouldUpdateFromToFields,updateFromToFields]),useEffect(()=>{let relTypeChanged=prevRelTypeFieldValue.current!==relTypeFieldValue,customTypeChanged=prevCustomTypeFieldValue.current!==customTypeFieldValue;(relTypeChanged||customTypeChanged)&&(setSelectedRelValue(relTypeFieldValue??`anyTime`),setSelectedCustomDateFilterValue(customTypeFieldValue),prevRelTypeFieldValue.current=relTypeFieldValue,prevCustomTypeFieldValue.current=customTypeFieldValue)},[relTypeFieldValue,customTypeFieldValue]);let fromMaxValue=useMemo(()=>getDynamicMaxMinValue(toDatePickerValue,DEFAULT_MAX_DATE),[toDatePickerValue]),toMinValue=useMemo(()=>getDynamicMaxMinValue(fromDatePickerValue),[fromDatePickerValue]),shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(otherErrorType===ErrorType.MAX&&thisErrorType===ErrorType.OVERLAPPING||thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField),getDaysSelect=type=>{if(type!==selectedRelValue)return null;let daysOptions=daysPresets.map(value=>{let daysAmtMessage=relDaysMessageStrategies[type];return{value:String(value),label:intl.formatMessage(daysAmtMessage,{count:value})}});return jsx(Select,{className:metadata_date_field_module_default.dateSelect,defaultValue:relDaysFieldValue===void 0?``:String(relDaysFieldValue),label:intl.formatMessage(messages.relativeDaysSelectLabel),onValueChange:key=>{setFieldValue(relDaysFieldName,Number(key)),setShouldUpdateFromToFields(!0)},placeholder:intl.formatMessage(messages.selectValuePlaceholder),children:jsx(Select.Content,{container:portalElement,children:daysOptions?.map(option=>jsx(Select.Option,{text:option.label,value:option.value,children:option.label},option.value))})})},getCustomDaysSelect=(name,options)=>name===selectedCustomDateFilterValue?jsx(Select,{className:metadata_date_field_module_default.dateSelect,defaultValue:customDaysFieldValue===void 0?``:String(customDaysFieldValue),label:intl.formatMessage(messages.relativeDaysSelectLabel),onValueChange:selectedOptionName=>{let selectedOption=options.find(option=>option.name===selectedOptionName);if(selectedOption){let{from,to}=getCustomFromToValues(selectedOption.from,selectedOption.to);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to),setFieldValue(customDaysFieldName,selectedOption.name)}},placeholder:intl.formatMessage(messages.selectValuePlaceholder),children:jsx(Select.Content,{container:portalElement,children:options.map(option=>jsx(Select.Option,{text:option.name,value:option.name,children:option.name},option.name))})}):null,renderCustomDateFilterOptions=()=>jsxs(Radio.Group,{disabled:disableForm,loop:!1,onValueChange:handleCustomDateFilterChange,value:selectedCustomDateFilterValue,children:[jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterAnyTime),value:`anyTime`}),customDateFilterOptions.map(option=>{if(option.type===`text`)return jsx(Radio.Item,{label:option.name,value:option.name},option.name);let{name,options}=option;return jsx(Radio.Item,{description:options?getCustomDaysSelect(name,options):void 0,label:name,value:name},name)}),jsx(Radio.Item,{description:getCustomRangeFields(),label:intl.formatMessage(messages.relativeDateFilterCustomRange),value:`customRange`})]}),getCustomRangeFields=()=>!customDateFilterOptions&&selectedRelValue!==`customRange`||customDateFilterOptions&&selectedCustomDateFilterValue!==`customRange`?null:jsxs(`div`,{className:clsx(metadata_date_field_module_default.rangeInputsContainer,metadata_date_field_module_default.verticalLayout,metadata_date_field_module_default.dateSelect),children:[jsx(Field,{name:fromFieldName,validate:fromValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectStartDate),error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,isDisabled:disableForm,label:intl.formatMessage(messages.fieldStartDateLabel),maxValue:fromMaxValue,onBlur:()=>handleOnBlur(RangeLabelType.FROM),onChange:datePickerValue=>handleFromOnChange(datePickerValue),portalElement,value:fromDatePickerValue})})}),jsx(Field,{name:toFieldName,validate:toValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectEndDate),error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,isDisabled:disableForm,label:intl.formatMessage(messages.fieldEndDateLabel),maxValue:DEFAULT_MAX_DATE,minValue:toMinValue,onBlur:()=>handleOnBlur(RangeLabelType.TO),onChange:datePickerValue=>handleToOnChange(datePickerValue),portalElement,value:toDatePickerValue})})})]});return jsx(DateI18nProvider,{locale,children:jsxs(`div`,{className:metadata_date_field_module_default.container,"data-testid":`${label}-field`,children:[!hasAccordion&&jsx(Text,{as:`span`,className:metadata_date_field_module_default.rangeFieldLabel,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),customDateFilterOptions?renderCustomDateFilterOptions():jsxs(Radio.Group,{disabled:disableForm,loop:!1,onValueChange:handleRelativeTypeChange,value:selectedRelValue,children:[jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterAnyTime),value:`anyTime`}),jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterToday),value:`today`}),jsx(Radio.Item,{description:getDaysSelect(`next`),label:intl.formatMessage(messages.relativeDateFilterNext),value:`next`}),jsx(Radio.Item,{description:getDaysSelect(`past`),label:intl.formatMessage(messages.relativeDateFilterPast),value:`past`}),jsx(Radio.Item,{description:getDaysSelect(`olderThan`),label:intl.formatMessage(messages.relativeDateFilterOlderThan),value:`olderThan`}),jsx(Radio.Item,{description:getCustomRangeFields(),label:intl.formatMessage(messages.relativeDateFilterCustomRange),value:`customRange`})]})]})})};export{MetadataDateFieldRelative,MetadataDateFieldRelative as default};
+import{n as RangeLabelType}from"../../../../../../chunks/types.js";import{convertToFormikValueRanged,getCustomFromToValues,getRelativeFromToValues}from"./date-conversion-utils.js";import messages from"../../../../messages.js";import{DEFAULT_MAX_DATE}from"./constants.js";import{t as metadata_date_field_module_default}from"../../../../../../chunks/metadata-date-field.module.js";import{t as ErrorType}from"../../../../../../chunks/types2.js";import{useDateValidation}from"./use-date-validation.js";import{getDynamicMaxMinValue}from"./utils.js";import{DateI18nProvider,DatePicker,Radio,Select,Text}from"@box/blueprint-web";import{Field,getIn,useFormikContext}from"formik";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useIntl}from"react-intl";import clsx from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var relDaysMessageStrategies={next:messages.nextDaysAmt,past:messages.pastDaysAmt,olderThan:messages.olderThanDaysAmt},daysPresets=[1,3,15,45,60,120,365],isRelativeType=value=>value in relDaysMessageStrategies||value===`today`||value===`customRange`,MetadataDateFieldRelative=({customDateFilterOptions,disableForm,fieldNamePrefix,label,locale,portalElement,hasAccordion})=>{let[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),[shouldUpdateFromToFields,setShouldUpdateFromToFields]=useState(!1),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,relTypeFieldName=`${fieldNamePrefix}.value.relativeType`,relDaysFieldName=`${fieldNamePrefix}.value.relativeDays`,customTypeFieldName=`${fieldNamePrefix}.value.customType`,customDaysFieldName=`${fieldNamePrefix}.value.customDays`,{values,setFieldTouched,setFieldValue}=useFormikContext(),{validateDates,fromDatePickerValue,toDatePickerValue,fromErrorType,toErrorType}=useDateValidation(values,fromFieldName,toFieldName,locale,!0),intl=useIntl(),relTypeFieldValue=getIn(values,relTypeFieldName),customTypeFieldValue=getIn(values,customTypeFieldName),hasFromOrToValues=fromDatePickerValue||toDatePickerValue,defaultSelectedRelValue=`anyTime`,defaultSelectedCustomDateFilterValue=`anyTime`;isRelativeType(relTypeFieldValue)?defaultSelectedRelValue=relTypeFieldValue:customTypeFieldValue?defaultSelectedCustomDateFilterValue=customTypeFieldValue:hasFromOrToValues&&(defaultSelectedRelValue=`customRange`,defaultSelectedCustomDateFilterValue=`customRange`);let[selectedRelValue,setSelectedRelValue]=useState(defaultSelectedRelValue),prevRelTypeFieldValue=useRef(relTypeFieldValue),prevCustomTypeFieldValue=useRef(customTypeFieldValue),relDaysFieldValue=getIn(values,relDaysFieldName),customDaysFieldValue=getIn(values,customDaysFieldName),[selectedCustomDateFilterValue,setSelectedCustomDateFilterValue]=useState(defaultSelectedCustomDateFilterValue),fromValidationRef=useRef(fromDatePickerValue),toValidationRef=useRef(toDatePickerValue),sharedDatePickerProps={clearDatePickerAriaLabel:intl.formatMessage(messages.clearSelectedDate),nextMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth),openCalendarDropdownAriaLabel:intl.formatMessage(messages.openCalendar),previousMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth)},clearFromToFields=()=>{setFieldValue(fromFieldName,void 0),setFieldValue(toFieldName,void 0),fromValidationRef.current=void 0,toValidationRef.current=void 0},handleFromOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.FROM);fromValidationRef.current=datePickerValue,setFieldValue(fromFieldName,formikValue),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.TO);toValidationRef.current=datePickerValue,setFieldValue(toFieldName,formikValue),setLastChangedField(RangeLabelType.TO)},handleOnBlur=rangeLabelType=>{setFieldTouched(rangeLabelType===RangeLabelType.FROM?fromFieldName:toFieldName,!0),setLastChangedField(rangeLabelType)},handleRelativeTypeChange=value=>{let relValue;isRelativeType(value)&&(relValue=value),value===`customRange`&&(fromValidationRef.current=void 0,toValidationRef.current=void 0),setFieldValue(relTypeFieldName,relValue),setSelectedRelValue(value),setFieldValue(relDaysFieldName,void 0),setShouldUpdateFromToFields(!0)},handleCustomDateFilterChange=optionName=>{setFieldValue(customTypeFieldName,optionName),setSelectedCustomDateFilterValue(optionName),setFieldValue(customDaysFieldName,void 0),clearFromToFields();let selectedOption=customDateFilterOptions.find(option=>option.name===optionName);if(selectedOption&&selectedOption.type===`text`){let{from,to}=getCustomFromToValues(selectedOption.from,selectedOption.to);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to)}},updateFromToFields=useCallback(()=>{let{from,to}=getRelativeFromToValues(selectedRelValue,relDaysFieldValue);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to)},[fromFieldName,relDaysFieldValue,selectedRelValue,setFieldValue,toFieldName]);useEffect(()=>{shouldUpdateFromToFields&&(updateFromToFields(),setShouldUpdateFromToFields(!1))},[shouldUpdateFromToFields,updateFromToFields]),useEffect(()=>{let relTypeChanged=prevRelTypeFieldValue.current!==relTypeFieldValue,customTypeChanged=prevCustomTypeFieldValue.current!==customTypeFieldValue;(relTypeChanged||customTypeChanged)&&(setSelectedRelValue(relTypeFieldValue??`anyTime`),setSelectedCustomDateFilterValue(customTypeFieldValue),prevRelTypeFieldValue.current=relTypeFieldValue,prevCustomTypeFieldValue.current=customTypeFieldValue)},[relTypeFieldValue,customTypeFieldValue]);let fromMaxValue=useMemo(()=>getDynamicMaxMinValue(toDatePickerValue,DEFAULT_MAX_DATE),[toDatePickerValue]),toMinValue=useMemo(()=>getDynamicMaxMinValue(fromDatePickerValue),[fromDatePickerValue]),shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(otherErrorType===ErrorType.MAX&&thisErrorType===ErrorType.OVERLAPPING||thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField),getDaysSelect=type=>{if(type!==selectedRelValue)return null;let daysOptions=daysPresets.map(value=>{let daysAmtMessage=relDaysMessageStrategies[type];return{value:String(value),label:intl.formatMessage(daysAmtMessage,{count:value})}});return jsx(Select,{className:metadata_date_field_module_default.dateSelect,defaultValue:relDaysFieldValue===void 0?``:String(relDaysFieldValue),label:intl.formatMessage(messages.relativeDaysSelectLabel),onValueChange:key=>{setFieldValue(relDaysFieldName,Number(key)),setShouldUpdateFromToFields(!0)},placeholder:intl.formatMessage(messages.selectValuePlaceholder),children:jsx(Select.Content,{container:portalElement,children:daysOptions?.map(option=>jsx(Select.Option,{text:option.label,value:option.value,children:option.label},option.value))})})},getCustomDaysSelect=(name,options)=>name===selectedCustomDateFilterValue?jsx(Select,{className:metadata_date_field_module_default.dateSelect,defaultValue:customDaysFieldValue===void 0?``:String(customDaysFieldValue),label:intl.formatMessage(messages.relativeDaysSelectLabel),onValueChange:selectedOptionName=>{let selectedOption=options.find(option=>option.name===selectedOptionName);if(selectedOption){let{from,to}=getCustomFromToValues(selectedOption.from,selectedOption.to);setFieldValue(fromFieldName,from),setFieldValue(toFieldName,to),setFieldValue(customDaysFieldName,selectedOption.name)}},placeholder:intl.formatMessage(messages.selectValuePlaceholder),children:jsx(Select.Content,{container:portalElement,children:options.map(option=>jsx(Select.Option,{text:option.name,value:option.name,children:option.name},option.name))})}):null,renderCustomDateFilterOptions=()=>jsxs(Radio.Group,{disabled:disableForm,loop:!1,onValueChange:handleCustomDateFilterChange,value:selectedCustomDateFilterValue,children:[jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterAnyTime),value:`anyTime`}),customDateFilterOptions.map(option=>{if(option.type===`text`)return jsx(Radio.Item,{label:option.name,value:option.name},option.name);let{name,options}=option;return jsx(Radio.Item,{description:options?getCustomDaysSelect(name,options):void 0,label:name,value:name},name)}),jsx(Radio.Item,{description:getCustomRangeFields(),label:intl.formatMessage(messages.relativeDateFilterCustomRange),value:`customRange`})]}),getCustomRangeFields=()=>!customDateFilterOptions&&selectedRelValue!==`customRange`||customDateFilterOptions&&selectedCustomDateFilterValue!==`customRange`?null:jsxs(`div`,{className:clsx(metadata_date_field_module_default.rangeInputsContainer,metadata_date_field_module_default.verticalLayout,metadata_date_field_module_default.dateSelect),children:[jsx(Field,{name:fromFieldName,validate:fromValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectStartDate),error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,isDisabled:disableForm,label:intl.formatMessage(messages.fieldStartDateLabel),maxValue:fromMaxValue,onBlur:()=>handleOnBlur(RangeLabelType.FROM),onChange:datePickerValue=>handleFromOnChange(datePickerValue),portalElement,value:fromDatePickerValue})})}),jsx(Field,{name:toFieldName,validate:toValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectEndDate),error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,isDisabled:disableForm,label:intl.formatMessage(messages.fieldEndDateLabel),maxValue:DEFAULT_MAX_DATE,minValue:toMinValue,onBlur:()=>handleOnBlur(RangeLabelType.TO),onChange:datePickerValue=>handleToOnChange(datePickerValue),portalElement,value:toDatePickerValue})})})]});return jsx(DateI18nProvider,{locale,children:jsxs(`div`,{className:metadata_date_field_module_default.container,"data-testid":`${label}-field`,children:[!hasAccordion&&jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),customDateFilterOptions?renderCustomDateFilterOptions():jsxs(Radio.Group,{disabled:disableForm,loop:!1,onValueChange:handleRelativeTypeChange,value:selectedRelValue,children:[jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterAnyTime),value:`anyTime`}),jsx(Radio.Item,{label:intl.formatMessage(messages.relativeDateFilterToday),value:`today`}),jsx(Radio.Item,{description:getDaysSelect(`next`),label:intl.formatMessage(messages.relativeDateFilterNext),value:`next`}),jsx(Radio.Item,{description:getDaysSelect(`past`),label:intl.formatMessage(messages.relativeDateFilterPast),value:`past`}),jsx(Radio.Item,{description:getDaysSelect(`olderThan`),label:intl.formatMessage(messages.relativeDateFilterOlderThan),value:`olderThan`}),jsx(Radio.Item,{description:getCustomRangeFields(),label:intl.formatMessage(messages.relativeDateFilterCustomRange),value:`customRange`})]})]})})};export{MetadataDateFieldRelative,MetadataDateFieldRelative as default};

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field.js

@@ -1 +1 @@
-import{n as RangeLabelType}from"../../../../../../chunks/types.js";import{convertToFormikValueRanged}from"./date-conversion-utils.js";import messages from"../../../../messages.js";import{DEFAULT_MAX_DATE}from"./constants.js";import{t as metadata_date_field_module_default}from"../../../../../../chunks/metadata-date-field.module.js";import{t as ErrorType}from"../../../../../../chunks/types2.js";import{useDateValidation}from"./use-date-validation.js";import{getDynamicMaxMinValue}from"./utils.js";import{MetadataDateFieldAdvanced}from"./metadata-date-field-advanced.js";import{MetadataDateFieldRelative}from"./metadata-date-field-relative.js";import{DateI18nProvider,DatePicker,Text}from"@box/blueprint-web";import{Field,useFormikContext}from"formik";import{useMemo,useRef,useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var MetadataDateField=({canUseRelativeDates,isAdvancedFilterEnabled,...props})=>jsx(isAdvancedFilterEnabled?MetadataDateFieldAdvanced:canUseRelativeDates?MetadataDateFieldRelative:MetadataDateFieldNonRelative,{...props}),MetadataDateFieldNonRelative=({customFieldLabels=[],direction=`horizontal`,disableForm,fieldNamePrefix,label,locale,portalElement,hasAccordion})=>{let[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,{values,setFieldTouched,setFieldValue}=useFormikContext(),{validateDates,fromDatePickerValue,toDatePickerValue,fromErrorType,toErrorType}=useDateValidation(values,fromFieldName,toFieldName,locale,!0),intl=useIntl(),fromValidationRef=useRef(fromDatePickerValue),toValidationRef=useRef(toDatePickerValue),sharedDatePickerProps={clearDatePickerAriaLabel:intl.formatMessage(messages.clearSelectedDate),nextMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth),openCalendarDropdownAriaLabel:intl.formatMessage(messages.openCalendar),previousMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth)},[fromFieldLabel,toFieldLabel]=customFieldLabels,handleFromOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.FROM);fromValidationRef.current=datePickerValue,setFieldValue(fromFieldName,formikValue),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.TO);toValidationRef.current=datePickerValue,setFieldValue(toFieldName,formikValue),setLastChangedField(RangeLabelType.TO)},handleOnBlur=rangeLabelType=>{setFieldTouched(rangeLabelType===RangeLabelType.FROM?fromFieldName:toFieldName,!0),setLastChangedField(rangeLabelType)},fromMaxValue=useMemo(()=>getDynamicMaxMinValue(toDatePickerValue,DEFAULT_MAX_DATE),[toDatePickerValue]),toMinValue=useMemo(()=>getDynamicMaxMinValue(fromDatePickerValue),[fromDatePickerValue]),shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(otherErrorType===ErrorType.MAX&&thisErrorType===ErrorType.OVERLAPPING||thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField);return jsxs(`div`,{className:metadata_date_field_module_default.container,"data-testid":`${label}-field`,children:[!hasAccordion&&jsx(Text,{as:`span`,className:metadata_date_field_module_default.rangeFieldLabel,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),jsx(DateI18nProvider,{locale,children:jsxs(`div`,{className:`${metadata_date_field_module_default.rangeInputsContainer} ${direction===`vertical`?metadata_date_field_module_default.verticalLayout:``}`,children:[jsx(Field,{name:fromFieldName,validate:fromValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectFromDate),dataTargetId:`DatePicker-${fieldNamePrefix}_from`,error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,isDisabled:disableForm,label:fromFieldLabel||intl.formatMessage(messages.fieldFromLabel),maxValue:fromMaxValue,onBlur:()=>handleOnBlur(RangeLabelType.FROM),onChange:datePickerValue=>handleFromOnChange(datePickerValue),portalElement,value:fromDatePickerValue})})}),jsx(Field,{name:toFieldName,validate:toValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectToDate),dataTargetId:`DatePicker-${fieldNamePrefix}_to`,error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,isDisabled:disableForm,label:toFieldLabel||intl.formatMessage(messages.fieldToLabel),maxValue:DEFAULT_MAX_DATE,minValue:toMinValue,onBlur:()=>handleOnBlur(RangeLabelType.TO),onChange:datePickerValue=>handleToOnChange(datePickerValue),portalElement,value:toDatePickerValue})})})]})})]})};export{MetadataDateField,MetadataDateField as default,MetadataDateFieldNonRelative};
+import{n as RangeLabelType}from"../../../../../../chunks/types.js";import{convertToFormikValueRanged}from"./date-conversion-utils.js";import messages from"../../../../messages.js";import{DEFAULT_MAX_DATE}from"./constants.js";import{t as metadata_date_field_module_default}from"../../../../../../chunks/metadata-date-field.module.js";import{t as ErrorType}from"../../../../../../chunks/types2.js";import{useDateValidation}from"./use-date-validation.js";import{getDynamicMaxMinValue}from"./utils.js";import{MetadataDateFieldAdvanced}from"./metadata-date-field-advanced.js";import{MetadataDateFieldRelative}from"./metadata-date-field-relative.js";import{DateI18nProvider,DatePicker,Text}from"@box/blueprint-web";import{Field,useFormikContext}from"formik";import{useMemo,useRef,useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var MetadataDateField=({canUseRelativeDates,isAdvancedFilterEnabled,...props})=>jsx(isAdvancedFilterEnabled?MetadataDateFieldAdvanced:canUseRelativeDates?MetadataDateFieldRelative:MetadataDateFieldNonRelative,{...props}),MetadataDateFieldNonRelative=({customFieldLabels=[],direction=`horizontal`,disableForm,fieldNamePrefix,label,locale,portalElement,hasAccordion})=>{let[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,{values,setFieldTouched,setFieldValue}=useFormikContext(),{validateDates,fromDatePickerValue,toDatePickerValue,fromErrorType,toErrorType}=useDateValidation(values,fromFieldName,toFieldName,locale,!0),intl=useIntl(),fromValidationRef=useRef(fromDatePickerValue),toValidationRef=useRef(toDatePickerValue),sharedDatePickerProps={clearDatePickerAriaLabel:intl.formatMessage(messages.clearSelectedDate),nextMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth),openCalendarDropdownAriaLabel:intl.formatMessage(messages.openCalendar),previousMonthAriaLabel:intl.formatMessage(messages.switchToNextMonth)},[fromFieldLabel,toFieldLabel]=customFieldLabels,handleFromOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.FROM);fromValidationRef.current=datePickerValue,setFieldValue(fromFieldName,formikValue),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=datePickerValue=>{let formikValue=convertToFormikValueRanged(datePickerValue,RangeLabelType.TO);toValidationRef.current=datePickerValue,setFieldValue(toFieldName,formikValue),setLastChangedField(RangeLabelType.TO)},handleOnBlur=rangeLabelType=>{setFieldTouched(rangeLabelType===RangeLabelType.FROM?fromFieldName:toFieldName,!0),setLastChangedField(rangeLabelType)},fromMaxValue=useMemo(()=>getDynamicMaxMinValue(toDatePickerValue,DEFAULT_MAX_DATE),[toDatePickerValue]),toMinValue=useMemo(()=>getDynamicMaxMinValue(fromDatePickerValue),[fromDatePickerValue]),shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(otherErrorType===ErrorType.MAX&&thisErrorType===ErrorType.OVERLAPPING||thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField);return jsxs(`div`,{className:metadata_date_field_module_default.container,"data-testid":`${label}-field`,children:[!hasAccordion&&jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),jsx(DateI18nProvider,{locale,children:jsxs(`div`,{className:`${metadata_date_field_module_default.rangeInputsContainer} ${direction===`vertical`?metadata_date_field_module_default.verticalLayout:``}`,children:[jsx(Field,{name:fromFieldName,validate:fromValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectFromDate),dataTargetId:`DatePicker-${fieldNamePrefix}_from`,error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,isDisabled:disableForm,label:fromFieldLabel||intl.formatMessage(messages.fieldFromLabel),maxValue:fromMaxValue,onBlur:()=>handleOnBlur(RangeLabelType.FROM),onChange:datePickerValue=>handleFromOnChange(datePickerValue),portalElement,value:fromDatePickerValue})})}),jsx(Field,{name:toFieldName,validate:toValue=>validateDates(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_date_field_module_default.inputContainer,children:jsx(DatePicker,{...field,...sharedDatePickerProps,calendarAriaLabel:intl.formatMessage(messages.selectToDate),dataTargetId:`DatePicker-${fieldNamePrefix}_to`,error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,isDisabled:disableForm,label:toFieldLabel||intl.formatMessage(messages.fieldToLabel),maxValue:DEFAULT_MAX_DATE,minValue:toMinValue,onBlur:()=>handleOnBlur(RangeLabelType.TO),onChange:datePickerValue=>handleToOnChange(datePickerValue),portalElement,value:toDatePickerValue})})})]})})]})};export{MetadataDateField,MetadataDateField as default,MetadataDateFieldNonRelative};

package/package.json

@@ -1,21 +1,21 @@
 {
     "name": "@box/metadata-filter",
-    "version": "2.3.1",
+    "version": "2.3.2",
     "peerDependencies": {
-        "@box/blueprint-web": "^16.14.1",
-        "@box/blueprint-web-assets": "^5.6.1",
-        "@box/combobox-with-api": "^2.2.1",
-        "@box/metadata-taxonomy-picker": "^3.2.1",
+        "@box/blueprint-web": "^16.14.2",
+        "@box/blueprint-web-assets": "^5.6.2",
+        "@box/combobox-with-api": "^2.2.2",
+        "@box/metadata-taxonomy-picker": "^3.2.2",
         "formik": "^2.0.3",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.14.1",
-        "@box/blueprint-web-assets": "^5.6.1",
-        "@box/metadata-taxonomy-picker": "^3.2.1",
-        "@box/storybook-utils": "^1.2.1",
+        "@box/blueprint-web": "^16.14.2",
+        "@box/blueprint-web-assets": "^5.6.2",
+        "@box/metadata-taxonomy-picker": "^3.2.2",
+        "@box/storybook-utils": "^1.2.2",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
         "react-intl": "^6.4.2"