dinocollab-core 2.2.1 → 2.2.3

package/dist/src/lab/data-surface/index.dino.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.dino.js","sources":["../../../../src/lab/data-surface/index.dino.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { setViewModeToURL, getViewModeFromURL, setPaginationToURL, getPaginationFromURL } from './helpers'\r\nimport createViewGrid from './view-grid'\r\nimport ButtonSwitch from './button-switch'\r\nimport createDataSurface from './index.create'\r\n\r\nexport class DinoDataSurFace {\r\n  createDataSurface = createDataSurface\r\n  createViewGrid = createViewGrid\r\n  ButtonSwitch = ButtonSwitch\r\n  createButtonSwitch = () => ButtonSwitch\r\n\r\n  // helpers\r\n  setViewModeToURL = setViewModeToURL\r\n  getViewModeFromURL = getViewModeFromURL\r\n  setPaginationToURL = setPaginationToURL\r\n  getPaginationFromURL = getPaginationFromURL\r\n}\r\n\r\nexport const dinoDataSurface = new DinoDataSurFace()\r\n"],"names":["DinoDataSurFace","_createClass","_classCallCheck","_defineProperty","createDataSurface","createViewGrid","ButtonSwitch","this","setViewModeToURL","getViewModeFromURL","setPaginationToURL","getPaginationFromURL","dinoDataSurface"],"mappings":"uXAOA,IAAaA,EAAeC,EAAA,SAAAD,IAAAE,OAAAF,GAAAG,2BACNC,GAAiBD,wBACpBE,GAAcF,sBAChBG,GAAYH,EACNI,KAAA,qBAAA,WAAA,OAAMD,CAAY,GAEvCH,0BACmBK,GAAgBL,4BACdM,GAAkBN,4BAClBO,GAAkBP,8BAChBQ,EAAoB,GAGhCC,EAAkB,IAAIZ"}

package/dist/src/lab/data-surface/types.js

@@ -0,0 +1,2 @@
+var i={normal:"normal",virtualized:"virtualized"},l={list:"list",grid:"grid"},n={pagination:"pagination",infiniteScroll:"infiniteScroll"};export{l as DataSurfaceViewMode,n as LoadingModeRule,i as RenderStrategyRule};
+//# sourceMappingURL=types.js.map

package/dist/src/lab/data-surface/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/lab/data-surface/types.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nexport type TGetterId<T> = (item: T, index: number) => string | number\r\n\r\nexport type TPagination = {\r\n  page?: number\r\n  pageSize?: number\r\n  hasNext?: boolean\r\n  hasPrev?: boolean\r\n  total?: number\r\n}\r\n\r\n/**\r\n * Virtualized rendering configuration.\r\n * Used by both grid and list views for windowing optimization.\r\n */\r\nexport type TVirtualizedConfig = {\r\n  scrollTop: number\r\n  viewportHeight: number\r\n  /** Number of extra rows/columns rendered outside the viewport as a buffer. Defaults to `4` (grid) / `6` (table). */\r\n  overscan?: number\r\n  gap?: number\r\n}\r\n\r\n/**\r\n * Controls how the list is rendered into the DOM.\r\n * - `normal`      — all rows are mounted (suitable for small datasets)\r\n * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n */\r\nexport const RenderStrategyRule = {\r\n  normal: 'normal',\r\n  virtualized: 'virtualized'\r\n} as const\r\nexport type RenderStrategyRule = keyof typeof RenderStrategyRule\r\n\r\n/**\r\n * Controls how the list is displayed.\r\n * - `list` — items are displayed in a single column\r\n * - `grid` — items are displayed in multiple columns (number of columns is determined by the available width)\r\n */\r\nexport const DataSurfaceViewMode = {\r\n  list: 'list',\r\n  grid: 'grid'\r\n} as const\r\nexport type DataSurfaceViewMode = keyof typeof DataSurfaceViewMode\r\n/**\r\n * Controls how the data is loaded and when the loading indicator is shown.\r\n * - `pagination`    — loading indicator is shown when the user clicks on the pagination controls\r\n * - `infiniteScroll` — loading indicator is shown when the user scrolls to the end of the list\r\n */\r\nexport const LoadingModeRule = {\r\n  pagination: 'pagination',\r\n  infiniteScroll: 'infiniteScroll'\r\n} as const\r\nexport type LoadingModeRule = keyof typeof LoadingModeRule\r\n\r\n\r\nexport type TDataSurfaceState = {\r\n  viewMode?: DataSurfaceViewMode\r\n  loadMode?: LoadingModeRule\r\n  renderStrategy?: RenderStrategyRule\r\n}\r\n"],"names":["RenderStrategyRule","normal","virtualized","DataSurfaceViewMode","list","grid","LoadingModeRule","pagination","infiniteScroll"],"mappings":"AA6BO,IAAMA,EAAqB,CAChCC,OAAQ,SACRC,YAAa,eASFC,EAAsB,CACjCC,KAAM,OACNC,KAAM,QAQKC,EAAkB,CAC7BC,WAAY,aACZC,eAAgB"}

package/dist/src/lab/data-surface/ui.units.js

@@ -0,0 +1,2 @@
+import{objectSpread2 as e,defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as o}from"react/jsx-runtime";import{colors as t,styled as i,Box as l,alpha as a,CircularProgress as c,Typography as d,Pagination as u}from"@mui/material";var s={padding:"8px",height:"100%",minHeight:180,width:"100%","& > .inner":{width:"100%",height:"100%",padding:"24px 16px",border:"1px dashed ".concat(t.grey[400]),borderRadius:6,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center"}},g=function(r){return n(p,e(e({},r),{},{children:o("div",{className:"inner",children:[n(c,{size:24}),n(d,{variant:"body2",color:"primary",children:"Loading..."})]})}))},p=i(l)(e(e({},s),{},{"& > div":{gap:8,borderColor:t.blue[400],backgroundColor:t.blue[50]}}));i(l)(e(e({},s),{},{"& > div":{borderColor:t.red[400],backgroundColor:t.red[50],color:t.red[900],flexDirection:"column"}}));var b=function(){return n(h,{children:o("div",{className:"inner",children:[n(d,{variant:"h6",gutterBottom:!0,children:"No data available"}),n(d,{variant:"body2",children:"Try changing the filter or search keyword"})]})})},h=i(l)(e(e({},s),{},{"& > div":{borderColor:t.grey[400],backgroundColor:t.grey[50],color:t.grey[700],flexDirection:"column"}}));i(l)(e(e({},s),{},{"& > div":{borderColor:t.blue[400],backgroundColor:t.blue[50],color:t.blue[900],flexDirection:"column"}})),i(l)(e(e({},s),{},{"& > div":{borderColor:t.red[700],backgroundColor:t.red[50],color:t.red[900],flexDirection:"column"}}));var m=function(){return n(v,{children:o("div",{children:[n(c,{size:24,thickness:4}),n(d,{variant:"body2",color:"text.primary",children:"Loading more..."})]})})},v=i(l)(function(e){return{position:"absolute",inset:0,bgcolor:"dark"===e.theme.palette.mode?"rgba(0,0,0,0.12)":"rgba(255,255,255,0.12)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10,backdropFilter:"blur(1px)",transition:"opacity 0.2s","& > div":{display:"flex",alignItems:"center",gap:10}}}),f=function(e){var r,t,i=e.slots,l=e.loading,a=e.hasNext,c=e.currentCount,u=e.total,s="";s=l?"Loading more...":a?"Scroll for more":"No more items";var g=c>0?null!=u?"1–".concat(c," of ").concat(u):"1–".concat(c):"—",p="function"==typeof(null==i?void 0:i.statusText)?i.statusText(s):null!==(r=null==i?void 0:i.statusText)&&void 0!==r?r:s,b="function"==typeof(null==i?void 0:i.rangeText)?i.rangeText(g):null!==(t=null==i?void 0:i.rangeText)&&void 0!==t?t:g,h=function(e){return"string"!=typeof e?e:n(d,{variant:"caption",color:"text.secondary",children:e})};return n(x,{children:o("div",{children:[h(p),h(b)]})})},x=i(l)(function(e){var n=e.theme;return r(r({},"& > div",{display:"flex",alignItems:"center",justifyContent:"space-between",padding:n.spacing(1,1.5),backgroundColor:a(n.palette.grey[500],.08),borderTop:"1px solid ".concat(a(n.palette.common.black,.08))}),".MuiTypography-root",{lineHeight:1})}),y=function(e){var r=e.page,t=e.pageSize,i=e.total,l=e.hasNext,a=e.loading,c=e.onPrevPage,s=e.onNextPage,g=e.onPageJump,p=r*t+1,b=null!=i?Math.min(p+t-1,i):p+t-1,h=null!=i?Math.ceil(i/t):void 0;return o(C,{children:[n(d,{variant:"caption",color:"text.secondary",children:null!=i?"".concat(p,"–").concat(b," / ").concat(i):"Page ".concat(r+1)}),n(u,{count:h,page:r+1,onChange:function(e,n){var o=n-1;g?g(o):o<r?null==c||c():o>r&&(null==s||s())},disabled:a,size:"small",showFirstButton:null!=h&&h>5,showLastButton:null!=h&&h>5,siblingCount:0,boundaryCount:1,hidePrevButton:null==h&&!l,hideNextButton:null==h&&!l})]})},C=i(l)(function(e){var r=e.theme;return{padding:"8px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",backgroundColor:r.palette.background.paper,borderTop:"1px solid ".concat("dark"===r.palette.mode?"rgba(255, 255, 255, 0.12)":"rgba(0, 0, 0, 0.12)")}});export{f as PanelInfiniteScrollFooter,m as PanelLoadMore,g as PanelLoading,b as PanelNoData,y as PanelPaginationFooter};
+//# sourceMappingURL=ui.units.js.map

package/dist/src/lab/data-surface/ui.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.units.js","sources":["../../../../src/lab/data-surface/ui.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, CircularProgress, Pagination, Typography, colors, styled, alpha } from '@mui/material'\r\n// types\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { BoxProps } from '@mui/material'\r\n\r\nconst stateWrapBase = {\r\n  padding: '8px',\r\n  height: '100%',\r\n  minHeight: 180,\r\n  width: '100%',\r\n  '& > .inner': {\r\n    width: '100%',\r\n    height: '100%',\r\n    padding: '24px 16px',\r\n    border: `1px dashed ${colors.grey[400]}`,\r\n    borderRadius: 6,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    textAlign: 'center'\r\n  }\r\n} as const\r\n\r\nexport const PanelLoading: FC<BoxProps> = (props) => (\r\n  <PanelLoadingStyled {...props}>\r\n    <div className='inner'>\r\n      <CircularProgress size={24} />\r\n      <Typography variant='body2' color='primary'>\r\n        Loading...\r\n      </Typography>\r\n    </div>\r\n  </PanelLoadingStyled>\r\n)\r\n\r\nconst PanelLoadingStyled = styled(Box)({\r\n  ...stateWrapBase,\r\n  '& > div': { gap: 8, borderColor: colors.blue[400], backgroundColor: colors.blue[50] }\r\n})\r\n\r\nexport const PanelError: FC<{ error: string }> = ({ error }) => (\r\n  <PanelErrorStyled>\r\n    <div className='inner'>\r\n      <Typography variant='h6' gutterBottom>\r\n        An error occurred\r\n      </Typography>\r\n      {error && <Typography variant='body2'>{error}</Typography>}\r\n    </div>\r\n  </PanelErrorStyled>\r\n)\r\n\r\nconst PanelErrorStyled = styled(Box)({\r\n  ...stateWrapBase,\r\n  '& > div': {\r\n    borderColor: colors.red[400],\r\n    backgroundColor: colors.red[50],\r\n    color: colors.red[900],\r\n    flexDirection: 'column'\r\n  }\r\n})\r\n\r\nexport const PanelNoData: FC = () => (\r\n  <PanelNoDataStyled>\r\n    <div className='inner'>\r\n      <Typography variant='h6' gutterBottom>\r\n        No data available\r\n      </Typography>\r\n      <Typography variant='body2'>Try changing the filter or search keyword</Typography>\r\n    </div>\r\n  </PanelNoDataStyled>\r\n)\r\n\r\nconst PanelNoDataStyled = styled(Box)({\r\n  ...stateWrapBase,\r\n  '& > div': {\r\n    borderColor: colors.grey[400],\r\n    backgroundColor: colors.grey[50],\r\n    color: colors.grey[700],\r\n    flexDirection: 'column'\r\n  }\r\n})\r\n\r\nexport const PanelWaiting: FC = () => (\r\n  <PanelWaitingStyled>\r\n    <div className='inner'>\r\n      <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n        Waiting for data...\r\n      </Typography>\r\n      <Typography variant='body2' color='text.secondary'>\r\n        Please wait while we fetch the data.\r\n      </Typography>\r\n    </div>\r\n  </PanelWaitingStyled>\r\n)\r\n\r\nconst PanelWaitingStyled = styled(Box)({\r\n  ...stateWrapBase,\r\n  '& > div': {\r\n    borderColor: colors.blue[400],\r\n    backgroundColor: colors.blue[50],\r\n    color: colors.blue[900],\r\n    flexDirection: 'column'\r\n  }\r\n})\r\n\r\nexport const PanelMissingConfig: FC = () => (\r\n  <PanelMissingConfigStyled>\r\n    <div className='inner'>\r\n      <Typography variant='h6' sx={{ fontWeight: 'bold' }}>\r\n        Missing Configuration\r\n      </Typography>\r\n      <Typography variant='body2'>A required configuration is missing for this view to work correctly.</Typography>\r\n    </div>\r\n  </PanelMissingConfigStyled>\r\n)\r\n\r\nconst PanelMissingConfigStyled = styled(Box)({\r\n  ...stateWrapBase,\r\n  '& > div': {\r\n    borderColor: colors.red[700],\r\n    backgroundColor: colors.red[50],\r\n    color: colors.red[900],\r\n    flexDirection: 'column'\r\n  }\r\n})\r\n\r\nexport const PanelLoadMore: FC = () => (\r\n  <PanelLoadMoreStyled>\r\n    <div>\r\n      <CircularProgress size={24} thickness={4} />\r\n      <Typography variant='body2' color='text.primary'>\r\n        Loading more...\r\n      </Typography>\r\n    </div>\r\n  </PanelLoadMoreStyled>\r\n)\r\n\r\nconst PanelLoadMoreStyled = styled(Box)(({ theme }) => ({\r\n  position: 'absolute',\r\n  inset: 0,\r\n  bgcolor: theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.12)',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  zIndex: 10,\r\n  backdropFilter: 'blur(1px)',\r\n  transition: 'opacity 0.2s',\r\n  '& > div': { display: 'flex', alignItems: 'center', gap: 10 }\r\n}))\r\n\r\nexport interface IPanelInfiniteScrollFooterSlots {\r\n  statusText?: string | ((currentStatus: string) => ReactNode)\r\n  rangeText?: string | ((currentRange: string) => ReactNode)\r\n}\r\n\r\nexport interface IPanelInfiniteScrollFooterProps {\r\n  loading?: boolean\r\n  hasNext?: boolean\r\n  currentCount: number\r\n  total?: number\r\n  slots?: IPanelInfiniteScrollFooterSlots\r\n}\r\n\r\nexport const PanelInfiniteScrollFooter: FC<IPanelInfiniteScrollFooterProps> = (props) => {\r\n  const { slots, loading, hasNext, currentCount, total } = props\r\n  // Status text on the left\r\n  let statusText = ''\r\n  if (loading) {\r\n    statusText = 'Loading more...'\r\n  } else if (hasNext) {\r\n    statusText = 'Scroll for more'\r\n  } else {\r\n    statusText = 'No more items'\r\n  }\r\n\r\n  // Range text on the right\r\n  const rangeText = currentCount > 0 ? (total != null ? `1–${currentCount} of ${total}` : `1–${currentCount}`) : '—'\r\n  const finalStatusText = typeof slots?.statusText === 'function' ? slots.statusText(statusText) : (slots?.statusText ?? statusText)\r\n  const finalRangeText = typeof slots?.rangeText === 'function' ? slots.rangeText(rangeText) : (slots?.rangeText ?? rangeText)\r\n\r\n  const renderText = (value: ReactNode) => {\r\n    if (typeof value !== 'string') return value\r\n    return (\r\n      <Typography variant='caption' color='text.secondary'>\r\n        {value}\r\n      </Typography>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <PanelInfiniteScrollFooterStyled>\r\n      <div>\r\n        {renderText(finalStatusText)}\r\n        {renderText(finalRangeText)}\r\n      </div>\r\n    </PanelInfiniteScrollFooterStyled>\r\n  )\r\n}\r\n\r\nconst PanelInfiniteScrollFooterStyled = styled(Box)(({ theme }) => ({\r\n  // padding: theme.spacing(0, 1),\r\n  ['& > div']: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    padding: theme.spacing(1, 1.5),\r\n    backgroundColor: alpha(theme.palette.grey[500], 0.08),\r\n    borderTop: `1px solid ${alpha(theme.palette.common.black, 0.08)}`\r\n  },\r\n  '.MuiTypography-root': { lineHeight: 1 }\r\n}))\r\n\r\nexport interface IPanelPaginationFooterProps {\r\n  page: number\r\n  pageSize: number\r\n  total?: number\r\n  hasNext?: boolean\r\n  hasPrev?: boolean\r\n  loading?: boolean\r\n  onPrevPage?: () => void\r\n  onNextPage?: () => void\r\n  onPageJump?: (page: number) => void\r\n}\r\n\r\nexport const PanelPaginationFooter: FC<IPanelPaginationFooterProps> = (props) => {\r\n  const { page, pageSize, total, hasNext, loading, onPrevPage, onNextPage, onPageJump } = props\r\n  const from = page * pageSize + 1\r\n  const to = total != null ? Math.min(from + pageSize - 1, total) : from + pageSize - 1\r\n\r\n  // Calculate page count for MUI Pagination (1-indexed)\r\n  const pageCount = total != null ? Math.ceil(total / pageSize) : undefined\r\n\r\n  const handlePageChange = (_event: any, value: number) => {\r\n    // MUI Pagination uses 1-indexed, convert to 0-indexed\r\n    const targetPage = value - 1\r\n\r\n    if (onPageJump) {\r\n      // Use direct page jump if available\r\n      onPageJump(targetPage)\r\n    } else {\r\n      // Fallback to prev/next if no jump handler\r\n      if (targetPage < page) {\r\n        onPrevPage?.()\r\n      } else if (targetPage > page) {\r\n        onNextPage?.()\r\n      }\r\n    }\r\n  }\r\n\r\n  return (\r\n    <PanelPaginationFooterStyled>\r\n      <Typography variant='caption' color='text.secondary'>\r\n        {total != null ? `${from}–${to} / ${total}` : `Page ${page + 1}`}\r\n      </Typography>\r\n      <Pagination\r\n        count={pageCount}\r\n        page={page + 1}\r\n        onChange={handlePageChange}\r\n        disabled={loading}\r\n        size='small'\r\n        showFirstButton={pageCount != null && pageCount > 5}\r\n        showLastButton={pageCount != null && pageCount > 5}\r\n        siblingCount={0}\r\n        boundaryCount={1}\r\n        hidePrevButton={pageCount == null && !hasNext}\r\n        hideNextButton={pageCount == null && !hasNext}\r\n      />\r\n    </PanelPaginationFooterStyled>\r\n  )\r\n}\r\n\r\nconst PanelPaginationFooterStyled = styled(Box)(({ theme }) => ({\r\n  padding: '8px 16px',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'space-between',\r\n  backgroundColor: theme.palette.background.paper,\r\n  borderTop: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)'}`\r\n}))\r\n"],"names":["stateWrapBase","padding","height","minHeight","width","border","concat","colors","grey","borderRadius","display","alignItems","justifyContent","textAlign","PanelLoading","props","_jsx","PanelLoadingStyled","_objectSpread","children","_jsxs","className","CircularProgress","size","Typography","variant","color","styled","Box","gap","borderColor","blue","backgroundColor","red","flexDirection","PanelNoData","PanelNoDataStyled","gutterBottom","PanelLoadMore","PanelLoadMoreStyled","thickness","_ref2","position","inset","bgcolor","theme","palette","mode","zIndex","backdropFilter","transition","PanelInfiniteScrollFooter","_slots$statusText","_slots$rangeText","slots","loading","hasNext","currentCount","total","statusText","rangeText","finalStatusText","finalRangeText","renderText","value","PanelInfiniteScrollFooterStyled","_ref3","_defineProperty","spacing","alpha","borderTop","common","black","lineHeight","PanelPaginationFooter","page","pageSize","onPrevPage","onNextPage","onPageJump","from","to","Math","min","pageCount","ceil","undefined","PanelPaginationFooterStyled","Pagination","count","onChange","_event","targetPage","disabled","showFirstButton","showLastButton","siblingCount","boundaryCount","hidePrevButton","hideNextButton","_ref5","background","paper"],"mappings":"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"}

package/dist/src/lab/data-surface/view-grid.js

@@ -0,0 +1,2 @@
+import{defineProperty as e,objectSpread2 as n,asyncToGenerator as i,regenerator as t,slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{styled as l,Box as d,Grid as u}from"@mui/material";import{useCallback as c,useMemo as g,useRef as s,useState as v,useLayoutEffect as p}from"react";import{getMaxGridItemHeight as h,GridItemDefault as m,getGridItemSizes as f,getMaxGridGap as x,resolveGridColumnsFromWidth as z}from"./view-grid.units.js";function I(e){var i=function(e){return function(i){var t=g(function(){var n,t,r;return{gap:x(i.gap,e.gap),sizes:f(null!==(n=i.sizes)&&void 0!==n?n:e.sizes),getterId:e.getterId,Component:null!==(t=null!==(r=i.Component)&&void 0!==r?r:e.Component)&&void 0!==t?t:m,gridItemHeight:h(i.gridItemHeight,e.gridItemHeight)}},[i.value,i.gap,i.sizes,i.Component,e]),r=g(function(){return i.value},[i.value]),a=function(e,n){var i=t.Component;return o(i,{value:e,index:n})};return o(w,{className:C.root,children:o("div",{className:C.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=i.onNearEnd)||void 0===n||n.call(i))},children:o(u,{container:!0,spacing:"".concat(t.gap,"px"),children:r.map(function(e,i){var r,l=null!==(r=t.getterId(e,i))&&void 0!==r?r:i;return o(u,n(n({className:C.gridItem,item:!0},t.sizes),{},{sx:{height:t.gridItemHeight},children:a(e,i)}),l)})})})})}}(e),t=function(e){return function(n){var i,t,l=g(function(){return n.value},[n.value]),u=g(function(){var i,t,r;return{gap:x(n.gap,e.gap,8),sizes:f(null!==(i=n.sizes)&&void 0!==i?i:e.sizes),getterId:e.getterId,Component:null!==(t=null!==(r=n.Component)&&void 0!==r?r:e.Component)&&void 0!==t?t:m,gridItemHeight:h(n.gridItemHeight,e.gridItemHeight),virtualized:Object.assign({},e.virtualizedConfig,n.virtualizedConfig)}},[n.gap,n.sizes,n.Component,e]),c=u.sizes,I=u.getterId,H=u.virtualized,b=u.gridItemHeight,w=s(null),T=v(0),M=r(T,2),y=M[0],N=M[1],V=v(0),j=r(V,2),G=j[0],D=j[1],R=v(null!==(i=H.scrollTop)&&void 0!==i?i:0),P=r(R,2),k=P[0],E=P[1],Y=h(b),O=Math.max(1,null!==(t=H.overscan)&&void 0!==t?t:4),_=x(u.gap),A=_/2;p(function(){if(w.current){var e=function(){var e,n,i,t,r=null!==(e=null===(n=w.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0,o=null!==(i=null===(t=w.current)||void 0===t?void 0:t.clientHeight)&&void 0!==i?i:0;N(function(e){return e===r?e:r}),D(function(e){return e===o?e:o})};e();var n=new ResizeObserver(function(){e()});return n.observe(w.current),function(){return n.disconnect()}}},[]),p(function(){"number"==typeof H.scrollTop&&E(H.scrollTop)},[H.scrollTop]);var B=z(y,c),W=Y+_,q=g(function(){var e,n,i=l.length;if(0===i)return{startRow:0,endRow:-1,topSpacerHeight:0,bottomSpacerHeight:0,startIndex:0,endIndex:-1};var t=Math.ceil(i/B),r=Math.max(1,null!==(e=null!==(n=H.viewportHeight)&&void 0!==n?n:G)&&void 0!==e?e:1),o="number"==typeof H.scrollTop?H.scrollTop:k,a=Math.max(0,Math.floor(o/W)-O),d=Math.ceil(r/W),u=Math.min(t-1,a+d+2*O),c=a*B,g=Math.min(i-1,(u+1)*B-1);return{startRow:a,endRow:u,topSpacerHeight:a*W,bottomSpacerHeight:Math.max(0,(t-u-1)*W),startIndex:c,endIndex:g}},[B,l.length,O,W,H,k,G]),F=q.endIndex>=q.startIndex?l.slice(q.startIndex,q.endIndex+1):[],J=function(e,n){var i=u.Component;return o(i,{value:e,index:n})},K=[C.gridVirtualized,C.grid].join(" ");return o(S,{className:K,children:a(d,{ref:w,sx:{p:"".concat(A,"px"),overflowY:"auto",height:"100%",boxSizing:"border-box"},onScroll:function(e){var i,t=e.currentTarget;"number"!=typeof H.scrollTop&&E(t.scrollTop),t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(i=n.onNearEnd)||void 0===i||i.call(n))},children:[q.topSpacerHeight>0?o(d,{sx:{height:q.topSpacerHeight}}):null,o(d,{sx:{display:"grid",gap:"".concat(_,"px"),gridTemplateColumns:"repeat(".concat(B,", minmax(0, 1fr))")},children:F.map(function(e,n){var i,t=q.startIndex+n,r=null!==(i=I(e,t))&&void 0!==i?i:t;return o(d,{sx:{minHeight:Y,height:Y},children:J(e,t)},r)})}),q.bottomSpacerHeight>0?o(d,{sx:{height:q.bottomSpacerHeight}}):null]})})}}(e);return function(r){var a,l,d=null!==(a=null!==(l=r.renderStrategy)&&void 0!==l?l:e.renderStrategy)&&void 0!==a?a:"normal";return o("virtualized"===d?t:i,n({},r))}}function H(e){return function(n){var r,a,l,d=c(i(t().m(function e(){var i,r,o,a,l,d,u,c,g;return t().w(function(e){for(;;)switch(e.n){case 0:if("infiniteScroll"===n.loadMode){e.n=1;break}return e.a(2);case 1:if(null!==(i=n.pagination)&&void 0!==i&&i.hasNext){e.n=2;break}return e.a(2);case 2:if(!n.loading){e.n=3;break}return e.a(2);case 3:return u=null!==(r=null===(o=n.pagination)||void 0===o?void 0:o.page)&&void 0!==r?r:0,c=null!==(a=null===(l=n.pagination)||void 0===l?void 0:l.pageSize)&&void 0!==a?a:20,g=u+1,e.n=4,null===(d=n.onPageChange)||void 0===d?void 0:d.call(n,g,c);case 4:return e.a(2)}},e)})),[n.loadMode,null===(r=n.pagination)||void 0===r?void 0:r.hasNext,null===(a=n.pagination)||void 0===a?void 0:a.page,null===(l=n.pagination)||void 0===l?void 0:l.pageSize,n.loading,n.onPageChange]);return o(e,{value:n.value,gap:n.gap,sizes:n.sizes,gridItemHeight:n.gridItemHeight,renderStrategy:n.renderStrategy,Component:n.Component,virtualizedConfig:n.virtualizedConfig,onNearEnd:"infiniteScroll"===n.loadMode?d:void 0})}}var b={root:"DinoViewGrid-root",scrollContainer:"DinoViewGrid-scrollContainer",grid:"DinoViewGrid-grid",gridVirtualized:"DinoViewGrid-gridVirtualized",gridItem:"DinoViewGrid-item"},C=b,w=l(d)(function(n){var i=n.theme;return e({position:"relative",width:"100%",height:"100%",overflow:"hidden"},"& .".concat(C.scrollContainer),{position:"absolute",top:0,left:0,right:0,bottom:0,overflowY:"auto",padding:i.spacing(1)})}),S=l(d)(function(n){var i=n.theme;return e({position:"relative",width:"100%",height:"100%",overflow:"hidden",boxSizing:"border-box","& > div":{height:"100%"}},"& .".concat(C.scrollContainer),{position:"absolute",top:0,left:0,right:0,bottom:0,overflowY:"auto",padding:i.spacing(1)})});export{I as createViewGrid,H as createViewGridLoading,I as default,b as viewGridClasses};
+//# sourceMappingURL=view-grid.js.map

package/dist/src/lab/data-surface/view-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid.js","sources":["../../../../src/lab/data-surface/view-grid.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, Grid, styled } from '@mui/material'\r\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { getGridItemSizes, getMaxGridGap, getMaxGridItemHeight, GridItemDefault, resolveGridColumnsFromWidth } from './view-grid.units'\r\n// types\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.types'\r\n\r\nexport interface IViewGridBase<T> {\r\n  gap?: number\r\n  sizes?: TGridSizes\r\n  gridItemHeight?: number\r\n  /**\r\n   * Controls how the list is rendered into the DOM.\r\n   * - `normal`      — all rows are mounted (suitable for small datasets)\r\n   * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n   * @default 'normal'\r\n   */\r\n  renderStrategy?: RenderStrategyRule\r\n  Component?: ComponentType<IViewGridItemProps<T>>\r\n  virtualizedConfig?: TVirtualizedConfig\r\n  /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */\r\n  onNearEnd?: () => void\r\n}\r\n\r\nexport interface IViewGridConfig<T> extends IViewGridBase<T> {\r\n  getterId: TGetterId<T>\r\n}\r\n\r\nexport interface IViewGridProps<T> extends IViewGridBase<T> {\r\n  value: T[]\r\n}\r\n\r\nexport interface IViewGridLoadingProps<T> extends IViewGridBase<T> {\r\n  value: T[]\r\n  loadMode: LoadingModeRule\r\n  loading?: boolean\r\n  pagination?: TPagination\r\n  onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n}\r\n\r\nfunction createViewGridNormal<T>(config: IViewGridConfig<T>) {\r\n  const ViewGridNormal: FC<IViewGridProps<T>> = (props) => {\r\n    const mergedConfig = useMemo(() => {\r\n      return {\r\n        gap: getMaxGridGap(props.gap, config.gap),\r\n        sizes: getGridItemSizes(props.sizes ?? config.sizes),\r\n        getterId: config.getterId,\r\n        Component: props.Component ?? config.Component ?? GridItemDefault,\r\n        gridItemHeight: getMaxGridItemHeight(props.gridItemHeight, config.gridItemHeight)\r\n      }\r\n    }, [props.value, props.gap, props.sizes, props.Component, config])\r\n\r\n    const gridItems = useMemo(() => {\r\n      return props.value\r\n    }, [props.value])\r\n\r\n    const renderItem = (item: T, index: number) => {\r\n      const ItemComponent = mergedConfig.Component\r\n      return <ItemComponent value={item} index={index} />\r\n    }\r\n\r\n    return (\r\n      <ViewGridNormalStyled className={classes.root}>\r\n        <div\r\n          className={classes.scrollContainer}\r\n          onScroll={(e) => {\r\n            const t = e.currentTarget\r\n            if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n              props.onNearEnd?.()\r\n            }\r\n          }}\r\n        >\r\n          <Grid container spacing={`${mergedConfig.gap}px`}>\r\n            {gridItems.map((item, index) => {\r\n              const key = mergedConfig.getterId(item, index) ?? index\r\n              return (\r\n                <Grid key={key} className={classes.gridItem} item {...mergedConfig.sizes} sx={{ height: mergedConfig.gridItemHeight }}>\r\n                  {renderItem(item, index)}\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </div>\r\n      </ViewGridNormalStyled>\r\n    )\r\n  }\r\n  return ViewGridNormal\r\n}\r\n\r\nfunction createViewGridVirtualized<T>(config: IViewGridConfig<T>) {\r\n  const ViewGridVirtualized: FC<IViewGridProps<T>> = (props) => {\r\n    const finalItems = useMemo(() => {\r\n      return props.value\r\n    }, [props.value])\r\n\r\n    const mergedConfig = useMemo(() => {\r\n      return {\r\n        gap: getMaxGridGap(props.gap, config.gap, 8),\r\n        sizes: getGridItemSizes(props.sizes ?? config.sizes),\r\n        getterId: config.getterId,\r\n        Component: props.Component ?? config.Component ?? GridItemDefault,\r\n        gridItemHeight: getMaxGridItemHeight(props.gridItemHeight, config.gridItemHeight),\r\n        virtualized: Object.assign({}, config.virtualizedConfig, props.virtualizedConfig) as TVirtualizedConfig\r\n      }\r\n    }, [props.gap, props.sizes, props.Component, config])\r\n\r\n    const { sizes, getterId, virtualized, gridItemHeight } = mergedConfig\r\n\r\n    const wrapRef = useRef<HTMLDivElement | null>(null)\r\n    const [containerWidth, setContainerWidth] = useState(0)\r\n    const [containerHeight, setContainerHeight] = useState(0)\r\n    const [scrollTopState, setScrollTopState] = useState(virtualized.scrollTop ?? 0)\r\n\r\n    const itemHeight = getMaxGridItemHeight(gridItemHeight)\r\n    const overscan = Math.max(1, virtualized.overscan ?? 4)\r\n    const gapPx = getMaxGridGap(mergedConfig.gap)\r\n    const outerGutterPx = gapPx / 2\r\n\r\n    useLayoutEffect(() => {\r\n      if (!wrapRef.current) return\r\n\r\n      const updateSize = () => {\r\n        const nextWidth = wrapRef.current?.clientWidth ?? 0\r\n        const nextHeight = wrapRef.current?.clientHeight ?? 0\r\n        setContainerWidth((prev) => (prev === nextWidth ? prev : nextWidth))\r\n        setContainerHeight((prev) => (prev === nextHeight ? prev : nextHeight))\r\n      }\r\n\r\n      updateSize()\r\n\r\n      const observer = new ResizeObserver(() => {\r\n        updateSize()\r\n      })\r\n\r\n      observer.observe(wrapRef.current)\r\n      return () => observer.disconnect()\r\n    }, [])\r\n\r\n    // sync external virtualized.scrollTop when provided\r\n    useLayoutEffect(() => {\r\n      if (typeof virtualized.scrollTop === 'number') {\r\n        setScrollTopState(virtualized.scrollTop)\r\n      }\r\n    }, [virtualized.scrollTop])\r\n\r\n    const columns = resolveGridColumnsFromWidth(containerWidth, sizes)\r\n    const rowHeight = itemHeight + gapPx\r\n\r\n    const windowed = useMemo(() => {\r\n      const totalItems = finalItems.length\r\n      if (totalItems === 0) {\r\n        return { startRow: 0, endRow: -1, topSpacerHeight: 0, bottomSpacerHeight: 0, startIndex: 0, endIndex: -1 }\r\n      }\r\n\r\n      const totalRows = Math.ceil(totalItems / columns)\r\n      const safeViewportHeight = Math.max(1, virtualized.viewportHeight ?? containerHeight ?? 1)\r\n      const effectiveScrollTop = typeof virtualized.scrollTop === 'number' ? virtualized.scrollTop : scrollTopState\r\n      const startRow = Math.max(0, Math.floor(effectiveScrollTop / rowHeight) - overscan)\r\n      const visibleRows = Math.ceil(safeViewportHeight / rowHeight)\r\n      const endRow = Math.min(totalRows - 1, startRow + visibleRows + overscan * 2)\r\n      const startIndex = startRow * columns\r\n      const endIndex = Math.min(totalItems - 1, (endRow + 1) * columns - 1)\r\n      const topSpacerHeight = startRow * rowHeight\r\n      const bottomSpacerHeight = Math.max(0, (totalRows - endRow - 1) * rowHeight)\r\n\r\n      return { startRow, endRow, topSpacerHeight, bottomSpacerHeight, startIndex, endIndex }\r\n    }, [columns, finalItems.length, overscan, rowHeight, virtualized, scrollTopState, containerHeight])\r\n\r\n    const getSxForContent = (): BoxProps['sx'] => ({\r\n      display: 'grid',\r\n      gap: `${gapPx}px`,\r\n      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`\r\n    })\r\n\r\n    const visibleItems = windowed.endIndex >= windowed.startIndex ? finalItems.slice(windowed.startIndex, windowed.endIndex + 1) : []\r\n\r\n    const renderItem = (item: T, index: number) => {\r\n      const ItemComponent = mergedConfig.Component\r\n      return <ItemComponent value={item} index={index} />\r\n    }\r\n\r\n    const rootClasses = [classes.gridVirtualized, classes.grid].join(' ')\r\n    return (\r\n      <ViewGridVirtualizedStyled className={rootClasses}>\r\n        <Box\r\n          ref={wrapRef}\r\n          sx={{ p: `${outerGutterPx}px`, overflowY: 'auto', height: '100%', boxSizing: 'border-box' }}\r\n          onScroll={(e) => {\r\n            const t = e.currentTarget as HTMLDivElement\r\n            if (typeof virtualized.scrollTop !== 'number') {\r\n              setScrollTopState(t.scrollTop)\r\n            }\r\n            if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n              props.onNearEnd?.()\r\n            }\r\n          }}\r\n        >\r\n          {windowed.topSpacerHeight > 0 ? <Box sx={{ height: windowed.topSpacerHeight }} /> : null}\r\n\r\n          <Box sx={getSxForContent()}>\r\n            {visibleItems.map((item, offset) => {\r\n              const index = windowed.startIndex + offset\r\n              const key = getterId(item, index) ?? index\r\n              return (\r\n                <Box key={key} sx={{ minHeight: itemHeight, height: itemHeight }}>\r\n                  {renderItem(item, index)}\r\n                </Box>\r\n              )\r\n            })}\r\n          </Box>\r\n\r\n          {windowed.bottomSpacerHeight > 0 ? <Box sx={{ height: windowed.bottomSpacerHeight }} /> : null}\r\n        </Box>\r\n      </ViewGridVirtualizedStyled>\r\n    )\r\n  }\r\n  return ViewGridVirtualized\r\n}\r\n\r\nexport function createViewGrid<T>(config: IViewGridConfig<T>) {\r\n  const ViewGridNormal = createViewGridNormal<T>(config)\r\n  const ViewGridVirtualized = createViewGridVirtualized<T>(config)\r\n\r\n  const ViewGrid: FC<IViewGridProps<T>> = (props) => {\r\n    const renderStrategy = props.renderStrategy ?? config.renderStrategy ?? 'normal'\r\n    if (renderStrategy === 'virtualized') {\r\n      return <ViewGridVirtualized {...props} />\r\n    }\r\n    return <ViewGridNormal {...props} />\r\n  }\r\n  return ViewGrid\r\n}\r\n\r\nexport function createViewGridLoading<T>(GridComponent: ComponentType<IViewGridProps<T>>) {\r\n  const ViewGridLoading: FC<IViewGridLoadingProps<T>> = (props) => {\r\n    const handleNearEnd = useCallback(async () => {\r\n      if (props.loadMode !== 'infiniteScroll') return\r\n      if (!props.pagination?.hasNext) return\r\n      if (props.loading) return\r\n\r\n      const currentPage = props.pagination?.page ?? 0\r\n      const currentPageSize = props.pagination?.pageSize ?? 20\r\n      const nextPage = currentPage + 1\r\n      await props.onPageChange?.(nextPage, currentPageSize)\r\n    }, [props.loadMode, props.pagination?.hasNext, props.pagination?.page, props.pagination?.pageSize, props.loading, props.onPageChange])\r\n\r\n    return (\r\n      <GridComponent\r\n        value={props.value}\r\n        gap={props.gap}\r\n        sizes={props.sizes}\r\n        gridItemHeight={props.gridItemHeight}\r\n        renderStrategy={props.renderStrategy}\r\n        Component={props.Component}\r\n        virtualizedConfig={props.virtualizedConfig}\r\n        onNearEnd={props.loadMode === 'infiniteScroll' ? handleNearEnd : undefined}\r\n      />\r\n    )\r\n  }\r\n\r\n  return ViewGridLoading\r\n}\r\n\r\nexport default createViewGrid\r\n\r\nexport const viewGridClasses = {\r\n  root: 'DinoViewGrid-root',\r\n  scrollContainer: 'DinoViewGrid-scrollContainer',\r\n  grid: 'DinoViewGrid-grid',\r\n  gridVirtualized: 'DinoViewGrid-gridVirtualized',\r\n  gridItem: 'DinoViewGrid-item'\r\n}\r\nconst classes = viewGridClasses\r\n\r\nconst ViewGridNormalStyled = styled(Box)(({ theme }) => ({\r\n  position: 'relative',\r\n  width: '100%',\r\n  height: '100%',\r\n  overflow: 'hidden',\r\n  [`& .${classes.scrollContainer}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    overflowY: 'auto',\r\n    padding: theme.spacing(1)\r\n  }\r\n}))\r\n\r\nconst ViewGridVirtualizedStyled = styled(Box)(({ theme }) => ({\r\n  position: 'relative',\r\n  width: '100%',\r\n  height: '100%',\r\n  overflow: 'hidden',\r\n  boxSizing: 'border-box',\r\n  '& > div': {\r\n    height: '100%'\r\n  },\r\n  [`& .${classes.scrollContainer}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    overflowY: 'auto',\r\n    padding: theme.spacing(1)\r\n  }\r\n}))\r\n"],"names":["createViewGrid","config","ViewGridNormal","props","mergedConfig","useMemo","_props$sizes","_ref","_props$Component","gap","getMaxGridGap","sizes","getGridItemSizes","getterId","Component","GridItemDefault","gridItemHeight","getMaxGridItemHeight","value","gridItems","renderItem","item","index","ItemComponent","_jsx","ViewGridNormalStyled","className","classes","root","children","scrollContainer","onScroll","e","_props$onNearEnd","t","currentTarget","scrollHeight","scrollTop","clientHeight","onNearEnd","call","Grid","container","spacing","concat","map","_mergedConfig$getterI","key","_objectSpread","gridItem","sx","height","createViewGridNormal","ViewGridVirtualized","_virtualized$scrollTo","_virtualized$overscan","finalItems","_props$sizes2","_ref2","_props$Component2","virtualized","Object","assign","virtualizedConfig","wrapRef","useRef","_useState","useState","_useState2","_slicedToArray","containerWidth","setContainerWidth","_useState3","_useState4","containerHeight","setContainerHeight","_useState5","_useState6","scrollTopState","setScrollTopState","itemHeight","overscan","Math","max","gapPx","outerGutterPx","useLayoutEffect","current","updateSize","_wrapRef$current$clie","_wrapRef$current","_wrapRef$current$clie2","_wrapRef$current2","nextWidth","clientWidth","nextHeight","prev","observer","ResizeObserver","observe","disconnect","columns","resolveGridColumnsFromWidth","rowHeight","windowed","_ref3","_virtualized$viewport","totalItems","length","startRow","endRow","topSpacerHeight","bottomSpacerHeight","startIndex","endIndex","totalRows","ceil","safeViewportHeight","viewportHeight","effectiveScrollTop","floor","visibleRows","min","visibleItems","slice","rootClasses","gridVirtualized","grid","join","ViewGridVirtualizedStyled","_jsxs","Box","ref","p","overflowY","boxSizing","_props$onNearEnd2","display","gridTemplateColumns","offset","_getterId","minHeight","createViewGridVirtualized","_ref4","_props$renderStrategy","renderStrategy","createViewGridLoading","GridComponent","_props$pagination4","_props$pagination5","_props$pagination6","handleNearEnd","useCallback","_asyncToGenerator","_regenerator","m","_callee","_props$pagination","_props$pagination$pag","_props$pagination2","_props$pagination$pag2","_props$pagination3","_props$onPageChange","currentPage","currentPageSize","nextPage","w","_context","n","loadMode","a","pagination","hasNext","loading","page","pageSize","onPageChange","undefined","viewGridClasses","styled","_ref6","theme","_defineProperty","position","width","overflow","top","left","right","bottom","padding","_ref8"],"mappings":"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"}

package/dist/src/lab/data-surface/view-grid.units.js

@@ -0,0 +1,2 @@
+import{toConsumableArray as l}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Card as i,Stack as o,Typography as t}from"@mui/material";var u=8,a=function(){for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];var o=r.filter(Boolean);return 0===o.length?8:Math.max.apply(Math,[0].concat(l(o.map(function(l){return null!=l?l:8}))))},e=120,d=function(){for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return 0===r.length?120:Math.max.apply(Math,l(r.map(function(l){return null!=l?l:120})))},m={xs:12,sm:6,md:4,lg:3},v=function(l){return null!=l?l:m},h=function(l){var n,r,i,o,t,u,a,e,d,v,h,x,s,c,f,p=null!=l?l:{},g=p.xs,w=p.sm,y=p.md,M=p.lg,b=p.xl;return{xs:null!==(n=null!=g?g:m.xs)&&void 0!==n?n:12,sm:null!==(r=null!==(i=null!=w?w:g)&&void 0!==i?i:m.sm)&&void 0!==r?r:6,md:null!==(o=null!==(t=null!==(u=null!=y?y:w)&&void 0!==u?u:g)&&void 0!==t?t:m.md)&&void 0!==o?o:4,lg:null!==(a=null!==(e=null!==(d=null!==(v=null!=M?M:y)&&void 0!==v?v:w)&&void 0!==d?d:g)&&void 0!==e?e:m.lg)&&void 0!==a?a:3,xl:null!==(h=null!==(x=null!==(s=null!==(c=null!==(f=null!=b?b:M)&&void 0!==f?f:y)&&void 0!==c?c:w)&&void 0!==s?s:g)&&void 0!==x?x:m.xl)&&void 0!==h?h:3}},x=function(l,n){var r,i=h(n),o=function(l){return l>=1536?"xl":l>=1200?"lg":l>=900?"md":l>=600?"sm":"xs"}(l),t=null!==(r=i[o])&&void 0!==r?r:12,u=Math.min(12,Math.max(1,t));return Math.max(1,Math.floor(12/u))},s=function(l){var u=JSON.stringify(l.value,null,2);return n(i,{variant:"outlined",sx:{height:"100%",width:"100%",overflow:"hidden",p:1,boxSizing:"border-box!important"},title:u,children:r(o,{spacing:1,children:[r(t,{children:["Index: ",l.index]}),r(t,{variant:"body2",sx:{fontFamily:"monospace",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:["Data: ",u]})]})})};export{u as DEFAULT_GRID_GAP_PX,e as DEFAULT_GRID_ITEM_MAX_HEIGHT,m as DEFAULT_GRID_ITEM_SIZES,s as GridItemDefault,v as getGridItemSizes,a as getMaxGridGap,d as getMaxGridItemHeight,h as normalizeGridSizes,x as resolveGridColumnsFromWidth};
+//# sourceMappingURL=view-grid.units.js.map

package/dist/src/lab/data-surface/view-grid.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid.units.js","sources":["../../../../src/lab/data-surface/view-grid.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Card, Stack, Typography } from '@mui/material'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.types'\r\n\r\nexport const DEFAULT_GRID_GAP_PX = 8\r\nexport const getMaxGridGap = (...gap: (number | undefined)[]) => {\r\n  const finalGaps = gap.filter(Boolean)\r\n  if (finalGaps.length === 0) return DEFAULT_GRID_GAP_PX\r\n  return Math.max(0, ...finalGaps.map((g) => g ?? DEFAULT_GRID_GAP_PX))\r\n}\r\n\r\nexport const DEFAULT_GRID_ITEM_MAX_HEIGHT = 120\r\n// export const DEFAULT_GRID_ITEM_MIN_HEIGHT = 60\r\nexport const getMaxGridItemHeight = (...height: (number | undefined)[]) => {\r\n  if (height.length === 0) return DEFAULT_GRID_ITEM_MAX_HEIGHT\r\n  return Math.max(...height.map((h) => h ?? DEFAULT_GRID_ITEM_MAX_HEIGHT))\r\n}\r\n\r\nexport const DEFAULT_GRID_ITEM_SIZES: TGridSizes = { xs: 12, sm: 6, md: 4, lg: 3 }\r\nexport const getGridItemSizes = (sizes?: TGridSizes): TGridSizes => {\r\n  return sizes ?? DEFAULT_GRID_ITEM_SIZES\r\n}\r\nexport const normalizeGridSizes = (sizes?: TGridSizes): Required<TGridSizes> => {\r\n  const { xs, sm, md, lg, xl } = sizes ?? {}\r\n  return {\r\n    xs: xs ?? DEFAULT_GRID_ITEM_SIZES.xs ?? 12,\r\n    sm: sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.sm ?? 6,\r\n    md: md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.md ?? 4,\r\n    lg: lg ?? md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.lg ?? 3,\r\n    xl: xl ?? lg ?? md ?? sm ?? xs ?? DEFAULT_GRID_ITEM_SIZES.xl ?? 3\r\n  }\r\n}\r\n\r\nconst resolveActiveBreakpoint = (width: number): keyof TGridSizes => {\r\n  if (width >= 1536) return 'xl'\r\n  if (width >= 1200) return 'lg'\r\n  if (width >= 900) return 'md'\r\n  if (width >= 600) return 'sm'\r\n  return 'xs'\r\n}\r\n\r\nexport const resolveGridColumnsFromWidth = (width: number, sizes?: TGridSizes): number => {\r\n  const normalized = normalizeGridSizes(sizes)\r\n  const breakpoint = resolveActiveBreakpoint(width)\r\n  const span = normalized[breakpoint] ?? 12\r\n  const safeSpan = Math.min(12, Math.max(1, span))\r\n  return Math.max(1, Math.floor(12 / safeSpan))\r\n}\r\n\r\nexport const GridItemDefault: FC<IViewGridItemProps<any>> = (props) => {\r\n  const content = JSON.stringify(props.value, null, 2)\r\n  return (\r\n    <Card variant='outlined' sx={{ height: '100%', width: '100%', overflow: 'hidden', p: 1, boxSizing: 'border-box!important' }} title={content}>\r\n      <Stack spacing={1}>\r\n        <Typography>Index: {props.index}</Typography>\r\n        <Typography variant='body2' sx={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>\r\n          Data: {content}\r\n        </Typography>\r\n      </Stack>\r\n    </Card>\r\n  )\r\n}\r\n"],"names":["DEFAULT_GRID_GAP_PX","getMaxGridGap","_len","arguments","length","gap","Array","_key","finalGaps","filter","Boolean","Math","max","apply","concat","_toConsumableArray","map","g","DEFAULT_GRID_ITEM_MAX_HEIGHT","getMaxGridItemHeight","_len2","height","_key2","h","DEFAULT_GRID_ITEM_SIZES","xs","sm","md","lg","getGridItemSizes","sizes","normalizeGridSizes","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9","_ref0","_ref1","_ref10","_ref11","_ref12","_ref13","_ref14","_ref","xl","resolveGridColumnsFromWidth","width","_normalized$breakpoin","normalized","breakpoint","resolveActiveBreakpoint","span","safeSpan","min","floor","GridItemDefault","props","content","JSON","stringify","value","_jsx","Card","variant","sx","overflow","p","boxSizing","title","children","_jsxs","Stack","spacing","Typography","index","fontFamily","whiteSpace","wordBreak"],"mappings":"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"}

package/dist/src/lab/data-surface/view-list.js

@@ -0,0 +1,2 @@
+import{defineProperty as e,objectSpread2 as l,asyncToGenerator as n,regenerator as t,slicedToArray as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as r}from"react/jsx-runtime";import{useCallback as o,useMemo as d,useRef as c,useState as s,useLayoutEffect as u}from"react";import{styled as h,Box as v,alpha as g,TableContainer as p,Table as f,TableHead as m,TableRow as b,TableCell as w,Checkbox as S,TableBody as x,Typography as C}from"@mui/material";import{ListDensity as y}from"./view-list.types.js";import{useListSelection as H,LIST_HEADER_HEIGHT as N,LIST_ROW_HEIGHT_BY_DENSITY as k,LIST_CELL_PADDING_BY_DENSITY as T}from"./view-list.units.js";var W=function(e,l){if(void 0!==e.width)return e.width;if(e.flex&&e.flex>0&&l>0){var n=e.flex/l*100;return"".concat(n,"%")}};function z(e,l,n){var t=e.valueGetter?e.valueGetter(l,n):l[e.field],i={value:t,row:l,index:n,field:e.field};if(e.renderCell)return e.renderCell(i);var r=String(null!=t?t:"");return a(C,{variant:"body2",noWrap:!0,title:r,children:r})}var B=function(e,n){return n?Object.keys(n).map(function(e){var t,i=null!==(t=n[e])&&void 0!==t?t:{};return l({field:e},i)}):function(e){if(0===e.length)return[];var l=e[0];return Object.keys(l).map(function(e){return{field:e,label:String(e),flex:1}})}(e)};function L(e){var n=function(e){return function(l){var n,t,i,o,d,c,s=null!==(n=null!==(t=l.density)&&void 0!==t?t:e.density)&&void 0!==n?n:y.standard,u=B(l.value,null!==(i=l.columns)&&void 0!==i?i:e.columns),h=u.reduce(function(e,l){return e+(l.flex&&l.flex>0?l.flex:0)},0),g=k[s],C=T[s],N=null!==(o=null!==(d=l.selectable)&&void 0!==d?d:e.selectable)&&void 0!==o&&o,L=null!==(c=l.onSelectionChange)&&void 0!==c?c:e.onSelectionChange,I=H(l.value,e.getterId,N,l.selectedIds,L),M=I.selectedIds,j=I.isAllSelected,O=I.isSomeSelected,R=I.handleToggleAll,A=I.handleToggleRow;return a(V,{className:D.root,children:a(p,{className:D.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=l.onNearEnd)||void 0===n||n.call(l))},children:r(f,{size:"small",className:D.table,children:[a(m,{className:D.tableHeader,children:r(b,{children:[N&&a(w,{padding:"checkbox",className:D.tableHeaderCell,sx:{width:48},children:a(S,{checked:j,indeterminate:O,onChange:R})}),u.map(function(e){var l,n,t=W(e,h),i=void 0!==e.width;return a(w,{className:D.tableHeaderCell,align:e.align,sx:{width:t,minWidth:i?t:e.minWidth,maxWidth:null!==(l=e.maxWidth)&&void 0!==l?l:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:null!==(n=e.label)&&void 0!==n?n:String(e.field)},String(e.field))})]})}),a(x,{children:l.value.map(function(l,n){var t,i=null!==(t=e.getterId(l,n))&&void 0!==t?t:n,o=M.includes(i);return r(b,{hover:!0,sx:{height:g},selected:o,children:[N&&a(w,{padding:"checkbox",className:D.tableBodyCell,sx:{height:g,padding:C},children:a(S,{checked:o,onChange:function(){return A(i)}})}),u.map(function(e){var t,r=W(e,h),o=void 0!==e.width;return a(w,{className:D.tableBodyCell,align:e.align,sx:{height:g,padding:C,width:r,minWidth:o?r:e.minWidth,maxWidth:null!==(t=e.maxWidth)&&void 0!==t?t:r,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a(v,{className:D.tableCellContent,children:z(e,l,n)})},"".concat(String(i),"-").concat(String(e.field)))})]},i)})})]})})})}}(e),t=function(e){return function(l){var n,t,o,h,g,C,L,I=null!==(n=null!==(t=l.density)&&void 0!==t?t:e.density)&&void 0!==n?n:y.standard,M=B(l.value,l.columns||e.columns),j=M.reduce(function(e,l){return e+(l.flex&&l.flex>0?l.flex:0)},0),O=k[I],R=T[I],A=null!==(o=null!==(h=l.selectable)&&void 0!==h?h:e.selectable)&&void 0!==o&&o,P=null!==(g=l.onSelectionChange)&&void 0!==g?g:e.onSelectionChange,E=H(l.value,e.getterId,A,l.selectedIds,P),G=E.selectedIds,_=E.isAllSelected,Y=E.isSomeSelected,q=E.handleToggleAll,F=E.handleToggleRow,J=d(function(){return Object.assign({},e.virtualizedConfig,l.virtualizedConfig)},[l.virtualizedConfig]),K=c(null),Q=c(null),U=s(0),X=i(U,2),Z=X[0],$=X[1],ee=s(null!==(C=null==J?void 0:J.scrollTop)&&void 0!==C?C:0),le=i(ee,2),ne=le[0],te=le[1],ie=s(N),ae=i(ie,2),re=ae[0],oe=ae[1],de=Math.max(1,null!==(L=null==J?void 0:J.overscan)&&void 0!==L?L:6);u(function(){if(K.current){var e=function(){var e,l,n=null!==(e=null===(l=K.current)||void 0===l?void 0:l.clientHeight)&&void 0!==e?e:0;$(function(e){return e===n?e:n})};e();var l=new ResizeObserver(function(){e()});return l.observe(K.current),function(){return l.disconnect()}}},[]),u(function(){J&&"number"==typeof J.scrollTop&&te(J.scrollTop)},[null==J?void 0:J.scrollTop]),u(function(){var e,l,n=null!==(e=null===(l=Q.current)||void 0===l?void 0:l.offsetHeight)&&void 0!==e?e:0;n>0&&n!==re&&oe(n)},[M.length,re]);var ce=d(function(){var e,n=l.value.length;if(0===n)return{start:0,end:-1,topSpacerHeight:0,bottomSpacerHeight:0};var t=J&&"number"==typeof J.scrollTop?J.scrollTop:ne,i=Math.max(1,(null!==(e=null==J?void 0:J.viewportHeight)&&void 0!==e?e:Z)-re),a=Math.max(0,t-re),r=Math.max(0,Math.floor(a/O)-de),o=Math.ceil(i/O),d=Math.min(n-1,r+o+2*de);return{start:r,end:d,topSpacerHeight:r*O,bottomSpacerHeight:Math.max(0,(n-d-1)*O)}},[l.value.length,re,de,O,J,ne,Z]),se=ce.end>=ce.start?l.value.slice(ce.start,ce.end+1):[],ue=[D.root,D.virtualized].filter(Boolean).join(" ");return a(V,{className:ue,children:a(p,{ref:K,className:D.scrollContainer,onScroll:function(e){var n,t=e.currentTarget;J&&"number"==typeof J.scrollTop||te(t.scrollTop),t.scrollHeight-t.scrollTop-t.clientHeight<=80&&(null===(n=l.onNearEnd)||void 0===n||n.call(l))},children:r(f,{size:"small",className:D.table,children:[a(m,{className:D.tableHeader,children:r(b,{ref:Q,children:[A&&a(w,{padding:"checkbox",className:D.tableHeaderCell,sx:{width:48},children:a(S,{checked:_,indeterminate:Y,onChange:q})}),M.map(function(e){var l,n,t=W(e,j),i=void 0!==e.width;return a(w,{className:D.tableHeaderCell,align:e.align,sx:{width:t,minWidth:i?t:e.minWidth,maxWidth:null!==(l=e.maxWidth)&&void 0!==l?l:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:null!==(n=e.label)&&void 0!==n?n:String(e.field)},String(e.field))})]})}),r(x,{children:[ce.topSpacerHeight>0?a(b,{className:D.tableSpacerRow,children:a(w,{colSpan:M.length+(A?1:0),className:D.tableSpacerCell,sx:{height:ce.topSpacerHeight,padding:0,border:0}})}):null,se.map(function(l,n){var t,i=ce.start+n,o=null!==(t=e.getterId(l,i))&&void 0!==t?t:i,d=G.includes(o);return r(b,{hover:!0,sx:{height:O},selected:d,children:[A&&a(w,{padding:"checkbox",className:D.tableBodyCell,sx:{height:O,padding:R},children:a(S,{checked:d,onChange:function(){return F(o)}})}),M.map(function(e){var n,t=W(e,j),r=void 0!==e.width;return a(w,{className:D.tableBodyCell,align:e.align,sx:{height:O,padding:R,width:t,minWidth:r?t:e.minWidth,maxWidth:null!==(n=e.maxWidth)&&void 0!==n?n:t,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a(v,{className:D.tableCellContent,children:z(e,l,i)})},"".concat(String(o),"-").concat(String(e.field)))})]},o)}),ce.bottomSpacerHeight>0?a(b,{className:D.tableSpacerRow,children:a(w,{colSpan:M.length+(A?1:0),className:D.tableSpacerCell,sx:{height:ce.bottomSpacerHeight,padding:0,border:0}})}):null]})]})})})}}(e);return function(i){var r,o,d=null!==(r=null!==(o=i.renderStrategy)&&void 0!==o?o:e.renderStrategy)&&void 0!==r?r:"normal";return a("virtualized"===d?t:n,l({},i))}}function I(e){return function(l){var i,r,d,c=o(n(t().m(function e(){var n,i,a,r,o,d,c,s,u;return t().w(function(e){for(;;)switch(e.n){case 0:if("infiniteScroll"===l.loadMode){e.n=1;break}return e.a(2);case 1:if(null!==(n=l.pagination)&&void 0!==n&&n.hasNext){e.n=2;break}return e.a(2);case 2:if(!l.loading){e.n=3;break}return e.a(2);case 3:return c=null!==(i=null===(a=l.pagination)||void 0===a?void 0:a.page)&&void 0!==i?i:0,s=null!==(r=null===(o=l.pagination)||void 0===o?void 0:o.pageSize)&&void 0!==r?r:20,u=c+1,e.n=4,null===(d=l.onPageChange)||void 0===d?void 0:d.call(l,u,s);case 4:return e.a(2)}},e)})),[l.loadMode,null===(i=l.pagination)||void 0===i?void 0:i.hasNext,null===(r=l.pagination)||void 0===r?void 0:r.page,null===(d=l.pagination)||void 0===d?void 0:d.pageSize,l.loading,l.onPageChange]);return a(e,{value:l.value,columns:l.columns,density:l.density,renderStrategy:l.renderStrategy,virtualizedConfig:l.virtualizedConfig,onNearEnd:"infiniteScroll"===l.loadMode?c:void 0,selectable:l.selectable,selectedIds:l.selectedIds,onSelectionChange:l.onSelectionChange})}}var M={root:"DinoViewList-root",virtualized:"DinoViewList-virtualized",scrollContainer:"DinoViewList-scrollContainer",table:"DinoViewList-table",tableHeader:"DinoViewList-tableHeader",tableHeaderCell:"DinoViewList-tableHeaderCell",tableBodyCell:"DinoViewList-tableBodyCell",tableSpacerRow:"DinoViewList-tableSpacerRow",tableSpacerCell:"DinoViewList-tableSpacerCell",tableCellContent:"DinoViewList-tableCellContent"},D=M,V=h(v)(function(l){var n=l.theme,t=n.palette.mode,i=g(n.palette.common.black,"dark"===t?.24:.08),a="dark"===t?n.palette.grey[800]:n.palette.grey[50];return e(e(e(e(e(e(e(e({},"&.".concat(D.root),{position:"relative",width:"100%",height:"100%",overflow:"hidden"}),".".concat(D.scrollContainer),{position:"absolute",inset:0,overflowY:"auto",padding:n.spacing(0,.5),margin:n.spacing(0,-.5),"&::-webkit-scrollbar":{width:8,height:8},"&::-webkit-scrollbar-thumb":{backgroundColor:n.palette.grey[300],borderRadius:4},"&::-webkit-scrollbar-thumb:hover":{backgroundColor:n.palette.grey[500]}}),".".concat(D.table),{tableLayout:"auto",width:"100%",borderCollapse:"separate",borderSpacing:"0 ".concat(n.spacing(.5)),marginTop:n.spacing(-.5)}),".".concat(D.tableHeader),{position:"sticky",top:0,zIndex:2,backgroundColor:a}),".".concat(D.tableHeaderCell),{fontWeight:500,paddingTop:n.spacing(1.5),paddingBottom:n.spacing(1.5),overflow:"hidden",borderBottom:"unset"}),".".concat(D.tableBodyCell),{overflow:"hidden",borderTop:"0.5px dashed ".concat(i),borderBottom:"0.5px dashed ".concat(i),"&:first-of-type":{borderLeft:"0.5px dashed ".concat(i)},"&:last-of-type":{borderRight:"0.5px dashed ".concat(i)}}),".".concat(D.tableCellContent),{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0,width:"100%"}),"&.".concat(D.virtualized),{boxSizing:"border-box"})});export{L as createViewList,I as createViewListLoading,L as default,M as viewListClasses};
+//# sourceMappingURL=view-list.js.map

package/dist/src/lab/data-surface/view-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-list.js","sources":["../../../../src/lab/data-surface/view-list.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { Box, Checkbox, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, alpha, styled } from '@mui/material'\r\nimport { ListDensity } from './view-list.types'\r\nimport { LIST_CELL_PADDING_BY_DENSITY, LIST_HEADER_HEIGHT, LIST_ROW_HEIGHT_BY_DENSITY, useListSelection } from './view-list.units'\r\n// types\r\nimport type { ComponentType, FC, ReactNode } from 'react'\r\nimport type { IListCellParams, TListColumn, TListColumns } from './view-list.types'\r\nimport type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\n\r\nexport interface IViewListBase<T> {\r\n  columns?: TListColumns<T>\r\n  density?: ListDensity\r\n  /**\r\n   * Controls how the list is rendered into the DOM.\r\n   * - `normal`      — all rows are mounted (suitable for small datasets)\r\n   * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n   * @default 'normal'\r\n   */\r\n  renderStrategy?: RenderStrategyRule\r\n  virtualizedConfig?: TVirtualizedConfig\r\n  /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */\r\n  onNearEnd?: () => void\r\n  /** Enable row selection with checkboxes. */\r\n  selectable?: boolean\r\n  /** Array of selected row IDs (controlled). */\r\n  selectedIds?: (string | number)[]\r\n  /** Callback when selection changes. */\r\n  onSelectionChange?: (selectedIds: (string | number)[]) => void\r\n}\r\n\r\nexport interface IViewListConfig<T> extends IViewListBase<T> {\r\n  getterId: TGetterId<T>\r\n}\r\n\r\nexport interface IViewListProps<T> extends IViewListBase<T> {\r\n  value: T[]\r\n}\r\n\r\nexport interface IViewListLoadingProps<T> extends IViewListBase<T> {\r\n  value: T[]\r\n  loadMode: LoadingModeRule\r\n  loading?: boolean\r\n  pagination?: TPagination\r\n  onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n}\r\n\r\nconst getColumnWidth = <T,>(column: TListColumn<T>, totalFlex: number): number | string | undefined => {\r\n  // Priority 1: Explicit width always wins\r\n  if (column.width !== undefined) return column.width\r\n\r\n  // Priority 2: Flex-based proportional width\r\n  if (column.flex && column.flex > 0 && totalFlex > 0) {\r\n    const percent = (column.flex / totalFlex) * 100\r\n    return `${percent}%`\r\n  }\r\n\r\n  // Priority 3: Auto-width (no width or flex specified)\r\n  // Let the table auto-calculate based on content\r\n  return undefined\r\n}\r\n\r\nfunction renderCellValue<T>(column: TListColumn<T>, row: T, index: number): ReactNode {\r\n  const value = column.valueGetter ? column.valueGetter(row, index) : (row as any)[column.field]\r\n  const params: IListCellParams<T> = { value, row, index, field: column.field }\r\n  if (column.renderCell) return column.renderCell(params)\r\n  const valueLabel = String(value ?? '')\r\n  return (\r\n    <Typography variant='body2' noWrap title={valueLabel}>\r\n      {valueLabel}\r\n    </Typography>\r\n  )\r\n}\r\n\r\nconst buildDefaultColumns = <T,>(data: T[]): TListColumn<T>[] => {\r\n  if (data.length === 0) return []\r\n  const firstRow = data[0]\r\n  return Object.keys(firstRow as object).map((key) => ({\r\n    field: key as keyof T,\r\n    label: String(key),\r\n    flex: 1\r\n  }))\r\n}\r\n\r\n/**\r\n * Converts TListColumns<T> Record type to TListColumn<T>[] array for internal use.\r\n */\r\nconst columnsRecordToArray = <T,>(value: T[], columnsRecord?: TListColumns<T>): TListColumn<T>[] => {\r\n  if (!columnsRecord) return buildDefaultColumns(value)\r\n  const keys = Object.keys(columnsRecord) as (keyof T)[]\r\n  return keys.map((key) => {\r\n    const colConfig = columnsRecord[key] ?? {}\r\n    return { field: key, ...colConfig } as TListColumn<T>\r\n  })\r\n}\r\n\r\nfunction createViewListNormal<T>(config: IViewListConfig<T>) {\r\n  const ViewListNormal: FC<IViewListProps<T>> = (props) => {\r\n    const density = props.density ?? config.density ?? ListDensity.standard\r\n\r\n    const columnsArray = columnsRecordToArray(props.value, props.columns ?? config.columns)\r\n    const columns = columnsArray\r\n    const totalFlex = columns.reduce((sum, col) => sum + (col.flex && col.flex > 0 ? col.flex : 0), 0)\r\n    const rowHeight = LIST_ROW_HEIGHT_BY_DENSITY[density]\r\n    const cellPadding = LIST_CELL_PADDING_BY_DENSITY[density]\r\n\r\n    const selectable = props.selectable ?? config.selectable ?? false\r\n    const onSelectionChange = props.onSelectionChange ?? config.onSelectionChange\r\n\r\n    // Use selection hook to manage checkbox state and handlers\r\n    const selection = useListSelection(props.value, config.getterId, selectable, props.selectedIds, onSelectionChange)\r\n    const { selectedIds, isAllSelected, isSomeSelected, handleToggleAll, handleToggleRow } = selection\r\n\r\n    return (\r\n      <ViewListStyled className={classes.root}>\r\n        <TableContainer\r\n          className={classes.scrollContainer}\r\n          onScroll={(e) => {\r\n            const t = e.currentTarget\r\n            if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n              props.onNearEnd?.()\r\n            }\r\n          }}\r\n        >\r\n          <Table size='small' className={classes.table}>\r\n            <TableHead className={classes.tableHeader}>\r\n              <TableRow>\r\n                {selectable && (\r\n                  <TableCell padding='checkbox' className={classes.tableHeaderCell} sx={{ width: 48 }}>\r\n                    <Checkbox checked={isAllSelected} indeterminate={isSomeSelected} onChange={handleToggleAll} />\r\n                  </TableCell>\r\n                )}\r\n                {columns.map((col) => {\r\n                  const colWidth = getColumnWidth(col, totalFlex)\r\n                  const hasFixedWidth = col.width !== undefined\r\n                  return (\r\n                    <TableCell\r\n                      key={String(col.field)}\r\n                      className={classes.tableHeaderCell}\r\n                      align={col.align}\r\n                      sx={{\r\n                        width: colWidth,\r\n                        // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n                        minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n                        // Lock all columns with maxWidth to prevent text overflow expansion\r\n                        maxWidth: col.maxWidth ?? colWidth,\r\n                        // Prevent text overflow from expanding cells\r\n                        overflow: 'hidden',\r\n                        textOverflow: 'ellipsis',\r\n                        whiteSpace: 'nowrap'\r\n                      }}\r\n                    >\r\n                      {col.label ?? String(col.field)}\r\n                    </TableCell>\r\n                  )\r\n                })}\r\n              </TableRow>\r\n            </TableHead>\r\n            <TableBody>\r\n              {props.value.map((row, index) => {\r\n                const rowKey = config.getterId(row, index) ?? index\r\n                const isSelected = selectedIds.includes(rowKey)\r\n                return (\r\n                  <TableRow key={rowKey} hover sx={{ height: rowHeight }} selected={isSelected}>\r\n                    {selectable && (\r\n                      <TableCell padding='checkbox' className={classes.tableBodyCell} sx={{ height: rowHeight, padding: cellPadding }}>\r\n                        <Checkbox checked={isSelected} onChange={() => handleToggleRow(rowKey)} />\r\n                      </TableCell>\r\n                    )}\r\n                    {columns.map((col) => {\r\n                      const colWidth = getColumnWidth(col, totalFlex)\r\n                      const hasFixedWidth = col.width !== undefined\r\n                      return (\r\n                        <TableCell\r\n                          key={`${String(rowKey)}-${String(col.field)}`}\r\n                          className={classes.tableBodyCell}\r\n                          align={col.align}\r\n                          sx={{\r\n                            height: rowHeight,\r\n                            padding: cellPadding,\r\n                            width: colWidth,\r\n                            // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n                            minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n                            // Lock all columns with maxWidth to prevent text overflow expansion\r\n                            maxWidth: col.maxWidth ?? colWidth,\r\n                            // Prevent text overflow from expanding cells\r\n                            overflow: 'hidden',\r\n                            textOverflow: 'ellipsis',\r\n                            whiteSpace: 'nowrap'\r\n                          }}\r\n                        >\r\n                          <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n                        </TableCell>\r\n                      )\r\n                    })}\r\n                  </TableRow>\r\n                )\r\n              })}\r\n            </TableBody>\r\n          </Table>\r\n        </TableContainer>\r\n      </ViewListStyled>\r\n    )\r\n  }\r\n  return ViewListNormal\r\n}\r\n\r\nfunction createViewListVirtualized<T>(config: IViewListConfig<T>) {\r\n  const ViewListVirtualized: FC<IViewListProps<T>> = (props) => {\r\n    const density = props.density ?? config.density ?? ListDensity.standard\r\n    const columnsArray = columnsRecordToArray(props.value, props.columns || config.columns)\r\n    const columns = columnsArray\r\n    const totalFlex = columns.reduce((sum, col) => sum + (col.flex && col.flex > 0 ? col.flex : 0), 0)\r\n    const rowHeight = LIST_ROW_HEIGHT_BY_DENSITY[density]\r\n    const cellPadding = LIST_CELL_PADDING_BY_DENSITY[density]\r\n\r\n    const selectable = props.selectable ?? config.selectable ?? false\r\n    const onSelectionChange = props.onSelectionChange ?? config.onSelectionChange\r\n\r\n    // Use selection hook to manage checkbox state and handlers\r\n    const selection = useListSelection(props.value, config.getterId, selectable, props.selectedIds, onSelectionChange)\r\n    const { selectedIds, isAllSelected, isSomeSelected, handleToggleAll, handleToggleRow } = selection\r\n\r\n    const virtualized = useMemo(() => {\r\n      return Object.assign({}, config.virtualizedConfig, props.virtualizedConfig) as TVirtualizedConfig | undefined\r\n    }, [props.virtualizedConfig])\r\n\r\n    const wrapRef = useRef<HTMLDivElement | null>(null)\r\n    const headerRowRef = useRef<HTMLTableRowElement | null>(null)\r\n    const [containerHeight, setContainerHeight] = useState(0)\r\n    const [scrollTopState, setScrollTopState] = useState(virtualized?.scrollTop ?? 0)\r\n    const [headerHeight, setHeaderHeight] = useState(LIST_HEADER_HEIGHT)\r\n\r\n    const overscan = Math.max(1, virtualized?.overscan ?? 6)\r\n\r\n    useLayoutEffect(() => {\r\n      if (!wrapRef.current) return\r\n\r\n      const updateSize = () => {\r\n        const nextHeight = wrapRef.current?.clientHeight ?? 0\r\n        setContainerHeight((prev) => (prev === nextHeight ? prev : nextHeight))\r\n      }\r\n\r\n      updateSize()\r\n\r\n      const observer = new ResizeObserver(() => {\r\n        updateSize()\r\n      })\r\n\r\n      observer.observe(wrapRef.current)\r\n      return () => observer.disconnect()\r\n    }, [])\r\n\r\n    // sync external virtualized.scrollTop when provided\r\n    useLayoutEffect(() => {\r\n      if (virtualized && typeof virtualized.scrollTop === 'number') {\r\n        setScrollTopState(virtualized.scrollTop)\r\n      }\r\n    }, [virtualized?.scrollTop])\r\n\r\n    useLayoutEffect(() => {\r\n      const measured = headerRowRef.current?.offsetHeight ?? 0\r\n      if (measured > 0 && measured !== headerHeight) {\r\n        setHeaderHeight(measured)\r\n      }\r\n    }, [columns.length, headerHeight])\r\n\r\n    const windowed = useMemo(() => {\r\n      const totalItems = props.value.length\r\n      if (totalItems === 0) {\r\n        return { start: 0, end: -1, topSpacerHeight: 0, bottomSpacerHeight: 0 }\r\n      }\r\n\r\n      const effectiveScrollTop = virtualized && typeof virtualized.scrollTop === 'number' ? virtualized.scrollTop : scrollTopState\r\n      const safeViewportHeight = Math.max(1, (virtualized?.viewportHeight ?? containerHeight) - headerHeight)\r\n      const adjustedScrollTop = Math.max(0, effectiveScrollTop - headerHeight)\r\n      const start = Math.max(0, Math.floor(adjustedScrollTop / rowHeight) - overscan)\r\n      const visibleCount = Math.ceil(safeViewportHeight / rowHeight)\r\n      const end = Math.min(totalItems - 1, start + visibleCount + overscan * 2)\r\n\r\n      const topSpacerHeight = start * rowHeight\r\n      const bottomSpacerHeight = Math.max(0, (totalItems - end - 1) * rowHeight)\r\n\r\n      return { start, end, topSpacerHeight, bottomSpacerHeight }\r\n    }, [props.value.length, headerHeight, overscan, rowHeight, virtualized, scrollTopState, containerHeight])\r\n\r\n    const rowsToRender = windowed.end >= windowed.start ? props.value.slice(windowed.start, windowed.end + 1) : []\r\n    const rootClasses = [classes.root, classes.virtualized].filter(Boolean).join(' ')\r\n    return (\r\n      <ViewListStyled className={rootClasses}>\r\n        <TableContainer\r\n          ref={wrapRef}\r\n          className={classes.scrollContainer}\r\n          onScroll={(e) => {\r\n            const t = e.currentTarget as HTMLDivElement\r\n            if (!virtualized || typeof virtualized.scrollTop !== 'number') {\r\n              setScrollTopState(t.scrollTop)\r\n            }\r\n            if (t.scrollHeight - t.scrollTop - t.clientHeight <= 80) {\r\n              props.onNearEnd?.()\r\n            }\r\n          }}\r\n        >\r\n          <Table size='small' className={classes.table}>\r\n            <TableHead className={classes.tableHeader}>\r\n              <TableRow ref={headerRowRef}>\r\n                {selectable && (\r\n                  <TableCell padding='checkbox' className={classes.tableHeaderCell} sx={{ width: 48 }}>\r\n                    <Checkbox checked={isAllSelected} indeterminate={isSomeSelected} onChange={handleToggleAll} />\r\n                  </TableCell>\r\n                )}\r\n                {columns.map((col) => {\r\n                  const colWidth = getColumnWidth(col, totalFlex)\r\n                  const hasFixedWidth = col.width !== undefined\r\n                  return (\r\n                    <TableCell\r\n                      key={String(col.field)}\r\n                      className={classes.tableHeaderCell}\r\n                      align={col.align}\r\n                      sx={{\r\n                        width: colWidth,\r\n                        // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n                        minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n                        // Lock all columns with maxWidth to prevent text overflow expansion\r\n                        maxWidth: col.maxWidth ?? colWidth,\r\n                        // Prevent text overflow from expanding cells\r\n                        overflow: 'hidden',\r\n                        textOverflow: 'ellipsis',\r\n                        whiteSpace: 'nowrap'\r\n                      }}\r\n                    >\r\n                      {col.label ?? String(col.field)}\r\n                    </TableCell>\r\n                  )\r\n                })}\r\n              </TableRow>\r\n            </TableHead>\r\n            <TableBody>\r\n              {windowed.topSpacerHeight > 0 ? (\r\n                <TableRow className={classes.tableSpacerRow}>\r\n                  <TableCell\r\n                    colSpan={columns.length + (selectable ? 1 : 0)}\r\n                    className={classes.tableSpacerCell}\r\n                    sx={{ height: windowed.topSpacerHeight, padding: 0, border: 0 }}\r\n                  />\r\n                </TableRow>\r\n              ) : null}\r\n\r\n              {rowsToRender.map((row, offset) => {\r\n                const index = windowed.start + offset\r\n                const rowKey = config.getterId(row, index) ?? index\r\n                const isSelected = selectedIds.includes(rowKey)\r\n\r\n                return (\r\n                  <TableRow key={rowKey} hover sx={{ height: rowHeight }} selected={isSelected}>\r\n                    {selectable && (\r\n                      <TableCell padding='checkbox' className={classes.tableBodyCell} sx={{ height: rowHeight, padding: cellPadding }}>\r\n                        <Checkbox checked={isSelected} onChange={() => handleToggleRow(rowKey)} />\r\n                      </TableCell>\r\n                    )}\r\n                    {columns.map((col) => {\r\n                      const colWidth = getColumnWidth(col, totalFlex)\r\n                      const hasFixedWidth = col.width !== undefined\r\n                      return (\r\n                        <TableCell\r\n                          key={`${String(rowKey)}-${String(col.field)}`}\r\n                          className={classes.tableBodyCell}\r\n                          align={col.align}\r\n                          sx={{\r\n                            height: rowHeight,\r\n                            padding: cellPadding,\r\n                            width: colWidth,\r\n                            // For fixed-width columns, enforce minWidth = width to prevent shrinking\r\n                            minWidth: hasFixedWidth ? colWidth : col.minWidth,\r\n                            // Lock all columns with maxWidth to prevent text overflow expansion\r\n                            maxWidth: col.maxWidth ?? colWidth,\r\n                            // Prevent text overflow from expanding cells\r\n                            overflow: 'hidden',\r\n                            textOverflow: 'ellipsis',\r\n                            whiteSpace: 'nowrap'\r\n                          }}\r\n                        >\r\n                          <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n                        </TableCell>\r\n                      )\r\n                    })}\r\n                  </TableRow>\r\n                )\r\n              })}\r\n\r\n              {windowed.bottomSpacerHeight > 0 ? (\r\n                <TableRow className={classes.tableSpacerRow}>\r\n                  <TableCell\r\n                    colSpan={columns.length + (selectable ? 1 : 0)}\r\n                    className={classes.tableSpacerCell}\r\n                    sx={{ height: windowed.bottomSpacerHeight, padding: 0, border: 0 }}\r\n                  />\r\n                </TableRow>\r\n              ) : null}\r\n            </TableBody>\r\n          </Table>\r\n        </TableContainer>\r\n      </ViewListStyled>\r\n    )\r\n  }\r\n  return ViewListVirtualized\r\n}\r\n\r\nexport function createViewList<T>(config: IViewListConfig<T>) {\r\n  const ViewListNormal = createViewListNormal<T>(config)\r\n  const ViewListVirtualized = createViewListVirtualized<T>(config)\r\n\r\n  const ViewList: FC<IViewListProps<T>> = (props) => {\r\n    const renderStrategy = props.renderStrategy ?? config.renderStrategy ?? 'normal'\r\n    if (renderStrategy === 'virtualized') {\r\n      return <ViewListVirtualized {...props} />\r\n    }\r\n    return <ViewListNormal {...props} />\r\n  }\r\n  return ViewList\r\n}\r\n\r\nexport function createViewListLoading<T>(ListComponent: ComponentType<IViewListProps<T>>) {\r\n  const ViewListLoading: FC<IViewListLoadingProps<T>> = (props) => {\r\n    const handleNearEnd = useCallback(async () => {\r\n      if (props.loadMode !== 'infiniteScroll') return\r\n      if (!props.pagination?.hasNext) return\r\n      if (props.loading) return\r\n\r\n      const currentPage = props.pagination?.page ?? 0\r\n      const currentPageSize = props.pagination?.pageSize ?? 20\r\n      const nextPage = currentPage + 1\r\n      await props.onPageChange?.(nextPage, currentPageSize)\r\n    }, [props.loadMode, props.pagination?.hasNext, props.pagination?.page, props.pagination?.pageSize, props.loading, props.onPageChange])\r\n\r\n    return (\r\n      <ListComponent\r\n        value={props.value}\r\n        columns={props.columns}\r\n        density={props.density}\r\n        renderStrategy={props.renderStrategy}\r\n        virtualizedConfig={props.virtualizedConfig}\r\n        onNearEnd={props.loadMode === 'infiniteScroll' ? handleNearEnd : undefined}\r\n        selectable={props.selectable}\r\n        selectedIds={props.selectedIds}\r\n        onSelectionChange={props.onSelectionChange}\r\n      />\r\n    )\r\n  }\r\n\r\n  return ViewListLoading\r\n}\r\n\r\nexport default createViewList\r\n\r\nexport const viewListClasses = {\r\n  root: 'DinoViewList-root',\r\n  virtualized: 'DinoViewList-virtualized',\r\n  scrollContainer: 'DinoViewList-scrollContainer',\r\n  table: 'DinoViewList-table',\r\n  tableHeader: 'DinoViewList-tableHeader',\r\n  tableHeaderCell: 'DinoViewList-tableHeaderCell',\r\n  tableBodyCell: 'DinoViewList-tableBodyCell',\r\n  tableSpacerRow: 'DinoViewList-tableSpacerRow',\r\n  tableSpacerCell: 'DinoViewList-tableSpacerCell',\r\n  tableCellContent: 'DinoViewList-tableCellContent'\r\n}\r\nconst classes = viewListClasses\r\n\r\nconst ViewListStyled = styled(Box)(({ theme }) => {\r\n  const mode = theme.palette.mode\r\n  const borderColor = alpha(theme.palette.common.black, mode === 'dark' ? 0.24 : 0.08)\r\n  const bgHeader = mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[50]\r\n\r\n  return {\r\n    [`&.${classes.root}`]: {\r\n      position: 'relative',\r\n      width: '100%',\r\n      height: '100%',\r\n      overflow: 'hidden'\r\n      // border: `1px solid ${theme.palette.divider}`,\r\n      // borderRadius: theme.spacing(1),\r\n    },\r\n    [`.${classes.scrollContainer}`]: {\r\n      position: 'absolute',\r\n      inset: 0, // top: 0, left: 0, right: 0, bottom: 0\r\n      overflowY: 'auto',\r\n      padding: theme.spacing(0, 0.5),\r\n      margin: theme.spacing(0, -0.5),\r\n      // Scrollbar styling\r\n      '&::-webkit-scrollbar': { width: 8, height: 8 },\r\n      '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.grey[300], borderRadius: 4 },\r\n      '&::-webkit-scrollbar-thumb:hover': { backgroundColor: theme.palette.grey[500] }\r\n    },\r\n    [`.${classes.table}`]: {\r\n      tableLayout: 'auto',\r\n      width: '100%',\r\n      borderCollapse: 'separate',\r\n      borderSpacing: `0 ${theme.spacing(0.5)}`,\r\n      marginTop: theme.spacing(-0.5)\r\n    },\r\n    [`.${classes.tableHeader}`]: {\r\n      position: 'sticky',\r\n      top: 0,\r\n      zIndex: 2,\r\n      backgroundColor: bgHeader\r\n    },\r\n    [`.${classes.tableHeaderCell}`]: {\r\n      fontWeight: 500,\r\n      paddingTop: theme.spacing(1.5),\r\n      paddingBottom: theme.spacing(1.5),\r\n      overflow: 'hidden',\r\n      borderBottom: 'unset'\r\n      // borderTop: `1px dashed ${borderColor}`,\r\n      // borderBottom: `1px dashed ${borderColor}`,\r\n      // '&:first-of-type': { borderLeft: `1px dashed ${borderColor}` },\r\n      // '&:last-of-type': { borderRight: `1px dashed ${borderColor}` }\r\n    },\r\n    [`.${classes.tableBodyCell}`]: {\r\n      overflow: 'hidden',\r\n      borderTop: `0.5px dashed ${borderColor}`,\r\n      borderBottom: `0.5px dashed ${borderColor}`,\r\n      '&:first-of-type': { borderLeft: `0.5px dashed ${borderColor}` },\r\n      '&:last-of-type': { borderRight: `0.5px dashed ${borderColor}` }\r\n    },\r\n    [`.${classes.tableCellContent}`]: {\r\n      overflow: 'hidden',\r\n      textOverflow: 'ellipsis',\r\n      whiteSpace: 'nowrap',\r\n      minWidth: 0, // Allow shrinking below content size\r\n      width: '100%' // Fill parent TableCell\r\n    },\r\n    // Virtualized styles\r\n    [`&.${classes.virtualized}`]: {\r\n      boxSizing: 'border-box'\r\n    }\r\n  }\r\n})\r\n"],"names":["getColumnWidth","column","totalFlex","undefined","width","flex","percent","concat","renderCellValue","row","index","value","valueGetter","field","params","renderCell","valueLabel","String","_jsx","Typography","variant","noWrap","title","columnsRecordToArray","columnsRecord","Object","keys","map","key","_columnsRecord$key","colConfig","_objectSpread","data","length","firstRow","label","buildDefaultColumns","createViewList","config","ViewListNormal","props","_ref","_props$density","_props$columns","_ref2","_props$selectable","_props$onSelectionCha","density","ListDensity","standard","columns","reduce","sum","col","rowHeight","LIST_ROW_HEIGHT_BY_DENSITY","cellPadding","LIST_CELL_PADDING_BY_DENSITY","selectable","onSelectionChange","selection","useListSelection","getterId","selectedIds","isAllSelected","isSomeSelected","handleToggleAll","handleToggleRow","ViewListStyled","className","classes","root","children","TableContainer","scrollContainer","onScroll","e","_props$onNearEnd","t","currentTarget","scrollHeight","scrollTop","clientHeight","onNearEnd","call","_jsxs","Table","size","table","TableHead","tableHeader","TableRow","TableCell","padding","tableHeaderCell","sx","Checkbox","checked","indeterminate","onChange","_col$maxWidth","_col$label","colWidth","hasFixedWidth","align","minWidth","maxWidth","overflow","textOverflow","whiteSpace","TableBody","_config$getterId","rowKey","isSelected","includes","hover","height","selected","tableBodyCell","_col$maxWidth2","Box","tableCellContent","createViewListNormal","ViewListVirtualized","_ref3","_props$density2","_ref4","_props$selectable2","_props$onSelectionCha2","_virtualized$scrollTo","_virtualized$overscan","virtualized","useMemo","assign","virtualizedConfig","wrapRef","useRef","headerRowRef","_useState","useState","_useState2","_slicedToArray","containerHeight","setContainerHeight","_useState3","_useState4","scrollTopState","setScrollTopState","_useState5","LIST_HEADER_HEIGHT","_useState6","headerHeight","setHeaderHeight","overscan","Math","max","useLayoutEffect","current","updateSize","_wrapRef$current$clie","_wrapRef$current","nextHeight","prev","observer","ResizeObserver","observe","disconnect","_headerRowRef$current","_headerRowRef$current2","measured","offsetHeight","windowed","_virtualized$viewport","totalItems","start","end","topSpacerHeight","bottomSpacerHeight","effectiveScrollTop","safeViewportHeight","viewportHeight","adjustedScrollTop","floor","visibleCount","ceil","min","rowsToRender","slice","rootClasses","filter","Boolean","join","ref","_props$onNearEnd2","_col$maxWidth3","_col$label2","tableSpacerRow","colSpan","tableSpacerCell","border","offset","_config$getterId2","_col$maxWidth4","createViewListVirtualized","_ref5","_props$renderStrategy","renderStrategy","createViewListLoading","ListComponent","_props$pagination4","_props$pagination5","_props$pagination6","handleNearEnd","useCallback","_asyncToGenerator","_regenerator","m","_callee","_props$pagination","_props$pagination$pag","_props$pagination2","_props$pagination$pag2","_props$pagination3","_props$onPageChange","currentPage","currentPageSize","nextPage","w","_context","n","loadMode","a","pagination","hasNext","loading","page","pageSize","onPageChange","viewListClasses","styled","_ref7","theme","mode","palette","borderColor","alpha","common","black","bgHeader","grey","_defineProperty","position","inset","overflowY","spacing","margin","backgroundColor","borderRadius","tableLayout","borderCollapse","borderSpacing","marginTop","top","zIndex","fontWeight","paddingTop","paddingBottom","borderBottom","borderTop","borderLeft","borderRight","boxSizing"],"mappings":"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"}

package/dist/src/lab/data-surface/view-list.types.js

@@ -0,0 +1,2 @@
+var a={compact:"compact",standard:"standard",comfortable:"comfortable"};export{a as ListDensity};
+//# sourceMappingURL=view-list.types.js.map

package/dist/src/lab/data-surface/view-list.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-list.types.js","sources":["../../../../src/lab/data-surface/view-list.types.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport type { ReactNode } from 'react'\r\n\r\n/**\r\n * Props received by the custom render function for each row in List view.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface IViewListItemProps<T> {\r\n  /** The data object for this list row. */\r\n  value: T\r\n  /** Zero-based position of this item in the data array. */\r\n  index: number\r\n  /** Whether this row is currently selected. */\r\n  selected?: boolean\r\n}\r\n\r\n/** Horizontal alignment for list cell content. */\r\nexport type TListAlign = 'left' | 'right' | 'center'\r\n\r\n/**\r\n * Context passed to a column's render callback.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface IListCellParams<T> {\r\n  /** Resolved cell value (after valueGetter if provided). */\r\n  value: any\r\n  /** The full row object. */\r\n  row: T\r\n  /** Zero-based row index. */\r\n  index: number\r\n  /** The column field key this cell belongs to. */\r\n  field: keyof T\r\n}\r\n\r\n/**\r\n * Definition of a single column in List view.\r\n * @template T - The shape of a single data row object.\r\n */\r\nexport interface TListColumn<T> {\r\n  /** Key of the row object this column maps to. */\r\n  field: keyof T\r\n  /** Column header label shown in the header. */\r\n  label?: string\r\n  /** Explicit column width. Accepts px number or CSS string (e.g. '120px', '20%'). */\r\n  width?: number | string\r\n  /** Minimum column width in pixels. */\r\n  minWidth?: number\r\n  /** Maximum column width in pixels. */\r\n  maxWidth?: number\r\n  /** Flex grow ratio used when no explicit width is set. */\r\n  flex?: number\r\n  /** Horizontal alignment of the cell content. */\r\n  align?: TListAlign\r\n  /** Custom cell render function - receives CellParams, returns ReactNode. */\r\n  renderCell?: (params: IListCellParams<T>) => ReactNode\r\n  /** Derives a value from the row before it is passed to the render step. */\r\n  valueGetter?: (row: T, index: number) => any\r\n}\r\n\r\nexport type TListColumns<T> = Partial<Record<keyof T, Omit<TListColumn<T>, 'field'>>>\r\n\r\n/**\r\n * Row density preset for List view.\r\n * Controls the row height and cell padding.\r\n */\r\nexport const ListDensity = {\r\n  compact: 'compact',\r\n  standard: 'standard',\r\n  comfortable: 'comfortable'\r\n} as const\r\nexport type ListDensity = keyof typeof ListDensity\r\n"],"names":["ListDensity","compact","standard","comfortable"],"mappings":"AAkEO,IAAMA,EAAc,CACzBC,QAAS,UACTC,SAAU,WACVC,YAAa"}

package/dist/src/lab/data-surface/view-list.units.js

@@ -0,0 +1,2 @@
+import{toConsumableArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useMemo as r}from"react";var n=48,t={compact:36,standard:48,comfortable:56},l={compact:"6px 10px",standard:"10px 12px",comfortable:"12px 14px"};function o(n,t,l,o,a){var c=null!=o?o:[],u=r(function(){var e=new Map;return n.forEach(function(r,n){var l=t(r,n);null!=l&&e.set(l,r)}),e},[n,t]),i=r(function(){return Array.from(u.keys())},[u]),f=i.length>0&&i.every(function(e){return c.includes(e)}),p=c.length>0&&!f;return{selectedIds:c,isAllSelected:f,isSomeSelected:p,handleToggleAll:function(){l&&a&&a(f?[]:i)},handleToggleRow:function(r){if(l&&a){var n=c.includes(r)?c.filter(function(e){return e!==r}):[].concat(e(c),[r]);a(n)}}}}export{l as LIST_CELL_PADDING_BY_DENSITY,n as LIST_HEADER_HEIGHT,t as LIST_ROW_HEIGHT_BY_DENSITY,o as useListSelection};
+//# sourceMappingURL=view-list.units.js.map

package/dist/src/lab/data-surface/view-list.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-list.units.js","sources":["../../../../src/lab/data-surface/view-list.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { useMemo } from 'react'\r\nimport { ListDensity } from './view-list.types'\r\nimport type { TGetterId } from './types'\r\n\r\nexport const LIST_HEADER_HEIGHT = 48\r\n\r\nexport const LIST_ROW_HEIGHT_BY_DENSITY: Record<ListDensity, number> = {\r\n  compact: 36,\r\n  standard: 48,\r\n  comfortable: 56\r\n}\r\n\r\nexport const LIST_CELL_PADDING_BY_DENSITY: Record<ListDensity, string> = {\r\n  compact: '6px 10px',\r\n  standard: '10px 12px',\r\n  comfortable: '12px 14px'\r\n}\r\n\r\n/**\r\n * Custom hook to manage list row selection logic.\r\n * Handles select all, individual row selection, and indeterminate state.\r\n *\r\n * @param value - The array of data items\r\n * @param getterId - Function to extract unique ID from each row\r\n * @param selectable - Whether selection is enabled\r\n * @param selectedIds - Controlled array of selected row IDs\r\n * @param onSelectionChange - Callback when selection changes\r\n * @returns Selection state and handlers\r\n */\r\nexport function useListSelection<T>(\r\n  value: T[],\r\n  getterId: TGetterId<T>,\r\n  selectable: boolean,\r\n  selectedIds?: (string | number)[],\r\n  onSelectionChange?: (selectedIds: (string | number)[]) => void\r\n) {\r\n  const safeSelectedIds = selectedIds ?? []\r\n\r\n  // Build map of row IDs for quick lookup\r\n  const rowIdMap = useMemo(() => {\r\n    const map = new Map<string | number, T>()\r\n    value.forEach((row, index) => {\r\n      const id = getterId(row, index)\r\n      if (id !== null && id !== undefined) {\r\n        map.set(id, row)\r\n      }\r\n    })\r\n    return map\r\n  }, [value, getterId])\r\n\r\n  const allRowIds = useMemo(() => Array.from(rowIdMap.keys()), [rowIdMap])\r\n\r\n  const isAllSelected = allRowIds.length > 0 && allRowIds.every((id) => safeSelectedIds.includes(id))\r\n  const isSomeSelected = safeSelectedIds.length > 0 && !isAllSelected\r\n\r\n  const handleToggleAll = () => {\r\n    if (!selectable || !onSelectionChange) return\r\n    if (isAllSelected) {\r\n      onSelectionChange([])\r\n    } else {\r\n      onSelectionChange(allRowIds)\r\n    }\r\n  }\r\n\r\n  const handleToggleRow = (rowId: string | number) => {\r\n    if (!selectable || !onSelectionChange) return\r\n    const newSelected = safeSelectedIds.includes(rowId) ? safeSelectedIds.filter((id) => id !== rowId) : [...safeSelectedIds, rowId]\r\n    onSelectionChange(newSelected)\r\n  }\r\n\r\n  return {\r\n    selectedIds: safeSelectedIds,\r\n    isAllSelected,\r\n    isSomeSelected,\r\n    handleToggleAll,\r\n    handleToggleRow\r\n  }\r\n}\r\n"],"names":["LIST_HEADER_HEIGHT","LIST_ROW_HEIGHT_BY_DENSITY","compact","standard","comfortable","LIST_CELL_PADDING_BY_DENSITY","useListSelection","value","getterId","selectable","selectedIds","onSelectionChange","safeSelectedIds","rowIdMap","useMemo","map","Map","forEach","row","index","id","set","allRowIds","Array","from","keys","isAllSelected","length","every","includes","isSomeSelected","handleToggleAll","handleToggleRow","rowId","newSelected","filter","concat","_toConsumableArray"],"mappings":"mHAMO,IAAMA,EAAqB,GAErBC,EAA0D,CACrEC,QAAS,GACTC,SAAU,GACVC,YAAa,IAGFC,EAA4D,CACvEH,QAAS,WACTC,SAAU,YACVC,YAAa,aAcT,SAAUE,EACdC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAkBF,QAAAA,EAAe,GAGjCG,EAAWC,EAAQ,WACvB,IAAMC,EAAM,IAAIC,IAOhB,OANAT,EAAMU,QAAQ,SAACC,EAAKC,GAClB,IAAMC,EAAKZ,EAASU,EAAKC,GACrBC,SACFL,EAAIM,IAAID,EAAIF,EAEhB,GACOH,CACT,EAAG,CAACR,EAAOC,IAELc,EAAYR,EAAQ,WAAA,OAAMS,MAAMC,KAAKX,EAASY,SAAS,CAACZ,IAExDa,EAAgBJ,EAAUK,OAAS,GAAKL,EAAUM,MAAM,SAACR,GAAE,OAAKR,EAAgBiB,SAAST,KACzFU,EAAiBlB,EAAgBe,OAAS,IAAMD,EAiBtD,MAAO,CACLhB,YAAaE,EACbc,cAAAA,EACAI,eAAAA,EACAC,gBAnBsB,WACjBtB,GAAeE,GAElBA,EADEe,EACgB,GAEAJ,EAErB,EAaCU,gBAXsB,SAACC,GACvB,GAAKxB,GAAeE,EAApB,CACA,IAAMuB,EAActB,EAAgBiB,SAASI,GAASrB,EAAgBuB,OAAO,SAACf,GAAE,OAAKA,IAAOa,IAAM,GAAAG,OAAAC,EAAOzB,GAAe,CAAEqB,IAC1HtB,EAAkBuB,EAFqB,CAGxC,EASH"}

package/dist/src/lab/data-surface/view-switch-transition.js

@@ -0,0 +1,2 @@
+import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useRef as t,useState as r,useMemo as l,useEffect as o}from"react";import{DEFAULT_ANIMATION as u,ViewDefault as v,ViewSwitchTransitionStyled as a,viewSwitchTransitionClasses as c,CombinedTransition as d}from"./view-switch-transition.units.js";function s(s){var f=c,w="".concat(f.view," ").concat(f.viewA),m="".concat(f.view," ").concat(f.viewB);return function(c){var g,h,p,A,y,B,C,x,T=t(null),O=t(null),b=t(null),j=r(null!==(g=c.value)&&void 0!==g?g:null==s||null===(h=s.viewA)||void 0===h?void 0:h.value),D=n(j,2),H=D[0],N=D[1],_=r(!0),q=n(_,2),F=q[0],G=q[1],P=t(null),W=t(null),k=l(function(){var n,i;return{viewA:null!==(n=c.viewA)&&void 0!==n?n:null==s?void 0:s.viewA,viewB:null!==(i=c.viewB)&&void 0!==i?i:null==s?void 0:s.viewB}},[c.viewA,c.viewB,null==s?void 0:s.viewA,null==s?void 0:s.viewB]),z=l(function(){var n;return Object.assign({},u,null==s?void 0:s.transitionConfig,null!==(n=c.transitionConfig)&&void 0!==n?n:{})},[null==s?void 0:s.transitionConfig,c.transitionConfig]);o(function(){var n,i;if(c.value!==H){W.current&&(window.clearTimeout(W.current),W.current=null),P.current=null!==(n=c.value)&&void 0!==n?n:null;var e=null===(i=T.current)||void 0===i?void 0:i.offsetHeight;return T.current&&"number"==typeof e&&(T.current.style.height="".concat(e,"px"),T.current.style.transition="height ".concat(z.enter,"ms ").concat(z.ease)),G(!1),W.current=window.setTimeout(function(){var n=P.current;P.current=null,n&&(N(n),requestAnimationFrame(function(){var i,e,t,r,l,o=null!==(e=null!==(t=null===(r=(n===(null===(i=k.viewA)||void 0===i?void 0:i.value)?O:b).current)||void 0===r?void 0:r.offsetHeight)&&void 0!==t?t:null===(l=T.current)||void 0===l?void 0:l.offsetHeight)&&void 0!==e?e:0;G(!0),T.current&&(T.current.style.height="".concat(o,"px"),window.setTimeout(function(){T.current&&(T.current.style.height="")},z.enter))})),W.current=null},z.exit+z.hold),function(){W.current&&(window.clearTimeout(W.current),W.current=null)}}},[z,c.value,H]);var E=l(function(){var n,i;return null!==(n=null===(i=k.viewA)||void 0===i?void 0:i.Content)&&void 0!==n?n:v},[null===(p=k.viewA)||void 0===p?void 0:p.Content]),I=l(function(){var n,i;return null!==(n=null===(i=k.viewB)||void 0===i?void 0:i.Content)&&void 0!==n?n:v},[null===(A=k.viewB)||void 0===A?void 0:A.Content]);return i(a,{className:f.root,children:e("div",{ref:T,className:f.viewWrapper,children:[H===(null===(y=k.viewA)||void 0===y?void 0:y.value)&&i(d,{open:F,timeout:{enter:z.enter,exit:z.exit},mountDelay:z.mountDelay,animationConfig:z,style:{transformOrigin:z.transformOriginGrid},children:i("div",{ref:O,className:w,children:i(E,{value:null===(B=k.viewA)||void 0===B?void 0:B.value})})}),H===(null===(C=k.viewB)||void 0===C?void 0:C.value)&&i(d,{open:F,timeout:{enter:z.enter,exit:z.exit},mountDelay:z.mountDelay,animationConfig:z,style:{transformOrigin:z.transformOriginTable},children:i("div",{ref:b,className:m,children:i(I,{value:null===(x=k.viewB)||void 0===x?void 0:x.value})})})]})})}}export{s as createViewSwitchTransition};
+//# sourceMappingURL=view-switch-transition.js.map

package/dist/src/lab/data-surface/view-switch-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-switch-transition.js","sources":["../../../../src/lab/data-surface/view-switch-transition.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { CombinedTransition, DEFAULT_ANIMATION, ViewDefault } from './view-switch-transition.units'\r\nimport { viewSwitchTransitionClasses, ViewSwitchTransitionStyled } from './view-switch-transition.units'\r\n// types\r\nimport type { FC, ReactNode, ComponentType } from 'react'\r\nimport { TAnimationConfig } from './view-switch-transition.units'\r\n\r\ntype TViewSwitchTransitionConfig<T extends string = string> = {\r\n  value: T\r\n  label?: string\r\n  Content: ComponentType<{ value: T }>\r\n  icon?: ReactNode\r\n}\r\n\r\ntype TViewSwitchTransitionParam<T extends string = string> = {\r\n  viewA?: TViewSwitchTransitionConfig<T>\r\n  viewB?: TViewSwitchTransitionConfig<T>\r\n  transitionConfig?: TAnimationConfig\r\n}\r\n\r\ninterface IViewSwitchTransitionProps<T extends string = string> {\r\n  value?: T\r\n  viewA?: TViewSwitchTransitionConfig<T>\r\n  viewB?: TViewSwitchTransitionConfig<T>\r\n  transitionConfig?: TAnimationConfig\r\n}\r\n\r\nexport function createViewSwitchTransition<T extends string = string>(config?: TViewSwitchTransitionParam<T>) {\r\n  const classes = viewSwitchTransitionClasses\r\n  const viewAClass = `${classes.view} ${classes.viewA}`\r\n  const viewBClass = `${classes.view} ${classes.viewB}`\r\n\r\n  const ViewSwitchTransition: FC<IViewSwitchTransitionProps<T>> = (props) => {\r\n    const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n    const viewARef = useRef<HTMLDivElement | null>(null)\r\n    const viewBRef = useRef<HTMLDivElement | null>(null)\r\n\r\n    const [mountedMode, setMountedMode] = useState<T | undefined>(props.value ?? config?.viewA?.value)\r\n    const [mountedOpen, setMountedOpen] = useState<boolean>(true)\r\n\r\n    const pendingModeRef = useRef<T | null>(null)\r\n    const exitTimerRef = useRef<number | null>(null)\r\n\r\n    const finalConfig = useMemo(() => {\r\n      return {\r\n        viewA: props.viewA ?? config?.viewA,\r\n        viewB: props.viewB ?? config?.viewB\r\n      }\r\n    }, [props.viewA, props.viewB, config?.viewA, config?.viewB])\r\n\r\n    const animations = useMemo(() => {\r\n      return Object.assign({}, DEFAULT_ANIMATION, config?.transitionConfig, props.transitionConfig ?? {})\r\n    }, [config?.transitionConfig, props.transitionConfig])\r\n\r\n    useEffect(() => {\r\n      if (props.value === mountedMode) return\r\n\r\n      if (exitTimerRef.current) {\r\n        window.clearTimeout(exitTimerRef.current)\r\n        exitTimerRef.current = null\r\n      }\r\n\r\n      pendingModeRef.current = props.value ?? null\r\n\r\n      const currentHeight = wrapperRef.current?.offsetHeight\r\n      if (wrapperRef.current && typeof currentHeight === 'number') {\r\n        wrapperRef.current.style.height = `${currentHeight}px`\r\n        wrapperRef.current.style.transition = `height ${animations.enter}ms ${animations.ease}`\r\n      }\r\n\r\n      setMountedOpen(false)\r\n\r\n      exitTimerRef.current = window.setTimeout(() => {\r\n        const nextMode = pendingModeRef.current\r\n        pendingModeRef.current = null\r\n\r\n        if (nextMode) {\r\n          setMountedMode(nextMode)\r\n          requestAnimationFrame(() => {\r\n            const targetRef = nextMode === finalConfig.viewA?.value ? viewARef : viewBRef\r\n            const nextHeight = targetRef.current?.offsetHeight ?? wrapperRef.current?.offsetHeight ?? 0\r\n            setMountedOpen(true)\r\n\r\n            if (wrapperRef.current) {\r\n              wrapperRef.current.style.height = `${nextHeight}px`\r\n              window.setTimeout(() => {\r\n                if (wrapperRef.current) wrapperRef.current.style.height = ''\r\n              }, animations.enter)\r\n            }\r\n          })\r\n        }\r\n\r\n        exitTimerRef.current = null\r\n      }, animations.exit + animations.hold)\r\n\r\n      return () => {\r\n        if (exitTimerRef.current) {\r\n          window.clearTimeout(exitTimerRef.current)\r\n          exitTimerRef.current = null\r\n        }\r\n      }\r\n    }, [animations, props.value, mountedMode])\r\n\r\n    const ViewAContent = useMemo(() => {\r\n      return finalConfig.viewA?.Content ?? ViewDefault\r\n    }, [finalConfig.viewA?.Content])\r\n\r\n    const ViewBContent = useMemo(() => {\r\n      return finalConfig.viewB?.Content ?? ViewDefault\r\n    }, [finalConfig.viewB?.Content])\r\n\r\n    return (\r\n      <ViewSwitchTransitionStyled className={classes.root}>\r\n        <div ref={wrapperRef} className={classes.viewWrapper}>\r\n          {mountedMode === finalConfig.viewA?.value && (\r\n            <CombinedTransition\r\n              open={mountedOpen}\r\n              timeout={{ enter: animations.enter, exit: animations.exit }}\r\n              mountDelay={animations.mountDelay}\r\n              animationConfig={animations}\r\n              style={{ transformOrigin: animations.transformOriginGrid }}\r\n            >\r\n              <div ref={viewARef} className={viewAClass}>\r\n                <ViewAContent value={finalConfig.viewA?.value!} />\r\n              </div>\r\n            </CombinedTransition>\r\n          )}\r\n\r\n          {mountedMode === finalConfig.viewB?.value && (\r\n            <CombinedTransition\r\n              open={mountedOpen}\r\n              timeout={{ enter: animations.enter, exit: animations.exit }}\r\n              mountDelay={animations.mountDelay}\r\n              animationConfig={animations}\r\n              style={{ transformOrigin: animations.transformOriginTable }}\r\n            >\r\n              <div ref={viewBRef} className={viewBClass}>\r\n                <ViewBContent value={finalConfig.viewB?.value!} />\r\n              </div>\r\n            </CombinedTransition>\r\n          )}\r\n        </div>\r\n      </ViewSwitchTransitionStyled>\r\n    )\r\n  }\r\n\r\n  return ViewSwitchTransition\r\n}\r\n\r\nexport const ViewSwitchTransition = createViewSwitchTransition({})\r\n\r\nexport default ViewSwitchTransition\r\n"],"names":["createViewSwitchTransition","config","classes","viewSwitchTransitionClasses","viewAClass","concat","view","viewA","viewBClass","viewB","props","_props$value","_config$viewA","_finalConfig$viewA3","_finalConfig$viewB2","_finalConfig$viewA4","_finalConfig$viewA5","_finalConfig$viewB3","_finalConfig$viewB4","wrapperRef","useRef","viewARef","viewBRef","_useState","useState","value","_useState2","_slicedToArray","mountedMode","setMountedMode","_useState3","_useState4","mountedOpen","setMountedOpen","pendingModeRef","exitTimerRef","finalConfig","useMemo","_props$viewA","_props$viewB","animations","_props$transitionConf","Object","assign","DEFAULT_ANIMATION","transitionConfig","useEffect","_props$value2","_wrapperRef$current","current","window","clearTimeout","currentHeight","offsetHeight","style","height","transition","enter","ease","setTimeout","nextMode","requestAnimationFrame","_finalConfig$viewA","_ref","_targetRef$current$of","_targetRef$current","_wrapperRef$current2","nextHeight","exit","hold","ViewAContent","_finalConfig$viewA$Co","_finalConfig$viewA2","Content","ViewDefault","ViewBContent","_finalConfig$viewB$Co","_finalConfig$viewB","_jsx","ViewSwitchTransitionStyled","className","root","children","_jsxs","ref","viewWrapper","CombinedTransition","open","timeout","mountDelay","animationConfig","transformOrigin","transformOriginGrid","transformOriginTable"],"mappings":"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"}

package/dist/src/lab/data-surface/view-switch-transition.units.js

@@ -0,0 +1,2 @@
+import{defineProperty as t,slicedToArray as r,objectSpread2 as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{styled as e,Card as o}from"@mui/material";import{useState as a,useRef as c,useEffect as l,cloneElement as u}from"react";var w={root:"DinoViewSwitchTransition-root",viewWrapper:"DinoViewSwitchTransition-viewWrapper",view:"DinoViewSwitchTransition-view",viewA:"DinoViewSwitchTransition-viewA",viewB:"DinoViewSwitchTransition-viewB"},s=w,m=e("div")(function(r){return r.theme,t(t(t({},"&.".concat(s.root),{flex:1,width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.viewWrapper),{minHeight:0,position:"relative",width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.view),{width:"100%",height:"100%"})}),d=function(){return n(o,{variant:"outlined",sx:{p:2},children:"Default view content"})},f={enter:220,exit:140,ease:"cubic-bezier(0.22, 0.61, 0.36, 1)",delayEnter:12,delayExit:0,transformOriginGrid:"top center",transformOriginTable:"top center",translateY:6,horizontalScale:.992,mountDelay:12,hold:30},h=function(t){var n=t.open,e=t.timeout,o=t.mountDelay,w=t.animationConfig,s=t.style,m=t.children,d=a(n),f=r(d,2),h=f[0],p=f[1],v=a(n),y=r(v,2),T=y[0],g=y[1],x=c(null),D=c(null);if(l(function(){if(n)return D.current&&(window.clearTimeout(D.current),D.current=null),p(!0),void(o>0?(x.current&&window.clearTimeout(x.current),x.current=window.setTimeout(function(){g(!0),x.current=null},o)):g(!0));g(!1),x.current&&(window.clearTimeout(x.current),x.current=null),D.current&&window.clearTimeout(D.current),D.current=window.setTimeout(function(){p(!1),D.current=null},e.exit)},[o,n,e.exit]),l(function(){return function(){x.current&&window.clearTimeout(x.current),D.current&&window.clearTimeout(D.current)}},[]),!h)return null;var S=i({transitionProperty:"opacity, transform",transitionTimingFunction:w.ease,transitionDuration:"".concat(T?e.enter:e.exit,"ms"),transitionDelay:"".concat(T?w.delayEnter:w.delayExit,"ms"),transformOrigin:(null==s?void 0:s.transformOrigin)||w.transformOriginGrid,willChange:"opacity, transform",backfaceVisibility:"hidden",opacity:T?1:0,transform:T?"translate3d(0, 0, 0) scaleX(1)":"translate3d(0, ".concat(w.translateY,"px, 0) scaleX(").concat(w.horizontalScale,")")},s);return u(m,{style:S})};export{h as CombinedTransition,f as DEFAULT_ANIMATION,d as ViewDefault,m as ViewSwitchTransitionStyled,w as viewSwitchTransitionClasses};
+//# sourceMappingURL=view-switch-transition.units.js.map

package/dist/src/lab/data-surface/view-switch-transition.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-switch-transition.units.js","sources":["../../../../src/lab/data-surface/view-switch-transition.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Card, styled } from '@mui/material'\r\nimport { cloneElement, useEffect, useRef, useState } from 'react'\r\n// types\r\nimport type { CSSProperties, FC, ReactElement } from 'react'\r\n\r\nexport const viewSwitchTransitionClasses = {\r\n  root: 'DinoViewSwitchTransition-root',\r\n  viewWrapper: 'DinoViewSwitchTransition-viewWrapper',\r\n  view: 'DinoViewSwitchTransition-view',\r\n  viewA: 'DinoViewSwitchTransition-viewA',\r\n  viewB: 'DinoViewSwitchTransition-viewB'\r\n}\r\n\r\nconst classes = viewSwitchTransitionClasses\r\n\r\nexport const ViewSwitchTransitionStyled = styled('div')(({ theme }) => ({\r\n  [`&.${classes.root}`]: { flex: 1, width: '100%', height: '100%', overflow: 'hidden' },\r\n  // use minHeight: 0 so flex children can shrink and inner scroll areas work\r\n  [`.${classes.viewWrapper}`]: { minHeight: 0, position: 'relative', width: '100%', height: '100%', overflow: 'hidden' },\r\n  [`.${classes.view}`]: { width: '100%', height: '100%' }\r\n}))\r\n\r\nexport const ViewDefault: FC = () => (\r\n  <Card variant='outlined' sx={{ p: 2 }}>\r\n    Default view content\r\n  </Card>\r\n)\r\n\r\n/**\r\n * Fine-grained control over the animation that plays when switching between Grid and Table view.\r\n * All timing values are in milliseconds unless noted.\r\n */\r\nexport type TAnimationConfig = {\r\n  /** Duration of the enter (fade-in) animation. Defaults to `220`. */\r\n  enter?: number\r\n  /** Duration of the exit (fade-out) animation. Defaults to `140`. */\r\n  exit?: number\r\n  /** CSS easing function for both enter and exit. Defaults to `'cubic-bezier(0.22, 0.61, 0.36, 1)'`. */\r\n  ease?: string\r\n  /** Delay before the enter animation starts. Defaults to `12`. */\r\n  delayEnter?: number\r\n  /** Delay before the exit animation starts. Defaults to `0`. */\r\n  delayExit?: number\r\n  /** CSS `transform-origin` used during the Grid enter/exit. Defaults to `'top center'`. */\r\n  transformOriginGrid?: string\r\n  /** CSS `transform-origin` used during the Table enter/exit. Defaults to `'top center'`. */\r\n  transformOriginTable?: string\r\n  /** Vertical translation offset (px) applied at the start of the enter animation. Defaults to `6`. */\r\n  translateY?: number\r\n  /** Horizontal scale factor applied at the start of the enter animation. Defaults to `0.992`. */\r\n  horizontalScale?: number\r\n  /** Delay after the new pane mounts before its enter animation begins. Defaults to `12`. */\r\n  mountDelay?: number\r\n  /** Extra wait time (ms) after the exit animation completes before swapping the DOM. Defaults to `30`. */\r\n  hold?: number\r\n}\r\n\r\n/**\r\n * Default motion profile used when callers do not provide custom switch config.\r\n *\r\n * The values are tuned for a quick but readable transition between Grid and Table\r\n * while minimizing layout jump perception.\r\n */\r\nexport const DEFAULT_ANIMATION: Required<TAnimationConfig> = {\r\n  enter: 220,\r\n  exit: 140,\r\n  ease: 'cubic-bezier(0.22, 0.61, 0.36, 1)',\r\n  delayEnter: 12,\r\n  delayExit: 0,\r\n  transformOriginGrid: 'top center',\r\n  transformOriginTable: 'top center',\r\n  translateY: 6,\r\n  horizontalScale: 0.992,\r\n  mountDelay: 12,\r\n  hold: 30\r\n}\r\n\r\n/**\r\n * Props for `CombinedTransition`, the low-level transition wrapper.\r\n */\r\ninterface ICombinedTransitionProps {\r\n  /** Controls whether the child should be shown. */\r\n  open: boolean\r\n  /** Enter/exit durations in milliseconds. */\r\n  timeout: { enter: number; exit: number }\r\n  /** Delay before applying the enter animation after mount. */\r\n  mountDelay: number\r\n  /** Resolved animation config (fully required). */\r\n  animationConfig: Required<TAnimationConfig>\r\n  /** Optional style overrides (commonly transform origin). */\r\n  style?: CSSProperties\r\n  /** Single child element to receive animated inline style. */\r\n  children: ReactElement\r\n}\r\n\r\n/**\r\n * Reusable transition wrapper combining fade + transform with controlled\r\n * mount/unmount timing to avoid abrupt content flashing.\r\n */\r\nexport const CombinedTransition: FC<ICombinedTransitionProps> = (props) => {\r\n  const { open, timeout, mountDelay, animationConfig, style, children } = props\r\n  const [mounted, setMounted] = useState(open)\r\n  const [showing, setShowing] = useState(open)\r\n\r\n  const mountTimerRef = useRef<number | null>(null)\r\n  const unmountTimerRef = useRef<number | null>(null)\r\n\r\n  useEffect(() => {\r\n    if (open) {\r\n      if (unmountTimerRef.current) {\r\n        window.clearTimeout(unmountTimerRef.current)\r\n        unmountTimerRef.current = null\r\n      }\r\n      setMounted(true)\r\n      if (mountDelay > 0) {\r\n        if (mountTimerRef.current) window.clearTimeout(mountTimerRef.current)\r\n        mountTimerRef.current = window.setTimeout(() => {\r\n          setShowing(true)\r\n          mountTimerRef.current = null\r\n        }, mountDelay)\r\n      } else {\r\n        setShowing(true)\r\n      }\r\n      return\r\n    }\r\n\r\n    setShowing(false)\r\n    if (mountTimerRef.current) {\r\n      window.clearTimeout(mountTimerRef.current)\r\n      mountTimerRef.current = null\r\n    }\r\n\r\n    if (unmountTimerRef.current) {\r\n      window.clearTimeout(unmountTimerRef.current)\r\n    }\r\n    unmountTimerRef.current = window.setTimeout(() => {\r\n      setMounted(false)\r\n      unmountTimerRef.current = null\r\n    }, timeout.exit)\r\n  }, [mountDelay, open, timeout.exit])\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (mountTimerRef.current) {\r\n        window.clearTimeout(mountTimerRef.current)\r\n      }\r\n      if (unmountTimerRef.current) {\r\n        window.clearTimeout(unmountTimerRef.current)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  if (!mounted) return null\r\n\r\n  const transitionStyle: CSSProperties = {\r\n    transitionProperty: 'opacity, transform',\r\n    transitionTimingFunction: animationConfig.ease,\r\n    transitionDuration: `${showing ? timeout.enter : timeout.exit}ms`,\r\n    transitionDelay: `${showing ? animationConfig.delayEnter : animationConfig.delayExit}ms`,\r\n    transformOrigin: style?.transformOrigin || animationConfig.transformOriginGrid,\r\n    willChange: 'opacity, transform',\r\n    backfaceVisibility: 'hidden',\r\n    opacity: showing ? 1 : 0,\r\n    transform: showing\r\n      ? 'translate3d(0, 0, 0) scaleX(1)'\r\n      : `translate3d(0, ${animationConfig.translateY}px, 0) scaleX(${animationConfig.horizontalScale})`,\r\n    ...style\r\n  }\r\n\r\n  return cloneElement(children, { style: transitionStyle })\r\n}\r\n"],"names":["viewSwitchTransitionClasses","root","viewWrapper","view","viewA","viewB","classes","ViewSwitchTransitionStyled","styled","_ref","theme","_defineProperty","concat","flex","width","height","overflow","minHeight","position","ViewDefault","_jsx","Card","variant","sx","p","children","DEFAULT_ANIMATION","enter","exit","ease","delayEnter","delayExit","transformOriginGrid","transformOriginTable","translateY","horizontalScale","mountDelay","hold","CombinedTransition","props","open","timeout","animationConfig","style","_useState","useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","showing","setShowing","mountTimerRef","useRef","unmountTimerRef","useEffect","current","window","clearTimeout","setTimeout","transitionStyle","_objectSpread","transitionProperty","transitionTimingFunction","transitionDuration","transitionDelay","transformOrigin","willChange","backfaceVisibility","opacity","transform","cloneElement"],"mappings":"6RAQO,IAAMA,EAA8B,CACzCC,KAAM,gCACNC,YAAa,uCACbC,KAAM,gCACNC,MAAO,iCACPC,MAAO,kCAGHC,EAAUN,EAEHO,EAA6BC,EAAO,MAAPA,CAAc,SAAAC,GAAQ,OAAAA,EAALC,MAAKC,EAAAA,EAAAA,EAAAC,CAAAA,EAAAA,KAAAA,OACxDN,EAAQL,MAAS,CAAEY,KAAM,EAAGC,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OAEhFN,EAAQJ,aAAgB,CAAEe,UAAW,EAAGC,SAAU,WAAYJ,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OACjHN,EAAQH,MAAS,CAAEW,MAAO,OAAQC,OAAQ,QAAQ,GAG5CI,EAAkB,WAAP,OACtBC,EAACC,EAAK,CAAAC,QAAQ,WAAWC,GAAI,CAAEC,EAAG,GAE3BC,SAAA,wBAAA,EAsCIC,EAAgD,CAC3DC,MAAO,IACPC,KAAM,IACNC,KAAM,oCACNC,WAAY,GACZC,UAAW,EACXC,oBAAqB,aACrBC,qBAAsB,aACtBC,WAAY,EACZC,gBAAiB,KACjBC,WAAY,GACZC,KAAM,IAyBKC,EAAmD,SAACC,GAC/D,IAAQC,EAAgED,EAAhEC,KAAMC,EAA0DF,EAA1DE,QAASL,EAAiDG,EAAjDH,WAAYM,EAAqCH,EAArCG,gBAAiBC,EAAoBJ,EAApBI,MAAOlB,EAAac,EAAbd,SAC3DmB,EAA8BC,EAASL,GAAKM,EAAAC,EAAAH,EAAA,GAArCI,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1BI,EAA8BL,EAASL,GAAKW,EAAAJ,EAAAG,EAAA,GAArCE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAEpBG,EAAgBC,EAAsB,MACtCC,EAAkBD,EAAsB,MA+C9C,GA7CAE,EAAU,WACR,GAAIjB,EAeF,OAdIgB,EAAgBE,UAClBC,OAAOC,aAAaJ,EAAgBE,SACpCF,EAAgBE,QAAU,MAE5BT,GAAW,QACPb,EAAa,GACXkB,EAAcI,SAASC,OAAOC,aAAaN,EAAcI,SAC7DJ,EAAcI,QAAUC,OAAOE,WAAW,WACxCR,GAAW,GACXC,EAAcI,QAAU,IACzB,EAAEtB,IAEHiB,GAAW,IAKfA,GAAW,GACPC,EAAcI,UAChBC,OAAOC,aAAaN,EAAcI,SAClCJ,EAAcI,QAAU,MAGtBF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,SAEtCF,EAAgBE,QAAUC,OAAOE,WAAW,WAC1CZ,GAAW,GACXO,EAAgBE,QAAU,IAC5B,EAAGjB,EAAQb,KACZ,EAAE,CAACQ,EAAYI,EAAMC,EAAQb,OAE9B6B,EAAU,WACR,OAAO,WACDH,EAAcI,SAChBC,OAAOC,aAAaN,EAAcI,SAEhCF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,QAEvC,CACF,EAAE,KAEEV,EAAS,OAAO,KAErB,IAAMc,EAAeC,EAAA,CACnBC,mBAAoB,qBACpBC,yBAA0BvB,EAAgBb,KAC1CqC,mBAAkBtD,GAAAA,OAAKwC,EAAUX,EAAQd,MAAQc,EAAQb,KAAQ,MACjEuC,gBAAevD,GAAAA,OAAKwC,EAAUV,EAAgBZ,WAAaY,EAAgBX,UAAa,MACxFqC,iBAAiBzB,aAAK,EAALA,EAAOyB,kBAAmB1B,EAAgBV,oBAC3DqC,WAAY,qBACZC,mBAAoB,SACpBC,QAASnB,EAAU,EAAI,EACvBoB,UAAWpB,EACP,mDAAgCxC,OACd8B,EAAgBR,WAAUtB,kBAAAA,OAAiB8B,EAAgBP,gBAAe,MAC7FQ,GAGL,OAAO8B,EAAahD,EAAU,CAAEkB,MAAOmB,GACzC"}

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

@@ -16,6 +16,7 @@ export interface IFilterSortSlots {
     rootProps?: BoxProps;
 }
 export interface IFilterSortProps<T> {
+    sx?: BoxProps['sx'];
     slots?: IFilterSortSlots;
 }
 export interface IFilterSortConfig<T> extends IFilterSortSlots {

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

@@ -1,2 +1,31 @@
-import { KeySpecial } from './types';
+import { KeySpecial, TFilterState } from './types';
 export declare const mapSpecialLabel: Record<KeySpecial, string>;
+export interface IFilterStateQueryParams {
+    filter?: string;
+}
+/**
+ * @en Remove null/undefined values from object recursively for accurate comparison.
+ * @vi Loai bo cac gia tri null/undefined khoi object mot cach de quy de so sanh chinh xac.
+ */
+export declare function removeNullValues<T = any>(obj: T): T | undefined;
+/**
+ * @en Deep comparison of two filter states to check if they are equal.
+ * @vi So sanh sau hai filter state de kiem tra xem chung co bang nhau khong.
+ */
+export declare function isFilterStateEqual<T>(state1?: TFilterState<T>, state2?: TFilterState<T>): boolean;
+/**
+ * @en Synchronize filter state to URL query parameters. If state equals defaultState, remove from URL to keep it clean.
+ * @vi Dong bo filter state vao URL query parameters. Neu state bang defaultState, xoa khoi URL de giu URL sach.
+ *
+ * @param state - Current filter state to sync
+ * @param defaultState - Default filter state (if current equals this, don't save to URL)
+ */
+export declare function setFilterToURL<T>(state?: TFilterState<T>, defaultState?: TFilterState<T>): void;
+/**
+ * @en Retrieve filter state from URL query parameters.
+ * @vi Lay filter state tu URL query parameters.
+ *
+ * @param defaultState - Default filter state to return if URL has no filter state
+ * @returns Filter state from URL or defaultState
+ */
+export declare function getFilterFromURL<T>(defaultState?: TFilterState<T>): TFilterState<T> | undefined;

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

@@ -21,10 +21,18 @@ export interface IFilterBarConfigs<T> {
     SummaryComponent?: ComponentType<IFilterSummaryProps<T>>;
     summaryConfig?: IFilterSummaryConfig<T>;
 }
+export interface IFilterBarSlots {
+    summaryWrapProps?: BoxProps;
+    summaryBefore?: React.ReactNode;
+    summaryAfter?: React.ReactNode;
+    before?: React.ReactNode;
+    after?: React.ReactNode;
+}
 export interface IFilterBarProps<T> {
     sx?: BoxProps['sx'];
     value?: TFilterState<T>;
     onChange?: (state: TFilterState<T>) => Promise<void> | void;
+    slots?: IFilterBarSlots;
 }
 interface IFilterBarState<T> extends IFilterBarContextState<T> {
 }

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

@@ -1,8 +1,13 @@
+import { getFilterFromURL, isFilterStateEqual, removeNullValues, setFilterToURL } from './helpers';
 import { createFilterBar } from './index.create';
 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>;
     mapLogic: (logic?: import("./types").TLogic | undefined) => "Or" | "And";
     mapDirection: (direction?: import("./types").TDirection | undefined) => "ASC" | "DESC";
+    removeNullValues: typeof removeNullValues;
+    isFilterStateEqual: typeof isFilterStateEqual;
+    setFilterToURL: typeof setFilterToURL;
+    getFilterFromURL: typeof getFilterFromURL;
 }
 export declare const dinoFilterBar: DinoFilterBar;

package/dist/types/lab/data-surface/button-switch.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { DataSurfaceViewMode } from './types';
+type Props = {
+    value?: DataSurfaceViewMode;
+    onChange?: (value: DataSurfaceViewMode) => void;
+    size?: 'sm' | 'md';
+    className?: string;
+    onlyIcon?: boolean;
+    reverse?: boolean;
+};
+declare const ButtonSwitch: FC<Props>;
+export default ButtonSwitch;

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

@@ -0,0 +1,26 @@
+import { DataSurfaceViewMode, TPagination } from './types';
+export interface IViewDataQueryParams {
+    mode?: DataSurfaceViewMode;
+}
+export declare function setViewModeToURL(mode?: DataSurfaceViewMode, defaultMode?: DataSurfaceViewMode): void;
+export declare function getViewModeFromURL(defaultMode?: DataSurfaceViewMode): DataSurfaceViewMode | undefined;
+export interface IPaginationQueryParams {
+    page?: string;
+    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.
+ *
+ * @param pagination - Current pagination to sync
+ * @param defaultPagination - Default pagination (if current equals this, don't save to URL)
+ */
+export declare function setPaginationToURL(pagination?: TPagination, defaultPagination?: TPagination): void;
+/**
+ * @en Retrieve pagination from URL query parameters.
+ * @vi Lay pagination tu URL query parameters.
+ *
+ * @param defaultPagination - Default pagination to return if URL has no pagination
+ * @returns Pagination from URL or defaultPagination
+ */
+export declare function getPaginationFromURL(defaultPagination?: TPagination): TPagination | undefined;