@wordpress/components/build-types/border-control/types.d.ts

UI components for WordPress.

/**
 * External dependencies
 */
import type { CSSProperties } from 'react';
/**
 * Internal dependencies
 */
import type { ColorPaletteProps } from '../color-palette/types';
import type { PopoverProps } from '../popover/types';
import type { ToggleGroupControlProps } from '../toggle-group-control/types';
export type Border = {
    color?: CSSProperties['borderColor'];
    style?: CSSProperties['borderStyle'];
    width?: CSSProperties['borderWidth'];
};
export type ColorProps = Pick<ColorPaletteProps, 'colors' | '__experimentalIsRenderedInSidebar'> & {
    /**
     * This toggles the ability to choose custom colors.
     */
    disableCustomColors?: boolean;
    /**
     * This controls whether the alpha channel will be offered when selecting
     * custom colors.
     *
     * @default true
     */
    enableAlpha?: boolean;
};
export type LabelProps = {
    /**
     * Provides control over whether the label will only be visible to
     * screen readers.
     */
    hideLabelFromVision?: boolean;
    /**
     * If provided, a label will be generated using this as the content.
     */
    label?: string;
};
export type BorderControlProps = ColorProps & LabelProps & {
    /**
     * This controls whether unit selection should be disabled.
     */
    disableUnits?: boolean;
    /**
     * This controls whether to support border style selection.
     *
     * @default true
     */
    enableStyle?: boolean;
    /**
     * This flags the `BorderControl` to render with a more compact
     * appearance. It restricts the width of the control and prevents it
     * from expanding to take up additional space.
     */
    isCompact?: boolean;
    /**
     * A callback function invoked when the border value is changed via an
     * interaction that selects or clears, border color, style, or width.
     */
    onChange: (value?: Border) => void;
    /**
     * Placeholder text for the number input.
     */
    placeholder?: HTMLInputElement['placeholder'];
    /**
     * An internal prop used to control the visibility of the dropdown.
     */
    __unstablePopoverProps?: Omit<PopoverProps, 'children'>;
    /**
     * If opted into, sanitizing the border means that if no width or color
     * have been selected, the border style is also cleared and `undefined`
     * is returned as the new border value.
     *
     * @default true
     */
    shouldSanitizeBorder?: boolean;
    /**
     * @deprecated This prop no longer has any effect.
     * @ignore
     */
    showDropdownHeader?: boolean;
    /**
     * Size of the control.
     *
     * @default 'default'
     */
    size?: 'default' | '__unstable-large';
    /**
     * An object representing a border or `undefined`. Used to set the
     * current border configuration for this component.
     */
    value?: Border;
    /**
     * Controls the visual width of the `BorderControl`. It has no effect if
     * the `isCompact` prop is set to `true`.
     */
    width?: CSSProperties['width'];
    /**
     * Flags whether this `BorderControl` should also render a
     * `RangeControl` for additional control over a border's width.
     */
    withSlider?: boolean;
    /**
     * Start opting into the larger default height that will become the default size in a future version.
     *
     * @default false
     */
    __next40pxDefaultSize?: boolean;
    /**
     * Do not throw a warning for the deprecated 36px default size.
     * For internal components of other components that already throw the warning.
     *
     * @ignore
     */
    __shouldNotWarnDeprecated36pxSize?: boolean;
};
export type DropdownProps = ColorProps & Pick<BorderControlProps, 'enableStyle' | 'size'> & {
    /**
     * An object representing a border or `undefined`. This component will
     * extract the border color and style selections from this object to use as
     * values for its popover controls.
     */
    border?: Border;
    /**
     * Whether a border style can be set, based on the border sanitization settings.
     */
    isStyleSettable: boolean;
    /**
     * An internal prop used to control the visibility of the dropdown.
     */
    __unstablePopoverProps?: Omit<PopoverProps, 'children'>;
    /**
     * A callback invoked when the border color or style selections change.
     */
    onChange: (newBorder?: Border) => void;
    /**
     * Any previous style selection made by the user. This can be used to
     * reapply that previous selection when, for example, a zero border width is
     * to a non-zero value.
     */
    previousStyleSelection?: string;
    /**
     * @deprecated This prop no longer has any effect.
     * @ignore
     */
    showDropdownHeader?: boolean;
};
export type StylePickerProps = Omit<ToggleGroupControlProps, 'value' | 'onChange' | 'children'> & {
    /**
     * A callback function invoked when a border style is selected or cleared.
     */
    onChange: (style?: string) => void;
    /**
     * The currently selected border style if there is one. Styles available via
     * this control are `solid`, `dashed` & `dotted`, however the possibility
     * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.
     */
    value?: string;
};
//# sourceMappingURL=types.d.ts.map