dinocollab-core 2.1.47 → 2.1.48

package/dist/src/components/breadcrumbs.js

@@ -1,2 +1,2 @@
-import{objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{styled as t,Box as n,Breadcrumbs as i,Typography as l}from"@mui/material";import a from"@mui/icons-material/ArrowBackIos";var c=function(t){var n,c=null!==(n=t.value)&&void 0!==n?n:[];return o(i,{children:c.map(function(t,n){var i,c,p=!!t.onClick||!!t.url;return e(u,r(r({},null!==(c=(i=t).props)&&void 0!==c?c:i.url?{component:"a",href:i.url}:{}),{},{onClick:t.onClick?function(r){return function(r,o){r.preventDefault(),r.stopPropagation(),o.onClick&&o.onClick(r)}(r,t)}:void 0,className:p?"clickable":"",children:[n<1&&o(a,{fontSize:"small"}),o(l,{variant:"subtitle1",noWrap:!0,children:o("span",{children:t.label})})]}),"key"+n)})})},u=t(n)(function(r){var o=r.theme;return{display:"flex",alignItems:"center",color:"var(--color-title, ".concat(o.palette.text.primary,")"),".MuiTypography-root":{color:"currentColor",fontWeight:600},".MuiSvgIcon-root":{color:"currentColor",fontSize:o.typography.pxToRem(16),marginRight:o.spacing(.5)},"&[href]":{textDecoration:"none",cursor:"pointer","&:hover":{textDecoration:"underline",color:"var(--color-title-hover, ".concat(o.palette.primary.main,")")}}}});export{c as Breadcrumbs,c as default};
+import{objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{styled as t,Box as n,Breadcrumbs as i,Typography as l}from"@mui/material";import a from"@mui/icons-material/ArrowBackIos";var c=function(t){var n,c=null!==(n=t.value)&&void 0!==n?n:[];return o(i,{sx:t.sx,children:c.map(function(t,n){var i,c,p=!!t.onClick||!!t.url;return e(u,r(r({},null!==(c=(i=t).props)&&void 0!==c?c:i.url?{component:"a",href:i.url}:{}),{},{onClick:t.onClick?function(r){return function(r,o){r.preventDefault(),r.stopPropagation(),o.onClick&&o.onClick(r)}(r,t)}:void 0,className:p?"clickable":"",children:[n<1&&o(a,{fontSize:"small"}),o(l,{variant:"subtitle1",noWrap:!0,children:o("span",{children:t.label})})]}),"key"+n)})})},u=t(n)(function(r){var o=r.theme;return{display:"flex",alignItems:"center",color:"var(--color-title, ".concat(o.palette.text.primary,")"),".MuiTypography-root":{color:"currentColor",fontWeight:600},".MuiSvgIcon-root":{color:"currentColor",fontSize:o.typography.pxToRem(16),marginRight:o.spacing(.5)},"&[href]":{textDecoration:"none",cursor:"pointer","&:hover":{textDecoration:"underline",color:"var(--color-title-hover, ".concat(o.palette.primary.main,")")}}}});export{c as Breadcrumbs,c as default};
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/src/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../src/components/breadcrumbs.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Box, Breadcrumbs as MUIBreadcrumbs, styled, Typography, TypographyProps } from '@mui/material'\r\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'\r\n\r\nexport interface IBreadcrumbConfig {\r\n  label: string\r\n  url?: string\r\n  props?: TypographyProps & { [key: string]: any }\r\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\r\n}\r\n\r\nexport interface IBreadcrumbsProps {\r\n  value?: IBreadcrumbConfig[]\r\n}\r\n\r\nexport const Breadcrumbs: FC<IBreadcrumbsProps> = (props) => {\r\n  const list = props.value ?? []\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, x: IBreadcrumbConfig) => {\r\n    e.preventDefault()\r\n    e.stopPropagation()\r\n    x.onClick && x.onClick(e)\r\n  }\r\n\r\n  const getItemProps = (item: IBreadcrumbConfig): TypographyProps => {\r\n    return item.props ?? (item.url ? ({ component: 'a', href: item.url } as TypographyProps) : {})\r\n  }\r\n\r\n  return (\r\n    <MUIBreadcrumbs>\r\n      {list.map((x, i) => {\r\n        const isClick = !!x.onClick || !!x.url\r\n        return (\r\n          <WrapTypography\r\n            key={'key' + i}\r\n            {...getItemProps(x)}\r\n            onClick={x.onClick ? (e: any) => handleClick(e, x) : undefined}\r\n            className={isClick ? 'clickable' : ''}\r\n          >\r\n            {i < 1 && <ArrowBackIosIcon fontSize='small' />}\r\n            <Typography variant='subtitle1' noWrap>\r\n              <span>{x.label}</span>\r\n            </Typography>\r\n          </WrapTypography>\r\n        )\r\n      })}\r\n    </MUIBreadcrumbs>\r\n  )\r\n}\r\nexport default Breadcrumbs\r\n\r\nconst WrapTypography = styled(Box)(({ theme }) => ({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  color: `var(--color-title, ${theme.palette.text.primary})`,\r\n  '.MuiTypography-root': {\r\n    color: 'currentColor',\r\n    fontWeight: 600\r\n  },\r\n  '.MuiSvgIcon-root': {\r\n    color: 'currentColor',\r\n    fontSize: theme.typography.pxToRem(16),\r\n    marginRight: theme.spacing(0.5)\r\n  },\r\n  '&[href]': {\r\n    textDecoration: 'none',\r\n    cursor: 'pointer',\r\n    '&:hover': {\r\n      textDecoration: 'underline',\r\n      color: `var(--color-title-hover, ${theme.palette.primary.main})`\r\n    }\r\n  }\r\n}))\r\n"],"names":["Breadcrumbs","props","_props$value","list","value","_jsx","MUIBreadcrumbs","children","map","x","i","item","_item$props","isClick","onClick","url","_jsxs","WrapTypography","_objectSpread","getItemProps","component","href","e","preventDefault","stopPropagation","handleClick","undefined","className","ArrowBackIosIcon","fontSize","Typography","variant","noWrap","label","styled","Box","_ref","theme","display","alignItems","color","concat","palette","text","primary","fontWeight","typography","pxToRem","marginRight","spacing","textDecoration","cursor","main"],"mappings":"mQAeaA,EAAqC,SAACC,GAAS,IAAAC,EACpDC,EAAkB,QAAdD,EAAGD,EAAMG,aAAK,IAAAF,EAAAA,EAAI,GAY5B,OACEG,EAACC,EAAc,CAAAC,SACZJ,EAAKK,IAAI,SAACC,EAAGC,GACZ,IAPgBC,EAA4CC,EAOtDC,IAAYJ,EAAEK,WAAaL,EAAEM,IACnC,OACEC,EAACC,EAAcC,EAAAA,EAETC,CAAAA,EAVK,QAAjBP,GADoBD,EAWKF,GAVbR,aAAK,IAAAW,EAAAA,EAAKD,EAAKI,IAAO,CAAEK,UAAW,IAAKC,KAAMV,EAAKI,KAA4B,CAAE,GAUlE,GAAA,CACnBD,QAASL,EAAEK,QAAU,SAACQ,GAAM,OAlBlB,SAACA,EAAiDb,GACpEa,EAAEC,iBACFD,EAAEE,kBACFf,EAAEK,SAAWL,EAAEK,QAAQQ,EACxB,CAc0CG,CAAYH,EAAGb,EAAE,OAAGiB,EACrDC,UAAWd,EAAU,YAAc,GAElCN,SAAA,CAAAG,EAAI,GAAKL,EAACuB,GAAiBC,SAAS,UACrCxB,EAACyB,EAAW,CAAAC,QAAQ,YAAYC,QAAM,EAAAzB,SACpCF,mBAAOI,EAAEwB,aAPN,MAAQvB,EAWlB,IAGP,EAGMO,EAAiBiB,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACjDC,QAAS,OACTC,WAAY,SACZC,MAAK,sBAAAC,OAAwBJ,EAAMK,QAAQC,KAAKC,QAAU,KAC1D,sBAAuB,CACrBJ,MAAO,eACPK,WAAY,KAEd,mBAAoB,CAClBL,MAAO,eACPX,SAAUQ,EAAMS,WAAWC,QAAQ,IACnCC,YAAaX,EAAMY,QAAQ,KAE7B,UAAW,CACTC,eAAgB,OAChBC,OAAQ,UACR,UAAW,CACTD,eAAgB,YAChBV,MAAK,4BAAAC,OAA8BJ,EAAMK,QAAQE,QAAQQ,KAAI,OAGlE"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../src/components/breadcrumbs.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Box, Breadcrumbs as MUIBreadcrumbs, styled, SxProps, Theme, Typography, TypographyProps } from '@mui/material'\r\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'\r\n\r\nexport interface IBreadcrumbConfig {\r\n  label: string\r\n  url?: string\r\n  props?: TypographyProps & { [key: string]: any }\r\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\r\n}\r\n\r\nexport interface IBreadcrumbsProps {\r\n  value?: IBreadcrumbConfig[]\r\n  sx?: SxProps<Theme>\r\n}\r\n\r\nexport const Breadcrumbs: FC<IBreadcrumbsProps> = (props) => {\r\n  const list = props.value ?? []\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, x: IBreadcrumbConfig) => {\r\n    e.preventDefault()\r\n    e.stopPropagation()\r\n    x.onClick && x.onClick(e)\r\n  }\r\n\r\n  const getItemProps = (item: IBreadcrumbConfig): TypographyProps => {\r\n    return item.props ?? (item.url ? ({ component: 'a', href: item.url } as TypographyProps) : {})\r\n  }\r\n\r\n  return (\r\n    <MUIBreadcrumbs sx={props.sx}>\r\n      {list.map((x, i) => {\r\n        const isClick = !!x.onClick || !!x.url\r\n        return (\r\n          <WrapTypography\r\n            key={'key' + i}\r\n            {...getItemProps(x)}\r\n            onClick={x.onClick ? (e: any) => handleClick(e, x) : undefined}\r\n            className={isClick ? 'clickable' : ''}\r\n          >\r\n            {i < 1 && <ArrowBackIosIcon fontSize='small' />}\r\n            <Typography variant='subtitle1' noWrap>\r\n              <span>{x.label}</span>\r\n            </Typography>\r\n          </WrapTypography>\r\n        )\r\n      })}\r\n    </MUIBreadcrumbs>\r\n  )\r\n}\r\nexport default Breadcrumbs\r\n\r\nconst WrapTypography = styled(Box)(({ theme }) => ({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  color: `var(--color-title, ${theme.palette.text.primary})`,\r\n  '.MuiTypography-root': {\r\n    color: 'currentColor',\r\n    fontWeight: 600\r\n  },\r\n  '.MuiSvgIcon-root': {\r\n    color: 'currentColor',\r\n    fontSize: theme.typography.pxToRem(16),\r\n    marginRight: theme.spacing(0.5)\r\n  },\r\n  '&[href]': {\r\n    textDecoration: 'none',\r\n    cursor: 'pointer',\r\n    '&:hover': {\r\n      textDecoration: 'underline',\r\n      color: `var(--color-title-hover, ${theme.palette.primary.main})`\r\n    }\r\n  }\r\n}))\r\n"],"names":["Breadcrumbs","props","_props$value","list","value","_jsx","MUIBreadcrumbs","sx","map","x","i","item","_item$props","isClick","onClick","url","_jsxs","WrapTypography","_objectSpread","getItemProps","component","href","e","preventDefault","stopPropagation","handleClick","undefined","className","children","ArrowBackIosIcon","fontSize","Typography","variant","noWrap","label","styled","Box","_ref","theme","display","alignItems","color","concat","palette","text","primary","fontWeight","typography","pxToRem","marginRight","spacing","textDecoration","cursor","main"],"mappings":"mQAgBaA,EAAqC,SAACC,GAAS,IAAAC,EACpDC,EAAkB,QAAdD,EAAGD,EAAMG,aAAK,IAAAF,EAAAA,EAAI,GAY5B,OACEG,EAACC,GAAeC,GAAIN,EAAMM,YACvBJ,EAAKK,IAAI,SAACC,EAAGC,GACZ,IAPgBC,EAA4CC,EAOtDC,IAAYJ,EAAEK,WAAaL,EAAEM,IACnC,OACEC,EAACC,EAAcC,EAAAA,EAETC,CAAAA,EAVK,QAAjBP,GADoBD,EAWKF,GAVbR,aAAK,IAAAW,EAAAA,EAAKD,EAAKI,IAAO,CAAEK,UAAW,IAAKC,KAAMV,EAAKI,KAA4B,CAAE,GAUlE,GAAA,CACnBD,QAASL,EAAEK,QAAU,SAACQ,GAAM,OAlBlB,SAACA,EAAiDb,GACpEa,EAAEC,iBACFD,EAAEE,kBACFf,EAAEK,SAAWL,EAAEK,QAAQQ,EACxB,CAc0CG,CAAYH,EAAGb,EAAE,OAAGiB,EACrDC,UAAWd,EAAU,YAAc,GAElCe,SAAA,CAAAlB,EAAI,GAAKL,EAACwB,GAAiBC,SAAS,UACrCzB,EAAC0B,EAAW,CAAAC,QAAQ,YAAYC,QAAM,EAAAL,SACpCvB,mBAAOI,EAAEyB,aAPN,MAAQxB,EAWlB,IAGP,EAGMO,EAAiBkB,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACjDC,QAAS,OACTC,WAAY,SACZC,MAAK,sBAAAC,OAAwBJ,EAAMK,QAAQC,KAAKC,QAAU,KAC1D,sBAAuB,CACrBJ,MAAO,eACPK,WAAY,KAEd,mBAAoB,CAClBL,MAAO,eACPX,SAAUQ,EAAMS,WAAWC,QAAQ,IACnCC,YAAaX,EAAMY,QAAQ,KAE7B,UAAW,CACTC,eAAgB,OAChBC,OAAQ,UACR,UAAW,CACTD,eAAgB,YAChBV,MAAK,4BAAAC,OAA8BJ,EAAMK,QAAQE,QAAQQ,KAAI,OAGlE"}

package/dist/src/data-view/create.data-view.js

@@ -1,2 +1,2 @@
-import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as n,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{styled as u,Box as v,Stack as f}from"@mui/material";import{SortButton as p}from"./ui.units.js";import{createViewMode as g}from"./create.view-mode.js";import{defaultViewMode as h,ViewModeButtons as c}from"./view-mode.units.js";import{getViewModeFromURL as C,syncViewModeToURL as m}from"./query-param-url.js";import{defaultFilterBarState as w,DataViewContext as S}from"./context.js";import{createFilterBar as y}from"./create.filter-bar.js";import M from"./scroll-tracking.js";import{createPaginationBar as B}from"./create.pagination-bar.js";import{createPopperPanel as H}from"./create.popper-panel.js";import P from"./create.active-filters-panel.js";function b(u){var b=y(),k=H(),F=P(),V=g(u.viewMode),T=B();return function(){function g(e){var i;return o(this,g),i=n(this,g,[e]),l(i,"mergeConfig",function(e){var t,o,n,l,r=e.slots;i.configCache={filterBar:Object.assign({},u.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},u.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(t=null!==(o=null==r||null===(n=r.paginationBarConfigs)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==o?o:null===(l=u.paginationBar)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==t&&t,scrollTracking:Object.assign({},u.scrollTracking,null==r?void 0:r.scrollTracking),autoHeight:e.autoHeight||u.autoHeight||!1}}),l(i,"configCache",{}),l(i,"refFilterButton",null),l(i,"refSortButton",null),l(i,"renderFooter",function(){var e,o,n,l,a=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return r(j,t(t({},a.wrapProps),{},{children:!1!==a.enablePagination&&r(T,t({count:null!==(o=null===(n=i.props.data)||void 0===n?void 0:n.totalItems)&&void 0!==o?o:0,defaultFilter:null===(l=i.internalConfig.filterBar)||void 0===l?void 0:l.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))}),l(i,"onViewModeChangeHandler",function(e){i.setState({viewMode:e},function(){var t,o;if(i.props.syncViewModeToURL){var n,l,r,a,s=null!==(n=null!==(l=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==l?l:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==n?n:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)})}),l(i,"onKeywordChangeHandler",function(e){return i.setState({keyword:e})}),l(i,"onScrollChangeHandler",function(e){return i.setState({scrolled:e.isScrolled})}),l(i,"onPopperPanelChangeHandler",function(e,t){return i.setState({anchorEl:e,area:t})}),l(i,"onClearHandler",function(){return i.setState(w)}),l(i,"onPanelCloseHandler",function(){i.setState({anchorEl:null,area:void 0,keyword:""})}),l(i,"onFilterStateChangeHandler",function(e){i.props.filter||i.setState(t(t({},w),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(w)}),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(g,d),i(g,[{key:"getDefaultState",value:function(e){var i,o,n,l,r,a,s=null!==(i=null!==(o=null===(n=e.slots)||void 0===n||null===(n=n.viewModeConfigs)||void 0===n?void 0:n.defaultValue)&&void 0!==o?o:null===(l=u.viewMode)||void 0===l?void 0:l.defaultValue)&&void 0!==i?i:h,d=e.syncViewModeToURL?C({defaultViewMode:s}):s;return t(t({},w),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,t,o,n,l=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(t=this.props.slots)||void 0===t?void 0:t.filterBarConfigs),r=JSON.stringify(null===(o=e.slots)||void 0===o?void 0:o.viewModeConfigs)!==JSON.stringify(null===(n=this.props.slots)||void 0===n?void 0:n.viewModeConfigs);return(l||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,n,l,d,u,g,h,C,m,w,y,B,H,P,j,I={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(S.Provider,{value:I,children:a(f,{sx:{height:"100%",flex:1},children:[(null===(i=this.internalConfig.filterBar)||void 0===i?void 0:i.enableSticky)&&r(M,t({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(o=this.props.slots)||void 0===o||null===(o=o.filterSlots)||void 0===o?void 0:o.above,r(b,{id:null===(n=this.internalConfig.scrollTracking)||void 0===n?void 0:n.elementId,slots:t(t({},null===(l=this.props.slots)||void 0===l?void 0:l.primaryInputSlots),{},{right:a(s,{children:[(null===(d=this.internalConfig.filterBar)||void 0===d?void 0:d.enableSort)&&r(p,{}),null===(u=this.props.slots)||void 0===u||null===(u=u.primaryInputSlots)||void 0===u?void 0:u.right]})}),children:r(k,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(h=this.props.slots)||void 0===h||null===(h=h.activeFiltersPanelSlots)||void 0===h?void 0:h.above,a(x,{children:[r(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,a(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[r(F,{loading:this.props.loading}),r(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&r(T,t({count:null!==(m=null===(w=this.props.data)||void 0===w?void 0:w.totalItems)&&void 0!==m?m:0,defaultFilter:null===(y=this.internalConfig.filterBar)||void 0===y?void 0:y.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(B=this.props.slots)||void 0===B||null===(B=B.activeFiltersPanelSlots)||void 0===B?void 0:B.right]}),null===(H=this.props.slots)||void 0===H||null===(H=H.activeFiltersPanelSlots)||void 0===H?void 0:H.below,r(V,{data:null!==(P=null===(j=this.props.data)||void 0===j?void 0:j.items)&&void 0!==P?P:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,autoHeight:this.internalConfig.autoHeight,slots:this.internalConfig.viewMode}),this.renderFooter()]})})}}])}()}var x=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),j=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{b as default};
+import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as l,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{styled as u,Box as v,Stack as f}from"@mui/material";import{SortButton as p}from"./ui.units.js";import{createViewMode as g}from"./create.view-mode.js";import{defaultViewMode as h,ViewModeButtons as c}from"./view-mode.units.js";import{getViewModeFromURL as C,syncViewModeToURL as m}from"./query-param-url.js";import{defaultFilterBarState as w,DataViewContext as S}from"./context.js";import{createFilterBar as y}from"./create.filter-bar.js";import M from"./scroll-tracking.js";import{createPaginationBar as B}from"./create.pagination-bar.js";import{createPopperPanel as H}from"./create.popper-panel.js";import P from"./create.active-filters-panel.js";function b(u){var b=y(),k=H(),F=P(),V=g(u.viewMode),T=B();return function(){function g(e){var i;return o(this,g),i=l(this,g,[e]),n(i,"mergeConfig",function(e){var t,o,l,n,r=e.slots;i.configCache={filterBar:Object.assign({},u.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},u.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(t=null!==(o=null==r||null===(l=r.paginationBarConfigs)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==o?o:null===(n=u.paginationBar)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==t&&t,scrollTracking:Object.assign({},u.scrollTracking,null==r?void 0:r.scrollTracking),autoHeight:e.autoHeight||u.autoHeight||!1}}),n(i,"configCache",{}),n(i,"refFilterButton",null),n(i,"refSortButton",null),n(i,"renderFooter",function(){var e,o,l,n,a=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return r(j,t(t({},a.wrapProps),{},{children:!1!==a.enablePagination&&r(T,t({count:null!==(o=null===(l=i.props.data)||void 0===l?void 0:l.totalItems)&&void 0!==o?o:0,defaultFilter:null===(n=i.internalConfig.filterBar)||void 0===n?void 0:n.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))}),n(i,"onViewModeChangeHandler",function(e){i.setState({viewMode:e},function(){var t,o;if(i.props.syncViewModeToURL){var l,n,r,a,s=null!==(l=null!==(n=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==n?n:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==l?l:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)})}),n(i,"onKeywordChangeHandler",function(e){return i.setState({keyword:e})}),n(i,"onScrollChangeHandler",function(e){return i.setState({scrolled:e.isScrolled})}),n(i,"onPopperPanelChangeHandler",function(e,t){return i.setState({anchorEl:e,area:t})}),n(i,"onClearHandler",function(){return i.setState(w)}),n(i,"onPanelCloseHandler",function(){i.setState({anchorEl:null,area:void 0,keyword:""})}),n(i,"onFilterStateChangeHandler",function(e){i.props.filter||i.setState(t(t({},w),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(w)}),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(g,d),i(g,[{key:"getDefaultState",value:function(e){var i,o,l,n,r,a,s=null!==(i=null!==(o=null===(l=e.slots)||void 0===l||null===(l=l.viewModeConfigs)||void 0===l?void 0:l.defaultValue)&&void 0!==o?o:null===(n=u.viewMode)||void 0===n?void 0:n.defaultValue)&&void 0!==i?i:h,d=e.syncViewModeToURL?C({defaultViewMode:s}):s;return t(t({},w),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,t,o,l,n=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(t=this.props.slots)||void 0===t?void 0:t.filterBarConfigs),r=JSON.stringify(null===(o=e.slots)||void 0===o?void 0:o.viewModeConfigs)!==JSON.stringify(null===(l=this.props.slots)||void 0===l?void 0:l.viewModeConfigs);return(n||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,l,n,d,u,g,h,C,m,w,y,B,H,P,j,I,O={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(S.Provider,{value:O,children:a(f,{sx:{height:"100%",flex:1},children:[null===(i=this.props.slots)||void 0===i?void 0:i.title,(null===(o=this.internalConfig.filterBar)||void 0===o?void 0:o.enableSticky)&&r(M,t({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(l=this.props.slots)||void 0===l||null===(l=l.filterSlots)||void 0===l?void 0:l.above,r(b,{id:null===(n=this.internalConfig.scrollTracking)||void 0===n?void 0:n.elementId,slots:t(t({},null===(d=this.props.slots)||void 0===d?void 0:d.primaryInputSlots),{},{right:a(s,{children:[(null===(u=this.internalConfig.filterBar)||void 0===u?void 0:u.enableSort)&&r(p,{}),null===(g=this.props.slots)||void 0===g||null===(g=g.primaryInputSlots)||void 0===g?void 0:g.right]})}),children:r(k,{})}),null===(h=this.props.slots)||void 0===h||null===(h=h.filterSlots)||void 0===h?void 0:h.below,null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.above,a(x,{children:[r(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(m=this.props.slots)||void 0===m||null===(m=m.activeFiltersPanelSlots)||void 0===m?void 0:m.left,a(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[r(F,{loading:this.props.loading}),r(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&r(T,t({count:null!==(w=null===(y=this.props.data)||void 0===y?void 0:y.totalItems)&&void 0!==w?w:0,defaultFilter:null===(B=this.internalConfig.filterBar)||void 0===B?void 0:B.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(H=this.props.slots)||void 0===H||null===(H=H.activeFiltersPanelSlots)||void 0===H?void 0:H.right]}),null===(P=this.props.slots)||void 0===P||null===(P=P.activeFiltersPanelSlots)||void 0===P?void 0:P.below,r(V,{data:null!==(j=null===(I=this.props.data)||void 0===I?void 0:I.items)&&void 0!==j?j:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,autoHeight:this.internalConfig.autoHeight,slots:this.internalConfig.viewMode}),this.renderFooter()]})})}}])}()}var x=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),j=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{b as default};
 //# sourceMappingURL=create.data-view.js.map

package/dist/src/data-view/create.data-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  autoHeight?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  autoHeight?: boolean\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking),\r\n        autoHeight: currentProps.autoHeight || configs.autoHeight || false\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          <Stack sx={{ height: '100%', flex: 1 }}>\r\n            {this.internalConfig.filterBar?.enableSticky && (\r\n              <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n            )}\r\n            {this.props.slots?.filterSlots?.above}\r\n            <FilterBarInstance\r\n              id={this.internalConfig.scrollTracking?.elementId}\r\n              slots={{\r\n                ...this.props.slots?.primaryInputSlots,\r\n                right: (\r\n                  <>\r\n                    {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                    {this.props.slots?.primaryInputSlots?.right}\r\n                  </>\r\n                )\r\n              }}\r\n            >\r\n              <PopperPanelInstance />\r\n            </FilterBarInstance>\r\n            {this.props.slots?.filterSlots?.below}\r\n            {this.props.slots?.activeFiltersPanelSlots?.above}\r\n            <FilterBarPanel>\r\n              <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n              {this.props.slots?.activeFiltersPanelSlots?.left}\r\n              <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n                <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n                  {this.internalConfig.enablePaginationTop && (\r\n                    <PaginationBarInstance\r\n                      count={this.props.data?.totalItems ?? 0}\r\n                      defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                      filter={this.filterState}\r\n                      onChange={this.onFilterStateChangeHandler}\r\n                      {...this.internalConfig.paginationBar}\r\n                    />\r\n                  )}\r\n                </Box>\r\n              </Stack>\r\n              {this.props.slots?.activeFiltersPanelSlots?.right}\r\n            </FilterBarPanel>\r\n            {this.props.slots?.activeFiltersPanelSlots?.below}\r\n            <ViewModeInstance\r\n              data={this.props.data?.items ?? []}\r\n              viewMode={this.viewMode}\r\n              loading={this.props.loading}\r\n              error={this.props.error}\r\n              autoHeight={this.internalConfig.autoHeight}\r\n              slots={this.internalConfig.viewMode}\r\n            />\r\n            {this.renderFooter()}\r\n          </Stack>\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      return (\r\n        <FooterWrap {...temp.wrapProps}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </FooterWrap>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  flexWrap: 'wrap',\r\n  gap: '8px',\r\n  marginBottom: '8px',\r\n  minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n  display: 'flex',\r\n  justifyContent: 'flex-end',\r\n  width: '100%'\r\n})\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","autoHeight","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$internalConfig$8","_this$props$slots5","_this$internalConfig$9","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","DataViewContext","Provider","_jsxs","Stack","sx","height","flex","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","flexDirection","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"m5BAqEA,SAASA,EAA8CC,GACrD,IAAMC,EAAoBC,IACpBC,EAAsBC,IACtBC,EAA6BC,IAC7BC,EAAmBC,EAAkBR,EAAQS,UAC7CC,EAAwBC,IA4K9B,kBAzKE,SAAAC,EAAYC,GAAwB,IAAAC,EAGM,OAHNC,OAAAH,GAClCE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EAuBQ,cAAA,SAACI,GAAmC,IAAAC,EAAAC,EAAAC,EAAAC,EAChDC,EAAUL,EAAVK,MACRT,EAAKU,YAAc,CACjBC,UAAWC,OAAOC,OAAO,CAAE,EAAE3B,EAAQyB,UAAWF,eAAAA,EAAOK,kBACvDnB,SAAUc,aAAAA,EAAAA,EAAOM,gBACjBC,cAAeJ,OAAOC,OAAO,CAAE,EAAE3B,EAAQ8B,cAAeP,eAAAA,EAAOQ,sBAC/DC,oBAAmH,QAAhGb,EAAkDC,QAAlDA,EAAEG,iBAAKF,EAALE,EAAOQ,4BAAoB,IAAAV,OAAA,EAA3BA,EAA6BW,+BAAmBZ,EAAAA,EAAyB,QAAzBE,EAAItB,EAAQ8B,qBAARR,IAAqBA,OAArBA,EAAAA,EAAuBU,2BAAmBb,IAAAA,GAAAA,EACnHc,eAAgBP,OAAOC,OAAO,CAAE,EAAE3B,EAAQiC,eAAgBV,eAAAA,EAAOU,gBACjEC,WAAYhB,EAAagB,YAAclC,EAAQkC,aAAc,KAEhEjB,EAAAH,EAE0C,cAAA,IAAEG,EAAAH,EAAA,kBAYD,MAAIG,EAAAH,EAAA,gBACN,MAAIG,EAAAH,EAAA,eA0E/B,WAAK,IAAAqB,EAAAC,EAAAC,EAAAC,EACZC,GAAuB,QAAhBJ,EAAArB,EAAKD,MAAMU,aAAXY,IAAgBA,OAAhBA,EAAAA,EAAkBK,cAAe,CAAE,EAChD,OACEC,EAACC,EAAUC,EAAAA,EAAA,CAAA,EAAKJ,EAAKK,WAAS,GAAA,CAAAC,UACD,IAA1BN,EAAKO,kBACJL,EAAC/B,EAAqBiC,EAAA,CACpBI,cAAKX,UAAAC,EAAEvB,EAAKD,MAAMmC,YAAI,IAAAX,OAAA,EAAfA,EAAiBY,kBAAU,IAAAb,EAAAA,EAAI,EACtCc,cAA4CZ,QAA/BA,EAAExB,EAAKqC,eAAe1B,iBAApBa,IAA6BA,OAA7BA,EAAAA,EAA+Bc,aAC9CC,OAAQvC,EAAKwC,YACbC,SAAUzC,EAAK0C,4BACX1C,EAAKqC,eAAerB,qBAKjCb,EAAAH,EAEyB,0BAAA,SAAC2C,GACzB3C,EAAK4C,SAAS,CAAEjD,SAAUgD,GAAS,WAAK,IAAAE,EAAAC,EACtC,GAAI9C,EAAKD,MAAMgD,kBAAmB,CAAA,IAAAC,EAAAC,EAAAC,EAAAC,EAC1BC,EAAwF,QAA/EJ,EAA6C,QAA7CC,EAA+B,QAA/BC,EAAGlD,EAAKqC,eAAe1C,gBAApBuD,IAA4BA,OAA5BA,EAAAA,EAA8BZ,oBAAY,IAAAW,EAAAA,EAAoBE,QAApBA,EAAIjE,EAAQS,gBAARwD,IAAgBA,OAAhBA,EAAAA,EAAkBb,oBAAYU,IAAAA,EAAAA,EAAIK,EAClGN,EAAkB,CAAEpD,SAAUgD,EAAOU,gBAAiBD,GACvD,SACDP,GAAAC,EAAA9C,EAAKD,OAAMuD,wBAAgB,IAAAT,GAA3BA,EAAAU,KAAAT,EAA8BH,EAChC,KACDxC,EAAAH,EAEwB,yBAAA,SAACwD,GAAe,OAAKxD,EAAK4C,SAAS,CAAEY,QAAAA,GAAU,GAAArD,EAAAH,EAEhD,wBAAA,SAACkC,GAAyB,OAAKlC,EAAK4C,SAAS,CAAEa,SAAUvB,EAAKwB,YAAa,GAAAvD,EAAAH,EAAA,6BAElD,SAAC2D,EAAUC,GAAI,OAAK5D,EAAK4C,SAAS,CAAEe,SAAAA,EAAUC,KAAAA,GAAO,GAAAzD,EAAAH,EAErF,iBAAA,WAAA,OAAMA,EAAK4C,SAASiB,EAAsB,GAAA1D,EAAAH,EAAA,sBAErC,WACpBA,EAAK4C,SAAS,CAAEe,SAAU,KAAMC,UAAME,EAAWN,QAAS,OAC3DrD,EAAAH,EAE0D,6BAAA,SAACwC,GACrDxC,EAAKD,MAAMwC,QAAQvC,EAAK4C,SAAQf,EAAAA,KAAMgC,GAAqB,CAAA,EAAA,CAAErB,YAAAA,KAClExC,EAAKD,MAAMgE,gBAAkB/D,EAAKD,MAAMgE,eAAevB,GACjDxC,EAAKD,MAAMwC,QAAQvC,EAAK4C,SAASiB,KAnKvC7D,EAAKgE,YAAYjE,GACjBC,EAAKiE,MAAQjE,EAAKkE,gBAAgBnE,GAAMC,CAC1C,CAAC,OAAAmE,EAAArE,EALoBsE,GAKpBC,EAAAvE,EAAA,CAAA,CAAAwE,IAAA,kBAAA3B,MAEO,SAAgBvC,GAA+B,IAAAmE,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAC/CtC,UAAYiC,EAAoD,QAApDC,EAAqBC,QAArBA,EAAGrE,EAAaK,iBAAKgE,GAAiBA,QAAjBA,EAAlBA,EAAoB1D,uBAApB0D,IAAmCA,OAAnCA,EAAAA,EAAqCnC,oBAAYkC,IAAAA,EAAAA,UAAAE,EAAIxF,EAAQS,gBAAQ,IAAA+E,OAAA,EAAhBA,EAAkBpC,oBAAY,IAAAiC,EAAAA,EAAIlB,EACtG1D,EAAWS,EAAa2C,kBAAoB8B,EAAsB,CAAExB,gBAAiBf,IAAkBA,EAC7G,OAAAT,EAAAA,EAAA,CAAA,EACKgC,GAAqB,CAAA,EAAA,CACxBrB,YAAwD,QAA7CmC,EAA+B,QAA/BC,EAAEE,KAAKzC,eAAe1B,iBAApBiE,IAA6BA,OAA7BA,EAAAA,EAA+BtC,oBAAYqC,IAAAA,EAAAA,EAAI,CAAE,EAC9DhF,SAAAA,GAEJ,GAAC,CAAA2E,IAAA,cAAAS,IAED,WAAe,IAAAC,EACb,OAAwB,QAAxBA,EAAOF,KAAK/E,MAAMwC,cAAM,IAAAyC,EAAAA,EAAIF,KAAKb,MAAMzB,WACzC,GAAC,CAAA8B,IAAA,WAAAS,IAED,WAAY,IAAAE,EACV,OAA0B,QAA1BA,EAAOH,KAAK/E,MAAMJ,gBAAQ,IAAAsF,EAAAA,EAAIH,KAAKb,MAAMtE,QAC3C,GAAC,CAAA2E,IAAA,iBAAAS,IAeD,WACE,OAAOD,KAAKpE,WACd,GAAC,CAAA4D,IAAA,wBAAA3B,MAED,SAAsBuC,GAAsC,IAAAC,EAAAC,EAAAC,EAAAC,EACpDC,EAAaC,KAAKC,UAAyBN,QAAhBA,EAACD,EAAUzE,aAAV0E,IAAeA,OAAfA,EAAAA,EAAiBrE,oBAAsB0E,KAAKC,kBAASL,EAACN,KAAK/E,MAAMU,aAAK,IAAA2E,OAAA,EAAhBA,EAAkBtE,kBACpG4E,EAAeF,KAAKC,UAAyBJ,QAAhBA,EAACH,EAAUzE,aAAV4E,IAAeA,OAAfA,EAAAA,EAAiBtE,mBAAqByE,KAAKC,kBAASH,EAACR,KAAK/E,MAAMU,aAAK,IAAA6E,OAAA,EAAhBA,EAAkBvE,iBAE3G,OADIwE,GAAcG,IAAcZ,KAAKd,YAAYkB,IAC1C,CACT,GAAC,CAAAZ,IAAA,SAAA3B,MAID,WAAM,IAAAgD,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EACEC,EAAkC,CACtCpD,QAASsB,KAAKb,MAAMT,QAAQqD,OAC5B/F,iBAA+C,QAA/B6E,EAAEb,KAAKzC,eAAe1B,iBAAS,IAAAgF,EAAAA,EAAI,CAAE,EACrDnD,YAAasC,KAAKtC,YAClBmB,SAAUmB,KAAKb,MAAMN,SACrBC,KAAMkB,KAAKb,MAAML,KACjBjE,SAAUmF,KAAKb,MAAMtE,SACrB8D,SAAUqB,KAAKb,MAAMR,SACrBqD,oBAAqBhC,KAAKpC,2BAC1BqE,gBAAiBjC,KAAKkC,uBACtBC,oBAAqBnC,KAAKoC,2BAC1BC,aAAcrC,KAAKsC,oBACnBC,QAASvC,KAAKwC,gBAGhB,OACE3F,EAAC4F,EAAgBC,SAAS,CAAA7E,MAAOiE,WAC/Ba,EAACC,EAAM,CAAAC,GAAI,CAAEC,OAAQ,OAAQC,KAAM,cACH,QAA7BjC,OAAKvD,eAAe1B,iBAApBiF,IAA6BA,OAA7BA,EAAAA,EAA+BkC,eAC9BnG,EAACoG,EAAclG,EAAA,CAACY,SAAUqC,KAAKkD,uBAA2BlD,KAAKzC,eAAelB,iBAE/D,QADhB0E,EACAf,KAAK/E,MAAMU,aAAK,IAAAoF,GAAaA,QAAbA,EAAhBA,EAAkBoC,mBAAlBpC,IAA6BA,OAA7BA,EAAAA,EAA+BqC,MAChCvG,EAACxC,EAAiB,CAChBgJ,GAAsCrC,QAApCA,EAAEhB,KAAKzC,eAAelB,sBAApB2E,IAAkCA,OAAlCA,EAAAA,EAAoCsC,UACxC3H,MAAKoB,EAAAA,EAAA,CAAA,EACgB,QADhBkE,EACAjB,KAAK/E,MAAMU,aAAXsF,IAAgBA,OAAhBA,EAAAA,EAAkBsC,mBAAiB,GAAA,CACtCC,MACEb,EAAAc,EAAA,CAAAxG,SAAA,EACgC,QAA7BiE,OAAK3D,eAAe1B,iBAApBqF,IAA6BA,OAA7BA,EAAAA,EAA+BwC,aAAc7G,EAAC8G,EAAa,YAAAxC,EAC3DnB,KAAK/E,MAAMU,aAAK,IAAAwF,GAAmB,QAAnBA,EAAhBA,EAAkBoC,yBAAlBpC,IAAmCA,OAAnCA,EAAAA,EAAqCqC,WAG3CvG,SAEDJ,EAACtC,EAAsB,CAAA,KAER6G,QADGA,EACnBpB,KAAK/E,MAAMU,iBAAKyF,WAAAA,EAAhBA,EAAkB+B,mBAAW,IAAA/B,OAAA,EAA7BA,EAA+BwC,MACfvC,QADoBA,EACpCrB,KAAK/E,MAAMU,aAAK0F,IAAAA,GAAyB,QAAzBA,EAAhBA,EAAkBwC,+BAAuB,IAAAxC,OAAA,EAAzCA,EAA2C+B,MAC5CT,EAACmB,EAAc,CAAA7G,SAAA,CACbJ,EAACkH,EAAgB,CAAAlG,MAAOmC,KAAKb,MAAMtE,SAAU8C,SAAUqC,KAAKgE,0BAC3C1C,QADsEA,EACtFtB,KAAK/E,MAAMU,aAAK2F,IAAAA,GAAyBA,QAAzBA,EAAhBA,EAAkBuC,+BAAlBvC,IAAyCA,OAAzCA,EAAAA,EAA2C2C,KAC5CtB,EAACC,EAAM,CAAAsB,cAAe,MAAOrB,GAAI,CAAEsB,SAAU,OAAQC,WAAY,SAAUC,IAAK,EAAGC,SAAU,GAAGrH,SAAA,CAC9FJ,EAACpC,EAA2B,CAAA8J,QAASvE,KAAK/E,MAAMsJ,UAChD1H,EAAC2H,EAAG,CAAC3B,GAAI,CAAE4B,QAAS,OAAQL,WAAY,SAAUC,IAAK,EAAGC,SAAU,EAAGI,eAAgB,OAAOzH,SAC3F+C,KAAKzC,eAAenB,qBACnBS,EAAC/B,EAAqBiC,EAAA,CACpBI,cAAKoE,UAAAC,EAAExB,KAAK/E,MAAMmC,YAAI,IAAAoE,OAAA,EAAfA,EAAiBnE,kBAAU,IAAAkE,EAAAA,EAAI,EACtCjE,cAA4CmE,QAA/BA,EAAEzB,KAAKzC,eAAe1B,iBAApB4F,IAA6BA,OAA7BA,EAAAA,EAA+BjE,aAC9CC,OAAQuC,KAAKtC,YACbC,SAAUqC,KAAKpC,4BACXoC,KAAKzC,eAAerB,qBAKfwF,QADTA,EACP1B,KAAK/E,MAAMU,iBAAK+F,WAAAA,EAAhBA,EAAkBmC,+BAAuB,IAAAnC,OAAA,EAAzCA,EAA2C8B,SAE7B7B,QADAA,EAChB3B,KAAK/E,MAAMU,aAAKgG,IAAAA,GAAyBA,QAAzBA,EAAhBA,EAAkBkC,+BAAlBlC,IAAyCA,OAAzCA,EAAAA,EAA2CiC,MAC5C/G,EAAClC,EAAgB,CACfyC,aAAIwE,UAAAC,EAAE7B,KAAK/E,MAAMmC,YAAI,IAAAyE,OAAA,EAAfA,EAAiB8C,aAAK,IAAA/C,EAAAA,EAAI,GAChC/G,SAAUmF,KAAKnF,SACf0J,QAASvE,KAAK/E,MAAMsJ,QACpBK,MAAO5E,KAAK/E,MAAM2J,MAClBtI,WAAY0D,KAAKzC,eAAejB,WAChCX,MAAOqE,KAAKzC,eAAe1C,WAE5BmF,KAAK6E,mBAId,IAAC,GAiDL,CAIA,IAAMf,EAAiBgB,EAAON,EAAPM,CAAY,CACjCL,QAAS,OACTL,WAAY,SACZD,SAAU,OACVE,IAAK,MACLU,aAAc,MACdC,UAAW,mCAGPlI,EAAagI,EAAON,EAAPM,CAAY,CAC7BL,QAAS,OACTC,eAAgB,WAChBO,MAAO"}
+{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n  title?: React.ReactNode\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  autoHeight?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  autoHeight?: boolean\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking),\r\n        autoHeight: currentProps.autoHeight || configs.autoHeight || false\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          <Stack sx={{ height: '100%', flex: 1 }}>\r\n            {this.props.slots?.title}\r\n            {this.internalConfig.filterBar?.enableSticky && (\r\n              <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n            )}\r\n            {this.props.slots?.filterSlots?.above}\r\n            <FilterBarInstance\r\n              id={this.internalConfig.scrollTracking?.elementId}\r\n              slots={{\r\n                ...this.props.slots?.primaryInputSlots,\r\n                right: (\r\n                  <>\r\n                    {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                    {this.props.slots?.primaryInputSlots?.right}\r\n                  </>\r\n                )\r\n              }}\r\n            >\r\n              <PopperPanelInstance />\r\n            </FilterBarInstance>\r\n            {this.props.slots?.filterSlots?.below}\r\n            {this.props.slots?.activeFiltersPanelSlots?.above}\r\n            <FilterBarPanel>\r\n              <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n              {this.props.slots?.activeFiltersPanelSlots?.left}\r\n              <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n                <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n                  {this.internalConfig.enablePaginationTop && (\r\n                    <PaginationBarInstance\r\n                      count={this.props.data?.totalItems ?? 0}\r\n                      defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                      filter={this.filterState}\r\n                      onChange={this.onFilterStateChangeHandler}\r\n                      {...this.internalConfig.paginationBar}\r\n                    />\r\n                  )}\r\n                </Box>\r\n              </Stack>\r\n              {this.props.slots?.activeFiltersPanelSlots?.right}\r\n            </FilterBarPanel>\r\n            {this.props.slots?.activeFiltersPanelSlots?.below}\r\n            <ViewModeInstance\r\n              data={this.props.data?.items ?? []}\r\n              viewMode={this.viewMode}\r\n              loading={this.props.loading}\r\n              error={this.props.error}\r\n              autoHeight={this.internalConfig.autoHeight}\r\n              slots={this.internalConfig.viewMode}\r\n            />\r\n            {this.renderFooter()}\r\n          </Stack>\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      return (\r\n        <FooterWrap {...temp.wrapProps}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </FooterWrap>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  flexWrap: 'wrap',\r\n  gap: '8px',\r\n  marginBottom: '8px',\r\n  minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n  display: 'flex',\r\n  justifyContent: 'flex-end',\r\n  width: '100%'\r\n})\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","autoHeight","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$props$slots4","_this$internalConfig$7","_this$props$slots5","_this$internalConfig$8","_this$props$slots6","_this$internalConfig$9","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$slots0","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots1","_this$props$slots10","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","DataViewContext","Provider","_jsxs","Stack","sx","height","flex","title","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","flexDirection","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}

package/dist/src/data-view/view-mode.content.js

@@ -1,2 +1,2 @@
-import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Box as p,Grid as m,Stack as f,Typography as h}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";var b=["Element"],v=["Element"],x=function(){return s(h,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function y(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||x,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,b),n=r.configs,a=n.Element,s=e(n,v);t!==a&&(this.ElementComponent=r.configs.Element||x);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,{sx:this.props.autoHeight?{}:{height:"100%",overflow:"auto"},children:s(m,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:e.map(function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(m,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)})}))})}}])}())}function S(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map(function(r){var o=e[r];return t({field:String(r),sortable:!1},o)})};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(f,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:s(C,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))})}}}])}())}var C=d(g,{shouldForwardProp:function(r){return"autoHeight"!==r}})(function(r){var o=r.theme,e=r.ownerState,t=null==e?void 0:e.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}});export{S as createViewModeList,y as createViewModeModule};
+import{inherits as e,createClass as o,objectWithoutProperties as r,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import{memo as s,Component as d}from"react";import{styled as u,colors as c,Box as p,Grid as h,Stack as m,Typography as f}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";var b=["Element"],v=["Element"],x=function(){return a(f,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function S(){return s(function(){function l(e){var o;return i(this,l),(o=n(this,l,[e])).ElementComponent=e.configs.Element||x,o}return e(l,d),o(l,[{key:"shouldComponentUpdate",value:function(e){var o=this.props.configs,t=o.Element,i=r(o,b),n=e.configs,l=n.Element,a=r(n,v);t!==l&&(this.ElementComponent=e.configs.Element||x);var s=JSON.stringify(i)!==JSON.stringify(a);return JSON.stringify(this.props.data)!==JSON.stringify(e.data)||s}},{key:"render",value:function(){var e=this.ElementComponent,o=this.props,r=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return a(p,{sx:this.props.autoHeight?{}:{height:"100%",overflow:"auto"},children:a(h,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:r.map(function(o,r){var l=i.getElementId?i.getElementId(o):r.toString(),s=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:r}):i.elementWrapProps||{};return a(h,t(t(t({item:!0},n),s),{},{children:a(e,{data:o,index:r})}),l)})}))})}}])}())}function y(){var r=function(e){var o,r=null!==(o=null==e?void 0:e.columns)&&void 0!==o?o:{};return Object.keys(r).map(function(e){var o=r[e];return t({field:String(e),sortable:!1},o)})};return s(function(){function s(e){var o;return i(this,s),o=n(this,s,[e]),l(o,"columns",[]),l(o,"rowSelectionModel",[]),l(o,"handleRowSelectionChange",function(e){var r,t;o.rowSelectionModel=e,null===(r=o.props.configs)||void 0===r||null===(t=r.onRowSelectionChange)||void 0===t||t.call(r,e),o.forceUpdate()}),o.columns=r(e.configs),o}return e(s,d),o(s,[{key:"shouldComponentUpdate",value:function(e){var o=JSON.stringify(this.props.value)!==JSON.stringify(e.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(e.configs);return t&&(this.columns=r()),o&&(this.rowSelectionModel=[]),o||t}},{key:"render",value:function(){var e,o,r,i,n,l,s;if(this.props.configs&&Object.keys(null!==(e=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==e?e:{}).length>0){var d=this.props.value;return a(m,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:a(w,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,checkboxSelection:null!==(r=null===(i=this.props.configs)||void 0===i?void 0:i.enableRowSelection)&&void 0!==r&&r,rowSelectionModel:this.rowSelectionModel,onRowSelectionModelChange:this.handleRowSelectionChange,getRowId:null===(n=this.props.configs)||void 0===n?void 0:n.getRowId,rows:d,rowHeight:null===(l=this.props.configs)||void 0===l?void 0:l.rowHeight,columnHeaderHeight:48,getRowSpacing:function(e){return{top:e.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(s=this.props.slots)||void 0===s?void 0:s.dataGridProps))})}}}])}())}var w=u(g,{shouldForwardProp:function(e){return"autoHeight"!==e}})(function(e){var o=e.theme,r=e.ownerState,t=null==r?void 0:r.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-columnHeaderCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-cellCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}});export{y as createViewModeList,S as createViewModeModule};
 //# sourceMappingURL=view-mode.content.js.map

package/dist/src/data-view/view-mode.content.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n  autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n      return (\r\n        <Box sx={this.props.autoHeight ? {} : { height: '100%', overflow: 'auto' }}>\r\n          <Grid container spacing={configs.spacing || 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n            {data.map((item, index) => {\r\n              const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n              const itemProps = configs.elementWrapPropsGetter\r\n                ? configs.elementWrapPropsGetter({ data: item, index })\r\n                : configs.elementWrapProps || {}\r\n              return (\r\n                <Grid item key={key} {...size} {...itemProps}>\r\n                  <ElementComponent data={item} index={index} />\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </Box>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  autoHeight?: boolean\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns()\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) {\r\n        return\r\n      }\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      return (\r\n        <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n          <DataGridCustom\r\n            hideFooter\r\n            // disableColumnSorting\r\n            disableColumnFilter\r\n            disableColumnMenu\r\n            getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n            rows={rows}\r\n            rowHeight={this.props.configs?.rowHeight}\r\n            columnHeaderHeight={48}\r\n            getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n            columns={this.columns}\r\n            disableColumnSelector\r\n            autoHeight={this.props.autoHeight}\r\n            {...this.props.slots?.dataGridProps}\r\n          />\r\n        </Stack>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n  autoHeight?: boolean\r\n}>((params: any) => {\r\n  const { theme, ownerState } = params as any\r\n  const autoHeight = ownerState?.autoHeight\r\n  return {\r\n    // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n    height: autoHeight ? 'auto' : '100%',\r\n    width: '100%',\r\n    display: autoHeight ? 'block' : 'flex',\r\n    flexDirection: autoHeight ? undefined : 'column',\r\n    '*': {\r\n      boxSizing: 'border-box'\r\n    },\r\n    '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n    '--custom-bg-color': theme.palette.background.paper,\r\n    '--DataGrid-rowBorderColor': 'transparent',\r\n    borderColor: 'transparent',\r\n    '.MuiDataGrid-cell': {\r\n      '--rowBorderColor': 'transparent',\r\n      display: 'flex',\r\n      alignItems: 'center'\r\n    },\r\n    '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-columnHeaders': {\r\n      backgroundColor: colors.grey[50],\r\n      borderColor: 'transparent',\r\n      borderRadius: '6px'\r\n    },\r\n    '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n    '.MuiDataGrid-virtualScrollerContent': {\r\n      '.MuiDataGrid-row': {\r\n        borderRadius: '6px',\r\n        border: 'none',\r\n        transition: 'all 0.2s ease',\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        '.MuiDataGrid-cell': {\r\n          backgroundColor: 'var(--custom-bg-color)',\r\n          border: 'none',\r\n          borderTop: '1px dashed var(--custom-border-color)',\r\n          borderBottom: '1px dashed var(--custom-border-color)',\r\n          '&:first-of-type': {\r\n            borderLeft: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '6px 0 0 6px'\r\n          },\r\n          '&:last-of-type': {\r\n            borderRight: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '0 6px 6px 0'\r\n          }\r\n        },\r\n        '&:hover': {\r\n          '--custom-border-color': theme.palette.divider,\r\n          '--custom-bg-color': colors.grey[50],\r\n          transform: 'translateY(-1px)',\r\n          boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n          '.MuiDataGrid-cell': {\r\n            borderTopStyle: 'solid',\r\n            borderBottomStyle: 'solid',\r\n            '&:first-of-type': {\r\n              borderLeftStyle: 'solid'\r\n            },\r\n            '&:last-of-type': {\r\n              borderRightStyle: 'solid'\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Box","sx","autoHeight","height","overflow","Grid","_objectSpread","container","spacing","wrapProps","style","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","Stack","flex","width","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}
+{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel, GridRowSelectionModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n  autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n      return (\r\n        <Box sx={this.props.autoHeight ? {} : { height: '100%', overflow: 'auto' }}>\r\n          <Grid container spacing={configs.spacing || 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n            {data.map((item, index) => {\r\n              const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n              const itemProps = configs.elementWrapPropsGetter\r\n                ? configs.elementWrapPropsGetter({ data: item, index })\r\n                : configs.elementWrapProps || {}\r\n              return (\r\n                <Grid item key={key} {...size} {...itemProps}>\r\n                  <ElementComponent data={item} index={index} />\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </Box>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  autoHeight?: boolean\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    private rowSelectionModel: GridRowSelectionModel = []\r\n    \r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n    }\r\n\r\n    private handleRowSelectionChange = (newSelection: GridRowSelectionModel) => {\r\n      this.rowSelectionModel = newSelection\r\n      this.props.configs?.onRowSelectionChange?.(newSelection as (string | number)[])\r\n      this.forceUpdate()\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns()\r\n      }\r\n      // Reset selection khi data thay đổi\r\n      if (checkValueDiff) {\r\n        this.rowSelectionModel = []\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) {\r\n        return\r\n      }\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      return (\r\n        <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n          <DataGridCustom\r\n            hideFooter\r\n            // disableColumnSorting\r\n            disableColumnFilter\r\n            disableColumnMenu\r\n            checkboxSelection={this.props.configs?.enableRowSelection ?? false}\r\n            rowSelectionModel={this.rowSelectionModel}\r\n            onRowSelectionModelChange={this.handleRowSelectionChange}\r\n            getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n            rows={rows}\r\n            rowHeight={this.props.configs?.rowHeight}\r\n            columnHeaderHeight={48}\r\n            getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n            columns={this.columns}\r\n            disableColumnSelector\r\n            autoHeight={this.props.autoHeight}\r\n            {...this.props.slots?.dataGridProps}\r\n          />\r\n        </Stack>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n  autoHeight?: boolean\r\n}>((params: any) => {\r\n  const { theme, ownerState } = params as any\r\n  const autoHeight = ownerState?.autoHeight\r\n  return {\r\n    // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n    height: autoHeight ? 'auto' : '100%',\r\n    width: '100%',\r\n    display: autoHeight ? 'block' : 'flex',\r\n    flexDirection: autoHeight ? undefined : 'column',\r\n    '*': {\r\n      boxSizing: 'border-box'\r\n    },\r\n    '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n    '--custom-bg-color': theme.palette.background.paper,\r\n    '--DataGrid-rowBorderColor': 'transparent',\r\n    borderColor: 'transparent',\r\n    '.MuiDataGrid-cell': {\r\n      '--rowBorderColor': 'transparent',\r\n      display: 'flex',\r\n      alignItems: 'center'\r\n    },\r\n    '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-columnHeaders': {\r\n      backgroundColor: colors.grey[50],\r\n      borderColor: 'transparent',\r\n      borderRadius: '6px'\r\n    },\r\n    '.MuiDataGrid-columnHeaderCheckbox': {\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center'\r\n    },\r\n    '.MuiDataGrid-cellCheckbox': {\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center'\r\n    },\r\n    '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n    '.MuiDataGrid-virtualScrollerContent': {\r\n      '.MuiDataGrid-row': {\r\n        borderRadius: '6px',\r\n        border: 'none',\r\n        transition: 'all 0.2s ease',\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        '.MuiDataGrid-cell': {\r\n          backgroundColor: 'var(--custom-bg-color)',\r\n          border: 'none',\r\n          borderTop: '1px dashed var(--custom-border-color)',\r\n          borderBottom: '1px dashed var(--custom-border-color)',\r\n          '&:first-of-type': {\r\n            borderLeft: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '6px 0 0 6px'\r\n          },\r\n          '&:last-of-type': {\r\n            borderRight: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '0 6px 6px 0'\r\n          }\r\n        },\r\n        '&:hover': {\r\n          '--custom-border-color': theme.palette.divider,\r\n          '--custom-bg-color': colors.grey[50],\r\n          transform: 'translateY(-1px)',\r\n          boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n          '.MuiDataGrid-cell': {\r\n            borderTopStyle: 'solid',\r\n            borderBottomStyle: 'solid',\r\n            '&:first-of-type': {\r\n              borderLeftStyle: 'solid'\r\n            },\r\n            '&:last-of-type': {\r\n              borderRightStyle: 'solid'\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Box","sx","autoHeight","height","overflow","Grid","_objectSpread","container","spacing","wrapProps","style","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","newSelection","_this2$props$configs","_this2$props$configs$","rowSelectionModel","onRowSelectionChange","call","forceUpdate","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs$e","_this$props$configs3","_this$props$configs4","_this$props$configs5","_this$props$slots","length","rows","Stack","flex","width","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","checkboxSelection","enableRowSelection","onRowSelectionModelChange","handleRowSelectionChange","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","justifyContent","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}

package/dist/src/data-view/view-mode.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.types.js","sources":["../../../src/data-view/view-mode.types.ts"],"sourcesContent":["import { MotionProps } from 'framer-motion'\r\nimport { Breakpoint, GridProps } from '@mui/material'\r\nimport { GridColDef, GridRowIdGetter } from '@mui/x-data-grid'\r\n\r\nexport type IViewModeValidModel = {\r\n  [key: string | symbol]: any\r\n}\r\n\r\nexport enum EViewMode {\r\n  List = 'list',\r\n  Module = 'module'\r\n}\r\n\r\nexport type IResponsiveSize = { [key in Breakpoint]?: number }\r\n\r\nexport interface IViewModeElementProps {\r\n  mode?: EViewMode\r\n}\r\n\r\nexport interface IViewModeItemProps<T> {\r\n  data: T\r\n  index: number\r\n}\r\n\r\nexport type GridColsDef<T extends IViewModeValidModel> = { [key in keyof T]?: Omit<GridColDef<T>, 'field'> }\r\n\r\nexport interface IViewModeListConfig<T extends IViewModeValidModel> {\r\n  getRowId?: GridRowIdGetter<T>\r\n  columns?: GridColsDef<T>\r\n  rowHeight?: number\r\n}\r\n\r\nexport type IViewModeModuleConfig<T> = {\r\n  getElementId?: (value: T) => string | number\r\n  Element?: React.ComponentType<IViewModeItemProps<T>>\r\n  elementWrapProps?: Omit<GridProps, 'size' | 'children'>\r\n  elementWrapPropsGetter?: (props: IViewModeItemProps<T>) => Omit<GridProps, 'size' | 'children'>\r\n  spacing?: GridProps['spacing']\r\n  size?: IResponsiveSize\r\n  wrapProps?: Omit<GridProps, 'size' | 'children'>\r\n}\r\n\r\nexport interface IViewModeConfigs<T extends IViewModeValidModel> {\r\n  list?: IViewModeListConfig<T>\r\n  module?: IViewModeModuleConfig<T>\r\n  NoData?: React.ComponentType<IViewModeElementProps>\r\n  ErrorData?: React.ComponentType<IViewModeElementProps>\r\n  Skeleton?: React.ComponentType<IViewModeElementProps>\r\n  wrapProps?: MotionProps\r\n  defaultValue?: EViewMode\r\n}\r\n"],"names":["EViewMode"],"mappings":"IAQYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
+{"version":3,"file":"view-mode.types.js","sources":["../../../src/data-view/view-mode.types.ts"],"sourcesContent":["import { MotionProps } from 'framer-motion'\r\nimport { Breakpoint, GridProps } from '@mui/material'\r\nimport { GridColDef, GridRowIdGetter } from '@mui/x-data-grid'\r\n\r\nexport type IViewModeValidModel = {\r\n  [key: string | symbol]: any\r\n}\r\n\r\nexport enum EViewMode {\r\n  List = 'list',\r\n  Module = 'module'\r\n}\r\n\r\nexport type IResponsiveSize = { [key in Breakpoint]?: number }\r\n\r\nexport interface IViewModeElementProps {\r\n  mode?: EViewMode\r\n}\r\n\r\nexport interface IViewModeItemProps<T> {\r\n  data: T\r\n  index: number\r\n}\r\n\r\nexport type GridColsDef<T extends IViewModeValidModel> = { [key in keyof T]?: Omit<GridColDef<T>, 'field'> }\r\n\r\nexport interface IViewModeListConfig<T extends IViewModeValidModel> {\r\n  getRowId?: GridRowIdGetter<T>\r\n  columns?: GridColsDef<T>\r\n  rowHeight?: number\r\n  enableRowSelection?: boolean\r\n  onRowSelectionChange?: (selectedRowIds: (string | number)[]) => void\r\n}\r\n\r\nexport type IViewModeModuleConfig<T> = {\r\n  getElementId?: (value: T) => string | number\r\n  Element?: React.ComponentType<IViewModeItemProps<T>>\r\n  elementWrapProps?: Omit<GridProps, 'size' | 'children'>\r\n  elementWrapPropsGetter?: (props: IViewModeItemProps<T>) => Omit<GridProps, 'size' | 'children'>\r\n  spacing?: GridProps['spacing']\r\n  size?: IResponsiveSize\r\n  wrapProps?: Omit<GridProps, 'size' | 'children'>\r\n}\r\n\r\nexport interface IViewModeConfigs<T extends IViewModeValidModel> {\r\n  list?: IViewModeListConfig<T>\r\n  module?: IViewModeModuleConfig<T>\r\n  NoData?: React.ComponentType<IViewModeElementProps>\r\n  ErrorData?: React.ComponentType<IViewModeElementProps>\r\n  Skeleton?: React.ComponentType<IViewModeElementProps>\r\n  wrapProps?: MotionProps\r\n  defaultValue?: EViewMode\r\n}\r\n"],"names":["EViewMode"],"mappings":"IAQYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

package/dist/src/table/dino.js

@@ -1,2 +1,2 @@
-import{createClass as r,classCallCheck as t,defineProperty as e,objectSpread2 as o,objectWithoutProperties as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import i from"dayjs";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{MapTableBaseContext as l}from"./context.js";import{BtnFormDetail as u,BtnDetail as s}from"./ui.buttons.js";import{CreateStatusCell as c,CellChips as m,CellBase as v,CellImageSmall as f,CellDate as p}from"./ui.units.js";import h from"./toolbar-pannel.js";import d from"./helpers.js";import{CreateTable as g}from"./create.table.js";import y from"./create.action-row.js";import{Breadcrumbs as j}from"../components/breadcrumbs.js";var b=["imageUrl","valueFormatter","typographyProps","typographyPropsGetter"],C=["formatString"],S="MM/DD/YYYY HH:mm",w=new(r(function r(){var w=this;t(this,r),e(this,"createTable",g),e(this,"createActionRow",y),e(this,"setUrlQuery",d.setUrlQuery),e(this,"getUrlQuery",d.getUrlQuery),e(this,"mapContext",l),e(this,"ToolbarPannel",h),e(this,"createToolbar",function(r){return function(t){return a(h,o({},o(o({},t),r)))}}),e(this,"BtnFormDetail",u),e(this,"BtnDetail",s),e(this,"createBreadcrumbConfigs",function(r){return r}),e(this,"createBreadcrumbs",function(r){return function(){return a(j,{value:r})}}),e(this,"createStatusCell",c),e(this,"formatterDate",function(r,t){var e,o,n=null!==(e=null==t?void 0:t.formatString)&&void 0!==e?e:S,a=null!==(o=null==t?void 0:t.showRelative)&&void 0!==o&&o;try{if(!r)return"";var l=i(r),u=l.format(n);return a?"".concat(u," (").concat(i().to(l),")"):u}catch(r){return""}}),e(this,"valueFormatterDate",function(r){return function(t){return w.formatterDate(t.value,r)}}),e(this,"renderCellChips",function(r){return function(t){var e;return a(m,o(o({},r),{},{value:null!==(e=t.value)&&void 0!==e?e:null==r?void 0:r.value}))}}),e(this,"renderCellStatus",function(r,t){var e=c(r,o({sx:{minWidth:"90px"}},t));return function(r){return a(e,{value:r.value})}}),e(this,"renderCellBase",function(r){return function(t){var e,i=null!=r?r:{},l=i.imageUrl,u=i.valueFormatter,s=i.typographyProps,c=i.typographyPropsGetter,m=n(i,b),f=u?u(t.value,t.row):void 0,p=l?l(t.value,t.row):void 0,h=null!=r&&r.renderIcon?r.renderIcon(t.value,t.row):null!==(e=null==r?void 0:r.icon)&&void 0!==e?e:void 0,d=c?c(t.value,t.row):s;return a(v,o(o({value:t.value,valueFormatted:f},m),{},{imageUrl:p,icon:h,typographyProps:d}))}}),e(this,"renderCellImage",function(r,t){return function(e){var o;return a(f,{value:e.value,imageUri:null===(o=r(e.row))||void 0===o?void 0:o.toString(),fallbackSrc:null==t?void 0:t.fallbackSrc})}}),e(this,"renderCellDate",function(r){return function(t){var e=null!=r?r:{},i=e.formatString,l=n(e,C);return a(p,o(o({},l),{},{value:t.value,formatString:null!=i?i:S}))}})}));export{w as default};
+import{createClass as r,classCallCheck as t,defineProperty as e,objectSpread2 as o,objectWithoutProperties as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import i from"dayjs";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{MapTableBaseContext as u}from"./context.js";import{BtnFormDetail as l,BtnDetail as s}from"./ui.buttons.js";import{CreateStatusCell as c,CellChips as m,CellBase as f,CellImageSmall as v,CellDate as p}from"./ui.units.js";import h from"./toolbar-pannel.js";import d from"./helpers.js";import{CreateTable as g}from"./create.table.js";import y from"./create.action-row.js";import{Breadcrumbs as j}from"../components/breadcrumbs.js";var b=["imageUrl","valueFormatter","typographyProps","typographyPropsGetter"],C=["formatString"],S="MM/DD/YYYY HH:mm",w=new(r(function r(){var w=this;t(this,r),e(this,"createTable",g),e(this,"createActionRow",y),e(this,"setUrlQuery",d.setUrlQuery),e(this,"getUrlQuery",d.getUrlQuery),e(this,"mapContext",u),e(this,"ToolbarPannel",h),e(this,"createToolbar",function(r){return function(t){return a(h,o({},o(o({},t),r)))}}),e(this,"BtnFormDetail",l),e(this,"BtnDetail",s),e(this,"createBreadcrumbConfigs",function(r){return r}),e(this,"createBreadcrumbs",function(r){return function(){return a(j,{value:r})}}),e(this,"createStatusCell",c),e(this,"formatterDate",function(r,t){var e,o,n=null!==(e=null==t?void 0:t.formatString)&&void 0!==e?e:S,a=null!==(o=null==t?void 0:t.showRelative)&&void 0!==o&&o;try{if(!r)return"";var u=i(r),l=u.format(n);return a?"".concat(l," (").concat(i().to(u),")"):l}catch(r){return""}}),e(this,"valueFormatterDate",function(r){return function(t){return w.formatterDate(t.value,r)}}),e(this,"renderCellChips",function(r){return function(t){var e;return a(m,o(o({},r),{},{value:null!==(e=t.value)&&void 0!==e?e:null==r?void 0:r.value}))}}),e(this,"renderCellStatus",function(r,t){var e=c(r,o({sx:{minWidth:"90px"}},t));return function(r){return a(e,{value:r.value})}}),e(this,"renderCellBase",function(r){return function(t){var e=null!=r?r:{},i=e.imageUrl,u=e.valueFormatter,l=e.typographyProps,s=e.typographyPropsGetter,c=n(e,b),m=u?u(t.value,t.row):void 0,v=i?i(t.value,t.row):void 0,p=null!=r&&r.icon?"function"==typeof r.icon?r.icon(t.value,t.row):r.icon:void 0,h=s?s(t.value,t.row):l;return a(f,o(o({value:t.value,valueFormatted:m},c),{},{imageUrl:v,icon:p,typographyProps:h}))}}),e(this,"renderCellImage",function(r,t){return function(e){var o;return a(v,{value:e.value,imageUri:null===(o=r(e.row))||void 0===o?void 0:o.toString(),fallbackSrc:null==t?void 0:t.fallbackSrc})}}),e(this,"renderCellDate",function(r){return function(t){var e=null!=r?r:{},i=e.formatString,u=n(e,C);return a(p,o(o({},u),{},{value:t.value,formatString:null!=i?i:S}))}})}));export{w as default};
 //# sourceMappingURL=dino.js.map

package/dist/src/table/dino.js.map

@@ -1 +1 @@
-{"version":3,"file":"dino.js","sources":["../../../src/table/dino.tsx"],"sourcesContent":["import { GridRenderCellParams, GridTreeNodeWithRender, GridValueFormatterParams } from '@mui/x-data-grid'\r\nimport type { FC, ReactNode } from 'react'\r\nimport { dayjsCustom } from '../utils'\r\nimport { MapTableBaseContext } from './context'\r\nimport { BtnDetail, BtnFormDetail } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig } from '../components'\r\nimport { CreateStatusCell, IStatusCellOptions, IStatusCellConfig } from './ui.units'\r\nimport { CellBase, CellImageSmall, CellBaseOptions, CellChips, CellChipsProps, CellDate, CellDatePropsOwner } from './ui.units'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\r\nimport TableHelper from './helpers'\r\nimport CreateTable from './create.table'\r\nimport CreateActionRow from './create.action-row'\r\nimport { TypographyProps } from '@mui/material'\r\n\r\nconst formatDateString = 'MM/DD/YYYY HH:mm'\r\n\r\ntype RenderCellBaseParams<T> = Omit<CellBaseOptions, 'imageUrl'> & {\r\n  imageUrl?: (value: any, model: T) => string\r\n  valueFormatter?: (value: any, model: T) => string\r\n  icon?: ReactNode\r\n  renderIcon?: (value: any, model: T) => ReactNode\r\n  typographyPropsGetter?: (value: any, model: T) => TypographyProps & { [key: string]: any }\r\n}\r\n\r\ninterface FormatterDateOptions {\r\n  formatString?: string\r\n  showRelative?: boolean\r\n}\r\n\r\nclass DinoTableBase {\r\n  //#region Base\r\n\r\n  createTable = CreateTable\r\n\r\n  createActionRow = CreateActionRow\r\n\r\n  setUrlQuery = TableHelper.setUrlQuery\r\n\r\n  getUrlQuery = TableHelper.getUrlQuery\r\n\r\n  mapContext = MapTableBaseContext\r\n\r\n  ToolbarPannel = ToolbarPannel\r\n\r\n  createToolbar = (props: IToolbarPannelProps): FC<IToolbarPannelProps> => {\r\n    return (p) => <ToolbarPannel {...{ ...p, ...props }} />\r\n  }\r\n\r\n  BtnFormDetail = BtnFormDetail\r\n\r\n  BtnDetail = BtnDetail\r\n\r\n  createBreadcrumbConfigs = (value: IBreadcrumbConfig[]) => value\r\n\r\n  createBreadcrumbs = (value: IBreadcrumbConfig[]): FC => {\r\n    return () => <Breadcrumbs value={value} />\r\n  }\r\n\r\n  createStatusCell = CreateStatusCell\r\n  //#endregion\r\n\r\n  //#region Value Formatter\r\n  formatterDate = (value: any, options?: FormatterDateOptions): string => {\r\n    const f = options?.formatString ?? formatDateString\r\n    const showRelative = options?.showRelative ?? false\r\n    try {\r\n      if (!value) return ''\r\n\r\n      const date = dayjsCustom(value)\r\n      const formatted = date.format(f)\r\n\r\n      return showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n    } catch (error) {\r\n      return ''\r\n    }\r\n  }\r\n\r\n  valueFormatterDate = (options?: FormatterDateOptions) => {\r\n    return (params: GridValueFormatterParams<any>) => this.formatterDate(params.value, options)\r\n  }\r\n  //#endregion\r\n\r\n  //#region Render Cell\r\n  renderCellChips = (params?: CellChipsProps) => {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <CellChips {...params} value={tableRow.value ?? params?.value} />\r\n    }\r\n  }\r\n\r\n  renderCellStatus = function <E extends string>(config: IStatusCellConfig<E>, options?: IStatusCellOptions) {\r\n    const StatusCellInstance = CreateStatusCell(config, { sx: { minWidth: '90px' }, ...options })\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <StatusCellInstance value={tableRow.value} />\r\n    }\r\n  }\r\n\r\n  renderCellBase = function <T = any>(options?: RenderCellBaseParams<T>) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      const { imageUrl, valueFormatter, typographyProps, typographyPropsGetter, ...p } = options ?? {}\r\n      const value = valueFormatter ? valueFormatter(tableRow.value, tableRow.row) : undefined\r\n      const img = imageUrl ? imageUrl(tableRow.value, tableRow.row) : undefined\r\n      const icon = options?.renderIcon ? options.renderIcon(tableRow.value, tableRow.row) : options?.icon ?? undefined\r\n      const mergedTypographyProps = typographyPropsGetter ? typographyPropsGetter(tableRow.value, tableRow.row) : typographyProps\r\n      return <CellBase value={tableRow.value} valueFormatted={value} {...p} imageUrl={img} icon={icon} typographyProps={mergedTypographyProps} />\r\n    }\r\n  }\r\n\r\n  renderCellImage = function <T>(selectImage: (value: T) => T[keyof T], options?: { fallbackSrc?: string }) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <CellImageSmall value={tableRow.value} imageUri={selectImage(tableRow.row)?.toString()} fallbackSrc={options?.fallbackSrc} />\r\n    }\r\n  }\r\n\r\n  renderCellDate = function (params?: CellDatePropsOwner) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      const { formatString, ...props } = params ?? {}\r\n      return <CellDate {...props} value={tableRow.value} formatString={formatString ?? formatDateString} />\r\n    }\r\n  }\r\n  //#endregion\r\n}\r\n\r\nconst DinoTable = new DinoTableBase()\r\n\r\nexport default DinoTable\r\n"],"names":["formatDateString","DinoTable","_createClass","DinoTableBase","_this","this","_classCallCheck","_defineProperty","CreateTable","CreateActionRow","TableHelper","setUrlQuery","getUrlQuery","MapTableBaseContext","ToolbarPannel","props","p","_jsx","_objectSpread","BtnFormDetail","BtnDetail","value","Breadcrumbs","CreateStatusCell","options","_options$formatString","_options$showRelative","f","formatString","showRelative","date","dayjsCustom","formatted","format","concat","to","error","params","formatterDate","tableRow","_tableRow$value","CellChips","config","StatusCellInstance","sx","minWidth","_options$icon","_ref","imageUrl","valueFormatter","typographyProps","typographyPropsGetter","_objectWithoutProperties","_excluded","row","undefined","img","icon","renderIcon","mergedTypographyProps","CellBase","valueFormatted","selectImage","_selectImage","CellImageSmall","imageUri","toString","fallbackSrc","_ref2","_excluded2","CellDate"],"mappings":"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"}
+{"version":3,"file":"dino.js","sources":["../../../src/table/dino.tsx"],"sourcesContent":["import { GridRenderCellParams, GridTreeNodeWithRender, GridValueFormatterParams } from '@mui/x-data-grid'\r\nimport type { FC, ReactNode } from 'react'\r\nimport { dayjsCustom } from '../utils'\r\nimport { MapTableBaseContext } from './context'\r\nimport { BtnDetail, BtnFormDetail } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig } from '../components'\r\nimport { CreateStatusCell, IStatusCellOptions, IStatusCellConfig } from './ui.units'\r\nimport { CellBase, CellImageSmall, CellBaseOptions, CellChips, CellChipsProps, CellDate, CellDatePropsOwner } from './ui.units'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\r\nimport TableHelper from './helpers'\r\nimport CreateTable from './create.table'\r\nimport CreateActionRow from './create.action-row'\r\nimport { TypographyProps } from '@mui/material'\r\n\r\nconst formatDateString = 'MM/DD/YYYY HH:mm'\r\n\r\ntype RenderCellBaseParams<T> = Omit<CellBaseOptions, 'imageUrl'> & {\r\n  imageUrl?: (value: any, model: T) => string\r\n  valueFormatter?: (value: any, model: T) => string\r\n  icon?: ReactNode | ((value: any, model: T) => ReactNode)\r\n  typographyPropsGetter?: (value: any, model: T) => TypographyProps & { [key: string]: any }\r\n}\r\n\r\ninterface FormatterDateOptions {\r\n  formatString?: string\r\n  showRelative?: boolean\r\n}\r\n\r\nclass DinoTableBase {\r\n  //#region Base\r\n\r\n  createTable = CreateTable\r\n\r\n  createActionRow = CreateActionRow\r\n\r\n  setUrlQuery = TableHelper.setUrlQuery\r\n\r\n  getUrlQuery = TableHelper.getUrlQuery\r\n\r\n  mapContext = MapTableBaseContext\r\n\r\n  ToolbarPannel = ToolbarPannel\r\n\r\n  createToolbar = (props: IToolbarPannelProps): FC<IToolbarPannelProps> => {\r\n    return (p) => <ToolbarPannel {...{ ...p, ...props }} />\r\n  }\r\n\r\n  BtnFormDetail = BtnFormDetail\r\n\r\n  BtnDetail = BtnDetail\r\n\r\n  createBreadcrumbConfigs = (value: IBreadcrumbConfig[]) => value\r\n\r\n  createBreadcrumbs = (value: IBreadcrumbConfig[]): FC => {\r\n    return () => <Breadcrumbs value={value} />\r\n  }\r\n\r\n  createStatusCell = CreateStatusCell\r\n  //#endregion\r\n\r\n  //#region Value Formatter\r\n  formatterDate = (value: any, options?: FormatterDateOptions): string => {\r\n    const f = options?.formatString ?? formatDateString\r\n    const showRelative = options?.showRelative ?? false\r\n    try {\r\n      if (!value) return ''\r\n\r\n      const date = dayjsCustom(value)\r\n      const formatted = date.format(f)\r\n\r\n      return showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n    } catch (error) {\r\n      return ''\r\n    }\r\n  }\r\n\r\n  valueFormatterDate = (options?: FormatterDateOptions) => {\r\n    return (params: GridValueFormatterParams<any>) => this.formatterDate(params.value, options)\r\n  }\r\n  //#endregion\r\n\r\n  //#region Render Cell\r\n  renderCellChips = (params?: CellChipsProps) => {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <CellChips {...params} value={tableRow.value ?? params?.value} />\r\n    }\r\n  }\r\n\r\n  renderCellStatus = function <E extends string>(config: IStatusCellConfig<E>, options?: IStatusCellOptions) {\r\n    const StatusCellInstance = CreateStatusCell(config, { sx: { minWidth: '90px' }, ...options })\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <StatusCellInstance value={tableRow.value} />\r\n    }\r\n  }\r\n\r\n  renderCellBase = function <T = any>(options?: RenderCellBaseParams<T>) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      const { imageUrl, valueFormatter, typographyProps, typographyPropsGetter, ...p } = options ?? {}\r\n      const value = valueFormatter ? valueFormatter(tableRow.value, tableRow.row) : undefined\r\n      const img = imageUrl ? imageUrl(tableRow.value, tableRow.row) : undefined\r\n      const icon = options?.icon ? (typeof options.icon === 'function' ? options.icon(tableRow.value, tableRow.row) : options.icon) : undefined\r\n      const mergedTypographyProps = typographyPropsGetter ? typographyPropsGetter(tableRow.value, tableRow.row) : typographyProps\r\n      return <CellBase value={tableRow.value} valueFormatted={value} {...p} imageUrl={img} icon={icon} typographyProps={mergedTypographyProps} />\r\n    }\r\n  }\r\n\r\n  renderCellImage = function <T>(selectImage: (value: T) => T[keyof T], options?: { fallbackSrc?: string }) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      return <CellImageSmall value={tableRow.value} imageUri={selectImage(tableRow.row)?.toString()} fallbackSrc={options?.fallbackSrc} />\r\n    }\r\n  }\r\n\r\n  renderCellDate = function (params?: CellDatePropsOwner) {\r\n    return function func(tableRow: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>) {\r\n      const { formatString, ...props } = params ?? {}\r\n      return <CellDate {...props} value={tableRow.value} formatString={formatString ?? formatDateString} />\r\n    }\r\n  }\r\n  //#endregion\r\n}\r\n\r\nconst DinoTable = new DinoTableBase()\r\n\r\nexport default DinoTable\r\n"],"names":["formatDateString","DinoTable","_createClass","DinoTableBase","_this","this","_classCallCheck","_defineProperty","CreateTable","CreateActionRow","TableHelper","setUrlQuery","getUrlQuery","MapTableBaseContext","ToolbarPannel","props","p","_jsx","_objectSpread","BtnFormDetail","BtnDetail","value","Breadcrumbs","CreateStatusCell","options","_options$formatString","_options$showRelative","f","formatString","showRelative","date","dayjsCustom","formatted","format","concat","to","error","params","formatterDate","tableRow","_tableRow$value","CellChips","config","StatusCellInstance","sx","minWidth","_ref","imageUrl","valueFormatter","typographyProps","typographyPropsGetter","_objectWithoutProperties","_excluded","row","undefined","img","icon","mergedTypographyProps","CellBase","valueFormatted","selectImage","_selectImage","CellImageSmall","imageUri","toString","fallbackSrc","_ref2","_excluded2","CellDate"],"mappings":"mzBAcMA,EAAmB,mBA2GnBC,EAAY,IA7FCC,EAAA,SAAAC,IAAA,IAAAC,EAAAC,KAAAC,OAAAH,GACjBI,qBAEcC,GAAWD,yBAEPE,GAAeF,EAAAF,KAAA,cAEnBK,EAAYC,aAAWJ,EAAAF,KAAA,cAEvBK,EAAYE,aAAWL,oBAExBM,GAAmBN,uBAEhBO,GAAaP,EAAAF,KAAA,gBAEb,SAACU,GACf,OAAO,SAACC,GAAC,OAAKC,EAACH,EAAaI,EAAAA,GAAAA,EAAAA,EAAUF,GAAAA,GAAMD,IAAW,IACxDR,uBAEeY,GAAaZ,mBAEjBa,GAASb,EAAAF,KAAA,0BAEK,SAACgB,GAA0B,OAAKA,CAAK,GAAAd,EAAAF,KAAA,oBAE3C,SAACgB,GACnB,OAAO,WAAA,OAAMJ,EAACK,GAAYD,MAAOA,GAAS,IAC3Cd,0BAEkBgB,GAGnBhB,EACgBF,KAAA,gBAAA,SAACgB,EAAYG,GAA0C,IAAAC,EAAAC,EAC/DC,EAAyBF,QAAxBA,EAAGD,aAAO,EAAPA,EAASI,oBAAYH,IAAAA,EAAAA,EAAIzB,EAC7B6B,EAAoCH,QAAxBA,EAAGF,aAAO,EAAPA,EAASK,oBAAYH,IAAAA,GAAAA,EAC1C,IACE,IAAKL,EAAO,MAAO,GAEnB,IAAMS,EAAOC,EAAYV,GACnBW,EAAYF,EAAKG,OAAON,GAE9B,OAAOE,EAAYK,GAAAA,OAAMF,QAASE,OAAKH,IAAcI,GAAGL,QAAWE,CACpE,CAAC,MAAOI,GACP,MAAO,EACR,IACF7B,EAAAF,KAAA,qBAEoB,SAACmB,GACpB,OAAO,SAACa,GAAqC,OAAKjC,EAAKkC,cAAcD,EAAOhB,MAAOG,EAAQ,IAI7FjB,EAAAF,KAAA,kBACkB,SAACgC,GACjB,OAAO,SAAcE,GAAqE,IAAAC,EACxF,OAAOvB,EAACwB,EAASvB,EAAAA,KAAKmB,GAAM,GAAA,CAAEhB,MAAqBmB,QAAhBA,EAAED,EAASlB,aAAKmB,IAAAA,EAAAA,EAAIH,aAAM,EAANA,EAAQhB,QAChE,IACFd,EAEkBF,KAAA,mBAAA,SAA4BqC,EAA8BlB,GAC3E,IAAMmB,EAAqBpB,EAAiBmB,EAAMxB,EAAA,CAAI0B,GAAI,CAAEC,SAAU,SAAarB,IACnF,OAAO,SAAce,GACnB,OAAOtB,EAAC0B,EAAmB,CAAAtB,MAAOkB,EAASlB,OAC5C,IACFd,EAAAF,KAAA,iBAEgB,SAAmBmB,GAClC,OAAO,SAAce,GACnB,IAAAO,EAAmFtB,QAAAA,EAAW,CAAE,EAAxFuB,EAAQD,EAARC,SAAUC,EAAcF,EAAdE,eAAgBC,EAAeH,EAAfG,gBAAiBC,EAAqBJ,EAArBI,sBAA0BlC,EAACmC,EAAAL,EAAAM,GACxE/B,EAAQ2B,EAAiBA,EAAeT,EAASlB,MAAOkB,EAASc,UAAOC,EACxEC,EAAMR,EAAWA,EAASR,EAASlB,MAAOkB,EAASc,UAAOC,EAC1DE,EAAOhC,SAAAA,EAASgC,KAAgC,mBAAjBhC,EAAQgC,KAAsBhC,EAAQgC,KAAKjB,EAASlB,MAAOkB,EAASc,KAAO7B,EAAQgC,UAAQF,EAC1HG,EAAwBP,EAAwBA,EAAsBX,EAASlB,MAAOkB,EAASc,KAAOJ,EAC5G,OAAOhC,EAACyC,EAAQxC,EAAAA,EAAA,CAACG,MAAOkB,EAASlB,MAAOsC,eAAgBtC,GAAWL,GAAC,GAAA,CAAE+B,SAAUQ,EAAKC,KAAMA,EAAMP,gBAAiBQ,IACnH,IACFlD,EAEiBF,KAAA,kBAAA,SAAauD,EAAuCpC,GACpE,OAAO,SAAce,GAAqE,IAAAsB,EACxF,OAAO5C,EAAC6C,EAAc,CAACzC,MAAOkB,EAASlB,MAAO0C,SAAmC,QAA3BF,EAAED,EAAYrB,EAASc,YAArBQ,IAAyBA,OAAzBA,EAAAA,EAA2BG,WAAYC,YAAazC,aAAO,EAAPA,EAASyC,aACtH,IACF1D,EAAAF,KAAA,iBAEgB,SAAUgC,GACzB,OAAO,SAAcE,GACnB,IAAA2B,EAAmC7B,QAAAA,EAAU,CAAE,EAAvCT,EAAYsC,EAAZtC,aAAiBb,EAAKoC,EAAAe,EAAAC,GAC9B,OAAOlD,EAACmD,EAAQlD,EAAAA,KAAKH,GAAK,GAAA,CAAEM,MAAOkB,EAASlB,MAAOO,aAAcA,QAAAA,EAAgB5B,IAClF,GACF"}

package/dist/types/components/breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { TypographyProps } from '@mui/material';
+import { SxProps, Theme, TypographyProps } from '@mui/material';
 export interface IBreadcrumbConfig {
     label: string;
     url?: string;
@@ -10,6 +10,7 @@ export interface IBreadcrumbConfig {
 }
 export interface IBreadcrumbsProps {
     value?: IBreadcrumbConfig[];
+    sx?: SxProps<Theme>;
 }
 export declare const Breadcrumbs: FC<IBreadcrumbsProps>;
 export default Breadcrumbs;

package/dist/types/data-view/create.data-view.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import { BoxProps } from '@mui/material';
 import { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types';
 import { IFilterBarConfigs, IFilterState, IPositionElement, IViewData } from './types';
@@ -30,6 +30,7 @@ export interface IDataViewSlots<T extends IViewModeValidModel> {
         wrapProps?: BoxProps;
         enablePagination?: boolean;
     };
+    title?: React.ReactNode;
 }
 export interface IDataViewProps<T extends IViewModeValidModel> {
     loading?: boolean;

package/dist/types/data-view/view-mode.types.d.ts

@@ -26,6 +26,8 @@ export interface IViewModeListConfig<T extends IViewModeValidModel> {
     getRowId?: GridRowIdGetter<T>;
     columns?: GridColsDef<T>;
     rowHeight?: number;
+    enableRowSelection?: boolean;
+    onRowSelectionChange?: (selectedRowIds: (string | number)[]) => void;
 }
 export type IViewModeModuleConfig<T> = {
     getElementId?: (value: T) => string | number;

package/dist/types/table/dino.d.ts

@@ -10,8 +10,7 @@ import { TypographyProps } from '@mui/material';
 type RenderCellBaseParams<T> = Omit<CellBaseOptions, 'imageUrl'> & {
     imageUrl?: (value: any, model: T) => string;
     valueFormatter?: (value: any, model: T) => string;
-    icon?: ReactNode;
-    renderIcon?: (value: any, model: T) => ReactNode;
+    icon?: ReactNode | ((value: any, model: T) => ReactNode);
     typographyPropsGetter?: (value: any, model: T) => TypographyProps & {
         [key: string]: any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinocollab-core",
-  "version": "2.1.47",
+  "version": "2.1.48",
   "description": "Dinocollab core - libraries for building collaborative applications with React 18",
   "main": "dist/index.js",
   "module": "dist/index.js",