@aloudata/aloudata-design 2.13.17 → 2.14.0

package/dist/AldSelect/components/PopupContent.js

@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import React from 'react';
+export default function PopupContent(props) {
+  var content = props.content,
+    notFoundContent = props.notFoundContent,
+    dropdownRender = props.dropdownRender,
+    menuProps = props.menuProps;
+  var popupContent;
+  if (_.isNil(menuProps) || _.isEmpty(menuProps.items)) {
+    popupContent = notFoundContent;
+  } else {
+    popupContent = dropdownRender ? dropdownRender(content) : content;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, popupContent);
+}

package/dist/AldSelect/components/SearchBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare function SearchBox({ showSearch, value, onChange, onBlur, }: {
+    showSearch?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}): React.JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof SearchBox>;
+export default _default;

package/dist/AldSelect/components/SearchBox.js

@@ -0,0 +1,26 @@
+import Input from "../../Input";
+import React from 'react';
+import SearchLine from "../../Icon/components/SearchLine";
+function SearchBox(_ref) {
+  var _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  if (!showSearch) return null;
+  return /*#__PURE__*/React.createElement(Input, {
+    className: "beta-ald-select-search-box",
+    value: value,
+    size: "small",
+    bordered: false,
+    onBlur: onBlur,
+    prefix: /*#__PURE__*/React.createElement(SearchLine, {
+      size: 16
+    }),
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+    }
+  });
+}
+export default /*#__PURE__*/React.memo(SearchBox);

package/dist/AldSelect/components/Suffix.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DisplayValueType } from '../interface';
+export default function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displayValues, }: {
+    showArrow?: boolean;
+    allowClear?: boolean;
+    isActive?: boolean;
+    isHover?: boolean;
+    icon: React.ReactNode;
+    onClear?: () => void;
+    displayValues: DisplayValueType[];
+}): React.JSX.Element | null;

package/dist/AldSelect/components/Suffix.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import prefixCls from "../../_utils/prefixCls";
+import { ArrowDownRightFill, CloseCircleRightFill } from "../../Icon";
+export default function Suffix(_ref) {
+  var showArrow = _ref.showArrow,
+    allowClear = _ref.allowClear,
+    isActive = _ref.isActive,
+    isHover = _ref.isHover,
+    icon = _ref.icon,
+    onClear = _ref.onClear,
+    displayValues = _ref.displayValues;
+  var classNames = prefixCls('select');
+  if ((isActive || isHover) && allowClear && displayValues.length > 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('suffix', 'clear'),
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+      }
+    }, /*#__PURE__*/React.createElement(CloseCircleRightFill, {
+      size: 16,
+      color: "#6B7280"
+    }));
+  }
+  if (showArrow) {
+    var dropdownIcon = icon || /*#__PURE__*/React.createElement(ArrowDownRightFill, {
+      color: "#6B7280",
+      size: 16
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('suffix', 'arrow')
+    }, dropdownIcon);
+  }
+  return null;
+}

package/dist/AldSelect/hooks/useCache.d.ts

@@ -0,0 +1,6 @@
+import { DefaultOptionType, LabelInValueType, RawValueType } from '../interface';
+/**
+ * Cache `value` related LabeledValue & options.
+ */
+declare const _default: (labeledValues: LabelInValueType[], valueOptions: Map<RawValueType, DefaultOptionType>) => [LabelInValueType[], (val: RawValueType) => DefaultOptionType];
+export default _default;

package/dist/AldSelect/hooks/useCache.js

@@ -0,0 +1,50 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import * as React from 'react';
+/**
+ * Cache `value` related LabeledValue & options.
+ */
+export default (function (labeledValues, valueOptions) {
+  var cacheRef = React.useRef({
+    values: new Map(),
+    options: new Map()
+  });
+  var filledLabeledValues = React.useMemo(function () {
+    var _cacheRef$current = cacheRef.current,
+      prevValueCache = _cacheRef$current.values,
+      prevOptionCache = _cacheRef$current.options;
+
+    // Fill label by cache
+    var patchedValues = labeledValues.map(function (item) {
+      if (item.label === undefined) {
+        var _prevValueCache$get;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          label: (_prevValueCache$get = prevValueCache.get(item.value)) === null || _prevValueCache$get === void 0 ? void 0 : _prevValueCache$get.label
+        });
+      }
+      return item;
+    });
+
+    // Refresh cache
+    var valueCache = new Map();
+    var optionCache = new Map();
+    patchedValues.forEach(function (item) {
+      valueCache.set(item.value, item);
+      var option = valueOptions.get(item.value) || prevOptionCache.get(item.value);
+      if (option) {
+        optionCache.set(item.value, option);
+      }
+    });
+    cacheRef.current.values = valueCache;
+    cacheRef.current.options = optionCache;
+    return patchedValues;
+  }, [labeledValues, valueOptions]);
+  var getOption = React.useCallback(function (val) {
+    return valueOptions.get(val) || cacheRef.current.options.get(val);
+  }, [valueOptions]);
+  return [filledLabeledValues, getOption];
+});

package/dist/AldSelect/hooks/useDisplayMenu.d.ts

@@ -0,0 +1,3 @@
+import { MenuProps } from '../../Menu';
+import { DefaultOptionType } from '../interface';
+export default function useDisplayMenu(menu: MenuProps, filterOptions?: (inputValue: string, option: DefaultOptionType) => boolean, innerSearchValue?: string): MenuProps;

package/dist/AldSelect/hooks/useDisplayMenu.js

@@ -0,0 +1,60 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useCallback, useMemo } from 'react';
+import { isDivideMenuItem, isHeaderMenuItem, isSubMenuItem } from "../../Menu";
+export default function useDisplayMenu(menu, filterOptions, innerSearchValue) {
+  var items = menu.items;
+  var filter = useCallback(function (inputValue, option) {
+    if (filterOptions) {
+      return filterOptions(inputValue, option);
+    }
+    var toBeSearched = option.label || option.value || '';
+    return toBeSearched.toString().includes(inputValue);
+  }, [filterOptions]);
+  var findFilteredItems = useCallback(function (currentItems) {
+    return currentItems.filter(function (item) {
+      if (isSubMenuItem(item)) {
+        return findFilteredItems(item.children);
+      } else if (isHeaderMenuItem(item)) {
+        return true;
+      } else if (isDivideMenuItem(item)) {
+        return true;
+      }
+      return filter === null || filter === void 0 ? void 0 : filter(innerSearchValue || '', {
+        label: item.label,
+        value: item.key
+      });
+    }).reduceRight(function (prev, current) {
+      var prevItem = prev[0];
+      if (isHeaderMenuItem(current) || isDivideMenuItem(current)) {
+        if (!prevItem || isHeaderMenuItem(prevItem) || isDivideMenuItem(prevItem)) {
+          return prev;
+        }
+      } else if (isSubMenuItem(current)) {
+        if (current.children.length === 0) {
+          return prev;
+        }
+      }
+      return [current].concat(_toConsumableArray(prev));
+    }, []);
+  }, [innerSearchValue, filter]);
+  var filteredItems = useMemo(function () {
+    return findFilteredItems(items);
+  }, [findFilteredItems, items]);
+  if (!innerSearchValue) {
+    return menu;
+  }
+  return _objectSpread(_objectSpread({}, menu), {}, {
+    items: filteredItems
+  });
+}

package/dist/AldSelect/hooks/useLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+export default function useLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/dist/AldSelect/hooks/useLayoutEffect.js

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from 'react';
+import { isBrowserClient } from "../utils/commonUtil";
+
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+export default function useLayoutEffect(effect, deps) {
+  // Never happen in test env
+  if (isBrowserClient) {
+    /* istanbul ignore next */
+    React.useLayoutEffect(effect, deps);
+  } else {
+    React.useEffect(effect, deps);
+  }
+}
+/* eslint-enable */

package/dist/AldSelect/hooks/useOptions.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultOptionType, DraftValueType, RawValueType } from '../interface';
+import { ItemType, MenuProps, SubMenuType } from '../../Menu';
+export declare function isRawValue(value: DraftValueType): value is RawValueType;
+/**
+ * Parse `children` to `options` if `options` is not provided.
+ * Then flatten the `options`.
+ */
+export default function useOptions<OptionType extends DefaultOptionType>(menu?: MenuProps, options?: OptionType[], value?: DraftValueType): {
+    menu: MenuProps;
+    keyMenuItems: Map<string, ItemType | SubMenuType>;
+};

package/dist/AldSelect/hooks/useOptions.js

@@ -0,0 +1,63 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import * as React from 'react';
+import { isDivideMenuItem, isHeaderMenuItem, isSubMenuItem } from "../../Menu";
+import { convertOptionsToMenu, toArray } from "../utils/commonUtil";
+export function isRawValue(value) {
+  return !value || _typeof(value) !== 'object';
+}
+/**
+ * Parse `children` to `options` if `options` is not provided.
+ * Then flatten the `options`.
+ */
+export default function useOptions(menu, options, value) {
+  return React.useMemo(function () {
+    var selectedKeys = [];
+    if (value) {
+      var valueList = toArray(value);
+      valueList.forEach(function (val) {
+        if (isRawValue(val)) {
+          selectedKeys.push(val.toString());
+        } else {
+          var key = val.value;
+          if (key) {
+            selectedKeys.push(key.toString());
+          }
+        }
+      });
+    }
+    var mergedMenu = menu ? _objectSpread(_objectSpread({}, menu), {}, {
+      items: (menu === null || menu === void 0 ? void 0 : menu.items) || [],
+      selectedKeys: selectedKeys
+    }) : convertOptionsToMenu(options || [], selectedKeys);
+    var keyMenuItems = new Map();
+    // const labelMenuItems = new Map<React.ReactNode, MenuItemType>();
+
+    function dig(menuItems) {
+      // for loop to speed up collection speed
+      for (var i = 0; i < menuItems.length; i += 1) {
+        var menuItem = menuItems[i];
+        if (isDivideMenuItem(menuItem) || isHeaderMenuItem(menuItem)) {
+          continue;
+        }
+        if (isSubMenuItem(menuItem)) {
+          dig(menuItem.children);
+          continue;
+        } else {
+          keyMenuItems.set(menuItem.key, menuItem);
+          // labelMenuItems.set(menuItem.label, menuItem);
+        }
+      }
+    }
+
+    dig(mergedMenu.items || []);
+    return {
+      menu: mergedMenu,
+      keyMenuItems: keyMenuItems
+    };
+  }, [options, menu, value]);
+}

package/dist/AldSelect/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BaseSelectRef, DefaultOptionType, ISelectProps } from './interface';
+declare const _default: React.ForwardRefExoticComponent<ISelectProps<any, DefaultOptionType> & React.RefAttributes<BaseSelectRef>>;
+export default _default;

package/dist/AldSelect/index.js

@@ -0,0 +1,224 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import useOptions, { isRawValue } from "./hooks/useOptions";
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { toArray } from "./utils/commonUtil";
+import useCache from "./hooks/useCache";
+import BaseSelect, { isMultiple } from "./BaseSelect";
+import { injectPropsWithOption } from "./utils/valueUtil";
+import useDisplayMenu from "./hooks/useDisplayMenu";
+export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    mode = props.mode,
+    menu = props.menu,
+    options = props.options,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    onDeselect = props.onDeselect,
+    labelInValue = props.labelInValue,
+    filterOption = props.filterOption,
+    searchValue = props.searchValue;
+
+  // =========================== Values ===========================
+  var _useMergedState = useMergedState(defaultValue, {
+      value: value
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    internalValue = _useMergedState2[0],
+    setInternalValue = _useMergedState2[1];
+  var parsedOptions = useOptions(menu, options, internalValue);
+  var mergedMenu = parsedOptions.menu,
+    keyMenuItems = parsedOptions.keyMenuItems;
+  var multiple = mode && isMultiple(mode);
+  // ============================== SearchValue ==============================
+  var _useMergedState3 = useMergedState(undefined, {
+      value: searchValue
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    innerSearchValue = _useMergedState4[0],
+    setInnerSearchValue = _useMergedState4[1];
+  // ========================= Wrap Value =========================
+  var convert2LabelValues = React.useCallback(function (draftValues) {
+    // Convert to array
+    var valueList = toArray(draftValues);
+
+    // Convert to labelInValue type
+    return valueList.map(function (val) {
+      var rawValue;
+      var rawLabel;
+      var rawDisabled;
+      if (isRawValue(val)) {
+        rawValue = val;
+      } else {
+        rawLabel = val.label;
+        rawValue = val.value;
+      }
+      var menuItem = keyMenuItems.get(rawValue.toString());
+      if (menuItem) {
+        // Fill missing props
+        if (rawLabel === undefined) {
+          rawLabel = menuItem.label;
+        }
+        rawDisabled = menuItem.disabled;
+      }
+      return {
+        label: rawLabel,
+        value: rawValue,
+        disabled: rawDisabled
+      };
+    });
+  }, [keyMenuItems]);
+
+  // Merged value with LabelValueType
+  var rawLabeledValues = React.useMemo(function () {
+    var values = convert2LabelValues(internalValue);
+    return values;
+  }, [internalValue, convert2LabelValues]);
+
+  // Fill label with cache to avoid option remove
+  var _useCache = useCache(rawLabeledValues, keyMenuItems),
+    _useCache2 = _slicedToArray(_useCache, 2),
+    mergedValues = _useCache2[0],
+    getMixedOption = _useCache2[1];
+  var displayValues = React.useMemo(function () {
+    // `null` need show as placeholder instead
+    if (!mode && mergedValues.length === 1) {
+      var firstValue = mergedValues[0];
+      if (firstValue.value === null && (firstValue.label === null || firstValue.label === undefined)) {
+        return [];
+      }
+    }
+    return mergedValues.map(function (item) {
+      var _item$label;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        label: (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.value
+      });
+    });
+  }, [mode, mergedValues]);
+
+  // =========================== Change ===========================
+  var triggerChange = useCallback(function (values) {
+    var labeledValues = convert2LabelValues(values);
+    setInternalValue(labeledValues);
+    if (onChange && (
+    // Trigger event only when value changed
+    labeledValues.length !== mergedValues.length || labeledValues.some(function (newVal, index) {
+      var _mergedValues$index;
+      return ((_mergedValues$index = mergedValues[index]) === null || _mergedValues$index === void 0 ? void 0 : _mergedValues$index.value) !== (newVal === null || newVal === void 0 ? void 0 : newVal.value);
+    }))) {
+      var returnValues = labelInValue ? labeledValues : labeledValues.map(function (v) {
+        return v.value;
+      });
+      var returnOptions = labeledValues.map(function (v) {
+        return injectPropsWithOption(getMixedOption(v.value));
+      });
+      onChange(
+      // Value
+      multiple ? returnValues : returnValues[0],
+      // Option
+      multiple ? returnOptions : returnOptions[0]);
+    }
+  }, [convert2LabelValues, setInternalValue, onChange, mergedValues, labelInValue, multiple, getMixedOption]);
+  // ========================= OptionList =========================
+  var triggerSelect = function triggerSelect(val, selected, type) {
+    var getSelectEnt = function getSelectEnt() {
+      var option = getMixedOption(val);
+      return [labelInValue ? {
+        label: option.label,
+        value: val
+      } : val, injectPropsWithOption(option)];
+    };
+    if (selected && onSelect) {
+      var _getSelectEnt = getSelectEnt(),
+        _getSelectEnt2 = _slicedToArray(_getSelectEnt, 2),
+        wrappedValue = _getSelectEnt2[0],
+        option = _getSelectEnt2[1];
+      onSelect(wrappedValue, option);
+    } else if (!selected && onDeselect && type !== 'clear') {
+      var _getSelectEnt3 = getSelectEnt(),
+        _getSelectEnt4 = _slicedToArray(_getSelectEnt3, 2),
+        _wrappedValue = _getSelectEnt4[0],
+        _option = _getSelectEnt4[1];
+      onDeselect(_wrappedValue, _option);
+    }
+  };
+  // Used for OptionList selection
+  var onOptionSelect = function onOptionSelect(val) {
+    var selected = displayValues.find(function (item) {
+      return item.value.toString() === val;
+    });
+    if (isMultiple(mode)) {
+      if (!selected) {
+        triggerSelect(val, true, 'add');
+      } else {
+        triggerSelect(val, false, 'remove');
+      }
+    } else {
+      triggerSelect(val, true, 'add');
+    }
+  };
+  // ======================= Display Change =======================
+  // BaseSelect display values change
+  var onDisplayValuesChange = function onDisplayValuesChange(nextValues, info) {
+    triggerChange(nextValues);
+    var type = info.type,
+      values = info.values;
+    if (type === 'remove' || type === 'clear') {
+      values.forEach(function (item) {
+        triggerSelect(item.value, false, type);
+      });
+    }
+  };
+  var selectMenu = useMemo(function () {
+    return _objectSpread(_objectSpread({}, mergedMenu), {}, {
+      items: (mergedMenu === null || mergedMenu === void 0 ? void 0 : mergedMenu.items) || [],
+      onClick: function onClick(menuInfo) {
+        var _mergedMenu$onClick;
+        if (mode && isMultiple(mode)) {
+          if (displayValues.find(function (item) {
+            return item.value.toString() === menuInfo.key;
+          })) {
+            triggerChange(displayValues.filter(function (item) {
+              return item.value.toString() !== menuInfo.key;
+            }).map(function (item) {
+              return item.value;
+            }));
+          } else {
+            triggerChange([].concat(_toConsumableArray(displayValues), [menuInfo.key]));
+          }
+        } else {
+          triggerChange(menuInfo.key);
+        }
+        mergedMenu === null || mergedMenu === void 0 ? void 0 : (_mergedMenu$onClick = mergedMenu.onClick) === null || _mergedMenu$onClick === void 0 ? void 0 : _mergedMenu$onClick.call(mergedMenu, menuInfo);
+      }
+    });
+  }, [mergedMenu, mode, displayValues, triggerChange]);
+  var displayMenu = useDisplayMenu(selectMenu, filterOption, innerSearchValue);
+  return /*#__PURE__*/React.createElement(BaseSelect, _extends({}, props, {
+    ref: ref,
+    displayValues: displayValues,
+    onDisplayValuesChange: onDisplayValuesChange,
+    setInnerSearchValue: setInnerSearchValue,
+    innerSearchValue: innerSearchValue,
+    onOptionSelect: onOptionSelect,
+    menu: selectMenu,
+    displayMenu: displayMenu
+  }));
+});

package/dist/AldSelect/interface.d.ts

@@ -0,0 +1,91 @@
+/// <reference types="react" />
+import { PlacementType } from '../Dropdown';
+import { MenuProps } from '../Menu';
+import { CustomTagProps, Mode } from './BaseSelect';
+type ArrayElementType<T> = T extends (infer E)[] ? E : T;
+export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> {
+    prefix?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large';
+    mode?: Mode;
+    status?: 'success' | 'error';
+    suffixIcon?: React.ReactNode;
+    className?: string;
+    id?: string;
+    disabled?: boolean;
+    showSearch?: boolean;
+    searchValue?: string;
+    allowClear?: boolean;
+    showArrow?: boolean;
+    borderLess?: boolean;
+    width?: 'auto' | 'fill' | number;
+    dropdownClassName?: string;
+    popupClassName?: string;
+    placement?: PlacementType;
+    labelInValue?: boolean;
+    options?: OptionType[];
+    menu?: MenuProps;
+    value?: ValueType | null;
+    defaultValue?: ValueType | null;
+    onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
+    placeholder?: string;
+    onClear?: () => void;
+    dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
+    dropdownStyle?: React.CSSProperties;
+    overlayStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    popupMatchSelectWidth?: boolean;
+    onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    notFoundContent?: React.ReactNode;
+    filterOption?: (inputValue: string, option: OptionType) => boolean;
+    tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;
+    maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export interface BaseOptionType {
+    disabled?: boolean;
+    [name: string]: any;
+}
+export type SelectHandler<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> = ((value: RawValueType | LabelInValueType, option: OptionType) => void) | ((value: ValueType, option: OptionType) => void);
+export interface BaseSelectRef {
+    focus: () => void;
+    blur: () => void;
+    open: () => void;
+    close: () => void;
+}
+export interface DisplayValueType {
+    key?: React.Key;
+    value?: RawValueType;
+    label?: React.ReactNode;
+    title?: React.ReactNode;
+    disabled?: boolean;
+}
+export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export type ScrollConfig = {
+    index: number;
+    align?: ScrollAlign;
+    offset?: number;
+} | {
+    key: React.Key;
+    align?: ScrollAlign;
+    offset?: number;
+};
+export type RawValueType = string | number;
+export interface LabelInValueType {
+    label: React.ReactNode;
+    value: RawValueType;
+    disabled?: boolean;
+}
+export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
+export type RenderDOMFunc = (triggerNode: HTMLElement) => HTMLElement;
+export type DisplayInfoType = 'add' | 'remove' | 'clear';
+export interface DefaultOptionType extends BaseOptionType {
+    label?: React.ReactNode;
+    value?: string | number | null;
+    children?: Omit<DefaultOptionType, 'children'>[];
+}
+export {};

package/dist/AldSelect/interface.js

@@ -0,0 +1 @@
+export {};