@mailstep/design-system 0.6.32 → 0.6.34

package/package.json

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

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

@@ -35,7 +35,7 @@ export var ActionRow = function (_a) {
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
         i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
-    var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase());
+    var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) && !column.alwaysOn;
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {
             var _a;

package/ui/Elements/Alert/styles.js

@@ -6,7 +6,7 @@ import { Link } from '../Link';
 import { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
 import styled from 'styled-components';
-export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"], ["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"])), function (_a) {
+export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"], ["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"])), function (_a) {
     var $inline = _a.$inline, $colorFill = _a.$colorFill;
     return ($inline ? "solid 1px ".concat($colorFill) : 'none');
 }, function (_a) {

package/ui/index.es.js

@@ -16721,7 +16721,7 @@ KA.defaultProps = {
   replace: !1
 };
 const jle = Ti(ft.div)`
-  width: 100%;
+  width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
   align-items: center;
@@ -16738,7 +16738,13 @@ const jle = Ti(ft.div)`
   font-family: ${te("fonts.primary")};
   padding: 6px 5px 6px 5px;
   margin-bottom: 5px;
-  position: relative;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
 `, Wle = Ti(ft.div)`
   width: 4px;
   height: 36px;
@@ -50898,7 +50904,7 @@ const KCe = /* @__PURE__ */ ho(QCe), exe = (e, t, r = [], n) => {
   }), [o]), h = Pj.isObject(e == null ? void 0 : e.title) && "props" in e.title && ((m = e.title) == null ? void 0 : m.props) && vt._({
     id: (C = (w = e.title) == null ? void 0 : w.props) == null ? void 0 : C.id,
     message: (S = e.title) == null ? void 0 : S.props.message
-  }), p = h && h.toLocaleLowerCase().includes(n.toLocaleLowerCase()), v = ke(() => {
+  }), p = h && h.toLocaleLowerCase().includes(n.toLocaleLowerCase()) && !e.alwaysOn, v = ke(() => {
     r((x) => ({
       ...x,
       [e.name]: c ? {

package/ui/index.umd.js

@@ -1567,7 +1567,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           opacity: 0.5;
         `:null}
 `,s2=e=>{const t=vt(),r=e.color?re.color(e.color)({theme:t}):void 0,n=re.fontSize(e.size)({theme:t});return b.jsx(Iue,{...e,color:r,size:n,children:e.children})};s2.defaultProps={to:"",color:"linkColor",disabled:!1,size:1,padding:"0",replace:!1};const kue=wr(ot.div)`
-  width: 100%;
+  width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
   align-items: center;
@@ -1579,7 +1579,13 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   font-family: ${re("fonts.primary")};
   padding: 6px 5px 6px 5px;
   margin-bottom: 5px;
-  position: relative;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
 `,Oue=wr(ot.div)`
   width: 4px;
   height: 36px;
@@ -3759,7 +3765,7 @@ function print() { __p += __j.call(arguments, '') }
   border: 1px solid ${re.color("lightGray6")};
   border-radius: 8px;
   margin-bottom: 15px;
-`,fEe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n,innerRef:i,draggableProps:o,dragHandleProps:l})=>{var m,w,C,S;const[u,c]=I.useState((t==null?void 0:t.includes(e.name))??!1),f=I.useMemo(()=>({...o==null?void 0:o.style}),[o]),h=Lj.isObject(e==null?void 0:e.title)&&"props"in e.title&&((m=e.title)==null?void 0:m.props)&&ht._({id:(C=(w=e.title)==null?void 0:w.props)==null?void 0:C.id,message:(S=e.title)==null?void 0:S.props.message}),p=h&&h.toLocaleLowerCase().includes(n.toLocaleLowerCase()),v=I.useCallback(()=>{r(x=>({...x,[e.name]:u?{isHidden:!0}:{}})),c(!u)},[r,u,e.name]);return b.jsxs(dEe,{$isVisible:p,...o,...l,ref:i,style:f,children:[b.jsxs(ot.div,{display:"flex",alignItems:"center",children:[b.jsx(ot.div,{w:"28px",children:b.jsx(Zf,{name:"",variant:"grid",onChange:v,spaceAround:!1,checked:u})}),b.jsx(Dp,{variant:"medium",ml:"8px",children:h})]}),b.jsx(iO,{})]})},hEe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,o]=I.useState(""),l=I.useCallback(c=>{o(c.target.value)},[o]),u=I.useCallback(()=>{o("")},[o]);return b.jsxs(ot.div,{children:[b.jsx(Rl,{icon:"search",type:"text",value:i,placeholder:ht._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:l,onClear:u,variant:"gray"}),b.jsx(NV,{onDragEnd:n,children:b.jsx(q7,{droppableId:"droppable",direction:"vertical",children:c=>b.jsx(ot.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:c.innerRef,...c.droppableProps,children:e==null?void 0:e.map((f,h)=>b.jsx(YV,{draggableId:f.name,index:h,isDragDisabled:!!i,children:(p,v)=>b.jsx(fEe,{column:f,innerRef:p.innerRef,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:i,draggableProps:p.draggableProps,dragHandleProps:p.dragHandleProps},h)},f.name))})})})]})},pEe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,quickFilter:c,floatingButtonProps:f,queryRowsParam:h,customPaginationHandler:p,...v}=e,{gridActions:m,gridSelectors:w,rowsData:C,actionColumnDefinition:S}=v,[x,k]=I.useState(!1),{gridHeight:T,gridRef:P,paginationRef:D}=ipe();I.useEffect(()=>{var Z;if(!h&&T&&T>0){const X=Math.max(Math.floor(T/_6e-2),N6e);X&&((Z=m.setRowsPerPage)==null||Z.call(m,X))}},[T,m,h]);const B=g5e(v),F=I.useMemo(()=>L6e(t),[t]),W=B.columnsDefinitions,{onOpen:G,isOpen:U,onClose:R}=sb(),{columnsConfigValues:j,setColumnsConfigOptions:V,onConfirmForm:$,resetColumnConfig:Y,handleDragEnd:ne,onCloseForm:he,displayColumnsDefinitions:be,manageColumnsFormDefinitions:fe}=v5e({columns:W,gridActions:m,gridSelectors:w,onClose:R});return b.jsxs(hxe,{children:[b.jsxs(pxe,{children:[b.jsx(Pj,{children:b.jsxs(gxe,{className:"buttonsStrip",children:[!u&&b.jsx(Dxe,{extraControlButtons:r,gridActions:m,gridSelectors:w,eshopSelect:n,quickFilter:c,displayColumnsDefinitions:be,filters:F,setDisplayManageColumnButton:k}),x&&b.jsx(vxe,{type:"button",variant:"ghost",appearance:"primary",iconLeft:b.jsx(rO,{}),onClick:G,children:b.jsx(Dp,{variant:"semiBold",mt:0,mb:0,children:b.jsx(vn,{id:"manageColumn.title",message:"Manage column"})})})]})}),b.jsx(mxe,{...v,...B,filters:F,gridRef:P,height:T,floatingButtonProps:f,handleDragEnd:ne(!1),displayColumnsDefinitions:be,hasColouredRows:!0})]}),b.jsx(Pj,{children:b.jsxs(fxe,{ref:D,isFixed:!!T,children:[o&&b.jsx(iEe,{rowsData:C,onBatchAction:i,gridActions:m,gridSelectors:w,actionColumn:S,processCheckedValues:o,processCheckedValuesTitle:l}),b.jsxs(ot.div,{display:"flex",justifyContent:"center",alignItems:"center",className:"paginatorWrapper",w:"100%",h:window.innerWidth>1204?"60px":"32px",children:[b.jsx(oN,{page:w==null?void 0:w.page,itemCount:v==null?void 0:v.totalRowsCount,itemPerPage:(w==null?void 0:w.rowsPerPage)||10,onPageChange:m==null?void 0:m.setPage,customPaginationHandler:p,radius:window.innerWidth<768?3:5,rate:window.innerWidth<768?1:4}),b.jsx(cEe,{gridActions:m,gridSelectors:w,customPaginationHandler:p})]})]})}),U&&b.jsx(ob,{title:b.jsx(vn,{id:"manageColumn.title",message:"Manage columns"}),onClose:he,onCancel:he,onExtraAction:Y,onConfirm:$,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:b.jsx(vn,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:b.jsx(vn,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:b.jsx(vn,{id:"form.buttonConfirm",message:"Confirm"}),children:b.jsx(hEe,{columns:fe,columnsConfigValues:j,setColumnsConfigOptions:V,handleDragEnd:ne(!0)})})]})};var x9={};/**
+`,fEe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n,innerRef:i,draggableProps:o,dragHandleProps:l})=>{var m,w,C,S;const[u,c]=I.useState((t==null?void 0:t.includes(e.name))??!1),f=I.useMemo(()=>({...o==null?void 0:o.style}),[o]),h=Lj.isObject(e==null?void 0:e.title)&&"props"in e.title&&((m=e.title)==null?void 0:m.props)&&ht._({id:(C=(w=e.title)==null?void 0:w.props)==null?void 0:C.id,message:(S=e.title)==null?void 0:S.props.message}),p=h&&h.toLocaleLowerCase().includes(n.toLocaleLowerCase())&&!e.alwaysOn,v=I.useCallback(()=>{r(x=>({...x,[e.name]:u?{isHidden:!0}:{}})),c(!u)},[r,u,e.name]);return b.jsxs(dEe,{$isVisible:p,...o,...l,ref:i,style:f,children:[b.jsxs(ot.div,{display:"flex",alignItems:"center",children:[b.jsx(ot.div,{w:"28px",children:b.jsx(Zf,{name:"",variant:"grid",onChange:v,spaceAround:!1,checked:u})}),b.jsx(Dp,{variant:"medium",ml:"8px",children:h})]}),b.jsx(iO,{})]})},hEe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,o]=I.useState(""),l=I.useCallback(c=>{o(c.target.value)},[o]),u=I.useCallback(()=>{o("")},[o]);return b.jsxs(ot.div,{children:[b.jsx(Rl,{icon:"search",type:"text",value:i,placeholder:ht._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:l,onClear:u,variant:"gray"}),b.jsx(NV,{onDragEnd:n,children:b.jsx(q7,{droppableId:"droppable",direction:"vertical",children:c=>b.jsx(ot.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:c.innerRef,...c.droppableProps,children:e==null?void 0:e.map((f,h)=>b.jsx(YV,{draggableId:f.name,index:h,isDragDisabled:!!i,children:(p,v)=>b.jsx(fEe,{column:f,innerRef:p.innerRef,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:i,draggableProps:p.draggableProps,dragHandleProps:p.dragHandleProps},h)},f.name))})})})]})},pEe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,quickFilter:c,floatingButtonProps:f,queryRowsParam:h,customPaginationHandler:p,...v}=e,{gridActions:m,gridSelectors:w,rowsData:C,actionColumnDefinition:S}=v,[x,k]=I.useState(!1),{gridHeight:T,gridRef:P,paginationRef:D}=ipe();I.useEffect(()=>{var Z;if(!h&&T&&T>0){const X=Math.max(Math.floor(T/_6e-2),N6e);X&&((Z=m.setRowsPerPage)==null||Z.call(m,X))}},[T,m,h]);const B=g5e(v),F=I.useMemo(()=>L6e(t),[t]),W=B.columnsDefinitions,{onOpen:G,isOpen:U,onClose:R}=sb(),{columnsConfigValues:j,setColumnsConfigOptions:V,onConfirmForm:$,resetColumnConfig:Y,handleDragEnd:ne,onCloseForm:he,displayColumnsDefinitions:be,manageColumnsFormDefinitions:fe}=v5e({columns:W,gridActions:m,gridSelectors:w,onClose:R});return b.jsxs(hxe,{children:[b.jsxs(pxe,{children:[b.jsx(Pj,{children:b.jsxs(gxe,{className:"buttonsStrip",children:[!u&&b.jsx(Dxe,{extraControlButtons:r,gridActions:m,gridSelectors:w,eshopSelect:n,quickFilter:c,displayColumnsDefinitions:be,filters:F,setDisplayManageColumnButton:k}),x&&b.jsx(vxe,{type:"button",variant:"ghost",appearance:"primary",iconLeft:b.jsx(rO,{}),onClick:G,children:b.jsx(Dp,{variant:"semiBold",mt:0,mb:0,children:b.jsx(vn,{id:"manageColumn.title",message:"Manage column"})})})]})}),b.jsx(mxe,{...v,...B,filters:F,gridRef:P,height:T,floatingButtonProps:f,handleDragEnd:ne(!1),displayColumnsDefinitions:be,hasColouredRows:!0})]}),b.jsx(Pj,{children:b.jsxs(fxe,{ref:D,isFixed:!!T,children:[o&&b.jsx(iEe,{rowsData:C,onBatchAction:i,gridActions:m,gridSelectors:w,actionColumn:S,processCheckedValues:o,processCheckedValuesTitle:l}),b.jsxs(ot.div,{display:"flex",justifyContent:"center",alignItems:"center",className:"paginatorWrapper",w:"100%",h:window.innerWidth>1204?"60px":"32px",children:[b.jsx(oN,{page:w==null?void 0:w.page,itemCount:v==null?void 0:v.totalRowsCount,itemPerPage:(w==null?void 0:w.rowsPerPage)||10,onPageChange:m==null?void 0:m.setPage,customPaginationHandler:p,radius:window.innerWidth<768?3:5,rate:window.innerWidth<768?1:4}),b.jsx(cEe,{gridActions:m,gridSelectors:w,customPaginationHandler:p})]})]})}),U&&b.jsx(ob,{title:b.jsx(vn,{id:"manageColumn.title",message:"Manage columns"}),onClose:he,onCancel:he,onExtraAction:Y,onConfirm:$,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:b.jsx(vn,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:b.jsx(vn,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:b.jsx(vn,{id:"form.buttonConfirm",message:"Confirm"}),children:b.jsx(hEe,{columns:fe,columnsConfigValues:j,setColumnsConfigOptions:V,handleDragEnd:ne(!0)})})]})};var x9={};/**
  * @license React
  * use-sync-external-store-with-selector.production.min.js
  *