@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/cjs/packages/virtuallist/style/style.css

@@ -1,11 +1,15 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-horizontal-items {
   float: left;
 }
 .nut-horizontal-items li {
   display: block;
   float: left;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-gray-7);
+  background: var(--nutui-gray-1);
   padding: 10px;
   margin-right: 20px;
 }
@@ -18,8 +22,8 @@
 
 .nut-vertical-items li {
   display: block;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-gray-7);
+  background: var(--nutui-gray-1);
   border-radius: 7px;
   box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
   margin-top: 20px;

package/dist/cjs/packages/watermark/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-watermark {
   position: absolute;
   z-index: var(--nutui-watermark-z-index, 1200);

package/dist/cjs/packages/watermark/watermark.d.ts

@@ -6,6 +6,8 @@ export interface WaterMarkProps extends BasicComponent {
     zIndex: number;
     gapX: number;
     gapY: number;
+    startX: number;
+    startY: number;
     width: number;
     height: number;
     image: string;

package/dist/cjs/packages/watermark/watermark.js

@@ -28,6 +28,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     gapY: 48,
     width: 120,
     height: 64,
+    startX: 0,
+    startY: 0,
     image: '',
     imageWidth: 120,
     imageHeight: 64,
@@ -39,7 +41,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var WaterMark = function WaterMark(props) {
     var locale = (0, _index.useConfig)().locale;
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), content = _$_object_spread.content, fullPage = _$_object_spread.fullPage, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, gapX = _$_object_spread.gapX, gapY = _$_object_spread.gapY, width = _$_object_spread.width, height = _$_object_spread.height, image = _$_object_spread.image, imageWidth = _$_object_spread.imageWidth, imageHeight = _$_object_spread.imageHeight, rotate = _$_object_spread.rotate, color = _$_object_spread.color, fontStyle = _$_object_spread.fontStyle, fontFamily = _$_object_spread.fontFamily, fontWeight = _$_object_spread.fontWeight, fontSize = _$_object_spread.fontSize, style = _$_object_spread.style;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), content = _$_object_spread.content, fullPage = _$_object_spread.fullPage, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, gapX = _$_object_spread.gapX, gapY = _$_object_spread.gapY, startX = _$_object_spread.startX, startY = _$_object_spread.startY, width = _$_object_spread.width, height = _$_object_spread.height, image = _$_object_spread.image, imageWidth = _$_object_spread.imageWidth, imageHeight = _$_object_spread.imageHeight, rotate = _$_object_spread.rotate, color = _$_object_spread.color, fontStyle = _$_object_spread.fontStyle, fontFamily = _$_object_spread.fontFamily, fontWeight = _$_object_spread.fontWeight, fontSize = _$_object_spread.fontSize, style = _$_object_spread.style;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(''), 2), base64Url = _useState[0], setBase64Url = _useState[1];
     var classPrefix = 'nut-watermark';
     var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-full-page"), fullPage));
@@ -99,7 +101,7 @@ var WaterMark = function WaterMark(props) {
                     var markSize = Number(fontSize) * ratio;
                     ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
                     ctx.fillStyle = color;
-                    ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。
+                    ctx.fillText(content, startX, startY) // 在画布上绘制"被填充的"文本。
                     ;
                     ctx.restore() // 返回之前保存过的路径状态和属性。
                     ;

package/dist/cjs/utils/add-color-for-harmony.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */
+declare function addColorForHarmony(maybeElement: ReactNode, color?: string): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+export default addColorForHarmony;

package/dist/cjs/utils/add-color-for-harmony.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _platformtaro = require("./platform-taro");
+/**
+ * 为支持 Harmony 的 React 元素添加颜色属性
+ * @param maybeElement - 要处理的 React 节点
+ * @param color - 要添加的颜色值（如：'#ff0000'）
+ * @returns 处理后的 React 节点
+ */ function addColorForHarmony(maybeElement, color) {
+    if (/*#__PURE__*/ _react.default.isValidElement(maybeElement) && (0, _platformtaro.harmony)()) {
+        return /*#__PURE__*/ _react.default.cloneElement(maybeElement, {
+            color: color
+        });
+    }
+    return maybeElement;
+}
+var _default = addColorForHarmony;

package/dist/cjs/utils/get-rect-by-taro.js

@@ -32,7 +32,7 @@ function makeRect(width, height) {
         height: height
     };
 }
-var getRectByTaro = function() {
+var getRectByTaro = /*#__PURE__*/ function() {
     var _ref = (0, _async_to_generator._)(function(element) {
         return (0, _ts_generator._)(this, function(_state) {
             if (element) {

package/dist/cjs/utils/get-scroll-parent.d.ts

@@ -1,4 +1,4 @@
 type ScrollElement = HTMLElement | Window;
-export declare function getScrollParent(el: Element, root?: ScrollElement | null | undefined): Window | Element | null | undefined;
+export declare function getScrollParent(el: Element | null | undefined, root?: ScrollElement | null | undefined): Window | Element | null | undefined;
 export declare function getAllScrollableParents(element: Element | null, scrollableParents?: Element[]): Element[];
 export {};

package/dist/cjs/utils/merge-props.d.ts

@@ -1,5 +1,9 @@
-export declare function mergeProps<T, U>(defaultProps: T, props: U): {
-    [Key in Extract<keyof T, keyof U>]: U[Key];
-} & {
-    [Key in Exclude<keyof U, keyof T>]?: U[Key];
-};
+export declare function mergeProps<A, B>(a: A, b: B): B & A;
+export declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+export declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */
+export declare function mergeProp<T, DefaultT extends T = T>(defaultProp: DefaultT, ...propList: T[]): T | undefined;

package/dist/cjs/utils/merge-props.js

@@ -2,13 +2,44 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "mergeProps", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    mergeProp: function() {
+        return mergeProp;
+    },
+    mergeProps: function() {
         return mergeProps;
     }
 });
-var _object_spread = require("@swc/helpers/_/_object_spread");
-function mergeProps(defaultProps, props) {
-    return (0, _object_spread._)({}, defaultProps, props);
+function mergeProps() {
+    for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+        items[_key] = arguments[_key];
+    }
+    var ret = {};
+    items.forEach(function(item) {
+        if (item) {
+            Object.keys(item).forEach(function(key) {
+                if (item[key] !== undefined) {
+                    ret[key] = item[key];
+                }
+            });
+        }
+    });
+    return ret;
+}
+function mergeProp(defaultProp) {
+    for(var _len = arguments.length, propList = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+        propList[_key - 1] = arguments[_key];
+    }
+    for(var i = propList.length - 1; i >= 0; i -= 1){
+        if (propList[i] !== undefined) {
+            return propList[i];
+        }
+    }
+    return defaultProp;
 }

package/dist/cjs/utils/platform-taro.d.ts

@@ -2,3 +2,4 @@ export declare const harmonyAndRn: () => boolean;
 export declare const harmony: () => boolean;
 export declare const rn: () => boolean;
 export declare const web: () => boolean;
+export declare const miniprogram: () => boolean;

package/dist/cjs/utils/platform-taro.js

@@ -15,6 +15,9 @@ _export(exports, {
     harmonyAndRn: function() {
         return harmonyAndRn;
     },
+    miniprogram: function() {
+        return miniprogram;
+    },
     rn: function() {
         return rn;
     },
@@ -51,3 +54,8 @@ var web = function web() {
         'web'
     ].includes(_taro.default.getEnv().toLowerCase());
 };
+var miniprogram = function miniprogram() {
+    return [
+        'mini'
+    ].includes(_taro.default.getEnv().toLowerCase());
+};

package/dist/cjs/utils/raf.js

@@ -22,7 +22,7 @@ _export(exports, {
 var inBrowser = typeof window !== 'undefined';
 // 防频
 function requestAniFrame() {
-    if (typeof window !== 'undefined') {
+    if (inBrowser) {
         var _window = window;
         return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
             _window.setTimeout(callback, 1000 / 60);
@@ -34,7 +34,8 @@ function requestAniFrame() {
 }
 function cancelRaf(id) {
     if (inBrowser) {
-        cancelAnimationFrame(id);
+        var _window = window;
+        (_window.cancelAnimationFrame || _window.webkitCancelAnimationFrame)(id);
     } else {
         clearTimeout(id);
     }

package/dist/cjs/utils/typings.d.ts

@@ -9,3 +9,4 @@ export declare const ComponentDefaults: {
     className: string;
     style: {};
 };
+export type Timeout = ReturnType<typeof setTimeout>;

package/dist/cjs/utils/use-client-rect.d.ts

@@ -9,4 +9,4 @@ export declare function isWindow(val: unknown): val is Window;
   right	右侧与视图窗口左上角的距离	number
   bottom	底部与视图窗口左上角的距离	number
  */
-export declare const getRect: (elementRef: Element | Window | undefined) => any;
+export declare const getRect: (elementRef: HTMLElement | Element | Window | undefined | null) => any;

package/dist/es/locales/base.d.ts

@@ -6,6 +6,8 @@ export interface BaseLang {
     noData: string;
     placeholder: string;
     select: string;
+    edit: string;
+    reset: string;
     video: {
         errorTip: string;
         clickRetry: string;
@@ -43,6 +45,7 @@ export interface BaseLang {
         tips: string;
     };
     uploader: {
+        list: string;
         ready: string;
         readyUpload: string;
         waitingUpload: string;
@@ -109,6 +112,10 @@ export interface BaseLang {
         mute: string;
         tips: string;
     };
+    avatarCropper: {
+        rotate: string;
+        selectImage: string;
+    };
     datepicker: {
         year: string;
         month: string;

package/dist/es/locales/en-US.js

@@ -6,6 +6,8 @@ var enUS = {
     noData: 'No Data',
     placeholder: 'Placeholder',
     select: 'Select',
+    edit: 'Edit',
+    reset: 'Reset',
     video: {
         errorTip: 'Error Tip',
         clickRetry: 'Click Retry'
@@ -53,6 +55,7 @@ var enUS = {
         tips: 'Forget password'
     },
     uploader: {
+        list: 'Upload Files',
         ready: 'Ready',
         readyUpload: 'Ready to upload',
         waitingUpload: 'Waiting for upload',
@@ -123,6 +126,10 @@ var enUS = {
         mute: 'mute',
         tips: 'The onplayend event will only be triggered when loop = false'
     },
+    avatarCropper: {
+        rotate: 'Rotate',
+        selectImage: 'Select Image'
+    },
     datepicker: {
         year: 'Year',
         month: 'Month',

package/dist/es/locales/id-ID.js

@@ -6,6 +6,8 @@ var idID = {
     noData: 'Tidak Ada Data',
     placeholder: 'Kolom Input',
     select: 'Pilih',
+    edit: 'Sunting',
+    reset: 'Mengatur Ulang',
     video: {
         errorTip: 'Terjadi Kesalahan',
         clickRetry: 'Coba Lagi'
@@ -53,6 +55,7 @@ var idID = {
         tips: 'Lupa Kata Sandi'
     },
     uploader: {
+        list: 'Unggah file',
         ready: 'File berhasil diunggah',
         readyUpload: 'Siap untuk mengunggah',
         waitingUpload: 'Menunggu untuk diunggah',
@@ -123,6 +126,10 @@ var idID = {
         mute: 'bisu',
         tips: 'Acara Onplayend hanya akan dipicu saat loop = false'
     },
+    avatarCropper: {
+        rotate: 'Memutar',
+        selectImage: 'Pilih gambar'
+    },
     datepicker: {
         year: 'Tahun',
         month: 'Bulan',

package/dist/es/locales/tr-TR.js

@@ -6,6 +6,8 @@ var trTR = {
     noData: 'Veri Yok',
     placeholder: 'Placeholder',
     select: 'Seçiniz',
+    edit: 'düzenlemek',
+    reset: 'sıfırlama',
     video: {
         errorTip: 'Video yüklenemedi',
         clickRetry: 'Yeniden Tıklayın'
@@ -53,6 +55,7 @@ var trTR = {
         tips: 'Şifrenizi mi unuttunuz'
     },
     uploader: {
+        list: 'Dosyaları yükle',
         ready: 'Tamamlamaya hazır',
         readyUpload: 'Yüklemeye hazır',
         waitingUpload: 'Yükleme için bekleniyor',
@@ -123,6 +126,10 @@ var trTR = {
         mute: 'sessiz',
         tips: 'onPlayEnd olayı loop=false olduğunda ateşlenir'
     },
+    avatarCropper: {
+        rotate: 'döndürmek',
+        selectImage: 'Resim seç'
+    },
     datepicker: {
         year: 'yıl',
         month: 'ay',

package/dist/es/locales/zh-CN.js

@@ -6,6 +6,8 @@ var zhCN = {
     noData: '暂无数据',
     placeholder: '请输入内容',
     select: '请选择',
+    edit: '编辑',
+    reset: '重置',
     video: {
         errorTip: '视频加载失败',
         clickRetry: '点击重试'
@@ -53,6 +55,7 @@ var zhCN = {
         tips: '忘记密码'
     },
     uploader: {
+        list: '上传文件',
         ready: '准备完成',
         readyUpload: '准备上传',
         waitingUpload: '等待上传',
@@ -123,6 +126,10 @@ var zhCN = {
         mute: '静音',
         tips: 'onPlayEnd事件在loop=false时才会触发'
     },
+    avatarCropper: {
+        rotate: '旋转',
+        selectImage: '选择图片'
+    },
     datepicker: {
         year: '年',
         month: '月',

package/dist/es/locales/zh-TW.js

@@ -6,6 +6,8 @@ var zhCN = {
     noData: '暫無數據',
     placeholder: '請輸入內容',
     select: '請選擇',
+    edit: '編輯',
+    reset: '重置',
     video: {
         errorTip: '視頻加載失敗',
         clickRetry: '點擊重試'
@@ -53,6 +55,7 @@ var zhCN = {
         tips: '忘記密碼'
     },
     uploader: {
+        list: '上傳文件',
         ready: '準備完成',
         readyUpload: '準備上傳',
         waitingUpload: '等待上傳',
@@ -123,6 +126,10 @@ var zhCN = {
         mute: '靜音',
         tips: 'onPlayEnd事件在loop=false時才會觸發'
     },
+    avatarCropper: {
+        rotate: '旋轉',
+        selectImage: '選擇圖片'
+    },
     datepicker: {
         year: '年',
         month: '月',

package/dist/es/locales/zh-UG.js

@@ -6,6 +6,8 @@ var zhUG = {
     noData: 'مەزمۇن يوق',
     placeholder: 'كىرگۈزۈڭ',
     select: 'تاللاڭ',
+    edit: 'يحرر',
+    reset: 'إعادة ضبط',
     video: {
         errorTip: 'فىلىمنى قويۇش مەغلۇپ بولدى',
         clickRetry: 'قايتا سىناش'
@@ -53,6 +55,7 @@ var zhUG = {
         tips: 'ئۇنتۇپ قاپتىمەن'
     },
     uploader: {
+        list: 'تحميل الملفات',
         ready: 'تاماملىنىۋاتىدۇ',
         readyUpload: 'يوللاش ئالدىدا',
         waitingUpload: 'ساقلاۋاتىدۇ',
@@ -123,6 +126,10 @@ var zhUG = {
         mute: 'جىم',
         tips: 'onPlayEnd بولسا loop=false بولغاندا ئىشلەيدۇ'
     },
+    avatarCropper: {
+        rotate: 'تناوب',
+        selectImage: 'حدد الصورة'
+    },
     datepicker: {
         year: 'يىل',
         month: 'ئاي',

package/dist/es/packages/actionsheet/actionsheet.d.ts

@@ -4,40 +4,12 @@ export type ActionSheetOption<T> = {
     [key: string]: T;
 };
 export interface ActionSheetProps extends PopupProps {
-    /**
-    * 遮罩层可见
-    * @default false
-    */
-    visible: boolean
-    /**
-    * 设置列表面板副标题/描述
-    * @default -
-    */
-    description: ReactNode
-    /**
-    * 列表项
-    * @default []
-    */
-    options: ActionSheetOption<string | boolean>[]
-    /**
-    * 列表项的自定义设置
-    * @default -
-    */
-    optionKey: ActionSheetOption<string>
-    /**
-    * 取消文案
-    * @default 取消
-    */
-    cancelText: ReactNode
-    /**
-    * 点击取消文案时触发
-    * @default -
-    */
-    onCancel: () => void
-    /**
-    * 选择之后触发
-    * @default -
-    */
-    onSelect: (item: ActionSheetOption<string | boolean>, index: number) => void
+    visible: boolean;
+    description: ReactNode;
+    options: ActionSheetOption<string | boolean>[];
+    optionKey: ActionSheetOption<string>;
+    cancelText: ReactNode;
+    onCancel: () => void;
+    onSelect: (item: ActionSheetOption<string | boolean>, index: number) => void;
 }
 export declare const ActionSheet: FunctionComponent<Partial<ActionSheetProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect' | 'onClick'>>;

package/dist/es/packages/actionsheet/actionsheet.js

@@ -2,8 +2,10 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import React from "react";
+import { View } from "@tarojs/components";
 import Popup from "../popup/index";
 import { ComponentDefaults } from "../../utils/typings";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     visible: false,
     description: '',
@@ -17,7 +19,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onSelect: function() {}
 });
 export var ActionSheet = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, cancelText = _ref.cancelText, optionKey = _ref.optionKey, title = _ref.title, description = _ref.description, options = _ref.options, onCancel = _ref.onCancel, onSelect = _ref.onSelect, visible = _ref.visible, className = _ref.className, style = _ref.style, rest = _object_without_properties(_ref, [
+    var _mergeProps = mergeProps(defaultProps, props), children = _mergeProps.children, cancelText = _mergeProps.cancelText, optionKey = _mergeProps.optionKey, title = _mergeProps.title, description = _mergeProps.description, options = _mergeProps.options, onCancel = _mergeProps.onCancel, onSelect = _mergeProps.onSelect, visible = _mergeProps.visible, className = _mergeProps.className, style = _mergeProps.style, rest = _object_without_properties(_mergeProps, [
         "children",
         "cancelText",
         "optionKey",
@@ -49,27 +51,30 @@ export var ActionSheet = function(props) {
         onClose: function() {
             onCancel && onCancel();
         }
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(className),
         style: style
-    }, options.length ? /*#__PURE__*/ React.createElement("div", {
+    }, options.length ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-list")
     }, options.map(function(item, index) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-item ").concat(item.disabled ? 'disabled' : '', " ").concat(item.danger ? 'danger' : ''),
+        var statusClass = "".concat(item.disabled ? "".concat(classPrefix, "-item-disabled") : '', " ").concat(item.danger ? "".concat(classPrefix, "-item-danger") : '');
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-item ").concat(statusClass),
             key: index,
             onClick: function() {
                 return chooseItem(item, index);
             }
-        }, item[optionKey.name], /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-item-description")
+        }, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-item-name ").concat(statusClass)
+        }, item[optionKey.name]), /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-item-description ").concat(statusClass)
         }, item[optionKey.description]));
-    })) : children, cancelText && /*#__PURE__*/ React.createElement("div", {
+    })) : children, cancelText && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-cancel"),
         onClick: function() {
             return cancelActionSheet();
         }
-    }, cancelText)), /*#__PURE__*/ React.createElement("div", {
+    }, cancelText)), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-safe-area")
     }));
 };

package/dist/es/packages/actionsheet/style/actionsheet.scss

@@ -26,20 +26,26 @@
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
     color: $actionsheet-item-color;
-    background-color: $color-background-overlay;
     cursor: pointer;
-
+    &-name {
+      text-align: $actionsheet-item-text-align;
+      line-height: $actionsheet-item-line-height;
+      font-size: $font-size-base;
+      color: $actionsheet-item-color;
+    }
     &-description {
       display: block;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $color-text;
+      text-align: $actionsheet-item-text-align;
+      line-height: $actionsheet-item-line-height;
     }
 
-    &.danger {
+    &-danger {
       color: $actionsheet-item-danger;
     }
 
-    &.disabled {
+    &-disabled {
       color: $color-text-disabled !important;
       cursor: not-allowed;
     }