@wix/site-ui 1.83.0 → 1.84.0

package/dist/Field/index.js

@@ -1,482 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useBaseUiId } from "../6046.js";
-import { useRefWithInit, EMPTY_OBJECT, mergeProps, useRenderElement } from "../8272.js";
-import { LabelableContext, FieldRootContext, useFieldRootContext, useLabelableContext, fieldValidityMapping, DEFAULT_VALIDITY_STATE } from "../1477.js";
-import { useStableCallback } from "../7541.js";
-import { useFormContext } from "../5085.js";
-import { useTimeout } from "../42.js";
-import { useIsoLayoutEffect, SafeReact } from "../6499.js";
-import { useFieldsetRootContext } from "../353.js";
+import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
 import { useLabel } from "../4143.js";
+import { SafeReact } from "../6499.js";
 import { error } from "../4026.js";
-import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
+import { useRenderElement } from "../8272.js";
 import { useCheckboxGroupContext } from "../8979.js";
+import { FieldRoot_FieldRoot, FieldDescription_FieldDescription, getCombinedFieldValidityData, LabelableProvider_LabelableProvider, FieldError_FieldError } from "../8972.js";
 import { FieldItemContext } from "../1457.js";
+import { useTransitionStatus } from "../880.js";
 import { Input_module, FieldControl_FieldControl } from "../8685.js";
 import * as __rspack_external_react from "react";
-const LabelableProvider_LabelableProvider = function(props) {
-    const defaultId = useBaseUiId();
-    const initialControlId = void 0 === props.controlId ? defaultId : props.controlId;
-    const [controlId, setControlIdState] = __rspack_external_react.useState(initialControlId);
-    const [labelId, setLabelId] = __rspack_external_react.useState(props.labelId);
-    const [messageIds, setMessageIds] = __rspack_external_react.useState([]);
-    const registrationsRef = useRefWithInit(()=>new Map());
-    const { messageIds: parentMessageIds } = useLabelableContext();
-    const registerControlId = useStableCallback((source, nextId)=>{
-        const registrations = registrationsRef.current;
-        if (void 0 === nextId) return void registrations.delete(source);
-        registrations.set(source, nextId);
-        setControlIdState((prev)=>{
-            if (0 === registrations.size) return;
-            let nextControlId;
-            for (const id of registrations.values()){
-                if (void 0 !== prev && id === prev) return prev;
-                if (void 0 === nextControlId) nextControlId = id;
-            }
-            return nextControlId;
-        });
-    });
-    const getDescriptionProps = __rspack_external_react.useCallback((externalProps)=>mergeProps({
-            'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || void 0
-        }, externalProps), [
-        parentMessageIds,
-        messageIds
-    ]);
-    const contextValue = __rspack_external_react.useMemo(()=>({
-            controlId,
-            registerControlId,
-            labelId,
-            setLabelId,
-            messageIds,
-            setMessageIds,
-            getDescriptionProps
-        }), [
-        controlId,
-        registerControlId,
-        labelId,
-        setLabelId,
-        messageIds,
-        setMessageIds,
-        getDescriptionProps
-    ]);
-    return /*#__PURE__*/ jsx(LabelableContext.Provider, {
-        value: contextValue,
-        children: props.children
-    });
-};
-if ("production" !== process.env.NODE_ENV) LabelableProvider_LabelableProvider.displayName = "LabelableProvider";
-function getCombinedFieldValidityData(validityData, invalid) {
-    return {
-        ...validityData,
-        state: {
-            ...validityData.state,
-            valid: !invalid && validityData.state.valid
-        }
-    };
-}
-const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
-function isOnlyValueMissing(state) {
-    if (!state || state.valid || !state.valueMissing) return false;
-    let onlyValueMissing = false;
-    for (const key of validityKeys)if ('valid' !== key) {
-        if ('valueMissing' === key) onlyValueMissing = state[key];
-        if (state[key]) onlyValueMissing = false;
-    }
-    return onlyValueMissing;
-}
-function useFieldValidation(params) {
-    const { formRef, clearErrors } = useFormContext();
-    const { setValidityData, validate, validityData, validationDebounceTime, invalid, markedDirtyRef, state, name, shouldValidateOnChange, getRegisteredFieldId } = params;
-    const { controlId, getDescriptionProps } = useLabelableContext();
-    const timeout = useTimeout();
-    const inputRef = __rspack_external_react.useRef(null);
-    const commit = useStableCallback(async (value, revalidate = false)=>{
-        const element = inputRef.current;
-        if (!element) return;
-        function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
-            const fieldId = getRegisteredFieldId() ?? controlId;
-            if (null == fieldId) return;
-            const currentFieldData = formRef.current.fields.get(fieldId);
-            if (!currentFieldData) return;
-            const validityDataWithFormErrors = getCombinedFieldValidityData(nextValidityData, externalInvalid);
-            formRef.current.fields.set(fieldId, {
-                ...currentFieldData,
-                validityData: validityDataWithFormErrors
-            });
-        }
-        if (revalidate) {
-            if (false !== state.valid) return;
-            const currentNativeValidity = element.validity;
-            if (!currentNativeValidity.valueMissing) {
-                const nextValidityData = {
-                    value,
-                    state: {
-                        ...DEFAULT_VALIDITY_STATE,
-                        valid: true
-                    },
-                    error: '',
-                    errors: [],
-                    initialValue: validityData.initialValue
-                };
-                element.setCustomValidity('');
-                updateRegisteredFieldValidity(nextValidityData, false);
-                setValidityData(nextValidityData);
-                return;
-            }
-            const currentNativeValidityObject = validityKeys.reduce((acc, key)=>{
-                acc[key] = currentNativeValidity[key];
-                return acc;
-            }, {});
-            if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) return;
-        }
-        function getState(el) {
-            const computedState = validityKeys.reduce((acc, key)=>{
-                acc[key] = el.validity[key];
-                return acc;
-            }, {});
-            let hasOnlyValueMissingError = false;
-            for (const key of validityKeys)if ('valid' !== key) {
-                if ('valueMissing' === key && computedState[key]) hasOnlyValueMissingError = true;
-                else if (computedState[key]) return computedState;
-            }
-            if (hasOnlyValueMissingError && !markedDirtyRef.current) {
-                computedState.valid = true;
-                computedState.valueMissing = false;
-            }
-            return computedState;
-        }
-        timeout.clear();
-        let result = null;
-        let validationErrors = [];
-        const nextState = getState(element);
-        let defaultValidationMessage;
-        const validateOnChange = shouldValidateOnChange();
-        if (element.validationMessage && !validateOnChange) {
-            defaultValidationMessage = element.validationMessage;
-            validationErrors = [
-                element.validationMessage
-            ];
-        } else {
-            const formValues = Array.from(formRef.current.fields.values()).reduce((acc, field)=>{
-                if (field.name) acc[field.name] = field.getValue();
-                return acc;
-            }, {});
-            const resultOrPromise = validate(value, formValues);
-            result = 'object' == typeof resultOrPromise && null !== resultOrPromise && 'then' in resultOrPromise ? await resultOrPromise : resultOrPromise;
-            if (null !== result) {
-                nextState.valid = false;
-                nextState.customError = true;
-                if (Array.isArray(result)) {
-                    validationErrors = result;
-                    element.setCustomValidity(result.join('\n'));
-                } else if (result) {
-                    validationErrors = [
-                        result
-                    ];
-                    element.setCustomValidity(result);
-                }
-            } else if (validateOnChange) {
-                element.setCustomValidity('');
-                nextState.customError = false;
-                if (element.validationMessage) {
-                    defaultValidationMessage = element.validationMessage;
-                    validationErrors = [
-                        element.validationMessage
-                    ];
-                } else if (element.validity.valid && !nextState.valid) nextState.valid = true;
-            }
-        }
-        const nextValidityData = {
-            value,
-            state: nextState,
-            error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
-            errors: validationErrors,
-            initialValue: validityData.initialValue
-        };
-        updateRegisteredFieldValidity(nextValidityData);
-        setValidityData(nextValidityData);
-    });
-    const getValidationProps = __rspack_external_react.useCallback((externalProps = {})=>mergeProps(getDescriptionProps, false === state.valid ? {
-            'aria-invalid': true
-        } : EMPTY_OBJECT, externalProps), [
-        getDescriptionProps,
-        state.valid
-    ]);
-    const getInputValidationProps = __rspack_external_react.useCallback((externalProps = {})=>mergeProps({
-            onChange (event) {
-                if (event.nativeEvent.defaultPrevented) return;
-                clearErrors(name);
-                if (!shouldValidateOnChange()) return void commit(event.currentTarget.value, true);
-                const element = event.currentTarget;
-                if ('' === element.value) return void commit(element.value);
-                timeout.clear();
-                if (validationDebounceTime) timeout.start(validationDebounceTime, ()=>{
-                    commit(element.value);
-                });
-                else commit(element.value);
-            }
-        }, getValidationProps(externalProps)), [
-        getValidationProps,
-        clearErrors,
-        name,
-        timeout,
-        commit,
-        validationDebounceTime,
-        shouldValidateOnChange
-    ]);
-    return __rspack_external_react.useMemo(()=>({
-            getValidationProps,
-            getInputValidationProps,
-            inputRef,
-            commit
-        }), [
-        getValidationProps,
-        getInputValidationProps,
-        commit
-    ]);
-}
-function useFieldControlRegistration(params) {
-    const { commit, invalid, markedDirtyRef, name, setRegisteredFieldId, setValidityData, validityData } = params;
-    const { formRef } = useFormContext();
-    const activeFieldControlSourceRef = __rspack_external_react.useRef(null);
-    const registrationRef = __rspack_external_react.useRef(null);
-    const fallbackControlRef = __rspack_external_react.useRef(null);
-    const getValueForForm = useStableCallback(()=>{
-        const registration = registrationRef.current;
-        if (!registration) return;
-        if (registration.getValue) return registration.getValue();
-        return registration.value;
-    });
-    const validate = useStableCallback(()=>{
-        const registration = registrationRef.current;
-        if (!registration) return;
-        let nextValue = registration.value;
-        if (void 0 === nextValue) nextValue = getValueForForm();
-        markedDirtyRef.current = true;
-        commit(nextValue);
-    });
-    function refreshRegistration() {
-        const registration = registrationRef.current;
-        if (!registration || !registration.id) return;
-        formRef.current.fields.set(registration.id, {
-            getValue: getValueForForm,
-            name,
-            controlRef: registration.controlRef ?? fallbackControlRef,
-            validityData: getCombinedFieldValidityData(validityData, invalid),
-            validate
-        });
-    }
-    function deleteRegistration(id = registrationRef.current?.id) {
-        if (id) formRef.current.fields.delete(id);
-    }
-    function syncInitialValue() {
-        const registration = registrationRef.current;
-        if (!registration) return;
-        let initialValue = registration.value;
-        if (void 0 === initialValue) initialValue = getValueForForm();
-        if (null === validityData.initialValue && null !== initialValue) setValidityData((prev)=>({
-                ...prev,
-                initialValue
-            }));
-    }
-    useIsoLayoutEffect(()=>{
-        const registration = registrationRef.current;
-        if (!registration || !registration.id) return;
-        formRef.current.fields.set(registration.id, {
-            getValue: getValueForForm,
-            name,
-            controlRef: registration.controlRef ?? fallbackControlRef,
-            validityData: getCombinedFieldValidityData(validityData, invalid),
-            validate
-        });
-    }, [
-        formRef,
-        getValueForForm,
-        invalid,
-        name,
-        validate,
-        validityData
-    ]);
-    useIsoLayoutEffect(()=>{
-        const fields = formRef.current.fields;
-        return ()=>{
-            const id = registrationRef.current?.id;
-            if (id) fields.delete(id);
-        };
-    }, [
-        formRef
-    ]);
-    return useStableCallback((source, registration)=>{
-        if (!registration) {
-            if (activeFieldControlSourceRef.current === source) {
-                activeFieldControlSourceRef.current = null;
-                deleteRegistration();
-                registrationRef.current = null;
-                setRegisteredFieldId(void 0);
-            }
-            return;
-        }
-        const previousId = registrationRef.current?.id;
-        activeFieldControlSourceRef.current = source;
-        registrationRef.current = registration;
-        setRegisteredFieldId(registration.id);
-        if (previousId && previousId !== registration.id) deleteRegistration(previousId);
-        syncInitialValue();
-        refreshRegistration();
-    });
-}
-const FieldRoot_FieldRootInner = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
-    const { errors, validationMode: formValidationMode, submitAttemptedRef } = useFormContext();
-    const { render, className, validate: validateProp, validationDebounceTime = 0, validationMode = formValidationMode, name, disabled: disabledProp = false, invalid: invalidProp, dirty: dirtyProp, touched: touchedProp, actionsRef, style, ...elementProps } = componentProps;
-    const { disabled: disabledFieldset } = useFieldsetRootContext();
-    const validate = useStableCallback(validateProp || (()=>null));
-    const disabled = disabledFieldset || disabledProp;
-    const [touchedState, setTouchedUnwrapped] = __rspack_external_react.useState(false);
-    const [dirtyState, setDirtyUnwrapped] = __rspack_external_react.useState(false);
-    const [filled, setFilled] = __rspack_external_react.useState(false);
-    const [focused, setFocused] = __rspack_external_react.useState(false);
-    const dirty = dirtyProp ?? dirtyState;
-    const touched = touchedProp ?? touchedState;
-    const markedDirtyRef = __rspack_external_react.useRef(false);
-    const registeredFieldIdRef = __rspack_external_react.useRef(void 0);
-    const getRegisteredFieldId = __rspack_external_react.useCallback(()=>registeredFieldIdRef.current, []);
-    const setRegisteredFieldId = __rspack_external_react.useCallback((id)=>{
-        registeredFieldIdRef.current = id;
-    }, []);
-    const setDirty = useStableCallback((value)=>{
-        if (void 0 !== dirtyProp) return;
-        if (value) markedDirtyRef.current = true;
-        setDirtyUnwrapped(value);
-    });
-    const setTouched = useStableCallback((value)=>{
-        if (void 0 !== touchedProp) return;
-        setTouchedUnwrapped(value);
-    });
-    const shouldValidateOnChange = useStableCallback(()=>'onChange' === validationMode || 'onSubmit' === validationMode && submitAttemptedRef.current);
-    const hasFormError = !!name && Object.hasOwn(errors, name) && void 0 !== errors[name];
-    const invalid = true === invalidProp || hasFormError;
-    const [validityData, setValidityData] = __rspack_external_react.useState({
-        state: DEFAULT_VALIDITY_STATE,
-        error: '',
-        errors: [],
-        value: null,
-        initialValue: null
-    });
-    const valid = !invalid && validityData.state.valid;
-    const state = __rspack_external_react.useMemo(()=>({
-            disabled,
-            touched,
-            dirty,
-            valid,
-            filled,
-            focused
-        }), [
-        disabled,
-        touched,
-        dirty,
-        valid,
-        filled,
-        focused
-    ]);
-    const validation = useFieldValidation({
-        setValidityData,
-        validate,
-        validityData,
-        validationDebounceTime,
-        invalid,
-        markedDirtyRef,
-        state,
-        name,
-        shouldValidateOnChange,
-        getRegisteredFieldId
-    });
-    const validityValue = validityData.value;
-    const handleImperativeValidate = __rspack_external_react.useCallback(()=>{
-        markedDirtyRef.current = true;
-        validation.commit(validityValue);
-    }, [
-        validation,
-        validityValue
-    ]);
-    const registerFieldControl = useFieldControlRegistration({
-        commit: validation.commit,
-        invalid,
-        markedDirtyRef,
-        name,
-        setRegisteredFieldId,
-        setValidityData,
-        validityData
-    });
-    __rspack_external_react.useImperativeHandle(actionsRef, ()=>({
-            validate: handleImperativeValidate
-        }), [
-        handleImperativeValidate
-    ]);
-    const contextValue = __rspack_external_react.useMemo(()=>({
-            invalid,
-            name,
-            validityData,
-            setValidityData,
-            disabled,
-            touched,
-            setTouched,
-            dirty,
-            setDirty,
-            filled,
-            setFilled,
-            focused,
-            setFocused,
-            validate,
-            validationMode,
-            validationDebounceTime,
-            shouldValidateOnChange,
-            state,
-            markedDirtyRef,
-            registerFieldControl,
-            validation
-        }), [
-        invalid,
-        name,
-        validityData,
-        disabled,
-        touched,
-        setTouched,
-        dirty,
-        setDirty,
-        filled,
-        setFilled,
-        focused,
-        setFocused,
-        validate,
-        validationMode,
-        validationDebounceTime,
-        shouldValidateOnChange,
-        state,
-        registerFieldControl,
-        validation
-    ]);
-    const element = useRenderElement('div', componentProps, {
-        ref: forwardedRef,
-        state,
-        props: elementProps,
-        stateAttributesMapping: fieldValidityMapping
-    });
-    return /*#__PURE__*/ jsx(FieldRootContext.Provider, {
-        value: contextValue,
-        children: element
-    });
-});
-if ("production" !== process.env.NODE_ENV) FieldRoot_FieldRootInner.displayName = "FieldRootInner";
-const FieldRoot_FieldRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
-    return /*#__PURE__*/ jsx(LabelableProvider_LabelableProvider, {
-        children: /*#__PURE__*/ jsx(FieldRoot_FieldRootInner, {
-            ...componentProps,
-            ref: forwardedRef
-        })
-    });
-});
-if ("production" !== process.env.NODE_ENV) FieldRoot_FieldRoot.displayName = "FieldRoot";
 const FieldLabel_FieldLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
     const { render, className, style, id: idProp, nativeLabel = true, ...elementProps } = componentProps;
     const fieldRootContext = useFieldRootContext(false);
@@ -518,108 +52,6 @@ const FieldLabel_FieldLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(f
     return element;
 });
 if ("production" !== process.env.NODE_ENV) FieldLabel_FieldLabel.displayName = "FieldLabel";
-const stateAttributesMapping = {
-    ...fieldValidityMapping,
-    ...transitionStatusMapping
-};
-const FieldError_FieldError = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
-    const { render, id: idProp, className, match, style, ...elementProps } = componentProps;
-    const id = useBaseUiId(idProp);
-    const { validityData, state: fieldState, name } = useFieldRootContext(false);
-    const { setMessageIds } = useLabelableContext();
-    const { errors } = useFormContext();
-    const formError = name ? errors[name] : null;
-    const hasSpecificMatch = 'string' == typeof match;
-    let rendered = false;
-    rendered = true === match ? true : hasSpecificMatch ? Boolean(validityData.state[match]) : Boolean(formError) || false === validityData.state.valid;
-    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
-    useIsoLayoutEffect(()=>{
-        if (!rendered || !id) return;
-        setMessageIds((v)=>v.concat(id));
-        return ()=>{
-            setMessageIds((v)=>v.filter((item)=>item !== id));
-        };
-    }, [
-        rendered,
-        id,
-        setMessageIds
-    ]);
-    const errorRef = __rspack_external_react.useRef(null);
-    const [lastRenderedMessage, setLastRenderedMessage] = __rspack_external_react.useState(null);
-    const [lastRenderedMessageKey, setLastRenderedMessageKey] = __rspack_external_react.useState(null);
-    const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/ jsx("ul", {
-        children: validityData.errors.map((message)=>/*#__PURE__*/ jsx("li", {
-                children: message
-            }, message))
-    }) : validityData.error;
-    const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
-    let errorKey = validityData.error;
-    if (null != formError) errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;
-    else if (validityData.errors.length > 1) errorKey = JSON.stringify(validityData.errors);
-    if (rendered && errorKey !== lastRenderedMessageKey) {
-        setLastRenderedMessageKey(errorKey);
-        setLastRenderedMessage(errorMessage);
-    }
-    useOpenChangeComplete({
-        open: rendered,
-        ref: errorRef,
-        onComplete () {
-            if (!rendered) setMounted(false);
-        }
-    });
-    const state = {
-        ...fieldState,
-        transitionStatus
-    };
-    const element = useRenderElement('div', componentProps, {
-        ref: [
-            forwardedRef,
-            errorRef
-        ],
-        state,
-        props: [
-            {
-                id,
-                children: rendered ? errorMessage : lastRenderedMessage
-            },
-            elementProps
-        ],
-        stateAttributesMapping: stateAttributesMapping,
-        enabled: mounted
-    });
-    if (!mounted) return null;
-    return element;
-});
-if ("production" !== process.env.NODE_ENV) FieldError_FieldError.displayName = "FieldError";
-const FieldDescription_FieldDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
-    const { render, id: idProp, className, style, ...elementProps } = componentProps;
-    const id = useBaseUiId(idProp);
-    const fieldRootContext = useFieldRootContext(false);
-    const { setMessageIds } = useLabelableContext();
-    useIsoLayoutEffect(()=>{
-        if (!id) return;
-        setMessageIds((v)=>v.concat(id));
-        return ()=>{
-            setMessageIds((v)=>v.filter((item)=>item !== id));
-        };
-    }, [
-        id,
-        setMessageIds
-    ]);
-    const element = useRenderElement('p', componentProps, {
-        ref: forwardedRef,
-        state: fieldRootContext.state,
-        props: [
-            {
-                id
-            },
-            elementProps
-        ],
-        stateAttributesMapping: fieldValidityMapping
-    });
-    return element;
-});
-if ("production" !== process.env.NODE_ENV) FieldDescription_FieldDescription.displayName = "FieldDescription";
 const FieldItem_FieldItem = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
     const { render, className, style, disabled: disabledProp = false, ...elementProps } = componentProps;
     const { state, disabled: rootDisabled } = useFieldRootContext(false);