@mailstep/design-system 0.7.53-beta.3 → 0.7.53-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.53-beta.3",
+  "version": "0.7.53-beta.5",
   "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/ManageColumnForm.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { FC } from 'react';
 import type { ColumnConfig, CommonGridProps } from '../../types';
 import type { DragEndEvent } from '@dnd-kit/core';
 type ManageColumnProps = {
-    columns?: CommonGridProps['columnsDefinitions'];
+    columns: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];
     setColumnsConfigOptions: (value: React.SetStateAction<Record<string, ColumnConfig>>) => void;
     handleDragEnd: (item: DragEndEvent) => void;
 };
-declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd }: ManageColumnProps) => JSX.Element;
+declare const ManageColumnForm: FC<ManageColumnProps>;
 export default ManageColumnForm;

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

@@ -3,9 +3,11 @@ import { useCallback, useState } from 'react';
 import { Input } from '../../../../Forms/Input/Input';
 import { ManageColumnRow } from './components/ManageColumnRow';
 import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
+var modifiers = [restrictToVerticalAxis];
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
@@ -16,9 +18,9 @@ var ManageColumnForm = function (_a) {
         setSearchedValue('');
     }, [setSearchedValue]);
     var sensors = useSensors(useSensor(PointerSensor));
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (columns === null || columns === void 0 ? void 0 : columns.map(function (_a) {
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: modifiers, children: _jsx(SortableContext, { items: columns.map(function (_a) {
                         var name = _a.name;
                         return name;
-                    })) || [], strategy: verticalListSortingStrategy, children: _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) { return (_jsx(ManageColumnRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index)); }) }) }) })] }));
+                    }), strategy: verticalListSortingStrategy, children: _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns.map(function (column) { return (_jsx(ManageColumnRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, column.name)); }) }) }) })] }));
 };
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.d.ts

@@ -4,9 +4,7 @@ import type { ColumnConfig, ColumnDefinition } from '../../../types';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;
-    setColumnsConfigOptions: (value: React.SetStateAction<{
-        [x: string]: ColumnConfig | {};
-    }>) => void;
+    setColumnsConfigOptions: (value: React.SetStateAction<Record<string, ColumnConfig | {}>>) => void;
     searchedValue: string;
 };
 export declare const ManageColumnRow: FC<ActionRowProps>;

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, __assign({ "$isVisible": isVisible }, attributes, listeners, { 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, {})] }) })));
+    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

@@ -70,24 +70,20 @@ var useManageColumn = function (_a) {
         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([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), 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('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);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }

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'
+    }
 ];

package/ui/Blocks/CommonGrid/storybook/utils/withRedux.d.ts

@@ -1,2 +1,3 @@
+export declare const reduxComposeEnhancer: any;
 export declare const withProvider: (story: Function) => JSX.Element;
 export default withProvider;

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
-import { combineReducers, createStore } from 'redux';
+import { combineReducers, createStore, compose } from 'redux';
 import commonGridReducer from '../../store';
+// @ts-ignore
+export var reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 export var withProvider = function (story) {
     var reducers = combineReducers({
-        commonGrid: commonGridReducer,
+        commonGrid: commonGridReducer
     });
-    var store = createStore(reducers);
+    var store = createStore(reducers, {}, reduxComposeEnhancer());
     return _jsx(Provider, { store: store, children: story() });
 };
 export default withProvider;