@base-ui/react 1.7.0 → 1.8.0

package/field/root/useFieldValidation.js

@@ -56,11 +56,15 @@ function findRepresentativeInput(inputs, formElement) {
   }
   return fallback;
 }
-function clearCustomValidity(element, inputs) {
-  for (const input of inputs.keys()) {
-    input.setCustomValidity('');
-  }
-  element?.setCustomValidity('');
+function makeState(customError) {
+  return {
+    ..._constants.DEFAULT_VALIDITY_STATE,
+    valid: !customError,
+    customError
+  };
+}
+function getNativeErrors(element) {
+  return element && element.validationMessage ? [element.validationMessage] : [];
 }
 function useFieldValidation(params) {
   const {
@@ -76,6 +80,7 @@ function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
+    validationMode,
     registeredFieldIdRef
   } = params;
   const {
@@ -86,6 +91,8 @@ function useFieldValidation(params) {
   const inputRef = React.useRef(null);
   const registeredInputs = (0, _useRefWithInit.useRefWithInit)(() => new Map()).current;
   const validationCommitIdRef = React.useRef(0);
+  // Tracks the message installed by Base UI and the custom message it displaced.
+  const customValidityRef = React.useRef(null);
 
   // Groups register several inputs against a single field so focus, validation, and form-value
   // projection can use the same live controls. This also ensures a `required` checkbox can't be
@@ -118,46 +125,98 @@ function useFieldValidation(params) {
         validityData: validityDataWithFormErrors
       });
     }
-    function publishAllValid(input, externalInvalid) {
-      const nextValidityData = {
+    function makeValidityData(validityState, errorMessages) {
+      // `valueMissing` may be suppressed while the native message remains non-empty.
+      const errors = validityState.valid === false ? errorMessages : [];
+      return {
         value,
-        state: {
-          ..._constants.DEFAULT_VALIDITY_STATE,
-          valid: true
-        },
-        error: '',
-        errors: [],
+        state: validityState,
+        error: errors[0] ?? '',
+        errors,
         initialValue: validityData.initialValue
       };
-      clearCustomValidity(input, registeredInputs);
+    }
+    function setCustomValidity(element, message) {
+      // Never reinstall a native constraint message as custom validity.
+      const displaced = element.validity.customError ? element.validationMessage : '';
+      const ownedMessage = message.replace(/\r\n?/g, '\n');
+      element.setCustomValidity(ownedMessage);
+      customValidityRef.current = [element, ownedMessage, displaced];
+    }
+    function clearCustomValidity() {
+      const record = customValidityRef.current;
+      customValidityRef.current = null;
+      // Replacement transfers ownership; barred controls hide `validationMessage`.
+      if (record && (!record[0].willValidate || record[0].validationMessage === record[1])) {
+        record[0].setCustomValidity(record[2]);
+      }
+    }
+    function publish(validityState, errorMessages, externalInvalid) {
+      const nextValidityData = makeValidityData(validityState, errorMessages);
       updateRegisteredFieldValidity(nextValidityData, externalInvalid);
       setValidityData(nextValidityData);
     }
+    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 (key === 'valid') {
+          continue;
+        }
+        if (key === 'valueMissing' && computedState[key]) {
+          hasOnlyValueMissingError = true;
+        } else if (computedState[key]) {
+          return computedState;
+        }
+      }
+
+      // Only make `valueMissing` mark the field invalid if it's been changed
+      // to reduce error noise.
+      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+        computedState.valid = true;
+        computedState.valueMissing = false;
+      }
+      return computedState;
+    }
 
     // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
     // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
     // `inputRef` is the fallback only when no inputs are registered.
-    const element = registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    function resolveRepresentativeInput() {
+      return registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    }
+
     // A field with no eligible input has no native constraint, but its custom validator still
     // applies to the logical value at the configured validation boundary.
-
+    let element = resolveRepresentativeInput();
+    function refreshState() {
+      element = resolveRepresentativeInput();
+      // Barred controls expose no usable native constraint state.
+      return element?.willValidate ? getState(element) : makeState(false);
+    }
     if (revalidate) {
       if (state.valid !== false || !element) {
         return;
       }
-      const currentNativeValidity = element.validity;
-      if (!currentNativeValidity.valueMissing) {
+      if (!element.validity.valueMissing) {
         // The 'valueMissing' (required) condition has been resolved by the user typing.
         // Temporarily mark the field as valid for this onChange event.
         // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
         // The required value is now present; ignore stale external invalid state for this pass.
-        publishAllValid(element, false);
+        clearCustomValidity();
+        // Clearing can make another registered input with a custom error representative.
+        const currentElement = resolveRepresentativeInput();
+        const foreign = currentElement?.validity.customError ? getNativeErrors(currentElement) : [];
+        publish(makeState(foreign.length > 0), foreign, false);
         return;
       }
 
       // A stale custom error can coexist with valueMissing, but defer any other native errors.
       for (const key of validityKeys) {
-        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && currentNativeValidity[key]) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && element.validity[key]) {
           return;
         }
       }
@@ -165,49 +224,16 @@ function useFieldValidation(params) {
       // Value is still missing: publish the current native state so valueMissing and the changed
       // value are observable immediately. Full custom validation still waits for its boundary.
     }
-    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 (key === 'valid') {
-          continue;
-        }
-        if (key === 'valueMissing' && computedState[key]) {
-          hasOnlyValueMissingError = true;
-        } else if (computedState[key]) {
-          return computedState;
-        }
-      }
-
-      // Only make `valueMissing` mark the field invalid if it's been changed
-      // to reduce error noise.
-      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
-        computedState.valid = true;
-        computedState.valueMissing = false;
-      }
-      return computedState;
-    }
     timeout.clear();
-    let result = null;
-    let validationErrors = [];
 
-    // With no representative input the field carries no native constraint, so start from an
-    // all-valid native state and let the custom `validate` result below decide the outcome.
-    const nextState = element ? getState(element) : {
-      ..._constants.DEFAULT_VALIDITY_STATE,
-      valid: true
-    };
-    let defaultValidationMessage;
+    // Do not read Base UI's previous message back as a native constraint.
+    clearCustomValidity();
+    let nextState = refreshState();
+    let validationErrors = getNativeErrors(element);
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element && element.validationMessage && !isValidatingOnChange) {
-      // not validating on change, if there is a `validationMessage` from
-      // native validity, set errors and skip calling the custom validate fn
-      defaultValidationMessage = element.validationMessage;
-      validationErrors = [element.validationMessage];
-    } else {
+
+    // Native or externally set errors take precedence outside onChange validation.
+    if (validationErrors.length === 0 || isValidatingOnChange) {
       // call the validate function because either
       // - validating on change, or
       // - native constraint validations passed, custom validity check is next
@@ -218,54 +244,53 @@ function useFieldValidation(params) {
         return acc;
       }, {});
       const resultOrPromise = validate(value, formValues);
+      let result;
       if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        // Validity is unknown while the validator runs, so go neutral, but keep what must block
+        // submission synchronously: native failures, and a previous custom error outside onSubmit
+        // mode. A previous native error is never kept, since `nextState` already carries the fresh
+        // native verdict.
+        if (nextState.valid === false) {
+          publish(nextState, validationErrors);
+        } else if (validationMode === 'onSubmit' || !validityData.state.customError) {
+          nextState.valid = null;
+          publish(nextState, validationErrors);
+        }
+
+        // A rejected validator keeps the previously published state, so a transient
+        // failure can't retire an error and unblock submission.
         result = await resultOrPromise;
         if (validationCommitId !== validationCommitIdRef.current) {
           return;
         }
+        nextState = refreshState();
       } else {
         result = resultOrPromise;
       }
-      if (result !== null) {
+
+      // Empty results and empty array entries are valid.
+      validationErrors = result ? [].concat(result).filter(Boolean) : [];
+      if (validationErrors.length > 0) {
         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 (isValidatingOnChange) {
-        // validate function returned no errors, if validating on change
-        // we need to clear the custom validity state
-        clearCustomValidity(element, registeredInputs);
-        nextState.customError = false;
-        if (element && element.validationMessage) {
-          defaultValidationMessage = element.validationMessage;
-          validationErrors = [element.validationMessage];
-        } else if ((!element || element.validity.valid) && !nextState.valid) {
-          nextState.valid = true;
+        // Keep custom errors for barred controls in field state only.
+        if (element?.willValidate) {
+          setCustomValidity(element, validationErrors.join('\n'));
         }
+      } else {
+        validationErrors = getNativeErrors(element);
       }
     }
-    const nextValidityData = {
-      value,
-      state: nextState,
-      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
-      errors: validationErrors,
-      initialValue: validityData.initialValue
-    };
-
-    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-    updateRegisteredFieldValidity(nextValidityData);
-    setValidityData(nextValidityData);
+    publish(nextState, validationErrors);
   });
-  const change = (0, _useStableCallback.useStableCallback)(value => {
+  const change = (0, _useStableCallback.useStableCallback)((value, cancelPending = false) => {
     timeout.clear();
+    validationCommitIdRef.current += 1;
+    if (cancelPending) {
+      return;
+    }
     const validateOnChange = shouldValidateOnChange();
     if (validateOnChange && value !== '' && validationDebounceTime) {
-      validationCommitIdRef.current += 1;
       timeout.start(validationDebounceTime, () => {
         commit(value);
       });

package/field/root/useFieldValidation.mjs

@@ -49,11 +49,15 @@ function findRepresentativeInput(inputs, formElement) {
   }
   return fallback;
 }
-function clearCustomValidity(element, inputs) {
-  for (const input of inputs.keys()) {
-    input.setCustomValidity('');
-  }
-  element?.setCustomValidity('');
+function makeState(customError) {
+  return {
+    ...DEFAULT_VALIDITY_STATE,
+    valid: !customError,
+    customError
+  };
+}
+function getNativeErrors(element) {
+  return element && element.validationMessage ? [element.validationMessage] : [];
 }
 export function useFieldValidation(params) {
   const {
@@ -69,6 +73,7 @@ export function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
+    validationMode,
     registeredFieldIdRef
   } = params;
   const {
@@ -79,6 +84,8 @@ export function useFieldValidation(params) {
   const inputRef = React.useRef(null);
   const registeredInputs = useRefWithInit(() => new Map()).current;
   const validationCommitIdRef = React.useRef(0);
+  // Tracks the message installed by Base UI and the custom message it displaced.
+  const customValidityRef = React.useRef(null);
 
   // Groups register several inputs against a single field so focus, validation, and form-value
   // projection can use the same live controls. This also ensures a `required` checkbox can't be
@@ -111,46 +118,98 @@ export function useFieldValidation(params) {
         validityData: validityDataWithFormErrors
       });
     }
-    function publishAllValid(input, externalInvalid) {
-      const nextValidityData = {
+    function makeValidityData(validityState, errorMessages) {
+      // `valueMissing` may be suppressed while the native message remains non-empty.
+      const errors = validityState.valid === false ? errorMessages : [];
+      return {
         value,
-        state: {
-          ...DEFAULT_VALIDITY_STATE,
-          valid: true
-        },
-        error: '',
-        errors: [],
+        state: validityState,
+        error: errors[0] ?? '',
+        errors,
         initialValue: validityData.initialValue
       };
-      clearCustomValidity(input, registeredInputs);
+    }
+    function setCustomValidity(element, message) {
+      // Never reinstall a native constraint message as custom validity.
+      const displaced = element.validity.customError ? element.validationMessage : '';
+      const ownedMessage = message.replace(/\r\n?/g, '\n');
+      element.setCustomValidity(ownedMessage);
+      customValidityRef.current = [element, ownedMessage, displaced];
+    }
+    function clearCustomValidity() {
+      const record = customValidityRef.current;
+      customValidityRef.current = null;
+      // Replacement transfers ownership; barred controls hide `validationMessage`.
+      if (record && (!record[0].willValidate || record[0].validationMessage === record[1])) {
+        record[0].setCustomValidity(record[2]);
+      }
+    }
+    function publish(validityState, errorMessages, externalInvalid) {
+      const nextValidityData = makeValidityData(validityState, errorMessages);
       updateRegisteredFieldValidity(nextValidityData, externalInvalid);
       setValidityData(nextValidityData);
     }
+    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 (key === 'valid') {
+          continue;
+        }
+        if (key === 'valueMissing' && computedState[key]) {
+          hasOnlyValueMissingError = true;
+        } else if (computedState[key]) {
+          return computedState;
+        }
+      }
+
+      // Only make `valueMissing` mark the field invalid if it's been changed
+      // to reduce error noise.
+      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+        computedState.valid = true;
+        computedState.valueMissing = false;
+      }
+      return computedState;
+    }
 
     // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
     // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
     // `inputRef` is the fallback only when no inputs are registered.
-    const element = registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    function resolveRepresentativeInput() {
+      return registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    }
+
     // A field with no eligible input has no native constraint, but its custom validator still
     // applies to the logical value at the configured validation boundary.
-
+    let element = resolveRepresentativeInput();
+    function refreshState() {
+      element = resolveRepresentativeInput();
+      // Barred controls expose no usable native constraint state.
+      return element?.willValidate ? getState(element) : makeState(false);
+    }
     if (revalidate) {
       if (state.valid !== false || !element) {
         return;
       }
-      const currentNativeValidity = element.validity;
-      if (!currentNativeValidity.valueMissing) {
+      if (!element.validity.valueMissing) {
         // The 'valueMissing' (required) condition has been resolved by the user typing.
         // Temporarily mark the field as valid for this onChange event.
         // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
         // The required value is now present; ignore stale external invalid state for this pass.
-        publishAllValid(element, false);
+        clearCustomValidity();
+        // Clearing can make another registered input with a custom error representative.
+        const currentElement = resolveRepresentativeInput();
+        const foreign = currentElement?.validity.customError ? getNativeErrors(currentElement) : [];
+        publish(makeState(foreign.length > 0), foreign, false);
         return;
       }
 
       // A stale custom error can coexist with valueMissing, but defer any other native errors.
       for (const key of validityKeys) {
-        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && currentNativeValidity[key]) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && element.validity[key]) {
           return;
         }
       }
@@ -158,49 +217,16 @@ export function useFieldValidation(params) {
       // Value is still missing: publish the current native state so valueMissing and the changed
       // value are observable immediately. Full custom validation still waits for its boundary.
     }
-    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 (key === 'valid') {
-          continue;
-        }
-        if (key === 'valueMissing' && computedState[key]) {
-          hasOnlyValueMissingError = true;
-        } else if (computedState[key]) {
-          return computedState;
-        }
-      }
-
-      // Only make `valueMissing` mark the field invalid if it's been changed
-      // to reduce error noise.
-      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
-        computedState.valid = true;
-        computedState.valueMissing = false;
-      }
-      return computedState;
-    }
     timeout.clear();
-    let result = null;
-    let validationErrors = [];
 
-    // With no representative input the field carries no native constraint, so start from an
-    // all-valid native state and let the custom `validate` result below decide the outcome.
-    const nextState = element ? getState(element) : {
-      ...DEFAULT_VALIDITY_STATE,
-      valid: true
-    };
-    let defaultValidationMessage;
+    // Do not read Base UI's previous message back as a native constraint.
+    clearCustomValidity();
+    let nextState = refreshState();
+    let validationErrors = getNativeErrors(element);
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element && element.validationMessage && !isValidatingOnChange) {
-      // not validating on change, if there is a `validationMessage` from
-      // native validity, set errors and skip calling the custom validate fn
-      defaultValidationMessage = element.validationMessage;
-      validationErrors = [element.validationMessage];
-    } else {
+
+    // Native or externally set errors take precedence outside onChange validation.
+    if (validationErrors.length === 0 || isValidatingOnChange) {
       // call the validate function because either
       // - validating on change, or
       // - native constraint validations passed, custom validity check is next
@@ -211,54 +237,53 @@ export function useFieldValidation(params) {
         return acc;
       }, {});
       const resultOrPromise = validate(value, formValues);
+      let result;
       if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        // Validity is unknown while the validator runs, so go neutral, but keep what must block
+        // submission synchronously: native failures, and a previous custom error outside onSubmit
+        // mode. A previous native error is never kept, since `nextState` already carries the fresh
+        // native verdict.
+        if (nextState.valid === false) {
+          publish(nextState, validationErrors);
+        } else if (validationMode === 'onSubmit' || !validityData.state.customError) {
+          nextState.valid = null;
+          publish(nextState, validationErrors);
+        }
+
+        // A rejected validator keeps the previously published state, so a transient
+        // failure can't retire an error and unblock submission.
         result = await resultOrPromise;
         if (validationCommitId !== validationCommitIdRef.current) {
           return;
         }
+        nextState = refreshState();
       } else {
         result = resultOrPromise;
       }
-      if (result !== null) {
+
+      // Empty results and empty array entries are valid.
+      validationErrors = result ? [].concat(result).filter(Boolean) : [];
+      if (validationErrors.length > 0) {
         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 (isValidatingOnChange) {
-        // validate function returned no errors, if validating on change
-        // we need to clear the custom validity state
-        clearCustomValidity(element, registeredInputs);
-        nextState.customError = false;
-        if (element && element.validationMessage) {
-          defaultValidationMessage = element.validationMessage;
-          validationErrors = [element.validationMessage];
-        } else if ((!element || element.validity.valid) && !nextState.valid) {
-          nextState.valid = true;
+        // Keep custom errors for barred controls in field state only.
+        if (element?.willValidate) {
+          setCustomValidity(element, validationErrors.join('\n'));
         }
+      } else {
+        validationErrors = getNativeErrors(element);
       }
     }
-    const nextValidityData = {
-      value,
-      state: nextState,
-      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
-      errors: validationErrors,
-      initialValue: validityData.initialValue
-    };
-
-    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-    updateRegisteredFieldValidity(nextValidityData);
-    setValidityData(nextValidityData);
+    publish(nextState, validationErrors);
   });
-  const change = useStableCallback(value => {
+  const change = useStableCallback((value, cancelPending = false) => {
     timeout.clear();
+    validationCommitIdRef.current += 1;
+    if (cancelPending) {
+      return;
+    }
     const validateOnChange = shouldValidateOnChange();
     if (validateOnChange && value !== '' && validationDebounceTime) {
-      validationCommitIdRef.current += 1;
       timeout.start(validationDebounceTime, () => {
         commit(value);
       });

package/floating-ui-react/components/FloatingDelayGroup.js

@@ -183,8 +183,9 @@ function useDelayGroup(context, options = {
     };
   }, [currentContextRef, currentIdRef, delayRef, floatingId, initialDelayRef, timeout]);
   return React.useMemo(() => ({
+    activeIdRef: currentIdRef,
     hasProvider,
     delayRef,
     isInstantPhase
-  }), [hasProvider, delayRef, isInstantPhase]);
+  }), [currentIdRef, hasProvider, delayRef, isInstantPhase]);
 }

package/floating-ui-react/components/FloatingDelayGroup.mjs

@@ -176,8 +176,9 @@ export function useDelayGroup(context, options = {
     };
   }, [currentContextRef, currentIdRef, delayRef, floatingId, initialDelayRef, timeout]);
   return React.useMemo(() => ({
+    activeIdRef: currentIdRef,
     hasProvider,
     delayRef,
     isInstantPhase
-  }), [hasProvider, delayRef, isInstantPhase]);
+  }), [currentIdRef, hasProvider, delayRef, isInstantPhase]);
 }

package/floating-ui-react/components/FloatingPortal.d.mts

@@ -43,6 +43,11 @@ export declare namespace FloatingPortal {
      * A parent element to render the portal element into.
      */
     container?: UseFloatingPortalNodeProps['container'] | undefined;
+    /**
+     * @ignore
+     * The role for the hidden `aria-owns` owner element.
+     */
+    portalOwnerRole?: React.AriaRole | undefined;
   }
 }
 export {};

package/floating-ui-react/components/FloatingPortal.d.ts

@@ -43,6 +43,11 @@ export declare namespace FloatingPortal {
      * A parent element to render the portal element into.
      */
     container?: UseFloatingPortalNodeProps['container'] | undefined;
+    /**
+     * @ignore
+     * The role for the hidden `aria-owns` owner element.
+     */
+    portalOwnerRole?: React.AriaRole | undefined;
   }
 }
 export {};

package/floating-ui-react/components/FloatingPortal.js

@@ -112,6 +112,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     style,
     children,
     container,
+    portalOwnerRole,
     ...elementProps
   } = componentProps;
   const {
@@ -194,6 +195,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
           }
         }
       }), shouldRenderGuards && portalNode && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        role: portalOwnerRole,
         "aria-owns": portalNodeId,
         style: _constants.ownerVisuallyHidden
       }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {

package/floating-ui-react/components/FloatingPortal.mjs

@@ -103,6 +103,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     style,
     children,
     container,
+    portalOwnerRole,
     ...elementProps
   } = componentProps;
   const {
@@ -185,6 +186,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
           }
         }
       }), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx("span", {
+        role: portalOwnerRole,
         "aria-owns": portalNodeId,
         style: ownerVisuallyHidden
       }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx(FocusGuard, {