@jobber/components 8.20.2 → 8.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/BottomSheet-cjs.js +9 -58
  2. package/dist/BottomSheet-es.js +2 -47
  3. package/dist/Card/index.cjs +4 -0
  4. package/dist/Card/index.mjs +4 -0
  5. package/dist/ComboboxChipRemove-cjs.js +3418 -0
  6. package/dist/ComboboxChipRemove-es.js +3366 -0
  7. package/dist/ComboboxPrimitive-cjs.js +170 -0
  8. package/dist/ComboboxPrimitive-es.js +168 -0
  9. package/dist/DataDump/index.cjs +4 -0
  10. package/dist/DataDump/index.mjs +4 -0
  11. package/dist/InputNumberExperimental-cjs.js +45 -44
  12. package/dist/InputNumberExperimental-es.js +3 -2
  13. package/dist/InternalBackdrop-cjs.js +4278 -0
  14. package/dist/InternalBackdrop-es.js +4204 -0
  15. package/dist/Menu/index.cjs +4 -0
  16. package/dist/Menu/index.mjs +4 -0
  17. package/dist/Menu-cjs.js +9 -8
  18. package/dist/Menu-es.js +2 -1
  19. package/dist/MenuSubmenuTrigger-cjs.js +208 -1969
  20. package/dist/MenuSubmenuTrigger-es.js +7 -1759
  21. package/dist/NumberFieldInput-cjs.js +56 -439
  22. package/dist/NumberFieldInput-es.js +6 -376
  23. package/dist/Page/index.cjs +4 -0
  24. package/dist/Page/index.mjs +4 -0
  25. package/dist/ScrollAreaViewport-cjs.js +108 -4356
  26. package/dist/ScrollAreaViewport-es.js +6 -4201
  27. package/dist/buttonRenderAdapter-cjs.js +56 -0
  28. package/dist/buttonRenderAdapter-es.js +51 -0
  29. package/dist/clamp-cjs.js +0 -1194
  30. package/dist/clamp-es.js +1 -1091
  31. package/dist/docs/empty-states/empty-states.md +29 -0
  32. package/dist/index.cjs +4 -0
  33. package/dist/index.mjs +4 -0
  34. package/dist/primitives/BottomSheet/index.cjs +5 -2
  35. package/dist/primitives/BottomSheet/index.mjs +5 -2
  36. package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts +32 -0
  37. package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.types.d.ts +30 -0
  38. package/dist/primitives/ComboboxPrimitive/index.cjs +28 -0
  39. package/dist/primitives/ComboboxPrimitive/index.d.ts +2 -0
  40. package/dist/primitives/ComboboxPrimitive/index.mjs +22 -0
  41. package/dist/primitives/InputNumberExperimental/index.cjs +4 -2
  42. package/dist/primitives/InputNumberExperimental/index.mjs +4 -2
  43. package/dist/primitives/index.cjs +11 -2
  44. package/dist/primitives/index.d.ts +1 -0
  45. package/dist/primitives/index.mjs +10 -2
  46. package/dist/styles.css +767 -0
  47. package/dist/unstyledPrimitives/index.cjs +237 -3588
  48. package/dist/unstyledPrimitives/index.mjs +96 -3447
  49. package/dist/useButton-cjs.js +1196 -0
  50. package/dist/useButton-es.js +1091 -0
  51. package/dist/useCompositeListItem-cjs.js +1792 -0
  52. package/dist/useCompositeListItem-es.js +1762 -0
  53. package/dist/useLabel-cjs.js +411 -0
  54. package/dist/useLabel-es.js +378 -0
  55. package/package.json +2 -2
@@ -1,9 +1,10 @@
1
- import { b as isElement, a as isHTMLElement, k as getWindow } from './floating-ui.utils.dom-es.js';
2
- import { a as useStableCallback, d as useIsoLayoutEffect, u as useBaseUiId, g as getTarget, o as ownerDocument, h as useOnMount, T as Timeout, i as clamp, j as useControlled, k as useValueAsRef, b as useTimeout, l as isIOS, m as createChangeEventDetails, n as none, v as visuallyHiddenInput, p as visuallyHidden, q as inputChange, r as inputClear, s as inputBlur, w as inputPaste, x as createGenericEventDetails, y as incrementPress, z as decrementPress, A as useButton, B as useValueChanged, C as stopEvent, D as keyboard } from './clamp-es.js';
3
1
  import * as React from 'react';
4
- import { N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT, a as useRefWithInit, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
2
+ import { z as useOnMount, T as Timeout, B as useControlled, j as useValueAsRef, d as useIsoLayoutEffect, a as useStableCallback, b as useTimeout, C as isIOS, n as createChangeEventDetails, D as none, E as visuallyHiddenInput, F as visuallyHidden, G as inputChange, H as inputClear, I as inputBlur, J as inputPaste, K as createGenericEventDetails, o as ownerDocument, L as incrementPress, M as decrementPress, N as useButton, O as useValueChanged, s as stopEvent, P as keyboard } from './useButton-es.js';
3
+ import { a as useRefWithInit, f as formatErrorMessage, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
4
+ import { f as fieldValidityMapping, b as useFieldRootContext, d as useLabelableId, a as useFormContext, u as useLabelableContext, e as useField } from './useLabel-es.js';
5
+ import { c as clamp } from './clamp-es.js';
5
6
  import { jsxs, jsx } from 'react/jsx-runtime';
6
- import * as ReactDOM from 'react-dom';
7
+ import { k as getWindow } from './floating-ui.utils.dom-es.js';
7
8
 
8
9
  /**
9
10
  * Returns a function that forces a rerender.
@@ -15,377 +16,6 @@ function useForcedRerendering() {
15
16
  }, []);
16
17
  }
17
18
 
18
- let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
19
- /**
20
- * Present when the field is disabled.
21
- */
22
- FieldControlDataAttributes["disabled"] = "data-disabled";
23
- /**
24
- * Present when the field is in valid state.
25
- */
26
- FieldControlDataAttributes["valid"] = "data-valid";
27
- /**
28
- * Present when the field is in invalid state.
29
- */
30
- FieldControlDataAttributes["invalid"] = "data-invalid";
31
- /**
32
- * Present when the field has been touched.
33
- */
34
- FieldControlDataAttributes["touched"] = "data-touched";
35
- /**
36
- * Present when the field's value has changed.
37
- */
38
- FieldControlDataAttributes["dirty"] = "data-dirty";
39
- /**
40
- * Present when the field is filled.
41
- */
42
- FieldControlDataAttributes["filled"] = "data-filled";
43
- /**
44
- * Present when the field control is focused.
45
- */
46
- FieldControlDataAttributes["focused"] = "data-focused";
47
- return FieldControlDataAttributes;
48
- }({});
49
-
50
- const DEFAULT_VALIDITY_STATE = {
51
- badInput: false,
52
- customError: false,
53
- patternMismatch: false,
54
- rangeOverflow: false,
55
- rangeUnderflow: false,
56
- stepMismatch: false,
57
- tooLong: false,
58
- tooShort: false,
59
- typeMismatch: false,
60
- valid: null,
61
- valueMissing: false
62
- };
63
- const DEFAULT_FIELD_STATE_ATTRIBUTES = {
64
- valid: null,
65
- touched: false,
66
- dirty: false,
67
- filled: false,
68
- focused: false
69
- };
70
- const DEFAULT_FIELD_ROOT_STATE = {
71
- disabled: false,
72
- ...DEFAULT_FIELD_STATE_ATTRIBUTES
73
- };
74
- const fieldValidityMapping = {
75
- valid(value) {
76
- if (value === null) {
77
- return null;
78
- }
79
- if (value) {
80
- return {
81
- [FieldControlDataAttributes.valid]: ''
82
- };
83
- }
84
- return {
85
- [FieldControlDataAttributes.invalid]: ''
86
- };
87
- }
88
- };
89
-
90
- const FieldRootContext = /*#__PURE__*/React.createContext({
91
- invalid: undefined,
92
- name: undefined,
93
- validityData: {
94
- state: DEFAULT_VALIDITY_STATE,
95
- errors: [],
96
- error: '',
97
- value: '',
98
- initialValue: null
99
- },
100
- setValidityData: NOOP,
101
- disabled: undefined,
102
- touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
103
- setTouched: NOOP,
104
- dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
105
- setDirty: NOOP,
106
- filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
107
- setFilled: NOOP,
108
- focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
109
- setFocused: NOOP,
110
- validate: () => null,
111
- validationMode: 'onSubmit',
112
- validationDebounceTime: 0,
113
- shouldValidateOnChange: () => false,
114
- state: DEFAULT_FIELD_ROOT_STATE,
115
- markedDirtyRef: {
116
- current: false
117
- },
118
- validation: {
119
- getValidationProps: (props = EMPTY_OBJECT) => props,
120
- getInputValidationProps: (props = EMPTY_OBJECT) => props,
121
- inputRef: {
122
- current: null
123
- },
124
- commit: async () => {}
125
- }
126
- });
127
- if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
128
- function useFieldRootContext(optional = true) {
129
- const context = React.useContext(FieldRootContext);
130
- if (context.setValidityData === NOOP && !optional) {
131
- throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : formatErrorMessage(28));
132
- }
133
- return context;
134
- }
135
-
136
- /**
137
- * Combines the field's client-side, stateful validity data with the external invalid state to
138
- * determine the field's true validity.
139
- */
140
- function getCombinedFieldValidityData(validityData, invalid) {
141
- return {
142
- ...validityData,
143
- state: {
144
- ...validityData.state,
145
- valid: !invalid && validityData.state.valid
146
- }
147
- };
148
- }
149
-
150
- const FormContext = /*#__PURE__*/React.createContext({
151
- formRef: {
152
- current: {
153
- fields: new Map()
154
- }
155
- },
156
- errors: {},
157
- clearErrors: NOOP,
158
- validationMode: 'onSubmit',
159
- submitAttemptedRef: {
160
- current: false
161
- }
162
- });
163
- if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
164
- function useFormContext() {
165
- return React.useContext(FormContext);
166
- }
167
-
168
- function useField(params) {
169
- const {
170
- enabled = true,
171
- value,
172
- id,
173
- name,
174
- controlRef,
175
- commit
176
- } = params;
177
- const {
178
- formRef
179
- } = useFormContext();
180
- const {
181
- invalid,
182
- markedDirtyRef,
183
- validityData,
184
- setValidityData
185
- } = useFieldRootContext();
186
- const getValue = useStableCallback(params.getValue);
187
- useIsoLayoutEffect(() => {
188
- if (!enabled) {
189
- return;
190
- }
191
- let initialValue = value;
192
- if (initialValue === undefined) {
193
- initialValue = getValue();
194
- }
195
- if (validityData.initialValue === null && initialValue !== null) {
196
- setValidityData(prev => ({
197
- ...prev,
198
- initialValue
199
- }));
200
- }
201
- }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
202
- useIsoLayoutEffect(() => {
203
- if (!enabled || !id) {
204
- return;
205
- }
206
- formRef.current.fields.set(id, {
207
- getValue,
208
- name,
209
- controlRef,
210
- validityData: getCombinedFieldValidityData(validityData, invalid),
211
- validate(flushSync = true) {
212
- let nextValue = value;
213
- if (nextValue === undefined) {
214
- nextValue = getValue();
215
- }
216
- markedDirtyRef.current = true;
217
- if (!flushSync) {
218
- commit(nextValue);
219
- } else {
220
- // Synchronously update the validity state so the submit event can be prevented.
221
- ReactDOM.flushSync(() => commit(nextValue));
222
- }
223
- }
224
- });
225
- }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
226
- useIsoLayoutEffect(() => {
227
- const fields = formRef.current.fields;
228
- return () => {
229
- if (id) {
230
- fields.delete(id);
231
- }
232
- };
233
- }, [formRef, id]);
234
- }
235
-
236
- /**
237
- * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
238
- * with an accessible name (label) and description.
239
- */
240
- const LabelableContext = /*#__PURE__*/React.createContext({
241
- controlId: undefined,
242
- registerControlId: NOOP,
243
- labelId: undefined,
244
- setLabelId: NOOP,
245
- messageIds: [],
246
- setMessageIds: NOOP,
247
- getDescriptionProps: externalProps => externalProps
248
- });
249
- if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
250
- function useLabelableContext() {
251
- return React.useContext(LabelableContext);
252
- }
253
-
254
- function useLabelableId(params = {}) {
255
- const {
256
- id,
257
- implicit = false,
258
- controlRef
259
- } = params;
260
- const {
261
- controlId,
262
- registerControlId
263
- } = useLabelableContext();
264
- const defaultId = useBaseUiId(id);
265
- const controlIdForEffect = implicit ? controlId : undefined;
266
- const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
267
- const hasRegisteredRef = React.useRef(false);
268
- const hadExplicitIdRef = React.useRef(id != null);
269
- const unregisterControlId = useStableCallback(() => {
270
- if (!hasRegisteredRef.current || registerControlId === NOOP) {
271
- return;
272
- }
273
- hasRegisteredRef.current = false;
274
- registerControlId(controlSourceRef.current, undefined);
275
- });
276
- useIsoLayoutEffect(() => {
277
- if (registerControlId === NOOP) {
278
- return undefined;
279
- }
280
- let nextId;
281
- if (implicit) {
282
- const elem = controlRef?.current;
283
- if (isElement(elem) && elem.closest('label') != null) {
284
- nextId = id ?? null;
285
- } else {
286
- nextId = controlIdForEffect ?? defaultId;
287
- }
288
- } else if (id != null) {
289
- hadExplicitIdRef.current = true;
290
- nextId = id;
291
- } else if (hadExplicitIdRef.current) {
292
- nextId = defaultId;
293
- } else {
294
- unregisterControlId();
295
- return undefined;
296
- }
297
- if (nextId === undefined) {
298
- unregisterControlId();
299
- return undefined;
300
- }
301
- hasRegisteredRef.current = true;
302
- registerControlId(controlSourceRef.current, nextId);
303
- return undefined;
304
- }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
305
- React.useEffect(() => {
306
- return unregisterControlId;
307
- }, [unregisterControlId]);
308
- return controlId ?? defaultId;
309
- }
310
-
311
- function useRegisteredLabelId(idProp, setLabelId) {
312
- const id = useBaseUiId(idProp);
313
- useIsoLayoutEffect(() => {
314
- setLabelId(id);
315
- return () => {
316
- setLabelId(undefined);
317
- };
318
- }, [id, setLabelId]);
319
- return id;
320
- }
321
-
322
- function useLabel(params = {}) {
323
- const {
324
- id: idProp,
325
- fallbackControlId,
326
- native = false,
327
- setLabelId: setLabelIdProp,
328
- focusControl: focusControlProp
329
- } = params;
330
- const {
331
- controlId: contextControlId,
332
- setLabelId: setContextLabelId
333
- } = useLabelableContext();
334
- const syncLabelId = useStableCallback(nextLabelId => {
335
- setContextLabelId(nextLabelId);
336
- setLabelIdProp?.(nextLabelId);
337
- });
338
- const id = useRegisteredLabelId(idProp, syncLabelId);
339
- const resolvedControlId = contextControlId ?? fallbackControlId;
340
- function focusControl(event) {
341
- if (focusControlProp) {
342
- focusControlProp(event, resolvedControlId);
343
- return;
344
- }
345
- if (!resolvedControlId) {
346
- return;
347
- }
348
- const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
349
- if (isHTMLElement(controlElement)) {
350
- focusElementWithVisible(controlElement);
351
- }
352
- }
353
- function handleInteraction(event) {
354
- const target = getTarget(event.nativeEvent);
355
- if (target?.closest('button,input,select,textarea')) {
356
- return;
357
- }
358
-
359
- // Prevent text selection when double clicking label.
360
- if (!event.defaultPrevented && event.detail > 1) {
361
- event.preventDefault();
362
- }
363
- if (native) {
364
- return;
365
- }
366
- focusControl(event);
367
- }
368
- return native ? {
369
- id,
370
- htmlFor: resolvedControlId ?? undefined,
371
- onMouseDown: handleInteraction
372
- } : {
373
- id,
374
- onClick: handleInteraction,
375
- onPointerDown(event) {
376
- event.preventDefault();
377
- }
378
- };
379
- }
380
- function focusElementWithVisible(element) {
381
- element.focus({
382
- // Available from Chrome 144+ (January 2026).
383
- // Safari and Firefox already support it.
384
- // @ts-expect-error not available in types yet
385
- focusVisible: true
386
- });
387
- }
388
-
389
19
  const cache = new Map();
390
20
  function getFormatter(locale, options) {
391
21
  const optionsString = JSON.stringify({
@@ -1862,4 +1492,4 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
1862
1492
  });
1863
1493
  if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
1864
1494
 
1865
- export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, NumberFieldRoot as N, useFormContext as a, useFieldRootContext as b, useLabel as c, NumberFieldGroup as d, NumberFieldInput as e, fieldValidityMapping as f, getCombinedFieldValidityData as g, NumberFieldIncrement as h, NumberFieldDecrement as i, useLabelableId as j, useField as k, DEFAULT_FIELD_STATE_ATTRIBUTES as l, useNumberFieldRootContext as m, DEFAULT_STEP as n, stateAttributesMapping$1 as s, useLabelableContext as u };
1495
+ export { DEFAULT_STEP as D, NumberFieldRoot as N, NumberFieldGroup as a, NumberFieldInput as b, NumberFieldIncrement as c, NumberFieldDecrement as d, stateAttributesMapping$1 as s, useNumberFieldRootContext as u };
@@ -27,12 +27,16 @@ require('../floating-ui.react-dom-cjs.js');
27
27
  require('../useFormFieldFocus-cjs.js');
28
28
  require('../maxHeight-cjs.js');
29
29
  require('../useRenderElement-cjs.js');
30
+ require('../buttonRenderAdapter-cjs.js');
30
31
  require('../BottomSheet-cjs.js');
31
32
  require('../ScrollAreaViewport-cjs.js');
33
+ require('../InternalBackdrop-cjs.js');
34
+ require('../useButton-cjs.js');
32
35
  require('../clamp-cjs.js');
33
36
  require('../OverlaySeparator-cjs.js');
34
37
  require('../Separator-cjs.js');
35
38
  require('../MenuSubmenuTrigger-cjs.js');
39
+ require('../useCompositeListItem-cjs.js');
36
40
  require('../filterDataAttributes-cjs.js');
37
41
 
38
42
 
@@ -25,10 +25,14 @@ import '../floating-ui.react-dom-es.js';
25
25
  import '../useFormFieldFocus-es.js';
26
26
  import '../maxHeight-es.js';
27
27
  import '../useRenderElement-es.js';
28
+ import '../buttonRenderAdapter-es.js';
28
29
  import '../BottomSheet-es.js';
29
30
  import '../ScrollAreaViewport-es.js';
31
+ import '../InternalBackdrop-es.js';
32
+ import '../useButton-es.js';
30
33
  import '../clamp-es.js';
31
34
  import '../OverlaySeparator-es.js';
32
35
  import '../Separator-es.js';
33
36
  import '../MenuSubmenuTrigger-es.js';
37
+ import '../useCompositeListItem-es.js';
34
38
  import '../filterDataAttributes-es.js';