@jobber/components 6.103.6 → 6.104.1

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 (94) hide show
  1. package/dist/Autocomplete/Autocomplete.types.d.ts +9 -51
  2. package/dist/Autocomplete/index.cjs +10 -20
  3. package/dist/Autocomplete/index.mjs +10 -20
  4. package/dist/Autocomplete/tests/Autocomplete.setup.d.ts +1 -1
  5. package/dist/Autocomplete/useAutocomplete.d.ts +2 -2
  6. package/dist/Checkbox/Checkbox.rebuilt.d.ts +1 -2
  7. package/dist/Checkbox/Checkbox.types.d.ts +3 -34
  8. package/dist/Checkbox/index.cjs +9 -2
  9. package/dist/Checkbox/index.mjs +9 -2
  10. package/dist/Chips/InternalChipDismissible/hooks/index.cjs +2 -2
  11. package/dist/Chips/InternalChipDismissible/hooks/index.mjs +2 -2
  12. package/dist/Chips/InternalChipDismissible/index.cjs +2 -2
  13. package/dist/Chips/InternalChipDismissible/index.mjs +2 -2
  14. package/dist/Chips/index.cjs +2 -2
  15. package/dist/Chips/index.mjs +2 -2
  16. package/dist/DataList/components/DataListHeader/index.cjs +1 -0
  17. package/dist/DataList/components/DataListHeader/index.mjs +1 -0
  18. package/dist/DataList/components/DataListItem/index.cjs +1 -0
  19. package/dist/DataList/components/DataListItem/index.mjs +1 -0
  20. package/dist/DataList/components/DataListItems/index.cjs +1 -0
  21. package/dist/DataList/components/DataListItems/index.mjs +1 -0
  22. package/dist/DataList/components/DataListLayout/index.cjs +1 -0
  23. package/dist/DataList/components/DataListLayout/index.mjs +1 -0
  24. package/dist/DataList/components/DataListSearch/index.cjs +2 -12
  25. package/dist/DataList/components/DataListSearch/index.mjs +2 -12
  26. package/dist/DataList/index.cjs +1 -8
  27. package/dist/DataList/index.mjs +1 -8
  28. package/dist/DataTable/index.cjs +3 -2
  29. package/dist/DataTable/index.mjs +3 -2
  30. package/dist/DatePicker/index.cjs +2 -2
  31. package/dist/DatePicker/index.mjs +2 -2
  32. package/dist/FormField/FormFieldTypes.d.ts +0 -2
  33. package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts +7 -2
  34. package/dist/FormField-cjs.js +0 -1
  35. package/dist/FormField-es.js +1 -1
  36. package/dist/InputDate/InputDate.types.d.ts +12 -7
  37. package/dist/InputDate/index.cjs +6 -9
  38. package/dist/InputDate/index.mjs +6 -9
  39. package/dist/InputDate/useInputDateActivatorActions.d.ts +4 -8
  40. package/dist/InputEmail/InputEmail.types.d.ts +10 -20
  41. package/dist/InputEmail/hooks/useInputEmailActions.d.ts +4 -3
  42. package/dist/InputEmail/index.cjs +18 -49
  43. package/dist/InputEmail/index.mjs +18 -49
  44. package/dist/InputFile-cjs.js +5 -2
  45. package/dist/InputFile-es.js +5 -2
  46. package/dist/InputNumber/InputNumber.rebuilt.types.d.ts +7 -15
  47. package/dist/InputNumber/index.cjs +6 -4
  48. package/dist/InputNumber/index.mjs +6 -4
  49. package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts +12 -28
  50. package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts +1 -1
  51. package/dist/InputPhoneNumber/index.cjs +20 -34
  52. package/dist/InputPhoneNumber/index.mjs +20 -34
  53. package/dist/InputText/InputText.types.d.ts +31 -25
  54. package/dist/InputText/index.cjs +41 -62
  55. package/dist/InputText/index.mjs +42 -63
  56. package/dist/InputText/useInputTextActions.d.ts +4 -3
  57. package/dist/InputTime/InputTime.rebuilt.d.ts +1 -1
  58. package/dist/InputTime/InputTime.types.d.ts +13 -4
  59. package/dist/InputTime/hooks/useInputTimeActions.d.ts +16 -0
  60. package/dist/InputTime/index.cjs +66 -30
  61. package/dist/InputTime/index.mjs +69 -33
  62. package/dist/List/index.cjs +2 -2
  63. package/dist/List/index.mjs +2 -2
  64. package/dist/MultiSelect/index.cjs +1 -0
  65. package/dist/MultiSelect/index.mjs +1 -0
  66. package/dist/RecurringSelect/index.cjs +3 -2
  67. package/dist/RecurringSelect/index.mjs +3 -2
  68. package/dist/Select/Select.types.d.ts +7 -3
  69. package/dist/Select/hooks/useSelectActions.d.ts +5 -5
  70. package/dist/Select/index.cjs +27 -41
  71. package/dist/Select/index.mjs +29 -43
  72. package/dist/Tabs-es.js +1 -1
  73. package/dist/_baseEach-cjs.js +12 -12
  74. package/dist/_baseEach-es.js +1 -1
  75. package/dist/_baseFlatten-cjs.js +2 -2
  76. package/dist/_baseFlatten-es.js +1 -1
  77. package/dist/{_baseGet-cjs.js → _getAllKeys-cjs.js} +181 -181
  78. package/dist/{_baseGet-es.js → _getAllKeys-es.js} +182 -182
  79. package/dist/debounce-es.js +1 -1
  80. package/dist/filterDataAttributes-cjs.js +26 -0
  81. package/dist/filterDataAttributes-es.js +24 -0
  82. package/dist/index.cjs +3 -2
  83. package/dist/index.mjs +3 -2
  84. package/dist/omit-cjs.js +14 -14
  85. package/dist/omit-es.js +1 -1
  86. package/dist/sharedHelpers/filterDataAttributes.d.ts +17 -0
  87. package/dist/sharedHelpers/types.d.ts +205 -0
  88. package/dist/useScrollToActive-cjs.js +3 -3
  89. package/dist/useScrollToActive-es.js +2 -2
  90. package/package.json +2 -2
  91. package/dist/InputEmail/hooks/useInputEmailFormField.d.ts +0 -32
  92. package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts +0 -71
  93. package/dist/InputText/useInputTextFormField.d.ts +0 -366
  94. package/dist/Select/hooks/useSelectFormField.d.ts +0 -34
@@ -1,6 +1,14 @@
1
1
  import type { CSSProperties, Key, Ref, RefObject } from "react";
2
+ import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
2
3
  import type { FormFieldProps } from "../FormField";
3
4
  import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
5
+ /**
6
+ * ARIA attributes for Autocomplete with managed/orchestrated behavior.
7
+ * Certain ARIA attributes are controlled internally by Autocomplete's
8
+ * state management and floating-ui integration and shouldn't be overridden.
9
+ */
10
+ interface AriaInputPropsManaged extends Omit<AriaInputProps, "aria-controls" | "aria-expanded" | "aria-activedescendant" | "aria-autocomplete"> {
11
+ }
4
12
  export type ExtraProps = Record<string, unknown>;
5
13
  type OptionValue = string | number;
6
14
  export interface BaseOption {
@@ -222,8 +230,7 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
222
230
  };
223
231
  export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
224
232
  export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
225
- interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> {
226
- version: 2;
233
+ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
227
234
  /**
228
235
  * Whether the autocomplete allows multiple selections.
229
236
  * WARNING: This is currently incomplete and will not display selections, only data is returned.
@@ -243,14 +250,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
243
250
  * Callback invoked when the input value changes.
244
251
  */
245
252
  readonly onInputChange: (value: string) => void;
246
- /**
247
- * Callback invoked when the input is blurred.
248
- */
249
- readonly onBlur?: () => void;
250
- /**
251
- * Callback invoked when the input is focused.
252
- */
253
- readonly onFocus?: () => void;
254
253
  /**
255
254
  * Custom equality for input text to option mapping.
256
255
  * Defaults to case-sensitive label equality via getOptionLabel.
@@ -384,42 +383,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
384
383
  * @default true
385
384
  */
386
385
  readonly openOnFocus?: boolean;
387
- /**
388
- * The placeholder text for the input.
389
- */
390
- readonly placeholder?: string;
391
- /**
392
- * Whether the input is disabled.
393
- */
394
- readonly disabled?: boolean;
395
- /**
396
- * Error message to display below the input
397
- * When present, invalid appearance applied to the input
398
- */
399
- readonly error?: string;
400
- /**
401
- * Whether the input is invalid. Receives invalid appearance.
402
- */
403
- readonly invalid?: boolean;
404
- /**
405
- * Whether the input is read-only.
406
- * @default false
407
- */
408
- readonly readOnly?: boolean;
409
- /**
410
- * Description to display below the input
411
- */
412
- readonly description?: string;
413
- /**
414
- * Name of the input for form submission
415
- */
416
- readonly name?: string;
417
- /**
418
- * Size of the input
419
- */
420
- readonly size?: InputTextRebuiltProps["size"];
421
- readonly suffix?: InputTextRebuiltProps["suffix"];
422
- readonly prefix?: InputTextRebuiltProps["prefix"];
423
386
  /**
424
387
  * Callback invoked when the menu opens.
425
388
  *
@@ -430,11 +393,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
430
393
  *
431
394
  */
432
395
  readonly onClose?: () => void;
433
- /**
434
- * Whether the menu is loading.
435
- * Displays glimmers in the menu
436
- */
437
- readonly loading?: boolean;
438
396
  /**
439
397
  * Custom render prop for content to render when `loading` is true.
440
398
  */
@@ -13,6 +13,7 @@ var Icon = require('../Icon-cjs.js');
13
13
  var InputText_index = require('../InputText/index.cjs');
14
14
  var Glimmer = require('../Glimmer-cjs.js');
15
15
  var FormField = require('../FormField-cjs.js');
16
+ var filterDataAttributes = require('../filterDataAttributes-cjs.js');
16
17
  var tslib_es6 = require('../tslib.es6-cjs.js');
17
18
  require('react/jsx-runtime');
18
19
  require('react-dom');
@@ -20,18 +21,6 @@ require('react-hook-form');
20
21
  require('framer-motion');
21
22
  require('../Button-cjs.js');
22
23
  require('react-router-dom');
23
- require('../omit-cjs.js');
24
- require('../_commonjsHelpers-cjs.js');
25
- require('../_baseGet-cjs.js');
26
- require('../isTypedArray-cjs.js');
27
- require('../isObjectLike-cjs.js');
28
- require('../identity-cjs.js');
29
- require('../_getTag-cjs.js');
30
- require('../isSymbol-cjs.js');
31
- require('../keysIn-cjs.js');
32
- require('../_baseAssignValue-cjs.js');
33
- require('../_baseFlatten-cjs.js');
34
- require('../_setToString-cjs.js');
35
24
  require('../useFormFieldFocus-cjs.js');
36
25
  require('../InputValidation-cjs.js');
37
26
  require('../Spinner-cjs.js');
@@ -510,18 +499,18 @@ function useAutocomplete(props) {
510
499
  multiple,
511
500
  value,
512
501
  ]);
513
- const onInputFocus = React.useCallback(() => {
502
+ const onInputFocus = React.useCallback((event) => {
514
503
  var _a;
515
504
  setInputFocused(true);
516
505
  if (!readOnly && openOnFocus)
517
506
  setOpen(true);
518
- (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
507
+ (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
519
508
  }, [props.onFocus, readOnly, openOnFocus, setOpen]);
520
- const onInputBlur = React.useCallback(() => {
509
+ const onInputBlur = React.useCallback((event) => {
521
510
  var _a, _b;
522
511
  setInputFocused(false);
523
512
  if (readOnly) {
524
- (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
513
+ (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
525
514
  return;
526
515
  }
527
516
  if (props.allowFreeForm === true) {
@@ -533,7 +522,7 @@ function useAutocomplete(props) {
533
522
  tryRestoreInputToSelectedLabel();
534
523
  }
535
524
  lastInputWasUser.current = false;
536
- (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props);
525
+ (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, event);
537
526
  }, [
538
527
  readOnly,
539
528
  props.allowFreeForm,
@@ -920,10 +909,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
920
909
  onFocus: onInputFocus,
921
910
  onBlur: onInputBlur,
922
911
  });
923
- const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
924
- disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
912
+ const dataAttrs = filterDataAttributes.filterDataAttributes(props);
913
+ const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
914
+ disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
925
915
  ? `${listboxId}-item-${activeIndex}`
926
- : undefined });
916
+ : undefined }), dataAttrs);
927
917
  const referenceInputRef = (node) => {
928
918
  setReferenceElement(node);
929
919
  // Workaround to get the width of the visual InputText element, which is not the same as
@@ -11,6 +11,7 @@ import { I as Icon } from '../Icon-es.js';
11
11
  import { InputText } from '../InputText/index.mjs';
12
12
  import { G as Glimmer } from '../Glimmer-es.js';
13
13
  import { m as mergeRefs } from '../FormField-es.js';
14
+ import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
14
15
  import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
15
16
  import 'react/jsx-runtime';
16
17
  import 'react-dom';
@@ -18,18 +19,6 @@ import 'react-hook-form';
18
19
  import 'framer-motion';
19
20
  import '../Button-es.js';
20
21
  import 'react-router-dom';
21
- import '../omit-es.js';
22
- import '../_commonjsHelpers-es.js';
23
- import '../_baseGet-es.js';
24
- import '../isTypedArray-es.js';
25
- import '../isObjectLike-es.js';
26
- import '../identity-es.js';
27
- import '../_getTag-es.js';
28
- import '../isSymbol-es.js';
29
- import '../keysIn-es.js';
30
- import '../_baseAssignValue-es.js';
31
- import '../_baseFlatten-es.js';
32
- import '../_setToString-es.js';
33
22
  import '../useFormFieldFocus-es.js';
34
23
  import '../InputValidation-es.js';
35
24
  import '../Spinner-es.js';
@@ -508,18 +497,18 @@ function useAutocomplete(props) {
508
497
  multiple,
509
498
  value,
510
499
  ]);
511
- const onInputFocus = useCallback(() => {
500
+ const onInputFocus = useCallback((event) => {
512
501
  var _a;
513
502
  setInputFocused(true);
514
503
  if (!readOnly && openOnFocus)
515
504
  setOpen(true);
516
- (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
505
+ (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
517
506
  }, [props.onFocus, readOnly, openOnFocus, setOpen]);
518
- const onInputBlur = useCallback(() => {
507
+ const onInputBlur = useCallback((event) => {
519
508
  var _a, _b;
520
509
  setInputFocused(false);
521
510
  if (readOnly) {
522
- (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
511
+ (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
523
512
  return;
524
513
  }
525
514
  if (props.allowFreeForm === true) {
@@ -531,7 +520,7 @@ function useAutocomplete(props) {
531
520
  tryRestoreInputToSelectedLabel();
532
521
  }
533
522
  lastInputWasUser.current = false;
534
- (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props);
523
+ (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, event);
535
524
  }, [
536
525
  readOnly,
537
526
  props.allowFreeForm,
@@ -918,10 +907,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
918
907
  onFocus: onInputFocus,
919
908
  onBlur: onInputBlur,
920
909
  });
921
- const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
922
- disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
910
+ const dataAttrs = filterDataAttributes(props);
911
+ const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
912
+ disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
923
913
  ? `${listboxId}-item-${activeIndex}`
924
- : undefined });
914
+ : undefined }), dataAttrs);
925
915
  const referenceInputRef = (node) => {
926
916
  setReferenceElement(node);
927
917
  // Workaround to get the width of the visual InputText element, which is not the same as
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { type AutocompleteRebuiltProps, type MenuItem, type OptionLike } from "../Autocomplete.types";
3
- export declare function Wrapper<T extends OptionLike>({ initialValue, initialInputValue, onChange, onInputChange, onBlur, onFocus, menu, openOnFocus, filterOptions, emptyActions, customRenderOption, customRenderAction, customRenderSection, customRenderInput, customRenderHeader, customRenderFooter, loading, customRenderLoading, emptyStateMessage, ref, readOnly, UNSAFE_className, UNSAFE_styles, debounce, }: {
3
+ export declare function Wrapper<T extends OptionLike>({ initialValue, initialInputValue, onChange, onInputChange, onBlur, onFocus, menu, openOnFocus, filterOptions, emptyActions, customRenderOption, customRenderAction, customRenderSection, customRenderInput, customRenderHeader, customRenderFooter, loading, customRenderLoading, emptyStateMessage, ref, readOnly, UNSAFE_className, UNSAFE_styles, debounce, ...props }: {
4
4
  readonly initialValue?: T;
5
5
  readonly initialInputValue?: string;
6
6
  readonly onChange?: (v: T | undefined) => void;
@@ -59,8 +59,8 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
59
59
  onSelection: (option: Value) => void;
60
60
  onAction: (action: ActionConfig) => void;
61
61
  onInputChangeFromUser: (val: string) => void;
62
- onInputBlur: () => void;
63
- onInputFocus: () => void;
62
+ onInputBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
63
+ onInputFocus: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
64
64
  onInputKeyDown: (event: React.KeyboardEvent) => void;
65
65
  setReferenceElement: (el: HTMLElement | null) => void;
66
66
  };
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
- export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & {
2
+ export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & Pick<import("../sharedHelpers/types").RebuiltInputCommonProps, "version"> & {
3
3
  label?: string | React.ReactElement;
4
4
  description?: React.ReactNode;
5
5
  onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
6
- version: 2;
7
6
  } & React.RefAttributes<HTMLInputElement>>;
@@ -1,6 +1,7 @@
1
1
  import type { ReactElement, ReactNode } from "react";
2
2
  import type { XOR } from "ts-xor";
3
- export interface BaseCheckboxProps {
3
+ import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
4
+ export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInputElement>, Pick<HTMLInputBaseProps, "id" | "name" | "disabled">, Pick<RebuiltInputCommonProps, "description" | "invalid"> {
4
5
  /**
5
6
  * Determines if the checkbox is checked or not.
6
7
  */
@@ -11,48 +12,20 @@ export interface BaseCheckboxProps {
11
12
  * state. If a state is controlling it, use the `checked` prop instead.
12
13
  */
13
14
  readonly defaultChecked?: boolean;
14
- /**
15
- * Disables the checkbox.
16
- */
17
- readonly disabled?: boolean;
18
15
  /**
19
16
  * When `true` the checkbox to appears in indeterminate.
20
17
  *
21
18
  * @default false
22
19
  */
23
20
  readonly indeterminate?: boolean;
24
- /**
25
- * Checkbox input name
26
- */
27
- readonly name?: string;
28
21
  /**
29
22
  * Value of the checkbox.
30
23
  */
31
24
  readonly value?: string;
32
- /**
33
- * Further description of the label
34
- */
35
- readonly description?: ReactNode;
36
- /**
37
- * ID for the checkbox input
38
- */
39
- readonly id?: string;
40
25
  /**
41
26
  * Called when the checkbox value changes
42
27
  */
43
28
  onChange?(newValue: boolean): void;
44
- /**
45
- * Called when the checkbox is focused
46
- */
47
- onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
48
- /**
49
- * Called when the checkbox loses focus
50
- */
51
- onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
52
- /**
53
- * Whether the checkbox is invalid
54
- */
55
- invalid?: boolean;
56
29
  }
57
30
  interface CheckboxLabelProps extends BaseCheckboxProps {
58
31
  /**
@@ -66,7 +39,7 @@ interface CheckboxChildrenProps extends BaseCheckboxProps {
66
39
  */
67
40
  readonly children?: ReactElement;
68
41
  }
69
- export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "description" | "children" | "onChange"> & {
42
+ export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "description" | "children" | "onChange"> & Pick<RebuiltInputCommonProps, "version"> & {
70
43
  /**
71
44
  * Label that shows up beside the checkbox.
72
45
  * String will be rendered with the default markup.
@@ -84,10 +57,6 @@ export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "descriptio
84
57
  * Includes the change event as a second argument.
85
58
  */
86
59
  onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
87
- /**
88
- * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
89
- */
90
- version: 2;
91
60
  };
92
61
  export type CheckboxLegacyProps = XOR<CheckboxLabelProps, CheckboxChildrenProps> & {
93
62
  version?: 1;
@@ -6,6 +6,7 @@ var classnames = require('classnames');
6
6
  var reactHookForm = require('react-hook-form');
7
7
  var Icon = require('../Icon-cjs.js');
8
8
  var Text = require('../Text-cjs.js');
9
+ var filterDataAttributes = require('../filterDataAttributes-cjs.js');
9
10
  require('@jobber/design');
10
11
  require('../Typography-cjs.js');
11
12
 
@@ -54,12 +55,16 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
54
55
  } }));
55
56
  }
56
57
 
57
- const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
58
+ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal(props, ref) {
59
+ const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, } = props;
58
60
  const descriptionIdentifier = React.useId();
61
+ const descriptionVisible = Boolean(description);
59
62
  const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
63
+ const isInvalid = Boolean(invalid);
60
64
  const inputClassName = classnames(styles.input, {
61
65
  [styles.indeterminate]: indeterminate,
62
66
  });
67
+ const dataAttrs = filterDataAttributes.filterDataAttributes(props);
63
68
  const iconName = indeterminate ? "minus2" : "checkmark";
64
69
  const labelContent = typeof label === "string" ? React.createElement(Text.Text, null, label) : label;
65
70
  const descriptionContent = typeof description === "string" ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description);
@@ -70,7 +75,9 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
70
75
  return (React.createElement("div", { className: styles.checkBoxParent },
71
76
  React.createElement("label", { className: wrapperClassName },
72
77
  React.createElement("span", { className: styles.checkHolder },
73
- React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
78
+ React.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
79
+ ? descriptionIdentifier
80
+ : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, dataAttrs)),
74
81
  React.createElement("span", { className: styles.checkBox },
75
82
  React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
76
83
  labelContent && React.createElement("span", { className: styles.label }, labelContent)),
@@ -4,6 +4,7 @@ import classnames from 'classnames';
4
4
  import { useFormContext, useForm, Controller } from 'react-hook-form';
5
5
  import { I as Icon } from '../Icon-es.js';
6
6
  import { T as Text } from '../Text-es.js';
7
+ import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
7
8
  import '@jobber/design';
8
9
  import '../Typography-es.js';
9
10
 
@@ -52,12 +53,16 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
52
53
  } }));
53
54
  }
54
55
 
55
- const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
56
+ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref) {
57
+ const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, } = props;
56
58
  const descriptionIdentifier = useId();
59
+ const descriptionVisible = Boolean(description);
57
60
  const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
61
+ const isInvalid = Boolean(invalid);
58
62
  const inputClassName = classnames(styles.input, {
59
63
  [styles.indeterminate]: indeterminate,
60
64
  });
65
+ const dataAttrs = filterDataAttributes(props);
61
66
  const iconName = indeterminate ? "minus2" : "checkmark";
62
67
  const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
63
68
  const descriptionContent = typeof description === "string" ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
@@ -68,7 +73,9 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
68
73
  return (React__default.createElement("div", { className: styles.checkBoxParent },
69
74
  React__default.createElement("label", { className: wrapperClassName },
70
75
  React__default.createElement("span", { className: styles.checkHolder },
71
- React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
76
+ React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
77
+ ? descriptionIdentifier
78
+ : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, dataAttrs)),
72
79
  React__default.createElement("span", { className: styles.checkBox },
73
80
  React__default.createElement(Icon, { name: iconName, color: "surface" }))),
74
81
  labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
@@ -4,12 +4,12 @@ var useScrollToActive = require('../../../useScrollToActive-cjs.js');
4
4
  require('react');
5
5
  require('../../../_commonjsHelpers-cjs.js');
6
6
  require('../../../_baseFlatten-cjs.js');
7
- require('../../../_baseGet-cjs.js');
7
+ require('../../../_getAllKeys-cjs.js');
8
8
  require('../../../isTypedArray-cjs.js');
9
9
  require('../../../isObjectLike-cjs.js');
10
+ require('../../../isSymbol-cjs.js');
10
11
  require('../../../identity-cjs.js');
11
12
  require('../../../_getTag-cjs.js');
12
- require('../../../isSymbol-cjs.js');
13
13
  require('../../../_baseEach-cjs.js');
14
14
  require('../../../_baseFor-cjs.js');
15
15
  require('../../../_isIterateeCall-cjs.js');
@@ -2,12 +2,12 @@ export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDi
2
2
  import 'react';
3
3
  import '../../../_commonjsHelpers-es.js';
4
4
  import '../../../_baseFlatten-es.js';
5
- import '../../../_baseGet-es.js';
5
+ import '../../../_getAllKeys-es.js';
6
6
  import '../../../isTypedArray-es.js';
7
7
  import '../../../isObjectLike-es.js';
8
+ import '../../../isSymbol-es.js';
8
9
  import '../../../identity-es.js';
9
10
  import '../../../_getTag-es.js';
10
- import '../../../isSymbol-es.js';
11
11
  import '../../../_baseEach-es.js';
12
12
  import '../../../_baseFor-es.js';
13
13
  import '../../../_isIterateeCall-es.js';
@@ -5,12 +5,12 @@ require('react');
5
5
  require('../../useScrollToActive-cjs.js');
6
6
  require('../../_commonjsHelpers-cjs.js');
7
7
  require('../../_baseFlatten-cjs.js');
8
- require('../../_baseGet-cjs.js');
8
+ require('../../_getAllKeys-cjs.js');
9
9
  require('../../isTypedArray-cjs.js');
10
10
  require('../../isObjectLike-cjs.js');
11
+ require('../../isSymbol-cjs.js');
11
12
  require('../../identity-cjs.js');
12
13
  require('../../_getTag-cjs.js');
13
- require('../../isSymbol-cjs.js');
14
14
  require('../../_baseEach-cjs.js');
15
15
  require('../../_baseFor-cjs.js');
16
16
  require('../../_isIterateeCall-cjs.js');
@@ -3,12 +3,12 @@ import 'react';
3
3
  import '../../useScrollToActive-es.js';
4
4
  import '../../_commonjsHelpers-es.js';
5
5
  import '../../_baseFlatten-es.js';
6
- import '../../_baseGet-es.js';
6
+ import '../../_getAllKeys-es.js';
7
7
  import '../../isTypedArray-es.js';
8
8
  import '../../isObjectLike-es.js';
9
+ import '../../isSymbol-es.js';
9
10
  import '../../identity-es.js';
10
11
  import '../../_getTag-es.js';
11
- import '../../isSymbol-es.js';
12
12
  import '../../_baseEach-es.js';
13
13
  import '../../_baseFor-es.js';
14
14
  import '../../_isIterateeCall-es.js';
@@ -7,12 +7,12 @@ var Chips = require('../Chips-cjs.js');
7
7
  require('../useScrollToActive-cjs.js');
8
8
  require('../_commonjsHelpers-cjs.js');
9
9
  require('../_baseFlatten-cjs.js');
10
- require('../_baseGet-cjs.js');
10
+ require('../_getAllKeys-cjs.js');
11
11
  require('../isTypedArray-cjs.js');
12
12
  require('../isObjectLike-cjs.js');
13
+ require('../isSymbol-cjs.js');
13
14
  require('../identity-cjs.js');
14
15
  require('../_getTag-cjs.js');
15
- require('../isSymbol-cjs.js');
16
16
  require('../_baseEach-cjs.js');
17
17
  require('../_baseFor-cjs.js');
18
18
  require('../_isIterateeCall-cjs.js');
@@ -5,12 +5,12 @@ export { C as Chips } from '../Chips-es.js';
5
5
  import '../useScrollToActive-es.js';
6
6
  import '../_commonjsHelpers-es.js';
7
7
  import '../_baseFlatten-es.js';
8
- import '../_baseGet-es.js';
8
+ import '../_getAllKeys-es.js';
9
9
  import '../isTypedArray-es.js';
10
10
  import '../isObjectLike-es.js';
11
+ import '../isSymbol-es.js';
11
12
  import '../identity-es.js';
12
13
  import '../_getTag-es.js';
13
- import '../isSymbol-es.js';
14
14
  import '../_baseEach-es.js';
15
15
  import '../_baseFor-es.js';
16
16
  import '../_isIterateeCall-es.js';
@@ -30,6 +30,7 @@ require('react-router-dom');
30
30
  require('../../../tslib.es6-cjs.js');
31
31
  require('../../../Checkbox/index.cjs');
32
32
  require('react-hook-form');
33
+ require('../../../filterDataAttributes-cjs.js');
33
34
  require('../../../DataList.module-cjs.js');
34
35
  require('../../../DataListBulkActions-cjs.js');
35
36
  require('../../../DataListActions-cjs.js');
@@ -28,6 +28,7 @@ import 'react-router-dom';
28
28
  import '../../../tslib.es6-es.js';
29
29
  import '../../../Checkbox/index.mjs';
30
30
  import 'react-hook-form';
31
+ import '../../../filterDataAttributes-es.js';
31
32
  import '../../../DataList.module-es.js';
32
33
  import '../../../DataListBulkActions-es.js';
33
34
  import '../../../DataListActions-es.js';
@@ -38,6 +38,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
38
38
  require('../../../DataListActionsMenu-cjs.js');
39
39
  require('../../../Checkbox/index.cjs');
40
40
  require('react-hook-form');
41
+ require('../../../filterDataAttributes-cjs.js');
41
42
  require('../../../useBatchSelect-cjs.js');
42
43
  require('../../../DataList.module-cjs.js');
43
44
  require('../../../DataListItemClickable-cjs.js');
@@ -36,6 +36,7 @@ import '../../../DataListItemActionsOverflow-es.js';
36
36
  import '../../../DataListActionsMenu-es.js';
37
37
  import '../../../Checkbox/index.mjs';
38
38
  import 'react-hook-form';
39
+ import '../../../filterDataAttributes-es.js';
39
40
  import '../../../useBatchSelect-es.js';
40
41
  import '../../../DataList.module-es.js';
41
42
  import '../../../DataListItemClickable-es.js';
@@ -39,6 +39,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
39
39
  require('../../../DataListActionsMenu-cjs.js');
40
40
  require('../../../Checkbox/index.cjs');
41
41
  require('react-hook-form');
42
+ require('../../../filterDataAttributes-cjs.js');
42
43
  require('../../../useBatchSelect-cjs.js');
43
44
  require('../../../DataList.module-cjs.js');
44
45
  require('../../../DataListItemClickable-cjs.js');
@@ -37,6 +37,7 @@ import '../../../DataListItemActionsOverflow-es.js';
37
37
  import '../../../DataListActionsMenu-es.js';
38
38
  import '../../../Checkbox/index.mjs';
39
39
  import 'react-hook-form';
40
+ import '../../../filterDataAttributes-es.js';
40
41
  import '../../../useBatchSelect-es.js';
41
42
  import '../../../DataList.module-es.js';
42
43
  import '../../../DataListItemClickable-es.js';
@@ -40,6 +40,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
40
40
  require('../../../DataListActionsMenu-cjs.js');
41
41
  require('../../../Checkbox/index.cjs');
42
42
  require('react-hook-form');
43
+ require('../../../filterDataAttributes-cjs.js');
43
44
  require('../../../useBatchSelect-cjs.js');
44
45
  require('../../../DataList.module-cjs.js');
45
46
  require('../../../DataListItemClickable-cjs.js');
@@ -38,6 +38,7 @@ import '../../../DataListItemActionsOverflow-es.js';
38
38
  import '../../../DataListActionsMenu-es.js';
39
39
  import '../../../Checkbox/index.mjs';
40
40
  import 'react-hook-form';
41
+ import '../../../filterDataAttributes-es.js';
41
42
  import '../../../useBatchSelect-es.js';
42
43
  import '../../../DataList.module-es.js';
43
44
  import '../../../DataListItemClickable-es.js';
@@ -18,20 +18,10 @@ require('../../../useFormFieldFocus-cjs.js');
18
18
  require('../../../InputValidation-cjs.js');
19
19
  require('../../../Spinner-cjs.js');
20
20
  require('react-hook-form');
21
- require('../../../omit-cjs.js');
22
- require('../../../_commonjsHelpers-cjs.js');
23
- require('../../../_baseGet-cjs.js');
24
- require('../../../isTypedArray-cjs.js');
25
- require('../../../isObjectLike-cjs.js');
26
- require('../../../identity-cjs.js');
27
- require('../../../_getTag-cjs.js');
28
- require('../../../isSymbol-cjs.js');
29
- require('../../../keysIn-cjs.js');
30
- require('../../../_baseAssignValue-cjs.js');
31
- require('../../../_baseFlatten-cjs.js');
32
- require('../../../_setToString-cjs.js');
21
+ require('../../../filterDataAttributes-cjs.js');
33
22
  require('../../../DataListContext-cjs.js');
34
23
  require('../../../noop-cjs.js');
24
+ require('../../../_commonjsHelpers-cjs.js');
35
25
  require('../../../DataList.const-cjs.js');
36
26
  require('../../../AnimatedSwitcher-cjs.js');
37
27