@type-dom/ui 0.1.0 → 0.1.1

package/src/components/form/td-rate/td-rate.class.js

@@ -1 +1,341 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdRate = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_rate_const_1 = require("./td-rate.const");
+const utils_1 = require("@type-dom/utils");
+const td_form_const_1 = require("../td-form/td-form.const");
+const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const event_1 = require("../../../constants/event");
+const aria_1 = require("../../../constants/aria");
+const signals_1 = require("@type-dom/signals");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+require("./style/index");
+class TdRate extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdRate';
+        this.addEmits(td_rate_const_1.rateEmits);
+        this.assignProps(td_rate_const_1.rateProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        function getValueFromMap(value, map) {
+            const isExcludedObject = (val) => (0, utils_1.isObject)(val);
+            if (!map) {
+                // add by me todo
+                return;
+            }
+            const matchedKeys = Object.keys(map)
+                .map((key) => +key)
+                .filter((key) => {
+                const val = map[key];
+                const excluded = isExcludedObject(val) ? val.excluded : false;
+                return excluded ? value < key : value <= key;
+            })
+                .sort((a, b) => a - b);
+            const matchedValue = map[matchedKeys[0]];
+            return ((isExcludedObject(matchedValue) && matchedValue.value) || matchedValue);
+        }
+        const props = this.props;
+        const emit = this.emit;
+        const formContext = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
+        const formItemContext = (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);
+        const rateSize = (0, use_form_common_props_1.useFormSize)();
+        const ns = (0, use_namespace_1.useNamespace)('rate');
+        const { inputId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext,
+        });
+        const currentValue = (0, signals_1.signal)(props.modelValue);
+        const hoverIndex = (0, signals_1.signal)(-1);
+        const pointerAtLeftHalf = (0, signals_1.signal)(true);
+        const rateClasses = (0, signals_1.computed)(() => [ns.b(), ns.m(rateSize.get())]);
+        const rateDisabled = (0, signals_1.computed)(() => props.disabled || (0, signals_1.unref)(formContext === null || formContext === void 0 ? void 0 : formContext.disabled));
+        const rateStyles = (0, signals_1.computed)(() => {
+            return ns.cssVarBlock({
+                'void-color': props.voidColor,
+                'disabled-void-color': props.disabledVoidColor,
+                'fill-color': activeColor.get(), // todo 可能是对象
+            });
+        });
+        const text = (0, signals_1.computed)(() => {
+            var _a, _b;
+            let result = '';
+            if (props.showScore) {
+                result = (_a = props.scoreTemplate) === null || _a === void 0 ? void 0 : _a.replace(/\{\s*value\s*\}/, rateDisabled.get() ? `${props.modelValue}` : `${currentValue.get()}`);
+            }
+            else if (props.showText) {
+                result = (_b = props.texts) === null || _b === void 0 ? void 0 : _b[Math.ceil(currentValue.get()) - 1];
+            }
+            return result;
+        });
+        const valueDecimal = (0, signals_1.computed)(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
+        const colorMap = (0, signals_1.computed)(() => {
+            const colors = (0, signals_1.unref)(props.colors);
+            return (0, utils_1.isArray)(colors)
+                ? {
+                    [props.lowThreshold]: colors[0],
+                    [props.highThreshold]: { value: colors[1], excluded: true },
+                    [props.max]: colors[2],
+                }
+                : colors;
+        });
+        const activeColor = (0, signals_1.computed)(() => {
+            console.warn('colorMap is ', colorMap);
+            const color = getValueFromMap(currentValue.get(), colorMap.get());
+            // {value: '', excluded: true} returned
+            return (0, utils_1.isObject)(color) ? '' : color;
+        });
+        const decimalStyle = (0, signals_1.computed)(() => {
+            let width = '';
+            if (rateDisabled.get()) {
+                width = `${valueDecimal.get()}%`;
+            }
+            else if (props.allowHalf) {
+                width = '50%';
+            }
+            return {
+                color: activeColor.get(),
+                width,
+            };
+        });
+        const componentMap = (0, signals_1.computed)(() => {
+            console.warn('componentMap is ');
+            let icons = (0, utils_1.isArray)(props.icons) ? [...props.icons] : Object.assign({}, props.icons);
+            // icons = markRaw(icons) as
+            //   | Array<string | typeof TypeSvgSvg>
+            //   | Record<number, string | typeof TypeSvgSvg>
+            return (0, utils_1.isArray)(icons)
+                ? {
+                    [props.lowThreshold]: icons[0],
+                    [props.highThreshold]: {
+                        value: icons[1],
+                        excluded: true,
+                    },
+                    [props.max]: icons[2],
+                }
+                : icons;
+        });
+        const decimalIconComponent = (0, signals_1.computed)(() => {
+            console.warn('decimalIconComponent is ', componentMap);
+            return getValueFromMap(props.modelValue, componentMap.get());
+        });
+        const voidComponent = (0, signals_1.computed)(() => rateDisabled.get()
+            ? props.disabledVoidIcon
+            : // : ((props.disabledVoidIcon) as typeof TypeSvgSvg)
+                props.voidIcon
+        // : ((props.voidIcon) as typeof TypeSvgSvg)
+        // rateDisabled.value
+        //   ? isString(props.disabledVoidIcon)
+        //     ? props.disabledVoidIcon
+        //     : (markRaw(props.disabledVoidIcon) as Component)
+        //   : isString(props.voidIcon)
+        //     ? props.voidIcon
+        //     : (markRaw(props.voidIcon) as Component)
+        );
+        const activeComponent = (0, signals_1.computed)(() => getValueFromMap(currentValue.get(), componentMap.get()));
+        function showDecimalIcon(item) {
+            const showWhenDisabled = rateDisabled.get() &&
+                valueDecimal.get() > 0 &&
+                item - 1 < props.modelValue &&
+                item > props.modelValue;
+            const showWhenAllowHalf = props.allowHalf &&
+                pointerAtLeftHalf.get() &&
+                item - 0.5 <= currentValue.get() &&
+                item > currentValue.get();
+            return showWhenDisabled || showWhenAllowHalf;
+        }
+        function emitValue(value) {
+            // if allow clear, and selected value is same as modelValue, reset value to 0
+            if (props.clearable && value === props.modelValue) {
+                value = 0;
+            }
+            emit(event_1.UPDATE_MODEL_EVENT, value);
+            if (props.modelValue !== value) {
+                emit('change', value);
+            }
+        }
+        function selectValue(value) {
+            if (rateDisabled.get()) {
+                return;
+            }
+            if (props.allowHalf && pointerAtLeftHalf.get()) {
+                emitValue(currentValue.get());
+            }
+            else {
+                emitValue(value);
+            }
+        }
+        function handleKey(e) {
+            if (rateDisabled.get()) {
+                return;
+            }
+            let _currentValue = currentValue.get();
+            const code = e === null || e === void 0 ? void 0 : e.code;
+            if (code === aria_1.EVENT_CODE.up || code === aria_1.EVENT_CODE.right) {
+                if (props.allowHalf) {
+                    _currentValue += 0.5;
+                }
+                else {
+                    _currentValue += 1;
+                }
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                e === null || e === void 0 ? void 0 : e.preventDefault();
+            }
+            else if (code === aria_1.EVENT_CODE.left || code === aria_1.EVENT_CODE.down) {
+                if (props.allowHalf) {
+                    _currentValue -= 0.5;
+                }
+                else {
+                    _currentValue -= 1;
+                }
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                e === null || e === void 0 ? void 0 : e.preventDefault();
+            }
+            _currentValue = _currentValue < 0 ? 0 : _currentValue;
+            _currentValue = _currentValue > props.max ? props.max : _currentValue;
+            emit(event_1.UPDATE_MODEL_EVENT, _currentValue);
+            emit('change', _currentValue);
+            return _currentValue;
+        }
+        function setCurrentValue(value, event) {
+            if (rateDisabled.get()) {
+                return;
+            }
+            if (props.allowHalf && event) {
+                // TODO: use cache via computed https://github.com/element-plus/element-plus/pull/5456#discussion_r786472092
+                let target = event.target;
+                if ((0, utils_1.hasClass)(target, ns.e('item'))) {
+                    target = target.querySelector(`.${ns.e('icon')}`);
+                }
+                if (target.clientWidth === 0 || (0, utils_1.hasClass)(target, ns.e('decimal'))) {
+                    target = target.parentNode;
+                }
+                pointerAtLeftHalf.set(event.offsetX * 2 <= target.clientWidth);
+                currentValue.set(pointerAtLeftHalf.get() ? value - 0.5 : value);
+            }
+            else {
+                currentValue.set(value);
+            }
+            hoverIndex.set(value);
+        }
+        function resetCurrentValue() {
+            if (rateDisabled.get()) {
+                return;
+            }
+            if (props.allowHalf) {
+                pointerAtLeftHalf.set(props.modelValue !== Math.floor(props.modelValue));
+            }
+            currentValue.set(props.modelValue);
+            hoverIndex.set(-1);
+        }
+        (0, signals_1.watch)(props.vModel, (val) => {
+            currentValue.set(val);
+            pointerAtLeftHalf.set(props.modelValue !== Math.floor(props.modelValue));
+        });
+        if (!props.modelValue) {
+            emit(event_1.UPDATE_MODEL_EVENT, 0);
+        }
+        (0, framework_1.defineExpose)({
+            /** @description set current value */
+            setCurrentValue,
+            /** @description reset current value */
+            resetCurrentValue,
+        });
+        this.attr.addObj({
+            id: inputId.get(),
+            class: (0, signals_1.computed)(() => [
+                rateClasses.get(),
+                ns.is('disabled', (0, signals_1.unref)(rateDisabled)),
+            ]),
+            role: 'slider',
+            ariaLabel: !isLabeledByFormItem.get()
+                ? props.ariaLabel || 'rating'
+                : undefined,
+            ariaLabelledby: isLabeledByFormItem.get()
+                ? formItemContext === null || formItemContext === void 0 ? void 0 : formItemContext.labelId
+                : undefined,
+            ariaValuenow: currentValue.get(),
+            ariaValuetext: text.get() || undefined,
+            ariaValuemin: 0,
+            ariaValuemax: props.max,
+            tabindex: 0,
+        });
+        this.style.addObj(rateStyles);
+        this.addEvents({
+            keydown: handleKey,
+        });
+        (0, utils_1.genNumArr)(props.max).forEach((item) => {
+            this.addChild(new framework_1.Span({
+                class: ns.e('item'),
+                events: {
+                    mousemove: (evt) => setCurrentValue(item, evt),
+                    mouseleave: resetCurrentValue,
+                    click: () => selectValue(item),
+                },
+                slot: new td_icon_class_1.TdIcon({
+                    class: (0, signals_1.computed)(() => [
+                        ns.e('icon'),
+                        { hover: hoverIndex.get() === item },
+                        ns.is('active', item <= currentValue.get()),
+                    ]),
+                    slot: (0, signals_1.computed)(() => {
+                        if (!showDecimalIcon(item)) {
+                            return [
+                                activeComponent.get() &&
+                                    new (activeComponent.get())({
+                                        vShow: item <= currentValue.get(),
+                                    }),
+                                new (voidComponent.get())({
+                                    vShow: !(item <= currentValue.get()),
+                                }),
+                            ];
+                        }
+                        else {
+                            return [
+                                new (voidComponent.get())({
+                                    class: [ns.em('decimal', 'box')],
+                                }),
+                                new td_icon_class_1.TdIcon({
+                                    styleObj: decimalStyle,
+                                    class: [ns.e('icon'), ns.e('decimal')],
+                                    slot: decimalIconComponent.get() &&
+                                        new (decimalIconComponent.get())(),
+                                }),
+                            ];
+                        }
+                    }),
+                    // slot: !showDecimalIcon(item)
+                    // ? [
+                    //     new (activeComponent.get() as any)({
+                    //       vShow: computed(() => item <= currentValue.get()),
+                    //     }),
+                    //     new (voidComponent.get() as any)({
+                    //       vShow: computed(() => !(item <= currentValue.get())),
+                    //     }),
+                    //   ]
+                    // : [
+                    //     new (voidComponent.get() as any)({
+                    //       class: [ns.em('decimal', 'box')],
+                    //     }),
+                    //     new TdIcon({
+                    //       styleObj: decimalStyle,
+                    //       class: [ns.e('icon'), ns.e('decimal')],
+                    //       slot: new (decimalIconComponent.get() as any)(),
+                    //     })
+                    //   ]
+                }),
+            }));
+        });
+        if (props.showText || props.showScore) {
+            this.addChild(new framework_1.Span({
+                class: ns.e('text'),
+                styleObj: { color: props.textColor },
+                slot: text,
+            }));
+        }
+    }
+}
+exports.TdRate = TdRate;

package/src/components/form/td-rate/td-rate.const.d.ts

@@ -0,0 +1,7 @@
+import { RateProps } from './td-rate.interface';
+export declare const rateProps: RateProps;
+export declare const rateEmits: {
+    change: (value: number) => boolean;
+    "update:modelValue": (value: number) => boolean;
+};
+export type RateEmits = typeof rateEmits;

package/src/components/form/td-rate/td-rate.const.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rateEmits = exports.rateProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.rateProps = {
+    modelValue: 0,
+    lowThreshold: 2,
+    highThreshold: 4,
+    max: 5,
+    voidColor: '',
+    disabledVoidColor: '',
+    icons: [svgs_1.ElStarFilledSvg, svgs_1.ElStarFilledSvg, svgs_1.ElStarFilledSvg],
+    voidIcon: svgs_1.ElStarSvg,
+    disabledVoidIcon: svgs_1.ElStarFilledSvg,
+    textColor: '',
+    texts: [
+        'Extremely bad',
+        'Disappointed',
+        'Fair',
+        'Satisfied',
+        'Surprise',
+    ],
+    scoreTemplate: '{value}',
+    // ...useAriaProps(['ariaLabel']),
+};
+exports.rateEmits = {
+    [event_1.CHANGE_EVENT]: (value) => (0, utils_1.isNumber)(value),
+    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isNumber)(value),
+};

package/src/components/form/td-rate/td-rate.interface.d.ts

@@ -0,0 +1,101 @@
+import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdRate extends ITypeDiv {
+    className: 'TdRate';
+}
+export interface RateProps extends TypeDivProps {
+    /**
+     * @description binding value
+     *     default: 0,
+     */
+    modelValue?: number;
+    /**
+     * @description native `id` attribute
+     */
+    id?: string;
+    /**
+     * @description threshold value between low and medium level. The value itself will be included in low level
+     *     default: 2,
+     */
+    lowThreshold?: number;
+    /**
+     * @description threshold value between medium and high level. The value itself will be included in high level
+     *     default: 4,
+     */
+    highThreshold?: number;
+    /**
+     * @description max rating score
+     *     default: 5,
+     */
+    max?: number;
+    /**
+     * @description colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color
+     default: () => mutable(['', '', ''] as const),
+     */
+    colors?: MaybeRef<string[] | Record<number, string>>;
+    /**
+     * @description color of unselected icons
+     *     default: '',
+     */
+    voidColor?: string;
+    /**
+     * @description color of unselected read-only icons
+     *     default: '',
+     */
+    disabledVoidColor?: string;
+    /**
+     * @description icon components. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon component
+     default: () =>
+     [StarFilled, StarFilled, StarFilled] as [Component, Component, Component],
+     */
+    icons?: Array<string | typeof TypeSvgSvg> | Record<number, string | typeof TypeSvgSvg>;
+    /**
+     * @description component of unselected icons
+     *     default: () => Star as Component,
+     */
+    voidIcon?: typeof TypeSvgSvg;
+    /**
+     * @description component of unselected read-only icons
+     *     default: () => StarFilled as Component,
+     */
+    disabledVoidIcon?: typeof TypeSvgSvg;
+    /**
+     * @description whether Rate is read-only
+     */
+    disabled?: boolean;
+    /**
+     * @description whether picking half start is allowed
+     */
+    allowHalf?: boolean;
+    /**
+     * @description whether to display texts
+     */
+    showText?: boolean;
+    /**
+     * @description whether to display current score. show-score and show-text cannot be true at the same time
+     */
+    showScore?: boolean;
+    /**
+     * @description color of texts
+     *     default: '',
+     */
+    textColor?: string;
+    /**
+     * @description text array
+     */
+    texts?: string[];
+    /**
+     * @description score template
+     *     default: '{value}',
+     */
+    scoreTemplate?: string;
+    /**
+     * @description size of Rate
+     */
+    size?: ComponentSize;
+    /**
+     * @description whether value can be reset to `0`
+     */
+    clearable?: boolean;
+}

package/src/components/form/td-rate/td-rate.interface.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-select/style/css.d.ts

@@ -0,0 +1,7 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/components/tag/style/css';
+import '@element-plus/components/option/style/css';
+import '@element-plus/components/option-group/style/css';
+import '@element-plus/components/scrollbar/style/css';
+import '@element-plus/components/popper/style/css';
+import '@element-plus/theme-chalk/el-select.css';

package/src/components/form/td-select/style/css.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/components/tag/style/css");
+require("@element-plus/components/option/style/css");
+require("@element-plus/components/option-group/style/css");
+require("@element-plus/components/scrollbar/style/css");
+require("@element-plus/components/popper/style/css");
+require("@element-plus/theme-chalk/el-select.css");

package/src/components/form/td-select/style/index.d.ts

@@ -0,0 +1,7 @@
+import '../../../../components/base/style';
+import '../../../../components/data/td-tag/style';
+import '../../../../components/form/td-option/style';
+import '../../../../components/form/td-option-group/style';
+import '../../../../components/basic/td-scrollbar/style';
+import '../../../../components/feedback/td-popper/style';
+import '../../../../theme-chalk/select.scss';

package/src/components/form/td-select/style/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../components/data/td-tag/style");
+require("../../../../components/form/td-option/style");
+require("../../../../components/form/td-option-group/style");
+require("../../../../components/basic/td-scrollbar/style");
+require("../../../../components/feedback/td-popper/style");
+require("../../../../theme-chalk/select.scss");

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.class.d.ts

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdSelectDropdown, SelectDropdownProps } from './td-select-dropdown.interface';
+export declare class TdSelectDropDown extends TypeDiv implements ITdSelectDropdown {
+    className: 'TdSelectDropdown';
+    props: SelectDropdownProps;
+    constructor(params?: SelectDropdownProps);
+    setup(): void;
+}

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.class.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSelectDropDown = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const token_1 = require("../token");
+class TdSelectDropDown extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdSelectDropdown';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        console.log('TdSelectDropDown setup');
+        const props = this.props;
+        const select = (0, framework_1.inject)(token_1.selectKey);
+        const ns = (0, use_namespace_1.useNamespace)('select');
+        // computed
+        const popperClass = (0, signals_1.computed)(() => select.props.popperClass);
+        const isMultiple = (0, signals_1.computed)(() => select.props.multiple);
+        const isFitInputWidth = (0, signals_1.computed)(() => select.props.fitInputWidth);
+        const minWidth = (0, signals_1.signal)('');
+        function updateMinWidth() {
+            var _a, _b;
+            minWidth.set(`${(_b = (_a = select.selectRef) === null || _a === void 0 ? void 0 : _a.get()) === null || _b === void 0 ? void 0 : _b.offsetWidth}px`);
+        }
+        (0, framework_1.onMounted)(() => {
+            // TODO: updatePopper
+            // popper.value.update()
+            updateMinWidth();
+            (0, framework_1.useResizeObserver)(select.selectRef, updateMinWidth);
+        });
+        this.attr.addClass((0, signals_1.computed)(() => [
+            ns.b('dropdown'),
+            ns.is('multiple', isMultiple.get()),
+            popperClass,
+        ]));
+        this.style.addObj({
+            [isFitInputWidth ? 'width' : 'minWidth']: minWidth,
+        });
+        this.addChildren(new framework_1.Div({
+            vIf: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.header,
+            class: ns.be('dropdown', 'header'),
+            slot: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.header,
+        }), new framework_1.Fragment({
+            slot: (_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default,
+        }), new framework_1.Div({
+            vIf: (_e = props.slots) === null || _e === void 0 ? void 0 : _e.footer,
+            class: ns.be('dropdown', 'footer'),
+            slot: (_f = props.slots) === null || _f === void 0 ? void 0 : _f.footer,
+        }));
+    }
+}
+exports.TdSelectDropDown = TdSelectDropDown;

package/src/components/form/td-select/{dropdown/dropdown.interface.d.ts → td-select-dropdown/td-select-dropdown.interface.d.ts}

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps, TypeElement } from '@type-dom/framework';
 export interface ITdSelectDropdown extends ITypeDiv {
     className: 'TdSelectDropdown';
 }
-export interface ITdSelectDropdownConfig extends ITypeConfig {
+export interface SelectDropdownProps extends TypeDivProps {
     header?: TypeElement;
     footer?: TypeElement;
 }

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.style.d.ts

@@ -0,0 +1,11 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $selectDropdownStyle: IStyle;
+export declare const $selectDropdownLoading: IStyle;
+export declare const $selectDropdownEmptyStyle: IStyle;
+export declare const $selectDropdownWrapStyle: IStyle;
+export declare const $selectDropdownListStyle: IStyle;
+export declare const $selectDropdownHeaderStyle: IStyle;
+export declare const $selectDropdownFooterStyle: {
+    padding: string;
+    borderTop: string;
+};