@douyinfe/semi-ui 2.22.0-beta.0 → 2.22.0-beta.1

package/lib/es/modal/Modal.js

@@ -26,6 +26,7 @@ import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 import BaseComponent from '../_base/baseComponent';
 import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
 import useModal from './useModal';
+import CSSAnimation from "../_cssAnimation";
 export const destroyFns = [];
 
 class Modal extends BaseComponent {
@@ -40,19 +41,13 @@ class Modal extends BaseComponent {
       this.foundation.handleOk(e);
     };
 
-    this.updateHiddenState = () => {
+    this.updateState = () => {
       const {
         visible
       } = this.props;
-      const {
-        hidden
-      } = this.state;
-
-      if (!visible && !hidden) {
-        this.foundation.toggleHidden(true, () => this.foundation.afterClose());
-      } else if (visible && this.state.hidden) {
-        this.foundation.toggleHidden(false);
-      }
+      this.foundation.toggleDisplayNone(!visible);
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
+      this.foundation.setShouldRender(shouldRender);
     };
 
     this.renderFooter = () => {
@@ -132,39 +127,62 @@ class Modal extends BaseComponent {
       }
 
       const classList = cls(className, {
-        ["".concat(cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.hidden && !visible
+        ["".concat(cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
       });
-      const contentClassName = motion ? cls({
-        ["".concat(cssClasses.DIALOG, "-content-animate-hide")]: !visible,
-        ["".concat(cssClasses.DIALOG, "-content-animate-show")]: visible
-      }) : null;
-      const maskClassName = motion ? cls({
-        ["".concat(cssClasses.DIALOG, "-mask-animate-hide")]: !visible,
-        ["".concat(cssClasses.DIALOG, "-mask-animate-show")]: visible
-      }) : null;
+
+      if (this.state.shouldRender) {
+        this._haveRendered = true;
+      }
+
       return /*#__PURE__*/React.createElement(Portal, {
         style: wrapperStyle,
         getPopupContainer: getPopupContainer
-      }, /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
-        isFullScreen: this.state.isFullScreen,
-        contentClassName: contentClassName,
-        maskClassName: maskClassName,
-        className: classList,
-        getPopupContainer: getPopupContainer,
-        maskStyle: maskStyle,
-        style: style,
-        ref: this.modalRef,
+      }, /*#__PURE__*/React.createElement(CSSAnimation, {
+        motion: this.props.motion,
+        animationState: visible ? 'enter' : 'leave',
+        startClassName: visible ? "".concat(cssClasses.DIALOG, "-content-animate-show") : "".concat(cssClasses.DIALOG, "-content-animate-hide"),
         onAnimationEnd: () => {
-          this.updateHiddenState();
-        },
-        footer: renderFooter,
-        onClose: this.handleCancel
-      })));
+          this.updateState();
+        }
+      }, _ref => {
+        let {
+          animationClassName,
+          animationEventsNeedBind
+        } = _ref;
+        return /*#__PURE__*/React.createElement(CSSAnimation, {
+          motion: this.props.motion,
+          animationState: visible ? 'enter' : 'leave',
+          startClassName: visible ? "".concat(cssClasses.DIALOG, "-mask-animate-show") : "".concat(cssClasses.DIALOG, "-mask-animate-hide"),
+          onAnimationEnd: () => {
+            this.updateState();
+          }
+        }, _ref2 => {
+          let {
+            animationClassName: maskAnimationClassName,
+            animationEventsNeedBind: maskAnimationEventsNeedBind
+          } = _ref2;
+          return this.state.shouldRender ? /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
+            contentExtraProps: animationEventsNeedBind,
+            maskExtraProps: maskAnimationEventsNeedBind,
+            isFullScreen: this.state.isFullScreen,
+            contentClassName: animationClassName,
+            maskClassName: maskAnimationClassName,
+            className: classList,
+            getPopupContainer: getPopupContainer,
+            maskStyle: maskStyle,
+            style: style,
+            ref: this.modalRef,
+            footer: renderFooter,
+            onClose: this.handleCancel
+          })) : /*#__PURE__*/React.createElement(React.Fragment, null);
+        });
+      }));
     };
 
     this.state = {
-      hidden: !props.visible,
-      isFullScreen: props.fullScreen
+      displayNone: !props.visible,
+      isFullScreen: props.fullScreen,
+      shouldRender: this.props.visible || this.props.keepDOM && !this.props.lazyRender
     };
     this.foundation = new ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/React.createRef();
@@ -204,15 +222,12 @@ class Modal extends BaseComponent {
         this.props.onOk(e);
       },
       notifyClose: () => {
-        var _a, _b;
-
-        (_b = (_a = this.props.motion) === null || _a === void 0 ? void 0 : _a.didLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.props.afterClose();
       },
-      toggleHidden: (hidden, callback) => {
-        if (hidden !== this.state.hidden) {
+      toggleDisplayNone: (displayNone, callback) => {
+        if (displayNone !== this.state.displayNone) {
           this.setState({
-            hidden
+            displayNone: displayNone
           }, callback || _noop);
         }
       },
@@ -222,6 +237,13 @@ class Modal extends BaseComponent {
             isFullScreen
           });
         }
+      },
+      setShouldRender: shouldRender => {
+        if (shouldRender !== this.state.shouldRender) {
+          this.setState({
+            shouldRender
+          });
+        }
       }
     });
   }
@@ -233,6 +255,14 @@ class Modal extends BaseComponent {
       newState.isFullScreen = props.fullScreen;
     }
 
+    if (props.visible && prevState.displayNone) {
+      newState.displayNone = false;
+    } //
+    // if (!props.visible && !props.motion && !prevState.displayNone) {
+    //     newState.displayNone = true;
+    // }
+
+
     return newState;
   }
 
@@ -250,7 +280,6 @@ class Modal extends BaseComponent {
 
     if (this.props.visible) {
       this.foundation.beforeShow();
-      this._active = this._active || this.props.visible;
     }
   }
 
@@ -258,15 +287,16 @@ class Modal extends BaseComponent {
     // hide => show
     if (!prevProps.visible && this.props.visible) {
       this.foundation.beforeShow();
-    } // show => hide
+    }
 
+    const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
 
-    if (prevProps.visible && !this.props.visible) {
-      this.foundation.afterHide();
+    if (shouldRender === true && this.state.shouldRender === false) {
+      this.foundation.setShouldRender(true);
     }
 
-    if (!this.props.motion) {
-      this.updateHiddenState();
+    if (!prevState.displayNone && this.state.displayNone) {
+      this.foundation.afterHide();
     }
   }
 
@@ -282,14 +312,7 @@ class Modal extends BaseComponent {
       keepDOM,
       lazyRender
     } = this.props;
-    this._active = this._active || visible;
-    const shouldRender = (visible || keepDOM) && (!lazyRender || this._active) || !this.state.hidden;
-
-    if (shouldRender) {
-      return this.renderDialog();
-    }
-
-    return null;
+    return this.renderDialog();
   }
 
 }
@@ -322,7 +345,7 @@ Modal.propTypes = {
   header: PropTypes.node,
   footer: PropTypes.node,
   hasCancel: PropTypes.bool,
-  motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
+  motion: PropTypes.bool,
   children: PropTypes.node,
   getPopupContainer: PropTypes.func,
   getContainerContext: PropTypes.func,

package/lib/es/modal/ModalContent.js

@@ -66,11 +66,12 @@ export default class ModalContent extends BaseComponent {
       if (mask) {
         const className = cls("".concat(cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
-        return /*#__PURE__*/React.createElement("div", {
-          key: "mask",
+        return /*#__PURE__*/React.createElement("div", Object.assign({
+          key: "mask"
+        }, this.props.maskExtraProps, {
           className: cls(className, maskClassName),
           style: props.maskStyle
-        });
+        }));
       }
 
       return null;
@@ -334,7 +335,7 @@ export default class ModalContent extends BaseComponent {
     const containerContext = getContainerContext();
     const elem = /*#__PURE__*/React.createElement("div", {
       className: classList
-    }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", {
+    }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", Object.assign({
       role: "none",
       className: cls({
         ["".concat(cssClasses.DIALOG, "-wrap")]: true,
@@ -342,7 +343,7 @@ export default class ModalContent extends BaseComponent {
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null
-    }, 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.createElement(containerContext.Provider, {
       value: containerContext.value

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

@@ -17,7 +17,7 @@ export declare function withInfo(props: ModalReactProps): {
     bodyStyle?: React.CSSProperties;
     maskStyle?: React.CSSProperties;
     style?: React.CSSProperties;
-    icon: React.ReactNode | JSX.Element;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closeIcon?: React.ReactNode;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -37,7 +37,7 @@ export declare function withInfo(props: ModalReactProps): {
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
-    motion?: import("@douyinfe/semi-foundation/lib/es/utils/type").Motion<any>;
+    motion?: boolean;
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
@@ -60,7 +60,7 @@ export declare function withSuccess(props: ModalReactProps): {
     bodyStyle?: React.CSSProperties;
     maskStyle?: React.CSSProperties;
     style?: React.CSSProperties;
-    icon: React.ReactNode | JSX.Element;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closeIcon?: React.ReactNode;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -80,7 +80,7 @@ export declare function withSuccess(props: ModalReactProps): {
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
-    motion?: import("@douyinfe/semi-foundation/lib/es/utils/type").Motion<any>;
+    motion?: boolean;
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
@@ -103,7 +103,7 @@ export declare function withWarning(props: ModalReactProps): {
     bodyStyle?: React.CSSProperties;
     maskStyle?: React.CSSProperties;
     style?: React.CSSProperties;
-    icon: React.ReactNode | JSX.Element;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closeIcon?: React.ReactNode;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -123,7 +123,7 @@ export declare function withWarning(props: ModalReactProps): {
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
-    motion?: import("@douyinfe/semi-foundation/lib/es/utils/type").Motion<any>;
+    motion?: boolean;
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
@@ -146,7 +146,7 @@ export declare function withError(props: ModalReactProps): {
     bodyStyle?: React.CSSProperties;
     maskStyle?: React.CSSProperties;
     style?: React.CSSProperties;
-    icon: React.ReactNode | JSX.Element;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closeIcon?: React.ReactNode;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -166,7 +166,7 @@ export declare function withError(props: ModalReactProps): {
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
-    motion?: import("@douyinfe/semi-foundation/lib/es/utils/type").Motion<any>;
+    motion?: boolean;
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;
@@ -189,7 +189,7 @@ export declare function withConfirm(props: ModalReactProps): {
     bodyStyle?: React.CSSProperties;
     maskStyle?: React.CSSProperties;
     style?: React.CSSProperties;
-    icon: React.ReactNode | JSX.Element;
+    icon: string | number | boolean | React.ReactFragment | JSX.Element;
     closeIcon?: React.ReactNode;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -209,7 +209,7 @@ export declare function withConfirm(props: ModalReactProps): {
     mask?: boolean;
     maskClosable?: boolean;
     maskFixed?: boolean;
-    motion?: import("@douyinfe/semi-foundation/lib/es/utils/type").Motion<any>;
+    motion?: boolean;
     okText?: string;
     okType?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").OKType;
     visible?: boolean;

package/lib/es/modal/confirm.js

@@ -1,4 +1,3 @@
-import _get from "lodash/get";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { destroyFns } from './Modal';
@@ -28,21 +27,9 @@ export default function confirm(props) {
     }
   };
 
-  const mergedMotion = typeof props.motion === 'undefined' || props.motion ? Object.assign(Object.assign({}, props.motion), {
-    didLeave: function () {
-      const didLeave = _get(props.motion, 'didLeave');
-
-      if (typeof didLeave === 'function') {
-        didLeave(...arguments);
-      }
-
-      destroy();
-    }
-  }) : false;
-
   function render(renderProps) {
     ReactDOM.render( /*#__PURE__*/React.createElement(ConfirmModal, Object.assign({}, renderProps, {
-      motion: mergedMotion
+      motion: props.motion
     })), div);
   }
 

package/lib/es/modal/useModal/HookModal.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { ConfirmProps } from '../confirm';
-import { Motion } from '../../_base/base';
 interface HookModalProps {
     afterClose: (...args: any[]) => void;
     config: ConfirmProps;
-    motion?: Motion;
 }
 export interface HookModalRef {
     destroy: () => void;

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

@@ -1,5 +1,3 @@
-import _get from "lodash/get";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
 
@@ -12,9 +10,8 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React from 'react';
-import ConfirmModal from '../ConfirmModal';
+import ConfirmModal from '../ConfirmModal'; // eslint-disable-next-line max-len
 
-// eslint-disable-next-line max-len
 const HookModal = (_a, ref) => {
   var {
     afterClose,
@@ -33,25 +30,16 @@ const HookModal = (_a, ref) => {
       setInnerConfig(originConfig => Object.assign(Object.assign({}, originConfig), newConfig));
     }
   }));
-  const {
-    motion
-  } = props;
-  /* istanbul ignore next */
 
-  const mergedMotion = typeof motion === 'undefined' || motion ? Object.assign(Object.assign({}, motion), {
-    didLeave: function () {
-      const didLeave = _get(props.motion, 'didLeave');
+  const mergeAfterClose = () => {
+    var _a;
 
-      if (typeof didLeave === 'function') {
-        didLeave(...arguments);
-      }
+    (_a = config === null || config === void 0 ? void 0 : config.afterClose) === null || _a === void 0 ? void 0 : _a.call(config);
+    afterClose();
+  };
 
-      afterClose();
-    }
-  }) : false;
   return /*#__PURE__*/React.createElement(ConfirmModal, Object.assign({}, innerConfig, {
-    // visible={!visible ? visible : undefined}
-    motion: mergedMotion
+    afterClose: mergeAfterClose
   }));
 };
 

package/lib/es/navigation/Footer.d.ts

@@ -13,7 +13,7 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
-        collapseButton: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        collapseButton: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         collapseText: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {

package/lib/es/navigation/Header.d.ts

@@ -15,8 +15,8 @@ export default class NavHeader extends PureComponent<NavHeaderProps> {
     static contextType: React.Context<NavContextType>;
     static propTypes: {
         prefixCls: PropTypes.Requireable<string>;
-        logo: PropTypes.Requireable<object | PropTypes.ReactNodeLike>;
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        logo: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        text: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
@@ -27,6 +27,6 @@ export default class NavHeader extends PureComponent<NavHeaderProps> {
         prefixCls: string;
     };
     context: NavContextType;
-    renderLogo(logo: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    renderLogo(logo: React.ReactNode): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     render(): JSX.Element;
 }

package/lib/es/navigation/Item.d.ts

@@ -28,18 +28,18 @@ export interface NavItemState {
 export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     static contextType: React.Context<NavContextType>;
     static propTypes: {
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        itemKey: PropTypes.Requireable<string | number>;
+        text: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        itemKey: PropTypes.Requireable<NonNullable<string | number>>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         className: PropTypes.Requireable<string>;
         toggleIcon: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         forwardRef: PropTypes.Requireable<(...args: any[]) => any>;
-        indent: PropTypes.Requireable<number | boolean>;
+        indent: PropTypes.Requireable<NonNullable<number | boolean>>;
         isCollapsed: PropTypes.Requireable<boolean>;
         isSubNav: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<string>;

package/lib/es/navigation/Item.js

@@ -178,7 +178,8 @@ export default class NavItem extends BaseComponent {
     if (typeof link === 'string') {
       itemChildren = /*#__PURE__*/React.createElement("a", Object.assign({
         className: "".concat(prefixCls, "-item-link"),
-        href: link
+        href: link,
+        tabIndex: -1
       }, linkOptions), itemChildren);
     }
 
@@ -200,7 +201,8 @@ export default class NavItem extends BaseComponent {
         onClick: this.handleClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
-        disabled: disabled
+        disabled: disabled,
+        onKeyDown: this.handleKeyPress
       }, itemChildren);
     } else {
       // Items are divided into normal and sub-wrap
@@ -220,9 +222,13 @@ export default class NavItem extends BaseComponent {
         ariaProps['aria-expanded'] = isOpen;
       }
 
-      itemDom = /*#__PURE__*/React.createElement("li", Object.assign({
-        role: "menuitem",
-        tabIndex: -1
+      itemDom =
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      React.createElement("li", Object.assign({
+        // if role = menuitem, the narration will read all expanded li
+        role: isSubNav ? null : "menuitem",
+        tabIndex: isSubNav ? -1 : 0
       }, ariaProps, {
         style: style,
         ref: this.setItemRef,

package/lib/es/navigation/OpenIconTransition.d.ts

@@ -1,15 +1 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-export interface OpenIconTransitionProps {
-    children?: React.ReactNode | ((transitionArgus?: any) => React.ReactNode);
-    isCollapsed?: boolean;
-    isOpen?: boolean;
-}
-declare function OpenIconTransition(props?: OpenIconTransitionProps): JSX.Element;
-declare namespace OpenIconTransition {
-    var propTypes: {
-        isOpen: PropTypes.Validator<boolean>;
-        children: PropTypes.Validator<any>;
-    };
-}
-export default OpenIconTransition;
+

package/lib/es/navigation/OpenIconTransition.js

@@ -1,66 +1 @@
-import React, { useEffect, useState } from 'react';
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-
-const formatStyle = function formatStyle(_ref) {
-  let {
-    rotate = 0
-  } = _ref;
-  return {
-    transform: "rotate(".concat(Math.ceil(rotate), "deg)")
-  };
-};
-
-function OpenIconTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    children,
-    isOpen
-  } = props;
-  const [immediate, setImmediate] = useState(true);
-  useEffect(() => {
-    setImmediate(false);
-  }, []);
-  return /*#__PURE__*/React.createElement(Transition, {
-    immediate: immediate,
-    state: isOpen ? 'enter' : 'leave',
-    from: {
-      rotate: 0
-    },
-    enter: {
-      rotate: {
-        val: 180,
-        duration: 200,
-        easing: 'cubic-bezier(.62, .05, .36, .95)'
-      }
-    },
-    leave: {
-      rotate: {
-        val: 0,
-        duration: 200,
-        easing: 'cubic-bezier(.62, .05, .36, .95)'
-      }
-    }
-  }, transitionStyle => {
-    const formatedStyle = formatStyle(transitionStyle);
-
-    if (typeof children === 'function') {
-      return children(formatedStyle);
-    }
-
-    if ( /*#__PURE__*/React.isValidElement(children)) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        // @ts-ignore
-        style: Object.assign(Object.assign({}, children.props && children.props.style), formatedStyle)
-      });
-    }
-
-    return children;
-  });
-}
-
-OpenIconTransition.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  children: PropTypes.any.isRequired
-};
-export default OpenIconTransition;
+"use strict";

package/lib/es/navigation/SubNav.d.ts

@@ -32,11 +32,11 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         /**
          * Unique identification
          */
-        itemKey: PropTypes.Requireable<string | number>;
+        itemKey: PropTypes.Requireable<NonNullable<string | number>>;
         /**
          * Copywriting
          */
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        text: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         /**
          * Whether child navigation is expanded
          */
@@ -48,7 +48,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         /**
          * Whether to keep the left Icon placeholder
          */
-        indent: PropTypes.Requireable<number | boolean>;
+        indent: PropTypes.Requireable<NonNullable<number | boolean>>;
         /**
          * Nested child elements
          */
@@ -61,7 +61,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         /**
          * Icon name on the left
          */
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         /**
          * Maximum height (for animation)
          */