@alaarab/ogrid-react-fluent 2.5.4 → 2.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import'./index.css';import {useColumnHeaderFilterState,getColumnHeaderFilterStateParams,DateFilterContent,renderFilterContent,areGridRowPropsEqual,PaginationControlsBase,createOGrid,useListVirtualizer,STOP_PROPAGATION,useDataGridTableOrchestration,useColumnMeta,getCellRenderDescriptor,buildInlineEditorProps,buildPopoverEditorProps,POPOVER_ANCHOR_STYLE,resolveCellDisplayContent,resolveCellStyle,getCellInteractionProps,CURSOR_CELL_STYLE,CellErrorBoundary,GRID_ROOT_STYLE,PREVENT_DEFAULT,indexToColumnLetter,ROW_NUMBER_COLUMN_ID,ROW_NUMBER_COLUMN_WIDTH,getHeaderFilterConfig,MarchingAntsOverlay,FormulaRefOverlay,NOOP,getColumnHeaderMenuProps,useColumnChooserState,ColumnChooserContent,BaseInlineCellEditor,partitionColumnsForVirtualization,BaseDropIndicator,BaseEmptyState,GridContextMenu,BaseColumnHeaderMenu,StatusBar,BaseLoadingOverlay}from'@alaarab/ogrid-react';export{BaseColumnHeaderMenu,BaseDropIndicator,BaseEmptyState,BaseInlineCellEditor,BaseLoadingOverlay,CELL_PADDING,CHECKBOX_COLUMN_WIDTH,COLUMN_HEADER_MENU_ITEMS,CURSOR_CELL_STYLE,CellErrorBoundary,DEFAULT_MIN_COLUMN_WIDTH,DateFilterContent,EmptyState,GRID_BORDER_RADIUS,GRID_CONTEXT_MENU_ITEMS,GRID_ROOT_STYLE,GridContextMenu,MAX_PAGE_BUTTONS,MarchingAntsOverlay,NOOP,OGridLayout,PAGE_SIZE_OPTIONS,POPOVER_ANCHOR_STYLE,PREVENT_DEFAULT,ROW_NUMBER_COLUMN_WIDTH,STOP_PROPAGATION,SideBar,StatusBar,UndoRedoStack,areGridRowPropsEqual,booleanParser,buildCsvHeader,buildCsvRows,buildHeaderRows,buildInlineEditorProps,buildPopoverEditorProps,clampSelectionToBounds,computeAggregations,computeAutoScrollSpeed,computeTabNavigation,createOGrid,currencyParser,dateParser,deriveFilterOptionsFromData,editorInputStyle,editorWrapperStyle,emailParser,escapeCsvValue,exportToCsv,findCtrlArrowTarget,flattenColumns,formatCellValueForTsv,formatSelectionAsTsv,formatShortcut,getCellInteractionProps,getCellRenderDescriptor,getCellValue,getColumnHeaderFilterStateParams,getColumnHeaderMenuItems,getContextMenuHandlers,getDataGridStatusBarConfig,getDateFilterContentProps,getFilterField,getHeaderFilterConfig,getMultiSelectFilterFields,getPaginationViewModel,getStatusBarParts,isInSelectionRange,isRowInRange,mergeFilter,normalizeSelectionRange,numberParser,parseTsvClipboard,parseValue,processClientSideData,rangesEqual,renderFilterContent,resolveCellDisplayContent,resolveCellStyle,richSelectDropdownStyle,richSelectNoMatchesStyle,richSelectOptionHighlightedStyle,richSelectOptionStyle,richSelectWrapperStyle,selectChevronStyle,selectDisplayStyle,selectEditorStyle,toUserLike,triggerCsvDownload,useActiveCell,useCellEditing,useCellSelection,useClipboard,useColumnChooserState,useColumnHeaderFilterState,useColumnMeta,useColumnReorder,useColumnResize,useContextMenu,useDataGridState,useDataGridTableOrchestration,useDateFilterState,useDebounce,useFillHandle,useFilterOptions,useInlineCellEditorState,useKeyboardNavigation,useLatestRef,useListVirtualizer,useMultiSelectFilterState,useOGrid,usePaginationControls,usePeopleFilterState,useRichSelectState,useRowSelection,useSelectState,useSideBarState,useTableLayout,useTextFilterState,useUndoRedo,useVirtualScroll}from'@alaarab/ogrid-react';import*as Z from'react';import {useCallback,useRef,useEffect}from'react';import {createPortal}from'react-dom';import {Popover,PopoverSurface,TableRow,TableCell,Checkbox,Table,TableHeader,TableHeaderCell,Select,Button,TableBody}from'@fluentui/react-components';import {FilterRegular,ChevronDoubleRightRegular,ChevronRightRegular,ChevronLeftRegular,ChevronDoubleLeftRegular,SearchRegular,ChevronUpRegular,ChevronDownRegular,TableSettingsRegular}from'@fluentui/react-icons';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var e={columnHeader:"ogrid-fluent__ColumnHeaderFilter-module__columnHeader",headerContent:"ogrid-fluent__ColumnHeaderFilter-module__headerContent",columnName:"ogrid-fluent__ColumnHeaderFilter-module__columnName",headerActions:"ogrid-fluent__ColumnHeaderFilter-module__headerActions",filterActive:"ogrid-fluent__ColumnHeaderFilter-module__filterActive",filterIcon:"ogrid-fluent__ColumnHeaderFilter-module__filterIcon",filterOpen:"ogrid-fluent__ColumnHeaderFilter-module__filterOpen",filterBadge:"ogrid-fluent__ColumnHeaderFilter-module__filterBadge",filterPopover:"ogrid-fluent__ColumnHeaderFilter-module__filterPopover",popoverHeader:"ogrid-fluent__ColumnHeaderFilter-module__popoverHeader",popoverSearch:"ogrid-fluent__ColumnHeaderFilter-module__popoverSearch",nativeInputWrapper:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper",nativeInputIcon:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon",nativeInput:"ogrid-fluent__ColumnHeaderFilter-module__nativeInput",resultCount:"ogrid-fluent__ColumnHeaderFilter-module__resultCount",selectAllRow:"ogrid-fluent__ColumnHeaderFilter-module__selectAllRow",selectAllButton:"ogrid-fluent__ColumnHeaderFilter-module__selectAllButton",popoverOptions:"ogrid-fluent__ColumnHeaderFilter-module__popoverOptions",popoverOption:"ogrid-fluent__ColumnHeaderFilter-module__popoverOption",nativeCheckbox:"ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox",checkboxLabel:"ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel",personOption:"ogrid-fluent__ColumnHeaderFilter-module__personOption",loadingContainer:"ogrid-fluent__ColumnHeaderFilter-module__loadingContainer",filterSpinner:"ogrid-fluent__ColumnHeaderFilter-module__filterSpinner",noResults:"ogrid-fluent__ColumnHeaderFilter-module__noResults",selectedUserSection:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection",selectedUserLabel:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel",selectedUser:"ogrid-fluent__ColumnHeaderFilter-module__selectedUser",userInfo:"ogrid-fluent__ColumnHeaderFilter-module__userInfo",avatar:"ogrid-fluent__ColumnHeaderFilter-module__avatar",avatarImg:"ogrid-fluent__ColumnHeaderFilter-module__avatarImg",avatarInitials:"ogrid-fluent__ColumnHeaderFilter-module__avatarInitials",userText:"ogrid-fluent__ColumnHeaderFilter-module__userText",userSecondary:"ogrid-fluent__ColumnHeaderFilter-module__userSecondary",removeUserButton:"ogrid-fluent__ColumnHeaderFilter-module__removeUserButton",popoverActions:"ogrid-fluent__ColumnHeaderFilter-module__popoverActions",clearButton:"ogrid-fluent__ColumnHeaderFilter-module__clearButton",applyButton:"ogrid-fluent__ColumnHeaderFilter-module__applyButton"};var ye=({value:r,onValueChange:a,onApply:n,onClear:u,onPopoverClick:s,onInputFocus:p,onInputMouseDown:g,onInputClick:c,onInputKeyDown:v})=>jsxs(Fragment,{children:[jsx("div",{className:e.popoverSearch,onClick:s,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Enter search term...",value:r,onChange:i=>a(i.target.value),onKeyDown:i=>{v(i),i.key==="Enter"&&(i.preventDefault(),n());},onFocus:p,onMouseDown:g,onClick:c,autoComplete:"off",className:e.nativeInput})]})}),jsxs("div",{className:e.popoverActions,onClick:s,children:[jsx("button",{type:"button",className:e.clearButton,onClick:u,disabled:!r,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:n,children:"Apply"})]})]});ye.displayName="TextFilterPopover";var Je=40,Se=({searchText:r,onSearchChange:a,options:n,filteredOptions:u,selected:s,onOptionToggle:p,onSelectAll:g,onClearSelection:c,onApply:v,isLoading:i,onPopoverClick:h,onInputFocus:R,onInputMouseDown:G,onInputClick:S,onInputKeyDown:T})=>{let b=useListVirtualizer({count:u.length,itemHeight:Je});return jsxs(Fragment,{children:[jsxs("div",{className:e.popoverSearch,onClick:h,children:[jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Search...",value:r,onChange:y=>a(y.target.value),onFocus:R,onMouseDown:G,onClick:S,onKeyDown:T,autoComplete:"off",className:e.nativeInput})]}),jsxs("div",{className:e.resultCount,children:[u.length," of ",n.length," options"]})]}),jsxs("div",{className:e.selectAllRow,onClick:h,children:[jsxs("button",{type:"button",className:e.selectAllButton,onClick:g,children:["Select All (",u.length,")"]}),jsx("button",{type:"button",className:e.selectAllButton,onClick:c,children:"Clear"})]}),jsx("div",{ref:b.containerRef,onScroll:b.onScroll,className:e.popoverOptions,onClick:h,children:i?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Loading..."})]}):u.length===0?jsx("div",{className:e.noResults,children:"No options found"}):jsx("div",{style:{height:b.totalHeight,position:"relative"},children:b.visibleItems.map(({index:y,offsetTop:f})=>{let _=u[y],D=s.has(_);return jsxs("label",{className:e.popoverOption,style:{position:"absolute",top:f,width:"100%",height:Je,boxSizing:"border-box",display:"flex",alignItems:"center"},children:[jsx("input",{type:"checkbox",checked:D,onChange:l=>{l.stopPropagation(),p(_,l.target.checked);},className:e.nativeCheckbox}),jsx("span",{className:e.checkboxLabel,children:_})]},_)})})}),jsxs("div",{className:e.popoverActions,onClick:h,children:[jsx("button",{type:"button",className:e.clearButton,onClick:c,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:v,children:"Apply"})]})]})};Se.displayName="MultiSelectFilterPopover";function Qe(r){let a=r.trim().split(/\s+/);return a.length>=2?(a[0][0]+a[a.length-1][0]).toUpperCase():(a[0]?.[0]??"").toUpperCase()}var De=({selectedUser:r,searchText:a,onSearchChange:n,suggestions:u,isLoading:s,onUserSelect:p,onClearUser:g,onPopoverClick:c,inputRef:v})=>jsxs(Fragment,{children:[r&&jsxs("div",{className:e.selectedUserSection,onClick:c,children:[jsx("div",{className:e.selectedUserLabel,children:"Currently filtered by:"}),jsxs("div",{className:e.selectedUser,children:[jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:r.photo?jsx("img",{src:r.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(r.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:r.displayName}),jsx("div",{className:e.userSecondary,children:r.email})]})]}),jsx("button",{type:"button",className:e.removeUserButton,onClick:g,"aria-label":"Remove filter",children:jsx(FilterRegular,{})})]})]}),jsx("div",{className:e.popoverSearch,onClick:c,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{ref:v,type:"text",placeholder:"Search for a person...",value:a,onChange:i=>n(i.target.value),onFocus:i=>i.stopPropagation(),onMouseDown:i=>i.stopPropagation(),onClick:i=>i.stopPropagation(),onKeyDown:i=>i.stopPropagation(),autoComplete:"off",className:e.nativeInput})]})}),jsx("div",{className:e.popoverOptions,onClick:c,children:s&&a.trim()?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Searching..."})]}):u.length===0&&a.trim()?jsx("div",{className:e.noResults,children:"No results found"}):a.trim()?u.map(i=>jsx("div",{className:e.personOption,onClick:h=>{h.stopPropagation(),p(i);},children:jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:i.photo?jsx("img",{src:i.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(i.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:i.displayName}),jsx("div",{className:e.userSecondary,children:i.email})]})]})},i.id??i.email??i.displayName)):jsx("div",{className:e.noResults,children:"Type to search..."})}),r&&jsx("div",{className:e.popoverActions,onClick:c,children:jsx("button",{type:"button",className:e.clearButton,onClick:g,children:"Clear Filter"})})]});De.displayName="PeopleFilterPopover";var le=Z.memo(r=>{let{columnName:a,filterType:n,options:u,isLoadingOptions:s=false,selectedUser:p}=r,g=useColumnHeaderFilterState(getColumnHeaderFilterStateParams(r)),{headerRef:c,popoverRef:v,isFilterOpen:i,setFilterOpen:h,hasActiveFilter:R,handlers:G}=g,{handlePopoverClick:S,handleInputFocus:T,handleInputMouseDown:b,handleInputClick:y,handleInputKeyDown:f}=G,_=Z.useRef(null),D=Z.useMemo(()=>({renderMultiSelect:l=>jsx(Se,{searchText:l.searchText,onSearchChange:l.onSearchChange,options:l.options,filteredOptions:l.filteredOptions,selected:l.selected,onOptionToggle:l.onOptionToggle,onSelectAll:l.onSelectAll,onClearSelection:l.onClearSelection,onApply:l.onApply,isLoading:l.isLoading,onPopoverClick:S,onInputFocus:T,onInputMouseDown:b,onInputClick:y,onInputKeyDown:f}),renderText:l=>jsx(ye,{value:l.value,onValueChange:l.onValueChange,onApply:l.onApply,onClear:l.onClear,onPopoverClick:S,onInputFocus:T,onInputMouseDown:b,onInputClick:y,onInputKeyDown:f}),renderPeople:l=>jsx(De,{selectedUser:l.selectedUser,searchText:l.searchText,onSearchChange:l.onSearchChange,suggestions:l.suggestions,isLoading:l.isLoading,onUserSelect:l.onUserSelect,onClearUser:l.onClearUser,onPopoverClick:S,inputRef:l.inputRef}),renderDate:l=>jsx("div",{onClick:S,children:jsx(DateFilterContent,{tempDateFrom:l.tempDateFrom,setTempDateFrom:l.setTempDateFrom,tempDateTo:l.tempDateTo,setTempDateTo:l.setTempDateTo,onApply:l.onApply,onClear:l.onClear,classNames:{popoverActions:e.popoverActions,clearButton:e.clearButton,applyButton:e.applyButton}})})}),[S,T,b,y,f]);return jsxs("div",{className:e.columnHeader,ref:c,children:[jsx("div",{className:e.headerContent,children:jsx("span",{className:e.columnName,title:a,"data-header-label":true,children:a})}),jsx("div",{className:e.headerActions,children:n!=="none"&&jsxs(Fragment,{children:[jsxs("button",{ref:_,type:"button",className:`${e.filterIcon} ${R?e.filterActive:""} ${i?e.filterOpen:""}`,onClick:G.handleFilterIconClick,"aria-label":`Filter ${a}`,"aria-expanded":i,"aria-haspopup":"dialog",title:`Filter ${a}`,children:[jsx(FilterRegular,{}),R&&jsx("span",{className:e.filterBadge})]}),jsx(Popover,{open:i,onOpenChange:(l,W)=>{W.open||h(false);},positioning:{target:_.current??void 0,position:"below",align:"start",offset:4},trapFocus:false,children:jsxs(PopoverSurface,{ref:v,className:e.filterPopover,onClick:G.handlePopoverClick,style:{padding:0},children:[jsxs("div",{className:e.popoverHeader,children:["Filter: ",a]}),renderFilterContent(n,g,u??[],s,p,D)]})})]})})]})});le.displayName="ColumnHeaderFilter";var eo={content:"ogrid-fluent__ColumnHeaderMenu-module__content",item:"ogrid-fluent__ColumnHeaderMenu-module__item",separator:"ogrid-fluent__ColumnHeaderMenu-module__separator"};var or=r=>r.closest(".fui-FluentProvider")??document.body;function ce(r){return jsx(BaseColumnHeaderMenu,{...r,classNames:eo,getPortalTarget:or})}function ro(r){return jsx(BaseInlineCellEditor,{...r,renderCheckbox:(a,n,u)=>jsx(Checkbox,{checked:a,onChange:(s,p)=>n(!!p.checked),onKeyDown:s=>s.key==="Escape"&&(s.preventDefault(),u())})})}var o={tableScrollContent:"ogrid-fluent__DataGridTable-module__tableScrollContent",tableWidthAnchor:"ogrid-fluent__DataGridTable-module__tableWidthAnchor",tableWrapper:"ogrid-fluent__DataGridTable-module__tableWrapper",dataTable:"ogrid-fluent__DataGridTable-module__dataTable",groupHeaderCell:"ogrid-fluent__DataGridTable-module__groupHeaderCell",headerCellContent:"ogrid-fluent__DataGridTable-module__headerCellContent",headerMenuTrigger:"ogrid-fluent__DataGridTable-module__headerMenuTrigger",dropIndicator:"ogrid-fluent__DataGridTable-module__dropIndicator",resizeHandle:"ogrid-fluent__DataGridTable-module__resizeHandle",pinnedColLeft:"ogrid-fluent__DataGridTable-module__pinnedColLeft",pinnedColRight:"ogrid-fluent__DataGridTable-module__pinnedColRight",cellContent:"ogrid-fluent__DataGridTable-module__cellContent",activeCellContent:"ogrid-fluent__DataGridTable-module__activeCellContent",editingCellContent:"ogrid-fluent__DataGridTable-module__editingCellContent",cellInRange:"ogrid-fluent__DataGridTable-module__cellInRange",inRange:"ogrid-fluent__DataGridTable-module__inRange",cellCut:"ogrid-fluent__DataGridTable-module__cellCut",fillHandle:"ogrid-fluent__DataGridTable-module__fillHandle",selectionHeaderCellInner:"ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",selectionCellInner:"ogrid-fluent__DataGridTable-module__selectionCellInner",rowNumberHeaderCellInner:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",rowNumberCellInner:"ogrid-fluent__DataGridTable-module__rowNumberCellInner",columnLetterRow:"ogrid-fluent__DataGridTable-module__columnLetterRow",columnLetterCell:"ogrid-fluent__DataGridTable-module__columnLetterCell",statusBar:"ogrid-fluent__DataGridTable-module__statusBar",statusBarItem:"ogrid-fluent__DataGridTable-module__statusBarItem",statusBarLabel:"ogrid-fluent__DataGridTable-module__statusBarLabel",statusBarValue:"ogrid-fluent__DataGridTable-module__statusBarValue",contextMenu:"ogrid-fluent__DataGridTable-module__contextMenu",contextMenuItem:"ogrid-fluent__DataGridTable-module__contextMenuItem",contextMenuItemLabel:"ogrid-fluent__DataGridTable-module__contextMenuItemLabel",contextMenuItemShortcut:"ogrid-fluent__DataGridTable-module__contextMenuItemShortcut",contextMenuDivider:"ogrid-fluent__DataGridTable-module__contextMenuDivider",loadingOverlay:"ogrid-fluent__DataGridTable-module__loadingOverlay",loadingOverlayContent:"ogrid-fluent__DataGridTable-module__loadingOverlayContent",loadingOverlayText:"ogrid-fluent__DataGridTable-module__loadingOverlayText",loadingDimmed:"ogrid-fluent__DataGridTable-module__loadingDimmed",emptyStateInGrid:"ogrid-fluent__DataGridTable-module__emptyStateInGrid",emptyStateInGridTitle:"ogrid-fluent__DataGridTable-module__emptyStateInGridTitle",emptyStateInGridMessage:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessage",emptyStateInGridLink:"ogrid-fluent__DataGridTable-module__emptyStateInGridLink",spinner:"ogrid-fluent__DataGridTable-module__spinner","ogrid-spin":"ogrid-fluent__DataGridTable-module__ogrid-spin",paginationNav:"ogrid-fluent__DataGridTable-module__paginationNav",paginationInfo:"ogrid-fluent__DataGridTable-module__paginationInfo",paginationSize:"ogrid-fluent__DataGridTable-module__paginationSize",leafHeaderCellSpan:"ogrid-fluent__DataGridTable-module__leafHeaderCellSpan",selectionHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper",selectionCellWrapper:"ogrid-fluent__DataGridTable-module__selectionCellWrapper",rowNumberHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper",rowNumberCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberCellWrapper",selectedRow:"ogrid-fluent__DataGridTable-module__selectedRow",selectableGrid:"ogrid-fluent__DataGridTable-module__selectableGrid",stickyHeader:"ogrid-fluent__DataGridTable-module__stickyHeader",emptyStateInGridMessageSticky:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky",emptyStateInGridIcon:"ogrid-fluent__DataGridTable-module__emptyStateInGridIcon","density-compact":"ogrid-fluent__DataGridTable-module__density-compact","density-comfortable":"ogrid-fluent__DataGridTable-module__density-comfortable"};var nr={statusBar:o.statusBar,statusBarItem:o.statusBarItem,statusBarLabel:o.statusBarLabel,statusBarValue:o.statusBarValue};function ao(r){return jsx(StatusBar,{...r,classNames:nr})}var ur={contextMenu:o.contextMenu,contextMenuItem:o.contextMenuItem,contextMenuItemLabel:o.contextMenuItemLabel,contextMenuItemShortcut:o.contextMenuItemShortcut,contextMenuDivider:o.contextMenuDivider};function to(r){return jsx(GridContextMenu,{...r,classNames:ur})}var cr={emptyStateInGrid:o.emptyStateInGrid,emptyStateInGridInner:o.emptyStateInGridMessageSticky,emptyStateInGridIcon:o.emptyStateInGridIcon,emptyStateInGridTitle:o.emptyStateInGridTitle,emptyStateInGridMessage:o.emptyStateInGridMessage,emptyStateInGridLink:o.emptyStateInGridLink};function lo({emptyState:r}){return jsx(BaseEmptyState,{emptyState:r,classNames:cr,icon:"\u{1F4CB}"})}var mr={loadingOverlay:o.loadingOverlay,loadingOverlayContent:o.loadingOverlayContent,spinner:o.spinner,loadingOverlayText:o.loadingOverlayText};function no({message:r}){return jsx(BaseLoadingOverlay,{message:r,classNames:mr})}function io({dropIndicatorX:r,wrapperLeft:a}){return jsx(BaseDropIndicator,{dropIndicatorX:r,wrapperLeft:a,className:o.dropIndicator})}var go={padding:0,border:"none"};function Xr(r){let{item:a,rowIndex:n,rowId:u,isSelected:s,visibleCols:p,columnMeta:g,renderCellContent:c,handleSingleRowClick:v,handleRowCheckboxChange:i,lastMouseShiftRef:h,hasCheckboxCol:R,hasRowNumbersCol:G,rowNumberOffset:S,leftSpacerWidth:T,rightSpacerWidth:b,globalColIndexMap:y,rowNumWidth:f}=r;return jsxs(TableRow,{className:s?o.selectedRow:void 0,"data-row-id":u,onClick:v,"aria-selected":s||void 0,children:[R&&jsx(TableCell,{className:o.selectionCellWrapper,children:jsx("div",{className:o.selectionCellInner,"data-row-index":n,"data-col-index":0,onClick:STOP_PROPAGATION,children:jsx(Checkbox,{checked:s,onChange:(_,D)=>{i(u,!!D.checked,n,h.current);},"aria-label":`Select row ${n+1}`})})}),G&&jsx(TableCell,{className:o.rowNumberCellWrapper,style:f?{width:f,minWidth:f,maxWidth:f}:void 0,children:jsx("div",{className:o.rowNumberCellInner,children:S+n+1})}),T!=null&&T>0&&jsx("td",{style:{...go,width:T,minWidth:T},"aria-hidden":true}),p.map((_,D)=>{let l=y?y[D]:D;return jsx(TableCell,{"data-column-id":_.columnId,className:g.cellClasses[_.columnId]||void 0,style:g.cellStyles[_.columnId],children:c(a,_,n,l)},_.columnId)}),b!=null&&b>0&&jsx("td",{style:{...go,width:b,minWidth:b},"aria-hidden":true})]})}var jr=Z.memo(Xr,areGridRowPropsEqual);function Yr(r){let{virtualScrollEnabled:a,visibleRange:n,columnRange:u,items:s,getRowId:p,selectedRowIds:g,visibleCols:c,columnMeta:v,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:T,rowNumberOffset:b,selectionRange:y,activeCell:f,cutRange:_,copyRange:D,isDragging:l,editingCell:W,pinnedColumns:ne,rowNumWidth:_e}=r,M=Z.useMemo(()=>u?partitionColumnsForVirtualization(c,u,ne):null,[c,u,ne]),{rowCols:me,globalColIndexMap:fe,leftSpacerWidth:ie,rightSpacerWidth:be}=Z.useMemo(()=>{if(!M)return {rowCols:c,globalColIndexMap:void 0,leftSpacerWidth:void 0,rightSpacerWidth:void 0};let N=[...M.pinnedLeft,...M.virtualizedUnpinned,...M.pinnedRight],w=N.map(z=>c.indexOf(z));return {rowCols:N,globalColIndexMap:w,leftSpacerWidth:M.leftSpacerWidth,rightSpacerWidth:M.rightSpacerWidth}},[M,c]),J=(N,w)=>{let z=p(N);return jsx(jr,{item:N,rowIndex:w,rowId:z,isSelected:g.has(z),visibleCols:me,columnMeta:v,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:T,rowNumberOffset:b,selectionRange:y,activeCell:f,cutRange:_,copyRange:D,isDragging:l,editingRowId:W?.rowId??null,leftSpacerWidth:ie,rightSpacerWidth:be,globalColIndexMap:fe,rowNumWidth:_e},z)};return jsxs(TableBody,{children:[a&&n.offsetTop>0&&jsx("tr",{style:{height:n.offsetTop},"aria-hidden":true}),a?s.slice(n.startIndex,n.endIndex+1).map((N,w)=>J(N,n.startIndex+w)):s.map((N,w)=>J(N,w)),a&&n.offsetBottom>0&&jsx("tr",{style:{height:n.offsetBottom},"aria-hidden":true})]})}function qr(r){let a=useDataGridTableOrchestration({props:r}),{wrapperRef:n,tableContainerRef:u,lastMouseShiftRef:s,interaction:p,pinning:g,handleResizeStart:c,handleResizeDoubleClick:v,getColumnWidth:i,isReorderDragging:h,dropIndicatorX:R,handleHeaderMouseDown:G,virtualScrollEnabled:S,visibleRange:T,columnRange:b,onHorizontalScroll:y,items:f,getRowId:_,emptyState:D,rowSelection:l,isLoading:W,loadingMessage:ne,ariaLabel:_e,ariaLabelledBy:M,visibleColumns:me,columnOrder:fe,columnReorder:ie,density:be,rowHeight:J,rowNumberOffset:N,headerRows:w,allowOverflowX:z,fitToContent:He,showColumnLetters:bo,editCallbacks:de,interactionHandlers:Be,cellDescriptorInputRef:Me,cellDescriptorCacheRef:ze,pendingEditorValueRef:Oe,popoverAnchorElRef:Ce,handleSingleRowClick:Co,handlePasteVoid:vo,visibleCols:ve,totalColCount:Ee,hasCheckboxCol:ue,hasRowNumbersCol:Q,colOffset:Le,containerWidth:ho,minTableWidth:Ue,columnSizingOverrides:se,measuredColumnWidths:xo,selectedRowIds:Ae,handleRowCheckboxChange:To,handleSelectAll:yo,allSelected:So,someSelected:Do,editingCell:wo,setPopoverAnchorEl:We,cancelPopoverEdit:Ve,setActiveCell:$e,selectionRange:V,hasCellSelection:ko,handleGridKeyDown:Io,handleFillHandleMouseDown:Ke,handleCopy:Ro,handleCut:Go,cutRange:Xe,copyRange:je,canUndo:No,canRedo:Po,onUndo:Fo,onRedo:Ho,isDragging:Ye,menuPosition:he,closeContextMenu:Bo,headerFilterInput:Mo,statusBarConfig:X,showEmptyInGrid:ee,onCellError:qe,headerMenu:oe}=a,j=useColumnMeta({visibleCols:ve,getColumnWidth:i,columnSizingOverrides:se,measuredColumnWidths:xo,pinnedColumns:g.pinnedColumns,leftOffsets:g.leftOffsets,rightOffsets:g.rightOffsets,pinnedColLeftClass:o.pinnedColLeft,pinnedColRightClass:o.pinnedColRight,addStickyPosition:true}),zo=useCallback((x,C,P,$)=>{let d=getCellRenderDescriptor(x,C,P,$,Me.current,ze.current),Ze=_(x),Y;if(d.mode==="editing-inline")Y=jsx("div",{className:o.editingCellContent,children:jsx(ro,{...buildInlineEditorProps(x,C,d,de)})});else if(d.mode==="editing-popover"&&typeof C.cellEditor=="function"){let k=buildPopoverEditorProps(x,C,d,Oe.current,de),xe=C.cellEditor;Y=jsxs(Fragment,{children:[jsx("div",{ref:re=>{re&&We(re);},style:POPOVER_ANCHOR_STYLE,"aria-hidden":true}),jsx(Popover,{open:!!Ce.current,onOpenChange:(re,O)=>{O.open||Ve();},positioning:{target:Ce.current??void 0},children:jsx(PopoverSurface,{children:jsx(xe,{...k})})})]});}else {let k;if(d.columnType==="boolean"){let O=!!d.displayValue;k=jsx("input",{type:"checkbox",checked:O,disabled:!d.canEditAny,onChange:d.canEditAny?()=>{de.commitCellEdit(x,C.columnId,O,!O,d.rowIndex,d.globalColIndex);}:void 0,onClick:ge=>ge.stopPropagation(),style:{margin:0,cursor:d.canEditAny?"pointer":"default"},"aria-label":O?"Checked":"Unchecked"});}else {let O=resolveCellDisplayContent(C,x,d.displayValue),ge=resolveCellStyle(C,x,d.displayValue);k=ge?jsx("span",{style:ge,children:O}):O;}let xe=`${o.cellContent}${d.isActive?` ${o.activeCellContent}`:""}${d.isActive&&d.isInRange?` ${o.inRange}`:""}${d.isInRange&&!d.isActive?` ${o.cellInRange}`:""}${d.isInCutRange?` ${o.cellCut}`:""}${d.isInCopyRange?` ${o.cellCopied}`:""}`,re=getCellInteractionProps(d,C.columnId,Be);Y=jsxs("div",{className:xe,...re,style:d.canEditAny?CURSOR_CELL_STYLE:void 0,children:[k,d.canEditAny&&d.isSelectionEndCell&&jsx("div",{className:o.fillHandle,onPointerDown:Ke,"aria-label":"Fill handle"})]});}return jsx(CellErrorBoundary,{onError:qe,children:Y},`${Ze}-${C.columnId}`)},[de,Be,Ke,We,Ve,_,qe,Me,ze,Oe,Ce]);return jsxs("div",{style:GRID_ROOT_STYLE,children:[jsxs("div",{ref:n,tabIndex:0,onMouseDown:x=>{s.current=x.shiftKey;},onScroll:y?x=>y(x.target.scrollLeft):void 0,className:`${o.tableWrapper} ${l!=="none"?o.selectableGrid:""} ${o[`density-${be}`]||""}`,role:"region","aria-label":_e??(M?void 0:"Data grid"),"aria-labelledby":M,"data-ogrid-scroll-container":"","data-empty":ee?"true":void 0,"data-loading":W&&f.length===0?"true":void 0,"data-column-count":Ee,"data-overflow-x":z?"true":"false","data-container-width":ho,"data-min-table-width":Math.round(Ue),"data-has-selection":l!=="none"?"true":void 0,onContextMenu:PREVENT_DEFAULT,onKeyDown:Io,style:{"--data-table-column-count":Ee,"--data-table-width":ee?"100%":z||He?"fit-content":"100%","--data-table-min-width":ee?"100%":z||He?"max-content":"100%","--data-table-total-min-width":`${Ue}px`,...J?{"--ogrid-row-height":`${J}px`}:{}},children:[jsx("div",{className:o.tableScrollContent,children:jsx("div",{className:W&&f.length>0?o.loadingDimmed:void 0,children:jsxs("div",{className:o.tableWidthAnchor,ref:u,children:[jsxs(Table,{role:"grid",className:o.dataTable,"data-virtual-scroll":S?"":void 0,children:[jsxs(TableHeader,{className:a.stickyHeader?o.stickyHeader:void 0,children:[bo&&jsxs(TableRow,{children:[ue&&jsx("th",{className:o.columnLetterCell}),Q&&jsx("th",{className:o.columnLetterCell}),ve.map((x,C)=>jsx("th",{className:`${o.columnLetterCell}${j.hdrClasses[x.columnId]?` ${j.hdrClasses[x.columnId]}`:""}`,style:j.hdrStyles[x.columnId],children:indexToColumnLetter(C)},x.columnId))]}),w.map((x,C)=>jsxs(TableRow,{children:[C===w.length-1&&ue&&jsx(TableHeaderCell,{className:o.selectionHeaderCellWrapper,children:jsx("div",{className:o.selectionHeaderCellInner,children:jsx(Checkbox,{checked:So?true:Do?"mixed":false,onChange:(P,$)=>yo(!!$.checked),"aria-label":"Select all rows"})})},"__selection__"),C===0&&C<w.length-1&&ue&&jsx("th",{rowSpan:w.length-1},"__selection_placeholder__"),C===w.length-1&&Q&&(()=>{let P=se?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH;return jsxs(TableHeaderCell,{className:o.rowNumberHeaderCellWrapper,style:{width:P,minWidth:P,maxWidth:P},children:[jsx("div",{className:o.rowNumberHeaderCellInner,children:"#"}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical","aria-label":"Resize row number column",onPointerDown:$=>{$e(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c($,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}})]},"__row_number__")})(),C===0&&C<w.length-1&&Q&&jsx("th",{rowSpan:w.length-1},"__row_number_placeholder__"),x.map((P,$)=>{if(P.isGroup)return jsx("th",{colSpan:P.colSpan,className:o.groupHeaderCell,scope:"colgroup",children:P.label},$);if(!P.columnDef)return null;let d=P.columnDef,Y=r.sortBy===d.columnId?r.sortDirection==="asc"?"ascending":"descending":void 0;return jsxs(TableHeaderCell,{scope:"col","data-column-id":d.columnId,className:j.hdrClasses[d.columnId]||void 0,style:{...j.hdrStyles[d.columnId],...ie?{cursor:h?"grabbing":"grab"}:void 0},"aria-sort":Y,onPointerDown:ie?k=>G(d.columnId,k):void 0,children:[jsxs("div",{className:o.headerCellContent,children:[jsx(le,{...getHeaderFilterConfig(d,Mo)}),jsx("button",{className:o.headerMenuTrigger,onClick:k=>{k.stopPropagation(),oe.isOpen&&oe.openForColumn===d.columnId?oe.close():oe.open(d.columnId,k.currentTarget);},"aria-label":"Column options",title:"Column options",children:"\u22EE"})]}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical",onPointerDown:k=>{$e(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c(k,d);},onDoubleClick:k=>v(k,d),"aria-label":`Resize ${d.name}`})]},d.columnId)})]},C))]}),!ee&&jsx(Yr,{virtualScrollEnabled:S,visibleRange:T,columnRange:b,items:f,getRowId:_,selectedRowIds:Ae,visibleCols:ve,columnMeta:j,renderCellContent:zo,handleSingleRowClick:Co,handleRowCheckboxChange:To,lastMouseShiftRef:s,hasCheckboxCol:ue,hasRowNumbersCol:Q,rowNumberOffset:N,selectionRange:V,activeCell:p.activeCell,cutRange:Xe,copyRange:je,isDragging:Ye,editingCell:wo,pinnedColumns:g.pinnedColumns,rowNumWidth:Q?se?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH:void 0})]}),h&&R!=null&&jsx(io,{dropIndicatorX:R,wrapperLeft:n.current?.getBoundingClientRect().left??0}),jsx(MarchingAntsOverlay,{containerRef:u,selectionRange:V,copyRange:je,cutRange:Xe,colOffset:Le,items:f,visibleColumns:me,columnSizingOverrides:se,columnOrder:fe,isDragging:Ye}),r.formulaReferences&&r.formulaReferences.length>0&&jsx(FormulaRefOverlay,{containerRef:u,references:r.formulaReferences,colOffset:Le}),ee&&D&&jsx(lo,{emptyState:D})]})})}),he&&createPortal(jsx(to,{x:he.x,y:he.y,hasSelection:ko,canUndo:No,canRedo:Po,onUndo:Fo??NOOP,onRedo:Ho??NOOP,onCopy:Ro,onCut:Go,onPaste:vo,onSelectAll:a.interaction.handleSelectAllCells,onClose:Bo}),n.current?.closest(".fui-FluentProvider")??document.body),jsx(ce,{...getColumnHeaderMenuProps(oe)})]}),X&&jsx(ao,{totalCount:X.totalCount,filteredCount:X.filteredCount,selectedCount:X.selectedCount??Ae.size,selectedCellCount:V?(Math.abs(V.endRow-V.startRow)+1)*(Math.abs(V.endCol-V.startCol)+1):void 0,aggregation:X.aggregation,suppressRowCount:X.suppressRowCount}),W&&jsx(no,{message:ne})]})}var Ge=Z.memo(qr);var K={container:"ogrid-fluent__ColumnChooser-module__container",dropdown:"ogrid-fluent__ColumnChooser-module__dropdown",header:"ogrid-fluent__ColumnChooser-module__header",optionsList:"ogrid-fluent__ColumnChooser-module__optionsList",optionItem:"ogrid-fluent__ColumnChooser-module__optionItem",actions:"ogrid-fluent__ColumnChooser-module__actions"};var la=({columnId:r,columnName:a,checked:n,disabled:u,onChange:s})=>jsx(Checkbox,{id:`col-${r}`,label:a,checked:n,onChange:(p,g)=>s(g.checked===true),disabled:u}),na=({onClearAll:r,onSelectAll:a})=>jsxs("div",{className:K.actions,children:[jsx(Button,{appearance:"subtle",size:"small",onClick:r,children:"Clear All"}),jsx(Button,{appearance:"primary",size:"small",onClick:a,children:"Select All"})]}),ia={header:K.header,optionsList:K.optionsList,optionItem:K.optionItem},Fe=r=>{let{columns:a,visibleColumns:n,onVisibilityChange:u,onSetVisibleColumns:s,className:p}=r,g=useRef(null),c=useRef(null),{open:v,handleToggle:i,handleClose:h,handleCheckboxChange:R,handleSelectAll:G,handleClearAll:S,visibleCount:T,totalCount:b}=useColumnChooserState({columns:a,visibleColumns:n,onVisibilityChange:u,onSetVisibleColumns:s});useEffect(()=>{if(!v)return;let f=D=>{let l=D.target;c.current&&!c.current.contains(l)&&g.current&&!g.current.contains(l)&&h();},_=setTimeout(()=>{document.addEventListener("mousedown",f);},0);return ()=>{clearTimeout(_),document.removeEventListener("mousedown",f);}},[v,h]);let y=f=>_=>R(f)(_);return jsxs("div",{className:`${K.container} ${p||""}`,children:[jsxs(Button,{ref:g,appearance:"outline",icon:jsx(TableSettingsRegular,{}),onClick:i,"aria-expanded":v,"aria-haspopup":"listbox",children:["Column Visibility (",T," of ",b,")",v?jsx(ChevronUpRegular,{}):jsx(ChevronDownRegular,{})]}),v&&jsx("div",{ref:c,className:K.dropdown,children:jsx(ColumnChooserContent,{columns:a,visibleColumns:n,visibleCount:T,totalCount:b,handleSelectAll:G,handleClearAll:S,handleCheckboxChange:y,CheckboxItem:la,classNames:ia,Actions:na})})]})};var B={pagination:"ogrid-fluent__PaginationControls-module__pagination",paginationInfo:"ogrid-fluent__PaginationControls-module__paginationInfo",paginationControls:"ogrid-fluent__PaginationControls-module__paginationControls",navBtn:"ogrid-fluent__PaginationControls-module__navBtn",pageNumbers:"ogrid-fluent__PaginationControls-module__pageNumbers",pageBtn:"ogrid-fluent__PaginationControls-module__pageBtn",ellipsis:"ogrid-fluent__PaginationControls-module__ellipsis",pageSizeSelector:"ogrid-fluent__PaginationControls-module__pageSizeSelector",pageSizeLabel:"ogrid-fluent__PaginationControls-module__pageSizeLabel",pageSizeSelect:"ogrid-fluent__PaginationControls-module__pageSizeSelect"};var _a={first:jsx(ChevronDoubleLeftRegular,{}),prev:jsx(ChevronLeftRegular,{}),next:jsx(ChevronRightRegular,{}),last:jsx(ChevronDoubleRightRegular,{})},ma=({variant:r,onClick:a,disabled:n,"aria-label":u,className:s})=>jsx(Button,{appearance:"outline",shape:"circular",size:"small",icon:_a[r],onClick:a,disabled:n,"aria-label":u,className:s}),fa=({onClick:r,active:a,"aria-label":n,"aria-current":u,children:s,className:p})=>jsx(Button,{appearance:a?"primary":"outline",size:"small",shape:"rounded",onClick:r,"aria-label":n,"aria-current":u,className:p,children:s}),ba=({value:r,options:a,onChange:n,"aria-label":u,className:s})=>{let p=(g,c)=>n(Number(c.value));return jsx(Select,{value:String(r),onChange:p,size:"small",appearance:"outline","aria-label":u,className:s,children:a.map(g=>jsx("option",{value:g,children:g},g))})},Ca={NavButton:ma,PageButton:fa,PageSizeSelect:ba},va={pagination:B.pagination,paginationInfo:B.paginationInfo,paginationControls:B.paginationControls,pageNumbers:B.pageNumbers,ellipsis:B.ellipsis,navBtn:B.navBtn,pageBtn:B.pageBtn,pageSizeSelector:B.pageSizeSelector,pageSizeLabel:B.pageSizeLabel,pageSizeSelect:B.pageSizeSelect},pe=Z.memo(r=>jsx(PaginationControlsBase,{...r,slots:Ca,classNames:va}));pe.displayName="PaginationControls";var fo=createOGrid({DataGridTable:Ge,ColumnChooser:Fe,PaginationControls:pe});export{Fe as ColumnChooser,le as ColumnHeaderFilter,ce as ColumnHeaderMenu,Ge as DataGridTable,fo as OGrid,pe as PaginationControls};
|
|
1
|
+
import'./index.css';import {useColumnHeaderFilterState,getColumnHeaderFilterStateParams,DateFilterContent,renderFilterContent,areGridRowPropsEqual,PaginationControlsBase,createOGrid,useListVirtualizer,STOP_PROPAGATION,useDataGridTableOrchestration,useColumnMeta,getCellRenderDescriptor,buildInlineEditorProps,buildPopoverEditorProps,POPOVER_ANCHOR_STYLE,resolveCellDisplayContent,resolveCellStyle,getCellInteractionProps,CURSOR_CELL_STYLE,CellErrorBoundary,GRID_ROOT_STYLE,PREVENT_DEFAULT,indexToColumnLetter,ROW_NUMBER_COLUMN_ID,ROW_NUMBER_COLUMN_WIDTH,getHeaderFilterConfig,MarchingAntsOverlay,FormulaRefOverlay,NOOP,getColumnHeaderMenuProps,useColumnChooserState,ColumnChooserContent,BaseInlineCellEditor,partitionColumnsForVirtualization,BaseDropIndicator,BaseEmptyState,GridContextMenu,BaseColumnHeaderMenu,StatusBar,BaseLoadingOverlay}from'@alaarab/ogrid-react';export{BaseColumnHeaderMenu,BaseDropIndicator,BaseEmptyState,BaseInlineCellEditor,BaseLoadingOverlay,CELL_PADDING,CHECKBOX_COLUMN_WIDTH,COLUMN_HEADER_MENU_ITEMS,CURSOR_CELL_STYLE,CellErrorBoundary,DEFAULT_MIN_COLUMN_WIDTH,DateFilterContent,EmptyState,GRID_BORDER_RADIUS,GRID_CONTEXT_MENU_ITEMS,GRID_ROOT_STYLE,GridContextMenu,MAX_PAGE_BUTTONS,MarchingAntsOverlay,NOOP,OGridLayout,PAGE_SIZE_OPTIONS,POPOVER_ANCHOR_STYLE,PREVENT_DEFAULT,ROW_NUMBER_COLUMN_WIDTH,STOP_PROPAGATION,SideBar,StatusBar,UndoRedoStack,areGridRowPropsEqual,booleanParser,buildCsvHeader,buildCsvRows,buildHeaderRows,buildInlineEditorProps,buildPopoverEditorProps,clampSelectionToBounds,computeAggregations,computeAutoScrollSpeed,computeTabNavigation,createOGrid,currencyParser,dateParser,deriveFilterOptionsFromData,editorInputStyle,editorWrapperStyle,emailParser,escapeCsvValue,exportToCsv,findCtrlArrowTarget,flattenColumns,formatCellValueForTsv,formatSelectionAsTsv,formatShortcut,getCellInteractionProps,getCellRenderDescriptor,getCellValue,getColumnHeaderFilterStateParams,getColumnHeaderMenuItems,getContextMenuHandlers,getDataGridStatusBarConfig,getDateFilterContentProps,getFilterField,getHeaderFilterConfig,getMultiSelectFilterFields,getPaginationViewModel,getStatusBarParts,isInSelectionRange,isRowInRange,mergeFilter,normalizeSelectionRange,numberParser,parseTsvClipboard,parseValue,processClientSideData,rangesEqual,renderFilterContent,resolveCellDisplayContent,resolveCellStyle,richSelectDropdownStyle,richSelectNoMatchesStyle,richSelectOptionHighlightedStyle,richSelectOptionStyle,richSelectWrapperStyle,selectChevronStyle,selectDisplayStyle,selectEditorStyle,toUserLike,triggerCsvDownload,useActiveCell,useCellEditing,useCellSelection,useClipboard,useColumnChooserState,useColumnHeaderFilterState,useColumnMeta,useColumnReorder,useColumnResize,useContextMenu,useDataGridState,useDataGridTableOrchestration,useDateFilterState,useDebounce,useFillHandle,useFilterOptions,useInlineCellEditorState,useKeyboardNavigation,useLatestRef,useListVirtualizer,useMultiSelectFilterState,useOGrid,usePaginationControls,usePeopleFilterState,useRichSelectState,useRowSelection,useSelectState,useSideBarState,useTableLayout,useTextFilterState,useUndoRedo,useVirtualScroll}from'@alaarab/ogrid-react';import*as Z from'react';import {useCallback,useRef,useEffect}from'react';import {createPortal}from'react-dom';import {Popover,PopoverSurface,TableRow,TableCell,Checkbox,Table,TableHeader,TableHeaderCell,Select,Button,TableBody}from'@fluentui/react-components';import {FilterRegular,ChevronDoubleRightRegular,ChevronRightRegular,ChevronLeftRegular,ChevronDoubleLeftRegular,SearchRegular,ChevronUpRegular,ChevronDownRegular,TableSettingsRegular}from'@fluentui/react-icons';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var e={columnHeader:"ogrid-fluent__ColumnHeaderFilter-module__columnHeader",headerContent:"ogrid-fluent__ColumnHeaderFilter-module__headerContent",columnName:"ogrid-fluent__ColumnHeaderFilter-module__columnName",headerActions:"ogrid-fluent__ColumnHeaderFilter-module__headerActions",filterActive:"ogrid-fluent__ColumnHeaderFilter-module__filterActive",filterIcon:"ogrid-fluent__ColumnHeaderFilter-module__filterIcon",filterOpen:"ogrid-fluent__ColumnHeaderFilter-module__filterOpen",filterBadge:"ogrid-fluent__ColumnHeaderFilter-module__filterBadge",filterPopover:"ogrid-fluent__ColumnHeaderFilter-module__filterPopover",popoverHeader:"ogrid-fluent__ColumnHeaderFilter-module__popoverHeader",popoverSearch:"ogrid-fluent__ColumnHeaderFilter-module__popoverSearch",nativeInputWrapper:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper",nativeInputIcon:"ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon",nativeInput:"ogrid-fluent__ColumnHeaderFilter-module__nativeInput",resultCount:"ogrid-fluent__ColumnHeaderFilter-module__resultCount",selectAllRow:"ogrid-fluent__ColumnHeaderFilter-module__selectAllRow",selectAllButton:"ogrid-fluent__ColumnHeaderFilter-module__selectAllButton",popoverOptions:"ogrid-fluent__ColumnHeaderFilter-module__popoverOptions",popoverOption:"ogrid-fluent__ColumnHeaderFilter-module__popoverOption",nativeCheckbox:"ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox",checkboxLabel:"ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel",personOption:"ogrid-fluent__ColumnHeaderFilter-module__personOption",loadingContainer:"ogrid-fluent__ColumnHeaderFilter-module__loadingContainer",filterSpinner:"ogrid-fluent__ColumnHeaderFilter-module__filterSpinner",noResults:"ogrid-fluent__ColumnHeaderFilter-module__noResults",selectedUserSection:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection",selectedUserLabel:"ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel",selectedUser:"ogrid-fluent__ColumnHeaderFilter-module__selectedUser",userInfo:"ogrid-fluent__ColumnHeaderFilter-module__userInfo",avatar:"ogrid-fluent__ColumnHeaderFilter-module__avatar",avatarImg:"ogrid-fluent__ColumnHeaderFilter-module__avatarImg",avatarInitials:"ogrid-fluent__ColumnHeaderFilter-module__avatarInitials",userText:"ogrid-fluent__ColumnHeaderFilter-module__userText",userSecondary:"ogrid-fluent__ColumnHeaderFilter-module__userSecondary",removeUserButton:"ogrid-fluent__ColumnHeaderFilter-module__removeUserButton",popoverActions:"ogrid-fluent__ColumnHeaderFilter-module__popoverActions",clearButton:"ogrid-fluent__ColumnHeaderFilter-module__clearButton",applyButton:"ogrid-fluent__ColumnHeaderFilter-module__applyButton"};var ye=({value:r,onValueChange:a,onApply:n,onClear:u,onPopoverClick:s,onInputFocus:p,onInputMouseDown:g,onInputClick:c,onInputKeyDown:v})=>jsxs(Fragment,{children:[jsx("div",{className:e.popoverSearch,onClick:s,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Enter search term...",value:r,onChange:i=>a(i.target.value),onKeyDown:i=>{v(i),i.key==="Enter"&&(i.preventDefault(),n());},onFocus:p,onMouseDown:g,onClick:c,autoComplete:"off",className:e.nativeInput})]})}),jsxs("div",{className:e.popoverActions,onClick:s,children:[jsx("button",{type:"button",className:e.clearButton,onClick:u,disabled:!r,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:n,children:"Apply"})]})]});ye.displayName="TextFilterPopover";var Je=40,Se=({searchText:r,onSearchChange:a,options:n,filteredOptions:u,selected:s,onOptionToggle:p,onSelectAll:g,onClearSelection:c,onApply:v,isLoading:i,onPopoverClick:h,onInputFocus:R,onInputMouseDown:G,onInputClick:S,onInputKeyDown:T})=>{let b=useListVirtualizer({count:u.length,itemHeight:Je});return jsxs(Fragment,{children:[jsxs("div",{className:e.popoverSearch,onClick:h,children:[jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{type:"text",placeholder:"Search...",value:r,onChange:y=>a(y.target.value),onFocus:R,onMouseDown:G,onClick:S,onKeyDown:T,autoComplete:"off",className:e.nativeInput})]}),jsxs("div",{className:e.resultCount,children:[u.length," of ",n.length," options"]})]}),jsxs("div",{className:e.selectAllRow,onClick:h,children:[jsxs("button",{type:"button",className:e.selectAllButton,onClick:g,children:["Select All (",u.length,")"]}),jsx("button",{type:"button",className:e.selectAllButton,onClick:c,children:"Clear"})]}),jsx("div",{ref:b.containerRef,onScroll:b.onScroll,className:e.popoverOptions,onClick:h,children:i?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Loading..."})]}):u.length===0?jsx("div",{className:e.noResults,children:"No options found"}):jsx("div",{style:{height:b.totalHeight,position:"relative"},children:b.visibleItems.map(({index:y,offsetTop:f})=>{let _=u[y],D=s.has(_);return jsxs("label",{className:e.popoverOption,style:{position:"absolute",top:f,width:"100%",height:Je,boxSizing:"border-box",display:"flex",alignItems:"center"},children:[jsx("input",{type:"checkbox",checked:D,onChange:l=>{l.stopPropagation(),p(_,l.target.checked);},className:e.nativeCheckbox}),jsx("span",{className:e.checkboxLabel,children:_})]},_)})})}),jsxs("div",{className:e.popoverActions,onClick:h,children:[jsx("button",{type:"button",className:e.clearButton,onClick:c,children:"Clear"}),jsx("button",{type:"button",className:e.applyButton,onClick:v,children:"Apply"})]})]})};Se.displayName="MultiSelectFilterPopover";function Qe(r){let a=r.trim().split(/\s+/);return a.length>=2?(a[0][0]+a[a.length-1][0]).toUpperCase():(a[0]?.[0]??"").toUpperCase()}var De=({selectedUser:r,searchText:a,onSearchChange:n,suggestions:u,isLoading:s,onUserSelect:p,onClearUser:g,onPopoverClick:c,inputRef:v})=>jsxs(Fragment,{children:[r&&jsxs("div",{className:e.selectedUserSection,onClick:c,children:[jsx("div",{className:e.selectedUserLabel,children:"Currently filtered by:"}),jsxs("div",{className:e.selectedUser,children:[jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:r.photo?jsx("img",{src:r.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(r.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:r.displayName}),jsx("div",{className:e.userSecondary,children:r.email})]})]}),jsx("button",{type:"button",className:e.removeUserButton,onClick:g,"aria-label":"Remove filter",children:jsx(FilterRegular,{})})]})]}),jsx("div",{className:e.popoverSearch,onClick:c,children:jsxs("div",{className:e.nativeInputWrapper,children:[jsx(SearchRegular,{className:e.nativeInputIcon}),jsx("input",{ref:v,type:"text",placeholder:"Search for a person...",value:a,onChange:i=>n(i.target.value),onFocus:i=>i.stopPropagation(),onMouseDown:i=>i.stopPropagation(),onClick:i=>i.stopPropagation(),onKeyDown:i=>i.stopPropagation(),autoComplete:"off",className:e.nativeInput})]})}),jsx("div",{className:e.popoverOptions,onClick:c,children:s&&a.trim()?jsxs("div",{className:e.loadingContainer,children:[jsx("div",{className:e.filterSpinner}),jsx("span",{style:{fontSize:12,color:"var(--colorNeutralForeground2, #616161)"},children:"Searching..."})]}):u.length===0&&a.trim()?jsx("div",{className:e.noResults,children:"No results found"}):a.trim()?u.map(i=>jsx("div",{className:e.personOption,onClick:h=>{h.stopPropagation(),p(i);},children:jsxs("div",{className:e.userInfo,children:[jsx("div",{className:e.avatar,children:i.photo?jsx("img",{src:i.photo,alt:"",className:e.avatarImg}):jsx("span",{className:e.avatarInitials,children:Qe(i.displayName)})}),jsxs("div",{className:e.userText,children:[jsx("div",{children:i.displayName}),jsx("div",{className:e.userSecondary,children:i.email})]})]})},i.id??i.email??i.displayName)):jsx("div",{className:e.noResults,children:"Type to search..."})}),r&&jsx("div",{className:e.popoverActions,onClick:c,children:jsx("button",{type:"button",className:e.clearButton,onClick:g,children:"Clear Filter"})})]});De.displayName="PeopleFilterPopover";var le=Z.memo(r=>{let{columnName:a,filterType:n,options:u,isLoadingOptions:s=false,selectedUser:p}=r,g=useColumnHeaderFilterState(getColumnHeaderFilterStateParams(r)),{headerRef:c,popoverRef:v,isFilterOpen:i,setFilterOpen:h,hasActiveFilter:R,handlers:G}=g,{handlePopoverClick:S,handleInputFocus:T,handleInputMouseDown:b,handleInputClick:y,handleInputKeyDown:f}=G,_=Z.useRef(null),D=Z.useMemo(()=>({renderMultiSelect:l=>jsx(Se,{searchText:l.searchText,onSearchChange:l.onSearchChange,options:l.options,filteredOptions:l.filteredOptions,selected:l.selected,onOptionToggle:l.onOptionToggle,onSelectAll:l.onSelectAll,onClearSelection:l.onClearSelection,onApply:l.onApply,isLoading:l.isLoading,onPopoverClick:S,onInputFocus:T,onInputMouseDown:b,onInputClick:y,onInputKeyDown:f}),renderText:l=>jsx(ye,{value:l.value,onValueChange:l.onValueChange,onApply:l.onApply,onClear:l.onClear,onPopoverClick:S,onInputFocus:T,onInputMouseDown:b,onInputClick:y,onInputKeyDown:f}),renderPeople:l=>jsx(De,{selectedUser:l.selectedUser,searchText:l.searchText,onSearchChange:l.onSearchChange,suggestions:l.suggestions,isLoading:l.isLoading,onUserSelect:l.onUserSelect,onClearUser:l.onClearUser,onPopoverClick:S,inputRef:l.inputRef}),renderDate:l=>jsx("div",{onClick:S,children:jsx(DateFilterContent,{tempDateFrom:l.tempDateFrom,setTempDateFrom:l.setTempDateFrom,tempDateTo:l.tempDateTo,setTempDateTo:l.setTempDateTo,onApply:l.onApply,onClear:l.onClear,classNames:{popoverActions:e.popoverActions,clearButton:e.clearButton,applyButton:e.applyButton}})})}),[S,T,b,y,f]);return jsxs("div",{className:e.columnHeader,ref:c,children:[jsx("div",{className:e.headerContent,children:jsx("span",{className:e.columnName,title:a,"data-header-label":true,children:a})}),jsx("div",{className:e.headerActions,children:n!=="none"&&jsxs(Fragment,{children:[jsxs("button",{ref:_,type:"button",className:`${e.filterIcon} ${R?e.filterActive:""} ${i?e.filterOpen:""}`,onClick:G.handleFilterIconClick,"aria-label":`Filter ${a}`,"aria-expanded":i,"aria-haspopup":"dialog",title:`Filter ${a}`,children:[jsx(FilterRegular,{}),R&&jsx("span",{className:e.filterBadge})]}),jsx(Popover,{open:i,onOpenChange:(l,W)=>{W.open||h(false);},positioning:{target:_.current??void 0,position:"below",align:"start",offset:4},trapFocus:false,children:jsxs(PopoverSurface,{ref:v,className:e.filterPopover,onClick:G.handlePopoverClick,style:{padding:0},children:[jsxs("div",{className:e.popoverHeader,children:["Filter: ",a]}),renderFilterContent(n,g,u??[],s,p,D)]})})]})})]})});le.displayName="ColumnHeaderFilter";var eo={content:"ogrid-fluent__ColumnHeaderMenu-module__content",item:"ogrid-fluent__ColumnHeaderMenu-module__item",separator:"ogrid-fluent__ColumnHeaderMenu-module__separator"};var or=r=>r.closest(".fui-FluentProvider")??document.body;function ce(r){return jsx(BaseColumnHeaderMenu,{...r,classNames:eo,getPortalTarget:or})}function ro(r){return jsx(BaseInlineCellEditor,{...r,renderCheckbox:(a,n,u)=>jsx(Checkbox,{checked:a,onChange:(s,p)=>n(!!p.checked),onKeyDown:s=>s.key==="Escape"&&(s.preventDefault(),u())})})}var o={tableScrollContent:"ogrid-fluent__DataGridTable-module__tableScrollContent",tableWidthAnchor:"ogrid-fluent__DataGridTable-module__tableWidthAnchor",tableWrapper:"ogrid-fluent__DataGridTable-module__tableWrapper",dataTable:"ogrid-fluent__DataGridTable-module__dataTable",groupHeaderCell:"ogrid-fluent__DataGridTable-module__groupHeaderCell",headerCellContent:"ogrid-fluent__DataGridTable-module__headerCellContent",headerMenuTrigger:"ogrid-fluent__DataGridTable-module__headerMenuTrigger",dropIndicator:"ogrid-fluent__DataGridTable-module__dropIndicator",resizeHandle:"ogrid-fluent__DataGridTable-module__resizeHandle",pinnedColLeft:"ogrid-fluent__DataGridTable-module__pinnedColLeft",pinnedColRight:"ogrid-fluent__DataGridTable-module__pinnedColRight",cellContent:"ogrid-fluent__DataGridTable-module__cellContent",activeCellContent:"ogrid-fluent__DataGridTable-module__activeCellContent",editingCellContent:"ogrid-fluent__DataGridTable-module__editingCellContent",cellInRange:"ogrid-fluent__DataGridTable-module__cellInRange",inRange:"ogrid-fluent__DataGridTable-module__inRange",cellCut:"ogrid-fluent__DataGridTable-module__cellCut",fillHandle:"ogrid-fluent__DataGridTable-module__fillHandle",selectionHeaderCellInner:"ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",selectionCellInner:"ogrid-fluent__DataGridTable-module__selectionCellInner",rowNumberHeaderCellInner:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",rowNumberCellInner:"ogrid-fluent__DataGridTable-module__rowNumberCellInner",columnLetterRow:"ogrid-fluent__DataGridTable-module__columnLetterRow",columnLetterCell:"ogrid-fluent__DataGridTable-module__columnLetterCell",statusBar:"ogrid-fluent__DataGridTable-module__statusBar",statusBarItem:"ogrid-fluent__DataGridTable-module__statusBarItem",statusBarLabel:"ogrid-fluent__DataGridTable-module__statusBarLabel",statusBarValue:"ogrid-fluent__DataGridTable-module__statusBarValue",contextMenu:"ogrid-fluent__DataGridTable-module__contextMenu",contextMenuItem:"ogrid-fluent__DataGridTable-module__contextMenuItem",contextMenuItemLabel:"ogrid-fluent__DataGridTable-module__contextMenuItemLabel",contextMenuItemShortcut:"ogrid-fluent__DataGridTable-module__contextMenuItemShortcut",contextMenuDivider:"ogrid-fluent__DataGridTable-module__contextMenuDivider",loadingOverlay:"ogrid-fluent__DataGridTable-module__loadingOverlay",loadingOverlayContent:"ogrid-fluent__DataGridTable-module__loadingOverlayContent",loadingOverlayText:"ogrid-fluent__DataGridTable-module__loadingOverlayText",loadingDimmed:"ogrid-fluent__DataGridTable-module__loadingDimmed",emptyStateInGrid:"ogrid-fluent__DataGridTable-module__emptyStateInGrid",emptyStateInGridTitle:"ogrid-fluent__DataGridTable-module__emptyStateInGridTitle",emptyStateInGridMessage:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessage",emptyStateInGridLink:"ogrid-fluent__DataGridTable-module__emptyStateInGridLink",spinner:"ogrid-fluent__DataGridTable-module__spinner","ogrid-spin":"ogrid-fluent__DataGridTable-module__ogrid-spin",paginationNav:"ogrid-fluent__DataGridTable-module__paginationNav",paginationInfo:"ogrid-fluent__DataGridTable-module__paginationInfo",paginationSize:"ogrid-fluent__DataGridTable-module__paginationSize",leafHeaderCellSpan:"ogrid-fluent__DataGridTable-module__leafHeaderCellSpan",selectionHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper",selectionCellWrapper:"ogrid-fluent__DataGridTable-module__selectionCellWrapper",rowNumberHeaderCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper",rowNumberCellWrapper:"ogrid-fluent__DataGridTable-module__rowNumberCellWrapper",selectedRow:"ogrid-fluent__DataGridTable-module__selectedRow",selectableGrid:"ogrid-fluent__DataGridTable-module__selectableGrid",stickyHeader:"ogrid-fluent__DataGridTable-module__stickyHeader",emptyStateInGridMessageSticky:"ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky",emptyStateInGridIcon:"ogrid-fluent__DataGridTable-module__emptyStateInGridIcon","density-compact":"ogrid-fluent__DataGridTable-module__density-compact","density-comfortable":"ogrid-fluent__DataGridTable-module__density-comfortable"};var nr={statusBar:o.statusBar,statusBarItem:o.statusBarItem,statusBarLabel:o.statusBarLabel,statusBarValue:o.statusBarValue};function ao(r){return jsx(StatusBar,{...r,classNames:nr})}var ur={contextMenu:o.contextMenu,contextMenuItem:o.contextMenuItem,contextMenuItemLabel:o.contextMenuItemLabel,contextMenuItemShortcut:o.contextMenuItemShortcut,contextMenuDivider:o.contextMenuDivider};function to(r){return jsx(GridContextMenu,{...r,classNames:ur})}var cr={emptyStateInGrid:o.emptyStateInGrid,emptyStateInGridInner:o.emptyStateInGridMessageSticky,emptyStateInGridIcon:o.emptyStateInGridIcon,emptyStateInGridTitle:o.emptyStateInGridTitle,emptyStateInGridMessage:o.emptyStateInGridMessage,emptyStateInGridLink:o.emptyStateInGridLink};function lo({emptyState:r}){return jsx(BaseEmptyState,{emptyState:r,classNames:cr,icon:"\u{1F4CB}"})}var mr={loadingOverlay:o.loadingOverlay,loadingOverlayContent:o.loadingOverlayContent,spinner:o.spinner,loadingOverlayText:o.loadingOverlayText};function no({message:r}){return jsx(BaseLoadingOverlay,{message:r,classNames:mr})}function io({dropIndicatorX:r,wrapperLeft:a}){return jsx(BaseDropIndicator,{dropIndicatorX:r,wrapperLeft:a,className:o.dropIndicator})}var go={padding:0,border:"none"};function Xr(r){let{item:a,rowIndex:n,rowId:u,isSelected:s,visibleCols:p,columnMeta:g,renderCellContent:c,handleSingleRowClick:v,handleRowCheckboxChange:i,lastMouseShiftRef:h,hasCheckboxCol:R,hasRowNumbersCol:G,rowNumberOffset:S,leftSpacerWidth:T,rightSpacerWidth:b,globalColIndexMap:y,rowNumWidth:f}=r;return jsxs(TableRow,{className:s?o.selectedRow:void 0,"data-row-id":u,onClick:v,"aria-selected":s||void 0,children:[R&&jsx(TableCell,{className:o.selectionCellWrapper,children:jsx("div",{className:o.selectionCellInner,"data-row-index":n,"data-col-index":0,onClick:STOP_PROPAGATION,children:jsx(Checkbox,{checked:s,onChange:(_,D)=>{i(u,!!D.checked,n,h.current);},"aria-label":`Select row ${n+1}`})})}),G&&jsx(TableCell,{className:o.rowNumberCellWrapper,style:f?{width:f,minWidth:f,maxWidth:f}:void 0,children:jsx("div",{className:o.rowNumberCellInner,children:S+n+1})}),T!=null&&T>0&&jsx("td",{style:{...go,width:T,minWidth:T},"aria-hidden":true}),p.map((_,D)=>{let l=y?y[D]:D;return jsx(TableCell,{"data-column-id":_.columnId,className:g.cellClasses[_.columnId]||void 0,style:g.cellStyles[_.columnId],children:c(a,_,n,l)},_.columnId)}),b!=null&&b>0&&jsx("td",{style:{...go,width:b,minWidth:b},"aria-hidden":true})]})}var jr=Z.memo(Xr,areGridRowPropsEqual);function Yr(r){let{virtualScrollEnabled:a,visibleRange:n,columnRange:u,items:s,getRowId:p,selectedRowIds:g,visibleCols:c,columnMeta:v,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:T,rowNumberOffset:b,selectionRange:y,activeCell:f,cutRange:_,copyRange:D,isDragging:l,editingCell:W,pinnedColumns:ne,rowNumWidth:_e}=r,M=Z.useMemo(()=>u?partitionColumnsForVirtualization(c,u,ne):null,[c,u,ne]),{rowCols:me,globalColIndexMap:fe,leftSpacerWidth:ie,rightSpacerWidth:be}=Z.useMemo(()=>{if(!M)return {rowCols:c,globalColIndexMap:void 0,leftSpacerWidth:void 0,rightSpacerWidth:void 0};let N=[...M.pinnedLeft,...M.virtualizedUnpinned,...M.pinnedRight],w=N.map(z=>c.indexOf(z));return {rowCols:N,globalColIndexMap:w,leftSpacerWidth:M.leftSpacerWidth,rightSpacerWidth:M.rightSpacerWidth}},[M,c]),J=(N,w)=>{let z=p(N);return jsx(jr,{item:N,rowIndex:w,rowId:z,isSelected:g.has(z),visibleCols:me,columnMeta:v,renderCellContent:i,handleSingleRowClick:h,handleRowCheckboxChange:R,lastMouseShiftRef:G,hasCheckboxCol:S,hasRowNumbersCol:T,rowNumberOffset:b,selectionRange:y,activeCell:f,cutRange:_,copyRange:D,isDragging:l,editingRowId:W?.rowId??null,leftSpacerWidth:ie,rightSpacerWidth:be,globalColIndexMap:fe,rowNumWidth:_e},z)};return jsxs(TableBody,{children:[a&&n.offsetTop>0&&jsx("tr",{style:{height:n.offsetTop},"aria-hidden":true}),a?s.slice(n.startIndex,n.endIndex+1).map((N,w)=>J(N,n.startIndex+w)):s.map((N,w)=>J(N,w)),a&&n.offsetBottom>0&&jsx("tr",{style:{height:n.offsetBottom},"aria-hidden":true})]})}function qr(r){let a=useDataGridTableOrchestration({props:r}),{wrapperRef:n,tableContainerRef:u,lastMouseShiftRef:s,interaction:p,pinning:g,handleResizeStart:c,handleResizeDoubleClick:v,getColumnWidth:i,isReorderDragging:h,dropIndicatorX:R,handleHeaderMouseDown:G,virtualScrollEnabled:S,visibleRange:T,columnRange:b,onHorizontalScroll:y,items:f,getRowId:_,emptyState:D,rowSelection:l,isLoading:W,loadingMessage:ne,ariaLabel:_e,ariaLabelledBy:M,visibleColumns:me,columnOrder:fe,columnReorder:ie,density:be,rowHeight:J,rowNumberOffset:N,headerRows:w,allowOverflowX:z,fitToContent:He,showColumnLetters:bo,editCallbacks:de,interactionHandlers:Be,cellDescriptorInputRef:Me,cellDescriptorCacheRef:ze,pendingEditorValueRef:Oe,popoverAnchorElRef:Ce,handleSingleRowClick:Co,handlePasteVoid:vo,visibleCols:ve,totalColCount:Ee,hasCheckboxCol:ue,hasRowNumbersCol:Q,colOffset:Le,containerWidth:ho,minTableWidth:Ue,columnSizingOverrides:se,measuredColumnWidths:xo,selectedRowIds:Ae,handleRowCheckboxChange:To,handleSelectAll:yo,allSelected:So,someSelected:Do,editingCell:wo,setPopoverAnchorEl:We,cancelPopoverEdit:Ve,setActiveCell:$e,selectionRange:V,hasCellSelection:ko,handleGridKeyDown:Io,handleFillHandleMouseDown:Ke,handleCopy:Ro,handleCut:Go,cutRange:Xe,copyRange:je,canUndo:No,canRedo:Po,onUndo:Fo,onRedo:Ho,isDragging:Ye,menuPosition:he,closeContextMenu:Bo,headerFilterInput:Mo,statusBarConfig:X,showEmptyInGrid:ee,onCellError:qe,headerMenu:oe}=a,j=useColumnMeta({visibleCols:ve,getColumnWidth:i,columnSizingOverrides:se,measuredColumnWidths:xo,pinnedColumns:g.pinnedColumns,leftOffsets:g.leftOffsets,rightOffsets:g.rightOffsets,pinnedColLeftClass:o.pinnedColLeft,pinnedColRightClass:o.pinnedColRight,addStickyPosition:true}),zo=useCallback((x,C,P,$)=>{let d=getCellRenderDescriptor(x,C,P,$,Me.current,ze.current),Ze=_(x),Y;if(d.mode==="editing-inline")Y=jsx("div",{className:o.editingCellContent,children:jsx(ro,{...buildInlineEditorProps(x,C,d,de)})});else if(d.mode==="editing-popover"&&typeof C.cellEditor=="function"){let k=buildPopoverEditorProps(x,C,d,Oe.current,de),xe=C.cellEditor;Y=jsxs(Fragment,{children:[jsx("div",{ref:re=>{re&&We(re);},style:POPOVER_ANCHOR_STYLE,"aria-hidden":true}),jsx(Popover,{open:!!Ce.current,onOpenChange:(re,O)=>{O.open||Ve();},positioning:{target:Ce.current??void 0},children:jsx(PopoverSurface,{children:jsx(xe,{...k})})})]});}else {let k;if(d.columnType==="boolean"){let O=!!d.displayValue;k=jsx("input",{type:"checkbox",checked:O,disabled:!d.canEditAny,onChange:d.canEditAny?()=>{de.commitCellEdit(x,C.columnId,O,!O,d.rowIndex,d.globalColIndex);}:void 0,onClick:ge=>ge.stopPropagation(),style:{margin:0,cursor:d.canEditAny?"pointer":"default",outline:"none"},"aria-label":O?"Checked":"Unchecked"});}else {let O=resolveCellDisplayContent(C,x,d.displayValue),ge=resolveCellStyle(C,x,d.displayValue);k=ge?jsx("span",{style:ge,children:O}):O;}let xe=`${o.cellContent}${d.isActive?` ${o.activeCellContent}`:""}${d.isActive&&d.isInRange?` ${o.inRange}`:""}${d.isInRange&&!d.isActive?` ${o.cellInRange}`:""}${d.isInCutRange?` ${o.cellCut}`:""}${d.isInCopyRange?` ${o.cellCopied}`:""}`,re=getCellInteractionProps(d,C.columnId,Be);Y=jsxs("div",{className:xe,...re,style:d.canEditAny?CURSOR_CELL_STYLE:void 0,children:[k,d.canEditAny&&d.isSelectionEndCell&&jsx("div",{className:o.fillHandle,onPointerDown:Ke,"aria-label":"Fill handle"})]});}return jsx(CellErrorBoundary,{onError:qe,children:Y},`${Ze}-${C.columnId}`)},[de,Be,Ke,We,Ve,_,qe,Me,ze,Oe,Ce]);return jsxs("div",{style:GRID_ROOT_STYLE,children:[jsxs("div",{ref:n,tabIndex:0,onMouseDown:x=>{s.current=x.shiftKey;},onScroll:y?x=>y(x.target.scrollLeft):void 0,className:`${o.tableWrapper} ${l!=="none"?o.selectableGrid:""} ${o[`density-${be}`]||""}`,role:"region","aria-label":_e??(M?void 0:"Data grid"),"aria-labelledby":M,"data-ogrid-scroll-container":"","data-empty":ee?"true":void 0,"data-loading":W&&f.length===0?"true":void 0,"data-column-count":Ee,"data-overflow-x":z?"true":"false","data-container-width":ho,"data-min-table-width":Math.round(Ue),"data-has-selection":l!=="none"?"true":void 0,onContextMenu:PREVENT_DEFAULT,onKeyDown:Io,style:{"--data-table-column-count":Ee,"--data-table-width":ee?"100%":z||He?"fit-content":"100%","--data-table-min-width":ee?"100%":z||He?"max-content":"100%","--data-table-total-min-width":`${Ue}px`,...J?{"--ogrid-row-height":`${J}px`}:{}},children:[jsx("div",{className:o.tableScrollContent,children:jsx("div",{className:W&&f.length>0?o.loadingDimmed:void 0,children:jsxs("div",{className:o.tableWidthAnchor,ref:u,children:[jsxs(Table,{role:"grid",className:o.dataTable,"data-virtual-scroll":S?"":void 0,children:[jsxs(TableHeader,{className:a.stickyHeader?o.stickyHeader:void 0,children:[bo&&jsxs(TableRow,{children:[ue&&jsx("th",{className:o.columnLetterCell}),Q&&jsx("th",{className:o.columnLetterCell}),ve.map((x,C)=>jsx("th",{className:`${o.columnLetterCell}${j.hdrClasses[x.columnId]?` ${j.hdrClasses[x.columnId]}`:""}`,style:j.hdrStyles[x.columnId],children:indexToColumnLetter(C)},x.columnId))]}),w.map((x,C)=>jsxs(TableRow,{children:[C===w.length-1&&ue&&jsx(TableHeaderCell,{className:o.selectionHeaderCellWrapper,children:jsx("div",{className:o.selectionHeaderCellInner,children:jsx(Checkbox,{checked:So?true:Do?"mixed":false,onChange:(P,$)=>yo(!!$.checked),"aria-label":"Select all rows"})})},"__selection__"),C===0&&C<w.length-1&&ue&&jsx("th",{rowSpan:w.length-1},"__selection_placeholder__"),C===w.length-1&&Q&&(()=>{let P=se?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH;return jsxs(TableHeaderCell,{className:o.rowNumberHeaderCellWrapper,style:{width:P,minWidth:P,maxWidth:P},children:[jsx("div",{className:o.rowNumberHeaderCellInner,children:"#"}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical","aria-label":"Resize row number column",onPointerDown:$=>{$e(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c($,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}})]},"__row_number__")})(),C===0&&C<w.length-1&&Q&&jsx("th",{rowSpan:w.length-1},"__row_number_placeholder__"),x.map((P,$)=>{if(P.isGroup)return jsx("th",{colSpan:P.colSpan,className:o.groupHeaderCell,scope:"colgroup",children:P.label},$);if(!P.columnDef)return null;let d=P.columnDef,Y=r.sortBy===d.columnId?r.sortDirection==="asc"?"ascending":"descending":void 0;return jsxs(TableHeaderCell,{scope:"col","data-column-id":d.columnId,className:j.hdrClasses[d.columnId]||void 0,style:{...j.hdrStyles[d.columnId],...ie?{cursor:h?"grabbing":"grab"}:void 0},"aria-sort":Y,onPointerDown:ie?k=>G(d.columnId,k):void 0,children:[jsxs("div",{className:o.headerCellContent,children:[jsx(le,{...getHeaderFilterConfig(d,Mo)}),jsx("button",{className:o.headerMenuTrigger,onClick:k=>{k.stopPropagation(),oe.isOpen&&oe.openForColumn===d.columnId?oe.close():oe.open(d.columnId,k.currentTarget);},"aria-label":"Column options",title:"Column options",children:"\u22EE"})]}),jsx("div",{className:o.resizeHandle,role:"separator","aria-orientation":"vertical",onPointerDown:k=>{$e(null),p.setSelectionRange(null),n.current?.focus({preventScroll:true}),c(k,d);},onDoubleClick:k=>v(k,d),"aria-label":`Resize ${d.name}`})]},d.columnId)})]},C))]}),!ee&&jsx(Yr,{virtualScrollEnabled:S,visibleRange:T,columnRange:b,items:f,getRowId:_,selectedRowIds:Ae,visibleCols:ve,columnMeta:j,renderCellContent:zo,handleSingleRowClick:Co,handleRowCheckboxChange:To,lastMouseShiftRef:s,hasCheckboxCol:ue,hasRowNumbersCol:Q,rowNumberOffset:N,selectionRange:V,activeCell:p.activeCell,cutRange:Xe,copyRange:je,isDragging:Ye,editingCell:wo,pinnedColumns:g.pinnedColumns,rowNumWidth:Q?se?.[ROW_NUMBER_COLUMN_ID]?.widthPx??ROW_NUMBER_COLUMN_WIDTH:void 0})]}),h&&R!=null&&jsx(io,{dropIndicatorX:R,wrapperLeft:n.current?.getBoundingClientRect().left??0}),jsx(MarchingAntsOverlay,{containerRef:u,selectionRange:V,copyRange:je,cutRange:Xe,colOffset:Le,items:f,visibleColumns:me,columnSizingOverrides:se,columnOrder:fe,isDragging:Ye}),r.formulaReferences&&r.formulaReferences.length>0&&jsx(FormulaRefOverlay,{containerRef:u,references:r.formulaReferences,colOffset:Le}),ee&&D&&jsx(lo,{emptyState:D})]})})}),he&&createPortal(jsx(to,{x:he.x,y:he.y,hasSelection:ko,canUndo:No,canRedo:Po,onUndo:Fo??NOOP,onRedo:Ho??NOOP,onCopy:Ro,onCut:Go,onPaste:vo,onSelectAll:a.interaction.handleSelectAllCells,onClose:Bo}),n.current?.closest(".fui-FluentProvider")??document.body),jsx(ce,{...getColumnHeaderMenuProps(oe)})]}),X&&jsx(ao,{totalCount:X.totalCount,filteredCount:X.filteredCount,selectedCount:X.selectedCount??Ae.size,selectedCellCount:V?(Math.abs(V.endRow-V.startRow)+1)*(Math.abs(V.endCol-V.startCol)+1):void 0,aggregation:X.aggregation,suppressRowCount:X.suppressRowCount}),W&&jsx(no,{message:ne})]})}var Ge=Z.memo(qr);var K={container:"ogrid-fluent__ColumnChooser-module__container",dropdown:"ogrid-fluent__ColumnChooser-module__dropdown",header:"ogrid-fluent__ColumnChooser-module__header",optionsList:"ogrid-fluent__ColumnChooser-module__optionsList",optionItem:"ogrid-fluent__ColumnChooser-module__optionItem",actions:"ogrid-fluent__ColumnChooser-module__actions"};var la=({columnId:r,columnName:a,checked:n,disabled:u,onChange:s})=>jsx(Checkbox,{id:`col-${r}`,label:a,checked:n,onChange:(p,g)=>s(g.checked===true),disabled:u}),na=({onClearAll:r,onSelectAll:a})=>jsxs("div",{className:K.actions,children:[jsx(Button,{appearance:"subtle",size:"small",onClick:r,children:"Clear All"}),jsx(Button,{appearance:"primary",size:"small",onClick:a,children:"Select All"})]}),ia={header:K.header,optionsList:K.optionsList,optionItem:K.optionItem},Fe=r=>{let{columns:a,visibleColumns:n,onVisibilityChange:u,onSetVisibleColumns:s,className:p}=r,g=useRef(null),c=useRef(null),{open:v,handleToggle:i,handleClose:h,handleCheckboxChange:R,handleSelectAll:G,handleClearAll:S,visibleCount:T,totalCount:b}=useColumnChooserState({columns:a,visibleColumns:n,onVisibilityChange:u,onSetVisibleColumns:s});useEffect(()=>{if(!v)return;let f=D=>{let l=D.target;c.current&&!c.current.contains(l)&&g.current&&!g.current.contains(l)&&h();},_=setTimeout(()=>{document.addEventListener("mousedown",f);},0);return ()=>{clearTimeout(_),document.removeEventListener("mousedown",f);}},[v,h]);let y=f=>_=>R(f)(_);return jsxs("div",{className:`${K.container} ${p||""}`,children:[jsxs(Button,{ref:g,appearance:"outline",icon:jsx(TableSettingsRegular,{}),onClick:i,"aria-expanded":v,"aria-haspopup":"listbox",children:["Column Visibility (",T," of ",b,")",v?jsx(ChevronUpRegular,{}):jsx(ChevronDownRegular,{})]}),v&&jsx("div",{ref:c,className:K.dropdown,children:jsx(ColumnChooserContent,{columns:a,visibleColumns:n,visibleCount:T,totalCount:b,handleSelectAll:G,handleClearAll:S,handleCheckboxChange:y,CheckboxItem:la,classNames:ia,Actions:na})})]})};var B={pagination:"ogrid-fluent__PaginationControls-module__pagination",paginationInfo:"ogrid-fluent__PaginationControls-module__paginationInfo",paginationControls:"ogrid-fluent__PaginationControls-module__paginationControls",navBtn:"ogrid-fluent__PaginationControls-module__navBtn",pageNumbers:"ogrid-fluent__PaginationControls-module__pageNumbers",pageBtn:"ogrid-fluent__PaginationControls-module__pageBtn",ellipsis:"ogrid-fluent__PaginationControls-module__ellipsis",pageSizeSelector:"ogrid-fluent__PaginationControls-module__pageSizeSelector",pageSizeLabel:"ogrid-fluent__PaginationControls-module__pageSizeLabel",pageSizeSelect:"ogrid-fluent__PaginationControls-module__pageSizeSelect"};var _a={first:jsx(ChevronDoubleLeftRegular,{}),prev:jsx(ChevronLeftRegular,{}),next:jsx(ChevronRightRegular,{}),last:jsx(ChevronDoubleRightRegular,{})},ma=({variant:r,onClick:a,disabled:n,"aria-label":u,className:s})=>jsx(Button,{appearance:"outline",shape:"circular",size:"small",icon:_a[r],onClick:a,disabled:n,"aria-label":u,className:s}),fa=({onClick:r,active:a,"aria-label":n,"aria-current":u,children:s,className:p})=>jsx(Button,{appearance:a?"primary":"outline",size:"small",shape:"rounded",onClick:r,"aria-label":n,"aria-current":u,className:p,children:s}),ba=({value:r,options:a,onChange:n,"aria-label":u,className:s})=>{let p=(g,c)=>n(Number(c.value));return jsx(Select,{value:String(r),onChange:p,size:"small",appearance:"outline","aria-label":u,className:s,children:a.map(g=>jsx("option",{value:g,children:g},g))})},Ca={NavButton:ma,PageButton:fa,PageSizeSelect:ba},va={pagination:B.pagination,paginationInfo:B.paginationInfo,paginationControls:B.paginationControls,pageNumbers:B.pageNumbers,ellipsis:B.ellipsis,navBtn:B.navBtn,pageBtn:B.pageBtn,pageSizeSelector:B.pageSizeSelector,pageSizeLabel:B.pageSizeLabel,pageSizeSelect:B.pageSizeSelect},pe=Z.memo(r=>jsx(PaginationControlsBase,{...r,slots:Ca,classNames:va}));pe.displayName="PaginationControls";var fo=createOGrid({DataGridTable:Ge,ColumnChooser:Fe,PaginationControls:pe});export{Fe as ColumnChooser,le as ColumnHeaderFilter,ce as ColumnHeaderMenu,Ge as DataGridTable,fo as OGrid,pe as PaginationControls};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-react-fluent",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.5",
|
|
4
4
|
"description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"node": ">=18"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@alaarab/ogrid-react": "2.5.
|
|
44
|
+
"@alaarab/ogrid-react": "2.5.5"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@fluentui/react-components": "^9.0.0",
|