@douyinfe/semi-ui 2.1.4-alpha.0 → 2.2.0-beta.0

package/form/_story/form.stories.js

@@ -432,73 +432,6 @@ FieldDisplayName.story = {
   name: 'Field displayName',
 };
 
-class ReUseDemo extends React.Component {
-  constructor() {
-    super();
-    this.getFormApi = this.getFormApi.bind(this);
-    this.suppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top10以下', value: 10 },
-      { label: 'top30以下', value: 30 },
-    ];
-    this.citySuppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top3以下', value: 3 },
-      { label: 'top5以下', value: 5 },
-      { label: 'top10以下', value: 10 },
-    ];
-  }
-
-  getFormApi(formApi) {
-    this.formApi = formApi;
-  }
-
-  render() {
-    return (
-      <Form
-        getFormApi={this.getFormApi}
-        initValues={{ listType: 'online', attr: { suppress_rank: 0, city_suppress_rank: 5 } }}
-        onValueChange={values => console.log(values)}
-        style={{ width: 250 }}
-      >
-        {({ formState }) => (
-          <>
-            <Form.Select
-              field="listType"
-              label="榜单类型"
-              disabled={this.ifUseOld}
-              style={{ width: '100%' }}
-              // onChange={val => this.onChangeListType(val)}
-            >
-              <Option value="online">热点榜</Option>
-              <Option value="riseHot">上升热点榜</Option>
-              <Option value="sameCity">同城热点榜</Option>
-            </Form.Select>
-            {formState.values.listType !== 'sameCity' ? (
-              <Form.Select
-                label="竞品打压类型"
-                field="attr.suppress_rank"
-                optionList={this.suppressRankOptions}
-              />
-            ) : (
-              <Form.Select
-                label="同城竞品打压"
-                field="attr.city_suppress_rank"
-                optionList={this.citySuppressRankOptions}
-              />
-            )}
-          </>
-        )}
-      </Form>
-    );
-  }
-}
-export const SameFieldSwitchCauseReuse = () => <ReUseDemo />;
-
-SameFieldSwitchCauseReuse.story = {
-  name: 'same field switch cause reuse',
-};
-
 export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {

package/form/_story/form.stories.tsx

@@ -112,8 +112,8 @@ const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi })
             label="是否独占资源（Radio）"
             rules={[{ type: 'boolean' }, { required: true, message: '必须选择是否独占 ' }]}
         >
-            <Form.Radio value={true}>是</Form.Radio>
-            <Form.Radio value={false}>否</Form.Radio>
+            <Form.Radio value={1}>是</Form.Radio>
+            <Form.Radio value={0}>否</Form.Radio>
         </Form.RadioGroup>
         <Form.Checkbox field='abc' noLabel>
             我已阅读并清楚相关规定（Checkbox）

package/form/hoc/withField.tsx

@@ -30,7 +30,7 @@ function withField<
     T extends Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps,
     R extends React.ComponentType<T>
 >(Component: C, opts?: WithFieldOption): R {
-    let SemiField = (props: any, ref: React.MutableRefObject<any>) => {
+    let SemiField = (props: any, ref: React.MutableRefObject<any> | ((instance: any) => void)) => {
         let {
             // condition,
             field,
@@ -75,7 +75,7 @@ function withField<
         // 无需注入的直接返回，eg：Group内的checkbox、radio
         // Return without injection, eg: <Checkbox> / <Radio> inside CheckboxGroup/RadioGroup
         if (!shouldInject) {
-            return <Component {...rest} />;
+            return <Component {...rest} ref={ref} />;
         }
 
         // grab formState from context

package/lib/cjs/_base/base.css

@@ -399,7 +399,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-border: rgba(var(--semi-grey-9), .08);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
   --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
   --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
@@ -486,7 +486,7 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-white), .05);
   --semi-color-fill-1: rgba(var(--semi-white), .09);
   --semi-color-fill-2: rgba(var(--semi-white), .13);

package/lib/cjs/_utils/index.d.ts

@@ -30,6 +30,7 @@ export declare function cloneDeep(value: any, customizer?: (value: any) => void)
 export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
     style: Record<string, any>;
     className: string;
+    key: string;
 }, string | React.JSXElementConstructor<any>>)[];
 export interface RegisterMediaQueryOption {
     match?: (e: MediaQueryList | MediaQueryListEvent) => void;

package/lib/cjs/_utils/index.js

@@ -126,7 +126,7 @@ const getHighLightTextHTML = _ref => {
   const markEle = option.highlightTag || 'mark';
   const highlightClassName = option.highlightClassName || '';
   const highlightStyle = option.highlightStyle || {};
-  return (0, _map.default)(chunks).call(chunks, chunk => {
+  return (0, _map.default)(chunks).call(chunks, (chunk, index) => {
     const {
       end,
       start,
@@ -137,7 +137,8 @@ const getHighLightTextHTML = _ref => {
     if (highlight) {
       return /*#__PURE__*/_react.default.createElement(markEle, {
         style: highlightStyle,
-        className: highlightClassName
+        className: highlightClassName,
+        key: text + index
       }, text);
     } else {
       return text;

package/lib/cjs/button/Button.d.ts

@@ -7,6 +7,7 @@ export declare type Size = 'default' | 'small' | 'large';
 export declare type Theme = 'solid' | 'borderless' | 'light';
 export declare type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

package/lib/cjs/button/buttonGroup.js

@@ -1,7 +1,11 @@
 "use strict";
 
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 _Object$defineProperty(exports, "__esModule", {
@@ -20,7 +24,7 @@ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
@@ -30,6 +34,10 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
 
 require("@douyinfe/semi-foundation/lib/cjs/button/button.css");
 
+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; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -60,13 +68,13 @@ class ButtonGroup extends _baseComponent.default {
     if (children) {
       var _context;
 
-      inner = (0, _map.default)(_context = (0, _isArray.default)(children) ? children : [children]).call(_context, (itm, index) => /*#__PURE__*/_react.default.cloneElement(itm, (0, _assign.default)((0, _assign.default)((0, _assign.default)({
+      inner = (0, _map.default)(_context = (0, _isArray.default)(children) ? children : [children]).call(_context, (itm, index) => /*#__PURE__*/(0, _react.isValidElement)(itm) ? /*#__PURE__*/(0, _react.cloneElement)(itm, (0, _assign.default)((0, _assign.default)((0, _assign.default)({
         disabled,
         size,
         type
       }, itm.props), rest), {
         key: index
-      })));
+      })) : itm);
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {

package/lib/cjs/cascader/index.d.ts

@@ -105,14 +105,18 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
         max: PropTypes.Requireable<number>;
+        separator: PropTypes.Requireable<string>;
         onExceed: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         loadedKeys: PropTypes.Requireable<any[]>;
         disableStrictly: PropTypes.Requireable<boolean>;
+        leafOnly: PropTypes.Requireable<boolean>;
+        enableLeafClick: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
+        leafOnly: boolean;
         arrowIcon: JSX.Element;
         stopPropagation: boolean;
         motion: boolean;
@@ -129,6 +133,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         filterLeafOnly: boolean;
         showRestTagsPopover: boolean;
         restTagsPopoverProps: {};
+        separator: string;
         size: "default";
         treeNodeFilterProp: "label";
         displayProp: "label";
@@ -138,6 +143,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onClear: (...args: any[]) => void;
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
+        enableLeafClick: boolean;
     };
     options: any;
     isEmpty: boolean;
@@ -145,6 +151,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    mergeType: string;
     constructor(props: CascaderProps);
     get adapter(): CascaderAdapter;
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState): Partial<CascaderState>;

package/lib/cjs/cascader/index.js

@@ -28,6 +28,8 @@ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
@@ -175,6 +177,7 @@ class Cascader extends _baseComponent.default {
         dropdownStyle,
         loadData,
         emptyContent,
+        separator,
         topSlot,
         bottomSlot,
         showNext,
@@ -191,6 +194,7 @@ class Cascader extends _baseComponent.default {
       }, topSlot, /*#__PURE__*/_react.default.createElement(_item.default, {
         activeKeys: activeKeys,
         selectedKeys: selectedKeys,
+        separator: separator,
         loadedKeys: loadedKeys,
         loadingKeys: loadingKeys,
         onItemClick: this.handleItemClick,
@@ -243,9 +247,9 @@ class Cascader extends _baseComponent.default {
       } = this.props;
       const {
         checkedKeys,
-        mergedCheckedKeys
+        resolvedCheckedKeys
       } = this.state;
-      const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
       const displayTag = [];
       const hiddenTag = [];
       (0, _forEach.default)(_context2 = [...realKeys]).call(_context2, (checkedKey, idx) => {
@@ -333,20 +337,23 @@ class Cascader extends _baseComponent.default {
       const {
         disabled,
         triggerRender,
-        multiple,
-        autoMergeValue
+        multiple
       } = this.props;
       const {
         selectedKeys,
         inputValue,
         inputPlaceHolder,
-        mergedCheckedKeys,
+        resolvedCheckedKeys,
         checkedKeys
       } = this.state;
       let realValue;
 
       if (multiple) {
-        realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        if (this.mergeType === _constants.strings.NONE_MERGE_TYPE) {
+          realValue = checkedKeys;
+        } else {
+          realValue = resolvedCheckedKeys;
+        }
       } else {
         realValue = [...selectedKeys][0];
       }
@@ -526,8 +533,8 @@ class Cascader extends _baseComponent.default {
       /* Key of half checked node, when multiple */
       halfCheckedKeys: new _set.default([]),
 
-      /* Auto merged checkedKeys, when multiple */
-      mergedCheckedKeys: new _set.default([]),
+      /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
+      resolvedCheckedKeys: new _set.default([]),
 
       /* Keys of loaded item */
       loadedKeys: new _set.default(),
@@ -540,6 +547,7 @@ class Cascader extends _baseComponent.default {
     };
     this.options = {};
     this.isEmpty = false;
+    this.mergeType = (0, _util.calcMergeType)(props.autoMergeValue, props.leafOnly);
     this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
@@ -684,7 +692,9 @@ class Cascader extends _baseComponent.default {
       multiple,
       value,
       defaultValue,
-      onChangeWithObject
+      onChangeWithObject,
+      leafOnly,
+      autoMergeValue
     } = props;
     const {
       prevProps
@@ -745,22 +755,20 @@ class Cascader extends _baseComponent.default {
           realKeys = formatKeys;
         }
 
-        let checkedKeys = new _set.default([]);
-        let halfCheckedKeys = new _set.default([]);
-        (0, _forEach.default)(realKeys).call(realKeys, v => {
-          const calRes = (0, _treeUtil.calcCheckedKeys)(v, keyEntities);
-          checkedKeys = new _set.default([...checkedKeys, ...calRes.checkedKeys]);
-          halfCheckedKeys = new _set.default([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
-        }); // disableStrictly
+        const calRes = (0, _treeUtil.calcCheckedKeys)((0, _flatten2.default)(realKeys), keyEntities);
+        const checkedKeys = new _set.default(calRes.checkedKeys);
+        const halfCheckedKeys = new _set.default(calRes.halfCheckedKeys); // disableStrictly
 
         if (props.disableStrictly) {
           newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
         }
 
+        const isLeafOnlyMerge = (0, _util.calcMergeType)(autoMergeValue, leafOnly) === _constants.strings.LEAF_ONLY_MERGE_TYPE;
+
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
         newState.halfCheckedKeys = halfCheckedKeys;
-        newState.mergedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities));
+        newState.resolvedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
 
@@ -794,7 +802,6 @@ class Cascader extends _baseComponent.default {
     const {
       size,
       disabled,
-      autoMergeValue,
       placeholder,
       maxTagCount,
       showRestTagsPopover,
@@ -804,11 +811,11 @@ class Cascader extends _baseComponent.default {
       inputValue,
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.state;
     const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
-    const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+    const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
     (0, _forEach.default)(_context3 = [...realKeys]).call(_context3, checkedKey => {
       if (!(0, _isEmpty2.default)(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
@@ -956,14 +963,18 @@ Cascader.propTypes = {
   showRestTagsPopover: _propTypes.default.bool,
   restTagsPopoverProps: _propTypes.default.object,
   max: _propTypes.default.number,
+  separator: _propTypes.default.string,
   onExceed: _propTypes.default.func,
   onClear: _propTypes.default.func,
   loadData: _propTypes.default.func,
   onLoad: _propTypes.default.func,
   loadedKeys: _propTypes.default.array,
-  disableStrictly: _propTypes.default.bool
+  disableStrictly: _propTypes.default.bool,
+  leafOnly: _propTypes.default.bool,
+  enableLeafClick: _propTypes.default.bool
 };
 Cascader.defaultProps = {
+  leafOnly: false,
   arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null),
   stopPropagation: true,
   motion: true,
@@ -980,6 +991,7 @@ Cascader.defaultProps = {
   filterLeafOnly: true,
   showRestTagsPopover: false,
   restTagsPopoverProps: {},
+  separator: ' / ',
   size: 'default',
   treeNodeFilterProp: 'label',
   displayProp: 'label',
@@ -988,7 +1000,8 @@ Cascader.defaultProps = {
   onExceed: _noop2.default,
   onClear: _noop2.default,
   onDropdownVisibleChange: _noop2.default,
-  onListScroll: _noop2.default
+  onListScroll: _noop2.default,
+  enableLeafClick: false
 };
 var _default = Cascader;
 exports.default = _default;

package/lib/cjs/cascader/item.d.ts

@@ -33,6 +33,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -50,6 +51,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.Requireable<object>;
         halfCheckedKeys: PropTypes.Requireable<object>;
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
+        separator: PropTypes.Requireable<string>;
         keyword: PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/cjs/cascader/item.js

@@ -83,6 +83,11 @@ class Item extends _react.PureComponent {
       } = this.props; // Prevent Checkbox's click event bubbling to trigger the li click event
 
       e.stopPropagation();
+
+      if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+        e.nativeEvent.stopImmediatePropagation();
+      }
+
       onItemCheckboxClick(item);
     };
 
@@ -146,7 +151,8 @@ class Item extends _react.PureComponent {
     this.highlight = searchText => {
       const content = [];
       const {
-        keyword
+        keyword,
+        separator
       } = this.props;
       (0, _forEach.default)(searchText).call(searchText, (item, idx) => {
         if (typeof item === 'string' && (0, _includes2.default)(item, keyword)) {
@@ -169,7 +175,7 @@ class Item extends _react.PureComponent {
         }
 
         if (idx !== searchText.length - 1) {
-          content.push(' / ');
+          content.push(separator);
         }
       });
       return content;
@@ -344,6 +350,7 @@ Item.propTypes = {
   checkedKeys: _propTypes.default.object,
   halfCheckedKeys: _propTypes.default.object,
   onItemCheckboxClick: _propTypes.default.func,
+  separator: _propTypes.default.string,
   keyword: _propTypes.default.string
 };
 Item.defaultProps = {

package/lib/cjs/checkbox/checkbox.js

@@ -108,7 +108,8 @@ class Checkbox extends _baseComponent.default {
       onMouseEnter,
       onMouseLeave,
       extra,
-      value
+      value,
+      id
     } = this.props;
     const {
       checked
@@ -148,6 +149,7 @@ class Checkbox extends _baseComponent.default {
       ["".concat(prefix, "-cardType_disabled")]: props.disabled && props.isCardType,
       ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
       ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
+      ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
       [className]: Boolean(className)
     });
     const extraCls = (0, _classnames.default)("".concat(prefix, "-extra"), {
@@ -164,6 +166,7 @@ class Checkbox extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("span", {
       style: style,
       className: wrapper,
+      id: id,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onClick: this.handleChange

package/lib/cjs/checkbox/checkboxGroup.d.ts

@@ -18,6 +18,7 @@ export declare type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 export declare type CheckboxGroupState = {
     value?: any[];

package/lib/cjs/checkbox/checkboxGroup.js

@@ -91,6 +91,7 @@ class CheckboxGroup extends _baseComponent.default {
       prefixCls,
       direction,
       className,
+      id,
       style,
       type
     } = this.props;
@@ -140,7 +141,8 @@ class CheckboxGroup extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixClsDisplay,
-      style: style
+      style: style,
+      id: id
     }, /*#__PURE__*/_react.default.createElement(_context7.Context.Provider, {
       value: {
         checkboxGroup: {

package/lib/cjs/datePicker/dateInput.d.ts

@@ -24,7 +24,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         multiple: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;

package/lib/cjs/datePicker/datePicker.d.ts

@@ -29,7 +29,7 @@ export declare type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;
@@ -81,6 +81,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     renderMonth(month: Date, panelType: PanelType): JSX.Element;
     handleWeeksRowNumChange: (weeksRowNum: number, panelType: PanelType) => void;
     reselect: () => void;
+    getYAMOpenType: () => "left" | "right" | "none" | "both";
     renderTimePicker(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderYearAndMonth(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderSwitch(panelType: PanelType): JSX.Element;

package/lib/cjs/datePicker/monthsGrid.js

@@ -157,6 +157,10 @@ class MonthsGrid extends _baseComponent.default {
       });
     };
 
+    this.getYAMOpenType = () => {
+      return this.foundation.getYAMOpenType();
+    };
+
     let nowDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(props.type);
 
@@ -644,9 +648,11 @@ class MonthsGrid extends _baseComponent.default {
       content = 'year month';
     }
 
+    const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: monthGridCls,
       "x-type": type,
+      "x-panel-yearandmonth-open-type": yearOpenType,
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }