@gechiui/components/build-types/unit-control/types.d.ts

UI components for GeChiUI.

/**
 * External dependencies
 */
import type { SyntheticEvent } from 'react';
/**
 * Internal dependencies
 */
import type { StateReducer } from '../input-control/reducer/state';
import type { InputChangeCallback } from '../input-control/types';
export declare type Value = number | string;
export declare type SelectSize = 'default' | 'small';
export declare type GCUnitControlUnit = {
    /**
     * The value for the unit, used in a CSS value (e.g `px`).
     */
    value: string;
    /**
     * The label used in a dropdown selector for the unit.
     */
    label: string;
    /**
     * Default value for the unit, used when switching units.
     */
    default?: Value;
    /**
     * An accessible label used by screen readers.
     */
    a11yLabel?: string;
    /**
     * A step value used when incrementing/decrementing the value.
     */
    step?: number;
};
export declare type GCUnitControlUnitList = Array<GCUnitControlUnit> | false;
export declare type UnitControlOnChangeCallback = InputChangeCallback<SyntheticEvent<HTMLSelectElement | HTMLInputElement>, {
    data?: GCUnitControlUnit;
}>;
export declare type UnitSelectControlProps = {
    /**
     * Whether the control can be focused via keyboard navigation.
     *
     * @default true
     */
    isUnitSelectTabbable?: boolean;
    /**
     * A callback function invoked when the value is changed.
     *
     * @default noop
     */
    onChange?: UnitControlOnChangeCallback;
    /**
     * Size of the control option. Supports "default" and "small".
     *
     * @default 'default'
     */
    size?: SelectSize;
    /**
     * Current unit.
     */
    unit?: string;
    /**
     * Available units to select from.
     *
     * @default CSS_UNITS
     */
    units?: GCUnitControlUnitList;
};
export declare type UnitControlProps = UnitSelectControlProps & {
    __unstableStateReducer?: StateReducer;
    /**
     * If `true`, the unit `<select>` is hidden.
     *
     * @default false
     */
    disableUnits?: boolean;
    /**
     * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
     * If enabled, a change is also triggered when tabbing away (`onBlur`).
     *
     * @default false
     */
    isPressEnterToChange?: boolean;
    /**
     * If `true`, and the selected unit provides a `default` value, this value is set
     * when changing units.
     *
     * @default false
     */
    isResetValueOnUnitChange?: boolean;
    /**
     * If this property is added, a label will be generated using label property as the content.
     */
    label?: string;
    /**
     * Callback when the `unit` changes.
     *
     * @default noop
     */
    onUnitChange?: UnitControlOnChangeCallback;
    /**
     * Current value. If passed as a string, the current unit will be inferred from this value.
     * For example, a `value` of "50%" will set the current unit to `%`.
     */
    value: Value;
};
//# sourceMappingURL=types.d.ts.map