@bcgov/design-system-react-components 0.7.0-pr680 → 0.7.0-pr690

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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';
-export { DialogTrigger, TooltipTrigger } 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, 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';
+export { DialogTrigger, MenuSection, Header as MenuSectionHeader, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
 import { PropsWithChildren } from 'react';
 
 interface AccordionProps extends DisclosureProps {
@@ -227,6 +227,30 @@ interface LinkProps extends LinkProps$1 {
 }
 declare function Link({ children, size, danger, isButton, buttonVariant, isUnstyled, iconLeft, iconRight, ariaLabel, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
 
+interface MenuItemProps extends MenuItemProps$1 {
+    label?: string;
+    description?: string;
+    size?: "small" | "medium";
+    iconLeft?: React.ReactElement;
+    children?: React.ReactNode | ((props: MenuItemRenderProps & {
+        defaultChildren: React.ReactNode;
+    }) => React.ReactNode);
+}
+declare function MenuItem({ size, label, description, iconLeft, ...props }: MenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface MenuSectionProps {
+    id: Key;
+    header?: string;
+    items: MenuItemProps[];
+}
+interface MenuProps<T extends MenuItemProps> extends MenuProps$1<T> {
+    itemSize?: "small" | "medium";
+    items?: T[];
+    sections?: MenuSectionProps[];
+    placement?: PopoverProps["placement"];
+}
+declare function Menu<T extends MenuItemProps>({ itemSize, children, items, sections, placement, ...props }: MenuProps<T>): react_jsx_runtime.JSX.Element;
+
 declare function Modal({ children, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface ProgressBarProps extends ProgressBarProps$1 {
@@ -252,6 +276,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;
@@ -263,6 +307,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;
@@ -271,7 +319,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 */
@@ -286,9 +334,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";
@@ -359,6 +409,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;
@@ -377,26 +433,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.
@@ -481,4 +517,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, 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

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.7.0-pr680",
+  "version": "0.7.0-pr690",
   "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"