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

package/package.json

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

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

@@ -24,8 +24,12 @@ var useManageColumn = function (_a) {
     var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
     var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
     var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
-    var _c = useState(columnsOrder || []), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
-    console.log('columnConfig', columnConfig, 'columnsOrder', columnsOrder, 'columnsConfigOptions', columnsConfigOptions, 'updatedColumnsOrder', updatedColumnsOrder);
+    var _c = useState(columnsOrder !== null && columnsOrder !== void 0 ? columnsOrder : []), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
+    console.log('columnConfig', columnConfig);
+    console.log('columnsOrder', columnsOrder);
+    console.log('columnsConfigOptions', columnsConfigOptions);
+    console.log('updatedColumnsOrder', updatedColumnsOrder);
+    console.log('columns', columns);
     var columnsConfigValues = useMemo(function () {
         return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
             var _a;
@@ -34,16 +38,12 @@ var useManageColumn = function (_a) {
         }).map(function (column) { return column.name; });
     }, [columnConfig, columns]);
     var onConfirmForm = useCallback(function () {
-        setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
-        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
     }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig]);
     var resetColumnConfig = useCallback(function () {
-        setUpdatedColumnsOrder(columnsOrder || []);
-        if (resetGrid) {
-            resetGrid();
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
+        setUpdatedColumnsOrder([]);
+        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder([]);
+        (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
         setColumnsConfigOptions(columnConfig || {});
     }, [onClose, resetGrid]);
     var onCloseForm = useCallback(function () {

package/ui/index.es.js

@@ -37775,16 +37775,16 @@ const Es = /* @__PURE__ */ ho(_4e), xSe = ({
     columnsOrder: u
   } = t, [f, p] = Ue({
     ...c
-  }), [g, v] = Ue(u || []);
-  console.log("columnConfig", c, "columnsOrder", u, "columnsConfigOptions", f, "updatedColumnsOrder", g);
+  }), [g, v] = Ue(u ?? []);
+  console.log("columnConfig", c), console.log("columnsOrder", u), console.log("columnsConfigOptions", f), console.log("updatedColumnsOrder", g), console.log("columns", e);
   const m = ot(() => e == null ? void 0 : e.filter((T) => {
     var M;
     const k = (M = c == null ? void 0 : c[T.name]) == null ? void 0 : M.isHidden;
     return T != null && T.alwaysOn || typeof k == "boolean" ? !k : !(T != null && T.defaultHidden);
   }).map((T) => T.name), [c, e]), w = ke(() => {
-    o == null || o(f), l == null || l(g), n == null || n();
+    o != null && o(f) && (l != null && l(g)) && (n == null || n());
   }, [f, g, n, o]), E = ke(() => {
-    v(u || []), i && (i(), n == null || n()), p(c || {});
+    v([]), l == null || l([]), i != null && i() && (n == null || n()), p(c || {});
   }, [n, i]), S = ke(() => {
     v(u ?? []), n == null || n();
   }, []), C = ke((T) => {

package/ui/index.umd.js

@@ -3058,7 +3058,7 @@ function print() { __p += __j.call(arguments, '') }
   svg {
     color: blue2;
   }
-`,FB=({canEdit:e,onClick:t,linkTo:r})=>{const n=I.useCallback(()=>{E1.isFunction(t)&&t()},[t]),i=I.useMemo(()=>{const o=[];return e?o.push(b.jsx(Z8,{icon:"pen",onClick:n,linkTo:r},"edit")):o.push(b.jsx(Z8,{icon:"chevronRight",onClick:n,linkTo:r},"read")),o},[e,n,r]);return b.jsx(t5e,{onClick:n,children:i})},r5e=({rowData:e,column:t,onRowAction:r})=>{var h;const n=!!((h=t==null?void 0:t.passProps)!=null&&h.inverse),i=ns(t.name,e),o=n?!i:!!i,l=`toggle_${t.name}`,[u,c]=I.useState(o);I.useEffect(()=>{c(o)},[e.id]);const f=I.useCallback(()=>{if(!r)return;const g=r(e.id,l,!u);g?g.then(()=>c(!u)):c(!u)},[r,e.id,l,u]);return b.jsx(BB,{checked:u,onChange:f})},n5e=e=>function({rowData:r,onRowAction:n}){const i=E1.isFunction(e==null?void 0:e.canRowEdit)?e==null?void 0:e.canRowEdit(r):e==null?void 0:e.canRowEdit,o=E1.isFunction(e==null?void 0:e.canRowRead)?e==null?void 0:e.canRowRead(r):e==null?void 0:e.canRowRead,l=I.useCallback(()=>{const c=i?"row_edit":"row_read";n&&n(r==null?void 0:r.id,c,r)},[i,n,r]),u=I.useMemo(()=>{var f;const c=i?"edit":"read";return(f=e==null?void 0:e.createLink)==null?void 0:f.call(e,{mode:c,id:r==null?void 0:r.id})},[i,r==null?void 0:r.id]);return!i&&!o?null:b.jsx(FB,{canEdit:!!i,onClick:l,linkTo:u})},i5e=e=>{const{onRowAction:t,actionColumnDefinition:r,columnsDefinitions:n,onRowEditClick:i,onRowReadClick:o}=e,l=I.useMemo(()=>{var h;return r!=null&&r.forceCheckboxes||(h=r==null?void 0:r.actionOptions)!=null&&h.length?{flexBasis:40,forceCheckboxes:!0,addRowNumbers:!0,checkAllPosition:"top"}:r!=null&&r.addRowNumbers?{flexBasis:40,addRowNumbers:!0}:void 0},[r]),u=I.useCallback((h,g,v)=>{if(g==="row_edit"||g==="row_read")g==="row_edit"&&i&&i(h,v),g==="row_read"&&o&&o(h,v);else if(t)return t(h,g,v)},[t,i,o]),c=I.useMemo(()=>n5e(r),[r]);return{columnsDefinitions:I.useMemo(()=>(r==null?void 0:r.canRowEdit)!==void 0||(r==null?void 0:r.canRowRead)!==void 0?[...n,{name:"sticky",flexBasis:88,filtering:!1,sorting:!1,sticky:!0,stickTo:"right",alwaysOn:!0,cellComponent:c}]:n,[c,r==null?void 0:r.canRowEdit,r==null?void 0:r.canRowRead,n]),actionColumnDefinition:l,onRowAction:u}},a5e=({columns:e,gridSelectors:t,gridActions:r,onClose:n})=>{const{resetGrid:i,setColumnConfig:o,setColumnsOrder:l}=r,{columnConfig:u,columnsOrder:c}=t,[f,h]=I.useState({...u}),[g,v]=I.useState(c||[]);console.log("columnConfig",u,"columnsOrder",c,"columnsConfigOptions",f,"updatedColumnsOrder",g);const m=I.useMemo(()=>e==null?void 0:e.filter(P=>{var D;const T=(D=u==null?void 0:u[P.name])==null?void 0:D.isHidden;return P!=null&&P.alwaysOn||typeof T=="boolean"?!T:!(P!=null&&P.defaultHidden)}).map(P=>P.name),[u,e]),w=I.useCallback(()=>{o==null||o(f),l==null||l(g),n==null||n()},[f,g,n,o]),E=I.useCallback(()=>{v(c||[]),i&&(i(),n==null||n()),h(u||{})},[n,i]),S=I.useCallback(()=>{v(c??[]),n==null||n()},[]),C=I.useCallback(P=>{const{destination:T,source:D}=P,R=T==null?void 0:T.index,F=D==null?void 0:D.index;if(R===F||!T)return;const W=[...g],z=W.findIndex(j=>e[F].name===j),J=W.findIndex(j=>R&&e[R].name===j),B=W[z];W.splice(z,1),W.splice(J===-1?0:J,0,B),v(W)},[e,g]),O=I.useMemo(()=>e.sort((P,T)=>{const D=(g||[]).indexOf(P.name),R=(g||[]).indexOf(T.name);return D>R?1:D<R?-1:0}),[e,g]);return{columnsConfigValues:m,setColumnsConfigOptions:h,onConfirmForm:w,resetColumnConfig:E,handleDragEnd:C,onCloseForm:S,displayColumnsDefinitions:O}},o5e=se.div`
+`,FB=({canEdit:e,onClick:t,linkTo:r})=>{const n=I.useCallback(()=>{E1.isFunction(t)&&t()},[t]),i=I.useMemo(()=>{const o=[];return e?o.push(b.jsx(Z8,{icon:"pen",onClick:n,linkTo:r},"edit")):o.push(b.jsx(Z8,{icon:"chevronRight",onClick:n,linkTo:r},"read")),o},[e,n,r]);return b.jsx(t5e,{onClick:n,children:i})},r5e=({rowData:e,column:t,onRowAction:r})=>{var h;const n=!!((h=t==null?void 0:t.passProps)!=null&&h.inverse),i=ns(t.name,e),o=n?!i:!!i,l=`toggle_${t.name}`,[u,c]=I.useState(o);I.useEffect(()=>{c(o)},[e.id]);const f=I.useCallback(()=>{if(!r)return;const g=r(e.id,l,!u);g?g.then(()=>c(!u)):c(!u)},[r,e.id,l,u]);return b.jsx(BB,{checked:u,onChange:f})},n5e=e=>function({rowData:r,onRowAction:n}){const i=E1.isFunction(e==null?void 0:e.canRowEdit)?e==null?void 0:e.canRowEdit(r):e==null?void 0:e.canRowEdit,o=E1.isFunction(e==null?void 0:e.canRowRead)?e==null?void 0:e.canRowRead(r):e==null?void 0:e.canRowRead,l=I.useCallback(()=>{const c=i?"row_edit":"row_read";n&&n(r==null?void 0:r.id,c,r)},[i,n,r]),u=I.useMemo(()=>{var f;const c=i?"edit":"read";return(f=e==null?void 0:e.createLink)==null?void 0:f.call(e,{mode:c,id:r==null?void 0:r.id})},[i,r==null?void 0:r.id]);return!i&&!o?null:b.jsx(FB,{canEdit:!!i,onClick:l,linkTo:u})},i5e=e=>{const{onRowAction:t,actionColumnDefinition:r,columnsDefinitions:n,onRowEditClick:i,onRowReadClick:o}=e,l=I.useMemo(()=>{var h;return r!=null&&r.forceCheckboxes||(h=r==null?void 0:r.actionOptions)!=null&&h.length?{flexBasis:40,forceCheckboxes:!0,addRowNumbers:!0,checkAllPosition:"top"}:r!=null&&r.addRowNumbers?{flexBasis:40,addRowNumbers:!0}:void 0},[r]),u=I.useCallback((h,g,v)=>{if(g==="row_edit"||g==="row_read")g==="row_edit"&&i&&i(h,v),g==="row_read"&&o&&o(h,v);else if(t)return t(h,g,v)},[t,i,o]),c=I.useMemo(()=>n5e(r),[r]);return{columnsDefinitions:I.useMemo(()=>(r==null?void 0:r.canRowEdit)!==void 0||(r==null?void 0:r.canRowRead)!==void 0?[...n,{name:"sticky",flexBasis:88,filtering:!1,sorting:!1,sticky:!0,stickTo:"right",alwaysOn:!0,cellComponent:c}]:n,[c,r==null?void 0:r.canRowEdit,r==null?void 0:r.canRowRead,n]),actionColumnDefinition:l,onRowAction:u}},a5e=({columns:e,gridSelectors:t,gridActions:r,onClose:n})=>{const{resetGrid:i,setColumnConfig:o,setColumnsOrder:l}=r,{columnConfig:u,columnsOrder:c}=t,[f,h]=I.useState({...u}),[g,v]=I.useState(c??[]);console.log("columnConfig",u),console.log("columnsOrder",c),console.log("columnsConfigOptions",f),console.log("updatedColumnsOrder",g),console.log("columns",e);const m=I.useMemo(()=>e==null?void 0:e.filter(P=>{var D;const T=(D=u==null?void 0:u[P.name])==null?void 0:D.isHidden;return P!=null&&P.alwaysOn||typeof T=="boolean"?!T:!(P!=null&&P.defaultHidden)}).map(P=>P.name),[u,e]),w=I.useCallback(()=>{o!=null&&o(f)&&(l!=null&&l(g))&&(n==null||n())},[f,g,n,o]),E=I.useCallback(()=>{v([]),l==null||l([]),i!=null&&i()&&(n==null||n()),h(u||{})},[n,i]),S=I.useCallback(()=>{v(c??[]),n==null||n()},[]),C=I.useCallback(P=>{const{destination:T,source:D}=P,R=T==null?void 0:T.index,F=D==null?void 0:D.index;if(R===F||!T)return;const W=[...g],z=W.findIndex(j=>e[F].name===j),J=W.findIndex(j=>R&&e[R].name===j),B=W[z];W.splice(z,1),W.splice(J===-1?0:J,0,B),v(W)},[e,g]),O=I.useMemo(()=>e.sort((P,T)=>{const D=(g||[]).indexOf(P.name),R=(g||[]).indexOf(T.name);return D>R?1:D<R?-1:0}),[e,g]);return{columnsConfigValues:m,setColumnsConfigOptions:h,onConfirmForm:w,resetColumnConfig:E,handleDragEnd:C,onCloseForm:S,displayColumnsDefinitions:O}},o5e=se.div`
   ${Wo};
   display: flex;
   min-height: 32px;