@xeplr/ui-table 1.0.0

package/src/filters/DateFilter.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import FilterWrapper from './FilterWrapper.jsx';
+import { resolveDate } from '../operators.js';
+
+var OPERATORS = [
+  { value: 'eq', label: 'Equals' },
+  { value: 'neq', label: 'Not Equals' },
+  { value: 'gt', label: 'After' },
+  { value: 'gte', label: 'On or After' },
+  { value: 'lt', label: 'Before' },
+  { value: 'lte', label: 'On or Before' },
+  { value: 'between', label: 'Between' }
+];
+
+/**
+ * Date filter: operator select + date input(s).
+ *
+ * Filter value shape: { operator, value, valueTo }
+ */
+export default function DateFilter({ column }) {
+  var currentFilter = column.getFilterValue() || { operator: 'eq', value: '', valueTo: '' };
+  var isActive = currentFilter.value !== '';
+
+  function update(patch) {
+    column.setFilterValue(Object.assign({}, currentFilter, patch));
+  }
+
+  function handleClear() {
+    column.setFilterValue(undefined);
+  }
+
+  return (
+    <FilterWrapper isActive={isActive} onClear={handleClear}>
+      <div className="xeplr-table-date-filter">
+        <select
+          className="xeplr-table-filter-operator"
+          value={currentFilter.operator}
+          onChange={function(e) { update({ operator: e.target.value }); }}
+        >
+          {OPERATORS.map(function(op) {
+            return <option key={op.value} value={op.value}>{op.label}</option>;
+          })}
+        </select>
+
+        <input
+          className="xeplr-table-filter-input"
+          type="date"
+          value={currentFilter.value}
+          onChange={function(e) { update({ value: e.target.value }); }}
+        />
+
+        {currentFilter.operator === 'between' && (
+          <input
+            className="xeplr-table-filter-input"
+            type="date"
+            value={currentFilter.valueTo}
+            onChange={function(e) { update({ valueTo: e.target.value }); }}
+          />
+        )}
+      </div>
+    </FilterWrapper>
+  );
+}
+
+/**
+ * Custom filter function for date columns.
+ */
+export function dateFilterFn(row, columnId, filterValue) {
+  if (!filterValue || !filterValue.value) return true;
+
+  var raw = row.getValue(columnId);
+  if (raw === null || raw === undefined || raw === '') return false;
+
+  return resolveDate(raw, filterValue.operator, filterValue.value, filterValue.valueTo);
+}

package/src/filters/FilterWrapper.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+/**
+ * Common filter popover shell.
+ * Renders a trigger icon and a dropdown panel that closes on outside click.
+ *
+ * @param {object}  props
+ * @param {boolean} props.isActive   - Whether filter is currently applied
+ * @param {React.ReactNode} props.children - Filter UI content
+ * @param {Function} props.onClear   - Called when user clears the filter
+ */
+export default function FilterWrapper({ isActive, children, onClear }) {
+  var [open, setOpen] = useState(false);
+  var wrapperRef = useRef(null);
+
+  // Close on outside click
+  useEffect(function() {
+    if (!open) return;
+
+    function handleClick(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick);
+    return function() { document.removeEventListener('mousedown', handleClick); };
+  }, [open]);
+
+  return (
+    <div className="xeplr-table-filter-wrapper" ref={wrapperRef}>
+      <button
+        className={'xeplr-table-filter-trigger' + (isActive ? ' xeplr-table-filter-active' : '')}
+        onClick={function() { setOpen(!open); }}
+        title="Filter"
+        type="button"
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="xeplr-table-filter-panel">
+          {children}
+          <div className="xeplr-table-filter-actions">
+            <button
+              type="button"
+              className="xeplr-table-filter-clear-btn"
+              onClick={function() { onClear(); setOpen(false); }}
+            >
+              Clear
+            </button>
+            <button
+              type="button"
+              className="xeplr-table-filter-close-btn"
+              onClick={function() { setOpen(false); }}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/filters/NumberFilter.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import FilterWrapper from './FilterWrapper.jsx';
+import { resolveNumber, isNullish } from '../operators.js';
+
+var OPERATORS = [
+  { value: 'eq', label: '= Equals' },
+  { value: 'neq', label: '!= Not Equals' },
+  { value: 'gt', label: '> Greater Than' },
+  { value: 'gte', label: '>= Greater or Equal' },
+  { value: 'lt', label: '< Less Than' },
+  { value: 'lte', label: '<= Less or Equal' },
+  { value: 'between', label: 'Between' }
+];
+
+/**
+ * Number filter: operator select + input(s) + null checks.
+ *
+ * Filter value shape: { operator, value, valueTo, isNull: boolean | null }
+ */
+export default function NumberFilter({ column }) {
+  var currentFilter = column.getFilterValue() || { operator: 'eq', value: '', valueTo: '', isNull: null };
+  var isActive = currentFilter.value !== '' || currentFilter.isNull !== null;
+
+  function update(patch) {
+    column.setFilterValue(Object.assign({}, currentFilter, patch));
+  }
+
+  function setNullMode(mode) {
+    var next = currentFilter.isNull === mode ? null : mode;
+    update({ isNull: next });
+  }
+
+  function handleClear() {
+    column.setFilterValue(undefined);
+  }
+
+  return (
+    <FilterWrapper isActive={isActive} onClear={handleClear}>
+      <div className="xeplr-table-number-filter">
+        <select
+          className="xeplr-table-filter-operator"
+          value={currentFilter.operator}
+          onChange={function(e) { update({ operator: e.target.value }); }}
+        >
+          {OPERATORS.map(function(op) {
+            return <option key={op.value} value={op.value}>{op.label}</option>;
+          })}
+        </select>
+
+        <input
+          className="xeplr-table-filter-input"
+          type="number"
+          placeholder={currentFilter.operator === 'between' ? 'Min' : 'Value'}
+          value={currentFilter.value}
+          onChange={function(e) { update({ value: e.target.value }); }}
+        />
+
+        {currentFilter.operator === 'between' && (
+          <input
+            className="xeplr-table-filter-input"
+            type="number"
+            placeholder="Max"
+            value={currentFilter.valueTo}
+            onChange={function(e) { update({ valueTo: e.target.value }); }}
+          />
+        )}
+
+        <div className="xeplr-table-filter-null-controls">
+          <button
+            type="button"
+            className={currentFilter.isNull === true ? 'active' : ''}
+            onClick={function() { setNullMode(true); }}
+          >
+            Is Null
+          </button>
+          <button
+            type="button"
+            className={currentFilter.isNull === false ? 'active' : ''}
+            onClick={function() { setNullMode(false); }}
+          >
+            Is Not Null
+          </button>
+        </div>
+      </div>
+    </FilterWrapper>
+  );
+}
+
+/**
+ * Custom filter function for number columns.
+ */
+export function numberFilterFn(row, columnId, filterValue) {
+  if (!filterValue) return true;
+
+  var raw = row.getValue(columnId);
+
+  // Null mode
+  if (filterValue.isNull === true) return isNullish(raw);
+  if (filterValue.isNull === false && isNullish(raw)) return false;
+
+  // No value entered — pass through
+  if (filterValue.value === '' || filterValue.value === undefined) return true;
+
+  return resolveNumber(raw, filterValue.operator, filterValue.value, filterValue.valueTo);
+}

package/src/filters/StringFilter.jsx

@@ -0,0 +1,142 @@
+import React, { useState, useMemo } from 'react';
+import FilterWrapper from './FilterWrapper.jsx';
+
+/**
+ * Excel-like string filter: searchable multi-select of unique values + null checks.
+ *
+ * Filter value shape: { selected: string[], isNull: boolean | null }
+ *   - selected: array of checked values (empty = all selected = no filter)
+ *   - isNull: true = show only nulls, false = exclude nulls, null = don't care
+ */
+export default function StringFilter({ column }) {
+  var currentFilter = column.getFilterValue() || { selected: [], isNull: null };
+  var [search, setSearch] = useState('');
+
+  // Collect unique non-null values from the full (pre-filtered) data
+  var uniqueValues = useMemo(function() {
+    var vals = new Set();
+    var rows = column.getFacetedRowModel().rows;
+    for (var i = 0; i < rows.length; i++) {
+      var val = rows[i].getValue(column.id);
+      if (val !== null && val !== undefined && val !== '') {
+        vals.add(String(val));
+      }
+    }
+    var arr = Array.from(vals);
+    arr.sort();
+    return arr;
+  }, [column.getFacetedRowModel()]);
+
+  var filteredValues = useMemo(function() {
+    if (!search) return uniqueValues;
+    var lower = search.toLowerCase();
+    return uniqueValues.filter(function(v) { return v.toLowerCase().includes(lower); });
+  }, [uniqueValues, search]);
+
+  var selectedSet = new Set(currentFilter.selected);
+  var isActive = currentFilter.selected.length > 0 || currentFilter.isNull !== null;
+
+  function toggleValue(val) {
+    var next = new Set(selectedSet);
+    if (next.has(val)) {
+      next.delete(val);
+    } else {
+      next.add(val);
+    }
+    column.setFilterValue({ selected: Array.from(next), isNull: currentFilter.isNull });
+  }
+
+  function selectAll() {
+    column.setFilterValue({ selected: [], isNull: currentFilter.isNull });
+  }
+
+  function selectNone() {
+    // Selecting "none" means selecting all visible as the filter — i.e. show nothing
+    // Actually, set selected to a sentinel empty-but-active state
+    column.setFilterValue({ selected: ['__xeplr_none__'], isNull: currentFilter.isNull });
+  }
+
+  function setNullMode(mode) {
+    var next = currentFilter.isNull === mode ? null : mode;
+    column.setFilterValue({ selected: currentFilter.selected, isNull: next });
+  }
+
+  function handleClear() {
+    column.setFilterValue(undefined);
+    setSearch('');
+  }
+
+  return (
+    <FilterWrapper isActive={isActive} onClear={handleClear}>
+      <div className="xeplr-table-string-filter">
+        <input
+          className="xeplr-table-filter-search"
+          type="text"
+          placeholder="Search..."
+          value={search}
+          onChange={function(e) { setSearch(e.target.value); }}
+        />
+
+        <div className="xeplr-table-filter-bulk">
+          <button type="button" onClick={selectAll}>Select All</button>
+          <button type="button" onClick={selectNone}>Clear All</button>
+        </div>
+
+        <div className="xeplr-table-filter-list">
+          {filteredValues.map(function(val) {
+            var checked = selectedSet.size === 0 || selectedSet.has(val);
+            return (
+              <label key={val} className="xeplr-table-filter-option">
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={function() { toggleValue(val); }}
+                />
+                <span>{val}</span>
+              </label>
+            );
+          })}
+          {filteredValues.length === 0 && (
+            <div className="xeplr-table-filter-empty">No values</div>
+          )}
+        </div>
+
+        <div className="xeplr-table-filter-null-controls">
+          <button
+            type="button"
+            className={currentFilter.isNull === true ? 'active' : ''}
+            onClick={function() { setNullMode(true); }}
+          >
+            Is Null
+          </button>
+          <button
+            type="button"
+            className={currentFilter.isNull === false ? 'active' : ''}
+            onClick={function() { setNullMode(false); }}
+          >
+            Is Not Null
+          </button>
+        </div>
+      </div>
+    </FilterWrapper>
+  );
+}
+
+/**
+ * Custom filter function for string columns.
+ */
+export function stringFilterFn(row, columnId, filterValue) {
+  if (!filterValue) return true;
+
+  var val = row.getValue(columnId);
+  var isNullish = val === null || val === undefined || val === '';
+
+  // Null mode check
+  if (filterValue.isNull === true) return isNullish;
+  if (filterValue.isNull === false && isNullish) return false;
+
+  // Selected values check
+  if (filterValue.selected.length === 0) return true; // no selection = show all
+  if (filterValue.selected[0] === '__xeplr_none__') return false;
+  return filterValue.selected.includes(String(val));
+}

package/src/index.js

@@ -0,0 +1,32 @@
+// Main component
+export { default as XeplrTable } from './XeplrTable.jsx';
+
+// Controller hooks
+export { default as useTableController } from './useTableController.js';
+export { default as useActionsController } from './useActionsController.js';
+
+// Type detection
+export { detectTypes, TYPES } from './detectTypes.js';
+
+// Individual filter components (for custom layouts)
+export { default as StringFilter, stringFilterFn } from './filters/StringFilter.jsx';
+export { default as NumberFilter, numberFilterFn } from './filters/NumberFilter.jsx';
+export { default as DateFilter, dateFilterFn } from './filters/DateFilter.jsx';
+export { default as BooleanFilter, booleanFilterFn } from './filters/BooleanFilter.jsx';
+export { default as FilterWrapper } from './filters/FilterWrapper.jsx';
+
+// Action components (for custom layouts)
+export { default as ActionsCell } from './actions/ActionsCell.jsx';
+export { default as RecordModal } from './actions/RecordModal.jsx';
+export { default as ChildTable } from './actions/ChildTable.jsx';
+export { default as RecordDetail } from './actions/RecordDetail.jsx';
+export { CHILD_DISPLAY } from './XeplrTable.jsx';
+
+// Change set builder
+export { buildChangeSet } from './buildChangeSet.js';
+
+// Operator resolver (shared comparison logic)
+export { resolve as resolveOperator, resolveString, resolveNumber, resolveDate, isNullish } from './operators.js';
+
+// Conditional formatting
+export { resolveCellStyle } from './resolveCellStyle.js';

package/src/operators.js

@@ -0,0 +1,113 @@
+/**
+ * Shared operator resolver for comparing values.
+ * Used by filters, conditional formatting, and any future comparison logic.
+ *
+ * String operators:  eq, neq, isnull, starts, ends, contains, notcontains
+ * Number operators:  eq, neq, isnull, gt, gte, lt, lte, between
+ * Date operators:    eq, neq, isnull, gt, gte, lt, lte, between
+ */
+
+// ── Null check (works for all types) ──
+
+function isNullish(value) {
+  return value === null || value === undefined || value === '';
+}
+
+// ── String ──
+
+function resolveString(value, operator, target) {
+  if (operator === 'isnull') return isNullish(value);
+  if (isNullish(value)) return false;
+
+  var v = String(value).toLowerCase();
+  var t = (target != null ? String(target) : '').toLowerCase();
+
+  switch (operator) {
+    case 'eq':          return v === t;
+    case 'neq':         return v !== t;
+    case 'starts':      return v.startsWith(t);
+    case 'ends':        return v.endsWith(t);
+    case 'contains':    return v.includes(t);
+    case 'notcontains': return !v.includes(t);
+    default:            return false;
+  }
+}
+
+// ── Number ──
+
+function resolveNumber(value, operator, target, targetTo) {
+  if (operator === 'isnull') return isNullish(value);
+  if (isNullish(value)) return false;
+
+  var v = Number(value);
+  var t = Number(target);
+
+  switch (operator) {
+    case 'eq':      return v === t;
+    case 'neq':     return v !== t;
+    case 'gt':      return v > t;
+    case 'gte':     return v >= t;
+    case 'lt':      return v < t;
+    case 'lte':     return v <= t;
+    case 'between': {
+      var to = Number(targetTo);
+      if (isNaN(to)) return v >= t;
+      return v >= t && v <= to;
+    }
+    default: return false;
+  }
+}
+
+// ── Date ──
+
+function toDay(v) {
+  var d = new Date(v);
+  return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function resolveDate(value, operator, target, targetTo) {
+  if (operator === 'isnull') return isNullish(value);
+  if (isNullish(value)) return false;
+
+  var v = toDay(value);
+  var t = toDay(target);
+  if (isNaN(v) || isNaN(t)) return false;
+
+  switch (operator) {
+    case 'eq':      return v === t;
+    case 'neq':     return v !== t;
+    case 'gt':      return v > t;
+    case 'gte':     return v >= t;
+    case 'lt':      return v < t;
+    case 'lte':     return v <= t;
+    case 'between': {
+      if (!targetTo) return v >= t;
+      var to = toDay(targetTo);
+      return v >= t && v <= to;
+    }
+    default: return false;
+  }
+}
+
+// ── Unified entry point ──
+
+/**
+ * Resolve an operator comparison.
+ *
+ * @param {string} dataType   - 'string' | 'number' | 'date'
+ * @param {*}      value      - The value to test
+ * @param {string} operator   - The operator key
+ * @param {*}      target     - The comparison target
+ * @param {*}      [targetTo] - Second target for 'between'
+ * @returns {boolean}
+ */
+function resolve(dataType, value, operator, target, targetTo) {
+  switch (dataType) {
+    case 'string':  return resolveString(value, operator, target);
+    case 'number':  return resolveNumber(value, operator, target, targetTo);
+    case 'date':    return resolveDate(value, operator, target, targetTo);
+    default:        return resolveString(value, operator, target);
+  }
+}
+
+export { resolve, resolveString, resolveNumber, resolveDate, isNullish };