@douyinfe/semi-ui 2.36.0 → 2.37.0

package/lib/es/collapse/index.js

@@ -75,10 +75,10 @@ class Collapse extends BaseComponent {
     const {
       activeSet
     } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
       className: clsPrefix,
       style: style
-    }, /*#__PURE__*/React.createElement(CollapseContext.Provider, {
+    }, this.getDataAttr(this.props)), /*#__PURE__*/React.createElement(CollapseContext.Provider, {
       value: {
         activeSet,
         expandIcon,

package/lib/es/collapsible/index.js

@@ -107,7 +107,7 @@ class Collapsible extends BaseComponent {
     const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
       [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
       onTransitionEnd: () => {
@@ -118,7 +118,7 @@ class Collapsible extends BaseComponent {
         this.foundation.updateIsTransitioning(false);
         (_b = (_a = this.props).onMotionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, this.getDataAttr(this.props)), /*#__PURE__*/React.createElement("div", {
       "x-semi-prop": "children",
       ref: this.domRef,
       style: {

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

@@ -18,6 +18,7 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     inputRef?: React.RefObject<HTMLInputElement>;
     rangeInputStartRef?: React.RefObject<HTMLInputElement>;
     rangeInputEndRef?: React.RefObject<HTMLInputElement>;
+    showClearIgnoreDisabled?: boolean;
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {

package/lib/es/datePicker/dateInput.js

@@ -141,15 +141,17 @@ export default class DateInput extends BaseComponent {
       showClear,
       prefixCls,
       disabled,
-      clearIcon
+      clearIcon,
+      showClearIgnoreDisabled
     } = this.props;
-    const allowClear = (rangeStart || rangeEnd) && showClear;
-    return allowClear && !disabled ? /*#__PURE__*/React.createElement("div", {
+    const isRealDisabled = disabled && !showClearIgnoreDisabled;
+    const allowClear = (rangeStart || rangeEnd) && showClear && !isRealDisabled;
+    return allowClear ? /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
       "aria-label": "Clear range input value",
       className: `${prefixCls}-range-input-clearbtn`,
-      onMouseDown: e => !disabled && this.handleRangeInputClear(e)
+      onMouseDown: e => this.handleRangeInputClear(e)
     }, clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, {
       "aria-hidden": true
     })) : null;
@@ -347,9 +349,10 @@ export default class DateInput extends BaseComponent {
         rangeSeparator,
         insetInput,
         insetInputValue,
-        defaultPickerValue
+        defaultPickerValue,
+        showClearIgnoreDisabled
       } = _a,
-      rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "inputRef", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
+      rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "inputRef", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue", "showClearIgnoreDisabled"]);
     const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, {
       "aria-hidden": true
     });
@@ -376,6 +379,7 @@ export default class DateInput extends BaseComponent {
       ref: inputRef,
       insetLabel: insetLabel,
       disabled: disabled,
+      showClearIgnoreDisabled: showClearIgnoreDisabled,
       readonly: inputReadOnly,
       className: inputCls,
       style: inputStyle,

package/lib/es/datePicker/datePicker.js

@@ -5,6 +5,14 @@ import _get from "lodash/get";
 import _isDate from "lodash/isDate";
 import _stubFalse from "lodash/stubFalse";
 import _noop from "lodash/noop";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 /* eslint-disable max-len */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -583,14 +591,16 @@ export default class DatePicker extends BaseComponent {
       presets,
       type,
       presetPosition,
-      insetInput
+      insetInput,
+      locale
     } = this.props;
     return /*#__PURE__*/React.createElement(QuickControl, {
       type: type,
       presets: presets,
       insetInput: insetInput,
       presetPosition: presetPosition,
-      onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e)
+      onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e),
+      locale: locale
     });
   }
   renderDateInput() {
@@ -670,6 +680,7 @@ export default class DatePicker extends BaseComponent {
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary
     const props = Object.assign(Object.assign({}, extraProps), {
+      showClearIgnoreDisabled: Boolean(insetInput),
       placeholder: phText,
       clearIcon,
       disabled: inputDisabled,
@@ -721,13 +732,15 @@ export default class DatePicker extends BaseComponent {
     })) : /*#__PURE__*/React.createElement(DateInput, Object.assign({}, props)));
   }
   render() {
-    const {
-      style,
-      className,
-      prefixCls,
-      type
-    } = this.props;
-    const outerProps = {
+    const _a = this.props,
+      {
+        style,
+        className,
+        prefixCls,
+        type
+      } = _a,
+      rest = __rest(_a, ["style", "className", "prefixCls", "type"]);
+    const outerProps = Object.assign({
       style,
       className: classnames(className, {
         [prefixCls]: true
@@ -738,7 +751,7 @@ export default class DatePicker extends BaseComponent {
       'aria-labelledby': this.props['aria-labelledby'],
       'aria-describedby': this.props['aria-describedby'],
       'aria-required': this.props['aria-required']
-    };
+    }, this.getDataAttr(rest));
     const innerPropKeys = [];
     if (!type.toLowerCase().includes("range")) {
       innerPropKeys.push("borderless");

package/lib/es/datePicker/quickControl.d.ts

@@ -10,6 +10,7 @@ export interface QuickControlProps {
     onPresetClick: (preset: PresetType, e: React.MouseEvent) => void;
     type: string;
     insetInput: DateInputFoundationProps['insetInput'];
+    locale: any;
 }
 declare class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes: {
@@ -18,6 +19,7 @@ declare class QuickControl extends PureComponent<QuickControlProps> {
         onPresetClick: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
         insetInput: PropTypes.Requireable<NonNullable<boolean | object>>;
+        locale: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         presets: PresetsType;

package/lib/es/datePicker/quickControl.js

@@ -17,7 +17,8 @@ class QuickControl extends PureComponent {
       onPresetClick,
       type,
       presetPosition,
-      insetInput
+      insetInput,
+      locale
     } = this.props;
     const isTypeRange = type === 'dateRange' || type === 'dateTimeRange';
     const isPanelTopAndBottom = presetPosition === 'top' || presetPosition === 'bottom';
@@ -57,7 +58,7 @@ class QuickControl extends PureComponent {
       "x-insetinput": insetInput ? "true" : "false"
     }, !isPanelTopAndBottom && /*#__PURE__*/React.createElement("div", {
       className: headerCls
-    }, "\u5FEB\u6377\u9009\u62E9"), /*#__PURE__*/React.createElement("div", {
+    }, locale.presets), /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/React.createElement("div", {
       className: contentCls
@@ -84,7 +85,8 @@ QuickControl.propTypes = {
   presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
   onPresetClick: PropTypes.func,
   type: PropTypes.string,
-  insetInput: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
+  insetInput: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  locale: PropTypes.object
 };
 QuickControl.defaultProps = {
   presets: [],

package/lib/es/descriptions/index.js

@@ -1,23 +1,34 @@
 import _isPlainObject from "lodash/isPlainObject";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
 import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
+import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import DescriptionsContext from './descriptions-context';
 import Item from './item';
 const prefixCls = cssClasses.PREFIX;
 class Descriptions extends PureComponent {
   render() {
-    const {
-      align,
-      row,
-      size,
-      className,
-      style,
-      children,
-      data
-    } = this.props;
+    const _a = this.props,
+      {
+        align,
+        row,
+        size,
+        className,
+        style,
+        children,
+        data
+      } = _a,
+      rest = __rest(_a, ["align", "row", "size", "className", "style", "children", "data"]);
     const classNames = cls(prefixCls, className, {
       [`${prefixCls}-${align}`]: !row,
       [`${prefixCls}-double`]: row,
@@ -28,10 +39,10 @@ class Descriptions extends PureComponent {
     }, item, {
       key: index
     }), item.value) : null) : children;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
       className: classNames,
       style: style
-    }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
+    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(DescriptionsContext.Provider, {
       value: {
         align
       }

package/lib/es/descriptions/item.js

@@ -1,39 +1,50 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
 import '@douyinfe/semi-foundation/lib/es/descriptions/descriptions.css';
+import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import DescriptionsContext from './descriptions-context';
 const prefixCls = cssClasses.PREFIX;
 const keyCls = `${prefixCls}-key`;
 const valCls = `${prefixCls}-value`;
 export default class Item extends PureComponent {
   render() {
-    const {
-      itemKey,
-      hidden,
-      className,
-      style,
-      children
-    } = this.props;
+    const _a = this.props,
+      {
+        itemKey,
+        hidden,
+        className,
+        style,
+        children
+      } = _a,
+      rest = __rest(_a, ["itemKey", "hidden", "className", "style", "children"]);
     const {
       align
     } = this.context;
     if (hidden) {
       return null;
     }
-    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", {
+    const item = align === 'plain' ? /*#__PURE__*/React.createElement("tr", Object.assign({
       className: className,
       style: style
-    }, /*#__PURE__*/React.createElement("td", {
+    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("td", {
       className: `${prefixCls}-item`
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
     }, itemKey, ":"), /*#__PURE__*/React.createElement("span", {
       className: valCls
-    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/React.createElement("tr", {
+    }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/React.createElement("tr", Object.assign({
       className: className,
       style: style
-    }, /*#__PURE__*/React.createElement("th", {
+    }, getDataAttr(rest)), /*#__PURE__*/React.createElement("th", {
       className: `${prefixCls}-item ${prefixCls}-item-th`
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls

package/lib/es/empty/index.js

@@ -1,3 +1,11 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React from 'react';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/empty/constants';
@@ -44,17 +52,19 @@ export default class Empty extends BaseComponent {
     this.observer && this.observer.disconnect();
   }
   render() {
-    const {
-      className,
-      image,
-      description,
-      style,
-      title,
-      imageStyle,
-      children,
-      layout,
-      darkModeImage
-    } = this.props;
+    const _a = this.props,
+      {
+        className,
+        image,
+        description,
+        style,
+        title,
+        imageStyle,
+        children,
+        layout,
+        darkModeImage
+      } = _a,
+      rest = __rest(_a, ["className", "image", "description", "style", "title", "imageStyle", "children", "layout", "darkModeImage"]);
     const alt = typeof description === 'string' ? description : 'empty';
     const imgSrc = this.state.mode === 'dark' && darkModeImage ? darkModeImage : image;
     let imageNode = null;
@@ -83,10 +93,10 @@ export default class Empty extends BaseComponent {
         fontWeight: 400
       }
     };
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: style
-    }, /*#__PURE__*/React.createElement("div", {
+    }, this.getDataAttr(rest)), /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-image`,
       style: imageStyle,
       "x-semi-prop": "image,darkModeImage"

package/lib/es/input/index.d.ts

@@ -50,6 +50,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     getValueLength?: (value: string) => number;
     forwardRef?: ((instance: any) => void) | React.MutableRefObject<any> | null;
     preventScroll?: boolean;
+    /** internal prop, DatePicker use it */
+    showClearIgnoreDisabled?: boolean;
 }
 export interface InputState {
     value: React.ReactText;
@@ -166,6 +168,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     };
     static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
     componentDidUpdate(prevProps: InputProps): void;
+    componentDidMount(): void;
     handleClear: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -182,7 +185,6 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     renderClearBtn(): JSX.Element;
     renderModeBtn(): JSX.Element;
     renderPrefix(): JSX.Element;
-    showClearBtn(): boolean;
     renderSuffix(suffixAllowClear: boolean): JSX.Element;
     getInputRef(): React.RefObject<HTMLInputElement> | React.MutableRefObject<any> | ((node: HTMLInputElement) => void);
     render(): JSX.Element;

package/lib/es/input/index.js

@@ -136,6 +136,21 @@ class Input extends BaseComponent {
       this.handleModeChange(mode);
     }
   }
+  componentDidMount() {
+    // autofocus is changed from the original support of input to the support of manually calling the focus method,
+    // so that preventScroll can still take effect under the setting of autofocus
+    this.foundation.init();
+    const {
+      disabled,
+      autofocus,
+      preventScroll
+    } = this.props;
+    if (!disabled && autofocus) {
+      this.inputRef.current.focus({
+        preventScroll
+      });
+    }
+  }
   renderPrepend() {
     const {
       addonBefore
@@ -244,18 +259,6 @@ class Input extends BaseComponent {
       }, labelNode)
     );
   }
-  showClearBtn() {
-    const {
-      value,
-      isFocus,
-      isHovering
-    } = this.state;
-    const {
-      disabled,
-      showClear
-    } = this.props;
-    return Boolean(value) && showClear && !disabled && (isFocus || isHovering);
-  }
   renderSuffix(suffixAllowClear) {
     const {
       suffix,
@@ -330,15 +333,16 @@ class Input extends BaseComponent {
         maxLength,
         getValueLength,
         preventScroll,
-        borderless
+        borderless,
+        showClearIgnoreDisabled
       } = _a,
-      rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless"]);
+      rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
     const {
       value,
       isFocus,
       minLength: stateMinLength
     } = this.state;
-    const suffixAllowClear = this.showClearBtn();
+    const suffixAllowClear = this.foundation.isAllowClear();
     const suffixIsIcon = isSemiIcon(suffix);
     const ref = this.getInputRef();
     const wrapperPrefix = `${prefixCls}-wrapper`;
@@ -371,7 +375,6 @@ class Input extends BaseComponent {
     const inputValue = value === null || value === undefined ? '' : value;
     const inputProps = Object.assign(Object.assign({}, rest), {
       style: inputStyle,
-      autoFocus: autofocus,
       className: inputCls,
       disabled,
       readOnly: readonly,

package/lib/es/list/index.js

@@ -1,4 +1,12 @@
 import _noop from "lodash/noop";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -52,24 +60,26 @@ class List extends BaseComponent {
     }, childrenList ? childrenList : null, children);
   }
   render() {
-    const {
-      style,
-      className,
-      header,
-      loading,
-      onRightClick,
-      onClick,
-      footer,
-      layout,
-      grid,
-      size,
-      split,
-      loadMore,
-      bordered,
-      dataSource,
-      renderItem,
-      children
-    } = this.props;
+    const _a = this.props,
+      {
+        style,
+        className,
+        header,
+        loading,
+        onRightClick,
+        onClick,
+        footer,
+        layout,
+        grid,
+        size,
+        split,
+        loadMore,
+        bordered,
+        dataSource,
+        renderItem,
+        children
+      } = _a,
+      rest = __rest(_a, ["style", "className", "header", "loading", "onRightClick", "onClick", "footer", "layout", "grid", "size", "split", "loadMore", "bordered", "dataSource", "renderItem", "children"]);
     const wrapperCls = cls(prefixCls, className, {
       [`${prefixCls}-flex`]: layout === 'horizontal',
       [`${prefixCls}-${size}`]: size,
@@ -90,10 +100,10 @@ class List extends BaseComponent {
     } else if (!children && !loading) {
       childrenList = this.renderEmpty();
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: style
-    }, header ? /*#__PURE__*/React.createElement("div", {
+    }, this.getDataAttr(rest)), header ? /*#__PURE__*/React.createElement("div", {
       className: `${cssClasses.PREFIX}-header`,
       "x-semi-prop": "header"
     }, header) : null, /*#__PURE__*/React.createElement(ListContext.Provider, {

package/lib/es/list/item.js

@@ -11,6 +11,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/list/constants';
+import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import { Col } from '../grid';
 import ListContext from './list-context';
 const prefixCls = cssClasses.PREFIX;
@@ -29,19 +30,21 @@ export default class ListItem extends PureComponent {
     return /*#__PURE__*/React.createElement(Col, Object.assign({}, rest), content);
   }
   render() {
-    const {
-      header,
-      main,
-      className,
-      style,
-      extra,
-      children,
-      align,
-      onClick,
-      onRightClick,
-      onMouseEnter,
-      onMouseLeave
-    } = this.props;
+    const _a = this.props,
+      {
+        header,
+        main,
+        className,
+        style,
+        extra,
+        children,
+        align,
+        onClick,
+        onRightClick,
+        onMouseEnter,
+        onMouseLeave
+      } = _a,
+      rest = __rest(_a, ["header", "main", "className", "style", "extra", "children", "align", "onClick", "onRightClick", "onMouseEnter", "onMouseLeave"]);
     const {
       onRightClick: contextOnRightClick,
       onClick: contextOnClick,
@@ -66,14 +69,14 @@ export default class ListItem extends PureComponent {
     let content =
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("li", {
+    React.createElement("li", Object.assign({
       className: itemCls,
       style: style,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
-    }, body ? body : null, children, extra ? /*#__PURE__*/React.createElement("div", {
+    }, getDataAttr(rest)), body ? body : null, children, extra ? /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-item-extra`
     }, extra) : null);
     if (this.context && contextGrid) {

package/lib/es/locale/interface.d.ts

@@ -33,6 +33,7 @@ export interface Locale {
             dateTimeRange: [string, string];
             monthRange: [string, string];
         };
+        presets: string;
         footer: {
             confirm: string;
             cancel: string;

package/lib/es/locale/source/ar.js

@@ -33,6 +33,7 @@ const local = {
       dateTimeRange: ['تاريخ البدء', 'تاريخ النهاية'],
       monthRange: ['الشهر الأول', 'الشهر الأخير']
     },
+    presets: 'اختيار سريع',
     footer: {
       confirm: 'تؤكد',
       cancel: 'إلغاء'

package/lib/es/locale/source/de.js

@@ -33,6 +33,7 @@ const local = {
       dateTimeRange: ['Startdatum', 'Enddatum'],
       monthRange: ['Startmonat', 'Endmonat']
     },
+    presets: 'Schnellauswahl',
     footer: {
       confirm: 'Bestätigen',
       cancel: 'Abbrechen'

package/lib/es/locale/source/en_GB.js

@@ -33,6 +33,7 @@ const local = {
       dateTimeRange: ['Start date', 'End date'],
       monthRange: ['Start month', 'End month']
     },
+    presets: 'Presets',
     footer: {
       confirm: 'Confirm',
       cancel: 'Cancel'

package/lib/es/locale/source/en_US.js

@@ -33,6 +33,7 @@ const local = {
       dateTimeRange: ['Start date', 'End date'],
       monthRange: ['Start month', 'End month']
     },
+    presets: 'Presets',
     footer: {
       confirm: 'Confirm',
       cancel: 'Cancel'