@siyahi/ui 0.0.0-stage → 0.1.0-next.3

package/dist/components/registry/niko-table/config/data-table.js

@@ -0,0 +1,279 @@
+import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";
+import { ArrowDown01, ArrowDown10, ArrowDownAZ, ArrowDownZA, ArrowUpDown, Calendar, Check, X } from "lucide-react";
+//#region src/components/registry/niko-table/config/data-table.ts
+const SORT_ICONS = {
+	[FILTER_VARIANTS.TEXT]: {
+		asc: ArrowDownAZ,
+		desc: ArrowDownZA,
+		unsorted: ArrowUpDown
+	},
+	[FILTER_VARIANTS.NUMBER]: {
+		asc: ArrowDown01,
+		desc: ArrowDown10,
+		unsorted: ArrowUpDown
+	},
+	[FILTER_VARIANTS.RANGE]: {
+		asc: ArrowDown01,
+		desc: ArrowDown10,
+		unsorted: ArrowUpDown
+	},
+	[FILTER_VARIANTS.DATE]: {
+		asc: ArrowUpDown,
+		desc: ArrowUpDown,
+		unsorted: Calendar
+	},
+	[FILTER_VARIANTS.DATE_RANGE]: {
+		asc: ArrowUpDown,
+		desc: ArrowUpDown,
+		unsorted: Calendar
+	},
+	[FILTER_VARIANTS.BOOLEAN]: {
+		asc: X,
+		desc: Check,
+		unsorted: ArrowUpDown
+	},
+	[FILTER_VARIANTS.SELECT]: {
+		asc: ArrowDownAZ,
+		desc: ArrowDownZA,
+		unsorted: ArrowUpDown
+	},
+	[FILTER_VARIANTS.MULTI_SELECT]: {
+		asc: ArrowDownAZ,
+		desc: ArrowDownZA,
+		unsorted: ArrowUpDown
+	}
+};
+const SORT_LABELS = {
+	[FILTER_VARIANTS.TEXT]: {
+		asc: "Asc",
+		desc: "Desc"
+	},
+	[FILTER_VARIANTS.NUMBER]: {
+		asc: "Low to High",
+		desc: "High to Low"
+	},
+	[FILTER_VARIANTS.RANGE]: {
+		asc: "Low to High",
+		desc: "High to Low"
+	},
+	[FILTER_VARIANTS.DATE]: {
+		asc: "Oldest First",
+		desc: "Newest First"
+	},
+	[FILTER_VARIANTS.DATE_RANGE]: {
+		asc: "Oldest First",
+		desc: "Newest First"
+	},
+	[FILTER_VARIANTS.BOOLEAN]: {
+		asc: "False First",
+		desc: "True First"
+	},
+	[FILTER_VARIANTS.SELECT]: {
+		asc: "Asc",
+		desc: "Desc"
+	},
+	[FILTER_VARIANTS.MULTI_SELECT]: {
+		asc: "Asc",
+		desc: "Desc"
+	}
+};
+/**
+* @credit Adapted from React Table's default config
+* @see https://react-table.tanstack.com/docs/overview
+*/
+const dataTableConfig = {
+	debounceMs: 300,
+	throttleMs: 50,
+	textOperators: [
+		{
+			label: "Contains",
+			value: FILTER_OPERATORS.ILIKE
+		},
+		{
+			label: "Does not contain",
+			value: FILTER_OPERATORS.NOT_ILIKE
+		},
+		{
+			label: "Is",
+			value: FILTER_OPERATORS.EQ
+		},
+		{
+			label: "Is not",
+			value: FILTER_OPERATORS.NEQ
+		},
+		{
+			label: "Is empty",
+			value: FILTER_OPERATORS.EMPTY
+		},
+		{
+			label: "Is not empty",
+			value: FILTER_OPERATORS.NOT_EMPTY
+		}
+	],
+	numericOperators: [
+		{
+			label: "Is",
+			value: FILTER_OPERATORS.EQ
+		},
+		{
+			label: "Is not",
+			value: FILTER_OPERATORS.NEQ
+		},
+		{
+			label: "Is less than",
+			value: FILTER_OPERATORS.LT
+		},
+		{
+			label: "Is less than or equal to",
+			value: FILTER_OPERATORS.LTE
+		},
+		{
+			label: "Is greater than",
+			value: FILTER_OPERATORS.GT
+		},
+		{
+			label: "Is greater than or equal to",
+			value: FILTER_OPERATORS.GTE
+		},
+		{
+			label: "Is between",
+			value: FILTER_OPERATORS.BETWEEN
+		},
+		{
+			label: "Is empty",
+			value: FILTER_OPERATORS.EMPTY
+		},
+		{
+			label: "Is not empty",
+			value: FILTER_OPERATORS.NOT_EMPTY
+		}
+	],
+	dateOperators: [
+		{
+			label: "Is",
+			value: FILTER_OPERATORS.EQ
+		},
+		{
+			label: "Is not",
+			value: FILTER_OPERATORS.NEQ
+		},
+		{
+			label: "Is before",
+			value: FILTER_OPERATORS.LT
+		},
+		{
+			label: "Is after",
+			value: FILTER_OPERATORS.GT
+		},
+		{
+			label: "Is on or before",
+			value: FILTER_OPERATORS.LTE
+		},
+		{
+			label: "Is on or after",
+			value: FILTER_OPERATORS.GTE
+		},
+		{
+			label: "Is between",
+			value: FILTER_OPERATORS.BETWEEN
+		},
+		{
+			label: "Is empty",
+			value: FILTER_OPERATORS.EMPTY
+		},
+		{
+			label: "Is not empty",
+			value: FILTER_OPERATORS.NOT_EMPTY
+		}
+	],
+	selectOperators: [
+		{
+			label: "Is",
+			value: FILTER_OPERATORS.EQ
+		},
+		{
+			label: "Is not",
+			value: FILTER_OPERATORS.NEQ
+		},
+		{
+			label: "Is empty",
+			value: FILTER_OPERATORS.EMPTY
+		},
+		{
+			label: "Is not empty",
+			value: FILTER_OPERATORS.NOT_EMPTY
+		}
+	],
+	multiSelectOperators: [
+		{
+			label: "Has any of",
+			value: FILTER_OPERATORS.IN
+		},
+		{
+			label: "Has none of",
+			value: FILTER_OPERATORS.NOT_IN
+		},
+		{
+			label: "Is empty",
+			value: FILTER_OPERATORS.EMPTY
+		},
+		{
+			label: "Is not empty",
+			value: FILTER_OPERATORS.NOT_EMPTY
+		}
+	],
+	booleanOperators: [{
+		label: "Is",
+		value: FILTER_OPERATORS.EQ
+	}, {
+		label: "Is not",
+		value: FILTER_OPERATORS.NEQ
+	}],
+	/**
+	* Choices for a boolean filter's value select. Also handed to the select as
+	* `items`, where Base UI reads the closed trigger's label from.
+	*/
+	booleanValues: [{
+		label: "True",
+		value: "true"
+	}, {
+		label: "False",
+		value: "false"
+	}],
+	sortOrders: [{
+		label: "Asc",
+		value: "asc"
+	}, {
+		label: "Desc",
+		value: "desc"
+	}],
+	filterVariants: [
+		FILTER_VARIANTS.TEXT,
+		FILTER_VARIANTS.NUMBER,
+		FILTER_VARIANTS.RANGE,
+		FILTER_VARIANTS.DATE,
+		FILTER_VARIANTS.DATE_RANGE,
+		FILTER_VARIANTS.BOOLEAN,
+		FILTER_VARIANTS.SELECT,
+		FILTER_VARIANTS.MULTI_SELECT
+	],
+	operators: [
+		FILTER_OPERATORS.ILIKE,
+		FILTER_OPERATORS.NOT_ILIKE,
+		FILTER_OPERATORS.EQ,
+		FILTER_OPERATORS.NEQ,
+		FILTER_OPERATORS.IN,
+		FILTER_OPERATORS.NOT_IN,
+		FILTER_OPERATORS.EMPTY,
+		FILTER_OPERATORS.NOT_EMPTY,
+		FILTER_OPERATORS.LT,
+		FILTER_OPERATORS.LTE,
+		FILTER_OPERATORS.GT,
+		FILTER_OPERATORS.GTE,
+		FILTER_OPERATORS.BETWEEN,
+		FILTER_OPERATORS.RELATIVE
+	],
+	joinOperators: [JOIN_OPERATORS.AND, JOIN_OPERATORS.OR]
+};
+//#endregion
+export { SORT_ICONS, SORT_LABELS, dataTableConfig };

package/dist/components/registry/niko-table/config/feature-detection.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+//#region src/components/registry/niko-table/config/feature-detection.d.ts
+/**
+ * Feature requirements that components can declare
+ */
+export interface FeatureRequirements {
+  enableFilters?: boolean;
+  enablePagination?: boolean;
+  enableRowSelection?: boolean;
+  enableSorting?: boolean;
+  enableMultiSort?: boolean;
+  enableGrouping?: boolean;
+  enableExpanding?: boolean;
+  enableColumnResizing?: boolean;
+  manualSorting?: boolean;
+  manualPagination?: boolean;
+  manualFiltering?: boolean;
+  pageCount?: number;
+}
+/**
+ * Walks the React tree to aggregate feature requirements declared by child
+ * components (via displayName) and column header functions.
+ */
+export declare function detectFeaturesFromChildren(children: ReactNode, columns?: Array<{
+  header?: unknown;
+  enableColumnFilter?: boolean;
+}>): FeatureRequirements;
+/**
+ * Register a component's feature requirements
+ * This allows third-party components to declare their needs
+ */
+export declare function registerComponentFeatures(displayName: string, features: FeatureRequirements): void;
+/**
+ * Get all registered components and their features (for debugging)
+ */
+export declare function getRegisteredComponents(): {
+  [x: string]: FeatureRequirements;
+};
+//#endregion

package/dist/components/registry/niko-table/config/feature-detection.js

@@ -0,0 +1,174 @@
+import { Children, isValidElement } from "react";
+//#region src/components/registry/niko-table/config/feature-detection.ts
+const detectionCache = typeof window !== "undefined" ? /* @__PURE__ */ new Map() : null;
+const MAX_CACHE_SIZE = 50;
+/**
+* Component feature registry - maps component displayNames to their requirements
+*/
+const COMPONENT_FEATURES = {
+	DataTablePagination: { enablePagination: true },
+	TablePagination: { enablePagination: true },
+	DataTableViewMenu: { enableFilters: true },
+	TableViewMenu: { enableFilters: true },
+	DataTableViewDndMenu: { enableFilters: true },
+	TableViewDndMenu: { enableFilters: true },
+	DataTableColumnResize: { enableColumnResizing: true },
+	DataTableSearchFilter: { enableFilters: true },
+	TableSearchFilter: { enableFilters: true },
+	DataTableFacetedFilter: { enableFilters: true },
+	TableFacetedFilter: { enableFilters: true },
+	DataTableSliderFilter: { enableFilters: true },
+	TableSliderFilter: { enableFilters: true },
+	DataTableSortMenu: { enableSorting: true },
+	TableSortMenu: { enableSorting: true },
+	DataTableFilterMenu: { enableFilters: true },
+	TableFilterMenu: { enableFilters: true },
+	DataTableDateFilter: { enableFilters: true },
+	DataTableInlineFilter: { enableFilters: true },
+	TableInlineFilter: { enableFilters: true },
+	DataTableClearFilter: { enableFilters: true },
+	TableClearFilter: { enableFilters: true },
+	DataTableColumnFacetedFilterMenu: { enableFilters: true },
+	TableColumnFacetedFilterMenu: { enableFilters: true },
+	DataTableColumnFacetedFilterOptions: { enableFilters: true },
+	TableColumnFacetedFilterOptions: { enableFilters: true },
+	DataTableColumnSliderFilterMenu: { enableFilters: true },
+	TableColumnSliderFilterMenu: { enableFilters: true },
+	DataTableColumnSliderFilterOptions: { enableFilters: true },
+	TableColumnSliderFilterOptions: { enableFilters: true },
+	DataTableColumnDateFilterMenu: { enableFilters: true },
+	TableColumnDateFilterMenu: { enableFilters: true },
+	DataTableColumnDateFilterOptions: { enableFilters: true },
+	TableColumnDateFilterOptions: { enableFilters: true },
+	DataTableSelectionBar: { enableRowSelection: true },
+	DataTableColumnHeader: { enableSorting: true },
+	TableColumnHeader: { enableSorting: true },
+	TableColumnSortMenu: {
+		enableSorting: true,
+		enableMultiSort: true
+	},
+	DataTableColumnSortMenu: {
+		enableSorting: true,
+		enableMultiSort: true
+	},
+	TableColumnSortOptions: {
+		enableSorting: true,
+		enableMultiSort: true
+	},
+	DataTableColumnSortOptions: {
+		enableSorting: true,
+		enableMultiSort: true
+	},
+	DataTableGroupedRows: {
+		enableGrouping: true,
+		enableExpanding: true
+	},
+	TableGroupedRows: {
+		enableGrouping: true,
+		enableExpanding: true
+	},
+	TableColumnGroupOptions: {
+		enableGrouping: true,
+		enableExpanding: true
+	},
+	DataTableColumnGroupOptions: {
+		enableGrouping: true,
+		enableExpanding: true
+	},
+	TableColumnGroupMenu: {
+		enableGrouping: true,
+		enableExpanding: true
+	},
+	DataTableColumnGroupMenu: {
+		enableGrouping: true,
+		enableExpanding: true
+	}
+};
+/**
+* Walks the React tree to aggregate feature requirements declared by child
+* components (via displayName) and column header functions.
+*/
+function detectFeaturesFromChildren(children, columns) {
+	const shouldCache = detectionCache && !columns && children && typeof children === "object";
+	if (shouldCache) {
+		const cached = detectionCache.get(children);
+		if (cached) return cached;
+	}
+	const requirements = {};
+	const searchRecursively = (children) => {
+		const childrenArray = Children.toArray(children);
+		for (const child of childrenArray) if (isValidElement(child)) {
+			if (typeof child.type === "function") {
+				const displayName = child.type.displayName;
+				const componentFeatures = displayName ? COMPONENT_FEATURES[displayName] : void 0;
+				if (componentFeatures) Object.keys(componentFeatures).forEach((key) => {
+					const featureKey = key;
+					if (componentFeatures[featureKey]) requirements[featureKey] = true;
+				});
+			}
+			const propsWithChildren = child.props;
+			if (propsWithChildren?.children) searchRecursively(propsWithChildren.children);
+		}
+	};
+	if (columns && Array.isArray(columns)) for (const column of columns) {
+		if (column.enableColumnFilter) requirements.enableFilters = true;
+		if (column.header && typeof column.header === "function") try {
+			const headerFn = column.header;
+			const headerResult = headerFn({ column: {
+				getCanSort: () => true,
+				getIsSorted: () => false,
+				toggleSorting: () => {},
+				clearSorting: () => {},
+				getCanHide: () => true,
+				getIsVisible: () => true,
+				toggleVisibility: () => {},
+				getCanPin: () => true,
+				getIsPinned: () => false,
+				pin: () => {},
+				getCanGroup: () => true,
+				getIsGrouped: () => false,
+				toggleGrouping: () => {},
+				columnDef: { meta: {} },
+				id: "mock"
+			} });
+			const checkElementForFeatures = (element) => {
+				if (!isValidElement(element)) return;
+				if (typeof element.type === "function") {
+					const displayName = element.type.displayName;
+					const componentFeatures = displayName ? COMPONENT_FEATURES[displayName] : void 0;
+					if (componentFeatures) Object.keys(componentFeatures).forEach((key) => {
+						const featureKey = key;
+						if (componentFeatures[featureKey]) requirements[featureKey] = true;
+					});
+				}
+				const propsWithChildren = element.props;
+				if (propsWithChildren?.children) Children.toArray(propsWithChildren.children).forEach(checkElementForFeatures);
+			};
+			checkElementForFeatures(headerResult);
+		} catch {}
+	}
+	searchRecursively(children);
+	if (shouldCache && detectionCache) {
+		if (detectionCache.size >= MAX_CACHE_SIZE) {
+			const firstKey = detectionCache.keys().next().value;
+			if (firstKey !== void 0) detectionCache.delete(firstKey);
+		}
+		detectionCache.set(children, requirements);
+	}
+	return requirements;
+}
+/**
+* Register a component's feature requirements
+* This allows third-party components to declare their needs
+*/
+function registerComponentFeatures(displayName, features) {
+	COMPONENT_FEATURES[displayName] = features;
+}
+/**
+* Get all registered components and their features (for debugging)
+*/
+function getRegisteredComponents() {
+	return { ...COMPONENT_FEATURES };
+}
+//#endregion
+export { detectFeaturesFromChildren, getRegisteredComponents, registerComponentFeatures };

package/dist/components/registry/niko-table/core/data-table-context.d.ts

@@ -0,0 +1,157 @@
+import { DataTableColumnDef, DataTableInstance, Option } from "../types/index.js";
+import React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/core/data-table-context.d.ts
+export type DataTableContextState = {
+  isLoading: boolean;
+};
+/** Alignment for `scrollRowIntoView`, mirroring TanStack Virtual's `align`. */
+export type ScrollAlign = "auto" | "start" | "center" | "end";
+/** Scroll a row into view by its position in the current row model. */
+export type ScrollRowIntoView = (index: number, opts?: {
+  align?: ScrollAlign;
+}) => void;
+/**
+ * The active-selection SPAN for a grid-style cross-highlight — EVERY column
+ * and row in the current selection lights up (header + gutter), not just the
+ * focused cell. Grid-agnostic: the editable grid sets it from its selection
+ * rectangle. `null` disables the highlight (the default for read-only tables).
+ *
+ * Columns are addressed by id (there are few and all render, so a Set is
+ * cheap); rows by an inclusive row-model index range (rows are virtualized, so
+ * a Set of ids would be unbounded for a large selection — the body tests each
+ * visible row's `index` against the range in O(1)).
+ */
+export interface ActiveSelection {
+  /** Ids of columns whose header should highlight. */
+  columnIds: ReadonlySet<string>;
+  /** Inclusive row-model index range whose rows/gutter should highlight. */
+  rowRange: {
+    min: number;
+    max: number;
+  };
+}
+export type ActiveCell = ActiveSelection | null;
+export interface FlashRowsOptions {
+  /** How long the highlight lasts, ms. Default 1400. */
+  durationMs?: number;
+  /** Scroll the first flashed row into view first. Default true. */
+  scrollIntoView?: boolean;
+}
+/**
+ * Briefly highlight rows (by id) so users see what just changed — e.g. after a
+ * mutation ("which row did adding a member update?"). Scrolls the row into view
+ * (reusing the virtualizer bridge) then plays a soft fade pulse. A row flash
+ * lights every cell in the row (works even under pinned columns).
+ */
+export type FlashRows = (ids: string[], opts?: FlashRowsOptions) => void;
+/** A single cell target for `flashCells`. */
+export interface FlashCellRef {
+  rowId: string;
+  columnId: string;
+}
+/**
+ * Briefly highlight individual cells (cell-level, for value-level changes —
+ * e.g. an inline edit or paste). Same fade pulse as `flashRows`, scoped to cells.
+ */
+export type FlashCells = (cells: FlashCellRef[], opts?: FlashRowsOptions) => void;
+/** Internal key for a flashing cell (row id + column id). */
+export declare function flashCellKey(rowId: string, columnId: string): string;
+type DataTableContextProps<TData extends RowData> = DataTableContextState & {
+  table: DataTableInstance<TData>;
+  columns: DataTableColumnDef<TData>[];
+  generatedOptionsMap: Record<string, Option[]>;
+  setIsLoading: (isLoading: boolean) => void;
+  /** Ids of rows currently flashing (used by the body to animate them). */
+  flashingRowIds: ReadonlySet<string>;
+  /** Keys (`flashCellKey`) of cells currently flashing. */
+  flashingCellKeys: ReadonlySet<string>;
+  /** Flash rows by id — scroll into view + soft fade pulse. */
+  flashRows: FlashRows;
+  /** Flash individual cells (value-level changes). */
+  flashCells: FlashCells;
+  /**
+   * Scroll a row into view. Works on virtualized bodies (via the virtualizer,
+   * which registers itself) and plain bodies (DOM `scrollIntoView` fallback).
+   * A stable, virtualizer-agnostic handle so consumers never touch the
+   * virtualizer directly — the registry owner can change virtualization
+   * internals without breaking consumers.
+   */
+  scrollRowIntoView: ScrollRowIntoView;
+  /**
+   * Internal: the virtualized body registers its scroll function here on mount
+   * and clears it (null) on unmount. Non-virtualized bodies never register, so
+   * `scrollRowIntoView` falls back to a DOM query.
+   */
+  registerRowScroller: (fn: ScrollRowIntoView | null) => void;
+  /**
+   * The table's scroll container (`<DataTable>`'s `[data-slot="table-container"]`
+   * viewport). `<DataTable>` registers it on mount; opt-in features like
+   * `<DataTableColumnAutoFit />` read it to measure/observe available width.
+   * `null` until the container mounts (or when no `<DataTable>` is used).
+   */
+  scrollContainer: HTMLElement | null;
+  /** Internal: `<DataTable>` registers its scroll container element here. */
+  registerScrollContainer: (el: HTMLElement | null) => void;
+  /**
+   * Header-fit floors: `columnId -> minimum width` so an un-resized column is
+   * never rendered narrower than its own header label (measured, never written
+   * to `columnSizing`). Empty when resizing is off. Read by the header, body,
+   * and the min-width lock so they agree on widths.
+   */
+  headerMinWidths: ReadonlyMap<string, number>;
+  /**
+   * Drive the resize preview line for a flex-column drag (which resizes outside
+   * TanStack). Pass `{ resizingColumnId, deltaOffset }` while dragging and
+   * `null` on release. Normal (TanStack) resizes ignore this.
+   */
+  setColumnResizePreview: (info: ColumnResizeInfo | null) => void;
+  /**
+   * Toggle a row's selection with standard Shift-range support: a plain
+   * click toggles one row and sets the anchor; a Shift+click selects every row
+   * between the anchor and this one (in current display order). Wire a select
+   * checkbox to this instead of `row.toggleSelected()` to get range selection.
+   */
+  toggleRowSelection: (rowId: string, shiftKey: boolean) => void;
+};
+/**
+ * The active-selection span for the grid-style cross-highlight (`null` when
+ * inactive). In a header, `activeCell.columnIds.has(column.id)` lights the
+ * active columns; in a body/gutter, the row's **display** index (position in
+ * `getRowModel().rows` / the virtualizer index) within `activeCell.rowRange`
+ * lights the active rows — not TanStack's source-data `row.index`.
+ */
+export declare function useDataTableActiveCell(): ActiveCell;
+/**
+ * Set (or clear, with `null`) the active-cell cross-highlight. The setter is
+ * stable, so subscribing to it never causes re-renders. Used by the grid's
+ * `<DataGridCrossHighlight>` opt-in.
+ */
+export declare function useDataTableActiveCellSetter(): (cell: ActiveCell) => void;
+export interface ColumnResizeInfo {
+  /** Id of the column being dragged, or `null` when no resize is active. */
+  resizingColumnId: string | null;
+  /** Pixel delta from the drag start (add to the column's right edge). */
+  deltaOffset: number;
+}
+/**
+ * Live column-resize offset for the preview guide line. Returns the idle value
+ * (`{ resizingColumnId: null, deltaOffset: 0 }`) when no drag is in flight (or
+ * outside a provider), so it's safe to call unconditionally.
+ */
+export declare function useColumnResizeInfo(): ColumnResizeInfo;
+declare const DataTableContext: React.Context<DataTableContextProps<any> | undefined>;
+export declare function useDataTable<TData extends RowData>(): DataTableContextProps<TData>;
+export declare enum DataTableActions {
+  SET = 0,
+  SET_IS_LOADING = 1
+}
+interface DataTableProviderProps<TData extends RowData> {
+  children: React.ReactNode;
+  table: DataTableInstance<TData>;
+  columns?: DataTableColumnDef<TData>[];
+  isLoading?: boolean;
+}
+export declare function DataTableProvider<TData extends RowData>({ children, table, columns, isLoading: externalIsLoading }: DataTableProviderProps<TData>): React.JSX.Element;
+//#endregion
+export { DataTableContext };