dinocollab-core 2.1.51 → 2.1.52

package/dist/src/data-view/create.active-filters-panel.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,inherits as t,createClass as i,classCallCheck as r,callSuper as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,Fragment as l,jsxs as o}from"react/jsx-runtime";import{Component as c,Fragment as s}from"react";import{styled as d,Box as u,Collapse as m,Typography as v,Chip as f}from"@mui/material";import{createFilterStore as p}from"./filter-store.js";import{ClearAllButton as h,mapSortConfigs as x}from"./ui.units.js";import{mapDataViewContext as C}from"./context.js";import{formatDatetime as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{mapDateLogicText as S}from"./helpers.js";var w={root:"ActiveFiltersPanel-root",content:"ActiveFiltersPanel-content",item:"ActiveFiltersPanel-item",itemContent:"ActiveFiltersPanel-itemContent",itemChip:"ActiveFiltersPanel-itemChip",removeButton:"ActiveFiltersPanel-removeButton",overlay:"ActiveFiltersPanel-overlay"};function b(){return function(){function d(t){var i;return r(this,d),i=a(this,d,[t]),e(i,"handleAnimationExited",function(){i.setState({isClosing:!0})}),e(i,"renderItems",function(e){var t;return o(u,{className:w.item,children:[o(v,{variant:"caption",sx:{fontWeight:700},children:[e.label||(null===(t=e.field)||void 0===t?void 0:t.toString()),":"]}),n(u,{className:w.itemContent,children:e.items.map(function(t){return n(f,{clickable:!0,size:"small",label:t.label||t.value,className:w.itemChip,onDelete:function(){e.isQuickSearch?i.removeQuickSearch(t):e.field&&i.removeFilter(e.field,t)}},t.value)})})]})}),e(i,"renderFilters",function(){var e,t=(null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.filter)||{},r=Object.keys(t);return 0===r.length?n(l,{}):r.map(function(e){var r,a=(null!==(r=t[e])&&void 0!==r?r:[]).reduce(function(e,t){var i,r,a,n,l=t.label||(null===(i=t.value)||void 0===i?void 0:i.toString());"date"===t.type&&t.dateLogic&&(l="".concat(S[t.dateLogic]," ").concat(g(null!==(a=null===(n=t.value)||void 0===n?void 0:n.toString())&&void 0!==a?a:"","style2")));return t.value&&e.push({value:null===(r=t.value)||void 0===r?void 0:r.toString(),label:l}),e},[]);return n(s,{children:i.renderItems({field:e,label:e.toString(),items:a})},e.toString())})}),e(i,"renderSort",function(){var e,t,r=null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.sort;if(!r)return n(l,{});var a=null===(t=i.dataViewContext.filterBarConfigs.fields)||void 0===t?void 0:t[r.field],c=(null==a?void 0:a.label)||r.field.toString(),s=x[r.direction];return o(u,{className:w.item,children:[n(v,{variant:"caption",sx:{fontWeight:700},children:"Sort:"}),n(f,{clickable:!0,size:"small",label:o(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:[n("span",{children:c}),s.icon]}),className:w.itemChip,onClick:i.toggleSortDirection,onDelete:function(){return i.removeSort()},title:"".concat(c," - ").concat(s.title)})]})}),e(i,"removeFilter",function(e,t){var r=p(i.dataViewContext.filterState).removeFilterItem(e,t.value,{reason:"filter"});i.dataViewContext.onFilterStateChange(r.build())}),e(i,"removeQuickSearch",function(e){var t=p(i.dataViewContext.filterState).removeQuickSearchItem(e.value,{reason:"quickSearch"});i.dataViewContext.onFilterStateChange(t.build())}),e(i,"removeSort",function(){var e=p(i.dataViewContext.filterState).removeSort({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())}),e(i,"toggleSortDirection",function(){var e=p(i.dataViewContext.filterState).toggleSortDirection({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())}),e(i,"handleClearAll",function(){var e=i.dataViewContext.filterBarConfigs.defaultValue||{},t=p(i.dataViewContext.filterState,e).reset();i.dataViewContext.onFilterStateChange(t.build())}),i.state={data:null,isClosing:!1},i}return t(d,c),i(d,[{key:"render",value:function(){var e=this;return C(function(t){if(e.dataViewContext=t,!e.dataViewContext)return n(l,{});var i=e.dataViewContext.filterBarConfigs.defaultValue,r=p(e.dataViewContext.filterState,i).isEmpty();return n(m,{in:!r,timeout:300,unmountOnExit:!0,orientation:"vertical",onExited:e.handleAnimationExited,children:o(k,{className:w.root,children:[o(u,{className:w.content,children:[e.renderSort(),e.renderQuickSearch(),e.renderFilters(),!r&&n(h,{className:w.removeButton,onClick:e.handleClearAll})]}),e.props.loading&&n(u,{className:w.overlay})]})})})}},{key:"renderQuickSearch",value:function(){var e,t=(null===(e=this.dataViewContext.filterState)||void 0===e?void 0:e.quickSearch)||[],i=(Array.isArray(t)?t:[t]).map(function(e){return{value:e}});return i&&0!==i.length?this.renderItems({label:"Quick search",items:i,isQuickSearch:!0}):n(l,{})}}])}()}var k=d(u)(e(e(e(e(e({position:"relative"},".".concat(w.content),{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px"}),".".concat(w.item),{display:"flex",flexWrap:"wrap",border:"dashed 1px var(--color-divider, rgba(145 160 170 / 20%))",borderRadius:"4px",alignItems:"center",padding:"6px 8px",gap:"8px"}),".".concat(w.itemContent),{display:"flex",flexWrap:"wrap",gap:"4px"}),".".concat(w.itemChip),{borderRadius:"4px",height:"100%","& .MuiChip-label":{overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"normal",textOverflow:"clip"}}),".".concat(w.overlay),{position:"absolute",top:0,left:0,width:"100%",height:"100%",backdropFilter:"blur(1px)"}));export{w as activeFiltersPanelClasses,b as default};
+import{defineProperty as e,inherits as t,createClass as i,classCallCheck as a,callSuper as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,Fragment as l,jsxs as o}from"react/jsx-runtime";import{Component as c,Fragment as s}from"react";import{styled as d,Box as u,Collapse as p,Typography as v,Chip as m}from"@mui/material";import{createFilterStore as f}from"./filter-store.js";import{ClearAllButton as h,mapSortConfigs as g}from"./ui.units.js";import{mapDataViewContext as C}from"./context.js";import{formatDatetime as x}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{mapDateLogicText as S}from"./helpers.js";var b={root:"ActiveFiltersPanel-root",content:"ActiveFiltersPanel-content",item:"ActiveFiltersPanel-item",itemContent:"ActiveFiltersPanel-itemContent",itemChip:"ActiveFiltersPanel-itemChip",removeButton:"ActiveFiltersPanel-removeButton",overlay:"ActiveFiltersPanel-overlay"};function w(){return function(){function d(t){var i;return a(this,d),i=r(this,d,[t]),e(i,"handleAnimationExited",function(){i.setState({isClosing:!0})}),e(i,"renderItems",function(e){var t;return o(u,{className:b.item,children:[o(v,{variant:"caption",sx:{fontWeight:700},children:[e.label||(null===(t=e.field)||void 0===t?void 0:t.toString()),":"]}),n(u,{className:b.itemContent,children:e.items.map(function(t){return n(m,{clickable:!0,size:"small",label:t.label||t.value,className:b.itemChip,onDelete:function(){e.isQuickSearch?i.removeQuickSearch(t):e.field&&i.removeFilter(e.field,t)}},t.value)})})]})}),e(i,"renderFilters",function(){var e,t=(null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.filter)||{},a=Object.keys(t);return 0===a.length?n(l,{}):a.map(function(e){var a,r=(null!==(a=t[e])&&void 0!==a?a:[]).reduce(function(e,t){var i,a,r,n,l=t.label||(null===(i=t.value)||void 0===i?void 0:i.toString());"date"===t.type&&t.dateLogic&&(l="".concat(S[t.dateLogic]," ").concat(x(null!==(r=null===(n=t.value)||void 0===n?void 0:n.toString())&&void 0!==r?r:"","style2")));return t.value&&e.push({value:null===(a=t.value)||void 0===a?void 0:a.toString(),label:l}),e},[]);return n(s,{children:i.renderItems({field:e,label:e.toString(),items:r})},e.toString())})}),e(i,"renderPagination",function(){var e,t,a,r=null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.pagination,c=null===(t=i.dataViewContext.filterBarConfigs.defaultValue)||void 0===t?void 0:t.pagination;if(!r||!r.page&&!r.pageSize)return n(l,{});if(c&&(r.page===c.page&&r.pageSize===c.pageSize))return n(l,{});var s=null!==(a=r.page)&&void 0!==a?a:1,d=r.pageSize;if(1===s&&!d)return n(l,{});var p=[];return s>1&&p.push("Page ".concat(s)),d&&p.push("".concat(d," items/page")),o(u,{className:b.item,children:[n(v,{variant:"caption",sx:{fontWeight:700},children:"Pagination:"}),n(m,{size:"small",label:p.join(", "),className:b.itemChip})]})}),e(i,"renderSort",function(){var e,t,a=null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.sort;if(!a)return n(l,{});var r=null===(t=i.dataViewContext.filterBarConfigs.fields)||void 0===t?void 0:t[a.field],c=(null==r?void 0:r.label)||a.field.toString(),s=g[a.direction];return o(u,{className:b.item,children:[n(v,{variant:"caption",sx:{fontWeight:700},children:"Sort:"}),n(m,{clickable:!0,size:"small",label:o(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:[n("span",{children:c}),s.icon]}),className:b.itemChip,onClick:i.toggleSortDirection,onDelete:function(){return i.removeSort()},title:"".concat(c," - ").concat(s.title)})]})}),e(i,"removeFilter",function(e,t){var a=f(i.dataViewContext.filterState).removeFilterItem(e,t.value,{reason:"filter"});i.dataViewContext.onFilterStateChange(a.build())}),e(i,"removeQuickSearch",function(e){var t=f(i.dataViewContext.filterState).removeQuickSearchItem(e.value,{reason:"quickSearch"});i.dataViewContext.onFilterStateChange(t.build())}),e(i,"removeSort",function(){var e=f(i.dataViewContext.filterState).removeSort({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())}),e(i,"toggleSortDirection",function(){var e=f(i.dataViewContext.filterState).toggleSortDirection({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())}),e(i,"handleClearAll",function(){var e=i.dataViewContext.filterBarConfigs.defaultValue||{},t=f(i.dataViewContext.filterState,e).reset();i.dataViewContext.onFilterStateChange(t.build())}),i.state={data:null,isClosing:!1},i}return t(d,c),i(d,[{key:"render",value:function(){var e=this;return C(function(t){if(e.dataViewContext=t,!e.dataViewContext)return n(l,{});var i=e.dataViewContext.filterBarConfigs.defaultValue,a=f(e.dataViewContext.filterState,i).isEmpty();return n(p,{in:!a,timeout:300,unmountOnExit:!0,orientation:"vertical",onExited:e.handleAnimationExited,children:o(V,{className:b.root,children:[o(u,{className:b.content,children:[!1!==e.props.enableSort&&e.renderSort(),!1!==e.props.enableQuickSearch&&e.renderQuickSearch(),!1!==e.props.enableFilter&&e.renderFilters(),!1!==e.props.enablePagination&&e.renderPagination(),!a&&n(h,{className:b.removeButton,onClick:e.handleClearAll})]}),e.props.loading&&n(u,{className:b.overlay})]})})})}},{key:"renderQuickSearch",value:function(){var e,t=(null===(e=this.dataViewContext.filterState)||void 0===e?void 0:e.quickSearch)||[],i=(Array.isArray(t)?t:[t]).map(function(e){return{value:e}});return i&&0!==i.length?this.renderItems({label:"Quick search",items:i,isQuickSearch:!0}):n(l,{})}}])}()}var V=d(u)(e(e(e(e(e({position:"relative"},".".concat(b.content),{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px"}),".".concat(b.item),{display:"flex",flexWrap:"wrap",border:"dashed 1px var(--color-divider, rgba(145 160 170 / 20%))",borderRadius:"4px",alignItems:"center",padding:"6px 8px",gap:"8px"}),".".concat(b.itemContent),{display:"flex",flexWrap:"wrap",gap:"4px"}),".".concat(b.itemChip),{borderRadius:"4px",height:"100%","& .MuiChip-label":{overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"normal",textOverflow:"clip"}}),".".concat(b.overlay),{position:"absolute",top:0,left:0,width:"100%",height:"100%",backdropFilter:"blur(1px)"}));export{b as activeFiltersPanelClasses,w as default};
 //# sourceMappingURL=create.active-filters-panel.js.map

package/dist/src/data-view/create.active-filters-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.active-filters-panel.js","sources":["../../../src/data-view/create.active-filters-panel.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { Box, Chip, Collapse, styled, Typography } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { ClearAllButton, mapSortConfigs } from './ui.units'\r\nimport { IDataViewContext, mapDataViewContext } from './context'\r\nimport { IFilterItem, IFilterMap, IFilterState, IItemBase } from './types'\r\nimport { formatDatetime } from '../utils'\r\nimport { mapDateLogicText } from './helpers'\r\n\r\nexport const activeFiltersPanelClasses = {\r\n  root: 'ActiveFiltersPanel-root',\r\n  content: 'ActiveFiltersPanel-content',\r\n  item: 'ActiveFiltersPanel-item',\r\n  itemContent: 'ActiveFiltersPanel-itemContent',\r\n  itemChip: 'ActiveFiltersPanel-itemChip',\r\n  removeButton: 'ActiveFiltersPanel-removeButton',\r\n  overlay: 'ActiveFiltersPanel-overlay'\r\n}\r\n\r\ninterface IRenderItemsParams<T> {\r\n  field?: keyof T\r\n  label?: string\r\n  items: IItemBase[]\r\n  isQuickSearch?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelProps {\r\n  loading?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelState<T> {\r\n  data: IFilterState<T> | null\r\n  isClosing: boolean\r\n}\r\n\r\nfunction createActiveFiltersPanel<T>(): ComponentType<IActiveFiltersPanelProps> {\r\n  class ActiveFiltersPanel extends Component<IActiveFiltersPanelProps, IActiveFiltersPanelState<T>> {\r\n    declare dataViewContext: IDataViewContext<T>\r\n\r\n    constructor(props: IActiveFiltersPanelProps) {\r\n      super(props)\r\n      this.state = {\r\n        data: null,\r\n        isClosing: false\r\n      }\r\n    }\r\n\r\n    // Handle animation completion\r\n    private handleAnimationExited = () => {\r\n      this.setState({ isClosing: true })\r\n    }\r\n\r\n    render() {\r\n      return mapDataViewContext((context) => {\r\n        this.dataViewContext = context\r\n        if (!this.dataViewContext) return <></>\r\n        const { defaultValue } = this.dataViewContext.filterBarConfigs\r\n        const isEmpty = createFilterStore(this.dataViewContext.filterState, defaultValue).isEmpty()\r\n        return (\r\n          <Collapse in={!isEmpty} timeout={300} unmountOnExit orientation='vertical' onExited={this.handleAnimationExited}>\r\n            <Wrap className={activeFiltersPanelClasses.root}>\r\n              <Box className={activeFiltersPanelClasses.content}>\r\n                {this.renderSort()}\r\n                {this.renderQuickSearch()}\r\n                {this.renderFilters()}\r\n                {!isEmpty && <ClearAllButton className={activeFiltersPanelClasses.removeButton} onClick={this.handleClearAll} />}\r\n              </Box>\r\n              {this.props.loading && <Box className={activeFiltersPanelClasses.overlay} />}\r\n            </Wrap>\r\n          </Collapse>\r\n        )\r\n      })\r\n    }\r\n\r\n    renderItems = (p: IRenderItemsParams<T>) => (\r\n      <Box className={activeFiltersPanelClasses.item}>\r\n        <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n          {p.label || p.field?.toString()}:\r\n        </Typography>\r\n        <Box className={activeFiltersPanelClasses.itemContent}>\r\n          {p.items.map((item) => (\r\n            <Chip\r\n              key={item.value}\r\n              clickable\r\n              size='small'\r\n              label={item.label || item.value}\r\n              className={activeFiltersPanelClasses.itemChip}\r\n              onDelete={() => {\r\n                if (p.isQuickSearch) {\r\n                  this.removeQuickSearch(item)\r\n                  return\r\n                }\r\n                if (!p.field) return\r\n                this.removeFilter(p.field, item)\r\n              }}\r\n            />\r\n          ))}\r\n        </Box>\r\n      </Box>\r\n    )\r\n\r\n    renderQuickSearch() {\r\n      const val = this.dataViewContext.filterState?.quickSearch || []\r\n      const list = (Array.isArray(val) ? val : [val]).map((value) => ({ value }))\r\n      if (!list || list.length === 0) return <></>\r\n      return this.renderItems({ label: 'Quick search', items: list, isQuickSearch: true })\r\n    }\r\n\r\n    renderFilters = () => {\r\n      const filter: IFilterMap<T> = this.dataViewContext.filterState?.filter || {}\r\n      const keys = Object.keys(filter) as Array<keyof T>\r\n      if (keys.length === 0) return <></>\r\n      return keys.map((key) => {\r\n        const filterItems = (filter[key] ?? []) as IFilterItem[]\r\n        const items = filterItems.reduce<IItemBase[]>((acc, item) => {\r\n          let label = item.label || item.value?.toString()\r\n          if (item.type === 'date' && item.dateLogic) {\r\n            label = `${mapDateLogicText[item.dateLogic]} ${formatDatetime(item.value?.toString() ?? '', 'style2')}`\r\n          }\r\n          if (!!item.value) acc.push({ value: item.value?.toString(), label })\r\n          return acc\r\n        }, [])\r\n        return <Fragment key={key.toString()}>{this.renderItems({ field: key, label: key.toString(), items })}</Fragment>\r\n      })\r\n    }\r\n\r\n    renderSort = () => {\r\n      const sort = this.dataViewContext.filterState?.sort\r\n      if (!sort) return <></>\r\n\r\n      const fieldConfig = this.dataViewContext.filterBarConfigs.fields?.[sort.field]\r\n      const fieldLabel = fieldConfig?.label || sort.field.toString()\r\n      const sortConfig = mapSortConfigs[sort.direction]\r\n\r\n      return (\r\n        <Box className={activeFiltersPanelClasses.item}>\r\n          <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n            Sort:\r\n          </Typography>\r\n          {/* <Box className={activeFiltersPanelClasses.itemContent}> */}\r\n          <Chip\r\n            clickable\r\n            size='small'\r\n            label={\r\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\r\n                <span>{fieldLabel}</span>\r\n                {sortConfig.icon}\r\n              </Box>\r\n            }\r\n            className={activeFiltersPanelClasses.itemChip}\r\n            onClick={this.toggleSortDirection}\r\n            onDelete={() => this.removeSort()}\r\n            title={`${fieldLabel} - ${sortConfig.title}`}\r\n          />\r\n          {/* </Box> */}\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    removeFilter = (field: keyof T, item: IItemBase) => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeFilterItem(field, item.value, { reason: 'filter' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    removeQuickSearch = (item: IItemBase) => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeQuickSearchItem(item.value, { reason: 'quickSearch' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    removeSort = () => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeSort({ reason: 'sort' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    toggleSortDirection = () => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).toggleSortDirection({ reason: 'sort' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    handleClearAll = () => {\r\n      const fValue = this.dataViewContext.filterBarConfigs.defaultValue || {}\r\n      // Trực tiếp clear data, logic đóng sẽ được xử lý tự động\r\n      const store = createFilterStore(this.dataViewContext.filterState, fValue).reset()\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n  }\r\n\r\n  return ActiveFiltersPanel\r\n}\r\n\r\nexport default createActiveFiltersPanel\r\n\r\nconst Wrap = styled(Box)({\r\n  position: 'relative',\r\n  [`.${activeFiltersPanelClasses.content}`]: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    flexWrap: 'wrap',\r\n    gap: '8px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.item}`]: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    border: 'dashed 1px var(--color-divider, rgba(145 160 170 / 20%))',\r\n    borderRadius: '4px',\r\n    alignItems: 'center',\r\n    padding: '6px 8px',\r\n    gap: '8px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.itemContent}`]: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    gap: '4px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.itemChip}`]: {\r\n    borderRadius: '4px',\r\n    height: '100%',\r\n    '& .MuiChip-label': {\r\n      overflowWrap: 'break-word',\r\n      wordBreak: 'break-word',\r\n      whiteSpace: 'normal',\r\n      textOverflow: 'clip'\r\n    }\r\n  },\r\n  [`.${activeFiltersPanelClasses.overlay}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backdropFilter: 'blur(1px)'\r\n  }\r\n})\r\n"],"names":["activeFiltersPanelClasses","root","content","item","itemContent","itemChip","removeButton","overlay","createActiveFiltersPanel","ActiveFiltersPanel","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isClosing","p","_p$field","_jsxs","Box","className","children","Typography","variant","sx","fontWeight","label","field","toString","_jsx","items","map","Chip","clickable","size","value","onDelete","isQuickSearch","removeQuickSearch","removeFilter","_this$dataViewContext","filter","dataViewContext","filterState","keys","Object","length","key","_filter$key","reduce","acc","_item$value","_item$value3","_item$value$toString","_item$value2","type","dateLogic","concat","mapDateLogicText","formatDatetime","push","Fragment","renderItems","_this$dataViewContext2","_this$dataViewContext3","sort","fieldConfig","filterBarConfigs","fields","fieldLabel","sortConfig","mapSortConfigs","direction","display","alignItems","gap","icon","onClick","toggleSortDirection","removeSort","title","store","createFilterStore","removeFilterItem","reason","onFilterStateChange","build","removeQuickSearchItem","fValue","defaultValue","reset","state","data","_inherits","Component","_createClass","_this2","this","mapDataViewContext","context","isEmpty","Collapse","in","timeout","unmountOnExit","orientation","onExited","handleAnimationExited","Wrap","renderSort","renderQuickSearch","renderFilters","ClearAllButton","handleClearAll","loading","_this$dataViewContext4","val","quickSearch","list","Array","isArray","styled","position","flexWrap","border","borderRadius","padding","height","overflowWrap","wordBreak","whiteSpace","textOverflow","top","left","width","backdropFilter"],"mappings":"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"}
+{"version":3,"file":"create.active-filters-panel.js","sources":["../../../src/data-view/create.active-filters-panel.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { Box, Chip, Collapse, styled, Typography } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { ClearAllButton, mapSortConfigs } from './ui.units'\r\nimport { IDataViewContext, mapDataViewContext } from './context'\r\nimport { IFilterItem, IFilterMap, IFilterState, IItemBase } from './types'\r\nimport { formatDatetime } from '../utils'\r\nimport { mapDateLogicText } from './helpers'\r\n\r\nexport const activeFiltersPanelClasses = {\r\n  root: 'ActiveFiltersPanel-root',\r\n  content: 'ActiveFiltersPanel-content',\r\n  item: 'ActiveFiltersPanel-item',\r\n  itemContent: 'ActiveFiltersPanel-itemContent',\r\n  itemChip: 'ActiveFiltersPanel-itemChip',\r\n  removeButton: 'ActiveFiltersPanel-removeButton',\r\n  overlay: 'ActiveFiltersPanel-overlay'\r\n}\r\n\r\ninterface IRenderItemsParams<T> {\r\n  field?: keyof T\r\n  label?: string\r\n  items: IItemBase[]\r\n  isQuickSearch?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelProps {\r\n  loading?: boolean\r\n  /** @default true */\r\n  enableSort?: boolean\r\n  /** @default true */\r\n  enableFilter?: boolean\r\n  /** @default true */\r\n  enableQuickSearch?: boolean\r\n  /** @default true */\r\n  enablePagination?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelState<T> {\r\n  data: IFilterState<T> | null\r\n  isClosing: boolean\r\n}\r\n\r\nfunction createActiveFiltersPanel<T>(): ComponentType<IActiveFiltersPanelProps> {\r\n  class ActiveFiltersPanel extends Component<IActiveFiltersPanelProps, IActiveFiltersPanelState<T>> {\r\n    declare dataViewContext: IDataViewContext<T>\r\n\r\n    constructor(props: IActiveFiltersPanelProps) {\r\n      super(props)\r\n      this.state = { data: null, isClosing: false }\r\n    }\r\n\r\n    // Handle animation completion\r\n    private handleAnimationExited = () => {\r\n      this.setState({ isClosing: true })\r\n    }\r\n\r\n    render() {\r\n      return mapDataViewContext((context) => {\r\n        this.dataViewContext = context\r\n        if (!this.dataViewContext) return <></>\r\n        const { defaultValue } = this.dataViewContext.filterBarConfigs\r\n        const isEmpty = createFilterStore(this.dataViewContext.filterState, defaultValue).isEmpty()\r\n        return (\r\n          <Collapse in={!isEmpty} timeout={300} unmountOnExit orientation='vertical' onExited={this.handleAnimationExited}>\r\n            <Wrap className={activeFiltersPanelClasses.root}>\r\n              <Box className={activeFiltersPanelClasses.content}>\r\n                {this.props.enableSort !== false && this.renderSort()}\r\n                {this.props.enableQuickSearch !== false && this.renderQuickSearch()}\r\n                {this.props.enableFilter !== false && this.renderFilters()}\r\n                {this.props.enablePagination !== false && this.renderPagination()}\r\n                {!isEmpty && <ClearAllButton className={activeFiltersPanelClasses.removeButton} onClick={this.handleClearAll} />}\r\n              </Box>\r\n              {this.props.loading && <Box className={activeFiltersPanelClasses.overlay} />}\r\n            </Wrap>\r\n          </Collapse>\r\n        )\r\n      })\r\n    }\r\n\r\n    renderItems = (p: IRenderItemsParams<T>) => (\r\n      <Box className={activeFiltersPanelClasses.item}>\r\n        <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n          {p.label || p.field?.toString()}:\r\n        </Typography>\r\n        <Box className={activeFiltersPanelClasses.itemContent}>\r\n          {p.items.map((item) => (\r\n            <Chip\r\n              key={item.value}\r\n              clickable\r\n              size='small'\r\n              label={item.label || item.value}\r\n              className={activeFiltersPanelClasses.itemChip}\r\n              onDelete={() => {\r\n                if (p.isQuickSearch) {\r\n                  this.removeQuickSearch(item)\r\n                  return\r\n                }\r\n                if (!p.field) return\r\n                this.removeFilter(p.field, item)\r\n              }}\r\n            />\r\n          ))}\r\n        </Box>\r\n      </Box>\r\n    )\r\n\r\n    renderQuickSearch() {\r\n      const val = this.dataViewContext.filterState?.quickSearch || []\r\n      const list = (Array.isArray(val) ? val : [val]).map((value) => ({ value }))\r\n      if (!list || list.length === 0) return <></>\r\n      return this.renderItems({ label: 'Quick search', items: list, isQuickSearch: true })\r\n    }\r\n\r\n    renderFilters = () => {\r\n      const filter: IFilterMap<T> = this.dataViewContext.filterState?.filter || {}\r\n      const keys = Object.keys(filter) as Array<keyof T>\r\n      if (keys.length === 0) return <></>\r\n      return keys.map((key) => {\r\n        const filterItems = (filter[key] ?? []) as IFilterItem[]\r\n        const items = filterItems.reduce<IItemBase[]>((acc, item) => {\r\n          let label = item.label || item.value?.toString()\r\n          if (item.type === 'date' && item.dateLogic) {\r\n            label = `${mapDateLogicText[item.dateLogic]} ${formatDatetime(item.value?.toString() ?? '', 'style2')}`\r\n          }\r\n          if (!!item.value) acc.push({ value: item.value?.toString(), label })\r\n          return acc\r\n        }, [])\r\n        return <Fragment key={key.toString()}>{this.renderItems({ field: key, label: key.toString(), items })}</Fragment>\r\n      })\r\n    }\r\n\r\n    renderPagination = () => {\r\n      const pagination = this.dataViewContext.filterState?.pagination\r\n      const defaultPagination = this.dataViewContext.filterBarConfigs.defaultValue?.pagination\r\n\r\n      if (!pagination || (!pagination.page && !pagination.pageSize)) return <></>\r\n\r\n      // Check if current pagination equals default pagination\r\n      if (defaultPagination) {\r\n        const isSame = pagination.page === defaultPagination.page && pagination.pageSize === defaultPagination.pageSize\r\n        if (isSame) return <></>\r\n      }\r\n\r\n      const page = pagination.page ?? 1\r\n      const pageSize = pagination.pageSize\r\n      const isDefault = page === 1 && !pageSize\r\n      if (isDefault) return <></>\r\n\r\n      const labelParts: string[] = []\r\n      if (page > 1) labelParts.push(`Page ${page}`)\r\n      if (pageSize) labelParts.push(`${pageSize} items/page`)\r\n\r\n      return (\r\n        <Box className={activeFiltersPanelClasses.item}>\r\n          <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n            Pagination:\r\n          </Typography>\r\n          <Chip size='small' label={labelParts.join(', ')} className={activeFiltersPanelClasses.itemChip} />\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    renderSort = () => {\r\n      const sort = this.dataViewContext.filterState?.sort\r\n      if (!sort) return <></>\r\n\r\n      const fieldConfig = this.dataViewContext.filterBarConfigs.fields?.[sort.field]\r\n      const fieldLabel = fieldConfig?.label || sort.field.toString()\r\n      const sortConfig = mapSortConfigs[sort.direction]\r\n\r\n      return (\r\n        <Box className={activeFiltersPanelClasses.item}>\r\n          <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n            Sort:\r\n          </Typography>\r\n          {/* <Box className={activeFiltersPanelClasses.itemContent}> */}\r\n          <Chip\r\n            clickable\r\n            size='small'\r\n            label={\r\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\r\n                <span>{fieldLabel}</span>\r\n                {sortConfig.icon}\r\n              </Box>\r\n            }\r\n            className={activeFiltersPanelClasses.itemChip}\r\n            onClick={this.toggleSortDirection}\r\n            onDelete={() => this.removeSort()}\r\n            title={`${fieldLabel} - ${sortConfig.title}`}\r\n          />\r\n          {/* </Box> */}\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    removeFilter = (field: keyof T, item: IItemBase) => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeFilterItem(field, item.value, { reason: 'filter' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    removeQuickSearch = (item: IItemBase) => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeQuickSearchItem(item.value, { reason: 'quickSearch' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    removeSort = () => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).removeSort({ reason: 'sort' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    toggleSortDirection = () => {\r\n      const store = createFilterStore(this.dataViewContext.filterState).toggleSortDirection({ reason: 'sort' })\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n\r\n    handleClearAll = () => {\r\n      const fValue = this.dataViewContext.filterBarConfigs.defaultValue || {}\r\n      // Trực tiếp clear data, logic đóng sẽ được xử lý tự động\r\n      const store = createFilterStore(this.dataViewContext.filterState, fValue).reset()\r\n      this.dataViewContext.onFilterStateChange(store.build())\r\n    }\r\n  }\r\n\r\n  return ActiveFiltersPanel\r\n}\r\n\r\nexport default createActiveFiltersPanel\r\n\r\nconst Wrap = styled(Box)({\r\n  position: 'relative',\r\n  [`.${activeFiltersPanelClasses.content}`]: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    flexWrap: 'wrap',\r\n    gap: '8px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.item}`]: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    border: 'dashed 1px var(--color-divider, rgba(145 160 170 / 20%))',\r\n    borderRadius: '4px',\r\n    alignItems: 'center',\r\n    padding: '6px 8px',\r\n    gap: '8px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.itemContent}`]: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    gap: '4px'\r\n  },\r\n  [`.${activeFiltersPanelClasses.itemChip}`]: {\r\n    borderRadius: '4px',\r\n    height: '100%',\r\n    '& .MuiChip-label': {\r\n      overflowWrap: 'break-word',\r\n      wordBreak: 'break-word',\r\n      whiteSpace: 'normal',\r\n      textOverflow: 'clip'\r\n    }\r\n  },\r\n  [`.${activeFiltersPanelClasses.overlay}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backdropFilter: 'blur(1px)'\r\n  }\r\n})\r\n"],"names":["activeFiltersPanelClasses","root","content","item","itemContent","itemChip","removeButton","overlay","createActiveFiltersPanel","ActiveFiltersPanel","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isClosing","p","_p$field","_jsxs","Box","className","children","Typography","variant","sx","fontWeight","label","field","toString","_jsx","items","map","Chip","clickable","size","value","onDelete","isQuickSearch","removeQuickSearch","removeFilter","_this$dataViewContext","filter","dataViewContext","filterState","keys","Object","length","key","_filter$key","reduce","acc","_item$value","_item$value3","_item$value$toString","_item$value2","type","dateLogic","concat","mapDateLogicText","formatDatetime","push","Fragment","renderItems","_this$dataViewContext2","_this$dataViewContext3","_pagination$page","pagination","defaultPagination","filterBarConfigs","defaultValue","page","pageSize","labelParts","join","_this$dataViewContext4","_this$dataViewContext5","sort","fieldConfig","fields","fieldLabel","sortConfig","mapSortConfigs","direction","display","alignItems","gap","icon","onClick","toggleSortDirection","removeSort","title","store","createFilterStore","removeFilterItem","reason","onFilterStateChange","build","removeQuickSearchItem","fValue","reset","state","data","_inherits","Component","_createClass","_this2","this","mapDataViewContext","context","isEmpty","Collapse","in","timeout","unmountOnExit","orientation","onExited","handleAnimationExited","Wrap","enableSort","renderSort","enableQuickSearch","renderQuickSearch","enableFilter","renderFilters","enablePagination","renderPagination","ClearAllButton","handleClearAll","loading","_this$dataViewContext6","val","quickSearch","list","Array","isArray","styled","position","flexWrap","border","borderRadius","padding","height","overflowWrap","wordBreak","whiteSpace","textOverflow","top","left","width","backdropFilter"],"mappings":"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"}

package/dist/src/data-view/create.data-view.js

@@ -1,2 +1,2 @@
-import{inherits as e,createClass as i,objectSpread2 as o,classCallCheck as t,callSuper as l,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{Box as u}from"@mui/material";import{SortButton as v}from"./ui.units.js";import{createViewMode as f}from"./create.view-mode.js";import{defaultViewMode as p,ViewModeButtons as h}from"./view-mode.units.js";import{getViewModeFromURL as g,syncViewModeToURL as c}from"./query-param-url.js";import{defaultFilterBarState as C,DataViewContext as m}from"./context.js";import{createFilterBar as S}from"./create.filter-bar.js";import w from"./scroll-tracking.js";import{createPaginationBar as P}from"./create.pagination-bar.js";import{createPopperPanel as M}from"./create.popper-panel.js";import y from"./create.active-filters-panel.js";import{DataViewStyled as B,dataViewClasses as H}from"./styleds.js";function b(b){var j=S(),k=M(),F=y(),V=f(b.viewMode),T=P();return function(){function f(e){var i;return t(this,f),i=l(this,f,[e]),n(i,"mergeConfig",function(e){var o,t,l,n,r=e.slots;i.configCache={filterBar:Object.assign({},b.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},b.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(o=null!==(t=null==r||null===(l=r.paginationBarConfigs)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==t?t:null===(n=b.paginationBar)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==o&&o,scrollTracking:Object.assign({},b.scrollTracking,null==r?void 0:r.scrollTracking),autoHeight:e.autoHeight||b.autoHeight||!1}}),n(i,"configCache",{}),n(i,"refFilterButton",null),n(i,"refSortButton",null),n(i,"renderFooter",function(){var e,t,l,n,a,s=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{},d=[H.footerPanel,null===(t=s.wrapProps)||void 0===t?void 0:t.className].filter(Boolean);return r(u,o(o({},s.wrapProps),{},{className:d.join(" "),children:!1!==s.enablePagination&&r(T,o({count:null!==(l=null===(n=i.props.data)||void 0===n?void 0:n.totalItems)&&void 0!==l?l:0,defaultFilter:null===(a=i.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))}),n(i,"onViewModeChangeHandler",function(e){i.setState({viewMode:e},function(){var o,t;if(i.props.syncViewModeToURL){var l,n,r,a,s=null!==(l=null!==(n=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==n?n:null===(a=b.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==l?l:p;c({viewMode:e,defaultViewMode:s})}null===(o=(t=i.props).onViewModeChange)||void 0===o||o.call(t,e)})}),n(i,"onKeywordChangeHandler",function(e){return i.setState({keyword:e})}),n(i,"onScrollChangeHandler",function(e){return i.setState({scrolled:e.isScrolled})}),n(i,"onPopperPanelChangeHandler",function(e,o){return i.setState({anchorEl:e,area:o})}),n(i,"onClearHandler",function(){return i.setState(C)}),n(i,"onPanelCloseHandler",function(){i.setState({anchorEl:null,area:void 0,keyword:""})}),n(i,"onFilterStateChangeHandler",function(e){i.props.filter||i.setState(o(o({},C),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(C)}),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(f,d),i(f,[{key:"getDefaultState",value:function(e){var i,t,l,n,r,a,s=null!==(i=null!==(t=null===(l=e.slots)||void 0===l||null===(l=l.viewModeConfigs)||void 0===l?void 0:l.defaultValue)&&void 0!==t?t:null===(n=b.viewMode)||void 0===n?void 0:n.defaultValue)&&void 0!==i?i:p,d=e.syncViewModeToURL?g({defaultViewMode:s}):s;return o(o({},C),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,o,t,l,n=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(o=this.props.slots)||void 0===o?void 0:o.filterBarConfigs),r=JSON.stringify(null===(t=e.slots)||void 0===t?void 0:t.viewModeConfigs)!==JSON.stringify(null===(l=this.props.slots)||void 0===l?void 0:l.viewModeConfigs);return(n||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,t,l,n,d,u,f,p,g,c,C,S,P,M,y,b,N,I,O={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(m.Provider,{value:O,children:a(B,o(o({},null===(i=this.props.slots)||void 0===i?void 0:i.wrapProps),{},{children:[null===(t=this.props.slots)||void 0===t?void 0:t.title,(null===(l=this.internalConfig.filterBar)||void 0===l?void 0:l.enableSticky)&&r(w,o({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(n=this.props.slots)||void 0===n||null===(n=n.filterSlots)||void 0===n?void 0:n.above,r(j,{id:null===(d=this.internalConfig.scrollTracking)||void 0===d?void 0:d.elementId,slots:o(o({},null===(u=this.props.slots)||void 0===u?void 0:u.primaryInputSlots),{},{right:a(s,{children:[(null===(f=this.internalConfig.filterBar)||void 0===f?void 0:f.enableSort)&&r(v,{}),null===(p=this.props.slots)||void 0===p||null===(p=p.primaryInputSlots)||void 0===p?void 0:p.right]})}),children:r(k,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(c=this.props.slots)||void 0===c||null===(c=c.activeFiltersPanelSlots)||void 0===c?void 0:c.above,a("div",{className:H.filterPanel,children:[r(h,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,a("div",{className:H.filterPannelInner,children:[r(F,{loading:this.props.loading}),r("div",{className:H.filterPannelInnerRight,children:this.internalConfig.enablePaginationTop&&r(T,o({count:null!==(S=null===(P=this.props.data)||void 0===P?void 0:P.totalItems)&&void 0!==S?S:0,defaultFilter:null===(M=this.internalConfig.filterBar)||void 0===M?void 0:M.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(y=this.props.slots)||void 0===y||null===(y=y.activeFiltersPanelSlots)||void 0===y?void 0:y.right]}),null===(b=this.props.slots)||void 0===b||null===(b=b.activeFiltersPanelSlots)||void 0===b?void 0:b.below,r(V,{data:null!==(N=null===(I=this.props.data)||void 0===I?void 0:I.items)&&void 0!==N?N:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,autoHeight:this.internalConfig.autoHeight,slots:this.internalConfig.viewMode}),this.renderFooter()]}))})}}])}()}export{b as default};
+import{inherits as e,createClass as i,objectSpread2 as o,classCallCheck as t,callSuper as l,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{Box as u}from"@mui/material";import{SortButton as v}from"./ui.units.js";import{createViewMode as f}from"./create.view-mode.js";import{defaultViewMode as p,ViewModeButtons as h}from"./view-mode.units.js";import{getViewModeFromURL as g,syncViewModeToURL as c}from"./query-param-url.js";import{defaultFilterBarState as C,DataViewContext as m}from"./context.js";import{createFilterBar as S}from"./create.filter-bar.js";import w from"./scroll-tracking.js";import{createPaginationBar as P}from"./create.pagination-bar.js";import{createPopperPanel as M}from"./create.popper-panel.js";import y from"./create.active-filters-panel.js";import{DataViewStyled as B,dataViewClasses as H}from"./styleds.js";function b(b){var j=S(),k=M(),F=y(),V=f(b.viewMode),T=P();return function(){function f(e){var i;return t(this,f),i=l(this,f,[e]),n(i,"mergeConfig",function(e){var o,t,l,n,r=e.slots;i.configCache={filterBar:Object.assign({},b.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},b.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(o=null!==(t=null==r||null===(l=r.paginationBarConfigs)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==t?t:null===(n=b.paginationBar)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==o&&o,scrollTracking:Object.assign({},b.scrollTracking,null==r?void 0:r.scrollTracking),autoHeight:e.autoHeight||b.autoHeight||!1}}),n(i,"configCache",{}),n(i,"refFilterButton",null),n(i,"refSortButton",null),n(i,"renderFooter",function(){var e,t,l,n,a,s=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{},d=[H.footerPanel,null===(t=s.wrapProps)||void 0===t?void 0:t.className].filter(Boolean);return r(u,o(o({},s.wrapProps),{},{className:d.join(" "),children:!1!==s.enablePagination&&r(T,o({count:null!==(l=null===(n=i.props.data)||void 0===n?void 0:n.totalItems)&&void 0!==l?l:0,defaultFilter:null===(a=i.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))}),n(i,"onViewModeChangeHandler",function(e){i.setState({viewMode:e},function(){var o,t;if(i.props.syncViewModeToURL){var l,n,r,a,s=null!==(l=null!==(n=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==n?n:null===(a=b.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==l?l:p;c({viewMode:e,defaultViewMode:s})}null===(o=(t=i.props).onViewModeChange)||void 0===o||o.call(t,e)})}),n(i,"onKeywordChangeHandler",function(e){return i.setState({keyword:e})}),n(i,"onScrollChangeHandler",function(e){return i.setState({scrolled:e.isScrolled})}),n(i,"onPopperPanelChangeHandler",function(e,o){return i.setState({anchorEl:e,area:o})}),n(i,"onClearHandler",function(){return i.setState(C)}),n(i,"onPanelCloseHandler",function(){i.setState({anchorEl:null,area:void 0,keyword:""})}),n(i,"onFilterStateChangeHandler",function(e){i.props.filter||i.setState(o(o({},C),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(C)}),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(f,d),i(f,[{key:"getDefaultState",value:function(e){var i,t,l,n,r,a,s=null!==(i=null!==(t=null===(l=e.slots)||void 0===l||null===(l=l.viewModeConfigs)||void 0===l?void 0:l.defaultValue)&&void 0!==t?t:null===(n=b.viewMode)||void 0===n?void 0:n.defaultValue)&&void 0!==i?i:p,d=e.syncViewModeToURL?g({defaultViewMode:s}):s;return o(o({},C),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,o,t,l,n=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(o=this.props.slots)||void 0===o?void 0:o.filterBarConfigs),r=JSON.stringify(null===(t=e.slots)||void 0===t?void 0:t.viewModeConfigs)!==JSON.stringify(null===(l=this.props.slots)||void 0===l?void 0:l.viewModeConfigs);return(n||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,t,l,n,d,u,f,p,g,c,C,S,P,M,y,b,N,I,O=this.props.slots,E={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(m.Provider,{value:E,children:a(B,o(o({},null===(i=this.props.slots)||void 0===i?void 0:i.wrapProps),{},{children:[null===(t=this.props.slots)||void 0===t?void 0:t.title,(null===(l=this.internalConfig.filterBar)||void 0===l?void 0:l.enableSticky)&&r(w,o({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(n=this.props.slots)||void 0===n||null===(n=n.filterSlots)||void 0===n?void 0:n.above,r(j,{id:null===(d=this.internalConfig.scrollTracking)||void 0===d?void 0:d.elementId,slots:o(o({},null===(u=this.props.slots)||void 0===u?void 0:u.primaryInputSlots),{},{right:a(s,{children:[(null===(f=this.internalConfig.filterBar)||void 0===f?void 0:f.enableSort)&&r(v,{}),null===(p=this.props.slots)||void 0===p||null===(p=p.primaryInputSlots)||void 0===p?void 0:p.right]})}),children:r(k,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(c=this.props.slots)||void 0===c||null===(c=c.activeFiltersPanelSlots)||void 0===c?void 0:c.above,a("div",{className:H.filterPanel,children:[r(h,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,a("div",{className:H.filterPannelInner,children:[r(F,o({loading:this.props.loading},null==O?void 0:O.activeFiltersPanelProps)),r("div",{className:H.filterPannelInnerRight,children:this.internalConfig.enablePaginationTop&&r(T,o({count:null!==(S=null===(P=this.props.data)||void 0===P?void 0:P.totalItems)&&void 0!==S?S:0,defaultFilter:null===(M=this.internalConfig.filterBar)||void 0===M?void 0:M.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(y=this.props.slots)||void 0===y||null===(y=y.activeFiltersPanelSlots)||void 0===y?void 0:y.right]}),null===(b=this.props.slots)||void 0===b||null===(b=b.activeFiltersPanelSlots)||void 0===b?void 0:b.below,r(V,{data:null!==(N=null===(I=this.props.data)||void 0===I?void 0:I.items)&&void 0!==N?N:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,autoHeight:this.internalConfig.autoHeight,slots:this.internalConfig.viewMode}),this.renderFooter()]}))})}}])}()}export{b as default};
 //# sourceMappingURL=create.data-view.js.map

package/dist/src/data-view/create.data-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\nimport { dataViewClasses, DataViewStyled } from './styleds'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  wrapProps?: StackProps\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n  title?: React.ReactNode\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  autoHeight?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  autoHeight?: boolean\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking),\r\n        autoHeight: currentProps.autoHeight || configs.autoHeight || false\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          <DataViewStyled {...this.props.slots?.wrapProps}>\r\n            {this.props.slots?.title}\r\n            {this.internalConfig.filterBar?.enableSticky && (\r\n              <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n            )}\r\n            {this.props.slots?.filterSlots?.above}\r\n            <FilterBarInstance\r\n              id={this.internalConfig.scrollTracking?.elementId}\r\n              slots={{\r\n                ...this.props.slots?.primaryInputSlots,\r\n                right: (\r\n                  <>\r\n                    {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                    {this.props.slots?.primaryInputSlots?.right}\r\n                  </>\r\n                )\r\n              }}\r\n            >\r\n              <PopperPanelInstance />\r\n            </FilterBarInstance>\r\n            {this.props.slots?.filterSlots?.below}\r\n            {this.props.slots?.activeFiltersPanelSlots?.above}\r\n            <div className={dataViewClasses.filterPanel}>\r\n              <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n              {this.props.slots?.activeFiltersPanelSlots?.left}\r\n              <div className={dataViewClasses.filterPannelInner}>\r\n                <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n                <div className={dataViewClasses.filterPannelInnerRight}>\r\n                  {this.internalConfig.enablePaginationTop && (\r\n                    <PaginationBarInstance\r\n                      count={this.props.data?.totalItems ?? 0}\r\n                      defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                      filter={this.filterState}\r\n                      onChange={this.onFilterStateChangeHandler}\r\n                      {...this.internalConfig.paginationBar}\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n              {this.props.slots?.activeFiltersPanelSlots?.right}\r\n            </div>\r\n            {this.props.slots?.activeFiltersPanelSlots?.below}\r\n            <ViewModeInstance\r\n              data={this.props.data?.items ?? []}\r\n              viewMode={this.viewMode}\r\n              loading={this.props.loading}\r\n              error={this.props.error}\r\n              autoHeight={this.internalConfig.autoHeight}\r\n              slots={this.internalConfig.viewMode}\r\n            />\r\n            {this.renderFooter()}\r\n          </DataViewStyled>\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      const classes = [dataViewClasses.footerPanel, temp.wrapProps?.className].filter(Boolean)\r\n      return (\r\n        <Box {...temp.wrapProps} className={classes.join(' ')}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","autoHeight","_this$props$slots","_temp$wrapProps","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","classes","dataViewClasses","footerPanel","wrapProps","className","filter","Boolean","_jsx","Box","_objectSpread","join","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$props$slots4","_this$props$slots5","_this$internalConfig$7","_this$props$slots6","_this$internalConfig$8","_this$props$slots7","_this$internalConfig$9","_this$props$slots8","_this$props$slots9","_this$props$slots0","_this$props$slots1","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots10","_this$props$slots11","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","DataViewContext","Provider","_jsxs","DataViewStyled","title","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","filterPanel","ViewModeButtons","onViewModeChangeHandler","left","filterPannelInner","loading","filterPannelInnerRight","items","error","renderFooter"],"mappings":"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"}
+{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel, { IActiveFiltersPanelProps } from './create.active-filters-panel'\r\nimport { dataViewClasses, DataViewStyled } from './styleds'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  activeFiltersPanelProps?: Omit<IActiveFiltersPanelProps, 'loading'>\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  wrapProps?: StackProps\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n  title?: React.ReactNode\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  autoHeight?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  autoHeight?: boolean\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking),\r\n        autoHeight: currentProps.autoHeight || configs.autoHeight || false\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const { slots } = this.props\r\n\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          <DataViewStyled {...this.props.slots?.wrapProps}>\r\n            {this.props.slots?.title}\r\n            {this.internalConfig.filterBar?.enableSticky && (\r\n              <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n            )}\r\n            {this.props.slots?.filterSlots?.above}\r\n            <FilterBarInstance\r\n              id={this.internalConfig.scrollTracking?.elementId}\r\n              slots={{\r\n                ...this.props.slots?.primaryInputSlots,\r\n                right: (\r\n                  <>\r\n                    {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                    {this.props.slots?.primaryInputSlots?.right}\r\n                  </>\r\n                )\r\n              }}\r\n            >\r\n              <PopperPanelInstance />\r\n            </FilterBarInstance>\r\n            {this.props.slots?.filterSlots?.below}\r\n            {this.props.slots?.activeFiltersPanelSlots?.above}\r\n            <div className={dataViewClasses.filterPanel}>\r\n              <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n              {this.props.slots?.activeFiltersPanelSlots?.left}\r\n              <div className={dataViewClasses.filterPannelInner}>\r\n                <ActiveFiltersPanelInstance loading={this.props.loading} {...slots?.activeFiltersPanelProps} />\r\n                <div className={dataViewClasses.filterPannelInnerRight}>\r\n                  {this.internalConfig.enablePaginationTop && (\r\n                    <PaginationBarInstance\r\n                      count={this.props.data?.totalItems ?? 0}\r\n                      defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                      filter={this.filterState}\r\n                      onChange={this.onFilterStateChangeHandler}\r\n                      {...this.internalConfig.paginationBar}\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n              {this.props.slots?.activeFiltersPanelSlots?.right}\r\n            </div>\r\n            {this.props.slots?.activeFiltersPanelSlots?.below}\r\n            <ViewModeInstance\r\n              data={this.props.data?.items ?? []}\r\n              viewMode={this.viewMode}\r\n              loading={this.props.loading}\r\n              error={this.props.error}\r\n              autoHeight={this.internalConfig.autoHeight}\r\n              slots={this.internalConfig.viewMode}\r\n            />\r\n            {this.renderFooter()}\r\n          </DataViewStyled>\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      const classes = [dataViewClasses.footerPanel, temp.wrapProps?.className].filter(Boolean)\r\n      return (\r\n        <Box {...temp.wrapProps} className={classes.join(' ')}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","autoHeight","_this$props$slots","_temp$wrapProps","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","classes","dataViewClasses","footerPanel","wrapProps","className","filter","Boolean","_jsx","Box","_objectSpread","join","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$props$slots4","_this$props$slots5","_this$internalConfig$7","_this$props$slots6","_this$internalConfig$8","_this$props$slots7","_this$internalConfig$9","_this$props$slots8","_this$props$slots9","_this$props$slots0","_this$props$slots1","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots10","_this$props$slots11","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","DataViewContext","Provider","_jsxs","DataViewStyled","title","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","filterPanel","ViewModeButtons","onViewModeChangeHandler","left","filterPannelInner","loading","activeFiltersPanelProps","filterPannelInnerRight","items","error","renderFooter"],"mappings":"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"}

package/dist/src/data-view/view-mode.content.js

@@ -1,2 +1,2 @@
-import{inherits as o,createClass as e,objectWithoutProperties as r,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import{memo as s,Component as u}from"react";import{styled as d,Box as c,colors as p,Grid as h,Stack as g,Typography as m}from"@mui/material";import{DataGrid as f}from"@mui/x-data-grid";var v=["Element"],b=["Element"],x=function(){return a(m,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function S(){return s(function(){function l(o){var e;return i(this,l),(e=n(this,l,[o])).ElementComponent=o.configs.Element||x,e}return o(l,u),e(l,[{key:"shouldComponentUpdate",value:function(o){var e=this.props.configs,t=e.Element,i=r(e,v),n=o.configs,l=n.Element,a=r(n,b);t!==l&&(this.ElementComponent=o.configs.Element||x);var s=JSON.stringify(i)!==JSON.stringify(a);return JSON.stringify(this.props.data)!==JSON.stringify(o.data)||s}},{key:"render",value:function(){var o=this.ElementComponent,e=this.props,r=e.data,i=e.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return a(y,{className:this.props.autoHeight?"auto-height":"",children:a(h,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:r.map(function(e,r){var l=i.getElementId?i.getElementId(e):r.toString(),s=i.elementWrapPropsGetter,u=s?s({data:e,index:r}):i.elementWrapProps||{};return a(h,t(t(t({item:!0},n),u),{},{children:a(o,{data:e,index:r})}),l)})}))})}}])}())}var y=d(c)({height:"100%",width:"100%",overflow:"auto","&.auto-height":{height:"auto",overflow:"visible"}});function w(){var r=function(o){var e,r=null!==(e=null==o?void 0:o.columns)&&void 0!==e?e:{};return Object.keys(r).map(function(o){var e=r[o];return t({field:String(o),sortable:!1},e)})};return s(function(){function s(o){var e;return i(this,s),e=n(this,s,[o]),l(e,"columns",[]),l(e,"rowSelectionModel",[]),l(e,"handleRowSelectionChange",function(o){var r,t;e.rowSelectionModel=o,null===(r=e.props.configs)||void 0===r||null===(t=r.onRowSelectionChange)||void 0===t||t.call(r,o),e.forceUpdate()}),e.columns=r(o.configs),e}return o(s,u),e(s,[{key:"shouldComponentUpdate",value:function(o){var e=JSON.stringify(this.props.value)!==JSON.stringify(o.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(o.configs);return t&&(this.columns=r(o.configs)),e&&(this.rowSelectionModel=[]),e||t}},{key:"render",value:function(){var o,e,r,i,n,l,s;if(!(this.props.configs&&Object.keys(null!==(o=null===(e=this.props.configs)||void 0===e?void 0:e.columns)&&void 0!==o?o:{}).length>0))return null;var u=this.props.value;return a(g,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:a(C,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,checkboxSelection:null!==(r=null===(i=this.props.configs)||void 0===i?void 0:i.enableRowSelection)&&void 0!==r&&r,rowSelectionModel:this.rowSelectionModel,onRowSelectionModelChange:this.handleRowSelectionChange,getRowId:null===(n=this.props.configs)||void 0===n?void 0:n.getRowId,rows:u,rowHeight:null===(l=this.props.configs)||void 0===l?void 0:l.rowHeight,columnHeaderHeight:48,getRowSpacing:function(o){return{top:o.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(s=this.props.slots)||void 0===s?void 0:s.dataGridProps))})}}])}())}var C=d(f,{shouldForwardProp:function(o){return"autoHeight"!==o}})(function(o){var e=o.theme,r=o.ownerState,t=null==r?void 0:r.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":e.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:p.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-columnHeaderCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-cellCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":e.palette.divider,"--custom-bg-color":p.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}});export{w as createViewModeList,S as createViewModeModule};
+import{objectSpread2 as o,inherits as e,createClass as t,objectWithoutProperties as r,classCallCheck as i,callSuper as n,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import{memo as s,Component as d}from"react";import{styled as u,Box as c,colors as p,Grid as h,Stack as g,Typography as f}from"@mui/material";import{DataGrid as m}from"@mui/x-data-grid";var v=["Element"],b=["Element"],S=function(){return a(f,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function w(){return s(function(){function l(o){var e;return i(this,l),(e=n(this,l,[o])).ElementComponent=o.configs.Element||S,e}return e(l,d),t(l,[{key:"shouldComponentUpdate",value:function(o){var e=this.props.configs,t=e.Element,i=r(e,v),n=o.configs,l=n.Element,a=r(n,b);t!==l&&(this.ElementComponent=o.configs.Element||S);var s=JSON.stringify(i)!==JSON.stringify(a);return JSON.stringify(this.props.data)!==JSON.stringify(o.data)||s}},{key:"render",value:function(){var e=this.ElementComponent,t=this.props,r=t.data,i=t.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return a(x,{className:this.props.autoHeight?"auto-height":"",children:a(h,o(o({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:r.map(function(t,r){var l=i.getElementId?i.getElementId(t):r.toString(),s=i.elementWrapPropsGetter,d=s?s({data:t,index:r}):i.elementWrapProps||{};return a(h,o(o(o({item:!0},n),d),{},{children:a(e,{data:t,index:r})}),l)})}))})}}])}())}var x=u(c)({height:"100%",width:"100%",overflow:"auto",paddingBottom:"16px","&.auto-height":{height:"auto",overflow:"visible"}});function y(){var r=function(e){var t,r=null!==(t=null==e?void 0:e.columns)&&void 0!==t?t:{};return Object.keys(r).map(function(e){var t=r[e];return o({field:String(e),sortable:!1},t)})};return s(function(){function s(o){var e,t;return i(this,s),t=n(this,s,[o]),l(t,"columns",[]),l(t,"internalRowSelectionModel",[]),l(t,"handleRowSelectionChange",function(o){var e,r,i;void 0===(null===(e=t.props.configs)||void 0===e?void 0:e.rowSelectionModel)&&(t.internalRowSelectionModel=o),null===(r=t.props.configs)||void 0===r||null===(i=r.onRowSelectionChange)||void 0===i||i.call(r,o),t.forceUpdate()}),t.columns=r(o.configs),null!==(e=o.configs)&&void 0!==e&&e.rowSelectionModel&&(t.internalRowSelectionModel=o.configs.rowSelectionModel),t}return e(s,d),t(s,[{key:"shouldComponentUpdate",value:function(o){var e,t,i=JSON.stringify(this.props.value)!==JSON.stringify(o.value),n=JSON.stringify(this.props.configs)!==JSON.stringify(o.configs);return n&&(this.columns=r(o.configs)),i&&void 0===(null===(e=o.configs)||void 0===e?void 0:e.rowSelectionModel)&&(this.internalRowSelectionModel=[]),void 0!==(null===(t=o.configs)||void 0===t?void 0:t.rowSelectionModel)&&(this.internalRowSelectionModel=o.configs.rowSelectionModel),i||n}},{key:"render",value:function(){var e,t,r,i,n,l,s,d,u;if(!(this.props.configs&&Object.keys(null!==(e=null===(t=this.props.configs)||void 0===t?void 0:t.columns)&&void 0!==e?e:{}).length>0))return null;var c=this.props.value,p=null!==(r=null===(i=this.props.configs)||void 0===i?void 0:i.rowSelectionModel)&&void 0!==r?r:this.internalRowSelectionModel;return a(g,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:a(M,o({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,checkboxSelection:null!==(n=null===(l=this.props.configs)||void 0===l?void 0:l.enableRowSelection)&&void 0!==n&&n,rowSelectionModel:p,onRowSelectionModelChange:this.handleRowSelectionChange,getRowId:null===(s=this.props.configs)||void 0===s?void 0:s.getRowId,rows:c,rowHeight:null===(d=this.props.configs)||void 0===d?void 0:d.rowHeight,columnHeaderHeight:48,getRowSpacing:function(o){return{top:o.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(u=this.props.slots)||void 0===u?void 0:u.dataGridProps))})}}])}())}var M=u(m,{shouldForwardProp:function(o){return"autoHeight"!==o}})(function(e){var t=e.theme,r=e.ownerState,i=null==r?void 0:r.autoHeight;return{height:i?"auto":"100%",width:"100%",display:i?"block":"flex",flexDirection:i?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":t.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:p.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-columnHeaderCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-cellCheckbox":{display:"flex",alignItems:"center",justifyContent:"center"},".MuiDataGrid-virtualScroller":o({paddingBottom:"16px"},i?{minHeight:0}:{flex:1,minHeight:0}),".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":t.palette.divider,"--custom-bg-color":p.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}});export{y as createViewModeList,w as createViewModeModule};
 //# sourceMappingURL=view-mode.content.js.map

package/dist/src/data-view/view-mode.content.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel, GridRowSelectionModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n  autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\n      return (\r\n        <ViewModeModuleStyled className={this.props.autoHeight ? 'auto-height' : ''}>\r\n          <Grid container spacing={configs.spacing || 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n            {data.map((item, index) => {\r\n              const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n              const getterFunc = configs.elementWrapPropsGetter\r\n              const itemProps = getterFunc ? getterFunc({ data: item, index }) : configs.elementWrapProps || {}\r\n              return (\r\n                <Grid item key={key} {...size} {...itemProps}>\r\n                  <ElementComponent data={item} index={index} />\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </ViewModeModuleStyled>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n\r\nconst ViewModeModuleStyled = styled(Box)({\r\n  height: '100%',\r\n  width: '100%',\r\n  overflow: 'auto',\r\n  '&.auto-height': {\r\n    height: 'auto',\r\n    overflow: 'visible'\r\n  }\r\n})\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  autoHeight?: boolean\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    private rowSelectionModel: GridRowSelectionModel = []\r\n\r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n    }\r\n\r\n    private handleRowSelectionChange = (newSelection: GridRowSelectionModel) => {\r\n      this.rowSelectionModel = newSelection\r\n      this.props.configs?.onRowSelectionChange?.(newSelection as (string | number)[])\r\n      this.forceUpdate()\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns(nextProps.configs)\r\n      }\r\n      // Reset selection when data changed to avoid potential selection mismatch\r\n      if (checkValueDiff) {\r\n        this.rowSelectionModel = []\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) return null\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      return (\r\n        <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n          <DataGridCustom\r\n            hideFooter\r\n            // disableColumnSorting\r\n            disableColumnFilter\r\n            disableColumnMenu\r\n            checkboxSelection={this.props.configs?.enableRowSelection ?? false}\r\n            rowSelectionModel={this.rowSelectionModel}\r\n            onRowSelectionModelChange={this.handleRowSelectionChange}\r\n            getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n            rows={rows}\r\n            rowHeight={this.props.configs?.rowHeight}\r\n            columnHeaderHeight={48}\r\n            getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n            columns={this.columns}\r\n            disableColumnSelector\r\n            autoHeight={this.props.autoHeight}\r\n            {...this.props.slots?.dataGridProps}\r\n          />\r\n        </Stack>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n  autoHeight?: boolean\r\n}>((params: any) => {\r\n  const { theme, ownerState } = params as any\r\n  const autoHeight = ownerState?.autoHeight\r\n  return {\r\n    // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n    height: autoHeight ? 'auto' : '100%',\r\n    width: '100%',\r\n    display: autoHeight ? 'block' : 'flex',\r\n    flexDirection: autoHeight ? undefined : 'column',\r\n    '*': { boxSizing: 'border-box' },\r\n    '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n    '--custom-bg-color': theme.palette.background.paper,\r\n    '--DataGrid-rowBorderColor': 'transparent',\r\n    borderColor: 'transparent',\r\n    '.MuiDataGrid-cell': { '--rowBorderColor': 'transparent', display: 'flex', alignItems: 'center' },\r\n    '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': { outline: 'none' },\r\n    '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': { outline: 'none' },\r\n    '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': { outline: 'none' },\r\n    '.MuiDataGrid-columnHeaders': { backgroundColor: colors.grey[50], borderColor: 'transparent', borderRadius: '6px' },\r\n    '.MuiDataGrid-columnHeaderCheckbox': { display: 'flex', alignItems: 'center', justifyContent: 'center' },\r\n    '.MuiDataGrid-cellCheckbox': { display: 'flex', alignItems: 'center', justifyContent: 'center' },\r\n    '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n    '.MuiDataGrid-virtualScrollerContent': {\r\n      '.MuiDataGrid-row': {\r\n        borderRadius: '6px',\r\n        border: 'none',\r\n        transition: 'all 0.2s ease',\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        '.MuiDataGrid-cell': {\r\n          backgroundColor: 'var(--custom-bg-color)',\r\n          border: 'none',\r\n          borderTop: '1px dashed var(--custom-border-color)',\r\n          borderBottom: '1px dashed var(--custom-border-color)',\r\n          '&:first-of-type': { borderLeft: '1px dashed var(--custom-border-color)', borderRadius: '6px 0 0 6px' },\r\n          '&:last-of-type': { borderRight: '1px dashed var(--custom-border-color)', borderRadius: '0 6px 6px 0' }\r\n        },\r\n        '&:hover': {\r\n          '--custom-border-color': theme.palette.divider,\r\n          '--custom-bg-color': colors.grey[50],\r\n          transform: 'translateY(-1px)',\r\n          boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n          '.MuiDataGrid-cell': {\r\n            borderTopStyle: 'solid',\r\n            borderBottomStyle: 'solid',\r\n            '&:first-of-type': { borderLeftStyle: 'solid' },\r\n            '&:last-of-type': { borderRightStyle: 'solid' }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","ViewModeModuleStyled","className","autoHeight","Grid","_objectSpread","container","spacing","wrapProps","style","height","map","item","index","getElementId","toString","getterFunc","elementWrapPropsGetter","itemProps","elementWrapProps","styled","Box","width","overflow","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","newSelection","_this2$props$configs","_this2$props$configs$","rowSelectionModel","onRowSelectionChange","call","forceUpdate","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs$e","_this$props$configs3","_this$props$configs4","_this$props$configs5","_this$props$slots","length","rows","Stack","sx","flex","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","checkboxSelection","enableRowSelection","onRowSelectionModelChange","handleRowSelectionChange","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","justifyContent","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"gcAMMA,EAAkB,WAAP,OACfC,EAACC,EAAU,CAACC,QAAQ,YAAYC,MAAM,gBAAeC,SAAA,uBAExC,WASCC,IA6Cd,OAAOC,aA1CL,SAAAC,EAAYC,GAA8B,IAAAC,EAEoB,OAFpBC,OAAAH,IACxCE,EAAAE,EAAAJ,KAAAA,GAAMC,KACDI,iBAAmBJ,EAAMK,QAAQC,SAAWf,EAAWU,CAC9D,CAAC,OAAAM,EAAAR,EAL0BS,GAK1BC,EAAAV,EAAA,CAAA,CAAAW,IAAA,wBAAAC,MAED,SAAsBC,GACpB,IAAAC,EAAsDC,KAAKd,MAAMK,QAAhDU,EAAcF,EAAvBP,QAA4BU,EAAaC,EAAAJ,EAAAK,GACjDC,EAAiDP,EAAUP,QAA1Ce,EAAWD,EAApBb,QAAyBe,EAAWJ,EAAAE,EAAAG,GACnBP,IAAmBK,IAE1CN,KAAKV,iBAAmBQ,EAAUP,QAAQC,SAAWf,GAGvD,IAAMgC,EAAmBC,KAAKC,UAAUT,KAAmBQ,KAAKC,UAAUJ,GAE1E,OADsBG,KAAKC,UAAUX,KAAKd,MAAM0B,QAAUF,KAAKC,UAAUb,EAAUc,OAC3DH,CAC1B,GAAC,CAAAb,IAAA,SAAAC,MAED,WACE,IAAQP,EAAqBU,KAArBV,iBACRuB,EAA0Bb,KAAKd,MAAvB0B,EAAIC,EAAJD,KAAMrB,EAAOsB,EAAPtB,QACRuB,EAAOvB,EAAQuB,MAAQ,CAAEC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,GAAI,GAEzD,OACExC,EAACyC,EAAqB,CAAAC,UAAWpB,KAAKd,MAAMmC,WAAa,cAAgB,GACvEvC,SAAAJ,EAAC4C,EAAIC,EAAAA,EAAA,CAACC,WAAS,EAACC,QAASlC,EAAQkC,SAAW,GAAOlC,EAAQmC,WAAS,GAAA,CAAEC,MAAO,CAAEC,OAAQ,QACpF9C,SAAA8B,EAAKiB,IAAI,SAACC,EAAMC,GACf,IAAMnC,EAAML,EAAQyC,aAAezC,EAAQyC,aAAaF,GAAQC,EAAME,WAChEC,EAAa3C,EAAQ4C,uBACrBC,EAAYF,EAAaA,EAAW,CAAEtB,KAAMkB,EAAMC,MAAAA,IAAWxC,EAAQ8C,kBAAoB,CAAE,EACjG,OACE3D,EAAC4C,EAAIC,EAAAA,EAAAA,EAAA,CAACO,SAAmBhB,GAAUsB,GAAS,GAAA,CAAAtD,SAC1CJ,EAACY,GAAiBsB,KAAMkB,EAAMC,MAAOA,MADvBnC,EAInB,OAIT,IAAC,IAIL,CAEA,IAAMuB,EAAuBmB,EAAOC,EAAPD,CAAY,CACvCV,OAAQ,OACRY,MAAO,OACPC,SAAU,OACV,gBAAiB,CACfb,OAAQ,OACRa,SAAU,sBAeEC,IACd,IAAMC,EAAkB,SAACpD,GAAiD,IAAAqD,EAClEC,EAAuCD,QAAnCA,EAAmBrD,aAAO,EAAPA,EAASuD,mBAAOF,EAAAA,EAAI,CAAE,EAEnD,OADeG,OAAOC,KAAKH,GACbhB,IAAI,SAACoB,GACjB,IAAMC,EAASL,EAAKI,GACpB,OAAA1B,EAAA,CAAS0B,MAAOE,OAAOF,GAAQG,UAAU,GAAUF,EACrD,EACD,EA2DD,OAAOlE,aArDL,SAAAqE,EAAYnE,GAA4B,IAAAoE,EAEO,OAFPlE,OAAAiE,GACtCC,EAAAjE,EAAAgE,KAAAA,GAAMnE,IAAMqE,EAAAD,EAAA,UAJkB,IAAEC,EAAAD,EAAA,oBACiB,IAAEC,EAAAD,EAOlB,2BAAA,SAACE,GAAuC,IAAAC,EAAAC,EACzEJ,EAAKK,kBAAoBH,EACP,QAAlBC,EAAAH,EAAKpE,MAAMK,eAAO,IAAAkE,GAAsBC,QAAtBA,EAAlBD,EAAoBG,4BAApBF,IAAwCA,GAAxCA,EAAAG,KAAAJ,EAA2CD,GAC3CF,EAAKQ,gBANLR,EAAKR,QAAUH,EAAgBzD,EAAMK,SAAQ+D,CAC/C,CAAC,OAAA7D,EAAA4D,EAPwB3D,GAOxBC,EAAA0D,EAAA,CAAA,CAAAzD,IAAA,wBAAAC,MAQD,SAAsBC,GACpB,IAAMiE,EAAiBrD,KAAKC,UAAUX,KAAKd,MAAMW,SAAWa,KAAKC,UAAUb,EAAUD,OAC/EmE,EAAuBtD,KAAKC,UAAUX,KAAKd,MAAMK,WAAamB,KAAKC,UAAUb,EAAUP,SAQ7F,OAPIyE,IACFhE,KAAK8C,QAAUH,EAAgB7C,EAAUP,UAGvCwE,IACF/D,KAAK2D,kBAAoB,IAEpBI,GAAkBC,CAC3B,GAAC,CAAApE,IAAA,SAAAC,MAED,WAAM,IAAAoE,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAEJ,KADiBvE,KAAKd,MAAMK,SAAWwD,OAAOC,KAAgCiB,QAA5BA,UAAAC,EAAClE,KAAKd,MAAMK,eAAO,IAAA2E,OAAA,EAAlBA,EAAoBpB,eAAOmB,IAAAA,EAAAA,EAAI,IAAIO,OAAS,GAChF,OAAO,KACtB,IAAMC,EAAOzE,KAAKd,MAAMW,MACxB,OACEnB,EAACgG,EAAM,CAAAC,GAAI,CAAEC,KAAM,EAAGpC,MAAO,OAAQZ,OAAQ,OAAQiD,UAAW,SAC9D/F,SAAAJ,EAACoG,EAAcvD,EAAA,CACbwD,YAAU,EAEVC,qBAAmB,EACnBC,mBAAiB,EACjBC,0BAAiBf,UAAAC,EAAEpE,KAAKd,MAAMK,eAAO,IAAA6E,OAAA,EAAlBA,EAAoBe,0BAAkB,IAAAhB,GAAAA,EACzDR,kBAAmB3D,KAAK2D,kBACxByB,0BAA2BpF,KAAKqF,yBAChCC,SAA4BjB,QAApBA,EAAErE,KAAKd,MAAMK,eAAX8E,IAAkBA,OAAlBA,EAAAA,EAAoBiB,SAC9Bb,KAAMA,EACNc,UAA6BjB,QAApBA,EAAEtE,KAAKd,MAAMK,eAAX+E,IAAkBA,OAAlBA,EAAAA,EAAoBiB,UAC/BC,mBAAoB,GACpBC,cAAe,SAAFC,GAAmB,MAAQ,CAAEC,IAAVD,EAAdE,eAA8C,EAAI,EAAGC,OAAQ,EAAI,EACnF/C,QAAS9C,KAAK8C,QACdgD,uBACA,EAAAzE,WAAYrB,KAAKd,MAAMmC,YACH,QADakD,EAC7BvE,KAAKd,MAAM6G,aAAK,IAAAxB,OAAA,EAAhBA,EAAkByB,iBAI9B,IAAC,IAIL,CAEA,IAAMlB,EAAiBxC,EAAO2D,EAAU,CAAEC,kBAAmB,SAACC,GAAI,MAAc,eAATA,CAAqB,GAArE7D,CAEpB,SAAC8D,GACF,IAAQC,EAAsBD,EAAtBC,MAAOC,EAAeF,EAAfE,WACTjF,EAAaiF,aAAAA,EAAAA,EAAYjF,WAC/B,MAAO,CAELO,OAAQP,EAAa,OAAS,OAC9BmB,MAAO,OACP+D,QAASlF,EAAa,QAAU,OAChCmF,cAAenF,OAAaoF,EAAY,SACxC,IAAK,CAAEC,UAAW,cAClB,wBAAyB,4BACzB,oBAAqBL,EAAMM,QAAQC,WAAWC,MAC9C,4BAA6B,cAC7BC,YAAa,cACb,oBAAqB,CAAE,mBAAoB,cAAeP,QAAS,OAAQQ,WAAY,UACvF,2DAA4D,CAAEC,QAAS,QACvE,yEAA0E,CAAEA,QAAS,QACrF,iFAAkF,CAAEA,QAAS,QAC7F,6BAA8B,CAAEC,gBAAiBC,EAAOC,KAAK,IAAKL,YAAa,cAAeM,aAAc,OAC5G,oCAAqC,CAAEb,QAAS,OAAQQ,WAAY,SAAUM,eAAgB,UAC9F,4BAA6B,CAAEd,QAAS,OAAQQ,WAAY,SAAUM,eAAgB,UACtF,+BAAgChG,EAAa,CAAEwD,UAAW,GAAM,CAAED,KAAM,EAAGC,UAAW,GACtF,sCAAuC,CACrC,mBAAoB,CAClBuC,aAAc,MACdE,OAAQ,OACRC,WAAY,gBACZN,gBAAiB,yBACjB,oBAAqB,CACnBA,gBAAiB,yBACjBK,OAAQ,OACRE,UAAW,wCACXC,aAAc,wCACd,kBAAmB,CAAEC,WAAY,wCAAyCN,aAAc,eACxF,iBAAkB,CAAEO,YAAa,wCAAyCP,aAAc,gBAE1F,UAAW,CACT,wBAAyBf,EAAMM,QAAQiB,QACvC,oBAAqBV,EAAOC,KAAK,IACjCU,UAAW,mBACXC,UAAW,wCACX,oBAAqB,CACnBC,eAAgB,QAChBC,kBAAmB,QACnB,kBAAmB,CAAEC,gBAAiB,SACtC,iBAAkB,CAAEC,iBAAkB,aAMlD"}
+{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel, GridRowSelectionModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n  autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\n      return (\r\n        <ViewModeModuleStyled className={this.props.autoHeight ? 'auto-height' : ''}>\r\n          <Grid container spacing={configs.spacing || 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n            {data.map((item, index) => {\r\n              const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n              const getterFunc = configs.elementWrapPropsGetter\r\n              const itemProps = getterFunc ? getterFunc({ data: item, index }) : configs.elementWrapProps || {}\r\n              return (\r\n                <Grid item key={key} {...size} {...itemProps}>\r\n                  <ElementComponent data={item} index={index} />\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </ViewModeModuleStyled>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n\r\nconst ViewModeModuleStyled = styled(Box)({\r\n  height: '100%',\r\n  width: '100%',\r\n  overflow: 'auto',\r\n  paddingBottom: '16px',\r\n  '&.auto-height': {\r\n    height: 'auto',\r\n    overflow: 'visible'\r\n  }\r\n})\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  autoHeight?: boolean\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    private internalRowSelectionModel: GridRowSelectionModel = []\r\n\r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n      // Initialize internal state from props if provided\r\n      if (props.configs?.rowSelectionModel) {\r\n        this.internalRowSelectionModel = props.configs.rowSelectionModel\r\n      }\r\n    }\r\n\r\n    private handleRowSelectionChange = (newSelection: GridRowSelectionModel) => {\r\n      // Only update internal state if not controlled from outside\r\n      if (this.props.configs?.rowSelectionModel === undefined) {\r\n        this.internalRowSelectionModel = newSelection\r\n      }\r\n      this.props.configs?.onRowSelectionChange?.(newSelection as (string | number)[])\r\n      this.forceUpdate()\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns(nextProps.configs)\r\n      }\r\n      // Reset selection when data changed to avoid potential selection mismatch (only if uncontrolled)\r\n      if (checkValueDiff && nextProps.configs?.rowSelectionModel === undefined) {\r\n        this.internalRowSelectionModel = []\r\n      }\r\n      // Sync internal state with external prop if controlled\r\n      if (nextProps.configs?.rowSelectionModel !== undefined) {\r\n        this.internalRowSelectionModel = nextProps.configs.rowSelectionModel\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) return null\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      // Use external prop if provided (controlled), otherwise use internal state (uncontrolled)\r\n      const currentSelection = this.props.configs?.rowSelectionModel ?? this.internalRowSelectionModel\r\n      return (\r\n        <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n          <DataGridCustom\r\n            hideFooter\r\n            // disableColumnSorting\r\n            disableColumnFilter\r\n            disableColumnMenu\r\n            checkboxSelection={this.props.configs?.enableRowSelection ?? false}\r\n            rowSelectionModel={currentSelection}\r\n            onRowSelectionModelChange={this.handleRowSelectionChange}\r\n            getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n            rows={rows}\r\n            rowHeight={this.props.configs?.rowHeight}\r\n            columnHeaderHeight={48}\r\n            getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n            columns={this.columns}\r\n            disableColumnSelector\r\n            autoHeight={this.props.autoHeight}\r\n            {...this.props.slots?.dataGridProps}\r\n          />\r\n        </Stack>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n  autoHeight?: boolean\r\n}>((params: any) => {\r\n  const { theme, ownerState } = params as any\r\n  const autoHeight = ownerState?.autoHeight\r\n  return {\r\n    // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n    height: autoHeight ? 'auto' : '100%',\r\n    width: '100%',\r\n    display: autoHeight ? 'block' : 'flex',\r\n    flexDirection: autoHeight ? undefined : 'column',\r\n    '*': { boxSizing: 'border-box' },\r\n    '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n    '--custom-bg-color': theme.palette.background.paper,\r\n    '--DataGrid-rowBorderColor': 'transparent',\r\n    borderColor: 'transparent',\r\n    '.MuiDataGrid-cell': { '--rowBorderColor': 'transparent', display: 'flex', alignItems: 'center' },\r\n    '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': { outline: 'none' },\r\n    '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': { outline: 'none' },\r\n    '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': { outline: 'none' },\r\n    '.MuiDataGrid-columnHeaders': { backgroundColor: colors.grey[50], borderColor: 'transparent', borderRadius: '6px' },\r\n    '.MuiDataGrid-columnHeaderCheckbox': { display: 'flex', alignItems: 'center', justifyContent: 'center' },\r\n    '.MuiDataGrid-cellCheckbox': { display: 'flex', alignItems: 'center', justifyContent: 'center' },\r\n    '.MuiDataGrid-virtualScroller': {\r\n      paddingBottom: '16px',\r\n      ...(autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 })\r\n    },\r\n    '.MuiDataGrid-virtualScrollerContent': {\r\n      '.MuiDataGrid-row': {\r\n        borderRadius: '6px',\r\n        border: 'none',\r\n        transition: 'all 0.2s ease',\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        '.MuiDataGrid-cell': {\r\n          backgroundColor: 'var(--custom-bg-color)',\r\n          border: 'none',\r\n          borderTop: '1px dashed var(--custom-border-color)',\r\n          borderBottom: '1px dashed var(--custom-border-color)',\r\n          '&:first-of-type': { borderLeft: '1px dashed var(--custom-border-color)', borderRadius: '6px 0 0 6px' },\r\n          '&:last-of-type': { borderRight: '1px dashed var(--custom-border-color)', borderRadius: '0 6px 6px 0' }\r\n        },\r\n        '&:hover': {\r\n          '--custom-border-color': theme.palette.divider,\r\n          '--custom-bg-color': colors.grey[50],\r\n          transform: 'translateY(-1px)',\r\n          boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n          '.MuiDataGrid-cell': {\r\n            borderTopStyle: 'solid',\r\n            borderBottomStyle: 'solid',\r\n            '&:first-of-type': { borderLeftStyle: 'solid' },\r\n            '&:last-of-type': { borderRightStyle: 'solid' }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","ViewModeModuleStyled","className","autoHeight","Grid","_objectSpread","container","spacing","wrapProps","style","height","map","item","index","getElementId","toString","getterFunc","elementWrapPropsGetter","itemProps","elementWrapProps","styled","Box","width","overflow","paddingBottom","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_props$configs","_this2","_defineProperty","newSelection","_this2$props$configs","_this2$props$configs2","_this2$props$configs3","undefined","rowSelectionModel","internalRowSelectionModel","onRowSelectionChange","call","forceUpdate","_nextProps$configs2","_nextProps$configs3","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs$r","_this$props$configs3","_this$props$configs$e","_this$props$configs4","_this$props$configs5","_this$props$configs6","_this$props$slots","length","rows","currentSelection","Stack","sx","flex","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","checkboxSelection","enableRowSelection","onRowSelectionModelChange","handleRowSelectionChange","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","justifyContent","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}

package/dist/src/data-view/view-mode.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.types.js","sources":["../../../src/data-view/view-mode.types.ts"],"sourcesContent":["import { MotionProps } from 'framer-motion'\r\nimport { Breakpoint, GridProps } from '@mui/material'\r\nimport { GridColDef, GridRowIdGetter } from '@mui/x-data-grid'\r\n\r\nexport type IViewModeValidModel = {\r\n  [key: string | symbol]: any\r\n}\r\n\r\nexport enum EViewMode {\r\n  List = 'list',\r\n  Module = 'module'\r\n}\r\n\r\nexport type IResponsiveSize = { [key in Breakpoint]?: number }\r\n\r\nexport interface IViewModeElementProps {\r\n  mode?: EViewMode\r\n}\r\n\r\nexport interface IViewModeItemProps<T> {\r\n  data: T\r\n  index: number\r\n}\r\n\r\nexport type GridColsDef<T extends IViewModeValidModel> = { [key in keyof T]?: Omit<GridColDef<T>, 'field'> }\r\n\r\nexport interface IViewModeListConfig<T extends IViewModeValidModel> {\r\n  getRowId?: GridRowIdGetter<T>\r\n  columns?: GridColsDef<T>\r\n  rowHeight?: number\r\n  enableRowSelection?: boolean\r\n  onRowSelectionChange?: (selectedRowIds: (string | number)[]) => void\r\n}\r\n\r\nexport type IViewModeModuleConfig<T> = {\r\n  getElementId?: (value: T) => string | number\r\n  Element?: React.ComponentType<IViewModeItemProps<T>>\r\n  elementWrapProps?: Omit<GridProps, 'size' | 'children'>\r\n  elementWrapPropsGetter?: (props: IViewModeItemProps<T>) => Omit<GridProps, 'size' | 'children'>\r\n  spacing?: GridProps['spacing']\r\n  size?: IResponsiveSize\r\n  wrapProps?: Omit<GridProps, 'size' | 'children'>\r\n}\r\n\r\nexport interface IViewModeConfigs<T extends IViewModeValidModel> {\r\n  list?: IViewModeListConfig<T>\r\n  module?: IViewModeModuleConfig<T>\r\n  NoData?: React.ComponentType<IViewModeElementProps>\r\n  ErrorData?: React.ComponentType<IViewModeElementProps>\r\n  Skeleton?: React.ComponentType<IViewModeElementProps>\r\n  wrapProps?: MotionProps\r\n  defaultValue?: EViewMode\r\n}\r\n"],"names":["EViewMode"],"mappings":"IAQYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
+{"version":3,"file":"view-mode.types.js","sources":["../../../src/data-view/view-mode.types.ts"],"sourcesContent":["import { MotionProps } from 'framer-motion'\r\nimport { Breakpoint, GridProps } from '@mui/material'\r\nimport { GridColDef, GridRowIdGetter } from '@mui/x-data-grid'\r\n\r\nexport type IViewModeValidModel = {\r\n  [key: string | symbol]: any\r\n}\r\n\r\nexport enum EViewMode {\r\n  List = 'list',\r\n  Module = 'module'\r\n}\r\n\r\nexport type IResponsiveSize = { [key in Breakpoint]?: number }\r\n\r\nexport interface IViewModeElementProps {\r\n  mode?: EViewMode\r\n}\r\n\r\nexport interface IViewModeItemProps<T> {\r\n  data: T\r\n  index: number\r\n}\r\n\r\nexport type GridColsDef<T extends IViewModeValidModel> = { [key in keyof T]?: Omit<GridColDef<T>, 'field'> }\r\n\r\nexport interface IViewModeListConfig<T extends IViewModeValidModel> {\r\n  getRowId?: GridRowIdGetter<T>\r\n  columns?: GridColsDef<T>\r\n  rowHeight?: number\r\n  enableRowSelection?: boolean\r\n  rowSelectionModel?: (string | number)[]\r\n  onRowSelectionChange?: (selectedRowIds: (string | number)[]) => void\r\n}\r\n\r\nexport type IViewModeModuleConfig<T> = {\r\n  getElementId?: (value: T) => string | number\r\n  Element?: React.ComponentType<IViewModeItemProps<T>>\r\n  elementWrapProps?: Omit<GridProps, 'size' | 'children'>\r\n  elementWrapPropsGetter?: (props: IViewModeItemProps<T>) => Omit<GridProps, 'size' | 'children'>\r\n  spacing?: GridProps['spacing']\r\n  size?: IResponsiveSize\r\n  wrapProps?: Omit<GridProps, 'size' | 'children'>\r\n}\r\n\r\nexport interface IViewModeConfigs<T extends IViewModeValidModel> {\r\n  list?: IViewModeListConfig<T>\r\n  module?: IViewModeModuleConfig<T>\r\n  NoData?: React.ComponentType<IViewModeElementProps>\r\n  ErrorData?: React.ComponentType<IViewModeElementProps>\r\n  Skeleton?: React.ComponentType<IViewModeElementProps>\r\n  wrapProps?: MotionProps\r\n  defaultValue?: EViewMode\r\n}\r\n"],"names":["EViewMode"],"mappings":"IAQYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

package/dist/src/data-view/view-mode.units.js

@@ -1,2 +1,2 @@
-import{defineProperty as r,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as n}from"react";import{styled as t,ToggleButtonGroup as i,colors as l,Box as c,Tooltip as d,ToggleButton as s,Typography as p}from"@mui/material";import u from"@mui/icons-material/ViewList";import g from"@mui/icons-material/ViewModule";import{EViewMode as h}from"./view-mode.types.js";var m=h.List,b=[{value:h.Module,icon:e(g,{}),label:"Card Grid"},{value:h.List,icon:e(u,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,t=void 0===a?function(){}:a,i=o&&Object.values(h).includes(o)?o:m,l=n(function(r){null!==r&&r!==i&&t(r)},[i,t]);return e(y,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map(function(r){return e(d,{title:r.label,arrow:!0,children:e(s,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)})})},v=function(){return f},y=t(i)(function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})}),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(p,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=t(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:l.grey[300],borderTopColor:"var(--color-orange, ".concat(l.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(l.blue[600],")")}}),C=function(r){var o=r.error;return a(M,{children:[e(p,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),e(p,{variant:"body2",children:o})]})},M=t(c)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),T=t("div")(function(r){var e=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":o({fill:"#3D4751"},e.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":o({fill:"#1D2126"},e.applyStyles("light",{fill:"#E8EAED"}))}}),Z=function(){return a(_,{children:[a(T,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[e("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),e("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),e("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),e("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),e(p,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),e(p,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},_=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),B=function(){return a(j,{children:[e(p,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),e(p,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},j=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"});t(c)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:l.red[700],borderRadius:1});export{C as LoadingError,Z as LoadingNoData,x as LoadingOverlay,B as LoadingWaiting,f as ViewModeButtons,v as createViewModeButtons,m as defaultViewMode};
+import{defineProperty as r,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as n,useCallback as t}from"react";import{styled as i,ToggleButtonGroup as l,colors as c,Box as d,Tooltip as s,ToggleButton as u,Typography as p}from"@mui/material";import m from"@mui/icons-material/ViewList";import g from"@mui/icons-material/ViewModule";import{EViewMode as h}from"./view-mode.types.js";var b=h.List,f=[{value:h.Module,icon:o(g,{}),label:"Card Grid"},{value:h.List,icon:o(m,{}),label:"Detailed List"}],v=function(r){var e=r.value,a=r.onChange,i=void 0===a?function(){}:a,l=e&&Object.values(h).includes(e)?e:b,c=n(null),d=t(function(r){c.current&&clearTimeout(c.current),c.current=setTimeout(function(){null!==r&&r!==l&&i(r)},250)},[l,i]);return o(x,{size:"small",value:l,exclusive:!0,onChange:function(r,e){return d(e)},children:f.map(function(r){return o(s,{title:r.label,arrow:!0,children:o(u,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)})})},y=function(){return v},x=i(l)(function(e){var o=e.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:c.common.white,backgroundColor:"var(--color-orange, ".concat(c.blue[600],")"),borderColor:"var(--color-orange, ".concat(c.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(c.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(c.blue[600],")")}}}},o.breakpoints.down("md"),{display:"none"})}),w=function(r){return o(C,e(e({},r),{},{children:a(d,{className:"loading-overlay__content",children:[o(d,{className:"loading-overlay__spinner"}),o(p,{variant:"body2",color:"primary",children:"Loading..."})]})}))},C=i(d)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:c.grey[300],borderTopColor:"var(--color-orange, ".concat(c.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(c.blue[600],")")}}),M=function(r){var e=r.error;return a(T,{children:[o(p,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),o(p,{variant:"body2",children:e})]})},T=i(d)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),Z=i("div")(function(r){var o=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":e({fill:"#3D4751"},o.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":e({fill:"#1D2126"},o.applyStyles("light",{fill:"#E8EAED"}))}}),_=function(){return a(B,{children:[a(Z,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[o("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),o("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),o("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),o("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),o(p,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),o(p,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},B=i(d)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:c.grey[400],borderRadius:"6px"}),j=function(){return a(H,{children:[o(p,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),o(p,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},H=i(d)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:c.grey[400],borderRadius:"6px"});i(d)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:c.red[700],borderRadius:1});export{M as LoadingError,_ as LoadingNoData,w as LoadingOverlay,j as LoadingWaiting,v as ViewModeButtons,y as createViewModeButtons,b as defaultViewMode};
 //# sourceMappingURL=view-mode.units.js.map

package/dist/src/data-view/view-mode.units.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.units.js","sources":["../../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n  { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n  { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n  value?: EViewMode\r\n  onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n  const { value, onChange = () => {} } = props\r\n  const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n  const handleChange = useCallback(\r\n    (newValue: EViewMode | null) => {\r\n      if (newValue !== null && newValue !== normalizedValue) {\r\n        onChange(newValue)\r\n      }\r\n    },\r\n    [normalizedValue, onChange]\r\n  )\r\n\r\n  return (\r\n    <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n      {viewModes.map((mode) => (\r\n        <Tooltip key={mode.value} title={mode.label} arrow>\r\n          <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n            {mode.icon}\r\n          </ToggleButton>\r\n        </Tooltip>\r\n      ))}\r\n    </ToggleButtonGroupCustom>\r\n  )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n  flex: '0 0 auto',\r\n  '.MuiToggleButtonGroup-grouped': {\r\n    '&.Mui-selected': {\r\n      color: colors.common.white,\r\n      backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n      borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n      '&.MuiToggleButtonGroup-lastButton': {\r\n        borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n      },\r\n      '&:hover': {\r\n        backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n      }\r\n    }\r\n  },\r\n  [theme.breakpoints.down('md')]: {\r\n    display: 'none'\r\n  }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n  <LoadingOverlayWrap {...props}>\r\n    <Box className='loading-overlay__content'>\r\n      <Box className='loading-overlay__spinner' />\r\n      <Typography variant='body2' color='primary'>\r\n        Loading...\r\n      </Typography>\r\n    </Box>\r\n  </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  right: 0,\r\n  bottom: 0,\r\n  bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n  display: 'flex',\r\n  alignItems: 'flex-start',\r\n  justifyContent: 'center',\r\n  zIndex: 1000,\r\n  paddingTop: '20vh',\r\n  backdropFilter: 'blur(2px)',\r\n  '.loading-overlay__content': {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '10px'\r\n  },\r\n  '.loading-overlay__spinner': {\r\n    width: 24,\r\n    height: 24,\r\n    border: '3px solid',\r\n    borderColor: colors.grey[300],\r\n    borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n    borderRadius: '50%',\r\n    '@keyframes spin': {\r\n      '0%': { transform: 'rotate(0deg)' },\r\n      '100%': { transform: 'rotate(360deg)' }\r\n    },\r\n    animation: 'spin 1s linear infinite'\r\n  },\r\n  '.MuiTypography-root': {\r\n    color: `var(--color-orange, ${colors.blue[600]})`\r\n  }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n  <LoadingErrorWrap>\r\n    <Typography variant='h6' gutterBottom>\r\n      An error occurred\r\n    </Typography>\r\n    <Typography variant='body2'>{error}</Typography>\r\n  </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n  marginTop: 3,\r\n  padding: 3,\r\n  border: '1px solid',\r\n  borderColor: 'error.main',\r\n  borderRadius: 1,\r\n  bgcolor: 'error.light',\r\n  color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  height: '100%',\r\n  '& .no-rows-primary': { fill: '#3D4751', ...theme.applyStyles('light', { fill: '#AEB8C2' }) },\r\n  '& .no-rows-secondary': { fill: '#1D2126', ...theme.applyStyles('light', { fill: '#E8EAED' }) }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n  <LoadingNoDataWrap>\r\n    <StyledGridOverlay>\r\n      <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n        />\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n        />\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n        />\r\n        <path\r\n          className='no-rows-secondary'\r\n          d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n        />\r\n      </svg>\r\n      <Typography variant='h6' color='text.secondary' gutterBottom>\r\n        No data available\r\n      </Typography>\r\n    </StyledGridOverlay>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      Try changing the filter or search keyword\r\n    </Typography>\r\n  </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n  marginTop: '8px',\r\n  padding: '24px 12px',\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.grey[400],\r\n  borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n  <LoadingWaitingWrap>\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  </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n  marginTop: '8px',\r\n  padding: '24px 12px',\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.grey[400],\r\n  borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n  <LoadingMissingConfigWrap>\r\n    <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n      Missing Configuration\r\n    </Typography>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n    </Typography>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      Please contact support for assistance.\r\n    </Typography>\r\n  </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n  marginTop: 3,\r\n  padding: 4,\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.red[700],\r\n  borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","red"],"mappings":"mcAQaA,IAAAA,EAAkBC,EAAUC,KAEnCC,EAAY,CAChB,CAAEC,MAAOH,EAAUI,OAAQC,KAAMC,EAACC,EAAiB,IAAEC,MAAO,aAC5D,CAAEL,MAAOH,EAAUC,KAAMI,KAAMC,EAACG,EAAe,IAAED,MAAO,kBAQ7CE,EAAsC,SAACC,GAClD,IAAQR,EAA+BQ,EAA/BR,MAAKS,EAA0BD,EAAxBE,SAAAA,OAAQ,IAAAD,EAAG,WAAQ,EAAAA,EAC5BE,EAAkBX,GAASY,OAAOC,OAAOhB,GAAWiB,SAASd,GAAsBA,EAAQJ,EAE3FmB,EAAeC,EACnB,SAACC,GACkB,OAAbA,GAAqBA,IAAaN,GACpCD,EAASO,EAEb,EACA,CAACN,EAAiBD,IAGpB,OACEP,EAACe,GAAwBC,KAAK,QAAQnB,MAAOW,EAAiBS,WAAS,EAACV,SAAU,SAACW,EAAGC,GAAC,OAAKP,EAAaO,EAAE,EAAAC,SACxGxB,EAAUyB,IAAI,SAACC,GAAI,OAClBtB,EAACuB,GAAyBC,MAAOF,EAAKpB,MAAOuB,kBAC3CzB,EAAC0B,GAAaV,KAAK,QAAQnB,MAAOyB,EAAKzB,MAAmB,aAAAyB,EAAKpB,MAAOyB,GAAI,CAAEC,EAAG,OAAOR,SACnFE,EAAKvB,QAFIuB,EAAKzB,MAKpB,IAGP,EAEagC,EAAwB,WAAH,OAASzB,CAAe,EAEpDW,EAA0Be,EAAOC,EAAPD,CAA0B,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAA,CAChEC,KAAM,WACN,gCAAiC,CAC/B,iBAAkB,CAChBC,MAAOC,EAAOC,OAAOC,MACrBC,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAO,KAC3DC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAO,KACvD,oCAAqC,CACnCC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAI,MAEtD,UAAW,CACTF,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAI,SAI7DT,EAAMW,YAAYC,KAAK,MAAQ,CAC9BC,QAAS,QACV,GAGUC,EAA+B,SAAC1C,GAAK,OAChDL,EAACgD,EAAkBC,EAAAA,KAAK5C,GAAK,GAAA,CAC3Be,SAAA8B,EAACC,EAAI,CAAAC,UAAU,2BAA0BhC,SAAA,CACvCpB,EAACmD,EAAG,CAACC,UAAU,6BACfpD,EAACqD,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,uCAIjB,EAGjBY,EAAqBlB,EAAOqB,EAAPrB,CAAY,CACrCyB,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,2BACTd,QAAS,OACTe,WAAY,aACZC,eAAgB,SAChBC,OAAQ,IACRC,WAAY,OACZC,eAAgB,YAChB,4BAA6B,CAC3BnB,QAAS,OACTe,WAAY,SACZK,IAAK,QAEP,4BAA6B,CAC3BC,MAAO,GACPC,OAAQ,GACRC,OAAQ,YACR1B,YAAaN,EAAOiC,KAAK,KACzBC,eAAc,uBAAA9B,OAAyBJ,EAAOK,KAAK,KAAO,KAC1D8B,aAAc,MACd,kBAAmB,CACjB,KAAM,CAAEC,UAAW,gBACnB,OAAQ,CAAEA,UAAW,mBAEvBC,UAAW,2BAEb,sBAAuB,CACrBtC,MAAK,uBAAAK,OAAyBJ,EAAOK,KAAK,KAAI,QAIrCiC,EAAsC,SAA1BC,GAAA,IAA6BC,EAAKD,EAALC,MAAK,OACzD3B,EAAC4B,EAAgB,CAAA1D,SAAA,CACfpB,EAACqD,EAAU,CAACC,QAAQ,KAAKyB,cAEZ,EAAA3D,SAAA,sBACbpB,EAACqD,EAAU,CAACC,QAAQ,QAASlC,SAAAyD,MACZ,EAGfC,EAAmBhD,EAAOqB,EAAPrB,CAAY,CACnCkD,UAAW,EACXC,QAAS,EACTZ,OAAQ,YACR1B,YAAa,aACb6B,aAAc,EACdZ,QAAS,cACTxB,MAAO,uBAGH8C,EAAoBpD,EAAO,MAAPA,CAAc,SAAAqD,GAAA,IAAGlD,EAAKkD,EAALlD,MAAK,MAAQ,CACtDa,QAAS,OACTsC,cAAe,SACfvB,WAAY,SACZC,eAAgB,SAChBM,OAAQ,OACR,qBAAoBnB,EAAA,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAC/E,uBAAsBpC,EAAA,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAClF,GAEYE,EAA2C,WAA9B,OACxBrC,EAACsC,EAAiB,CAAApE,SAAA,CAChB8B,EAACgC,EAAiB,CAAA9D,SAAA,CAChB8B,EAAK,MAAA,CAAAuC,MAAM,6BAA6BJ,KAAK,OAAOlB,MAAO,GAAIuB,QAAQ,cAAa,eAAA,EAAaC,UAAU,QACzGvE,SAAA,CAAApB,EAAA,OAAA,CACEoD,UAAU,kBACVwC,EAAE,qLAEJ5F,UACEoD,UAAU,kBACVwC,EAAE,wLAEJ5F,UACEoD,UAAU,kBACVwC,EAAE,yLAEJ5F,UACEoD,UAAU,oBACVwC,EAAE,4lBAGN5F,EAACqD,EAAU,CAACC,QAAQ,KAAKlB,MAAM,iBAAiB2C,cAEnC,EAAA3D,SAAA,yBAEfpB,EAACqD,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,iBAAgBhB,SAAA,gDAGhC,EAGhBoE,EAAoB1D,EAAOqB,EAAPrB,CAAY,CACpCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAGHsB,EAAqB,WAAP,OACzB5C,EAAC6C,aACC/F,EAACqD,GAAWC,QAAQ,KAAKlB,MAAM,eAAeT,GAAI,CAAEqE,WAAY,QAEnD5E,SAAA,wBACbpB,EAACqD,EAAU,CAACC,QAAQ,QAAQlB,MAAM,iBAErBhB,SAAA,2CACM,EAGjB2E,EAAqBjE,EAAOqB,EAAPrB,CAAY,CACrCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAiBiB1C,EAAOqB,EAAPrB,CAAY,CAC3CkD,UAAW,EACXC,QAAS,EACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAO4D,IAAI,KACxBzB,aAAc"}
+{"version":3,"file":"view-mode.units.js","sources":["../../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback, useEffect, useRef } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n  { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n  { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n  value?: EViewMode\r\n  onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n  const { value, onChange = () => {} } = props\r\n  const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n  const changeTimeoutRef = useRef<NodeJS.Timeout | null>(null)\r\n  const handleChangeDebound = useCallback(\r\n    (newValue: EViewMode | null) => {\r\n      if (changeTimeoutRef.current) {\r\n        clearTimeout(changeTimeoutRef.current)\r\n      }\r\n      changeTimeoutRef.current = setTimeout(() => {\r\n        if (newValue !== null && newValue !== normalizedValue) {\r\n          onChange(newValue)\r\n        }\r\n      }, 250)\r\n    },\r\n    [normalizedValue, onChange]\r\n  )\r\n\r\n  return (\r\n    <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChangeDebound(v)}>\r\n      {viewModes.map((mode) => (\r\n        <Tooltip key={mode.value} title={mode.label} arrow>\r\n          <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n            {mode.icon}\r\n          </ToggleButton>\r\n        </Tooltip>\r\n      ))}\r\n    </ToggleButtonGroupCustom>\r\n  )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n  flex: '0 0 auto',\r\n  '.MuiToggleButtonGroup-grouped': {\r\n    '&.Mui-selected': {\r\n      color: colors.common.white,\r\n      backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n      borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n      '&.MuiToggleButtonGroup-lastButton': {\r\n        borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n      },\r\n      '&:hover': {\r\n        backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n      }\r\n    }\r\n  },\r\n  [theme.breakpoints.down('md')]: {\r\n    display: 'none'\r\n  }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n  <LoadingOverlayWrap {...props}>\r\n    <Box className='loading-overlay__content'>\r\n      <Box className='loading-overlay__spinner' />\r\n      <Typography variant='body2' color='primary'>\r\n        Loading...\r\n      </Typography>\r\n    </Box>\r\n  </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  right: 0,\r\n  bottom: 0,\r\n  bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n  display: 'flex',\r\n  alignItems: 'flex-start',\r\n  justifyContent: 'center',\r\n  zIndex: 1000,\r\n  paddingTop: '20vh',\r\n  backdropFilter: 'blur(2px)',\r\n  '.loading-overlay__content': {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '10px'\r\n  },\r\n  '.loading-overlay__spinner': {\r\n    width: 24,\r\n    height: 24,\r\n    border: '3px solid',\r\n    borderColor: colors.grey[300],\r\n    borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n    borderRadius: '50%',\r\n    '@keyframes spin': {\r\n      '0%': { transform: 'rotate(0deg)' },\r\n      '100%': { transform: 'rotate(360deg)' }\r\n    },\r\n    animation: 'spin 1s linear infinite'\r\n  },\r\n  '.MuiTypography-root': {\r\n    color: `var(--color-orange, ${colors.blue[600]})`\r\n  }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n  <LoadingErrorWrap>\r\n    <Typography variant='h6' gutterBottom>\r\n      An error occurred\r\n    </Typography>\r\n    <Typography variant='body2'>{error}</Typography>\r\n  </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n  marginTop: 3,\r\n  padding: 3,\r\n  border: '1px solid',\r\n  borderColor: 'error.main',\r\n  borderRadius: 1,\r\n  bgcolor: 'error.light',\r\n  color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  height: '100%',\r\n  '& .no-rows-primary': { fill: '#3D4751', ...theme.applyStyles('light', { fill: '#AEB8C2' }) },\r\n  '& .no-rows-secondary': { fill: '#1D2126', ...theme.applyStyles('light', { fill: '#E8EAED' }) }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n  <LoadingNoDataWrap>\r\n    <StyledGridOverlay>\r\n      <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n        />\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n        />\r\n        <path\r\n          className='no-rows-primary'\r\n          d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n        />\r\n        <path\r\n          className='no-rows-secondary'\r\n          d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n        />\r\n      </svg>\r\n      <Typography variant='h6' color='text.secondary' gutterBottom>\r\n        No data available\r\n      </Typography>\r\n    </StyledGridOverlay>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      Try changing the filter or search keyword\r\n    </Typography>\r\n  </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n  marginTop: '8px',\r\n  padding: '24px 12px',\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.grey[400],\r\n  borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n  <LoadingWaitingWrap>\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  </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n  marginTop: '8px',\r\n  padding: '24px 12px',\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.grey[400],\r\n  borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n  <LoadingMissingConfigWrap>\r\n    <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n      Missing Configuration\r\n    </Typography>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n    </Typography>\r\n    <Typography variant='body2' color='text.secondary'>\r\n      Please contact support for assistance.\r\n    </Typography>\r\n  </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n  marginTop: 3,\r\n  padding: 4,\r\n  textAlign: 'center',\r\n  border: '1px dashed',\r\n  borderColor: colors.red[700],\r\n  borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","changeTimeoutRef","useRef","handleChangeDebound","useCallback","newValue","current","clearTimeout","setTimeout","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","red"],"mappings":"+cAQaA,IAAAA,EAAkBC,EAAUC,KAEnCC,EAAY,CAChB,CAAEC,MAAOH,EAAUI,OAAQC,KAAMC,EAACC,EAAiB,IAAEC,MAAO,aAC5D,CAAEL,MAAOH,EAAUC,KAAMI,KAAMC,EAACG,EAAe,IAAED,MAAO,kBAQ7CE,EAAsC,SAACC,GAClD,IAAQR,EAA+BQ,EAA/BR,MAAKS,EAA0BD,EAAxBE,SAAAA,OAAQ,IAAAD,EAAG,WAAQ,EAAAA,EAC5BE,EAAkBX,GAASY,OAAOC,OAAOhB,GAAWiB,SAASd,GAAsBA,EAAQJ,EAE3FmB,EAAmBC,EAA8B,MACjDC,EAAsBC,EAC1B,SAACC,GACKJ,EAAiBK,SACnBC,aAAaN,EAAiBK,SAEhCL,EAAiBK,QAAUE,WAAW,WACnB,OAAbH,GAAqBA,IAAaR,GACpCD,EAASS,EAEZ,EAAE,IACL,EACA,CAACR,EAAiBD,IAGpB,OACEP,EAACoB,GAAwBC,KAAK,QAAQxB,MAAOW,EAAiBc,WAAS,EAACf,SAAU,SAACgB,EAAGC,GAAC,OAAKV,EAAoBU,EAAE,EAAAC,SAC/G7B,EAAU8B,IAAI,SAACC,GAAI,OAClB3B,EAAC4B,GAAyBC,MAAOF,EAAKzB,MAAO4B,kBAC3C9B,EAAC+B,GAAaV,KAAK,QAAQxB,MAAO8B,EAAK9B,MAAmB,aAAA8B,EAAKzB,MAAO8B,GAAI,CAAEC,EAAG,OAAOR,SACnFE,EAAK5B,QAFI4B,EAAK9B,MAKpB,IAGP,EAEaqC,EAAwB,WAAH,OAAS9B,CAAe,EAEpDgB,EAA0Be,EAAOC,EAAPD,CAA0B,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAA,CAChEC,KAAM,WACN,gCAAiC,CAC/B,iBAAkB,CAChBC,MAAOC,EAAOC,OAAOC,MACrBC,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAO,KAC3DC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAO,KACvD,oCAAqC,CACnCC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAI,MAEtD,UAAW,CACTF,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAI,SAI7DT,EAAMW,YAAYC,KAAK,MAAQ,CAC9BC,QAAS,QACV,GAGUC,EAA+B,SAAC/C,GAAK,OAChDL,EAACqD,EAAkBC,EAAAA,KAAKjD,GAAK,GAAA,CAC3BoB,SAAA8B,EAACC,EAAI,CAAAC,UAAU,2BAA0BhC,SAAA,CACvCzB,EAACwD,EAAG,CAACC,UAAU,6BACfzD,EAAC0D,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,uCAIjB,EAGjBY,EAAqBlB,EAAOqB,EAAPrB,CAAY,CACrCyB,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,2BACTd,QAAS,OACTe,WAAY,aACZC,eAAgB,SAChBC,OAAQ,IACRC,WAAY,OACZC,eAAgB,YAChB,4BAA6B,CAC3BnB,QAAS,OACTe,WAAY,SACZK,IAAK,QAEP,4BAA6B,CAC3BC,MAAO,GACPC,OAAQ,GACRC,OAAQ,YACR1B,YAAaN,EAAOiC,KAAK,KACzBC,eAAc,uBAAA9B,OAAyBJ,EAAOK,KAAK,KAAO,KAC1D8B,aAAc,MACd,kBAAmB,CACjB,KAAM,CAAEC,UAAW,gBACnB,OAAQ,CAAEA,UAAW,mBAEvBC,UAAW,2BAEb,sBAAuB,CACrBtC,MAAK,uBAAAK,OAAyBJ,EAAOK,KAAK,KAAI,QAIrCiC,EAAsC,SAA1BC,GAAA,IAA6BC,EAAKD,EAALC,MAAK,OACzD3B,EAAC4B,EAAgB,CAAA1D,SAAA,CACfzB,EAAC0D,EAAU,CAACC,QAAQ,KAAKyB,cAEZ,EAAA3D,SAAA,sBACbzB,EAAC0D,EAAU,CAACC,QAAQ,QAASlC,SAAAyD,MACZ,EAGfC,EAAmBhD,EAAOqB,EAAPrB,CAAY,CACnCkD,UAAW,EACXC,QAAS,EACTZ,OAAQ,YACR1B,YAAa,aACb6B,aAAc,EACdZ,QAAS,cACTxB,MAAO,uBAGH8C,EAAoBpD,EAAO,MAAPA,CAAc,SAAAqD,GAAA,IAAGlD,EAAKkD,EAALlD,MAAK,MAAQ,CACtDa,QAAS,OACTsC,cAAe,SACfvB,WAAY,SACZC,eAAgB,SAChBM,OAAQ,OACR,qBAAoBnB,EAAA,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAC/E,uBAAsBpC,EAAA,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAClF,GAEYE,EAA2C,WAA9B,OACxBrC,EAACsC,EAAiB,CAAApE,SAAA,CAChB8B,EAACgC,EAAiB,CAAA9D,SAAA,CAChB8B,EAAK,MAAA,CAAAuC,MAAM,6BAA6BJ,KAAK,OAAOlB,MAAO,GAAIuB,QAAQ,cAAa,eAAA,EAAaC,UAAU,QACzGvE,SAAA,CAAAzB,EAAA,OAAA,CACEyD,UAAU,kBACVwC,EAAE,qLAEJjG,UACEyD,UAAU,kBACVwC,EAAE,wLAEJjG,UACEyD,UAAU,kBACVwC,EAAE,yLAEJjG,UACEyD,UAAU,oBACVwC,EAAE,4lBAGNjG,EAAC0D,EAAU,CAACC,QAAQ,KAAKlB,MAAM,iBAAiB2C,cAEnC,EAAA3D,SAAA,yBAEfzB,EAAC0D,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,iBAAgBhB,SAAA,gDAGhC,EAGhBoE,EAAoB1D,EAAOqB,EAAPrB,CAAY,CACpCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAGHsB,EAAqB,WAAP,OACzB5C,EAAC6C,aACCpG,EAAC0D,GAAWC,QAAQ,KAAKlB,MAAM,eAAeT,GAAI,CAAEqE,WAAY,QAEnD5E,SAAA,wBACbzB,EAAC0D,EAAU,CAACC,QAAQ,QAAQlB,MAAM,iBAErBhB,SAAA,2CACM,EAGjB2E,EAAqBjE,EAAOqB,EAAPrB,CAAY,CACrCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAiBiB1C,EAAOqB,EAAPrB,CAAY,CAC3CkD,UAAW,EACXC,QAAS,EACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAO4D,IAAI,KACxBzB,aAAc"}

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

@@ -11,6 +11,14 @@ export declare const activeFiltersPanelClasses: {
 };
 export interface IActiveFiltersPanelProps {
     loading?: boolean;
+    /** @default true */
+    enableSort?: boolean;
+    /** @default true */
+    enableFilter?: boolean;
+    /** @default true */
+    enableQuickSearch?: boolean;
+    /** @default true */
+    enablePagination?: boolean;
 }
 export interface IActiveFiltersPanelState<T> {
     data: IFilterState<T> | null;

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

@@ -5,6 +5,7 @@ import { IFilterBarConfigs, IFilterState, IPositionElement, IViewData } from './
 import { IFilterBarSlots } from './create.filter-bar';
 import { IScrollTrackingOptions } from './scroll-tracking';
 import { IPaginationBarConfigs } from './create.pagination-bar';
+import { IActiveFiltersPanelProps } from './create.active-filters-panel';
 export declare const filterBarClasses: {
     root: string;
     content: string;
@@ -21,6 +22,7 @@ export interface IDataViewSlots<T extends IViewModeValidModel> {
     filterWrapProps?: BoxProps;
     filterSlots?: IPositionElement;
     activeFiltersPanelSlots?: IPositionElement;
+    activeFiltersPanelProps?: Omit<IActiveFiltersPanelProps, 'loading'>;
     primaryInputSlots?: IFilterBarSlots;
     filterBarConfigs?: IFilterBarConfigs<T>;
     viewModeConfigs?: IViewModeConfigs<T>;

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

@@ -27,6 +27,7 @@ export interface IViewModeListConfig<T extends IViewModeValidModel> {
     columns?: GridColsDef<T>;
     rowHeight?: number;
     enableRowSelection?: boolean;
+    rowSelectionModel?: (string | number)[];
     onRowSelectionChange?: (selectedRowIds: (string | number)[]) => void;
 }
 export type IViewModeModuleConfig<T> = {

package/package.json

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