@douyinfe/semi-ui 2.1.0-beta.3 → 2.1.0-next.3

package/lib/cjs/layout/Sider.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/layout/constants");
+
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
+var _layoutContext = _interopRequireDefault(require("./layout-context"));
+
+var _utils = require("../_utils");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)'
+};
+
+const generateId = (() => {
+  let i = 0;
+  return () => {
+    var _context;
+
+    i += 1;
+    return (0, _concat.default)(_context = "".concat(_constants.cssClasses.PREFIX, "-sider-")).call(_context, i);
+  };
+})();
+
+const bpt = _constants.strings.BREAKPOINT;
+
+class Sider extends _react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.unRegisters = [];
+    this.uniqueId = '';
+    this.uniqueId = generateId();
+  }
+
+  componentDidMount() {
+    var _context2;
+
+    const {
+      breakpoint
+    } = this.props;
+    const matchBpt = (0, _filter.default)(_context2 = (0, _keys.default)(responsiveMap)).call(_context2, item => breakpoint && (0, _indexOf.default)(breakpoint).call(breakpoint, item) !== -1);
+    const unRegisters = (0, _map.default)(matchBpt).call(matchBpt, screen => (0, _utils.registerMediaQuery)(responsiveMap[screen], {
+      match: () => {
+        this.responsiveHandler(screen, true);
+      },
+      unmatch: () => {
+        this.responsiveHandler(screen, false);
+      }
+    }));
+    this.unRegisters = unRegisters;
+
+    if (this.context.siderHook) {
+      this.context.siderHook.addSider(this.uniqueId);
+    }
+  }
+
+  componentWillUnmount() {
+    var _context3;
+
+    (0, _forEach.default)(_context3 = this.unRegisters).call(_context3, unRegister => unRegister());
+
+    if (this.context.siderHook) {
+      this.context.siderHook.removeSider(this.uniqueId);
+    }
+  }
+
+  responsiveHandler(screen, matches) {
+    const {
+      onBreakpoint
+    } = this.props;
+
+    if (onBreakpoint) {
+      onBreakpoint(screen, matches);
+    }
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      prefixCls,
+      className,
+      children,
+      style
+    } = _a,
+          others = __rest(_a, ["prefixCls", "className", "children", "style"]);
+
+    const classString = (0, _classnames.default)(className, {
+      ["".concat(prefixCls, "-sider")]: true
+    });
+    return /*#__PURE__*/_react.default.createElement("aside", (0, _assign.default)({
+      className: classString,
+      style: style
+    }, (0, _getDataAttr.default)(others)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-sider-children")
+    }, children));
+  }
+
+}
+
+Sider.propTypes = {
+  prefixCls: _propTypes.default.string,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  breakpoint: _propTypes.default.arrayOf(_propTypes.default.oneOf(bpt)),
+  onBreakpoint: _propTypes.default.func
+};
+Sider.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX
+};
+Sider.contextType = _layoutContext.default;
+var _default = Sider;
+exports.default = _default;

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

@@ -0,0 +1,43 @@
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/layout/layout.css';
+import { ContextType } from './layout-context';
+import Sider from './Sider';
+export { ResponsiveMap, SiderProps } from './Sider';
+export interface BasicProps {
+    prefixCls?: string;
+    style?: CSSProperties;
+    className?: string;
+    tagName?: keyof HTMLElementTagNameMap;
+    type?: string;
+}
+export interface BasicLayoutProps {
+    prefixCls?: string;
+    style?: CSSProperties;
+    className?: string;
+    hasSider?: boolean;
+    tagName?: keyof HTMLElementTagNameMap;
+}
+export interface BasicLayoutState {
+    siders: Array<string>;
+}
+declare class Layout extends React.Component<BasicLayoutProps, BasicLayoutState> {
+    static propTypes: {
+        prefixCls: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+        tagName: string;
+    };
+    static Header: React.ComponentClass<BasicProps, any>;
+    static Footer: React.ComponentClass<BasicProps, any>;
+    static Content: React.ComponentClass<BasicProps, any>;
+    static Sider: typeof Sider;
+    constructor(props: BasicLayoutProps);
+    getSiderHook(): ContextType['siderHook'];
+    render(): JSX.Element;
+}
+export { Layout };
+export default Layout;

package/lib/cjs/layout/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = exports.Layout = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/layout/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/layout/layout.css");
+
+var _layoutContext = _interopRequireDefault(require("./layout-context"));
+
+var _Sider = _interopRequireDefault(require("./Sider"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const htmlTag = {
+  Header: 'header',
+  Footer: 'footer',
+  Content: 'main',
+  Layout: 'section'
+};
+
+function generator(type) {
+  const tagName = htmlTag[type];
+  const typeName = type.toLowerCase();
+  return BasicComponent => class Adapter extends _react.default.PureComponent {
+    render() {
+      return /*#__PURE__*/_react.default.createElement(BasicComponent, (0, _assign.default)({
+        type: typeName,
+        tagName: tagName
+      }, this.props));
+    }
+
+  };
+}
+
+class Basic extends _react.default.PureComponent {
+  render() {
+    var _context;
+
+    const _a = this.props,
+          {
+      prefixCls,
+      type,
+      className,
+      children,
+      tagName
+    } = _a,
+          others = __rest(_a, ["prefixCls", "type", "className", "children", "tagName"]);
+
+    const classString = (0, _classnames.default)(className, (0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, type));
+    return /*#__PURE__*/_react.default.createElement(tagName, (0, _assign.default)({
+      className: classString
+    }, others), children);
+  }
+
+}
+
+Basic.propTypes = {
+  prefixCls: _propTypes.default.string,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
+};
+Basic.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX
+};
+const Header = generator('Header')(Basic);
+const Footer = generator('Footer')(Basic);
+const Content = generator('Content')(Basic);
+
+class Layout extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      siders: []
+    };
+  }
+
+  getSiderHook() {
+    return {
+      addSider: id => {
+        this.setState(state => ({
+          siders: [...state.siders, id]
+        }));
+      },
+      removeSider: id => {
+        this.setState(state => {
+          var _context2;
+
+          return {
+            siders: (0, _filter.default)(_context2 = state.siders).call(_context2, curr => curr !== id)
+          };
+        });
+      }
+    };
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      prefixCls,
+      className,
+      children,
+      hasSider,
+      tagName
+    } = _a,
+          others = __rest(_a, ["prefixCls", "className", "children", "hasSider", "tagName"]);
+
+    const {
+      siders
+    } = this.state;
+    const classString = (0, _classnames.default)(className, prefixCls, {
+      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0
+    });
+    const Tag = tagName;
+    return /*#__PURE__*/_react.default.createElement(_layoutContext.default.Provider, {
+      value: {
+        siderHook: this.getSiderHook()
+      }
+    }, /*#__PURE__*/_react.default.createElement(Tag, (0, _assign.default)({
+      className: classString
+    }, others), children));
+  }
+
+}
+
+exports.Layout = Layout;
+Layout.propTypes = {
+  prefixCls: _propTypes.default.string,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
+};
+Layout.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX,
+  tagName: 'section'
+};
+Layout.Header = Header;
+Layout.Footer = Footer;
+Layout.Content = Content;
+Layout.Sider = _Sider.default;
+var _default = Layout;
+exports.default = _default;

package/lib/cjs/layout/layout-context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ContextType {
+    siderHook: {
+        addSider: (id: string) => void;
+        removeSider: (id: string) => void;
+    };
+}
+declare const LayoutContext: React.Context<ContextType>;
+export default LayoutContext;

package/lib/cjs/layout/layout-context.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
+
+const LayoutContext = /*#__PURE__*/_react.default.createContext({
+  siderHook: {
+    addSider: _function.noop,
+    removeSider: _function.noop
+  }
+});
+
+var _default = LayoutContext;
+exports.default = _default;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/list/list.css';
+import ListItem from './item';
+import { Grid } from './list-context';
+import BaseComponent from '../_base/baseComponent';
+export { ListItemProps } from './item';
+export interface ListProps {
+    style?: React.CSSProperties;
+    className?: string;
+    bordered?: boolean;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    layout?: 'vertical' | 'horizontal';
+    size?: 'small' | 'large' | 'default';
+    split?: boolean;
+    emptyContent?: React.ReactNode;
+    dataSource?: any[];
+    renderItem?: (item: any, ind: number) => React.ReactNode;
+    grid?: Grid;
+    loading?: boolean;
+    loadMore?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onRightClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+declare class List extends BaseComponent<ListProps> {
+    static Item: typeof ListItem;
+    static propTypes: {
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        bordered: PropTypes.Requireable<boolean>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        layout: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        split: PropTypes.Requireable<boolean>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dataSource: PropTypes.Requireable<any[]>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        grid: PropTypes.Requireable<object>;
+        loading: PropTypes.Requireable<boolean>;
+        loadMore: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onRightClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        bordered: boolean;
+        split: boolean;
+        loading: boolean;
+        layout: string;
+        size: string;
+        onRightClick: (...args: any[]) => void;
+        onClick: (...args: any[]) => void;
+    };
+    renderEmpty: () => JSX.Element;
+    wrapChildren(childrenList: React.ReactNode, children: React.ReactNode): JSX.Element;
+    render(): JSX.Element;
+}
+export default List;

package/lib/cjs/list/index.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/list/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/list/list.css");
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _item = _interopRequireDefault(require("./item"));
+
+var _grid = require("../grid");
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+var _listContext = _interopRequireDefault(require("./list-context"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class List extends _baseComponent.default {
+  constructor() {
+    super(...arguments);
+
+    this.renderEmpty = () => {
+      const {
+        emptyContent
+      } = this.props;
+
+      if (emptyContent) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(_constants.cssClasses.PREFIX, "-empty")
+        }, emptyContent);
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+          componentName: "List"
+        }, locale => /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(_constants.cssClasses.PREFIX, "-empty")
+        }, locale.emptyText));
+      }
+    };
+  }
+
+  wrapChildren(childrenList, children) {
+    const {
+      grid
+    } = this.props;
+
+    if (grid) {
+      var _context;
+
+      const rowProps = {};
+      (0, _forEach.default)(_context = ['align', 'gutter', 'justify', 'type']).call(_context, key => {
+        if (key in grid) {
+          rowProps[key] = grid[key];
+        }
+      });
+      return /*#__PURE__*/_react.default.createElement(_grid.Row, (0, _assign.default)({
+        type: "flex"
+      }, rowProps), childrenList ? childrenList : null, children);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: "".concat(prefixCls, "-items")
+    }, childrenList ? childrenList : null, children);
+  }
+
+  render() {
+    var _context2;
+
+    const {
+      style,
+      className,
+      header,
+      loading,
+      onRightClick,
+      onClick,
+      footer,
+      layout,
+      grid,
+      size,
+      split,
+      loadMore,
+      bordered,
+      dataSource,
+      renderItem,
+      children
+    } = this.props;
+    const wrapperCls = (0, _classnames.default)(prefixCls, className, {
+      ["".concat(prefixCls, "-flex")]: layout === 'horizontal',
+      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, size)]: size,
+      ["".concat(prefixCls, "-grid")]: grid,
+      ["".concat(prefixCls, "-split")]: split,
+      ["".concat(prefixCls, "-bordered")]: bordered
+    });
+    let childrenList;
+
+    if (dataSource && dataSource.length) {
+      var _context3;
+
+      childrenList = [];
+      const items = renderItem ? (0, _map.default)(dataSource).call(dataSource, (item, index) => renderItem(item, index)) : [];
+      (0, _forEach.default)(_context3 = _react.default.Children).call(_context3, items, (child, index) => {
+        const itemKey = child.key || "list-item-".concat(index);
+        childrenList.push( /*#__PURE__*/_react.default.cloneElement(child, {
+          key: itemKey
+        }));
+      });
+    } else if (!children && !loading) {
+      childrenList = this.renderEmpty();
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls,
+      style: style
+    }, header ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_constants.cssClasses.PREFIX, "-header")
+    }, header) : null, /*#__PURE__*/_react.default.createElement(_listContext.default.Provider, {
+      value: {
+        grid,
+        onRightClick,
+        onClick
+      }
+    }, /*#__PURE__*/_react.default.createElement(_spin.default, {
+      spinning: loading,
+      size: "large"
+    }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_constants.cssClasses.PREFIX, "-footer")
+    }, footer) : null, loadMore ? loadMore : null);
+  }
+
+}
+
+List.Item = _item.default;
+List.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  bordered: _propTypes.default.bool,
+  footer: _propTypes.default.node,
+  header: _propTypes.default.node,
+  layout: _propTypes.default.oneOf(_constants.strings.LAYOUT),
+  size: _propTypes.default.oneOf(_constants.strings.SIZE),
+  split: _propTypes.default.bool,
+  emptyContent: _propTypes.default.node,
+  dataSource: _propTypes.default.array,
+  renderItem: _propTypes.default.func,
+  grid: _propTypes.default.object,
+  loading: _propTypes.default.bool,
+  loadMore: _propTypes.default.node,
+  onRightClick: _propTypes.default.func,
+  onClick: _propTypes.default.func
+};
+List.defaultProps = {
+  bordered: false,
+  split: true,
+  loading: false,
+  layout: 'vertical',
+  size: 'default',
+  onRightClick: _noop2.default,
+  onClick: _noop2.default
+};
+var _default = List;
+exports.default = _default;

package/lib/cjs/list/item.d.ts

@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface ListItemProps {
+    extra?: React.ReactNode;
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onRightClick?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
+}
+export default class ListItem extends PureComponent<ListItemProps> {
+    static contextType: React.Context<import("./list-context").ListContextValue>;
+    static propTypes: {
+        extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        main: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        align: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onRightClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        align: string;
+        onMouseEnter: (...args: any[]) => void;
+        onMouseLeave: (...args: any[]) => void;
+    };
+    wrapWithGrid(content: React.ReactNode): JSX.Element;
+    render(): JSX.Element;
+}