@baseline-ui/core 0.39.0 → 0.40.0

package/dist/index.d.ts

@@ -5,14 +5,14 @@ import * as react_aria from 'react-aria';
 import { 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, AriaTimeFieldProps, TimeValue, AriaDateFieldProps, DateValue, FocusProps, KeyboardProps as KeyboardProps$1, PressEvent, Locale } from 'react-aria';
 export { I18nProviderProps, useCollator, useDateFormatter, useNumberFormatter } from 'react-aria';
 import { DraggableCollectionStateOptions, DroppableCollectionStateOptions, Orientation, ListState, OverlayTriggerState, OverlayTriggerProps, TooltipTriggerProps, SliderStateOptions, ToggleProps, MenuTriggerProps, NumberFieldStateOptions, ListProps, SelectStateOptions, Item as Item$2, Selection as Selection$1, ComboBoxStateOptions, Node as Node$2, TimeFieldStateOptions, TreeProps, DateFieldStateOptions } from 'react-stately';
-import { Node as Node$1, DragItem, FocusableElement, DOMAttributes, AriaLabelingProps, AriaValidationProps, DOMProps } from '@react-types/shared';
+import { Node as Node$1, DragItem, DOMAttributes, FocusableElement, DOMProps, AriaLabelingProps, AriaValidationProps } from '@react-types/shared';
 import { PressHookProps, KeyboardProps } from '@react-aria/interactions';
 import { AriaTabListProps } from '@react-types/tabs';
+import { AriaColorSwatchProps } from '@react-aria/color';
 import { ColorFieldProps, Color } from '@react-stately/color';
 import { OnRender, OnRenderStart, OnDragStart, OnDrag, OnDragEnd, OnResizeStart, OnResize, OnResizeEnd, OnRotateStart, OnRotate, OnRotateEnd, OnSnap, RotationPosition } from 'react-moveable';
 import { Theme, Sprinkles } from '@baseline-ui/tokens';
 import { AriaToolbarProps } from '@react-aria/toolbar';
-import { AriaColorSwatchProps } from '@react-aria/color';
 import { AriaActionGroupProps } from '@react-aria/actiongroup';
 import { TreeItem } from 'react-complex-tree';
 import { PanelProps as PanelProps$1, ImperativePanelHandle as ImperativePanelHandle$1, PanelGroupProps as PanelGroupProps$1, ImperativePanelGroupHandle as ImperativePanelGroupHandle$1, PanelResizeHandleProps as PanelResizeHandleProps$1 } from 'react-resizable-panels';
@@ -337,7 +337,10 @@ interface TooltipProps extends StylingProps, TooltipTriggerProps, AriaTooltipPro
     /** The content of the tooltip. */
     text?: string;
     /** The tooltip trigger element. */
-    children: React__default.ReactNode;
+    children: React__default.ReactNode | ((props: {
+        triggerProps: DOMAttributes;
+        triggerRef: React__default.RefObject<HTMLElement>;
+    }) => React__default.ReactNode);
     /**
      * The delay time for the tooltip to show up.
      *
@@ -391,13 +394,53 @@ declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & R
 
 declare const Focusable: React__default.ForwardRefExoticComponent<FocusableProps & React__default.RefAttributes<FocusableElement>>;
 
+interface ActionIconButtonProps extends ActionButtonSharedProps {
+    /** The icon to display */
+    icon: React__default.FC<IconProps>;
+    /**
+     * The size of the icon button.
+     *
+     * @default "md"
+     */
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    /**
+     * The variant of the icon button.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "toolbar" | "popover";
+    /** Indicates whether focusing should be prevented on press. */
+    preventFocusOnPress?: 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">>;
+    /** 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>>;
+
 interface IconComponentProps {
     /** The icon to show at the start of the color input. */
     icon?: React__default.FC<IconProps>;
     /** The aria label for the color input button. */
     "aria-label": string;
-    /** Props to pass to the tooltip component. */
-    tooltipProps?: Omit<TooltipProps, "variant" | "size" | "includeArrow" | "children">;
+    /**
+     * Whether to show the tooltip on the main element.
+     *
+     * @default true
+     */
+    tooltip?: ActionIconButtonProps["tooltip"];
+    /**
+     * Whether to show the tooltip on the icon.
+     *
+     * @default true
+     */
+    iconTooltip?: ActionIconButtonProps["tooltip"];
 }
 
 interface SliderProps extends Omit<AriaSliderProps<number> & SliderStateOptions<number>, "orientation" | "numberFormatter">, StylingProps {
@@ -769,36 +812,6 @@ interface ProgressSpinnerProps extends Omit<AriaProgressBarProps, "value" | "isI
 
 declare const ProgressSpinner: React__default.ForwardRefExoticComponent<ProgressSpinnerProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface ActionIconButtonProps extends ActionButtonSharedProps {
-    /** The icon to display */
-    icon: React__default.FC<IconProps>;
-    /**
-     * The size of the icon button.
-     *
-     * @default "md"
-     */
-    size?: "xxs" | "xs" | "sm" | "md" | "lg";
-    /**
-     * The variant of the icon button.
-     *
-     * @default "primary"
-     */
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "toolbar" | "popover";
-    /** Indicates whether focusing should be prevented on press. */
-    preventFocusOnPress?: 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">>;
-    /** 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>>;
-
 interface ToggleButtonProps extends Omit<StylingProps, "style" | "className">, Omit<AriaToggleButtonProps, "children">, StylingWithUIState<{
     isSelected?: boolean;
 }> {
@@ -1261,11 +1274,51 @@ declare const Dialog: React__default.ForwardRefExoticComponent<DialogProps & Rea
 
 declare const DialogTitle: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface ColorSwatchProps extends Omit<AriaColorSwatchProps, "colorName">, StylingProps, DOMProps, AriaLabelingProps {
+    /** Whether the swatch is focused by keyboard. */
+    isFocusVisible?: boolean;
+    /** Whether the swatch is selected. */
+    isSelected?: boolean;
+    /**
+     * Whether the swatch is interactive. This is used to determine whether to
+     * show hover styles.
+     */
+    isInteractive?: boolean;
+    /**
+     * Whether the swatch is disabled. This is used to determine whether to show
+     * 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">>;
+    /**
+     * Whether the swatch is indeterminate. When this is `true`, the color related
+     * props will be ignored.
+     *
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * The icon to display when the swatch is indeterminate. The icon should be a
+     * 16x16px icon to ensure consistency with the design system.
+     *
+     * @default HelpIcon
+     */
+    indeterminateIcon?: React__default.FC<IconProps> | null;
+}
+
+declare const ColorSwatch: React__default.ForwardRefExoticComponent<ColorSwatchProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface ColorPreset {
     label: string;
     color: string;
 }
-interface ColorInputProps extends OverlayTriggerProps, StylingProps, Pick<ColorFieldProps, "onChange" | "defaultValue" | "value" | "label" | "isDisabled">, Pick<AriaLabelingProps, "aria-label">, Pick<PopoverContentProps, "isNonModal" | "placement" | "shouldUpdatePosition" | "shouldFlip" | "boundaryElement" | "crossOffset" | "offset" | "portalContainer"> {
+interface ColorInputProps extends OverlayTriggerProps, StylingProps, Pick<ColorFieldProps, "onChange" | "defaultValue" | "value" | "label" | "isDisabled">, Pick<AriaLabelingProps, "aria-label">, Pick<PopoverContentProps, "isNonModal" | "placement" | "shouldUpdatePosition" | "shouldFlip" | "boundaryElement" | "crossOffset" | "offset" | "portalContainer">, Pick<ColorSwatchProps, "isIndeterminate" | "indeterminateIcon"> {
     /**
      * The list of color presets to show in the color picker. The signature of the
      * color presets is:
@@ -1298,7 +1351,9 @@ interface ColorInputProps extends OverlayTriggerProps, StylingProps, Pick<ColorF
      *
      * @default true
      */
-    colorLabel?: boolean | ((color: Color | null) => string);
+    colorLabel?: boolean | ((color: Color | null, options: {
+        isIndeterminate: boolean;
+    }) => string);
     /**
      * Whether to allow alpha values in the custom color picker.
      *
@@ -1360,13 +1415,19 @@ interface ColorInputProps extends OverlayTriggerProps, StylingProps, Pick<ColorF
         colorName?: string | boolean;
         triggerProps: AriaButtonProps<"button">;
         labelId?: string;
-    }) => React__default.ReactElement;
+    } & Pick<ColorSwatchProps, "isIndeterminate" | "indeterminateIcon">) => React__default.ReactElement;
     /**
      * Handler that is called when the user stops dragging or clicking on the
      * color picker. In case of presets, this is called when the user clicks on a
      * color preset.
      */
     onChangeEnd?: (color: Color | null) => void;
+    /**
+     * Whether the color input is indeterminate.
+     *
+     * @default false
+     */
+    isIndeterminate?: boolean;
 }
 interface IconColorInputProps extends StylingProps, Omit<ColorInputProps, "renderTriggerButton" | "colorLabel" | "label" | "labelPosition" | "aria-label">, IconComponentProps {
     /**
@@ -1383,12 +1444,13 @@ declare const IconColorInputButton: React__default.ForwardRefExoticComponent<Omi
     icon: React__default.FC<IconProps>;
     color?: string | null;
 } & React__default.RefAttributes<HTMLButtonElement>>;
-interface ColorInputButtonProps extends Omit<ActionButtonProps, "label" | "className" | "style">, StylingProps, Pick<ColorInputProps, "colorLabel"> {
+interface ColorInputButtonProps extends Omit<ActionButtonProps, "label" | "className" | "style">, StylingProps, Pick<ColorInputProps, "colorLabel">, Pick<ColorSwatchProps, "isIndeterminate" | "indeterminateIcon"> {
     isOpen: boolean;
     "aria-label"?: string;
     labelPosition?: "top" | "start";
     color: Color | null;
     colorName?: string | boolean;
+    isIndeterminate?: boolean;
 }
 
 declare const IconColorInput: React__default.ForwardRefExoticComponent<IconColorInputProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -1826,6 +1888,16 @@ interface ModalContentProps extends Omit<AriaModalOverlayProps, "isDismissable"
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * Whether the modal should be rendered with the initial animation. If set to
+     * false, the modal will be rendered without the initial animation on mount.
+     * This doesn't affect the animation when the modal is is being opened or
+     * closed after it has been mounted. This prop is ignored if
+     * `disableAnimation` is set to `true`.
+     *
+     * @default true
+     */
+    shouldAnimateOnMount?: boolean;
     /**
      * Whether the modal should be rendered as a drawer. This will render the
      * modal with a transparent background and no border at the bottom. The `auto`
@@ -2352,6 +2424,7 @@ interface ImageGalleryProps extends StylingProps, Omit<ListBoxProps, "items" | "
 
 declare const ImageGallery: React__default.ForwardRefExoticComponent<ImageGalleryProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type ButtonBehaviour = "toggle" | "action";
 interface ButtonSelectProps extends StylingProps, Pick<SelectProps, "isDisabled" | "validationState" | "onSelectionChange" | "selectedKey" | "defaultSelectedKey" | "items" | "showSelectedIcon" | "isOpen" | "defaultOpen" | "triggerClassName" | "triggerStyle">, Pick<ToggleButtonProps, "onPress" | "isSelected" | "defaultSelected" | "excludeFromTabOrder">, AriaLabelingProps {
     /**
      * The size of the button.
@@ -2384,11 +2457,17 @@ interface ButtonSelectProps extends StylingProps, Pick<SelectProps, "isDisabled"
     }) => React__default.CSSProperties);
     /** Props for the tooltip. */
     tooltipProps?: Omit<TooltipProps, "children"> | ((trigger: "button" | "select") => Omit<TooltipProps, "children">);
+    /**
+     * The behaviour of the button select.
+     *
+     * @default "toggle"
+     */
+    buttonBehaviour?: ButtonBehaviour | ((activeKey: string) => ButtonBehaviour);
 }
 
 declare const ButtonSelect: React__default.ForwardRefExoticComponent<ButtonSelectProps & React__default.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" | "dropIndicatorClassName" | "dropIndicatorStyle" | keyof DragAndDropProps>, AriaValidationProps, Omit<ComboBoxStateOptions<ListItem>, "items" | "children" | "errorMessage" | "description" | "validationState" | "selectedKey">, InputMessage {
+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" | "dropIndicatorClassName" | "dropIndicatorStyle" | keyof DragAndDropProps>, AriaValidationProps, Omit<ComboBoxStateOptions<ListItem>, "items" | "children" | "errorMessage" | "description" | "validationState" | "selectedKey">, InputMessage, Pick<ActionIconButtonProps, "tooltip"> {
     /** ID of the initially selected item */
     defaultSelectedKey?: string;
     /**
@@ -2488,32 +2567,6 @@ interface ComboBoxProps extends StylingProps, Omit<AriaComboBoxOptions<ListItem>
 
 declare const ComboBox: React__default.ForwardRefExoticComponent<ComboBoxProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface ColorSwatchProps extends Omit<AriaColorSwatchProps, "colorName">, StylingProps, DOMProps, AriaLabelingProps {
-    /** Whether the swatch is focused by keyboard. */
-    isFocusVisible?: boolean;
-    /** Whether the swatch is selected. */
-    isSelected?: boolean;
-    /**
-     * Whether the swatch is interactive. This is used to determine whether to
-     * show hover styles.
-     */
-    isInteractive?: boolean;
-    /**
-     * Whether the swatch is disabled. This is used to determine whether to show
-     * 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>>;
-
 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:
@@ -2593,6 +2646,7 @@ type GridListProps = Omit<StylingProps & ListProps<ListOption> & AriaGridListOpt
 
 declare const GridList: React__default.ForwardRefExoticComponent<GridListProps & React__default.RefAttributes<HTMLUListElement>>;
 
+type ActionTooltipProps = Omit<TooltipProps, "variant" | "size" | "includeArrow" | "children">;
 interface ActionGroupProps extends StylingProps, Omit<AriaActionGroupProps<ListItem>, "children"> {
     /** The items to display in the action group. */
     items: ListItem[];
@@ -2602,7 +2656,7 @@ interface ActionGroupProps extends StylingProps, Omit<AriaActionGroupProps<ListI
      */
     selectionMode?: "single" | "multiple";
     /** The props to be passed to the tooltip component. */
-    tooltipProps?: IconComponentProps["tooltipProps"] | ((item: ListItem) => IconComponentProps["tooltipProps"]);
+    tooltipProps?: ActionTooltipProps | ((item: ListItem) => ActionTooltipProps);
     /**
      * A function that renders an action item. This function is called for each
      * item in the action group. By default, an `ActionIconButton` is rendered.