@mailstep/design-system 0.6.6 → 0.6.7

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -63,7 +63,7 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/components/Table.d.ts

@@ -7,4 +7,6 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
 }, never>;
 export declare const Cell: (props: any) => JSX.Element;
 export declare const TextCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
-export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
+    width: number;
+}, never>;

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

@@ -21,5 +21,5 @@ var StyledCell = styled.div(templateObject_2 || (templateObject_2 = __makeTempla
 export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
 export var Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"], ["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"])), function (props) { return props.width; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/index.es.js

@@ -37761,7 +37761,9 @@ const Cs = /* @__PURE__ */ ho(V4e), ISe = ({
   text-overflow: ellipsis;
   white-space: nowrap;
 `, f6e = ae(Pi)`
-  width: 100%;
+  width: ${(e) => e.width}px;
+  position: sticky;
+  left: 0;
 `, h6e = ae.div`
   ${(e) => e.columnLayout != "no-scroll" && Pt`
       overflow-x: ${e.columnLayout == "sticky" ? "inherit" : "auto"};
@@ -46510,7 +46512,7 @@ const XAe = ae.div`
     ie.current = pe, I && (I.current = pe);
   }, []);
   return /* @__PURE__ */ b.jsxs(b.Fragment, { children: [
-    /* @__PURE__ */ b.jsx(gt.div, { className: C || "", children: /* @__PURE__ */ b.jsxs(m6e, { columnLayout: E, isLoading: i, totalColumnsWidth: ge, floatingChildren: X && /* @__PURE__ */ b.jsx(jh, { className: "dataRow", align: "center", children: /* @__PURE__ */ b.jsx(f6e, { align: "center", className: `gridMessage ${se}`, children: X }) }), ref: ce, children: [
+    /* @__PURE__ */ b.jsx(gt.div, { className: C || "", children: /* @__PURE__ */ b.jsxs(m6e, { columnLayout: E, isLoading: i, totalColumnsWidth: ge, floatingChildren: X && /* @__PURE__ */ b.jsx(jh, { className: "dataRow", align: "center", children: /* @__PURE__ */ b.jsx(f6e, { align: "center", className: `gridMessage ${se}`, width: window.innerWidth, children: X }) }), ref: ce, children: [
       /* @__PURE__ */ b.jsxs("div", { className: "gridHead", children: [
         c.find((pe) => pe.group) && /* @__PURE__ */ b.jsx(y6e, { actionColumn: u, columns: S, displayColumnsWidth: oe, groups: te }),
         /* @__PURE__ */ b.jsx(B9e, { columns: S, actionColumn: u, onAddSort: he, columnLayout: E, sortingValues: V, displayColumnsWidth: oe, handleResizeDrag: q, groups: te, handleDragEnd: t }),

package/ui/index.umd.js

@@ -3083,7 +3083,9 @@ function print() { __p += __j.call(arguments, '') }
   text-overflow: ellipsis;
   white-space: nowrap;
 `,f5e=oe(fi)`
-  width: 100%;
+  width: ${e=>e.width}px;
+  position: sticky;
+  left: 0;
 `,h5e=oe.div`
   ${e=>e.columnLayout!="no-scroll"&&Et`
       overflow-x: ${e.columnLayout=="sticky"?"inherit":"auto"};
@@ -3406,7 +3408,7 @@ Avoid returning a new reference inside your input selector, e.g.
   > :nth-child(2) {
     transform: ${({isOpen:e})=>e?"rotate(45deg) translate(-1px, -1px)":"rotate(90deg) translate(-2px, 0)"};
   }
-`,KCe=({options:e,onSelect:t,onClick:r})=>{const[n,i]=I.useState(!1),o=I.useRef(null),l=I.useCallback(()=>i(!1),[]),u=I.useCallback(()=>{e&&(e==null?void 0:e.length)>0&&i(h=>!h),r==null||r()},[r,e]),c=I.useCallback(h=>{i(!1),t==null||t(h.value)},[t]),f=I.useMemo(()=>e==null?void 0:e.map(h=>({title:h.label,onClick:()=>c(h),link:"#",name:h.name})),[c,e]);return b.jsx(JCe,{children:b.jsxs(qCe,{ref:o,onClick:u,children:[b.jsxs(QCe,{isOpen:n,children:[b.jsx("span",{className:"line"}),b.jsx("span",{className:"line"})]}),n&&b.jsx(y9,{parentRef:o,onClose:l,placement:"left-end",children:b.jsx(XCe,{showMenu:!0,items:f})})]})})},$Ce={outline:"none"},rv=(...e)=>null,exe=Xn.uxState,txe={},rxe=({filters:e,handleDragEnd:t,gridSelectors:r,gridActions:n,isLoading:i,rowsData:o,hasColouredRows:l,columnsDefinitions:u,actionColumnDefinition:c,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columnLayout:E="normal",displayColumnsDefinitions:S,className:C,gridRef:k,minColumnWidth:P,errorMessage:T,floatingButtonProps:D})=>{const{uxState:B=exe,columnConfig:F,columnsWidth:W=txe,columnsWidthVariant:G,page:J=1,filter:R,sorting:j,rowsPerPage:V=10}=r,{clearUxState:te,handleUxChange:Y,addFilter:ie=rv,addSorting:pe=rv,setColumnWidth:be=rv,setColumnsOrder:fe=rv}=n,Z=Vwe(o,B,Y);Fwe(o,B,te);let q,le="info";i&&(q=b.jsx(Tr,{id:"dataGrid.status.loadingData",message:"... loading data ..."})),!i&&(!o||o.length<1)&&(q=b.jsx(Tr,{id:"dataGrid.status.noDataFound",message:"No data found."})),!i&&T&&(q=T,le="error");const{displayColumnsWidth:se,totalColumnsWidth:ve,gridBoxRef:ae,handleResizeDrag:K}=Uwe(S,W,G,be,E,P),re=I.useMemo(()=>x6e(S),[S]),de=I.useCallback(ge=>{ae.current=ge,k&&(k.current=ge)},[]);return b.jsxs(b.Fragment,{children:[b.jsx(dt.div,{className:C||"",children:b.jsxs(m5e,{columnLayout:E,isLoading:i,totalColumnsWidth:ve,floatingChildren:q&&b.jsx(E1,{className:"dataRow",align:"center",children:b.jsx(f5e,{align:"center",className:`gridMessage ${le}`,children:q})}),ref:de,children:[b.jsxs("div",{className:"gridHead",children:[u.find(ge=>ge.group)&&b.jsx(y5e,{actionColumn:c,columns:S,displayColumnsWidth:se,groups:re}),b.jsx(Bwe,{columns:S,actionColumn:c,onAddSort:pe,columnLayout:E,sortingValues:j,displayColumnsWidth:se,handleResizeDrag:K,groups:re,handleDragEnd:t}),u.find(ge=>ge.filtering)&&b.jsx(F5e,{filters:e,columns:S,actionColumn:c,onChange:ie,filterValues:R,displayColumnsWidth:se,groups:re,rowsData:o,uxState:B,handleUxChange:Y})]}),b.jsx("div",{className:"body flx_1",style:$Ce,tabIndex:-1,onKeyDown:Z,children:!i&&o&&S&&o.map((ge,Te)=>{const Ce=V*J+(Te+1)-V;return b.jsx(Z5e,{rowData:ge,rowIndex:Ce,uxState:B,isEven:l&&(Te+1)%2===0,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onUxChange:Y,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columns:S,actionColumn:c,displayColumnsWidth:se,groups:re},ge.id)})})]})}),D&&b.jsx(KCe,{...D})]})},nxe=oe(dt.div)`
+`,KCe=({options:e,onSelect:t,onClick:r})=>{const[n,i]=I.useState(!1),o=I.useRef(null),l=I.useCallback(()=>i(!1),[]),u=I.useCallback(()=>{e&&(e==null?void 0:e.length)>0&&i(h=>!h),r==null||r()},[r,e]),c=I.useCallback(h=>{i(!1),t==null||t(h.value)},[t]),f=I.useMemo(()=>e==null?void 0:e.map(h=>({title:h.label,onClick:()=>c(h),link:"#",name:h.name})),[c,e]);return b.jsx(JCe,{children:b.jsxs(qCe,{ref:o,onClick:u,children:[b.jsxs(QCe,{isOpen:n,children:[b.jsx("span",{className:"line"}),b.jsx("span",{className:"line"})]}),n&&b.jsx(y9,{parentRef:o,onClose:l,placement:"left-end",children:b.jsx(XCe,{showMenu:!0,items:f})})]})})},$Ce={outline:"none"},rv=(...e)=>null,exe=Xn.uxState,txe={},rxe=({filters:e,handleDragEnd:t,gridSelectors:r,gridActions:n,isLoading:i,rowsData:o,hasColouredRows:l,columnsDefinitions:u,actionColumnDefinition:c,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columnLayout:E="normal",displayColumnsDefinitions:S,className:C,gridRef:k,minColumnWidth:P,errorMessage:T,floatingButtonProps:D})=>{const{uxState:B=exe,columnConfig:F,columnsWidth:W=txe,columnsWidthVariant:G,page:J=1,filter:R,sorting:j,rowsPerPage:V=10}=r,{clearUxState:te,handleUxChange:Y,addFilter:ie=rv,addSorting:pe=rv,setColumnWidth:be=rv,setColumnsOrder:fe=rv}=n,Z=Vwe(o,B,Y);Fwe(o,B,te);let q,le="info";i&&(q=b.jsx(Tr,{id:"dataGrid.status.loadingData",message:"... loading data ..."})),!i&&(!o||o.length<1)&&(q=b.jsx(Tr,{id:"dataGrid.status.noDataFound",message:"No data found."})),!i&&T&&(q=T,le="error");const{displayColumnsWidth:se,totalColumnsWidth:ve,gridBoxRef:ae,handleResizeDrag:K}=Uwe(S,W,G,be,E,P),re=I.useMemo(()=>x6e(S),[S]),de=I.useCallback(ge=>{ae.current=ge,k&&(k.current=ge)},[]);return b.jsxs(b.Fragment,{children:[b.jsx(dt.div,{className:C||"",children:b.jsxs(m5e,{columnLayout:E,isLoading:i,totalColumnsWidth:ve,floatingChildren:q&&b.jsx(E1,{className:"dataRow",align:"center",children:b.jsx(f5e,{align:"center",className:`gridMessage ${le}`,width:window.innerWidth,children:q})}),ref:de,children:[b.jsxs("div",{className:"gridHead",children:[u.find(ge=>ge.group)&&b.jsx(y5e,{actionColumn:c,columns:S,displayColumnsWidth:se,groups:re}),b.jsx(Bwe,{columns:S,actionColumn:c,onAddSort:pe,columnLayout:E,sortingValues:j,displayColumnsWidth:se,handleResizeDrag:K,groups:re,handleDragEnd:t}),u.find(ge=>ge.filtering)&&b.jsx(F5e,{filters:e,columns:S,actionColumn:c,onChange:ie,filterValues:R,displayColumnsWidth:se,groups:re,rowsData:o,uxState:B,handleUxChange:Y})]}),b.jsx("div",{className:"body flx_1",style:$Ce,tabIndex:-1,onKeyDown:Z,children:!i&&o&&S&&o.map((ge,Te)=>{const Ce=V*J+(Te+1)-V;return b.jsx(Z5e,{rowData:ge,rowIndex:Ce,uxState:B,isEven:l&&(Te+1)%2===0,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onUxChange:Y,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columns:S,actionColumn:c,displayColumnsWidth:se,groups:re},ge.id)})})]})}),D&&b.jsx(KCe,{...D})]})},nxe=oe(dt.div)`
   padding-bottom: 11px;
   padding-top: 10px;
   position: ${({isFixed:e})=>e?"fixed":"relative"};