@jobber/components 8.4.0 → 8.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Autocomplete/Autocomplete.d.ts +6 -4
- package/dist/Autocomplete/Autocomplete.types.d.ts +3 -137
- package/dist/Autocomplete/components/FloatingMenu.d.ts +6 -6
- package/dist/Autocomplete/components/MenuList.d.ts +4 -4
- package/dist/Autocomplete/components/PersistentRegion.d.ts +3 -3
- package/dist/Autocomplete/index.cjs +25 -1658
- package/dist/Autocomplete/index.d.ts +3 -30
- package/dist/Autocomplete/index.mjs +25 -1647
- package/dist/Autocomplete/tests/Autocomplete.setup.d.ts +15 -15
- package/dist/Autocomplete/useAutocomplete.d.ts +2 -2
- package/dist/Autocomplete-cjs.js +1306 -0
- package/dist/Autocomplete-es.js +1304 -0
- package/dist/Menu-es.js +1 -1
- package/dist/MenuSubmenuTrigger-es.js +1 -1
- package/dist/docs/Autocomplete/{AutocompleteV2.md → Autocomplete.md} +13 -107
- package/dist/docs/Banner/Banner.md +3 -3
- package/dist/docs/Box/Box.md +2 -2
- package/dist/docs/Chips/Chips.md +1 -1
- package/dist/docs/DataList/DataList.md +1 -1
- package/dist/docs/Icon/Icon.md +1 -1
- package/dist/docs/InputGroup/InputGroup.md +1 -1
- package/dist/docs/Menu/Menu.md +1 -1
- package/dist/docs/Modal/Modal.md +3 -3
- package/dist/docs/MultiSelect/MultiSelect.md +1 -1
- package/dist/docs/index.md +1 -2
- package/dist/docs/usage-guidelines/usage-guidelines.md +8 -10
- package/dist/floating-ui.react-dom-es.js +1 -1
- package/dist/floating-ui.react-es.js +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.esm-es.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/styles.css +29 -153
- package/package.json +2 -2
- package/dist/Autocomplete/Autocomplete.rebuilt.d.ts +0 -8
- package/dist/Autocomplete/Autocomplete.utils.d.ts +0 -8
- package/dist/Autocomplete/Menu/DefaultMenu.d.ts +0 -16
- package/dist/Autocomplete/Menu/Menu.d.ts +0 -3
- package/dist/Autocomplete/Menu/MenuWrapper.d.ts +0 -23
- package/dist/Autocomplete/Option.d.ts +0 -78
- package/dist/Autocomplete/V1.docgen.d.ts +0 -4
- package/dist/Autocomplete/V2.docgen.d.ts +0 -6
- package/dist/Autocomplete/useKeyboardNavigation.d.ts +0 -35
- package/dist/Autocomplete/useRepositionMenu.d.ts +0 -10
- package/dist/docs/Autocomplete/AutocompleteV1.md +0 -1328
package/dist/Menu-es.js
CHANGED
|
@@ -2,7 +2,7 @@ import React__default, { useState, useRef, useId, useMemo } from 'react';
|
|
|
2
2
|
import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
5
|
-
import { u as useFloating, c as useDismiss,
|
|
5
|
+
import { u as useFloating, c as useDismiss, k as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
|
|
6
6
|
import { B as Button } from './Button-es.js';
|
|
7
7
|
import { T as Typography } from './Typography-es.js';
|
|
8
8
|
import { I as Icon } from './Icon-es.js';
|
|
@@ -5,7 +5,7 @@ import { k as createChangeEventDetails, B as closePress, C as isMouseLikePointer
|
|
|
5
5
|
import { a as useButton, u as useBaseUiId, b as useCompositeRootContext } from './useBaseUiId-es.js';
|
|
6
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
import { b as isElement, k as getWindow, a as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
|
|
8
|
-
import { e as evaluate,
|
|
8
|
+
import { e as evaluate, h as getPaddingObject, b as getAlignmentAxis, d as getAlignment, q as getAxisLength, n as clamp, c as getSide, g as getSideAxis } from './index.esm-es.js';
|
|
9
9
|
import { u as useFloating$1, h as hide$1, f as flip, d as size, b as autoUpdate, o as offset, s as shift, l as limitShift } from './floating-ui.react-dom-es.js';
|
|
10
10
|
import * as ReactDOM from 'react-dom';
|
|
11
11
|
|
|
@@ -25,7 +25,7 @@ import {
|
|
|
25
25
|
defineMenu,
|
|
26
26
|
} from "@jobber/components/Autocomplete";
|
|
27
27
|
|
|
28
|
-
export const
|
|
28
|
+
export const AutocompleteSectionedExample = () => {
|
|
29
29
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
30
30
|
const [inputValue, setInputValue] = useState("");
|
|
31
31
|
const menu = defineMenu<OptionLike>([
|
|
@@ -61,7 +61,6 @@ export const AutocompleteV2SectionedExample = () => {
|
|
|
61
61
|
|
|
62
62
|
return (
|
|
63
63
|
<Autocomplete
|
|
64
|
-
version={2}
|
|
65
64
|
placeholder="Search"
|
|
66
65
|
value={value}
|
|
67
66
|
onChange={setValue}
|
|
@@ -108,7 +107,7 @@ const simpleOptions: OptionLike[] = [
|
|
|
108
107
|
{ label: "HVAC Installation" },
|
|
109
108
|
];
|
|
110
109
|
|
|
111
|
-
export function
|
|
110
|
+
export function AutocompleteHeaderFooterStoryExample() {
|
|
112
111
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
113
112
|
const [inputValue, setInputValue] = useState("");
|
|
114
113
|
const [lastAction, setLastAction] = useState("");
|
|
@@ -117,7 +116,6 @@ export function AutocompleteV2HeaderFooterStoryExample() {
|
|
|
117
116
|
<Content>
|
|
118
117
|
<Heading level={4}>Persistent header/footer actions</Heading>
|
|
119
118
|
<Autocomplete
|
|
120
|
-
version={2}
|
|
121
119
|
placeholder="Search"
|
|
122
120
|
value={value}
|
|
123
121
|
onChange={setValue}
|
|
@@ -151,7 +149,9 @@ export function AutocompleteV2HeaderFooterStoryExample() {
|
|
|
151
149
|
|
|
152
150
|
### Actions
|
|
153
151
|
|
|
154
|
-
Actions may be placed either on the "flat" list of options or in individual
|
|
152
|
+
Actions may be placed either on the "flat" list of options or in individual
|
|
153
|
+
sections. They are accessible by keyboard using arrow keys and Enter to select
|
|
154
|
+
the highlighted action.
|
|
155
155
|
|
|
156
156
|
```tsx
|
|
157
157
|
import React, { useState } from "react";
|
|
@@ -190,7 +190,7 @@ const simpleOptionsThirdSection: OptionLike[] = [
|
|
|
190
190
|
{ label: "Gutter Cleaning" },
|
|
191
191
|
];
|
|
192
192
|
|
|
193
|
-
export function
|
|
193
|
+
export function AutocompleteWithActionsExample() {
|
|
194
194
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
195
195
|
const [inputValue, setInputValue] = useState("");
|
|
196
196
|
const [lastAction, setLastAction] = useState("");
|
|
@@ -199,7 +199,6 @@ export function AutocompleteV2WithActionsExample() {
|
|
|
199
199
|
<Content>
|
|
200
200
|
<Heading level={4}>Section with Actions</Heading>
|
|
201
201
|
<Autocomplete
|
|
202
|
-
version={2}
|
|
203
202
|
placeholder="Search"
|
|
204
203
|
value={value}
|
|
205
204
|
onChange={setValue}
|
|
@@ -271,7 +270,7 @@ import { Button } from "@jobber/components/Button";
|
|
|
271
270
|
import { Content } from "@jobber/components/Content";
|
|
272
271
|
import { Heading } from "@jobber/components/Heading";
|
|
273
272
|
|
|
274
|
-
export const
|
|
273
|
+
export const AutocompleteEmptyActionsExample = () => {
|
|
275
274
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
276
275
|
const [inputValue, setInputValue] = useState("");
|
|
277
276
|
const [open, setOpen] = useState(false);
|
|
@@ -281,7 +280,6 @@ export const AutocompleteV2EmptyActionsExample = () => {
|
|
|
281
280
|
<Content>
|
|
282
281
|
<Heading level={5}>Empty actions</Heading>
|
|
283
282
|
<Autocomplete
|
|
284
|
-
version={2}
|
|
285
283
|
placeholder="Try a term with no matches"
|
|
286
284
|
value={value}
|
|
287
285
|
onChange={setValue}
|
|
@@ -323,8 +321,8 @@ export const AutocompleteV2EmptyActionsExample = () => {
|
|
|
323
321
|
|
|
324
322
|
### Stay Open Behavior
|
|
325
323
|
|
|
326
|
-
All interactive elements (actions, headers, footers, empty actions) can be
|
|
327
|
-
desired.
|
|
324
|
+
All interactive elements (actions, headers, footers, empty actions) can be
|
|
325
|
+
individually configured to keep the menu open when used if desired.
|
|
328
326
|
|
|
329
327
|
```tsx
|
|
330
328
|
import React, { useState } from "react";
|
|
@@ -336,7 +334,7 @@ import {
|
|
|
336
334
|
import { Content } from "@jobber/components/Content";
|
|
337
335
|
import { Heading } from "@jobber/components/Heading";
|
|
338
336
|
|
|
339
|
-
export const
|
|
337
|
+
export const AutocompleteStayOpenExample = () => {
|
|
340
338
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
341
339
|
const [inputValue, setInputValue] = useState("");
|
|
342
340
|
|
|
@@ -344,7 +342,6 @@ export const AutocompleteV2StayOpenExample = () => {
|
|
|
344
342
|
<Content>
|
|
345
343
|
<Heading level={5}>Stay Open Action</Heading>
|
|
346
344
|
<Autocomplete
|
|
347
|
-
version={2}
|
|
348
345
|
placeholder="Search"
|
|
349
346
|
value={value}
|
|
350
347
|
onChange={setValue}
|
|
@@ -409,7 +406,7 @@ const simpleOptions: OptionLike[] = [
|
|
|
409
406
|
{ label: "HVAC Installation" },
|
|
410
407
|
];
|
|
411
408
|
|
|
412
|
-
export function
|
|
409
|
+
export function AutocompleteFreeFormStoryExample() {
|
|
413
410
|
const [value, setValue] = useState<OptionLike | undefined>();
|
|
414
411
|
const [inputValue, setInputValue] = useState("");
|
|
415
412
|
|
|
@@ -417,7 +414,6 @@ export function AutocompleteV2FreeFormStoryExample() {
|
|
|
417
414
|
<Content>
|
|
418
415
|
<Heading level={4}>Free-form create</Heading>
|
|
419
416
|
<Autocomplete
|
|
420
|
-
version={2}
|
|
421
417
|
placeholder="Type anything"
|
|
422
418
|
value={value}
|
|
423
419
|
onChange={setValue}
|
|
@@ -468,43 +464,6 @@ different from the rest.
|
|
|
468
464
|
|
|
469
465
|
## Configuration
|
|
470
466
|
|
|
471
|
-
### Legacy to Supported
|
|
472
|
-
|
|
473
|
-
Legacy has a single mechanism to update the options. Only `initialOptions` are
|
|
474
|
-
directly controlled, then `getOptions` is used to populate the options based on
|
|
475
|
-
the input term. This is managed with internal state that creates barriers as to
|
|
476
|
-
what can be done with the experience.
|
|
477
|
-
|
|
478
|
-
Now, Autocomplete is entirely controlled, having both sets of `inputValue`,
|
|
479
|
-
`onInputChange`, `value` and `onChange`.
|
|
480
|
-
|
|
481
|
-
Filtering is now built into Autocomplete. It has a default filter of comparing
|
|
482
|
-
the input value to the case insensitive "label" value. If using custom data,
|
|
483
|
-
where we might want to search a different field, or even multiple fields,
|
|
484
|
-
providing filterOptions allows customization of the filter logic. For cases with
|
|
485
|
-
async data it is recommended to opt out of filtering entirely, and manage that
|
|
486
|
-
yourself with the results you return and pass as options. This can be done with
|
|
487
|
-
`filterOptions={false}`.
|
|
488
|
-
|
|
489
|
-
Autocomplete has been decoupled from React Hook Form, and has no built in
|
|
490
|
-
validation. To validate, you must create your own logic and use either `error`
|
|
491
|
-
or `invalid` to set the visually invalid state on the input. `onBlur`, `value`,
|
|
492
|
-
`onChange`, `inputValue`, `onInputChange` provide all the necessary callbacks to
|
|
493
|
-
determine the state of the Autocomplete. These callbacks will integrate with a
|
|
494
|
-
schema like Zod, and an external instance of RHF.
|
|
495
|
-
|
|
496
|
-
Filtering is now built in, and not necessary to implement yourself. You are able
|
|
497
|
-
to opt out or customize it if desired, see more about this in the filtering
|
|
498
|
-
section.
|
|
499
|
-
|
|
500
|
-
While sections still exist, the additional pre defined "details" and
|
|
501
|
-
"description" variations are not directly available by default. They can be
|
|
502
|
-
re-created with custom data, custom layouts, and modified option/section styles.
|
|
503
|
-
|
|
504
|
-
All options will by default continue to be visible after making a selection
|
|
505
|
-
whereas Legacy would limit your options to the selected option if a selection is
|
|
506
|
-
present.
|
|
507
|
-
|
|
508
467
|
### Structure, `menu` and `type`s
|
|
509
468
|
|
|
510
469
|
The `menu` prop accepts 2 different possible "top level" types: "options" and
|
|
@@ -524,61 +483,10 @@ Options can be selected with the enter key if it active/highlighted, or with a
|
|
|
524
483
|
mouse click. Space will do nothing because focus is intentionally kept in the
|
|
525
484
|
input for further refinements to the search term.
|
|
526
485
|
|
|
527
|
-
|
|
486
|
+
Example
|
|
528
487
|
|
|
529
488
|
```
|
|
530
|
-
|
|
531
|
-
{
|
|
532
|
-
label: "Ships",
|
|
533
|
-
options: [
|
|
534
|
-
{ value: 1, label: "Sulaco" },
|
|
535
|
-
{ value: 2, label: "Nostromo" },
|
|
536
|
-
{ value: 3, label: "Serenity" },
|
|
537
|
-
{ value: 4, label: "Sleeper Service" },
|
|
538
|
-
{ value: 5, label: "Enterprise" },
|
|
539
|
-
{ value: 6, label: "Enterprise-D" },
|
|
540
|
-
],
|
|
541
|
-
},
|
|
542
|
-
{
|
|
543
|
-
label: "Planets",
|
|
544
|
-
options: [
|
|
545
|
-
{ value: 7, label: "Endor" },
|
|
546
|
-
{ value: 8, label: "Vulcan" },
|
|
547
|
-
{ value: 9, label: "Bespin" },
|
|
548
|
-
{ value: 10, label: "Tatooine" },
|
|
549
|
-
],
|
|
550
|
-
},
|
|
551
|
-
];
|
|
552
|
-
|
|
553
|
-
const [value, setValue] = useState<Option | undefined>();
|
|
554
|
-
|
|
555
|
-
return (
|
|
556
|
-
<Autocomplete
|
|
557
|
-
initialOptions={SectionHeadingOptions}
|
|
558
|
-
placeholder="Search for something under a section heading"
|
|
559
|
-
value={value}
|
|
560
|
-
onChange={newValue => setValue(newValue)}
|
|
561
|
-
getOptions={getOptions}
|
|
562
|
-
/>
|
|
563
|
-
);
|
|
564
|
-
|
|
565
|
-
function getOptions(text: string) {
|
|
566
|
-
if (text === "") {
|
|
567
|
-
return headingOptions;
|
|
568
|
-
}
|
|
569
|
-
const filterRegex = new RegExp(text, "i");
|
|
570
|
-
|
|
571
|
-
return headingOptions.map(section => ({
|
|
572
|
-
...section,
|
|
573
|
-
options: section.options.filter(option =>
|
|
574
|
-
option.label.match(filterRegex),
|
|
575
|
-
),
|
|
576
|
-
}));
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
// VERSION 2 BELOW
|
|
580
|
-
|
|
581
|
-
const sectionMenu = [
|
|
489
|
+
const sectionMenu = [
|
|
582
490
|
{
|
|
583
491
|
type: "section",
|
|
584
492
|
label: "Ships",
|
|
@@ -608,7 +516,6 @@ Legacy Section vs Supported
|
|
|
608
516
|
|
|
609
517
|
return(
|
|
610
518
|
<Autocomplete
|
|
611
|
-
version={2}
|
|
612
519
|
menu={sectionMenu}
|
|
613
520
|
value={value}
|
|
614
521
|
onChange={setValue}
|
|
@@ -769,7 +676,6 @@ This is not yet implemented fully. Avoid using.
|
|
|
769
676
|
| `onChange` | `((value: AutocompleteValue<Value, Multiple>) => void) | ((value: AutocompleteValue<Value, Multiple>) => void)` | Yes | — | Callback invoked when the selection value changes. This is called when we consider a selection "committed" - The user... |
|
|
770
677
|
| `onInputChange` | `(value: string) => void` | Yes | — | Callback invoked when the input value changes. |
|
|
771
678
|
| `value` | `Value[] | OptionLike` | Yes | — | The currently selected value of the Autocomplete. Single-select: undefined indicates no selection |
|
|
772
|
-
| `version` | `2` | Yes | — | Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first. |
|
|
773
679
|
| `allowFreeForm` | `boolean` | No | — | Whether the autocomplete allows free-form input. When true, the input value is not restricted to the options * in the... |
|
|
774
680
|
| `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-... |
|
|
775
681
|
| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
|
|
@@ -389,7 +389,7 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
|
|
|
389
389
|
| `dismissible` | `boolean` | No | `true` | Set to false to hide the dismiss button |
|
|
390
390
|
| `icon` | `IconNames` | No | — | Use to override the default status Icon |
|
|
391
391
|
| `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
|
|
392
|
-
| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly
|
|
392
|
+
| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
|
|
393
393
|
|
|
394
394
|
#### Banner.Action
|
|
395
395
|
|
|
@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
|
|
|
441
441
|
|
|
442
442
|
| Prop | Type | Required | Default | Description |
|
|
443
443
|
|------|------|----------|---------|-------------|
|
|
444
|
-
| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" |
|
|
445
|
-
| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" |
|
|
444
|
+
| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
|
|
445
|
+
| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "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... |
|
|
446
446
|
| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
|
|
447
447
|
| `name` | `IconNames` | No | — | The icon to show. |
|
|
448
448
|
| `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
|
package/dist/docs/Box/Box.md
CHANGED
|
@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
|
|
|
206
206
|
| `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
|
|
207
207
|
| `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
|
|
208
208
|
| `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` | |
|
|
209
|
-
| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" |
|
|
209
|
+
| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | |
|
|
210
210
|
| `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — | |
|
|
211
|
-
| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" |
|
|
211
|
+
| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | |
|
|
212
212
|
| `direction` | `FlexDirection` | No | — | |
|
|
213
213
|
| `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — | |
|
|
214
214
|
| `height` | `BoxDimension` | No | `auto` | |
|
package/dist/docs/Chips/Chips.md
CHANGED
|
@@ -40,7 +40,7 @@ user, leaving all selections blank.
|
|
|
40
40
|
### Add/dismiss selection
|
|
41
41
|
|
|
42
42
|
> **WARNING:** "Selection" Chips have been deprecated and are no longer supported. Instead,
|
|
43
|
-
> please use [Autocomplete](../Autocomplete/
|
|
43
|
+
> please use [Autocomplete](../Autocomplete/Autocomplete.md) with the "multiple" prop.
|
|
44
44
|
|
|
45
45
|
When the user will be selecting one or more items by inputting their own Chip
|
|
46
46
|
options with, use the dismissible Chip.
|
|
@@ -552,7 +552,7 @@ objects that will define the sorting options for the column.
|
|
|
552
552
|
| Prop | Type | Required | Default | Description |
|
|
553
553
|
|------|------|----------|---------|-------------|
|
|
554
554
|
| `message` | `string` | Yes | — | The message that shows when the DataList is empty. |
|
|
555
|
-
| `action` | `ReactElement<{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly
|
|
555
|
+
| `action` | `ReactElement<{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }, string | JSXElementConstructor<...>>` | No | — | The action that shows when the DataList is empty. This only accepts a Button component. Adding a non-Button componen... |
|
|
556
556
|
| `customRender` | `(emptyState: Omit<DataListEmptyStateProps, "customRender">) => ReactNode` | No | — | Custom render function for the empty state. If provided, this function will be used to render the empty state instea... |
|
|
557
557
|
| `type` | `"empty" | "filtered"` | No | — | Determine the type of empty state to show. By default, it will show the "empty" state when there is no data. If you ... |
|
|
558
558
|
|
package/dist/docs/Icon/Icon.md
CHANGED
|
@@ -582,7 +582,7 @@ necessary.
|
|
|
582
582
|
| Prop | Type | Required | Default | Description |
|
|
583
583
|
|------|------|----------|---------|-------------|
|
|
584
584
|
| `name` | `IconNames` | Yes | — | The icon to show. |
|
|
585
|
-
| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" |
|
|
585
|
+
| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "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... |
|
|
586
586
|
| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
|
|
587
587
|
| `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
|
|
588
588
|
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
|
|
@@ -17,7 +17,7 @@ issues caused by nesting. Any non-horizontal nested groups will log an error to
|
|
|
17
17
|
the console and not be rendered.
|
|
18
18
|
|
|
19
19
|
If one of the InputGroup fields has a preset value from a larger list of
|
|
20
|
-
options, it is possible to use [Autocomplete](../Autocomplete/
|
|
20
|
+
options, it is possible to use [Autocomplete](../Autocomplete/Autocomplete.md) within
|
|
21
21
|
InputGroup.
|
|
22
22
|
|
|
23
23
|
|
package/dist/docs/Menu/Menu.md
CHANGED
|
@@ -502,7 +502,7 @@ and should not be used for new implementations.
|
|
|
502
502
|
| Prop | Type | Required | Default | Description |
|
|
503
503
|
|------|------|----------|---------|-------------|
|
|
504
504
|
| `name` | `IconNames` | Yes | — | The icon to show. |
|
|
505
|
-
| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" |
|
|
505
|
+
| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "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... |
|
|
506
506
|
| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
|
|
507
507
|
| `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
|
|
508
508
|
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
|
package/dist/docs/Modal/Modal.md
CHANGED
|
@@ -290,9 +290,9 @@ screen.getByRole("dialog", { name: /Billing Settings/i });
|
|
|
290
290
|
| `dismissible` | `boolean` | No | `true` | |
|
|
291
291
|
| `onRequestClose` | `() => void` | No | — | |
|
|
292
292
|
| `open` | `boolean` | No | `false` | |
|
|
293
|
-
| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly
|
|
294
|
-
| `secondaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly
|
|
293
|
+
| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
|
|
294
|
+
| `secondaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
|
|
295
295
|
| `size` | `"fullScreen" | "large" | "small"` | No | — | |
|
|
296
|
-
| `tertiaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly
|
|
296
|
+
| `tertiaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | |
|
|
297
297
|
| `title` | `string` | No | `false` | |
|
|
298
298
|
| `version` | `1` | No | — | |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Multi Select
|
|
2
2
|
|
|
3
3
|
> **WARNING:** This component has been deprecated and no longer supported. Instead, please
|
|
4
|
-
> use [Autocomplete](../Autocomplete/
|
|
4
|
+
> use [Autocomplete](../Autocomplete/Autocomplete.md) with the "mutliple" prop, or
|
|
5
5
|
> [Combobox](../Combobox/Combobox.md)
|
|
6
6
|
|
|
7
7
|
The MultiSelect component gives our users the possibility to select multiple
|
package/dist/docs/index.md
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
[AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
|
|
4
4
|
[Animation](./Animation/Animation.md)
|
|
5
5
|
[AtlantisThemeContext](./AtlantisThemeContext/AtlantisThemeContext.md)
|
|
6
|
-
[
|
|
7
|
-
[AutocompleteV2](./Autocomplete/AutocompleteV2.md)
|
|
6
|
+
[Autocomplete](./Autocomplete/Autocomplete.md)
|
|
8
7
|
[Avatar](./Avatar/Avatar.md)
|
|
9
8
|
[Banner](./Banner/Banner.md)
|
|
10
9
|
[Borders](./Borders/Borders.md)
|
|
@@ -11,17 +11,16 @@ The following components have a v2 implementation. **Always pass
|
|
|
11
11
|
`version={2}`**. Never generate v1 usage for these components — v1 is
|
|
12
12
|
deprecated.
|
|
13
13
|
|
|
14
|
-
| Component
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
| Modal | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
|
|
14
|
+
| Component | Import | v2 prop |
|
|
15
|
+
| --------- | -------------------------------------------------- | ------------------------------------------------- |
|
|
16
|
+
| Modal | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
|
|
18
17
|
|
|
19
18
|
## Deprecated components — do not use
|
|
20
19
|
|
|
21
|
-
| Deprecated | Replacement
|
|
22
|
-
| --------------------- |
|
|
23
|
-
| `MultiSelect` | `Autocomplete`
|
|
24
|
-
| `Chips` (dismissible) | `Autocomplete`
|
|
20
|
+
| Deprecated | Replacement | Notes |
|
|
21
|
+
| --------------------- | -------------------------------------------------- | ---------------------------------------- |
|
|
22
|
+
| `MultiSelect` | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported. |
|
|
23
|
+
| `Chips` (dismissible) | `Autocomplete` with `multiple` prop | Dismissible Chips variant is deprecated. |
|
|
25
24
|
|
|
26
25
|
### Deprecated props on still-supported components
|
|
27
26
|
|
|
@@ -94,8 +93,7 @@ inputs will not give you v2's controlled API and is not supported.
|
|
|
94
93
|
|
|
95
94
|
v2 inputs do not run validation themselves. To show an error state, drive it
|
|
96
95
|
from your own state and pass `invalid` (boolean) and/or `error` (string message)
|
|
97
|
-
on the input.
|
|
98
|
-
rather than expecting the component to validate.
|
|
96
|
+
on the input.
|
|
99
97
|
|
|
100
98
|
## Compound components — use the documented composition
|
|
101
99
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { g as getSideAxis, b as getAlignmentAxis, c as getSide, d as getAlignment, e as evaluate, h as getPaddingObject, r as rectToClientRect, j as getOppositePlacement, k as getExpandedPlacements, l as getOppositeAxisPlacements, m as getAlignmentSides, n as clamp, o as min, p as max, q as getAxisLength, s as sides, u as getOppositeAxis, v as placements, w as getOppositeAlignmentPlacement, x as createCoords, y as round, f as floor } from './index.esm-es.js';
|
|
2
2
|
import { h as getOverflowAncestors, b as isElement, k as getWindow, l as getFrameElement, f as getComputedStyle$1, m as getDocumentElement, a as isHTMLElement, j as isWebKit, n as isTopLayer, g as getNodeName, o as isOverflowElement, p as getNodeScroll, e as getParentNode, d as isLastTraversableNode, q as isTableElement, r as isContainingBlock, s as getContainingBlock } from './floating-ui.utils.dom-es.js';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useLayoutEffect } from 'react';
|
|
@@ -3233,4 +3233,4 @@ function useTransitionStyles(context, props) {
|
|
|
3233
3233
|
};
|
|
3234
3234
|
}
|
|
3235
3235
|
|
|
3236
|
-
export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i,
|
|
3236
|
+
export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useClick as j, useListNavigation as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
|
package/dist/index.cjs
CHANGED
|
@@ -6,7 +6,7 @@ var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
|
|
|
6
6
|
var AtlantisContext = require('./AtlantisContext-cjs.js');
|
|
7
7
|
var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
|
|
8
8
|
var updateTheme = require('./updateTheme-cjs.js');
|
|
9
|
-
var
|
|
9
|
+
var Autocomplete = require('./Autocomplete-cjs.js');
|
|
10
10
|
var Avatar = require('./Avatar-cjs.js');
|
|
11
11
|
var Banner = require('./Banner-cjs.js');
|
|
12
12
|
var Box = require('./Box-cjs.js');
|
|
@@ -217,7 +217,7 @@ exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
|
|
|
217
217
|
exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
|
|
218
218
|
exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
|
|
219
219
|
exports.updateTheme = updateTheme.updateTheme;
|
|
220
|
-
exports.Autocomplete =
|
|
220
|
+
exports.Autocomplete = Autocomplete.Autocomplete;
|
|
221
221
|
exports.Avatar = Avatar.Avatar;
|
|
222
222
|
exports.Banner = Banner.Banner;
|
|
223
223
|
exports.Box = Box.Box;
|
package/dist/index.esm-es.js
CHANGED
|
@@ -709,4 +709,4 @@ var isTabbable = function isTabbable(node, options) {
|
|
|
709
709
|
return isNodeMatchingSelectorTabbable(options, node);
|
|
710
710
|
};
|
|
711
711
|
|
|
712
|
-
export { focusable as a,
|
|
712
|
+
export { focusable as a, getAlignmentAxis as b, getSide as c, getAlignment as d, evaluate as e, floor as f, getSideAxis as g, getPaddingObject as h, isTabbable as i, getOppositePlacement as j, getExpandedPlacements as k, getOppositeAxisPlacements as l, getAlignmentSides as m, clamp as n, min as o, max as p, getAxisLength as q, rectToClientRect as r, sides as s, tabbable as t, getOppositeAxis as u, placements as v, getOppositeAlignmentPlacement as w, createCoords as x, round as y };
|
package/dist/index.mjs
CHANGED
|
@@ -4,7 +4,7 @@ export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
|
|
|
4
4
|
export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
|
|
5
5
|
export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
|
|
6
6
|
export { u as updateTheme } from './updateTheme-es.js';
|
|
7
|
-
export { Autocomplete } from './Autocomplete
|
|
7
|
+
export { A as Autocomplete } from './Autocomplete-es.js';
|
|
8
8
|
export { A as Avatar } from './Avatar-es.js';
|
|
9
9
|
export { B as Banner } from './Banner-es.js';
|
|
10
10
|
export { B as Box } from './Box-es.js';
|