@jobber/components 9.4.0 → 9.5.0

package/dist/useCompositeListItem-es.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { l as useId, a as useIsoLayoutEffect, m as useValueAsRef, b as useStableCallback, n as useAnimationFrame, p as activeElement, o as ownerDocument, q as contains, s as stopEvent, d as createChangeEventDetails, r as listNavigation, g as getTarget, v as focusOut, w as isVirtualClick, x as isVirtualPointerEvent, h as useTimeout, y as jsdom } from './useButton-es.js';
-import { b as isElement, i as isHTMLElement, o as getWindow } from './floating-ui.utils.dom-es.js';
-import { u as useFloatingParentNodeId, b as FloatingRootStore, P as PopupTriggerMap, d as useFloatingTree, g as getFloatingFocusElement, i as isTypeableCombobox, e as isIndexOutOfListBounds, f as getMinListIndex, h as getMaxListIndex, j as findNonDisabledListIndex, k as enqueueFocus, A as ARROW_UP, l as ARROW_DOWN, m as ARROW_LEFT, n as ARROW_RIGHT, o as isListIndexDisabled, q as isElementVisible, r as useDirection, D as DISABLED_TRANSITIONS_STYLE, p as popupStateMapping, s as useScrollLock } from './useScrollLock-es.js';
-import { a as useRefWithInit, b as EMPTY_ARRAY, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
+import { aa as useId, ab as useFloatingParentNodeId, ac as FloatingRootStore, ad as PopupTriggerMap, a as useIsoLayoutEffect, ae as useFloatingTree, Z as getFloatingFocusElement, af as isTypeableCombobox, q as useValueAsRef, b as useStableCallback, a5 as useAnimationFrame, ag as isIndexOutOfListBounds, ah as getMinListIndex, ai as getMaxListIndex, D as activeElement, o as ownerDocument, _ as contains, L as stopEvent, d as createChangeEventDetails, aj as listNavigation, ak as findNonDisabledListIndex, g as getTarget, W as focusOut, al as enqueueFocus, a8 as isVirtualClick, am as isVirtualPointerEvent, an as ARROW_UP, ao as ARROW_DOWN, ap as ARROW_LEFT, aq as ARROW_RIGHT, k as useTimeout, ar as isListIndexDisabled, as as isElementVisible, u as useBaseUiId, at as jsdom, a4 as useDirection, au as DISABLED_TRANSITIONS_STYLE, p as popupStateMapping, av as useScrollLock } from './useScrollLock-es.js';
+import { b as isElement, i as isHTMLElement, K as getWindow, p as evaluate, q as getPaddingObject, m as getAlignmentAxis, o as getAlignment, z as getAxisLength, w as clamp, n as getSide, l as getSideAxis } from './floating-ui.utils-es.js';
+import { a as useRefWithInit, c as EMPTY_ARRAY, N as NOOP, E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';
-import { e as evaluate, d as getPaddingObject, a as getAlignmentAxis, c as getAlignment, o as getAxisLength, l as clamp, b as getSide, g as getSideAxis } from './floating-ui.utils-es.js';
 import { u as useFloating$1, h as hide$1, f as flip, d as size, b as autoUpdate, o as offset, s as shift, l as limitShift } from './floating-ui.react-dom-es.js';
 
 function useFloatingRootContext(options) {
@@ -894,6 +892,402 @@ function useTypeahead(context, props) {
   } : {}, [enabled, sharedProps]);
 }
 
+const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
+  }
+  return comparer(itemValue, selectedValue);
+}
+function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
+    return false;
+  }
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
+    return -1;
+  }
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
+}
+
+function serializeValue(value) {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isGroupedItems(items) {
+  return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
+}
+
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && 'null' in items;
+  }
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of arrayItems) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
+function stringifyAsLabel(item, itemToStringLabel) {
+  if (itemToStringLabel && item != null) {
+    return itemToStringLabel(item) ?? '';
+  }
+  if (item && typeof item === 'object') {
+    if ('label' in item && item.label != null) {
+      return String(item.label);
+    }
+    if ('value' in item) {
+      return String(item.value);
+    }
+  }
+  return serializeValue(item);
+}
+function stringifyAsValue(item, itemToStringValue) {
+  if (itemToStringValue && item != null) {
+    return itemToStringValue(item) ?? '';
+  }
+  if (item && typeof item === 'object' && 'value' in item && 'label' in item) {
+    return serializeValue(item.value);
+  }
+  return serializeValue(item);
+}
+function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
+  if (itemToStringLabel && value != null) {
+    return itemToStringLabel(value);
+  }
+
+  // Custom object with explicit label takes precedence
+  if (value && typeof value === 'object' && 'label' in value && value.label != null) {
+    return value.label;
+  }
+
+  // Items provided as plain record map
+  if (items && !Array.isArray(items)) {
+    return items[value] ?? fallback();
+  }
+
+  // Items provided as array (flat or grouped)
+  if (Array.isArray(items)) {
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+      return fallback();
+    }
+
+    // Object without explicit label: try matching by its `value` property
+    if ('value' in value) {
+      const match = flatItems.find(item => item && item.value === value.value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+    }
+  }
+  return fallback();
+}
+function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/jsx(React.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
+}
+
+let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldControlDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field is in a valid state.
+   */
+  FieldControlDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is in an 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 DEFAULT_FIELD_ROOT_CONTEXT = {
+  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
+  },
+  registerFieldControl: NOOP,
+  validation: {
+    getValidationProps: (_disabled, props = EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    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);
+  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;
+}
+
+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({
+  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);
+}
+
+/**
+ * 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;
+}
+
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
   const win = getWindow(element);
@@ -930,6 +1324,13 @@ function getPseudoElementBounds(element) {
   };
 }
 
+function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}
+
 const CompositeListContext = /*#__PURE__*/React.createContext({
   register: () => {},
   unregister: () => {},
@@ -1806,4 +2207,4 @@ function useCompositeListItem(params = {}) {
   };
 }
 
-export { CompositeList as C, IndexGuessBehavior as I, useListNavigation as a, useTypeahead as b, useAnchoredPopupScrollLock as c, useAnchorPositioning as d, usePositioner as e, getDisabledMountTransitionStyles as f, getPseudoElementBounds as g, useCompositeListItem as h, adaptiveOrigin as i, useFloatingRootContext as u };
+export { removeItem as A, adaptiveOrigin as B, CompositeList as C, DEFAULT_VALIDITY_STATE as D, isGroupedItems as E, FieldRootContext as F, DEFAULT_FIELD_ROOT_CONTEXT as G, DEFAULT_FIELD_STATE_ATTRIBUTES as H, IndexGuessBehavior as I, getDefaultLabelId as J, LabelableContext as L, useFormContext as a, useFieldRootContext as b, useLabelableId as c, useRegisterFieldControl as d, compareItemEquality as e, fieldValidityMapping as f, findItemIndex as g, hasNullItemLabel as h, useFloatingRootContext as i, useListNavigation as j, useTypeahead as k, defaultItemEquality as l, stringifyAsLabel as m, areArraysEqual as n, getPseudoElementBounds as o, resolveMultipleLabels as p, resolveSelectedLabel as q, resolveAriaLabelledBy as r, stringifyAsValue as s, useAnchoredPopupScrollLock as t, useLabelableContext as u, useAnchorPositioning as v, usePositioner as w, selectedValueIncludes as x, getDisabledMountTransitionStyles as y, useCompositeListItem as z };

package/dist/useLabel-cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
-var useButton = require('./useButton-cjs.js');
-var useLabelableId = require('./useLabelableId-cjs.js');
+var floatingUi_utils = require('./floating-ui.utils-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
+var useCompositeListItem = require('./useCompositeListItem-cjs.js');
 
 function useRegisteredLabelId(idProp, setLabelId) {
-  const id = useButton.useBaseUiId(idProp);
-  useButton.useIsoLayoutEffect(() => {
+  const id = useScrollLock.useBaseUiId(idProp);
+  useScrollLock.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
       setLabelId(undefined);
@@ -26,8 +26,8 @@ function useLabel(params = {}) {
   const {
     controlId: contextControlId,
     setLabelId: setContextLabelId
-  } = useLabelableId.useLabelableContext();
-  const syncLabelId = useButton.useStableCallback(nextLabelId => {
+  } = useCompositeListItem.useLabelableContext();
+  const syncLabelId = useScrollLock.useStableCallback(nextLabelId => {
     setContextLabelId(nextLabelId);
     setLabelIdProp?.(nextLabelId);
   });
@@ -41,13 +41,13 @@ function useLabel(params = {}) {
     if (!resolvedControlId) {
       return;
     }
-    const controlElement = useButton.ownerDocument(event.currentTarget).getElementById(resolvedControlId);
-    if (floatingUi_utils_dom.isHTMLElement(controlElement)) {
+    const controlElement = useScrollLock.ownerDocument(event.currentTarget).getElementById(resolvedControlId);
+    if (floatingUi_utils.isHTMLElement(controlElement)) {
       focusElementWithVisible(controlElement);
     }
   }
   function handleInteraction(event) {
-    const target = useButton.getTarget(event.nativeEvent);
+    const target = useScrollLock.getTarget(event.nativeEvent);
     if (target?.closest('button,input,select,textarea')) {
       return;
     }

package/dist/useLabel-es.js

@@ -1,6 +1,6 @@
-import { i 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';
+import { i as isHTMLElement } from './floating-ui.utils-es.js';
+import { u as useBaseUiId, a as useIsoLayoutEffect, b as useStableCallback, g as getTarget, o as ownerDocument } from './useScrollLock-es.js';
+import { u as useLabelableContext } from './useCompositeListItem-es.js';
 
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = useBaseUiId(idProp);

package/dist/useRenderElement-es.js

@@ -623,4 +623,4 @@ function renderTag(Tag, props) {
   return /*#__PURE__*/React.createElement(Tag, props);
 }
 
-export { EMPTY_OBJECT as E, NOOP as N, useRefWithInit as a, EMPTY_ARRAY as b, useMergedRefs as c, makeEventPreventable as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u, warn as w };
+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, warn as w };