react-aria-components/dist/HiddenDateInput.module.js

A library of styleable components built using React Aria

import {parseDateTime as $62z4d$parseDateTime, parseDate as $62z4d$parseDate} from "@internationalized/date";
import $62z4d$react from "react";
import {useVisuallyHidden as $62z4d$useVisuallyHidden} from "react-aria";

/*
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */ 


const $c699643d2073b351$var$dateSegments = [
    'day',
    'month',
    'year'
];
const $c699643d2073b351$var$granularityMap = {
    'hour': 1,
    'minute': 2,
    'second': 3
};
function $c699643d2073b351$export$f6a685cd1acbd1fa(props, state) {
    let { autoComplete: autoComplete, isDisabled: isDisabled, name: name } = props;
    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $62z4d$useVisuallyHidden)({
        style: {
            // Prevent page scrolling.
            position: 'fixed',
            top: 0,
            left: 0
        }
    });
    let inputStep = 60;
    if (state.granularity === 'second') inputStep = 1;
    else if (state.granularity === 'hour') inputStep = 3600;
    let dateValue = state.value == null ? '' : state.value.toString();
    let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
    let timeSegments = [
        'hour',
        'minute',
        'second'
    ];
    // Depending on the granularity, we only want to validate certain time segments
    let end = 0;
    if (timeSegments.includes(state.granularity)) {
        end = $c699643d2073b351$var$granularityMap[state.granularity];
        timeSegments = timeSegments.slice(0, end);
    }
    return {
        containerProps: {
            ...visuallyHiddenProps,
            'aria-hidden': true,
            // @ts-ignore
            ['data-react-aria-prevent-focus']: true,
            // @ts-ignore
            ['data-a11y-ignore']: 'aria-hidden-focus'
        },
        inputProps: {
            tabIndex: -1,
            autoComplete: autoComplete,
            disabled: isDisabled,
            type: inputType,
            // We set the form prop to an empty string to prevent the hidden date input's value from being submitted
            form: '',
            name: name,
            step: inputStep,
            value: dateValue,
            onChange: (e)=>{
                let targetString = e.target.value.toString();
                if (targetString) try {
                    let targetValue = (0, $62z4d$parseDateTime)(targetString);
                    if (state.granularity === 'day') targetValue = (0, $62z4d$parseDate)(targetString);
                    // We check to to see if setSegment exists in the state since it only exists in DateFieldState and not DatePickerState.
                    // The setValue method has different behavior depending on if it's coming from DateFieldState or DatePickerState.
                    // In DateFieldState, setValue firsts checks to make sure that each segment is filled before committing the newValue 
                    // which is why in the code below we first set each segment to validate it before committing the new value. 
                    // However, in DatePickerState, since we have to be able to commit values from the Calendar popover, we are also able to 
                    // set a new value when the field itself is empty.
                    if ('setSegment' in state) for(let type in targetValue){
                        if ($c699643d2073b351$var$dateSegments.includes(type)) state.setSegment(type, targetValue[type]);
                        if (timeSegments.includes(type)) state.setSegment(type, targetValue[type]);
                    }
                    state.setValue(targetValue);
                } catch  {
                // ignore
                }
            }
        }
    };
}
function $c699643d2073b351$export$eefa3e19139f00f3(props) {
    let { state: state } = props;
    let { containerProps: containerProps, inputProps: inputProps } = $c699643d2073b351$export$f6a685cd1acbd1fa({
        ...props
    }, state);
    return /*#__PURE__*/ (0, $62z4d$react).createElement("div", {
        ...containerProps,
        "data-testid": "hidden-dateinput-container"
    }, /*#__PURE__*/ (0, $62z4d$react).createElement("input", inputProps));
}


export {$c699643d2073b351$export$f6a685cd1acbd1fa as useHiddenDateInput, $c699643d2073b351$export$eefa3e19139f00f3 as HiddenDateInput};
//# sourceMappingURL=HiddenDateInput.module.js.map