@jobber/components 6.103.2-JOB-140609-8386817.45 → 6.103.3

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 (79) hide show
  1. package/dist/Autocomplete/Autocomplete.types.d.ts +1 -12
  2. package/dist/Autocomplete/index.cjs +13 -1
  3. package/dist/Autocomplete/index.mjs +13 -1
  4. package/dist/Checkbox/Checkbox.types.d.ts +9 -2
  5. package/dist/Checkbox/index.cjs +2 -4
  6. package/dist/Checkbox/index.mjs +2 -4
  7. package/dist/Chips/InternalChipDismissible/hooks/index.cjs +2 -2
  8. package/dist/Chips/InternalChipDismissible/hooks/index.mjs +2 -2
  9. package/dist/Chips/InternalChipDismissible/index.cjs +2 -2
  10. package/dist/Chips/InternalChipDismissible/index.mjs +2 -2
  11. package/dist/Chips/index.cjs +2 -2
  12. package/dist/Chips/index.mjs +2 -2
  13. package/dist/DataList/components/DataListSearch/index.cjs +12 -1
  14. package/dist/DataList/components/DataListSearch/index.mjs +12 -1
  15. package/dist/DataList/index.cjs +8 -0
  16. package/dist/DataList/index.mjs +8 -0
  17. package/dist/DataTable/index.cjs +2 -2
  18. package/dist/DataTable/index.mjs +2 -2
  19. package/dist/DatePicker/index.cjs +2 -2
  20. package/dist/DatePicker/index.mjs +2 -2
  21. package/dist/FormField/FormFieldTypes.d.ts +2 -0
  22. package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts +2 -7
  23. package/dist/FormField-cjs.js +6 -1
  24. package/dist/FormField-es.js +6 -2
  25. package/dist/InputDate/index.cjs +9 -5
  26. package/dist/InputDate/index.mjs +9 -5
  27. package/dist/InputDate/useInputDateActivatorActions.d.ts +8 -4
  28. package/dist/InputEmail/InputEmail.types.d.ts +20 -12
  29. package/dist/InputEmail/hooks/useInputEmailActions.d.ts +1 -1
  30. package/dist/InputEmail/hooks/useInputEmailFormField.d.ts +32 -0
  31. package/dist/InputEmail/index.cjs +44 -8
  32. package/dist/InputEmail/index.mjs +44 -8
  33. package/dist/InputNumber/InputNumber.rebuilt.types.d.ts +3 -20
  34. package/dist/InputNumber/index.cjs +3 -3
  35. package/dist/InputNumber/index.mjs +3 -3
  36. package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts +27 -13
  37. package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts +1 -1
  38. package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts +71 -0
  39. package/dist/InputPhoneNumber/index.cjs +34 -17
  40. package/dist/InputPhoneNumber/index.mjs +34 -17
  41. package/dist/InputText/InputText.types.d.ts +24 -24
  42. package/dist/InputText/index.cjs +54 -54
  43. package/dist/InputText/index.mjs +55 -55
  44. package/dist/InputText/useInputTextActions.d.ts +1 -1
  45. package/dist/InputText/useInputTextFormField.d.ts +352 -0
  46. package/dist/InputTime/InputTime.rebuilt.d.ts +1 -1
  47. package/dist/InputTime/InputTime.types.d.ts +1 -21
  48. package/dist/InputTime/index.cjs +33 -63
  49. package/dist/InputTime/index.d.ts +1 -1
  50. package/dist/InputTime/index.mjs +36 -66
  51. package/dist/List/index.cjs +2 -2
  52. package/dist/List/index.mjs +2 -2
  53. package/dist/RecurringSelect/index.cjs +2 -2
  54. package/dist/RecurringSelect/index.mjs +2 -2
  55. package/dist/Select/Select.rebuilt.d.ts +1 -1
  56. package/dist/Select/Select.types.d.ts +1 -14
  57. package/dist/Select/hooks/useSelectActions.d.ts +5 -5
  58. package/dist/Select/hooks/useSelectFormField.d.ts +34 -0
  59. package/dist/Select/index.cjs +41 -28
  60. package/dist/Select/index.d.ts +5 -7
  61. package/dist/Select/index.mjs +43 -30
  62. package/dist/Tabs-es.js +1 -1
  63. package/dist/_baseEach-cjs.js +12 -12
  64. package/dist/_baseEach-es.js +1 -1
  65. package/dist/_baseFlatten-cjs.js +2 -2
  66. package/dist/_baseFlatten-es.js +1 -1
  67. package/dist/{_getAllKeys-cjs.js → _baseGet-cjs.js} +181 -181
  68. package/dist/{_getAllKeys-es.js → _baseGet-es.js} +182 -182
  69. package/dist/debounce-es.js +1 -1
  70. package/dist/index.cjs +2 -2
  71. package/dist/index.mjs +2 -2
  72. package/dist/omit-cjs.js +14 -14
  73. package/dist/omit-es.js +1 -1
  74. package/dist/sharedHelpers/types.d.ts +0 -235
  75. package/dist/styles.css +18 -20
  76. package/dist/useScrollToActive-cjs.js +3 -3
  77. package/dist/useScrollToActive-es.js +2 -2
  78. package/package.json +2 -2
  79. package/dist/InputTime/hooks/useInputTimeActions.d.ts +0 -16
@@ -1,7 +1,7 @@
1
- import React__default, { useState, useCallback, useEffect, forwardRef, useRef, useId } from 'react';
1
+ import React__default, { useState, useCallback, useEffect, useRef, useId } from 'react';
2
2
  import { _ as __rest } from '../tslib.es6-es.js';
3
- import { a as debounce } from '../debounce-es.js';
4
- import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, m as mergeRefs, k as FormField } from '../FormField-es.js';
3
+ import { d as debounce } from '../debounce-es.js';
4
+ import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, k as FormField } from '../FormField-es.js';
5
5
  import 'classnames';
6
6
  import '@jobber/design';
7
7
  import 'react-hook-form';
@@ -19,7 +19,7 @@ import '../useFormFieldFocus-es.js';
19
19
  import '../InputValidation-es.js';
20
20
  import '../Spinner-es.js';
21
21
  import 'react-router-dom';
22
- import '../_getAllKeys-es.js';
22
+ import '../_baseGet-es.js';
23
23
  import '../isTypedArray-es.js';
24
24
  import '../identity-es.js';
25
25
  import '../_getTag-es.js';
@@ -202,7 +202,23 @@ function timeStringToDate(timeString, baseDate) {
202
202
  }
203
203
  }
204
204
 
205
- function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
205
+ function InputTimeRebuilt(_a) {
206
+ var _b, _c;
207
+ var { value, onChange } = _a, params = __rest(_a, ["value", "onChange"]);
208
+ const ref = (_b = params.inputRef) !== null && _b !== void 0 ? _b : useRef(null);
209
+ const { setTypedTime } = useTimePredict({
210
+ value,
211
+ handleChange,
212
+ });
213
+ const { inputStyle } = useFormFieldWrapperStyles(params);
214
+ const wrapperRef = React__default.useRef(null);
215
+ const id = getId(params);
216
+ return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, clearable: (_c = params.clearable) !== null && _c !== void 0 ? _c : "never", onClear: handleClear, type: "time", readonly: params.readonly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
217
+ React__default.createElement("input", { ref: ref, type: "time", name: params.name, className: inputStyle, onBlur: handleBlur, id: id, disabled: params.disabled, readOnly: params.readonly, onChange: handleChangeEvent, onFocus: handleFocus, "data-testid": "ATL-InputTime-input", onKeyUp: e => {
218
+ if (params.disabled || params.readonly)
219
+ return;
220
+ !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
221
+ }, value: dateToTimeString(value) })));
206
222
  function handleChangeEvent(event) {
207
223
  handleChange(event.target.value);
208
224
  }
@@ -210,76 +226,30 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
210
226
  onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
211
227
  }
212
228
  function handleBlur(event) {
213
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
214
- if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
215
- if (!inputRef.current.checkValidity()) {
216
- inputRef.current.value = "";
229
+ var _a;
230
+ (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params, event);
231
+ if (ref.current) {
232
+ if (!ref.current.checkValidity()) {
233
+ ref.current.value = "";
217
234
  }
218
235
  }
219
236
  }
220
237
  function handleClear() {
221
238
  var _a;
222
- // Clear the value and refocus without triggering blur event
239
+ handleBlur();
223
240
  onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
224
- (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
241
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
225
242
  }
226
243
  function handleFocus(event) {
227
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
244
+ var _a;
245
+ (_a = params.onFocus) === null || _a === void 0 ? void 0 : _a.call(params, event);
228
246
  }
229
- function handleKeyDown(event) {
230
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
247
+ function getId(props) {
248
+ const generatedId = useId();
249
+ return props.id || generatedId;
231
250
  }
232
- return {
233
- handleChangeEvent,
234
- handleChange,
235
- handleBlur,
236
- handleClear,
237
- handleFocus,
238
- handleKeyDown,
239
- };
240
251
  }
241
252
 
242
- const InputTimeRebuilt = forwardRef(function InputTimeRebuilt(_a, forwardedRef) {
243
- var _b;
244
- var { value, onChange, readOnly, autoComplete,
245
- // Deprecated props
246
- inputRef: deprecatedInputRef } = _a, params = __rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef"]);
247
- const internalRef = useRef(null);
248
- const mergedRef = mergeRefs([
249
- internalRef,
250
- deprecatedInputRef,
251
- forwardedRef,
252
- ]);
253
- const id = params.id || useId();
254
- const wrapperRef = React__default.useRef(null);
255
- const { inputStyle } = useFormFieldWrapperStyles(params);
256
- const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
257
- onChange,
258
- value,
259
- readOnly,
260
- disabled: params.disabled,
261
- inputRef: internalRef,
262
- onFocus: params.onFocus,
263
- onBlur: params.onBlur,
264
- onKeyDown: params.onKeyDown,
265
- });
266
- const { setTypedTime } = useTimePredict({
267
- value,
268
- handleChange,
269
- });
270
- // Kept outside the useInputTimeActions hook to avoid circular dependency via setTypedTime and handleChange
271
- function handleKeyUp(event) {
272
- var _a;
273
- (_a = params.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(params, event);
274
- if (params.disabled || readOnly)
275
- return;
276
- !isNaN(parseInt(event.key, 10)) && setTypedTime(prev => prev + event.key);
277
- }
278
- const isInvalid = Boolean(params.error || params.invalid);
279
- return (React__default.createElement(FormFieldWrapper, { disabled: params.disabled, size: params.size, align: params.align, inline: params.inline, name: params.name, error: params.error || "", identifier: id, descriptionIdentifier: `descriptionUUID--${id}`, invalid: Boolean(params.invalid), description: params.description, maxLength: params.maxLength, clearable: (_b = params.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: params.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
280
- React__default.createElement("input", { ref: mergedRef, type: "time", name: params.name, className: inputStyle, id: id, disabled: params.disabled, readOnly: readOnly, autoComplete: autoComplete, maxLength: params.maxLength, max: params.max, min: params.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputTime-input", "aria-label": params.ariaLabel, "aria-describedby": params.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-required": params.ariaRequired })));
281
- });
282
-
283
253
  function InputTime$1(_a) {
284
254
  var { defaultValue, value, onChange } = _a, params = __rest(_a, ["defaultValue", "value", "onChange"]);
285
255
  const ref = useRef(null);
@@ -310,13 +280,13 @@ function InputTime$1(_a) {
310
280
  function isNewInputTimeProps(props) {
311
281
  return props.version === 2;
312
282
  }
313
- const InputTime = forwardRef(function InputTimeShim(props, ref) {
283
+ function InputTime(props) {
314
284
  if (isNewInputTimeProps(props)) {
315
- return React__default.createElement(InputTimeRebuilt, Object.assign({}, props, { ref: ref }));
285
+ return React__default.createElement(InputTimeRebuilt, Object.assign({}, props));
316
286
  }
317
287
  else {
318
288
  return React__default.createElement(InputTime$1, Object.assign({}, props));
319
289
  }
320
- });
290
+ }
321
291
 
322
292
  export { InputTime };
@@ -8,9 +8,9 @@ require('../identity-cjs.js');
8
8
  require('../isTypedArray-cjs.js');
9
9
  require('../isObjectLike-cjs.js');
10
10
  require('../_commonjsHelpers-cjs.js');
11
- require('../_getAllKeys-cjs.js');
12
- require('../isSymbol-cjs.js');
11
+ require('../_baseGet-cjs.js');
13
12
  require('../_getTag-cjs.js');
13
+ require('../isSymbol-cjs.js');
14
14
  require('../_baseFor-cjs.js');
15
15
  require('../_baseAssignValue-cjs.js');
16
16
  require('../Typography-cjs.js');
@@ -6,9 +6,9 @@ import '../identity-es.js';
6
6
  import '../isTypedArray-es.js';
7
7
  import '../isObjectLike-es.js';
8
8
  import '../_commonjsHelpers-es.js';
9
- import '../_getAllKeys-es.js';
10
- import '../isSymbol-es.js';
9
+ import '../_baseGet-es.js';
11
10
  import '../_getTag-es.js';
11
+ import '../isSymbol-es.js';
12
12
  import '../_baseFor-es.js';
13
13
  import '../_baseAssignValue-es.js';
14
14
  import '../Typography-es.js';
@@ -9,12 +9,12 @@ require('classnames');
9
9
  require('../Select/index.cjs');
10
10
  require('../omit-cjs.js');
11
11
  require('../_commonjsHelpers-cjs.js');
12
- require('../_getAllKeys-cjs.js');
12
+ require('../_baseGet-cjs.js');
13
13
  require('../isTypedArray-cjs.js');
14
14
  require('../isObjectLike-cjs.js');
15
- require('../isSymbol-cjs.js');
16
15
  require('../identity-cjs.js');
17
16
  require('../_getTag-cjs.js');
17
+ require('../isSymbol-cjs.js');
18
18
  require('../keysIn-cjs.js');
19
19
  require('../_baseAssignValue-cjs.js');
20
20
  require('../_baseFlatten-cjs.js');
@@ -7,12 +7,12 @@ import 'classnames';
7
7
  import '../Select/index.mjs';
8
8
  import '../omit-es.js';
9
9
  import '../_commonjsHelpers-es.js';
10
- import '../_getAllKeys-es.js';
10
+ import '../_baseGet-es.js';
11
11
  import '../isTypedArray-es.js';
12
12
  import '../isObjectLike-es.js';
13
- import '../isSymbol-es.js';
14
13
  import '../identity-es.js';
15
14
  import '../_getTag-es.js';
15
+ import '../isSymbol-es.js';
16
16
  import '../keysIn-es.js';
17
17
  import '../_baseAssignValue-es.js';
18
18
  import '../_baseFlatten-es.js';
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import type { SelectRebuiltProps } from "./Select.types";
3
- export declare const SelectRebuilt: React.ForwardRefExoticComponent<SelectRebuiltProps & React.RefAttributes<HTMLSelectElement>>;
3
+ export declare function SelectRebuilt(props: SelectRebuiltProps): React.JSX.Element;
@@ -1,5 +1,4 @@
1
1
  import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
2
- import type { AriaInputProps, FocusEvents } from "../sharedHelpers/types";
3
2
  export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "name" | "onValidation" | "placeholder" | "size" | "value" | "onChange">, Pick<FormFieldProps, "autofocus" | "onEnter" | "onBlur" | "onFocus" | "inputRef" | "wrapperRef" | "validations" | "children" | "prefix" | "suffix" | "defaultValue" | "version"> {
4
3
  /**
5
4
  * Changes the width to roughly the same size as the maximum character length
@@ -9,24 +8,12 @@ export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "al
9
8
  /**
10
9
  * Rebuilt version of the Select component without React Hook Form dependency.
11
10
  */
12
- export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValue" | "version" | "onChange" | "value" | "validations" | "onValidation" | "autofocus" | "inputRef" | "onEnter" | "onBlur" | "onFocus">, AriaInputProps, FocusEvents<HTMLSelectElement> {
11
+ export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValue" | "version" | "onChange" | "value" | "validations" | "onValidation"> {
13
12
  defaultValue?: never;
14
13
  readonly value?: string | number;
15
14
  onChange?(newValue?: string | number): void;
16
15
  version: 2;
17
16
  error?: string;
18
- /**
19
- * Automatically focus the select when mounted.
20
- */
21
- readonly autoFocus?: boolean;
22
- /**
23
- * @deprecated Use `ref` instead. Note: `ref` support requires React 18+ forwardRef.
24
- */
25
- readonly inputRef?: FormFieldProps["inputRef"];
26
- /**
27
- * @deprecated Use `onKeyDown` or `onKeyUp` instead.
28
- */
29
- readonly onEnter?: FormFieldProps["onEnter"];
30
17
  /**
31
18
  * Opt-in to the customizable select UI (Chromium 123+).
32
19
  * When true, the component will apply the custom select styles
@@ -1,15 +1,15 @@
1
- import type { ChangeEvent, FocusEvent } from "react";
1
+ import type { ChangeEvent } from "react";
2
2
  interface UseSelectActionsProps {
3
3
  readonly onChange?: (newValue: string | number, event?: ChangeEvent<HTMLSelectElement>) => void;
4
- readonly onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
5
- readonly onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
4
+ readonly onBlur?: () => void;
5
+ readonly onFocus?: () => void;
6
6
  }
7
7
  /**
8
8
  * Hook with actions on the Select component.
9
9
  */
10
10
  export declare function useSelectActions({ onChange, onBlur, onFocus, }: UseSelectActionsProps): {
11
11
  handleChange: (event: ChangeEvent<HTMLSelectElement>) => void;
12
- handleBlur: (event: FocusEvent<HTMLSelectElement>) => void;
13
- handleFocus: (event: FocusEvent<HTMLSelectElement>) => void;
12
+ handleBlur: () => void;
13
+ handleFocus: () => void;
14
14
  };
15
15
  export {};
@@ -0,0 +1,34 @@
1
+ import type { ChangeEvent, ReactNode } from "react";
2
+ export interface UseSelectFormFieldProps {
3
+ readonly id: string;
4
+ readonly name: string;
5
+ readonly disabled?: boolean;
6
+ readonly autofocus?: boolean;
7
+ readonly description?: ReactNode;
8
+ readonly inline?: boolean;
9
+ readonly error?: string;
10
+ readonly invalid?: boolean;
11
+ readonly value?: string | number;
12
+ readonly handleChange: (event: ChangeEvent<HTMLSelectElement>) => void;
13
+ readonly handleBlur: () => void;
14
+ readonly handleFocus: () => void;
15
+ }
16
+ export interface UseSelectFormFieldReturn {
17
+ readonly fieldProps: {
18
+ readonly id: string;
19
+ readonly name: string;
20
+ readonly disabled?: boolean;
21
+ readonly autoFocus?: boolean;
22
+ readonly onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
23
+ readonly onBlur: () => void;
24
+ readonly onFocus: () => void;
25
+ readonly value?: string | number;
26
+ readonly "aria-describedby"?: string;
27
+ };
28
+ readonly descriptionIdentifier: string;
29
+ }
30
+ /**
31
+ * Hook for managing the props of a Select component.
32
+ * Extracted from FormField's useAtlantisFormField.
33
+ */
34
+ export declare function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }: UseSelectFormFieldProps): UseSelectFormFieldReturn;
@@ -11,12 +11,12 @@ require('framer-motion');
11
11
  require('@jobber/design');
12
12
  require('../Button-cjs.js');
13
13
  require('../_commonjsHelpers-cjs.js');
14
- require('../_getAllKeys-cjs.js');
14
+ require('../_baseGet-cjs.js');
15
15
  require('../isTypedArray-cjs.js');
16
16
  require('../isObjectLike-cjs.js');
17
- require('../isSymbol-cjs.js');
18
17
  require('../identity-cjs.js');
19
18
  require('../_getTag-cjs.js');
19
+ require('../isSymbol-cjs.js');
20
20
  require('../keysIn-cjs.js');
21
21
  require('../_baseAssignValue-cjs.js');
22
22
  require('../_baseFlatten-cjs.js');
@@ -42,11 +42,11 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
42
42
  const newValue = event.currentTarget.value;
43
43
  onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
44
44
  }
45
- function handleBlur(event) {
46
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
45
+ function handleBlur() {
46
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
47
47
  }
48
- function handleFocus(event) {
49
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
48
+ function handleFocus() {
49
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus();
50
50
  }
51
51
  return {
52
52
  handleChange,
@@ -55,22 +55,27 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
55
55
  };
56
56
  }
57
57
 
58
+ /**
59
+ * Hook for managing the props of a Select component.
60
+ * Extracted from FormField's useAtlantisFormField.
61
+ */
62
+ function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
63
+ const descriptionIdentifier = `descriptionUUID--${id}`;
64
+ const fieldProps = Object.assign({ id,
65
+ name,
66
+ disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
67
+ !inline && { "aria-describedby": descriptionIdentifier }));
68
+ return { fieldProps, descriptionIdentifier };
69
+ }
70
+
58
71
  var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
59
72
 
60
- const SelectRebuilt = React.forwardRef(function SelectRebuilt(props, forwardedRef) {
61
- var _a;
62
- // Deprecated props
63
- const { inputRef: deprecatedInputRef } = props;
64
- const internalRef = React.useRef(null);
65
- const mergedRef = FormField.mergeRefs([
66
- internalRef,
67
- deprecatedInputRef,
68
- forwardedRef,
69
- ]);
73
+ function SelectRebuilt(props) {
74
+ var _a, _b;
75
+ const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : React.useRef(null);
70
76
  const wrapperRef = React.useRef(null);
71
77
  const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign({}, omit.omit(props, ["version"])));
72
78
  const id = useSelectId(props);
73
- const descriptionIdentifier = `descriptionUUID--${id}`;
74
79
  const { name } = FormField.useAtlantisFormFieldName({
75
80
  nameProp: props.name,
76
81
  id: id,
@@ -80,15 +85,24 @@ const SelectRebuilt = React.forwardRef(function SelectRebuilt(props, forwardedRe
80
85
  onBlur: props.onBlur,
81
86
  onFocus: props.onFocus,
82
87
  });
83
- const isInvalid = Boolean(props.error || props.invalid);
84
- return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
88
+ const inputProps = omit.omit(props, [
89
+ "onChange",
90
+ "onBlur",
91
+ "onFocus",
92
+ "size",
93
+ "placeholder",
94
+ "version",
95
+ ]);
96
+ const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
97
+ name,
98
+ handleChange,
99
+ handleBlur,
100
+ handleFocus }));
101
+ return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
85
102
  React.createElement(React.Fragment, null,
86
- React.createElement("select", { id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props.ariaLabel, "aria-describedby": props.ariaDescribedBy ||
87
- (props.description && !props.inline
88
- ? descriptionIdentifier
89
- : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
103
+ React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
90
104
  React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
91
- });
105
+ }
92
106
  function useSelectId(props) {
93
107
  const generatedId = React.useId();
94
108
  return props.id || generatedId;
@@ -105,15 +119,14 @@ function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style
105
119
  function isNewSelectProps(props) {
106
120
  return props.version === 2;
107
121
  }
108
- const SelectBase = React.forwardRef(function SelectShim(props, ref) {
122
+ function Select(props) {
109
123
  if (isNewSelectProps(props)) {
110
- return React.createElement(SelectRebuilt, Object.assign({}, props, { ref: ref }));
124
+ return React.createElement(SelectRebuilt, Object.assign({}, props));
111
125
  }
112
126
  else {
113
127
  return React.createElement(Select$1, Object.assign({}, props));
114
128
  }
115
- });
116
- const Select = SelectBase;
129
+ }
117
130
  Select.Option = SelectOption;
118
131
  Select.OptionGroup = OptionGroup;
119
132
 
@@ -1,12 +1,10 @@
1
1
  import React from "react";
2
- import { Option } from "./Option";
3
- import { OptionGroup } from "./OptionGroup";
4
2
  import { type SelectLegacyProps, type SelectRebuiltProps } from "./Select.types";
5
3
  export { Option } from "./Option";
6
4
  export type SelectShimProps = SelectLegacyProps | SelectRebuiltProps;
7
- type SelectComponent = React.ForwardRefExoticComponent<SelectShimProps & React.RefAttributes<HTMLSelectElement>> & {
8
- Option: typeof Option;
9
- OptionGroup: typeof OptionGroup;
10
- };
11
- export declare const Select: SelectComponent;
5
+ export declare function Select(props: SelectShimProps): React.JSX.Element;
6
+ export declare namespace Select {
7
+ var Option: typeof import("./Option").Option;
8
+ var OptionGroup: typeof import("./OptionGroup").OptionGroup;
9
+ }
12
10
  export type { SelectRebuiltProps, SelectLegacyProps };
@@ -1,6 +1,6 @@
1
- import React__default, { forwardRef, useRef, useId } from 'react';
1
+ import React__default, { useRef, useId } from 'react';
2
2
  import { o as omit } from '../omit-es.js';
3
- import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
3
+ import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
4
4
  import classnames from 'classnames';
5
5
  import '../tslib.es6-es.js';
6
6
  import 'react-hook-form';
@@ -9,12 +9,12 @@ import 'framer-motion';
9
9
  import '@jobber/design';
10
10
  import '../Button-es.js';
11
11
  import '../_commonjsHelpers-es.js';
12
- import '../_getAllKeys-es.js';
12
+ import '../_baseGet-es.js';
13
13
  import '../isTypedArray-es.js';
14
14
  import '../isObjectLike-es.js';
15
- import '../isSymbol-es.js';
16
15
  import '../identity-es.js';
17
16
  import '../_getTag-es.js';
17
+ import '../isSymbol-es.js';
18
18
  import '../keysIn-es.js';
19
19
  import '../_baseAssignValue-es.js';
20
20
  import '../_baseFlatten-es.js';
@@ -40,11 +40,11 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
40
40
  const newValue = event.currentTarget.value;
41
41
  onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
42
42
  }
43
- function handleBlur(event) {
44
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
43
+ function handleBlur() {
44
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur();
45
45
  }
46
- function handleFocus(event) {
47
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
46
+ function handleFocus() {
47
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus();
48
48
  }
49
49
  return {
50
50
  handleChange,
@@ -53,22 +53,27 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
53
53
  };
54
54
  }
55
55
 
56
+ /**
57
+ * Hook for managing the props of a Select component.
58
+ * Extracted from FormField's useAtlantisFormField.
59
+ */
60
+ function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
61
+ const descriptionIdentifier = `descriptionUUID--${id}`;
62
+ const fieldProps = Object.assign({ id,
63
+ name,
64
+ disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
65
+ !inline && { "aria-describedby": descriptionIdentifier }));
66
+ return { fieldProps, descriptionIdentifier };
67
+ }
68
+
56
69
  var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
57
70
 
58
- const SelectRebuilt = forwardRef(function SelectRebuilt(props, forwardedRef) {
59
- var _a;
60
- // Deprecated props
61
- const { inputRef: deprecatedInputRef } = props;
62
- const internalRef = useRef(null);
63
- const mergedRef = mergeRefs([
64
- internalRef,
65
- deprecatedInputRef,
66
- forwardedRef,
67
- ]);
71
+ function SelectRebuilt(props) {
72
+ var _a, _b;
73
+ const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : useRef(null);
68
74
  const wrapperRef = useRef(null);
69
75
  const { inputStyle } = useFormFieldWrapperStyles(Object.assign({}, omit(props, ["version"])));
70
76
  const id = useSelectId(props);
71
- const descriptionIdentifier = `descriptionUUID--${id}`;
72
77
  const { name } = useAtlantisFormFieldName({
73
78
  nameProp: props.name,
74
79
  id: id,
@@ -78,15 +83,24 @@ const SelectRebuilt = forwardRef(function SelectRebuilt(props, forwardedRef) {
78
83
  onBlur: props.onBlur,
79
84
  onFocus: props.onFocus,
80
85
  });
81
- const isInvalid = Boolean(props.error || props.invalid);
82
- return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
86
+ const inputProps = omit(props, [
87
+ "onChange",
88
+ "onBlur",
89
+ "onFocus",
90
+ "size",
91
+ "placeholder",
92
+ "version",
93
+ ]);
94
+ const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
95
+ name,
96
+ handleChange,
97
+ handleBlur,
98
+ handleFocus }));
99
+ return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
83
100
  React__default.createElement(React__default.Fragment, null,
84
- React__default.createElement("select", { id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props.ariaLabel, "aria-describedby": props.ariaDescribedBy ||
85
- (props.description && !props.inline
86
- ? descriptionIdentifier
87
- : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": props.ariaRequired, ref: mergedRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }, props.children),
101
+ React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
88
102
  React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
89
- });
103
+ }
90
104
  function useSelectId(props) {
91
105
  const generatedId = useId();
92
106
  return props.id || generatedId;
@@ -103,15 +117,14 @@ function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style
103
117
  function isNewSelectProps(props) {
104
118
  return props.version === 2;
105
119
  }
106
- const SelectBase = forwardRef(function SelectShim(props, ref) {
120
+ function Select(props) {
107
121
  if (isNewSelectProps(props)) {
108
- return React__default.createElement(SelectRebuilt, Object.assign({}, props, { ref: ref }));
122
+ return React__default.createElement(SelectRebuilt, Object.assign({}, props));
109
123
  }
110
124
  else {
111
125
  return React__default.createElement(Select$1, Object.assign({}, props));
112
126
  }
113
- });
114
- const Select = SelectBase;
127
+ }
115
128
  Select.Option = SelectOption;
116
129
  Select.OptionGroup = OptionGroup;
117
130
 
package/dist/Tabs-es.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React__default, { useState, useRef, useCallback, useEffect } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
4
- import { d as debounce_1 } from './debounce-es.js';
4
+ import { a as debounce_1 } from './debounce-es.js';
5
5
  import { a as isObject_1 } from './isObjectLike-es.js';
6
6
  import { T as Typography } from './Typography-es.js';
7
7