@bcgov/design-system-react-components 0.7.0-pr593 → 0.7.0-pr643

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-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';
+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, TagProps as TagProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, 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';
 export { DialogTrigger, TooltipTrigger } from 'react-aria-components';
 import { PropsWithChildren } from 'react';
 
@@ -15,6 +15,8 @@ interface AccordionGroupProps extends DisclosureGroupProps {
 declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps): react_jsx_runtime.JSX.Element;
 
 interface AlertBannerProps extends React.PropsWithChildren {
+    size?: "small" | "medium";
+    layout?: "fixed" | "fluid";
     variant?: "info" | "success" | "warning" | "danger" | "black";
     isIconHidden?: boolean;
     isCloseable?: boolean;
@@ -22,7 +24,7 @@ interface AlertBannerProps extends React.PropsWithChildren {
     customIcon?: React.ReactNode;
     onClose?: () => void;
 }
-declare function AlertBanner({ variant, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react_jsx_runtime.JSX.Element;
+declare function AlertBanner({ variant, size, layout, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AlertDialogProps extends DialogProps$1 {
     variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
@@ -250,6 +252,26 @@ interface RadioGroupProps extends RadioGroupProps$1 {
 }
 declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
+interface TagProps extends TagProps$1 {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
+    icon?: React.ReactNode;
+    /**
+     * Background color
+     */
+    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
+    /**
+     * tagStyle
+     */
+    tagStyle?: "rectangular" | "circular";
+    /**
+     * size
+     */
+    size?: "xsmall" | "small" | "medium";
+}
+declare function Tag({ color, tagStyle, size, icon, id, textValue, ...props }: TagProps): react_jsx_runtime.JSX.Element;
+
 interface ListBoxItemProps extends ListBoxItemProps$1 {
     /** Text label for the option. Provide an `id` if this is not unique. */
     label: string;
@@ -261,6 +283,10 @@ interface ListBoxItemProps extends ListBoxItemProps$1 {
     iconLeft?: React.ReactElement;
     /** Right icon slot */
     iconRight?: React.ReactElement;
+    /** Optional color token forwarded to selected tags */
+    color?: TagProps["color"];
+    /** Optional style token forwarded to selected tags */
+    tagStyle?: TagProps["tagStyle"];
 }
 interface SelectionSectionProps {
     id: Key;
@@ -269,7 +295,7 @@ interface SelectionSectionProps {
     /** Flat list of options within the section */
     items: ListBoxItemProps[];
 }
-interface SelectProps<T extends object> extends SelectProps$1<T> {
+interface SelectProps<T extends object, M extends "single" | "multiple" = "single"> extends SelectProps$1<T, M> {
     /** Use `items` for a flat list of options */
     items?: ListBoxItemProps[];
     /** Use `sections` for a sectioned list with `items` options in each section */
@@ -284,9 +310,11 @@ interface SelectProps<T extends object> extends SelectProps$1<T> {
     description?: string;
     /** Used for data validation and error handling */
     errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Overflow behaviour */
+    overflow?: "wrap" | "scroll";
 }
-/** Select displays a collapsible list of options and allows a user to select one of them. */
-declare function Select<T extends object>({ items, sections, label, description, placeholder, size, errorMessage, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+/** Select displays a collapsible list of options and allows a user to select one or more of them. */
+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_runtime.JSX.Element;
 
 interface SeparatorProps extends SeparatorProps$1 {
     size?: "small" | "medium" | "large";
@@ -357,6 +385,12 @@ declare function SvgDashIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
 
+interface SvgPlaceholderIconProps {
+    /** Width and height of the placeholder icon, defaults to 20 */
+    size?: number;
+}
+declare function SvgPlaceholderIcon({ size, ...props }: SvgPlaceholderIconProps): react_jsx_runtime.JSX.Element;
+
 declare function SvgPlusIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
@@ -375,26 +409,6 @@ declare function SvgReactAriaIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
 
-interface TagProps extends TagProps$1 {
-    /**
-     * Icon that appears to the left of the `textValue` field
-     */
-    icon?: React.ReactNode;
-    /**
-     * Background color
-     */
-    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
-    /**
-     * tagStyle
-     */
-    tagStyle?: "rectangular" | "circular";
-    /**
-     * size
-     */
-    size?: "small" | "medium";
-}
-declare function Tag({ color, tagStyle, size, icon, id, textValue, }: TagProps): react_jsx_runtime.JSX.Element;
-
 interface TagGroupProps extends TagGroupProps$1 {
     /**
      * Labels the TagGroup, appears above the tags.
@@ -479,4 +493,4 @@ interface NumberFieldProps extends NumberFieldProps$1 {
 }
 declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
-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 };
+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, SvgPlaceholderIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.7.0-pr593",
+  "version": "0.7.0-pr643",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcgov/design-system.git",
@@ -42,7 +42,7 @@
     "dist/cjs"
   ],
   "dependencies": {
-    "@bcgov/design-tokens": "3.2.0",
+    "@bcgov/design-tokens": "4.0.0",
     "@react-aria/datepicker": "3.17.0",
     "@react-aria/i18n": "3.13.0",
     "react-aria-components": "1.17.0"
@@ -54,46 +54,46 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@figma/code-connect": "1.4.3",
+    "@figma/code-connect": "1.4.5",
     "@react-stately/data": "3.16.0",
     "@rollup/plugin-commonjs": "29.0.2",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-a11y": "10.3.5",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-links": "10.3.5",
-    "@storybook/addon-vitest": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-links": "10.4.0",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/react-vite": "10.4.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
-    "@types/node": "^25.6.0",
-    "@types/react": "19.2.14",
+    "@types/node": "25.9.1",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
-    "@typescript-eslint/eslint-plugin": "8.59.0",
-    "@typescript-eslint/parser": "8.59.0",
-    "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser-playwright": "4.1.4",
-    "@vitest/coverage-v8": "4.1.4",
+    "@typescript-eslint/eslint-plugin": "8.59.4",
+    "@typescript-eslint/parser": "8.59.4",
+    "@vitejs/plugin-react": "6.0.2",
+    "@vitest/browser-playwright": "4.1.7",
+    "@vitest/coverage-v8": "4.1.7",
     "axe-playwright": "2.2.2",
-    "eslint": "10.2.1",
+    "eslint": "10.4.0",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-react-refresh": "0.5.2",
-    "eslint-plugin-storybook": "10.3.5",
+    "eslint-plugin-storybook": "10.4.0",
     "globals": "17.5.0",
-    "jsdom": "29.0.2",
-    "playwright": "1.59.1",
+    "jsdom": "29.1.1",
+    "playwright": "1.60.0",
     "prettier": "3.8.3",
-    "rollup": "4.60.2",
+    "rollup": "4.60.4",
     "rollup-plugin-dts": "6.4.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "10.3.5",
+    "storybook": "10.4.0",
     "tslib": "2.8.1",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.0",
-    "vite": "8.0.9",
-    "vitest": "4.1.4"
+    "typescript-eslint": "8.59.4",
+    "vite": "8.0.13",
+    "vitest": "4.1.7"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "*"