import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect, useCallback } from 'react';
import clsx from 'clsx';
import { Button } from '../Button/index.js';
import NavigateBefore from '@iam-com/icons/Left';
import Right from '@iam-com/icons/Right';
import ExpandLess from '@iam-com/icons/Up';
import Down from '@iam-com/icons/Down';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { Search } from '../Search/index.js';
import SearchIcon from '@iam-com/icons/Search';
import AutoTips from '../AutoTips/index.js';
import Drag from '@iam-com/icons/Drag';
import { S as Sortable } from '../_verture/sortable.esm-49896035.js';
import { d as debounce } from '../_verture/utils-1ffeadec.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/typeof-498dd2b1.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '@iam-com/icons/LoadingF';
import '@iam-com/icons/Forbid';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '@iam-com/lib';
import '@para-ui/core/GlobalContext';
import '../TextField/index.js';
import '../Label/index.js';
import '../Help/index.js';
import '@iam-com/icons/Help';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
import '../Loading/index.js';
import '../HelperText/index.js';
import '../_verture/useGlobalProps-1b846a65.js';
import '../_verture/defineProperty-62acccfc.js';

var en = {
  left: 'Left',
  right: 'Right',
  allCheck: 'Select All',
  inVertCheck: 'Invert selection',
  searchPlaceholder: 'Please enter the search content',
  leftBtnTips: 'Please check the content on the right first',
  rightBtnTips: 'Please check the content on the left first'
};

var zh = {
  left: '左侧',
  right: '右侧',
  allCheck: '全选',
  inVertCheck: '反选',
  searchPlaceholder: '请输入搜索内容',
  leftBtnTips: '请先勾选右侧内容',
  rightBtnTips: '请先勾选左侧内容'
};

var localeJson = {
  zh: zh,
  en: en
};

var useClick = function useClick(callback, doubleCallback) {
  var clickRef = useRef({
    clickCount: 0,
    time: 0,
    timer: null
  });
  return function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    clickRef.current.clickCount += 1;
    clickRef.current.time = Date.now();
    clickRef.current.timer = setTimeout(function () {
      if (Date.now() - clickRef.current.time <= 200 && clickRef.current.clickCount === 2) {
        doubleCallback && doubleCallback.apply(null, args);
      }
      if (clickRef.current.clickCount === 1) {
        callback && callback.apply(null, args);
      }
      clearTimeout(clickRef.current.timer);
      clickRef.current.clickCount = 0;
    }, 200);
  };
};

var Box = function Box(props) {
  var title = props.title,
    data = props.data,
    onSearch = props.onSearch,
    onchange = props.onchange,
    onMove = props.onMove,
    queryAll = props.queryAll,
    inverse = props.inverse,
    direction = props.direction,
    fluctuationPosition = props.fluctuationPosition,
    fluctuationOrther = props.fluctuationOrther,
    onEndSort = props.onEndSort,
    multiple = props.multiple,
    rightIcon = props.rightIcon,
    style = props.style,
    customKey = props.customKey;
  var intl = useFormatMessage("Transfer", localeJson);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    checkCount = _useState2[0],
    setCheckCount = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    disabledCount = _useState4[0],
    setDisabledCount = _useState4[1];
  var ref = useRef();
  useEffect(function () {
    var arr = [];
    var count = 0;
    data.forEach(function (item, index) {
      if (item.checked && !item.hide) {
        arr.push(index);
      }
      if (item.disabled || item.hide) {
        count++;
      }
    });
    setDisabledCount(count);
    setCheckCount(arr);
  }, [data]);
  useEffect(function () {
    if (direction == "right") {
      new Sortable(ref.current, {
        animation: 180,
        ghostClass: "blue-background-class",
        handle: ".handle",
        onEnd: function onEnd(evt) {
          onEndSort === null || onEndSort === void 0 ? void 0 : onEndSort(evt.oldIndex, evt.newIndex);
        }
      });
    }
  }, []);
  var handler = useClick(function (e, index, item) {
    if (item.disabled) return;
    onchange(e, !item.checked, index, direction, multiple);
  }, function (e, index, item) {
    if (item === null || item === void 0 ? void 0 : item.disabled) return;
    onchange(e, true, index, direction, false);
    onMove(direction === "right" ? "left" : "right");
  });
  var itemStyle = function itemStyle(data) {
    var stlye = {};
    if (data === null || data === void 0 ? void 0 : data.tagColor) {
      stlye.borderLeft = "4px solid ".concat(data.tagColor);
    }
    if (data === null || data === void 0 ? void 0 : data.hide) {
      stlye.display = "none";
    }
    return stlye;
  };
  return jsxs("div", Object.assign({
    className: "box",
    style: style
  }, {
    children: [jsx("div", Object.assign({
      className: "box-header"
    }, {
      children: title
    })), jsx(Search, {
      btnType: "inside",
      placeholder: intl({
        id: "searchPlaceholder"
      }),
      showBtn: false,
      rightIcon: jsx(SearchIcon, {}),
      rightIconExist: true,
      onChange: function onChange(val) {
        onSearch(val, direction);
      },
      onClickRightIcon: function onClickRightIcon(val) {
        onSearch(val, direction);
      },
      onEnter: function onEnter(event) {
        var _a;
        var val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || "";
        onSearch(val, direction);
      },
      allowClear: false
    }), jsx("div", Object.assign({
      className: "context",
      ref: ref
    }, {
      children: data.map(function (item, index) {
        return jsxs("div", Object.assign({
          className: clsx("item", (item === null || item === void 0 ? void 0 : item.disabled) && "item-disabled", (item === null || item === void 0 ? void 0 : item.checked) && "item-checked", fluctuationPosition === index && "item-fluctuation", fluctuationOrther === index && "item-fluctuationOrther"),
          style: itemStyle(item),
          onClick: function onClick(e) {
            handler(e, index, item);
          }
        }, {
          children: [jsx("div", Object.assign({
            className: "item-label"
          }, {
            children: jsx(AutoTips, {
              children: (item === null || item === void 0 ? void 0 : item.name) || item[item[customKey]]
            })
          })), rightIcon ? jsx("div", Object.assign({
            className: "right-icon"
          }, {
            children: rightIcon(item)
          })) : null, direction === "right" ? jsx("div", Object.assign({
            className: "handle"
          }, {
            children: jsx(Drag, {})
          })) : null]
        }), item[item[customKey]] || item.name);
      })
    })), jsxs("div", Object.assign({
      className: "footer"
    }, {
      children: [jsx(Button, Object.assign({
        variant: "text",
        className: "".concat(checkCount.length === data.length - disabledCount && data.length > 0 ? "btn-on" : ""),
        onClick: function onClick() {
          queryAll(checkCount.length !== data.length - disabledCount, direction);
        }
      }, {
        children: intl({
          id: "allCheck"
        })
      })), jsx(Button, Object.assign({
        variant: "text",
        className: "".concat(checkCount.length === 0 || checkCount.length === data.length - disabledCount ? "btn-off" : ""),
        disabled: checkCount.length === 0 || checkCount.length === data.length - disabledCount,
        onClick: function onClick() {
          inverse(direction);
        }
      }, {
        children: intl({
          id: "inVertCheck"
        })
      })), jsxs("div", Object.assign({
        className: "count"
      }, {
        children: [checkCount.length, "/", data.length]
      }))]
    }))]
  }));
};
var Sortablejs = Sortable;

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n}\n.paraui-v3-transfer .blue-background-class {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box {\n  border-radius: 4px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  overflow: hidden;\n}\n.paraui-v3-transfer .box .box-header {\n  background: rgba(171, 176, 185, 0.12);\n  color: rgb(46, 55, 67);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 10px;\n  height: 36px;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .count {\n  margin: 0 10px 0 0;\n  color: rgb(46, 55, 67);\n  letter-spacing: 1px;\n  margin: 0 16px 0 auto;\n}\n.paraui-v3-transfer .box .context {\n  height: 400px;\n  overflow: auto;\n}\n.paraui-v3-transfer .box .context .item-fluctuation {\n  animation: flucturation 0.4s forwards;\n}\n.paraui-v3-transfer .box .context .item-fluctuationOrther {\n  animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v3-transfer .box .context .item {\n  padding: 0px 8px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v3-transfer .box .context .item.item-checked {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item.item-checked:hover {\n  background-color: rgba(54, 102, 214, 0.05) !important;\n}\n.paraui-v3-transfer .box .context .item.item-checked > .item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .context .item > .item-label {\n  margin-left: 8px;\n  flex: 1;\n  overflow: hidden;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-transfer .box .context .item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-transfer .box .context .item.item-disabled:hover {\n  background: inherit;\n  cursor: no-drop;\n}\n.paraui-v3-transfer .box .context .item.item-disabled > .item-label {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-transfer .box .context .item .handle {\n  margin-left: 14px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v3-transfer .box .context .item .handle svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-transfer .box .context .item .handle:hover {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item .handle:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-transfer .box .text-field-content {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer {\n  display: flex;\n  align-items: center;\n  border-top: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer .btn-on {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .footer .btn-off {\n  color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer button {\n  color: rgb(46, 55, 67);\n  padding: 0 0 0 16px;\n}\n.paraui-v3-transfer .box .footer button:hover {\n  color: #3666D6;\n}\n.paraui-v3-transfer ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn {\n  display: flex;\n  height: 500px;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0 24px;\n}\n.paraui-v3-transfer .moveBtn > button:hover {\n  color: white;\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn .btn-left {\n  margin-top: 20px;\n}\n\n@keyframes flucturation {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(36px);\n  }\n}\n@keyframes flucturationOrther {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-36px);\n  }\n}";
styleInject(css_248z);

var Transfer = function Transfer(props) {
  var _a, _b, _c, _d;
  var intl = useFormatMessage("Transfer", localeJson);
  var _props$data = props.data,
    data = _props$data === void 0 ? [] : _props$data,
    value = props.value,
    _props$customKey = props.customKey,
    customKey = _props$customKey === void 0 ? "key" : _props$customKey,
    onChange = props.onChange,
    _props$titles = props.titles,
    titles = _props$titles === void 0 ? [intl({
      id: "left"
    }), intl({
      id: "right"
    })] : _props$titles,
    className = props.className,
    _props$style = props.style,
    style = _props$style === void 0 ? {
      width: "298px"
    } : _props$style,
    onSort = props.onSort,
    _props$trim = props.trim,
    trim = _props$trim === void 0 ? false : _props$trim,
    _props$multiple = props.multiple,
    multiple = _props$multiple === void 0 ? true : _props$multiple,
    rightIcon = props.rightIcon,
    _props$render = props.render,
    render = _props$render === void 0 ? function (item) {} : _props$render;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    transData = _useState2[0],
    setTransData = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    leftData = _useState4[0],
    setLeftData = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    rightData = _useState6[0],
    setRightData = _useState6[1];
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    leftCount = _useState8[0],
    setLeftCount = _useState8[1];
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    rightCount = _useState10[0],
    setRightCount = _useState10[1];
  var _useState11 = useState(),
    _useState12 = _slicedToArray(_useState11, 2),
    fluctuationPosition = _useState12[0];
    _useState12[1];
  var _useState13 = useState(),
    _useState14 = _slicedToArray(_useState13, 2),
    fluctuationOrther = _useState14[0];
    _useState14[1];
  var _useState15 = useState(false),
    _useState16 = _slicedToArray(_useState15, 2),
    animationsLock = _useState16[0],
    setAnimationLock = _useState16[1];
  var onchange = useCallback(function (e, bol, index, direction, multiple) {
    if (direction === "left") {
      !multiple && leftData.forEach(function (item) {
        return item.checked = false;
      });
      leftData[index].checked = bol;
      setLeftData(_toConsumableArray(leftData));
    } else {
      !multiple && rightData.forEach(function (item) {
        return item.checked = false;
      });
      rightData[index].checked = bol;
      setRightData(_toConsumableArray(rightData));
    }
  }, [leftData, rightData]);
  var queryAll = useCallback(function (checked, direction) {
    if (direction === "left") {
      leftData.forEach(function (item) {
        if (!item.disabled && !item.hide) item.checked = checked;
      });
      setLeftData(_toConsumableArray(leftData));
    } else {
      rightData.forEach(function (item) {
        if (!item.disabled && !item.hide) item.checked = checked;
      });
      setRightData(_toConsumableArray(rightData));
    }
  }, [leftData, rightData]);
  var inverse = useCallback(function (direction) {
    if (direction === "left") {
      leftData.forEach(function (item) {
        if (!item.disabled && !item.hide) item.checked = !item.checked;
      });
      setLeftData(_toConsumableArray(leftData));
    } else {
      rightData.forEach(function (item) {
        if (!item.disabled && !item.hide) item.checked = !item.checked;
      });
      setRightData(_toConsumableArray(rightData));
    }
  }, [leftData, rightData]);
  var onMove = function onMove(direction) {
    var newData = [];
    if (direction === "left") {
      newData = _toConsumableArray(rightData);
      newData.forEach(function (item) {
        if ((item === null || item === void 0 ? void 0 : item.checked) && !(item === null || item === void 0 ? void 0 : item.hide)) {
          item.checked = false;
          leftData.push(item);
          rightData.splice(rightData.indexOf(item), 1);
        }
      });
    } else {
      newData = _toConsumableArray(leftData);
      newData.forEach(function (item) {
        if ((item === null || item === void 0 ? void 0 : item.checked) && !(item === null || item === void 0 ? void 0 : item.hide)) {
          item.checked = false;
          rightData.push(item);
          leftData.splice(leftData.indexOf(item), 1);
        }
      });
    }
    setLeftData(_toConsumableArray(leftData));
    setRightData(_toConsumableArray(rightData));
    var rArr = [];
    rightData.forEach(function (item) {
      rArr.push(item[customKey]);
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(rArr);
  };
  // 上下移动
  var fluctuation = function fluctuation(direction) {
    setAnimationLock(true);
    if (direction == "up") {
      // setFluctuationPosition(rightCount[0] - 1)
      // setFluctuationOrther(rightCount[0])
      // setTimeout(() => {
      setRightData(function (pre) {
        // setFluctuationPosition(undefined)
        // setFluctuationOrther(undefined)
        rightCount.forEach(function (item) {
          pre.splice.apply(pre, [item - 1, 0].concat(_toConsumableArray(pre.splice(item, 1))));
        });
        setAnimationLock(false);
        var rArr = [];
        pre.forEach(function (item) {
          rArr.push(item[customKey]);
        });
        onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
        onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
        return _toConsumableArray(pre);
      });
      // }, 400)
    } else {
      // setFluctuationPosition(rightCount[0])
      // setFluctuationOrther(rightCount[0] + 1)
      // setTimeout(() => {
      setRightData(function (pre) {
        // setFluctuationPosition(undefined)
        // setFluctuationOrther(undefined)
        rightCount.reverse().forEach(function (item) {
          pre.splice.apply(pre, [item + 1, 0].concat(_toConsumableArray(pre.splice(item, 1))));
        });
        setAnimationLock(false);
        var rArr = [];
        pre.forEach(function (item) {
          rArr.push(item[customKey]);
        });
        onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
        onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
        return _toConsumableArray(pre);
      });
      // }, 400)
    }
  };

  var onSearch = debounce(function (e, direction) {
    var str = trim ? e.toUpperCase().trim() : e.toUpperCase();
    if (direction === "left") {
      leftData.forEach(function (item) {
        item.hide = false;
        var name = (item.name || "").toUpperCase();
        var description = (item.description || "").toUpperCase();
        if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
          item.hide = true;
        }
      });
      setLeftData(_toConsumableArray(leftData));
    } else {
      rightData.filter(function (item) {
        item.hide = false;
        var name = (item.name || "").toUpperCase();
        var description = (item.description || "").toUpperCase();
        if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
          item.hide = true;
        }
      });
      setRightData(_toConsumableArray(rightData));
    }
  }, 500);
  var onEndSort = useCallback(function (oldIndex, newIndex) {
    setRightData(function (pre) {
      pre.splice.apply(pre, [newIndex, 0].concat(_toConsumableArray(pre.splice(oldIndex, 1))));
      var rArr = [];
      pre.forEach(function (item) {
        rArr.push(item[customKey]);
      });
      onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
      onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
      return _toConsumableArray(pre);
    });
  }, []);
  useEffect(function () {
    if (data.length) {
      var _leftData = {};
      data.forEach(function (item) {
        var key = item[customKey];
        render(item);
        _leftData[key] = item;
      });
      setTransData(Object.assign({}, _leftData));
    }
  }, [data]);
  useEffect(function () {
    var rData = [];
    var lData = [];
    value === null || value === void 0 ? void 0 : value.forEach(function (item) {
      if (transData[item]) {
        rData.push(transData[item]);
        delete transData[item];
      }
    });
    for (var key in transData) {
      lData.push(transData[key]);
    }
    setRightData([].concat(rData));
    setLeftData([].concat(lData));
  }, [value, transData]);
  useEffect(function () {
    var arr = [];
    leftData.forEach(function (item, index) {
      if (item.checked && !item.hide) {
        arr.push(index);
      }
    });
    setLeftCount(arr);
    var rArr = [];
    rightData.forEach(function (item, index) {
      if (item.checked && !item.hide) {
        rArr.push(index);
      }
    });
    setRightCount(rArr);
  }, [leftData, rightData]);
  return jsxs("div", Object.assign({
    className: clsx("".concat($prefixCls, "-transfer"), className)
  }, {
    children: [jsx(Box, {
      title: titles[0],
      queryAll: queryAll,
      data: leftData,
      style: style,
      direction: "left",
      customKey: customKey,
      rightIcon: rightIcon,
      onchange: onchange,
      multiple: multiple,
      onMove: onMove,
      inverse: inverse,
      onSearch: onSearch
    }), jsxs("div", Object.assign({
      className: "moveBtn"
    }, {
      children: [jsx(Button.IconButton, Object.assign({
        className: "btn btn-right",
        variant: "outlined",
        disabled: leftCount.length <= 0,
        toolTipTitle: leftCount.length <= 0 ? intl({
          id: "rightBtnTips"
        }) : "",
        TooltipProps: {
          arrow: false,
          placement: "bottomRight"
        },
        onClick: function onClick() {
          onMove("right");
        }
      }, {
        children: jsx(Right, {})
      })), jsx(Button.IconButton, Object.assign({
        className: "btn btn-left",
        variant: "outlined",
        disabled: rightCount.length <= 0 || ((_a = rightData[0]) === null || _a === void 0 ? void 0 : _a.checked) || animationsLock,
        toolTipTitle: rightCount.length <= 0 || ((_b = rightData[0]) === null || _b === void 0 ? void 0 : _b.checked) ? intl({
          id: "leftBtnTips"
        }) : "",
        TooltipProps: {
          arrow: false,
          placement: "bottomRight"
        },
        onClick: function onClick() {
          fluctuation("up");
        }
      }, {
        children: jsx(ExpandLess, {})
      })), jsx(Button.IconButton, Object.assign({
        className: "btn btn-left",
        variant: "outlined",
        disabled: rightCount.length <= 0 || ((_c = rightData[rightData.length - 1]) === null || _c === void 0 ? void 0 : _c.checked) || animationsLock,
        toolTipTitle: rightCount.length <= 0 || ((_d = rightData[rightData.length - 1]) === null || _d === void 0 ? void 0 : _d.checked) ? intl({
          id: "leftBtnTips"
        }) : "",
        TooltipProps: {
          arrow: false,
          placement: "bottomRight"
        },
        onClick: function onClick() {
          fluctuation("down");
        }
      }, {
        children: jsx(Down, {})
      })), jsx(Button.IconButton, Object.assign({
        className: "btn btn-left",
        variant: "outlined",
        disabled: rightCount.length <= 0,
        toolTipTitle: rightCount.length <= 0 ? intl({
          id: "leftBtnTips"
        }) : "",
        TooltipProps: {
          arrow: false,
          placement: "bottomRight"
        },
        onClick: function onClick() {
          onMove("left");
        }
      }, {
        children: jsx(NavigateBefore, {})
      }))]
    })), jsx(Box, {
      title: titles[1],
      queryAll: queryAll,
      data: rightData,
      style: style,
      direction: "right",
      customKey: customKey,
      rightIcon: rightIcon,
      onchange: onchange,
      multiple: multiple,
      onMove: onMove,
      inverse: inverse,
      fluctuationPosition: fluctuationPosition,
      fluctuationOrther: fluctuationOrther,
      onEndSort: onEndSort,
      onSearch: onSearch
    })]
  }));
};
var SSortablejs = Sortablejs;

export { SSortablejs, Transfer, Transfer as default };
