@baseline-ui/core 0.32.0 → 0.33.1

package/dist/index.d.ts

@@ -4,9 +4,9 @@ import { IconProps, SVGRProps } from '@baseline-ui/icons';
 import * as react_stately from 'react-stately';
 import { DraggableCollectionStateOptions, DroppableCollectionStateOptions, Orientation, ListState, OverlayTriggerProps, OverlayTriggerState, TooltipTriggerProps, SliderStateOptions, ToggleProps, MenuTriggerProps, NumberFieldStateOptions, ListProps, SelectStateOptions, Item as Item$2, Selection as Selection$1, ComboBoxStateOptions, Node as Node$2, TreeProps } from 'react-stately';
 import * as react_aria from 'react-aria';
-import { DraggableCollectionOptions, DroppableCollectionOptions, AriaListBoxProps, AriaListBoxOptions, OptionAria, AriaButtonProps, AriaPopoverProps, useOverlayTrigger, AriaTooltipProps, AriaPositionProps, AriaSliderProps, AriaSwitchProps, AriaSearchFieldProps, AriaMenuProps, AriaMenuTriggerProps, AriaLinkOptions, SeparatorProps as SeparatorProps$1, AriaProgressBarProps, AriaTextFieldProps, OverlayProps, AriaToggleButtonProps, AriaCheckboxProps, AriaNumberFieldProps, I18nProviderProps as I18nProviderProps$1, LocalizedStrings, useNumberFormatter, useDateFormatter, AriaTagGroupProps, AriaSelectOptions, Key as Key$1, AriaDialogProps, DropOptions, ClipboardProps, PressProps, AriaRadioGroupProps, AriaModalOverlayProps, AriaComboBoxOptions, AriaComboBoxProps, AriaGridListOptions, GridListItemAria, Locale } from 'react-aria';
+import { DraggableCollectionOptions, DroppableCollectionOptions, AriaListBoxProps, AriaListBoxOptions, OptionAria, AriaButtonProps, AriaPopoverProps, useOverlayTrigger, AriaTooltipProps, AriaPositionProps, FocusableOptions, AriaSliderProps, AriaSwitchProps, AriaSearchFieldProps, AriaMenuProps, AriaMenuTriggerProps, AriaLinkOptions, SeparatorProps as SeparatorProps$1, AriaProgressBarProps, AriaTextFieldProps, OverlayProps, AriaToggleButtonProps, AriaCheckboxProps, AriaNumberFieldProps, I18nProviderProps as I18nProviderProps$1, LocalizedStrings, useNumberFormatter, useDateFormatter, AriaTagGroupProps, AriaSelectOptions, Key as Key$1, AriaDialogProps, DropOptions, ClipboardProps, PressProps, AriaRadioGroupProps, AriaModalOverlayProps, AriaComboBoxOptions, AriaComboBoxProps, AriaGridListOptions, GridListItemAria, Locale } from 'react-aria';
 export { I18nProviderProps, useCollator, useDateFormatter, useNumberFormatter } from 'react-aria';
-import { Node as Node$1, DragItem, DOMAttributes, AriaLabelingProps, AriaValidationProps, DOMProps } from '@react-types/shared';
+import { Node as Node$1, DragItem, FocusableElement, DOMAttributes, AriaLabelingProps, AriaValidationProps, DOMProps } from '@react-types/shared';
 import { PressHookProps, KeyboardProps } from '@react-aria/interactions';
 import { Theme, Sprinkles } from '@baseline-ui/tokens';
 import { AriaTabListProps } from '@react-types/tabs';
@@ -110,6 +110,13 @@ interface ListHandle {
     /** Imperatively focuses the specified key */
     setFocusedKey: (key: string) => void;
 }
+interface UIState {
+    isFocusVisible: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isPressed: boolean;
+}
 interface ListBoxProps extends StylingProps, Omit<AriaListBoxProps<ListItem> & AriaListBoxOptions<ListItem>, "children" | "linkBehavior" | "isVirtualized" | "keyboardDelegate" | "items">, Omit<DragAndDropProps, "preview" | "enableReorder" | "orientation" | "layout">, Partial<Pick<DragAndDropProps, "enableReorder" | "orientation" | "layout">> {
     /**
      * The items to render in the listbox. Items have the following shape:
@@ -172,11 +179,11 @@ interface ListBoxProps extends StylingProps, Omit<AriaListBoxProps<ListItem> & A
     /** The style of the drop indicator used in a component. */
     dropIndicatorStyle?: React__default.CSSProperties;
     /** The CSS class name for the option. */
-    optionClassName?: string | ((item: ListOption) => string | undefined);
+    optionClassName?: string | ((item: ListOption, state: UIState) => string | undefined);
     /** The CSS class name for the section. */
     sectionClassName?: string | ((item: ListSection) => string | undefined);
     /** The style of the option. */
-    optionStyle?: React__default.CSSProperties | ((item: ListOption) => React__default.CSSProperties | undefined);
+    optionStyle?: React__default.CSSProperties | ((item: ListOption, state: UIState) => React__default.CSSProperties | undefined);
     /** The style of the section. */
     sectionStyle?: React__default.CSSProperties | ((item: ListSection) => React__default.CSSProperties | undefined);
     /**
@@ -356,9 +363,21 @@ interface TooltipProps extends StylingProps, TooltipTriggerProps, AriaTooltipPro
      */
     portalContainer?: HTMLElement;
 }
+interface FocusableProps extends FocusableOptions, StylingProps {
+    /** The content of the focusable element. */
+    children: React__default.ReactNode;
+    /**
+     * The element type to render.
+     *
+     * @default "div"
+     */
+    elementType?: keyof React__default.ReactHTML;
+}
 
 declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const Focusable: React__default.ForwardRefExoticComponent<FocusableProps & React__default.RefAttributes<FocusableElement>>;
+
 interface IconComponentProps {
     /** The icon to show at the start of the color input. */
     icon?: React__default.FC<IconProps>;
@@ -733,6 +752,8 @@ interface ActionIconButtonProps extends ActionButtonSharedProps {
      * @default false
      */
     tooltip?: boolean | Partial<Omit<TooltipProps, "children">>;
+    /** The drag props to use for drag and drop interactions. */
+    dragProps?: React__default.HTMLAttributes<HTMLElement>;
 }
 
 declare const ActionIconButton: React__default.ForwardRefExoticComponent<ActionIconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
@@ -2200,6 +2221,7 @@ interface Item {
     src?: string;
     alt?: string;
 }
+declare type ClassName = string | ((item: Item, state: UIState) => string | undefined);
 declare type Dimension = {
     width: number | "sm" | "md";
     height: number;
@@ -2277,11 +2299,11 @@ interface ImageGalleryProps extends StylingProps, Omit<ListBoxProps, "items" | "
     /** A callback that is called when a key is pressed. */
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
     /** ClassName for each item container */
-    imageContainerClassName?: string;
+    imageContainerClassName?: ClassName;
     /** ClassName for each item image */
-    imageClassName?: string;
+    imageClassName?: ClassName;
     /** ClassName for each item image label */
-    labelClassName?: string;
+    labelClassName?: ClassName;
     /** A callback that is called to render the image. */
     renderImage?: (item: ListOption<Pick<Item, "alt" | "src">>, options: {
         deleteElement?: React__default.ReactElement;
@@ -2424,6 +2446,11 @@ interface ComboBoxProps extends StylingProps, Omit<AriaComboBoxOptions<ListItem>
     maxValue?: number;
     /** Listener to call when the input value is submitted */
     onInputSubmit?: (value: string) => void;
+    /** Listener to call when the selected value changes */
+    onValueChange?: (option: {
+        value?: string;
+        key?: string | null;
+    }) => void;
 }
 
 declare const ComboBox: React__default.ForwardRefExoticComponent<ComboBoxProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -2443,11 +2470,18 @@ interface ColorSwatchProps extends Omit<AriaColorSwatchProps, "colorName">, Styl
      * disabled styles.
      */
     isDisabled?: boolean;
+    /**
+     * Whether to show a tooltip. You can pass a boolean or a partial tooltip
+     * object that extends the default tooltip props.
+     *
+     * @default false
+     */
+    tooltip?: boolean | Partial<Omit<TooltipProps, "children">>;
 }
 
 declare const ColorSwatch: React__default.ForwardRefExoticComponent<ColorSwatchProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare type GridListProps = Omit<StylingProps & ListProps<ListOption> & AriaGridListOptions<ListOption> & {
+declare type GridListProps = Omit<StylingProps & ListProps<ListOption> & AriaGridListOptions<ListOption> & Partial<Pick<DragAndDropProps, "enableReorder" | "orientation" | "layout" | "onReorder">> & {
     /**
      * The items to render in the grid list. Items have the following shape:
      *
@@ -2493,12 +2527,24 @@ declare type GridListProps = Omit<StylingProps & ListProps<ListOption> & AriaGri
      * />;
      * ```
      *
+     * The `dragHandleProps` property in the options object is used to pass
+     * props to the drag handle rendered in the grid item. This property is
+     * `undefined` when the grid list is not reorderable.
+     *
+     * DragProps: Props to apply to the drag handle element. dragButtonProps:
+     * Props to apply to the custom drag button element in case the drag
+     * handle is a button and not the whole row.
+     *
      * @param item
      * @param options
      * @param ref
      */
     renderGridItem: (item: Node$1<ListOption>, options: GridListItemAria & {
         checkBoxProps?: CheckboxProps;
+        dragHandleProps?: {
+            dragProps: React__default.HTMLAttributes<HTMLElement>;
+            dragButtonProps: AriaButtonProps;
+        };
     }, ref: React__default.Ref<HTMLLIElement>) => React__default.ReactElement;
     /**
      * Enables editing mode which disables keydown event capturing, useful
@@ -2556,7 +2602,7 @@ interface ActionGroupItemProps extends Pick<ActionGroupProps, "tooltipProps" | "
     state: ListState<ListItem>;
 }
 
-interface ColorSwatchPickerProps extends StylingProps, Pick<RadioGroupProps, "optionsContainerClassName" | "labelPosition">, Pick<ListBoxProps, "optionClassName" | "optionStyle">, AriaLabelingProps {
+interface ColorSwatchPickerProps extends StylingProps, Pick<RadioGroupProps, "optionsContainerClassName" | "labelPosition">, Pick<ListBoxProps, "optionClassName" | "optionStyle" | "shouldFocusWrap">, AriaLabelingProps {
     /**
      * The items to display in the picker. Each item should have a `color` and a
      * `label`.
@@ -3105,4 +3151,4 @@ declare type Device = ReturnType<typeof useDevice>;
  */
 declare function usePortalContainer(_portalContainer?: HTMLElement): HTMLElement | undefined;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionGroup, ActionGroupItem, type ActionGroupProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, ButtonSelect, type ButtonSelectProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, DateFormat, type DateFormatProps, type Device, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorHandle, type EditorProps, FileUpload, type FileUploadProps, FreehandCanvas, type FreehandCanvasProps, GridList, type GridListProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInput, IconColorInputButton, type IconColorInputProps, IconSelect, type IconSelectProps, IconSlider, type IconSliderProps, ImageDropZone, type ImageDropZoneProps, ImageGallery, type ImageGalleryProps, type ImperativePanelGroupHandle, type ImperativePanelHandle, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListHandle, 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, Panel, PanelGroup, type PanelGroupProps, type PanelProps, PanelResizeHandle, type PanelResizeHandleProps, 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, type ReactComplexTreeItem, Reaction, type ReactionProps, type Rect, 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, TreeView, type TreeViewProps, defineMessages, isInsideOverlayContent, isRect, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, usePortalContainer, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionButton, type ActionButtonProps, ActionGroup, ActionGroupItem, type ActionGroupProps, ActionIconButton, type ActionIconButtonProps, AlertDialog, type AlertDialogProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BlockProps, Box, type BoxProps, ButtonSelect, type ButtonSelectProps, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, type ColorPreset, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, DateFormat, type DateFormatProps, type Device, Dialog, type DialogProps, DialogTitle, type DialogTitleProps, DomNodeRenderer, type DomNodeRendererProps, Drawer, type DrawerProps, Editor, type EditorHandle, type EditorProps, FileUpload, type FileUploadProps, Focusable, type FocusableProps, FreehandCanvas, type FreehandCanvasProps, GridList, type GridListProps, Group, type GroupProps, I18nProvider, type I18nResult, IconColorInput, IconColorInputButton, type IconColorInputProps, IconSelect, type IconSelectProps, IconSlider, type IconSliderProps, ImageDropZone, type ImageDropZoneProps, ImageGallery, type ImageGalleryProps, type ImperativePanelGroupHandle, type ImperativePanelHandle, InlineAlert, type InlineAlertProps, Link, type LinkProps, ListBox, type ListBoxProps, type ListHandle, 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, Panel, PanelGroup, type PanelGroupProps, type PanelProps, PanelResizeHandle, type PanelResizeHandleProps, 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, type ReactComplexTreeItem, Reaction, type ReactionProps, type Rect, 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, TreeView, type TreeViewProps, defineMessages, isInsideOverlayContent, isRect, useDevice, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, usePortalContainer, useResizeObserver, useTextSelection, useUndoRedo, useUserPreferences };