@luminati-io/uikit 3.4.10 → 3.4.11

package/dist/umd/uikit.development.js

@@ -33111,7 +33111,18 @@ var DragDrop = function DragDrop(props) {
       matrix = _removeItem.matrix,
       item = _removeItem.item;
     var newValue = addItem(matrix, dst_drop_id, +destination.index, item);
-    if (onChange) onChange(newValue);
+    var info = {
+      id: item,
+      source: {
+        section: src_drop_id,
+        index: source.index
+      },
+      destination: {
+        section: dst_drop_id,
+        index: destination.index
+      }
+    };
+    onChange(newValue, info);
   }, [value, onChange]);
   var itemsMap = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
     return items.reduce(function (acc, item) {
@@ -33135,7 +33146,8 @@ var DragDrop = function DragDrop(props) {
       isLast: i == value.length - 1,
       containerDirection: direction,
       Comp: props.CustomDrop,
-      DragComp: props.CustomDrag
+      DragComp: props.CustomDrag,
+      EmptyComp: props.EmptyComp
     });
   })));
 };
@@ -33284,6 +33296,7 @@ var DroppableArea = function DroppableArea(props) {
     containerDirection = props.containerDirection;
   var Comp = props.Comp || DropComp;
   var DragComp = props.DragComp || _draggable__WEBPACK_IMPORTED_MODULE_6__.DraggableItem;
+  var EmptyComp = props.EmptyComp || EmptyDrop;
   var get_draggable = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (provided, snapshot, item) {
     return /*#__PURE__*/React.createElement("div", _extends({}, provided.draggableProps, {
       ref: provided.innerRef
@@ -33302,7 +33315,7 @@ var DroppableArea = function DroppableArea(props) {
   }, function (drop_provided, drop_snapshot) {
     return /*#__PURE__*/React.createElement("div", _extends({}, drop_provided.droppableProps, {
       ref: drop_provided.innerRef
-    }), items.map(function (item, i) {
+    }), !(items !== null && items !== void 0 && items.length) && /*#__PURE__*/React.createElement(EmptyComp, null), items.map(function (item, i) {
       return /*#__PURE__*/React.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__.Draggable, {
         key: item.id,
         draggableId: item.id,
@@ -33310,9 +33323,19 @@ var DroppableArea = function DroppableArea(props) {
       }, function (provided, snapshot) {
         return snapshot.isDragging && portal ? /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_0___default().createPortal(get_draggable(provided, snapshot, item), portal.current) : get_draggable(provided, snapshot, item);
       });
-    }));
+    }), drop_provided.placeholder);
   }));
 };
+var EmptyDrop = function EmptyDrop() {
+  return /*#__PURE__*/React.createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
+    color: "gray_8",
+    variant: "xs",
+    style: {
+      fontStyle: 'italic',
+      padding: '12px'
+    }
+  }, "Empty");
+};
 var DropComp = function DropComp(props) {
   return /*#__PURE__*/React.createElement(SectionFlex, {
     flex_direction: "column",
@@ -38141,12 +38164,15 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 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 = ["Dragger", "isDragging"];
+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; }
+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 _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); }
@@ -38167,7 +38193,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CustomizeButton = function CustomizeButton(props) {
   var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_11__.useTableContext)(),
-    allColumns = _useTableContext.allColumns;
+    allColumns = _useTableContext.allColumns,
+    canOrderColumns = _useTableContext.canOrderColumns,
+    orderLogic = _useTableContext.orderLogic;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
     search = _useState2[0],
@@ -38180,16 +38208,13 @@ var CustomizeButton = function CustomizeButton(props) {
   });
   if (!columns.length) return null;
   var filtered = columns.filter(searchColumn(search));
-  var items = filtered.map(function (c) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItem, _extends({
-      key: c.id
-    }, c));
-  });
+  var orderProps = canOrderColumns && orderLogic;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonWithPopover, {
     popoverProps: _objectSpread(_objectSpread({}, props), {}, {
-      items: items,
+      items: filtered,
       search: search,
-      setSearch: setSearch
+      setSearch: setSearch,
+      orderProps: orderProps
     })
   });
 };
@@ -38247,13 +38272,20 @@ var CustomizeButtonPopover = function CustomizeButtonPopover(props) {
     search = props.search,
     setSearch = props.setSearch,
     maxMenuHeight = props.maxMenuHeight,
-    items = props.items;
+    items = props.items,
+    orderProps = props.orderProps;
+  var maxHeight = Number.parseInt(maxMenuHeight);
+  var _maxMenuHeight = orderProps && (!maxHeight || maxHeight < 600) ? 600 : maxMenuHeight;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PopoverContainer, null, searchable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Search, {
     search: search,
     setSearch: setSearch
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ItemsWrapper, {
-    $maxMenuHeight: maxMenuHeight
-  }, items));
+    $maxMenuHeight: _maxMenuHeight
+  }, orderProps ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonDraggableItems, _extends({
+    items: items
+  }, orderProps)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonStaticItems, {
+    items: items
+  })));
 };
 CustomizeButtonPopover.displayName = 'CustomizeButtonPopover';
 var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopover)(function (p) {
@@ -38265,6 +38297,82 @@ var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopove
 }, CustomizeButtonPopover, {
   placement: 'bottom'
 });
+var CustomizeButtonStaticItems = function CustomizeButtonStaticItems(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, items.map(function (c) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItem, _extends({
+      key: c.id
+    }, c));
+  }));
+};
+var CustomizeButtonDraggableItems = function CustomizeButtonDraggableItems(props) {
+  var items = props.items,
+    orders = props.orders,
+    moveColumn = props.moveColumn;
+  var sections = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    var _orders$pinned;
+    return [((_orders$pinned = orders.pinned) === null || _orders$pinned === void 0 ? void 0 : _orders$pinned.length) && {
+      name: 'Pinned',
+      sectionId: 'pinned'
+    }, {
+      name: 'Visible',
+      sectionId: 'visible'
+    }, {
+      name: 'Hidden',
+      sectionId: 'hidden'
+    }].filter(Boolean);
+  }, [orders]);
+  var sectionIds = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return sections.map(function (sec) {
+      return sec.sectionId;
+    });
+  }, [sections]);
+  var value = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    var filtered = new Set(items.map(function (it) {
+      return it.id;
+    }));
+    return sectionIds.map(function (sec) {
+      return orders[sec].filter(function (id) {
+        return filtered.has(id);
+      });
+    });
+  }, [items, sectionIds, orders]);
+  var onChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (newOrder, info) {
+    var n,
+      id = info.id,
+      cat = sectionIds[info.destination.section];
+    var dstIndex = info.destination.index;
+    if (dstIndex == value[info.destination.section].length) n = orders[cat].length;else {
+      var currentItem = value[info.destination.section][dstIndex];
+      n = orders[cat].indexOf(currentItem);
+    }
+    moveColumn(id, cat, n);
+  }, [sectionIds, value, orders, moveColumn]);
+  var _items = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return items.map(function (it) {
+      return _objectSpread({
+        name: it.id
+      }, it);
+    });
+  }, [items]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_input__WEBPACK_IMPORTED_MODULE_6__.DragDrop, {
+    value: value,
+    onChange: onChange,
+    items: _items,
+    sections: sections,
+    direction: "column",
+    CustomDrag: CustomizeButtonDraggableItem
+  });
+};
+var CustomizeButtonDraggableItem = function CustomizeButtonDraggableItem(props) {
+  var Dragger = props.Dragger,
+    isDragging = props.isDragging,
+    itemProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_input__WEBPACK_IMPORTED_MODULE_6__.DragDrop.DraggableItem, {
+    Dragger: Dragger,
+    isDragging: isDragging
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CustomizeButtonItem, itemProps));
+};
 var CustomizeButtonItem = function CustomizeButtonItem(props) {
   var id = props.id,
     name = props.name,
@@ -39118,7 +39226,7 @@ var useOrderLogic = function useOrderLogic(table) {
     pinnedColumns = _table$state.pinnedColumns,
     setColumnOrder = table.setColumnOrder,
     setHiddenColumns = table.setHiddenColumns,
-    setPinnedColumns = table.setPinnedColumns,
+    togglePinColumn = table.togglePinColumn,
     allColumns = table.allColumns;
   var getColumnCategory = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id) {
     if (hiddenColumns.includes(id)) return 'hidden';
@@ -39172,13 +39280,11 @@ var useOrderLogic = function useOrderLogic(table) {
     var category = getColumnCategory(id);
     var arr = orders[category];
     var n = arr.indexOf(id);
-    console.log('orders1', orders, category, n);
     if (n <= 0) return;
     var new_arr = arr.toSpliced(n, 1);
     new_arr.splice(n - 1, 0, id);
     var newOrder = _objectSpread({}, orders);
     newOrder[category] = new_arr;
-    console.log('orders', orders, newOrder);
     setOrders(newOrder);
   }, [getColumnCategory, orders, setOrders]);
   var moveForward = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id) {
@@ -39199,12 +39305,12 @@ var useOrderLogic = function useOrderLogic(table) {
     newOrders[srcCat] = newOrders[srcCat].filter(function (_id) {
       return _id != id;
     });
-    newOrders[cat] = newOrders.toSpliced(n, 0, id);
+    newOrders[cat] = newOrders[cat].toSpliced(n, 0, id);
     setOrders(newOrders);
     if (srcCat == cat) return;
     if (srcCat == 'hidden' || cat == 'hidden') setHiddenColumns(newOrders.hidden);
-    if (srcCat == 'pinned' || cat == 'pinned') setPinnedColumns(newOrders.pinned);
-  }, [getColumnCategory, orders, setOrders, setHiddenColumns, setPinnedColumns]);
+    if (srcCat == 'pinned' || cat == 'pinned') togglePinColumn(id, cat == 'pinned');
+  }, [getColumnCategory, orders, setOrders, setHiddenColumns]);
   var res = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return {
       orders: orders,