@shipengine/elements 2.7.0 → 2.8.0

package/usePager.js

@@ -1 +1 @@
-import{jsxs as e,jsx as n,Fragment as t}from"@emotion/react/jsx-runtime";import{useRef as i,useLayoutEffect as r,useState as a,useMemo as s,useCallback as o}from"react";import{Icon as c,IconSize as l,Typography as d,Table as g,TableFooter as p,TableHeader as m,TableHeaderRow as h,TableHeaderCell as b,Checkbox as u,TableBody as v,TableRow as O,TableBodyCell as f,Pagination as j,Button as C,ButtonVariant as y,Popover as I}from"@shipengine/giger";import{IconNames as x}from"@shipengine/giger-theme";import{h as w,v as k,a as E}from"./vat.js";import{T as S,c as T,f as A,_ as L}from"./carrier.js";import{G as P,J as z,K as D}from"./actions-menu.js";import{Trans as F,useTranslation as W}from"react-i18next";import{useForm as _}from"react-hook-form";import{useToggle as $}from"react-use";import{z as B}from"zod";const G=w({container:{backgroundColor:"#11003A"},getChildrenStyles:e=>n=>({height:e?"90%":"0",overflow:"scroll"}),getDrawerStyles:e=>n=>({backgroundColor:"#11003A",bottom:0,height:e?"50%":`${n.spacing(6)}px`,minWidth:"375px",position:"fixed",transformOrigin:"bottom",transition:"height 0.5s;"}),header:e=>({alignItems:"center",color:"#fff",display:"flex",height:e.spacing(6),justifyContent:"space-between",padding:e.spacing(1)})}),H=({children:t,headerContent:a,isOpen:s,toggleDrawer:o})=>{const l=i(null);return r((()=>{const e=()=>{const e=l.current;e&&e.parentElement&&(e.style.width=`${e.parentElement.clientWidth}px`)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e("div",Object.assign({"aria-label":"Drawer",css:G.getDrawerStyles(s),ref:l},{children:[e("header",Object.assign({"aria-expanded":s,css:G.header},{children:[n("div",Object.assign({onClick:o,onKeyDown:e=>{"Enter"===e.key&&o()},role:"button",tabIndex:0},{children:n(c,{css:{transform:`rotate(${s?"-90":"90"}deg)`},name:x.PAGINATION_LEFT})})),a]})),n("div",Object.assign({"aria-labelledby":"drawer",css:G.getChildrenStyles(s),role:"region"},{children:t}))]}))},M=w({container:e=>({alignItems:"center",display:"flex",flexDirection:"column",margin:"0 auto",padding:e.spacing(5),rowGap:e.spacing(),textAlign:"center"}),icon:e=>({color:e.palette.error.main}),subtitleContainer:{display:"flex",flexDirection:"column"}}),R=t=>{var{title:i,subtitle:r}=t,a=S(t,["title","subtitle"]);return e("div",Object.assign({css:M.container},a,{children:[n(c,{css:M.icon,name:x.ALERT,size:l.SIZE_LARGE}),n(d,Object.assign({variant:"heading3"},{children:i})),n("div",Object.assign({css:M.subtitleContainer},{children:Array.isArray(r)?r.map((e=>n(d,Object.assign({variant:"body1"},{children:e})))):n(d,Object.assign({variant:"body1"},{children:r}))}))]}))},U=w({getCheckboxHeader:e=>({width:e.spacing(6)}),getFilters:e=>({borderBottom:`1px solid ${e.palette.gray[200]}`,padding:`${e.spacing()}px ${e.spacing(2)}px`}),getTableHeader:e=>({background:e.palette.secondary.ultraLight}),getWrapper:e=>Object.assign({height:"auto"},e.getComponentOverride("Table")),table:{tableLayout:"initial"},tableFooter:{borderTop:"none",justifyContent:"space-between"},tableWrapper:{border:"none"}}),K=({columns:t,data:i,footerContent:r,onRowClick:c,useCheckboxes:l=!1,filters:d,emptyContent:j})=>{var C,y,I;const[x,w]=a(null!==(C=null==i?void 0:i.map((()=>!1)))&&void 0!==C?C:[]),k=s((()=>x.length>0&&x.every((e=>e))),[x]),E=s((()=>x.some((e=>e))),[x]),S=o((e=>{w((n=>{const t=[...n];return t[e]=!t[e],t}))}),[]),T=o((e=>{w((n=>{const t=[...n];for(const n of t.entries())t[n[0]]=e;return t}))}),[]);return e("div",Object.assign({css:U.getWrapper},{children:[d&&n("div",Object.assign({css:U.getFilters},{children:d})),0===i.length&&j?j:n(g,Object.assign({"data-testid":"grid",footer:r&&n(p,Object.assign({css:U.tableFooter},{children:r})),header:n(m,{children:e(h,{children:[l&&n(b,Object.assign({css:U.getCheckboxHeader},{children:n(u,{checked:null!==(y=k||E)&&void 0!==y&&y,indeterminate:null!==(I=!k&&E)&&void 0!==I&&I,onChange:e=>T(e.target.checked)})})),t.map((e=>e.headerContent)).map(((e,t)=>n(b,Object.assign({css:U.getTableHeader},{children:e}),t)))]})}),outerWrapperStyles:U.tableWrapper,tableStyles:U.table},{children:n(v,{children:i.map(((i,r)=>{var a;return e(O,Object.assign({"data-testid":"grid-row",onClick:c?()=>c(i):void 0},{children:[l&&n(f,{children:n(u,{checked:null!==(a=x[r])&&void 0!==a&&a,onChange:()=>S(r)})}),t.filter((e=>e.renderCellContent)).map(((e,t)=>n(f,{children:e.renderCellContent(i)},t)))]}),r)}))})}))]}))},N=({date:e,short:t})=>{const{locale:i}=P();return n(d,Object.assign({component:"span",variant:"body2"},{children:t?T(e,i):A(e,i)}))},X=({page:i,pages:r,pageSize:a,total:s,showPagination:o,onPageChange:c})=>{const l=(i-1)*a+1,g=Math.min(i*a,s);return e(t,{children:[n(d,Object.assign({component:"span",variant:"body2"},{children:n(F,{components:[n("b",{})],count:s,i18nKey:"common:grid.row-count",values:{firstIndex:l,lastIndex:g}})})),o&&n(j,{currentPage:i,onPageChange:c,totalPages:r})]})},Z=w({getButtons:e=>({display:"flex",gap:e.spacing(),justifyContent:"flex-end"}),getLabel:e=>({display:"inline-block",marginBottom:e.spacing(.5)})}),q=B.object({shipmentId:B.string({errorMap:()=>({message:"schemaErrors.requiredShipmentId"})})}),J=({filters:r,onFiltersUpdated:a})=>{const{t:s}=W(["common"]),[o,d]=$(!1),g=i(null),p=_({resolver:k(q)}),m=p.handleSubmit((e=>L(void 0,void 0,void 0,(function*(){d(),a(Object.assign(Object.assign({},r),{shipmentId:Object.assign(Object.assign({},r.shipmentId),{value:e.shipmentId})}))})))),h=()=>{a(Object.assign(Object.assign({},r),{shipmentId:Object.assign(Object.assign({},r.shipmentId),{value:""})}))};return n(t,{children:r.shipmentId.value?e(C,Object.assign({onClick:h,variant:y.TEXT},{children:[n("span",{children:n(F,{i18nKey:"common:grid.shipmentIdFilter",values:{shipmentId:r.shipmentId.value}})}),n(c,{name:x.CLOSE,size:l.SIZE_SMALL})]})):e(t,{children:[e(C,Object.assign({onClick:d,ref:g,variant:y.TEXT},{children:[n("span",{children:s("common:grid.shipmentId")}),n(c,{name:o?x.CARET_TOP:x.CARET_BOTTOM,size:l.SIZE_SMALL})]})),n(I,Object.assign({isOpen:o,onClickAway:d,reference:g.current},{children:e("form",Object.assign({onSubmit:E.capture(m)},{children:[n(z,{"aria-required":"true",control:p.control,hint:s("common:grid.shipmentIdHint"),label:s("common:grid.shipmentId"),labelPosition:"vertical",labelWeight:"bold",name:"shipmentId",placeholder:s("common:grid.search")}),e("div",Object.assign({css:Z.getButtons},{children:[n(C,Object.assign({disabled:!p.watch("shipmentId"),onClick:()=>{h(),d()},variant:y.OUTLINED},{children:s("common:grid.clear")})),n(D,Object.assign({control:p.control,variant:y.OUTLINED},{children:s("common:grid.apply")}))]}))]}))}))]})})},Q=({filters:i,onFiltersUpdated:r,onClearAllFilters:a})=>{const{t:s}=W(["common"]),o=Object.keys(i).some((e=>i[e].value));return e(t,{children:[i.shipmentId.enabled&&n(J,{filters:i,onFiltersUpdated:r}),o&&n(C,Object.assign({onClick:a,variant:y.TEXT},{children:s("grid.clearAll")}))]})},V=(e=10)=>{const[n,t]=a(1),[i,r]=a(e);return{page:n,pagerProps:{currentPage:n,currentPageSize:i,onPageSelect:e=>{t(e)},onPageSizeSelect:e=>{r(e)}},pageSize:i}};export{N as C,H as D,R as E,K as G,X as a,Q as b,V as u};
+import{jsxs as e,jsx as n,Fragment as t}from"@emotion/react/jsx-runtime";import{useRef as a,useLayoutEffect as i,useState as r,useMemo as s,useCallback as o,useEffect as c}from"react";import{Icon as l,IconSize as d,Typography as g,Table as p,TableFooter as m,TableHeader as h,TableHeaderRow as u,TableHeaderCell as b,Checkbox as v,TableBody as O,TableRow as j,TableBodyCell as S,Pagination as f,Button as C,ButtonVariant as A,Popover as T,RadioGroup as D,Radio as y,Input as L,Calendar as I}from"@shipengine/giger";import{IconNames as E}from"@shipengine/giger-theme";import{h as x,v as w,a as k}from"./vat.js";import{T as F,b as R,f as _,_ as B,i as M}from"./carrier.js";import{G as W,J as z,K as P}from"./actions-menu.js";import{Trans as Y,useTranslation as U}from"react-i18next";import{useForm as G}from"react-hook-form";import{useToggle as Z}from"react-use";import{z as N}from"zod";import{subDays as $}from"date-fns/subDays";const H=x({container:{backgroundColor:"#11003A"},getChildrenStyles:e=>n=>({height:e?"90%":"0",overflow:"scroll"}),getDrawerStyles:e=>n=>({backgroundColor:"#11003A",bottom:0,height:e?"50%":`${n.spacing(6)}px`,minWidth:"375px",position:"fixed",transformOrigin:"bottom",transition:"height 0.5s;"}),header:e=>({alignItems:"center",color:"#fff",display:"flex",height:e.spacing(6),justifyContent:"space-between",padding:e.spacing(1)})}),X=({children:t,headerContent:r,isOpen:s,toggleDrawer:o})=>{const c=a(null);return i((()=>{const e=()=>{const e=c.current;e&&e.parentElement&&(e.style.width=`${e.parentElement.clientWidth}px`)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e("div",Object.assign({"aria-label":"Drawer",css:H.getDrawerStyles(s),ref:c},{children:[e("header",Object.assign({"aria-expanded":s,css:H.header},{children:[n("div",Object.assign({onClick:o,onKeyDown:e=>{"Enter"===e.key&&o()},role:"button",tabIndex:0},{children:n(l,{css:{transform:`rotate(${s?"-90":"90"}deg)`},name:E.PAGINATION_LEFT})})),r]})),n("div",Object.assign({"aria-labelledby":"drawer",css:H.getChildrenStyles(s),role:"region"},{children:t}))]}))},K=x({container:e=>({alignItems:"center",display:"flex",flexDirection:"column",margin:"0 auto",padding:e.spacing(5),rowGap:e.spacing(),textAlign:"center"}),icon:e=>({color:e.palette.error.main}),subtitleContainer:{display:"flex",flexDirection:"column"}}),q=t=>{var{title:a,subtitle:i}=t,r=F(t,["title","subtitle"]);return e("div",Object.assign({css:K.container},r,{children:[n(l,{css:K.icon,name:E.ALERT,size:d.SIZE_LARGE}),n(g,Object.assign({variant:"heading3"},{children:a})),n("div",Object.assign({css:K.subtitleContainer},{children:Array.isArray(i)?i.map((e=>n(g,Object.assign({variant:"body1"},{children:e})))):n(g,Object.assign({variant:"body1"},{children:i}))}))]}))},J=x({getCheckboxHeader:e=>({width:e.spacing(6)}),getFilters:e=>({borderBottom:`1px solid ${e.palette.gray[200]}`,padding:`${e.spacing()}px ${e.spacing(2)}px`}),getTableHeader:e=>({background:e.palette.secondary.ultraLight}),getWrapper:e=>Object.assign({height:"auto"},e.getComponentOverride("Table")),table:{tableLayout:"initial"},tableFooter:{borderTop:"none",justifyContent:"space-between"},tableWrapper:{border:"none"}}),V=({columns:t,data:a,footerContent:i,onRowClick:c,useCheckboxes:l=!1,filters:d,emptyContent:g})=>{var f,C,A;const[T,D]=r(null!==(f=null==a?void 0:a.map((()=>!1)))&&void 0!==f?f:[]),y=s((()=>T.length>0&&T.every((e=>e))),[T]),L=s((()=>T.some((e=>e))),[T]),I=o((e=>{D((n=>{const t=[...n];return t[e]=!t[e],t}))}),[]),E=o((e=>{D((n=>{const t=[...n];for(const n of t.entries())t[n[0]]=e;return t}))}),[]);return e("div",Object.assign({css:J.getWrapper},{children:[d&&n("div",Object.assign({css:J.getFilters},{children:d})),0===a.length&&g?g:n(p,Object.assign({"data-testid":"grid",footer:i&&n(m,Object.assign({css:J.tableFooter},{children:i})),header:n(h,{children:e(u,{children:[l&&n(b,Object.assign({css:J.getCheckboxHeader},{children:n(v,{checked:null!==(C=y||L)&&void 0!==C&&C,indeterminate:null!==(A=!y&&L)&&void 0!==A&&A,onChange:e=>E(e.target.checked)})})),t.map((e=>e.headerContent)).map(((e,t)=>n(b,Object.assign({css:J.getTableHeader},{children:e}),t)))]})}),outerWrapperStyles:J.tableWrapper,tableStyles:J.table},{children:n(O,{children:a.map(((a,i)=>{var r;return e(j,Object.assign({"data-testid":"grid-row",onClick:c?()=>c(a):void 0},{children:[l&&n(S,{children:n(v,{checked:null!==(r=T[i])&&void 0!==r&&r,onChange:()=>I(i)})}),t.filter((e=>e.renderCellContent)).map(((e,t)=>n(S,{children:e.renderCellContent(a)},t)))]}),i)}))})}))]}))},Q=({date:e,short:t})=>{const{locale:a}=W();return n(g,Object.assign({component:"span",variant:"body2"},{children:t?R(new Date(e),a):_(e,a)}))},ee=({page:a,pages:i,pageSize:r,total:s,showPagination:o,onPageChange:c})=>{const l=(a-1)*r+1,d=Math.min(a*r,s);return e(t,{children:[n(g,Object.assign({component:"span",variant:"body2"},{children:n(Y,{components:[n("b",{})],count:s,i18nKey:"common:grid.row-count",values:{firstIndex:l,lastIndex:d}})})),o&&n(f,{currentPage:a,onPageChange:c,totalPages:i})]})},ne=N.object({shipmentId:N.string({errorMap:()=>({message:"schemaErrors.requiredShipmentId"})})}),te=x({mainButton:e=>({marginRight:e.spacing()}),popoverButtons:e=>({display:"flex",gap:e.spacing(),justifyContent:"flex-end"})}),ae=({filters:i,onFiltersUpdated:r})=>{const{t:s}=U(["common"]),[o,c]=Z(!1),g=a(null),p=G({resolver:w(ne)}),m=p.handleSubmit((e=>B(void 0,void 0,void 0,(function*(){c(),r(Object.assign(Object.assign({},i),{shipmentId:Object.assign(Object.assign({},i.shipmentId),{value:e.shipmentId})}))})))),h=()=>{r(Object.assign(Object.assign({},i),{shipmentId:Object.assign(Object.assign({},i.shipmentId),{value:""})}))};return n(t,{children:i.shipmentId.value?e(C,Object.assign({css:te.mainButton,onClick:h,variant:A.TEXT},{children:[n("span",{children:n(Y,{i18nKey:"common:grid.shipmentIdFilter",values:{shipmentId:i.shipmentId.value}})}),n(l,{name:E.CLOSE,size:d.SIZE_SMALL})]})):e(t,{children:[e(C,Object.assign({css:te.mainButton,onClick:c,ref:g,variant:A.TEXT},{children:[n("span",{children:s("common:grid.shipmentId")}),n(l,{name:o?E.CARET_TOP:E.CARET_BOTTOM,size:d.SIZE_SMALL})]})),n(T,Object.assign({isOpen:o,onClickAway:c,reference:g.current},{children:e("form",Object.assign({onSubmit:k.capture(m)},{children:[n(z,{"aria-required":"true",control:p.control,hint:s("common:grid.shipmentIdHint"),label:s("common:grid.shipmentId"),labelPosition:"vertical",labelWeight:"bold",name:"shipmentId",placeholder:s("common:grid.search")}),e("div",Object.assign({css:te.popoverButtons},{children:[n(C,Object.assign({disabled:!p.watch("shipmentId"),onClick:()=>{h(),c()},variant:A.OUTLINED},{children:s("common:grid.clear")})),n(P,Object.assign({control:p.control,variant:A.OUTLINED},{children:s("common:grid.apply")}))]}))]}))}))]})})},ie=x({calendarContainer:e=>({border:`1px solid ${e.palette.gray[200]}`,borderRadius:e.borderRadius.M}),calendarFooterButtons:e=>({alignSelf:"flex-end",marginTop:e.spacing()}),clearButton:e=>({marginRight:e.spacing()}),input:()=>({width:"calc((278px - 6px) / 2)"}),inputsArrow:e=>({marginLeft:e.spacing(),marginRight:e.spacing()}),inputsWrapper:e=>({alignItems:"center",display:"flex",marginBottom:e.spacing()}),mainButton:e=>({marginRight:e.spacing()}),popover:()=>({maxWidth:"initial"}),popoverCalendarWrapper:()=>({display:"flex",flexDirection:"column"}),popoverWrapper:()=>({display:"flex"}),radioGroup:e=>({marginRight:e.spacing(4)})});var re;!function(e){e.TODAY="today",e.LAST7DAYS="last_7",e.LAST30DAYS="last_30",e.LAST365DAYS="last_365",e.CUSTOM="custom"}(re||(re={}));const se={[re.LAST7DAYS]:7,[re.LAST30DAYS]:30,[re.LAST365DAYS]:365},oe=e=>{const n=new Date;return[re.LAST30DAYS,re.LAST7DAYS,re.LAST365DAYS].includes(e)?{end:n,start:$(n,se[e])}:{end:n,start:n}},ce=({filters:i,onFiltersUpdated:s})=>{var o;const{t:g}=U(["common"]),{locale:p}=W(),m=a(null),[h,u]=Z(!1),[b,v]=r(!1),[O,j]=r(null),[S,f]=r(null),[x,w]=r();return c((()=>{var e;(null===(e=i.createdDate)||void 0===e?void 0:e.value)||w(void 0)}),[i.createdDate]),(null===(o=i.createdDate)||void 0===o?void 0:o.value)?e(C,Object.assign({css:ie.mainButton,onClick:()=>{w(void 0),s(Object.assign(Object.assign({},i),{createdDate:{enabled:!0,value:null}}))},variant:A.TEXT},{children:[n("span",{children:g("common:grid.createdDateFilter",{createdDateEnd:R(i.createdDate.value.end,p),createdDateStart:R(i.createdDate.value.start,p),interpolation:{escapeValue:!1}})}),n(l,{name:E.CLOSE,size:d.SIZE_SMALL})]})):e(t,{children:[e(C,Object.assign({css:ie.mainButton,onClick:()=>{u(),w(void 0),j(null),f(null),v(!1)},ref:m,variant:A.TEXT},{children:[n("span",{children:g("common:grid.createdDate")}),n(l,{name:h?E.CARET_TOP:E.CARET_BOTTOM,size:d.SIZE_SMALL})]})),n(T,Object.assign({css:ie.popover,isOpen:h,onClickAway:u,reference:m.current},{children:e("section",Object.assign({css:ie.popoverWrapper},{children:[e(D,Object.assign({css:ie.radioGroup,name:"dateFilter",onChange:({target:{value:e}})=>{w(e),e!==re.CUSTOM?(v(!1),s(Object.assign(Object.assign({},i),{createdDate:{enabled:!0,value:oe(e)}}))):v(!0)},value:x},{children:[n(y,Object.assign({value:re.TODAY},{children:g("common:grid.dateFilterToday")})),n(y,Object.assign({value:re.LAST7DAYS},{children:g("common:grid.dateFilterLast7Days")})),n(y,Object.assign({value:re.LAST30DAYS},{children:g("common:grid.dateFilterLast30Days")})),n(y,Object.assign({value:re.LAST365DAYS},{children:g("common:grid.dateFilterLast12Months")})),n(y,Object.assign({value:re.CUSTOM},{children:g("common:grid.dateFilterCustom")}))]})),b&&e("section",Object.assign({css:ie.popoverCalendarWrapper},{children:[e("div",Object.assign({css:ie.inputsWrapper},{children:[n(L,{css:ie.input,readOnly:!0,rightContent:n(l,{name:E.CALENDAR,size:d.SIZE_SMALL}),value:O?R(O,p):void 0}),n(l,{css:ie.inputsArrow,name:E.ARROW_RIGHT,size:d.SIZE_SMALL}),n(L,{css:ie.input,readOnly:!0,rightContent:n(l,{name:E.CALENDAR,size:d.SIZE_SMALL}),value:S?R(S,p):void 0})]})),n(I,{containerStyles:ie.calendarContainer,endDate:S,filterDate:e=>!M(e),onChange:e=>{const[n,t]=e;j(n),f(t)},selected:O,selectsRange:!0,startDate:O,withBorder:!1}),e("div",Object.assign({css:ie.calendarFooterButtons},{children:[n(C,Object.assign({css:ie.clearButton,onClick:()=>{j(null),f(null)},variant:A.OUTLINED},{children:g("common:grid.clear")})),n(C,Object.assign({disabled:!O||!S,onClick:()=>{S&&O&&s(Object.assign(Object.assign({},i),{createdDate:{enabled:!0,value:{end:S,start:O}}}))}},{children:g("common:grid.apply")}))]}))]}))]}))}))]})},le=({filters:t,onFiltersUpdated:a,onClearAllFilters:i})=>{var r;const{t:s}=U(["common"]),o=Object.keys(t).some((e=>{const n=t[e];return null==n?void 0:n.value}));return e("section",{children:[t.shipmentId.enabled&&n(ae,{filters:t,onFiltersUpdated:a}),(null===(r=t.createdDate)||void 0===r?void 0:r.enabled)&&n(ce,{filters:t,onFiltersUpdated:a}),o&&n(C,Object.assign({onClick:i,variant:A.TEXT},{children:s("grid.clearAll")}))]})},de=(e=10)=>{const[n,t]=r(1),[a,i]=r(e);return{page:n,pagerProps:{currentPage:n,currentPageSize:a,onPageSelect:e=>{t(e)},onPageSizeSelect:e=>{i(e)}},pageSize:a}};export{Q as C,X as D,q as E,V as G,ee as a,le as b,de as u};