@baseline-ui/core 0.39.1 → 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, DOMAttributes, FocusableElement, 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';
@@ -394,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 {
@@ -772,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;
 }> {
@@ -1264,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:
@@ -1301,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.
      *
@@ -1363,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 {
     /**
@@ -1386,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>>;
@@ -2365,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.
@@ -2402,7 +2462,7 @@ interface ButtonSelectProps extends StylingProps, Pick<SelectProps, "isDisabled"
      *
      * @default "toggle"
      */
-    buttonBehaviour?: "toggle" | "action";
+    buttonBehaviour?: ButtonBehaviour | ((activeKey: string) => ButtonBehaviour);
 }
 
 declare const ButtonSelect: React__default.ForwardRefExoticComponent<ButtonSelectProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -2507,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:
@@ -2612,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[];
@@ -2621,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.