@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.0

package/form/hoc/withField.tsx

@@ -499,7 +499,7 @@ function withField<
                         text={label || field}
                         id={labelId}
                         required={required}
-                        name={name || field}
+                        name={a11yId || name || field}
                         width={mergeLabelWidth}
                         align={mergeLabelAlign}
                         {...needSpread}

package/input/_story/input.stories.js

@@ -884,4 +884,17 @@ export const ClearButton = () => {
 
 ClearButton.story = {
   name: 'clear button',
+};
+
+export const InputFocus = () => {
+  const ref = React.useRef();
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return (
+    <>
+      <Button onClick={handleClick}>focus input</Button>
+      <Input ref={ref} onChange={() => console.log('ref', ref) } onFocus={() => console.log('focus')} />
+    </>
+  );
 };

package/lib/cjs/_base/base.css

@@ -19,7 +19,7 @@ body .semi-always-light {
   --semi-blue-2: 152,205,253;
   --semi-blue-3: 101,178,252;
   --semi-blue-4: 50,149,251;
-  --semi-blue-5: 0,119,250;
+  --semi-blue-5: 0,100,250;
   --semi-blue-6: 0,98,214;
   --semi-blue-7: 0,79,179;
   --semi-blue-8: 0,61,143;
@@ -410,7 +410,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-bg-4: rgba(var(--semi-white), 1);
   --semi-color-text-0: rgba(var(--semi-grey-9), 1);
   --semi-color-text-1: rgba(var(--semi-grey-9), .8);
-  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
+  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
   --semi-color-text-3: rgba(var(--semi-grey-9), .35);
   --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
   --semi-border-radius-extra-small: 3px;
@@ -487,9 +487,9 @@ body[theme-mode=dark], body .semi-always-dark {
   --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-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);
+  --semi-color-fill-0: rgba(var(--semi-white), .12);
+  --semi-color-fill-1: rgba(var(--semi-white), .16);
+  --semi-color-fill-2: rgba(var(--semi-white), .20);
   --semi-color-border: rgba(var(--semi-white), .08);
   --semi-color-shadow: rgba(var(--semi-black), .04);
   --semi-color-bg-0: rgba(22, 22, 26, 1);

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

@@ -9,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    className?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {

package/lib/cjs/button/buttonGroup.js

@@ -30,6 +30,8 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
 
 require("@douyinfe/semi-foundation/lib/cjs/button/button.css");
@@ -60,11 +62,13 @@ class ButtonGroup extends _baseComponent.default {
       disabled,
       size,
       type,
+      className,
       'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
+          rest = __rest(_a, ["children", "disabled", "size", "type", "className", 'aria-label']);
 
     let inner;
+    const cls = (0, _classnames.default)("".concat(prefixCls, "-group"), className);
 
     if (children) {
       var _context;
@@ -79,7 +83,7 @@ class ButtonGroup extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-group"),
+      className: cls,
       role: "group",
       "aria-label": ariaLabel
     }, inner);

package/lib/cjs/calendar/monthCalendar.js

@@ -52,6 +52,7 @@ var _iconButton = _interopRequireDefault(require("../iconButton"));
 
 require("@douyinfe/semi-foundation/lib/cjs/calendar/calendar.css");
 
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 // eslint-disable-next-line max-len
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
@@ -95,11 +96,13 @@ class monthCalendar extends _baseComponent.default {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: "".concat(prefixCls, "-header"),
+        role: "presentation"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-grid")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-grid-row")
       }, (0, _map.default)(_context = this.monthlyData[0]).call(_context, day => {
         const {
@@ -109,6 +112,8 @@ class monthCalendar extends _baseComponent.default {
           ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/_react.default.createElement("li", {
+          role: "columnheader",
+          "aria-label": weekday,
           key: "".concat(weekday, "-monthheader"),
           className: listCls
         }, /*#__PURE__*/_react.default.createElement("span", null, weekday));
@@ -195,7 +200,10 @@ class monthCalendar extends _baseComponent.default {
 
       const text = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Calendar"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
+      }, locale =>
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
         className: "".concat(cardCls, "-wrapper"),
         style: {
           bottom: 0
@@ -264,11 +272,12 @@ class monthCalendar extends _baseComponent.default {
         day
       } = events;
       return /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-weekrow"),
         ref: _this.cellDom,
         key: "".concat(index, "-weekrow")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-skeleton")
       }, (0, _map.default)(weekDay).call(weekDay, each => {
         const {
@@ -288,6 +297,9 @@ class monthCalendar extends _baseComponent.default {
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
 
         const inner = /*#__PURE__*/_react.default.createElement("li", {
+          role: "gridcell",
+          "aria-label": date.toLocaleDateString(),
+          "aria-current": isToday ? "date" : false,
           key: "".concat(date, "-weeksk"),
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
@@ -310,9 +322,10 @@ class monthCalendar extends _baseComponent.default {
         parsedEvents
       } = this.state;
       return /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-week")
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "presentation",
         className: "".concat(prefixCls, "-grid-col")
       }, (0, _map.default)(_context3 = (0, _keys.default)(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
@@ -439,12 +452,15 @@ class monthCalendar extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Calendar"
     }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/_react.default.createElement("div", {
+      role: "grid",
       className: monthCls,
       key: this.state.itemLimit,
       style: monthStyle
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/_react.default.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-grid-wrapper")
     }, this.renderMonthGrid())));
   }

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties, MouseEvent } from 'react';
+import React, { ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
 import { BasicCascaderInnerData, BasicCascaderProps, BasicTriggerRenderProps, BasicScrollPanelProps, CascaderAdapter, CascaderType } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/cascader/cascader.css';
@@ -24,6 +24,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -65,6 +66,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-errormessage': PropTypes.Requireable<string>;
         'aria-describedby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string | any[]>;
@@ -158,6 +160,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
         enableLeafClick: boolean;
+        'aria-label': string;
     };
     options: any;
     isEmpty: boolean;
@@ -177,13 +180,14 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem: (value: string | Array<string>, idx: number, type: string) => React.ReactNode;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
-    handleItemClick: (e: MouseEvent, item: Entity | Data) => void;
+    handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;
     handleItemHover: (e: MouseEvent, item: Entity) => void;
     onItemCheckboxClick: (item: Entity | Data) => void;
     handleListScroll: (e: React.UIEvent<HTMLUListElement, UIEvent>, ind: number) => void;
     renderContent: () => JSX.Element;
     renderPlusN: (hiddenTag: Array<ReactNode>) => JSX.Element;
     renderMultipleTags: () => JSX.Element;
+    renderDisplayText: () => ReactNode;
     renderSelectContent: () => JSX.Element;
     renderSuffix: () => JSX.Element;
     renderPrefix: () => JSX.Element;
@@ -191,6 +195,10 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     handleMouseOver: () => void;
     handleMouseLeave: () => void;
     handleClear: (e: MouseEvent) => void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress: (e: KeyboardEvent) => void;
     showClearBtn: () => boolean;
     renderClearBtn: () => JSX.Element;
     renderArrow: () => JSX.Element;

package/lib/cjs/cascader/index.js

@@ -20,14 +20,14 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -66,7 +66,7 @@ var _util = require("@douyinfe/semi-foundation/lib/cjs/cascader/util");
 
 var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
 
-var _context4 = _interopRequireDefault(require("../configProvider/context"));
+var _context5 = _interopRequireDefault(require("../configProvider/context"));
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
@@ -267,6 +267,36 @@ class Cascader extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayTag, !(0, _isEmpty2.default)(hiddenTag) && this.renderPlusN(hiddenTag));
     };
 
+    this.renderDisplayText = () => {
+      const {
+        displayProp,
+        separator,
+        displayRender
+      } = this.props;
+      const {
+        selectedKeys
+      } = this.state;
+      let displayText = '';
+
+      if (selectedKeys.size) {
+        const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+
+        if (displayRender && typeof displayRender === 'function') {
+          displayText = displayRender(displayPath);
+        } else {
+          displayText = (0, _map.default)(displayPath).call(displayPath, (path, index) => {
+            var _context3;
+
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              key: (0, _concat.default)(_context3 = "".concat(path, "-")).call(_context3, index)
+            }, index < displayPath.length - 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path, separator) : path);
+          });
+        }
+      }
+
+      return displayText;
+    };
+
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -274,7 +304,6 @@ class Cascader extends _baseComponent.default {
         multiple
       } = this.props;
       const {
-        selectedKeys,
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
@@ -289,9 +318,9 @@ class Cascader extends _baseComponent.default {
 
           return this.renderMultipleTags();
         } else {
-          const displayText = selectedKeys.size ? this.foundation.renderDisplayText([...selectedKeys][0]) : '';
+          const displayText = this.renderDisplayText();
           const spanCls = (0, _classnames.default)({
-            ["".concat(prefixcls, "-selection-placeholder")]: !displayText || !displayText.length
+            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
           });
           return /*#__PURE__*/_react.default.createElement("span", {
             className: spanCls
@@ -387,6 +416,15 @@ class Cascader extends _baseComponent.default {
       e && e.stopPropagation();
       this.foundation.handleClear();
     };
+    /**
+     * A11y: simulate clear button click
+     */
+
+
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress();
+    };
 
     this.showClearBtn = () => {
       const {
@@ -413,6 +451,7 @@ class Cascader extends _baseComponent.default {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: clearCls,
           onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress,
           role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
@@ -502,6 +541,7 @@ class Cascader extends _baseComponent.default {
         style: style,
         ref: this.triggerRef,
         onClick: e => this.foundation.handleClick(e),
+        onKeyPress: e => this.foundation.handleSelectionEnterPress(e),
         "aria-invalid": this.props['aria-invalid'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-label": this.props['aria-label'],
@@ -824,7 +864,7 @@ class Cascader extends _baseComponent.default {
   }
 
   renderTagInput() {
-    var _context3;
+    var _context4;
 
     const {
       size,
@@ -843,7 +883,7 @@ class Cascader extends _baseComponent.default {
     const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
     const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
-    (0, _forEach.default)(_context3 = [...realKeys]).call(_context3, checkedKey => {
+    (0, _forEach.default)(_context4 = [...realKeys]).call(_context4, checkedKey => {
       if (!(0, _isEmpty2.default)(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
       }
@@ -934,13 +974,14 @@ class Cascader extends _baseComponent.default {
 
 }
 
-Cascader.contextType = _context4.default;
+Cascader.contextType = _context5.default;
 Cascader.propTypes = {
   'aria-labelledby': _propTypes.default.string,
   'aria-invalid': _propTypes.default.bool,
   'aria-errormessage': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   'aria-required': _propTypes.default.bool,
+  'aria-label': _propTypes.default.string,
   arrowIcon: _propTypes.default.node,
   changeOnSelect: _propTypes.default.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
@@ -1035,7 +1076,8 @@ Cascader.defaultProps = {
   onClear: _noop2.default,
   onDropdownVisibleChange: _noop2.default,
   onListScroll: _noop2.default,
-  enableLeafClick: false
+  enableLeafClick: false,
+  'aria-label': 'Cascader'
 };
 var _default = Cascader;
 exports.default = _default;

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

@@ -22,7 +22,7 @@ export interface CascaderItemProps {
     selectedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
-    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
     onItemHover: (e: React.MouseEvent, item: Entity) => void;
     showNext: ShowNextType;
     onItemCheckboxClick: (item: Entity | Data) => void;
@@ -57,7 +57,11 @@ export default class Item extends PureComponent<CascaderItemProps> {
     static defaultProps: {
         empty: boolean;
     };
-    onClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
+    /**
+     * A11y: simulate item click
+     */
+    handleItemEnterPress: (keyboardEvent: React.KeyboardEvent, item: Entity | Data) => void;
     onHover: (e: React.MouseEvent, item: Entity) => void;
     onCheckboxChange: (e: CheckboxEvent, item: Entity | Data) => void;
     getItemStatus: (key: string) => {

package/lib/cjs/cascader/item.js

@@ -20,6 +20,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
 var _includes2 = _interopRequireDefault(require("lodash/includes"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -30,6 +32,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/cascader/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _context7 = _interopRequireDefault(require("../configProvider/context"));
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
@@ -61,6 +65,16 @@ class Item extends _react.PureComponent {
 
       onItemClick(e, item);
     };
+    /**
+     * A11y: simulate item click
+     */
+
+
+    this.handleItemEnterPress = (keyboardEvent, item) => {
+      if ((0, _isEnterPress.default)(keyboardEvent)) {
+        this.onClick(keyboardEvent, item);
+      }
+    };
 
     this.onHover = (e, item) => {
       const {
@@ -140,6 +154,7 @@ class Item extends _react.PureComponent {
 
         case 'empty':
           return /*#__PURE__*/_react.default.createElement("span", {
+            "aria-hidden": true,
             className: (0, _concat.default)(_context3 = "".concat(prefixcls, "-icon ")).call(_context3, prefixcls, "-icon-empty")
           });
 
@@ -202,11 +217,13 @@ class Item extends _react.PureComponent {
           ["".concat(prefixcls, "-disabled")]: disabled
         });
         return /*#__PURE__*/_react.default.createElement("li", {
+          role: 'menuitem',
           className: className,
           key: key,
           onClick: e => {
             this.onClick(e, item);
-          }
+          },
+          onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: "".concat(prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
@@ -232,13 +249,15 @@ class Item extends _react.PureComponent {
     let showChildItem;
     const ind = content.length;
     content.push( /*#__PURE__*/_react.default.createElement("ul", {
+      role: 'menu',
       className: "".concat(prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, (0, _map.default)(renderData).call(renderData, item => {
       const {
         data,
-        key
+        key,
+        parentKey
       } = item;
       const {
         children,
@@ -263,16 +282,26 @@ class Item extends _react.PureComponent {
         ["".concat(prefixcls, "-select")]: selected && !multiple,
         ["".concat(prefixcls, "-disabled")]: disabled
       });
-      return /*#__PURE__*/_react.default.createElement("li", {
+      const otherAriaProps = parentKey ? {
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
+      } : {};
+      return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
+        role: 'menuitem',
+        id: "cascaderItem-".concat(key),
+        "aria-expanded": active,
+        "aria-haspopup": Boolean(showExpand),
+        "aria-disabled": disabled
+      }, otherAriaProps, {
         className: className,
         key: key,
         onClick: e => {
           this.onClick(e, item);
         },
+        onKeyPress: e => this.handleItemEnterPress(e, item),
         onMouseEnter: e => {
           this.onHover(e, item);
         }
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
         onChange: e => this.onCheckboxChange(e, item),

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
+import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType, InsetInputChangeProps, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { ValueType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     insetLabel?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -13,6 +13,8 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.MouseEvent<HTMLInputElement>, rangeType?: RangeType) => void;
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+    value?: Date[];
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {
@@ -25,7 +27,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        multiple: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
@@ -40,6 +41,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.Requireable<object>;
         rangeInputEndRef: PropTypes.Requireable<object>;
         rangeSeparator: PropTypes.Requireable<string>;
+        insetInput: PropTypes.Requireable<boolean>;
+        insetInputValue: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         showClear: boolean;
@@ -49,7 +52,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onBlur: typeof noop;
         onClear: typeof noop;
         onFocus: typeof noop;
-        multiple: boolean;
         type: string;
         inputStyle: {};
         inputReadOnly: boolean;
@@ -71,11 +73,14 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     handleRangeInputEndKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleRangeInputFocus: (e: React.MouseEvent<HTMLElement>, rangeType: RangeType) => void;
     handleRangeStartFocus: React.MouseEventHandler<HTMLElement>;
+    handleInsetInputChange: (options: InsetInputChangeFoundationProps) => void;
     getRangeInputValue: (rangeStart: string, rangeEnd: string) => string;
     renderRangePrefix(): JSX.Element;
     renderRangeSeparator(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeClearBtn(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeSuffix(suffix: React.ReactNode): JSX.Element;
     renderRangeInput(rangeProps: DateInputProps): JSX.Element;
+    renderInputInset(): JSX.Element;
+    renderTriggerInput(): JSX.Element;
     render(): JSX.Element;
 }