@dtjoy/dt-design 1.1.2 → 1.1.5

package/lib/splitter/Panel.js

@@ -6,39 +6,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.InternalPanel = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _configProvider = require("antd/lib/config-provider");
-var _clsx = _interopRequireDefault(require("clsx"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
 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, _clsx.default)(`${prefixCls}-panel`, {
-    [`${prefixCls}-panel-hidden`]: size === 0
-  }, className);
-  const hasSize = size !== undefined;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _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); }
+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); }
+var InternalPanel = exports.InternalPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    children = props.children,
+    size = props.size,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    id = props.id,
+    destroyOnHidden = props.destroyOnHidden,
+    supportMotion = props.supportMotion;
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  var panelClassName = (0, _clsx2.default)("".concat(prefixCls, "-panel"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), "".concat(prefixCls, "-panel-motion"), supportMotion), className);
+  var hasSize = size !== undefined;
+  var shouldRender = !destroyOnHidden || size !== 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
+    id: id,
     className: panelClassName,
-    style: {
-      ...style,
+    style: _objectSpread(_objectSpread({}, style), {}, {
       // Use auto when start from ssr
       flexBasis: hasSize ? size : 'auto',
       flexGrow: hasSize ? 0 : 1
-    }
-  }, children);
+    })
+  }, shouldRender ? children : null);
 });
 if (process.env.NODE_ENV !== 'production') {
-  InternalPanel.displayName = 'Panel';
+  InternalPanel.displayName = 'Splitter.Panel';
+}
+var Panel = function Panel() {
+  return null;
+};
+if (process.env.NODE_ENV !== 'production') {
+  Panel.displayName = 'Splitter.Panel';
 }
-const Panel = () => null;
 var _default = exports.default = Panel;

package/lib/splitter/SplitBar.js

@@ -1,180 +1,197 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@ant-design/icons");
-var _clsx = _interopRequireDefault(require("clsx"));
+var _clsx5 = _interopRequireDefault(require("clsx"));
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var _useDragListeners = _interopRequireDefault(require("./hooks/useDragListeners"));
 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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _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 _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; }
 function getValidNumber(num) {
   return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
 }
-const SplitBar = props => {
-  const {
-    prefixCls,
-    vertical,
-    index,
-    active,
-    ariaNow,
-    ariaMin,
-    ariaMax,
-    resizable,
-    startCollapsible,
-    endCollapsible,
-    onOffsetStart,
-    onOffsetUpdate,
-    onOffsetEnd,
-    onCollapse,
-    lazy,
-    containerSize,
-    showStartCollapsibleIcon,
-    showEndCollapsibleIcon
-  } = props;
-  const splitBarPrefixCls = `${prefixCls}-bar`;
-  const [startPos, setStartPos] = (0, _react.useState)(null);
-  const [constrainedOffset, setConstrainedOffset] = (0, _react.useState)(0);
-  const constrainedOffsetX = vertical ? 0 : constrainedOffset;
-  const constrainedOffsetY = vertical ? constrainedOffset : 0;
-  const onMouseDown = e => {
+var SplitBar = function SplitBar(props) {
+  var prefixCls = props.prefixCls,
+    vertical = props.vertical,
+    index = props.index,
+    active = props.active,
+    ariaNow = props.ariaNow,
+    ariaMin = props.ariaMin,
+    ariaMax = props.ariaMax,
+    ariaControls = props.ariaControls,
+    resizable = props.resizable,
+    startCollapsible = props.startCollapsible,
+    endCollapsible = props.endCollapsible,
+    draggerIcon = props.draggerIcon,
+    startIcon = props.startIcon,
+    endIcon = props.endIcon,
+    onOffsetStart = props.onOffsetStart,
+    onOffsetUpdate = props.onOffsetUpdate,
+    onOffsetEnd = props.onOffsetEnd,
+    onCollapse = props.onCollapse,
+    lazy = props.lazy,
+    containerSize = props.containerSize,
+    showStartCollapsibleIcon = props.showStartCollapsibleIcon,
+    showEndCollapsibleIcon = props.showEndCollapsibleIcon;
+  var splitBarPrefixCls = "".concat(prefixCls, "-bar");
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    startPos = _useState2[0],
+    setStartPos = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    constrainedOffset = _useState4[0],
+    setConstrainedOffset = _useState4[1];
+  var constrainedOffsetX = vertical ? 0 : constrainedOffset;
+  var constrainedOffsetY = vertical ? constrainedOffset : 0;
+  var STEP = 10;
+  var onMouseDown = function onMouseDown(e) {
     if (resizable && e.currentTarget) {
+      e.preventDefault();
       setStartPos([e.pageX, e.pageY]);
       onOffsetStart(index);
     }
   };
-  const onTouchStart = e => {
+  var onTouchStart = function onTouchStart(e) {
     if (resizable && e.touches.length === 1) {
-      const touch = e.touches[0];
+      e.preventDefault();
+      var touch = e.touches[0];
       setStartPos([touch.pageX, touch.pageY]);
       onOffsetStart(index);
     }
   };
-  const getConstrainedOffset = rawOffset => {
-    const currentPos = containerSize * ariaNow / 100;
-    const newPos = currentPos + rawOffset;
-    const minAllowed = Math.max(0, containerSize * ariaMin / 100);
-    const maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
-    const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+  var onKeyDown = function onKeyDown(e) {
+    if (!resizable) {
+      return;
+    }
+    var isHorizontal = !vertical;
+    var offsetX = 0;
+    var offsetY = 0;
+    switch (e.key) {
+      case 'ArrowLeft':
+        offsetX = isHorizontal ? -STEP : 0;
+        break;
+      case 'ArrowRight':
+        offsetX = isHorizontal ? STEP : 0;
+        break;
+      case 'ArrowUp':
+        offsetY = isHorizontal ? 0 : -STEP;
+        break;
+      case 'ArrowDown':
+        offsetY = isHorizontal ? 0 : STEP;
+        break;
+      case 'Home':
+        offsetX = isHorizontal ? -containerSize : 0;
+        offsetY = isHorizontal ? 0 : -containerSize;
+        break;
+      case 'End':
+        offsetX = isHorizontal ? containerSize : 0;
+        offsetY = isHorizontal ? 0 : containerSize;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    // Each key press is a complete start -> update -> end resize lifecycle:
+    // seed from the current sizes, apply the offset, then reset the moving
+    // state so the resize mask never lingers after a key press.
+    onOffsetStart(index);
+    var nextSizes = onOffsetUpdate(index, offsetX, offsetY);
+    onOffsetEnd(nextSizes);
+  };
+  var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
+    var currentPos = containerSize * ariaNow / 100;
+    var newPos = currentPos + rawOffset;
+    var minAllowed = Math.max(0, containerSize * ariaMin / 100);
+    var maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
+    var clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
     return clampedPos - currentPos;
   };
-  const handleLazyMove = (0, _useEvent.default)((offsetX, offsetY) => {
-    const constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
+  var handleLazyMove = (0, _useEvent.default)(function (offsetX, offsetY) {
+    var constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
     setConstrainedOffset(constrainedOffsetValue);
   });
-  const handleLazyEnd = (0, _useEvent.default)(() => {
-    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
+  var handleLazyEnd = (0, _useEvent.default)(function () {
+    var nextSizes = onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
     setConstrainedOffset(0);
-    onOffsetEnd(true);
+    onOffsetEnd(nextSizes, true);
   });
-  const getVisibilityClass = mode => {
+  var getVisibilityClass = function getVisibilityClass(mode) {
     switch (mode) {
       case true:
-        return `${splitBarPrefixCls}-collapse-bar-always-visible`;
+        return "".concat(splitBarPrefixCls, "-collapse-bar-always-visible");
       case false:
-        return `${splitBarPrefixCls}-collapse-bar-always-hidden`;
+        return "".concat(splitBarPrefixCls, "-collapse-bar-always-hidden");
       case 'auto':
-        return `${splitBarPrefixCls}-collapse-bar-hover-only`;
+        return "".concat(splitBarPrefixCls, "-collapse-bar-hover-only");
     }
   };
-  (0, _useLayoutEffect.default)(() => {
-    if (!startPos) {
-      return;
-    }
-    const onMouseMove = e => {
-      const {
-        pageX,
-        pageY
-      } = e;
-      const offsetX = pageX - startPos[0];
-      const offsetY = pageY - startPos[1];
-      if (lazy) {
-        handleLazyMove(offsetX, offsetY);
-      } else {
-        onOffsetUpdate(index, offsetX, offsetY);
-      }
-    };
-    const onMouseUp = () => {
-      if (lazy) {
-        handleLazyEnd();
-      } else {
-        onOffsetEnd();
-      }
-      setStartPos(null);
-    };
-    const handleTouchMove = e => {
-      if (e.touches.length === 1) {
-        const touch = e.touches[0];
-        const offsetX = touch.pageX - startPos[0];
-        const offsetY = touch.pageY - startPos[1];
-        if (lazy) {
-          handleLazyMove(offsetX, offsetY);
-        } else {
-          onOffsetUpdate(index, offsetX, offsetY);
-        }
-      }
-    };
-    const handleTouchEnd = () => {
-      if (lazy) {
-        handleLazyEnd();
-      } else {
-        onOffsetEnd();
-      }
-      setStartPos(null);
-    };
-    const eventHandlerMap = {
-      mousemove: onMouseMove,
-      mouseup: onMouseUp,
-      touchmove: handleTouchMove,
-      touchend: handleTouchEnd
-    };
-    for (const [event, handler] of Object.entries(eventHandlerMap)) {
-      // eslint-disable-next-line react-web-api/no-leaked-event-listener
-      window.addEventListener(event, handler);
-    }
-    return () => {
-      for (const [event, handler] of Object.entries(eventHandlerMap)) {
-        window.removeEventListener(event, handler);
-      }
-    };
-  }, [startPos, index, lazy]);
-  const transformStyle = {
-    [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`
-  };
-  const StartIcon = vertical ? _icons.UpOutlined : _icons.LeftOutlined;
-  const EndIcon = vertical ? _icons.DownOutlined : _icons.RightOutlined;
+  (0, _useDragListeners.default)({
+    startPos: startPos,
+    vertical: vertical,
+    lazy: lazy,
+    onOffsetUpdate: onOffsetUpdate,
+    onOffsetEnd: onOffsetEnd,
+    handleLazyMove: handleLazyMove,
+    handleLazyEnd: handleLazyEnd,
+    setStartPos: setStartPos,
+    index: index
+  });
+  var transformStyle = _defineProperty({}, "--".concat(splitBarPrefixCls, "-preview-offset"), "".concat(constrainedOffset, "px"));
+  var startIconNode = startIcon || (vertical ? /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.LeftOutlined, null));
+  var endIconNode = endIcon || (vertical ? /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, null));
+  var startIconCustomized = startIcon !== undefined;
+  var endIconCustomized = endIcon !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: splitBarPrefixCls,
-    role: "separator",
+    role: "separator"
+    // Splitter bar is keyboard-focusable for ARIA slider/splitter interaction
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: resizable ? 0 : -1,
     "aria-valuenow": getValidNumber(ariaNow),
     "aria-valuemin": getValidNumber(ariaMin),
-    "aria-valuemax": getValidNumber(ariaMax)
+    "aria-valuemax": getValidNumber(ariaMax),
+    "aria-controls": ariaControls,
+    onKeyDown: onKeyDown
   }, lazy && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-preview`, {
-      [`${splitBarPrefixCls}-preview-active`]: !!constrainedOffset
-    }),
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
     style: transformStyle
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-dragger`, {
-      [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
-      [`${splitBarPrefixCls}-dragger-active`]: active
-    }),
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active), "".concat(splitBarPrefixCls, "-dragger-customize"), draggerIcon !== undefined)),
     onMouseDown: onMouseDown,
     onTouchStart: onTouchStart
-  }), startCollapsible && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-start`, getVisibilityClass(showStartCollapsibleIcon)),
-    onClick: () => onCollapse(index, 'start')
-  }, /*#__PURE__*/_react.default.createElement(StartIcon, {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-start`)
-  })), endCollapsible && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-end`, getVisibilityClass(showEndCollapsibleIcon)),
-    onClick: () => onCollapse(index, 'end')
-  }, /*#__PURE__*/_react.default.createElement(EndIcon, {
-    className: (0, _clsx.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-end`)
-  })));
+  }, draggerIcon !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-dragger-icon"))
+  }, draggerIcon)), startCollapsible && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), startIconCustomized), getVisibilityClass(showStartCollapsibleIcon)),
+    onClick: function onClick() {
+      return onCollapse(index, 'start');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
+  }, startIconNode)), endCollapsible && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), endIconCustomized), getVisibilityClass(showEndCollapsibleIcon)),
+    onClick: function onClick() {
+      return onCollapse(index, 'end');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx5.default)("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
+  }, endIconNode)));
 };
 var _default = exports.default = SplitBar;