@jobber/components 7.11.1 → 7.11.2

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/Menu/Menu.d.ts +21 -1
  2. package/dist/Menu-cjs.js +19 -21
  3. package/dist/Menu-es.js +21 -23
  4. package/dist/docs/AnimatedPresence/AnimatedPresence.md +1 -1
  5. package/dist/docs/Autocomplete/AutocompleteV1.md +1 -1
  6. package/dist/docs/Autocomplete/AutocompleteV2.md +1 -1
  7. package/dist/docs/Banner/Banner.md +41 -41
  8. package/dist/docs/Box/Box.md +5 -5
  9. package/dist/docs/Button/Button.md +13 -13
  10. package/dist/docs/Checkbox/Checkbox.md +2 -2
  11. package/dist/docs/Chip/Chip.md +2 -2
  12. package/dist/docs/Cluster/Cluster.md +3 -3
  13. package/dist/docs/Combobox/Combobox.md +1 -1
  14. package/dist/docs/ConfirmationModal/ConfirmationModal.md +3 -3
  15. package/dist/docs/Content/Content.md +2 -2
  16. package/dist/docs/Countdown/Countdown.md +1 -1
  17. package/dist/docs/DataList/DataList.md +24 -24
  18. package/dist/docs/DataTable/DataTable.md +7 -7
  19. package/dist/docs/Divider/Divider.md +1 -1
  20. package/dist/docs/Flex/Flex.md +1 -1
  21. package/dist/docs/Form/Form.md +1 -1
  22. package/dist/docs/FormField/FormField.md +6 -6
  23. package/dist/docs/FormatDate/FormatDate.md +1 -1
  24. package/dist/docs/FormatFile/FormatFile.md +22 -22
  25. package/dist/docs/FormatRelativeDateTime/FormatRelativeDateTime.md +1 -1
  26. package/dist/docs/FormatTime/FormatTime.md +1 -1
  27. package/dist/docs/Gallery/Gallery.md +1 -1
  28. package/dist/docs/Glimmer/Glimmer.md +7 -7
  29. package/dist/docs/Grid/Grid.md +2 -2
  30. package/dist/docs/Heading/Heading.md +2 -2
  31. package/dist/docs/Icon/Icon.md +1 -1
  32. package/dist/docs/InlineLabel/InlineLabel.md +1 -1
  33. package/dist/docs/InputDate/InputDate.md +4 -4
  34. package/dist/docs/InputEmail/InputEmail.md +3 -3
  35. package/dist/docs/InputFile/InputFile.md +7 -7
  36. package/dist/docs/InputNumber/InputNumber.md +5 -5
  37. package/dist/docs/InputPassword/InputPassword.md +3 -3
  38. package/dist/docs/InputPhoneNumber/InputPhoneNumber.md +2 -2
  39. package/dist/docs/InputText/InputText.md +7 -7
  40. package/dist/docs/InputTime/InputTime.md +2 -2
  41. package/dist/docs/LightBox/LightBox.md +17 -17
  42. package/dist/docs/Menu/Menu.md +122 -0
  43. package/dist/docs/Modal/Modal.md +1 -1
  44. package/dist/docs/MultiSelect/MultiSelect.md +1 -1
  45. package/dist/docs/Page/Page.md +9 -9
  46. package/dist/docs/Popover/Popover.md +11 -11
  47. package/dist/docs/ProgressBar/ProgressBar.md +1 -1
  48. package/dist/docs/RadioGroup/RadioGroup.md +1 -1
  49. package/dist/docs/SegmentedControl/SegmentedControl.md +2 -2
  50. package/dist/docs/Select/Select.md +4 -4
  51. package/dist/docs/SideKick/SideKick.md +1 -1
  52. package/dist/docs/Spinner/Spinner.md +1 -1
  53. package/dist/docs/Text/Text.md +3 -3
  54. package/dist/docs/Toast/Toast.md +1 -1
  55. package/package.json +2 -2
@@ -458,6 +458,8 @@ through inline styles.
458
458
 
459
459
  ### Web
460
460
 
461
+ #### Menu
462
+
461
463
  | Prop | Type | Required | Default | Description |
462
464
  |------|------|----------|---------|-------------|
463
465
  | `items` | `SectionProps[]` | Yes | — | Collection of action items. |
@@ -469,3 +471,123 @@ through inline styles.
469
471
  | `style` | `CSSProperties` | No | — | |
470
472
  | `UNSAFE_className` | `string | { menu?: string; header?: string; action?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
471
473
  | `UNSAFE_style` | `CSSProperties | { menu?: CSSProperties; header?: CSSProperties; action?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
474
+
475
+ #### Menu.Content
476
+
477
+ | Prop | Type | Required | Default | Description |
478
+ |------|------|----------|---------|-------------|
479
+ | `className` | `string` | No | — | |
480
+ | `preferredPlacement` | `Placement` | No | — | |
481
+ | `style` | `CSSProperties` | No | — | |
482
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
483
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
484
+
485
+ #### Menu.Group
486
+
487
+ | Prop | Type | Required | Default | Description |
488
+ |------|------|----------|---------|-------------|
489
+ | `ariaLabel` | `string` | No | — | |
490
+ | `className` | `string` | No | — | |
491
+ | `style` | `CSSProperties` | No | — | |
492
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
493
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
494
+
495
+ #### Menu.GroupLabel
496
+
497
+ | Prop | Type | Required | Default | Description |
498
+ |------|------|----------|---------|-------------|
499
+ | `className` | `string` | No | — | |
500
+ | `style` | `CSSProperties` | No | — | |
501
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
502
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
503
+
504
+ #### Menu.Header
505
+
506
+ | Prop | Type | Required | Default | Description |
507
+ |------|------|----------|---------|-------------|
508
+ | `className` | `string` | No | — | |
509
+ | `style` | `CSSProperties` | No | — | |
510
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
511
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
512
+
513
+ #### Menu.ItemIcon
514
+
515
+ | Prop | Type | Required | Default | Description |
516
+ |------|------|----------|---------|-------------|
517
+ | `name` | `IconNames` | Yes | — | The icon to show. |
518
+ | `color` | `"task" | "text" | "warning" | "icon" | "disabled" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
519
+ | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
520
+ | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
521
+ | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
522
+ | `UNSAFE_className` | `{ svg?: string; path?: string; }` | No | — | **Use at your own risk:** Custom classnames for specific elements. This should only be used as a **last resort**. Usi... |
523
+ | `UNSAFE_style` | `{ svg?: CSSProperties; path?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
524
+
525
+ #### Menu.ItemPrefix
526
+
527
+ | Prop | Type | Required | Default | Description |
528
+ |------|------|----------|---------|-------------|
529
+ | `className` | `string` | No | — | |
530
+ | `style` | `CSSProperties` | No | — | |
531
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
532
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
533
+
534
+ #### Menu.ItemSuffix
535
+
536
+ | Prop | Type | Required | Default | Description |
537
+ |------|------|----------|---------|-------------|
538
+ | `className` | `string` | No | — | |
539
+ | `style` | `CSSProperties` | No | — | |
540
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
541
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
542
+
543
+ #### Menu.RadioGroup
544
+
545
+ | Prop | Type | Required | Default | Description |
546
+ |------|------|----------|---------|-------------|
547
+ | `className` | `string` | No | — | |
548
+ | `defaultValue` | `string` | No | — | |
549
+ | `onValueChange` | `(value: string) => void` | No | — | |
550
+ | `style` | `CSSProperties` | No | — | |
551
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
552
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
553
+ | `value` | `string` | No | — | |
554
+
555
+ #### Menu.Section
556
+
557
+ | Prop | Type | Required | Default | Description |
558
+ |------|------|----------|---------|-------------|
559
+ | `ariaLabel` | `string` | No | — | |
560
+ | `className` | `string` | No | — | |
561
+ | `style` | `CSSProperties` | No | — | |
562
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
563
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
564
+
565
+ #### Menu.Separator
566
+
567
+ | Prop | Type | Required | Default | Description |
568
+ |------|------|----------|---------|-------------|
569
+ | `className` | `string` | No | — | |
570
+ | `style` | `CSSProperties` | No | — | |
571
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
572
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
573
+
574
+ #### Menu.Submenu
575
+
576
+ | Prop | Type | Required | Default | Description |
577
+ |------|------|----------|---------|-------------|
578
+ | `className` | `string` | No | — | |
579
+ | `defaultOpen` | `boolean` | No | — | |
580
+ | `onOpenChange` | `(isOpen: boolean) => void` | No | — | |
581
+ | `open` | `boolean` | No | — | |
582
+ | `style` | `CSSProperties` | No | — | |
583
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
584
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
585
+
586
+ #### Menu.SubmenuContent
587
+
588
+ | Prop | Type | Required | Default | Description |
589
+ |------|------|----------|---------|-------------|
590
+ | `className` | `string` | No | — | |
591
+ | `style` | `CSSProperties` | No | — | |
592
+ | `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
593
+ | `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
@@ -292,7 +292,7 @@ screen.getByRole("dialog", { name: /Billing Settings/i });
292
292
  | `open` | `boolean` | No | `false` | |
293
293
  | `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
294
294
  | `secondaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
295
- | `size` | `"small" | "large" | "fullScreen"` | No | — | |
295
+ | `size` | `"fullScreen" | "large" | "small"` | No | — | |
296
296
  | `tertiaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
297
297
  | `title` | `string` | No | `false` | |
298
298
  | `version` | `1` | No | — | |
@@ -50,4 +50,4 @@ Features and behavior are announced to the user when using a screen reader.
50
50
  | `defaultLabel` | `string` | Yes | — | The label to be displayed by default when no options are selected |
51
51
  | `onOptionsChange` | `Dispatch<SetStateAction<Options>>` | Yes | — | Change handler |
52
52
  | `options` | `Options` | Yes | — | List of options to be checked |
53
- | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
53
+ | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
@@ -313,7 +313,13 @@ composable actions, this is the simplest way to use Page:
313
313
  | `secondaryAction` | `ButtonActionProps` | No | — | Page title secondary action button settings. |
314
314
  | `subtitle` | `string` | No | — | Subtitle of the page. |
315
315
  | `titleMetaData` | `ReactNode` | No | — | TitleMetaData component to be displayed next to the title. Only compatible with string titles. |
316
- | `width` | `"fill" | "standard" | "narrow"` | No | `standard` | Determines the width of the page. Fill makes the width grow to 100%. Standard caps out at 1280px. Narrow caps out ... |
316
+ | `width` | `"fill" | "narrow" | "standard"` | No | `standard` | Determines the width of the page. Fill makes the width grow to 100%. Standard caps out at 1280px. Narrow caps out ... |
317
+
318
+ #### Page.ActionMenu
319
+
320
+ | Prop | Type | Required | Default | Description |
321
+ |------|------|----------|---------|-------------|
322
+ | `ref` | `RefObject<HTMLDivElement>` | No | — | |
317
323
 
318
324
  #### Page.ActionPrimary
319
325
 
@@ -327,11 +333,11 @@ composable actions, this is the simplest way to use Page:
327
333
  |------|------|----------|---------|-------------|
328
334
  | `ref` | `RefObject<HTMLDivElement>` | No | — | |
329
335
 
330
- #### Page.ActionMenu
336
+ #### Page.Menu
331
337
 
332
338
  | Prop | Type | Required | Default | Description |
333
339
  |------|------|----------|---------|-------------|
334
- | `ref` | `RefObject<HTMLDivElement>` | No | | |
340
+ | `triggerLabel` | `string` | No | `More Actions` | |
335
341
 
336
342
  #### Page.PrimaryButton
337
343
 
@@ -356,9 +362,3 @@ composable actions, this is the simplest way to use Page:
356
362
  | `loading` | `boolean` | No | — | |
357
363
  | `onClick` | `() => void` | No | — | |
358
364
  | `ref` | `RefObject<HTMLDivElement>` | No | — | |
359
-
360
- #### Page.Menu
361
-
362
- | Prop | Type | Required | Default | Description |
363
- |------|------|----------|---------|-------------|
364
- | `triggerLabel` | `string` | No | `More Actions` | |
@@ -261,20 +261,10 @@ If you're using Popover with its composable subcomponents, you'll need to pass
261
261
  | `children` | `ReactNode` | Yes | — | Popover content. |
262
262
  | `open` | `boolean` | Yes | — | Control Popover visibility. |
263
263
  | `onRequestClose` | `() => void` | No | — | Callback executed when the user wants to close/dismiss the Popover |
264
- | `preferredPlacement` | `"auto" | "left" | "right" | "top" | "bottom"` | No | `auto` | Describes the preferred placement of the Popover. |
264
+ | `preferredPlacement` | `"auto" | "bottom" | "left" | "right" | "top"` | No | `auto` | Describes the preferred placement of the Popover. |
265
265
  | `UNSAFE_className` | `{ container?: string; dismissButtonContainer?: string; arrow?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
266
266
  | `UNSAFE_style` | `{ container?: CSSProperties; dismissButtonContainer?: CSSProperties; arrow?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
267
267
 
268
- #### Popover.Provider
269
-
270
- | Prop | Type | Required | Default | Description |
271
- |------|------|----------|---------|-------------|
272
- | `attachTo` | `Element | RefObject<Element>` | Yes | — | Element the Popover will attach to and point at. A `useRef` must be attached to an html element and passed as an atta... |
273
- | `open` | `boolean` | Yes | — | Control Popover visibility. |
274
- | `preferredPlacement` | `"auto" | "left" | "right" | "top" | "bottom"` | No | `auto` | Describes the preferred placement of the Popover. |
275
- | `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
276
- | `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
277
-
278
268
  #### Popover.Arrow
279
269
 
280
270
  | Prop | Type | Required | Default | Description |
@@ -290,3 +280,13 @@ If you're using Popover with its composable subcomponents, you'll need to pass
290
280
  | `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — | |
291
281
  | `UNSAFE_className` | `{ dismissButtonContainer?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
292
282
  | `UNSAFE_style` | `{ dismissButtonContainer?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
283
+
284
+ #### Popover.Provider
285
+
286
+ | Prop | Type | Required | Default | Description |
287
+ |------|------|----------|---------|-------------|
288
+ | `attachTo` | `Element | RefObject<Element>` | Yes | — | Element the Popover will attach to and point at. A `useRef` must be attached to an html element and passed as an atta... |
289
+ | `open` | `boolean` | Yes | — | Control Popover visibility. |
290
+ | `preferredPlacement` | `"auto" | "bottom" | "left" | "right" | "top"` | No | `auto` | Describes the preferred placement of the Popover. |
291
+ | `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
292
+ | `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
@@ -30,7 +30,7 @@ An example where you might be better served using a Spinner:
30
30
  |------|------|----------|---------|-------------|
31
31
  | `currentStep` | `number` | Yes | — | The current step that the progress bar is on. |
32
32
  | `totalSteps` | `number` | Yes | — | The total steps to use. For percentages you can set this to 100. |
33
- | `size` | `"small" | "base" | "smaller"` | No | `base` | Set the size of the progress bar |
33
+ | `size` | `"base" | "small" | "smaller"` | No | `base` | Set the size of the progress bar |
34
34
  | `UNSAFE_className` | `string` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
35
35
  | `UNSAFE_style` | `CSSProperties` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
36
36
  | `variation` | `"progress" | "stepped"` | No | `progress` | Set the variation of the progress bar |
@@ -25,6 +25,6 @@ do not contain text, an `aria-label` should be provided.
25
25
  |------|------|----------|---------|-------------|
26
26
  | `ariaLabel` | `string` | Yes | — | Defines the aria label that describes the radio group. |
27
27
  | `onChange` | `(newValue: string | number) => void` | Yes | — | Change handler for the RadioGroup. @param newValue |
28
- | `value` | `string | number` | Yes | — | Defines the default value that will be pre-selected in the radio group. |
28
+ | `value` | `number | string` | Yes | — | Defines the default value that will be pre-selected in the radio group. |
29
29
  | `direction` | `"horizontal" | "vertical"` | No | `vertical` | Layout direction for the options. |
30
30
  | `name` | `string` | No | `useId()` | The name of the radio group, that links the radio options back up to the group. |
@@ -175,11 +175,11 @@ browser handles this behaviour automatically.
175
175
  | `name` | `string` | No | `useId()` | A unique name for the SegmentedControl, that links the group of options together. Can be a string or, if not set, wil... |
176
176
  | `onSelectValue` | `(value: T) => void` | No | — | A callback function that is called whenever the selected option changes. Use this prop with `selectedValue` for a con... |
177
177
  | `selectedValue` | `T` | No | — | The currently selected option. Use this prop with `onSelectValue` for a controlled component. |
178
- | `size` | `"small" | "large" | "base"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
178
+ | `size` | `"base" | "large" | "small"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
179
179
 
180
180
  #### SegmentedControl.Option
181
181
 
182
182
  | Prop | Type | Required | Default | Description |
183
183
  |------|------|----------|---------|-------------|
184
- | `value` | `string | number` | Yes | — | The unique value associated with this option. This value is used to determine which option is selected and is passed ... |
184
+ | `value` | `number | string` | Yes | — | The unique value associated with this option. This value is used to determine which option is selected and is passed ... |
185
185
  | `ariaLabel` | `string` | No | — | An aria-label that describes the option. |
@@ -198,7 +198,7 @@ dropdown content is stylable; the closed value alignment is not.
198
198
  |------|------|----------|---------|-------------|
199
199
  | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
200
200
  | `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
201
- | `aria-autocomplete` | `"list" | "none" | "inline" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
201
+ | `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
202
202
  | `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
203
203
  | `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
204
204
  | `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
@@ -214,7 +214,7 @@ dropdown content is stylable; the closed value alignment is not.
214
214
  | `error` | `string` | No | — | Error message to display. This also highlights the field red. |
215
215
  | `id` | `string` | No | — | The unique identifier for the input element. |
216
216
  | `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
217
- | `inputMode` | `"email" | "search" | "text" | "url" | "none" | "tel" | "numeric" | "decimal"` | No | — | Input mode hint for virtual keyboards. |
217
+ | `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
218
218
  | `inputRef` | `Ref<HTMLSelectElement>` | No | — | |
219
219
  | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
220
220
  | `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
@@ -228,11 +228,11 @@ dropdown content is stylable; the closed value alignment is not.
228
228
  | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
229
229
  | `required` | `boolean` | No | — | Whether the input is required before form submission. |
230
230
  | `role` | `string` | No | — | Role attribute for accessibility. |
231
- | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
231
+ | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
232
232
  | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
233
233
  | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
234
234
  | `UNSAFE_experimentalStyles` | `boolean` | No | — | Opt-in to the customizable select UI (Chromium 123+). When true, the component will apply the custom select styles De... |
235
- | `value` | `string | number` | No | — | |
235
+ | `value` | `number | string` | No | — | |
236
236
 
237
237
  #### Select.Option
238
238
 
@@ -116,7 +116,7 @@ export function SideKickCustomWidthsExample() {
116
116
  | `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
117
117
  | `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
118
118
  | `autoWidth` | `boolean` | No | `false` | Whether to allow the sidekick to take the width of the content. Defaults to 100% |
119
- | `collapseBelow` | `"xs" | "sm" | "md" | "lg" | "xl"` | No | — | The breakpoint to collapse the sidekick at. |
119
+ | `collapseBelow` | `"lg" | "md" | "sm" | "xl" | "xs"` | No | — | The breakpoint to collapse the sidekick at. |
120
120
  | `collapsed` | `boolean` | No | — | Force the sidekick to collapse. Use this when our breakpoints are not enough control. |
121
121
  | `contentMinWidth` | `string` | No | `50%` | The minimum width of the content. |
122
122
  | `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
@@ -42,4 +42,4 @@ To indicate loading content in mobile applications, refer to
42
42
  | Prop | Type | Required | Default | Description |
43
43
  |------|------|----------|---------|-------------|
44
44
  | `inline` | `boolean` | No | — | Spinner becomes an inline element when true, otherwise it is a block element |
45
- | `size` | `"small" | "base"` | No | `base` | Specifies the size of the spinner |
45
+ | `size` | `"base" | "small"` | No | `base` | Specifies the size of the spinner |
@@ -351,8 +351,8 @@ under the [Typography](../Typography/Typography.md) documentation.
351
351
  |------|------|----------|---------|-------------|
352
352
  | `align` | `"center" | "end" | "start"` | No | `start` | |
353
353
  | `element` | `TextElement` | No | `p` | The HTML element to render the text as. |
354
- | `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | `unlimited` | |
355
- | `size` | `"small" | "large" | "base"` | No | `base` | |
354
+ | `maxLines` | `"base" | "large" | "larger" | "single" | "small" | "unlimited"` | No | `unlimited` | |
355
+ | `size` | `"base" | "large" | "small"` | No | `base` | |
356
356
  | `UNSAFE_className` | `{ textStyle?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
357
357
  | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
358
- | `variation` | `"info" | "disabled" | "success" | "error" | "default" | "subdued" | "warn"` | No | `default` | |
358
+ | `variation` | `"default" | "disabled" | "error" | "info" | "subdued" | "success" | "warn"` | No | `default` | |
@@ -71,4 +71,4 @@ overloading too much detail for the user to parse at a quick glance.
71
71
  | `message` | `string` | Yes | — | |
72
72
  | `action` | `() => void` | No | — | **Deprecated**: action will be removed in the next major version @deprecated |
73
73
  | `actionLabel` | `string` | No | — | **Deprecated**: actionLabel will be removed in the next major version @deprecated |
74
- | `variation` | `"info" | "success" | "error"` | No | `success` | |
74
+ | `variation` | `"error" | "info" | "success"` | No | `success` | |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "7.11.1",
3
+ "version": "7.11.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
583
583
  "> 1%",
584
584
  "IE 10"
585
585
  ],
586
- "gitHead": "fc0926142d58292477038a22f8ca9608997461e5"
586
+ "gitHead": "af4bf90a9ac5663ff26d0cfad49e3761457e4646"
587
587
  }