@box/blueprint-web 8.5.3 → 8.7.0

package/lib-esm/combobox/types.d.ts

@@ -1,241 +1,240 @@
-/// <reference types="react" />
-import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
-import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
-import { type TextAreaProps } from '../text-area/types';
-import { type Labelable } from '../util-components/labelable/types';
-export type OptionValue = {
-    value: string;
-    disabled?: boolean;
-} | string;
-export type SingleSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string : T;
-export type MultiSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string[] : T[];
-export type ComboboxValue<Multiple, FreeInput, T> = Multiple extends true ? MultiSelectComboboxValue<FreeInput, T> : SingleSelectComboboxValue<FreeInput, T>;
-export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> extends Labelable {
-    /**
-     * The list of values for the combobox items.
-     */
-    options: T[];
-    /**
-     * If set to `true`, the combobox input can contain any arbitrary value.
-     * In other words, options just behave as suggestions and the user input
-     * is not bound to the provided options.
-     */
-    freeInput?: FreeInput;
-    /**
-     * The placeholder of the combobox input.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the menu will support multiple selections.
-     *
-     * @default false
-     */
-    multiselect?: Multiple;
-    /**
-     * The `open` state of the combobox content when it is initially rendered. Use when you do not need to control its `open` state.
-     *
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * The controlled `open` state of the combobox content. Must be used in conjunction with `onOpenChange`.
-     *
-     * @default false
-     */
-    open?: boolean;
-    /**
-     * Event handler called when the `open` state of the combobox changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The input value when initially rendered.
-     */
-    defaultInputValue?: string;
-    /**
-     * The input value of the combobox. Should be used in conjunction with `onInputValueChange`.
-     */
-    inputValue?: string;
-    /**
-     * Event handler called when the input value change.
-     */
-    onInputValueChange?: (value: string) => void;
-    /**
-     * The selected value(s) when initially rendered.
-     */
-    defaultValue?: ComboboxValue<Multiple, FreeInput, T>;
-    /**
-     * The controlled value(s) of the combobox. Should be used in conjunction with `onValueChange`.
-     */
-    value?: ComboboxValue<Multiple, FreeInput, T>;
-    /**
-     * Event handler called when the selected value(s) change.
-     */
-    onValueChange?: (value: ComboboxValue<Multiple, FreeInput, T>) => void;
-    /**
-     * The string representation of your `value`.
-     *
-     * It is used to fill the options in the dropdown menu and either:
-     *  - the input value on select option (single-select combobox), or
-     *  - the chip labels on select options (multi-select combobox)
-     */
-    displayValue?: (value: T) => string;
-    /**
-     * Return a JSX representations of an avatar used for InputChip when multiselect is selected.
-     * If not provided `displayValue()` is used to render select option item with a checkmark.
-     */
-    displayAvatar?: (option: T) => React.ReactElement | undefined;
-    /**
-     * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
-     */
-    displayTooltip?: (option: T) => string;
-    /**
-     * Return a JSX representations of an option displayed in Combobox dropdown
-     * If not provided `displayValue()` is used to render select option item with a checkmark.
-     *
-     * **Note:** Returned JSX should be wrapped with <Combobox.Option> element.
-     */
-    renderOption?: (option: T) => React.ReactElement;
-    /**
-     * Use this prop to filter options in the combobox based on the user's input.
-     *
-     * It should return `true` if the `value` should be displayed as an option in the combobox for the given `query`, and `false` otherwise.
-     *
-     * If left `undefined`, all options will be shown.
-     */
-    filterFn?: (query: string, value: T) => boolean;
-    /**
-     * If `true`, prevent showing selected options in options array. As a general guideline, this is
-     * used when the options list is dynamic and non-finite (ie connected via API with dynamic results).
-     * This should primarily be used with the multiselect option.
-     *
-     * @default false
-     */
-    hideSelectedOptions?: boolean;
-    /**
-     * Default message when there are no matches found.
-     */
-    noResultMessage?: React.ReactElement | string;
-    /**
-     * If `true`, the input's text is cleared on blur if no value is selected.
-     *
-     * @default !props.freeInput
-     */
-    clearOnBlur?: boolean;
-    /**
-     * If `true`, clear all values when the user presses escape and the dropdown menu is closed.
-     */
-    clearOnEscape?: boolean;
-    /**
-     * The name of the combobox. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * When `true`, prevents the user from interacting with combobox.
-     */
-    disabled?: boolean;
-    /**
-     * When `true`, indicates that the user must select a value before the owning form can be submitted.
-     */
-    required?: boolean;
-    /**
-     * When true a loading indicator is shown in the popover
-     */
-    loading?: boolean;
-    /**
-     * The aria-label for the loading indicator.
-     */
-    loadingAriaLabel?: string;
-    /**
-     * Extend the styles applied to the component.
-     */
-    className?: string;
-    /**
-     * When `true`, label text is hidden.
-     *
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * The content of the error message
-     */
-    error?: React.ReactNode;
-    /**
-     * The DOM element where the Combobox should be portal-ed into. If not provided, the Combobox will be appended to the document body.
-     */
-    portalElement?: HTMLElement | (() => HTMLElement);
-    /**
-     * When set to `true`, the content element will be unmounted and removed from the DOM when it's hidden.
-     */
-    unmountOnHide?: boolean;
-    /**
-     * When set to `true`, list is virtualized using experimental feature of underlying lib.
-     * @default false
-     */
-    experimentalVirtualization?: boolean;
-    /**
-     * Callback ref when popover is mounted or unmounted
-     */
-    getPopoverRef?: (node: HTMLDivElement | null) => void;
-    /**
-     * Determines how the focus behaves when the user reaches the end of the combobox. Can be useful to turn off when implementing infinite scrolling.
-     * @default true
-     */
-    focusLoop?: boolean;
-    /**
-     * Callback used when combobox input/textarea is focused
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /**
-     * Callback used when combobox input/textarea loses focus
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /**
-     * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
-     */
-    clearButtonAriaLabel?: string;
-    /**
-     * Instance of an icon to be rendered at the end of the combobox input. When used in combination with `clearButtonAriaLabel`,
-     * it disappears when the input is not empty
-     */
-    endComboboxIcon?: React.ReactNode;
-    /**
-     * `idForLabel` is used in the Combobox Group to define the id of the subcomponent associated with the Combobox Group label.
-     */
-    idForLabel?: string;
-}
-export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
-    as: 'textarea';
-};
-export type ConditionalComboboxProps = ComboboxTextArea | {
-    as: 'input';
-    'aria-describedby'?: string;
-};
-export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
-export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick' | 'onClick'> {
-    /**
-     * The content to render for the combobox option.
-     */
-    children: React.ReactNode;
-    /**
-     * The value of the combobox option.
-     */
-    value?: string;
-    /**
-     * When `true`, prevents the user from interacting with the combobox option.
-     */
-    disabled?: boolean;
-    /**
-     * Extend the styles applied to the component.
-     */
-    className?: string;
-}
-export interface CollectionProps<T> {
-    options: Array<T>;
-    experimentalVirtualization: boolean;
-    inputValue: string;
-    renderOptionFn: (option: T) => React.ReactElement;
-    noResultMessage?: React.ReactElement | string;
-    overscan: SelectRendererProps['overscan'];
-    showLoading?: boolean;
-    loadingAriaLabel: string;
-}
+import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
+import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
+import { type TextAreaProps } from '../text-area/types';
+import { type Labelable } from '../util-components/labelable/types';
+export type OptionValue = {
+    value: string;
+    disabled?: boolean;
+} | string;
+export type SingleSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string : T;
+export type MultiSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string[] : T[];
+export type ComboboxValue<Multiple, FreeInput, T> = Multiple extends true ? MultiSelectComboboxValue<FreeInput, T> : SingleSelectComboboxValue<FreeInput, T>;
+export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> extends Labelable {
+    /**
+     * The list of values for the combobox items.
+     */
+    options: T[];
+    /**
+     * If set to `true`, the combobox input can contain any arbitrary value.
+     * In other words, options just behave as suggestions and the user input
+     * is not bound to the provided options.
+     */
+    freeInput?: FreeInput;
+    /**
+     * The placeholder of the combobox input.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the menu will support multiple selections.
+     *
+     * @default false
+     */
+    multiselect?: Multiple;
+    /**
+     * The `open` state of the combobox content when it is initially rendered. Use when you do not need to control its `open` state.
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled `open` state of the combobox content. Must be used in conjunction with `onOpenChange`.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the `open` state of the combobox changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The input value when initially rendered.
+     */
+    defaultInputValue?: string;
+    /**
+     * The input value of the combobox. Should be used in conjunction with `onInputValueChange`.
+     */
+    inputValue?: string;
+    /**
+     * Event handler called when the input value change.
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * The selected value(s) when initially rendered.
+     */
+    defaultValue?: ComboboxValue<Multiple, FreeInput, T>;
+    /**
+     * The controlled value(s) of the combobox. Should be used in conjunction with `onValueChange`.
+     */
+    value?: ComboboxValue<Multiple, FreeInput, T>;
+    /**
+     * Event handler called when the selected value(s) change.
+     */
+    onValueChange?: (value: ComboboxValue<Multiple, FreeInput, T>) => void;
+    /**
+     * The string representation of your `value`.
+     *
+     * It is used to fill the options in the dropdown menu and either:
+     *  - the input value on select option (single-select combobox), or
+     *  - the chip labels on select options (multi-select combobox)
+     */
+    displayValue?: (value: T) => string;
+    /**
+     * Return a JSX representations of an avatar used for InputChip when multiselect is selected.
+     * If not provided `displayValue()` is used to render select option item with a checkmark.
+     */
+    displayAvatar?: (option: T) => React.ReactElement | undefined;
+    /**
+     * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
+     */
+    displayTooltip?: (option: T) => string;
+    /**
+     * Return a JSX representations of an option displayed in Combobox dropdown
+     * If not provided `displayValue()` is used to render select option item with a checkmark.
+     *
+     * **Note:** Returned JSX should be wrapped with <Combobox.Option> element.
+     */
+    renderOption?: (option: T) => React.ReactElement;
+    /**
+     * Use this prop to filter options in the combobox based on the user's input.
+     *
+     * It should return `true` if the `value` should be displayed as an option in the combobox for the given `query`, and `false` otherwise.
+     *
+     * If left `undefined`, all options will be shown.
+     */
+    filterFn?: (query: string, value: T) => boolean;
+    /**
+     * If `true`, prevent showing selected options in options array. As a general guideline, this is
+     * used when the options list is dynamic and non-finite (ie connected via API with dynamic results).
+     * This should primarily be used with the multiselect option.
+     *
+     * @default false
+     */
+    hideSelectedOptions?: boolean;
+    /**
+     * Default message when there are no matches found.
+     */
+    noResultMessage?: React.ReactElement | string;
+    /**
+     * If `true`, the input's text is cleared on blur if no value is selected.
+     *
+     * @default !props.freeInput
+     */
+    clearOnBlur?: boolean;
+    /**
+     * If `true`, clear all values when the user presses escape and the dropdown menu is closed.
+     */
+    clearOnEscape?: boolean;
+    /**
+     * The name of the combobox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * When `true`, prevents the user from interacting with combobox.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, indicates that the user must select a value before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * When true a loading indicator is shown in the popover
+     */
+    loading?: boolean;
+    /**
+     * The aria-label for the loading indicator.
+     */
+    loadingAriaLabel?: string;
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * When `true`, label text is hidden.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * The content of the error message
+     */
+    error?: React.ReactNode;
+    /**
+     * The DOM element where the Combobox should be portal-ed into. If not provided, the Combobox will be appended to the document body.
+     */
+    portalElement?: HTMLElement | (() => HTMLElement);
+    /**
+     * When set to `true`, the content element will be unmounted and removed from the DOM when it's hidden.
+     */
+    unmountOnHide?: boolean;
+    /**
+     * When set to `true`, list is virtualized using experimental feature of underlying lib.
+     * @default false
+     */
+    experimentalVirtualization?: boolean;
+    /**
+     * Callback ref when popover is mounted or unmounted
+     */
+    getPopoverRef?: (node: HTMLDivElement | null) => void;
+    /**
+     * Determines how the focus behaves when the user reaches the end of the combobox. Can be useful to turn off when implementing infinite scrolling.
+     * @default true
+     */
+    focusLoop?: boolean;
+    /**
+     * Callback used when combobox input/textarea is focused
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback used when combobox input/textarea loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
+     */
+    clearButtonAriaLabel?: string;
+    /**
+     * Instance of an icon to be rendered at the end of the combobox input. When used in combination with `clearButtonAriaLabel`,
+     * it disappears when the input is not empty
+     */
+    endComboboxIcon?: React.ReactNode;
+    /**
+     * `idForLabel` is used in the Combobox Group to define the id of the subcomponent associated with the Combobox Group label.
+     */
+    idForLabel?: string;
+}
+export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
+    as: 'textarea';
+};
+export type ConditionalComboboxProps = ComboboxTextArea | {
+    as: 'input';
+    'aria-describedby'?: string;
+};
+export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
+export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick' | 'onClick'> {
+    /**
+     * The content to render for the combobox option.
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the combobox option.
+     */
+    value?: string;
+    /**
+     * When `true`, prevents the user from interacting with the combobox option.
+     */
+    disabled?: boolean;
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+}
+export interface CollectionProps<T> {
+    options: Array<T>;
+    experimentalVirtualization: boolean;
+    inputValue: string;
+    renderOptionFn: (option: T) => React.ReactElement;
+    noResultMessage?: React.ReactElement | string;
+    overscan: SelectRendererProps['overscan'];
+    showLoading?: boolean;
+    loadingAriaLabel: string;
+}

package/lib-esm/combobox-group/combobox-group-combobox.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { type ComboboxGroupComboboxProps } from './types';
-export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
+import { type ComboboxGroupComboboxProps } from './types';
+export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/combobox-group/combobox-group-context.d.ts

@@ -1,24 +1,24 @@
-import React, { type ReactNode } from 'react';
-interface ComboboxGroupContextType {
-    errors: {
-        combobox?: boolean;
-        select?: boolean;
-    };
-    setError: (type: 'combobox' | 'select', error: boolean) => void;
-    inlineErrorId: string;
-    selectId: string;
-    comboboxId: string;
-    subcomponentId: string;
-    setSubcomponentId: (id: string) => void;
-    isDisabled: boolean;
-    isComboboxFocused: boolean;
-    setComboboxFocus: (focus: boolean) => void;
-    isSelectFocused: boolean;
-    setSelectFocus: (focus: boolean) => void;
-}
-export declare const ComboboxGroupProvider: React.FC<{
-    children: ReactNode;
-    isDisabled: boolean;
-}>;
-export declare const useComboboxGroupContext: () => ComboboxGroupContextType;
-export {};
+import React, { type ReactNode } from 'react';
+interface ComboboxGroupContextType {
+    errors: {
+        combobox?: boolean;
+        select?: boolean;
+    };
+    setError: (type: 'combobox' | 'select', error: boolean) => void;
+    inlineErrorId: string;
+    selectId: string;
+    comboboxId: string;
+    subcomponentId: string;
+    setSubcomponentId: (id: string) => void;
+    isDisabled: boolean;
+    isComboboxFocused: boolean;
+    setComboboxFocus: (focus: boolean) => void;
+    isSelectFocused: boolean;
+    setSelectFocus: (focus: boolean) => void;
+}
+export declare const ComboboxGroupProvider: React.FC<{
+    children: ReactNode;
+    isDisabled: boolean;
+}>;
+export declare const useComboboxGroupContext: () => ComboboxGroupContextType;
+export {};

package/lib-esm/combobox-group/combobox-group-select.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { type ComboboxGroupSelectProps } from './types';
-export declare const ComboboxGroupSelect: import("react").ForwardRefExoticComponent<ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { type ComboboxGroupSelectProps } from './types';
+export declare const ComboboxGroupSelect: import("react").ForwardRefExoticComponent<ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/combobox-group/combobox-group.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { type ComboboxGroupProps } from './types';
-export declare const ComboboxGroup: {
-    ({ children, disabled, ...props }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
-    Combobox: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
-    Select: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
-};
+import { type ComboboxGroupProps } from './types';
+export declare const ComboboxGroup: {
+    ({ children, disabled, ...props }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    Combobox: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
+    Select: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/lib-esm/combobox-group/index.d.ts

@@ -1,2 +1,2 @@
-export * from './combobox-group';
-export * from './types';
+export * from './combobox-group';
+export * from './types';

package/lib-esm/combobox-group/types.d.ts

@@ -1,22 +1,21 @@
-/// <reference types="react" />
-import { type ComboboxBaseProps, type OptionValue } from '../combobox/types';
-import { type SelectProps } from '../select/types';
-export interface ComboboxGroupProps {
-    children: React.ReactNode;
-    disabled?: boolean;
-    errorMessage?: string;
-    label: string;
-    hideLabel?: boolean;
-}
-export interface ComboboxGroupSelectProps extends SelectProps {
-    disabled?: never;
-    error?: boolean;
-    label: never;
-    position?: 'leading' | 'trailing';
-}
-export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends ComboboxBaseProps<Multiple, FreeInput, T> {
-    disabled?: never;
-    error?: boolean;
-    label: never;
-    position?: 'leading' | 'trailing';
-}
+import { type ComboboxBaseProps, type OptionValue } from '../combobox/types';
+import { type SelectProps } from '../select/types';
+export interface ComboboxGroupProps {
+    children: React.ReactNode;
+    disabled?: boolean;
+    errorMessage?: string;
+    label: string;
+    hideLabel?: boolean;
+}
+export interface ComboboxGroupSelectProps extends SelectProps {
+    disabled?: never;
+    error?: boolean;
+    label: never;
+    position?: 'leading' | 'trailing';
+}
+export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends ComboboxBaseProps<Multiple, FreeInput, T> {
+    disabled?: never;
+    error?: boolean;
+    label: never;
+    position?: 'leading' | 'trailing';
+}

package/lib-esm/content-card/content-card-body.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { type ElementTypes } from '../text/types';
-import { type ContentCardBodyProps } from './types';
-export declare const ContentCardBody: import("react").ForwardRefExoticComponent<Omit<ContentCardBodyProps, "ref"> & import("react").RefAttributes<ElementTypes>>;
+import { type ElementTypes } from '../text/types';
+import { type ContentCardBodyProps } from './types';
+export declare const ContentCardBody: import("react").ForwardRefExoticComponent<Omit<ContentCardBodyProps, "ref"> & import("react").RefAttributes<ElementTypes>>;

package/lib-esm/content-card/content-card-footer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { type ContentCardFooterProps } from './types';
-export declare const ContentCardFooter: import("react").ForwardRefExoticComponent<Omit<ContentCardFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { type ContentCardFooterProps } from './types';
+export declare const ContentCardFooter: import("react").ForwardRefExoticComponent<Omit<ContentCardFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;