@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/dist/esm/Form/demo/tooltip.js

@@ -0,0 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Form, Grid, Input, Space, TextArea } from "../..";
+import { Info } from 'lucide-react';
+import React from 'react';
+export default (function () {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var onFinish = function onFinish(values) {
+    console.log('Received values:', values);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    onFinish: onFinish,
+    layout: "vertical",
+    "data-testid": "tooltip-form"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "username",
+    label: "Username",
+    tooltip: "Used for login. 4-20 characters.",
+    rules: [{
+      required: true,
+      message: 'Please input your username!'
+    }]
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Please input your username"
+  }))), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "nickname",
+    label: "Nickname"
+    // Custom trigger icon via the object form
+    ,
+    tooltip: {
+      title: 'Shown publicly instead of your username.',
+      icon: /*#__PURE__*/React.createElement(Info, {
+        size: 14
+      })
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Please input your nickname"
+  }))), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "bio",
+    label: "Bio",
+    tooltip: "A short introduction about yourself."
+  }, /*#__PURE__*/React.createElement(TextArea, null)))), /*#__PURE__*/React.createElement(Space, {
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
+    htmlType: "reset"
+  }, "Reset")));
+});

package/dist/esm/Form/interface.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { TooltipProps } from '../Tooltip';
 import type { DataAttributeProps } from '../utils/types';
 export type StoreValue = any;
 export type Store = Record<string, StoreValue>;
@@ -211,7 +212,7 @@ export type Rule = {
     /**
      * Error message
      */
-    message: string;
+    message?: string;
     /**
      * Custom validation function, returns true for pass, false or throw for fail
      */
@@ -227,12 +228,44 @@ export type ValidateMessage = {
     value: unknown;
     status: 'error' | 'success' | 'warning' | 'info';
 };
+export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
+    /**
+     * Custom trigger icon (defaults to a built-in help icon)
+     */
+    icon?: React.ReactNode;
+};
+export type FieldTooltip = React.ReactNode | FieldConfigurableTooltip;
 export type FieldProps = {
+    /**
+     * Child nodes
+     * */
     children: React.ReactElement;
+    /**
+     * Field name
+     * */
     name: NamePath;
+    /**
+     * Validation rules
+     * */
     rules?: Rule[];
+    /***
+     * Field label
+     */
     label?: React.ReactNode;
+    /**
+     * Tooltip shown next to the label (a help icon).
+     * Pass a string/node to use the default icon, or an object to customize the icon.
+     * */
+    tooltip?: FieldTooltip;
+    /**
+     * Whether required (shows required mark)
+     * */
     required?: boolean;
+    /**
+     * Layout of label and control
+     * @default 'vertical'
+     * */
+    layout?: 'vertical' | 'horizontal';
     /**
      * Format value before passing to children
      * */

package/dist/esm/Form/style/index.less

@@ -18,17 +18,32 @@
     // padding-bottom: var(--yee-form-item-padding-bottom);
 
     &-label {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
       margin-bottom: var(--yee-form-item-label-mb, 4px);
       line-height: var(--yee-form-item-label-line-height);
     }
 
-    &-required {
-      &::after {
-        color: var(--yee-input-required-font-color);
-        content: '*';
-        margin-inline-start: var(--yee-form-item-required-margin-inline-start);
-      }
+    // The required asterisk is rendered as a real node via &-required-mark so it
+    // stays glued to the label text regardless of what else sits inside the label.
+    // The `item-required` className is still applied to the label (see Field/Group)
+    // as an opt-in styling hook; the mark itself lives in &-required-mark below.
+    &-required-mark {
+      color: var(--yee-input-required-font-color);
+      margin-inline-start: var(--yee-form-item-required-margin-inline-start);
+      line-height: 1;
+    }
+
+    &-tooltip-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: 4px;
+      color: var(
+        --yee-form-item-tooltip-icon-color,
+        var(--yee-text-color-secondary, #999)
+      );
+      cursor: pointer;
     }
 
     &-control {

package/dist/esm/Popconfirm/popconfirm.js

@@ -37,7 +37,9 @@ var Popconfirm = function Popconfirm(baseprops) {
     title = props.title,
     description = props.description,
     _props$arrow = props.arrow,
-    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    arrow = _props$arrow === void 0 ? {
+      className: "".concat(prefixCls, "-arrow")
+    } : _props$arrow,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'top' : _props$placement,
     _props$confirmText = props.confirmText,

package/dist/esm/Popconfirm/style/index.less

@@ -20,4 +20,10 @@
   &-footer {
     margin-top: var(--yee-popconfirm-footer-margin-top);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popconfirm-bg-font-color);
+    }
+  }
 }

package/dist/esm/Popover/popover.js

@@ -29,7 +29,9 @@ var Popover = function Popover(baseprops) {
     title = props.title,
     content = props.content,
     _props$arrow = props.arrow,
-    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    arrow = _props$arrow === void 0 ? {
+      className: "".concat(prefixCls, "-arrow")
+    } : _props$arrow,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'top' : _props$placement,
     _props$trigger = props.trigger,

package/dist/esm/Popover/style/index.less

@@ -14,4 +14,10 @@
     line-height: var(--yee-popover-header-line-height);
     background-color: var(--yee-popover-header-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popover-bg-color);
+    }
+  }
 }

package/dist/esm/Progress/progress.js

@@ -1,11 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["prefixCls", "type", "children", "status", "percent", "className", "style", "format", "onMouseEnter", "onMouseLeave", "onClick"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import clsx from 'clsx';
@@ -67,15 +67,15 @@ var Progress = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   // progress
   var progress;
   if (type === 'line') {
-    progress = /*#__PURE__*/React.createElement(Line, {
+    progress = /*#__PURE__*/React.createElement(Line, _extends({}, rest, {
       prefixCls: prefixCls,
       percent: percent
-    }, progressInfo);
+    }), progressInfo);
   } else {
-    progress = /*#__PURE__*/React.createElement(Circle, {
+    progress = /*#__PURE__*/React.createElement(Circle, _extends({}, rest, {
       prefixCls: prefixCls,
       percent: percent
-    }, progressInfo);
+    }), progressInfo);
   }
   var cls = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-").concat(props.status), props.status), className);
   return /*#__PURE__*/React.createElement("div", _extends({

package/dist/esm/Radio/style/index.less

@@ -9,15 +9,9 @@
     gap: var(--yee-radio-group-gap);
 
     &-small {
-      @{pls} {
-        padding: var(--yee-radio-small-padding, 2px 4px);
-      }
     }
 
     &-large {
-      @{pls} {
-        padding: var(--yee-radio-large-padding, 6px 12px);
-      }
     }
 
     &-solid {
@@ -67,6 +61,19 @@
           content: '';
         }
 
+        &::before {
+          position: absolute;
+          z-index: 1;
+          right: 5px;
+          top: 14px;
+          width: 4px;
+          height: 8px;
+          border: 2px solid #fff;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+          content: '';
+        }
+
         z-index: 1;
       }
 

package/dist/esm/Select/option.js

@@ -9,7 +9,8 @@ var Option = function Option(props) {
   var label = props.label,
     value = props.value,
     disabled = props.disabled,
-    title = props.title;
+    title = props.title,
+    dataTestId = props.dataTestId;
   var _useContext = useContext(OptionsCtx),
     prefixCls = _useContext.prefixCls,
     selectedKeys = _useContext.selectedKeys,
@@ -32,7 +33,8 @@ var Option = function Option(props) {
     },
     role: "option",
     tabIndex: disabled ? undefined : 0,
-    title: htmlTitle
+    title: htmlTitle,
+    "data-testid": dataTestId
   }, label);
 };
 export default Option;

package/dist/esm/Select/options.js

@@ -1,4 +1,4 @@
-var _excluded = ["prefixCls", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "onSelect"];
+var _excluded = ["prefixCls", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "dataTestId", "onSelect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -17,6 +17,7 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     popupStyle = props.popupStyle,
     selectedKeys = props.selectedKeys,
     focusedKey = props.focusedKey,
+    dataTestId = props.dataTestId,
     onSelect = props.onSelect,
     rest = _objectWithoutProperties(props, _excluded);
 
@@ -36,9 +37,10 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
       focusedKey: focusedKey,
       onSelect: onSelect
     }
-  }, options.map(function (option) {
+  }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Option, _extends({}, option, {
-      key: option.value
+      key: option.value,
+      dataTestId: "".concat(dataTestId, "-").concat(index)
     }));
   })));
 });

package/dist/esm/Select/select.js

@@ -159,6 +159,7 @@ var Select = function Select(baseprops) {
     options: filteredOpts,
     focusedKey: focusedKey,
     selectedKeys: mergedValue,
+    dataTestId: rest['data-testid'],
     onSelect: handleSelect,
     onClose: function onClose() {
       return setOpen(false);

package/dist/esm/Skeleton/demo/basic.js

@@ -1,13 +1,7 @@
-import { Card, Skeleton, Space } from "../..";
+import { Card, Skeleton } from "../..";
 import React from 'react';
 export default (function () {
-  return /*#__PURE__*/React.createElement(Space, {
-    direction: "vertical",
-    gap: 16,
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, {
     title: "Basic Placeholder"
   }, /*#__PURE__*/React.createElement(Skeleton, null)), /*#__PURE__*/React.createElement(Card, {
     title: "With Avatar"

package/dist/esm/Space/interface.d.ts

@@ -26,6 +26,10 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
      * Alignment
      */
     align?: 'center' | 'start' | 'end' | 'baseline' | 'flex-start';
+    /***
+     * Justify content
+     * */
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
     /**
      * Whether to take up the entire row
      */

package/dist/esm/Space/space.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "children", "gap", "direction", "align", "wrap", "className", "style", "classNames", "styles", "block"];
+var _excluded = ["prefixCls", "children", "gap", "direction", "align", "justify", "wrap", "className", "style", "classNames", "styles", "block"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -26,6 +26,7 @@ var Space = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
     _props$align = props.align,
     align = _props$align === void 0 ? direction === 'horizontal' ? 'center' : undefined : _props$align,
+    justify = props.justify,
     wrap = props.wrap,
     className = props.className,
     style = props.style,
@@ -45,20 +46,29 @@ var Space = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     if (!children) {
       return null;
     }
+    var loop = function loop(childs) {
+      var res = [];
+      childs.forEach(function (child, index) {
+        var isItem = /*#__PURE__*/React.isValidElement(child) && child.type.isSpaceItem;
+        var itemClassName = isItem ? child.props.className : undefined;
+        var itemStyle = isItem ? child.props.style : undefined;
+        var itemChildren = isItem ? child.props.children : child;
+        if ( /*#__PURE__*/React.isValidElement(child) && child.type === React.Fragment) {
+          res = res.concat(loop(React.Children.toArray(child.props.children)));
+        } else {
+          res.push( /*#__PURE__*/React.createElement("div", {
+            className: clsx("".concat(prefixCls, "-item"), classNames === null || classNames === void 0 ? void 0 : classNames.item, itemClassName),
+            style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.item), itemStyle),
+            key: index
+          }, itemChildren));
+        }
+      });
+      return res;
+    };
     var childs = React.Children.toArray(children).filter(function (child) {
       return child !== null && child !== undefined;
     });
-    return childs.map(function (child, index) {
-      var isItem = /*#__PURE__*/React.isValidElement(child) && child.type.isSpaceItem;
-      var itemClassName = isItem ? child.props.className : undefined;
-      var itemStyle = isItem ? child.props.style : undefined;
-      var itemChildren = isItem ? child.props.children : child;
-      return /*#__PURE__*/React.createElement("div", {
-        className: clsx("".concat(prefixCls, "-item"), classNames === null || classNames === void 0 ? void 0 : classNames.item, itemClassName),
-        style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.item), itemStyle),
-        key: index
-      }, itemChildren);
-    });
+    return loop(childs);
   };
   var packed = pack();
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
@@ -66,7 +76,8 @@ var Space = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     style: _objectSpread({
       width: block ? '100%' : undefined,
       gap: gap + 'px',
-      alignItems: getAlign()
+      alignItems: getAlign(),
+      justifyContent: justify
     }, style),
     ref: componentRef
   }), packed);

package/dist/esm/Splitter/demo/basic.js

@@ -7,11 +7,13 @@ export default (function () {
     }
   }, /*#__PURE__*/React.createElement(Splitter, null, /*#__PURE__*/React.createElement(Splitter.Item, null, /*#__PURE__*/React.createElement("div", {
     style: {
+      margin: 8,
       padding: 16,
       backgroundColor: '#f0f0f0'
     }
   }, "Left Panel")), /*#__PURE__*/React.createElement(Splitter.Item, null, /*#__PURE__*/React.createElement("div", {
     style: {
+      margin: 8,
       padding: 16,
       backgroundColor: '#e0e0e0'
     }

package/dist/esm/Splitter/demo/vertical.js

@@ -3,19 +3,27 @@ import React from 'react';
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      height: 300
+      height: 500
     }
   }, /*#__PURE__*/React.createElement(Splitter, {
     layout: "vertical"
-  }, /*#__PURE__*/React.createElement(Splitter.Item, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Splitter.Item, {
+    size: 250
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
+      marginBottom: 8,
       padding: 16,
-      backgroundColor: '#f0f0f0'
+      backgroundColor: '#f0f0f0',
+      height: '100%'
     }
-  }, "Top Panel")), /*#__PURE__*/React.createElement(Splitter.Item, null, /*#__PURE__*/React.createElement("div", {
+  }, "Top Panel")), /*#__PURE__*/React.createElement(Splitter.Item, {
+    size: 250
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
+      marginTop: 8,
       padding: 16,
-      backgroundColor: '#e0e0e0'
+      backgroundColor: '#e0e0e0',
+      height: '100%'
     }
   }, "Bottom Panel"))));
 });

package/dist/esm/Splitter/index.d.ts

@@ -1,6 +1,6 @@
 import InternalSplitter from './splitter';
 import Item from './splitter-item';
-export type { SplitterItemProps, SplitterProps } from './interface';
+export type { SplitterItemProps, PanelRect as SplitterPanelRect, SplitterProps, } from './interface';
 type SplitterType = typeof InternalSplitter & {
     Item: typeof Item;
 };

package/dist/esm/Splitter/interface.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
+export type PanelRect = {
+    type: 'default' | 'percent' | 'auto';
+    size: number;
+    currentSize: number;
+    min?: string | number;
+    max?: string | number;
+};
 export interface SplitterItemProps {
     /**
      * custom item element class name prefix
@@ -67,14 +74,13 @@ export interface SplitterProps extends DataAttributeProps {
     /**
      * children
      */
-    children?: React.ReactElement[];
+    children?: Array<React.ReactElement | null>;
     /**
      * display border or not
      * */
     bordered?: boolean;
-    itemPadding?: number | string;
     /**
      * panel size change event
      * */
-    onResize?: (sizes: number[]) => void;
+    onResize?: (sizes: PanelRect[]) => void;
 }

package/dist/esm/Splitter/splitter-handler.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PanelRect } from './splitter';
+import type { PanelRect } from './interface';
 interface SplitterHandlerProps {
     layout: 'horizontal' | 'vertical';
     resizable?: boolean;

package/dist/esm/Splitter/splitter-handler.js

@@ -36,7 +36,8 @@ var SplitterHandler = function SplitterHandler(_ref) {
   var _useContext = useContext(SplitterWrapperCtx),
     refs = _useContext.refs;
   var _useContext2 = useContext(SplitterCtx),
-    prefixCls = _useContext2.prefixCls;
+    prefixCls = _useContext2.prefixCls,
+    onResize = _useContext2.onResize;
   var status = records[index - 1] || {};
   var next = records[index] || {};
   var onMove = function onMove(dis) {
@@ -80,6 +81,7 @@ var SplitterHandler = function SplitterHandler(_ref) {
         size: e,
         currentSize: e
       });
+      onResize === null || onResize === void 0 || onResize(newState);
       return newState;
     });
   };

package/dist/esm/Splitter/splitter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SplitterProps } from './interface';
+import type { PanelRect, SplitterProps } from './interface';
 import './style/index.less';
 type SplitterWrapperCtxType = {
     refs: {
@@ -8,16 +8,9 @@ type SplitterWrapperCtxType = {
 };
 type SplitterCtxType = {
     prefixCls: string;
-    onResize?: (sizes: number[]) => void;
+    onResize?: (sizes: PanelRect[]) => void;
 };
 export declare const SplitterWrapperCtx: React.Context<SplitterWrapperCtxType>;
 export declare const SplitterCtx: React.Context<SplitterCtxType>;
-export type PanelRect = {
-    type: 'default' | 'percent' | 'auto';
-    size: number;
-    currentSize: number;
-    min?: string | number;
-    max?: string | number;
-};
 declare const Splitter: React.ForwardRefExoticComponent<SplitterProps & React.RefAttributes<HTMLDivElement>>;
 export default Splitter;