dinocollab-core 2.2.14 → 2.2.15

package/dist/src/table/toolbar-pannel.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-pannel.js","sources":["../../../src/table/toolbar-pannel.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid'\r\nimport { GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter } from '@mui/x-data-grid'\r\nimport { Box, BoxProps, styled, Typography } from '@mui/material'\r\nimport { BtnFormCreate } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig, HelpTooltip } from '../components'\r\nimport { IExportCsvOptionsModel } from './csv-export-helper'\r\nimport { CustomExportButton } from './custom.export-button'\r\n\r\nexport interface IToolbarPannelToolbarConfig {\r\n  columns?: boolean\r\n  filters?: boolean\r\n  density?: boolean\r\n  export?: boolean\r\n}\r\n\r\nexport interface IToolbarPannelProps {\r\n  title?: React.ReactNode\r\n  titleProps?: BoxProps\r\n  icon?: React.ReactNode\r\n  afterTitle?: React.ReactNode\r\n  searchInclude?: string[]\r\n  visibilityToolbar?: IToolbarPannelToolbarConfig\r\n  formCreate?: React.ReactNode\r\n  breadcrumbs?: IBreadcrumbConfig[]\r\n  afterAction?: React.ReactNode\r\n  belowAction?: React.ReactNode\r\n  aboveAction?: React.ReactNode\r\n  actionWrapProps?: BoxProps\r\n  sx?: BoxProps['sx']\r\n  exportCsvOptions?: IExportCsvOptionsModel\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n  render() {\r\n    return (\r\n      <ToolbarPannelStyled className={toolbarPannelClasses.root} sx={this.props.sx}>\r\n        {this.renderTitle()}\r\n        {this.props.aboveAction}\r\n        <Box className={toolbarPannelClasses.actionsRow} {...this.props.actionWrapProps}>\r\n          <Box className={toolbarPannelClasses.actionsLeft}>\r\n            <Box className={toolbarPannelClasses.gridToolbar}>\r\n              {this.props.visibilityToolbar?.columns !== false && <GridToolbarColumnsButton />}\r\n              {this.props.visibilityToolbar?.filters !== false && <GridToolbarFilterButton />}\r\n              {this.props.visibilityToolbar?.density !== false && <GridToolbarDensitySelector />}\r\n              {this.props.visibilityToolbar?.export !== false && <CustomExportButton csvOptions={this.props.exportCsvOptions} />}\r\n            </Box>\r\n            {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n            {this.props.afterAction}\r\n          </Box>\r\n          <Box className={toolbarPannelClasses.actionsRight}>\r\n            <Box className={toolbarPannelClasses.quickFilterWrap}>\r\n              <GridToolbarQuickFilter fullWidth variant='standard' size='small' debounceMs={800} quickFilterParser={(x: any) => [x]} />\r\n              {this.renderEndAdornment()}\r\n            </Box>\r\n          </Box>\r\n        </Box>\r\n        {this.props.belowAction}\r\n      </ToolbarPannelStyled>\r\n    )\r\n  }\r\n\r\n  renderTitle = () => {\r\n    const { title, afterTitle, breadcrumbs, icon } = this.props\r\n    const titleClassName = `${toolbarPannelClasses.titleWrap}${this.props.titleProps?.className ? ` ${this.props.titleProps.className}` : ''}`\r\n\r\n    const isVisible = !!title || !!breadcrumbs || !!afterTitle\r\n    if (!isVisible) return <></>\r\n\r\n    let titleElm = title\r\n    if (typeof title === 'string') {\r\n      titleElm = (\r\n        <Typography noWrap variant='subtitle1' className={toolbarPannelClasses.titleText}>\r\n          {title}\r\n        </Typography>\r\n      )\r\n    }\r\n    if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n    return (\r\n      <Box {...this.props.titleProps} className={titleClassName}>\r\n        {icon && <div className={toolbarPannelClasses.icon}>{icon}</div>}\r\n        {titleElm}\r\n        {afterTitle}\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  renderEndAdornment = () => {\r\n    if (!this.props.searchInclude || this.props.searchInclude.length <= 0) return <></>\r\n    return (\r\n      <HelpTooltip title='The search includes' small>\r\n        <ul className={toolbarPannelClasses.searchHelp}>\r\n          {this.props.searchInclude.map((item, index) => (\r\n            <li key={index}>\r\n              <Typography variant='body2'>{item}</Typography>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </HelpTooltip>\r\n    )\r\n  }\r\n}\r\nexport default ToolbarPannel\r\n\r\nconst toolbarPannelClasses = {\r\n  root: 'Dino-ToolbarPannel-root',\r\n  actionsRow: 'Dino-ToolbarPannel-actionsRow',\r\n  actionsLeft: 'Dino-ToolbarPannel-actionsLeft',\r\n  actionsRight: 'Dino-ToolbarPannel-actionsRight',\r\n  quickFilterWrap: 'Dino-ToolbarPannel-quickFilterWrap',\r\n  gridToolbar: 'Dino-ToolbarPannel-gridToolbar',\r\n  titleWrap: 'Dino-ToolbarPannel-titleWrap',\r\n  titleText: 'Dino-ToolbarPannel-titleText',\r\n  searchHelp: 'Dino-ToolbarPannel-searchHelp',\r\n  icon: 'Dino-ToolbarPannel-icon'\r\n}\r\n\r\nconst ToolbarPannelStyled = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(1, 2, 0),\r\n  [`.${toolbarPannelClasses.actionsRow}`]: { display: 'flex', flexWrap: 'wrap' },\r\n  [`.${toolbarPannelClasses.actionsLeft}`]: { flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' },\r\n  [`.${toolbarPannelClasses.actionsRight}`]: {\r\n    display: 'flex',\r\n    gap: '8px',\r\n    alignItems: 'center',\r\n    width: 'auto',\r\n    [theme.breakpoints.down('md')]: { width: '100%' }\r\n  },\r\n  [`.${toolbarPannelClasses.quickFilterWrap}`]: { display: 'flex', alignItems: 'center' },\r\n  [`.${toolbarPannelClasses.gridToolbar}`]: { padding: 0 },\r\n  [`.${toolbarPannelClasses.titleWrap}`]: { height: 'var(--height-table-topbar, 48px)', display: 'flex', alignItems: 'center' },\r\n  [`.${toolbarPannelClasses.titleText}`]: { fontWeight: 700, flex: 1 },\r\n  [`.${toolbarPannelClasses.icon}`]: {\r\n    marginRight: 8,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    flex: '0 0 auto'\r\n  },\r\n  [`.${toolbarPannelClasses.searchHelp}`]: {\r\n    margin: '0 0 0 18px',\r\n    padding: 0,\r\n    li: { position: 'relative' },\r\n    'li::after': {\r\n      content: '\"►\"',\r\n      display: 'inline-block',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      position: 'absolute',\r\n      left: '-18px'\r\n    }\r\n  },\r\n  [theme.breakpoints.down('md')]: { padding: theme.spacing(1, 1, 0) }\r\n}))\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props$titleProp","_this$props","props","title","afterTitle","breadcrumbs","icon","titleClassName","toolbarPannelClasses","titleWrap","titleProps","className","_jsx","titleElm","Typography","noWrap","variant","titleText","Breadcrumbs","value","_jsxs","Box","_objectSpread","children","searchInclude","HelpTooltip","small","searchHelp","map","item","index","_inherits","Component","_createClass","key","_this$props$visibilit","_this$props$visibilit2","_this$props$visibilit3","_this$props$visibilit4","ToolbarPannelStyled","root","sx","renderTitle","aboveAction","actionsRow","actionWrapProps","actionsLeft","gridToolbar","visibilityToolbar","columns","GridToolbarColumnsButton","filters","GridToolbarFilterButton","density","GridToolbarDensitySelector","CustomExportButton","csvOptions","exportCsvOptions","formCreate","BtnFormCreate","afterAction","actionsRight","quickFilterWrap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","belowAction","styled","_ref","theme","padding","spacing","display","flexWrap","flex","alignItems","gap","width","breakpoints","down","height","fontWeight","marginRight","justifyContent","margin","li","position","content","top","transform","left"],"mappings":"+rBAiCMA,IAAAA,aAAc,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAoEjB,OApEiBP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,cA6BJ,WAAK,IAAAY,EACjBC,EAAiDb,EAAKc,MAA9CC,EAAKF,EAALE,MAAOC,EAAUH,EAAVG,WAAYC,EAAWJ,EAAXI,YAAaC,EAAIL,EAAJK,KAClCC,EAAcT,GAAAA,OAAMU,EAAqBC,WAASX,OAAwBE,QAArBA,EAAAZ,EAAKc,MAAMQ,sBAAUV,GAArBA,EAAuBW,UAAS,IAAAb,OAAOV,EAAKc,MAAMQ,WAAWC,WAAc,IAGtI,OADoBR,KAAWE,KAAiBD,GAChC,OAAOQ,QAEvB,IAAIC,EAAWV,EAUf,MATqB,iBAAVA,IACTU,EACED,EAACE,GAAWC,QAAM,EAACC,QAAQ,YAAYL,UAAWH,EAAqBS,mBACpEd,KAIHE,IAAaQ,EAAWD,EAACM,EAAW,CAACC,MAAOd,KAG9Ce,EAACC,EAAGC,EAAAA,EAAA,GAAKlC,EAAKc,MAAMQ,YAAU,GAAA,CAAEC,UAAWJ,EACxCgB,SAAA,CAAAjB,GAAQM,EAAA,MAAA,CAAKD,UAAWH,EAAqBF,KAAOiB,SAAAjB,IACpDO,EACAT,QAGNL,EAAAX,EAAA,qBAEoB,WACnB,OAAKA,EAAKc,MAAMsB,eAAiBpC,EAAKc,MAAMsB,cAAchC,QAAU,EAAUoB,QAE5EA,EAACa,EAAW,CAACtB,MAAM,sBAAsBuB,OACvC,EAAAH,SAAAX,EAAA,KAAA,CAAID,UAAWH,EAAqBmB,WACjCJ,SAAAnC,EAAKc,MAAMsB,cAAcI,IAAI,SAACC,EAAMC,GAAK,OACxClB,EACE,KAAA,CAAAW,SAAAX,EAACE,EAAU,CAACE,QAAQ,QAASO,SAAAM,KADtBC,EAGV,SAIR1C,CAAA,CAAA,OAAA2C,EAAA5C,EApEyB6C,GAoEzBC,EAAA9C,EAAA,CAAA,CAAA+C,IAAA,SAAAf,MAnED,WAAM,IAAAgB,EAAAC,EAAAC,EAAAC,EACJ,OACElB,EAACmB,EAAmB,CAAC5B,UAAWH,EAAqBgC,KAAMC,GAAI5C,KAAKK,MAAMuC,GAAElB,SAAA,CACzE1B,KAAK6C,cACL7C,KAAKK,MAAMyC,YACZvB,EAACC,EAAGC,EAAAA,EAAA,CAACX,UAAWH,EAAqBoC,YAAgB/C,KAAKK,MAAM2C,iBAAe,CAAA,EAAA,CAC7EtB,SAAA,CAAAH,EAACC,EAAI,CAAAV,UAAWH,EAAqBsC,sBACnC1B,EAACC,GAAIV,UAAWH,EAAqBuC,YAClCxB,SAAA,EAA0C,KAAd,QAA5BY,OAAKjC,MAAM8C,yBAAXb,IAA4BA,OAA5BA,EAAAA,EAA8Bc,UAAqBrC,EAACsC,EAAwB,CAAA,IAClC,KAAd,QAA5Bd,OAAKlC,MAAM8C,yBAAXZ,IAA4BA,OAA5BA,EAAAA,EAA8Be,UAAqBvC,EAACwC,EAA0B,CAAA,IACpC,KAAd,QAA5Bf,OAAKnC,MAAM8C,yBAAXX,IAA4BA,OAA5BA,EAAAA,EAA8BgB,UAAqBzC,EAAC0C,EAA6B,CAAA,IACxC,KAAb,QAA5BhB,OAAKpC,MAAM8C,yBAAXV,IAA4BA,OAA5BA,EAAAA,WAAkD1B,EAAC2C,EAAkB,CAACC,WAAY3D,KAAKK,MAAMuD,sBAE/F5D,KAAKK,MAAMwD,YAAc9C,EAAC+C,EAAa,CAAApC,SAAE1B,KAAKK,MAAMwD,aACpD7D,KAAKK,MAAM0D,eAEdhD,EAACS,EAAG,CAACV,UAAWH,EAAqBqD,aACnCtC,SAAAH,EAACC,EAAI,CAAAV,UAAWH,EAAqBsD,gBACnCvC,SAAA,CAAAX,EAACmD,EAAsB,CAACC,WAAS,EAAChD,QAAQ,WAAWiD,KAAK,QAAQC,WAAY,IAAKC,kBAAmB,SAACC,GAAM,MAAK,CAACA,EAAE,IACpHvE,KAAKwE,8BAIXxE,KAAKK,MAAMoE,cAGlB,IAAC,IA6CG9D,EAAuB,CAC3BgC,KAAM,0BACNI,WAAY,gCACZE,YAAa,iCACbe,aAAc,kCACdC,gBAAiB,qCACjBf,YAAa,iCACbtC,UAAW,+BACXQ,UAAW,+BACXU,WAAY,gCACZrB,KAAM,2BAGFiC,EAAsBgC,EAAOlD,EAAPkD,CAAY,SAAAC,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAA1E,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAC9C2E,QAASD,EAAME,QAAQ,EAAG,EAAG,IAAE,IAAA7E,OAC1BU,EAAqBoC,YAAe,CAAEgC,QAAS,OAAQC,SAAU,aAAQ/E,OACzEU,EAAqBsC,aAAgB,CAAEgC,KAAM,EAAGF,QAAS,OAAQG,WAAY,SAAUF,SAAU,aAAQ/E,OACzGU,EAAqBqD,cAAY9D,EAAA,CACpC6E,QAAS,OACTI,IAAK,MACLD,WAAY,SACZE,MAAO,QACNR,EAAMS,YAAYC,KAAK,MAAQ,CAAEF,MAAO,cAAQnF,OAE9CU,EAAqBsD,iBAAoB,CAAEc,QAAS,OAAQG,WAAY,eAAUjF,OAClFU,EAAqBuC,aAAgB,CAAE2B,QAAS,QAAG5E,OACnDU,EAAqBC,WAAc,CAAE2E,OAAQ,mCAAoCR,QAAS,OAAQG,WAAY,eAAUjF,OACxHU,EAAqBS,WAAc,CAAEoE,WAAY,IAAKP,KAAM,QAAGhF,OAC/DU,EAAqBF,MAAS,CACjCgF,YAAa,EACbV,QAAS,OACTG,WAAY,SACZQ,eAAgB,SAChBT,KAAM,iBACPhF,OACIU,EAAqBmB,YAAe,CACvC6D,OAAQ,aACRd,QAAS,EACTe,GAAI,CAAEC,SAAU,YAChB,YAAa,CACXC,QAAS,MACTf,QAAS,eACTgB,IAAK,MACLC,UAAW,mBACXH,SAAU,WACVI,KAAM,WAGTrB,EAAMS,YAAYC,KAAK,MAAQ,CAAET,QAASD,EAAME,QAAQ,EAAG,EAAG,IAAI"}
+{"version":3,"file":"toolbar-pannel.js","sources":["../../../src/table/toolbar-pannel.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid'\r\nimport { GridToolbarFilterButton, GridToolbarQuickFilter } from '@mui/x-data-grid'\r\nimport { Box, BoxProps, GlobalStyles, styled, Typography } from '@mui/material'\r\nimport { BtnFormCreate } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig, HelpTooltip } from '../components'\r\nimport { IExportCsvOptionsModel } from './csv-export-helper'\r\nimport { CustomExportButton } from './custom.export-button'\r\n\r\nexport interface IToolbarPannelToolbarConfig {\r\n  columns?: boolean\r\n  filters?: boolean\r\n  density?: boolean\r\n  export?: boolean\r\n}\r\n\r\nexport interface IToolbarPannelProps {\r\n  title?: React.ReactNode\r\n  titleProps?: BoxProps\r\n  icon?: React.ReactNode\r\n  afterTitle?: React.ReactNode\r\n  searchInclude?: string[]\r\n  visibilityToolbar?: IToolbarPannelToolbarConfig\r\n  formCreate?: React.ReactNode\r\n  breadcrumbs?: IBreadcrumbConfig[]\r\n  afterAction?: React.ReactNode\r\n  belowAction?: React.ReactNode\r\n  aboveAction?: React.ReactNode\r\n  actionWrapProps?: BoxProps\r\n  sx?: BoxProps['sx']\r\n  exportCsvOptions?: IExportCsvOptionsModel\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n  private _popperObserver: MutationObserver | null = null\r\n  private _elementObserver: MutationObserver | null = null\r\n  private _observedPopper: HTMLElement | null = null\r\n\r\n  componentDidMount() {\r\n    // observe DOM for filter popper being added; when found, observe + fix transform on mobile\r\n    this._popperObserver = new MutationObserver(() => {\r\n      // selector based on class visible in DevTools (no MuiPopper-root prefix)\r\n      const popper = document.querySelector('.MuiDataGrid-panel') as HTMLElement | null\r\n      if (!popper) return\r\n      if (!window.matchMedia('(max-width:768px)').matches) return\r\n      if (this._observedPopper === popper) return\r\n\r\n      this._observedPopper = popper\r\n\r\n      const applyFix = () => {\r\n        // extract Y from current transform, keep it; force X = 8px\r\n        const raw = popper.style.transform || ''\r\n        const m = raw.match(/translate3d\\([^,]+,\\s*([^,]+),\\s*[^\\)]+\\)/)\r\n        const y = m ? m[1].trim() : '0px'\r\n        popper.style.transform = `translate3d(8px, ${y}, 0px)`\r\n      }\r\n\r\n      applyFix()\r\n\r\n      // re-apply every time Popper writes a new inline transform\r\n      if (this._elementObserver) this._elementObserver.disconnect()\r\n      this._elementObserver = new MutationObserver((muts) => {\r\n        for (const mut of muts) {\r\n          if (mut.attributeName === 'style') {\r\n            // guard: avoid infinite loop — only re-apply if X is not already 8px\r\n            const cur = popper.style.transform || ''\r\n            if (!cur.startsWith('translate3d(8px')) applyFix()\r\n          }\r\n        }\r\n      })\r\n      this._elementObserver.observe(popper, { attributes: true, attributeFilter: ['style'] })\r\n    })\r\n\r\n    this._popperObserver.observe(document.body, { childList: true, subtree: true })\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if (this._popperObserver) {\r\n      this._popperObserver.disconnect()\r\n      this._popperObserver = null\r\n    }\r\n    if (this._elementObserver) {\r\n      this._elementObserver.disconnect()\r\n      this._elementObserver = null\r\n    }\r\n    this._observedPopper = null\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <GlobalStyles\r\n          styles={{\r\n            '@media (max-width:768px)': {\r\n              '.MuiDataGrid-panel': {\r\n                left: '8px !important',\r\n                overflow: 'hidden',\r\n                maxWidth: 'calc(100svw - 16px)',\r\n                width: '100%',\r\n                '.MuiPaper-root, .MuiDataGrid-paper': { margin: '0 8px' },\r\n                '.MuiDataGrid-panelContent': {\r\n                  overflow: 'auto',\r\n                  '.MuiFormControl-root': { width: 'auto' },\r\n                  '.MuiDataGrid-filterFormValueInput': { width: '100px' }\r\n                }\r\n              }\r\n            }\r\n          }}\r\n        />\r\n        <ToolbarPannelStyled className={toolbarPannelClasses.root} sx={this.props.sx}>\r\n          {this.renderTitle()}\r\n          {this.props.aboveAction}\r\n          <Box className={toolbarPannelClasses.actionsRow} {...this.props.actionWrapProps}>\r\n            <Box className={toolbarPannelClasses.actionsLeft}>\r\n              <Box className={toolbarPannelClasses.gridToolbar}>\r\n                {this.props.visibilityToolbar?.columns !== false && <GridToolbarColumnsButton />}\r\n                {this.props.visibilityToolbar?.filters !== false && <GridToolbarFilterButton />}\r\n                {this.props.visibilityToolbar?.density !== false && <GridToolbarDensitySelector />}\r\n                {this.props.visibilityToolbar?.export !== false && <CustomExportButton csvOptions={this.props.exportCsvOptions} />}\r\n              </Box>\r\n              {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n              {this.props.afterAction}\r\n            </Box>\r\n            <Box className={toolbarPannelClasses.actionsRight}>\r\n              <Box className={toolbarPannelClasses.quickFilterWrap}>\r\n                <GridToolbarQuickFilter fullWidth variant='standard' size='small' debounceMs={800} quickFilterParser={(x: any) => [x]} />\r\n                {this.renderEndAdornment()}\r\n              </Box>\r\n            </Box>\r\n          </Box>\r\n          {this.props.belowAction}\r\n        </ToolbarPannelStyled>\r\n      </>\r\n    )\r\n  }\r\n\r\n  renderTitle = () => {\r\n    const { title, afterTitle, breadcrumbs, icon } = this.props\r\n    const titleClassName = `${toolbarPannelClasses.titleWrap}${this.props.titleProps?.className ? ` ${this.props.titleProps.className}` : ''}`\r\n\r\n    const isVisible = !!title || !!breadcrumbs || !!afterTitle\r\n    if (!isVisible) return <></>\r\n\r\n    let titleElm = title\r\n    if (typeof title === 'string') {\r\n      titleElm = (\r\n        <Typography noWrap variant='subtitle1' className={toolbarPannelClasses.titleText}>\r\n          {title}\r\n        </Typography>\r\n      )\r\n    }\r\n    if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n    return (\r\n      <Box {...this.props.titleProps} className={titleClassName}>\r\n        {icon && <div className={toolbarPannelClasses.icon}>{icon}</div>}\r\n        {titleElm}\r\n        {afterTitle}\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  renderEndAdornment = () => {\r\n    if (!this.props.searchInclude || this.props.searchInclude.length <= 0) return <></>\r\n    return (\r\n      <HelpTooltip title='The search includes' small>\r\n        <ul className={toolbarPannelClasses.searchHelp}>\r\n          {this.props.searchInclude.map((item, index) => (\r\n            <li key={index}>\r\n              <Typography variant='body2'>{item}</Typography>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </HelpTooltip>\r\n    )\r\n  }\r\n}\r\nexport default ToolbarPannel\r\n\r\nconst toolbarPannelClasses = {\r\n  root: 'Dino-ToolbarPannel-root',\r\n  actionsRow: 'Dino-ToolbarPannel-actionsRow',\r\n  actionsLeft: 'Dino-ToolbarPannel-actionsLeft',\r\n  actionsRight: 'Dino-ToolbarPannel-actionsRight',\r\n  quickFilterWrap: 'Dino-ToolbarPannel-quickFilterWrap',\r\n  gridToolbar: 'Dino-ToolbarPannel-gridToolbar',\r\n  titleWrap: 'Dino-ToolbarPannel-titleWrap',\r\n  titleText: 'Dino-ToolbarPannel-titleText',\r\n  searchHelp: 'Dino-ToolbarPannel-searchHelp',\r\n  icon: 'Dino-ToolbarPannel-icon'\r\n}\r\n\r\nconst ToolbarPannelStyled = styled(Box)(({ theme }) => ({\r\n  padding: theme.spacing(1, 2, 0),\r\n  [`.${toolbarPannelClasses.actionsRow}`]: { display: 'flex', flexWrap: 'wrap' },\r\n  [`.${toolbarPannelClasses.actionsLeft}`]: { flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' },\r\n  [`.${toolbarPannelClasses.actionsRight}`]: {\r\n    display: 'flex',\r\n    gap: '8px',\r\n    alignItems: 'center',\r\n    width: 'auto',\r\n    [theme.breakpoints.down('md')]: { width: '100%' }\r\n  },\r\n  [`.${toolbarPannelClasses.quickFilterWrap}`]: { display: 'flex', alignItems: 'center' },\r\n  [`.${toolbarPannelClasses.gridToolbar}`]: { padding: 0 },\r\n  [`.${toolbarPannelClasses.titleWrap}`]: { height: 'var(--height-table-topbar, 48px)', display: 'flex', alignItems: 'center' },\r\n  [`.${toolbarPannelClasses.titleText}`]: { fontWeight: 700, flex: 1 },\r\n  [`.${toolbarPannelClasses.icon}`]: {\r\n    marginRight: 8,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    flex: '0 0 auto'\r\n  },\r\n  [`.${toolbarPannelClasses.searchHelp}`]: {\r\n    margin: '0 0 0 18px',\r\n    padding: 0,\r\n    li: { position: 'relative' },\r\n    'li::after': {\r\n      content: '\"►\"',\r\n      display: 'inline-block',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      position: 'absolute',\r\n      left: '-18px'\r\n    }\r\n  },\r\n  [theme.breakpoints.down('md')]: { padding: theme.spacing(1, 1, 0) }\r\n}))\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props$titleProp","_this$props","props","title","afterTitle","breadcrumbs","icon","titleClassName","toolbarPannelClasses","titleWrap","titleProps","className","_jsx","titleElm","Typography","noWrap","variant","titleText","Breadcrumbs","value","_jsxs","Box","_objectSpread","children","searchInclude","HelpTooltip","small","searchHelp","map","item","index","_inherits","Component","_createClass","key","_this2","_popperObserver","MutationObserver","popper","document","querySelector","window","matchMedia","matches","_observedPopper","applyFix","m","style","transform","match","y","trim","_elementObserver","disconnect","muts","_step","_iterator","_createForOfIteratorHelper","s","n","done","attributeName","startsWith","err","e","f","observe","attributes","attributeFilter","body","childList","subtree","_this$props$visibilit","_this$props$visibilit2","_this$props$visibilit3","_this$props$visibilit4","_Fragment","GlobalStyles","styles","left","overflow","maxWidth","width","margin","ToolbarPannelStyled","root","sx","renderTitle","aboveAction","actionsRow","actionWrapProps","actionsLeft","gridToolbar","visibilityToolbar","columns","GridToolbarColumnsButton","filters","GridToolbarFilterButton","density","GridToolbarDensitySelector","CustomExportButton","csvOptions","exportCsvOptions","formCreate","BtnFormCreate","afterAction","actionsRight","quickFilterWrap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","belowAction","styled","_ref","theme","padding","spacing","display","flexWrap","flex","alignItems","gap","breakpoints","down","height","fontWeight","marginRight","justifyContent","li","position","content","top"],"mappings":"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"}

package/dist/table/index.js

@@ -1,2 +1,2 @@
-export{ELogic,EOperator,EOrder}from"../src/table/model-filter.js";import"react/jsx-runtime";import"react";import"@mui/material";import"@mui/icons-material/Edit";import"@mui/icons-material/Delete";import"dayjs";import"../src/utils/dayjs-config.js";import"../src/utils/query-param.js";export{CreateTable}from"../src/table/create.table.js";export{default as DinoTable}from"../src/table/dino.js";export{dinoTableClasses}from"../src/table/helpers.js";
+export{ELogic,EOperator,EOrder}from"../src/table/model-filter.js";import"react/jsx-runtime";import"react";import"@mui/material";import"@mui/icons-material/Edit";import"@mui/icons-material/Delete";import"dayjs";import"../src/utils/dayjs-config.js";import"../src/utils/query-param.js";export{CreateTable}from"../src/table/create.table.js";export{default as DinoTable}from"../src/table/dino.js";export{dinoTableClasses}from"../src/table/styled.js";
 //# sourceMappingURL=index.js.map

package/dist/types/components/image-with-fallback.d.ts

@@ -1,9 +1,14 @@
 import type { FC, ImgHTMLAttributes, ReactNode } from 'react';
 export interface IImageWithFallbackPropsOwner {
+    /** The source URL of the image */
     src?: string;
+    /** The alt text for the image */
     alt?: string;
-    fallbackSrc: string;
-    loading?: ReactNode;
+    /** The fallback source(s) to use if the main image fails to load */
+    fallbackSrc?: string | string[];
+    /** The loading indicator to display while the image is loading */
+    loading?: ReactNode | ((isLoading: boolean) => ReactNode);
+    /** The debounce delay in milliseconds */
     debounceDelay?: number;
 }
 export type IImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, keyof IImageWithFallbackPropsOwner>;

package/dist/types/data-surface/helpers.d.ts

@@ -9,11 +9,13 @@ export interface IPaginationQueryParams {
     pageSize?: string;
 }
 /**
- * @en Synchronize pagination to URL query parameters. If pagination equals defaultPagination, remove from URL to keep it clean.
- * @vi Dong bo pagination vao URL query parameters. Neu pagination bang defaultPagination, xoa khoi URL de giu URL sach.
+ * @en Synchronize pagination to URL query parameters. Each field is handled independently:
+ *     if it differs from default → add to URL; if same or undefined → remove from URL.
+ * @vi Dong bo pagination vao URL query parameters. Tung field duoc xu ly doc lap:
+ *     neu khac default → them vao URL; neu bang hoac undefined → xoa khoi URL.
  *
  * @param pagination - Current pagination to sync
- * @param defaultPagination - Default pagination (if current equals this, don't save to URL)
+ * @param defaultPagination - Default pagination values used as baseline
  */
 export declare function setPaginationToURL(pagination?: TPagination, defaultPagination?: TPagination): void;
 /**

package/dist/types/filter-bar/components/filter-summary.types.d.ts

@@ -1,8 +1,9 @@
 import { BoxProps } from '@mui/material';
-import type { TFieldType } from '../types';
+import type { TFieldType, TFieldValid } from '../types';
 export interface IFieldSummaryConfig<T> {
     field: TFieldType<T>;
     label?: string;
+    labelFormatter?: (value: TFieldValid) => string | undefined;
 }
 export type TFieldSummaryConfigs<T> = Partial<Record<TFieldType<T>, Omit<IFieldSummaryConfig<T>, 'field'>>>;
 export interface IFilterSummaryConfig<T> {

package/dist/types/filter-bar/components/hint-icon.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { TFieldType } from '../types';
+import type { TFieldType } from '../types';
 export type THintConfig = {
     title: ReactNode;
     content: ReactNode;

package/dist/types/filter-bar/components/popper-custom.d.ts

@@ -16,6 +16,7 @@ export interface PopperContentProps extends BoxProps {
     onClose?: ButtonProps['onClick'];
     disableGutter?: boolean;
     disableMinMaxWidth?: boolean;
+    anchorEl?: HTMLElement | null;
     slots?: {
         afterTitle?: React.ReactNode;
         beforeTitle?: React.ReactNode;

package/dist/types/filter-bar/components/ui.units.d.ts

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import type { ToggleButtonGroupProps } from '@mui/material';
-import type { TLogic } from '../types';
+import type { TDateLogic, TLogic } from '../types';
 interface IFilterMenuNoFieldProps {
     onClose: () => void;
 }
@@ -19,4 +19,11 @@ export interface FilterLogicToggleProps {
     sx?: ToggleButtonGroupProps['sx'];
 }
 export declare const FilterLogicToggle: FC<FilterLogicToggleProps>;
+type TDateSingleLogic = Exclude<TDateLogic, 'range'>;
+export interface DateLogicToggleProps {
+    value?: TDateSingleLogic;
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: TDateSingleLogic) => void;
+    sx?: ToggleButtonGroupProps['sx'];
+}
+export declare const DateLogicToggle: FC<DateLogicToggleProps>;
 export {};

package/dist/types/filter-bar/index.d.ts

@@ -4,3 +4,5 @@ export * from './components/hint-icon';
 export * from './convert-to-graphql';
 export * from './local-filter-builder';
 export * from './index.dino';
+export type { IFieldSelectOption } from './menu/create-form-field-select';
+export type { IFormFieldDateTimeParam, TDateTimePickerType, TDateTimeMode } from './menu/create-form-field-datetime';

package/dist/types/filter-bar/index.dino.d.ts

@@ -3,6 +3,7 @@ import { getFilterFromURL, isEmptyFilterState, isFilterStateEqual, removeNullVal
 import createFormFieldString from './menu/create-form-field-string';
 import createFormFieldSelect from './menu/create-form-field-select';
 import createFormFieldSelectMultiple from './menu/create-form-field-select-multiple';
+import createFormFieldDateTime from './menu/create-form-field-datetime';
 export declare class DinoFilterBar {
     createFilterBar: typeof createFilterBar;
     createConvertToGraphQL: <TSource extends Record<string, any>, TTarget extends object>(state: import("./types").TFilterState<TSource>) => import("./convert-to-graphql").TableFileterConverter<TSource, TTarget>;
@@ -10,6 +11,7 @@ export declare class DinoFilterBar {
     createFormFieldString: typeof createFormFieldString;
     createFormFieldSelect: typeof createFormFieldSelect;
     createFormFieldSelectMultiple: typeof createFormFieldSelectMultiple;
+    createFormFieldDateTime: typeof createFormFieldDateTime;
     mapLogic: (logic?: import("./types").TLogic | undefined) => "Or" | "And";
     mapDirection: (direction?: import("./types").TDirection | undefined) => "ASC" | "DESC";
     isEmptyFilterState: typeof isEmptyFilterState;

package/dist/types/filter-bar/menu/create-form-field-datetime.d.ts

@@ -0,0 +1,53 @@
+import type { FC } from 'react';
+import type { TDateLogic } from '../types';
+import type { IFieldMenuConfig, IFilterMenuFormProps } from './types';
+/** Date logic options available in `single` mode. */
+export type TDateSingleLogic = Exclude<TDateLogic, 'range'>;
+/** The MUI picker variant to render inside the filter menu. */
+export type TDateTimePickerType = 'date' | 'datetime' | 'time';
+/**
+ * Selection mode for the DateTime filter.
+ * - `'single'` — one value per Apply; values accumulate with OR / AND logic.
+ * - `'range'` — two pickers (From / To); always stores exactly `[fromISO, toISO]`.
+ */
+export type TDateTimeMode = 'single' | 'range';
+/** Props for the `FormFieldDateTime` component returned by `createFormFieldDateTime`. Extends the base filter-menu form props. */
+export interface IFormFieldDateTimeProps<T> extends IFilterMenuFormProps<T> {
+}
+/** Parameters passed to `createFormFieldDateTime` to configure the generated component. */
+export interface IFormFieldDateTimeParam<T> {
+    /** Optional field-level configuration overrides. */
+    config?: IFieldMenuConfig<T>;
+    /**
+     * Controls which MUI picker is rendered.
+     * - `'date'` → `DatePicker` (default)
+     * - `'datetime'` → `DateTimePicker`
+     * - `'time'` → `TimePicker`
+     * @default 'datetime'
+     */
+    pickerType?: TDateTimePickerType;
+    /**
+     * Controls the selection mode.
+     * - `'single'` (default) — one value per Apply click; multiple values accumulate with OR / AND logic.
+     * - `'range'` — two pickers (From / To); always stores exactly `[fromISO, toISO]`.
+     * @default 'single'
+     */
+    mode?: TDateTimeMode;
+}
+/**
+ * Factory function that creates a `FormFieldDateTime` filter-menu component.
+ *
+ * The generated component renders a date / time picker inside a popper/menu panel.
+ * It supports two selection modes:
+ * - **single** (default) — user picks one value per submission; values accumulate
+ *   and an OR / AND logic toggle appears when more than one value is active.
+ * - **range** — two pickers rendered (From / To); always stores exactly
+ *   `[fromISO, toISO]`, replacing any previous range on each Apply.
+ *
+ * All stored values are ISO 8601 strings (`TFieldValid = string`).
+ *
+ * @param params - Static configuration (picker type, mode, optional field config override)
+ * @returns A React FC ready to be used as a date/time filter-menu field component
+ */
+declare function createFormFieldDateTime<T>(params?: IFormFieldDateTimeParam<T>): FC<IFormFieldDateTimeProps<T>>;
+export default createFormFieldDateTime;

package/dist/types/filter-bar/menu/create-form-field-select-multiple.d.ts

@@ -1,13 +1,30 @@
 import type { FC } from 'react';
 import type { IFieldSelectOption } from './create-form-field-select';
 import type { IFieldMenuConfig, IFilterMenuFormProps } from './types';
+/** Props for the `FormFieldSelectMultiple` component returned by `createFormFieldSelectMultiple`. Extends the base filter-menu form props. */
 export interface IFormFieldSelectMultipleProps<T> extends IFilterMenuFormProps<T> {
 }
+/** Parameters passed to `createFormFieldSelectMultiple` to configure the generated component. */
 export interface IFormFieldSelectMultipleParam<T> {
     /** Optional configuration for the form field */
     config?: IFieldMenuConfig<T>;
     /** List of options for the select field */
     options: IFieldSelectOption[];
 }
+/**
+ * Factory function that creates a `FormFieldSelectMultiple` filter-menu component.
+ *
+ * The generated component renders a checkbox list of options inside a
+ * popper/menu panel, allowing the user to select **multiple values** at once.
+ * It supports:
+ * - Controlled checkbox state to prevent uncontrolled→controlled React warnings
+ * - OR / AND logic toggle when more than one value is applied
+ * - Chip viewers showing the currently applied values
+ * - Built-in validation via an optional `validator` prop
+ * - A loading overlay that disables interaction while `isLoading` is true
+ *
+ * @param params - Static configuration (option list, optional field config override)
+ * @returns A React FC ready to be used as a multi-select filter-menu field component
+ */
 declare function createFormFieldSelectMultiple<T>(params?: IFormFieldSelectMultipleParam<T>): FC<IFormFieldSelectMultipleProps<T>>;
 export default createFormFieldSelectMultiple;

package/dist/types/filter-bar/menu/create-form-field-select.d.ts

@@ -1,17 +1,34 @@
 import { FC } from 'react';
 import type { IFieldMenuConfig, IFilterMenuFormProps } from './types';
 import type { TFieldValid } from '../types';
+/** Props for the `FormFieldSelect` component returned by `createFormFieldSelect`. Extends the base filter-menu form props. */
 export interface IFormFieldSelectProps<T> extends IFilterMenuFormProps<T> {
 }
+/** A single option item rendered as a radio button inside the select filter menu. */
 export interface IFieldSelectOption {
     value: TFieldValid;
     label?: string;
 }
+/** Parameters passed to `createFormFieldSelect` to configure the generated component. */
 export interface IFormFieldSelectParams<T> {
     /** Optional configuration for the form field */
     config?: IFieldMenuConfig<T>;
     /** List of options for the select field */
     options: IFieldSelectOption[];
 }
+/**
+ * Factory function that creates a `FormFieldSelect` filter-menu component.
+ *
+ * The generated component renders a radio-button list of options inside a
+ * popper/menu panel. It supports:
+ * - Single or multi-value selection (controlled by `config.singleValue`)
+ * - OR / AND logic toggle when more than one value is selected
+ * - Chip viewers showing the currently applied values
+ * - Built-in validation via an optional `validator` prop
+ * - A loading overlay that disables interaction while `isLoading` is true
+ *
+ * @param params - Static configuration (option list, optional field config override)
+ * @returns A React FC ready to be used as a filter-menu field component
+ */
 declare function createFormFieldSelect<T>(params: IFormFieldSelectParams<T>): FC<IFormFieldSelectProps<T>>;
 export default createFormFieldSelect;

package/dist/types/filter-bar/menu/create-form-field-string.d.ts

@@ -1,10 +1,26 @@
 import type { FC } from 'react';
 import type { IFieldMenuConfig, IFilterMenuFormProps } from './types';
+/** Props for the `FormFieldString` component returned by `createFormFieldString`. Extends the base filter-menu form props. */
 export interface IFormFieldStringProps<T> extends IFilterMenuFormProps<T> {
 }
+/** Parameters passed to `createFormFieldString` to configure the generated component. */
 export interface IFormFieldStringParam<T> {
     /** Optional configuration for the form field */
     config?: IFieldMenuConfig<T>;
 }
+/**
+ * Factory function that creates a `FormFieldString` filter-menu component.
+ *
+ * The generated component renders a free-text input inside a popper/menu panel,
+ * letting the user type arbitrary string values as filter criteria. It supports:
+ * - OR / AND logic toggle when more than one value is applied
+ * - Chip viewers showing the currently applied values
+ * - Auto-focus and input reset after each successful submission
+ * - Built-in validation via an optional `validator` prop
+ * - A loading overlay that disables interaction while `isLoading` is true
+ *
+ * @param params - Static configuration (optional field config override)
+ * @returns A React FC ready to be used as a free-text filter-menu field component
+ */
 declare function createFormFieldString<T>(params?: IFormFieldStringParam<T>): FC<IFormFieldStringProps<T>>;
 export default createFormFieldString;

package/dist/types/filter-bar/menu/create.d.ts

@@ -1,7 +1,24 @@
 import type { FC } from 'react';
 import type { IFilterMenuProps } from './types';
 import type { IFilterMenuConfig } from './types';
+/**
+ * Factory function that creates a `FilterMenu` component from a static field configuration.
+ *
+ * The generated component renders a badge icon button that opens a popper panel with:
+ * - A **field list** view — lists all configured filter fields with applied-value counts
+ * - A **field form** view — renders the appropriate input component for the selected field
+ * - A **quick-search** field (opt-out via `enableQuickSearch: false`)
+ * - OR / AND logic toggle support per field
+ * - "Clear All" action to reset all active filters at once
+ *
+ * All state (open/close, selected field) is local; filter values are read/written through
+ * `FilterBarContext` via `useFilterActions`.
+ *
+ * @param config - Static filter-menu configuration (fields, validation, slots, etc.)
+ * @returns A React FC ready to be dropped anywhere inside a `FilterBarProvider`
+ */
 export declare function createFilterMenu<T>(config: IFilterMenuConfig<T>): FC<IFilterMenuProps<T>>;
+/** CSS class names used by the `FilterMenu` component for external style overrides. */
 export declare const filterMenuClasses: {
     root: string;
     input: string;

package/dist/types/filter-bar/menu/types.d.ts

@@ -1,11 +1,16 @@
 import type { ComponentType } from 'react';
 import type { BoxProps, PopperProps } from '@mui/material';
 import type { FormValidator, IFormValidatorConfig } from '../../form/validator';
-import type { TFieldModelValid, TFieldType, TFieldValid, TFieldValue } from '../types';
+import type { TFieldModelValid, TFieldType, TFieldValid, TFieldValue, TLogic } from '../types';
 export interface IFieldMenuConfig<T> {
     field: TFieldType<T>;
     label?: string;
+    /** If true, the form will only allow a single value to be added for the field */
     singleValue?: boolean;
+    /** Default logic for combining multiple values for the field */
+    defaultLogic?: TLogic;
+    /** Tooltip for the field */
+    tooltip?: string | ((values?: TFieldValid[]) => string);
     /** Default form component for the field is `String` */
     FormComponent?: ComponentType<IFilterMenuFormProps<T>>;
 }

package/dist/types/filter-bar/types.d.ts

@@ -59,6 +59,7 @@ export type TFieldSort<T> = {
  * @vi Dinh nghia cac kieu co ban cho he thong filter bar, bao gom gia tri filter, kieu field va cau truc tong the cua filter state.
  */
 export type TLogic = 'and' | 'or';
+export type TDateLogic = 'before' | 'after' | 'on' | 'range';
 /**
  * @en
  * - Structure for storing filter values and their logical relationship (AND/OR) for each field.
@@ -68,6 +69,8 @@ export type TLogic = 'and' | 'or';
 export type TFieldValue = {
     /** Logical operator for combining values within this field. Default is 'and'. */
     logic?: TLogic;
+    /** Logical operator for date-specific filtering. Optional. */
+    dateLogic?: TDateLogic;
     values: TFieldValid[];
 };
 /**

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

@@ -1,9 +1,6 @@
 import { GridFilterModel, GridSortModel } from '@mui/x-data-grid';
 import { GridInitialStateCommunity } from '@mui/x-data-grid/models/gridStateCommunity';
 import { ICustomGridSortModel, ITableQueryParams, ITableQueryDetail } from './types';
-export declare const dinoTableClasses: {
-    whiteSpacePre: string;
-};
 export interface ITableQueryParamModel {
     table?: string;
 }

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

@@ -3,6 +3,6 @@ export * from './model-filter';
 export * from './create.action-row';
 export * from './create.table';
 export { default as DinoTable } from './dino';
-export { dinoTableClasses } from './helpers';
+export { dinoTableClasses } from './styled';
 export type { IStatusCellConfig } from './ui.units';
 export type { IExportCsvOptionsModel } from './csv-export-helper';

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const dinoTableClasses: {
+    root: string;
+    whiteSpacePre: string;
+};
+export declare const TableStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/types/table/toolbar-pannel.d.ts

@@ -25,6 +25,11 @@ export interface IToolbarPannelProps {
     exportCsvOptions?: IExportCsvOptionsModel;
 }
 declare class ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {
+    private _popperObserver;
+    private _elementObserver;
+    private _observedPopper;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): import("react/jsx-runtime").JSX.Element;
     renderTitle: () => import("react/jsx-runtime").JSX.Element;
     renderEndAdornment: () => import("react/jsx-runtime").JSX.Element;

package/package.json

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