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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.53-beta.2",
+  "version": "0.7.53-beta.4",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -21,7 +21,8 @@ export var HeadCell = function (_a) {
     var column = _a.column, isDragDisabled = _a.isDragDisabled, displayColumnsWidth = _a.displayColumnsWidth, onResizeOut = _a.onResizeOut, onResizeOver = _a.onResizeOver, onResize = _a.onResize, sortingValues = _a.sortingValues, onSetSort = _a.onSetSort, group = _a.group, hasResize = _a.hasResize;
     var _c = useSortable({
         id: column.name,
-        disabled: isDragDisabled || !!column.sticky
+        disabled: isDragDisabled || !!column.sticky,
+        animateLayoutChanges: function () { return false; }
     }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
     var cellClassName = "cell".concat(getStickyCollClassNames(!!(column === null || column === void 0 ? void 0 : column.sticky), column === null || column === void 0 ? void 0 : column.stickTo), " ").concat(getGroupClassNames(group));
     return (_jsxs(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), attributes, listeners, { className: cellClassName, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column === getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));

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

@@ -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(_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" }))] }) }));
 };

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

@@ -31,6 +31,7 @@ var useManageColumn = function (_a) {
     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;
@@ -79,13 +80,17 @@ var useManageColumn = function (_a) {
             if (!over || active.id === over.id) {
                 return;
             }
-            var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), true);
+            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];
             newOrderColumns.splice(fromIndex, 1);
             newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
+            console.log('newOrderColumns', newOrderColumns);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }
@@ -95,6 +100,7 @@ var useManageColumn = function (_a) {
     useEffect(function () {
         checksColumnsOrder(columnsOrderValue, columns);
     }, []);
+    console.log('columnsConfigValues', columnsConfigValues);
     return {
         columnsConfigValues: columnsConfigValues,
         setColumnsConfigOptions: setColumnsConfigOptions,

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;