@mailstep/design-system 0.7.53-beta.4 → 0.7.53-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.53-beta.4",
+  "version": "0.7.53-beta.6",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -84,7 +84,6 @@
     "moment": "^2.30.1",
     "prettier": "2.8.8",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
@@ -127,7 +126,6 @@
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
 import Toggle from '../../../../../Elements/Toggle/Toggle';
@@ -37,5 +37,5 @@ export var ManageColumnRow = function (_a) {
         disabled: !!searchedValue || !!column.sticky,
         animateLayoutChanges: function () { return false; }
     }), attributes = _d.attributes, listeners = _d.listeners, setNodeRef = _d.setNodeRef, transform = _d.transform, transition = _d.transition;
-    return (_jsx(RowLayout, { "$isVisible": isVisible, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: _jsxs(_Fragment, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, __assign({}, attributes, listeners, { cursor: "grab" }))] }) }));
+    return (_jsx(RowLayout, { "$isVisible": isVisible, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: _jsxs(x.div, { display: "flex", alignItems: "center", w: "100%", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsxs(H6, __assign({ variant: "medium", ml: "8px", m: "0", w: "100%", p: "8px" }, attributes, listeners, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [translatedValue, _jsx(Group, {})] }))] }) }));
 };

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -25,13 +25,13 @@ var useManageColumn = function (_a) {
     var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
     var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
     var initialColumnsOrder = useMemo(function () { return columns === null || columns === void 0 ? void 0 : columns.map(function (col) { return col.name; }); }, [columns]);
+    console.log('columnsOrder', columnsOrder);
     // the length of columnsOrder is changed after using the setColumnsOrder
     var columnsOrderValue = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : initialColumnsOrder;
     // columnsConfigOptions contains switch changes from the manageColumnForm (isHidden || {})
     var _b = useState(__assign({}, (columnConfig !== null && columnConfig !== void 0 ? columnConfig : {}))), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
     var _c = useState(columnsOrderValue), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
     var columnsConfigValues = useMemo(function () {
-        console.log('columnsConfigOptions changed', columnsConfigOptions);
         return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
             var _a;
             var isHidden = (_a = columnsConfigOptions === null || columnsConfigOptions === void 0 ? void 0 : columnsConfigOptions[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
@@ -65,32 +65,34 @@ var useManageColumn = function (_a) {
         var sortFunction = function (col1, col2) {
             var i = (orderValues || []).indexOf(col1.name);
             var j = (orderValues || []).indexOf(col2.name);
+            // if orderValues is defined but the column is not in the order list, keep the default position by column definition
+            if (orderValues && (orderValues === null || orderValues === void 0 ? void 0 : orderValues.length) > 0 && i === -1) {
+                return 0;
+            }
             return i > j ? 1 : i < j ? -1 : 0;
         };
         var sortedList = __spreadArray([], list, true).sort(sortFunction);
         return sortedList;
     }, [columnConfig, columnsConfigOptions, columns]);
     var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue, columns, columnsConfigOptions, getSortedColumns]);
+    // @TODO wtf
     var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
     var handleDragEnd = useCallback(function (isManageModal) {
         if (isManageModal === void 0) { isManageModal = false; }
         return function (event) {
-            var _a, _b, _c, _d, _e, _f;
-            var active = event.active, over = event.over;
+            var _a = event, active = _a.active, over = _a.over;
             if (!over || active.id === over.id) {
                 return;
             }
-            var newOrderColumns = __spreadArray([], updatedColumnsOrder, true);
-            var fromIndex = (_c = (_b = (_a = active === null || active === void 0 ? void 0 : active.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
-            var toIndex = (_f = (_e = (_d = over === null || over === void 0 ? void 0 : over.data) === null || _d === void 0 ? void 0 : _d.current) === null || _e === void 0 ? void 0 : _e.sortable) === null || _f === void 0 ? void 0 : _f.index;
             console.log('updatedColumnsOrder', updatedColumnsOrder);
-            console.log('fromIndex', fromIndex);
-            console.log('toIndex', toIndex);
-            // move column from a position to the new position
-            var column = newOrderColumns[fromIndex];
+            var newOrderColumns = __spreadArray([], updatedColumnsOrder, true);
+            var fromIndex = updatedColumnsOrder.findIndex(function (column) { return column === active.id; });
+            var toIndex = updatedColumnsOrder.findIndex(function (column) { return column === over.id; });
             newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
+            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, active.id);
             console.log('newOrderColumns', newOrderColumns);
+            console.log('fromIndex', fromIndex);
+            console.log('toIndex', toIndex);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }
@@ -100,7 +102,6 @@ var useManageColumn = function (_a) {
     useEffect(function () {
         checksColumnsOrder(columnsOrderValue, columns);
     }, []);
-    console.log('columnsConfigValues', columnsConfigValues);
     return {
         columnsConfigValues: columnsConfigValues,
         setColumnsConfigOptions: setColumnsConfigOptions,

package/ui/Blocks/CommonGrid/store/index.js

@@ -26,7 +26,7 @@ export var initialState = {
     columnConfig: {},
     filter: {},
     columnsWidth: {},
-    columnsOrder: [],
+    columnsOrder: ['actions-cell-cg', 'hiddenColumn', 'textColumn', 'enumColumn', 'numberColumn', 'dateColumn', 'boolColumn', 'advancedColumn', 'complexColumn', 'stickyColumn'],
     defaultSorting: []
 };
 export var actionPrefix = '@store/CommonGrid';

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -13,7 +13,7 @@ var ComplexCell = function (props) {
 export var oversizedColumnDefinition = new Array(oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
     name: "column_".concat(index),
     title: "column_".concat(index),
-    flexBasis: 120,
+    flexBasis: 120
 }); });
 export var enumColumn = {
     name: 'enumColumn',
@@ -22,15 +22,23 @@ export var enumColumn = {
     filterOptions: enumValues.map(function (v) { return ({ value: v, label: v }); }),
     filterExtraProps: { isMulti: true, checkAllButton: true },
     filtering: true,
-    sorting: false,
+    sorting: false
 };
 export var columnDefinitions = [
+    {
+        name: 'hiddenColumn',
+        title: 'Hidden column',
+        flexBasis: 160,
+        filtering: true,
+        sorting: true,
+        defaultHidden: true
+    },
     {
         name: 'textColumn',
         title: 'Text column',
         flexBasis: 160,
         filtering: true,
-        sorting: true,
+        sorting: true
     },
     enumColumn,
     {
@@ -39,7 +47,7 @@ export var columnDefinitions = [
         flexBasis: 160,
         filtering: true,
         filteringType: 'number',
-        sorting: true,
+        sorting: true
     },
     {
         name: 'numberFloatColumn',
@@ -49,8 +57,8 @@ export var columnDefinitions = [
         filteringType: 'number',
         sorting: true,
         filterExtraProps: {
-            isFloat: true,
-        },
+            isFloat: true
+        }
     },
     {
         name: 'dateColumn',
@@ -60,8 +68,8 @@ export var columnDefinitions = [
         filteringType: 'date',
         sorting: true,
         filterExtraProps: {
-            filterTime: true,
-        },
+            filterTime: true
+        }
     },
     {
         name: 'boolColumn',
@@ -72,7 +80,7 @@ export var columnDefinitions = [
         sorting: true,
         formatRowValue: function (row) {
             return row.boolColumn ? 'Yes' : 'No';
-        },
+        }
     },
     {
         name: 'advancedColumn',
@@ -80,13 +88,13 @@ export var columnDefinitions = [
         flexBasis: 160,
         formatRowValue: function (row) {
             return "".concat((row.numberColumn / 4) * row.textColumn.length);
-        },
+        }
     },
     {
         name: 'complexColumn',
         title: 'Complex Column',
         flexBasis: 350,
-        cellComponent: ComplexCell,
+        cellComponent: ComplexCell
     },
     {
         name: 'stickyColumn',
@@ -94,6 +102,6 @@ export var columnDefinitions = [
         flexBasis: 160,
         alwaysOn: true,
         sticky: true,
-        stickTo: 'right',
-    },
+        stickTo: 'right'
+    }
 ];