antd-mobile 5.0.0-rc.9 → 5.2.0

package/cjs/components/rate/rate.js

@@ -15,35 +15,33 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-rate";
-var defaultProps = {
+const classPrefix = `adm-rate`;
+const defaultProps = {
   count: 5,
   allowHalf: false,
-  character: /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.StarFill, null),
+  character: _react.default.createElement(_antdMobileIcons.StarFill, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true
 };
 
-var Rate = function Rate(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var starList = Array(props.count).fill(null);
+const Rate = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
-    var _classNames;
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])(classPrefix + "-star", (_classNames = {}, _classNames[classPrefix + "-star-active"] = value >= v, _classNames[classPrefix + "-star-half"] = half, _classNames[classPrefix + "-star-readonly"] = props.readOnly, _classNames)),
-      onClick: function onClick() {
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)(`${classPrefix}-star`, {
+        [`${classPrefix}-star-active`]: value >= v,
+        [`${classPrefix}-star-half`]: half,
+        [`${classPrefix}-star-readonly`]: props.readOnly
+      }),
+      onClick: () => {
         if (props.readOnly) return;
 
         if (props.allowClear && value === v) {
@@ -55,14 +53,12 @@ var Rate = function Rate(p) {
     }, props.character);
   }
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, starList.map(function (_, i) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: i,
-      className: (0, _classnames["default"])(classPrefix + "-box")
-    }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false));
-  })));
+  }, starList.map((_, i) => _react.default.createElement("div", {
+    key: i,
+    className: (0, _classnames.default)(`${classPrefix}-box`)
+  }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));
 };
 
 exports.Rate = Rate;

package/cjs/components/result/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./result.css");
 
 var _result2 = require("./result");
 
 var _default = _result2.Result;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/result/result.css

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 32px 12px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -16,7 +13,7 @@
   font-size: 52px;
 }
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 18px;
   line-height: 1.4;
   text-align: center;

package/cjs/components/result/result.js

@@ -13,10 +13,10 @@ var _antdMobileIcons = require("antd-mobile-icons");
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-result";
-var iconRecord = {
+const classPrefix = `adm-result`;
+const iconRecord = {
   success: _antdMobileIcons.CheckCircleFill,
   error: _antdMobileIcons.CloseCircleFill,
   info: _antdMobileIcons.InformationCircleFill,
@@ -24,23 +24,25 @@ var iconRecord = {
   warning: _antdMobileIcons.ExclamationCircleFill
 };
 
-var Result = function Result(props) {
-  var status = props.status,
-      title = props.title,
-      description = props.description,
-      icon = props.icon;
+const Result = props => {
+  const {
+    status,
+    title,
+    description,
+    icon
+  } = props;
   if (!status) return null;
 
-  var resultIcon = icon || /*#__PURE__*/_react["default"].createElement(iconRecord[status]);
+  const resultIcon = icon || _react.default.createElement(iconRecord[status]);
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + status)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-icon"
-  }, resultIcon), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-title"
-  }, title), description ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-description"
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${status}`)
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), description ? _react.default.createElement("div", {
+    className: `${classPrefix}-description`
   }, description) : null));
 };
 

package/cjs/components/safe-area/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./safe-area.css");
 
 var _safeArea2 = require("./safe-area");
 
 var _default = _safeArea2.SafeArea;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/safe-area/safe-area.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = 'adm-safe-area';
+const classPrefix = 'adm-safe-area';
 
-var SafeArea = function SafeArea(props) {
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-position-" + props.position)
+const SafeArea = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-position-${props.position}`)
   }));
 };
 

package/cjs/components/scroll-mask/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./scroll-mask.css");
 
 var _scrollMask2 = require("./scroll-mask");
 
 var _default = _scrollMask2.ScrollMask;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/scroll-mask/scroll-mask.js

@@ -13,74 +13,63 @@ var _web = require("@react-spring/web");
 
 var _ahooks = require("ahooks");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-scroll-mask";
+const classPrefix = `adm-scroll-mask`;
 
-var ScrollMask = function ScrollMask(props) {
-  var maskRef = (0, _react.useRef)(null);
-
-  var _useSpring = (0, _web.useSpring)(function () {
-    return {
-      leftMaskOpacity: 0,
-      rightMaskOpacity: 0,
-      config: {
-        clamp: true
-      }
-    };
-  }),
-      _useSpring$ = _useSpring[0],
-      leftMaskOpacity = _useSpring$.leftMaskOpacity,
-      rightMaskOpacity = _useSpring$.rightMaskOpacity,
-      api = _useSpring[1];
-
-  var _useThrottleFn = (0, _ahooks.useThrottleFn)(function (immediate) {
-    if (immediate === void 0) {
-      immediate = false;
+const ScrollMask = props => {
+  const maskRef = (0, _react.useRef)(null);
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, api] = (0, _web.useSpring)(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
     }
-
-    var mask = maskRef.current;
+  }));
+  const {
+    run: updateMask
+  } = (0, _ahooks.useThrottleFn)((immediate = false) => {
+    const mask = maskRef.current;
     if (!mask) return;
-    var scrollEl = props.scrollTrackRef.current;
+    const scrollEl = props.scrollTrackRef.current;
     if (!scrollEl) return;
-    var scrollLeft = scrollEl.scrollLeft;
-    var showLeftMask = scrollLeft > 0;
-    var showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
+    const scrollLeft = scrollEl.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
     api.start({
       leftMaskOpacity: showLeftMask ? 1 : 0,
       rightMaskOpacity: showRightMask ? 1 : 0,
-      immediate: immediate
+      immediate
     });
   }, {
     wait: 100,
     trailing: true,
     leading: true
-  }),
-      updateMask = _useThrottleFn.run;
-
-  (0, _react.useEffect)(function () {
+  });
+  (0, _react.useEffect)(() => {
     updateMask(true);
   }, []);
-  (0, _react.useEffect)(function () {
-    var scrollEl = props.scrollTrackRef.current;
+  (0, _react.useEffect)(() => {
+    const scrollEl = props.scrollTrackRef.current;
     if (!scrollEl) return;
     scrollEl.addEventListener('scroll', updateMask);
-    return function () {
-      return scrollEl.removeEventListener('scroll', updateMask);
-    };
+    return () => scrollEl.removeEventListener('scroll', updateMask);
   }, []);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_web.animated.div, {
     ref: maskRef,
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-left"),
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-left`),
     style: {
       opacity: leftMaskOpacity
     }
-  }), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-right"),
+  }), _react.default.createElement(_web.animated.div, {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-right`),
     style: {
       opacity: rightMaskOpacity
     }

package/cjs/components/search-bar/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./search-bar.css");
 
 var _searchBar2 = require("./search-bar");
 
 var _default = _searchBar2.SearchBar;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/search-bar/search-bar.css

@@ -1,11 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  --height: 32px;
+  --padding-left: 8px;
   --background: #f5f5f5;
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 .adm-search-bar .adm-search-bar-input-box {
   flex: auto;
@@ -15,24 +18,24 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-left: var(--padding-left);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
-  padding-left: 8px;
+  color: var(--adm-color-light);
   font-size: 16px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
-  height: 28px;
+  height: calc(var(--height) - 2px);
   box-sizing: border-box;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 15px;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 13px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
@@ -40,8 +43,15 @@
 }
 .adm-search-bar .adm-search-bar-suffix {
   flex: none;
-  margin-left: 16px;
+  margin-left: 4px;
+}
+.adm-search-bar .adm-search-bar-cancel-button.adm-button {
+  padding: 3px 12px;
+}
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
 }
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
+  background: var(--adm-color-white);
 }

package/cjs/components/search-bar/search-bar.d.ts

@@ -15,7 +15,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     onSearch?: (val: string) => void;
     onChange?: (val: string) => void;
     onCancel?: () => void;
-} & NativeProps<'--background' | '--border-radius' | '--placeholder-color'>;
+} & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
 export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
@@ -29,4 +29,4 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--placeholder-color" | "--background"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--placeholder-color" | "--background"> & React.RefAttributes<InputRef>>;

package/cjs/components/search-bar/search-bar.js

@@ -11,71 +11,62 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _input = _interopRequireDefault(require("../input"));
 
+var _button = _interopRequireDefault(require("../button"));
+
 var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _configProvider = require("../config-provider");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-search-bar";
-var defaultProps = {
+const classPrefix = `adm-search-bar`;
+const defaultProps = {
   clearable: true,
   showCancelButton: false,
   defaultValue: '',
   clearOnCancel: true,
-  icon: /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.SearchOutline, null)
+  icon: _react.default.createElement(_antdMobileIcons.SearchOutline, null)
 };
-var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
-  var _classNames, _classNames2;
-
-  var _useConfig = (0, _configProvider.useConfig)(),
-      locale = _useConfig.locale;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, {
+const SearchBar = (0, _react.forwardRef)((p, ref) => {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, {
     cancelText: locale.common.cancel
   }, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    clear: () => {
+      var _a;
 
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var _useState = (0, _react.useState)(false),
-      hasFocus = _useState[0],
-      setHasFocus = _useState[1];
-
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      clear: function clear() {
-        var _a;
-
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
-      },
-      focus: function focus() {
-        var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+    },
+    focus: () => {
+      var _a;
 
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      },
-      blur: function blur() {
-        var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
 
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    };
-  });
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+  }));
 
-  var renderCancelButton = function renderCancelButton() {
-    var isShowCancel = false;
+  const renderCancelButton = () => {
+    let isShowCancel = false;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);
@@ -83,16 +74,18 @@ var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
       isShowCancel = props.showCancelButton && hasFocus;
     }
 
-    return isShowCancel && /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-suffix"
-    }, /*#__PURE__*/_react["default"].createElement("a", {
-      onMouseDown: function onMouseDown(e) {
+    return isShowCancel && _react.default.createElement("div", {
+      className: `${classPrefix}-suffix`,
+      onMouseDown: e => {
         e.preventDefault();
       },
-      onTouchStart: function onTouchStart(e) {
+      onTouchStart: e => {
         e.preventDefault();
-      },
-      onClick: function onClick() {
+      }
+    }, _react.default.createElement(_button.default, {
+      fill: 'none',
+      className: `${classPrefix}-cancel-button`,
+      onClick: () => {
         var _a, _b, _c;
 
         if (props.clearOnCancel) {
@@ -105,27 +98,31 @@ var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     }, props.cancelText));
   };
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-input-box"
-  }, props.icon && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-input-box-icon"
-  }, props.icon), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-input-box`
+  }, props.icon && _react.default.createElement("div", {
+    className: `${classPrefix}-input-box-icon`
+  }, props.icon), _react.default.createElement(_input.default, {
     ref: inputRef,
-    className: (0, _classnames["default"])(classPrefix + "-input", (_classNames2 = {}, _classNames2[classPrefix + "-input-without-icon"] = !props.icon, _classNames2)),
+    className: (0, _classnames.default)(`${classPrefix}-input`, {
+      [`${classPrefix}-input-without-icon`]: !props.icon
+    }),
     value: value,
     onChange: setValue,
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
-    onFocus: function onFocus(e) {
+    onFocus: e => {
       var _a;
 
       setHasFocus(true);
       (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: function onBlur(e) {
+    onBlur: e => {
       var _a;
 
       setHasFocus(false);
@@ -134,7 +131,7 @@ var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     onClear: props.onClear,
     type: 'search',
     enterKeyHint: 'search',
-    onEnterPress: function onEnterPress() {
+    onEnterPress: () => {
       var _a, _b;
 
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();

package/cjs/components/selector/check-mark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckMark: React.MemoExoticComponent<() => JSX.Element>;