@jobber/components 8.21.1 → 8.23.0

package/dist/useLabel-es.js

@@ -1,301 +1,6 @@
-import * as ReactDOM from 'react-dom';
-import { a as useStableCallback, d as useIsoLayoutEffect, u as useBaseUiId, g as getTarget, o as ownerDocument } 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, a as isHTMLElement } 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;
-}
+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 useRegisteredLabelId(idProp, setLabelId) {
   const id = useBaseUiId(idProp);
@@ -375,4 +80,4 @@ function focusElementWithVisible(element) {
   });
 }
 
-export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, useFormContext as a, useFieldRootContext as b, useLabel as c, useLabelableId as d, useField as e, fieldValidityMapping as f, getCombinedFieldValidityData as g, DEFAULT_FIELD_STATE_ATTRIBUTES as h, useLabelableContext as u };
+export { useLabel as u };

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;