antd-mobile 5.0.0-rc.5 → 5.0.0-rc.9

package/2x/README.md

@@ -15,7 +15,12 @@ $ npm install --save antd-mobile@next
 $ yarn add antd-mobile@next
 ```
 
-v5(Poplar) is the next major version of antd-mobile, which is still working in progress. If you plan to use it in production, **please read the [FAQ](https://mobile.ant.design/guide/faq) chapter first**.
+- **Fast**: It is carefully optimized for harsh scenes, without configuration, you can have the best package size and ultimate performance.
+- **Customizable**: Based on CSS variables, you can reliably and efficiently adjust the appearance of components or create your own themes.
+- **Atomic**: The function of each component, neither more nor less, is exactly what you need.
+- **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.
+
+v5(Poplar) is the next major version of antd-mobile, we recommend using it instead of v2.
 
 You can also play with antd-mobile just in browser with [Codesandbox](https://codesandbox.io/s/antd-mobile-snrxr?file=/package.json). No need to prepare development environment.
 
@@ -23,6 +28,10 @@ If you found bugs or would like to request some new features, please consider op
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
+Feel free to join our DingDing group:
+
+<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*fo-tQ5wRk5QAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" />
+
 ---
 
 Thanks to all the contributors of antd-mobile:

package/2x/cjs/components/cascader/cascader.d.ts

@@ -13,8 +13,8 @@ export declare type CascaderProps = {
     onClose?: () => void;
     visible?: boolean;
     title?: ReactNode;
-    confirmText?: string;
-    cancelText?: string;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
     children?: (items: (CascaderOption | null)[]) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
 export declare const Cascader: FC<CascaderProps>;

package/2x/cjs/components/checkbox/checkbox.css

@@ -81,7 +81,7 @@
 }
 
 .adm-checkbox-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/2x/cjs/components/date-picker/date-picker.js

@@ -52,7 +52,7 @@ var DatePicker = function DatePicker(p) {
   var onConfirm = (0, _react.useCallback)(function (val) {
     setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
   }, [setValue, props.precision]);
-  var onSelect = (0, _ahooks.usePersistFn)(function (val) {
+  var onSelect = (0, _ahooks.useMemoizedFn)(function (val) {
     var _a;
 
     var date = (0, _datePickerUtils.convertStringArrayToDate)(val, props.precision);

package/2x/cjs/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/2x/cjs/components/dialog/dialog.js

@@ -95,13 +95,15 @@ var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/2x/cjs/components/form/form-item.css

@@ -5,6 +5,7 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
   color: #666;
   position: relative;
@@ -22,7 +23,7 @@
   color: var(--adm-color-danger);
 }
 
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 

package/2x/cjs/components/form/form-item.js

@@ -65,7 +65,7 @@ var FormItemLayout = function FormItemLayout(props) {
       hidden = props.hidden,
       errors = props.errors;
   var context = (0, _react.useContext)(_context.FormContext);
-  var hasFeedback = props.hasFeedback || context.hasFeedback;
+  var hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   var layout = props.layout || context.layout;
   var feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
   var labelElement = label ? /*#__PURE__*/_react["default"].createElement("label", {

package/2x/cjs/components/form/index.css

@@ -13,6 +13,7 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
   color: #666;
   position: relative;
@@ -30,7 +31,7 @@
   color: var(--adm-color-danger);
 }
 
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 

package/2x/cjs/components/image/lazy-detector.js

@@ -15,7 +15,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var LazyDetector = function LazyDetector(props) {
   var ref = (0, _react.useRef)(null);
-  var inViewport = (0, _ahooks.useInViewport)(ref);
+
+  var _useInViewport = (0, _ahooks.useInViewport)(ref),
+      inViewport = _useInViewport[0];
+
   (0, _react.useEffect)(function () {
     if (inViewport) {
       props.onActive();

package/2x/cjs/components/image-uploader/image-uploader.js

@@ -79,7 +79,7 @@ var ImageUploader = function ImageUploader(p) {
       value = _usePropsValue[0],
       setValue = _usePropsValue[1];
 
-  var updateValue = (0, _ahooks.usePersistFn)(function (updater) {
+  var updateValue = (0, _ahooks.useMemoizedFn)(function (updater) {
     setValue(updater(value));
   });
 
@@ -190,9 +190,8 @@ var ImageUploader = function ImageUploader(p) {
                             });
                           });
                           updateValue(function (prev) {
-                            return [].concat(prev, [{
-                              url: result.url
-                            }]);
+                            var newVal = Object.assign({}, result);
+                            return [].concat(prev, [newVal]);
                           });
                           _context.next = 12;
                           break;

package/2x/cjs/components/image-viewer/slide.js

@@ -107,11 +107,6 @@ var Slide = function Slide(props) {
       }
     },
     pinch: {
-      transform: function transform(_ref) {
-        var d = _ref[0],
-            a = _ref[1];
-        return [d < 0 ? d * 0.5 : d * 2, 0];
-      },
       from: function from() {
         return [zoom.get(), 0];
       }

package/2x/cjs/components/index-bar/index-bar.css

@@ -58,7 +58,7 @@
 
 .adm-index-bar-sidebar-row {
   cursor: pointer;
-  width: 100%;
+  width: auto;
   text-align: right;
   position: relative;
   padding: 0 24px;

package/2x/cjs/components/infinite-scroll/infinite-scroll.js

@@ -43,7 +43,7 @@ var InfiniteScroll = function InfiniteScroll(p) {
   });
   var elementRef = (0, _react.useRef)(null);
   var checkTimeoutRef = (0, _react.useRef)();
-  var check = (0, _ahooks.usePersistFn)(function () {
+  var check = (0, _ahooks.useMemoizedFn)(function () {
     window.clearTimeout(checkTimeoutRef.current);
     checkTimeoutRef.current = window.setTimeout(function () {
       if (!props.hasMore) return;

package/2x/cjs/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -19,7 +19,7 @@ export declare type InputRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/2x/cjs/components/mask/mask.js

@@ -99,9 +99,10 @@ var Mask = function Mask(p) {
   var node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({}, props.style), {
+    style: Object.assign(Object.assign({
       background: background,
-      opacity: opacity,
+      opacity: opacity
+    }, props.style), {
       display: active ? 'unset' : 'none'
     })
   }, props.onMaskClick && /*#__PURE__*/_react["default"].createElement("div", {

package/2x/cjs/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/2x/cjs/components/modal/modal.js

@@ -95,13 +95,15 @@ var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/2x/cjs/components/notice-bar/notice-bar.css

@@ -1,5 +1,6 @@
 .adm-notice-bar {
   height: 60px;
+  box-sizing: border-box;
   font-size: 28px;
   line-height: 60px;
   padding: 0 24px;

package/2x/cjs/components/number-keyboard/number-keyboard.js

@@ -66,7 +66,7 @@ var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = (0, _react.useRef)(-1);
   var intervalRef = (0, _react.useRef)(-1);
-  var onDelete = (0, _ahooks.usePersistFn)(function () {
+  var onDelete = (0, _ahooks.useMemoizedFn)(function () {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);

package/2x/cjs/components/picker/picker.d.ts

@@ -12,8 +12,8 @@ export declare type PickerProps = {
     onClose?: () => void;
     visible?: boolean;
     title?: ReactNode;
-    confirmText?: string;
-    cancelText?: string;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/2x/cjs/components/picker/picker.js

@@ -65,7 +65,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       setInnerValue = _useState[1];
 
   (0, _react.useEffect)(function () {
-    if (!props.visible) {
+    if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
@@ -74,7 +74,7 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = (0, _ahooks.usePersistFn)(function (val, ext) {
+  var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
     var _a;
 
     setInnerValue(val);
@@ -133,4 +133,5 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
 });
-exports.Picker = Picker;
+exports.Picker = Picker;
+Picker.displayName = 'Picker';

package/2x/cjs/components/picker-view/picker-view.css

@@ -5,6 +5,7 @@
   display: flex;
   position: relative;
   overflow: hidden;
+  background: var(--adm-color-white);
 }
 
 .adm-picker-view-column {

package/2x/cjs/components/picker-view/picker-view.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _column = require("./column");
+var _wheel = require("./wheel");
 
 var _useColumns = require("./use-columns");
 
@@ -50,31 +50,36 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
-  }, [props.value]); // Reset `innerValue` after 1s in case user does not update `value` when `onChange` is called
-
-  (0, _ahooks.useDebounceEffect)(function () {
-    if (props.value !== undefined && props.value !== innerValue) {
-      setInnerValue(props.value);
-    }
-  }, [props.value, innerValue], {
-    wait: 1000,
-    leading: false,
-    trailing: true
-  });
+  }, [props.value]);
+  (0, _react.useEffect)(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
   var columns = (0, _useColumns.useColumns)(props.columns, innerValue);
   var generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  var handleSelect = (0, _react.useCallback)(function (val, index) {
+    setInnerValue(function (prev) {
+      var next = [].concat(prev);
+      next[index] = val;
+      return next;
+    });
+  }, []);
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_column.Column, {
+    return /*#__PURE__*/_react["default"].createElement(_wheel.Wheel, {
       key: index,
+      index: index,
       column: column,
       value: innerValue[index],
-      onSelect: function onSelect(val) {
-        var nextInnerValue = [].concat(innerValue);
-        nextInnerValue[index] = val;
-        setInnerValue(nextInnerValue);
-      }
+      onSelect: handleSelect
     });
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-mask"
@@ -86,4 +91,5 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
     className: classPrefix + "-mask-bottom"
   }))));
 });
-exports.PickerView = PickerView;
+exports.PickerView = PickerView;
+PickerView.displayName = 'PickerView';

package/2x/cjs/components/picker-view/wheel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+interface Props {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+}
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};

package/2x/cjs/components/picker-view/{column.js → wheel.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Column = void 0;
+exports.Wheel = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,18 +17,24 @@ var _rubberband = require("../../utils/rubberband");
 
 var _bound = require("../../utils/bound");
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+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 _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-picker-view";
-
-var Column = function Column(props) {
+var Wheel = /*#__PURE__*/(0, _react.memo)(function (props) {
   var itemHeight = (0, _convertPx.convertPx)(34);
   var value = props.value,
-      onSelect = props.onSelect,
       column = props.column;
 
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
   var _useSpring = (0, _web.useSpring)(function () {
     return {
       from: {
@@ -54,20 +60,20 @@ var Column = function Column(props) {
     var finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
-      immediate: y.idle
+      immediate: y.goal !== finalPosition
     });
   }, [value, column]);
   (0, _react.useLayoutEffect)(function () {
     if (column.length === 0) {
       if (value !== null) {
-        props.onSelect(null);
+        onSelect(null);
       }
     } else {
       if (!column.some(function (item) {
         return item.value === value;
       })) {
         var firstItem = column[0];
-        props.onSelect(firstItem.value);
+        onSelect(firstItem.value);
       }
     }
   }, [column, value]);
@@ -77,7 +83,9 @@ var Column = function Column(props) {
     api.start({
       y: finalPosition
     });
-    onSelect(column[index].value);
+    var item = column[index];
+    if (!item) return;
+    onSelect(item.value);
   }
 
   var bind = (0, _react2.useDrag)(function (state) {
@@ -88,7 +96,7 @@ var Column = function Column(props) {
     if (state.last) {
       draggingRef.current = false;
       var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
-      var targetIndex = -Math.round((0, _bound.bound)(position, min, max) / itemHeight);
+      var targetIndex = min < max ? -Math.round((0, _bound.bound)(position, min, max) / itemHeight) : 0;
       scrollSelect(targetIndex);
     } else {
       var _position = state.offset[1];
@@ -109,8 +117,6 @@ var Column = function Column(props) {
   var selectedIndex = null;
 
   function renderAccessible() {
-    console.log('selectedIndex', selectedIndex);
-
     if (selectedIndex === null) {
       return null;
     }
@@ -171,6 +177,16 @@ var Column = function Column(props) {
       className: classPrefix + "-column-item-label"
     }, item.label));
   })), renderAccessible());
-};
+}, function (prev, next) {
+  if (prev.index !== next.index) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!(0, _isEqual["default"])(prev.column, next.column)) {
+    return false;
+  }
 
-exports.Column = Column;
+  return true;
+});
+exports.Wheel = Wheel;
+Wheel.displayName = 'Wheel';

package/2x/cjs/components/progress-bar/progress-bar.css

@@ -1,10 +1,12 @@
 .adm-progress-bar {
   --track-width: var(--adm-progress-bar-track-width, 6px);
+  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, #1677ff);
 }
 
 .adm-progress-bar-trail {
-  background: #e5e5e5;
+  background: var(--track-color);
+  overflow: hidden;
   height: var(--track-width);
   border-radius: var(--track-width);
 }

package/2x/cjs/components/progress-bar/progress-bar.d.ts

@@ -2,5 +2,5 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--fill-color'>;
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
 export declare const ProgressBar: FC<ProgressBarProps>;

package/2x/cjs/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -9,6 +9,7 @@ export declare type PullToRefreshProps = {
     completeDelay?: number;
     headHeight?: number;
     threshold?: number;
+    disabled?: boolean;
     renderText?: (status: PullStatus) => ReactNode;
 };
 export declare const defaultProps: {
@@ -17,6 +18,7 @@ export declare const defaultProps: {
     refreshingText: string;
     completeText: string;
     completeDelay: number;
+    disabled: boolean;
     onRefresh: () => void;
 };
 export declare const PullToRefresh: FC<PullToRefreshProps>;

package/2x/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -66,6 +66,7 @@ var defaultProps = {
   refreshingText: '加载中……',
   completeText: '刷新成功',
   completeDelay: 500,
+  disabled: false,
   onRefresh: function onRefresh() {}
 };
 exports.defaultProps = defaultProps;
@@ -244,6 +245,7 @@ var PullToRefresh = function PullToRefresh(p) {
     },
     axis: 'y',
     target: elementRef,
+    enabled: !props.disabled,
     eventOptions: _supportsPassive.supportsPassive ? {
       passive: false
     } : false

package/2x/cjs/components/radio/radio.css

@@ -60,7 +60,7 @@
 }
 
 .adm-radio-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/2x/cjs/components/rate/rate.css

@@ -16,6 +16,7 @@
   text-align: center;
   overflow: hidden;
   cursor: pointer;
+  box-sizing: border-box;
 }
 
 .adm-rate-star-half {

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

@@ -29,6 +29,7 @@
   flex: auto;
   padding: 8px 16px 8px 8px;
   height: 56px;
+  box-sizing: border-box;
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
@@ -40,6 +41,10 @@
   line-height: 38px;
 }
 
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 16px;
+}
+
 .adm-search-bar .adm-search-bar-suffix {
   flex: none;
   margin-left: 32px;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;
@@ -10,6 +10,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     clearable?: boolean;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
     cancelText?: string;
+    icon?: ReactNode;
     clearOnCancel?: boolean;
     onSearch?: (val: string) => void;
     onChange?: (val: string) => void;
@@ -23,6 +24,7 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     clearable?: boolean | undefined;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
     cancelText?: string | undefined;
+    icon?: ReactNode;
     clearOnCancel?: boolean | undefined;
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;