@bcgov/design-system-react-components 0.7.0-pr689 → 0.7.0-pr697
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/cjs/index.cjs +1603 -295
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +1597 -296
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +119 -83
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, ModalOverlayProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, SeparatorProps as SeparatorProps$1, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
|
|
3
|
-
export { DialogTrigger, TooltipTrigger } from 'react-aria-components';
|
|
1
|
+
import * as react from 'react';
|
|
4
2
|
import { PropsWithChildren } from 'react';
|
|
3
|
+
import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, MenuItemProps as MenuItemProps$1, MenuItemRenderProps, MenuProps as MenuProps$1, Key, PopoverProps, ModalOverlayProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, TagProps as TagProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, SeparatorProps as SeparatorProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
|
|
4
|
+
export { DialogTrigger, MenuSection, Header as MenuSectionHeader, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
|
|
5
5
|
|
|
6
6
|
interface AccordionProps extends DisclosureProps {
|
|
7
7
|
label?: string;
|
|
8
8
|
}
|
|
9
|
-
declare function Accordion({ label, children, ...props }: AccordionProps):
|
|
9
|
+
declare function Accordion({ label, children, ...props }: AccordionProps): react.JSX.Element;
|
|
10
10
|
|
|
11
11
|
interface AccordionGroupProps extends DisclosureGroupProps {
|
|
12
12
|
title?: string;
|
|
13
13
|
titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
14
14
|
}
|
|
15
|
-
declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps):
|
|
15
|
+
declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps): react.JSX.Element;
|
|
16
16
|
|
|
17
17
|
interface AlertBannerProps extends React.PropsWithChildren {
|
|
18
18
|
size?: "small" | "medium";
|
|
@@ -24,7 +24,7 @@ interface AlertBannerProps extends React.PropsWithChildren {
|
|
|
24
24
|
customIcon?: React.ReactNode;
|
|
25
25
|
onClose?: () => void;
|
|
26
26
|
}
|
|
27
|
-
declare function AlertBanner({ variant, size, layout, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps):
|
|
27
|
+
declare function AlertBanner({ variant, size, layout, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react.JSX.Element;
|
|
28
28
|
|
|
29
29
|
interface AlertDialogProps extends DialogProps$1 {
|
|
30
30
|
variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
|
|
@@ -33,7 +33,7 @@ interface AlertDialogProps extends DialogProps$1 {
|
|
|
33
33
|
isCloseable?: boolean;
|
|
34
34
|
buttons?: React.ReactNode;
|
|
35
35
|
}
|
|
36
|
-
declare function AlertDialog({ children, variant, role, title, isCloseable, isIconHidden, buttons, ...props }: AlertDialogProps):
|
|
36
|
+
declare function AlertDialog({ children, variant, role, title, isCloseable, isIconHidden, buttons, ...props }: AlertDialogProps): react.JSX.Element;
|
|
37
37
|
|
|
38
38
|
interface ButtonProps extends ButtonProps$1 {
|
|
39
39
|
/**
|
|
@@ -53,16 +53,16 @@ interface ButtonProps extends ButtonProps$1 {
|
|
|
53
53
|
*/
|
|
54
54
|
isIconButton?: boolean;
|
|
55
55
|
}
|
|
56
|
-
declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps):
|
|
56
|
+
declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react.JSX.Element;
|
|
57
57
|
|
|
58
58
|
interface ButtonGroupProps extends React.PropsWithChildren {
|
|
59
59
|
orientation?: "horizontal" | "vertical";
|
|
60
60
|
alignment?: "start" | "center" | "end";
|
|
61
61
|
ariaLabel?: string | undefined;
|
|
62
62
|
}
|
|
63
|
-
declare function ButtonGroup({ orientation, alignment, ariaLabel, children, ...props }: ButtonGroupProps):
|
|
63
|
+
declare function ButtonGroup({ orientation, alignment, ariaLabel, children, ...props }: ButtonGroupProps): react.JSX.Element;
|
|
64
64
|
|
|
65
|
-
declare function Calendar({ visibleDuration, ...props }: CalendarProps<DateValue>):
|
|
65
|
+
declare function Calendar({ visibleDuration, ...props }: CalendarProps<DateValue>): react.JSX.Element;
|
|
66
66
|
|
|
67
67
|
interface CalloutProps extends React.PropsWithChildren {
|
|
68
68
|
variant?: "lightGrey" | "lightBlue" | "lightGold" | "Blue" | "Grey" | "Black";
|
|
@@ -72,9 +72,9 @@ interface CalloutProps extends React.PropsWithChildren {
|
|
|
72
72
|
role?: React.AriaRole | undefined;
|
|
73
73
|
isLeftBorderDisabled?: boolean;
|
|
74
74
|
}
|
|
75
|
-
declare function Callout({ variant, title, description, buttons, role, isLeftBorderDisabled, children, ...props }: CalloutProps):
|
|
75
|
+
declare function Callout({ variant, title, description, buttons, role, isLeftBorderDisabled, children, ...props }: CalloutProps): react.JSX.Element;
|
|
76
76
|
|
|
77
|
-
declare function Checkbox({ value, children, ...props }: CheckboxProps):
|
|
77
|
+
declare function Checkbox({ value, children, ...props }: CheckboxProps): react.JSX.Element;
|
|
78
78
|
|
|
79
79
|
interface CheckboxGroupProps extends CheckboxGroupProps$1 {
|
|
80
80
|
orientation?: "horizontal" | "vertical";
|
|
@@ -84,7 +84,7 @@ interface CheckboxGroupProps extends CheckboxGroupProps$1 {
|
|
|
84
84
|
/** `flex-wrap` style property, defaults to `nowrap` */
|
|
85
85
|
flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
|
|
86
86
|
}
|
|
87
|
-
declare function CheckboxGroup({ orientation, label, description, errorMessage, flexWrap, children, ...props }: CheckboxGroupProps):
|
|
87
|
+
declare function CheckboxGroup({ orientation, label, description, errorMessage, flexWrap, children, ...props }: CheckboxGroupProps): react.JSX.Element;
|
|
88
88
|
|
|
89
89
|
interface DatePickerProps<T extends DateValue> extends DatePickerProps$1<T> {
|
|
90
90
|
size?: "small" | "medium";
|
|
@@ -96,12 +96,12 @@ interface DatePickerProps<T extends DateValue> extends DatePickerProps$1<T> {
|
|
|
96
96
|
isBrowserLocaleUsed?: boolean;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
declare function DatePicker<T extends DateValue>({ size, label, description, errorMessage, showFormatHelpText, isRequired, isCalendarDisabled, isBrowserLocaleUsed, ...props }: DatePickerProps<T>):
|
|
99
|
+
declare function DatePicker<T extends DateValue>({ size, label, description, errorMessage, showFormatHelpText, isRequired, isCalendarDisabled, isBrowserLocaleUsed, ...props }: DatePickerProps<T>): react.JSX.Element;
|
|
100
100
|
|
|
101
101
|
interface DialogProps extends DialogProps$1 {
|
|
102
102
|
isCloseable?: boolean;
|
|
103
103
|
}
|
|
104
|
-
declare function Dialog({ isCloseable, role, children, ...props }: DialogProps):
|
|
104
|
+
declare function Dialog({ isCloseable, role, children, ...props }: DialogProps): react.JSX.Element;
|
|
105
105
|
|
|
106
106
|
interface FooterLinksProps {
|
|
107
107
|
/**
|
|
@@ -119,7 +119,7 @@ interface FooterLinksProps {
|
|
|
119
119
|
* @param {FooterLinksProps} props
|
|
120
120
|
* @returns {React.ReactElement}
|
|
121
121
|
*/
|
|
122
|
-
declare function FooterLinks({ title, links }: FooterLinksProps):
|
|
122
|
+
declare function FooterLinks({ title, links }: FooterLinksProps): react.JSX.Element;
|
|
123
123
|
interface FooterProps {
|
|
124
124
|
/**
|
|
125
125
|
* Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
|
|
@@ -163,9 +163,9 @@ interface FooterProps {
|
|
|
163
163
|
* @param {FooterProps} props
|
|
164
164
|
* @returns {React.ReactElement}
|
|
165
165
|
*/
|
|
166
|
-
declare function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React.PropsWithChildren<FooterProps>):
|
|
166
|
+
declare function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React.PropsWithChildren<FooterProps>): react.JSX.Element;
|
|
167
167
|
|
|
168
|
-
declare function Form({ ...props }: FormProps):
|
|
168
|
+
declare function Form({ ...props }: FormProps): react.JSX.Element;
|
|
169
169
|
|
|
170
170
|
interface HeaderProps {
|
|
171
171
|
/**
|
|
@@ -193,13 +193,13 @@ interface HeaderProps {
|
|
|
193
193
|
*/
|
|
194
194
|
titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
|
|
195
195
|
}
|
|
196
|
-
declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: PropsWithChildren<HeaderProps>):
|
|
196
|
+
declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: PropsWithChildren<HeaderProps>): react.JSX.Element;
|
|
197
197
|
|
|
198
198
|
interface HeadingProps extends HeadingProps$1 {
|
|
199
199
|
color?: "primary" | "primaryInvert" | "secondary" | "secondaryInvert" | "disabled" | "danger";
|
|
200
200
|
isUnstyled?: boolean;
|
|
201
201
|
}
|
|
202
|
-
declare function Heading({ color, isUnstyled, ...props }: HeadingProps):
|
|
202
|
+
declare function Heading({ color, isUnstyled, ...props }: HeadingProps): react.JSX.Element;
|
|
203
203
|
|
|
204
204
|
interface InlineAlertProps extends React.PropsWithChildren {
|
|
205
205
|
variant?: "info" | "success" | "warning" | "danger";
|
|
@@ -212,7 +212,7 @@ interface InlineAlertProps extends React.PropsWithChildren {
|
|
|
212
212
|
role?: React.AriaRole | undefined;
|
|
213
213
|
onClose?: () => void;
|
|
214
214
|
}
|
|
215
|
-
declare function InlineAlert({ variant, title, description, isIconHidden, isCloseable, role, customIcon, buttons, children, onClose, ...props }: InlineAlertProps):
|
|
215
|
+
declare function InlineAlert({ variant, title, description, isIconHidden, isCloseable, role, customIcon, buttons, children, onClose, ...props }: InlineAlertProps): react.JSX.Element;
|
|
216
216
|
|
|
217
217
|
interface LinkProps extends LinkProps$1 {
|
|
218
218
|
children?: React.ReactNode;
|
|
@@ -225,21 +225,45 @@ interface LinkProps extends LinkProps$1 {
|
|
|
225
225
|
iconLeft?: React.ReactElement;
|
|
226
226
|
iconRight?: React.ReactElement;
|
|
227
227
|
}
|
|
228
|
-
declare function Link({ children, size, danger, isButton, buttonVariant, isUnstyled, iconLeft, iconRight, ariaLabel, ...props }: LinkProps):
|
|
228
|
+
declare function Link({ children, size, danger, isButton, buttonVariant, isUnstyled, iconLeft, iconRight, ariaLabel, ...props }: LinkProps): react.JSX.Element;
|
|
229
229
|
|
|
230
|
-
|
|
230
|
+
interface MenuItemProps extends MenuItemProps$1 {
|
|
231
|
+
label?: string;
|
|
232
|
+
description?: string;
|
|
233
|
+
size?: "small" | "medium";
|
|
234
|
+
iconLeft?: React.ReactElement;
|
|
235
|
+
children?: React.ReactNode | ((props: MenuItemRenderProps & {
|
|
236
|
+
defaultChildren: React.ReactNode;
|
|
237
|
+
}) => React.ReactNode);
|
|
238
|
+
}
|
|
239
|
+
declare function MenuItem({ size, label, description, iconLeft, ...props }: MenuItemProps): react.JSX.Element;
|
|
240
|
+
|
|
241
|
+
interface MenuSectionProps {
|
|
242
|
+
id: Key;
|
|
243
|
+
header?: string;
|
|
244
|
+
items: MenuItemProps[];
|
|
245
|
+
}
|
|
246
|
+
interface MenuProps<T extends MenuItemProps> extends MenuProps$1<T> {
|
|
247
|
+
itemSize?: "small" | "medium";
|
|
248
|
+
items?: T[];
|
|
249
|
+
sections?: MenuSectionProps[];
|
|
250
|
+
placement?: PopoverProps["placement"];
|
|
251
|
+
}
|
|
252
|
+
declare function Menu<T extends MenuItemProps>({ itemSize, children, items, sections, placement, ...props }: MenuProps<T>): react.JSX.Element;
|
|
253
|
+
|
|
254
|
+
declare function Modal({ children, ...props }: ModalOverlayProps): react.JSX.Element;
|
|
231
255
|
|
|
232
256
|
interface ProgressBarProps extends ProgressBarProps$1 {
|
|
233
257
|
size?: "small" | "medium" | "large";
|
|
234
258
|
}
|
|
235
|
-
declare function ProgressBar({ size, valueLabel, ...props }: ProgressBarProps):
|
|
259
|
+
declare function ProgressBar({ size, valueLabel, ...props }: ProgressBarProps): react.JSX.Element;
|
|
236
260
|
|
|
237
261
|
interface ProgressCircleProps extends ProgressBarProps$1 {
|
|
238
262
|
size?: "small" | "medium" | "large";
|
|
239
263
|
}
|
|
240
|
-
declare function ProgressCircle({ size, valueLabel, ...props }: ProgressCircleProps):
|
|
264
|
+
declare function ProgressCircle({ size, valueLabel, ...props }: ProgressCircleProps): react.JSX.Element;
|
|
241
265
|
|
|
242
|
-
declare function Radio({ value, children, ...props }: RadioProps):
|
|
266
|
+
declare function Radio({ value, children, ...props }: RadioProps): react.JSX.Element;
|
|
243
267
|
|
|
244
268
|
interface RadioGroupProps extends RadioGroupProps$1 {
|
|
245
269
|
children?: React.ReactNode;
|
|
@@ -250,7 +274,27 @@ interface RadioGroupProps extends RadioGroupProps$1 {
|
|
|
250
274
|
/** `flex-wrap` style property, defaults to `nowrap` */
|
|
251
275
|
flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
|
|
252
276
|
}
|
|
253
|
-
declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps):
|
|
277
|
+
declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps): react.JSX.Element;
|
|
278
|
+
|
|
279
|
+
interface TagProps extends TagProps$1 {
|
|
280
|
+
/**
|
|
281
|
+
* Icon that appears to the left of the `textValue` field
|
|
282
|
+
*/
|
|
283
|
+
icon?: React.ReactNode;
|
|
284
|
+
/**
|
|
285
|
+
* Background color
|
|
286
|
+
*/
|
|
287
|
+
color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
|
|
288
|
+
/**
|
|
289
|
+
* tagStyle
|
|
290
|
+
*/
|
|
291
|
+
tagStyle?: "rectangular" | "circular";
|
|
292
|
+
/**
|
|
293
|
+
* size
|
|
294
|
+
*/
|
|
295
|
+
size?: "xsmall" | "small" | "medium";
|
|
296
|
+
}
|
|
297
|
+
declare function Tag({ color, tagStyle, size, icon, id, textValue, ...props }: TagProps): react.JSX.Element;
|
|
254
298
|
|
|
255
299
|
interface ListBoxItemProps extends ListBoxItemProps$1 {
|
|
256
300
|
/** Text label for the option. Provide an `id` if this is not unique. */
|
|
@@ -263,6 +307,10 @@ interface ListBoxItemProps extends ListBoxItemProps$1 {
|
|
|
263
307
|
iconLeft?: React.ReactElement;
|
|
264
308
|
/** Right icon slot */
|
|
265
309
|
iconRight?: React.ReactElement;
|
|
310
|
+
/** Optional color token forwarded to selected tags */
|
|
311
|
+
color?: TagProps["color"];
|
|
312
|
+
/** Optional style token forwarded to selected tags */
|
|
313
|
+
tagStyle?: TagProps["tagStyle"];
|
|
266
314
|
}
|
|
267
315
|
interface SelectionSectionProps {
|
|
268
316
|
id: Key;
|
|
@@ -271,7 +319,7 @@ interface SelectionSectionProps {
|
|
|
271
319
|
/** Flat list of options within the section */
|
|
272
320
|
items: ListBoxItemProps[];
|
|
273
321
|
}
|
|
274
|
-
interface SelectProps<T extends object> extends SelectProps$1<T> {
|
|
322
|
+
interface SelectProps<T extends object, M extends "single" | "multiple" = "single"> extends SelectProps$1<T, M> {
|
|
275
323
|
/** Use `items` for a flat list of options */
|
|
276
324
|
items?: ListBoxItemProps[];
|
|
277
325
|
/** Use `sections` for a sectioned list with `items` options in each section */
|
|
@@ -286,116 +334,104 @@ interface SelectProps<T extends object> extends SelectProps$1<T> {
|
|
|
286
334
|
description?: string;
|
|
287
335
|
/** Used for data validation and error handling */
|
|
288
336
|
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
337
|
+
/** Overflow behaviour */
|
|
338
|
+
overflow?: "wrap" | "scroll";
|
|
289
339
|
}
|
|
290
|
-
/** Select displays a collapsible list of options and allows a user to select one of them. */
|
|
291
|
-
declare function Select<T extends object>({ items, sections, label, description, placeholder, size, errorMessage, ...props }: SelectProps<T>):
|
|
340
|
+
/** Select displays a collapsible list of options and allows a user to select one or more of them. */
|
|
341
|
+
declare function Select<T extends object, M extends "single" | "multiple" = "single">({ items, sections, label, description, placeholder, size, errorMessage, selectionMode, overflow, ...props }: SelectProps<T, M>): react.JSX.Element;
|
|
292
342
|
|
|
293
343
|
interface SeparatorProps extends SeparatorProps$1 {
|
|
294
344
|
size?: "small" | "medium" | "large";
|
|
295
345
|
}
|
|
296
|
-
declare function Separator({ size, ...props }: SeparatorProps):
|
|
346
|
+
declare function Separator({ size, ...props }: SeparatorProps): react.JSX.Element;
|
|
297
347
|
|
|
298
348
|
declare function SvgBcLogo({ id }: {
|
|
299
349
|
id?: string | undefined;
|
|
300
|
-
}):
|
|
350
|
+
}): react.JSX.Element;
|
|
301
351
|
|
|
302
352
|
declare function SvgBcOutlineIcon({ id }: {
|
|
303
353
|
id?: string | undefined;
|
|
304
|
-
}):
|
|
354
|
+
}): react.JSX.Element;
|
|
305
355
|
|
|
306
356
|
declare function SvgBetaIcon({ id }: {
|
|
307
357
|
id?: string | undefined;
|
|
308
|
-
}):
|
|
358
|
+
}): react.JSX.Element;
|
|
309
359
|
|
|
310
360
|
declare function SvgCalendarIcon({ ...props }: {
|
|
311
361
|
[x: string]: any;
|
|
312
|
-
}):
|
|
362
|
+
}): react.JSX.Element;
|
|
313
363
|
|
|
314
364
|
declare function SvgCheckIcon({ id }: {
|
|
315
365
|
id?: string | undefined;
|
|
316
|
-
}):
|
|
366
|
+
}): react.JSX.Element;
|
|
317
367
|
|
|
318
368
|
declare function SvgCheckCircleIcon({ id }: {
|
|
319
369
|
id?: string | undefined;
|
|
320
|
-
}):
|
|
370
|
+
}): react.JSX.Element;
|
|
321
371
|
|
|
322
372
|
declare function SvgChevronUpIcon({ id }: {
|
|
323
373
|
id?: string | undefined;
|
|
324
|
-
}):
|
|
374
|
+
}): react.JSX.Element;
|
|
325
375
|
|
|
326
376
|
declare function SvgChevronDownIcon({ id }: {
|
|
327
377
|
id?: string | undefined;
|
|
328
|
-
}):
|
|
378
|
+
}): react.JSX.Element;
|
|
329
379
|
|
|
330
380
|
declare function SvgChevronLeftIcon({ id }: {
|
|
331
381
|
id?: string | undefined;
|
|
332
|
-
}):
|
|
382
|
+
}): react.JSX.Element;
|
|
333
383
|
|
|
334
384
|
declare function SvgChevronRightIcon({ id }: {
|
|
335
385
|
id?: string | undefined;
|
|
336
|
-
}):
|
|
386
|
+
}): react.JSX.Element;
|
|
337
387
|
|
|
338
388
|
declare function SvgDashIcon$1({ id }: {
|
|
339
389
|
id?: string | undefined;
|
|
340
|
-
}):
|
|
390
|
+
}): react.JSX.Element;
|
|
341
391
|
|
|
342
392
|
declare function SvgExclamationIcon({ id }: {
|
|
343
393
|
id?: string | undefined;
|
|
344
|
-
}):
|
|
394
|
+
}): react.JSX.Element;
|
|
345
395
|
|
|
346
396
|
declare function SvgExclamationCircleIcon({ id, }: {
|
|
347
397
|
id?: string | undefined;
|
|
348
|
-
}):
|
|
398
|
+
}): react.JSX.Element;
|
|
349
399
|
|
|
350
400
|
declare function SvgCloseIcon({ id }: {
|
|
351
401
|
id?: string | undefined;
|
|
352
|
-
}):
|
|
402
|
+
}): react.JSX.Element;
|
|
353
403
|
|
|
354
404
|
declare function SvgInfoIcon({ id }: {
|
|
355
405
|
id?: string | undefined;
|
|
356
|
-
}):
|
|
406
|
+
}): react.JSX.Element;
|
|
357
407
|
|
|
358
408
|
declare function SvgDashIcon({ id }: {
|
|
359
409
|
id?: string | undefined;
|
|
360
|
-
}):
|
|
410
|
+
}): react.JSX.Element;
|
|
411
|
+
|
|
412
|
+
interface SvgPlaceholderIconProps {
|
|
413
|
+
/** Width and height of the placeholder icon, defaults to 20 */
|
|
414
|
+
size?: number;
|
|
415
|
+
}
|
|
416
|
+
declare function SvgPlaceholderIcon({ size, ...props }: SvgPlaceholderIconProps): react.JSX.Element;
|
|
361
417
|
|
|
362
418
|
declare function SvgPlusIcon({ id }: {
|
|
363
419
|
id?: string | undefined;
|
|
364
|
-
}):
|
|
420
|
+
}): react.JSX.Element;
|
|
365
421
|
|
|
366
422
|
declare function SvgTooltipArrowUp({ id }: {
|
|
367
423
|
id?: string | undefined;
|
|
368
|
-
}):
|
|
424
|
+
}): react.JSX.Element;
|
|
369
425
|
|
|
370
426
|
interface SvgUpRightFromSquareIconProps {
|
|
371
427
|
size?: 16 | 20;
|
|
372
428
|
id?: string;
|
|
373
429
|
}
|
|
374
|
-
declare function SvgUpRightFromSquareIcon({ size, id, }: SvgUpRightFromSquareIconProps):
|
|
430
|
+
declare function SvgUpRightFromSquareIcon({ size, id, }: SvgUpRightFromSquareIconProps): react.JSX.Element;
|
|
375
431
|
|
|
376
432
|
declare function SvgReactAriaIcon({ id }: {
|
|
377
433
|
id?: string | undefined;
|
|
378
|
-
}):
|
|
379
|
-
|
|
380
|
-
interface TagProps extends TagProps$1 {
|
|
381
|
-
/**
|
|
382
|
-
* Icon that appears to the left of the `textValue` field
|
|
383
|
-
*/
|
|
384
|
-
icon?: React.ReactNode;
|
|
385
|
-
/**
|
|
386
|
-
* Background color
|
|
387
|
-
*/
|
|
388
|
-
color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
|
|
389
|
-
/**
|
|
390
|
-
* tagStyle
|
|
391
|
-
*/
|
|
392
|
-
tagStyle?: "rectangular" | "circular";
|
|
393
|
-
/**
|
|
394
|
-
* size
|
|
395
|
-
*/
|
|
396
|
-
size?: "small" | "medium";
|
|
397
|
-
}
|
|
398
|
-
declare function Tag({ color, tagStyle, size, icon, id, textValue, }: TagProps): react_jsx_runtime.JSX.Element;
|
|
434
|
+
}): react.JSX.Element;
|
|
399
435
|
|
|
400
436
|
interface TagGroupProps extends TagGroupProps$1 {
|
|
401
437
|
/**
|
|
@@ -411,7 +447,7 @@ interface TagGroupProps extends TagGroupProps$1 {
|
|
|
411
447
|
*/
|
|
412
448
|
errorMessage?: string;
|
|
413
449
|
}
|
|
414
|
-
declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps):
|
|
450
|
+
declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): react.JSX.Element;
|
|
415
451
|
|
|
416
452
|
interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEmptyState"> {
|
|
417
453
|
items: TagProps[];
|
|
@@ -420,21 +456,21 @@ interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEm
|
|
|
420
456
|
*/
|
|
421
457
|
orientation?: "horizontal" | "vertical";
|
|
422
458
|
}
|
|
423
|
-
declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>):
|
|
459
|
+
declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react.JSX.Element;
|
|
424
460
|
|
|
425
461
|
interface TextProps extends TextProps$1 {
|
|
426
462
|
size?: "small" | "medium" | "large";
|
|
427
463
|
color?: "primary" | "primaryInvert" | "secondary" | "secondaryInvert" | "disabled" | "danger";
|
|
428
464
|
isUnstyled?: boolean;
|
|
429
465
|
}
|
|
430
|
-
declare function Text({ elementType, size, color, isUnstyled, ...props }: TextProps):
|
|
466
|
+
declare function Text({ elementType, size, color, isUnstyled, ...props }: TextProps): react.JSX.Element;
|
|
431
467
|
|
|
432
468
|
interface TextAreaProps extends TextFieldProps$1 {
|
|
433
469
|
label?: string;
|
|
434
470
|
description?: string;
|
|
435
471
|
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
436
472
|
}
|
|
437
|
-
declare function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }: TextAreaProps):
|
|
473
|
+
declare function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }: TextAreaProps): react.JSX.Element;
|
|
438
474
|
|
|
439
475
|
interface TextFieldProps extends TextFieldProps$1 {
|
|
440
476
|
size?: "medium" | "small";
|
|
@@ -444,7 +480,7 @@ interface TextFieldProps extends TextFieldProps$1 {
|
|
|
444
480
|
iconLeft?: React.ReactElement;
|
|
445
481
|
iconRight?: React.ReactElement;
|
|
446
482
|
}
|
|
447
|
-
declare function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }: TextFieldProps):
|
|
483
|
+
declare function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }: TextFieldProps): react.JSX.Element;
|
|
448
484
|
|
|
449
485
|
interface TimeFieldProps<T extends TimeValue> extends TimeFieldProps$1<T> {
|
|
450
486
|
size?: "medium" | "small";
|
|
@@ -452,26 +488,26 @@ interface TimeFieldProps<T extends TimeValue> extends TimeFieldProps$1<T> {
|
|
|
452
488
|
description?: string;
|
|
453
489
|
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
454
490
|
}
|
|
455
|
-
declare function TimeField<T extends TimeValue>({ size, label, description, errorMessage, isRequired, ...props }: TimeFieldProps<T>):
|
|
491
|
+
declare function TimeField<T extends TimeValue>({ size, label, description, errorMessage, isRequired, ...props }: TimeFieldProps<T>): react.JSX.Element;
|
|
456
492
|
|
|
457
493
|
interface ToggleButtonProps extends ToggleButtonProps$1 {
|
|
458
494
|
size?: "small" | "medium";
|
|
459
495
|
isIconButton?: boolean;
|
|
460
496
|
}
|
|
461
|
-
declare function ToggleButton({ size, children, isIconButton, ...props }: ToggleButtonProps):
|
|
497
|
+
declare function ToggleButton({ size, children, isIconButton, ...props }: ToggleButtonProps): react.JSX.Element;
|
|
462
498
|
|
|
463
499
|
interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
|
|
464
500
|
label?: string;
|
|
465
501
|
size?: "small" | "medium";
|
|
466
502
|
}
|
|
467
|
-
declare function ToggleButtonGroup({ label, size, children, ...props }: ToggleButtonGroupProps):
|
|
503
|
+
declare function ToggleButtonGroup({ label, size, children, ...props }: ToggleButtonGroupProps): react.JSX.Element;
|
|
468
504
|
|
|
469
505
|
interface SwitchProps extends SwitchProps$1 {
|
|
470
506
|
labelPosition?: "left" | "right";
|
|
471
507
|
}
|
|
472
|
-
declare function Switch({ labelPosition, children, ...props }: SwitchProps):
|
|
508
|
+
declare function Switch({ labelPosition, children, ...props }: SwitchProps): react.JSX.Element;
|
|
473
509
|
|
|
474
|
-
declare function Tooltip(props: TooltipProps):
|
|
510
|
+
declare function Tooltip(props: TooltipProps): react.JSX.Element;
|
|
475
511
|
|
|
476
512
|
interface NumberFieldProps extends NumberFieldProps$1 {
|
|
477
513
|
size?: "small" | "medium";
|
|
@@ -479,6 +515,6 @@ interface NumberFieldProps extends NumberFieldProps$1 {
|
|
|
479
515
|
description?: string;
|
|
480
516
|
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
481
517
|
}
|
|
482
|
-
declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps):
|
|
518
|
+
declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps): react.JSX.Element;
|
|
483
519
|
|
|
484
|
-
export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };
|
|
520
|
+
export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Menu, MenuItem, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlaceholderIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bcgov/design-system-react-components",
|
|
3
|
-
"version": "0.7.0-
|
|
3
|
+
"version": "0.7.0-pr697",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/bcgov/design-system.git",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@testing-library/jest-dom": "6.9.1",
|
|
69
69
|
"@testing-library/react": "16.3.2",
|
|
70
70
|
"@types/node": "25.9.1",
|
|
71
|
-
"@types/react": "19.2.
|
|
71
|
+
"@types/react": "19.2.16",
|
|
72
72
|
"@types/react-dom": "19.2.3",
|
|
73
73
|
"@typescript-eslint/eslint-plugin": "8.59.4",
|
|
74
74
|
"@typescript-eslint/parser": "8.59.4",
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"eslint-plugin-react-hooks": "7.1.1",
|
|
81
81
|
"eslint-plugin-react-refresh": "0.5.2",
|
|
82
82
|
"eslint-plugin-storybook": "10.4.0",
|
|
83
|
-
"globals": "17.
|
|
83
|
+
"globals": "17.6.0",
|
|
84
84
|
"jsdom": "29.1.1",
|
|
85
85
|
"playwright": "1.60.0",
|
|
86
86
|
"prettier": "3.8.3",
|