@radix-ng/primitives 1.1.0 → 1.1.2

package/fesm2022/radix-ng-primitives-core.mjs

@@ -153,6 +153,7 @@ function injectNgControlState() {
     const touched = signal(false, { debugName: 'RdxNgControlState.touched' });
     let destroyed = false;
     let unsubscribe;
+    let resetControl;
     const connect = () => {
         if (destroyed) {
             return;
@@ -164,6 +165,7 @@ function injectNgControlState() {
         if (!control || typeof control.events?.subscribe !== 'function') {
             return;
         }
+        resetControl = (nextValue) => control.reset(nextValue);
         const sync = () => {
             name.set(ngControl.name == null ? undefined : String(ngControl.name));
             value.set(control.value);
@@ -197,7 +199,14 @@ function injectNgControlState() {
         disabled: disabled.asReadonly(),
         errors,
         dirty: dirty.asReadonly(),
-        touched: touched.asReadonly()
+        touched: touched.asReadonly(),
+        reset: (nextValue) => {
+            if (!resetControl) {
+                return false;
+            }
+            resetControl(nextValue);
+            return true;
+        }
     };
 }
 
@@ -1987,11 +1996,30 @@ function itemToStringLabel(value) {
     return String(value);
 }
 /**
- * Converts an item value to the string used for form serialization. Defaults to the same rules as
- * {@link itemToStringLabel}; kept as a separate export so a primitive can diverge label vs. value.
+ * Converts an item value to the string used for form serialization. A conventional `{ value, label }`
+ * item serializes its `value` member; other non-string values use Base UI-compatible JSON serialization
+ * with `String()` as a fallback. Kept separate so a primitive can diverge label vs. value.
  */
 function itemToStringValue(value) {
-    return itemToStringLabel(value);
+    if (value !== null && typeof value === 'object' && 'value' in value && 'label' in value) {
+        return serializeValue(value.value);
+    }
+    return serializeValue(value);
+}
+/** Base UI-compatible serialization fallback for native form values. */
+function serializeValue(value) {
+    if (isNullish(value)) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    try {
+        return JSON.stringify(value) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
 }
 /**
  * Compares two item values for equality using an optional {@link ItemValueComparator}.
@@ -2364,6 +2392,14 @@ class RdxFormUiControlBase {
     formUiTouchTarget() {
         return null;
     }
+    /**
+     * Resets a same-host Reactive/template-driven control without reporting the reset as a user edit.
+     * Returns `false` when no Angular `NgControl` is connected, so a control can fall back to its CVA
+     * change callback for an unusually early native reset.
+     */
+    resetNgControl(value) {
+        return this.ngControlState.reset(value);
+    }
     /**
      * Reset control-owned interaction state. Angular Signal Forms calls this optional custom-control
      * hook from `FieldState.reset()` after restoring the field value.
@@ -3367,6 +3403,138 @@ function getActiveElement(root = document) {
     return activeElement;
 }
 
+/**
+ * Converts a scalar or array model to HTML form values. `null` and `undefined` represent no
+ * successful control; arrays deliberately become repeated entries under the same field name.
+ */
+function serializeNativeFormValue(value, itemToStringValue$1 = itemToStringValue) {
+    const values = Array.isArray(value) ? value : [value];
+    return values.flatMap((entry) => (entry == null ? [] : [itemToStringValue$1(entry)]));
+}
+const NOOP_NATIVE_FORM_CONTROL = {
+    ownerForm: () => null,
+    sync: () => undefined,
+    requestSubmit: () => undefined
+};
+/**
+ * Adds native form semantics to a composite control, rendering hidden inputs only when the control
+ * has no native successful control of its own.
+ *
+ * A hidden input is necessary for a headless root to enter the platform's successful-controls tree
+ * (including older engines that do not dispatch `formdata` for `new FormData(form)`). One input is
+ * created per serialized value, preserving repeated-field semantics; controls with their own native
+ * input use this solely for reset and imperative-submit coordination.
+ *
+ * Generated inputs are browser-only. Rendering imperative sibling nodes on the server would put DOM
+ * outside Angular's hydration graph; the client creates them after its view has been claimed instead.
+ */
+function useNativeFormControl(options) {
+    const host = inject(ElementRef).nativeElement;
+    const ownerDocument = host.ownerDocument;
+    const destroyRef = inject(DestroyRef);
+    if (!ownerDocument || !isPlatformBrowser(inject(PLATFORM_ID))) {
+        return NOOP_NATIVE_FORM_CONTROL;
+    }
+    const inputs = [];
+    let defaultValue;
+    let defaultValues = [];
+    let hasDefaultValue = false;
+    let alive = true;
+    let viewClaimed = false;
+    const ownerForm = () => {
+        const formId = options.form();
+        const candidate = formId
+            ? ownerDocument.getElementById(formId)
+            : typeof host.closest === 'function'
+                ? host.closest('form')
+                : host.parentElement?.closest('form');
+        return candidate?.localName === 'form' ? candidate : null;
+    };
+    const sync = () => {
+        options.syncNativeControl?.();
+        const name = options.name();
+        const form = options.form();
+        const disabled = options.disabled();
+        const nativeControlOwnsValue = options.hasNativeControl?.() ?? false;
+        const values = options.value && options.serialize ? options.serialize(options.value()) : [];
+        // During hydration Angular must claim every server-rendered sibling before an imperative input
+        // can be inserted. The after-render callback below performs the first DOM synchronization.
+        if (!viewClaimed) {
+            return;
+        }
+        const shouldRender = Boolean(name && options.serialize && !nativeControlOwnsValue);
+        const count = shouldRender ? values.length : 0;
+        while (inputs.length > count) {
+            inputs.pop()?.remove();
+        }
+        while (inputs.length < count) {
+            const input = ownerDocument.createElement('input');
+            input.type = 'hidden';
+            const previous = inputs.at(-1);
+            host.parentNode?.insertBefore(input, previous ? previous.nextSibling : host.nextSibling);
+            inputs.push(input);
+        }
+        for (let index = 0; index < inputs.length; index++) {
+            const input = inputs[index];
+            input.name = name;
+            input.value = values[index];
+            input.disabled = disabled;
+            if (form) {
+                input.setAttribute('form', form);
+            }
+            else {
+                input.removeAttribute('form');
+            }
+            // Native reset reads `defaultValue`; retain the original default rather than accidentally
+            // promoting later user edits to the reset baseline.
+            if (!input.hasAttribute('data-rdx-native-form-control')) {
+                input.defaultValue = defaultValues[index] ?? values[index];
+                input.setAttribute('data-rdx-native-form-control', '');
+            }
+        }
+    };
+    effect(() => {
+        if (!hasDefaultValue && options.defaultValue) {
+            defaultValue = options.defaultValue();
+            defaultValues = options.serialize ? options.serialize(defaultValue) : [];
+            hasDefaultValue = true;
+        }
+    });
+    effect(sync);
+    afterNextRender(() => {
+        viewClaimed = true;
+        untracked(sync);
+    });
+    const onReset = (event) => {
+        if (event.target !== ownerForm() || !options.onReset || !hasDefaultValue) {
+            return;
+        }
+        // Native controls reset after the event. Check `defaultPrevented` in the microtask so a later
+        // bubble listener can still cancel the reset before the model follows it.
+        queueMicrotask(() => {
+            if (alive && !event.defaultPrevented) {
+                untracked(() => options.onReset(defaultValue));
+            }
+        });
+    };
+    ownerDocument.addEventListener('reset', onReset, true);
+    destroyRef.onDestroy(() => {
+        alive = false;
+        ownerDocument.removeEventListener('reset', onReset, true);
+        for (const input of inputs) {
+            input.remove();
+        }
+    });
+    return {
+        ownerForm,
+        sync,
+        requestSubmit: () => {
+            untracked(sync);
+            ownerForm()?.requestSubmit();
+        }
+    };
+}
+
 /**
  * Creates a resize observer effect for element
  *
@@ -4444,5 +4612,5 @@ var RdxPositionAlign;
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, injectNgControlState, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, injectNgControlState, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, serializeNativeFormValue, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, useNativeFormControl, usePointerDrag, useScrollLock, useTransitionStatus, watch };
 //# sourceMappingURL=radix-ng-primitives-core.mjs.map