@commercetools-uikit/select-utils/dist/declarations/src/create-select-styles.d.ts

Utilities for working with select components.

import { ReactNode } from 'react';
type TProps = {
    isDisabled?: boolean;
    hasError?: boolean;
    hasWarning?: boolean;
    isReadOnly?: boolean;
    showOptionGroupDivider?: boolean;
    menuPortalZIndex?: number;
    iconLeft?: ReactNode;
    isMulti?: boolean;
    hasValue?: boolean;
    isCondensed?: boolean;
    controlShouldRenderValue?: boolean;
    appearance?: 'default' | 'quiet' | 'filter';
    minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
    maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
};
type TBase = {
    fontColorForInput?: string;
    borderColorForInput?: string;
    color?: string;
    backgroundColor?: string;
    borderTop?: string;
    borderColor?: string;
    boxShadow?: string;
    pointerEvents?: string;
};
type TState = {
    isFocused?: boolean;
    isDisabled?: boolean;
    isSelected?: boolean;
};
export default function createSelectStyles(props: TProps): {
    control: (base: TBase, state: TState) => {
        '&:focus-within': {
            borderColor: "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))" | null;
        };
        '&:hover': {
            borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))";
            backgroundColor: string | null;
        };
        pointerEvents: string;
        color: string | undefined;
        display?: string | undefined;
        fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
        backgroundColor: "var(--color-transparent, transparent)" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
        borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))";
        borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)";
        borderRadius: "var(--border-radius-for-input, 4px)";
        minHeight: "var(--height-for-input, 40px)" | "var(--height-for-input-as-small, 32px)";
        cursor: string;
        padding: string;
        transition: string;
        outline: number;
        boxShadow: string;
        fontColorForInput?: string;
        borderColorForInput?: string;
        borderTop?: string;
    };
    menu: (base: TBase) => {
        border: string;
        borderRadius: "var(--border-radius-for-input, 4px)";
        backgroundColor: "var(--background-color-for-input, #fff)";
        boxShadow: string;
        fontSize: "var(--font-size-30, 1rem)";
        fontFamily: string;
        margin: string;
        borderColor: string | undefined;
        width: string;
        minWidth: string;
        maxWidth: string;
        position?: string | undefined;
        zIndex?: string | undefined;
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        borderTop?: string;
        pointerEvents?: string;
    };
    indicatorSeparator: (base: TBase) => {
        display: string;
        margin: string;
        padding: string;
        marginLeft: "var(--spacing-10, 4px)";
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    dropdownIndicator: (base: TBase) => {
        color: "var(--font-color-for-input, #1a1a1a)";
        margin: string;
        padding: string;
        marginLeft: "var(--spacing-20, 8px)";
        fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
        fontColorForInput?: string;
        borderColorForInput?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    clearIndicator: (base: TBase) => {
        display: string;
        padding: number;
        marginLeft: "var(--spacing-20, 8px)";
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    menuList: (base: TBase) => {
        padding: string;
        borderRadius: "var(--border-radius-for-input, 4px)";
        backgroundColor: "var(--background-color-for-input, #fff)";
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    menuPortal: (base: TBase) => {
        zIndex: number | undefined;
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    multiValue: (base: TBase) => {
        display: string;
        alignItems: string;
        height: string;
        backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
        padding: string;
        border: string;
        borderRadius: "var(--border-radius-20, 20px)";
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    multiValueLabel: (base: TBase) => {
        fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
        lineHeight: "var(--line-height-20, 1.375rem)" | "var(--line-height-40, 1.625rem)";
        color: string | undefined;
        padding: string;
        borderRadius: string;
        border: string;
        borderWidth: string;
        '&:last-child': {
            borderRadius: "var(--border-radius-2, 2px)";
            borderWidth: "var(--border-width-1, 1px)";
        };
        fontColorForInput?: string;
        borderColorForInput?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    multiValueRemove: (base: TBase, state: TState) => {
        borderColor: "var(--color-neutral, hsl(232, 18%, 80%))";
        padding: string;
        borderRadius: string;
        borderStyle: string;
        borderWidth: string;
        pointerEvents: string | undefined;
        backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
        'svg *': {
            fill: string;
        };
        '&:hover, &:focus': {
            borderColor: "var(--color-warning, hsl(35, 90%, 45%))";
            backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
            'svg *': {
                fill: "var(--color-error, hsl(3, 65%, 58%))";
            };
        };
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        borderTop?: string;
        boxShadow?: string;
    };
    indicatorsContainer: () => {
        background: string;
        display: string;
        alignItems: string;
    };
    option: (base: TBase, state: TState) => {
        transition: string;
        padding: string;
        lineHeight: "var(--line-height-40, 1.625rem)";
        fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
        cursor: string;
        color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
        borderRadius: string | false;
        backgroundColor: string | undefined;
        '&:active': {
            backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--color-transparent, transparent)";
        };
        fontColorForInput?: string;
        borderColorForInput?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    placeholder: (base: TBase) => {
        color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))";
        width: string;
        overflow: string;
        whiteSpace: string;
        textOverflow: string;
        fill: string | undefined;
        fontColorForInput?: string;
        borderColorForInput?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    valueContainer: (base: TBase) => {
        padding: string;
        backgroundColor: string;
        overflow: string;
        display: string;
        fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
        flexWrap?: string | undefined;
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    singleValue: (base: TBase) => {
        color: "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
        fontColorForInput?: string;
        borderColorForInput?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    group: (base: TBase) => {
        padding: number;
        '&:not(:first-of-type)': {
            borderTop: string | undefined;
        };
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    groupHeading: (base: TBase) => {
        color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
        fontSize: "var(--font-size-20, 0.875rem)";
        borderBottom: string;
        textTransform: string;
        fontWeight: "var(--font-weight-500, 500)";
        padding: string;
        '&:empty': {
            padding: number;
        };
        fontColorForInput?: string;
        borderColorForInput?: string;
        backgroundColor?: string;
        borderTop?: string;
        borderColor?: string;
        boxShadow?: string;
        pointerEvents?: string;
    };
    container: (base: TBase, state: TState) => {
        fontFamily: string;
        minHeight: "var(--height-for-input-as-small, 32px)";
        borderRadius: "var(--border-radius-for-input, 4px)";
        borderColor: string | undefined;
        boxShadow: string | undefined;
        fontColorForInput?: string;
        borderColorForInput?: string;
        color?: string;
        backgroundColor?: string;
        borderTop?: string;
        pointerEvents?: string;
    };
};
export {};