@alaarab/ogrid-react-fluent 2.0.0-beta

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -0,0 +1,592 @@
+@charset "UTF-8";
+.tableScrollContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  /* Match wrapper so any gap to the right is not transparent (no purple stripe showing through) */
+  background-color: var(--colorNeutralBackground1, #ffffff);
+}
+
+.tableWidthAnchor {
+  position: relative;
+  /* When table fits (data-auto-fit): fill 100% so last column gets space. When overflow: size to content for scroll. */
+  width: max-content;
+  background-color: var(--colorNeutralBackground1, #ffffff);
+}
+
+/* When table fits in container: fill full width so columns (including Tags) use the space, no dead zone on the right */
+.tableWrapper[data-auto-fit=true] .tableWidthAnchor {
+  width: 100%;
+}
+
+/* Always use full container width (matches pagination); columns fill the space */
+.tableWrapper {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  /* Default: no horizontal scroll unless we explicitly allow overflow (wide tables). */
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  /* Border is applied to the grid itself so we don't draw an empty bordered area
+     when the grid content is narrower than the container. */
+  border: none;
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+  /* Wide tables: allow horizontal scroll */
+}
+.tableWrapper[data-overflow-x=true] {
+  overflow-x: auto;
+}
+.tableWrapper {
+  /* Empty state: no horizontal scroll – can't scroll right into white space */
+}
+.tableWrapper[data-empty=true] {
+  overflow-x: hidden;
+}
+.tableWrapper {
+  /* Scoped by data-column-count so our overrides apply; variable is set on this wrapper */
+}
+.tableWrapper[data-column-count] :global {
+  /* Let the grid/table size to its content.
+     This avoids "last column becomes a giant spacer" when the container is wider than the columns,
+     and keeps header actions (sort/filter) from drifting all the way to the far right.
+     The wrapper still stays width:100% so pagination aligns. */
+}
+.tableWrapper[data-column-count] :global .fui-DataGrid {
+  /* Width behavior is controlled by a CSS var from the React wrapper. */
+  width: var(--data-table-width, fit-content) !important;
+  max-width: 100% !important;
+  min-width: var(--data-table-min-width, max-content) !important;
+  box-sizing: border-box !important;
+  overflow: hidden;
+}
+.tableWrapper[data-column-count] :global {
+  /* Use auto layout so Fluent sizing/resize works naturally. */
+}
+.tableWrapper[data-column-count] :global .fui-DataGrid .fui-Table {
+  width: var(--data-table-width, fit-content) !important;
+  max-width: 100% !important;
+  min-width: var(--data-table-min-width, max-content) !important;
+  table-layout: auto !important;
+  box-sizing: border-box !important;
+  border: none !important;
+  outline: none !important;
+}
+.tableWrapper[data-column-count] :global {
+  /* Rows span full table width */
+}
+.tableWrapper[data-column-count] :global .fui-DataGrid .fui-TableRow,
+.tableWrapper[data-column-count] :global .fui-DataGrid .fui-DataGridRow {
+  width: 100% !important;
+  min-width: 100% !important;
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeader {
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+}
+.tableWrapper[data-column-count] :global {
+  /* Let Fluent's column sizing system own widths (resizableColumns + columnSizingOptions).
+     We only enforce a min-width + sane box sizing. */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell,
+.tableWrapper[data-column-count] :global .fui-DataGridCell {
+  /* Do NOT use !important here: Fluent sets inline width/min/max during resize. */
+  min-width: 80px;
+  box-sizing: border-box !important;
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell {
+  min-width: var(--data-table-cell-min-width, 80px);
+  white-space: nowrap !important;
+  position: relative;
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  font-size: 14px;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+}
+.tableWrapper[data-column-count] :global {
+  /* No extra right border on last column – wrapper provides right edge (row may have trailing <i> so use last-of-type) */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type,
+.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow .fui-DataGridCell:last-of-type {
+  border-right: none !important;
+}
+.tableWrapper[data-column-count] :global .fui-DataGridCell {
+  min-width: var(--data-table-cell-min-width, 80px);
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  font-size: 12px;
+  padding: 0 !important;
+  height: 1px;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  /* Prevent long unbroken content from forcing intrinsic widths / overlap */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridCell > * {
+  min-width: 0;
+}
+.tableWrapper[data-column-count] :global .fui-DataGridCell .fui-TableCellLayout {
+  font-size: 12px;
+}
+.tableWrapper[data-column-count] :global {
+  /* Resize handle: contained so focus ring doesn't create a purple stripe to the right */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell__aside {
+  display: flex !important;
+  cursor: col-resize !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 16px !important;
+  z-index: 1 !important;
+  outline: none !important;
+  border-radius: 0 !important;
+}
+.tableWrapper[data-column-count] :global {
+  /* Fix: Fluent renders a resize handle on the last header cell.
+     The handle has negative horizontal margins (hit target), which bleeds past the table edge
+     and makes the last header look like it has extra space vs the body cells.
+     Hide the resize affordance on the last column header. */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-DataGridHeaderCell__aside,
+.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-TableResizeHandle {
+  display: none !important;
+}
+.tableWrapper[data-column-count] :global {
+  /* No extra bottom border: last row (row + cells) – wrapper provides bottom edge so no double line */
+}
+.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow:last-child {
+  border-bottom: none !important;
+}
+.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow:last-child .fui-DataGridCell {
+  border-bottom: none !important;
+}
+.tableWrapper[data-column-count] :global .fui-Link {
+  color: var(--colorBrandForeground1, #0f6cbd) !important;
+  font-weight: 600 !important;
+  text-decoration: none !important;
+}
+.tableWrapper[data-column-count] :global .fui-Link:hover {
+  text-decoration: underline !important;
+  color: var(--colorBrandForeground1Hover, #115ea3) !important;
+}
+.tableWrapper[data-column-count] :global .fui-Link:active {
+  color: var(--colorBrandForeground1Pressed, #0c3b5e) !important;
+}
+.tableWrapper {
+  /* When table fits: fill 100% and distribute column width evenly so last column (e.g. Tags) isn't tiny */
+}
+.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGrid {
+  width: 100% !important;
+}
+.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGrid .fui-Table {
+  width: 100% !important;
+}
+.tableWrapper[data-auto-fit=true][data-column-count] :global {
+  /* Equal base width for all columns — override Fluent's inline width/min-width/max-width */
+}
+.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGridHeaderCell,
+.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGridCell {
+  width: calc(100% / var(--data-table-column-count, 1)) !important;
+  min-width: 0 !important;
+  max-width: none !important;
+}
+.tableWrapper {
+  /* Selection column must stay 48px even in auto-fit mode (needs same specificity depth to win) */
+}
+.tableWrapper[data-auto-fit=true][data-column-count] .selectionHeaderCellWrapper, .tableWrapper[data-auto-fit=true][data-column-count] .selectionCellWrapper {
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+}
+.tableWrapper {
+  /* Hide resize handle on last column only when table fits (autoFitColumns); when overflow/scroll, last column can resize (Fluent docs) */
+}
+.tableWrapper[data-column-count][data-auto-fit=true] :global(.fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-DataGridHeaderCell__aside) {
+  display: none !important;
+}
+
+.dataGrid {
+  min-width: 0;
+}
+
+.groupHeaderRow th {
+  background: var(--ogrid-header-bg, #f5f5f5);
+}
+
+.groupHeaderCell {
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+  padding: 6px 10px;
+}
+
+.leafHeaderCellSpan {
+  font-weight: 600;
+  padding: 6px 10px;
+  background: var(--ogrid-header-bg, #f5f5f5);
+}
+
+.selectionHeaderCellWrapper {
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  padding: 0 !important;
+}
+
+.selectionCellWrapper {
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  padding: 0 !important;
+}
+
+.selectionHeaderCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.selectionCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.selectedRow :global .fui-DataGridCell {
+  background-color: var(--colorNeutralBackground1Selected, #e6f0fb) !important;
+}
+
+.selectableGrid :global .fui-DataGridBody .fui-DataGridRow:hover .fui-DataGridCell {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  cursor: pointer;
+}
+.selectableGrid :global .fui-DataGridBody .fui-DataGridRow:hover.selectedRow .fui-DataGridCell {
+  background-color: var(--colorNeutralBackground1Hover, #dae8f8) !important;
+}
+
+.selectableGrid :global(.fui-DataGridBody .fui-DataGridRow) {
+  cursor: pointer;
+}
+
+.cellContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+
+.activeCellContent {
+  outline: 2px solid var(--ogrid-selection, #217346) !important;
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+
+.cellInRange {
+  background-color: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+:global([data-drag-range]) {
+  background-color: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+.cellCut {
+  background-color: var(--colorNeutralBackground1Hover, rgba(0, 0, 0, 0.04)) !important;
+  opacity: 0.7;
+}
+
+.fillHandle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background: var(--ogrid-selection, #217346);
+  border: 1px solid var(--ogrid-bg, #fff);
+  border-radius: 1px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+
+/* Freeze panes: sticky header when freezeRows >= 1 */
+.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 8;
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+}
+
+/* Freeze panes: sticky first column(s) when freezeCols >= 1; only first column gets left: 0 (multi-column needs width measurement) */
+.freezeColFirst {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  will-change: transform;
+}
+
+:global(.fui-DataGridHeader) .freezeColFirst {
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+}
+
+/* Freeze/pinned header cells need top: 0 + highest z-index so they stick in BOTH
+   directions — left/right (from .freezeCol/.pinnedCell) AND top (from .stickyHeader).
+   Without explicit top, the child's own position: sticky overrides the parent's. */
+.stickyHeader .freezeColFirst,
+.stickyHeader .pinnedLeft,
+.stickyHeader .pinnedRight {
+  top: 0;
+  z-index: 9;
+}
+
+.activeRow :global .fui-DataGridCell:not(:has(.activeCellContent)) {
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+}
+
+.pinnedCell {
+  position: sticky;
+  z-index: 6;
+  background-color: inherit;
+  will-change: transform;
+}
+
+.pinnedLeft {
+  left: 0;
+}
+.pinnedLeft::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.pinnedRight {
+  right: 0;
+}
+.pinnedRight::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--colorNeutralForeground2, #616161);
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  min-height: 28px;
+  user-select: none;
+}
+
+.statusBarItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.statusBarItem:not(:last-child)::after {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 14px;
+  background-color: var(--colorNeutralStroke1, #c4c4c4);
+  margin-left: 12px;
+}
+
+.statusBarLabel {
+  color: var(--colorNeutralForeground3, #707070);
+  font-weight: 400;
+}
+
+.statusBarValue {
+  color: var(--colorNeutralForeground1, #242424);
+  font-weight: 600;
+}
+
+.contextMenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: var(--colorNeutralBackground1, #fff);
+  border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
+  outline: none;
+}
+
+.contextMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--colorNeutralForeground1, #242424);
+}
+.contextMenuItem:hover:not(:disabled) {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+.contextMenuItem:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.contextMenuItemLabel {
+  flex: 1;
+}
+
+.contextMenuItemShortcut {
+  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
+  font-size: 0.85em;
+}
+
+.contextMenuDivider {
+  height: 1px;
+  margin: 4px 0;
+  background-color: var(--colorNeutralStroke2, #e0e0e0);
+}
+
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(1px);
+  pointer-events: all;
+}
+
+.loadingOverlayContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: var(--colorNeutralBackground1, #ffffff);
+  border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.loadingDimmed {
+  opacity: 0.6;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.emptyStateInGrid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px 16px;
+  min-height: 88px;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+
+.emptyStateInGridMessageSticky {
+  position: sticky;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.emptyStateInGridIcon {
+  font-size: 24px;
+  margin-bottom: 8px;
+  opacity: 0.6;
+}
+
+.emptyStateInGridTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground1, #242424);
+  margin-bottom: 4px;
+}
+
+.emptyStateInGridMessage {
+  font-size: 13px;
+  color: var(--colorNeutralForeground2, #616161);
+  max-width: 100%;
+  line-height: 1.5;
+}
+
+.emptyStateInGridLink {
+  background: none;
+  border: none;
+  color: var(--colorBrandForeground1, #0f6cbd);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+.emptyStateInGridLink:hover {
+  color: var(--colorBrandForeground1Hover, #115ea3);
+}
+
+/* Empty state: hide body, keep header and empty message */
+.tableWrapper[data-empty=true] :global(.fui-DataGrid) tbody {
+  display: none;
+}
+
+/* Empty state: no extra bottom border (header row is last row, remove its border-bottom) */
+.tableWrapper[data-empty=true] :global(.fui-DataGridHeader .fui-DataGridRow) {
+  border-bottom: none !important;
+}

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '@alaarab/ogrid-react';
+import styles from './DataGridTable.module.css';
+export function GridContextMenu(props) {
+    const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
+    const ref = React.useRef(null);
+    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
+    const isDisabled = React.useCallback((item) => {
+        if (item.disabledWhenNoSelection && !hasSelection)
+            return true;
+        if (item.id === 'undo' && !canUndo)
+            return true;
+        if (item.id === 'redo' && !canRedo)
+            return true;
+        return false;
+    }, [hasSelection, canUndo, canRedo]);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [onClose]);
+    return (_jsx("div", { ref: ref, className: styles.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx("div", { className: styles.contextMenuDivider }), _jsxs("button", { type: "button", className: styles.contextMenuItem, onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { className: styles.contextMenuItemLabel, children: item.label }), item.shortcut && (_jsx("span", { className: styles.contextMenuItemShortcut, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
+}

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, Checkbox } from '@fluentui/react-components';
+import { BaseInlineCellEditor, editorWrapperStyle } from '@alaarab/ogrid-react';
+export function InlineCellEditor(props) {
+    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, data) => onCommit(!!data.checked), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()) })), renderSelect: (value, values, onCommit, onCancel) => (_jsx("div", { style: editorWrapperStyle, children: _jsx(Select, { value: value !== null && value !== undefined ? String(value) : '', onChange: (_, data) => onCommit(data.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }) })) }));
+}

package/dist/esm/DataGridTable/StatusBar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStatusBarParts } from '@alaarab/ogrid-react';
+import styles from './DataGridTable.module.css';
+export function StatusBar(props) {
+    const parts = getStatusBarParts(props);
+    return (_jsx("div", { className: styles.statusBar, role: "status", "aria-live": "polite", children: parts.map((p) => (_jsxs("span", { className: styles.statusBarItem, children: [_jsx("span", { className: styles.statusBarLabel, children: p.label }), _jsx("span", { className: styles.statusBarValue, children: p.value.toLocaleString() })] }, p.key))) }));
+}

package/dist/esm/FluentDataTable/FluentDataTable.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
+const OGridInner = forwardRef(function OGridInner(props, ref) {
+    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
+                pagination.setPageSize(size);
+                pagination.setPage(1);
+            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+});
+OGridInner.displayName = 'OGrid';
+export const OGrid = React.memo(OGridInner);
+/** @deprecated Use `OGrid` instead. Backward-compat alias. */
+export const FluentDataTable = OGrid;

package/dist/esm/FluentDataTable/index.js

@@ -0,0 +1 @@
+export { OGrid, FluentDataTable } from './FluentDataTable';

package/dist/esm/PaginationControls/PaginationControls.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { Button, Select } from '@fluentui/react-components';
+import { ChevronLeftRegular, ChevronRightRegular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, } from '@fluentui/react-icons';
+import { getPaginationViewModel } from '@alaarab/ogrid-react';
+import styles from './PaginationControls.module.css';
+export const PaginationControls = React.memo((props) => {
+    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
+    const handlePageSizeChange = useCallback((_e, data) => {
+        onPageSizeChange(Number(data.value));
+    }, [onPageSizeChange]);
+    if (!vm) {
+        return null;
+    }
+    const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
+    return (_jsxs("div", { className: `${styles.pagination} ${className || ''}`, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: styles.paginationInfo, children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs("div", { className: styles.paginationControls, children: [_jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: styles.navBtn }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: styles.pageBtn, children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { appearance: currentPage === pageNum ? 'primary' : 'outline', size: "small", shape: "rounded", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, className: styles.pageBtn, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: styles.pageBtn, children: totalPages })] }))] }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: styles.navBtn })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx(Select, { value: String(pageSize), onChange: handlePageSizeChange, size: "small", appearance: "outline", "aria-label": "Rows per page", className: styles.pageSizeSelect, children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
+});