@douyinfe/semi-ui 2.17.0-beta.1 → 2.18.0-beta.0

package/lib/es/anchor/link.js

@@ -65,10 +65,14 @@ export default class Link extends BaseComponent {
       } = this.props;
 
       if (!this.context.autoCollapse) {
-        return this.props.children;
+        return /*#__PURE__*/React.createElement("div", {
+          role: "list"
+        }, children);
       }
 
-      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? children : null;
+      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? /*#__PURE__*/React.createElement("div", {
+        role: "list"
+      }, children) : null;
     };
 
     this.foundation = new LinkFoundation(this.adapter);
@@ -144,8 +148,7 @@ export default class Link extends BaseComponent {
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
     const ariaProps = {
-      'aria-disabled': disabled,
-      'aria-label': href
+      'aria-disabled': disabled
     };
 
     if (active) {
@@ -158,7 +161,8 @@ export default class Link extends BaseComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: linkCls,
-      style: style
+      style: style,
+      role: "listitem"
     }, /*#__PURE__*/React.createElement("div", _Object$assign({
       role: "link",
       tabIndex: 0

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/es/autoComplete/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { Position } from '../tooltip';
-import Option from '../select/option';
+import Option from './option';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 import { Motion } from '../_base/base';
 /**

package/lib/es/autoComplete/index.js

@@ -19,7 +19,7 @@ import Spin from '../spin';
 import Popover from '../popover';
 import Input from '../input';
 import Trigger from '../trigger';
-import Option from '../select/option';
+import Option from './option';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 const prefixCls = cssClasses.PREFIX;
@@ -195,7 +195,7 @@ class AutoComplete extends BaseComponent {
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
 
-    const outerProps = _Object$assign({
+    const outerProps = _Object$assign(_Object$assign({
       style,
       className: useCustomTrigger ? cls(className) : cls({
         [prefixCls]: true,
@@ -204,7 +204,10 @@ class AutoComplete extends BaseComponent {
       onClick: this.handleInputClick,
       ref: this.triggerRef,
       id
-    }, keyboardEventSet);
+    }, keyboardEventSet), {
+      // tooltip give tabindex 0 to children by default, autoComplete just need the input get focus, so outer div's tabindex set to -1
+      tabIndex: -1
+    });
 
     const innerProps = {
       disabled,

package/lib/es/autoComplete/option.d.ts

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { BasicOptionProps } from '@douyinfe/semi-foundation/lib/es/autoComplete/optionFoundation';
+export interface OptionProps extends BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface renderOptionContentArgument {
+    config: {
+        searchWords: any;
+        sourceString: React.ReactNode;
+    };
+    children: React.ReactNode;
+    inputValue: string;
+    prefixCls: string;
+}
+declare class Option extends PureComponent<OptionProps> {
+    static isSelectOption: boolean;
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string | number>;
+        selected: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        empty: PropTypes.Requireable<boolean>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        focused: PropTypes.Requireable<boolean>;
+        showTick: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixCls: PropTypes.Requireable<string>;
+        renderOptionItem: PropTypes.Requireable<(...args: any[]) => any>;
+        inputValue: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+    };
+    onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent): void;
+    renderOptionContent({ config, children, inputValue, prefixCls }: renderOptionContentArgument): React.ReactNode;
+    render(): any;
+}
+export default Option;

package/lib/es/autoComplete/option.js

@@ -0,0 +1,188 @@
+import _isString from "lodash/isString";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, 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 (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable max-len */
+
+
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/autoComplete/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconTick } from '@douyinfe/semi-icons';
+import { getHighLightTextHTML } from '../_utils/index';
+
+class Option extends PureComponent {
+  onClick(_a, event) {
+    var {
+      value,
+      label,
+      children
+    } = _a,
+        rest = __rest(_a, ["value", "label", "children"]);
+
+    const {
+      props
+    } = this;
+    const isDisabled = props.disabled;
+
+    if (!isDisabled) {
+      props.onSelect(_Object$assign(_Object$assign({}, rest), {
+        value,
+        label: label || children
+      }), event);
+    }
+  }
+
+  renderOptionContent(_ref) {
+    let {
+      config,
+      children,
+      inputValue,
+      prefixCls
+    } = _ref;
+
+    if (_isString(children) && inputValue) {
+      return getHighLightTextHTML(config);
+    }
+
+    return children;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      children,
+      disabled,
+      value,
+      selected,
+      label,
+      empty,
+      emptyContent,
+      onSelect,
+      focused,
+      showTick,
+      className,
+      style,
+      onMouseEnter,
+      prefixCls,
+      renderOptionItem,
+      inputValue
+    } = _a,
+          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
+
+    const optionClassName = classNames(prefixCls, {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-selected")]: selected,
+      ["".concat(prefixCls, "-focused")]: focused,
+      ["".concat(prefixCls, "-empty")]: empty,
+      [className]: className
+    });
+    const selectedIconClassName = classNames(["".concat(prefixCls, "-icon")]);
+
+    if (empty) {
+      if (emptyContent === null) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Select"
+      }, locale => /*#__PURE__*/React.createElement("div", {
+        className: optionClassName,
+        "x-semi-prop": "emptyContent"
+      }, emptyContent || locale.emptyText));
+    } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
+
+
+    if (typeof renderOptionItem === 'function') {
+      return renderOptionItem(_Object$assign({
+        disabled,
+        focused,
+        selected,
+        style,
+        label,
+        value,
+        inputValue,
+        onMouseEnter: e => onMouseEnter(e),
+        onClick: e => this.onClick(_Object$assign({
+          value,
+          label,
+          children
+        }, rest), e)
+      }, rest));
+    }
+
+    const config = {
+      searchWords: inputValue,
+      sourceString: children,
+      option: {
+        highlightClassName: "".concat(prefixCls, "-keyword")
+      }
+    };
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick(_Object$assign({
+            value,
+            label,
+            children
+          }, rest), e);
+        },
+        onMouseEnter: e => onMouseEnter && onMouseEnter(e),
+        role: "option",
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        style: style
+      }, showTick ? /*#__PURE__*/React.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
+  }
+
+}
+
+Option.isSelectOption = true;
+Option.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selected: PropTypes.bool,
+  label: PropTypes.node,
+  empty: PropTypes.bool,
+  emptyContent: PropTypes.node,
+  onSelect: PropTypes.func,
+  focused: PropTypes.bool,
+  showTick: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onMouseEnter: PropTypes.func,
+  prefixCls: PropTypes.string,
+  renderOptionItem: PropTypes.func,
+  inputValue: PropTypes.string
+};
+Option.defaultProps = {
+  prefixCls: cssClasses.PREFIX_OPTION
+};
+export default Option;

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

@@ -18,6 +18,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         }>[]>;
         mode: PropTypes.Requireable<string>;
         showCurrTime: PropTypes.Requireable<boolean>;
+        weekStartsOn: PropTypes.Requireable<number>;
         scrollTop: PropTypes.Requireable<number>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
@@ -35,6 +36,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         markWeekend: boolean;
         height: number;
         scrollTop: number;
+        weekStartsOn: number;
     };
     render(): React.FunctionComponentElement<any>;
 }

package/lib/es/calendar/index.js

@@ -54,6 +54,7 @@ Calendar.propTypes = {
   })),
   mode: PropTypes.string,
   showCurrTime: PropTypes.bool,
+  weekStartsOn: PropTypes.number,
   scrollTop: PropTypes.number,
   onClick: PropTypes.func,
   renderTimeDisplay: PropTypes.func,
@@ -70,6 +71,7 @@ Calendar.defaultProps = {
   mode: 'week',
   markWeekend: false,
   height: 600,
-  scrollTop: 400
+  scrollTop: 400,
+  weekStartsOn: 0
 };
 export default Calendar;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { EventObject } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
+import { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/calendar/constants';
 import { ArrayElement } from '../_base/base';
 import { BaseProps } from '../_base/baseComponent';
@@ -10,6 +10,7 @@ export interface CalendarProps extends BaseProps {
     events?: EventObject[];
     mode?: ArrayElement<typeof strings.MODE>;
     showCurrTime?: boolean;
+    weekStartsOn?: weeekStartsOnEnum;
     scrollTop?: number;
     onClick?: (e: React.MouseEvent, value: Date) => void;
     onClose?: (e: React.MouseEvent) => void;

package/lib/es/carousel/index.js

@@ -41,7 +41,7 @@ class Carousel extends BaseComponent {
     };
 
     this.handleAutoPlay = () => {
-      if (!this.foundation.getIsControledComponent()) {
+      if (!this.foundation.getIsControlledComponent()) {
         this.foundation.handleAutoPlay();
       }
     };
@@ -61,7 +61,7 @@ class Carousel extends BaseComponent {
         autoPlay
       } = this.props;
 
-      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()) {
+      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControlledComponent()) {
         this.foundation.handleAutoPlay();
       }
     };

package/lib/es/checkbox/checkbox.js

@@ -98,7 +98,10 @@ class Checkbox extends BaseComponent {
   }
 
   isInGroup() {
-    return Boolean(this.context && this.context.checkboxGroup);
+    // Why do we need to determine whether there is a value in props?
+    // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+    // it will be considered not to belong to the checkboxGroup。
+    return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
 
   focus() {

package/lib/es/form/hoc/withField.js

@@ -99,7 +99,8 @@ function withField(Component, opts) {
       if (arrayFieldState) {
         initVal = arrayFieldState.shouldUseInitValue && typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
       }
-    } catch (err) {}
+    } catch (err) {} // FIXME typeof initVal
+
 
     const [value, setValue, getVal] = useStateWithGetter(typeof initVal !== undefined ? initVal : null);
 

package/lib/es/form/label.d.ts

@@ -1,22 +1,23 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface LabelProps {
+    /** text-align of label */
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
     id?: string;
     /** Whether to display the required * symbol */
     required?: boolean;
     /** Content of label */
     text?: React.ReactNode;
-    disabled?: boolean;
     /** Used to configure the htmlFor attribute of the label tag */
     name?: string;
-    /** text-align of label */
-    align?: string;
     /** width of label */
     width?: number | string;
     style?: React.CSSProperties;
-    className?: string;
-    children?: React.ReactNode;
     extra?: React.ReactNode;
+    optional?: boolean;
 }
 export default class Label extends PureComponent<LabelProps> {
     static defaultProps: {
@@ -24,6 +25,7 @@ export default class Label extends PureComponent<LabelProps> {
         name: string;
         align: string;
         className: string;
+        optional: boolean;
     };
     static propTypes: {
         id: PropTypes.Requireable<string>;
@@ -37,6 +39,7 @@ export default class Label extends PureComponent<LabelProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        optional: PropTypes.Requireable<boolean>;
     };
     render(): JSX.Element;
 }

package/lib/es/form/label.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/form/constants';
+import LocaleConsumer from '../locale/localeConsumer';
 const prefixCls = cssClasses.PREFIX;
 export default class Label extends PureComponent {
   render() {
@@ -16,7 +17,8 @@ export default class Label extends PureComponent {
       style,
       className,
       extra,
-      id
+      id,
+      optional
     } = this.props;
     const labelCls = classNames(className, {
       ["".concat(prefixCls, "-field-label")]: true,
@@ -28,10 +30,15 @@ export default class Label extends PureComponent {
     });
     const labelStyle = style ? style : {};
     width ? labelStyle.width = width : null;
+    const optionalText = /*#__PURE__*/React.createElement(LocaleConsumer, {
+      componentName: "Form"
+    }, locale => /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-field-label-optional-text")
+    }, locale.optional));
     const textContent = /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-field-label-text"),
       "x-semi-prop": "label"
-    }, typeof text !== 'undefined' ? text : children);
+    }, typeof text !== 'undefined' ? text : children, optional ? optionalText : null);
     const contentWithExtra = /*#__PURE__*/React.createElement(React.Fragment, null, textContent, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-field-label-extra")
     }, extra));
@@ -48,7 +55,8 @@ Label.defaultProps = {
   required: false,
   name: '',
   align: 'left',
-  className: ''
+  className: '',
+  optional: false
 };
 Label.propTypes = {
   id: PropTypes.string,
@@ -61,5 +69,6 @@ Label.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   style: PropTypes.object,
   className: PropTypes.string,
-  extra: PropTypes.node
+  extra: PropTypes.node,
+  optional: PropTypes.bool
 };

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

@@ -148,4 +148,7 @@ export interface Locale {
         total: string;
         selected: string;
     };
+    Form: {
+        optional: string;
+    };
 }

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'إلغاء تحديد الكل',
     total: 'مجموع ${total} العناصر',
     selected: '${total} العناصر المحدد'
+  },
+  Form: {
+    optional: '(اختياري)'
   }
 }; // [i18n-Arabic]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Alles abwählen',
     total: 'Gesamt ${total} Artikel',
     selected: '${total} ausgewählte Artikel'
+  },
+  Form: {
+    optional: '(Optional)'
   }
 }; // [i18n-German]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Unselect all',
     total: 'Total ${total} items',
     selected: '${total} items selected'
+  },
+  Form: {
+    optional: '(optional)'
   }
 }; // [i18n-English(GB)]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Unselect all',
     total: 'Total ${total} items',
     selected: '${total} items selected'
+  },
+  Form: {
+    optional: '(optional)'
   }
 }; // [i18n-English(US)]
 

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

@@ -152,6 +152,9 @@ const locale = {
     clearSelectAll: 'Deseleccionar todo',
     total: 'Total ${total} objetos',
     selected: '${total} objetos seleccionados'
+  },
+  Form: {
+    optional: '(opcional)'
   }
 };
 export default locale;

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Désélectionner tout',
     total: 'Totale ${total} articles',
     selected: '${total} articles sélectionnés'
+  },
+  Form: {
+    optional: '(optionnel)'
   }
 }; // [i18n-French]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Nyahpilih Semua',
     total: 'Total ${total} proyek',
     selected: '${total} item dipilih'
+  },
+  Form: {
+    optional: '(opsional)'
   }
 }; // [i18n-Indonesia(ID)]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Deseleziona tutto',
     total: 'Totale ${total} elementi',
     selected: '${total} elementi selezionati'
+  },
+  Form: {
+    optional: '(opzionale)'
   }
 }; // [i18n-Italian]
 

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

@@ -148,6 +148,9 @@ const local = {
     clearSelectAll: 'すべてを選択解除',
     total: '合計 ${total} アイテム',
     selected: '選択済み ${total} アイテム'
+  },
+  Form: {
+    optional: '(オプション)'
   }
 }; // [i18n-Japan]
 

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

@@ -148,6 +148,9 @@ const local = {
     clearSelectAll: '모두 선택 취소',
     total: '총 {total} 개 항목',
     selected: '선택된 {Total} 개 항목'
+  },
+  Form: {
+    optional: '(선택 과목)'
   }
 }; // [i18n-Korea]
 

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

@@ -147,6 +147,9 @@ const local = {
     clearSelectAll: 'Nyahpilih semua',
     total: 'Jumlah ${total} item',
     selected: '${total} projek dipilih'
+  },
+  Form: {
+    optional: '(pilihan)'
   }
 }; // [i18n-Malaysia(MY)]
 

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

@@ -155,6 +155,9 @@ const local = {
     clearSelectAll: 'Cancelar selecionar tudo',
     total: 'Total de ${total} itens',
     selected: '${total} itens selecionados'
+  },
+  Form: {
+    optional: '(opcional)'
   }
 }; // 葡萄牙语
 

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

@@ -150,6 +150,9 @@ const local = {
     clearSelectAll: 'Снять выделение',
     total: 'Всего ${total} элементов',
     selected: 'Выбрано ${total} элементов'
+  },
+  Form: {
+    optional: '(по желанию)'
   }
 }; // [i18n-Russia] 俄罗斯语
 

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

@@ -151,6 +151,9 @@ const local = {
     clearSelectAll: 'ยกเลิกการเลือกทั้งหมด',
     total: 'รวม ${total} รายการ',
     selected: 'เลือก ${total} รายการ'
+  },
+  Form: {
+    optional: '(ไม่จำเป็น)'
   }
 }; // [i18n-Thai]