@hsu-react/ui 0.0.1

package/lib/components/Select/TreeSelect/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _hooks = require("../_hooks");
+var _utils = require("../_utils");
+var _hsuUtils = require("hsu-utils");
+var _utils2 = require("./_utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TreeSelect = props => {
+  const {
+    className,
+    onSearch,
+    filterTreeNode: customFilterTreeNode,
+    popupMatchSelectWidth,
+    dropdownStyle,
+    style: customStyle,
+    popupClassName,
+    treeExpandedKeys: treeExpandedKeysProps,
+    onTreeExpand,
+    treeDefaultExpandedKeys,
+    defaultExpandLevel,
+    indent,
+    switchWidth,
+    switchGap,
+    treeData,
+    ...antdTreeSelectConfig
+  } = props;
+  const cls = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const ref = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const [containerElement, setContainerElement] = (0, _react.useState)(null);
+  const {
+    isComposing
+  } = (0, _hooks.useSelectComposition)({
+    onSearch
+  });
+  const [open, setOpen] = (0, _react.useState)(false);
+  (0, _hooks.useSelectPopupPosition)(containerRef, open, cls);
+  const style = (0, _react.useMemo)(() => ({
+    ...customStyle,
+    "--tree-indent-unit-width": typeof indent === "number" ? `${indent}px` : undefined,
+    "--tree-switcher-width": typeof switchWidth === "number" ? `${switchWidth}px` : undefined,
+    "--tree-switcher-gap": typeof switchGap === "number" ? `${switchGap}px` : undefined
+  }), [customStyle, indent, switchWidth, switchGap]);
+
+  // Compute default expanded keys from defaultExpandLevel.
+  const computedDefaultExpandLevelKeys = (0, _react.useMemo)(() => {
+    if (defaultExpandLevel !== undefined && defaultExpandLevel > 0 && treeData) {
+      return (0, _utils2.getExpandedKeysByLevel)(treeData, defaultExpandLevel);
+    }
+    return undefined;
+  }, [defaultExpandLevel, treeData]);
+  const [treeExpandedKeys, setTreeExpandedKeys] = (0, _react.useState)((0, _utils2.getInitialTreeExpandedKeys)(treeExpandedKeysProps, treeDefaultExpandedKeys, computedDefaultExpandLevelKeys));
+  const prevPropsRef = (0, _react.useRef)(treeExpandedKeysProps);
+  const prevDefaultRef = (0, _react.useRef)(computedDefaultExpandLevelKeys);
+  const hasUserInteractedRef = (0, _react.useRef)(false);
+  const hasAppliedTreeDefaultRef = (0, _react.useRef)(treeDefaultExpandedKeys !== undefined);
+  (0, _react.useEffect)(() => {
+    if ((0, _utils2.shouldSyncControlledExpandedKeys)(prevPropsRef.current, treeExpandedKeysProps)) {
+      prevPropsRef.current = treeExpandedKeysProps;
+      setTreeExpandedKeys(treeExpandedKeysProps);
+    }
+  }, [treeExpandedKeysProps]);
+  (0, _react.useEffect)(() => {
+    if ((0, _utils2.shouldApplyTreeDefaultExpandedKeys)(treeExpandedKeysProps, hasUserInteractedRef.current, treeDefaultExpandedKeys, hasAppliedTreeDefaultRef.current)) {
+      hasAppliedTreeDefaultRef.current = true;
+      setTreeExpandedKeys(treeDefaultExpandedKeys);
+      return;
+    }
+    if ((0, _utils2.shouldSyncDefaultExpandLevelKeys)(treeExpandedKeysProps, hasUserInteractedRef.current, hasAppliedTreeDefaultRef.current, prevDefaultRef.current, computedDefaultExpandLevelKeys)) {
+      prevDefaultRef.current = computedDefaultExpandLevelKeys;
+      setTreeExpandedKeys(computedDefaultExpandLevelKeys);
+    }
+  }, [computedDefaultExpandLevelKeys, treeExpandedKeysProps, treeDefaultExpandedKeys]);
+  const handleTreeExpand = (0, _react.useCallback)(expandedKeys => {
+    hasUserInteractedRef.current = true;
+    setTreeExpandedKeys(expandedKeys);
+    onTreeExpand?.(expandedKeys);
+  }, [onTreeExpand]);
+  const getPopupContainer = (0, _react.useCallback)(triggerNode => {
+    const container = triggerNode?.parentElement?.closest(`.${_indexModule.default.treeSelect}`) ?? document.body;
+    containerRef.current = container;
+    setContainerElement(container);
+    return container;
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, {
+    showSearch: true,
+    allowClear: true,
+    ...antdTreeSelectConfig,
+    treeData: treeData,
+    ...(treeExpandedKeys !== undefined && {
+      treeExpandedKeys
+    }),
+    onTreeExpand: handleTreeExpand,
+    onDropdownVisibleChange: setOpen,
+    className: (0, _classnames.default)(_indexModule.default.treeSelect, className),
+    onSearch: value => {
+      if (!isComposing) {
+        onSearch?.(value);
+      }
+    },
+    filterTreeNode: customFilterTreeNode ? typeof customFilterTreeNode === "function" ? (searchValue, node) => customFilterTreeNode(searchValue, node) : customFilterTreeNode : (searchValue, node) => {
+      if (isComposing) {
+        return true;
+      }
+      const title = node?.title?.toString() ?? "";
+      return title.includes(searchValue);
+    },
+    getPopupContainer: getPopupContainer,
+    popupClassName: `${cls} ${popupClassName ?? ""}`,
+    style: style,
+    popupMatchSelectWidth: popupMatchSelectWidth ?? (containerElement ? containerElement.offsetWidth : undefined),
+    dropdownStyle: {
+      ...dropdownStyle,
+      left: containerElement ? (0, _utils.getElementLeft)(containerElement) : undefined,
+      right: "auto"
+    },
+    suffixIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: "ep:arrow-down"
+    }),
+    ref: ref
+  });
+};
+var _default = exports.default = TreeSelect;

package/lib/components/Select/TreeSelect/index.module.less

@@ -0,0 +1,126 @@
+.treeSelect {
+  --tree-indent-unit-width: 19px;
+  --tree-switcher-width: 16px;
+  --tree-switcher-gap: 0px;
+
+  width: 100%;
+  height: 100%;
+
+  // CF 风格：随外观切换的描边输入控件
+  background: var(--cf-surface);
+  border: 1px solid var(--cf-border);
+  border-radius: 6px;
+
+  .ant-select-selector {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+
+    background: transparent !important;
+    border: none !important;
+    border-radius: inherit !important;
+
+    .ant-select-selection-wrap {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    .ant-select-selection-search {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+
+      input[type="search"] {
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
+      }
+    }
+
+    .ant-select-selection-placeholder {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
+    .ant-select-selection-item {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+    }
+  }
+
+  .ant-select-arrow {
+    width: 14px;
+    height: 14px;
+
+    font-size: 14px;
+  }
+
+  .ant-select-clear {
+    width: 14px;
+    height: 14px;
+
+    font-size: 14px;
+  }
+
+  .ant-tree-select-dropdown {
+    position: fixed;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+
+    .ant-select-tree,
+    .ant-select-tree-treenode,
+    .ant-select-tree-node-content-wrapper,
+    .ant-select-tree-title {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    .ant-select-tree-switcher {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      width: var(--tree-switcher-width);
+      margin-inline-start: var(--tree-switcher-gap);
+      margin-inline-end: var(--tree-switcher-gap);
+
+      &::before {
+        width: var(--tree-switcher-width);
+        height: 100%;
+      }
+    }
+
+    .ant-select-tree-indent-unit {
+      width: var(--tree-indent-unit-width);
+    }
+
+    .ant-empty,
+    .ant-empty-description {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    .ant-select-tree-list-scrollbar {
+      width: 5px !important;
+
+      > div {
+        background: rgba(127, 127, 127, 0.4) !important;
+      }
+    }
+  }
+}

package/lib/components/Select/_components/Prefix/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+interface PrefixProps {
+    prefix: ReactNode;
+}
+export declare const Prefix: React.FC<PrefixProps>;
+export {};

package/lib/components/Select/_components/Prefix/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Prefix = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _indexModule = _interopRequireDefault(require("../../index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Prefix = ({
+  prefix
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: _indexModule.default.prefix,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "ant-input-prefix",
+      children: prefix
+    })
+  });
+};
+exports.Prefix = Prefix;

package/lib/components/Select/_components/Suffix/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+interface SuffixProps {
+    suffix: ReactNode;
+}
+export declare const Suffix: React.FC<SuffixProps>;
+export {};

package/lib/components/Select/_components/Suffix/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Suffix = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _indexModule = _interopRequireDefault(require("../../index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Suffix = ({
+  suffix
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: _indexModule.default.suffix,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "ant-input-suffix",
+      children: suffix
+    })
+  });
+};
+exports.Suffix = Suffix;

package/lib/components/Select/_hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSelectComposition } from "./useSelectComposition";
+export { useSelectInputOptions } from "./useSelectInputOptions";
+export { useSelectPopupPosition } from "./useSelectPopupPosition";

package/lib/components/Select/_hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSelectComposition", {
+  enumerable: true,
+  get: function () {
+    return _useSelectComposition.useSelectComposition;
+  }
+});
+Object.defineProperty(exports, "useSelectInputOptions", {
+  enumerable: true,
+  get: function () {
+    return _useSelectInputOptions.useSelectInputOptions;
+  }
+});
+Object.defineProperty(exports, "useSelectPopupPosition", {
+  enumerable: true,
+  get: function () {
+    return _useSelectPopupPosition.useSelectPopupPosition;
+  }
+});
+var _useSelectComposition = require("./useSelectComposition");
+var _useSelectInputOptions = require("./useSelectInputOptions");
+var _useSelectPopupPosition = require("./useSelectPopupPosition");

package/lib/components/Select/_hooks/useSelectComposition.d.ts

@@ -0,0 +1,10 @@
+interface UseSelectCompositionProps {
+    onSearch?: (value: string) => void;
+}
+/**
+ * 管理输入法组合状态
+ */
+export declare function useSelectComposition({ onSearch, }: UseSelectCompositionProps): {
+    isComposing: boolean;
+};
+export {};

package/lib/components/Select/_hooks/useSelectComposition.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectComposition = useSelectComposition;
+var _react = require("react");
+/**
+ * 管理输入法组合状态
+ */
+function useSelectComposition({
+  onSearch
+}) {
+  const [isComposing, setComposing] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const compositionend = () => {
+      setComposing(false);
+    };
+    const compositionstart = () => {
+      setComposing(true);
+    };
+    if (onSearch) {
+      window.addEventListener("compositionstart", compositionstart);
+      window.addEventListener("compositionend", compositionend);
+    }
+    return () => {
+      window.removeEventListener("compositionstart", compositionstart);
+      window.removeEventListener("compositionend", compositionend);
+    };
+  }, [onSearch]);
+  return {
+    isComposing
+  };
+}

package/lib/components/Select/_hooks/useSelectInputOptions.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SelectOption } from "..";
+interface UseSelectInputOptionsProps {
+    searchValue: string;
+    isComposing: boolean;
+    onChange?: (value: unknown) => void;
+    onSearch?: (value: string) => void;
+    optionsLength: number;
+}
+/**
+ * 管理输入选项（当没有匹配项时）
+ */
+export declare function useSelectInputOptions({ searchValue, isComposing, onChange, onSearch, optionsLength, }: UseSelectInputOptionsProps): {
+    inputOptions: SelectOption<string | number>[];
+    setInputOptions: import("react").Dispatch<import("react").SetStateAction<SelectOption<string | number>[]>>;
+};
+export {};

package/lib/components/Select/_hooks/useSelectInputOptions.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectInputOptions = useSelectInputOptions;
+var _react = require("react");
+/**
+ * 管理输入选项（当没有匹配项时）
+ */
+function useSelectInputOptions({
+  searchValue,
+  isComposing,
+  onChange,
+  onSearch,
+  optionsLength
+}) {
+  const [inputOptions, setInputOptions] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (!isComposing) {
+      onSearch?.(searchValue);
+    }
+  }, [inputOptions, isComposing, onChange, onSearch, optionsLength, searchValue]);
+  return {
+    inputOptions,
+    setInputOptions
+  };
+}

package/lib/components/Select/_hooks/useSelectPopupPosition.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare const useSelectPopupPosition: (selectRef: RefObject<HTMLDivElement>, open: boolean, cls: string) => void;

package/lib/components/Select/_hooks/useSelectPopupPosition.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectPopupPosition = void 0;
+var _react = require("react");
+var _utils = require("../_utils");
+const useSelectPopupPosition = (selectRef, open, cls) => {
+  (0, _react.useEffect)(() => {
+    const popup = document.querySelector(`.${cls}`);
+    let timer = null;
+    if (selectRef.current && popup) {
+      const current = selectRef.current;
+      if (open) {
+        popup.style.display = "block";
+        timer = setInterval(() => {
+          const selectTop = (0, _utils.getElementTop)(current);
+          const selectLeft = (0, _utils.getElementLeft)(current);
+          const alignBottom = !![...popup.classList.values()].find(i => i.includes("bottom"));
+          const [top, right, bottom] = popup.style.inset.split(" ");
+          const _left = `${selectLeft}px`;
+          if (alignBottom) {
+            const inset = `${selectTop + current.offsetHeight + 4}px ${right} ${bottom} ${_left}`;
+            if (inset !== popup.style.inset) {
+              popup.style.inset = inset;
+            }
+          } else {
+            const inset = `${top} ${right} ${window.innerHeight - selectTop + 4}px ${_left}`;
+            if (inset !== popup.style.inset) {
+              popup.style.inset = inset;
+            }
+          }
+        }, 1);
+      } else {
+        popup.style.display = "none";
+      }
+    }
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [cls, open, selectRef]);
+};
+exports.useSelectPopupPosition = useSelectPopupPosition;

package/lib/components/Select/_utils/calculatePopupWidth.d.ts

@@ -0,0 +1,13 @@
+import { SelectOption } from "..";
+interface CalculatePopupWidthOptions {
+    options: SelectOption[];
+    selectWidth: number;
+    mode?: string;
+    optionFontSize: number;
+    valueInlabel?: "before" | "after";
+}
+/**
+ * 计算弹出层宽度
+ */
+export declare function calculatePopupWidth({ options, selectWidth, mode, optionFontSize, valueInlabel, }: CalculatePopupWidthOptions): number;
+export {};

package/lib/components/Select/_utils/calculatePopupWidth.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculatePopupWidth = calculatePopupWidth;
+var _hsuUtils = require("hsu-utils");
+/**
+ * 计算弹出层宽度
+ */
+function calculatePopupWidth({
+  options,
+  selectWidth,
+  mode,
+  optionFontSize,
+  valueInlabel
+}) {
+  return options.reduce((max, option) => Math.max(max, (0, _hsuUtils.get_string_size)(valueInlabel ? `${option.label} - ${option.value}` : option.label, {
+    size: optionFontSize
+  }).width + (mode ? 50 : 30) + 8), selectWidth);
+}

package/lib/components/Select/_utils/filterOption.d.ts

@@ -0,0 +1,13 @@
+import { DefaultOptionType } from "antd/es/select";
+interface FilterOptionParams {
+    searchValue: string;
+    option?: DefaultOptionType;
+    isComposing: boolean;
+    customFilterOption?: (searchValue: string, option?: DefaultOptionType) => boolean;
+    valueInlabel?: "before" | "after";
+}
+/**
+ * 过滤选项
+ */
+export declare function filterOption({ searchValue, option, isComposing, customFilterOption, valueInlabel, }: FilterOptionParams): boolean;
+export {};

package/lib/components/Select/_utils/filterOption.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterOption = filterOption;
+/**
+ * 过滤选项
+ */
+function filterOption({
+  searchValue,
+  option,
+  isComposing,
+  customFilterOption,
+  valueInlabel
+}) {
+  if (customFilterOption) {
+    return customFilterOption(searchValue, option);
+  }
+  if (!isComposing) {
+    const isMatch = (valueInlabel ? `${option?.label ?? ""} - ${option?.value ?? ""}` : option?.label ?? "").toString().includes(searchValue.toString());
+    return isMatch;
+  }
+  return true;
+}

package/lib/components/Select/_utils/getElementPosition.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取元素相对于文档的顶部位置
+ */
+export declare function getElementTop(element: HTMLDivElement): number;
+/**
+ * 获取元素相对于文档的左侧位置
+ */
+export declare function getElementLeft(element: HTMLDivElement): number;

package/lib/components/Select/_utils/getElementPosition.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementLeft = getElementLeft;
+exports.getElementTop = getElementTop;
+/**
+ * 获取元素相对于文档的顶部位置
+ */
+function getElementTop(element) {
+  const rect = element.getBoundingClientRect();
+  return rect.top + document.documentElement.scrollTop;
+}
+
+/**
+ * 获取元素相对于文档的左侧位置
+ */
+function getElementLeft(element) {
+  const rect = element.getBoundingClientRect();
+  return rect.left + document.documentElement.scrollLeft;
+}

package/lib/components/Select/_utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getElementTop, getElementLeft } from "./getElementPosition";
+export { calculatePopupWidth } from "./calculatePopupWidth";
+export { filterOption } from "./filterOption";

package/lib/components/Select/_utils/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "calculatePopupWidth", {
+  enumerable: true,
+  get: function () {
+    return _calculatePopupWidth.calculatePopupWidth;
+  }
+});
+Object.defineProperty(exports, "filterOption", {
+  enumerable: true,
+  get: function () {
+    return _filterOption.filterOption;
+  }
+});
+Object.defineProperty(exports, "getElementLeft", {
+  enumerable: true,
+  get: function () {
+    return _getElementPosition.getElementLeft;
+  }
+});
+Object.defineProperty(exports, "getElementTop", {
+  enumerable: true,
+  get: function () {
+    return _getElementPosition.getElementTop;
+  }
+});
+var _getElementPosition = require("./getElementPosition");
+var _calculatePopupWidth = require("./calculatePopupWidth");
+var _filterOption = require("./filterOption");

package/lib/components/Select/index.d.ts

@@ -0,0 +1,23 @@
+import { SelectProps as AntdSelectProps } from "antd";
+import React, { ReactNode } from "react";
+import { DefaultOptionType } from "antd/es/select";
+export interface SelectOption<T = number | string> {
+    label: string;
+    value: T;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface SelectProps extends Omit<AntdSelectProps, "placement" | "filterOption"> {
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    selectClassName?: string;
+    arrowAnimation?: boolean;
+    popupMatchContentWidth?: boolean;
+    placement?: "bottomLeft" | "topLeft";
+    filterOption?: (searchValue: string, option?: DefaultOptionType) => boolean;
+    options?: SelectOption[];
+    optionFontSize?: number;
+    valueInlabel?: "before" | "after";
+}
+declare const Select: React.FC<SelectProps>;
+export default Select;