dinocollab-core 2.2.0 → 2.2.2

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, 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      }\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];return Math.max.apply(Math,[0].concat(l(r.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},x=function(l){var n,r,i,o,t,u,a,e,d,v,x,h,s,c,p,f=null!=l?l:{},g=f.xs,w=f.sm,y=f.md,M=f.lg,b=f.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!==(x=null!==(h=null!==(s=null!==(c=null!==(p=null!=b?b:M)&&void 0!==p?p:y)&&void 0!==c?c:w)&&void 0!==s?s:g)&&void 0!==h?h:m.xl)&&void 0!==x?x:3}},h=function(l,n){var r,i=x(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,x as normalizeGridSizes,h 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  return Math.max(0, ...gap.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","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 n,asyncToGenerator as t,regenerator as l,slicedToArray as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useCallback as r,useMemo as d,useRef as c,useState as u,useLayoutEffect as s}from"react";import{styled as v,Box as p,TableContainer as f,Table as h,TableHead as g,TableRow as b,TableCell as m,TableBody as x}from"@mui/material";import{ListDensity as w}from"./view-list.types.js";import{LIST_HEADER_HEIGHT as C,LIST_ROW_HEIGHT_BY_DENSITY as S,LIST_CELL_PADDING_BY_DENSITY as y}from"./view-list.units.js";var H=function(e,n){if(void 0!==e.width)return e.width;if(n>0&&e.flex&&e.flex>0){var t=e.flex/n*100;return"".concat(t,"%")}return n>0&&e.minWidth?"".concat(e.minWidth,"px"):void 0},N=function(e,n,t){var l=e.valueGetter?e.valueGetter(n,t):n[e.field],i={value:l,row:n,index:t,field:e.field};return e.renderCell?e.renderCell(i):String(null!=l?l:"")},k=function(e){if(0===e.length)return[];var n=e[0];return Object.keys(n).map(function(e){return{field:e,label:String(e),flex:1}})},z=function(e){return e?Object.keys(e).map(function(t){var l,i=null!==(l=e[t])&&void 0!==l?l:{};return n({field:t},i)}):[]};function T(e){var t=function(e){return function(n){var t,l,i=null!==(t=null!==(l=n.density)&&void 0!==l?l:e.density)&&void 0!==t?t:w.standard,r=n.columns?z(n.columns):e.columns?z(e.columns):k(n.value),d=r.reduce(function(e,n){return e+(n.flex&&n.flex>0?n.flex:0)},0),c=S[i],u=y[i];return o(B,{className:M.root,children:o(f,{className:M.scrollContainer,onScroll:function(e){var t,l=e.currentTarget;l.scrollHeight-l.scrollTop-l.clientHeight<=80&&(null===(t=n.onNearEnd)||void 0===t||t.call(n))},children:a(h,{size:"small",className:M.table,children:[o(g,{className:M.tableHeader,children:o(b,{children:r.map(function(e){var n,t;return o(m,{className:M.tableHeaderCell,align:e.align,sx:{minWidth:e.minWidth,width:H(e,d),maxWidth:null!==(n=e.width)&&void 0!==n?n:d>0&&e.flex?0:void 0},children:null!==(t=e.label)&&void 0!==t?t:String(e.field)},String(e.field))})})}),o(x,{children:n.value.map(function(n,t){var l,i=null!==(l=e.getterId(n,t))&&void 0!==l?l:t;return o(b,{hover:!0,sx:{height:c},children:r.map(function(e){var l;return o(m,{className:M.tableBodyCell,align:e.align,sx:{height:c,padding:u,maxWidth:null!==(l=e.width)&&void 0!==l?l:d>0&&e.flex?0:void 0},children:o(p,{className:M.tableCellContent,children:N(e,n,t)})},"".concat(String(i),"-").concat(String(e.field)))})},i)})})]})})})}}(e),l=function(e){return function(n){var t,l,r,v,T=null!==(t=null!==(l=n.density)&&void 0!==l?l:e.density)&&void 0!==t?t:w.standard,W=n.columns?z(n.columns):e.columns?z(e.columns):k(n.value),L=W.reduce(function(e,n){return e+(n.flex&&n.flex>0?n.flex:0)},0),B=S[T],V=y[T],j=d(function(){return Object.assign({},e.virtualizedConfig,n.virtualizedConfig)},[n.virtualizedConfig]),I=c(null),O=c(null),R=u(0),P=i(R,2),E=P[0],G=P[1],Y=u(null!==(r=null==j?void 0:j.scrollTop)&&void 0!==r?r:0),_=i(Y,2),A=_[0],q=_[1],F=u(C),J=i(F,2),K=J[0],Q=J[1],U=Math.max(1,null!==(v=null==j?void 0:j.overscan)&&void 0!==v?v:6);s(function(){if(I.current){var e=function(){var e,n,t=null!==(e=null===(n=I.current)||void 0===n?void 0:n.clientHeight)&&void 0!==e?e:0;G(function(e){return e===t?e:t})};e();var n=new ResizeObserver(function(){e()});return n.observe(I.current),function(){return n.disconnect()}}},[]),s(function(){j&&"number"==typeof j.scrollTop&&q(j.scrollTop)},[null==j?void 0:j.scrollTop]),s(function(){var e,n,t=null!==(e=null===(n=O.current)||void 0===n?void 0:n.offsetHeight)&&void 0!==e?e:0;t>0&&t!==K&&Q(t)},[W.length,K]);var X=d(function(){var e,t=n.value.length;if(0===t)return{start:0,end:-1,topSpacerHeight:0,bottomSpacerHeight:0};var l=j&&"number"==typeof j.scrollTop?j.scrollTop:A,i=Math.max(1,(null!==(e=null==j?void 0:j.viewportHeight)&&void 0!==e?e:E)-K),o=Math.max(0,l-K),a=Math.max(0,Math.floor(o/B)-U),r=Math.ceil(i/B),d=Math.min(t-1,a+r+2*U);return{start:a,end:d,topSpacerHeight:a*B,bottomSpacerHeight:Math.max(0,(t-d-1)*B)}},[n.value.length,K,U,B,j,A,E]),Z=X.end>=X.start?n.value.slice(X.start,X.end+1):[];return o(D,{className:M.root,children:o(f,{ref:I,className:M.scrollContainer,onScroll:function(e){var t,l=e.currentTarget;j&&"number"==typeof j.scrollTop||q(l.scrollTop),l.scrollHeight-l.scrollTop-l.clientHeight<=80&&(null===(t=n.onNearEnd)||void 0===t||t.call(n))},children:a(h,{size:"small",className:M.table,children:[o(g,{className:M.tableHeader,children:o(b,{ref:O,children:W.map(function(e){var n,t;return o(m,{className:M.tableHeaderCell,align:e.align,sx:{minWidth:e.minWidth,width:H(e,L),maxWidth:null!==(n=e.width)&&void 0!==n?n:L>0&&e.flex?0:void 0},children:null!==(t=e.label)&&void 0!==t?t:String(e.field)},String(e.field))})})}),a(x,{children:[X.topSpacerHeight>0?o(b,{className:M.tableSpacerRow,children:o(m,{colSpan:W.length,className:M.tableSpacerCell,sx:{height:X.topSpacerHeight,padding:0,border:0}})}):null,Z.map(function(n,t){var l,i=X.start+t,a=null!==(l=e.getterId(n,i))&&void 0!==l?l:i;return o(b,{hover:!0,sx:{height:B},children:W.map(function(e){var t;return o(m,{className:M.tableBodyCell,align:e.align,sx:{height:B,padding:V,maxWidth:null!==(t=e.width)&&void 0!==t?t:L>0&&e.flex?0:void 0},children:o(p,{className:M.tableCellContent,children:N(e,n,i)})},"".concat(String(a),"-").concat(String(e.field)))})},a)}),X.bottomSpacerHeight>0?o(b,{className:M.tableSpacerRow,children:o(m,{colSpan:W.length,className:M.tableSpacerCell,sx:{height:X.bottomSpacerHeight,padding:0,border:0}})}):null]})]})})})}}(e);return function(i){var a,r,d=null!==(a=null!==(r=i.renderStrategy)&&void 0!==r?r:e.renderStrategy)&&void 0!==a?a:"normal";return o("virtualized"===d?l:t,n({},i))}}function W(e){return function(n){var i,a,d,c=r(t(l().m(function e(){var t,i,o,a,r,d,c,u,s;return l().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!==(t=n.pagination)&&void 0!==t&&t.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 c=null!==(i=null===(o=n.pagination)||void 0===o?void 0:o.page)&&void 0!==i?i:0,u=null!==(a=null===(r=n.pagination)||void 0===r?void 0:r.pageSize)&&void 0!==a?a:20,s=c+1,e.n=4,null===(d=n.onPageChange)||void 0===d?void 0:d.call(n,s,u);case 4:return e.a(2)}},e)})),[n.loadMode,null===(i=n.pagination)||void 0===i?void 0:i.hasNext,null===(a=n.pagination)||void 0===a?void 0:a.page,null===(d=n.pagination)||void 0===d?void 0:d.pageSize,n.loading,n.onPageChange]);return o(e,{value:n.value,columns:n.columns,density:n.density,renderStrategy:n.renderStrategy,virtualizedConfig:n.virtualizedConfig,onNearEnd:"infiniteScroll"===n.loadMode?c:void 0})}}var L={root:"DinoViewList-root",scrollContainer:"DinoViewList-scrollContainer",table:"DinoViewList-table",tableHeader:"DinoViewList-tableHeader",tableHeaderCell:"DinoViewList-tableHeaderCell",tableBodyCell:"DinoViewList-tableBodyCell",tableSpacerRow:"DinoViewList-tableSpacerRow",tableSpacerCell:"DinoViewList-tableSpacerCell",tableCellContent:"DinoViewList-tableCellContent"},M=L,B=v(p)(function(n){var t=n.theme;return e(e(e(e(e(e({position:"relative",width:"100%",height:"100%",overflow:"hidden"},".".concat(M.scrollContainer),{position:"absolute",inset:0,overflowY:"auto"}),".".concat(M.table),{tableLayout:"fixed",width:"100%"}),".".concat(M.tableHeader),{position:"sticky",top:0,zIndex:2,backgroundColor:t.palette.background.paper,boxShadow:"0 1px 3px ".concat("dark"===t.palette.mode?"rgba(0,0,0,0.3)":"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"),"&::before":{content:'""',position:"absolute",inset:0,backgroundColor:"dark"===t.palette.mode?"rgba(255,255,255,0.05)":"rgba(0,0,0,0.02)",zIndex:-1}}),".".concat(M.tableHeaderCell),{fontWeight:600,paddingTop:t.spacing(1.5),paddingBottom:t.spacing(1.5),overflow:"hidden"}),".".concat(M.tableBodyCell),{overflow:"hidden"}),".".concat(M.tableCellContent),{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})}),D=v(p)(function(n){var t=n.theme;return e(e(e(e(e(e({position:"relative",width:"100%",height:"100%",overflow:"hidden",boxSizing:"border-box"},".".concat(M.scrollContainer),{position:"absolute",inset:0,overflowY:"auto"}),".".concat(M.table),{tableLayout:"fixed",width:"100%"}),".".concat(M.tableHeader),{position:"sticky",top:0,zIndex:2,backgroundColor:t.palette.background.paper,boxShadow:"0 1px 3px ".concat("dark"===t.palette.mode?"rgba(0,0,0,0.3)":"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"),"&::before":{content:'""',position:"absolute",inset:0,backgroundColor:"dark"===t.palette.mode?"rgba(255,255,255,0.05)":"rgba(0,0,0,0.02)",zIndex:-1}}),".".concat(M.tableHeaderCell),{fontWeight:600,paddingTop:t.spacing(1.5),paddingBottom:t.spacing(1.5),overflow:"hidden"}),".".concat(M.tableBodyCell),{overflow:"hidden"}),".".concat(M.tableCellContent),{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});export{T as createViewList,W as createViewListLoading,T as default,L 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, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, 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 } 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}\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  if (column.width !== undefined) return column.width\r\n  if (totalFlex > 0 && column.flex && column.flex > 0) {\r\n    const percent = (column.flex / totalFlex) * 100\r\n    return `${percent}%`\r\n  }\r\n  if (totalFlex > 0 && column.minWidth) return `${column.minWidth}px`\r\n  return undefined\r\n}\r\n\r\nconst 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\r\n  if (column.renderCell) return column.renderCell(params)\r\n  return String(value ?? '')\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,>(columnsRecord?: TListColumns<T>): TListColumn<T>[] => {\r\n  if (!columnsRecord) return []\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    const columnsArray = props.columns\r\n      ? columnsRecordToArray(props.columns)\r\n      : config.columns\r\n        ? columnsRecordToArray(config.columns)\r\n        : buildDefaultColumns(props.value)\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    return (\r\n      <ViewListNormalStyled 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                {columns.map((col) => (\r\n                  <TableCell\r\n                    key={String(col.field)}\r\n                    className={classes.tableHeaderCell}\r\n                    align={col.align}\r\n                    sx={{\r\n                      minWidth: col.minWidth,\r\n                      width: getColumnWidth(col, totalFlex),\r\n                      maxWidth: col.width ?? (totalFlex > 0 && col.flex ? 0 : undefined)\r\n                    }}\r\n                  >\r\n                    {col.label ?? String(col.field)}\r\n                  </TableCell>\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                return (\r\n                  <TableRow key={rowKey} hover sx={{ height: rowHeight }}>\r\n                    {columns.map((col) => (\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                          maxWidth: col.width ?? (totalFlex > 0 && col.flex ? 0 : undefined)\r\n                        }}\r\n                      >\r\n                        <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n                      </TableCell>\r\n                    ))}\r\n                  </TableRow>\r\n                )\r\n              })}\r\n            </TableBody>\r\n          </Table>\r\n        </TableContainer>\r\n      </ViewListNormalStyled>\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 = props.columns\r\n      ? columnsRecordToArray(props.columns)\r\n      : config.columns\r\n        ? columnsRecordToArray(config.columns)\r\n        : buildDefaultColumns(props.value)\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 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\r\n    return (\r\n      <ViewListVirtualizedStyled className={classes.root}>\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                {columns.map((col) => (\r\n                  <TableCell\r\n                    key={String(col.field)}\r\n                    className={classes.tableHeaderCell}\r\n                    align={col.align}\r\n                    sx={{\r\n                      minWidth: col.minWidth,\r\n                      width: getColumnWidth(col, totalFlex),\r\n                      maxWidth: col.width ?? (totalFlex > 0 && col.flex ? 0 : undefined)\r\n                    }}\r\n                  >\r\n                    {col.label ?? String(col.field)}\r\n                  </TableCell>\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}\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\r\n                return (\r\n                  <TableRow key={rowKey} hover sx={{ height: rowHeight }}>\r\n                    {columns.map((col) => (\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                          maxWidth: col.width ?? (totalFlex > 0 && col.flex ? 0 : undefined)\r\n                        }}\r\n                      >\r\n                        <Box className={classes.tableCellContent}>{renderCellValue(col, row, index)}</Box>\r\n                      </TableCell>\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}\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      </ViewListVirtualizedStyled>\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      />\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  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 ViewListNormalStyled = 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    inset: 0, // top: 0, left: 0, right: 0, bottom: 0\r\n    overflowY: 'auto'\r\n  },\r\n  [`.${classes.table}`]: {\r\n    tableLayout: 'fixed',\r\n    width: '100%'\r\n  },\r\n  [`.${classes.tableHeader}`]: {\r\n    position: 'sticky',\r\n    top: 0,\r\n    zIndex: 2,\r\n    backgroundColor: theme.palette.background.paper,\r\n    boxShadow: `0 1px 3px ${theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.3)' : 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}`,\r\n    '&::before': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      inset: 0, // top: 0, left: 0, right: 0, bottom: 0\r\n      backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)',\r\n      zIndex: -1\r\n    }\r\n  },\r\n  [`.${classes.tableHeaderCell}`]: {\r\n    fontWeight: 600,\r\n    paddingTop: theme.spacing(1.5),\r\n    paddingBottom: theme.spacing(1.5),\r\n    overflow: 'hidden'\r\n  },\r\n  [`.${classes.tableBodyCell}`]: {\r\n    overflow: 'hidden'\r\n  },\r\n  [`.${classes.tableCellContent}`]: {\r\n    overflow: 'hidden',\r\n    textOverflow: 'ellipsis',\r\n    whiteSpace: 'nowrap'\r\n  }\r\n}))\r\n\r\nconst ViewListVirtualizedStyled = 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  [`.${classes.scrollContainer}`]: {\r\n    position: 'absolute',\r\n    inset: 0, // top: 0, left: 0, right: 0, bottom: 0\r\n    overflowY: 'auto'\r\n  },\r\n  [`.${classes.table}`]: {\r\n    tableLayout: 'fixed',\r\n    width: '100%'\r\n  },\r\n  [`.${classes.tableHeader}`]: {\r\n    position: 'sticky',\r\n    top: 0,\r\n    zIndex: 2,\r\n    backgroundColor: theme.palette.background.paper,\r\n    boxShadow: `0 1px 3px ${theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.3)' : 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}`,\r\n    '&::before': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      inset: 0,\r\n      backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)',\r\n      zIndex: -1\r\n    }\r\n  },\r\n  [`.${classes.tableHeaderCell}`]: {\r\n    fontWeight: 600,\r\n    paddingTop: theme.spacing(1.5),\r\n    paddingBottom: theme.spacing(1.5),\r\n    overflow: 'hidden'\r\n  },\r\n  [`.${classes.tableBodyCell}`]: {\r\n    overflow: 'hidden'\r\n  },\r\n  [`.${classes.tableCellContent}`]: {\r\n    overflow: 'hidden',\r\n    textOverflow: 'ellipsis',\r\n    whiteSpace: 'nowrap'\r\n  }\r\n}))\r\n"],"names":["getColumnWidth","column","totalFlex","undefined","width","flex","percent","concat","minWidth","renderCellValue","row","index","value","valueGetter","field","params","renderCell","String","buildDefaultColumns","data","length","firstRow","Object","keys","map","key","label","columnsRecordToArray","columnsRecord","_columnsRecord$key","colConfig","_objectSpread","createViewList","config","ViewListNormal","props","_ref","_props$density","density","ListDensity","standard","columns","reduce","sum","col","rowHeight","LIST_ROW_HEIGHT_BY_DENSITY","cellPadding","LIST_CELL_PADDING_BY_DENSITY","_jsx","ViewListNormalStyled","className","classes","root","children","TableContainer","scrollContainer","onScroll","e","_props$onNearEnd","t","currentTarget","scrollHeight","scrollTop","clientHeight","onNearEnd","call","_jsxs","Table","size","table","TableHead","tableHeader","TableRow","_col$width","_col$label","TableCell","tableHeaderCell","align","sx","maxWidth","TableBody","_config$getterId","rowKey","getterId","hover","height","_col$width2","tableBodyCell","padding","Box","tableCellContent","createViewListNormal","ViewListVirtualized","_ref2","_props$density2","_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","ViewListVirtualizedStyled","ref","_props$onNearEnd2","_col$width3","_col$label2","tableSpacerRow","colSpan","tableSpacerCell","border","offset","_config$getterId2","_col$width4","createViewListVirtualized","_ref3","_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","_ref5","theme","_defineProperty","position","overflow","inset","overflowY","tableLayout","top","zIndex","backgroundColor","palette","background","paper","boxShadow","mode","content","fontWeight","paddingTop","spacing","paddingBottom","textOverflow","whiteSpace","_ref7","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}\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  /** 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":"AA8DO,IAAMA,EAAc,CACzBC,QAAS,UACTC,SAAU,WACVC,YAAa"}

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

@@ -0,0 +1,2 @@
+var a=48,p={compact:36,standard:48,comfortable:56},o={compact:"6px 10px",standard:"10px 12px",comfortable:"12px 14px"};export{o as LIST_CELL_PADDING_BY_DENSITY,a as LIST_HEADER_HEIGHT,p as LIST_ROW_HEIGHT_BY_DENSITY};
+//# 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 { ListDensity } from './view-list.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"],"names":["LIST_HEADER_HEIGHT","LIST_ROW_HEIGHT_BY_DENSITY","compact","standard","comfortable","LIST_CELL_PADDING_BY_DENSITY"],"mappings":"AAIO,IAAMA,EAAqB,GAErBC,EAA0D,CACrEC,QAAS,GACTC,SAAU,GACVC,YAAa,IAGFC,EAA4D,CACvEH,QAAS,WACTC,SAAU,YACVC,YAAa"}

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/src/utils/helpers.js

@@ -1,2 +1,2 @@
-import{slicedToArray as r,asyncToGenerator as t,typeof as n,regenerator as e,objectSpread2 as o,toArray as a,arrayLikeToArray as c}from"../../_virtual/_rollupPluginBabelHelpers.js";import i from"dayjs";var u=function(r){return new Promise(function(t){return setTimeout(t,r)})},s=function(){var n=t(e().m(function t(n,o){var a,c,i;return e().w(function(t){for(;;)switch(t.n){case 0:return t.n=1,Promise.all([n(),u(o)]);case 1:return a=t.v,c=r(a,1),i=c[0],t.a(2,i)}},t)}));return function(r,t){return n.apply(this,arguments)}}(),f=function(r){return/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(r)},l=function(r){return/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(r)},d=function(r){return/^(\+?\d{1,4}[\s-]?)?((\(\d{1,4}\))|\d{1,4})[\s-]?\d{1,4}[\s-]?\d{1,9}$/.test((null!=r?r:"").trim())},y=function(r){return/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(r)},v=function(r,t){setTimeout(function(){window.scrollTo(o({top:0,left:0,behavior:"smooth"},r))},t||50)},h=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];return t.join(" ")},p=function(r){return r&&"object"===n(r)&&!Array.isArray(r)},A=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];return t.reduce(function(r,t){return t?(Object.keys(t).forEach(function(n){p(r[n])&&p(t[n])?r[n]=A(r[n],t[n]):r[n]=t[n]}),r):r},{})},g=function(t){try{return t?Object.entries(t).reduce(function(t,n){var e=r(n,2),o=e[0],a=e[1];return void 0!==a&&(t[o]=a),t},{}):{}}catch(r){return{}}},m=function(t){if("object"!==n(t)||null===t)return t;var e=Array.isArray(t)?[]:{};return Object.entries(t).forEach(function(t){var o=r(t,2),a=o[0],c=o[1];if(null==c||"string"==typeof c&&""===c.trim()||"number"==typeof c&&isNaN(c)||Array.isArray(c)&&0===c.length||"object"===n(c)&&!Array.isArray(c)&&0===Object.keys(m(c)).length);else if("object"!==n(c)||Array.isArray(c))e[a]=c;else{var i=m(c);Object.keys(i).length>0&&(e[a]=i)}}),e},b=function(r){try{var t=(new TextEncoder).encode(r),n="";return t.forEach(function(r){n+=String.fromCharCode(r)}),btoa(n)}catch(r){return console.error("Error encoding to base64",r),""}},j=function(r){try{for(var t=atob(r),n=new Uint8Array(t.length),e=0;e<t.length;e++)n[e]=t.charCodeAt(e);return(new TextDecoder).decode(n)}catch(r){return void console.error("Error decoding base64",r)}},w=function(r,t){try{return r?JSON.parse(r):t}catch(r){return console.log("Try Parse Object error:",r),t}},F=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];try{if(!r)return[];var n=JSON.parse(r);return Array.isArray(n)?n:[]}catch(r){return t}},M=function(r,t){try{return r?parseInt(r):t}catch(r){return t}},S=function(r){return new Promise(function(t,n){var e=new FileReader;e.onload=function(){try{var r=e.result.split(/\r?\n/).filter(Boolean);if(r.length<1)return t([]);var n=r[0].split(",").map(function(r){return r.trim()}),o=r.slice(1).map(function(r){var t=r.split(",").map(function(r){return r.trim()}),e={};return n.forEach(function(r,n){var o;e[r]=null!==(o=t[n])&&void 0!==o?o:""}),e});t(o)}catch(r){t([])}},e.onerror=function(){n(new Error("Error reading file"))},e.readAsText(r)})},Y=function(r){return r<1024?r.toFixed(2)+" Kb":r<1048576?(r/1024).toFixed(2)+" Mb":r<1073741824?(r/1048576).toFixed(2)+" Gb":(r/1073741824).toFixed(2)+" Tb"},E=function(r){var t=null==r,n="string"==typeof r&&isNaN(Number(r));if(t||n)return"00:00:00";var e=Math.round(r),o=Math.floor(e/3600),a=Math.floor(e%3600/60),c=e%60,i=String(o).padStart(2,"0"),u=String(a).padStart(2,"0"),s=String(c).padStart(2,"0");return"".concat(i,":").concat(u,":").concat(s)},T=function(t){var n,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"$ ",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";try{n=parseFloat(t),isNaN(n)&&(n=0)}catch(r){n=0}var a=n.toFixed(2).split("."),c=r(a,2),i=c[0],u=c[1],s=i.replace(/\B(?=(\d{3})+(?!\d))/g," "),f=s;return"00"!==u&&(f="".concat(s,".").concat(u)),"".concat(e).concat(f).concat(o)},x=function(r){return r.toLocaleString("en-US")},N=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if(!r)return r;var t=Array.from(r),n=a(t),e=n[0],o=c(n).slice(1);return"".concat(e.toUpperCase()).concat(o.join(""))},O={style1:"DD/MM/YYYY HH:mm",style2:"MMMM D, YYYY",style3:"MM-DD-YYYY"},D=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"style1";try{var n;if(!r)throw new Error;var e=null!==(n=O[t])&&void 0!==n?n:t;return i(r).format(e)}catch(r){return"unknown"}};export{g as cleanObject,j as decodeBase64,m as deepRemoveEmptyFields,b as encodeBase64,s as fetchDelay,N as formatCapitalizeFirstText,T as formatCurrency,D as formatDatetime,O as formatDatetimeStyles,E as formatDuration,Y as formatFileSize,x as formatNumberWithCommas,f as isGuid,l as isValidEmail,d as isValidPhoneNumber,y as isValidURL,h as mergeClasses,A as mergeObjects,u as sleep,F as tryParseArray,S as tryParseCsvFileToArray,M as tryParseIntRequired,w as tryParseObject,v as windowScrollToTop};
+import{asyncToGenerator as r,slicedToArray as t,regenerator as n,typeof as e,objectSpread2 as o,toArray as a,arrayLikeToArray as c}from"../../_virtual/_rollupPluginBabelHelpers.js";import i from"dayjs";var u=function(r){return new Promise(function(t){return setTimeout(t,r)})},s=function(){var e=r(n().m(function r(e,o){var a,c,i;return n().w(function(r){for(;;)switch(r.n){case 0:return r.n=1,Promise.all([e(),u(o)]);case 1:return a=r.v,c=t(a,1),i=c[0],r.a(2,i)}},r)}));return function(r,t){return e.apply(this,arguments)}}(),f=function(r){return/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(r)},l=function(r){return/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(r)},d=function(r){return/^(\+?\d{1,4}[\s-]?)?((\(\d{1,4}\))|\d{1,4})[\s-]?\d{1,4}[\s-]?\d{1,9}$/.test((null!=r?r:"").trim())},y=function(r){return/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i.test(r)},v=function(r,t){setTimeout(function(){window.scrollTo(o({top:0,left:0,behavior:"smooth"},r))},t||50)},h=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];return t.join(" ")},p=function(r){return r&&"object"===e(r)&&!Array.isArray(r)},A=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];return t.reduce(function(r,t){return t?(Object.keys(t).forEach(function(n){p(r[n])&&p(t[n])?r[n]=A(r[n],t[n]):r[n]=t[n]}),r):r},{})},g=function(r){try{return r?Object.entries(r).reduce(function(r,n){var e=t(n,2),o=e[0],a=e[1];return void 0!==a&&(r[o]=a),r},{}):{}}catch(r){return{}}},m=function(r){if("object"!==e(r)||null===r)return r;var n=Array.isArray(r)?[]:{};return Object.entries(r).forEach(function(r){var o=t(r,2),a=o[0],c=o[1];if(null==c||"string"==typeof c&&""===c.trim()||"number"==typeof c&&isNaN(c)||Array.isArray(c)&&0===c.length||"object"===e(c)&&!Array.isArray(c)&&0===Object.keys(m(c)).length);else if("object"!==e(c)||Array.isArray(c))n[a]=c;else{var i=m(c);Object.keys(i).length>0&&(n[a]=i)}}),n},b=function(r){try{var t=(new TextEncoder).encode(r),n="";return t.forEach(function(r){n+=String.fromCharCode(r)}),btoa(n)}catch(r){return console.error("Error encoding to base64",r),""}},j=function(r){try{for(var t=atob(r),n=new Uint8Array(t.length),e=0;e<t.length;e++)n[e]=t.charCodeAt(e);return(new TextDecoder).decode(n)}catch(r){return void console.error("Error decoding base64",r)}},w=function(r,t){try{return r?JSON.parse(r):t}catch(r){return console.log("Try Parse Object error:",r),t}},F=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];try{if(!r)return[];var n=JSON.parse(r);return Array.isArray(n)?n:[]}catch(r){return t}},M=function(r,t){try{return r?parseInt(r):t}catch(r){return t}},S=function(r){return new Promise(function(t,n){var e=new FileReader;e.onload=function(){try{var r=e.result.split(/\r?\n/).filter(Boolean);if(r.length<1)return t([]);var n=r[0].split(",").map(function(r){return r.trim()}),o=r.slice(1).map(function(r){var t=r.split(",").map(function(r){return r.trim()}),e={};return n.forEach(function(r,n){var o;e[r]=null!==(o=t[n])&&void 0!==o?o:""}),e});t(o)}catch(r){t([])}},e.onerror=function(){n(new Error("Error reading file"))},e.readAsText(r)})},Y=function(r){return r<1024?r.toFixed(2)+" Kb":r<1048576?(r/1024).toFixed(2)+" Mb":r<1073741824?(r/1048576).toFixed(2)+" Gb":(r/1073741824).toFixed(2)+" Tb"},E=function(r){var t=null==r,n="string"==typeof r&&isNaN(Number(r));if(t||n)return"00:00:00";var e=Math.round(r),o=Math.floor(e/3600),a=Math.floor(e%3600/60),c=e%60,i=String(o).padStart(2,"0"),u=String(a).padStart(2,"0"),s=String(c).padStart(2,"0");return"".concat(i,":").concat(u,":").concat(s)},T=function(r){var n,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"$ ",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";try{n=parseFloat(r),isNaN(n)&&(n=0)}catch(r){n=0}var a=n.toFixed(2).split("."),c=t(a,2),i=c[0],u=c[1],s=i.replace(/\B(?=(\d{3})+(?!\d))/g," "),f=s;return"00"!==u&&(f="".concat(s,".").concat(u)),"".concat(e).concat(f).concat(o)},x=function(r){return r.toLocaleString("en-US")},N=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if(!r)return r;var t=Array.from(r),n=a(t),e=n[0],o=c(n).slice(1);return"".concat(e.toUpperCase()).concat(o.join(""))},O={style1:"DD/MM/YYYY HH:mm",style2:"MMMM D, YYYY",style3:"MM-DD-YYYY"},D=function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"style1";try{var n;if(!r)throw new Error;var e=null!==(n=O[t])&&void 0!==n?n:t;return i(r).format(e)}catch(r){return"unknown"}};export{g as cleanObject,j as decodeBase64,m as deepRemoveEmptyFields,b as encodeBase64,s as fetchDelay,N as formatCapitalizeFirstText,T as formatCurrency,D as formatDatetime,O as formatDatetimeStyles,E as formatDuration,Y as formatFileSize,x as formatNumberWithCommas,f as isGuid,l as isValidEmail,d as isValidPhoneNumber,y as isValidURL,h as mergeClasses,A as mergeObjects,u as sleep,F as tryParseArray,S as tryParseCsvFileToArray,M as tryParseIntRequired,w as tryParseObject,v as windowScrollToTop};
 //# sourceMappingURL=helpers.js.map

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

@@ -8,4 +8,5 @@ export declare const filterMenuClasses: {
     beforeInput: string;
     menu: string;
     menuItem: string;
+    menuItemInner: string;
 };

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

@@ -11,12 +11,14 @@ export interface IFieldMenuConfig<T> {
 }
 export type TFieldMenuConfigs<T> = Partial<Record<TFieldType<T>, Omit<IFieldMenuConfig<T>, 'field'>>>;
 export interface IFilterMenuFormProps<T> {
+    isLoading?: boolean;
     value?: TFieldValue;
     validator?: FormValidator<Partial<TFieldModelValid<T>>>;
     onBack: () => void;
     onClose: () => void;
     onSubmit: (key: TFieldType<T>, value?: TFieldValue, config?: IFieldMenuConfig<T>) => void;
     onRemove?: (key: TFieldType<T>, value: TFieldValid) => void;
+    onRemoveField?: (key: TFieldType<T>) => void;
 }
 export interface IFilterMenuSlots {
     popperProps?: Partial<PopperProps>;

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

@@ -14,6 +14,7 @@ export declare const filterSortClasses: {
     root: string;
     menu: string;
     menuItem: string;
+    menuItemInner: string;
 };
 export declare const FilterSortStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

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

@@ -10,7 +10,7 @@ export declare const useFilterActions: <T>(context: IFilterBarContext<T>) => {
     removeFilter: (field: TFieldType<T>) => void;
     removeFilterByFieldValue: (field: TFieldType<T>, value: TFieldValid) => void;
     clearAllFilters: () => void;
-    getCountByField: (field: TFieldType<T>) => number;
+    getFieldInfo: (field: TFieldType<T>) => TFieldValue | undefined;
     getTotalCount: () => number;
     hasSortByField: (field: TFieldType<T>) => boolean;
     getSort: () => TFieldSort<T> | undefined;

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

@@ -4,6 +4,7 @@ export interface IFilterBarContextActions<T> {
     setFilterState: (state: TFilterState<T>) => void;
 }
 export interface IFilterBarContextState<T> {
+    isLoading?: boolean;
     filterState: TFilterState<T>;
 }
 export interface IFilterBarContext<T> extends IFilterBarContextState<T>, IFilterBarContextActions<T> {

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

@@ -10,21 +10,29 @@ export interface IFilterBarConfigs<T> {
     initialFilterState?: TFilterState<T>;
     /** Default filter logic, can be overridden by individual filters @default "and" */
     defaultFilterLogic?: 'and' | 'or';
-    input?: ComponentType<IFilterInputProps<T>>;
+    InputComponent?: ComponentType<IFilterInputProps<T>>;
     inputConfig?: IFilterInputConfig<T>;
-    menu?: ComponentType<IFilterMenuProps<T>>;
+    MenuComponent?: ComponentType<IFilterMenuProps<T>>;
     menuConfig?: IFilterMenuConfig<T>;
-    summary?: ComponentType<IFilterSummaryProps<T>>;
-    summaryConfig?: IFilterSummaryConfig<T>;
+    sortConfig?: IFilterSortConfig<T>;
+    SortComponent?: ComponentType<IFilterSortProps<T>>;
     /** Enable or disable the summary component. Default is true. */
     enableSummary?: boolean;
-    sortConfig?: IFilterSortConfig<T>;
-    sort?: ComponentType<IFilterSortProps<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>) => void;
+    onChange?: (state: TFilterState<T>) => Promise<void> | void;
+    slots?: IFilterBarSlots;
 }
 interface IFilterBarState<T> extends IFilterBarContextState<T> {
 }
@@ -32,12 +40,14 @@ export declare function createFilterBar<T>(configs: IFilterBarConfigs<T>): {
     new (props: IFilterBarProps<T>): {
         getInitialFilterState(): IFilterBarState<T>;
         readonly filterState: TFilterState<T>;
+        readonly isLoading: boolean;
+        handleChange: (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => Promise<void>;
         setFilterState: (state: TFilterState<T>) => void;
         onAddFilter: () => void;
         onAddRemove: () => void;
         render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
-        setState<K extends "filterState">(state: IFilterBarState<T> | ((prevState: Readonly<IFilterBarState<T>>, props: Readonly<IFilterBarProps<T>>) => IFilterBarState<T> | Pick<IFilterBarState<T>, K> | null) | Pick<IFilterBarState<T>, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends keyof IFilterBarState<T>>(state: IFilterBarState<T> | ((prevState: Readonly<IFilterBarState<T>>, props: Readonly<IFilterBarProps<T>>) => IFilterBarState<T> | Pick<IFilterBarState<T>, K> | null) | Pick<IFilterBarState<T>, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<IFilterBarProps<T>>;
         state: Readonly<IFilterBarState<T>>;

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

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

package/dist/types/lab/data-surface/index.create.d.ts

@@ -0,0 +1,45 @@
+import { DataSurfaceViewMode, LoadingModeRule } from './types';
+import type { BoxProps } from '@mui/material';
+import type { ComponentType, FC } from 'react';
+import type { TPagination, TDataSurfaceState } from './types';
+import type { IViewGridConfig, IViewGridProps } from './view-grid';
+import type { IViewListConfig, IViewListProps } from './view-list';
+export interface IDataSurfaceSlots {
+}
+export interface IDataSurfaceProps<T> {
+    value?: T[];
+    /** Controlled state. When provided, DataSurface becomes fully controlled. */
+    state?: TDataSurfaceState;
+    /** Called on any state change (viewMode, loadMode, page, pageSize). */
+    onStateChange?: (state: TDataSurfaceState) => void;
+    viewMode?: DataSurfaceViewMode;
+    /** Pagination metadata shared by both modes. */
+    pagination?: TPagination;
+    /** True while a page fetch is in flight (shows loading indicator). */
+    loading?: boolean;
+    /**
+     * Called when the component needs a new page of data.
+     * - pagination mode: triggered by user clicking page control
+     * - infiniteScroll mode: triggered automatically when scrolling near the bottom
+     * Supports async operations - return a Promise to indicate loading state.
+     */
+    onPageChange?: (page: number, pageSize: number) => void | Promise<void>;
+    /** Load orchestration mode. @default 'pagination' */
+    loadMode?: LoadingModeRule;
+    sx?: BoxProps['sx'];
+    slots?: IDataSurfaceSlots;
+}
+export interface IDataSurfaceConfig<T> {
+    defaultViewMode?: DataSurfaceViewMode;
+    /** Default load mode when not provided via props. @default 'pagination' */
+    defaultLoadMode?: LoadingModeRule;
+    /** Default page size. @default 20 */
+    defaultPageSize?: number;
+    enableSingleViewTransition?: boolean;
+    listConfig?: IViewListConfig<T>;
+    ListComponent?: ComponentType<IViewListProps<T>>;
+    gridConfig?: IViewGridConfig<T>;
+    GridComponent?: ComponentType<IViewGridProps<T>>;
+}
+export declare function createDataSurface<T>(config: IDataSurfaceConfig<T>): FC<IDataSurfaceProps<T>>;
+export default createDataSurface;

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

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './index.create';
+export * from './view-list.types';
+export * from './view-grid.types';
+export * from './index.dino';

package/dist/types/lab/data-surface/index.dino.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import createViewGrid from './view-grid';
+import createDataSurface from './index.create';
+export declare class DinoDataSurFace {
+    createDataSurface: typeof createDataSurface;
+    createViewGrid: typeof createViewGrid;
+    createButtonSwitch: () => import("react").FC<{
+        value?: "grid" | "list" | undefined;
+        onChange?: ((value: "grid" | "list") => void) | undefined;
+        size?: "sm" | "md" | undefined;
+        className?: string | undefined;
+        onlyIcon?: boolean | undefined;
+    }>;
+}
+export declare const dinoDataSurface: DinoDataSurFace;

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

@@ -0,0 +1,54 @@
+export type TGetterId<T> = (item: T, index: number) => string | number;
+export type TPagination = {
+    page?: number;
+    pageSize?: number;
+    hasNext?: boolean;
+    hasPrev?: boolean;
+    total?: number;
+};
+/**
+ * Virtualized rendering configuration.
+ * Used by both grid and list views for windowing optimization.
+ */
+export type TVirtualizedConfig = {
+    scrollTop: number;
+    viewportHeight: number;
+    /** Number of extra rows/columns rendered outside the viewport as a buffer. Defaults to `4` (grid) / `6` (table). */
+    overscan?: number;
+    gap?: number;
+};
+/**
+ * Controls how the list is rendered into the DOM.
+ * - `normal`      — all rows are mounted (suitable for small datasets)
+ * - `virtualized` — only visible rows are mounted (optimized for large datasets)
+ */
+export declare const RenderStrategyRule: {
+    readonly normal: "normal";
+    readonly virtualized: "virtualized";
+};
+export type RenderStrategyRule = keyof typeof RenderStrategyRule;
+/**
+ * Controls how the list is displayed.
+ * - `list` — items are displayed in a single column
+ * - `grid` — items are displayed in multiple columns (number of columns is determined by the available width)
+ */
+export declare const DataSurfaceViewMode: {
+    readonly list: "list";
+    readonly grid: "grid";
+};
+export type DataSurfaceViewMode = keyof typeof DataSurfaceViewMode;
+/**
+ * Controls how the data is loaded and when the loading indicator is shown.
+ * - `pagination`    — loading indicator is shown when the user clicks on the pagination controls
+ * - `infiniteScroll` — loading indicator is shown when the user scrolls to the end of the list
+ */
+export declare const LoadingModeRule: {
+    readonly pagination: "pagination";
+    readonly infiniteScroll: "infiniteScroll";
+};
+export type LoadingModeRule = keyof typeof LoadingModeRule;
+export type TDataSurfaceState = {
+    viewMode?: DataSurfaceViewMode;
+    loadMode?: LoadingModeRule;
+    renderStrategy?: RenderStrategyRule;
+};