antd-mobile 5.0.0-rc.19 → 5.0.0-rc.22

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -14,7 +14,7 @@ export declare type Action = {
 export declare type SwipeActionProps = {
     rightActions?: Action[];
     leftActions?: Action[];
-    onAction?: (action: Action) => void;
+    onAction?: (action: Action, e: React.MouseEvent) => void;
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
@@ -22,7 +22,7 @@ export declare type SwipeActionProps = {
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
     leftActions?: Action[] | undefined;
-    onAction?: ((action: Action) => void) | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;

package/2x/es/components/swipe-action/swipe-action.js

@@ -147,7 +147,7 @@ export const SwipeAction = forwardRef((p, ref) => {
         }
 
         (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action);
+        (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, e);
       }
     }, action.text);
   }

package/2x/es/components/swiper/swiper.js

@@ -10,6 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
+import { useUpdateEffect } from 'ahooks';
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -71,6 +72,11 @@ export const Swiper = forwardRef(staged((p, ref) => {
     }
 
     const [current, setCurrent] = useState(props.defaultIndex);
+    useUpdateEffect(() => {
+      var _a;
+
+      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, current);
+    }, [current]);
     const [dragging, setDragging, draggingRef] = useRefState(false);
 
     function boundIndex(current) {
@@ -156,25 +162,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
     });
 
     function swipeTo(index, immediate = false) {
-      var _a, _b;
-
-      if (loop) {
-        const i = modulus(index, count);
-        setCurrent(i);
-        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
-        api.start({
-          position: index * 100,
-          immediate
-        });
-      } else {
-        const i = bound(index, 0, count - 1);
-        setCurrent(i);
-        (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, i);
-        api.start({
-          position: boundIndex(i) * 100,
-          immediate
-        });
-      }
+      const roundedIndex = Math.round(index);
+      const targetIndex = loop ? modulus(roundedIndex, count) : bound(roundedIndex, 0, count - 1);
+      setCurrent(targetIndex);
+      api.start({
+        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+        immediate
+      });
     }
 
     function swipeNext() {

package/2x/es/components/tabs/tabs.css

@@ -2,7 +2,7 @@
   --title-font-size: 34px;
   --content-padding: 24px;
   --active-line-height: 4px;
-  --active-line-border-radius: 0;
+  --active-line-border-radius: var(--active-line-height);
   position: relative;
 }
 

package/2x/es/components/tag/tag.css

@@ -1,7 +1,7 @@
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 4px);
-  padding: 6px 10px;
-  font-size: 24px;
+  padding: 4px 8px;
+  font-size: 22px;
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);
@@ -9,7 +9,7 @@
   display: inline-block;
   white-space: nowrap;
   border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
+  border: 2px solid var(--border-color);
   box-sizing: border-box;
 }
 

package/2x/es/components/virtual-input/virtual-input.d.ts

@@ -21,4 +21,4 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "disabled" | "onChange" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color" | "--text-align" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "disabled" | "onChange" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;

package/2x/es/utils/get-scroll-parent.js

@@ -1,5 +1,5 @@
 import { canUseDom } from './can-use-dom';
-const overflowScrollReg = /scroll|auto/i;
+const overflowScrollReg = /scroll|auto|overlay/i;
 const defaultRoot = canUseDom ? window : undefined;
 
 function isElement(node) {

package/2x/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.19",
+  "version": "5.0.0-rc.22",
   "dependencies": {
     "@react-spring/web": "^9.4.2",
     "@types/resize-observer-browser": "^0.1.6",
     "@use-gesture/react": "^10.2.4",
-    "ahooks": "^3.1.5",
+    "ahooks": "^3.1.8",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",

package/README.md

@@ -30,7 +30,7 @@ If you have some question about how to use ant-mobile, you can start a [discussi
 
 Feel free to join our DingDing group:
 
-<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*wy8nQLwxbKYAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" /><img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*fo-tQ5wRk5QAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="360" />
+<img src="https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ" alt="ding-group" width="250" />
 
 ---
 

package/cjs/components/avatar/avatar.d.ts

@@ -5,5 +5,5 @@ export declare type AvatarProps = {
     src: string;
     fallback?: ReactNode;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size'>;
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> & NativeProps<'--size' | '--border-radius'>;
 export declare const Avatar: FC<AvatarProps>;

package/cjs/components/badge/badge.css

@@ -13,7 +13,7 @@
   border-radius: 100px;
   padding: 0 4px;
   font-size: 9px;
-  line-height: 1.2;
+  line-height: 14px;
   white-space: nowrap;
   background-color: var(--color);
   --right: 0;

package/cjs/components/button/button.css

@@ -28,8 +28,9 @@
 }
 .adm-button::before {
   position: absolute;
-  top: calc(var(--border-width) * -1);
-  left: calc(var(--border-width) * -1);
+  top: 0;
+  left: 0;
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
   width: 100%;
   height: 100%;
   background-color: #000;
@@ -48,7 +49,7 @@
 }
 .adm-button-default.adm-button-fill-none {
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0px;
 }
 .adm-button:not(.adm-button-default) {
   --text-color: var(--adm-color-white);

package/cjs/components/calendar/calendar.js

@@ -21,12 +21,16 @@ var _arrowLeftDouble = require("./arrow-left-double");
 
 var _configProvider = require("../config-provider");
 
+var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
+
 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 (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; }
 
+_dayjs.default.extend(_isoWeek.default);
+
 const classPrefix = 'adm-calendar';
 const defaultProps = {
   weekStartsOn: 'Sunday'

package/cjs/components/capsule-tabs/capsule-tabs.css

@@ -28,7 +28,7 @@
   margin: 0 auto;
   border-radius: 20px;
   cursor: pointer;
-  font-size: var(--adm-font-size-main);
+  font-size: 15px;
   text-align: center;
   white-space: nowrap;
   background-color: #f5f5f5;

package/cjs/components/check-list/check-list.css

@@ -1,6 +1,3 @@
-.adm-check-list-item .adm-list-item-content-main {
-  padding: 12px 0;
-}
 .adm-check-list-item-extra {
   font-size: 16px;
   line-height: 1;

package/cjs/components/checkbox/checkbox.css

@@ -13,7 +13,7 @@
 }
 .adm-checkbox .adm-checkbox-icon {
   flex: none;
-  border: 1px solid #ccc;
+  border: 1px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
   display: flex;
@@ -38,25 +38,17 @@
   cursor: not-allowed;
 }
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
-.adm-checkbox.adm-checkbox-disabled.adm-checkbox-indeterminate .adm-checkbox-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
-}
-.adm-checkbox.adm-checkbox-disabled.adm-checkbox-checked .adm-checkbox-icon {
-  color: #ccc;
-}
-.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon {
-  border-color: #ccc;
-  background-color: #ebedf0;
+.adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);
 }
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  border-color: var(--adm-color-primary);
   background-color: #ffffff;
   color: var(--adm-color-primary);
 }

package/cjs/components/checkbox/checkbox.js

@@ -94,7 +94,7 @@ const Checkbox = p => {
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block

package/cjs/components/date-picker/date-picker.d.ts

@@ -3,8 +3,8 @@ import type { PickerProps } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
 export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation'> & {
-    value?: Date;
-    defaultValue?: Date;
+    value?: Date | null;
+    defaultValue?: Date | null;
     onSelect?: (value: Date) => void;
     onConfirm?: (value: Date) => void;
     min?: Date;

package/cjs/components/dialog/dialog-action-button.js

@@ -49,6 +49,7 @@ const DialogActionButton = props => {
       'adm-dialog-button-bold': action.bold
     }),
     fill: 'none',
+    shape: 'rectangular',
     block: true,
     color: action.danger ? 'danger' : 'primary',
     loading: loading,

package/cjs/components/dialog/dialog.css

@@ -17,10 +17,19 @@
 }
 .adm-dialog-main {
   width: 100%;
+  max-height: 70vh;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.adm-dialog-main > * {
+  flex: none;
+}
+.adm-dialog-main > .adm-dialog-image-container {
+  flex: auto;
 }
 .adm-dialog-main .adm-dialog-body {
   padding: 20px 12px;
@@ -67,3 +76,6 @@
 .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
+.adm-dialog-image-container {
+  overflow-y: auto;
+}

package/cjs/components/dialog/dialog.js

@@ -97,11 +97,13 @@ const Dialog = p => {
     style: Object.assign({}, style),
     onClick: e => e.stopPropagation(),
     className: `${classPrefix}-main`
-  }, !!props.image && _react.default.createElement(_image.default, {
+  }, !!props.image && _react.default.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, _react.default.createElement(_image.default, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  }), _react.default.createElement("div", {
+  })), _react.default.createElement("div", {
     style: props.bodyStyle,
     className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
   }, _react.default.createElement(_space.default, {

package/cjs/components/error-block/error-block.d.ts

@@ -6,5 +6,5 @@ export declare type ErrorBlockProps = {
     image?: string | ReactElement;
     description?: ReactNode;
     fullPage?: boolean;
-} & NativeProps<'--image-height' | '--image-height-full-page'>;
+} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
 export declare const ErrorBlock: FC<ErrorBlockProps>;

package/cjs/components/floating-panel/floating-panel.d.ts

@@ -3,6 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type FloatingPanelProps = {
     anchors: number[];
     children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
 } & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
@@ -12,4 +13,5 @@ export declare type FloatingPanelRef = {
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
+    onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
 } & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/cjs/components/floating-panel/floating-panel.js

@@ -44,6 +44,11 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
     y: bounds.bottom,
     config: {
       tension: 300
+    },
+    onChange: result => {
+      var _a;
+
+      (_a = props.onHeightChange) === null || _a === void 0 ? void 0 : _a.call(props, result.value.y, y.isAnimating);
     }
   }));
   (0, _react2.useDrag)(state => {

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

@@ -28,6 +28,10 @@
 .adm-form-vertical .adm-form-item-footer {
   margin-top: 4px;
 }
+.adm-form-horizontal .adm-list-item-content-prefix {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .adm-form-item-label {
   color: #666666;
 }

package/cjs/components/form/form.css

@@ -1,5 +1,13 @@
 .adm-form .adm-list.adm-list {
   --padding-left: 20px;
+  --padding-right: 20px;
+}
+.adm-form-horizontal .adm-list.adm-list {
+  --prefix-width: 6em;
+  --align-items: stretch;
+}
+.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
+  align-self: center;
 }
 .adm-form .adm-form-footer {
   padding: 12px;

package/cjs/components/form/form.js

@@ -55,11 +55,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     lists.push(_react.default.createElement(_list.default, {
       header: currentHeader,
       key: count,
-      mode: mode,
-      style: {
-        '--prefix-width': '6em',
-        '--align-items': 'stretch'
-      }
+      mode: mode
     }, items));
     items = [];
   }

package/cjs/components/form/index.css

@@ -1,5 +1,13 @@
 .adm-form .adm-list.adm-list {
   --padding-left: 20px;
+  --padding-right: 20px;
+}
+.adm-form-horizontal .adm-list.adm-list {
+  --prefix-width: 6em;
+  --align-items: stretch;
+}
+.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
+  align-self: center;
 }
 .adm-form .adm-form-footer {
   padding: 12px;
@@ -34,6 +42,10 @@
 .adm-form-vertical .adm-form-item-footer {
   margin-top: 4px;
 }
+.adm-form-horizontal .adm-list-item-content-prefix {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .adm-form-item-label {
   color: #666666;
 }

package/cjs/components/image/image.d.ts

@@ -11,5 +11,6 @@ export declare type ImageProps = {
     lazy?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;

package/cjs/components/image/image.js

@@ -61,8 +61,11 @@ const Image = (0, _stagedComponents.staged)(p => {
       src: src,
       alt: props.alt,
       onClick: props.onClick,
-      onLoad: () => {
+      onLoad: e => {
+        var _a;
+
         setLoaded(true);
+        (_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, e);
       },
       onError: e => {
         var _a;

package/cjs/components/input/input.css

@@ -1,17 +1,22 @@
-.adm-input-wrapper {
+.adm-input {
   --font-size: 17px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
-  --disabled-color: var(--adm-color-weak);
   --text-align: left;
+  --background-color: transparent;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
+  background-color: var(--background-color);
 }
-.adm-input {
+.adm-input-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.adm-input-element {
   flex: auto;
   display: inline-block;
   box-sizing: border-box;
@@ -30,53 +35,50 @@
   min-height: 1.5em;
   text-align: var(--text-align);
 }
-.adm-input::placeholder {
+.adm-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-input:-webkit-autofill {
+.adm-input-element:-webkit-autofill {
   background-color: transparent;
 }
-.adm-input:disabled {
-  color: var(--disabled-color);
-  cursor: not-allowed;
-  opacity: 1;
-  -webkit-text-fill-color: var(--disabled-color);
-}
-.adm-input:read-only {
+.adm-input-element:read-only {
   cursor: default;
 }
-.adm-input:invalid {
+.adm-input-element:invalid {
   box-shadow: none;
 }
-.adm-input::-ms-clear {
+.adm-input-element::-ms-clear {
   display: none;
 }
-.adm-input::-webkit-search-cancel-button {
+.adm-input-element::-webkit-search-cancel-button {
   display: none;
 }
-.adm-input::-webkit-search-decoration {
+.adm-input-element::-webkit-search-decoration {
   display: none;
 }
-.adm-input[type='date'],
-.adm-input[type='time'],
-.adm-input[type='datetime-local'] {
+.adm-input-element[type='date'],
+.adm-input-element[type='time'],
+.adm-input-element[type='datetime-local'] {
   min-height: 1.5em;
 }
-.adm-input[type='search'] {
+.adm-input-element[type='search'] {
   -webkit-appearance: none;
 }
-.adm-input[readonly] {
+.adm-input-element[readonly] {
   pointer-events: none;
 }
 .adm-input-clear {
   flex: none;
   margin-left: 8px;
-  color: var(--placeholder-color);
-  padding: 3px;
+  color: var(--adm-color-light);
+  padding: 4px;
   cursor: pointer;
 }
+.adm-input-clear:active {
+  color: var(--adm-color-weak);
+}
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 14px;
+  font-size: 15px;
 }

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

@@ -13,7 +13,7 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
 export declare type InputRef = {
     clear: () => void;
     focus: () => void;
@@ -31,5 +31,5 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedH
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color" | "--text-align"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align"> & React.RefAttributes<InputRef>>;
 export {};

package/cjs/components/input/input.js

@@ -15,6 +15,10 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 (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; }
@@ -66,10 +70,10 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     };
   }, [props.enterKeyHint]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: `${classPrefix}-wrapper`
+    className: (0, _classnames.default)(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, _react.default.createElement("input", {
     ref: nativeInputRef,
-    className: classPrefix,
+    className: `${classPrefix}-element`,
     value: value,
     onChange: e => {
       setValue(e.target.value);
@@ -102,7 +106,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
     onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && hasFocus && _react.default.createElement("div", {
+  }), props.clearable && !!value && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -1,4 +1,5 @@
 .adm-jumbo-tabs {
+  --gap: 8px;
   position: relative;
 }
 .adm-jumbo-tabs-header {
@@ -12,6 +13,7 @@
   align-items: center;
   position: relative;
   overflow-x: scroll;
+  padding: 0 var(--gap);
   scrollbar-width: none;
 }
 .adm-jumbo-tabs-tab-list::-webkit-scrollbar {
@@ -19,7 +21,7 @@
 }
 .adm-jumbo-tabs-tab-wrapper {
   flex: auto;
-  padding: 0 12px;
+  padding: 0 calc(var(--gap) / 2);
   text-align: center;
 }
 .adm-jumbo-tabs-tab {
@@ -36,6 +38,7 @@
 }
 .adm-jumbo-tabs-tab-title {
   line-height: 24px;
+  padding: 0 4px;
 }
 .adm-jumbo-tabs-tab-description {
   width: min-content;