@jobber/components 8.20.1 → 8.21.0

package/dist/useLabel-es.js

@@ -0,0 +1,378 @@
+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;
+}
+
+function useRegisteredLabelId(idProp, setLabelId) {
+  const id = useBaseUiId(idProp);
+  useIsoLayoutEffect(() => {
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [id, setLabelId]);
+  return id;
+}
+
+function useLabel(params = {}) {
+  const {
+    id: idProp,
+    fallbackControlId,
+    native = false,
+    setLabelId: setLabelIdProp,
+    focusControl: focusControlProp
+  } = params;
+  const {
+    controlId: contextControlId,
+    setLabelId: setContextLabelId
+  } = useLabelableContext();
+  const syncLabelId = useStableCallback(nextLabelId => {
+    setContextLabelId(nextLabelId);
+    setLabelIdProp?.(nextLabelId);
+  });
+  const id = useRegisteredLabelId(idProp, syncLabelId);
+  const resolvedControlId = contextControlId ?? fallbackControlId;
+  function focusControl(event) {
+    if (focusControlProp) {
+      focusControlProp(event, resolvedControlId);
+      return;
+    }
+    if (!resolvedControlId) {
+      return;
+    }
+    const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
+    if (isHTMLElement(controlElement)) {
+      focusElementWithVisible(controlElement);
+    }
+  }
+  function handleInteraction(event) {
+    const target = getTarget(event.nativeEvent);
+    if (target?.closest('button,input,select,textarea')) {
+      return;
+    }
+
+    // Prevent text selection when double clicking label.
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault();
+    }
+    if (native) {
+      return;
+    }
+    focusControl(event);
+  }
+  return native ? {
+    id,
+    htmlFor: resolvedControlId ?? undefined,
+    onMouseDown: handleInteraction
+  } : {
+    id,
+    onClick: handleInteraction,
+    onPointerDown(event) {
+      event.preventDefault();
+    }
+  };
+}
+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 { 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 };

package/dist/utils/meta/meta.json

@@ -125,6 +125,9 @@
     "InputText",
     "InputTime",
     "InputValidation",
+    "LegacySelect",
+    "LegacySelect.Option",
+    "LegacySelect.OptionGroup",
     "LightBox",
     "LightBox.Background",
     "LightBox.Caption",
@@ -200,9 +203,6 @@
     "SegmentedControlContext.Consumer",
     "SegmentedControlContext.Provider",
     "SegmentedControlProvider",
-    "Select",
-    "Select.Option",
-    "Select.OptionGroup",
     "SideDrawer",
     "SideDrawer.Actions",
     "SideDrawer.BackButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.20.1",
+  "version": "8.21.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -340,10 +340,10 @@
       "import": "./dist/ResponsiveSwitcher/index.mjs",
       "require": "./dist/ResponsiveSwitcher/index.cjs"
     },
-    "./Select": {
-      "types": "./dist/Select/index.d.ts",
-      "import": "./dist/Select/index.mjs",
-      "require": "./dist/Select/index.cjs"
+    "./LegacySelect": {
+      "types": "./dist/LegacySelect/index.d.ts",
+      "import": "./dist/LegacySelect/index.mjs",
+      "require": "./dist/LegacySelect/index.cjs"
     },
     "./SideDrawer": {
       "types": "./dist/SideDrawer/index.d.ts",
@@ -487,7 +487,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.106.0",
+    "@jobber/design": "0.106.1",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c5da7c5d3db964c4803ccf359bc4e59ed63f668d"
+  "gitHead": "8b1aaf0160310df30d09ba5f3dd9b12a008970cc"
 }

package/Select.d.ts

@@ -1 +0,0 @@
-export * from "./dist/Select";

package/dist/Select/Select.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type { SelectProps } from "./Select.types";
-export declare function Select(props: SelectProps): React.JSX.Element;
-export declare namespace Select {
-    var Option: typeof import("./Option").Option;
-    var OptionGroup: typeof import("./OptionGroup").OptionGroup;
-}

package/dist/Select/index.d.ts

@@ -1,3 +0,0 @@
-export { Option } from "./Option";
-export { Select } from "./Select";
-export type { SelectProps } from "./Select.types";