@baseline-ui/core 0.21.0 → 0.22.1

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import React, { Key, Dispatch, SetStateAction } from 'react';
-import { DraggableCollectionStateOptions, DroppableCollectionStateOptions, Orientation, ListState, SliderStateOptions, ToggleProps, OverlayTriggerProps, OverlayTriggerState, MenuTriggerProps, TooltipTriggerProps, NumberFieldStateOptions, ListProps, SelectStateOptions, Item as Item$1 } from 'react-stately';
+import { DraggableCollectionStateOptions, DroppableCollectionStateOptions, Orientation, ListState, SliderStateOptions, ToggleProps, OverlayTriggerProps, OverlayTriggerState, MenuTriggerProps, TooltipTriggerProps, NumberFieldStateOptions, ListProps, SelectStateOptions, Item as Item$2, Selection as Selection$1, ComboBoxStateOptions, ListData, ListOptions } from 'react-stately';
 import * as react_aria from 'react-aria';
-import { DraggableCollectionOptions, DroppableCollectionOptions, AriaListBoxProps, AriaListBoxOptions, OptionAria, AriaButtonProps, AriaSliderProps, AriaSwitchProps, AriaSearchFieldProps, AriaPopoverProps, useOverlayTrigger, AriaMenuProps, AriaMenuTriggerProps, AriaLinkOptions, SeparatorProps as SeparatorProps$1, AriaProgressBarProps, AriaTextFieldProps, AriaTooltipProps, AriaPositionProps, OverlayProps, AriaToggleButtonProps, AriaCheckboxProps, AriaNumberFieldProps, I18nProviderProps as I18nProviderProps$1, LocalizedStrings, useNumberFormatter, useDateFormatter, AriaTagGroupProps, AriaSelectOptions, AriaDialogProps, DropOptions, ClipboardProps, PressProps, AriaRadioGroupProps, AriaModalOverlayProps, Locale } from 'react-aria';
+import { DraggableCollectionOptions, DroppableCollectionOptions, AriaListBoxProps, AriaListBoxOptions, OptionAria, AriaButtonProps, AriaSliderProps, AriaSwitchProps, AriaSearchFieldProps, AriaPopoverProps, useOverlayTrigger, AriaMenuProps, AriaMenuTriggerProps, AriaLinkOptions, SeparatorProps as SeparatorProps$1, AriaProgressBarProps, AriaTextFieldProps, AriaTooltipProps, AriaPositionProps, OverlayProps, AriaToggleButtonProps, AriaCheckboxProps, AriaNumberFieldProps, I18nProviderProps as I18nProviderProps$1, LocalizedStrings, useNumberFormatter, useDateFormatter, AriaTagGroupProps, AriaSelectOptions, AriaDialogProps, DropOptions, ClipboardProps, PressProps, AriaRadioGroupProps, AriaModalOverlayProps, AriaComboBoxOptions, AriaComboBoxProps, Locale, Key as Key$1 } from 'react-aria';
 export { I18nProviderProps, useCollator, useDateFormatter, useNumberFormatter } from 'react-aria';
-import { Node as Node$1, DragItem, AriaLabelingProps } from '@react-types/shared';
+import { Node as Node$1, DragItem, DOMAttributes, AriaLabelingProps, AriaValidationProps } from '@react-types/shared';
 import { IconProps, SVGRProps } from '@baseline-ui/icons';
 import { Theme, Sprinkles } from '@baseline-ui/tokens';
 import { AriaTabListProps } from '@react-types/tabs';
@@ -57,12 +57,12 @@ interface StylingProps extends BlockProps {
  */
 declare function isInsideOverlayContent(selector: HTMLElement): Element | null;
 
-interface ListOption {
+interface ListOption<T = Record<string, any>> {
     id: string;
     label: string;
     description?: string;
     icon?: React.FC<IconProps>;
-    data?: Record<string, any>;
+    data?: T;
     /**
      * The type of item.
      *
@@ -151,7 +151,7 @@ interface ActionButtonProps extends ActionButtonSharedProps {
      *
      * @default primary
      */
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "popover";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "popover" | "toolbar";
     /** The button's label. */
     label: React.ReactNode;
     /** The button's icon before the label. */
@@ -163,7 +163,7 @@ interface ActionButtonProps extends ActionButtonSharedProps {
      *
      * @default sm
      */
-    size?: "sm" | "md";
+    size?: "sm" | "md" | "lg";
     /** Indicates whether focusing should be prevented on press. */
     preventFocusOnPress?: boolean;
 }
@@ -388,8 +388,27 @@ interface MenuProps extends MenuPopoverProps, MenuTriggerProps, Omit<AriaMenuPro
      *   <ActionButton label="Label">
      * </Menu>
      * ```
+     *
+     * @deprecated Use `renderTrigger` instead.
      */
     children?: React.ReactNode;
+    /**
+     * A function that renders the trigger element of the component. The default
+     * implementation renders an `ActionButton` component.
+     *
+     * ```tsx
+     * <Menu renderTrigger={({ buttonProps, ref }) => <ActionButton {...buttonProps} label="Label" ref={ref} />
+     * ```
+     */
+    renderTrigger?: (options: {
+        buttonProps: ActionButtonProps;
+        ref: React.RefObject<HTMLButtonElement>;
+    }) => React.ReactNode;
+    /**
+     * The label of the trigger element. This can be a string, a React node, or a
+     * function that accepts a boolean indicating whether the menu is open.
+     */
+    triggerLabel?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
 }
 
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
@@ -632,7 +651,7 @@ interface ToggleButtonProps extends StylingProps, Omit<AriaToggleButtonProps, "c
      *
      * @default "md"
      */
-    size?: "md" | "lg";
+    size?: "sm" | "md" | "lg";
     /** Indicates whether focusing should be prevented on press. */
     preventFocusOnPress?: boolean;
 }
@@ -695,26 +714,26 @@ declare type DateFormatProps = Parameters<typeof useDateFormatter>[0] & {
 
 declare const DateFormat: React.FC<DateFormatProps>;
 
-interface Item {
+interface Item$1 {
     id: string;
     label: string;
     variant?: "neutral" | "red" | "green" | "blue" | "high-contrast";
     icon?: React.FC<SVGRProps>;
 }
-interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item>, "children" | "errorMessage" | "description">, Omit<ListProps<Item>, "children" | "collection" | "filter"> {
+interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item$1>, "children" | "errorMessage" | "description">, Omit<ListProps<Item$1>, "children" | "collection" | "filter"> {
     /**
      * The items to display in the tag group.
      *
      * Type Item = { id: string; label: string; variant?: "neutral" | "red" |
      * "green" | "blue" | "high-contrast"; icon?: React.FC<SVGRProps>; }
      */
-    items: Item[];
+    items: Item$1[];
     /**
      * The variant of the tag group.
      *
      * @default "neutral"
      */
-    variant?: Item["variant"];
+    variant?: Item$1["variant"];
     /** The label for the tag group. */
     "aria-label": string;
 }
@@ -813,6 +832,18 @@ interface SelectProps extends Omit<AriaSelectOptions<ListItem> & SelectStateOpti
     validationState?: "valid" | "error" | "warning";
     /** Whether the select component is read only. */
     isReadOnly?: boolean;
+    /**
+     * This callback can be used to render the trigger element of the select
+     * component. The trigger element is the element that is clicked to open the
+     * select menu.
+     */
+    renderTrigger?: (options: {
+        buttonProps: Omit<ActionButtonProps, "variant" | "label">;
+        valueProps: DOMAttributes;
+        isOpen: boolean;
+        selectedValue: ListItem | null;
+        ref: React.RefObject<HTMLButtonElement>;
+    }) => React.ReactNode;
 }
 
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
@@ -848,7 +879,7 @@ interface AvatarProps extends StylingProps {
 
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 
-declare type ItemProps = React.ComponentProps<typeof Item$1> & StylingProps & {
+declare type ItemProps = React.ComponentProps<typeof Item$2> & StylingProps & {
     key?: Key;
     icon?: React.FC<SVGRProps>;
     value?: string;
@@ -1685,12 +1716,37 @@ interface ColorPresetInlineInputProps extends Omit<RadioGroupProps, "items" | "d
 declare const ColorPresetInlineInput: React.ForwardRefExoticComponent<ColorPresetInlineInputProps & React.RefAttributes<HTMLDivElement>>;
 
 interface ToolbarProps extends StylingProps, AriaToolbarProps {
+    /** The children of the toolbar. */
     children: React.ReactNode;
     /**
      * Identifies the element (or elements) whose contents or presence are
      * controlled by the current element.
      */
     "aria-controls"?: string;
+    /**
+     * This prop is used to determine if the toolbar should be collapsible. If
+     * true, the buttons in the toolbar will be hidden behind a menu when the
+     * toolbar is too small to display all of the buttons.
+     *
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /**
+     * The props to pass to the Menu component when the toolbar is collapsible.
+     * This prop is only relevant when `isCollapsible` is true.
+     */
+    collapsibleMenuProps?: Omit<MenuProps, "items" | "onAction" | "placement" | "disabledKeys">;
+    /**
+     * The trigger to use for the menu when the toolbar is collapsible. This prop
+     * is only relevant when `isCollapsible` is true.
+     */
+    collapsibleMenuTrigger?: React.ReactNode;
+    /**
+     * A function that renders a spacer element in the collapsible toolbar between
+     * the toolbar buttons and the menu trigger. This prop is only relevant when
+     * `isCollapsible` is true.
+     */
+    renderSpacer?: () => React.ReactNode;
 }
 
 declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
@@ -1857,6 +1913,12 @@ interface EditorProps extends StylingProps, AriaLabelingProps {
      * @default false
      */
     autoFocus?: boolean;
+    /**
+     * Whether to save the editor value when `Enter` key is pressed.
+     *
+     * @default false
+     */
+    saveOnEnter?: boolean;
 }
 
 declare const Editor: React.MemoExoticComponent<React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>>;
@@ -1997,6 +2059,138 @@ interface AudioPlayerProps extends StylingProps, AriaLabelingProps {
 
 declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<HTMLDivElement>>;
 
+interface Item {
+    id: string;
+    src?: string;
+    alt?: string;
+    label: string;
+}
+interface ImageGalleryProps extends StylingProps, Omit<ListBoxProps, "items" | "layout" | "grid" | "renderOption" | "renderDropIndicator" | "renderDragPreview" | "UNSAFE_state" | "showSelectedIcon" | "orientation" | "shouldSelectOnPressUp" | "shouldFocusOnHover" | "dropIndicatorClassName" | "dropIndicatorStyle" | "shouldUseVirtualFocus" | "getItems" | "acceptedDragTypes" | "sectionClassName" | "sectionStyle"> {
+    /**
+     * An array of objects containing the image source, alt text, and label for
+     * each image.
+     *
+     * ```tsx
+     * const items = [
+     *   {
+     *     id: "1",
+     *     src: "https://example.com/image1.jpg",
+     *     alt: "Image 1",
+     *     label: "Image 1",
+     *   },
+     *   {
+     *     id: "2",
+     *     src: "https://example.com/image2.jpg",
+     *     alt: "Image 2",
+     *     label: "Image 2",
+     *   },
+     * ];
+     * ```
+     */
+    items: Item[];
+    /**
+     * The size of the images.
+     *
+     * @default "sm"
+     */
+    size?: "sm" | "md";
+    /**
+     * The aspect ratio of the images.
+     *
+     * @default 16 / 9
+     */
+    aspectRatio?: number;
+    /**
+     * The fit of the images.
+     *
+     * @default "cover"
+     */
+    fit?: "contain" | "cover";
+    /** A callback that is called when the list of images or selection is updated. */
+    onListChange?: (items: Item[]) => void;
+    /** A callback that is called when an image is deleted. */
+    onDelete?: (keys: Selection$1) => void;
+}
+
+declare const ImageGallery: React.ForwardRefExoticComponent<ImageGalleryProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ComboBoxProps extends StylingProps, Omit<AriaComboBoxOptions<ListItem>, "items" | "children" | "inputRef" | "popoverRef" | "listBoxRef" | "buttonRef" | "validationState" | "errorMessage" | "description">, Omit<AriaComboBoxProps<ListItem>, "items" | "children" | "errorMessage" | "description" | "validationState">, Omit<ListBoxProps, "autoFocus" | "onBlur" | "onFocus" | "onSelectionChange" | "selectionBehavior" | "selectionMode" | "selectedKeys" | "defaultSelectedKeys" | "renderDropIndicator" | "renderDragPreview" | "UNSAFE_state" | "dropIndicatorClassName" | "dropIndicatorStyle" | keyof DragAndDropProps>, AriaValidationProps, Omit<ComboBoxStateOptions<ListItem>, "items" | "children" | "errorMessage" | "description" | "validationState" | "selectedKey">, InputMessage {
+    /** ID of the initially selected item */
+    defaultSelectedKey?: string;
+    /**
+     * The state of the combobox input.
+     *
+     * @default valid
+     */
+    validationState?: "valid" | "error" | "warning";
+    /**
+     * The variant of the text input.
+     *
+     * @default primary
+     */
+    variant?: "primary" | "ghost";
+    /**
+     * The position of the label relative to the input.
+     *
+     * @default top
+     */
+    labelPosition?: "top" | "start";
+    /** Whether the input is read only. */
+    readOnly?: boolean;
+    /** The style object to apply to the input element */
+    inputStyle?: React.CSSProperties;
+    /** The class name to apply to the input element */
+    inputClassName?: string;
+    /** Optional label for the toggle button */
+    toggleLabel?: string;
+    /**
+     * The custom render function for the listbox options.
+     *
+     * @param item Node<ListItem>
+     * @param options [OptionAria]()
+     * @param ref React.RefObject<HTMLLIElement>
+     */
+    renderOption?: (item: Node$1<ListItem>, options: OptionAria & {
+        showSelectedIcon?: boolean;
+        _state: ListState<ListItem>;
+    }, ref: React.Ref<HTMLLIElement>) => React.ReactNode;
+    filterItems?: boolean;
+    onInputChange?: (value: string) => void;
+    showIcon?: boolean;
+    /**
+     * The items to render in the listbox. Items have the following shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   description?: string;
+     *   icon?: React.FC<IconProps>;
+     * };
+     *
+     * export type ListSection = {
+     *   id: string;
+     *   title?: string;
+     *   type: "section";
+     *   children: ListOption[];
+     * };
+     *
+     * type ListItem = ListOption | ListSection;
+     * ```
+     */
+    items: ListItem[];
+    /**
+     * Specify which interaction should trigger the dropdown to open
+     *
+     * @default input
+     */
+    menuTrigger?: "manual" | "input" | "focus";
+    /** Custom filter function to use when filtering items. */
+    filter?: ComboBoxStateOptions<ListItem>["defaultFilter"];
+}
+
+declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * A hook that creates an IntersectionObserver and observes a target element.
  *
@@ -2089,19 +2283,6 @@ interface ResizeObserverOptions {
  *    alt: "Placeholder image",
  *   });
  *   ```;
- *
- * @param {Object} options - The options object.
- * @param {string} options.src - The image source URL.
- * @param {string} options.alt - The image alt text.
- * @returns {Object} An object containing the image loading state and props.
- * @returns {boolean} IsLoaded - Whether the image has loaded.
- * @returns {boolean} HasError - Whether there was an error loading the image.
- * @returns {boolean} IsLoading - Whether the image is currently loading.
- * @returns {Object} ImgProps - The image props to be passed to the `img`
- *   element.
- * @returns {string} ImgProps.src - The image source URL, or `undefined` if the
- *   image hasn't loaded yet.
- * @returns {string} ImgProps.alt - The image alt text.
  */
 declare function useImage({ src, alt }: {
     src?: string;
@@ -2325,7 +2506,7 @@ interface TextSelectionProps {
  * @param element - The element to use to get the owner window. Defaults to
  *   `document.body`.
  */
-declare function useDevice(element?: Element | null | undefined): "tablet" | "desktop" | "mobile";
+declare function useDevice(element?: Element | null | undefined): "desktop" | "tablet" | "mobile";
 
 /**
  * Custom hook for accessing PortalContainerProviderContext. This hook allows
@@ -2339,4 +2520,11 @@ declare function useDevice(element?: Element | null | undefined): "tablet" | "de
  */
 declare function usePortalContainer(_portalContainer?: HTMLElement): HTMLElement | undefined;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorHandle, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, PortalContainerProvider, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, Transition, type TransitionProps, defineMessages, isInsideOverlayContent, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, usePortalContainer, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };
+interface DynamicListOptions<T> extends ListOptions<T> {
+    onListChange?: (items: T[]) => void;
+    onSelectionChange?: (selectedKeys: Selection$1) => void;
+    getKey?: (item: T) => Key$1;
+}
+declare function useDynamicListData<T>(options: DynamicListOptions<T>): ListData<T>;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorPresetInlineInput, type ColorPresetInlineInputProps, ColorSwatch, type ColorSwatchProps, ComboBox, type ComboBoxProps, DateFormat, type DateFormatProps, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorHandle, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInputButton, ImageDropZone, type ImageDropZoneProps, ImageGallery, type ImageGalleryProps, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListOption, Markdown, type MarkdownProps, Menu, type MenuItem, type MenuProps, type MessageDescriptor, MessageFormat, type MessageFormatProps, Modal, ModalClose, ModalContent, type ModalContentProps, type ModalProps, ModalTrigger, NumberFormat, type NumberFormatProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, PortalContainerProvider, type PortalProps, Preview, type PreviewProps, ProgressBar, type ProgressBarProps, ProgressSpinner, type ProgressSpinnerProps, RadioGroup, type RadioGroupProps, Reaction, type ReactionProps, ScrollControlButton, type ScrollControlButtonProps, SearchInput, type SearchInputProps, Select, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type StylingProps, Switch, type SwitchProps, TabItem, type TabItemProps, Tabs, type TabsProps, TagGroup, type TagGroupProps, Text, TextInput, type TextInputProps, type TextProps, ThemeProvider, type ThemeProviderProps, ToggleButton, type ToggleButtonProps, ToggleIconButton, type ToggleIconButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Transform, type TransformProps, Transition, type TransitionProps, defineMessages, isInsideOverlayContent, useDevice, useDynamicListData, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, usePortalContainer, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };