@pisell/private-materials 6.8.11 → 6.8.12

package/es/pro/Selector/Selector.js

@@ -1,151 +1,211 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["show", "render"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
-import { Radio, Checkbox, Row, Col, Tag, Select } from 'antd';
+import { Row, Col, Tag, Select } from 'antd';
+import classNames from 'classnames';
 import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+// @ts-ignore
 import { locales } from '@pisell/utils';
 import localeTexts from "./locales";
-import { CardItem, NumericStepper } from "./components";
+import Indicator from "./components/Indicator";
+import LayoutContainer from "./components/LayoutContainer";
+import NumericStepper from "../NumericStepper";
 import useSelectionController from "./hooks/useSelectionController";
+import usePresetProps from "./hooks/usePresetProps";
 import useEngineContext from "../../hooks/useEngineContext";
+import Item from "./Item";
 import "./selector.less";
 var ARow = Row;
 var ACol = Col;
 var ATag = Tag;
+export var SelectorContext = /*#__PURE__*/React.createContext({
+  disabled: false,
+  mode: 'single',
+  itemLayout: 'horizontal',
+  valueType: 'primitive',
+  variant: 'default',
+  itemProps: {},
+  preset: {}
+});
 var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context$appHelper;
   var disabled = props.disabled,
-    titleProps = props.titleProps,
+    fieldNames = props.fieldNames,
+    layout = props.layout,
+    indicatorProps = props.indicatorProps,
+    itemProps = props.itemProps,
+    _props$itemLayout = props.itemLayout,
+    itemLayout = _props$itemLayout === void 0 ? 'horizontal' : _props$itemLayout,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'single' : _props$mode,
+    _props$preset = props.preset,
+    preset = _props$preset === void 0 ? {} : _props$preset,
+    renderItem = props.renderItem,
+    ruleConfig = props.ruleConfig,
     _props$valueType = props.valueType,
     valueType = _props$valueType === void 0 ? 'primitive' : _props$valueType,
     _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'default' : _props$variant,
-    grid = props.grid,
-    renderItem = props.renderItem,
-    itemConfig = props.item,
-    ruleConfig = props.ruleConfig,
-    fieldNames = props.fieldNames;
+    variant = _props$variant === void 0 ? 'default' : _props$variant;
   var context = useEngineContext();
   locales.init(localeTexts, (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get('umi_locale')) || 'en');
   var _useSelectionControll = useSelectionController(props),
     state = _useSelectionControll.state,
     actions = _useSelectionControll.actions;
   var options = state.options,
-    showQuantity = state.showQuantity,
     errors = state.errors,
-    validated = state.validated;
+    validated = state.validated,
+    quantityInfo = state.quantityInfo;
+  var showQuantity = quantityInfo.showQuantity,
+    remainingCount = quantityInfo.remainingCount;
+  var headerProps = props.headerProps || props.titleProps || {};
+
+  // 根据预设配置计算 grid 和 indicatorProps
+  var presetConfig = usePresetProps({
+    mode: mode,
+    preset: preset,
+    itemLayout: itemLayout,
+    variant: variant,
+    layout: layout,
+    indicatorProps: indicatorProps
+  });
+
+  // 使用预设后的配置
+  var finalLayout = presetConfig.layout;
+  var finalIndicatorProps = presetConfig.indicatorProps;
   useImperativeHandle(ref, function () {
     return {
-      validate: function validate() {
-        return actions.validate();
-      },
+      validate: actions.validate,
+      reset: actions.reset,
+      clear: actions.clear,
       getErrors: function getErrors() {
         return errors || [];
-      },
-      reset: function reset() {
-        return actions.reset();
-      },
-      clear: function clear() {
-        return actions.clear();
       }
     };
   });
   useEffect(function () {
     document.body.id = 'body';
-  }, []);
+  }, [actions]);
 
   // 选择指示器
   var renderIndicator = function renderIndicator(option, isDefault) {
-    if (mode === 'single') {
-      return /*#__PURE__*/React.createElement(Radio, {
-        className: "pisell-selector_radio-trigger",
-        checked: option.selected,
-        disabled: disabled || option.disabled,
-        onChange: function onChange(e) {
-          e.stopPropagation();
-          if (option.selected) {
-            actions.update(option._key, {
-              quantity: 0
-            });
-          } else {
-            actions.update(option._key, {});
-          }
-        },
-        children: isDefault ? option._label : undefined
-      });
-    } else {
-      return /*#__PURE__*/React.createElement(Checkbox, {
-        className: "pisell-selector_checkbox-trigger",
-        checked: option.selected,
+    var _ref = finalIndicatorProps || {},
+      _ref$show = _ref.show,
+      show = _ref$show === void 0 ? true : _ref$show,
+      render = _ref.render,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    if ((finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.show) === false) return null;
+    if ( /*#__PURE__*/React.isValidElement(finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render)) {
+      return finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render;
+    }
+    if (typeof (finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render) === 'function') {
+      var _finalIndicatorProps$;
+      return finalIndicatorProps === null || finalIndicatorProps === void 0 || (_finalIndicatorProps$ = finalIndicatorProps.render) === null || _finalIndicatorProps$ === void 0 ? void 0 : _finalIndicatorProps$.call(finalIndicatorProps, _objectSpread({
+        option: option,
+        selected: option.selected,
         disabled: disabled || option.disabled,
-        onChange: function onChange(e) {
-          e.stopPropagation();
-          actions.toggle(option._key);
-        },
-        children: isDefault ? option._label : undefined
-      });
+        actions: actions
+      }, rest));
     }
+    return /*#__PURE__*/React.createElement(Indicator, _extends({}, rest, {
+      mode: mode,
+      checked: option.selected,
+      disabled: disabled || option.disabled,
+      onChange: function onChange(e) {
+        if (e.target.checked) {
+          actions.update(option._key, {
+            quantity: 1
+          });
+        } else {
+          actions.update(option._key, {
+            quantity: 0
+          });
+        }
+      },
+      children: isDefault ? option._label : undefined
+    }));
   };
 
   // 数量选择器
   var renderQuantitySelector = function renderQuantitySelector(option) {
-    var _option$ruleConfig$mi, _option$ruleConfig, _option$ruleConfig$ma, _option$ruleConfig2;
     if (valueType === 'primitive') return null;
-    if (!showQuantity) return null;
-    return /*#__PURE__*/React.createElement(NumericStepper, {
-      min: (_option$ruleConfig$mi = option === null || option === void 0 || (_option$ruleConfig = option.ruleConfig) === null || _option$ruleConfig === void 0 ? void 0 : _option$ruleConfig.min) !== null && _option$ruleConfig$mi !== void 0 ? _option$ruleConfig$mi : 0,
-      max: (_option$ruleConfig$ma = option === null || option === void 0 || (_option$ruleConfig2 = option.ruleConfig) === null || _option$ruleConfig2 === void 0 ? void 0 : _option$ruleConfig2.max) !== null && _option$ruleConfig$ma !== void 0 ? _option$ruleConfig$ma : Number.MAX_SAFE_INTEGER,
+    if (props.showStepper === false) return null;
+    if ((props.showStepper === 'auto' || props.showStepper === undefined) && !showQuantity) return null;
+    return /*#__PURE__*/React.createElement(NumericStepper, _extends({}, props.stepperProps || {}, {
+      min: option.effectiveMin,
+      max: option.effectiveMax,
       value: option.quantity,
       disabled: disabled || option.disabled,
       onChange: function onChange(value) {
-        return actions.update(option._key, {
+        actions.update(option._key, {
           quantity: value
         });
-      }
-    });
+      },
+      showInput: true
+    }));
   };
 
   // 单个选项
   var renderOption = function renderOption(option) {
-    var optionDisabled = option.disabled;
-    var handleClick = function handleClick() {
-      if (disabled || optionDisabled) return;
-      actions.toggle(option._key);
-    };
-    if (renderItem) {
+    var _option$ruleConfig$mi, _option$ruleConfig, _ruleConfig$min, _option$ruleConfig$ma, _option$ruleConfig2;
+    var optionItemValue = Array.isArray(state.values) ? state.values.find(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.value) === option._key;
+    }) : [state.values].find(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.value) === option._key;
+    });
+    if ( /*#__PURE__*/React.isValidElement(renderItem)) {
+      return renderItem;
+    }
+
+    // 计算有效最小值
+    var configMin = (_option$ruleConfig$mi = option === null || option === void 0 || (_option$ruleConfig = option.ruleConfig) === null || _option$ruleConfig === void 0 ? void 0 : _option$ruleConfig.min) !== null && _option$ruleConfig$mi !== void 0 ? _option$ruleConfig$mi : 0;
+    var groupMin = (_ruleConfig$min = ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min) !== null && _ruleConfig$min !== void 0 ? _ruleConfig$min : 0;
+    // 当options.length < 2 时，如果ruleConfig.min > 0，则有效最小值为ruleConfig.min
+    var effectiveMin = options.length < 2 && groupMin > 0 ? groupMin : configMin;
+
+    // 综合判断最大值：取 remainingQuantity 和 ruleConfig.max 中的较小值
+    var configMax = (_option$ruleConfig$ma = option === null || option === void 0 || (_option$ruleConfig2 = option.ruleConfig) === null || _option$ruleConfig2 === void 0 ? void 0 : _option$ruleConfig2.max) !== null && _option$ruleConfig$ma !== void 0 ? _option$ruleConfig$ma : Number.MAX_SAFE_INTEGER;
+    var effectiveMax = remainingCount !== undefined ? Math.min(remainingCount + (option.quantity || 0), configMax) : configMax;
+
+    // 挂载到option上
+    option.effectiveMin = effectiveMin;
+    option.effectiveMax = effectiveMax;
+    if (typeof renderItem === 'function') {
       return renderItem({
         dataSource: option,
         actions: actions,
-        trigger: renderIndicator(option),
+        optionItemValue: optionItemValue,
+        indicator: renderIndicator(option),
         numberSelector: renderQuantitySelector(option),
-        onClick: handleClick
+        values: state.values,
+        quantityInfo: quantityInfo
       });
     }
-    if (!variant || variant === 'default') {
-      return renderIndicator(option, true);
-    }
     var numberSelector = renderQuantitySelector(option);
-    var trigger = renderIndicator(option);
-    return /*#__PURE__*/React.createElement(CardItem, _extends({}, itemConfig, {
+    var indicator = renderIndicator(option);
+    return /*#__PURE__*/React.createElement(Item, {
       key: option._key,
       dataSource: option,
-      selected: option.selected,
-      disabled: disabled || option.disabled,
-      trigger: trigger,
+      actions: actions,
+      indicator: indicator,
       numberSelector: numberSelector,
-      onClick: handleClick
-    }));
+      optionItemValue: optionItemValue,
+      quantityInfo: quantityInfo,
+      values: state.values
+    });
   };
   var renderOptions = function renderOptions() {
-    if (variant === 'select' && valueType === 'primitive') {
+    // Select 变体单独处理
+    if (variant === 'select') {
       var _value = state.values;
+      var _maxCount = ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max;
       return /*#__PURE__*/React.createElement(Select, {
         size: "large",
         style: {
@@ -158,58 +218,36 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
         onChange: function onChange(value) {
           return actions.setValue(value);
         },
-        disabled: disabled
+        disabled: disabled,
+        maxTagCount: _maxCount
       });
     }
-    if (grid) {
-      var _grid$columns = grid.columns,
-        columns = _grid$columns === void 0 ? 1 : _grid$columns,
-        align = grid.align,
-        _grid$gutter = grid.gutter,
-        gutter = _grid$gutter === void 0 ? 16 : _grid$gutter,
-        justify = grid.justify,
-        wrap = grid.wrap,
-        _grid$colConfig = grid.colConfig,
-        colConfig = _grid$colConfig === void 0 ? {} : _grid$colConfig;
-      return /*#__PURE__*/React.createElement(ARow, {
-        gutter: gutter,
-        justify: justify,
-        align: align,
-        wrap: wrap
-      }, options.map(function (option) {
-        return /*#__PURE__*/React.createElement(ACol, _extends({
-          key: option._key,
-          span: 24 / columns
-        }, colConfig), renderOption(option));
-      }));
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16
-      }
+    return /*#__PURE__*/React.createElement(LayoutContainer, {
+      className: "pisell-pro-selector_options-container",
+      config: finalLayout
     }, options.map(renderOption));
   };
   var renderErrorMsg = function renderErrorMsg() {
     if (!(errors !== null && errors !== void 0 && errors.length)) return null;
-    return /*#__PURE__*/React.createElement("span", {
+    var error = errors[errors.length - 1];
+    return /*#__PURE__*/React.createElement("div", {
       style: {
         color: '#D92D20'
       }
-    }, errors[0].message);
+    }, error === null || error === void 0 ? void 0 : error.message);
   };
   var renderRequiredTag = function renderRequiredTag() {
-    var _ref = ruleConfig || {},
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required;
+    var _ref2 = ruleConfig || {},
+      _ref2$required = _ref2.required,
+      required = _ref2$required === void 0 ? false : _ref2$required;
     if (!required) return null;
     var style = {
       borderRadius: 16
     };
-    if (errors.find(function (item) {
-      return item.type === 'required';
-    })) {
+    var requiredError = errors.find(function (item) {
+      return item.type === 'required' || item.type === 'min';
+    });
+    if (requiredError) {
       return /*#__PURE__*/React.createElement(ATag, {
         icon: /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null),
         color: "error",
@@ -228,56 +266,66 @@ var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
     }, locales.getText('pisell2.pro.selector.required-tag'));
   };
   var renderTip = function renderTip() {
-    var _titleProps$tip, _titleProps$tip2, _titleProps$tip3;
-    if ((titleProps === null || titleProps === void 0 || (_titleProps$tip = titleProps.tip) === null || _titleProps$tip === void 0 ? void 0 : _titleProps$tip.visible) === false) return null;
-    var text = titleProps === null || titleProps === void 0 || (_titleProps$tip2 = titleProps.tip) === null || _titleProps$tip2 === void 0 ? void 0 : _titleProps$tip2.text;
+    var _headerProps$tip, _headerProps$tip2, _headerProps$tip3;
+    if ((headerProps === null || headerProps === void 0 || (_headerProps$tip = headerProps.tip) === null || _headerProps$tip === void 0 ? void 0 : _headerProps$tip.visible) === false) return null;
+    var text = headerProps === null || headerProps === void 0 || (_headerProps$tip2 = headerProps.tip) === null || _headerProps$tip2 === void 0 ? void 0 : _headerProps$tip2.text;
     if (ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.min || ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.max) {
-      text = locales.getText('pisell2.pro.selector.validate.min-max-selection')(ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min, ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max);
+      text = locales.getText('pisell2.pro.selector.tip.min-max-selection')(ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min, ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max);
     }
     if (!text) {
       if (mode === 'multiple') {
         text = locales.getText('pisell2.pro.selector.mode.multiple');
       } else {
-        text = locales.getText('pisell2.pro.selector.mode.single');
+        text = locales.getText('pisell2.pro.selector.tip.require-one-option');
       }
     }
     if (!text) return null;
     return /*#__PURE__*/React.createElement("span", {
-      style: _objectSpread({
-        color: '#475467'
-      }, titleProps === null || titleProps === void 0 || (_titleProps$tip3 = titleProps.tip) === null || _titleProps$tip3 === void 0 ? void 0 : _titleProps$tip3.style)
+      className: "pisell-pro-selector_tip",
+      style: _objectSpread({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip3 = headerProps.tip) === null || _headerProps$tip3 === void 0 ? void 0 : _headerProps$tip3.style) || {})
     }, "(", text, ")");
   };
-  var renderTitle = function renderTitle() {
-    var _titleProps$icon, _titleProps$icon2, _titleProps$icon3, _titleProps$icon4, _titleProps$title, _titleProps$title2, _titleProps$title3, _titleProps$title$tex, _titleProps$title4;
-    if ((titleProps === null || titleProps === void 0 ? void 0 : titleProps.visible) === false) return null;
+  var renderHeader = function renderHeader() {
+    var _headerProps$icon, _headerProps$icon2, _headerProps$icon3, _headerProps$icon4, _headerProps$title, _headerProps$title2, _headerProps$title3, _headerProps$title$te, _headerProps$title4;
+    if ((headerProps === null || headerProps === void 0 ? void 0 : headerProps.visible) === false) return null;
+    var _extraContent = headerProps !== null && headerProps !== void 0 && headerProps.renderExtra ? headerProps === null || headerProps === void 0 ? void 0 : headerProps.renderExtra({
+      dataSource: options,
+      values: state.values
+    }) : null;
     return /*#__PURE__*/React.createElement("div", {
-      style: _objectSpread({
-        marginBottom: 12,
-        display: 'flex',
-        alignItems: 'center'
-      }, (titleProps === null || titleProps === void 0 ? void 0 : titleProps.style) || {})
+      className: "pisell-pro-selector_header",
+      style: _objectSpread({}, (headerProps === null || headerProps === void 0 ? void 0 : headerProps.style) || {})
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-pro-selector_header-content-wrapper"
     }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-pro-selector_header-content",
       style: {
         display: 'flex',
         alignItems: 'center',
         gap: 8,
         flex: 1
       }
-    }, (titleProps === null || titleProps === void 0 || (_titleProps$icon = titleProps.icon) === null || _titleProps$icon === void 0 ? void 0 : _titleProps$icon.visible) === false || !(titleProps !== null && titleProps !== void 0 && (_titleProps$icon2 = titleProps.icon) !== null && _titleProps$icon2 !== void 0 && _titleProps$icon2.icon) ? null : /*#__PURE__*/React.createElement("span", {
-      style: titleProps === null || titleProps === void 0 || (_titleProps$icon3 = titleProps.icon) === null || _titleProps$icon3 === void 0 ? void 0 : _titleProps$icon3.style
-    }, titleProps === null || titleProps === void 0 || (_titleProps$icon4 = titleProps.icon) === null || _titleProps$icon4 === void 0 ? void 0 : _titleProps$icon4.icon), (titleProps === null || titleProps === void 0 || (_titleProps$title = titleProps.title) === null || _titleProps$title === void 0 ? void 0 : _titleProps$title.visible) === false || !(titleProps !== null && titleProps !== void 0 && (_titleProps$title2 = titleProps.title) !== null && _titleProps$title2 !== void 0 && _titleProps$title2.text) && !props.title ? null : /*#__PURE__*/React.createElement("span", {
-      style: _objectSpread({
-        fontSize: 16,
-        fontWeight: 600
-      }, (titleProps === null || titleProps === void 0 || (_titleProps$title3 = titleProps.title) === null || _titleProps$title3 === void 0 ? void 0 : _titleProps$title3.style) || {})
-    }, (_titleProps$title$tex = titleProps === null || titleProps === void 0 || (_titleProps$title4 = titleProps.title) === null || _titleProps$title4 === void 0 ? void 0 : _titleProps$title4.text) !== null && _titleProps$title$tex !== void 0 ? _titleProps$title$tex : props.title), renderTip(), renderErrorMsg()), renderRequiredTag());
+    }, (headerProps === null || headerProps === void 0 || (_headerProps$icon = headerProps.icon) === null || _headerProps$icon === void 0 ? void 0 : _headerProps$icon.visible) === false || !(headerProps !== null && headerProps !== void 0 && (_headerProps$icon2 = headerProps.icon) !== null && _headerProps$icon2 !== void 0 && _headerProps$icon2.icon) ? null : /*#__PURE__*/React.createElement("span", {
+      style: headerProps === null || headerProps === void 0 || (_headerProps$icon3 = headerProps.icon) === null || _headerProps$icon3 === void 0 ? void 0 : _headerProps$icon3.style
+    }, headerProps === null || headerProps === void 0 || (_headerProps$icon4 = headerProps.icon) === null || _headerProps$icon4 === void 0 ? void 0 : _headerProps$icon4.icon), (headerProps === null || headerProps === void 0 || (_headerProps$title = headerProps.title) === null || _headerProps$title === void 0 ? void 0 : _headerProps$title.visible) === false || !(headerProps !== null && headerProps !== void 0 && (_headerProps$title2 = headerProps.title) !== null && _headerProps$title2 !== void 0 && _headerProps$title2.text) && !props.title ? null : /*#__PURE__*/React.createElement("span", {
+      className: "pisell-pro-selector_header-content-title",
+      style: _objectSpread({}, (headerProps === null || headerProps === void 0 || (_headerProps$title3 = headerProps.title) === null || _headerProps$title3 === void 0 ? void 0 : _headerProps$title3.style) || {})
+    }, (_headerProps$title$te = headerProps === null || headerProps === void 0 || (_headerProps$title4 = headerProps.title) === null || _headerProps$title4 === void 0 ? void 0 : _headerProps$title4.text) !== null && _headerProps$title$te !== void 0 ? _headerProps$title$te : props.title), renderRequiredTag()), renderTip()), _extraContent);
   };
   return /*#__PURE__*/React.createElement("div", {
     id: "pisell-pro-selector-".concat(props.id),
-    style: {
-      width: '100%'
+    className: classNames('pisell-pro-selector', props.className),
+    style: props.style
+  }, renderHeader(), renderErrorMsg(), /*#__PURE__*/React.createElement(SelectorContext.Provider, {
+    value: {
+      mode: mode,
+      disabled: disabled,
+      valueType: valueType,
+      variant: variant,
+      itemLayout: itemLayout,
+      itemProps: itemProps,
+      preset: preset
     }
-  }, renderTitle(), renderOptions());
+  }, renderOptions()));
 });
 export default Selector;