@jobber/components 8.23.0 → 8.23.1

package/dist/useLabel-cjs.js

@@ -4,6 +4,16 @@ var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var useButton = require('./useButton-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
 
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = useButton.useBaseUiId(idProp);
   useButton.useIsoLayoutEffect(() => {
@@ -77,9 +87,9 @@ function focusElementWithVisible(element) {
   element.focus({
     // Available from Chrome 144+ (January 2026).
     // Safari and Firefox already support it.
-    // @ts-expect-error not available in types yet
     focusVisible: true
   });
 }
 
+exports.stringifyLocale = stringifyLocale;
 exports.useLabel = useLabel;

package/dist/useLabel-es.js

@@ -2,6 +2,16 @@ import { a as isHTMLElement } from './floating-ui.utils.dom-es.js';
 import { u as useBaseUiId, a as useIsoLayoutEffect, b as useStableCallback, g as getTarget, o as ownerDocument } from './useButton-es.js';
 import { u as useLabelableContext } from './useLabelableId-es.js';
 
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = useBaseUiId(idProp);
   useIsoLayoutEffect(() => {
@@ -75,9 +85,8 @@ function focusElementWithVisible(element) {
   element.focus({
     // Available from Chrome 144+ (January 2026).
     // Safari and Firefox already support it.
-    // @ts-expect-error not available in types yet
     focusVisible: true
   });
 }
 
-export { useLabel as u };
+export { stringifyLocale as s, useLabel as u };

package/dist/useLabelableId-cjs.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var ReactDOM = require('react-dom');
-var useButton = require('./useButton-cjs.js');
 var React = require('react');
+var useButton = require('./useButton-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 
@@ -23,7 +22,6 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
@@ -32,11 +30,11 @@ let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttribut
    */
   FieldControlDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldControlDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldControlDataAttributes["invalid"] = "data-invalid";
   /**
@@ -98,7 +96,7 @@ const fieldValidityMapping = {
   }
 };
 
-const FieldRootContext = /*#__PURE__*/React__namespace.createContext({
+const DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -126,15 +124,18 @@ const FieldRootContext = /*#__PURE__*/React__namespace.createContext({
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: useRenderElement.NOOP,
   validation: {
-    getValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
-    getInputValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
+    getValidationProps: (_disabled, props = useRenderElement.EMPTY_OBJECT) => props,
     inputRef: {
       current: null
     },
-    commit: async () => {}
+    registerInput: useRenderElement.NOOP,
+    commit: async () => {},
+    change: useRenderElement.NOOP
   }
-});
+};
+const FieldRootContext = /*#__PURE__*/React__namespace.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
 if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
 function useFieldRootContext(optional = true) {
   const context = React__namespace.useContext(FieldRootContext);
@@ -144,18 +145,31 @@ function useFieldRootContext(optional = true) {
   return context;
 }
 
-/**
- * Combines the field's client-side, stateful validity data with the external invalid state to
- * determine the field's true validity.
- */
-function getCombinedFieldValidityData(validityData, invalid) {
-  return {
-    ...validityData,
-    state: {
-      ...validityData.state,
-      valid: !invalid && validityData.state.valid
+function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
+  const {
+    registerFieldControl
+  } = useFieldRootContext();
+  const sourceRef = React__namespace.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  useButton.useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
     }
-  };
+    const registration = {
+      controlRef,
+      getValue: getFormValueOverride,
+      id,
+      name,
+      value
+    };
+    registerFieldControl(source, registration);
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
 }
 
 const FormContext = /*#__PURE__*/React__namespace.createContext({
@@ -176,74 +190,6 @@ function useFormContext() {
   return React__namespace.useContext(FormContext);
 }
 
-function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = useFormContext();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = useFieldRootContext();
-  const getValue = useButton.useStableCallback(params.getValue);
-  useButton.useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  useButton.useIsoLayoutEffect(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM__namespace.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  useButton.useIsoLayoutEffect(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}
-
 /**
  * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
  * with an accessible name (label) and description.
@@ -319,14 +265,14 @@ function useLabelableId(params = {}) {
   return controlId ?? defaultId;
 }
 
+exports.DEFAULT_FIELD_ROOT_CONTEXT = DEFAULT_FIELD_ROOT_CONTEXT;
 exports.DEFAULT_FIELD_STATE_ATTRIBUTES = DEFAULT_FIELD_STATE_ATTRIBUTES;
 exports.DEFAULT_VALIDITY_STATE = DEFAULT_VALIDITY_STATE;
 exports.FieldRootContext = FieldRootContext;
 exports.LabelableContext = LabelableContext;
 exports.fieldValidityMapping = fieldValidityMapping;
-exports.getCombinedFieldValidityData = getCombinedFieldValidityData;
-exports.useField = useField;
 exports.useFieldRootContext = useFieldRootContext;
 exports.useFormContext = useFormContext;
 exports.useLabelableContext = useLabelableContext;
 exports.useLabelableId = useLabelableId;
+exports.useRegisterFieldControl = useRegisterFieldControl;

package/dist/useLabelableId-es.js

@@ -1,7 +1,6 @@
-import * as ReactDOM from 'react-dom';
-import { b as useStableCallback, a as useIsoLayoutEffect, u as useBaseUiId } from './useButton-es.js';
 import * as React from 'react';
-import { N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT, a as useRefWithInit } from './useRenderElement-es.js';
+import { a as useIsoLayoutEffect, u as useBaseUiId, b as useStableCallback } from './useButton-es.js';
+import { N as NOOP, E as EMPTY_OBJECT, f as formatErrorMessage, a as useRefWithInit } from './useRenderElement-es.js';
 import { b as isElement } from './floating-ui.utils.dom-es.js';
 
 let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
@@ -10,11 +9,11 @@ let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttribut
    */
   FieldControlDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldControlDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldControlDataAttributes["invalid"] = "data-invalid";
   /**
@@ -76,7 +75,7 @@ const fieldValidityMapping = {
   }
 };
 
-const FieldRootContext = /*#__PURE__*/React.createContext({
+const DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -104,15 +103,18 @@ const FieldRootContext = /*#__PURE__*/React.createContext({
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: NOOP,
   validation: {
-    getValidationProps: (props = EMPTY_OBJECT) => props,
-    getInputValidationProps: (props = EMPTY_OBJECT) => props,
+    getValidationProps: (_disabled, props = EMPTY_OBJECT) => props,
     inputRef: {
       current: null
     },
-    commit: async () => {}
+    registerInput: NOOP,
+    commit: async () => {},
+    change: NOOP
   }
-});
+};
+const FieldRootContext = /*#__PURE__*/React.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
 if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
 function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);
@@ -122,18 +124,31 @@ function useFieldRootContext(optional = true) {
   return context;
 }
 
-/**
- * Combines the field's client-side, stateful validity data with the external invalid state to
- * determine the field's true validity.
- */
-function getCombinedFieldValidityData(validityData, invalid) {
-  return {
-    ...validityData,
-    state: {
-      ...validityData.state,
-      valid: !invalid && validityData.state.valid
+function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
+  const {
+    registerFieldControl
+  } = useFieldRootContext();
+  const sourceRef = React.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
     }
-  };
+    const registration = {
+      controlRef,
+      getValue: getFormValueOverride,
+      id,
+      name,
+      value
+    };
+    registerFieldControl(source, registration);
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
 }
 
 const FormContext = /*#__PURE__*/React.createContext({
@@ -154,74 +169,6 @@ function useFormContext() {
   return React.useContext(FormContext);
 }
 
-function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = useFormContext();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = useFieldRootContext();
-  const getValue = useStableCallback(params.getValue);
-  useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  useIsoLayoutEffect(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  useIsoLayoutEffect(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}
-
 /**
  * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
  * with an accessible name (label) and description.
@@ -297,4 +244,4 @@ function useLabelableId(params = {}) {
   return controlId ?? defaultId;
 }
 
-export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, useFormContext as a, useFieldRootContext as b, useLabelableId as c, useField as d, DEFAULT_FIELD_STATE_ATTRIBUTES as e, fieldValidityMapping as f, getCombinedFieldValidityData as g, useLabelableContext as u };
+export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, useFormContext as a, useFieldRootContext as b, useLabelableId as c, useRegisterFieldControl as d, DEFAULT_FIELD_ROOT_CONTEXT as e, fieldValidityMapping as f, DEFAULT_FIELD_STATE_ATTRIBUTES as g, useLabelableContext as u };

package/dist/useRenderElement-cjs.js

@@ -55,7 +55,7 @@ const EMPTY_PROPS = {};
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
@@ -71,21 +71,23 @@ const EMPTY_PROPS = {};
  */
 
 function mergeProps(a, b, c, d, e) {
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
+  if (!c && !d && !e && !a) {
+    return createInitialMergedProps(b);
+  }
+
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(a);
   if (b) {
-    merged = mergeOne(merged, b);
+    merged = mergeInto(merged, b);
   }
   if (c) {
-    merged = mergeOne(merged, c);
+    merged = mergeInto(merged, c);
   }
   if (d) {
-    merged = mergeOne(merged, d);
+    merged = mergeInto(merged, d);
   }
   if (e) {
-    merged = mergeOne(merged, e);
+    merged = mergeInto(merged, e);
   }
   return merged;
 }
@@ -109,24 +111,46 @@ function mergePropsN(props) {
     return EMPTY_PROPS;
   }
   if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+    return createInitialMergedProps(props[0]);
   }
 
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(props[0]);
   for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+    merged = mergeInto(merged, props[i]);
   }
   return merged;
 }
-function mergeOne(merged, inputProps) {
+function createInitialMergedProps(inputProps) {
   if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+    // Getter-returned handlers intentionally keep their existing semantics.
+    return {
+      ...resolvePropsGetter(inputProps, EMPTY_PROPS)
+    };
+  }
+  return copyInitialProps(inputProps);
+}
+function mergeInto(merged, inputProps) {
+  if (isPropsGetter(inputProps)) {
+    return resolvePropsGetter(inputProps, merged);
   }
   return mutablyMergeInto(merged, inputProps);
 }
+function copyInitialProps(inputProps) {
+  const copiedProps = {
+    ...inputProps
+  };
+
+  // `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+  // eslint-disable-next-line guard-for-in
+  for (const propName in copiedProps) {
+    const propValue = copiedProps[propName];
+    if (isEventHandler(propName, propValue)) {
+      copiedProps[propName] = wrapEventHandler(propValue);
+    }
+  }
+  return copiedProps;
+}
 
 /**
  * Merges two sets of props. In case of conflicts, the external props take precedence.
@@ -183,23 +207,36 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
-  return event => {
+  return (...args) => {
+    const event = args[0];
     if (isSyntheticEvent(event)) {
       const baseUIEvent = event;
       makeEventPreventable(baseUIEvent);
-      const result = theirHandler(baseUIEvent);
+      const result = theirHandler(...args);
       if (!baseUIEvent.baseUIHandlerPrevented) {
-        ourHandler?.(baseUIEvent);
+        ourHandler?.(...args);
       }
       return result;
     }
-    const result = theirHandler(event);
-    ourHandler?.(event);
+    const result = theirHandler(...args);
+    ourHandler?.(...args);
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(...args);
+  };
+}
 function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;
@@ -484,7 +521,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? resolveClassName(classNameProp, state) : undefined;
   const style = enabled ? resolveStyle(styleProp, state) : undefined;
   const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-  const outProps = enabled ? mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props) ?? EMPTY_OBJECT : EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -512,12 +554,20 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return mergePropsN(props);
+  }
+  return mergeProps(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
 // TODO delete once https://github.com/facebook/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
+const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -546,6 +596,8 @@ function evaluateRenderProp(element, render, props, state) {
     // so we can throw before with custom message.
     if (process.env.NODE_ENV !== 'production') {
       if (! /*#__PURE__*/React__namespace.isValidElement(newElement)) {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(['Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.', 'A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.', 'https://base-ui.com/r/invalid-render-prop'].join('\n'));
       }
     }
@@ -565,8 +617,10 @@ function warnIfRenderPropLooksLikeComponent(renderFn) {
   if (functionName.length === 0) {
     return;
   }
-  const firstCharacterCode = functionName.charCodeAt(0);
-  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+  if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
+    return;
+  }
+  if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
     return;
   }
   warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');
@@ -599,3 +653,4 @@ exports.mergeProps = mergeProps;
 exports.useMergedRefs = useMergedRefs;
 exports.useRefWithInit = useRefWithInit;
 exports.useRenderElement = useRenderElement;
+exports.warn = warn;