dinocollab-core 1.1.3 → 1.1.4

package/dist/table-grid/filter-bar/create.filter-menu.js

@@ -0,0 +1,2 @@
+import{inherits as e,createClass as r,classCallCheck as t,callSuper as i,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as l}from"react/jsx-runtime";import{Fragment as a}from"react";import{styled as s,Box as d,RadioGroup as u,MenuList as c,MenuItem as m,Typography as f,Divider as p,Button as v,TextField as h,FormControlLabel as g,Radio as b}from"@mui/material";import S,{filterPanelClasses as x}from"./base.js";import{convertFormDataToJson as y}from"../../form/helpers.js";function C(s){return function(){function u(e){var r;return t(this,u),r=i(this,u,[e]),n(r,"renderFrom",(function(e){var t,i=s.fields[e],n=null!==(t=null==i?void 0:i.label)&&void 0!==t?t:e.toString();return o("form",{onSubmit:function(t){return r.handleSubmit(e,t)},children:l(k,{children:[o(d,{className:"top-bar",children:o(f,{variant:"subtitle2",children:n})}),o(d,{className:"content",children:r.renderWithMode(e)}),"select"===(null==i?void 0:i.type)&&o(p,{variant:"middle"}),l(d,{className:"actions",children:[o(v,{size:"small",color:"inherit",onClick:r.props.onCancel,children:"Cancel"}),o(v,{size:"small",color:"primary",type:"submit",sx:{fontWeight:700},children:"Apply"})]})]})})})),n(r,"renderWithMode",(function(e){var t=s.fields[e],i=r.state.messageError;return"select"===(null==t?void 0:t.type)?o(j,{name:e.toString(),className:i?"error":"",onChange:function(){return r.setState({messageError:void 0})},children:t.options.map((function(e,r){var t;return o(g,{value:e.value,control:o(b,{}),label:null!==(t=e.label)&&void 0!==t?t:e.value},e.value.toString()+r)}))}):o(h,{autoFocus:!0,name:e.toString(),size:"small",error:!!i,helperText:i})})),n(r,"handleSubmit",(function(e,t){var i;t.preventDefault(),t.stopPropagation();var n=new FormData(t.currentTarget),o=null===(i=y(n)[e])||void 0===i?void 0:i.toString(),l=s.fields[e],a=r.validated(null!=o?o:"",e,l);if(a.error)r.setState({messageError:a.message});else{var d,u=void 0;if("select"===(null==l?void 0:l.type))u=null===(d=l.options.find((function(e){return e.value===o})))||void 0===d?void 0:d.label;r.props.onSubmit&&r.props.onSubmit("field",{field:e,value:o,label:u})}})),r.state={fieldSelected:null},r}return e(u,S),r(u,[{key:"render",value:function(){var e=this,r=this.state.fieldSelected;if(r)return this.renderFrom(r);var t=Object.keys(s.fields).filter((function(e){return!!e&&"Search"!==e}));return o(c,{className:x.list,sx:{minWidth:"200px"},children:t.map((function(r,t){var i,n=s.fields[r];return n?o(m,{className:x.item,onClick:function(){return e.setState({fieldSelected:r,messageError:void 0})},children:null!==(i=null==n?void 0:n.label)&&void 0!==i?i:r.toString()},r.toString()+t):o(a,{},r.toString()+t)}))})}}])}()}var k=s(d)({minWidth:"200px",borderRadius:"4px",overflow:"hidden",".top-bar":{background:"#000",padding:"8px",".MuiTypography-root":{color:"#fff"}},".content":{padding:"8px"},".actions":{display:"flex",alignItems:"center",justifyContent:"flex-end",padding:"8px"}}),j=s(u)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiRadio-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}});export{C as default};
+//# sourceMappingURL=create.filter-menu.js.map

package/dist/table-grid/filter-bar/create.filter-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.filter-menu.js","sources":["../../../src/table-grid/filter-bar/create.filter-menu.tsx"],"sourcesContent":["import React, { ComponentType, Fragment } from 'react'\r\nimport { Box, Button, ButtonProps, Divider } from '@mui/material'\r\nimport { FormControlLabel, MenuItem, MenuList, Radio, RadioGroup, styled, TextField, Typography } from '@mui/material'\r\nimport FilterBarBase, { filterPanelClasses } from './base'\r\nimport { IFilterBarConfigs, IFilterModel, IFilterSubmitFunc } from './types'\r\nimport { convertFormDataToJson } from '../../form/helpers'\r\n\r\nexport interface IFilterMenuProps<T> {\r\n  onSubmit?: IFilterSubmitFunc<T>\r\n  onCancel?: ButtonProps['onClick']\r\n}\r\n\r\nexport interface IFilterMenuState<T> {\r\n  fieldSelected: keyof IFilterModel<T> | null\r\n  messageError?: string\r\n}\r\n\r\nfunction CreateFilterMenu<T>(params: IFilterBarConfigs<T>): ComponentType<IFilterMenuProps<T>> {\r\n  class FilterMenu extends FilterBarBase<IFilterMenuProps<T>, IFilterMenuState<T>, T> {\r\n    constructor(props: IFilterMenuProps<T>) {\r\n      super(props)\r\n      this.state = { fieldSelected: null }\r\n    }\r\n\r\n    render() {\r\n      const { fieldSelected } = this.state\r\n      if (!!fieldSelected) return this.renderFrom(fieldSelected)\r\n      const keys = (Object.keys(params.fields) as (keyof IFilterModel<T>)[]).filter((x) => !!x && x !== 'Search')\r\n      return (\r\n        <MenuList className={filterPanelClasses.list} sx={{ minWidth: '200px' }}>\r\n          {keys.map((x, i) => {\r\n            const item = params.fields[x]\r\n            if (!item) return <Fragment key={x.toString() + i} />\r\n            return (\r\n              <MenuItem\r\n                key={x.toString() + i}\r\n                className={filterPanelClasses.item}\r\n                onClick={() => this.setState({ fieldSelected: x, messageError: undefined })}\r\n              >\r\n                {item?.label ?? x.toString()}\r\n              </MenuItem>\r\n            )\r\n          })}\r\n        </MenuList>\r\n      )\r\n    }\r\n\r\n    renderFrom = (fieldSelected: keyof IFilterModel<T>) => {\r\n      const fieldConfig = params.fields[fieldSelected]\r\n      const label = fieldConfig?.label ?? fieldSelected.toString()\r\n      return (\r\n        <form onSubmit={(e) => this.handleSubmit(fieldSelected, e)}>\r\n          <WrapPanelFilterMode>\r\n            <Box className='top-bar'>\r\n              <Typography variant='subtitle2'>{label}</Typography>\r\n            </Box>\r\n            <Box className='content'>{this.renderWithMode(fieldSelected)}</Box>\r\n            {fieldConfig?.type === 'select' && <Divider variant='middle' />}\r\n            <Box className='actions'>\r\n              <Button size='small' color='inherit' onClick={this.props.onCancel}>\r\n                Cancel\r\n              </Button>\r\n              <Button size='small' color='primary' type='submit' sx={{ fontWeight: 700 }}>\r\n                Apply\r\n              </Button>\r\n            </Box>\r\n          </WrapPanelFilterMode>\r\n        </form>\r\n      )\r\n    }\r\n\r\n    renderWithMode = (fieldSelected: keyof IFilterModel<T>) => {\r\n      const fieldConfig = params.fields[fieldSelected]\r\n      const { messageError } = this.state\r\n      switch (fieldConfig?.type) {\r\n        case 'select':\r\n          return (\r\n            <CustomRadioGroup\r\n              name={fieldSelected.toString()}\r\n              className={messageError ? 'error' : ''}\r\n              onChange={() => this.setState({ messageError: undefined })}\r\n            >\r\n              {fieldConfig.options.map((x, i) => (\r\n                <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />\r\n              ))}\r\n            </CustomRadioGroup>\r\n          )\r\n        case 'string':\r\n        default:\r\n          return <TextField autoFocus name={fieldSelected.toString()} size='small' error={!!messageError} helperText={messageError} />\r\n      }\r\n    }\r\n\r\n    handleSubmit = (fieldSelected: keyof IFilterModel<T>, event: React.FormEvent<HTMLFormElement>) => {\r\n      event.preventDefault()\r\n      event.stopPropagation()\r\n      const formData = new FormData(event.currentTarget as HTMLFormElement)\r\n      const obj = convertFormDataToJson<T>(formData)\r\n      const value = obj[fieldSelected as keyof T]?.toString()\r\n\r\n      const fieldConfig = params.fields[fieldSelected]\r\n      const validate = this.validated(value ?? '', fieldSelected, fieldConfig)\r\n      if (validate.error) {\r\n        this.setState({ messageError: validate.message })\r\n        return\r\n      }\r\n\r\n      let label: string | undefined = undefined\r\n      if (fieldConfig?.type === 'select') {\r\n        label = fieldConfig.options.find((x) => x.value === value)?.label\r\n      }\r\n\r\n      this.props.onSubmit && this.props.onSubmit('field', { field: fieldSelected, value, label })\r\n    }\r\n  }\r\n\r\n  return FilterMenu\r\n}\r\n\r\nexport default CreateFilterMenu\r\n\r\nconst WrapPanelFilterMode = styled(Box)({\r\n  minWidth: '200px',\r\n  borderRadius: '4px',\r\n  overflow: 'hidden',\r\n  '.top-bar': {\r\n    background: '#000',\r\n    padding: '8px',\r\n    '.MuiTypography-root': {\r\n      color: '#fff'\r\n    }\r\n  },\r\n  '.content': {\r\n    padding: '8px'\r\n  },\r\n  '.actions': {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'flex-end',\r\n    padding: '8px'\r\n  }\r\n})\r\n\r\nconst CustomRadioGroup = styled(RadioGroup)({\r\n  marginLeft: '-8px',\r\n  marginRight: '-8px',\r\n  '&.error .MuiRadio-root': {\r\n    color: '#d32f2f'\r\n  },\r\n  '.MuiFormControlLabel-root': {\r\n    margin: 0\r\n  },\r\n  '.MuiFormControlLabel-root:hover': {\r\n    backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n  }\r\n})\r\n"],"names":["CreateFilterMenu","params","FilterMenu","props","_this","_classCallCheck","_callSuper","_defineProperty","fieldSelected","_fieldConfig$label","fieldConfig","fields","label","toString","_jsx","onSubmit","e","handleSubmit","children","_jsxs","WrapPanelFilterMode","Box","className","Typography","variant","renderWithMode","type","Divider","Button","size","color","onClick","onCancel","sx","fontWeight","messageError","state","CustomRadioGroup","name","onChange","setState","undefined","options","map","x","i","_x$label","FormControlLabel","value","control","Radio","TextField","autoFocus","error","helperText","event","_obj$fieldSelected","preventDefault","stopPropagation","formData","FormData","currentTarget","convertFormDataToJson","validate","validated","message","_fieldConfig$options$","find","field","_inherits","FilterBarBase","_createClass","key","_this2","this","renderFrom","keys","Object","filter","MenuList","filterPanelClasses","list","minWidth","_item$label","item","MenuItem","Fragment","styled","borderRadius","overflow","background","padding","display","alignItems","justifyContent","RadioGroup","marginLeft","marginRight","margin","backgroundColor"],"mappings":"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"}

package/dist/table-grid/filter-bar/create.filter-panel.js

@@ -0,0 +1,2 @@
+import{inherits as r,createClass as e,objectSpread2 as n,classCallCheck as o,callSuper as t,defineProperty as i}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,Fragment as s,jsxs as c}from"react/jsx-runtime";import{styled as l,Box as p,Popper as u,Fade as d,MenuList as h,MenuItem as f,Typography as m}from"@mui/material";import{FilterNotes as b}from"./ui.units.js";import k,{filterPanelClasses as S}from"./base.js";import v from"./create.filter-menu.js";function x(l){var p=v(l),x=function(){function v(){var r;o(this,v);for(var e=arguments.length,u=new Array(e),d=0;d<e;d++)u[d]=arguments[d];return r=t(this,v,[].concat(u)),i(r,"renderContent",(function(){switch(r.props.reason){case"searchInput":return r.renderSearchInput();case"filterButton":return a(p,{onCancel:r.props.onClose,onSubmit:function(e,n){r.props.onSubmit&&r.props.onSubmit(e,n),r.props.onClose&&r.props.onClose()}})}})),i(r,"renderSearchInput",(function(){var e;if("searchInput"!==r.props.reason)return a(s,{});var o=r.getFieldsMatches(l.fields,null!==(e=r.props.keyword)&&void 0!==e?e:""),t=Object.keys(o).filter((function(r){return!!r}));return c(h,{className:S.list,children:[t.map((function(e,o){var t,i=l.fields[e],s=null!==(t=null==i?void 0:i.label)&&void 0!==t?t:e.toString();return c(f,{className:S.item,onClick:function(){return r.handleClick(e)},children:[c(m,{variant:"body2",component:"span",sx:{flex:1},children:[s,' "',r.props.keyword,'"']}),(null==i?void 0:i.notes)&&a(b,n({title:"The ".concat(s," includes"),disabledSize:!0},i.notes))]},e.toString()+o)})),r.renderQuickSearch()]})})),i(r,"renderQuickSearch",(function(){var e;if(!l.quickSearch)return a(s,{});var o=l.quickSearch,t=null!==(e=o.label)&&void 0!==e?e:"Quick search";return c(f,{className:S.item,onClick:r.handleQuickSearchClick,children:[c(m,{variant:"body2",component:"span",sx:{flex:1},children:[t,' "',r.props.keyword,'"']}),o.notes&&a(b,n({title:"The ".concat(t.toLocaleLowerCase()," includes"),disabledSize:!0},o.notes))]})})),i(r,"handleClick",(function(e){r.props.onSubmit&&r.props.onSubmit("field",{field:e,value:r.props.keyword})})),i(r,"handleQuickSearchClick",(function(){r.props.onSubmit&&r.props.onSubmit("quickSearch")})),r}return r(v,k),e(v,[{key:"render",value:function(){var r=this,e=Boolean(this.props.anchorEl)&&(!!this.props.keyword||"searchInput"!==this.props.reason);return a(u,{anchorEl:this.props.anchorEl,open:e,placement:"bottom-start",transition:!0,sx:{zIndex:1350},children:function(e){var o=e.TransitionProps;return a(d,n(n({},o),{},{timeout:0,children:a(C,{className:S.root,children:r.renderContent()})}))}})}}])}();return x}var C=l(p)({borderRadius:"4px",boxShadow:"rgba(0, 0, 0, 0.06) 0px 5px 22px, rgba(0, 0, 0, 0.04) 0px 0px 0px 0.5px",backgroundColor:"#fff"});export{x as default};
+//# sourceMappingURL=create.filter-panel.js.map

package/dist/table-grid/filter-bar/create.filter-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.filter-panel.js","sources":["../../../src/table-grid/filter-bar/create.filter-panel.tsx"],"sourcesContent":["import React, { ComponentType, PropsWithChildren } from 'react'\r\nimport { Popper, Fade, Box, styled, MenuList, MenuItem, Typography } from '@mui/material'\r\nimport { FilterNotes } from './ui.units'\r\nimport { IFilterModel, IFilterReason, IFilterSubmitFunc, IFilterBarConfigs } from './types'\r\nimport FilterBarBase, { filterPanelClasses } from './base'\r\nimport CreateFilterMenu from './create.filter-menu'\r\n\r\nexport interface IFilterPanelState {\r\n  anchorEl: HTMLElement | null\r\n  reason?: IFilterReason\r\n}\r\n\r\ninterface IFilterPanelProps<T> extends IFilterPanelState, PropsWithChildren {\r\n  keyword?: string\r\n  onSubmit?: IFilterSubmitFunc<T>\r\n  onClose?: () => void\r\n}\r\n\r\nfunction CreateFilterPanel<T>(params: IFilterBarConfigs<T>): ComponentType<IFilterPanelProps<T>> {\r\n  const FilterMenuInstance = CreateFilterMenu<T>(params)\r\n  // const SortMenuInstance = CreateFilterSort<T>(params)\r\n\r\n  class FilterPanel extends FilterBarBase<IFilterPanelProps<T>, {}, T> {\r\n    render() {\r\n      const isOpen = Boolean(this.props.anchorEl) && (!!this.props.keyword || this.props.reason !== 'searchInput')\r\n      return (\r\n        <Popper anchorEl={this.props.anchorEl} open={isOpen} placement='bottom-start' transition sx={{ zIndex: 1350 }}>\r\n          {({ TransitionProps }) => (\r\n            <Fade {...TransitionProps} timeout={0}>\r\n              <Wrapper className={filterPanelClasses.root}>{this.renderContent()}</Wrapper>\r\n            </Fade>\r\n          )}\r\n        </Popper>\r\n      )\r\n    }\r\n\r\n    renderContent = () => {\r\n      switch (this.props.reason) {\r\n        case 'searchInput':\r\n          return this.renderSearchInput()\r\n        case 'filterButton':\r\n          return (\r\n            <FilterMenuInstance\r\n              onCancel={this.props.onClose}\r\n              onSubmit={(f, v) => {\r\n                this.props.onSubmit && this.props.onSubmit(f, v)\r\n                this.props.onClose && this.props.onClose()\r\n              }}\r\n            />\r\n          )\r\n        // case 'sortButton':\r\n        //   return <SortMenuInstance />\r\n        default:\r\n          break\r\n      }\r\n    }\r\n\r\n    renderSearchInput = () => {\r\n      if (this.props.reason !== 'searchInput') return <></>\r\n      const fields = this.getFieldsMatches(params.fields, this.props.keyword ?? '')\r\n      const keys = Object.keys(fields).filter((x) => !!x) as (keyof IFilterModel<T>)[]\r\n      return (\r\n        <MenuList className={filterPanelClasses.list}>\r\n          {keys.map((x, i) => {\r\n            const item = params.fields[x]\r\n            const label = item?.label ?? x.toString()\r\n            return (\r\n              <MenuItem key={x.toString() + i} className={filterPanelClasses.item} onClick={() => this.handleClick(x)}>\r\n                <Typography variant='body2' component='span' sx={{ flex: 1 }}>\r\n                  {label} \"{this.props.keyword}\"\r\n                </Typography>\r\n                {item?.notes && <FilterNotes title={`The ${label} includes`} disabledSize {...item.notes} />}\r\n              </MenuItem>\r\n            )\r\n          })}\r\n          {this.renderQuickSearch()}\r\n        </MenuList>\r\n      )\r\n    }\r\n\r\n    renderQuickSearch = () => {\r\n      if (!params.quickSearch) return <></>\r\n      const quickSearch = params.quickSearch\r\n      const label = quickSearch.label ?? 'Quick search'\r\n      return (\r\n        <MenuItem className={filterPanelClasses.item} onClick={this.handleQuickSearchClick}>\r\n          <Typography variant='body2' component='span' sx={{ flex: 1 }}>\r\n            {label} \"{this.props.keyword}\"\r\n          </Typography>\r\n          {quickSearch.notes && <FilterNotes title={`The ${label.toLocaleLowerCase()} includes`} disabledSize {...quickSearch.notes} />}\r\n        </MenuItem>\r\n      )\r\n    }\r\n\r\n    handleClick = (field: keyof T) => {\r\n      if (!this.props.onSubmit) return\r\n      this.props.onSubmit('field', { field, value: this.props.keyword })\r\n    }\r\n\r\n    handleQuickSearchClick = () => {\r\n      if (!this.props.onSubmit) return\r\n      this.props.onSubmit('quickSearch')\r\n    }\r\n  }\r\n  return FilterPanel\r\n}\r\n\r\nexport default CreateFilterPanel\r\n\r\nconst Wrapper = styled(Box)({\r\n  borderRadius: '4px',\r\n  boxShadow: 'rgba(0, 0, 0, 0.06) 0px 5px 22px, rgba(0, 0, 0, 0.04) 0px 0px 0px 0.5px',\r\n  backgroundColor: '#fff'\r\n})\r\n"],"names":["CreateFilterPanel","params","FilterMenuInstance","CreateFilterMenu","FilterPanel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","props","reason","renderSearchInput","_jsx","onCancel","onClose","onSubmit","f","v","_this$props$keyword","fields","getFieldsMatches","keyword","keys","Object","filter","x","_jsxs","MenuList","className","filterPanelClasses","list","map","i","_item$label","item","label","toString","MenuItem","onClick","handleClick","children","Typography","variant","component","sx","flex","notes","FilterNotes","_objectSpread","title","disabledSize","renderQuickSearch","_quickSearch$label","quickSearch","handleQuickSearchClick","toLocaleLowerCase","field","value","_inherits","FilterBarBase","_createClass","key","_this2","isOpen","Boolean","anchorEl","Popper","open","placement","transition","zIndex","TransitionProps","_ref","Fade","timeout","Wrapper","root","renderContent","styled","Box","borderRadius","boxShadow","backgroundColor"],"mappings":"ydAkBA,SAASA,EAAqBC,GAC5B,IAAMC,EAAqBC,EAAoBF,GAGzCG,aAAY,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAgFf,OAhFeP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,iBAcA,WACd,OAAQA,EAAKY,MAAMC,QACjB,IAAK,cACH,OAAOb,EAAKc,oBACd,IAAK,eACH,OACEC,EAAClB,GACCmB,SAAUhB,EAAKY,MAAMK,QACrBC,SAAU,SAACC,EAAGC,GACZpB,EAAKY,MAAMM,UAAYlB,EAAKY,MAAMM,SAASC,EAAGC,GAC9CpB,EAAKY,MAAMK,SAAWjB,EAAKY,MAAMK,SACnC,QAQTN,EAAAX,EAAA,qBAEmB,WAAK,IAAAqB,EACvB,GAA0B,gBAAtBrB,EAAKY,MAAMC,OAA0B,OAAOE,QAChD,IAAMO,EAAStB,EAAKuB,iBAAiB3B,EAAO0B,OAA0B,QAApBD,EAAErB,EAAKY,MAAMY,eAAOH,IAAAA,EAAAA,EAAI,IACpEI,EAAOC,OAAOD,KAAKH,GAAQK,QAAO,SAACC,GAAC,QAAOA,KACjD,OACEC,EAACC,GAASC,UAAWC,EAAmBC,eACrCR,EAAKS,KAAI,SAACN,EAAGO,GAAK,IAAAC,EACXC,EAAOzC,EAAO0B,OAAOM,GACrBU,EAAmBF,QAAdA,EAAGC,eAAAA,EAAMC,iBAAKF,EAAAA,EAAIR,EAAEW,WAC/B,OACEV,EAACW,EAAgC,CAAAT,UAAWC,EAAmBK,KAAMI,QAAS,WAAF,OAAQzC,EAAK0C,YAAYd,EAAE,EACrGe,SAAA,CAAAd,EAACe,EAAU,CAACC,QAAQ,QAAQC,UAAU,OAAOC,GAAI,CAAEC,KAAM,GAAGL,SAAA,CACzDL,EAAS,KAAAtC,EAAKY,MAAMY,QAAO,QAE7Ba,aAAI,EAAJA,EAAMY,QAASlC,EAACmC,EAAWC,EAAA,CAACC,MAAK1C,OAAAA,OAAS4B,EAAgB,aAAEe,cAAiB,GAAAhB,EAAKY,UAJtErB,EAAEW,WAAaJ,EAOlC,IACCnC,EAAKsD,0BAGX3C,EAAAX,EAAA,qBAEmB,WAAK,IAAAuD,EACvB,IAAK3D,EAAO4D,YAAa,OAAOzC,QAChC,IAAMyC,EAAc5D,EAAO4D,YACrBlB,EAAyB,QAApBiB,EAAGC,EAAYlB,aAAK,IAAAiB,EAAAA,EAAI,eACnC,OACE1B,EAACW,EAAQ,CAACT,UAAWC,EAAmBK,KAAMI,QAASzC,EAAKyD,uBAAsBd,SAAA,CAChFd,EAACe,EAAW,CAAAC,QAAQ,QAAQC,UAAU,OAAOC,GAAI,CAAEC,KAAM,GACtDL,SAAA,CAAAL,EAAS,KAAAtC,EAAKY,MAAMY,QAAO,OAE7BgC,EAAYP,OAASlC,EAACmC,EAAWC,EAAA,CAACC,MAAK,OAAA1C,OAAS4B,EAAMoB,oBAA8B,aAAEL,cAAiB,GAAAG,EAAYP,cAGzHtC,EAAAX,EAEa,eAAA,SAAC2D,GACR3D,EAAKY,MAAMM,UAChBlB,EAAKY,MAAMM,SAAS,QAAS,CAAEyC,MAAAA,EAAOC,MAAO5D,EAAKY,MAAMY,aACzDb,EAAAX,EAAA,0BAEwB,WAClBA,EAAKY,MAAMM,UAChBlB,EAAKY,MAAMM,SAAS,kBACrBlB,CAAA,CAAA,OAAA6D,EAAA9D,EAhFuB+D,GAgFvBC,EAAAhE,EAAA,CAAA,CAAAiE,IAAA,SAAAJ,MA/ED,WAAM,IAAAK,EAAAxD,KACEyD,EAASC,QAAQ1D,KAAKG,MAAMwD,cAAgB3D,KAAKG,MAAMY,SAAiC,gBAAtBf,KAAKG,MAAMC,QACnF,OACEE,EAACsD,EAAM,CAACD,SAAU3D,KAAKG,MAAMwD,SAAUE,KAAMJ,EAAQK,UAAU,eAAeC,YAAW,EAAAzB,GAAI,CAAE0B,OAAQ,eACpG,gBAAGC,EAAeC,EAAfD,gBAAe,OACjB3D,EAAC6D,EAAIzB,EAAAA,KAAKuB,GAAe,GAAA,CAAEG,QAAS,WAClC9D,EAAC+D,EAAQ,CAAA/C,UAAWC,EAAmB+C,cAAOd,EAAKe,oBAC9C,GAIf,IAAC,IAsEH,OAAOjF,CACT,CAIA,IAAM+E,EAAUG,EAAOC,EAAPD,CAAY,CAC1BE,aAAc,MACdC,UAAW,0EACXC,gBAAiB"}

package/dist/table-grid/filter-bar/create.filtered.js

@@ -0,0 +1,2 @@
+import{inherits as e,createClass as r,classCallCheck as n,callSuper as i,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,Fragment as a,jsx as t}from"react/jsx-runtime";import{Component as c}from"react";import{Chip as u,Typography as s}from"@mui/material";function v(v){var p=function(){function p(){var e;n(this,p);for(var r=arguments.length,c=new Array(r),d=0;d<r;d++)c[d]=arguments[d];return e=i(this,p,[].concat(c)),l(e,"renderQuickSearch",(function(){var r,n,i;if(!e.props.filterState.quickSearch)return t(a,{});var l=null!==(r=e.props.filterState.quickSearch.values)&&void 0!==r?r:[],c=Array.isArray(l)?l:[l],p=null!==(n=null===(i=v.quickSearch)||void 0===i?void 0:i.label)&&void 0!==n?n:"Quick search";return t(u,{onDelete:e.handleQuickSearchRemove,size:"small",label:o(s,{component:"span",variant:"caption",children:[p," ",null==c?void 0:c.map((function(e){return'"'.concat(e,'"')})).join(" ")]})})})),l(e,"handleRemove",(function(r){e.props.onRemove&&e.props.onRemove("field",{field:r})})),l(e,"handleQuickSearchRemove",(function(){e.props.onRemove&&e.props.onRemove("quickSearch")})),e}return e(p,c),r(p,[{key:"render",value:function(){var e,r=this,n=Object.keys(null!==(e=this.props.filterState.filter)&&void 0!==e?e:{});return o(a,{children:[this.renderQuickSearch(),n.map((function(e,n){var i,l,a,c=null===(i=r.props.filterState.filter)||void 0===i?void 0:i[e],p=v.fields[e];return t(u,{onDelete:function(){return r.handleRemove(e)},size:"small",label:o(s,{component:"span",variant:"caption",children:[null!==(l=null!==(a=null==p?void 0:p.label)&&void 0!==a?a:null==e?void 0:e.toString())&&void 0!==l?l:"Search"," ",null==c?void 0:c.map((function(e){var r;return'"'.concat(null!==(r=e.label)&&void 0!==r?r:e.value,'"')})).join(" ")]})},"".concat(null==e?void 0:e.toString()).concat(n))}))]})}}])}();return p}export{v as default};
+//# sourceMappingURL=create.filtered.js.map

package/dist/table-grid/filter-bar/create.filtered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.filtered.js","sources":["../../../src/table-grid/filter-bar/create.filtered.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { Chip, Typography } from '@mui/material'\r\nimport { IFilterBarConfigs, IFilterState, IFilterSubmitFunc } from './types'\r\n\r\ninterface IProps<T> {\r\n  filterState: IFilterState<T>\r\n  onRemove?: IFilterSubmitFunc<T>\r\n}\r\n\r\nfunction CreateFiltered<T>(params: IFilterBarConfigs<T>) {\r\n  class Filtered extends Component<IProps<T>> {\r\n    render() {\r\n      const keys = Object.keys(this.props.filterState.filter ?? {}) as (keyof T)[]\r\n      return (\r\n        <>\r\n          {this.renderQuickSearch()}\r\n          {keys.map((key, i) => {\r\n            const item = this.props.filterState.filter?.[key]\r\n            const config = params.fields[key]\r\n            return (\r\n              <Chip\r\n                key={`${key?.toString()}${i}`}\r\n                onDelete={() => this.handleRemove(key)}\r\n                size='small'\r\n                label={\r\n                  <Typography component='span' variant='caption'>\r\n                    {config?.label ?? key?.toString() ?? 'Search'} {item?.map((x) => `\"${x.label ?? x.value}\"`).join(' ')}\r\n                  </Typography>\r\n                }\r\n              />\r\n            )\r\n          })}\r\n        </>\r\n      )\r\n    }\r\n\r\n    renderQuickSearch = () => {\r\n      if (!this.props.filterState.quickSearch) return <></>\r\n      const temp = this.props.filterState.quickSearch.values ?? []\r\n      const items = Array.isArray(temp) ? temp : [temp]\r\n      const label = params.quickSearch?.label ?? 'Quick search'\r\n      return (\r\n        <Chip\r\n          onDelete={this.handleQuickSearchRemove}\r\n          size='small'\r\n          label={\r\n            <Typography component='span' variant='caption'>\r\n              {label} {items?.map((x) => `\"${x}\"`).join(' ')}\r\n            </Typography>\r\n          }\r\n        />\r\n      )\r\n    }\r\n\r\n    handleRemove = (field: keyof T) => {\r\n      if (!this.props.onRemove) return\r\n      this.props.onRemove('field', { field })\r\n    }\r\n\r\n    handleQuickSearchRemove = () => {\r\n      if (!this.props.onRemove) return\r\n      this.props.onRemove('quickSearch')\r\n    }\r\n  }\r\n  return Filtered\r\n}\r\n\r\nexport default CreateFiltered\r\n"],"names":["CreateFiltered","params","Filtered","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props$filterSta","_params$quickSearch$l","_params$quickSearch","props","filterState","quickSearch","_jsx","temp","values","items","isArray","label","Chip","onDelete","handleQuickSearchRemove","size","_jsxs","Typography","component","variant","children","map","x","join","field","onRemove","_inherits","Component","_createClass","key","value","_this$props$filterSta2","_this2","keys","Object","filter","_Fragment","renderQuickSearch","i","_this2$props$filterSt","_ref","_config$label","item","config","fields","handleRemove","toString","_x$label"],"mappings":"sSASA,SAASA,EAAkBC,GAA4B,IAC/CC,aAAS,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAoDZ,OApDYP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,qBA0BO,WAAK,IAAAY,EAAAC,EAAAC,EACvB,IAAKd,EAAKe,MAAMC,YAAYC,YAAa,OAAOC,QAChD,IAAMC,EAAgD,QAA5CP,EAAGZ,EAAKe,MAAMC,YAAYC,YAAYG,cAAMR,IAAAA,EAAAA,EAAI,GACpDS,EAAQf,MAAMgB,QAAQH,GAAQA,EAAO,CAACA,GACtCI,EAAiC,QAA5BV,EAAqB,QAArBC,EAAGhB,EAAOmB,mBAAPH,IAAkBA,OAAlBA,EAAAA,EAAoBS,aAAKV,IAAAA,EAAAA,EAAI,eAC3C,OACEK,EAACM,EAAI,CACHC,SAAUzB,EAAK0B,wBACfC,KAAK,QACLJ,MACEK,EAACC,GAAWC,UAAU,OAAOC,QAAQ,UAClCC,SAAA,CAAAT,MAAQF,eAAAA,EAAOY,KAAI,SAACC,GAAC,MAAAxB,IAAAA,OAASwB,EAAC,IAAA,IAAKC,KAAK,aAKnDxB,EAAAX,EAEc,gBAAA,SAACoC,GACTpC,EAAKe,MAAMsB,UAChBrC,EAAKe,MAAMsB,SAAS,QAAS,CAAED,MAAAA,OAChCzB,EAAAX,EAAA,2BAEyB,WACnBA,EAAKe,MAAMsB,UAChBrC,EAAKe,MAAMsB,SAAS,kBACrBrC,CAAA,CAAA,OAAAsC,EAAAvC,EApDoBwC,GAoDpBC,EAAAzC,EAAA,CAAA,CAAA0C,IAAA,SAAAC,MAnDD,WAAM,IAAAC,EAAAC,EAAAnC,KACEoC,EAAOC,OAAOD,KAAkCF,QAA9BA,EAAClC,KAAKM,MAAMC,YAAY+B,kBAAMJ,EAAAA,EAAI,CAAA,GAC1D,OACEf,EACGoB,EAAA,CAAAhB,SAAA,CAAAvB,KAAKwC,oBACLJ,EAAKZ,KAAI,SAACQ,EAAKS,GAAK,IAAAC,EAAAC,EAAAC,EACbC,EAAoCH,QAAhCA,EAAGP,EAAK7B,MAAMC,YAAY+B,kBAAMI,SAA7BA,EAAgCV,GACvCc,EAASzD,EAAO0D,OAAOf,GAC7B,OACEvB,EAACM,EAEC,CAAAC,SAAU,WAAF,OAAQmB,EAAKa,aAAahB,EAAI,EACtCd,KAAK,QACLJ,MACEK,EAACC,EAAW,CAAAC,UAAU,OAAOC,QAAQ,UAClCC,SAAA,CAAgC,QAAhCoB,UAAAC,EAAAE,aAAM,EAANA,EAAQhC,aAAK,IAAA8B,EAAAA,EAAIZ,aAAG,EAAHA,EAAKiB,kBAAUN,IAAAA,EAAAA,EAAI,SAAW,IAAAE,aAAI,EAAJA,EAAMrB,KAAI,SAACC,GAAC,IAAAyB,EAAA,MAAA,IAAAjD,OAAgBiD,QAAhBA,EAASzB,EAAEX,aAAKoC,IAAAA,EAAAA,EAAIzB,EAAEQ,MAAK,IAAA,IAAKP,KAAK,YALhGzB,OAAG+B,aAAAA,EAAAA,EAAKiB,YAAUhD,OAAGwC,GAUhC,MAGN,IAAC,IA8BH,OAAOnD,CACT"}

package/dist/{filter-bar → table-grid/filter-bar}/types.js

@@ -1,2 +1,2 @@
-var i,n;!function(i){i.AlwaysVisible="AlwaysVisible",i.MatchOnly="MatchOnly",i.LinkYoutube="LinkYoutube",i.Link="Link",i.Guid="Guid"}(i||(i={})),function(i){i.LinkYoutube="LinkYoutube",i.Link="Link",i.Custom="Custom"}(n||(n={}));export{n as EFieldValidate,i as ESearchMatch};
+var i,n;!function(i){i.AlwaysVisible="AlwaysVisible",i.MatchOnly="MatchOnly",i.LinkYoutube="LinkYoutube",i.Link="Link",i.Guid="Guid"}(i||(i={})),function(i){i.LinkYoutube="LinkYoutube",i.Link="Link",i.Custom="Custom"}(n||(n={}));export{n as EMenuValidate,i as ESearchMatch};
 //# sourceMappingURL=types.js.map

package/dist/table-grid/filter-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/table-grid/filter-bar/types.ts"],"sourcesContent":["import { IFilterPanelState } from './create.filter-panel'\r\nimport { IFilterNotesProps } from './ui.units'\r\n\r\nexport type IFilterReason = 'searchInput' | 'filterButton'\r\n\r\n// type Dictionary<T, V, E = any> = {\r\n//   [key in keyof T | keyof E]?: V\r\n// }\r\n\r\ntype SingleOrArray<T> = T | T[]\r\n\r\n//#region Search Match\r\nexport enum ESearchMatch {\r\n  AlwaysVisible = 'AlwaysVisible',\r\n  MatchOnly = 'MatchOnly',\r\n  LinkYoutube = 'LinkYoutube',\r\n  Link = 'Link',\r\n  Guid = 'Guid'\r\n}\r\n\r\ninterface ISearchMatchBase {\r\n  rule: ESearchMatch\r\n}\r\n\r\ninterface ISearchMatchMatchOnly extends ISearchMatchBase {\r\n  rule: ESearchMatch.MatchOnly\r\n  match: (value: string) => boolean\r\n}\r\n\r\ninterface ISearchMatchQuickly extends ISearchMatchBase {\r\n  rule: ESearchMatch.AlwaysVisible | ESearchMatch.LinkYoutube | ESearchMatch.Link | ESearchMatch.Guid\r\n}\r\n\r\ntype IFieldSearchMatch = ISearchMatchMatchOnly | ISearchMatchQuickly\r\n//#endregion\r\n\r\n//#region Validate\r\nexport enum EMenuValidate {\r\n  LinkYoutube = 'LinkYoutube',\r\n  Link = 'Link',\r\n  Custom = 'Custom'\r\n}\r\n\r\ninterface IFieldValidateBase {\r\n  rule: EMenuValidate\r\n}\r\ninterface IFieldValidateCustom extends IFieldValidateBase {\r\n  rule: EMenuValidate.Custom\r\n  custom: (value: string) => boolean\r\n}\r\n\r\ninterface IFieldValidateQuickly extends IFieldValidateBase {\r\n  rule: EMenuValidate.Link | EMenuValidate.LinkYoutube\r\n}\r\n\r\ntype IFieldValidate = IFieldValidateQuickly | IFieldValidateCustom\r\n//#endregion\r\n\r\n//#region Filter Field\r\nexport interface IQuickSearchDef<T> {\r\n  fields: SingleOrArray<keyof T>\r\n  label?: string\r\n  notes?: IFilterNotesProps\r\n}\r\n\r\ninterface IFilterFieldDef {\r\n  label?: string\r\n  /** @default string */\r\n  type?: 'string' | 'select'\r\n  searchMatches?: SingleOrArray<IFieldSearchMatch>\r\n  notes?: IFilterNotesProps\r\n  // TODO thay vì required thì validate này sẽ chỉ hiện với field nào tồn tại validate\r\n  /** @default Required */\r\n  validate?: SingleOrArray<IFieldValidate>\r\n}\r\n\r\nexport interface IFilterFieldString extends IFilterFieldDef {\r\n  type?: 'string'\r\n}\r\n\r\nexport interface IFilterFieldSelect extends IFilterFieldDef {\r\n  type: 'select'\r\n  options: { value: string; label?: string }[]\r\n}\r\n\r\nexport type IFilterField = IFilterFieldString | IFilterFieldSelect\r\n\r\n// export type IFilterFields<T> = Dictionary<T, IFilterField, IFilterValid>\r\nexport type IFilterFields<T> = { [key in keyof T]?: IFilterField }\r\n\r\n// ========= ========= ========= State ========= ========= =========\r\nexport interface IFilterItemModel {\r\n  value?: string | number | boolean\r\n  label?: string\r\n}\r\nexport interface IFilterItemChangeModel<T> extends IFilterItemModel {\r\n  field: keyof T\r\n}\r\n\r\n// export type IFilterModel<T> = Dictionary<T, IFilterItemModel[], { Search?: string }>\r\nexport type IFilterModel<T> = { [key in keyof T]?: IFilterItemModel[] }\r\n\r\nexport interface IQuickSearchModel<T> {\r\n  fields: SingleOrArray<keyof T>\r\n  values?: SingleOrArray<string>\r\n}\r\n\r\nexport interface IFilterState<T> {\r\n  filter?: IFilterModel<T>\r\n  quickSearch?: IQuickSearchModel<T>\r\n  details?: 'add' | 'remove'\r\n}\r\n//#endregion\r\n\r\n//#region For Component\r\nexport interface IFilterBarConfigs<T> {\r\n  fields: IFilterFields<T>\r\n  quickSearch?: IQuickSearchDef<T>\r\n  id?: string\r\n  placeholder?: string\r\n  notes?: IFilterNotesProps\r\n}\r\n\r\nexport interface IFilterBarProps<T> {\r\n  id?: string\r\n  placeholder?: string\r\n  value?: IFilterState<T>\r\n  onChange?: (value: IFilterState<T>) => void\r\n}\r\n\r\nexport interface IFilterBarState {\r\n  panelState: IFilterPanelState\r\n  keyword: string\r\n}\r\n\r\nexport type IFilterSubmitFunc<T> = (mode: 'field' | 'quickSearch', data?: IFilterItemChangeModel<T>) => void\r\n//#endregion\r\n"],"names":["ESearchMatch","EMenuValidate"],"mappings":"IAYYA,EAyBAC,GAzBZ,SAAYD,GACVA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,YAAA,cACAA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAND,CAAYA,IAAAA,EAMX,CAAA,IAmBD,SAAYC,GACVA,EAAA,YAAA,cACAA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}

package/dist/table-grid/filter-bar/ui.units.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{styled as i,Box as t,Tooltip as n,Fade as l,IconButton as r,Typography as o}from"@mui/material";import s from"@mui/icons-material/Close";import a from"../../components/help-tooltip.js";var m=function(i){return e(u,{children:e(n,{title:"Remove filter",children:e(l,{in:i.visibled,unmountOnExit:!0,children:e(r,{size:"small",onClick:i.onClick,children:e(s,{fontSize:"small"})})})})})},c=function(i){return e(p,{children:i.items.map((function(i,t){return e(o,{component:"li",variant:"body2",children:i},t)}))})},d=function(i){var t,n;return e(u,{className:!0===i.disabledSize?"disabled-size":"",children:e(a,{small:!0,title:null!==(t=i.title)&&void 0!==t?t:"The search includes",children:i.renderContent?i.renderContent():e(c,{items:null!==(n=i.items)&&void 0!==n?n:[]})})})},u=i(t)({display:"inline-flex",flex:"0 0 auto",justifyContent:"center",alignItems:"center","&:not(.disabled-size)":{width:"40px",height:"40px"}}),p=i("ul")({paddingLeft:"1.7rem",marginBottom:0,li:{position:"relative",textAlign:"justify","&::before":{content:'"►"',display:"block",position:"absolute",top:"50%",right:"calc(100% + 6px)",transform:"translateY(-50%)",fontSize:"0.9em"}}});export{m as ButtonClear,d as FilterNotes};
+//# sourceMappingURL=ui.units.js.map

package/dist/table-grid/filter-bar/ui.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.units.js","sources":["../../../src/table-grid/filter-bar/ui.units.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react'\r\nimport { Box, Fade, IconButton, IconButtonProps, styled, Tooltip, Typography } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport HelpTooltip from '../../components/help-tooltip'\r\n\r\nexport interface IButtonClearProps {\r\n  visibled?: boolean\r\n  onClick: IconButtonProps['onClick']\r\n}\r\n\r\nexport const ButtonClear: FC<IButtonClearProps> = (props) => (\r\n  <WrapIcon>\r\n    <Tooltip title='Remove filter'>\r\n      <Fade in={props.visibled} unmountOnExit>\r\n        <IconButton size='small' onClick={props.onClick}>\r\n          <CloseIcon fontSize='small' />\r\n        </IconButton>\r\n      </Fade>\r\n    </Tooltip>\r\n  </WrapIcon>\r\n)\r\n\r\nexport interface IFilterNotesProps {\r\n  title?: string\r\n  items?: string[]\r\n  disabledSize?: boolean\r\n  renderContent?: () => ReactNode\r\n}\r\n\r\nconst HelpTooltipContent: FC<{ items: string[] }> = (props) => (\r\n  <WrapList>\r\n    {props.items.map((item, index) => (\r\n      <Typography key={index} component='li' variant='body2'>\r\n        {item}\r\n      </Typography>\r\n    ))}\r\n  </WrapList>\r\n)\r\n\r\nexport const FilterNotes: FC<IFilterNotesProps> = (props) => (\r\n  <WrapIcon className={props.disabledSize === true ? 'disabled-size' : ''}>\r\n    <HelpTooltip small title={props.title ?? 'The search includes'}>\r\n      {props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />}\r\n    </HelpTooltip>\r\n  </WrapIcon>\r\n)\r\nconst WrapIcon = styled(Box)({\r\n  display: 'inline-flex',\r\n  flex: '0 0 auto',\r\n  justifyContent: 'center',\r\n  alignItems: 'center',\r\n  '&:not(.disabled-size)': {\r\n    width: '40px',\r\n    height: '40px'\r\n  }\r\n})\r\n\r\nconst WrapList = styled('ul')({\r\n  paddingLeft: '1.7rem',\r\n  marginBottom: 0,\r\n  li: {\r\n    position: 'relative',\r\n    textAlign: 'justify',\r\n    '&::before': {\r\n      content: '\"►\"',\r\n      display: 'block',\r\n      position: 'absolute',\r\n      top: '50%',\r\n      right: 'calc(100% + 6px)',\r\n      transform: 'translateY(-50%)',\r\n      fontSize: '0.9em'\r\n    }\r\n  }\r\n})\r\n"],"names":["ButtonClear","props","_jsx","WrapIcon","children","Tooltip","title","Fade","in","visibled","unmountOnExit","IconButton","size","onClick","CloseIcon","fontSize","HelpTooltipContent","WrapList","items","map","item","index","Typography","component","variant","FilterNotes","_props$title","_props$items","className","disabledSize","HelpTooltip","small","renderContent","styled","Box","display","flex","justifyContent","alignItems","width","height","paddingLeft","marginBottom","li","position","textAlign","content","top","right","transform"],"mappings":"4OAUaA,EAAqC,SAACC,GAAK,OACtDC,EAACC,EAAQ,CAAAC,SACPF,EAACG,EAAO,CAACC,MAAM,gBAAeF,SAC5BF,EAACK,EAAK,CAAAC,GAAIP,EAAMQ,SAAUC,eAAa,EAAAN,SACrCF,EAACS,EAAW,CAAAC,KAAK,QAAQC,QAASZ,EAAMY,iBACtCX,EAACY,EAAU,CAAAC,SAAS,iBAIjB,EAUPC,EAA8C,SAACf,GAAK,OACxDC,EAACe,YACEhB,EAAMiB,MAAMC,KAAI,SAACC,EAAMC,GAAK,OAC3BnB,EAACoB,EAAU,CAAaC,UAAU,KAAKC,QAAQ,QAC5CpB,SAAAgB,GADcC,EAGlB,KACQ,EAGAI,EAAqC,SAACxB,GAAK,IAAAyB,EAAAC,EAAA,OACtDzB,EAACC,EAAQ,CAACyB,WAAkC,IAAvB3B,EAAM4B,aAAwB,gBAAkB,GAAEzB,SACrEF,EAAC4B,GAAYC,OAAK,EAACzB,MAAkB,QAAboB,EAAEzB,EAAMK,aAAK,IAAAoB,EAAAA,EAAI,sBACtCtB,SAAAH,EAAM+B,cAAgB/B,EAAM+B,gBAAkB9B,EAACc,EAAkB,CAACE,MAAkBS,QAAbA,EAAE1B,EAAMiB,aAAKS,IAAAA,EAAAA,EAAI,QAElF,EAEPxB,EAAW8B,EAAOC,EAAPD,CAAY,CAC3BE,QAAS,cACTC,KAAM,WACNC,eAAgB,SAChBC,WAAY,SACZ,wBAAyB,CACvBC,MAAO,OACPC,OAAQ,UAINvB,EAAWgB,EAAO,KAAPA,CAAa,CAC5BQ,YAAa,SACbC,aAAc,EACdC,GAAI,CACFC,SAAU,WACVC,UAAW,UACX,YAAa,CACXC,QAAS,MACTX,QAAS,QACTS,SAAU,WACVG,IAAK,MACLC,MAAO,mBACPC,UAAW,mBACXlC,SAAU"}

package/dist/table-grid/url-query-param.js

@@ -1,2 +1,2 @@
-import{createClass as e,classCallCheck as t,defineProperty as i,objectSpread2 as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{deepRemoveEmptyFields as r}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react/jsx-runtime";import"react";import"react-router-dom";import{QueryParam as l}from"../utils/query-param.js";var o=new(e((function e(){var o=this;t(this,e),i(this,"getUrlQuery",(function(e){try{var t=l.Gets("table");return t.table?JSON.parse(t.table):null==e?void 0:e.defaultFilter}catch(t){return null==e?void 0:e.defaultFilter}})),i(this,"setUrlQuery",(function(e,t){var i=o.extractFilter(e,t),a=r(i);if(0===Object.keys(a).length)return l.ReplaceDeletes("table");l.ReplacePatch({table:JSON.stringify(a)})})),i(this,"extractFilter",(function(e,t){var i,r,l,o,n=(null==t?void 0:t.defaultFilter)||{},s=a({},e);delete s.details,delete s.loading;var u=(null===(i=s.pagination)||void 0===i?void 0:i.page)===(null===(r=n.pagination)||void 0===r?void 0:r.page),p=(null===(l=s.pagination)||void 0===l?void 0:l.pageSize)===(null===(o=n.pagination)||void 0===o?void 0:o.pageSize);return u&&p&&delete s.pagination,s}))})));export{o as default};
+import{createClass as e,classCallCheck as t,defineProperty as i,objectSpread2 as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{deepRemoveEmptyFields as r}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react/jsx-runtime";import"react";import"react-router-dom";import{QueryParam as l}from"../utils/query-param.js";var o=new(e((function e(){var o=this;t(this,e),i(this,"getUrlQuery",(function(e){try{var t=l.gets("table");return t.table?JSON.parse(t.table):null==e?void 0:e.defaultFilter}catch(t){return null==e?void 0:e.defaultFilter}})),i(this,"setUrlQuery",(function(e,t){var i=o.extractFilter(e,t),a=r(i);if(0===Object.keys(a).length)return l.replaceDeletes("table");l.replacePatch({table:JSON.stringify(a)})})),i(this,"extractFilter",(function(e,t){var i,r,l,o,n=(null==t?void 0:t.defaultFilter)||{},s=a({},e);delete s.details,delete s.loading;var u=(null===(i=s.pagination)||void 0===i?void 0:i.page)===(null===(r=n.pagination)||void 0===r?void 0:r.page),p=(null===(l=s.pagination)||void 0===l?void 0:l.pageSize)===(null===(o=n.pagination)||void 0===o?void 0:o.pageSize);return u&&p&&delete s.pagination,s}))})));export{o as default};
 //# sourceMappingURL=url-query-param.js.map

package/dist/table-grid/url-query-param.js.map

@@ -1 +1 @@
-{"version":3,"file":"url-query-param.js","sources":["../../src/table-grid/url-query-param.ts"],"sourcesContent":["import { ITableGridFilter } from './types'\r\nimport { deepRemoveEmptyFields, QueryParam } from '../utils'\r\n\r\nexport interface ITableGridQueryParams {\r\n  table?: string\r\n}\r\n\r\nexport interface IUrlQueryParamOptions<T> {\r\n  defaultFilter?: ITableGridFilter<T>\r\n}\r\n\r\nclass UrlQueryParamBase {\r\n  getUrlQuery = <T>(options?: IUrlQueryParamOptions<T>) => {\r\n    try {\r\n      const query = QueryParam.Gets<ITableGridQueryParams>('table')\r\n      return query.table ? JSON.parse(query.table) : options?.defaultFilter\r\n    } catch (error) {\r\n      return options?.defaultFilter\r\n    }\r\n  }\r\n\r\n  setUrlQuery = <T>(params: ITableGridFilter<T>, options?: IUrlQueryParamOptions<T>) => {\r\n    const filter = this.extractFilter(params, options)\r\n    const filterRemovedEmpty = deepRemoveEmptyFields(filter)\r\n\r\n    if (Object.keys(filterRemovedEmpty).length === 0) {\r\n      return QueryParam.ReplaceDeletes<ITableGridQueryParams>('table')\r\n    }\r\n    QueryParam.ReplacePatch<ITableGridQueryParams>({ table: JSON.stringify(filterRemovedEmpty) })\r\n  }\r\n\r\n  extractFilter = <T>(filter: ITableGridFilter<T>, options?: IUrlQueryParamOptions<T>): ITableGridFilter<T> => {\r\n    const dFilter: Partial<ITableGridFilter<T>> = options?.defaultFilter || {}\r\n    const obj = { ...filter }\r\n    delete obj.details\r\n    delete obj.loading\r\n\r\n    const checkPagination1 = obj.pagination?.page === dFilter.pagination?.page\r\n    const checkPagination2 = obj.pagination?.pageSize === dFilter.pagination?.pageSize\r\n    if (checkPagination1 && checkPagination2) delete obj.pagination\r\n\r\n    return obj\r\n  }\r\n}\r\n\r\nconst UrlQueryParam = new UrlQueryParamBase()\r\nexport default UrlQueryParam\r\n"],"names":["UrlQueryParam","_createClass","UrlQueryParamBase","_this","this","_classCallCheck","_defineProperty","options","query","QueryParam","Gets","table","JSON","parse","defaultFilter","error","params","filter","extractFilter","filterRemovedEmpty","deepRemoveEmptyFields","Object","keys","length","ReplaceDeletes","ReplacePatch","stringify","_obj$pagination","_dFilter$pagination","_obj$pagination2","_dFilter$pagination2","dFilter","obj","_objectSpread","details","loading","checkPagination1","pagination","page","checkPagination2","pageSize"],"mappings":"qVAC4D,IA4CtDA,EAAgB,IAlCCC,GAAA,SAAAC,IAAA,IAAAC,EAAAC,KAAAC,OAAAH,GAAAI,EAAAF,KAAA,eACP,SAAIG,GAChB,IACE,IAAMC,EAAQC,EAAWC,KAA4B,SACrD,OAAOF,EAAMG,MAAQC,KAAKC,MAAML,EAAMG,OAASJ,aAAAA,EAAAA,EAASO,aACzD,CAAC,MAAOC,GACP,OAAOR,aAAAA,EAAAA,EAASO,aACjB,KACFR,EAEaF,KAAA,eAAA,SAAIY,EAA6BT,GAC7C,IAAMU,EAASd,EAAKe,cAAcF,EAAQT,GACpCY,EAAqBC,EAAsBH,GAEjD,GAA+C,IAA3CI,OAAOC,KAAKH,GAAoBI,OAClC,OAAOd,EAAWe,eAAsC,SAE1Df,EAAWgB,aAAoC,CAAEd,MAAOC,KAAKc,UAAUP,QACxEb,EAEeF,KAAA,iBAAA,SAAIa,EAA6BV,GAA2D,IAAAoB,EAAAC,EAAAC,EAAAC,EACpGC,GAAwCxB,aAAAA,EAAAA,EAASO,gBAAiB,CAAE,EACpEkB,EAAGC,EAAA,CAAA,EAAQhB,UACVe,EAAIE,eACJF,EAAIG,QAEX,IAAMC,GAAiCT,QAAdA,EAAAK,EAAIK,kBAAJV,IAAcA,OAAdA,EAAAA,EAAgBW,SAA2B,QAAvBV,EAAKG,EAAQM,kBAAU,IAAAT,OAAA,EAAlBA,EAAoBU,MAChEC,GAAiCV,QAAdA,EAAAG,EAAIK,kBAAJR,IAAcA,OAAdA,EAAAA,EAAgBW,aAA+B,QAAvBV,EAAKC,EAAQM,kBAAU,IAAAP,OAAA,EAAlBA,EAAoBU,UAG1E,OAFIJ,GAAoBG,UAAyBP,EAAIK,WAE9CL,IACR"}
+{"version":3,"file":"url-query-param.js","sources":["../../src/table-grid/url-query-param.ts"],"sourcesContent":["import { ITableGridFilter } from './types'\r\nimport { deepRemoveEmptyFields, QueryParam } from '../utils'\r\n\r\nexport interface ITableGridQueryParams {\r\n  table?: string\r\n}\r\n\r\nexport interface IUrlQueryParamOptions<T> {\r\n  defaultFilter?: ITableGridFilter<T>\r\n}\r\n\r\nclass UrlQueryParamBase {\r\n  getUrlQuery = <T>(options?: IUrlQueryParamOptions<T>) => {\r\n    try {\r\n      const query = QueryParam.gets<ITableGridQueryParams>('table')\r\n      return query.table ? JSON.parse(query.table) : options?.defaultFilter\r\n    } catch (error) {\r\n      return options?.defaultFilter\r\n    }\r\n  }\r\n\r\n  setUrlQuery = <T>(params: ITableGridFilter<T>, options?: IUrlQueryParamOptions<T>) => {\r\n    const filter = this.extractFilter(params, options)\r\n    const filterRemovedEmpty = deepRemoveEmptyFields(filter)\r\n\r\n    if (Object.keys(filterRemovedEmpty).length === 0) {\r\n      return QueryParam.replaceDeletes<ITableGridQueryParams>('table')\r\n    }\r\n    QueryParam.replacePatch<ITableGridQueryParams>({ table: JSON.stringify(filterRemovedEmpty) })\r\n  }\r\n\r\n  extractFilter = <T>(filter: ITableGridFilter<T>, options?: IUrlQueryParamOptions<T>): ITableGridFilter<T> => {\r\n    const dFilter: Partial<ITableGridFilter<T>> = options?.defaultFilter || {}\r\n    const obj = { ...filter }\r\n    delete obj.details\r\n    delete obj.loading\r\n\r\n    const checkPagination1 = obj.pagination?.page === dFilter.pagination?.page\r\n    const checkPagination2 = obj.pagination?.pageSize === dFilter.pagination?.pageSize\r\n    if (checkPagination1 && checkPagination2) delete obj.pagination\r\n\r\n    return obj\r\n  }\r\n}\r\n\r\nconst UrlQueryParam = new UrlQueryParamBase()\r\nexport default UrlQueryParam\r\n"],"names":["UrlQueryParam","_createClass","UrlQueryParamBase","_this","this","_classCallCheck","_defineProperty","options","query","QueryParam","gets","table","JSON","parse","defaultFilter","error","params","filter","extractFilter","filterRemovedEmpty","deepRemoveEmptyFields","Object","keys","length","replaceDeletes","replacePatch","stringify","_obj$pagination","_dFilter$pagination","_obj$pagination2","_dFilter$pagination2","dFilter","obj","_objectSpread","details","loading","checkPagination1","pagination","page","checkPagination2","pageSize"],"mappings":"qVAC4D,IA4CtDA,EAAgB,IAlCCC,GAAA,SAAAC,IAAA,IAAAC,EAAAC,KAAAC,OAAAH,GAAAI,EAAAF,KAAA,eACP,SAAIG,GAChB,IACE,IAAMC,EAAQC,EAAWC,KAA4B,SACrD,OAAOF,EAAMG,MAAQC,KAAKC,MAAML,EAAMG,OAASJ,aAAAA,EAAAA,EAASO,aACzD,CAAC,MAAOC,GACP,OAAOR,aAAAA,EAAAA,EAASO,aACjB,KACFR,EAEaF,KAAA,eAAA,SAAIY,EAA6BT,GAC7C,IAAMU,EAASd,EAAKe,cAAcF,EAAQT,GACpCY,EAAqBC,EAAsBH,GAEjD,GAA+C,IAA3CI,OAAOC,KAAKH,GAAoBI,OAClC,OAAOd,EAAWe,eAAsC,SAE1Df,EAAWgB,aAAoC,CAAEd,MAAOC,KAAKc,UAAUP,QACxEb,EAEeF,KAAA,iBAAA,SAAIa,EAA6BV,GAA2D,IAAAoB,EAAAC,EAAAC,EAAAC,EACpGC,GAAwCxB,aAAAA,EAAAA,EAASO,gBAAiB,CAAE,EACpEkB,EAAGC,EAAA,CAAA,EAAQhB,UACVe,EAAIE,eACJF,EAAIG,QAEX,IAAMC,GAAiCT,QAAdA,EAAAK,EAAIK,kBAAJV,IAAcA,OAAdA,EAAAA,EAAgBW,SAA2B,QAAvBV,EAAKG,EAAQM,kBAAU,IAAAT,OAAA,EAAlBA,EAAoBU,MAChEC,GAAiCV,QAAdA,EAAAG,EAAIK,kBAAJR,IAAcA,OAAdA,EAAAA,EAAgBW,aAA+B,QAAvBV,EAAKC,EAAQM,kBAAU,IAAAP,OAAA,EAAlBA,EAAoBU,UAG1E,OAFIJ,GAAoBG,UAAyBP,EAAIK,WAE9CL,IACR"}

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

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { IFilterArea, IFilterBarConfigs, IFilterState, IFilterStateChangeHandler } from './types';
+import { EViewMode } from './view-mode.types';
+export interface IDataViewState<T> {
+    anchorEl: HTMLElement | null;
+    area?: IFilterArea;
+    keyword: string;
+    filterState: IFilterState<T>;
+    scrolled?: boolean;
+    viewMode?: EViewMode;
+}
+export declare const defaultFilterBarState: IDataViewState<any>;
+export type OnPanelValueChange = (anchorEl: HTMLElement | null, area?: IFilterArea) => void;
+export interface IDataViewContext<T = any> extends IDataViewState<T> {
+    filterBarConfigs: IFilterBarConfigs<T>;
+    onFilterStateChange: IFilterStateChangeHandler<T>;
+    onKeywordChange: (keyword: string) => void;
+    onPopperPanelChange: OnPanelValueChange;
+    onPanelClose: () => void;
+    onClear: () => void;
+}
+export interface IDataViewContextProps<T = any> {
+    context: IDataViewContext<T>;
+}
+export declare const defaultDataViewContext: IDataViewContext;
+export declare const DataViewContext: React.Context<IDataViewContext<any>>;
+export declare function mapDataViewContext<T = any>(context: (context: IDataViewContext<T>) => ReactNode): ReactNode;

package/dist/types/data-view/convert-filter-to-graphql.d.ts

@@ -0,0 +1,30 @@
+import { RequestParam } from 'dinocollab-http-service';
+import type { IFilterOption, IKeyConverterDef, IKeyConverterModel } from 'dinocollab-http-service';
+import { IFilterState } from './types';
+export interface ISingleFilterCondition<G extends object> {
+    value: any;
+    keyConvert: IKeyConverterDef<G>;
+    option?: Partial<IFilterOption>;
+}
+export interface IFilterToGraphQLParams<T, G extends object> {
+    keyConverter: IKeyConverterModel<T, G>;
+    quickSearchFields?: (keyof T)[];
+}
+declare class ConvertFilterToGraphQL<T, G extends object> {
+    private keyConverter;
+    private quickSearchFields?;
+    constructor(params: IFilterToGraphQLParams<T, G>);
+    private filterStateStore?;
+    fromFilter: (filterState: IFilterState<T>) => this;
+    private applySingleFilterCondition;
+    private applyMulFilterCondition;
+    private handleFilter;
+    private handleQuickSearch;
+    private handlePagination;
+    private handleSort;
+    private prebuildFunc?;
+    prebuild: (func: (requestParam: RequestParam<G>) => RequestParam<G>) => this;
+    build: () => import("dinocollab-http-service").IRequestParamResult<G>;
+}
+export default ConvertFilterToGraphQL;
+export declare const createConvertFilterToGraphQL: <T, G extends object>(params: IFilterToGraphQLParams<T, G>) => ConvertFilterToGraphQL<T, G>;

package/dist/types/data-view/create.active-filters-panel.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+import { IFilterState } from './types';
+export declare const activeFiltersPanelClasses: {
+    root: string;
+    content: string;
+    item: string;
+    itemContent: string;
+    itemChip: string;
+    removeButton: string;
+    overlay: string;
+};
+export interface IActiveFiltersPanelProps {
+    loading?: boolean;
+}
+export interface IActiveFiltersPanelState<T> {
+    data: IFilterState<T> | null;
+    isClosing: boolean;
+}
+declare function createActiveFiltersPanel<T>(): ComponentType<IActiveFiltersPanelProps>;
+export default createActiveFiltersPanel;

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

@@ -1,57 +1,56 @@
-import React from 'react';
-import { IDataViewData, IDataViewInitial, ITableConfigs } from './types';
-import { GridValidRowModel, GridApi } from '@mui/x-data-grid';
-export interface IDataViewFilter {
-}
-export interface IDataViewContext {
-}
-export interface IDataViewState extends IDataViewInitial {
-    tableApiRef?: GridApi | null;
-    gridApiRef?: GridApi | null;
-}
-export interface IDataViewDef {
+import React, { ComponentType } from 'react';
+import { BoxProps } from '@mui/material';
+import { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types';
+import { IFilterBarConfigs, IFilterState, IViewData } from './types';
+import { IFilterBarSlots } from './create.filter-bar';
+import { IPaginationBarConfigs } from './create.pagination-bar';
+export declare const filterBarClasses: {
+    root: string;
+    content: string;
+    input: string;
+    inputWrap: string;
+    label: string;
+    button: string;
+    spacing: string;
+    panel: string;
+    sticky: string;
+    shadow: string;
+};
+export interface IFilterBarInsertSlots {
+    below?: React.ReactNode;
+    above?: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
 }
-export interface IDataViewSlots {
+export interface IDataViewSlots<T extends IViewModeValidModel> {
+    filterWrapProps?: BoxProps;
+    filterSlots?: IFilterBarInsertSlots;
+    activeFiltersPanelSlots?: IFilterBarInsertSlots;
+    primaryInputSlots?: IFilterBarSlots;
+    filterBarConfigs?: IFilterBarConfigs<T>;
+    viewModeConfigs?: IViewModeConfigs<T>;
+    paginationBarConfigs?: IPaginationBarConfigs;
+    footerProps?: {
+        wrapProps?: BoxProps;
+        enablePagination?: boolean;
+    };
 }
-export interface IDataViewProps<T extends GridValidRowModel> {
-    data?: IDataViewData<T>;
-    filter?: IDataViewFilter;
-    initialState?: IDataViewInitial;
+export interface IDataViewProps<T extends IViewModeValidModel> {
+    loading?: boolean;
+    error?: string;
+    data?: IViewData<T>;
+    filter?: IFilterState<T>;
+    onFilterChange?: (value: IFilterState<T>) => void;
+    viewMode?: EViewMode;
+    onViewModeChange?: (value: EViewMode) => void;
+    syncViewModeToURL?: boolean;
+    enablePaginationTop?: boolean;
+    slots?: IDataViewSlots<T>;
 }
-export interface IDataViewParams<T extends GridValidRowModel> {
-    initialState?: IDataViewInitial;
-    filterConfigs?: {};
-    tableConfigs?: ITableConfigs<T>;
-    gridConfigs?: {};
-    slots?: IDataViewSlots;
+export interface IDataViewConfigs<T extends IViewModeValidModel> {
+    filterBar?: IFilterBarConfigs<T>;
+    viewMode?: IViewModeConfigs<T>;
+    paginationBar?: IPaginationBarConfigs;
 }
-declare function createDataView<T extends GridValidRowModel>(params: IDataViewParams<T>): {
-    new (props: IDataViewProps<T>): {
-        handleTableApiReady: (api: GridApi) => void;
-        handleGridApiReady: (api: GridApi) => void;
-        render(): import("react/jsx-runtime").JSX.Element;
-        renderIssue(): import("react/jsx-runtime").JSX.Element | null;
-        context: unknown;
-        setState<K extends keyof IDataViewState>(state: IDataViewState | ((prevState: Readonly<IDataViewState>, props: Readonly<IDataViewProps<T>>) => IDataViewState | Pick<IDataViewState, K> | null) | Pick<IDataViewState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IDataViewProps<T>>;
-        state: Readonly<IDataViewState>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<IDataViewProps<T>>, nextState: Readonly<IDataViewState>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<IDataViewProps<T>>, prevState: Readonly<IDataViewState>): any;
-        componentDidUpdate?(prevProps: Readonly<IDataViewProps<T>>, prevState: Readonly<IDataViewState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<IDataViewProps<T>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IDataViewProps<T>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<IDataViewProps<T>>, nextState: Readonly<IDataViewState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<IDataViewProps<T>>, nextState: Readonly<IDataViewState>, nextContext: any): void;
-    };
-    contextType?: React.Context<any> | undefined;
-};
+declare function createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>>;
 export default createDataView;

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

@@ -0,0 +1,87 @@
+import React, { PropsWithChildren } from 'react';
+import { BoxProps } from '@mui/material';
+import { IPositionElement } from './types';
+import { IDataViewContext } from './context';
+export declare const filterBarClasses: {
+    root: string;
+    content: string;
+    input: string;
+    inputWrap: string;
+    label: string;
+    button: string;
+    spacing: string;
+    panel: string;
+    sticky: string;
+    shadow: string;
+    helpText: string;
+};
+export interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {
+    wrapProps?: BoxProps;
+}
+export interface IFilterBarProps extends PropsWithChildren {
+    slots?: IFilterBarSlots;
+}
+export declare function createFilterBar<T>(): {
+    new (props: IFilterBarProps): {
+        dataViewContext: IDataViewContext<T>;
+        refInput: HTMLInputElement | null;
+        refBeforeInput: HTMLElement | null;
+        render(): React.ReactNode;
+        getRootClasses: () => string;
+        handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+        handleEnterSearch: () => void;
+        handleClear: () => void;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IFilterBarProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<IFilterBarProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IFilterBarProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IFilterBarProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: IFilterBarProps, context: any): {
+        dataViewContext: IDataViewContext<T>;
+        refInput: HTMLInputElement | null;
+        refBeforeInput: HTMLElement | null;
+        render(): React.ReactNode;
+        getRootClasses: () => string;
+        handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+        handleEnterSearch: () => void;
+        handleClear: () => void;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IFilterBarProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<IFilterBarProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IFilterBarProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IFilterBarProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IFilterBarProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default createFilterBar;

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

@@ -0,0 +1,10 @@
+import { ComponentType } from 'react';
+import { IFilterConfigs, IValidationResult } from './types';
+export interface IFilterMenuProps {
+}
+export interface IFilterMenuState<T> {
+    fieldSelected: keyof IFilterConfigs<T> | null;
+    validationResult?: IValidationResult;
+}
+declare function createFilterMenu<T>(): ComponentType<IFilterMenuProps>;
+export default createFilterMenu;

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

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react';
+import { IFilterState } from './types';
+export interface IPaginationBarConfigs {
+    rowsPerPageOptions?: number[];
+    disableScrollLock?: boolean;
+}
+export interface IPaginationBarProps<T> extends IPaginationBarConfigs {
+    count?: number;
+    filter?: IFilterState<T>;
+    defaultFilter?: IFilterState<T>;
+    onChange?: (value: IFilterState<T>) => void;
+}
+export type IPaginationBarParams<T> = Pick<IPaginationBarProps<T>, 'defaultFilter' | 'rowsPerPageOptions'>;
+export declare function createPaginationBar<T>(): ComponentType<IPaginationBarProps<T>>;
+export default createPaginationBar;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { IDataViewContext } from './context';
+export declare function createPopperPanel<T>(): {
+    new (props: {}): {
+        render(): React.ReactNode;
+        renderPanelContent: (context: IDataViewContext<T>) => import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: {}, context: any): {
+        render(): React.ReactNode;
+        renderPanelContent: (context: IDataViewContext<T>) => import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default createPopperPanel;

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

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+export interface ISearchMatchProps {
+}
+declare function createSearchMatch<T>(): ComponentType<ISearchMatchProps>;
+export default createSearchMatch;

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

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+export interface ISortMenuProps {
+}
+declare function createSortMenu<T>(): ComponentType<any>;
+export default createSortMenu;

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

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types';
+interface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {
+}
+interface IViewModeProps<T extends IViewModeValidModel> {
+    data: T[];
+    viewMode?: EViewMode;
+    ready?: boolean;
+    loading?: boolean;
+    error?: string;
+    slots?: IViewModeSlots<T>;
+}
+export declare function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>>;
+export {};

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { GridValueFormatterParams } from '@mui/x-data-grid';
+import { createFilterStore } from './filter-store';
+import { createViewMode } from './create.view-mode';
+import createPaginationBar from './create.pagination-bar';
+import createDataView from './create.data-view';
+export interface IFormatterDateOptions {
+    formatString?: string;
+    showRelative?: boolean;
+}
+declare class DinoDataViewBase {
+    createDataView: typeof createDataView;
+    createKeyConverter: <T, Q>(params: import("./key-converter").IKeyConverterModel<T, Q>) => import("./key-converter").IKeyConverterModel<T, Q>;
+    createConvertFilterToGraphQL: <T, G extends object>(params: import("./convert-filter-to-graphql").IFilterToGraphQLParams<T, G>) => import("./convert-filter-to-graphql").default<T, G>;
+    createFilterStore: typeof createFilterStore;
+    createPaginationBar: typeof createPaginationBar;
+    createViewMode: typeof createViewMode;
+    createViewModeButtons: () => import("react").FC<import("./view-mode.units").IViewModeProps>;
+    syncQueryToURL: <T>(params: import("./query-param-url").IViewDataHandlerParams<T, "filter" | "defaultFilter" | "seedKey">) => void;
+    getQueryFromURL: <T>(params: import("./query-param-url").IViewDataHandlerParams<T, "defaultFilter" | "defaultSeedKey">) => {
+        filter: import("./types").IFilterState<T>;
+        seedKey: string;
+    } | null;
+    getSeedKeyFromURL: <T>(params: import("./query-param-url").IViewDataHandlerParams<T, "defaultSeedKey">) => string;
+    syncViewModeToURL: <T>(params: import("./query-param-url").IViewDataHandlerParams<T, "viewMode" | "defaultViewMode">) => void;
+    getViewModeFromURL: <T>(params: import("./query-param-url").IViewDataHandlerParams<T, "defaultViewMode">) => import("./view-mode.types").EViewMode | undefined;
+    converFilterToQueryParam: <T>(filterState?: import("./types").IFilterState<T> | undefined) => string;
+    formatterDate: (value: any, options?: IFormatterDateOptions) => string;
+    valueFormatterDate: (options?: IFormatterDateOptions) => (params: GridValueFormatterParams<any>) => string;
+}
+export declare const DinoDataView: DinoDataViewBase;
+export default DinoDataView;