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

package/form/hooks/useFormApi.tsx

@@ -1,6 +1,7 @@
+import { BaseFormApi } from '@douyinfe/semi-foundation/form/interface';
 import React, { useContext } from 'react';
 import { FormApiContext } from '../context';
  
-export default function useFormApi() {
-    return useContext(FormApiContext);
+export default function useFormApi<T extends Record<string, any> = any>() {
+    return useContext<BaseFormApi<T>>(FormApiContext);
 }

package/input/_story/input.stories.js

@@ -897,4 +897,13 @@ export const InputFocus = () => {
       <Input ref={ref} onChange={() => console.log('ref', ref) } onFocus={() => console.log('focus')} />
     </>
   );
-};
+};
+
+export const TextAreaAutosize = () => {
+  return (
+    <div style={{ width: 200 }}>
+      <TextArea autosize />
+    </div>
+  )
+};
+TextAreaAutosize.storyName = "textarea autosize";

package/inputNumber/_story/inputNumber.stories.js

@@ -63,6 +63,10 @@ export const _InputNumber = () => {
         />
         <br />
 
+        <label>小数（没有初始化值）</label>
+        <InputNumber precision={2} onChange={log} />
+        <br />
+
         <label>小数</label>
         <InputNumber defaultValue={10.08} precision={2} onChange={log} />
         <br />

package/lib/cjs/_utils/hooks/usePrevFocus.js

@@ -18,6 +18,7 @@ var _react = require("react");
 
 var _index = require("../index");
 
+/* istanbul ignore next */
 function usePrevFocus() {
   const [prevFocusElement, setPrevFocus] = (0, _react.useState)((0, _index.getActiveElement)());
   (0, _react.useEffect)(() => {

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

@@ -67,4 +67,6 @@ export interface HighLightTextHTMLChunk {
  * @returns boolean
  */
 export declare const isSemiIcon: (icon: any) => boolean;
-export declare function getActiveElement(): HTMLElement;
+export declare function getActiveElement(): HTMLElement | null;
+export declare function isNodeContainsFocus(node: HTMLElement): boolean;
+export declare function getFocusableElements(node: HTMLElement): HTMLElement[];

package/lib/cjs/_utils/index.js

@@ -10,7 +10,10 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.cloneDeep = cloneDeep;
 exports.getActiveElement = getActiveElement;
-exports.registerMediaQuery = exports.isSemiIcon = exports.getHighLightTextHTML = void 0;
+exports.getFocusableElements = getFocusableElements;
+exports.getHighLightTextHTML = void 0;
+exports.isNodeContainsFocus = isNodeContainsFocus;
+exports.registerMediaQuery = exports.isSemiIcon = void 0;
 exports.stopPropagation = stopPropagation;
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
@@ -23,6 +26,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _set2 = _interopRequireDefault(require("lodash/set"));
@@ -35,6 +40,8 @@ var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs
 
 var _getHighlight = require("@douyinfe/semi-foundation/lib/cjs/utils/getHighlight");
 
+var _dom = require("@douyinfe/semi-foundation/lib/cjs/utils/dom");
+
 /* eslint-disable max-len */
 
 /* argus-disable unPkgSensitiveInfo */
@@ -202,4 +209,21 @@ exports.isSemiIcon = isSemiIcon;
 
 function getActiveElement() {
   return document ? document.activeElement : null;
+}
+
+function isNodeContainsFocus(node) {
+  const activeElement = getActiveElement();
+  return activeElement === node || node.contains(activeElement);
+}
+
+function getFocusableElements(node) {
+  if (!(0, _dom.isHTMLElement)(node)) {
+    return [];
+  }
+
+  const focusableSelectorsList = ["input:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "a[href]:not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "object:not([tabindex='-1'])", "*[tabindex]:not([tabindex='-1'])", "*[contenteditable]:not([tabindex='-1'])"];
+  const focusableSelectorsStr = focusableSelectorsList.join(','); // we are not filtered elements which are invisible
+
+  const focusableElements = (0, _from.default)(node.querySelectorAll(focusableSelectorsStr));
+  return focusableElements;
 }

package/lib/cjs/datePicker/monthsGrid.js

@@ -12,8 +12,6 @@ exports.default = void 0;
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
-var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
-
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
@@ -54,6 +52,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultFormatToken");
 
+var _getDefaultPickerDate = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultPickerDate"));
+
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -165,23 +165,15 @@ class MonthsGrid extends _baseComponent.default {
       return this.foundation.getYAMOpenType();
     };
 
-    let nowDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(props.type);
-
-    if (!nowDate) {
-      nowDate = new Date();
-    } else {
-      nowDate = (0, _parser.compatiableParse)(nowDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
-    let nextDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-
-    if (!nextDate) {
-      nextDate = (0, _dateFns.addMonths)(nowDate, 1);
-    } else {
-      nextDate = (0, _parser.compatiableParse)(nextDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
+    const {
+      nowDate,
+      nextDate
+    } = (0, _getDefaultPickerDate.default)({
+      defaultPickerValue: props.defaultPickerValue,
+      format: validFormat,
+      dateFnsLocale: props.dateFnsLocale
+    });
     const dateState = {
       // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
       // The selected value for single or multiple selection, full date string, eg. {'2019-10-01', '2019-10-02'}
@@ -676,7 +668,7 @@ class MonthsGrid extends _baseComponent.default {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
-      "x-insetInput": insetInput ? "true" : "false",
+      "x-insetinput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/cjs/form/hooks/useFormApi.d.ts

@@ -1 +1,2 @@
-export default function useFormApi(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").BaseFormApi<any>;
+import { BaseFormApi } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+export default function useFormApi<T extends Record<string, any> = any>(): BaseFormApi<T>;

package/lib/cjs/modal/useModal/HookModal.js

@@ -57,6 +57,8 @@ const HookModal = (_a, ref) => {
   const {
     motion
   } = props;
+  /* istanbul ignore next */
+
   const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
     didLeave: function () {
       const didLeave = (0, _get2.default)(props.motion, 'didLeave');

package/lib/cjs/notification/useNotification/index.js

@@ -111,9 +111,9 @@ function usePatchElement() {
 function useNotification() {
   const [elements, patchElement] = usePatchElement();
   const noticeRef = new _map2.default();
-  const id = (0, _uuid.default)('semi_notice_');
 
   const addNotice = config => {
+    const id = (0, _uuid.default)('semi_notice_');
     const mergeConfig = (0, _assign.default)((0, _assign.default)({}, config), {
       id
     }); // eslint-disable-next-line prefer-const

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ArrowBounding, Position, Trigger } from '../tooltip/index';
+import { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/cjs/popover/popover.css';
 import { BaseProps } from '../_base/baseComponent';
 import { Motion } from '../_base/base';
@@ -12,7 +12,7 @@ declare interface ArrowStyle {
 }
 export interface PopoverProps extends BaseProps {
     children?: React.ReactNode;
-    content?: React.ReactNode;
+    content?: TooltipProps['content'];
     visible?: boolean;
     autoAdjustOverflow?: boolean;
     motion?: Motion;
@@ -33,6 +33,10 @@ export interface PopoverProps extends BaseProps {
     rePosKey?: string | number;
     getPopupContainer?: () => HTMLElement;
     zIndex?: number;
+    closeOnEsc?: TooltipProps['closeOnEsc'];
+    guardFocus?: TooltipProps['guardFocus'];
+    returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
+    onEscKeyDown?: TooltipProps['onEscKeyDown'];
 }
 export interface PopoverState {
     popConfirmVisible: boolean;
@@ -64,6 +68,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowPointAtCenter: PropTypes.Requireable<boolean>;
         arrowBounding: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
+        guardFocus: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -82,8 +87,18 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         position: string;
         prefixCls: string;
         onClickOutSide: (...args: any[]) => void;
+        onEscKeyDown: (...args: any[]) => void;
+        closeOnEsc: boolean;
+        returnFocusOnClose: boolean;
+        guardFocus: boolean;
     };
-    renderPopCard(): JSX.Element;
+    renderPopCard: ({ initialFocusRef }: {
+        initialFocusRef: RenderContentProps['initialFocusRef'];
+    }) => JSX.Element;
+    renderContentNode: (props: {
+        content: TooltipProps['content'];
+        initialFocusRef: RenderContentProps['initialFocusRef'];
+    }) => React.ReactNode;
     render(): JSX.Element;
 }
 export default Popover;

package/lib/cjs/popover/index.js

@@ -18,6 +18,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -49,23 +51,45 @@ const positionSet = _constants.strings.POSITION_SET;
 const triggerSet = _constants.strings.TRIGGER_SET;
 
 class Popover extends _react.default.PureComponent {
-  renderPopCard() {
-    const {
-      content,
-      contentClassName,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = (0, _classnames.default)(prefixCls, contentClassName, {
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: popCardCls
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, content));
+  constructor() {
+    super(...arguments);
+
+    this.renderPopCard = _ref => {
+      let {
+        initialFocusRef
+      } = _ref;
+      const {
+        content,
+        contentClassName,
+        prefixCls
+      } = this.props;
+      const {
+        direction
+      } = this.context;
+      const popCardCls = (0, _classnames.default)(prefixCls, contentClassName, {
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+      });
+      const contentNode = this.renderContentNode({
+        initialFocusRef,
+        content
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: popCardCls
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-content")
+      }, contentNode));
+    };
+
+    this.renderContentNode = props => {
+      const {
+        initialFocusRef,
+        content
+      } = props;
+      const contentProps = {
+        initialFocusRef
+      };
+      return !(0, _isFunction2.default)(content) ? content : content(contentProps);
+    };
   }
 
   render() {
@@ -85,7 +109,6 @@ class Popover extends _react.default.PureComponent {
     let {
       spacing
     } = this.props;
-    const popContent = this.renderPopCard();
     const arrowProps = {
       position,
       className: '',
@@ -99,11 +122,13 @@ class Popover extends _react.default.PureComponent {
     }
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
-    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, attr, {
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+      guardFocus: true
+    }, attr, {
       trigger: trigger,
       position: position,
       style: style,
-      content: popContent,
+      content: this.renderPopCard,
       prefixCls: prefixCls,
       spacing: spacing,
       showArrow: arrow,
@@ -117,7 +142,7 @@ class Popover extends _react.default.PureComponent {
 Popover.contextType = _context.default;
 Popover.propTypes = {
   children: _propTypes.default.node,
-  content: _propTypes.default.node,
+  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   visible: _propTypes.default.bool,
   autoAdjustOverflow: _propTypes.default.bool,
   motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
@@ -140,7 +165,8 @@ Popover.propTypes = {
   }),
   arrowPointAtCenter: _propTypes.default.bool,
   arrowBounding: _propTypes.default.object,
-  prefixCls: _propTypes.default.string
+  prefixCls: _propTypes.default.string,
+  guardFocus: _propTypes.default.bool
 };
 Popover.defaultProps = {
   arrowBounding: _constants.numbers.ARROW_BOUNDING,
@@ -153,7 +179,11 @@ Popover.defaultProps = {
   okText: 'Yes',
   position: 'bottom',
   prefixCls: _constants.cssClasses.PREFIX,
-  onClickOutSide: _noop2.default
+  onClickOutSide: _noop2.default,
+  onEscKeyDown: _noop2.default,
+  closeOnEsc: true,
+  returnFocusOnClose: true,
+  guardFocus: true
 };
 var _default = Popover;
 exports.default = _default;

package/lib/cjs/radio/radioGroup.js

@@ -55,6 +55,12 @@ class RadioGroup extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }

package/lib/cjs/select/index.js

@@ -742,7 +742,9 @@ class Select extends _baseComponent.default {
       });
     }
 
-    const tags = (0, _map2.default)(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? (0, _slice.default)(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = (0, _map2.default)(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -800,12 +802,13 @@ class Select extends _baseComponent.default {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/_react.default.createElement(_group.default, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/cjs/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/cjs/tag/group.js

@@ -77,9 +77,10 @@ class TagGroup extends _react.PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
     const normalTags = (0, _slice.default)(tags).call(tags, 0, maxTagCount);
     const restTags = (0, _slice.default)(tags).call(tags, maxTagCount);
@@ -156,6 +157,7 @@ TagGroup.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   maxTagCount: _propTypes.default.number,
+  restCount: _propTypes.default.number,
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Event from '@douyinfe/semi-foundation/lib/cjs/utils/Event';
 import { ArrayElement } from '@douyinfe/semi-foundation/lib/cjs/utils/type';
-import { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation';
+import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/tooltip/constants';
 import '@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
@@ -15,6 +15,10 @@ export interface ArrowBounding {
     width?: number;
     height?: number;
 }
+export interface RenderContentProps {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+}
+export declare type RenderContent = (props: RenderContentProps) => React.ReactNode;
 export interface TooltipProps extends BaseProps {
     children?: React.ReactNode;
     motion?: Motion;
@@ -28,7 +32,7 @@ export interface TooltipProps extends BaseProps {
     clickToHide?: boolean;
     visible?: boolean;
     style?: React.CSSProperties;
-    content?: React.ReactNode;
+    content?: React.ReactNode | RenderContent;
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
@@ -44,6 +48,10 @@ export interface TooltipProps extends BaseProps {
     stopPropagation?: boolean;
     clickTriggerToHide?: boolean;
     wrapperClassName?: string;
+    closeOnEsc?: boolean;
+    guardFocus?: boolean;
+    returnFocusOnClose?: boolean;
+    onEscKeyDown?: (e: React.KeyboardEvent) => void;
 }
 interface TooltipState {
     visible: boolean;
@@ -97,6 +105,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         stopPropagation: PropTypes.Requireable<boolean>;
         role: PropTypes.Requireable<string>;
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
+        guardFocus: PropTypes.Requireable<boolean>;
+        returnFocusOnClose: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -121,10 +131,15 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         showArrow: boolean;
         wrapWhenSpecial: boolean;
         zIndex: 1060;
+        closeOnEsc: boolean;
+        guardFocus: boolean;
+        returnFocusOnClose: boolean;
+        onEscKeyDown: (...args: any[]) => void;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;
-    containerEl: React.RefObject<unknown>;
+    containerEl: React.RefObject<HTMLDivElement>;
+    initialFocusRef: React.RefObject<HTMLElement>;
     clickOutsideHandler: any;
     resizeHandler: any;
     isWrapped: boolean;
@@ -132,6 +147,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     scrollHandler: any;
     getPopupContainer: () => HTMLElement;
     containerPosition: string;
+    foundation: TooltipFoundation;
     constructor(props: TooltipProps);
     setContainerEl: (node: HTMLDivElement) => {
         current: HTMLDivElement;
@@ -142,10 +158,12 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
     didLeave: () => void;
     /** for transition - end */
-    rePosition(): any;
+    rePosition(): Record<string, string | number>;
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
+    renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;
     wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
     mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};