@midas-ds/components 10.0.0 → 10.1.1

package/info-banner/InfoBanner.d.ts

@@ -12,8 +12,13 @@ export interface InfoBannerProps extends React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
     /**
      *  Specify if the InfoBanner should have a dismiss button in the top right corner
+     *  @deprecated since 10.0.1. Please use `isDismissable` instead
      */
     dismissable?: boolean;
+    /**
+     *  Specify if the InfoBanner should have a dismiss button in the top right corner
+     */
+    isDismissable?: boolean;
 }
 /**
  * Displays a static message as an inline banner

package/link/Link.d.ts

@@ -9,8 +9,11 @@ interface MidasLinkProps<C extends React.ElementType> {
     /** Optional icon, placed to the left of the link */
     icon?: LucideIcon;
     className?: string;
+    /** Replace base component with any Client Side Routing link instead.
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/|Client side routing}
+     */
     as?: C;
 }
 export type LinkProps<C extends React.ElementType> = MidasLinkProps<C> & Omit<React.ComponentProps<C>, keyof MidasLinkProps<C>>;
-export declare const Link: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ children, standalone, stretched, icon: IconComponent, className, as, ...rest }: LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ children, standalone, target, stretched, download, icon: IconComponent, className, as, ...rest }: LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
 export { RouterProvider };

package/link-button/LinkButton.d.ts

@@ -1,18 +1,41 @@
 import { default as React } from 'react';
 import { Link as AriaLink, RouterProvider } from 'react-aria-components';
 import { LucideIcon } from 'lucide-react';
+import { Size } from '../common/types';
 interface MidasLinkProps<C extends React.ElementType> {
     children: React.ReactNode;
+    /**
+     * Primary button is used as a positive action in a flow. Always use one primary button and never a seconday button on it's own. When using just an icon you must pass an aria-label
+     *
+     * @default 'primary'
+     * */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'icon';
+    /**
+     * Adds width: 100%; for the button to span entire width of parent
+     *
+     * @default false
+     */
     fullwidth?: boolean;
+    /** Display the icon on the left or right side of the button text */
     iconPlacement?: 'left' | 'right';
+    /** Add an icon from lucide-react
+     *
+     * @see {@link https://lucide.dev/icons/|Lucide}
+     */
     icon?: LucideIcon; /**Optional icon prop */
     className?: string;
+    /** Replace base component with any Client Side Routing link instead.
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/|Client side routing}
+     */
     as?: C;
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     **/
+    size?: Size;
 }
 export type LinkButtonProps<C extends React.ElementType> = MidasLinkProps<C> & Omit<React.ComponentProps<C>, keyof MidasLinkProps<C>>;
 /**
  * A link to be used when a user expects a button but web technologies force us to use a a-tag
  * */
-export declare const LinkButton: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ children, variant, fullwidth, icon: IconComponent, iconPlacement, className, as, ...rest }: LinkButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkButton: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ children, variant, fullwidth, icon: IconComponent, iconPlacement, className, as, size, ...rest }: LinkButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
 export { RouterProvider };

package/list-box/ListBox.d.ts

@@ -0,0 +1,4 @@
+import { ListBoxProps } from 'react-aria-components';
+import { ListBoxOption } from './types';
+import { Node } from '@react-types/shared';
+export declare const ListBox: <T extends ListBoxOption | Node<ListBoxOption>>({ className, children, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/list-box/ListBoxButton.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ListBoxButton: React.FC<React.HTMLAttributes<HTMLButtonElement>>;

package/list-box/ListBoxItem.d.ts

@@ -0,0 +1,3 @@
+import { ListBoxItemProps } from 'react-aria-components';
+import { ListBoxItemElement } from './types';
+export declare const ListBoxItem: <T extends ListBoxItemElement>({ children, className, ...rest }: ListBoxItemProps<T>) => import("react/jsx-runtime").JSX.Element;

package/list-box/ListBoxPopover.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps } from 'react-aria-components';
+import * as React from 'react';
+export declare const ListBoxPopover: React.FC<PopoverProps>;

package/list-box/ListBoxSection.d.ts

@@ -0,0 +1,8 @@
+import { ListBoxSectionProps as AriaListBoxSectionProps } from 'react-aria-components';
+import { ListBoxSectionElement } from './types';
+import * as React from 'react';
+export interface ListBoxSectionProps<T extends ListBoxSectionElement> extends Omit<AriaListBoxSectionProps<T>, 'children'> {
+    name: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const ListBoxSection: <T extends ListBoxSectionElement>({ children, name, ...rest }: ListBoxSectionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/list-box/SectionedListLayout.d.ts

@@ -0,0 +1,20 @@
+import { ListLayout, ListLayoutOptions, Size } from 'react-aria-components';
+export declare class SectionedListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends ListLayout<T, O> {
+    /**
+     * When using the ListLayout our scroll container height is not calculated properly when the content is partially sectioned.
+     * ```ts
+     * const partiallySectionedContent = [
+     *  {
+     *    name: 'fruit section',
+     *    children: [{ id: 'kiwi', name: 'Kiwi' }]
+     *  },
+     *  // berries have no section, because it's optional
+     *  { id: 'lingonberries', name: 'Lingonberries' }
+     * ];
+     * ```
+     * If we load the layout info for each key in the collection the calculation is correct.
+     *
+     * This might not be optional for performance, FYI
+     */
+    getContentSize(): Size;
+}

package/list-box/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ListBox';
+export * from './ListBoxButton';
+export * from './ListBoxItem';
+export * from './ListBoxPopover';
+export * from './ListBoxSection';
+export * from './types';

package/list-box/types.d.ts

@@ -0,0 +1,23 @@
+import { Key } from 'react-aria-components';
+export type ListBoxItemElement = {
+    children?: never;
+    id: Key;
+    name: string | React.ReactNode;
+    /**
+     * Textual representation of `name` in case it is not a string. Used for searching.
+     */
+    textValue?: string;
+    /**
+     * Additional properties.
+     */
+    [prop: string]: unknown;
+};
+export type ListBoxSectionElement = {
+    children: ListBoxItemElement[];
+    name: string;
+    /**
+     * Additional properties for backwards compatibility.
+     */
+    [prop: string]: unknown;
+};
+export type ListBoxOption = ListBoxItemElement | ListBoxSectionElement;

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "10.0.0",
+  "version": "10.1.1",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "react-aria": "^3.38.1",
-    "react-aria-components": "^1.7.1",
+    "react-aria-components": "^1.9.0",
     "react-stately": "^3.36.1"
   }
 }

package/select/HiddenMultiSelect.d.ts

@@ -1,6 +1,7 @@
 import { FocusableElement, RefObject } from '@react-types/shared';
 import { default as React, ReactNode } from 'react';
-import { MultiSelectState } from './useMultiSelectState';
+import { MultiSelectState } from './types';
+import { ListBoxOption } from '../list-box';
 export interface AriaHiddenMultiSelectProps {
     /**
      * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
@@ -15,7 +16,7 @@ export interface AriaHiddenMultiSelectProps {
     /** Sets the required state of the select and input. */
     isRequired?: boolean;
 }
-export interface HiddenMultiSelectProps<T> extends AriaHiddenMultiSelectProps {
+export interface HiddenMultiSelectProps<T extends ListBoxOption> extends AriaHiddenMultiSelectProps {
     /** State for the select. */
     state: MultiSelectState<T>;
     /** A ref to the trigger element. */
@@ -38,10 +39,10 @@ interface HiddenMultiSelectAria {
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-export declare function useHiddenMultiSelect<T>({ autoComplete, name, isDisabled, isRequired, selectRef, }: AriaHiddenMultiSelectOptions, state: MultiSelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenMultiSelectAria;
+export declare function useHiddenMultiSelect<T extends ListBoxOption>({ autoComplete, name, isDisabled, isRequired, selectRef, }: AriaHiddenMultiSelectOptions, state: MultiSelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenMultiSelectAria;
 /**
  * Renders a hidden native `<select>` element, which can be used to support browser
  * form autofill, mobile form navigation, and native form submission.
  */
-export declare function HiddenMultiSelect<T>(props: HiddenMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function HiddenMultiSelect<T extends ListBoxOption>(props: HiddenMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/select/MultiSelectValueTag.d.ts

@@ -0,0 +1,11 @@
+import { MultiSelectState, SelectProps } from './types';
+import { ListBoxOption } from '../list-box';
+import * as React from 'react';
+interface MultiSelectValueTagProps extends SelectProps {
+    state: MultiSelectState<ListBoxOption>;
+    parentWidth: number;
+    onClear: () => void;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+}
+export declare const MultiSelectValueTag: React.FC<MultiSelectValueTagProps>;
+export {};

package/select/Select.d.ts

@@ -1,80 +1,5 @@
-import { CollectionChildren } from '@react-types/shared';
-import { useMultiSelectState } from './useMultiSelectState';
-import { Size } from '../common/types';
+import { SelectProps } from './types';
 import * as React from 'react';
-export type OptionItem = {
-    children?: never;
-    id: string;
-    name: string | React.ReactNode;
-    /** Textual representation of `name` in case it is not a string. Used for searching. */
-    textValue?: string;
-    /** Allow additional properties for an option. */
-    [prop: string]: unknown;
-};
-type OptionSection = {
-    children: OptionItem[];
-    name: string;
-};
-export type Option = OptionItem | OptionSection;
-export type SelectionMode = 'single' | 'multiple';
-export type SelectProps = {
-    /** Whether the element should receive focus on render. */
-    autoFocus?: boolean;
-    children: CollectionChildren<Option>;
-    /** Sets the CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
-    className?: string;
-    /** Sets the default open state of the field (uncontrolled). */
-    defaultOpen?: boolean;
-    /** The initial selected keys in the collection (uncontrolled). */
-    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>['0']['defaultSelectedKeys'];
-    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: Parameters<typeof useMultiSelectState>['0']['disabledKeys'];
-    excludeFromTabOrder?: boolean;
-    items: Option[];
-    /** Whether the field can be emptied. */
-    isClearable?: boolean;
-    /** Whether the field is disabled. */
-    isDisabled?: boolean;
-    /** Whether to show a button to select all items. */
-    isSelectableAll?: boolean;
-    /** Sets the open state of the field (controlled). */
-    isOpen?: boolean;
-    /** The content to display as the label. */
-    label: string;
-    /** Optional description */
-    description?: string;
-    /** Placeholder value */
-    placeholder?: string;
-    /** Show selected items as tags below select */
-    showTags?: boolean;
-    /** Handler that is called when the select's open state changes. */
-    onOpenChange?: Parameters<typeof useMultiSelectState>['0']['onOpenChange'];
-    /** Handler that is called when the selection changes. */
-    onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
-    /** The currently selected keys in the collection (controlled). */
-    selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
-    /**
-     * The type of selection that is allowed in the collection.
-     * @default 'single'
-     */
-    selectionMode: SelectionMode;
-    /** The selection is valid or not  */
-    isInvalid?: boolean;
-    /** Error message to be displayed in case of invalid state*/
-    errorMessage?: string;
-    /** Whether the field is required. */
-    isRequired?: boolean;
-    /** Name of the field, for uncontrolled use */
-    name?: string;
-    errorPosition?: 'top' | 'bottom';
-    /** Component size (large: height 48px, medium: height 40px)
-     *  @default 'large'
-     * */
-    size?: Size;
-};
-export declare const SelectComponent: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {
-    /** Item objects in the collection. */
-    options: Option[];
+    options: import('..').ListBoxOption[];
 } & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/select/SelectFieldError.d.ts

@@ -0,0 +1,8 @@
+import { ListBoxOption } from '../list-box';
+import { MultiSelectState, SelectProps } from './types';
+import * as React from 'react';
+interface SelectFieldErrorProps extends SelectProps {
+    state: MultiSelectState<ListBoxOption>;
+}
+export declare const SelectFieldError: React.FC<SelectFieldErrorProps>;
+export {};

package/select/SelectListBox.d.ts

@@ -1,9 +1,8 @@
-import { MultiSelectState } from './useMultiSelectState';
+import { ListBoxOption } from '../list-box';
 import { AriaListBoxOptions } from '@react-aria/listbox';
-import * as React from 'react';
-interface ListBoxProps<T> extends AriaListBoxOptions<T> {
-    listBoxRef?: React.RefObject<HTMLUListElement>;
+import { MultiSelectState } from './types';
+interface ListBoxProps<T extends ListBoxOption> extends AriaListBoxOptions<T> {
     state: MultiSelectState<T>;
 }
-export declare const SelectListBox: <T>(props: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: <T extends ListBoxOption>({ state, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/select/SelectTrigger.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { AriaButtonProps } from 'react-aria';
+import { SelectProps, MultiSelectState } from './types';
+import { ListBoxOption } from '../list-box';
+interface SelectTriggerProps extends Omit<SelectProps, 'children'>, AriaButtonProps<'button'> {
+    state: MultiSelectState<ListBoxOption>;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+}
+export declare const SelectTrigger: React.FC<SelectTriggerProps>;
+export {};

package/select/index.d.ts

@@ -1 +1,2 @@
 export * from './Select';
+export type { SelectContainerProps as SelectProps, SelectionMode, Option, OptionItem, OptionSection, } from './types';

package/select/types.d.ts

@@ -0,0 +1,188 @@
+import { MenuTriggerState } from '@react-stately/menu';
+import { FormValidationState } from '@react-stately/form';
+import { OverlayTriggerProps } from '@react-types/overlays';
+import { ListState } from '@react-stately/list';
+import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation, Key, Node, CollectionChildren } from '@react-types/shared';
+import { HTMLAttributes } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+import { AriaButtonProps } from '@react-types/button';
+import { AriaSelectProps } from '@react-types/select';
+import { Size } from '../common/types';
+import { ListBoxItemElement, ListBoxOption, ListBoxSectionElement } from '../list-box/';
+/**
+ * Props used for setting up the list state
+ */
+export interface MultiSelectListProps<T extends ListBoxOption> extends CollectionBase<T>, MultipleSelection {
+}
+/**
+ * The state of the select list
+ */
+export interface MultiSelectListState<T extends ListBoxOption> extends ListState<T> {
+    /**
+     * The keys for the currently selected items.
+     */
+    selectedKeys: Set<Key>;
+    /**
+     * Sets the selected keys.
+     */
+    setSelectedKeys(keys: Iterable<Key>): void;
+    /**
+     * The value of the currently selected items.
+     */
+    selectedItems: Node<T>[] | null;
+    /**
+     * The type of selection.
+     */
+    selectionMode: MultiSelectListProps<T>['selectionMode'];
+}
+/**
+ * Props used for setting up the select component state
+ */
+export interface MultiSelectStateProps<T extends ListBoxOption> extends MultiSelectListProps<T>, AsyncLoadable, FocusableProps, LabelableProps, Omit<InputBase, 'isReadOnly'>, OverlayTriggerProps, TextInputBase, Validation {
+    /**
+     * Whether the menu should automatically flip direction when space is limited.
+     * @default true
+     */
+    shouldFlip?: boolean;
+}
+/**
+ * The state of the select component
+ */
+export interface MultiSelectState<T extends ListBoxOption> extends MultiSelectListState<T>, MenuTriggerState, FormValidationState {
+    /**
+     * Whether the select is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * Sets whether the select is focused.
+     */
+    setFocused(isFocused: boolean): void;
+}
+/**
+ * Props for setting up the select component parts
+ */
+export interface MultiSelectProps<T extends ListBoxOption> extends Omit<AriaSelectProps<T>, 'onSelectionChange'> {
+    /**
+     * Wheter to allow an empty selection or not
+     */
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: MultiSelectStateProps<T>['onSelectionChange'];
+}
+/**
+ * DOM attributes for rendering the parts of the Select component
+ */
+export interface MultiSelectDOMProps<T extends ListBoxOption> {
+    /**
+     * Props for the label element.
+     */
+    labelProps: HTMLAttributes<HTMLElement>;
+    /**
+     * Props for the popup trigger element.
+     */
+    triggerProps: AriaButtonProps;
+    /**
+     * Props for the element representing the selected value.
+     */
+    valueProps: HTMLAttributes<HTMLElement>;
+    /**
+     * Props for the popup.
+     */
+    menuProps: AriaListBoxOptions<T>;
+}
+export type SelectionMode = 'single' | 'multiple';
+export interface SelectProps extends MultiSelectStateProps<ListBoxOption> {
+    /**
+     * Whether the element should receive focus on render.
+     */
+    autoFocus?: boolean;
+    children: CollectionChildren<ListBoxOption>;
+    /**
+     * Sets the CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     */
+    className?: string;
+    /**
+     * Sets the default open state of the field (uncontrolled).
+     */
+    defaultOpen?: boolean;
+    excludeFromTabOrder?: boolean;
+    items: ListBoxOption[];
+    /**
+     * Whether the field can be emptied.
+     *  @default true
+     */
+    isClearable?: boolean;
+    /**
+     * Whether the field is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a button to select all items.
+     */
+    isSelectableAll?: boolean;
+    /**
+     * Sets the open state of the field (controlled).
+     */
+    isOpen?: boolean;
+    /**
+     * The content to display as the label.
+     */
+    label: string;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Placeholder value
+     */
+    placeholder?: string;
+    /**
+     * Show selected items as tags below select
+     */
+    showTags?: boolean;
+    /**
+     * The type of selection that is allowed in the collection.
+     * @default 'single'
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * The selection is valid or not
+     */
+    isInvalid?: boolean;
+    /**
+     * Error message to be displayed in case of invalid state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Name of the field, for uncontrolled use
+     */
+    name?: string;
+    /**
+     * The position of the error message
+     * @default "top"
+     */
+    errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     */
+    size?: Size;
+}
+export type SelectContainerProps = Omit<SelectProps, 'children' | 'items'> & {
+    /** Item objects in the collection. */
+    options: ListBoxOption[];
+};
+/**
+ * @deprecated since v10.1.0 please use `ListBoxOption` intead
+ */
+export type Option = ListBoxOption;
+/**
+ * @deprecated since v10.1.0 please use `ListBoxItemElement` intead
+ */
+export type OptionItem = ListBoxItemElement;
+/**
+ * @deprecated since v10.1.0 please use `ListBoxSectionElement` intead
+ */
+export type OptionSection = ListBoxSectionElement;

package/select/useMultiSelect.d.ts

@@ -1,21 +1,4 @@
-import { AriaListBoxOptions } from 'react-aria';
-import { HTMLAttributes, RefObject } from 'react';
-import { MultiSelectProps as MultiSelectStateProps, MultiSelectState } from './useMultiSelectState';
-import { AriaButtonProps } from '@react-types/button';
-import { AriaSelectProps } from '@react-types/select';
-type MultiSelectProps<T> = Omit<AriaSelectProps<T>, 'onSelectionChange'> & {
-    disallowEmptySelection?: boolean;
-    onSelectionChange?: MultiSelectStateProps<T>['onSelectionChange'];
-};
-interface MultiSelectAria<T> {
-    /** Props for the label element. */
-    labelProps: HTMLAttributes<HTMLElement>;
-    /** Props for the popup trigger element. */
-    triggerProps: AriaButtonProps;
-    /** Props for the element representing the selected value. */
-    valueProps: HTMLAttributes<HTMLElement>;
-    /** Props for the popup. */
-    menuProps: AriaListBoxOptions<T>;
-}
-export declare function useMultiSelect<T>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectAria<T>;
-export {};
+import { RefObject } from 'react';
+import { MultiSelectDOMProps, MultiSelectProps, MultiSelectState } from './types';
+import { ListBoxOption } from '../list-box';
+export declare function useMultiSelect<T extends ListBoxOption>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectDOMProps<T>;

package/select/useMultiSelectListState.d.ts

@@ -1,15 +1,3 @@
-import { ListState } from '@react-stately/list';
-import { Key, CollectionBase, MultipleSelection, Node } from '@react-types/shared';
-export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {
-}
-export interface MultiSelectListState<T> extends ListState<T> {
-    /** The keys for the currently selected items. */
-    selectedKeys: Set<Key>;
-    /** Sets the selected keys. */
-    setSelectedKeys(keys: Iterable<Key>): void;
-    /** The value of the currently selected items. */
-    selectedItems: Node<T>[] | null;
-    /** The type of selection. */
-    selectionMode: MultipleSelection['selectionMode'];
-}
-export declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;
+import { MultiSelectListProps, MultiSelectListState } from './types';
+import { ListBoxOption } from '../list-box';
+export declare function useMultiSelectListState<T extends ListBoxOption>(props: MultiSelectListProps<T>): MultiSelectListState<T>;

package/select/useMultiSelectState.d.ts

@@ -1,19 +1,3 @@
-import { MenuTriggerState } from '@react-stately/menu';
-import { MultiSelectListState } from './useMultiSelectListState';
-import { OverlayTriggerProps } from '@react-types/overlays';
-import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from '@react-types/shared';
-import { FormValidationState } from '@react-stately/form';
-export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
-    /**
-     * Whether the menu should automatically flip direction when space is limited.
-     * @default true
-     */
-    shouldFlip?: boolean;
-}
-export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTriggerState, FormValidationState {
-    /** Whether the select is currently focused. */
-    isFocused: boolean;
-    /** Sets whether the select is focused. */
-    setFocused(isFocused: boolean): void;
-}
-export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;
+import { MultiSelectState, MultiSelectStateProps } from './types';
+import { ListBoxOption } from '../list-box';
+export declare function useMultiSelectState<T extends ListBoxOption>(props: MultiSelectStateProps<T>): MultiSelectState<T>;

package/tag/Tag.d.ts

@@ -1,11 +1,12 @@
-import { default as React } from 'react';
 import { TagGroupProps as AriaTagGroupProps, TagProps as AriaTagProps } from 'react-aria-components';
+import * as React from 'react';
 export interface TagGroupProp extends AriaTagGroupProps {
     children: React.ReactNode;
 }
 export interface TagProps extends AriaTagProps {
     children: React.ReactNode;
     dismissable?: boolean;
+    type?: 'default' | 'success' | 'info' | 'important' | 'warning';
 }
 export declare const TagGroup: React.FC<TagGroupProp>;
 export declare const Tag: React.FC<TagProps>;

package/utils/test.d.ts

@@ -1,7 +1,7 @@
 /**
  * A utility for making visual assertions in Storybook play tests based on the browsers "prefers-colors-scheme" setting
  */
-export declare const lightDark: (light: string, dark: string) => string;
+export declare const lightDark: (light: string, dark: string, mode?: "light" | "dark") => string;
 /**
  * Convert a CSS hex color to CSS rgb color
  * ```

package/select/SelectPopover.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-type PopoverProps = {
-    children: React.ReactNode;
-    className?: string;
-    isOpen?: boolean;
-    onClose: () => void;
-    triggerRef: React.RefObject<HTMLButtonElement>;
-};
-export declare const SelectPopover: React.FC<PopoverProps>;
-export {};