@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

package/lib/cjs/modal/ModalContent.js

@@ -4,42 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/modal/constants");
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _iconButton = _interopRequireDefault(require("../iconButton"));
-
 var _typography = _interopRequireDefault(require("../typography"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _modalContentFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _FocusHandle = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/FocusHandle"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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]];
   }
@@ -47,46 +29,39 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 /* eslint-disable eqeqeq */
 
+// eslint-disable-next-line max-len
 
 let uuid = 0;
-
 class ModalContent extends _baseComponent.default {
   constructor(props) {
     super(props);
-
     this.onKeyDown = e => {
       this.foundation.handleKeyDown(e);
-    }; // Record when clicking the modal box
-
-
+    };
+    // Record when clicking the modal box
     this.onDialogMouseDown = () => {
       this.foundation.handleDialogMouseDown();
-    }; // Cancel recording when clicking the modal box at the end
-
-
+    };
+    // Cancel recording when clicking the modal box at the end
     this.onMaskMouseUp = () => {
       this.foundation.handleMaskMouseUp();
-    }; // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
-
-
+    };
+    // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
     this.onMaskClick = e => {
       this.foundation.handleMaskClick(e);
     };
-
     this.close = e => {
       this.foundation.close(e);
     };
-
     this.getMaskElement = () => {
       const props = __rest(this.props, []);
-
       const {
         mask,
         maskClassName
       } = props;
-
       if (mask) {
-        const className = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-mask`, {
+          // [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/_react.default.createElement("div", Object.assign({
           key: "mask"
@@ -95,22 +70,18 @@ class ModalContent extends _baseComponent.default {
           style: props.maskStyle
         }));
       }
-
       return null;
     };
-
     this.renderCloseBtn = () => {
       const {
         closable,
         closeIcon
       } = this.props;
       let closer;
-
       if (closable) {
         const iconType = closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
           "x-semi-prop": "closeIcon"
         });
-
         closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
           "aria-label": "close",
           className: `${_constants.cssClasses.DIALOG}-close`,
@@ -122,10 +93,8 @@ class ModalContent extends _baseComponent.default {
           size: "small"
         });
       }
-
       return closer;
     };
-
     this.renderIcon = () => {
       const {
         icon
@@ -135,12 +104,10 @@ class ModalContent extends _baseComponent.default {
         "x-semi-prop": "icon"
       }, icon) : null;
     };
-
     this.renderHeader = () => {
       if ('header' in this.props) {
         return this.props.header;
       }
-
       const {
         title
       } = this.props;
@@ -155,7 +122,6 @@ class ModalContent extends _baseComponent.default {
         "x-semi-prop": "title"
       }, title), closer);
     };
-
     this.renderBody = () => {
       const {
         bodyStyle,
@@ -181,37 +147,30 @@ class ModalContent extends _baseComponent.default {
         "x-semi-prop": "children"
       }, children), closer);
     };
-
     this.getDialogElement = () => {
       const props = __rest(this.props, []);
-
       const style = {};
       const digCls = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}`, {
         [`${_constants.cssClasses.DIALOG}-centered`]: props.centered,
         [`${_constants.cssClasses.DIALOG}-${props.size}`]: props.size
       });
-
       if (props.width) {
         style.width = props.width;
       }
-
       if (props.height) {
         style.height = props.height;
       }
-
       if (props.isFullScreen) {
         style.width = '100%';
         style.height = '100%';
         style.margin = 'unset';
       }
-
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/_react.default.createElement("div", {
         className: `${_constants.cssClasses.DIALOG}-footer`,
         "x-semi-prop": "footer"
       }, props.footer) : null;
-
       const dialogElement =
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -231,12 +190,10 @@ class ModalContent extends _baseComponent.default {
         className: (0, _classnames.default)([`${_constants.cssClasses.DIALOG}-content`, props.contentClassName, {
           [`${_constants.cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
         }])
-      }, header, body, footer)); // return props.visible ? dialogElement : null;
-
-
+      }, header, body, footer));
+      // return props.visible ? dialogElement : null;
       return dialogElement;
     };
-
     this.state = {
       dialogMouseDown: false,
       prevFocusElement: _FocusHandle.default.getActiveElement()
@@ -245,7 +202,6 @@ class ModalContent extends _baseComponent.default {
     this.dialogId = `dialog-${uuid++}`;
     this.modalDialogRef = /*#__PURE__*/_react.default.createRef();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       notifyClose: e => {
@@ -279,22 +235,18 @@ class ModalContent extends _baseComponent.default {
       getMouseState: () => this.state.dialogMouseDown,
       modalDialogFocus: () => {
         var _a, _b, _c;
-
         const {
           preventScroll
         } = this.props;
         let activeElementInDialog;
-
         if (this.modalDialogRef) {
           const activeElement = _FocusHandle.default.getActiveElement();
-
           activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
           (_a = this.focusTrapHandle) === null || _a === void 0 ? void 0 : _a.destroy();
           this.focusTrapHandle = new _FocusHandle.default(this.modalDialogRef.current, {
             preventScroll
           });
         }
-
         if (!activeElementInDialog) {
           (_c = (_b = this.modalDialogRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus({
             preventScroll
@@ -303,7 +255,6 @@ class ModalContent extends _baseComponent.default {
       },
       modalDialogBlur: () => {
         var _a, _b;
-
         (_a = this.modalDialogRef) === null || _a === void 0 ? void 0 : _a.current.blur();
         (_b = this.focusTrapHandle) === null || _b === void 0 ? void 0 : _b.destroy();
       },
@@ -321,26 +272,20 @@ class ModalContent extends _baseComponent.default {
       }
     });
   }
-
   componentDidMount() {
     var _a;
-
     this.foundation.handleKeyDownEventListenerMount();
     this.foundation.modalDialogFocus();
-
     const nodes = _FocusHandle.default.getFocusableElements(this.modalDialogRef.current);
-
     if (!this.modalDialogRef.current.contains(document.activeElement)) {
       // focus on first focusable element
       (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
-
   componentWillUnmount() {
     clearTimeout(this.timeoutId);
     this.foundation.destroy();
   }
-
   render() {
     const {
       maskClosable,
@@ -358,7 +303,6 @@ class ModalContent extends _baseComponent.default {
       [`${_constants.cssClasses.DIALOG}-rtl`]: direction === 'rtl'
     });
     const containerContext = getContainerContext();
-
     const elem = /*#__PURE__*/_react.default.createElement("div", {
       className: classList
     }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", Object.assign({
@@ -369,16 +313,13 @@ class ModalContent extends _baseComponent.default {
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null
-    }, this.props.contentExtraProps), this.getDialogElement())); // eslint-disable-next-line max-len
-
-
+    }, this.props.contentExtraProps), this.getDialogElement()));
+    // eslint-disable-next-line max-len
     return containerContext && containerContext.Provider ? /*#__PURE__*/_react.default.createElement(containerContext.Provider, {
       value: containerContext.value
     }, elem) : elem;
   }
-
 }
-
 exports.default = ModalContent;
 ModalContent.contextType = _context.default;
 ModalContent.propTypes = {

package/lib/cjs/modal/confirm.d.ts

@@ -156,6 +156,7 @@ export declare function withError(props: ModalReactProps): {
     visible?: boolean;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     zIndex?: number;
     closeOnEsc?: boolean;
     preventScroll?: boolean;
@@ -166,7 +167,6 @@ export declare function withError(props: ModalReactProps): {
     closeIcon?: React.ReactNode;
     bodyStyle?: React.CSSProperties;
     closable?: boolean;
-    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     maskClosable?: boolean;
     cancelButtonProps?: import("../button").BaseButtonProps;
     centered?: boolean;
@@ -210,6 +210,7 @@ export declare function withError(props: ModalReactProps): {
         slot?: string;
         hidden?: boolean;
         color?: string;
+        content?: string;
         onChange?: React.FormEventHandler<HTMLButtonElement>;
         defaultChecked?: boolean;
         defaultValue?: string | number | readonly string[];
@@ -227,10 +228,11 @@ export declare function withError(props: ModalReactProps): {
         lang?: string;
         translate?: "no" | "yes";
         prefix?: string;
+        role?: React.AriaRole;
         contentEditable?: "inherit" | (boolean | "false" | "true");
         inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+        nonce?: string;
         tabIndex?: number;
-        role?: React.AriaRole;
         onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
         onFocus?: React.FocusEventHandler<HTMLButtonElement>;
@@ -248,7 +250,9 @@ export declare function withError(props: ModalReactProps): {
         datatype?: string;
         inlist?: any;
         property?: string;
+        rel?: string;
         resource?: string;
+        rev?: string;
         typeof?: string;
         vocab?: string;
         autoCapitalize?: string;
@@ -307,7 +311,7 @@ export declare function withError(props: ModalReactProps): {
         'aria-valuenow'?: number;
         'aria-valuetext'?: string;
         dangerouslySetInnerHTML?: {
-            __html: string;
+            __html: string | TrustedHTML;
         };
         onCopy?: React.ClipboardEventHandler<HTMLButtonElement>;
         onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement>;
@@ -373,6 +377,8 @@ export declare function withError(props: ModalReactProps): {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement>;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onResize?: React.ReactEventHandler<HTMLButtonElement>;
+        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement>;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement>;

package/lib/cjs/modal/confirm.js

@@ -9,52 +9,38 @@ exports.withError = withError;
 exports.withInfo = withInfo;
 exports.withSuccess = withSuccess;
 exports.withWarning = withWarning;
-
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _Modal = require("./Modal");
-
 var _ConfirmModal = _interopRequireDefault(require("./ConfirmModal"));
-
 require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function confirm(props) {
   // create a dom in adapter?
   const div = document.createElement('div');
   document.body.appendChild(div);
   let currentConfig = Object.assign({}, props);
-
   const destroy = () => {
     const unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
     if (unmountResult && div.parentNode) {
       div.parentNode.removeChild(div);
     }
-
     for (let i = 0; i < _Modal.destroyFns.length; i++) {
-      const fn = _Modal.destroyFns[i]; // eslint-disable-next-line @typescript-eslint/no-use-before-define
-
+      const fn = _Modal.destroyFns[i];
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       if (fn === close) {
         _Modal.destroyFns.splice(i, 1);
-
         break;
       }
     }
   };
-
   function render(renderProps) {
     const {
       afterClose
-    } = renderProps; //@ts-ignore
-
+    } = renderProps;
+    //@ts-ignore
     _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ConfirmModal.default, Object.assign({}, renderProps, {
       afterClose: function () {
         //@ts-ignore
@@ -64,50 +50,41 @@ function confirm(props) {
       motion: props.motion
     })), div);
   }
-
   function close() {
     currentConfig = Object.assign(Object.assign({}, currentConfig), {
       visible: false
     });
     render(currentConfig);
   }
-
   function update(newConfig) {
     currentConfig = Object.assign(Object.assign({}, currentConfig), newConfig);
     render(currentConfig);
   }
-
   render(currentConfig);
-
   _Modal.destroyFns.push(close);
-
   return {
     destroy: close,
     update
   };
 }
-
 function withInfo(props) {
   return Object.assign({
     type: 'info',
     icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconInfoCircle, null)
   }, props);
 }
-
 function withSuccess(props) {
   return Object.assign({
     type: 'success',
     icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, null)
   }, props);
 }
-
 function withWarning(props) {
   return Object.assign({
     type: 'warning',
     icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, null)
   }, props);
 }
-
 function withError(props) {
   return Object.assign({
     type: 'error',
@@ -117,7 +94,6 @@ function withError(props) {
     }, props.okButtonProps)
   }, (0, _omit2.default)(props, ['okButtonProps']));
 }
-
 function withConfirm(props) {
   return Object.assign({
     type: 'confirm',

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

@@ -3,6 +3,6 @@ import { ModalState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalFoundat
 import Modal from './Modal';
 import { ModalReactProps } from './Modal';
 export type { ConfirmProps } from './confirm';
-export declare type Directions = 'ltr' | 'rtl';
+export type Directions = 'ltr' | 'rtl';
 export type { ModalReactProps, ModalState };
 export default Modal;

package/lib/cjs/modal/index.js

@@ -4,12 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
-
 var _Modal = _interopRequireDefault(require("./Modal"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Modal.default;
 exports.default = _default;

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

@@ -4,34 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _ConfirmModal = _interopRequireDefault(require("../ConfirmModal"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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-next-line max-len
 const HookModal = (_a, ref) => {
   var {
-    afterClose,
-    config
-  } = _a,
-      props = __rest(_a, ["afterClose", "config"]);
-
+      afterClose,
+      config
+    } = _a,
+    props = __rest(_a, ["afterClose", "config"]);
   const [innerConfig, setInnerConfig] = _react.default.useState(config);
-
   _react.default.useImperativeHandle(ref, () => ({
     destroy: () => {
       setInnerConfig(originConfig => Object.assign(Object.assign({}, originConfig), {
@@ -42,19 +33,14 @@ const HookModal = (_a, ref) => {
       setInnerConfig(originConfig => Object.assign(Object.assign({}, originConfig), newConfig));
     }
   }));
-
   const mergeAfterClose = () => {
     var _a;
-
     (_a = config === null || config === void 0 ? void 0 : config.afterClose) === null || _a === void 0 ? void 0 : _a.call(config);
     afterClose();
   };
-
   return /*#__PURE__*/_react.default.createElement(_ConfirmModal.default, Object.assign({}, innerConfig, {
     afterClose: mergeAfterClose
   }));
 };
-
 var _default = /*#__PURE__*/_react.default.forwardRef(HookModal);
-
 exports.default = _default;

package/lib/cjs/modal/useModal/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
-declare type UseModalReturnHooksType = (config: ModalReactProps) => {
+type UseModalReturnHooksType = (config: ModalReactProps) => {
     destroy: () => void;
     update: (newConfig: ConfirmProps) => void;
 };

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

@@ -4,42 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useModal;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _HookModal = _interopRequireDefault(require("./HookModal"));
-
 var _confirm = require("../confirm");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 let uuid = 0;
-
 function usePatchElement() {
   const [elements, setElements] = _react.default.useState([]);
-
   function patchElement(element) {
     setElements(originElements => [...originElements, element]);
     return () => {
       setElements(originElements => originElements.filter(ele => ele !== element));
     };
   }
-
   return [elements, patchElement];
 }
-
 function useModal() {
-  const [elements, patchElement] = usePatchElement(); // eslint-disable-next-line max-len
-
+  const [elements, patchElement] = usePatchElement();
+  // eslint-disable-next-line max-len
   function getConfirmFunc(withFunc) {
     return function hookConfirm(config) {
       uuid += 1;
-
-      const modalRef = /*#__PURE__*/_react.default.createRef(); // eslint-disable-next-line prefer-const
-
-
+      const modalRef = /*#__PURE__*/_react.default.createRef();
+      // eslint-disable-next-line prefer-const
       let closeFunc;
-
       const modal = /*#__PURE__*/_react.default.createElement(_HookModal.default, {
         key: `semi-modal-${uuid}`,
         config: withFunc(config),
@@ -48,7 +36,6 @@ function useModal() {
           closeFunc();
         }
       });
-
       closeFunc = patchElement(modal);
       return {
         destroy: () => {
@@ -64,7 +51,6 @@ function useModal() {
       };
     };
   }
-
   return [{
     info: getConfirmFunc(_confirm.withInfo),
     success: getConfirmFunc(_confirm.withSuccess),

package/lib/cjs/navigation/CollapseButton.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CollapseButton;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _button = _interopRequireDefault(require("../button"));
-
 var _tooltip = _interopRequireDefault(require("../tooltip"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function CollapseButton(_ref) {
   let {
     prefixCls,
@@ -25,13 +18,11 @@ function CollapseButton(_ref) {
     isCollapsed,
     onClick = _noop2.default
   } = _ref;
-
   const handleClick = () => {
     if (typeof onClick === 'function') {
       onClick(!isCollapsed);
     }
   };
-
   const btnProps = {
     icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSidebar, null),
     type: 'tertiary',
@@ -39,11 +30,9 @@ function CollapseButton(_ref) {
     onClick: handleClick
   };
   let finalCollapseText = isCollapsed ? locale === null || locale === void 0 ? void 0 : locale.expandText : locale === null || locale === void 0 ? void 0 : locale.collapseText;
-
   if (typeof collapseText === 'function') {
     finalCollapseText = collapseText(isCollapsed);
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefixCls}-collapse-btn`
   }, isCollapsed ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {