@baseline-ui/core 0.20.1 → 0.22.0

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$1, Selection as Selection$1, ComboBoxStateOptions } 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 } 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';
@@ -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;
 }
@@ -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>>;
@@ -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>>;
@@ -1829,8 +1885,14 @@ interface EditorProps extends StylingProps, AriaLabelingProps {
      * @default 10
      */
     maxMentionableUsersSuggestions?: number;
-    /** Footer button represents an array of ActionIconButtonProps. */
-    footerButtons?: ActionIconButtonProps[];
+    /** Footer button represents the buttons that are displayed in the footer. */
+    footerButtons?: ({
+        type: "action";
+        props: Omit<ActionIconButtonProps, "size" | "variant">;
+    } | {
+        type: "toggle";
+        props: Omit<ToggleIconButtonProps, "size" | "variant">;
+    })[];
     /** The imperative handle for manipulating editor. */
     editorHandle?: React.RefObject<EditorHandle>;
     /**
@@ -1851,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>>>;
@@ -1991,6 +2059,135 @@ interface AudioPlayerProps extends StylingProps, AriaLabelingProps {
 
 declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<HTMLDivElement>>;
 
+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: {
+        id: string;
+        src: string;
+        alt?: string;
+        label: string;
+    }[];
+    /**
+     * 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 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.
  *
@@ -2083,19 +2280,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;
@@ -2333,4 +2517,4 @@ 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 };
+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, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, usePortalContainer, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };