@jobber/components 8.22.0 → 8.23.0

package/dist/useLabelableId-cjs.js

@@ -0,0 +1,332 @@
+'use strict';
+
+var ReactDOM = require('react-dom');
+var useButton = require('./useButton-cjs.js');
+var React = require('react');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldControlDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field is in valid state.
+   */
+  FieldControlDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is in invalid state.
+   */
+  FieldControlDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the field has been touched.
+   */
+  FieldControlDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the field's value has changed.
+   */
+  FieldControlDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the field is filled.
+   */
+  FieldControlDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the field control is focused.
+   */
+  FieldControlDataAttributes["focused"] = "data-focused";
+  return FieldControlDataAttributes;
+}({});
+
+const DEFAULT_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: null,
+  valueMissing: false
+};
+const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
+const fieldValidityMapping = {
+  valid(value) {
+    if (value === null) {
+      return null;
+    }
+    if (value) {
+      return {
+        [FieldControlDataAttributes.valid]: ''
+      };
+    }
+    return {
+      [FieldControlDataAttributes.invalid]: ''
+    };
+  }
+};
+
+const FieldRootContext = /*#__PURE__*/React__namespace.createContext({
+  invalid: undefined,
+  name: undefined,
+  validityData: {
+    state: DEFAULT_VALIDITY_STATE,
+    errors: [],
+    error: '',
+    value: '',
+    initialValue: null
+  },
+  setValidityData: useRenderElement.NOOP,
+  disabled: undefined,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+  setTouched: useRenderElement.NOOP,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+  setDirty: useRenderElement.NOOP,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+  setFilled: useRenderElement.NOOP,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+  setFocused: useRenderElement.NOOP,
+  validate: () => null,
+  validationMode: 'onSubmit',
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => false,
+  state: DEFAULT_FIELD_ROOT_STATE,
+  markedDirtyRef: {
+    current: false
+  },
+  validation: {
+    getValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
+    getInputValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    commit: async () => {}
+  }
+});
+if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+  const context = React__namespace.useContext(FieldRootContext);
+  if (context.setValidityData === useRenderElement.NOOP && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : useRenderElement.formatErrorMessage(28));
+  }
+  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
+    }
+  };
+}
+
+const FormContext = /*#__PURE__*/React__namespace.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: useRenderElement.NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+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.
+ */
+const LabelableContext = /*#__PURE__*/React__namespace.createContext({
+  controlId: undefined,
+  registerControlId: useRenderElement.NOOP,
+  labelId: undefined,
+  setLabelId: useRenderElement.NOOP,
+  messageIds: [],
+  setMessageIds: useRenderElement.NOOP,
+  getDescriptionProps: externalProps => externalProps
+});
+if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+  return React__namespace.useContext(LabelableContext);
+}
+
+function useLabelableId(params = {}) {
+  const {
+    id,
+    implicit = false,
+    controlRef
+  } = params;
+  const {
+    controlId,
+    registerControlId
+  } = useLabelableContext();
+  const defaultId = useButton.useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React__namespace.useRef(false);
+  const hadExplicitIdRef = React__namespace.useRef(id != null);
+  const unregisterControlId = useButton.useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === useRenderElement.NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
+  useButton.useIsoLayoutEffect(() => {
+    if (registerControlId === useRenderElement.NOOP) {
+      return undefined;
+    }
+    let nextId;
+    if (implicit) {
+      const elem = controlRef?.current;
+      if (floatingUi_utils_dom.isElement(elem) && elem.closest('label') != null) {
+        nextId = id ?? null;
+      } else {
+        nextId = controlIdForEffect ?? defaultId;
+      }
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
+    }
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React__namespace.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
+  return controlId ?? defaultId;
+}
+
+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;

package/dist/useLabelableId-es.js

@@ -0,0 +1,300 @@
+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 { b as isElement } from './floating-ui.utils.dom-es.js';
+
+let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldControlDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field is in valid state.
+   */
+  FieldControlDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is in invalid state.
+   */
+  FieldControlDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the field has been touched.
+   */
+  FieldControlDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the field's value has changed.
+   */
+  FieldControlDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the field is filled.
+   */
+  FieldControlDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the field control is focused.
+   */
+  FieldControlDataAttributes["focused"] = "data-focused";
+  return FieldControlDataAttributes;
+}({});
+
+const DEFAULT_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: null,
+  valueMissing: false
+};
+const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
+const fieldValidityMapping = {
+  valid(value) {
+    if (value === null) {
+      return null;
+    }
+    if (value) {
+      return {
+        [FieldControlDataAttributes.valid]: ''
+      };
+    }
+    return {
+      [FieldControlDataAttributes.invalid]: ''
+    };
+  }
+};
+
+const FieldRootContext = /*#__PURE__*/React.createContext({
+  invalid: undefined,
+  name: undefined,
+  validityData: {
+    state: DEFAULT_VALIDITY_STATE,
+    errors: [],
+    error: '',
+    value: '',
+    initialValue: null
+  },
+  setValidityData: NOOP,
+  disabled: undefined,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+  setTouched: NOOP,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+  setDirty: NOOP,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+  setFilled: NOOP,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+  setFocused: NOOP,
+  validate: () => null,
+  validationMode: 'onSubmit',
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => false,
+  state: DEFAULT_FIELD_ROOT_STATE,
+  markedDirtyRef: {
+    current: false
+  },
+  validation: {
+    getValidationProps: (props = EMPTY_OBJECT) => props,
+    getInputValidationProps: (props = EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    commit: async () => {}
+  }
+});
+if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+  const context = React.useContext(FieldRootContext);
+  if (context.setValidityData === NOOP && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : formatErrorMessage(28));
+  }
+  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
+    }
+  };
+}
+
+const FormContext = /*#__PURE__*/React.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+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.
+ */
+const LabelableContext = /*#__PURE__*/React.createContext({
+  controlId: undefined,
+  registerControlId: NOOP,
+  labelId: undefined,
+  setLabelId: NOOP,
+  messageIds: [],
+  setMessageIds: NOOP,
+  getDescriptionProps: externalProps => externalProps
+});
+if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+  return React.useContext(LabelableContext);
+}
+
+function useLabelableId(params = {}) {
+  const {
+    id,
+    implicit = false,
+    controlRef
+  } = params;
+  const {
+    controlId,
+    registerControlId
+  } = useLabelableContext();
+  const defaultId = useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React.useRef(false);
+  const hadExplicitIdRef = React.useRef(id != null);
+  const unregisterControlId = useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
+  useIsoLayoutEffect(() => {
+    if (registerControlId === NOOP) {
+      return undefined;
+    }
+    let nextId;
+    if (implicit) {
+      const elem = controlRef?.current;
+      if (isElement(elem) && elem.closest('label') != null) {
+        nextId = id ?? null;
+      } else {
+        nextId = controlIdForEffect ?? defaultId;
+      }
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
+    }
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
+  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 };

package/dist/useRenderElement-cjs.js

@@ -84,6 +84,9 @@ function mergeProps(a, b, c, d, e) {
   if (d) {
     merged = mergeOne(merged, d);
   }
+  if (e) {
+    merged = mergeOne(merged, e);
+  }
   return merged;
 }
 /* eslint-enable id-denylist */

package/dist/useRenderElement-es.js

@@ -64,6 +64,9 @@ function mergeProps(a, b, c, d, e) {
   if (d) {
     merged = mergeOne(merged, d);
   }
+  if (e) {
+    merged = mergeOne(merged, e);
+  }
   return merged;
 }
 /* eslint-enable id-denylist */
@@ -566,4 +569,4 @@ function renderTag(Tag, props) {
   return /*#__PURE__*/React.createElement(Tag, props);
 }
 
-export { EMPTY_OBJECT as E, NOOP as N, useRefWithInit as a, useMergedRefs as b, makeEventPreventable as c, EMPTY_ARRAY as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };
+export { EMPTY_OBJECT as E, NOOP as N, useRefWithInit as a, useMergedRefs as b, EMPTY_ARRAY as c, makeEventPreventable as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.22.0",
+  "version": "8.23.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a79f359b1697f28cc49148b1ac1ca4c9d270a5dd"
+  "gitHead": "24617d52a3a75075486510f029fbff1e0389306c"
 }