@dtjoy/dt-design 1.0.1 → 1.0.3

package/lib/flex/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.justifyContentValues = exports.flexWrapValues = exports.default = exports.alignItemsValues = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const flexWrapValues = exports.flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
+const justifyContentValues = exports.justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
+const alignItemsValues = exports.alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];
+const genClsWrap = (prefixCls, props) => {
+  const wrap = props.wrap === true ? 'wrap' : props.wrap;
+  return {
+    [`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap)
+  };
+};
+const genClsAlign = (prefixCls, props) => {
+  const alignCls = {};
+  alignItemsValues.forEach(cssKey => {
+    alignCls[`${prefixCls}-align-${cssKey}`] = props.align === cssKey;
+  });
+  alignCls[`${prefixCls}-align-stretch`] = !props.align && !!props.vertical;
+  return alignCls;
+};
+const genClsJustify = (prefixCls, props) => {
+  const justifyCls = {};
+  justifyContentValues.forEach(cssKey => {
+    justifyCls[`${prefixCls}-justify-${cssKey}`] = props.justify === cssKey;
+  });
+  return justifyCls;
+};
+const createFlexClassNames = (prefixCls, props) => {
+  return (0, _classnames.default)({
+    ...genClsWrap(prefixCls, props),
+    ...genClsAlign(prefixCls, props),
+    ...genClsJustify(prefixCls, props)
+  });
+};
+var _default = exports.default = createFlexClassNames;

package/lib/index.d.ts

@@ -1,3 +1,12 @@
-import '@dtinsight/react-icons/dist/index.css';
 export { default as BlockHeader } from './blockHeader';
+export type { ButtonProps } from './button';
 export { default as Button } from './button';
+export { default as Flex } from './flex';
+export type { FlexProps } from './flex/interface';
+export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as OverflowList } from './overflowList';
+export { default as Resize } from './resize';
+export { default as Splitter } from './splitter';
+export * from './splitter';
+export { default as Collapsible } from './collapsible';
+export { default as StatusTag } from './statusTag';

package/lib/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  BlockHeader: true,
+  Button: true,
+  Flex: true,
+  CollapsibleActionItems: true,
+  OverflowList: true,
+  Resize: true,
+  Splitter: true,
+  Collapsible: true,
+  StatusTag: true
+};
 Object.defineProperty(exports, "BlockHeader", {
   enumerable: true,
   get: function () {
@@ -15,7 +26,68 @@ Object.defineProperty(exports, "Button", {
     return _button.default;
   }
 });
-require("@dtinsight/react-icons/dist/index.css");
+Object.defineProperty(exports, "Collapsible", {
+  enumerable: true,
+  get: function () {
+    return _collapsible.default;
+  }
+});
+Object.defineProperty(exports, "CollapsibleActionItems", {
+  enumerable: true,
+  get: function () {
+    return _collapsibleActionItems.default;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function () {
+    return _flex.default;
+  }
+});
+Object.defineProperty(exports, "OverflowList", {
+  enumerable: true,
+  get: function () {
+    return _overflowList.default;
+  }
+});
+Object.defineProperty(exports, "Resize", {
+  enumerable: true,
+  get: function () {
+    return _resize.default;
+  }
+});
+Object.defineProperty(exports, "Splitter", {
+  enumerable: true,
+  get: function () {
+    return _splitter.default;
+  }
+});
+Object.defineProperty(exports, "StatusTag", {
+  enumerable: true,
+  get: function () {
+    return _statusTag.default;
+  }
+});
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
 var _button = _interopRequireDefault(require("./button"));
+var _flex = _interopRequireDefault(require("./flex"));
+var _collapsibleActionItems = _interopRequireDefault(require("./collapsibleActionItems"));
+var _overflowList = _interopRequireDefault(require("./overflowList"));
+var _resize = _interopRequireDefault(require("./resize"));
+var _splitter = _interopRequireWildcard(require("./splitter"));
+Object.keys(_splitter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _splitter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _splitter[key];
+    }
+  });
+});
+var _collapsible = _interopRequireDefault(require("./collapsible"));
+var _statusTag = _interopRequireDefault(require("./statusTag"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/overflowList/index.d.ts

@@ -0,0 +1,39 @@
+import React, { Component, ReactElement, ReactNode } from 'react';
+import './style';
+export declare type OverflowItem<T = Record<string, any>> = T;
+export interface OverflowListProps<T = Record<string, any>> {
+    items: OverflowItem<T>[];
+    visibleItemRenderer: (item: OverflowItem<T>, index: number) => ReactElement;
+    overflowRenderer: (overflowItems: OverflowItem<T>[]) => ReactNode | ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+    renderMode?: 'collapse' | 'scroll';
+    collapseFrom?: 'start' | 'end';
+    minVisibleItems?: number;
+    onOverflow?: (overflowItems: OverflowItem<T>[]) => void;
+}
+interface OverflowListState {
+    visibleCount: number;
+    isMeasuring: boolean;
+}
+declare class OverflowList<T extends object> extends Component<OverflowListProps<T>, OverflowListState> {
+    static defaultProps: {
+        items: never[];
+        collapseFrom: string;
+        minVisibleItems: number;
+        renderMode: string;
+    };
+    static displayName: string;
+    private containerRef;
+    private overflowRef;
+    private itemRefs;
+    private prefixCls;
+    constructor(props: OverflowListProps<T>);
+    componentDidMount(): void;
+    componentUpdate(prevProps: OverflowListProps<T>): void;
+    private measureAndAdjust;
+    private getOverflowItems;
+    renderCollapse(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default OverflowList;

package/lib/overflowList/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
+var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class OverflowList extends _react.Component {
+  static defaultProps = {
+    items: [],
+    collapseFrom: 'end',
+    minVisibleItems: 0,
+    renderMode: 'collapse'
+  };
+  static displayName;
+  containerRef = /*#__PURE__*/(0, _react.createRef)();
+  overflowRef = /*#__PURE__*/(0, _react.createRef)();
+  itemRefs = new Map();
+  prefixCls = 'overflow-list';
+  constructor(props) {
+    super(props);
+    this.prefixCls = (0, _configProvider.globalConfig)().getPrefixCls(this.prefixCls);
+    this.state = {
+      visibleCount: props.items.length,
+      isMeasuring: props.renderMode === 'collapse'
+    };
+  }
+  componentDidMount() {
+    if (this.props.renderMode === 'collapse') {
+      this.measureAndAdjust();
+    }
+  }
+  componentUpdate(prevProps) {
+    if (prevProps.items !== this.props.items || prevProps.renderMode !== this.props.renderMode) {
+      this.setState({
+        isMeasuring: true,
+        visibleCount: this.props.items.length
+      }, this.measureAndAdjust);
+    }
+  }
+  measureAndAdjust = () => {
+    const container = this.containerRef.current;
+    if (!container || this.props.renderMode !== 'collapse') return;
+    const {
+      items,
+      minVisibleItems,
+      collapseFrom,
+      onOverflow
+    } = this.props;
+    const containerWidth = container.offsetWidth;
+    const overflowWidth = this.overflowRef.current?.offsetWidth ?? 0;
+    let totalWidth = 0;
+    let newVisibleCount = 0;
+    for (let i = 0; i < items.length; i++) {
+      const index = collapseFrom === 'end' ? i : items.length - 1 - i;
+      const itemWidth = this.itemRefs.get(index)?.getBoundingClientRect().width ?? 0;
+      const isLast = i === items.length - 1;
+      const limit = isLast ? containerWidth : containerWidth - overflowWidth;
+      if (totalWidth + itemWidth <= limit || newVisibleCount < (minVisibleItems || 0)) {
+        totalWidth += itemWidth;
+        newVisibleCount++;
+      } else {
+        break;
+      }
+    }
+    this.setState({
+      visibleCount: newVisibleCount,
+      isMeasuring: false
+    }, () => {
+      if (onOverflow) {
+        onOverflow(this.getOverflowItems(newVisibleCount));
+      }
+    });
+  };
+  getOverflowItems = count => {
+    const {
+      items,
+      collapseFrom
+    } = this.props;
+    return collapseFrom === 'end' ? items.slice(count) : items.slice(0, items.length - count);
+  };
+  renderCollapse() {
+    const {
+      items,
+      visibleItemRenderer,
+      overflowRenderer,
+      collapseFrom,
+      style,
+      className
+    } = this.props;
+    const {
+      visibleCount,
+      isMeasuring
+    } = this.state;
+    const overflowItems = this.getOverflowItems(visibleCount);
+    const hasOverflow = overflowItems.length > 0;
+    const containerStyle = {
+      maxWidth: '100%',
+      visibility: 'visible',
+      ...style
+    };
+    const renderItems = () => {
+      return items.map((item, i) => {
+        const isVisible = isMeasuring || (collapseFrom === 'end' ? i < visibleCount : i >= items.length - visibleCount);
+        if (!isVisible) return null;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: i,
+          ref: el => {
+            if (el) this.itemRefs.set(i, el);else this.itemRefs.delete(i);
+          },
+          className: `${this.prefixCls}-item`
+        }, visibleItemRenderer(item, i));
+      });
+    };
+    const overflowNode = (hasOverflow || isMeasuring) && /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.overflowRef,
+      className: `${this.prefixCls}-overflow`
+    }, overflowRenderer(isMeasuring ? items : overflowItems));
+    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+      onResize: () => this.setState({
+        isMeasuring: true
+      }, this.measureAndAdjust)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.containerRef,
+      className: (0, _classnames.default)(this.prefixCls, className),
+      style: containerStyle
+    }, collapseFrom === 'start' && overflowNode, renderItems(), collapseFrom === 'end' && overflowNode));
+  }
+  render() {
+    return this.renderCollapse();
+  }
+}
+if (process.env.NODE_ENV === 'development') {
+  OverflowList.displayName = 'OverflowList';
+}
+var _default = exports.default = OverflowList;

package/lib/overflowList/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/overflowList/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/overflowList/style/index.less

@@ -0,0 +1,9 @@
+@import "../../style/themes/index.less";
+
+@overflow-list-prefix-cls: ~"@{ant-prefix}-overflow-list";
+
+.@{overflow-list-prefix-cls} {
+  display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
+}

package/lib/resize/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface ResizeProps {
+    observerEle?: HTMLElement | null;
+    children?: ReactNode;
+    onResize?: () => void;
+}
+declare const Resize: React.FC<ResizeProps>;
+export default Resize;

package/lib/resize/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Resize = ({
+  observerEle,
+  onResize,
+  children
+}) => {
+  const resizeEventRef = (0, _react.useRef)(onResize);
+  resizeEventRef.current = onResize;
+  (0, _react.useEffect)(() => {
+    const onResizeProxy = () => {
+      if (typeof resizeEventRef.current === 'function') {
+        resizeEventRef.current();
+      }
+    };
+    if (!observerEle) {
+      window.addEventListener('resize', onResizeProxy, false);
+      return () => {
+        window.removeEventListener('resize', onResizeProxy, false);
+      };
+    } else {
+      const resizeObserver = new ResizeObserver(onResizeProxy);
+      resizeObserver.observe(observerEle);
+      return () => {
+        resizeObserver.unobserve(observerEle);
+      };
+    }
+  }, [observerEle]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+var _default = exports.default = Resize;

package/lib/resizeObserver/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+interface BaseProps {
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+export interface ResizeEntry {
+    contentRect: DOMRectReadOnly;
+    target: Element;
+}
+export interface ReactResizeObserverProps extends BaseProps {
+    onResize?: (entries: ResizeEntry[]) => void;
+    observeParent?: boolean;
+    observerProperty?: ObserverProperty;
+    delayTick?: number;
+    children: React.ReactElement;
+}
+export declare enum ObserverProperty {
+    Width = "width",
+    Height = "height",
+    All = "all"
+}
+export default class ReactResizeObserver extends React.Component<ReactResizeObserverProps> {
+    static defaultProps: {
+        onResize: () => void;
+        observeParent: boolean;
+        observerProperty: ObserverProperty;
+        delayTick: number;
+    };
+    observer: ResizeObserver | null;
+    childNode: HTMLElement | null;
+    element: Element | null;
+    _parentNode: HTMLElement | null;
+    formerPropertyValue: Map<Element, number>;
+    constructor(props: ReactResizeObserverProps);
+    getElement: () => Element | null;
+    handleResizeEventTriggered: (entries: ResizeEntry[]) => void;
+    observeElement: (force?: boolean) => void;
+    mergeRef: (ref: React.Ref<any>, node: HTMLElement) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ReactResizeObserverProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactElement;
+}
+export {};

package/lib/resizeObserver/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ObserverProperty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+let ObserverProperty = exports.ObserverProperty = /*#__PURE__*/function (ObserverProperty) {
+  ObserverProperty["Width"] = "width";
+  ObserverProperty["Height"] = "height";
+  ObserverProperty["All"] = "all";
+  return ObserverProperty;
+}({});
+class ReactResizeObserver extends _react.default.Component {
+  static defaultProps = {
+    onResize: () => {},
+    observeParent: false,
+    observerProperty: ObserverProperty.All,
+    delayTick: 0
+  };
+  observer = null;
+  childNode = null;
+  element = null;
+  _parentNode = null;
+  formerPropertyValue = new Map();
+  constructor(props) {
+    super(props);
+    if (typeof window !== 'undefined' && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.handleResizeEventTriggered);
+    }
+  }
+  getElement = () => {
+    try {
+      // eslint-disable-next-line react/no-find-dom-node
+      return (0, _reactDom.findDOMNode)(this.childNode || this);
+    } catch (error) {
+      return null;
+    }
+  };
+  handleResizeEventTriggered = entries => {
+    const {
+      observerProperty,
+      onResize
+    } = this.props;
+    if (observerProperty === ObserverProperty.All) {
+      onResize?.(entries);
+    } else {
+      const finalEntries = [];
+      for (const entry of entries) {
+        const currentValue = entry.contentRect[observerProperty];
+        if (this.formerPropertyValue.has(entry.target)) {
+          if (currentValue !== this.formerPropertyValue.get(entry.target)) {
+            this.formerPropertyValue.set(entry.target, currentValue);
+            finalEntries.push(entry);
+          }
+        } else {
+          this.formerPropertyValue.set(entry.target, currentValue);
+          finalEntries.push(entry);
+        }
+      }
+      if (finalEntries.length > 0) {
+        onResize?.(finalEntries);
+      }
+    }
+  };
+  observeElement = (force = false) => {
+    if (!this.observer) return;
+    const element = this.getElement();
+    if (!(element && element instanceof Element)) {
+      this.observer.disconnect();
+      return;
+    }
+    if (element === this.element && !force) {
+      return;
+    } else {
+      this.observer.disconnect();
+      this.element = element;
+    }
+    this.observer.observe(element);
+    if (this.props.observeParent && element.parentNode) {
+      const parentNode = element.parentNode;
+      if (parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
+        this._parentNode = parentNode;
+        this.observer.observe(parentNode);
+      }
+    }
+  };
+  mergeRef = (ref, node) => {
+    this.childNode = node;
+    // 转发外部ref
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (typeof ref === 'object' && ref && 'current' in ref) {
+      ref.current = node;
+    }
+  };
+  componentDidMount() {
+    this.observeElement?.();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.observeParent !== prevProps.observeParent) {
+      this.observeElement?.(true);
+    }
+  }
+  componentWillUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    this.element = null;
+    this._parentNode = null;
+    this.formerPropertyValue.clear();
+  }
+  render() {
+    const {
+      children,
+      className,
+      style,
+      ...rest
+    } = this.props;
+    const child = _react.default.Children.only(children);
+    const childRef = child.ref;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      ...rest,
+      className: className ? `${child.props.className || ''} ${className}` : child.props.className,
+      style: {
+        ...child.props.style,
+        ...style
+      },
+      ref: node => this.mergeRef(childRef, node)
+    });
+  }
+}
+exports.default = ReactResizeObserver;

package/lib/splitter/Panel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InternalPanelProps, PanelProps } from './interface';
+export declare const InternalPanel: React.ForwardRefExoticComponent<InternalPanelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Panel: React.FC<React.PropsWithChildren<PanelProps>>;
+export default Panel;

package/lib/splitter/Panel.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InternalPanel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const InternalPanel = exports.InternalPanel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    children,
+    size,
+    style = {}
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_configProvider.ConfigContext);
+  const prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  const panelClassName = (0, _classnames.default)(`${prefixCls}-panel`, {
+    [`${prefixCls}-panel-hidden`]: size === 0
+  }, className);
+  const hasSize = size !== undefined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: panelClassName,
+    style: {
+      ...style,
+      // Use auto when start from ssr
+      flexBasis: hasSize ? size : 'auto',
+      flexGrow: hasSize ? 0 : 1
+    }
+  }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  InternalPanel.displayName = 'Panel';
+}
+const Panel = () => null;
+var _default = exports.default = Panel;

package/lib/splitter/SplitBar.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type ShowCollapsibleIconMode = boolean | 'auto';
+export interface SplitBarProps {
+    index: number;
+    active: boolean;
+    prefixCls: string;
+    resizable: boolean;
+    startCollapsible: boolean;
+    endCollapsible: boolean;
+    showStartCollapsibleIcon: ShowCollapsibleIconMode;
+    showEndCollapsibleIcon: ShowCollapsibleIconMode;
+    onOffsetStart: (index: number) => void;
+    onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => void;
+    onOffsetEnd: (lazyEnd?: boolean) => void;
+    onCollapse: (index: number, type: 'start' | 'end') => void;
+    vertical: boolean;
+    ariaNow: number;
+    ariaMin: number;
+    ariaMax: number;
+    lazy?: boolean;
+    containerSize: number;
+}
+declare const SplitBar: React.FC<SplitBarProps>;
+export default SplitBar;