@box/metadata-filter 2.4.44 → 2.5.0

package/dist/chunks/metadata-date-field.module.js

@@ -1 +1 @@
-import '../styles/metadata-date-field.css';var metadata_date_field_module_default={container:`_container_10ye0_1`,dateSelect:`_dateSelect_10ye0_6`,rangeInputsContainer:`_rangeInputsContainer_10ye0_9`,verticalLayout:`_verticalLayout_10ye0_13`,inputContainer:`_inputContainer_10ye0_23`,advancedDateContainer:`_advancedDateContainer_10ye0_31`,datePicker:`_datePicker_10ye0_40`,daysInputContainer:`_daysInputContainer_10ye0_44`};export{metadata_date_field_module_default as t};
+import '../styles/metadata-date-field.css';var metadata_date_field_module_default={container:`_container_gg3u6_1`,dateSelect:`_dateSelect_gg3u6_6`,rangeInputsContainer:`_rangeInputsContainer_gg3u6_9`,verticalLayout:`_verticalLayout_gg3u6_13`,inputContainer:`_inputContainer_gg3u6_23`,advancedDateContainer:`_advancedDateContainer_gg3u6_31`,datePicker:`_datePicker_gg3u6_40`,daysInputContainer:`_daysInputContainer_gg3u6_44`,compact:`_compact_gg3u6_48`};export{metadata_date_field_module_default as t};

package/dist/chunks/metadata-float-field-advanced.js

@@ -1 +1 @@
-import{n as RangeLabelType,t as FilterKeyTypes}from"./types.js";import messages from"../esm/lib/messages.js";import{t as AdvancedFilterSelect}from"./advanced-filter-select.js";import{fieldDefaultProps}from"../esm/lib/components/metadata-filter-fields/components/constants.js";import{FloatInputDisplayState,getInputDisplayState,getInputValues}from"../esm/lib/components/metadata-filter-fields/components/metadata-float-field/utils.js";import{createAdvancedFilterOptionHandler,createInputChangeHandler}from"../esm/lib/components/metadata-filter-fields/components/metadata-float-field/handlers.js";import{n as useFloatValidation}from"./use-float-validation.js";import{TextInput}from"@box/blueprint-web";import{Field}from"formik";import{useCallback,useState}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import '../styles/metadata-float-field-advanced.css';var metadata_float_field_module_default={container:`_container_jjzra_1`,rangeInputsContainer:`_rangeInputsContainer_jjzra_6`,inputContainer:`_inputContainer_jjzra_16`,advancedFilterContainer:`_advancedFilterContainer_jjzra_23`},MetadataFloatFieldAdvanced=({label,labelSubtitle,fieldNamePrefix,disableForm,onAdvancedFilterOptionChange,fieldAdvancedFilterOptions,filterOptionsMap,hasAccordion,isModified})=>{let intl=useIntl(),fieldName=`${fieldNamePrefix}.value.enum[0]`,[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),[advancedFilterOption,setAdvancedFilterOption]=useState(fieldAdvancedFilterOptions||FilterKeyTypes.EQUALS),{validateFloats}=useFloatValidation(),handleAdvancedFilterOptionChange=useCallback((value,fromValue,toValue,form)=>createAdvancedFilterOptionHandler(fieldName,onAdvancedFilterOptionChange,setAdvancedFilterOption)(value,fromValue,toValue,form),[fieldName,onAdvancedFilterOptionChange,setAdvancedFilterOption]),handleFromOnChange=useCallback((value,otherValue,form)=>createInputChangeHandler(fieldName,advancedFilterOption,setLastChangedField,RangeLabelType.FROM)(value,otherValue,form),[fieldName,advancedFilterOption]),handleToOnChange=useCallback((value,otherValue,form)=>createInputChangeHandler(fieldName,advancedFilterOption,setLastChangedField,RangeLabelType.TO)(value,otherValue,form),[fieldName,advancedFilterOption]);return jsx(`div`,{className:metadata_float_field_module_default.advancedFilterContainer,"data-testid":`${label}-field`,children:jsx(Field,{name:fieldName,validate:value=>{let currentInputValues=getInputValues(value,!0);return validateFloats(currentInputValues.from,currentInputValues.to,lastChangedField,!0)},children:({field,meta,form})=>{let currentInputValues=getInputValues(field.value,!0),displayState=getInputDisplayState(advancedFilterOption),showInputs=displayState!==FloatInputDisplayState.NONE,showSingleInput=displayState===FloatInputDisplayState.SINGLE,showBothInputs=displayState===FloatInputDisplayState.BOTH,fromError=validateFloats(currentInputValues.from,currentInputValues.to,RangeLabelType.FROM,!0),toError=validateFloats(currentInputValues.from,currentInputValues.to,RangeLabelType.TO,!0);return jsxs(Fragment,{children:[jsx(AdvancedFilterSelect,{disableForm,fieldAdvancedFilterOptions,fieldNamePrefix,filterOptionsMap,isModified,label,labelSubtitle,onAdvancedFilterOptionChange,onValueChange:value=>handleAdvancedFilterOptionChange(value,currentInputValues.from,currentInputValues.to,form),showLabel:!hasAccordion,value:advancedFilterOption}),showInputs&&jsxs(`div`,{className:metadata_float_field_module_default.rangeInputsContainer,children:[(showSingleInput||showBothInputs)&&jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,disabled:disableForm,error:showSingleInput?meta.error:fromError,hideLabel:!0,label:intl.formatMessage(messages.fieldFromLabel,{label}),onChange:e=>handleFromOnChange(e.currentTarget.value,currentInputValues.to,form),placeholder:showBothInputs?intl.formatMessage(messages.minValuePlaceholder):intl.formatMessage(messages.enterNumberPlaceholder),value:currentInputValues.from})}),showBothInputs&&jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,disabled:disableForm,error:toError,hideLabel:!0,label:intl.formatMessage(messages.fieldToLabel,{label}),onChange:e=>handleToOnChange(e.currentTarget.value,currentInputValues.from,form),placeholder:intl.formatMessage(messages.maxValuePlaceholder),value:currentInputValues.to})})]})]})}})})};export{metadata_float_field_module_default as n,MetadataFloatFieldAdvanced as t};
+import{n as RangeLabelType,t as FilterKeyTypes}from"./types.js";import messages from"../esm/lib/messages.js";import{t as AdvancedFilterSelect}from"./advanced-filter-select.js";import{fieldDefaultProps}from"../esm/lib/components/metadata-filter-fields/components/constants.js";import{FloatInputDisplayState,getInputDisplayState,getInputValues}from"../esm/lib/components/metadata-filter-fields/components/metadata-float-field/utils.js";import{createAdvancedFilterOptionHandler,createInputChangeHandler}from"../esm/lib/components/metadata-filter-fields/components/metadata-float-field/handlers.js";import{n as useFloatValidation}from"./use-float-validation.js";import{TextInput}from"@box/blueprint-web";import{Field}from"formik";import{useCallback,useState}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import '../styles/metadata-float-field-advanced.css';var metadata_float_field_module_default={container:`_container_sgq8z_1`,rangeInputsContainer:`_rangeInputsContainer_sgq8z_6`,inputContainer:`_inputContainer_sgq8z_16`,advancedFilterContainer:`_advancedFilterContainer_sgq8z_23`,compact:`_compact_sgq8z_44`},MetadataFloatFieldAdvanced=({label,labelSubtitle,fieldNamePrefix,disableForm,onAdvancedFilterOptionChange,fieldAdvancedFilterOptions,filterOptionsMap,hasAccordion,isModified})=>{let intl=useIntl(),fieldName=`${fieldNamePrefix}.value.enum[0]`,[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),[advancedFilterOption,setAdvancedFilterOption]=useState(fieldAdvancedFilterOptions||FilterKeyTypes.EQUALS),{validateFloats}=useFloatValidation(),handleAdvancedFilterOptionChange=useCallback((value,fromValue,toValue,form)=>createAdvancedFilterOptionHandler(fieldName,onAdvancedFilterOptionChange,setAdvancedFilterOption)(value,fromValue,toValue,form),[fieldName,onAdvancedFilterOptionChange,setAdvancedFilterOption]),handleFromOnChange=useCallback((value,otherValue,form)=>createInputChangeHandler(fieldName,advancedFilterOption,setLastChangedField,RangeLabelType.FROM)(value,otherValue,form),[fieldName,advancedFilterOption]),handleToOnChange=useCallback((value,otherValue,form)=>createInputChangeHandler(fieldName,advancedFilterOption,setLastChangedField,RangeLabelType.TO)(value,otherValue,form),[fieldName,advancedFilterOption]);return jsx(`div`,{className:metadata_float_field_module_default.advancedFilterContainer,"data-testid":`${label}-field`,children:jsx(Field,{name:fieldName,validate:value=>{let currentInputValues=getInputValues(value,!0);return validateFloats(currentInputValues.from,currentInputValues.to,lastChangedField,!0)},children:({field,meta,form})=>{let currentInputValues=getInputValues(field.value,!0),displayState=getInputDisplayState(advancedFilterOption),showInputs=displayState!==FloatInputDisplayState.NONE,showSingleInput=displayState===FloatInputDisplayState.SINGLE,showBothInputs=displayState===FloatInputDisplayState.BOTH,fromError=validateFloats(currentInputValues.from,currentInputValues.to,RangeLabelType.FROM,!0),toError=validateFloats(currentInputValues.from,currentInputValues.to,RangeLabelType.TO,!0);return jsxs(Fragment,{children:[jsx(AdvancedFilterSelect,{disableForm,fieldAdvancedFilterOptions,fieldNamePrefix,filterOptionsMap,isModified,label,labelSubtitle,onAdvancedFilterOptionChange,onValueChange:value=>handleAdvancedFilterOptionChange(value,currentInputValues.from,currentInputValues.to,form),showLabel:!hasAccordion,value:advancedFilterOption}),showInputs&&jsxs(`div`,{className:metadata_float_field_module_default.rangeInputsContainer,children:[(showSingleInput||showBothInputs)&&jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,disabled:disableForm,error:showSingleInput?meta.error:fromError,hideLabel:!0,label:intl.formatMessage(messages.fieldFromLabel,{label}),onChange:e=>handleFromOnChange(e.currentTarget.value,currentInputValues.to,form),placeholder:showBothInputs?intl.formatMessage(messages.minValuePlaceholder):intl.formatMessage(messages.enterNumberPlaceholder),value:currentInputValues.from})}),showBothInputs&&jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,disabled:disableForm,error:toError,hideLabel:!0,label:intl.formatMessage(messages.fieldToLabel,{label}),onChange:e=>handleToOnChange(e.currentTarget.value,currentInputValues.from,form),placeholder:intl.formatMessage(messages.maxValuePlaceholder),value:currentInputValues.to})})]})]})}})})};export{metadata_float_field_module_default as n,MetadataFloatFieldAdvanced as t};

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`,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,isCompact})=>{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,!isCompact&&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,hideLabel:isCompact,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,hideLabel:isCompact,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:clsx(metadata_date_field_module_default.container,isCompact&&metadata_date_field_module_default.compact),"data-testid":`${label}-field`,children:[!(hasAccordion||isCompact)&&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`,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 clsx from"clsx";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,isCompact})=>{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:clsx(metadata_date_field_module_default.container,isCompact&&metadata_date_field_module_default.compact),"data-testid":`${label}-field`,children:[!(hasAccordion||isCompact)&&jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),jsx(DateI18nProvider,{locale,children:jsxs(`div`,{className:clsx(metadata_date_field_module_default.rangeInputsContainer,!isCompact&&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,hideLabel:isCompact,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,hideLabel:isCompact,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/dist/esm/lib/components/metadata-filter-fields/components/metadata-float-field/metadata-float-field.js

@@ -1 +1 @@
-import{n as RangeLabelType}from"../../../../../../chunks/types.js";import messages from"../../../../messages.js";import{fieldDefaultProps}from"../constants.js";import{n as metadata_float_field_module_default,t as MetadataFloatFieldAdvanced}from"../../../../../../chunks/metadata-float-field-advanced.js";import{n as useFloatValidation,r as ErrorType}from"../../../../../../chunks/use-float-validation.js";import{Text,TextInput}from"@box/blueprint-web";import{Field,getIn,useFormikContext}from"formik";import{useRef,useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var MetadataFloatFieldBase=({label,fieldNamePrefix,disableForm,hasAccordion})=>{let intl=useIntl(),[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),{values,setFieldValue,setFieldTouched}=useFormikContext(),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,fromValue=getIn(values,fromFieldName),toValue=getIn(values,toFieldName),fromValidationRef=useRef(fromValue),toValidationRef=useRef(toValue),{validateFloats,fromErrorType,toErrorType}=useFloatValidation(),handleFromOnChange=value=>{fromValidationRef.current=value,setFieldValue(fromFieldName,value),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=value=>{toValidationRef.current=value,setFieldValue(toFieldName,value),setLastChangedField(RangeLabelType.TO)},handleOnBlur=(fieldName,type)=>{setFieldTouched(fieldName,!0),setLastChangedField(type)},shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField);return jsxs(`div`,{className:metadata_float_field_module_default.container,"data-testid":`${label}-field`,children:[!hasAccordion&&jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),jsxs(`div`,{className:metadata_float_field_module_default.rangeInputsContainer,children:[jsx(Field,{name:`${fromFieldName}`,validate:()=>validateFloats(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,...field,"data-target-id":`TextInput-${fieldNamePrefix}_from`,disabled:disableForm,error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,label:intl.formatMessage(messages.fieldFromLabel,{label}),onBlur:()=>handleOnBlur(fromFieldName,RangeLabelType.FROM),onChange:e=>handleFromOnChange(e.currentTarget.value),placeholder:`0`})})}),jsx(Field,{name:`${toFieldName}`,validate:()=>validateFloats(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,...field,"data-target-id":`TextInput-${fieldNamePrefix}_to`,disabled:disableForm,error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,label:intl.formatMessage(messages.fieldToLabel,{label}),onBlur:()=>handleOnBlur(toFieldName,RangeLabelType.TO),onChange:e=>handleToOnChange(e.currentTarget.value),placeholder:`0`})})})]})]})},MetadataFloatField=({isAdvancedFilterEnabled,...props})=>jsx(isAdvancedFilterEnabled?MetadataFloatFieldAdvanced:MetadataFloatFieldBase,{...props});export{MetadataFloatField,MetadataFloatField as default};
+import{n as RangeLabelType}from"../../../../../../chunks/types.js";import messages from"../../../../messages.js";import{fieldDefaultProps}from"../constants.js";import{n as metadata_float_field_module_default,t as MetadataFloatFieldAdvanced}from"../../../../../../chunks/metadata-float-field-advanced.js";import{n as useFloatValidation,r as ErrorType}from"../../../../../../chunks/use-float-validation.js";import{Text,TextInput}from"@box/blueprint-web";import{Field,getIn,useFormikContext}from"formik";import{useRef,useState}from"react";import{useIntl}from"react-intl";import clsx from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var MetadataFloatFieldBase=({label,fieldNamePrefix,disableForm,hasAccordion,isCompact,fromPlaceholder=`0`,toPlaceholder=`0`})=>{let intl=useIntl(),[lastChangedField,setLastChangedField]=useState(RangeLabelType.FROM),{values,setFieldValue,setFieldTouched}=useFormikContext(),fromFieldName=`${fieldNamePrefix}.value.range.gt`,toFieldName=`${fieldNamePrefix}.value.range.lt`,fromValue=getIn(values,fromFieldName),toValue=getIn(values,toFieldName),fromValidationRef=useRef(fromValue),toValidationRef=useRef(toValue),{validateFloats,fromErrorType,toErrorType}=useFloatValidation(),handleFromOnChange=value=>{fromValidationRef.current=value,setFieldValue(fromFieldName,value),setLastChangedField(RangeLabelType.FROM)},handleToOnChange=value=>{toValidationRef.current=value,setFieldValue(toFieldName,value),setLastChangedField(RangeLabelType.TO)},handleOnBlur=(fieldName,type)=>{setFieldTouched(fieldName,!0),setLastChangedField(type)},shouldHideError=(thisErrorType,otherErrorType,isNotLastChangedField)=>!!(thisErrorType===ErrorType.OVERLAPPING&&isNotLastChangedField);return jsxs(`div`,{className:clsx(metadata_float_field_module_default.container,isCompact&&metadata_float_field_module_default.compact),"data-testid":`${label}-field`,children:[!(hasAccordion||isCompact)&&jsx(Text,{as:`span`,color:`textOnLightSecondary`,variant:`bodyDefaultBold`,children:label}),jsxs(`div`,{className:metadata_float_field_module_default.rangeInputsContainer,children:[jsx(Field,{name:`${fromFieldName}`,validate:()=>validateFloats(fromValidationRef.current,toValidationRef.current,RangeLabelType.FROM),children:({field,meta})=>jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,...field,"data-target-id":`TextInput-${fieldNamePrefix}_from`,disabled:disableForm,error:shouldHideError(fromErrorType,toErrorType,lastChangedField!==RangeLabelType.FROM)?void 0:meta.error,hideLabel:isCompact,label:intl.formatMessage(messages.fieldFromLabel,{label}),onBlur:()=>handleOnBlur(fromFieldName,RangeLabelType.FROM),onChange:e=>handleFromOnChange(e.currentTarget.value),placeholder:fromPlaceholder})})}),jsx(Field,{name:`${toFieldName}`,validate:()=>validateFloats(fromValidationRef.current,toValidationRef.current,RangeLabelType.TO),children:({field,meta})=>jsx(`div`,{className:metadata_float_field_module_default.inputContainer,children:jsx(TextInput,{...fieldDefaultProps,...field,"data-target-id":`TextInput-${fieldNamePrefix}_to`,disabled:disableForm,error:shouldHideError(toErrorType,fromErrorType,lastChangedField!==RangeLabelType.TO)?void 0:meta.error,hideLabel:isCompact,label:intl.formatMessage(messages.fieldToLabel,{label}),onBlur:()=>handleOnBlur(toFieldName,RangeLabelType.TO),onChange:e=>handleToOnChange(e.currentTarget.value),placeholder:toPlaceholder})})})]})]})},MetadataFloatField=({isAdvancedFilterEnabled,...props})=>jsx(isAdvancedFilterEnabled?MetadataFloatFieldAdvanced:MetadataFloatFieldBase,{...props});export{MetadataFloatField,MetadataFloatField as default};

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

@@ -1 +1 @@
-import{t as FilterKeyTypes}from"../../../../../../chunks/types.js";import messages from"../../../../messages.js";import{t as AdvancedFilterSelect}from"../../../../../../chunks/advanced-filter-select.js";import{fieldDefaultProps}from"../constants.js";import{createFieldValue,getInitialAdvancedFilterValue,getInputValue,shouldHideTextInput}from"./utils.js";import{TextInput}from"@box/blueprint-web";import{Field}from"formik";import{useCallback,useState}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";var MetadataStringField=({label,labelSubtitle,fieldNamePrefix,disableForm,isAdvancedFilterEnabled,onAdvancedFilterOptionChange,fieldAdvancedFilterOptions,filterOptionsMap,hasAccordion,isModified,placeholder})=>{let intl=useIntl(),fieldName=`${fieldNamePrefix}.value.enum[0]`,[advancedFilterOption,setAdvancedFilterOption]=useState(getInitialAdvancedFilterValue(fieldAdvancedFilterOptions,filterOptionsMap)||FilterKeyTypes.CONTAINS),handleAdvancedFilterOptionChange=useCallback((value,inputValue,form)=>{let selectedOption=value;setAdvancedFilterOption(selectedOption),onAdvancedFilterOptionChange?.(fieldName,selectedOption);let newValue=createFieldValue(inputValue,value,isAdvancedFilterEnabled);form.setFieldValue(fieldName,newValue)},[fieldName,isAdvancedFilterEnabled,onAdvancedFilterOptionChange]),handleTextInputChange=useCallback((event,form)=>{let newInputValue=event.target.value,newValue=createFieldValue(newInputValue,advancedFilterOption,isAdvancedFilterEnabled);form.setFieldValue(fieldName,newValue)},[advancedFilterOption,isAdvancedFilterEnabled,fieldName]);return jsx(`div`,{"data-testid":`${label}-field`,children:jsx(Field,{name:fieldName,children:({field,meta,form})=>{let inputValue=getInputValue(field.value,isAdvancedFilterEnabled);return jsxs(Fragment,{children:[isAdvancedFilterEnabled&&jsx(AdvancedFilterSelect,{disableForm,fieldAdvancedFilterOptions,fieldNamePrefix,filterOptionsMap,isModified,label,labelSubtitle,onAdvancedFilterOptionChange,onValueChange:value=>handleAdvancedFilterOptionChange(value,inputValue,form),showLabel:isAdvancedFilterEnabled&&!hasAccordion,value:advancedFilterOption}),!shouldHideTextInput(isAdvancedFilterEnabled,advancedFilterOption)&&jsx(TextInput,{...fieldDefaultProps,...field,"aria-label":intl.formatMessage(messages.enterValueAriaLabel,{label}),"data-target-id":`TextInput-${fieldNamePrefix}`,disabled:disableForm,error:meta.error,hideLabel:isAdvancedFilterEnabled||hasAccordion,label,onChange:event=>handleTextInputChange(event,form),placeholder:placeholder||intl.formatMessage(messages.setValuePlaceholder),value:inputValue})]})}})})};MetadataStringField.displayName=`MetadataStringField`;export{MetadataStringField,MetadataStringField as default};
+import{t as FilterKeyTypes}from"../../../../../../chunks/types.js";import messages from"../../../../messages.js";import{t as AdvancedFilterSelect}from"../../../../../../chunks/advanced-filter-select.js";import{fieldDefaultProps}from"../constants.js";import{createFieldValue,getInitialAdvancedFilterValue,getInputValue,shouldHideTextInput}from"./utils.js";import{TextInput}from"@box/blueprint-web";import{Field}from"formik";import{useCallback,useState}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";var MetadataStringField=({label,labelSubtitle,fieldNamePrefix,disableForm,isAdvancedFilterEnabled,onAdvancedFilterOptionChange,fieldAdvancedFilterOptions,filterOptionsMap,hasAccordion,isCompact,isModified,placeholder})=>{let intl=useIntl(),fieldName=`${fieldNamePrefix}.value.enum[0]`,[advancedFilterOption,setAdvancedFilterOption]=useState(getInitialAdvancedFilterValue(fieldAdvancedFilterOptions,filterOptionsMap)||FilterKeyTypes.CONTAINS),handleAdvancedFilterOptionChange=useCallback((value,inputValue,form)=>{let selectedOption=value;setAdvancedFilterOption(selectedOption),onAdvancedFilterOptionChange?.(fieldName,selectedOption);let newValue=createFieldValue(inputValue,value,isAdvancedFilterEnabled);form.setFieldValue(fieldName,newValue)},[fieldName,isAdvancedFilterEnabled,onAdvancedFilterOptionChange]),handleTextInputChange=useCallback((event,form)=>{let newInputValue=event.target.value,newValue=createFieldValue(newInputValue,advancedFilterOption,isAdvancedFilterEnabled);form.setFieldValue(fieldName,newValue)},[advancedFilterOption,isAdvancedFilterEnabled,fieldName]);return jsx(`div`,{"data-testid":`${label}-field`,children:jsx(Field,{name:fieldName,children:({field,meta,form})=>{let inputValue=getInputValue(field.value,isAdvancedFilterEnabled);return jsxs(Fragment,{children:[isAdvancedFilterEnabled&&jsx(AdvancedFilterSelect,{disableForm,fieldAdvancedFilterOptions,fieldNamePrefix,filterOptionsMap,isModified,label,labelSubtitle,onAdvancedFilterOptionChange,onValueChange:value=>handleAdvancedFilterOptionChange(value,inputValue,form),showLabel:isAdvancedFilterEnabled&&!hasAccordion&&!isCompact,value:advancedFilterOption}),!shouldHideTextInput(isAdvancedFilterEnabled,advancedFilterOption)&&jsx(TextInput,{...fieldDefaultProps,...field,"aria-label":intl.formatMessage(messages.enterValueAriaLabel,{label}),"data-target-id":`TextInput-${fieldNamePrefix}`,disabled:disableForm,error:meta.error,hideLabel:isAdvancedFilterEnabled||hasAccordion||isCompact,label,onChange:event=>handleTextInputChange(event,form),placeholder:placeholder||intl.formatMessage(messages.setValuePlaceholder),value:inputValue})]})}})})};MetadataStringField.displayName=`MetadataStringField`;export{MetadataStringField,MetadataStringField as default};

package/dist/styles/metadata-date-field.css

@@ -1 +1 @@
-._container_10ye0_1{gap:var(--space-2);flex-direction:column;display:flex}._container_10ye0_1 ._dateSelect_10ye0_6{margin-top:var(--space-3)}._container_10ye0_1 ._rangeInputsContainer_10ye0_9{gap:var(--space-2);display:flex}._container_10ye0_1 ._rangeInputsContainer_10ye0_9._verticalLayout_10ye0_13{gap:var(--space-4);flex-direction:column}@media (width<=374px){._container_10ye0_1 ._rangeInputsContainer_10ye0_9{gap:var(--space-4);flex-direction:column}}._container_10ye0_1 ._rangeInputsContainer_10ye0_9 ._inputContainer_10ye0_23{flex-direction:column;flex-grow:0;width:100%;min-width:0;display:flex}._advancedDateContainer_10ye0_31{flex-direction:column;display:flex}._advancedDateContainer_10ye0_31 ._rangeInputsContainer_10ye0_9{gap:var(--space-2);flex-direction:column;display:flex}._advancedDateContainer_10ye0_31 ._rangeInputsContainer_10ye0_9 ._datePicker_10ye0_40{flex-grow:0;width:100%}._advancedDateContainer_10ye0_31 ._daysInputContainer_10ye0_44{width:100%}
+._container_gg3u6_1{gap:var(--space-2);flex-direction:column;display:flex}._container_gg3u6_1 ._dateSelect_gg3u6_6{margin-top:var(--space-3)}._container_gg3u6_1 ._rangeInputsContainer_gg3u6_9{gap:var(--space-2);display:flex}._container_gg3u6_1 ._rangeInputsContainer_gg3u6_9._verticalLayout_gg3u6_13{gap:var(--space-4);flex-direction:column}@media (width<=374px){._container_gg3u6_1 ._rangeInputsContainer_gg3u6_9{gap:var(--space-4);flex-direction:column}}._container_gg3u6_1 ._rangeInputsContainer_gg3u6_9 ._inputContainer_gg3u6_23{flex-direction:column;flex-grow:0;width:100%;min-width:0;display:flex}._advancedDateContainer_gg3u6_31{flex-direction:column;display:flex}._advancedDateContainer_gg3u6_31 ._rangeInputsContainer_gg3u6_9{gap:var(--space-2);flex-direction:column;display:flex}._advancedDateContainer_gg3u6_31 ._rangeInputsContainer_gg3u6_9 ._datePicker_gg3u6_40{flex-grow:0;width:100%}._advancedDateContainer_gg3u6_31 ._daysInputContainer_gg3u6_44{width:100%}._container_gg3u6_1._compact_gg3u6_48 ._rangeInputsContainer_gg3u6_9{flex-wrap:nowrap}@media (width<=374px){._container_gg3u6_1._compact_gg3u6_48 ._rangeInputsContainer_gg3u6_9{gap:var(--space-2);flex-direction:row}}._container_gg3u6_1._compact_gg3u6_48 ._rangeInputsContainer_gg3u6_9 ._inputContainer_gg3u6_23{width:auto;min-width:calc(var(--bp-size-200) * 2)}

package/dist/styles/metadata-float-field-advanced.css

@@ -1 +1 @@
-._container_jjzra_1{gap:var(--space-2);flex-direction:column;display:flex}._container_jjzra_1 ._rangeInputsContainer_jjzra_6{gap:var(--space-1);display:flex}@media (width<=374px){._container_jjzra_1 ._rangeInputsContainer_jjzra_6{gap:var(--space-4);flex-direction:column}}._container_jjzra_1 ._rangeInputsContainer_jjzra_6 ._inputContainer_jjzra_16{flex-direction:column;width:100%;min-width:0;display:flex}._advancedFilterContainer_jjzra_23{flex-direction:column;display:flex}._advancedFilterContainer_jjzra_23 ._rangeInputsContainer_jjzra_6{gap:var(--space-1);display:flex}@media (width<=374px){._advancedFilterContainer_jjzra_23 ._rangeInputsContainer_jjzra_6{gap:var(--space-4);flex-direction:column}}._advancedFilterContainer_jjzra_23 ._rangeInputsContainer_jjzra_6 ._inputContainer_jjzra_16{flex-direction:column;width:100%;min-width:0;display:flex}
+._container_sgq8z_1{gap:var(--space-2);flex-direction:column;display:flex}._container_sgq8z_1 ._rangeInputsContainer_sgq8z_6{gap:var(--space-1);display:flex}@media (width<=374px){._container_sgq8z_1 ._rangeInputsContainer_sgq8z_6{gap:var(--space-4);flex-direction:column}}._container_sgq8z_1 ._rangeInputsContainer_sgq8z_6 ._inputContainer_sgq8z_16{flex-direction:column;width:100%;min-width:0;display:flex}._advancedFilterContainer_sgq8z_23{flex-direction:column;display:flex}._advancedFilterContainer_sgq8z_23 ._rangeInputsContainer_sgq8z_6{gap:var(--space-1);display:flex}@media (width<=374px){._advancedFilterContainer_sgq8z_23 ._rangeInputsContainer_sgq8z_6{gap:var(--space-4);flex-direction:column}}._advancedFilterContainer_sgq8z_23 ._rangeInputsContainer_sgq8z_6 ._inputContainer_sgq8z_16{flex-direction:column;width:100%;min-width:0;display:flex}._container_sgq8z_1._compact_sgq8z_44 ._rangeInputsContainer_sgq8z_6{flex-wrap:nowrap}@media (width<=374px){._container_sgq8z_1._compact_sgq8z_44 ._rangeInputsContainer_sgq8z_6{gap:var(--space-1);flex-direction:row}}._container_sgq8z_1._compact_sgq8z_44 ._rangeInputsContainer_sgq8z_6 ._inputContainer_sgq8z_16{width:auto;max-width:var(--bp-size-240)}

package/dist/types/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field-relative.d.ts

@@ -1,3 +1,3 @@
 import { MetadataDateFieldProps } from '../../types';
-export declare const MetadataDateFieldRelative: ({ customDateFilterOptions, disableForm, fieldNamePrefix, label, locale, portalElement, hasAccordion, }: MetadataDateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataDateFieldRelative: ({ customDateFilterOptions, disableForm, fieldNamePrefix, label, locale, portalElement, hasAccordion, isCompact, }: MetadataDateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataDateFieldRelative;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-date-field/metadata-date-field.d.ts

@@ -1,4 +1,4 @@
 import { MetadataDateFieldProps } from '../../types';
 export declare const MetadataDateField: ({ canUseRelativeDates, isAdvancedFilterEnabled, ...props }: MetadataDateFieldProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MetadataDateFieldNonRelative: ({ customFieldLabels, direction, disableForm, fieldNamePrefix, label, locale, portalElement, hasAccordion, }: MetadataDateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataDateFieldNonRelative: ({ customFieldLabels, direction, disableForm, fieldNamePrefix, label, locale, portalElement, hasAccordion, isCompact, }: MetadataDateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataDateField;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-string-field/metadata-string-field.d.ts

@@ -1,6 +1,6 @@
 import { MetadataFieldProps } from '../../types';
 export declare const MetadataStringField: {
-    ({ label, labelSubtitle, fieldNamePrefix, disableForm, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, hasAccordion, isModified, placeholder, }: MetadataFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, labelSubtitle, fieldNamePrefix, disableForm, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, hasAccordion, isCompact, isModified, placeholder, }: MetadataFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MetadataStringField;

package/dist/types/lib/components/metadata-filter-fields/types.d.ts

@@ -58,8 +58,11 @@ export type MetadataFieldProps = {
     customFieldLabels?: Array<string>;
     customDateFilterOptions?: Array<CustomDateFilterOptionsProps>;
     hasAccordion?: boolean;
+    isCompact?: boolean;
     isModified?: boolean;
     placeholder?: string;
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
     hasExperimentalVirtualization?: boolean;
     locale?: string;
     taxonomyOptionsFetcher?: TaxonomyOptionsFetcher;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-filter",
-    "version": "2.4.44",
+    "version": "2.5.0",
     "peerDependencies": {
         "@box/blueprint-web": "^17.14.1",
         "@box/blueprint-web-assets": "^5.10.20",