@arco-design/mobile-react 2.19.0

package/cjs/dropdown/index.js

@@ -0,0 +1,337 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _contextProvider = require("../context-provider");
+
+var _helpers = require("../_helpers");
+
+var _portal = _interopRequireDefault(require("../portal"));
+
+var _options = _interopRequireDefault(require("./options"));
+
+var _type = require("./type");
+
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  exports[key] = _type[key];
+});
+
+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 Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var optionsWrapper = (0, _react.useRef)(null);
+  var domRef = (0, _react.useRef)(null);
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      _props$showDropdown = props.showDropdown,
+      showDropdown = _props$showDropdown === void 0 ? false : _props$showDropdown,
+      _props$showMask = props.showMask,
+      showMask = _props$showMask === void 0 ? true : _props$showMask,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'down' : _props$direction,
+      height = props.height,
+      _props$maxHeight = props.maxHeight,
+      maxHeight = _props$maxHeight === void 0 ? 500 : _props$maxHeight,
+      _props$touchToClose = props.touchToClose,
+      touchToClose = _props$touchToClose === void 0 ? true : _props$touchToClose,
+      useColumn = props.useColumn,
+      multiple = props.multiple,
+      defaultSelectedValue = props.defaultSelectedValue,
+      onCancel = props.onCancel,
+      getAnchorElement = props.getAnchorElement,
+      isStopTouchEl = props.isStopTouchEl,
+      getStopTouchElements = props.getStopTouchElements,
+      _props$getScrollConta = props.getScrollContainer,
+      getScrollContainer = _props$getScrollConta === void 0 ? function () {
+    return optionsWrapper.current;
+  } : _props$getScrollConta,
+      getPortalContainer = props.getPortalContainer,
+      _props$clickOtherToCl = props.clickOtherToClose,
+      clickOtherToClose = _props$clickOtherToCl === void 0 ? true : _props$clickOtherToCl,
+      _props$dropdownAnimat = props.dropdownAnimationTimeout,
+      dropdownAnimationTimeout = _props$dropdownAnimat === void 0 ? 300 : _props$dropdownAnimat,
+      _props$dropdownAnimat2 = props.dropdownAnimationFunction,
+      dropdownAnimationFunction = _props$dropdownAnimat2 === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$dropdownAnimat2,
+      _props$maskAnimationT = props.maskAnimationTimeout,
+      maskAnimationTimeout = _props$maskAnimationT === void 0 ? 500 : _props$maskAnimationT,
+      _props$maskAnimationF = props.maskAnimationFunction,
+      maskAnimationFunction = _props$maskAnimationF === void 0 ? 'cubic-bezier(0.32, 0.96, 0.6, 1)' : _props$maskAnimationF,
+      _props$mountOnEnter = props.mountOnEnter,
+      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+      _props$unmountOnExit = props.unmountOnExit,
+      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      _props$preventBodyScr = props.preventBodyScroll,
+      preventBodyScroll = _props$preventBodyScr === void 0 ? true : _props$preventBodyScr,
+      initialBodyOverflow = props.initialBodyOverflow;
+  var system = (0, _helpers.useSystem)();
+
+  var _useWindowSize = (0, _helpers.useWindowSize)(),
+      windowHeight = _useWindowSize.windowHeight,
+      windowWidth = _useWindowSize.windowWidth;
+
+  var _useState = (0, _react.useState)({
+    top: '',
+    bottom: ''
+  }),
+      positionStyle = _useState[0],
+      setPositionStyle = _useState[1];
+
+  var _useState2 = (0, _react.useState)(function () {
+    var defaultValue = multiple ? [] : 0;
+    return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+  }),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1]; // down=0为向上展开，1为向下展开
+  // @en down=0 is to expand upwards, 1 is to expand downwards
+
+
+  var _useState3 = (0, _react.useState)(direction === 'down'),
+      down = _useState3[0],
+      setDown = _useState3[1];
+
+  var maskHeight = (0, _react.useRef)(0);
+  var optionsContainer = (0, _react.useRef)(null);
+  var dropdownContainer = (0, _react.useRef)(null);
+
+  var _useState4 = (0, _react.useState)(0),
+      optionsWrapperHeight = _useState4[0],
+      setOptionsWrapperHeight = _useState4[1];
+  /**
+   * 判断是否阻止touch事件
+   * @en Determine whether to block touch events
+   * */
+
+
+  var ifStopTouch = function ifStopTouch(el) {
+    var _dropdownContainer$cu;
+
+    if (isStopTouchEl) return isStopTouchEl(el);
+    var tempEl = el;
+    var elements = getStopTouchElements ? getStopTouchElements() : [(_dropdownContainer$cu = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu.parentElement];
+
+    for (var i = 0; i < elements.length; i++) {
+      while (tempEl && elements[i]) {
+        if (tempEl === elements[i]) {
+          return true;
+        }
+
+        tempEl = tempEl.parentElement;
+      }
+    }
+
+    return false;
+  };
+
+  (0, _helpers.usePopupScroll)(showDropdown, domRef.current, getScrollContainer);
+  (0, _helpers.usePreventBodyScroll)(showDropdown, preventBodyScroll, initialBodyOverflow);
+  (0, _react.useEffect)(function () {
+    var _dropdownContainer$cu2;
+
+    // 为0的时候不改变
+    // @en Does not change when it is 0
+    if (optionsWrapperHeight === 0) return;
+    var tempEl = getAnchorElement ? getAnchorElement() : (_dropdownContainer$cu2 = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu2.parentElement;
+
+    var _ref = (tempEl == null ? void 0 : tempEl.getBoundingClientRect()) || {
+      bottom: 0,
+      top: 0
+    },
+        bottom = _ref.bottom,
+        top = _ref.top;
+
+    var tempTop = props.top || bottom;
+    var tempBottom = props.bottom || windowHeight - top;
+    var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
+    // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
+
+    var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
+
+    if (tempDown) {
+      maskHeight.current = tempMaskHeight;
+      setPositionStyle({
+        top: tempTop + "px",
+        bottom: ''
+      });
+    } else {
+      maskHeight.current = windowHeight - tempBottom;
+      setPositionStyle({
+        top: '',
+        bottom: tempBottom + "px"
+      });
+    }
+
+    setDown(tempDown);
+  }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
+  /**
+   * 取消选择
+   * @en Cancel selection
+   * */
+
+  var handleCancel = (0, _react.useCallback)(function (e) {
+    var optionsWrapperDom = optionsWrapper.current;
+
+    if (!e || !optionsWrapperDom) {
+      return;
+    }
+
+    var target = e.target;
+
+    if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
+      onCancel();
+    }
+
+    e.stopPropagation();
+  }, [ifStopTouch, onCancel]);
+  /**
+   * 当面板放下时，给body添加事件监听，面板收起时，移除
+   * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
+   * */
+
+  (0, _react.useEffect)(function () {
+    var needBind = showDropdown && clickOtherToClose;
+    var event = touchToClose ? 'touchstart' : 'click';
+
+    if (needBind) {
+      document.addEventListener(event, handleCancel);
+    }
+
+    return function () {
+      if (needBind) {
+        document.removeEventListener(event, handleCancel);
+      }
+    };
+  }, [showDropdown, clickOtherToClose, handleCancel]);
+  (0, _react.useEffect)(function () {
+    (0, _mobileUtils.nextTick)(function () {
+      if (height !== void 0) {
+        // 受控模式下，完全交由外层控制
+        // @en In controlled mode, it is completely controlled by the outer layer
+        setOptionsWrapperHeight(height);
+      } else {
+        if (!optionsContainer.current) return;
+        if (!showDropdown) setOptionsWrapperHeight(0);else {
+          setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
+        }
+      }
+    });
+  }, [showDropdown, options.length, height]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  function getOptionsStyle() {
+    var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+    return (0, _helpers.getStyleWithVendor)({
+      // height: `${optionsWrapperHeight}px`,
+      transform: optionsWrapperHeight ? '' : trans,
+      transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
+      overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
+      maxHeight: maxHeight + "px"
+    });
+  }
+
+  function renderInnerOptions() {
+    var optionProps = {
+      options: options,
+      useColumn: useColumn
+    };
+    var value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
+    return props.multiple === true ? /*#__PURE__*/_react.default.createElement(_options.default, (0, _extends2.default)({}, optionProps, {
+      multiple: true,
+      selectedValue: value,
+      onOptionClick: props.onOptionClick,
+      onOptionChange: function onOptionChange(vals, op) {
+        setInnerValue(vals);
+        props.onOptionChange == null ? void 0 : props.onOptionChange(vals, op);
+      }
+    })) : /*#__PURE__*/_react.default.createElement(_options.default, (0, _extends2.default)({}, optionProps, {
+      multiple: props.multiple,
+      selectedValue: value,
+      onOptionClick: props.onOptionClick,
+      onOptionChange: function onOptionChange(vals, op) {
+        setInnerValue(vals);
+        props.onOptionChange == null ? void 0 : props.onOptionChange(vals, op);
+      }
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+    var prefixCls = _ref2.prefixCls;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: dropdownContainer
+    }, /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: getPortalContainer
+    }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      in: showDropdown,
+      timeout: Math.max(dropdownAnimationTimeout, maskAnimationTimeout),
+      onEnter: function onEnter(el) {
+        el.style.visibility = 'visible';
+      },
+      onExited: function onExited(el) {
+        el.style.visibility = 'hidden';
+      },
+      mountOnEnter: mountOnEnter,
+      unmountOnExit: unmountOnExit
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown all-border-box", system, className, {
+        'drop-up': !down
+      }),
+      ref: domRef,
+      style: (0, _extends2.default)({
+        height: maskHeight.current + "px",
+        maxWidth: windowWidth + "px"
+      }, style, positionStyle)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options"),
+      ref: optionsWrapper,
+      style: getOptionsStyle()
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-container"),
+      ref: optionsContainer
+    }, props.children || renderInnerOptions(), props.extraNode)), showMask && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-mask", {
+        'is-show': optionsWrapperHeight
+      }),
+      style: {
+        transition: "opacity " + maskAnimationTimeout + "ms " + maskAnimationFunction
+      }
+    })))));
+  });
+});
+/**
+ * 下拉面板，展示供选择的选择项
+ * @en Dropdown panel, showing options to choose from
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉面板
+ * @name_en Dropdown
+ */
+
+var _default = (0, _mobileUtils.componentWrapper)(Dropdown, {
+  Options: _options.default
+});
+
+exports.default = _default;

package/cjs/dropdown/options.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownOptionsRef } from './type';
+declare const Options: React.ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownOptionsRef>)>;
+export default Options;

package/cjs/dropdown/options.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _IconCheck = _interopRequireDefault(require("../icon/IconCheck"));
+
+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 Options = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var options = props.options,
+      useColumn = props.useColumn,
+      selectedValue = props.selectedValue,
+      defaultSelectedValue = props.defaultSelectedValue,
+      multiple = props.multiple;
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var _useState = (0, _react.useState)(function () {
+    var defaultValue = multiple ? [] : 0;
+    return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+  }),
+      innerValue = _useState[0],
+      setInnerValue = _useState[1];
+
+  var value = (0, _react.useMemo)(function () {
+    return selectedValue === void 0 ? innerValue : selectedValue;
+  }, [selectedValue, innerValue]);
+  var colCount = useColumn === true ? 4 : Number(useColumn) || 0;
+  var fakeOpts = new Array(colCount && options.length % colCount ? colCount - options.length % colCount : 0).fill('');
+  var minWidthStyle = useColumn ? {
+    minWidth: 1 / (colCount + 1) * 100 + "%"
+  } : {};
+  var domRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  /**
+   * 当选项改变时触发的回调函数
+   * @en callback when options change
+   * */
+
+  function handleOptionChange(e, op) {
+    if (op.disabled) return;
+
+    if (props.multiple === true) {
+      if (!Array.isArray(value)) {
+        return;
+      }
+
+      var index = value.indexOf(op.value);
+      var checked = index >= 0;
+      props.onOptionClick == null ? void 0 : props.onOptionClick(checked, op.value, op);
+      var newValue = [].concat(value);
+      checked ? newValue.splice(index, 1) : newValue.push(op.value);
+      setInnerValue(newValue);
+      props.onOptionChange == null ? void 0 : props.onOptionChange(newValue, op);
+    } else {
+      var _newValue = op.value;
+      props.onOptionClick == null ? void 0 : props.onOptionClick(_newValue, op);
+      setInnerValue(_newValue);
+      _newValue !== value && (props.onOptionChange == null ? void 0 : props.onOptionChange(_newValue, op));
+    }
+
+    e.stopPropagation();
+  }
+
+  function checkSelected(op) {
+    return multiple && Array.isArray(value) ? value.includes(op.value) : op.value === value;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: domRef,
+    className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-wrap", {
+      'use-column': useColumn
+    })
+  }, options.map(function (op) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-item" + (useColumn ? '-col' : ''), {
+        disabled: op.disabled,
+        selected: checkSelected(op)
+      }),
+      key: op.value,
+      onClick: function onClick(e) {
+        return handleOptionChange(e, op);
+      },
+      style: minWidthStyle
+    }, op.label, /*#__PURE__*/_react.default.createElement(_IconCheck.default, {
+      className: prefixCls + "-dropdown-options-item-icon"
+    }));
+  }), fakeOpts.map(function (_, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-dropdown-options-item-fake-col"),
+      key: i,
+      style: minWidthStyle
+    });
+  }));
+});
+var _default = Options;
+exports.default = _default;

package/cjs/dropdown/style/css/index.css

@@ -0,0 +1,91 @@
+.arco-dropdown {
+  position: fixed;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+.arco-dropdown-options {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  will-change: transform;
+  background-color:  #ffffff ;
+}
+.drop-up .arco-dropdown-options {
+  bottom: 0;
+}
+.arco-dropdown-options-container {
+  height: auto;
+}
+.arco-dropdown-options-wrap.use-column {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  padding:  0.32rem ;
+  margin:  0 -0.24rem -0.24rem 0 ;
+}
+.arco-dropdown-options-item {
+  padding:  0.32rem ;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  color:  #1d2129 ;
+  text-align: left;
+  position: relative;
+}
+.arco-dropdown-options-item.selected {
+  color:  #165dff ;
+}
+.arco-dropdown-options-item.selected .arco-dropdown-options-item-icon {
+  color:  #165dff ;
+}
+.arco-dropdown-options-item.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-dropdown-options-item-icon {
+  position: absolute;
+  right:  0.32rem ;
+  color: transparent;
+}
+.arco-dropdown-options-item-fake-col,
+.arco-dropdown-options-item-col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  margin-right:  0.24rem ;
+  margin-bottom:  0.24rem ;
+  padding:  0.16rem ;
+}
+.arco-dropdown-options-item-col {
+  text-align: center;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+  color:  #4e5969 ;
+  border-radius:  2PX ;
+  background:  #f7f8fa ;
+}
+.arco-dropdown-options-item-col.selected {
+  color:  #165dff ;
+  background:  #E8F3FF ;
+}
+.arco-dropdown-options-item-col.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-dropdown-options-item-col .arco-dropdown-options-item-icon {
+  display: none;
+}
+.arco-dropdown-mask {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color:  rgba(0, 0, 0, 0.5) ;
+}
+.arco-dropdown-mask.is-show {
+  opacity: 1;
+}

package/cjs/dropdown/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/dropdown/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/dropdown/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/dropdown/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/dropdown/style/index.less

@@ -0,0 +1,107 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-dropdown {
+    position: fixed;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    z-index: @full-screen-z-index;
+
+    &-options {
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: @full-screen-z-index + 1;
+        will-change: transform;
+
+        .drop-up & {
+            bottom: 0;
+        }
+        .use-var(background-color, dropdown-options-background-color);
+
+        &-container {
+            height: auto;
+        }
+
+        &-wrap {
+
+            &.use-column {
+                display: flex;
+                flex-wrap: wrap;
+                .use-var(padding, dropdown-multi-rows-options-container-padding);
+                .use-var(margin, dropdown-multi-rows-options-container-margin);
+            }
+        }
+
+        &-item {
+            .use-var(padding, dropdown-options-item-padding);
+            .use-var(font-size, dropdown-options-item-font-size);
+            .use-var(line-height, dropdown-options-item-line-height);
+            .use-var(color, dropdown-options-item-color);
+            text-align: left;
+            position: relative;
+
+            &.selected {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.selected &-icon {
+                .use-var(color, dropdown-options-item-selected-color);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+
+            &-icon {
+                position: absolute;
+                .use-var(right, dropdown-options-item-icon-right);
+                color: transparent;
+            }
+        }
+
+        &-item-fake-col,
+        &-item-col {
+            flex: 1;
+            .use-var(margin-right, dropdown-multi-rows-options-gutter);
+            .use-var(margin-bottom, dropdown-multi-rows-options-gutter);
+            .use-var(padding, dropdown-multi-rows-options-item-padding);
+        }
+
+        &-item-col {
+            text-align: center;
+            .use-var(font-size, dropdown-multi-rows-options-item-font-size);
+            .use-var(line-height, dropdown-multi-rows-options-item-line-height);
+            .use-var(color, dropdown-multi-rows-options-item-color);
+            .use-var(border-radius, dropdown-multi-rows-options-item-border-radius);
+            .use-var(background, dropdown-multi-rows-options-item-background);
+
+            &.selected {
+                .use-var(color, dropdown-multi-rows-options-item-selected-color);
+                .use-var(background, dropdown-multi-rows-options-item-selected-background);
+            }
+
+            &.disabled {
+                .use-var(color, dropdown-options-item-disabled-color);
+            }
+        }
+
+        &-item-col &-item-icon {
+            display: none;
+        }
+    }
+
+    &-mask {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .use-var(background-color, dropdown-mask-background-color);
+
+        &.is-show {
+            opacity: 1;
+        }
+    }
+}