@douyinfe/semi-ui 2.14.0 → 2.15.0-beta.0

package/lib/es/tag/index.js

@@ -17,10 +17,6 @@ var __rest = this && this.__rest || function (s, e) {
 };
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-/* eslint-disable no-unused-vars */
-
-/* eslint-disable max-len */
-
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
@@ -85,7 +81,8 @@ export default class Tag extends Component {
   handleKeyDown(event) {
     const {
       closable,
-      onClick
+      onClick,
+      onKeyDown
     } = this.props;
 
     switch (event.key) {
@@ -107,6 +104,8 @@ export default class Tag extends Component {
       default:
         break;
     }
+
+    onKeyDown && onKeyDown(event);
   }
 
   renderAvatar() {

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

@@ -16,6 +16,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface TagGroupProps {

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

@@ -45,6 +45,7 @@ export interface TagInputProps {
     value?: string[] | undefined;
     autoFocus?: boolean;
     'aria-label'?: string;
+    preventScroll?: boolean;
 }
 export interface TagInputState {
     tagsArray?: string[];
@@ -88,6 +89,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/es/tagInput/index.js

@@ -124,10 +124,15 @@ class TagInput extends BaseComponent {
         });
       },
       toggleFocusing: isFocus => {
+        const {
+          preventScroll
+        } = this.props;
         const input = this.inputRef && this.inputRef.current;
 
         if (isFocus) {
-          input && input.focus();
+          input && input.focus({
+            preventScroll
+          });
         } else {
           input && input.blur();
         }
@@ -168,11 +173,14 @@ class TagInput extends BaseComponent {
   componentDidMount() {
     const {
       disabled,
-      autoFocus
+      autoFocus,
+      preventScroll
     } = this.props;
 
     if (!disabled && autoFocus) {
-      this.inputRef.current.focus();
+      this.inputRef.current.focus({
+        preventScroll
+      });
     }
   }
 
@@ -341,7 +349,12 @@ class TagInput extends BaseComponent {
   }
 
   focus() {
-    this.inputRef.current.focus();
+    const {
+      preventScroll
+    } = this.props;
+    this.inputRef.current.focus({
+      preventScroll
+    });
   }
 
   render() {
@@ -441,7 +454,8 @@ TagInput.propTypes = {
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 TagInput.defaultProps = {
   showClear: false,

package/lib/es/timePicker/TimeInput.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import InputFoundation, { TimeInputAdapter } from '@douyinfe/semi-foundation/lib/es/timePicker/inputFoundation';
 import { TimePickerProps } from './TimePicker';
-export declare type TimeInputProps = Pick<TimePickerProps, 'value' | 'format' | 'prefixCls' | 'placeholder' | 'clearText' | 'inputReadOnly' | 'disabled' | 'type' | 'timeZone' | 'defaultOpen' | 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'dateFnsLocale' | 'onFocus' | 'onBlur' | 'focusOnOpen' | 'locale' | 'localeCode' | 'insetLabel' | 'validateStatus'> & BaseProps & {
+export declare type TimeInputProps = Pick<TimePickerProps, 'value' | 'format' | 'prefixCls' | 'placeholder' | 'clearText' | 'inputReadOnly' | 'disabled' | 'type' | 'timeZone' | 'defaultOpen' | 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'dateFnsLocale' | 'onFocus' | 'onBlur' | 'focusOnOpen' | 'locale' | 'localeCode' | 'insetLabel' | 'validateStatus' | 'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
     onClick?: React.MouseEventHandler;
@@ -38,6 +38,7 @@ declare class TimeInput extends BaseComponent<TimeInputProps, any> {
         localeCode: PropTypes.Requireable<string>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         inputReadOnly: boolean;

package/lib/es/timePicker/TimeInput.js

@@ -48,7 +48,8 @@ class TimeInput extends BaseComponent {
   componentDidMount() {
     super.componentDidMount();
     const {
-      focusOnOpen
+      focusOnOpen,
+      preventScroll
     } = this.props;
 
     if (focusOnOpen) {
@@ -57,7 +58,9 @@ class TimeInput extends BaseComponent {
         const inputNode = this.adapter.getCache('inputNode');
 
         if (inputNode) {
-          inputNode.focus();
+          inputNode.focus({
+            preventScroll
+          });
           inputNode.select();
         }
       });
@@ -186,7 +189,8 @@ TimeInput.propTypes = {
   locale: PropTypes.object,
   localeCode: PropTypes.string,
   insetLabel: PropTypes.node,
-  validateStatus: PropTypes.string
+  validateStatus: PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 TimeInput.defaultProps = {
   inputReadOnly: false,

package/lib/es/timePicker/TimePicker.d.ts

@@ -54,6 +54,7 @@ export declare type TimePickerProps = {
     popupStyle?: React.CSSProperties;
     position?: Position;
     prefixCls?: string;
+    preventScroll?: boolean;
     rangeSeparator?: string;
     scrollItemProps?: ScrollItemProps<any>;
     secondStep?: number;
@@ -88,6 +89,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
         inputStyle: PropTypes.Requireable<object>;
+        preventScroll: PropTypes.Requireable<boolean>;
         panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-labelledby': PropTypes.Requireable<string>;

package/lib/es/timePicker/TimePicker.js

@@ -443,7 +443,8 @@ TimePicker.propTypes = _Object$assign(_Object$assign({
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
   autoAdjustOverflow: PropTypes.bool
 }, PanelShape), {
-  inputStyle: PropTypes.object
+  inputStyle: PropTypes.object,
+  preventScroll: PropTypes.bool
 });
 TimePicker.defaultProps = _Object$assign({
   autoAdjustOverflow: true,

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

@@ -9,6 +9,7 @@ export declare type LocalePickerProps = BasePickerProps;
 export default class LocaleTimePicker extends React.PureComponent<LocalePickerProps> {
     static propTypes: {
         inputStyle: import("prop-types").Requireable<object>;
+        preventScroll: import("prop-types").Requireable<boolean>;
         panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         'aria-labelledby': import("prop-types").Requireable<string>;

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

@@ -54,6 +54,7 @@ export interface TooltipProps extends BaseProps {
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
     wrapperId?: string;
+    preventScroll?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -109,6 +110,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
         guardFocus: PropTypes.Requireable<boolean>;
         returnFocusOnClose: PropTypes.Requireable<boolean>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {

package/lib/es/tooltip/index.js

@@ -251,7 +251,8 @@ export default class Tooltip extends BaseComponent {
 
       if (block || _includesInstanceProperty(blockDisplays).call(blockDisplays, display)) {
         style.width = '100%';
-      }
+      } // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+
 
       return /*#__PURE__*/React.createElement("span", {
         className: wrapperClassName,
@@ -554,10 +555,16 @@ export default class Tooltip extends BaseComponent {
         return getActiveElement();
       },
       setInitialFocus: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         const focusRefNode = _get(this, 'initialFocusRef.current');
 
         if (focusRefNode && 'focus' in focusRefNode) {
-          focusRefNode.focus();
+          focusRefNode.focus({
+            preventScroll
+          });
         }
       },
       notifyEscKeydown: event => {
@@ -676,7 +683,8 @@ export default class Tooltip extends BaseComponent {
           ref.current = node;
         }
       },
-      tabIndex: trigger === 'hover' ? 0 : undefined
+      tabIndex: 0,
+      'data-popupId': id
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -717,7 +725,8 @@ Tooltip.propTypes = {
   role: PropTypes.string,
   wrapWhenSpecial: PropTypes.bool,
   guardFocus: PropTypes.bool,
-  returnFocusOnClose: PropTypes.bool
+  returnFocusOnClose: PropTypes.bool,
+  preventScroll: PropTypes.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,

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

@@ -73,6 +73,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         labelEllipsis: PropTypes.Requireable<boolean>;
         checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/es/tree/index.js

@@ -424,8 +424,14 @@ class Tree extends BaseComponent {
         });
       },
       focusInput: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         if (this.inputRef && this.inputRef.current) {
-          this.inputRef.current.focus();
+          this.inputRef.current.focus({
+            preventScroll
+          });
         }
       }
     };
@@ -731,7 +737,8 @@ Tree.propTypes = {
   onDrop: PropTypes.func,
   labelEllipsis: PropTypes.bool,
   checkRelation: PropTypes.string,
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 Tree.defaultProps = {
   showClear: true,

package/lib/es/tree/treeNode.js

@@ -6,7 +6,6 @@ import _debounce from "lodash/debounce";
 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";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -29,6 +28,7 @@ import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@dou
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
 import Spin from '../spin';
+import { getHighLightTextHTML } from '../_utils/index';
 const prefixcls = cssClasses.PREFIX_OPTION;
 export default class TreeNode extends PureComponent {
   constructor(props) {
@@ -248,22 +248,14 @@ export default class TreeNode extends PureComponent {
       if (_isFunction(renderLabel)) {
         return renderLabel(label, data);
       } else if (_isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
-        var _context;
-
-        const content = [];
-
-        _forEachInstanceProperty(_context = label.split(keyword)).call(_context, (node, index) => {
-          if (index > 0) {
-            content.push( /*#__PURE__*/React.createElement("span", {
-              className: "".concat(prefixcls, "-highlight"),
-              key: index
-            }, keyword));
+        return getHighLightTextHTML({
+          sourceString: label,
+          searchWords: [keyword],
+          option: {
+            highlightTag: 'span',
+            highlightClassName: "".concat(prefixcls, "-highlight")
           }
-
-          content.push(node);
         });
-
-        return content;
       } else {
         return label;
       }
@@ -362,7 +354,7 @@ export default class TreeNode extends PureComponent {
   }
 
   renderEmptyNode() {
-    var _context2;
+    var _context;
 
     const {
       emptyContent
@@ -373,14 +365,14 @@ export default class TreeNode extends PureComponent {
     return /*#__PURE__*/React.createElement("ul", {
       className: wrapperCls
     }, /*#__PURE__*/React.createElement("li", {
-      className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty"),
+      className: _concatInstanceProperty(_context = "".concat(prefixcls, "-label ")).call(_context, prefixcls, "-label-empty"),
       "x-semi-prop": "emptyContent"
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
 
 
   render() {
-    var _context3;
+    var _context2;
 
     const _a = this.props,
           {
@@ -418,7 +410,7 @@ export default class TreeNode extends PureComponent {
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
     const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
     const nodeCls = cls(prefixcls, {
-      [_concatInstanceProperty(_context3 = "".concat(prefixcls, "-level-")).call(_context3, level + 1)]: true,
+      [_concatInstanceProperty(_context2 = "".concat(prefixcls, "-level-")).call(_context2, level + 1)]: true,
       ["".concat(prefixcls, "-collapsed")]: !expanded,
       ["".concat(prefixcls, "-disabled")]: Boolean(disabled),
       ["".concat(prefixcls, "-selected")]: selected,

package/lib/es/treeSelect/index.js

@@ -324,6 +324,14 @@ class TreeSelect extends BaseComponent {
     };
 
     this.search = value => {
+      const {
+        isOpen
+      } = this.state;
+
+      if (!isOpen) {
+        this.foundation.open();
+      }
+
       this.foundation.handleInputChange(value);
     };
 
@@ -1315,7 +1323,6 @@ TreeSelect.defaultProps = {
   motionExpand: true,
   expandAll: false,
   zIndex: popoverNumbers.DEFAULT_Z_INDEX,
-  disabled: false,
   disableStrictly: false,
   multiple: false,
   filterTreeNode: false,

package/locale/source/de.ts

@@ -0,0 +1,156 @@
+import { de } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+const local: Locale = {
+    code: 'de',
+    dateFnsLocale: de,
+    Pagination: {
+        item: 'Artikel',
+        pageSize: ' Artikel / Seite',
+        page: ' Seiten',
+        total: '',
+        jumpTo: 'Springen zu'
+    },
+    Modal: {
+        confirm: 'Bestätigen',
+        cancel: 'Abbrechen',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Zeit auswählen',
+            timeRange: 'Einen Zeitintervall auswählen',
+        },
+        begin: 'Startzeit',
+        end: 'Endzeit',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: 'AM',
+        PM: 'PM',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Datum auswählen',
+            dateTime: 'Datum und Uhrzeit auswählen',
+            dateRange: ['Startdatum', 'Enddatum'],
+            dateTimeRange: ['Startdatum', 'Enddatum'],
+        },
+        footer: {
+            confirm: 'Bestätigen',
+            cancel: 'Abbrechen',
+        },
+        selectDate: 'Datum auswählen',
+        selectTime: 'Uhrzeit auswählen',
+        year: 'Jahr',
+        month: 'Monat',
+        day: 'Tag',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Jan',
+            2: 'Feb',
+            3: 'Mär',
+            4: 'Apr',
+            5: 'Mai',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Aug',
+            9: 'Sep',
+            10: 'Okt',
+            11: 'Nov',
+            12: 'Dez',
+        },
+        fullMonths: {
+            1: 'Januar',
+            2: 'Februar',
+            3: 'März',
+            4: 'April',
+            5: 'Mai',
+            6: 'Juni',
+            7: 'Juli',
+            8: 'August',
+            9: 'September',
+            10: 'Oktober',
+            11: 'November',
+            12: 'Dezember',
+        },
+        weeks: {
+            Mon: 'Mo.',
+            Tue: 'Di.',
+            Wed: 'Mi.',
+            Thu: 'Do.',
+            Fri: 'Fr.',
+            Sat: 'Sa.',
+            Sun: 'So.',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Popconfirm: {
+        confirm: 'Bestätigen',
+        cancel: 'Abbrechen',
+    },
+    Navigation: {
+        collapseText: 'Seitenleiste verstecken',
+        expandText: 'Seitenleiste anzeigen',
+    },
+    Table: {
+        emptyText: 'Kein Ergebnis',
+        pageText: 'Anzeigen ${currentStart} bis ${currentEnd} von ${total}',
+    },
+    Select: {
+        emptyText: 'Kein Ergebnis',
+        createText: 'Kreieren',
+    },
+    Tree: {
+        emptyText: 'Kein Ergebnis',
+        searchPlaceholder: 'Suchen',
+    },
+    Cascader: {
+        emptyText: 'Kein Ergebnis',
+    },
+    List: {
+        emptyText: 'Kein Ergebnis',
+    },
+    Calendar: {
+        allDay: 'Den ganzen Tag',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: '${remained} mehr',
+    },
+    Upload: {
+        mainText: 'Klicken Sie auf Datei hochladen oder ziehen Sie die Datei hierher',
+        illegalTips: 'Dieser Dateityp wird nicht unterstützt',
+        legalTips: 'Freigeben und Hochladen starten',
+        retry: 'Wiederholen',
+        replace: 'Datei ersetzen',
+        clear: 'Löschen',
+        selectedFiles: 'Ausgewählte Dateien',
+        illegalSize: 'Illegale Dateigröße',
+        fail: 'Hochladen fehlgeschlagen',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Suchen',
+    },
+    Typography: {
+        copy: 'Kopieren',
+        copied: 'Kopiert',
+        expand: 'Erweitern',
+        collapse: 'Verstecken',
+    },
+    Transfer: {
+        emptyLeft: 'Keine Daten',
+        emptySearch: 'Keine Suchergebnisse',
+        emptyRight: 'Keine Inhalte, links kontrollieren',
+        placeholder: 'Suchen',
+        clear: 'Löschen',
+        selectAll: 'Alles auswählen',
+        clearSelectAll: 'Alles abwählen',
+        total: 'Gesamt ${total} Artikel',
+        selected: '${total} ausgewählte Artikel',
+    },
+};
+
+// [i18n-German]
+export default local;