dinocollab-core 2.2.1 → 2.2.2

package/dist/lab/data-surface/index.js

@@ -0,0 +1,2 @@
+export{DataSurfaceViewMode,LoadingModeRule,RenderStrategyRule}from"../../src/lab/data-surface/types.js";export{createDataSurface}from"../../src/lab/data-surface/index.create.js";export{ListDensity}from"../../src/lab/data-surface/view-list.types.js";export{DinoDataSurFace,dinoDataSurface}from"../../src/lab/data-surface/index.dino.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/src/filter-bar/index.create.js

@@ -1,2 +1,2 @@
-import{defineProperty as t,inherits as e,createClass as n,classCallCheck as r,callSuper as o,asyncToGenerator as i,regenerator as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s,jsxs as l}from"react/jsx-runtime";import{Component as p}from"react";import{styled as u,Box as m}from"@mui/material";import{createFilterBarContext as f}from"./index.context.js";import{createFilterSort as c}from"./components/filter-sort.js";import{createFilterMenu as d}from"./components/filter-menu.js";import{createFilterInput as g}from"./components/filter-input.js";import{createFilterSummary as v}from"./components/filter-summary.js";import{fetchDelay as C}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";function h(u){if(!u.InputComponent){var m=u.inputConfig||{fields:{}};u.inputConfig=m,u.InputComponent=g(m)}if(!u.MenuComponent){var h=u.menuConfig||{fields:{}};u.menuConfig=h,u.MenuComponent=d(h)}if(!u.SummaryComponent&&!1!==u.enableSummary){var j=u.summaryConfig||{fields:{}};u.summaryConfig=j,u.SummaryComponent=v(j)}if(!u.SortComponent){var b=u.sortConfig||{fields:{}};u.sortConfig=b,u.SortComponent=c(b)}var F=u.defaultFilterLogic||"and",k=f(),x=function(){function m(e){var n;return r(this,m),n=o(this,m,[e]),t(n,"handleChange",function(){var t=i(a().m(function t(e,r){var o;return a().w(function(t){for(;;)switch(t.p=t.n){case 0:return t.p=0,n.setState(function(t){var e;return{filterState:null!==(e=null==r?void 0:r.filterState)&&void 0!==e?e:t.filterState,isLoading:!0}}),t.n=1,C(i(a().m(function t(){var r,o;return a().w(function(t){for(;;)if(0===t.n)return t.a(2,null===(r=(o=n.props).onChange)||void 0===r?void 0:r.call(o,e))},t)})),500);case 1:n.setState({isLoading:!1}),t.n=3;break;case 2:throw t.p=2,o=t.v,n.setState({isLoading:!1}),o;case 3:return t.a(2)}},t,null,[[0,2]])}));return function(e,n){return t.apply(this,arguments)}}()),t(n,"setFilterState",function(t){n.props.value?n.handleChange(t):n.handleChange(t,{filterState:t})}),t(n,"onAddFilter",function(){console.log("Add filter")}),t(n,"onAddRemove",function(){console.log("Remove filter")}),n.state=n.getInitialFilterState(),n}return e(m,p),n(m,[{key:"getInitialFilterState",value:function(){return this.props.value?{filterState:this.props.value}:{filterState:Object.assign({filterLogic:F},u.initialFilterState)}}},{key:"filterState",get:function(){return this.props.value||this.state.filterState}},{key:"isLoading",get:function(){return this.state.isLoading||!1}},{key:"render",value:function(){var t=u.InputComponent,e=u.MenuComponent,n=u.SummaryComponent,r=u.SortComponent;return s(k.Provider,{value:this,children:l(y,{className:S.root,sx:this.props.sx,children:[l("div",{className:S.inner,children:[s(e,{slots:{popperProps:{placement:"bottom-start"}}}),s(r,{slots:{popperProps:{placement:"bottom-start"}}}),s(t,{onAdd:this.onAddFilter,slots:{popperProps:{placement:"bottom-start"}}})]}),!1!==u.enableSummary&&s(n,{sx:{mt:1}})]})})}}])}();return x}var S={root:"DinoFilterBar-root",inner:"DinoFilterBar-inner"},y=u(m)(function(e){var n=e.theme;return t(t({},"&.".concat(S.root),{backgroundColor:n.palette.background.paper}),".".concat(S.inner),{display:"flex",alignItems:"center",gap:n.spacing(1)})});export{h as createFilterBar};
+import{defineProperty as t,inherits as e,createClass as n,objectSpread2 as r,classCallCheck as o,callSuper as i,asyncToGenerator as a,regenerator as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s,jsxs as u}from"react/jsx-runtime";import{Component as p}from"react";import{styled as m,Box as f}from"@mui/material";import{createFilterBarContext as c}from"./index.context.js";import{createFilterSort as d}from"./components/filter-sort.js";import{createFilterMenu as v}from"./components/filter-menu.js";import{createFilterInput as g}from"./components/filter-input.js";import{createFilterSummary as h}from"./components/filter-summary.js";import{fetchDelay as C}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";function S(m){if(!m.InputComponent){var S=m.inputConfig||{fields:{}};m.inputConfig=S,m.InputComponent=g(S)}if(!m.MenuComponent){var b=m.menuConfig||{fields:{}};m.menuConfig=b,m.MenuComponent=v(b)}if(!m.SummaryComponent&&!1!==m.enableSummary){var x=m.summaryConfig||{fields:{}};m.summaryConfig=x,m.SummaryComponent=h(x)}if(!m.SortComponent){var F=m.sortConfig||{fields:{}};m.sortConfig=F,m.SortComponent=d(F)}var k=m.defaultFilterLogic||"and",P=c(),I=function(){function c(e){var n;return o(this,c),n=i(this,c,[e]),t(n,"handleChange",function(){var t=a(l().m(function t(e,r){var o;return l().w(function(t){for(;;)switch(t.p=t.n){case 0:return t.p=0,n.setState(function(t){var e;return{filterState:null!==(e=null==r?void 0:r.filterState)&&void 0!==e?e:t.filterState,isLoading:!0}}),t.n=1,C(a(l().m(function t(){var r,o;return l().w(function(t){for(;;)if(0===t.n)return t.a(2,null===(r=(o=n.props).onChange)||void 0===r?void 0:r.call(o,e))},t)})),500);case 1:n.setState({isLoading:!1}),t.n=3;break;case 2:throw t.p=2,o=t.v,n.setState({isLoading:!1}),o;case 3:return t.a(2)}},t,null,[[0,2]])}));return function(e,n){return t.apply(this,arguments)}}()),t(n,"setFilterState",function(t){n.props.value?n.handleChange(t):n.handleChange(t,{filterState:t})}),t(n,"onAddFilter",function(){console.log("Add filter")}),t(n,"onAddRemove",function(){console.log("Remove filter")}),n.state=n.getInitialFilterState(),n}return e(c,p),n(c,[{key:"getInitialFilterState",value:function(){return this.props.value?{filterState:this.props.value}:{filterState:Object.assign({filterLogic:k},m.initialFilterState)}}},{key:"filterState",get:function(){return this.props.value||this.state.filterState}},{key:"isLoading",get:function(){return this.state.isLoading||!1}},{key:"render",value:function(){var t,e=this.props.slots,n=m.InputComponent,o=m.MenuComponent,i=m.SummaryComponent,a=m.SortComponent;return s(P.Provider,{value:this,children:u(j,{className:y.root,sx:this.props.sx,children:[u("div",{className:y.inner,children:[(null==e?void 0:e.before)||null,s(o,{slots:{popperProps:{placement:"bottom-start"}}}),s(a,{slots:{popperProps:{placement:"bottom-start"}}}),s(n,{onAdd:this.onAddFilter,slots:{popperProps:{placement:"bottom-start"}}}),(null==e?void 0:e.after)||null]}),u(f,r(r({},null==e?void 0:e.summaryWrapProps),{},{sx:r({display:"flex",alignItems:"center"},null==e||null===(t=e.summaryWrapProps)||void 0===t?void 0:t.sx),children:[(null==e?void 0:e.summaryBefore)||null,s(f,{sx:{flex:1,minWidth:0},children:!1!==m.enableSummary&&s(i,{})}),(null==e?void 0:e.summaryAfter)||null]}))]})})}}])}();return I}var y={root:"DinoFilterBar-root",inner:"DinoFilterBar-inner"},j=m(f)(function(e){var n=e.theme;return t(t({},"&.".concat(y.root),{backgroundColor:n.palette.background.paper}),".".concat(y.inner),{display:"flex",alignItems:"center",gap:n.spacing(1)})});export{S as createFilterBar};
 //# sourceMappingURL=index.create.js.map

package/dist/src/filter-bar/index.create.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.create.js","sources":["../../../src/filter-bar/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Component } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { createFilterBarContext } from './index.context'\r\nimport { createFilterSort } from './components/filter-sort'\r\nimport { createFilterMenu } from './components/filter-menu'\r\nimport { createFilterInput } from './components/filter-input'\r\nimport { createFilterSummary } from './components/filter-summary'\r\n// types\r\nimport type { ComponentType } from 'react'\r\nimport type { TFilterState } from './types'\r\nimport type { IFilterBarContext, IFilterBarContextState } from './index.context'\r\nimport type { IFilterMenuConfig, IFilterMenuProps } from './components/filter-menu.types'\r\nimport type { IFilterSortConfig, IFilterSortProps } from './components/filter-sort.types'\r\nimport type { IFilterInputConfig, IFilterInputProps } from './components/filter-input.types'\r\nimport type { IFilterSummaryConfig, IFilterSummaryProps } from './components/filter-summary.types'\r\nimport { fetchDelay } from '../utils'\r\n\r\nexport interface IFilterBarConfigs<T> {\r\n  initialFilterState?: TFilterState<T>\r\n  /** Default filter logic, can be overridden by individual filters @default \"and\" */\r\n  defaultFilterLogic?: 'and' | 'or'\r\n  InputComponent?: ComponentType<IFilterInputProps<T>>\r\n  inputConfig?: IFilterInputConfig<T>\r\n  MenuComponent?: ComponentType<IFilterMenuProps<T>>\r\n  menuConfig?: IFilterMenuConfig<T>\r\n  sortConfig?: IFilterSortConfig<T>\r\n  SortComponent?: ComponentType<IFilterSortProps<T>>\r\n  /** Enable or disable the summary component. Default is true. */\r\n  enableSummary?: boolean\r\n  SummaryComponent?: ComponentType<IFilterSummaryProps<T>>\r\n  summaryConfig?: IFilterSummaryConfig<T>\r\n}\r\n\r\nexport interface IFilterBarProps<T> {\r\n  sx?: BoxProps['sx']\r\n  value?: TFilterState<T>\r\n  onChange?: (state: TFilterState<T>) => Promise<void> | void\r\n}\r\n\r\ninterface IFilterBarState<T> extends IFilterBarContextState<T> {}\r\n\r\nexport function createFilterBar<T>(configs: IFilterBarConfigs<T>) {\r\n  if (!configs.InputComponent) {\r\n    const configInput = configs.inputConfig || { fields: {} }\r\n    configs.inputConfig = configInput\r\n    configs.InputComponent = createFilterInput<T>(configInput)\r\n  }\r\n  if (!configs.MenuComponent) {\r\n    const configMenu = configs.menuConfig || { fields: {} }\r\n    configs.menuConfig = configMenu\r\n    configs.MenuComponent = createFilterMenu<T>(configMenu)\r\n  }\r\n  if (!configs.SummaryComponent && configs.enableSummary !== false) {\r\n    const configSummary: IFilterSummaryConfig<T> = configs.summaryConfig || { fields: {} }\r\n    configs.summaryConfig = configSummary\r\n    configs.SummaryComponent = createFilterSummary<T>(configSummary)\r\n  }\r\n  if (!configs.SortComponent) {\r\n    const configSort: IFilterSortConfig<T> = configs.sortConfig || { fields: {} }\r\n    configs.sortConfig = configSort\r\n    configs.SortComponent = createFilterSort<T>(configSort)\r\n  }\r\n\r\n  const defaultFilterLogic = configs.defaultFilterLogic || 'and'\r\n  const Context = createFilterBarContext<T>()\r\n\r\n  class FilterBar extends Component<IFilterBarProps<T>, IFilterBarState<T>> implements IFilterBarContext<T> {\r\n    constructor(props: IFilterBarProps<T>) {\r\n      super(props)\r\n      this.state = this.getInitialFilterState()\r\n    }\r\n\r\n    getInitialFilterState(): IFilterBarState<T> {\r\n      if (this.props.value) return { filterState: this.props.value }\r\n      return { filterState: Object.assign({ filterLogic: defaultFilterLogic }, configs.initialFilterState) }\r\n    }\r\n\r\n    get filterState(): TFilterState<T> {\r\n      return this.props.value || this.state.filterState\r\n    }\r\n\r\n    get isLoading(): boolean {\r\n      return this.state.isLoading || false\r\n    }\r\n\r\n    handleChange = async (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => {\r\n      try {\r\n        this.setState((prev) => ({ filterState: state?.filterState ?? prev.filterState, isLoading: true }))\r\n        await fetchDelay(async () => this.props.onChange?.(filterState), 500)\r\n        this.setState({ isLoading: false })\r\n      } catch (error) {\r\n        this.setState({ isLoading: false })\r\n        throw error\r\n      }\r\n    }\r\n\r\n    setFilterState = (state: TFilterState<T>) => {\r\n      if (this.props.value) {\r\n        this.handleChange(state)\r\n        return\r\n      }\r\n      this.handleChange(state, { filterState: state })\r\n    }\r\n\r\n    onAddFilter = () => {\r\n      // TODO: add filter to filterState\r\n      console.log('Add filter')\r\n    }\r\n\r\n    onAddRemove = () => {\r\n      // TODO: remove filter from filterState\r\n      console.log('Remove filter')\r\n    }\r\n\r\n    render() {\r\n      const InputComponent = configs.InputComponent as ComponentType<IFilterInputProps<T>>\r\n      const MenuComponent = configs.MenuComponent as ComponentType<IFilterMenuProps<T>>\r\n      const SummaryComponent = configs.SummaryComponent as ComponentType<IFilterSummaryProps<T>>\r\n      const SortComponent = configs.SortComponent as ComponentType<IFilterSortProps<T>>\r\n      return (\r\n        <Context.Provider value={this}>\r\n          <FilterBarStyled className={filterbarClasses.root} sx={this.props.sx}>\r\n            <div className={filterbarClasses.inner}>\r\n              <MenuComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n              <SortComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n              <InputComponent onAdd={this.onAddFilter} slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n            </div>\r\n            {configs.enableSummary !== false && <SummaryComponent sx={{ mt: 1 }} />}\r\n          </FilterBarStyled>\r\n          {/* <Box style={{ border: '1px solid red', marginTop: '16px', padding: '8px' }}>\r\n            <Typography variant='subtitle2'>For Debug - Current Filter State:</Typography>\r\n            <pre>{JSON.stringify(this.filterState, null, 2)}</pre>\r\n          </Box> */}\r\n        </Context.Provider>\r\n      )\r\n    }\r\n  }\r\n\r\n  return FilterBar\r\n}\r\n\r\nconst filterbarClasses = {\r\n  root: 'DinoFilterBar-root',\r\n  inner: 'DinoFilterBar-inner'\r\n}\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n  [`&.${filterbarClasses.root}`]: {\r\n    backgroundColor: theme.palette.background.paper\r\n  },\r\n  [`.${filterbarClasses.inner}`]: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(1)\r\n  }\r\n}))\r\n"],"names":["createFilterBar","configs","InputComponent","configInput","inputConfig","fields","createFilterInput","MenuComponent","configMenu","menuConfig","createFilterMenu","SummaryComponent","enableSummary","configSummary","summaryConfig","createFilterSummary","SortComponent","configSort","sortConfig","createFilterSort","defaultFilterLogic","Context","createFilterBarContext","FilterBar","props","_this","_classCallCheck","_callSuper","_defineProperty","_ref","_asyncToGenerator","_regenerator","m","_callee2","filterState","state","_t","w","_context2","p","n","setState","prev","_state$filterState","isLoading","fetchDelay","_callee","_this$props$onChange","_this$props","_context","a","onChange","call","v","_x","_x2","apply","this","arguments","value","handleChange","console","log","getInitialFilterState","_inherits","Component","_createClass","key","Object","assign","filterLogic","initialFilterState","get","_jsx","Provider","children","_jsxs","FilterBarStyled","className","filterbarClasses","root","sx","inner","slots","popperProps","placement","onAdd","onAddFilter","mt","styled","Box","_ref3","theme","concat","backgroundColor","palette","background","paper","display","alignItems","gap","spacing"],"mappings":"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"}
+{"version":3,"file":"index.create.js","sources":["../../../src/filter-bar/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Component } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { createFilterBarContext } from './index.context'\r\nimport { createFilterSort } from './components/filter-sort'\r\nimport { createFilterMenu } from './components/filter-menu'\r\nimport { createFilterInput } from './components/filter-input'\r\nimport { createFilterSummary } from './components/filter-summary'\r\n// types\r\nimport type { ComponentType } from 'react'\r\nimport type { TFilterState } from './types'\r\nimport type { IFilterBarContext, IFilterBarContextState } from './index.context'\r\nimport type { IFilterMenuConfig, IFilterMenuProps } from './components/filter-menu.types'\r\nimport type { IFilterSortConfig, IFilterSortProps } from './components/filter-sort.types'\r\nimport type { IFilterInputConfig, IFilterInputProps } from './components/filter-input.types'\r\nimport type { IFilterSummaryConfig, IFilterSummaryProps } from './components/filter-summary.types'\r\nimport { fetchDelay } from '../utils'\r\n\r\nexport interface IFilterBarConfigs<T> {\r\n  initialFilterState?: TFilterState<T>\r\n  /** Default filter logic, can be overridden by individual filters @default \"and\" */\r\n  defaultFilterLogic?: 'and' | 'or'\r\n  InputComponent?: ComponentType<IFilterInputProps<T>>\r\n  inputConfig?: IFilterInputConfig<T>\r\n  MenuComponent?: ComponentType<IFilterMenuProps<T>>\r\n  menuConfig?: IFilterMenuConfig<T>\r\n  sortConfig?: IFilterSortConfig<T>\r\n  SortComponent?: ComponentType<IFilterSortProps<T>>\r\n  /** Enable or disable the summary component. Default is true. */\r\n  enableSummary?: boolean\r\n  SummaryComponent?: ComponentType<IFilterSummaryProps<T>>\r\n  summaryConfig?: IFilterSummaryConfig<T>\r\n}\r\n\r\nexport interface IFilterBarSlots {\r\n  summaryWrapProps?: BoxProps\r\n  summaryBefore?: React.ReactNode\r\n  summaryAfter?: React.ReactNode\r\n  before?: React.ReactNode\r\n  after?: React.ReactNode\r\n}\r\n\r\nexport interface IFilterBarProps<T> {\r\n  sx?: BoxProps['sx']\r\n  value?: TFilterState<T>\r\n  onChange?: (state: TFilterState<T>) => Promise<void> | void\r\n  slots?: IFilterBarSlots\r\n}\r\n\r\ninterface IFilterBarState<T> extends IFilterBarContextState<T> {}\r\n\r\nexport function createFilterBar<T>(configs: IFilterBarConfigs<T>) {\r\n  if (!configs.InputComponent) {\r\n    const configInput = configs.inputConfig || { fields: {} }\r\n    configs.inputConfig = configInput\r\n    configs.InputComponent = createFilterInput<T>(configInput)\r\n  }\r\n  if (!configs.MenuComponent) {\r\n    const configMenu = configs.menuConfig || { fields: {} }\r\n    configs.menuConfig = configMenu\r\n    configs.MenuComponent = createFilterMenu<T>(configMenu)\r\n  }\r\n  if (!configs.SummaryComponent && configs.enableSummary !== false) {\r\n    const configSummary: IFilterSummaryConfig<T> = configs.summaryConfig || { fields: {} }\r\n    configs.summaryConfig = configSummary\r\n    configs.SummaryComponent = createFilterSummary<T>(configSummary)\r\n  }\r\n  if (!configs.SortComponent) {\r\n    const configSort: IFilterSortConfig<T> = configs.sortConfig || { fields: {} }\r\n    configs.sortConfig = configSort\r\n    configs.SortComponent = createFilterSort<T>(configSort)\r\n  }\r\n\r\n  const defaultFilterLogic = configs.defaultFilterLogic || 'and'\r\n  const Context = createFilterBarContext<T>()\r\n\r\n  class FilterBar extends Component<IFilterBarProps<T>, IFilterBarState<T>> implements IFilterBarContext<T> {\r\n    constructor(props: IFilterBarProps<T>) {\r\n      super(props)\r\n      this.state = this.getInitialFilterState()\r\n    }\r\n\r\n    getInitialFilterState(): IFilterBarState<T> {\r\n      if (this.props.value) return { filterState: this.props.value }\r\n      return { filterState: Object.assign({ filterLogic: defaultFilterLogic }, configs.initialFilterState) }\r\n    }\r\n\r\n    get filterState(): TFilterState<T> {\r\n      return this.props.value || this.state.filterState\r\n    }\r\n\r\n    get isLoading(): boolean {\r\n      return this.state.isLoading || false\r\n    }\r\n\r\n    handleChange = async (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => {\r\n      try {\r\n        this.setState((prev) => ({ filterState: state?.filterState ?? prev.filterState, isLoading: true }))\r\n        await fetchDelay(async () => this.props.onChange?.(filterState), 500)\r\n        this.setState({ isLoading: false })\r\n      } catch (error) {\r\n        this.setState({ isLoading: false })\r\n        throw error\r\n      }\r\n    }\r\n\r\n    setFilterState = (state: TFilterState<T>) => {\r\n      if (this.props.value) {\r\n        this.handleChange(state)\r\n        return\r\n      }\r\n      this.handleChange(state, { filterState: state })\r\n    }\r\n\r\n    onAddFilter = () => {\r\n      // TODO: add filter to filterState\r\n      console.log('Add filter')\r\n    }\r\n\r\n    onAddRemove = () => {\r\n      // TODO: remove filter from filterState\r\n      console.log('Remove filter')\r\n    }\r\n\r\n    render() {\r\n      const { slots } = this.props\r\n      const InputComponent = configs.InputComponent as ComponentType<IFilterInputProps<T>>\r\n      const MenuComponent = configs.MenuComponent as ComponentType<IFilterMenuProps<T>>\r\n      const SummaryComponent = configs.SummaryComponent as ComponentType<IFilterSummaryProps<T>>\r\n      const SortComponent = configs.SortComponent as ComponentType<IFilterSortProps<T>>\r\n      return (\r\n        <Context.Provider value={this}>\r\n          <FilterBarStyled className={filterbarClasses.root} sx={this.props.sx}>\r\n            <div className={filterbarClasses.inner}>\r\n              {slots?.before || null}\r\n              <MenuComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n              <SortComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n              <InputComponent onAdd={this.onAddFilter} slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n              {slots?.after || null}\r\n            </div>\r\n            <Box {...slots?.summaryWrapProps} sx={{ display: 'flex', alignItems: 'center', ...slots?.summaryWrapProps?.sx }}>\r\n              {slots?.summaryBefore || null}\r\n              <Box sx={{ flex: 1, minWidth: 0 }}>{configs.enableSummary !== false && <SummaryComponent />}</Box>\r\n              {slots?.summaryAfter || null}\r\n            </Box>\r\n          </FilterBarStyled>\r\n          {/* <Box style={{ border: '1px solid red', marginTop: '16px', padding: '8px' }}>\r\n            <Typography variant='subtitle2'>For Debug - Current Filter State:</Typography>\r\n            <pre>{JSON.stringify(this.filterState, null, 2)}</pre>\r\n          </Box> */}\r\n        </Context.Provider>\r\n      )\r\n    }\r\n  }\r\n\r\n  return FilterBar\r\n}\r\n\r\nconst filterbarClasses = {\r\n  root: 'DinoFilterBar-root',\r\n  inner: 'DinoFilterBar-inner'\r\n}\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n  [`&.${filterbarClasses.root}`]: {\r\n    backgroundColor: theme.palette.background.paper\r\n  },\r\n  [`.${filterbarClasses.inner}`]: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(1)\r\n  }\r\n}))\r\n"],"names":["createFilterBar","configs","InputComponent","configInput","inputConfig","fields","createFilterInput","MenuComponent","configMenu","menuConfig","createFilterMenu","SummaryComponent","enableSummary","configSummary","summaryConfig","createFilterSummary","SortComponent","configSort","sortConfig","createFilterSort","defaultFilterLogic","Context","createFilterBarContext","FilterBar","props","_this","_classCallCheck","_callSuper","_defineProperty","_ref","_asyncToGenerator","_regenerator","m","_callee2","filterState","state","_t","w","_context2","p","n","setState","prev","_state$filterState","isLoading","fetchDelay","_callee","_this$props$onChange","_this$props","_context","a","onChange","call","v","_x","_x2","apply","this","arguments","value","handleChange","console","log","getInitialFilterState","_inherits","Component","_createClass","key","Object","assign","filterLogic","initialFilterState","get","_slots$summaryWrapPro","slots","_jsx","Provider","children","_jsxs","FilterBarStyled","className","filterbarClasses","root","sx","inner","before","popperProps","placement","onAdd","onAddFilter","after","Box","_objectSpread","summaryWrapProps","display","alignItems","summaryBefore","flex","minWidth","summaryAfter","styled","_ref3","theme","concat","backgroundColor","palette","background","paper","gap","spacing"],"mappings":"+vBAqDM,SAAUA,EAAmBC,GACjC,IAAKA,EAAQC,eAAgB,CAC3B,IAAMC,EAAcF,EAAQG,aAAe,CAAEC,OAAQ,CAAA,GACrDJ,EAAQG,YAAcD,EACtBF,EAAQC,eAAiBI,EAAqBH,EAC/C,CACD,IAAKF,EAAQM,cAAe,CAC1B,IAAMC,EAAaP,EAAQQ,YAAc,CAAEJ,OAAQ,CAAA,GACnDJ,EAAQQ,WAAaD,EACrBP,EAAQM,cAAgBG,EAAoBF,EAC7C,CACD,IAAKP,EAAQU,mBAA8C,IAA1BV,EAAQW,cAAyB,CAChE,IAAMC,EAAyCZ,EAAQa,eAAiB,CAAET,OAAQ,CAAA,GAClFJ,EAAQa,cAAgBD,EACxBZ,EAAQU,iBAAmBI,EAAuBF,EACnD,CACD,IAAKZ,EAAQe,cAAe,CAC1B,IAAMC,EAAmChB,EAAQiB,YAAc,CAAEb,OAAQ,CAAA,GACzEJ,EAAQiB,WAAaD,EACrBhB,EAAQe,cAAgBG,EAAoBF,EAC7C,CAED,IAAMG,EAAqBnB,EAAQmB,oBAAsB,MACnDC,EAAUC,IAEVC,aACJ,SAAAA,EAAYC,GAAyB,IAAAC,EAEM,OAFNC,OAAAH,GACnCE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EAAA,eAAA,WAAA,IAAAI,EAAAC,EAAAC,IAAAC,EAiBC,SAAAC,EAAOC,EAA8BC,GAAmC,IAAAC,EAAA,OAAAL,IAAAM,EAAA,SAAAC,GAAA,cAAAA,EAAAC,EAAAD,EAAAE,GAAA,KAAA,EAEgB,OAFhBF,EAAAC,EAAA,EAEnFd,EAAKgB,SAAS,SAACC,GAAI,IAAAC,EAAA,MAAM,CAAET,oBAAWS,EAAER,aAAAA,EAAAA,EAAOD,mBAAW,IAAAS,EAAAA,EAAID,EAAKR,YAAaU,WAAW,EAAM,GAAEN,EAAAE,EAAA,EAC7FK,EAAUf,EAAAC,IAAAC,EAAC,SAAAc,IAAA,IAAAC,EAAAC,EAAA,OAAAjB,IAAAM,EAAA,SAAAY,GAAA,UAAA,IAAAA,EAAAT,EAAA,OAAAS,EAAAC,EAAAH,EAA+B,QAA/BA,GAAYC,EAAAvB,EAAKD,OAAM2B,gBAAQ,IAAAJ,OAAA,EAAnBA,EAAAK,KAAAJ,EAAsBd,GAAY,EAAAY,EAAA,IAAE,KAAI,KAAA,EACrErB,EAAKgB,SAAS,CAAEG,WAAW,IAAQN,EAAAE,EAAA,EAAA,MAAA,KAAA,EAEA,MAFAF,EAAAC,EAAA,EAAAH,EAAAE,EAAAe,EAEnC5B,EAAKgB,SAAS,CAAEG,WAAW,IAAQR,EAAA,KAAA,EAAA,OAAAE,EAAAY,EAAA,GAAA,EAAAjB,EAAA,KAAA,CAAA,CAAA,EAAA,QAGtC,OAAAqB,SAAAA,EAAAC,GAAA,OAAA1B,EAAA2B,MAAAC,KAAAC,UAAA,CAAA,CA1Ba,IA0Bb9B,EAAAH,EAEgB,iBAAA,SAACU,GACZV,EAAKD,MAAMmC,MACblC,EAAKmC,aAAazB,GAGpBV,EAAKmC,aAAazB,EAAO,CAAED,YAAaC,MACzCP,EAAAH,EAAA,cAEa,WAEZoC,QAAQC,IAAI,gBACblC,EAAAH,EAAA,cAEa,WAEZoC,QAAQC,IAAI,mBA1CZrC,EAAKU,MAAQV,EAAKsC,wBAAuBtC,CAC3C,CAAC,OAAAuC,EAAAzC,EAJqB0C,GAIrBC,EAAA3C,EAAA,CAAA,CAAA4C,IAAA,wBAAAR,MAED,WACE,OAAIF,KAAKjC,MAAMmC,MAAc,CAAEzB,YAAauB,KAAKjC,MAAMmC,OAChD,CAAEzB,YAAakC,OAAOC,OAAO,CAAEC,YAAalD,GAAsBnB,EAAQsE,oBACnF,GAAC,CAAAJ,IAAA,cAAAK,IAED,WACE,OAAOf,KAAKjC,MAAMmC,OAASF,KAAKtB,MAAMD,WACxC,GAAC,CAAAiC,IAAA,YAAAK,IAED,WACE,OAAOf,KAAKtB,MAAMS,YAAa,CACjC,GAAC,CAAAuB,IAAA,SAAAR,MA+BD,WAAM,IAAAc,EACIC,EAAUjB,KAAKjC,MAAfkD,MACFxE,EAAiBD,EAAQC,eACzBK,EAAgBN,EAAQM,cACxBI,EAAmBV,EAAQU,iBAC3BK,EAAgBf,EAAQe,cAC9B,OACE2D,EAACtD,EAAQuD,UAASjB,MAAOF,KAAIoB,SAC3BC,EAACC,EAAe,CAACC,UAAWC,EAAiBC,KAAMC,GAAI1B,KAAKjC,MAAM2D,GAAEN,SAAA,CAClEC,SAAKE,UAAWC,EAAiBG,MAC9BP,SAAA,EAAAH,aAAAA,EAAAA,EAAOW,SAAU,KAClBV,EAACpE,EAAa,CAACmE,MAAO,CAAEY,YAAa,CAAEC,UAAW,mBAClDZ,EAAC3D,EAAa,CAAC0D,MAAO,CAAEY,YAAa,CAAEC,UAAW,mBAClDZ,EAACzE,EAAc,CAACsF,MAAO/B,KAAKgC,YAAaf,MAAO,CAAEY,YAAa,CAAEC,UAAW,oBAC3Eb,aAAK,EAALA,EAAOgB,QAAS,QAEnBZ,EAACa,EAAGC,EAAAA,EAAA,CAAA,EAAKlB,aAAAA,EAAAA,EAAOmB,kBAAgB,CAAA,EAAA,CAAEV,GAAES,EAAA,CAAIE,QAAS,OAAQC,WAAY,UAAarB,iBAAKD,EAALC,EAAOmB,wBAAgB,IAAApB,OAAA,EAAvBA,EAAyBU,IAAIN,SAAA,EAC5GH,aAAAA,EAAAA,EAAOsB,gBAAiB,KACzBrB,EAACgB,EAAI,CAAAR,GAAI,CAAEc,KAAM,EAAGC,SAAU,GAAGrB,UAA6B,IAA1B5E,EAAQW,eAA2B+D,EAAChE,SACvE+D,aAAK,EAALA,EAAOyB,eAAgB,aASlC,IAAC,IAGH,OAAO5E,CACT,CAEA,IAAM0D,EAAmB,CACvBC,KAAM,qBACNE,MAAO,uBAGHL,EAAkBqB,EAAOT,EAAPS,CAAY,SAAAC,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAA1E,EAAAA,EAAA,CAAA,EAAA,KAAA2E,OACpCtB,EAAiBC,MAAS,CAC9BsB,gBAAiBF,EAAMG,QAAQC,WAAWC,YAC3CJ,OACItB,EAAiBG,OAAU,CAC9BU,QAAS,OACTC,WAAY,SACZa,IAAKN,EAAMO,QAAQ,IACpB"}

package/dist/src/lab/data-surface/button-switch.js

@@ -0,0 +1,2 @@
+import{objectSpread2 as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"@mui/material/Button";import n from"@mui/material/ButtonGroup";import o from"@mui/icons-material/ViewList";import a from"@mui/icons-material/GridView";var l={sm:"small",md:"medium"},s=function(s){var d=s.value,m=void 0===d?"list":d,u=s.onChange,c=s.size,f=void 0===c?"md":c,v=s.className,p=s.onlyIcon,x=void 0!==p&&p,z=l[f]||"small",g=function(i){i!==m&&(null==u||u(i))};return e(n,{className:v,variant:"outlined","aria-label":"view mode group",size:z,children:[t(r,i(i({"aria-pressed":"list"===m,onClick:function(){return g("list")},variant:"list"===m?"contained":"outlined",startIcon:x?void 0:t(o,{fontSize:z}),size:z,sx:{minWidth:x?"small"===z?36:44:void 0,px:x?1:void 0,display:"inline-flex",justifyContent:"center"}},x?{"aria-label":"List view"}:{}),{},{children:x?t(o,{fontSize:z}):"List"})),t(r,i(i({"aria-pressed":"grid"===m,onClick:function(){return g("grid")},variant:"grid"===m?"contained":"outlined",startIcon:x?void 0:t(a,{fontSize:z}),size:z,sx:{minWidth:x?"small"===z?36:44:void 0,px:x?1:void 0,display:"inline-flex",justifyContent:"center"}},x?{"aria-label":"Grid view"}:{}),{},{children:x?t(a,{fontSize:z}):"Grid"}))]})};export{s as default};
+//# sourceMappingURL=button-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-switch.js","sources":["../../../../src/lab/data-surface/button-switch.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { DataSurfaceViewMode } from './types'\r\nimport Button from '@mui/material/Button'\r\nimport ButtonGroup from '@mui/material/ButtonGroup'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport GridViewIcon from '@mui/icons-material/GridView'\r\n\r\ntype Props = {\r\n  value?: DataSurfaceViewMode\r\n  onChange?: (value: DataSurfaceViewMode) => void\r\n  size?: 'sm' | 'md'\r\n  className?: string\r\n  onlyIcon?: boolean\r\n}\r\n\r\nconst sizeMap = {\r\n  sm: 'small',\r\n  md: 'medium'\r\n} as const\r\n\r\nconst ButtonSwitch: React.FC<Props> = ({ value = 'list', onChange, size = 'md', className, onlyIcon = false }) => {\r\n  const muiSize = sizeMap[size] || 'small'\r\n\r\n  const handleClick = (v: DataSurfaceViewMode) => {\r\n    if (v === value) return\r\n    onChange?.(v)\r\n  }\r\n\r\n  return (\r\n    <ButtonGroup className={className} variant='outlined' aria-label='view mode group' size={muiSize}>\r\n      <Button\r\n        aria-pressed={value === 'list'}\r\n        onClick={() => handleClick('list')}\r\n        variant={value === 'list' ? 'contained' : 'outlined'}\r\n        startIcon={!onlyIcon ? <ViewListIcon fontSize={muiSize} /> : undefined}\r\n        size={muiSize}\r\n        sx={{\r\n          minWidth: onlyIcon ? (muiSize === 'small' ? 36 : 44) : undefined,\r\n          px: onlyIcon ? 1 : undefined,\r\n          display: 'inline-flex',\r\n          justifyContent: 'center'\r\n        }}\r\n        {...(onlyIcon ? { 'aria-label': 'List view' } : {})}\r\n      >\r\n        {onlyIcon ? <ViewListIcon fontSize={muiSize} /> : 'List'}\r\n      </Button>\r\n\r\n      <Button\r\n        aria-pressed={value === 'grid'}\r\n        onClick={() => handleClick('grid')}\r\n        variant={value === 'grid' ? 'contained' : 'outlined'}\r\n        startIcon={!onlyIcon ? <GridViewIcon fontSize={muiSize} /> : undefined}\r\n        size={muiSize}\r\n        sx={{\r\n          minWidth: onlyIcon ? (muiSize === 'small' ? 36 : 44) : undefined,\r\n          px: onlyIcon ? 1 : undefined,\r\n          display: 'inline-flex',\r\n          justifyContent: 'center'\r\n        }}\r\n        {...(onlyIcon ? { 'aria-label': 'Grid view' } : {})}\r\n      >\r\n        {onlyIcon ? <GridViewIcon fontSize={muiSize} /> : 'Grid'}\r\n      </Button>\r\n    </ButtonGroup>\r\n  )\r\n}\r\n\r\nexport default ButtonSwitch\r\n"],"names":["sizeMap","sm","md","ButtonSwitch","_ref","_ref$value","value","onChange","_ref$size","size","className","_ref$onlyIcon","onlyIcon","muiSize","handleClick","v","_jsxs","ButtonGroup","variant","children","_jsx","Button","_objectSpread","onClick","startIcon","undefined","ViewListIcon","fontSize","sx","minWidth","px","display","justifyContent","GridViewIcon"],"mappings":"sSAeA,IAAMA,EAAU,CACdC,GAAI,QACJC,GAAI,UAGAC,EAAgC,SAApBC,GAA+F,IAAAC,EAAAD,EAAxEE,MAAAA,OAAQ,IAAHD,EAAG,OAAMA,EAAEE,EAAQH,EAARG,SAAQC,EAAAJ,EAAEK,KAAAA,OAAO,IAAHD,EAAG,KAAIA,EAAEE,EAASN,EAATM,UAASC,EAAAP,EAAEQ,SAAAA,OAAW,IAAHD,GAAQA,EACnGE,EAAUb,EAAQS,IAAS,QAE3BK,EAAc,SAACC,GACfA,IAAMT,IACVC,SAAAA,EAAWQ,GACZ,EAED,OACEC,EAACC,EAAW,CAACP,UAAWA,EAAWQ,QAAQ,WAAU,aAAY,kBAAkBT,KAAMI,EACvFM,SAAA,CAAAC,EAACC,EAAMC,EAAAA,EAAA,CAAA,eACmB,SAAVhB,EACdiB,QAAS,WAAF,OAAQT,EAAY,OAAO,EAClCI,QAAmB,SAAVZ,EAAmB,YAAc,WAC1CkB,UAAYZ,OAAiDa,EAAtCL,EAACM,EAAa,CAAAC,SAAUd,IAC/CJ,KAAMI,EACNe,GAAI,CACFC,SAAUjB,EAAwB,UAAZC,EAAsB,GAAK,QAAMY,EACvDK,GAAIlB,EAAW,OAAIa,EACnBM,QAAS,cACTC,eAAgB,WAEbpB,EAAW,CAAE,aAAc,aAAgB,CAAA,GAAE,GAAA,UAEjDA,EAAWQ,EAACM,EAAY,CAACC,SAAUd,IAAc,UAGpDO,EAACC,EAAMC,EAAAA,EAAA,gBACmB,SAAVhB,EACdiB,QAAS,WAAF,OAAQT,EAAY,OAAO,EAClCI,QAAmB,SAAVZ,EAAmB,YAAc,WAC1CkB,UAAYZ,OAAiDa,EAAtCL,EAACa,EAAa,CAAAN,SAAUd,IAC/CJ,KAAMI,EACNe,GAAI,CACFC,SAAUjB,EAAwB,UAAZC,EAAsB,GAAK,QAAMY,EACvDK,GAAIlB,EAAW,OAAIa,EACnBM,QAAS,cACTC,eAAgB,WAEbpB,EAAW,CAAE,aAAc,aAAgB,CAAA,GAAE,GAAA,CAEjDO,SAAAP,EAAWQ,EAACa,EAAY,CAACN,SAAUd,IAAc,YAI1D"}

package/dist/src/lab/data-surface/index.create.js

@@ -0,0 +1,2 @@
+import{slicedToArray as n,asyncToGenerator as e,regenerator as i,objectSpread2 as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import{styled as r,Box as l}from"@mui/material";import{useState as u,useMemo as d,useCallback as g,useRef as v}from"react";import{LoadingModeRule as p}from"./types.js";import{createViewGrid as s,createViewGridLoading as c}from"./view-grid.js";import{createViewList as f,createViewListLoading as m}from"./view-list.js";import{createViewSwitchTransition as h}from"./view-switch-transition.js";import{PanelLoading as C,PanelNoData as S,PanelLoadMore as w,PanelInfiniteScrollFooter as P,PanelPaginationFooter as x}from"./ui.units.js";function y(r){if(!r.GridComponent){var y=r.gridConfig||{getterId:function(n,e){return e}};r.gridConfig=y,r.GridComponent=s(y)}if(!r.ListComponent){var M=r.listConfig||{getterId:function(n,e){return e}};r.listConfig=M,r.ListComponent=f(M)}var N=r.defaultViewMode,j=void 0===N?"grid":N,b=r.defaultLoadMode,k=void 0===b?"pagination":b,B=r.defaultPageSize,G=void 0===B?20:B,L=h({}),H=c(r.GridComponent),A=m(r.ListComponent);return function(s){var c,f,m=u({viewMode:j,loadMode:k}),h=n(m,2),y=h[0];h[1];var M=u({page:0,pageSize:G}),N=n(M,2),b=N[0],B=N[1],I=d(function(){var n,e,i,o,a,t,l,u,d=null!==(n=s.state)&&void 0!==n?n:y,g=null!==(e=d.viewMode)&&void 0!==e?e:j,v=null!==(i=null===(o=r.listConfig)||void 0===o?void 0:o.renderStrategy)&&void 0!==i?i:"normal";"grid"===g&&(v=null!==(l=null===(u=r.gridConfig)||void 0===u?void 0:u.renderStrategy)&&void 0!==l?l:"normal");return{viewMode:g,loadMode:null!==(a=d.loadMode)&&void 0!==a?a:k,renderStrategy:null!==(t=d.renderStrategy)&&void 0!==t?t:v}},[s.state,y]),T=d(function(){var n,e,i,o,a,t=null!==(n=s.pagination)&&void 0!==n?n:b;return{page:null!==(e=t.page)&&void 0!==e?e:0,pageSize:null!==(i=t.pageSize)&&void 0!==i?i:G,hasNext:null!==(o=t.hasNext)&&void 0!==o&&o,hasPrev:null!==(a=t.hasPrev)&&void 0!==a&&a,total:t.total}},[s.pagination,b]),_=null!==(c=s.viewMode)&&void 0!==c?c:I.viewMode,D=null!==(f=s.loadMode)&&void 0!==f?f:I.loadMode,J=g(e(i().m(function n(){var e,a,t,r,l;return i().w(function(n){for(;;)switch(n.n){case 0:if(!((r=null!==(e=T.page)&&void 0!==e?e:0)<=0)){n.n=1;break}return n.a(2);case 1:return l=r-1,s.pagination||B(function(n){return o(o({},n),{},{page:l})}),n.n=2,null===(a=s.onPageChange)||void 0===a?void 0:a.call(s,l,null!==(t=T.pageSize)&&void 0!==t?t:G);case 2:return n.a(2)}},n)})),[T.page,T.pageSize,s.pagination,s.onPageChange]),V=g(e(i().m(function n(){var e,a,t,r,l;return i().w(function(n){for(;;)switch(n.n){case 0:if(T.hasNext){n.n=1;break}return n.a(2);case 1:return r=null!==(e=T.page)&&void 0!==e?e:0,l=r+1,s.pagination||B(function(n){return o(o({},n),{},{page:l})}),n.n=2,null===(a=s.onPageChange)||void 0===a?void 0:a.call(s,l,null!==(t=T.pageSize)&&void 0!==t?t:G);case 2:return n.a(2)}},n)})),[T.hasNext,T.page,T.pageSize,s.pagination,s.onPageChange]),q=g(function(){var n=e(i().m(function n(e){var a,t;return i().w(function(n){for(;;)switch(n.n){case 0:if(!(e<0)){n.n=1;break}return n.a(2);case 1:return s.pagination||B(function(n){return o(o({},n),{},{page:e})}),n.n=2,null===(a=s.onPageChange)||void 0===a?void 0:a.call(s,e,null!==(t=T.pageSize)&&void 0!==t?t:G);case 2:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}(),[T.pageSize,s.pagination,s.onPageChange]),E=s.value||[],F=0===E.length,K=Boolean(s.loading&&F),O=!s.loading&&F,Q=Boolean(s.loading)&&!F,R=g(function(){var n=e(i().m(function n(e,o){var a;return i().w(function(n){for(;;)switch(n.n){case 0:return s.pagination||B({page:e,pageSize:o}),n.n=1,null===(a=s.onPageChange)||void 0===a?void 0:a.call(s,e,o);case 1:return n.a(2)}},n)}));return function(e,i){return n.apply(this,arguments)}}(),[s.pagination,s.onPageChange]),U=d(function(){return{value:E,loadMode:D,loading:s.loading,pagination:T,onPageChange:R}},[E,D,s.loading,T,R]),W=v(U);W.current=U;var X=d(function(){var n,e,i;return{value:E,loadMode:D,loading:s.loading,pagination:T,onPageChange:R,columns:null===(n=r.listConfig)||void 0===n?void 0:n.columns,density:null===(e=r.listConfig)||void 0===e?void 0:e.density,renderStrategy:I.renderStrategy,virtualizedConfig:null===(i=r.listConfig)||void 0===i?void 0:i.virtualizedConfig}},[E,D,s.loading,T,I.renderStrategy,R]),Y=v(X);Y.current=X;var Z,$,nn,en,on,an=d(function(){return function(){return t(A,o({},Y.current))}},[A]),tn=d(function(){return function(){return t(H,o({},W.current))}},[H]);return a(z,{sx:s.sx,children:[a(l,{sx:{flex:1,minHeight:0,position:"relative"},children:[K&&t(C,{}),O&&t(S,{}),!K&&!O&&t(L,{value:_,viewA:{value:"list",Content:an},viewB:{value:"grid",Content:tn}}),Q&&t(w,{})]}),D===p.infiniteScroll?t(P,{loading:s.loading,hasNext:null===(en=s.pagination)||void 0===en?void 0:en.hasNext,currentCount:E.length,total:null===(on=s.pagination)||void 0===on?void 0:on.total}):t(x,{page:null!==(Z=T.page)&&void 0!==Z?Z:0,pageSize:null!==($=T.pageSize)&&void 0!==$?$:G,total:T.total,hasNext:T.hasNext,hasPrev:(null!==(nn=T.page)&&void 0!==nn?nn:0)>0,loading:s.loading,onPrevPage:J,onNextPage:V,onPageJump:q})]})}}var z=r(l)(function(n){return{display:"flex",flexDirection:"column",width:"100%",height:"100%",position:"relative",backgroundColor:n.theme.palette.background.default,minHeight:0,flex:1}});export{y as createDataSurface,y as default};
+//# sourceMappingURL=index.create.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.create.js","sources":["../../../../src/lab/data-surface/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, styled } from '@mui/material'\r\nimport { useCallback, useMemo, useRef, useState } from 'react'\r\nimport { DataSurfaceViewMode, LoadingModeRule } from './types'\r\nimport { createViewGrid, createViewGridLoading } from './view-grid'\r\nimport { createViewList, createViewListLoading } from './view-list'\r\nimport { createViewSwitchTransition } from './view-switch-transition'\r\nimport { PanelInfiniteScrollFooter, PanelLoadMore, PanelLoading, PanelNoData, PanelPaginationFooter } from './ui.units'\r\n// types\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { TPagination, TDataSurfaceState } from './types'\r\nimport type { IViewGridConfig, IViewGridLoadingProps, IViewGridProps } from './view-grid'\r\nimport type { IViewListConfig, IViewListLoadingProps, IViewListProps } from './view-list'\r\n\r\nexport interface IDataSurfaceSlots {}\r\n\r\nexport interface IDataSurfaceProps<T> {\r\n  value?: T[]\r\n  /** Controlled state. When provided, DataSurface becomes fully controlled. */\r\n  state?: TDataSurfaceState\r\n  /** Called on any state change (viewMode, loadMode, page, pageSize). */\r\n  onStateChange?: (state: TDataSurfaceState) => void\r\n  viewMode?: DataSurfaceViewMode\r\n  /** Pagination metadata shared by both modes. */\r\n  pagination?: TPagination\r\n  /** True while a page fetch is in flight (shows loading indicator). */\r\n  loading?: boolean\r\n  /**\r\n   * Called when the component needs a new page of data.\r\n   * - pagination mode: triggered by user clicking page control\r\n   * - infiniteScroll mode: triggered automatically when scrolling near the bottom\r\n   * Supports async operations - return a Promise to indicate loading state.\r\n   */\r\n  onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n  /** Load orchestration mode. @default 'pagination' */\r\n  loadMode?: LoadingModeRule\r\n  sx?: BoxProps['sx']\r\n  slots?: IDataSurfaceSlots\r\n}\r\n\r\nexport interface IDataSurfaceConfig<T> {\r\n  defaultViewMode?: DataSurfaceViewMode\r\n  /** Default load mode when not provided via props. @default 'pagination' */\r\n  defaultLoadMode?: LoadingModeRule\r\n  /** Default page size. @default 20 */\r\n  defaultPageSize?: number\r\n  enableSingleViewTransition?: boolean\r\n  listConfig?: IViewListConfig<T>\r\n  ListComponent?: ComponentType<IViewListProps<T>>\r\n  gridConfig?: IViewGridConfig<T>\r\n  GridComponent?: ComponentType<IViewGridProps<T>>\r\n}\r\n\r\nexport function createDataSurface<T>(config: IDataSurfaceConfig<T>) {\r\n  if (!config.GridComponent) {\r\n    const configInput: IViewGridConfig<T> = config.gridConfig || { getterId: (item: T, index: number) => index }\r\n    config.gridConfig = configInput\r\n    config.GridComponent = createViewGrid<T>(configInput)\r\n  }\r\n\r\n  if (!config.ListComponent) {\r\n    const configInput: IViewListConfig<T> = config.listConfig || { getterId: (item: T, index: number) => index }\r\n    config.listConfig = configInput\r\n    config.ListComponent = createViewList<T>(configInput)\r\n  }\r\n\r\n  const { defaultViewMode = 'grid', defaultLoadMode = 'pagination', defaultPageSize = 20 } = config\r\n  const ViewSwitchTranstionInstance = createViewSwitchTransition<DataSurfaceViewMode>({})\r\n  const GridLoadingComponent = createViewGridLoading<T>(config.GridComponent as ComponentType<IViewGridProps<T>>)\r\n  const ListLoadingComponent = createViewListLoading<T>(config.ListComponent as ComponentType<IViewListProps<T>>)\r\n\r\n  const DataSurface: FC<IDataSurfaceProps<T>> = (props) => {\r\n    // uncontrolled internal state (used when props.state is not provided)\r\n    const [internalState, setInternalState] = useState<TDataSurfaceState>({\r\n      viewMode: defaultViewMode,\r\n      loadMode: defaultLoadMode\r\n    })\r\n\r\n    // separate pagination state\r\n    const [internalPagination, setInternalPagination] = useState<TPagination>({\r\n      page: 0,\r\n      pageSize: defaultPageSize\r\n    })\r\n\r\n    // resolved state: controlled takes priority over internal\r\n    const surfaceState = useMemo<Required<TDataSurfaceState>>(() => {\r\n      const s = props.state ?? internalState\r\n      const resolvedViewMode = s.viewMode ?? defaultViewMode\r\n\r\n      // Determine default renderStrategy based on current viewMode\r\n      let defaultRenderStrategy = config.listConfig?.renderStrategy ?? 'normal'\r\n      if (resolvedViewMode === 'grid') {\r\n        defaultRenderStrategy = config.gridConfig?.renderStrategy ?? 'normal'\r\n      }\r\n\r\n      const resolved = {\r\n        viewMode: resolvedViewMode,\r\n        loadMode: s.loadMode ?? defaultLoadMode,\r\n        renderStrategy: s.renderStrategy ?? defaultRenderStrategy\r\n      }\r\n      return resolved\r\n    }, [props.state, internalState])\r\n\r\n    // resolved pagination: external takes priority over internal\r\n    const paginationState = useMemo<TPagination>(() => {\r\n      const p = props.pagination ?? internalPagination\r\n      return {\r\n        page: p.page ?? 0,\r\n        pageSize: p.pageSize ?? defaultPageSize,\r\n        hasNext: p.hasNext ?? false,\r\n        hasPrev: p.hasPrev ?? false,\r\n        total: p.total\r\n      }\r\n    }, [props.pagination, internalPagination])\r\n\r\n    // const updateState = useCallback(\r\n    //   (patch: Partial<TDataSurfaceState>) => {\r\n    //     const next = { ...surfaceState, ...patch }\r\n    //     if (!props.state) setInternalState(next)\r\n    //     props.onStateChange?.(next)\r\n    //   },\r\n    //   [surfaceState, props.state, props.onStateChange]\r\n    // )\r\n\r\n    const viewMode = props.viewMode ?? surfaceState.viewMode\r\n    const loadMode = props.loadMode ?? surfaceState.loadMode\r\n\r\n    const handlePrevPage = useCallback(async () => {\r\n      const currentPage = paginationState.page ?? 0\r\n      if (currentPage <= 0) return\r\n      const prevPage = currentPage - 1\r\n      if (!props.pagination) {\r\n        setInternalPagination((prev) => ({ ...prev, page: prevPage }))\r\n      }\r\n      await props.onPageChange?.(prevPage, paginationState.pageSize ?? defaultPageSize)\r\n    }, [paginationState.page, paginationState.pageSize, props.pagination, props.onPageChange])\r\n\r\n    const handleNextPage = useCallback(async () => {\r\n      if (!paginationState.hasNext) return\r\n      const currentPage = paginationState.page ?? 0\r\n      const nextPage = currentPage + 1\r\n      if (!props.pagination) {\r\n        setInternalPagination((prev) => ({ ...prev, page: nextPage }))\r\n      }\r\n      await props.onPageChange?.(nextPage, paginationState.pageSize ?? defaultPageSize)\r\n    }, [paginationState.hasNext, paginationState.page, paginationState.pageSize, props.pagination, props.onPageChange])\r\n\r\n    const handlePageJump = useCallback(\r\n      async (targetPage: number) => {\r\n        if (targetPage < 0) return\r\n        if (!props.pagination) {\r\n          setInternalPagination((prev) => ({ ...prev, page: targetPage }))\r\n        }\r\n        await props.onPageChange?.(targetPage, paginationState.pageSize ?? defaultPageSize)\r\n      },\r\n      [paginationState.pageSize, props.pagination, props.onPageChange]\r\n    )\r\n\r\n    const finalValue = props.value || []\r\n    const isEmptyData = finalValue.length === 0\r\n    const isInitialLoading = Boolean(props.loading && isEmptyData)\r\n    const isNoData = !props.loading && isEmptyData\r\n    const showLoadingOverlay = Boolean(props.loading) && !isEmptyData\r\n\r\n    const handleGridPageChange = useCallback(\r\n      async (page: number, pageSize: number) => {\r\n        if (!props.pagination) {\r\n          setInternalPagination({ page, pageSize })\r\n        }\r\n        await props.onPageChange?.(page, pageSize)\r\n      },\r\n      [props.pagination, props.onPageChange]\r\n    )\r\n\r\n    const gridPayload = useMemo<IViewGridLoadingProps<T>>(\r\n      () => ({\r\n        value: finalValue,\r\n        loadMode,\r\n        loading: props.loading,\r\n        pagination: paginationState,\r\n        onPageChange: handleGridPageChange\r\n      }),\r\n      [finalValue, loadMode, props.loading, paginationState, handleGridPageChange]\r\n    )\r\n\r\n    const gridPayloadRef = useRef<IViewGridLoadingProps<T>>(gridPayload)\r\n    gridPayloadRef.current = gridPayload\r\n\r\n    const listPayload = useMemo<IViewListLoadingProps<T>>(\r\n      () => ({\r\n        value: finalValue,\r\n        loadMode,\r\n        loading: props.loading,\r\n        pagination: paginationState,\r\n        onPageChange: handleGridPageChange,\r\n        columns: config.listConfig?.columns,\r\n        density: config.listConfig?.density,\r\n        renderStrategy: surfaceState.renderStrategy,\r\n        virtualizedConfig: config.listConfig?.virtualizedConfig\r\n      }),\r\n      [finalValue, loadMode, props.loading, paginationState, surfaceState.renderStrategy, handleGridPageChange]\r\n    )\r\n\r\n    const listPayloadRef = useRef<IViewListLoadingProps<T>>(listPayload)\r\n    listPayloadRef.current = listPayload\r\n\r\n    const ListViewContent = useMemo<ComponentType<{ value: DataSurfaceViewMode }>>(() => {\r\n      const ViewListContent: FC<{ value: DataSurfaceViewMode }> = () => {\r\n        return <ListLoadingComponent {...listPayloadRef.current} />\r\n      }\r\n      return ViewListContent\r\n    }, [ListLoadingComponent])\r\n\r\n    const GridViewContent = useMemo<ComponentType<{ value: DataSurfaceViewMode }>>(() => {\r\n      const ViewGridContent: FC<{ value: DataSurfaceViewMode }> = () => {\r\n        return <GridLoadingComponent {...gridPayloadRef.current} />\r\n      }\r\n      return ViewGridContent\r\n    }, [GridLoadingComponent])\r\n\r\n    const renderFooter = () => {\r\n      if (loadMode === LoadingModeRule.infiniteScroll) {\r\n        return (\r\n          <PanelInfiniteScrollFooter\r\n            loading={props.loading}\r\n            hasNext={props.pagination?.hasNext}\r\n            currentCount={finalValue.length}\r\n            total={props.pagination?.total}\r\n          />\r\n        )\r\n      }\r\n\r\n      // pagination mode\r\n      return (\r\n        <PanelPaginationFooter\r\n          page={paginationState.page ?? 0}\r\n          pageSize={paginationState.pageSize ?? defaultPageSize}\r\n          total={paginationState.total}\r\n          hasNext={paginationState.hasNext}\r\n          hasPrev={(paginationState.page ?? 0) > 0}\r\n          loading={props.loading}\r\n          onPrevPage={handlePrevPage}\r\n          onNextPage={handleNextPage}\r\n          onPageJump={handlePageJump}\r\n        />\r\n      )\r\n    }\r\n\r\n    return (\r\n      <DataSurfaceStyled sx={props.sx}>\r\n        <Box sx={{ flex: 1, minHeight: 0, position: 'relative' }}>\r\n          {isInitialLoading && <PanelLoading />}\r\n          {isNoData && <PanelNoData />}\r\n          {!isInitialLoading && !isNoData && (\r\n            <ViewSwitchTranstionInstance\r\n              value={viewMode}\r\n              viewA={{ value: 'list', Content: ListViewContent }}\r\n              viewB={{ value: 'grid', Content: GridViewContent }}\r\n            />\r\n          )}\r\n          {showLoadingOverlay && <PanelLoadMore />}\r\n        </Box>\r\n        {renderFooter()}\r\n      </DataSurfaceStyled>\r\n    )\r\n  }\r\n  return DataSurface\r\n}\r\n\r\nexport default createDataSurface\r\n\r\nconst DataSurfaceStyled = styled(Box)(({ theme }) => ({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  width: '100%',\r\n  height: '100%',\r\n  position: 'relative',\r\n  backgroundColor: theme.palette.background.default,\r\n  minHeight: 0,\r\n  flex: 1\r\n}))\r\n"],"names":["createDataSurface","config","GridComponent","configInput","gridConfig","getterId","item","index","createViewGrid","ListComponent","listConfig","createViewList","_config$defaultViewMo","defaultViewMode","_config$defaultLoadMo","defaultLoadMode","_config$defaultPageSi","defaultPageSize","ViewSwitchTranstionInstance","createViewSwitchTransition","GridLoadingComponent","createViewGridLoading","ListLoadingComponent","createViewListLoading","props","_props$viewMode","_props$loadMode","_useState","useState","viewMode","loadMode","_useState2","_slicedToArray","internalState","_useState3","page","pageSize","_useState4","internalPagination","setInternalPagination","surfaceState","useMemo","_props$state","_s$viewMode","_config$listConfig$re","_config$listConfig","_s$loadMode","_s$renderStrategy","_config$gridConfig$re","_config$gridConfig","s","state","resolvedViewMode","defaultRenderStrategy","renderStrategy","paginationState","_props$pagination","_p$page","_p$pageSize","_p$hasNext","_p$hasPrev","p","pagination","hasNext","hasPrev","total","handlePrevPage","useCallback","_asyncToGenerator","_regenerator","m","_callee","_paginationState$page","_props$onPageChange","_paginationState$page2","currentPage","prevPage","w","_context","n","a","prev","_objectSpread","onPageChange","call","handleNextPage","_callee2","_paginationState$page3","_props$onPageChange2","_paginationState$page4","nextPage","_context2","handlePageJump","_ref3","_callee3","targetPage","_props$onPageChange3","_paginationState$page5","_context3","_x","apply","this","arguments","finalValue","value","isEmptyData","length","isInitialLoading","Boolean","loading","isNoData","showLoadingOverlay","handleGridPageChange","_ref4","_callee4","_props$onPageChange4","_context4","_x2","_x3","gridPayload","gridPayloadRef","useRef","current","listPayload","_config$listConfig2","_config$listConfig3","_config$listConfig4","columns","density","virtualizedConfig","listPayloadRef","_paginationState$page6","_paginationState$page7","_paginationState$page8","_props$pagination2","_props$pagination3","ListViewContent","_jsx","GridViewContent","_jsxs","DataSurfaceStyled","sx","children","Box","flex","minHeight","position","PanelLoading","PanelNoData","viewA","Content","viewB","PanelLoadMore","LoadingModeRule","infiniteScroll","PanelInfiniteScrollFooter","currentCount","PanelPaginationFooter","onPrevPage","onNextPage","onPageJump","styled","_ref5","display","flexDirection","width","height","backgroundColor","theme","palette","background"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{createClass as t,classCallCheck as r,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{createViewGrid as i}from"./view-grid.js";import{createDataSurface as a}from"./index.create.js";import s from"./button-switch.js";var o=t(function t(){r(this,t),e(this,"createDataSurface",a),e(this,"createViewGrid",i),e(this,"createButtonSwitch",function(){return s})}),c=new o;export{o as DinoDataSurFace,c as dinoDataSurface};
+//# sourceMappingURL=index.dino.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.dino.js","sources":["../../../../src/lab/data-surface/index.dino.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport createViewGrid from './view-grid'\r\nimport createDataSurface from './index.create'\r\nimport ButtonSwitch from './button-switch'\r\n\r\nexport class DinoDataSurFace {\r\n  createDataSurface = createDataSurface\r\n  createViewGrid = createViewGrid\r\n  createButtonSwitch = () => ButtonSwitch\r\n}\r\n\r\nexport const dinoDataSurface = new DinoDataSurFace()\r\n"],"names":["DinoDataSurFace","_createClass","_classCallCheck","_defineProperty","createDataSurface","createViewGrid","this","ButtonSwitch","dinoDataSurface"],"mappings":"6PAMA,IAAaA,EAAeC,EAAA,SAAAD,IAAAE,OAAAF,GAAAG,2BACNC,GAAiBD,wBACpBE,GAAcF,EACVG,KAAA,qBAAA,WAAA,OAAMC,CAAY,EAAA,GAG5BC,EAAkB,IAAIR"}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid.js","sources":["../../../../src/lab/data-surface/view-grid.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Box, Grid, styled } from '@mui/material'\r\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { getGridItemSizes, getMaxGridGap, getMaxGridItemHeight, GridItemDefault, resolveGridColumnsFromWidth } from './view-grid.units'\r\n// types\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types'\r\nimport type { IViewGridItemProps, TGridSizes } from './view-grid.types'\r\n\r\nexport interface IViewGridBase<T> {\r\n  gap?: number\r\n  sizes?: TGridSizes\r\n  gridItemHeight?: number\r\n  /**\r\n   * Controls how the list is rendered into the DOM.\r\n   * - `normal`      — all rows are mounted (suitable for small datasets)\r\n   * - `virtualized` — only visible rows are mounted (optimized for large datasets)\r\n   * @default 'normal'\r\n   */\r\n  renderStrategy?: RenderStrategyRule\r\n  Component?: ComponentType<IViewGridItemProps<T>>\r\n  virtualizedConfig?: TVirtualizedConfig\r\n  /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */\r\n  onNearEnd?: () => void\r\n}\r\n\r\nexport interface IViewGridConfig<T> extends IViewGridBase<T> {\r\n  getterId: TGetterId<T>\r\n}\r\n\r\nexport interface IViewGridProps<T> extends IViewGridBase<T> {\r\n  value: T[]\r\n}\r\n\r\nexport interface IViewGridLoadingProps<T> extends IViewGridBase<T> {\r\n  value: T[]\r\n  loadMode: LoadingModeRule\r\n  loading?: boolean\r\n  pagination?: TPagination\r\n  onPageChange?: (page: number, pageSize: number) => void | Promise<void>\r\n}\r\n\r\nfunction createViewGridNormal<T>(config: IViewGridConfig<T>) {\r\n  const ViewGridNormal: FC<IViewGridProps<T>> = (props) => {\r\n    const mergedConfig = useMemo(() => {\r\n      return {\r\n        gap: getMaxGridGap(props.gap, config.gap, 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":"wmBA2CA,IAAMA,EAAiB,SAAKC,EAAwBC,GAClD,QAAqBC,IAAjBF,EAAOG,MAAqB,OAAOH,EAAOG,MAC9C,GAAIF,EAAY,GAAKD,EAAOI,MAAQJ,EAAOI,KAAO,EAAG,CACnD,IAAMC,EAAWL,EAAOI,KAAOH,EAAa,IAC5C,MAAAK,GAAAA,OAAUD,EAAO,IAClB,CACD,OAAIJ,EAAY,GAAKD,EAAOO,SAAUD,GAAAA,OAAUN,EAAOO,SAAQ,WAA/D,CAEF,EAEMC,EAAkB,SAAKR,EAAwBS,EAAQC,GAC3D,IAAMC,EAAQX,EAAOY,YAAcZ,EAAOY,YAAYH,EAAKC,GAAUD,EAAYT,EAAOa,OAClFC,EAA6B,CAAEH,MAAAA,EAAOF,IAAAA,EAAKC,MAAAA,EAAOG,MAAOb,EAAOa,OAEtE,OAAIb,EAAOe,WAAmBf,EAAOe,WAAWD,GACzCE,OAAOL,QAAAA,EAAS,GACzB,EAEMM,EAAsB,SAAKC,GAC/B,GAAoB,IAAhBA,EAAKC,OAAc,MAAO,GAC9B,IAAMC,EAAWF,EAAK,GACtB,OAAOG,OAAOC,KAAKF,GAAoBG,IAAI,SAACC,GAAG,MAAM,CACnDX,MAAOW,EACPC,MAAOT,OAAOQ,GACdpB,KAAM,EACP,EACH,EAKMsB,EAAuB,SAAKC,GAChC,OAAKA,EACQN,OAAOC,KAAKK,GACbJ,IAAI,SAACC,GAAO,IAAAI,EAChBC,EAA8B,QAArBD,EAAGD,EAAcH,UAAI,IAAAI,EAAAA,EAAI,CAAE,EAC1C,OAAAE,EAAA,CAASjB,MAAOW,GAAQK,EAC1B,GAL2B,EAM7B,EAiPM,SAAUE,EAAkBC,GAChC,IAAMC,EAhPR,SAAiCD,GAuE/B,OAtE8C,SAACE,GAAS,IAAAC,EAAAC,EAChDC,EAAyCF,QAAlCA,EAAgB,QAAhBC,EAAGF,EAAMG,eAAO,IAAAD,EAAAA,EAAIJ,EAAOK,mBAAOF,EAAAA,EAAIG,EAAYC,SAMzDC,EALeN,EAAMM,QACvBd,EAAqBQ,EAAMM,SAC3BR,EAAOQ,QACLd,EAAqBM,EAAOQ,SAC5BvB,EAAoBiB,EAAMvB,OAE1BV,EAAYuC,EAAQC,OAAO,SAACC,EAAKC,GAAG,OAAKD,GAAOC,EAAIvC,MAAQuC,EAAIvC,KAAO,EAAIuC,EAAIvC,KAAO,EAAE,EAAE,GAC1FwC,EAAYC,EAA2BR,GACvCS,EAAcC,EAA6BV,GAEjD,OACEW,EAACC,EAAqB,CAAAC,UAAWC,EAAQC,KAAIC,SAC3CL,EAACM,GACCJ,UAAWC,EAAQI,gBACnBC,SAAU,SAACC,GACT,IACyDC,EADnDC,EAAIF,EAAEG,cACRD,EAAEE,aAAeF,EAAEG,UAAYH,EAAEI,cAAgB,KACpC,QAAfL,EAAAxB,EAAM8B,iBAAS,IAAAN,GAAfA,EAAAO,KAAA/B,GAEH,EAAAmB,SAEDa,EAACC,EAAM,CAAAC,KAAK,QAAQlB,UAAWC,EAAQkB,MACrChB,SAAA,CAAAL,EAACsB,EAAS,CAACpB,UAAWC,EAAQoB,YAC5BlB,SAAAL,EAACwB,EAAQ,CAAAnB,SACNb,EAAQjB,IAAI,SAACoB,GAAG,IAAA8B,EAAAC,EAAA,OACf1B,EAAC2B,EAEC,CAAAzB,UAAWC,EAAQyB,gBACnBC,MAAOlC,EAAIkC,MACXC,GAAI,CACFvE,SAAUoC,EAAIpC,SACdJ,MAAOJ,EAAe4C,EAAK1C,GAC3B8E,SAAmB,QAAXN,EAAE9B,EAAIxC,aAAKsE,IAAAA,EAAAA,EAAKxE,EAAY,GAAK0C,EAAIvC,KAAO,OAAIF,GACzDmD,SAES,QAFTqB,EAEA/B,EAAIlB,aAAK,IAAAiD,EAAAA,EAAI1D,OAAO2B,EAAI9B,QATpBG,OAAO2B,EAAI9B,OAWnB,OAGLmC,EAACgC,YACE9C,EAAMvB,MAAMY,IAAI,SAACd,EAAKC,GAAS,IAAAuE,EACxBC,EAAoC,QAA9BD,EAAGjD,EAAOmD,SAAS1E,EAAKC,UAAMuE,IAAAA,EAAAA,EAAIvE,EAC9C,OACEsC,EAACwB,GAAsBY,OAAK,EAACN,GAAI,CAAEO,OAAQzC,GAAWS,SACnDb,EAAQjB,IAAI,SAACoB,GAAG,IAAA2C,EAAA,OACftC,EAAC2B,EAEC,CAAAzB,UAAWC,EAAQoC,cACnBV,MAAOlC,EAAIkC,MACXC,GAAI,CACFO,OAAQzC,EACR4C,QAAS1C,EACTiC,SAAmB,QAAXO,EAAE3C,EAAIxC,aAAKmF,IAAAA,EAAAA,EAAKrF,EAAY,GAAK0C,EAAIvC,KAAO,OAAIF,GACzDmD,SAEDL,EAACyC,EAAG,CAACvC,UAAWC,EAAQuC,iBAAmBrC,SAAA7C,EAAgBmC,EAAKlC,EAAKC,SAAaJ,OAT1EU,OAAOkE,GAAO,KAAA5E,OAAIU,OAAO2B,EAAI9B,QAWxC,IAdYqE,EAiBlB,WAMZ,CAEH,CAwKyBS,CAAwB3D,GACzC4D,EAvKR,SAAsC5D,GAkKpC,OAjKmD,SAACE,GAAS,IAAA2D,EAAAC,EAAAC,EAAAC,EACrD3D,EAAyCwD,QAAlCA,EAAgB,QAAhBC,EAAG5D,EAAMG,eAAO,IAAAyD,EAAAA,EAAI9D,EAAOK,mBAAOwD,EAAAA,EAAIvD,EAAYC,SAMzDC,EALeN,EAAMM,QACvBd,EAAqBQ,EAAMM,SAC3BR,EAAOQ,QACLd,EAAqBM,EAAOQ,SAC5BvB,EAAoBiB,EAAMvB,OAE1BV,EAAYuC,EAAQC,OAAO,SAACC,EAAKC,GAAG,OAAKD,GAAOC,EAAIvC,MAAQuC,EAAIvC,KAAO,EAAIuC,EAAIvC,KAAO,EAAE,EAAE,GAC1FwC,EAAYC,EAA2BR,GACvCS,EAAcC,EAA6BV,GAE3C4D,EAAcC,EAAQ,WAC1B,OAAO7E,OAAO8E,OAAO,CAAE,EAAEnE,EAAOoE,kBAAmBlE,EAAMkE,kBAC3D,EAAG,CAAClE,EAAMkE,oBAEJC,EAAUC,EAA8B,MACxCC,EAAeD,EAAmC,MACxDE,EAA8CC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAlDI,EAAeF,EAAA,GAAEG,EAAkBH,EAAA,GAC1CI,EAA4CL,EAA+BV,QAAvBA,EAACE,eAAAA,EAAanC,qBAASiC,EAAAA,EAAI,GAAEgB,EAAAJ,EAAAG,EAAA,GAA1EE,EAAcD,EAAA,GAAEE,EAAiBF,EAAA,GACxCG,EAAwCT,EAASU,GAAmBC,EAAAT,EAAAO,EAAA,GAA7DG,EAAYD,EAAA,GAAEE,EAAeF,EAAA,GAE9BG,EAAWC,KAAKC,IAAI,EAAwB,QAAvBzB,EAAEC,aAAW,EAAXA,EAAasB,gBAAQvB,IAAAA,EAAAA,EAAI,GAEtD0B,EAAgB,WACd,GAAKrB,EAAQsB,QAAb,CAEA,IAAMC,EAAa,WAAK,IAAAC,EAAAC,EAChBC,EAA0C,QAAhCF,EAAkB,QAAlBC,EAAGzB,EAAQsB,eAARG,IAAeA,OAAfA,EAAAA,EAAiB/D,oBAAY8D,IAAAA,EAAAA,EAAI,EACpDhB,EAAmB,SAACmB,GAAI,OAAMA,IAASD,EAAaC,EAAOD,CAAU,EACtE,EAEDH,IAEA,IAAMK,EAAW,IAAIC,eAAe,WAClCN,GACF,GAGA,OADAK,EAASE,QAAQ9B,EAAQsB,SAClB,WAAA,OAAMM,EAASG,YAAY,CAdZ,CAevB,EAAE,IAGHV,EAAgB,WACVzB,GAAgD,iBAA1BA,EAAYnC,WACpCmD,EAAkBhB,EAAYnC,YAE/B,CAACmC,eAAAA,EAAanC,YAEjB4D,EAAgB,WAAK,IAAAW,EAAAC,EACbC,EAA6C,QAArCF,EAAuB,QAAvBC,EAAG/B,EAAaoB,eAAbW,IAAoBA,OAApBA,EAAAA,EAAsBE,oBAAYH,IAAAA,EAAAA,EAAI,EACnDE,EAAW,GAAKA,IAAalB,GAC/BC,EAAgBiB,EAEnB,EAAE,CAAC/F,EAAQrB,OAAQkG,IAEpB,IAAMoB,EAAWvC,EAAQ,WAAK,IAAAwC,EACtBC,EAAazG,EAAMvB,MAAMQ,OAC/B,GAAmB,IAAfwH,EACF,MAAO,CAAEC,MAAO,EAAGC,KAAO,EAAEC,gBAAiB,EAAGC,mBAAoB,GAGtE,IAAMC,EAAqB/C,GAAgD,iBAA1BA,EAAYnC,UAAyBmC,EAAYnC,UAAYkD,EACxGiC,EAAqBzB,KAAKC,IAAI,GAA+BiB,QAA5BA,EAACzC,aAAAA,EAAAA,EAAaiD,sBAAcR,IAAAA,EAAAA,EAAI9B,GAAmBS,GACpF8B,EAAoB3B,KAAKC,IAAI,EAAGuB,EAAqB3B,GACrDuB,EAAQpB,KAAKC,IAAI,EAAGD,KAAK4B,MAAMD,EAAoBvG,GAAa2E,GAChE8B,EAAe7B,KAAK8B,KAAKL,EAAqBrG,GAC9CiG,EAAMrB,KAAK+B,IAAIZ,EAAa,EAAGC,EAAQS,EAA0B,EAAX9B,GAK5D,MAAO,CAAEqB,MAAAA,EAAOC,IAAAA,EAAKC,gBAHGF,EAAQhG,EAGMmG,mBAFXvB,KAAKC,IAAI,GAAIkB,EAAaE,EAAM,GAAKjG,GAGjE,EAAE,CAACV,EAAMvB,MAAMQ,OAAQkG,EAAcE,EAAU3E,EAAWqD,EAAae,EAAgBJ,IAElF4C,EAAef,EAASI,KAAOJ,EAASG,MAAQ1G,EAAMvB,MAAM8I,MAAMhB,EAASG,MAAOH,EAASI,IAAM,GAAK,GAE5G,OACE7F,EAAC0G,EAAyB,CAACxG,UAAWC,EAAQC,KAAIC,SAChDL,EAACM,EACC,CAAAqG,IAAKtD,EACLnD,UAAWC,EAAQI,gBACnBC,SAAU,SAACC,GACT,IAIyDmG,EAJnDjG,EAAIF,EAAEG,cACPqC,GAAgD,iBAA1BA,EAAYnC,WACrCmD,EAAkBtD,EAAEG,WAElBH,EAAEE,aAAeF,EAAEG,UAAYH,EAAEI,cAAgB,KACpC,QAAf6F,EAAA1H,EAAM8B,iBAAS,IAAA4F,GAAfA,EAAA3F,KAAA/B,GAEH,EAAAmB,SAEDa,EAACC,EAAM,CAAAC,KAAK,QAAQlB,UAAWC,EAAQkB,gBACrCrB,EAACsB,EAAU,CAAApB,UAAWC,EAAQoB,YAC5BlB,SAAAL,EAACwB,EAAQ,CAACmF,IAAKpD,EACZlD,SAAAb,EAAQjB,IAAI,SAACoB,GAAG,IAAAkH,EAAAC,EAAA,OACf9G,EAAC2B,EAAS,CAERzB,UAAWC,EAAQyB,gBACnBC,MAAOlC,EAAIkC,MACXC,GAAI,CACFvE,SAAUoC,EAAIpC,SACdJ,MAAOJ,EAAe4C,EAAK1C,GAC3B8E,SAAmB,QAAX8E,EAAElH,EAAIxC,aAAK0J,IAAAA,EAAAA,EAAK5J,EAAY,GAAK0C,EAAIvC,KAAO,OAAIF,GAGzDmD,SAAS,QAATyG,EAAAnH,EAAIlB,aAAK,IAAAqI,EAAAA,EAAI9I,OAAO2B,EAAI9B,QATpBG,OAAO2B,EAAI9B,OAWnB,OAGLqD,EAACc,aACEyD,EAASK,gBAAkB,EAC1B9F,EAACwB,GAAStB,UAAWC,EAAQ4G,wBAC3B/G,EAAC2B,GACCqF,QAASxH,EAAQrB,OACjB+B,UAAWC,EAAQ8G,gBACnBnF,GAAI,CAAEO,OAAQoD,EAASK,gBAAiBtD,QAAS,EAAG0E,OAAQ,OAG9D,KAEHV,EAAajI,IAAI,SAACd,EAAK0J,GAAU,IAAAC,EAC1B1J,EAAQ+H,EAASG,MAAQuB,EACzBjF,EAAoC,QAA9BkF,EAAGpI,EAAOmD,SAAS1E,EAAKC,UAAM0J,IAAAA,EAAAA,EAAI1J,EAE9C,OACEsC,EAACwB,GAAsBY,OAAK,EAACN,GAAI,CAAEO,OAAQzC,GAAWS,SACnDb,EAAQjB,IAAI,SAACoB,GAAG,IAAA0H,EAAA,OACfrH,EAAC2B,EAEC,CAAAzB,UAAWC,EAAQoC,cACnBV,MAAOlC,EAAIkC,MACXC,GAAI,CACFO,OAAQzC,EACR4C,QAAS1C,EACTiC,SAAmB,QAAXsF,EAAE1H,EAAIxC,aAAKkK,IAAAA,EAAAA,EAAKpK,EAAY,GAAK0C,EAAIvC,KAAO,OAAIF,GACzDmD,SAEDL,EAACyC,EAAG,CAACvC,UAAWC,EAAQuC,iBAAmBrC,SAAA7C,EAAgBmC,EAAKlC,EAAKC,SAAaJ,OAT1EU,OAAOkE,GAAO,KAAA5E,OAAIU,OAAO2B,EAAI9B,QAWxC,IAdYqE,EAiBlB,GAEAuD,EAASM,mBAAqB,EAC7B/F,EAACwB,EAAS,CAAAtB,UAAWC,EAAQ4G,eAC3B1G,SAAAL,EAAC2B,EAAS,CACRqF,QAASxH,EAAQrB,OACjB+B,UAAWC,EAAQ8G,gBACnBnF,GAAI,CAAEO,OAAQoD,EAASM,mBAAoBvD,QAAS,EAAG0E,OAAQ,OAGjE,cAMf,CAEH,CAI8BI,CAA6BtI,GASzD,OAPwC,SAACE,GAAS,IAAAqI,EAAAC,EAC1CC,UAAcF,EAAuBC,QAAvBA,EAAGtI,EAAMuI,0BAAcD,EAAAA,EAAIxI,EAAOyI,sBAAc,IAAAF,EAAAA,EAAI,SACxE,OACSvH,EADc,gBAAnByH,EACM7E,EAEF3D,EAFqBH,EAAKI,CAAAA,EAAAA,GAGnC,CAEH,CAEM,SAAUwI,EAAyBC,GAyBvC,OAxBsD,SAACzI,GAAS,IAAA0I,EAAAC,EAAAC,EACxDC,EAAgBC,EAAWC,EAAAC,IAAAC,EAAC,SAAAC,IAAA,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,OAAAX,IAAAY,EAAA,SAAAC,GAAA,cAAAA,EAAAC,GAAA,KAAA,EAAA,GACT,mBAAnB9J,EAAM+J,SAA6B,CAAAF,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAG,EAAA,GAAA,KAAA,EAAA,WAAAb,EAClCnJ,EAAMiK,kBAAU,IAAAd,GAAhBA,EAAkBe,QAAO,CAAAL,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAG,EAAA,GAAA,KAAA,EAAA,IAC1BhK,EAAMmK,QAAO,CAAAN,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAG,EAAA,GAAA,KAAA,EAIe,OAF1BP,EAAoC,QAAzBL,EAAmB,QAAnBC,EAAGrJ,EAAMiK,kBAANZ,IAAgBA,OAAhBA,EAAAA,EAAkBe,YAAIhB,IAAAA,EAAAA,EAAI,EACxCM,EAA4C,QAA7BJ,EAAmB,QAAnBC,EAAGvJ,EAAMiK,kBAANV,IAAgBA,OAAhBA,EAAAA,EAAkBc,gBAAQf,IAAAA,EAAAA,EAAI,GAChDK,EAAWF,EAAc,EAACI,EAAAC,EAAA,UAAAN,EAC1BxJ,EAAMsK,oBAAY,IAAAd,OAAA,EAAlBA,EAAAzH,KAAA/B,EAAqB2J,EAAUD,GAAgB,KAAA,EAAA,OAAAG,EAAAG,EAAA,GAAA,EAAAd,MACpD,CAAClJ,EAAM+J,iBAAQrB,EAAE1I,EAAMiK,kBAAU,IAAAvB,OAAA,EAAhBA,EAAkBwB,QAAyBvB,QAAlBA,EAAE3I,EAAMiK,sBAAUtB,SAAhBA,EAAkByB,KAAsB,QAAlBxB,EAAE5I,EAAMiK,kBAAU,IAAArB,OAAA,EAAhBA,EAAkByB,SAAUrK,EAAMmK,QAASnK,EAAMsK,eAExH,OACExJ,EAAC2H,EAAa,CACZhK,MAAOuB,EAAMvB,MACb6B,QAASN,EAAMM,QACfH,QAASH,EAAMG,QACfoI,eAAgBvI,EAAMuI,eACtBrE,kBAAmBlE,EAAMkE,kBACzBpC,UAA8B,mBAAnB9B,EAAM+J,SAAgClB,OAAgB7K,GAGtE,CAGH,CAIO,IAAMuM,EAAkB,CAC7BrJ,KAAM,oBACNG,gBAAiB,+BACjBc,MAAO,qBACPE,YAAa,2BACbK,gBAAiB,+BACjBW,cAAe,6BACfwE,eAAgB,8BAChBE,gBAAiB,+BACjBvE,iBAAkB,iCAEdvC,EAAUsJ,EAEVxJ,EAAuByJ,EAAOjH,EAAPiH,CAAY,SAAAC,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAC/CC,SAAU,WACV3M,MAAO,OACPkF,OAAQ,OACR0H,SAAU,UAAQ,IAAAzM,OACb6C,EAAQI,iBAAoB,CAC/BuJ,SAAU,WACVE,MAAO,EACPC,UAAW,aACZ3M,OACI6C,EAAQkB,OAAU,CACrB6I,YAAa,QACb/M,MAAO,aACRG,OACI6C,EAAQoB,aAAgB,CAC3BuI,SAAU,SACVK,IAAK,EACLC,OAAQ,EACRC,gBAAiBT,EAAMU,QAAQC,WAAWC,MAC1CC,UAASnN,aAAAA,OAAsC,SAAvBsM,EAAMU,QAAQI,KAAkB,kBAAoB,yCAC5E,YAAa,CACXC,QAAS,KACTb,SAAU,WACVE,MAAO,EACPK,gBAAwC,SAAvBT,EAAMU,QAAQI,KAAkB,yBAA2B,mBAC5EN,QAAQ,SAEX9M,OACI6C,EAAQyB,iBAAoB,CAC/BgJ,WAAY,IACZC,WAAYjB,EAAMkB,QAAQ,KAC1BC,cAAenB,EAAMkB,QAAQ,KAC7Bf,SAAU,eACXzM,OACI6C,EAAQoC,eAAkB,CAC7BwH,SAAU,eACXzM,OACI6C,EAAQuC,kBAAqB,CAChCqH,SAAU,SACViB,aAAc,WACdC,WAAY,UACb,GAGGvE,EAA4BgD,EAAOjH,EAAPiH,CAAY,SAAAwB,GAAA,IAAGtB,EAAKsB,EAALtB,MAAK,OAAAC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACpDC,SAAU,WACV3M,MAAO,OACPkF,OAAQ,OACR0H,SAAU,SACVoB,UAAW,cAAY,IAAA7N,OAClB6C,EAAQI,iBAAoB,CAC/BuJ,SAAU,WACVE,MAAO,EACPC,UAAW,aACZ3M,OACI6C,EAAQkB,OAAU,CACrB6I,YAAa,QACb/M,MAAO,aACRG,OACI6C,EAAQoB,aAAgB,CAC3BuI,SAAU,SACVK,IAAK,EACLC,OAAQ,EACRC,gBAAiBT,EAAMU,QAAQC,WAAWC,MAC1CC,UAASnN,aAAAA,OAAsC,SAAvBsM,EAAMU,QAAQI,KAAkB,kBAAoB,yCAC5E,YAAa,CACXC,QAAS,KACTb,SAAU,WACVE,MAAO,EACPK,gBAAwC,SAAvBT,EAAMU,QAAQI,KAAkB,yBAA2B,mBAC5EN,QAAQ,SAEX9M,OACI6C,EAAQyB,iBAAoB,CAC/BgJ,WAAY,IACZC,WAAYjB,EAAMkB,QAAQ,KAC1BC,cAAenB,EAAMkB,QAAQ,KAC7Bf,SAAU,eACXzM,OACI6C,EAAQoC,eAAkB,CAC7BwH,SAAU,eACXzM,OACI6C,EAAQuC,kBAAqB,CAChCqH,SAAU,SACViB,aAAc,WACdC,WAAY,UACb"}

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/types/filter-bar/index.create.d.ts

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

package/dist/types/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

@@ -1,16 +1,43 @@
-import { ComponentType, FC } from 'react';
-import { DataSurfaceViewMode } from './types';
-import { IViewGridConfig, IViewGridProps } from './view-grid';
+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[];
-    totalValue?: number;
+    /** 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?: any;
-    ListComponent?: ComponentType<any>;
+    listConfig?: IViewListConfig<T>;
+    ListComponent?: ComponentType<IViewListProps<T>>;
     gridConfig?: IViewGridConfig<T>;
     GridComponent?: ComponentType<IViewGridProps<T>>;
 }

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

@@ -1 +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

@@ -1,7 +1,15 @@
-import createDataSurface from './index.create';
+/// <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

@@ -1,5 +1,32 @@
-import { RenderStrategyRule } from "./view-grid.types";
 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
@@ -15,13 +42,13 @@ export type DataSurfaceViewMode = keyof typeof DataSurfaceViewMode;
  * - `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 DataSurfaceLoadingType: {
+export declare const LoadingModeRule: {
     readonly pagination: "pagination";
     readonly infiniteScroll: "infiniteScroll";
 };
-export type DataSurfaceLoadingType = keyof typeof DataSurfaceLoadingType;
+export type LoadingModeRule = keyof typeof LoadingModeRule;
 export type TDataSurfaceState = {
     viewMode?: DataSurfaceViewMode;
-    loadingType?: DataSurfaceLoadingType;
+    loadMode?: LoadingModeRule;
     renderStrategy?: RenderStrategyRule;
 };

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

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import type { BoxProps } from '@mui/material';
+export declare const PanelLoading: FC<BoxProps>;
+export declare const PanelError: FC<{
+    error: string;
+}>;
+export declare const PanelNoData: FC;
+export declare const PanelWaiting: FC;
+export declare const PanelMissingConfig: FC;
+export declare const PanelLoadMore: FC;
+export interface IPanelInfiniteScrollFooterProps {
+    loading?: boolean;
+    hasNext?: boolean;
+    currentCount: number;
+    total?: number;
+}
+export declare const PanelInfiniteScrollFooter: FC<IPanelInfiniteScrollFooterProps>;
+export interface IPanelPaginationFooterProps {
+    page: number;
+    pageSize: number;
+    total?: number;
+    hasNext?: boolean;
+    hasPrev?: boolean;
+    loading?: boolean;
+    onPrevPage?: () => void;
+    onNextPage?: () => void;
+    onPageJump?: (page: number) => void;
+}
+export declare const PanelPaginationFooter: FC<IPanelPaginationFooterProps>;

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

@@ -1,14 +1,6 @@
-import { ComponentType, FC } from 'react';
-import { TGetterId } from './types';
-import { RenderStrategyRule } from './view-grid.types';
+import type { ComponentType, FC } from 'react';
+import type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types';
 import type { IViewGridItemProps, TGridSizes } from './view-grid.types';
-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;
-};
 export interface IViewGridBase<T> {
     gap?: number;
     sizes?: TGridSizes;
@@ -22,6 +14,8 @@ export interface IViewGridBase<T> {
     renderStrategy?: RenderStrategyRule;
     Component?: ComponentType<IViewGridItemProps<T>>;
     virtualizedConfig?: TVirtualizedConfig;
+    /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */
+    onNearEnd?: () => void;
 }
 export interface IViewGridConfig<T> extends IViewGridBase<T> {
     getterId: TGetterId<T>;
@@ -29,7 +23,15 @@ export interface IViewGridConfig<T> extends IViewGridBase<T> {
 export interface IViewGridProps<T> extends IViewGridBase<T> {
     value: T[];
 }
+export interface IViewGridLoadingProps<T> extends IViewGridBase<T> {
+    value: T[];
+    loadMode: LoadingModeRule;
+    loading?: boolean;
+    pagination?: TPagination;
+    onPageChange?: (page: number, pageSize: number) => void | Promise<void>;
+}
 export declare function createViewGrid<T>(config: IViewGridConfig<T>): FC<IViewGridProps<T>>;
+export declare function createViewGridLoading<T>(GridComponent: ComponentType<IViewGridProps<T>>): FC<IViewGridLoadingProps<T>>;
 export default createViewGrid;
 export declare const viewGridClasses: {
     root: string;

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

@@ -1,15 +1,5 @@
 export type TGridSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type TGridSizes = Partial<Record<TGridSize, 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;
 /**
  * Props received by the custom render function for each card in Grid view.
  * @template T - The shape of a single data row object.

package/dist/types/lab/data-surface/view-grid.units.d.ts

@@ -1,8 +1,8 @@
-import { IViewGridItemProps, TGridSizes } from './view-grid.types';
-import { FC } from 'react';
+import type { FC } from 'react';
+import type { IViewGridItemProps, TGridSizes } from './view-grid.types';
 export declare const DEFAULT_GRID_GAP_PX = 8;
 export declare const getMaxGridGap: (...gap: (number | undefined)[]) => number;
-export declare const DEFAULT_GRID_ITEM_MAX_HEIGHT = 200;
+export declare const DEFAULT_GRID_ITEM_MAX_HEIGHT = 120;
 export declare const getMaxGridItemHeight: (...height: (number | undefined)[]) => number;
 export declare const DEFAULT_GRID_ITEM_SIZES: TGridSizes;
 export declare const getGridItemSizes: (sizes?: TGridSizes) => TGridSizes;

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

@@ -0,0 +1,45 @@
+import { ListDensity } from './view-list.types';
+import type { ComponentType, FC } from 'react';
+import type { TListColumns } from './view-list.types';
+import type { TGetterId, LoadingModeRule, TPagination, TVirtualizedConfig, RenderStrategyRule } from './types';
+export interface IViewListBase<T> {
+    columns?: TListColumns<T>;
+    density?: ListDensity;
+    /**
+     * 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)
+     * @default 'normal'
+     */
+    renderStrategy?: RenderStrategyRule;
+    virtualizedConfig?: TVirtualizedConfig;
+    /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */
+    onNearEnd?: () => void;
+}
+export interface IViewListConfig<T> extends IViewListBase<T> {
+    getterId: TGetterId<T>;
+}
+export interface IViewListProps<T> extends IViewListBase<T> {
+    value: T[];
+}
+export interface IViewListLoadingProps<T> extends IViewListBase<T> {
+    value: T[];
+    loadMode: LoadingModeRule;
+    loading?: boolean;
+    pagination?: TPagination;
+    onPageChange?: (page: number, pageSize: number) => void | Promise<void>;
+}
+export declare function createViewList<T>(config: IViewListConfig<T>): FC<IViewListProps<T>>;
+export declare function createViewListLoading<T>(ListComponent: ComponentType<IViewListProps<T>>): FC<IViewListLoadingProps<T>>;
+export default createViewList;
+export declare const viewListClasses: {
+    root: string;
+    scrollContainer: string;
+    table: string;
+    tableHeader: string;
+    tableHeaderCell: string;
+    tableBodyCell: string;
+    tableSpacerRow: string;
+    tableSpacerCell: string;
+    tableCellContent: string;
+};

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

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+/**
+ * Props received by the custom render function for each row in List view.
+ * @template T - The shape of a single data row object.
+ */
+export interface IViewListItemProps<T> {
+    /** The data object for this list row. */
+    value: T;
+    /** Zero-based position of this item in the data array. */
+    index: number;
+}
+/** Horizontal alignment for list cell content. */
+export type TListAlign = 'left' | 'right' | 'center';
+/**
+ * Context passed to a column's render callback.
+ * @template T - The shape of a single data row object.
+ */
+export interface IListCellParams<T> {
+    /** Resolved cell value (after valueGetter if provided). */
+    value: any;
+    /** The full row object. */
+    row: T;
+    /** Zero-based row index. */
+    index: number;
+    /** The column field key this cell belongs to. */
+    field: keyof T;
+}
+/**
+ * Definition of a single column in List view.
+ * @template T - The shape of a single data row object.
+ */
+export interface TListColumn<T> {
+    /** Key of the row object this column maps to. */
+    field: keyof T;
+    /** Column header label shown in the header. */
+    label?: string;
+    /** Explicit column width. Accepts px number or CSS string (e.g. '120px', '20%'). */
+    width?: number | string;
+    /** Minimum column width in pixels. */
+    minWidth?: number;
+    /** Flex grow ratio used when no explicit width is set. */
+    flex?: number;
+    /** Horizontal alignment of the cell content. */
+    align?: TListAlign;
+    /** Custom cell render function - receives CellParams, returns ReactNode. */
+    renderCell?: (params: IListCellParams<T>) => ReactNode;
+    /** Derives a value from the row before it is passed to the render step. */
+    valueGetter?: (row: T, index: number) => any;
+}
+export type TListColumns<T> = Partial<Record<keyof T, Omit<TListColumn<T>, 'field'>>>;
+/**
+ * Row density preset for List view.
+ * Controls the row height and cell padding.
+ */
+export declare const ListDensity: {
+    readonly compact: "compact";
+    readonly standard: "standard";
+    readonly comfortable: "comfortable";
+};
+export type ListDensity = keyof typeof ListDensity;

package/dist/types/lab/data-surface/view-list.units.d.ts

@@ -0,0 +1,4 @@
+import { ListDensity } from './view-list.types';
+export declare const LIST_HEADER_HEIGHT = 48;
+export declare const LIST_ROW_HEIGHT_BY_DENSITY: Record<ListDensity, number>;
+export declare const LIST_CELL_PADDING_BY_DENSITY: Record<ListDensity, string>;

package/dist/types/lab/data-surface/view-switch-transition.units.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, ReactElement } from 'react';
+import type { CSSProperties, FC, ReactElement } from 'react';
 export declare const viewSwitchTransitionClasses: {
     root: string;
     viewWrapper: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinocollab-core",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Dinocollab core - libraries for building collaborative applications with React 18",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,6 +32,9 @@
       "filter-bar": [
         "./dist/types/filter-bar/index.d.ts"
       ],
+      "lab/data-surface": [
+        "./dist/types/lab/data-surface/index.d.ts"
+      ],
       "data-view": [
         "./dist/types/data-view/index.d.ts"
       ],
@@ -81,6 +84,10 @@
       "import": "./dist/filter-bar/index.js",
       "types": "./dist/types/filter-bar/index.d.ts"
     },
+    "./lab/data-surface": {
+      "import": "./dist/lab/data-surface/index.js",
+      "types": "./dist/types/lab/data-surface/index.d.ts"
+    },
     "./data-view": {
       "import": "./dist/data-view/index.js",
       "types": "./dist/types/data-view/index.d.ts"

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

@@ -1 +0,0 @@
-export {};