@cdx-ui/data-grid 0.3.10 → 0.3.12

package/lib/commonjs/numberCells.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDeltaNumberColDef = gridDeltaNumberColDef;
+exports.gridPolarityNumberColDef = gridPolarityNumberColDef;
+var _reactNative = require("react-native");
+var _components = require("@cdx-ui/components");
+var _icons = require("@cdx-ui/icons");
+var _utils = require("@cdx-ui/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Unicode minus (U+2212). The spec requires this character, not a hyphen. */
+const MINUS = '\u2212';
+const defaultNumberFormat = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 20
+});
+const TONE_CLASS = {
+  success: 'text-content-success',
+  danger: 'text-content-danger',
+  neutral: 'text-content-primary'
+};
+const ARROW_SLOT = {
+  default: 'h-5 w-3.5 items-center justify-center overflow-hidden',
+  compact: 'h-4 w-3 items-center justify-center overflow-hidden'
+};
+const ARROW_SIZE = {
+  default: 20,
+  compact: 16
+};
+const TREND_SIZE = {
+  default: 14,
+  compact: 12
+};
+function toFiniteNumber(value) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function columnValueFormatter(format) {
+  if (!format) {
+    return undefined;
+  }
+  return value => {
+    const numeric = toFiniteNumber(value);
+    return numeric == null ? '' : format(numeric);
+  };
+}
+function formatRaw(value, row, col) {
+  const formatted = col.valueFormatter?.(value, row, col);
+  if (typeof formatted === 'string' && formatted.length > 0) {
+    return formatted;
+  }
+  return defaultNumberFormat.format(value);
+}
+function unsigned(formatted) {
+  const withoutSign = formatted.replace(/^[-−+]\s*/, '');
+  if (withoutSign.startsWith('(') && withoutSign.endsWith(')')) {
+    return withoutSign.slice(1, -1);
+  }
+  return withoutSign;
+}
+function polarityOf(value) {
+  if (value > 0) {
+    return 'positive';
+  }
+  if (value < 0) {
+    return 'negative';
+  }
+  return 'neutral';
+}
+function directionOf(value) {
+  if (value > 0) {
+    return 'increase';
+  }
+  if (value < 0) {
+    return 'decrease';
+  }
+  return 'flat';
+}
+function polarityTone(polarity) {
+  if (polarity === 'positive') {
+    return 'success';
+  }
+  if (polarity === 'negative') {
+    return 'danger';
+  }
+  return 'neutral';
+}
+function deltaTone(direction, increaseIsGood) {
+  if (direction === 'flat') {
+    return 'neutral';
+  }
+  const favorable = direction === 'increase' ? increaseIsGood : !increaseIsGood;
+  return favorable ? 'success' : 'danger';
+}
+function polarityLabel(polarity) {
+  if (polarity === 'positive') {
+    return 'Positive';
+  }
+  if (polarity === 'negative') {
+    return 'Negative';
+  }
+  return 'Neutral';
+}
+function directionLabel(direction) {
+  if (direction === 'increase') {
+    return 'Increase';
+  }
+  if (direction === 'decrease') {
+    return 'Decrease';
+  }
+  return 'No change';
+}
+function NumberReadout({
+  label,
+  display,
+  tone,
+  density,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "relative flex-row items-center gap-0.5",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+      className: "absolute h-px w-px overflow-hidden opacity-0",
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      "aria-hidden": true,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      className: "flex-row items-center gap-0.5",
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+        color: tone === 'neutral' ? 'primary' : tone,
+        size: density === 'compact' ? 'sm' : 'md',
+        children: display
+      })]
+    })]
+  });
+}
+function ToneIcon({
+  icon: Icon,
+  tone,
+  size,
+  slotClassName
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    className: (0, _utils.cn)(TONE_CLASS[tone], slotClassName),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      size: size
+    })
+  });
+}
+function PolarityNumberCell({
+  value,
+  row,
+  col,
+  density
+}) {
+  const numeric = toFiniteNumber(value);
+  if (numeric == null) {
+    return null;
+  }
+  const polarity = polarityOf(numeric);
+  const magnitude = unsigned(formatRaw(numeric, row, col));
+  const display = polarity === 'negative' ? `${MINUS}${magnitude}` : magnitude;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberReadout, {
+    label: `${polarityLabel(polarity)} ${magnitude}`,
+    display: display,
+    tone: polarityTone(polarity),
+    density: density
+  });
+}
+function DeltaSymbol({
+  direction,
+  tone,
+  density,
+  symbol
+}) {
+  if (symbol === 'sign') {
+    return null;
+  }
+  if (symbol === 'arrow') {
+    if (direction === 'flat') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: ARROW_SLOT[density]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToneIcon, {
+      icon: direction === 'increase' ? _icons.ArrowDropUp : _icons.ArrowDropDown,
+      tone: tone,
+      size: ARROW_SIZE[density],
+      slotClassName: ARROW_SLOT[density]
+    });
+  }
+  const icon = direction === 'increase' ? _icons.TrendingUp : direction === 'decrease' ? _icons.TrendingDown : _icons.TrendingFlat;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToneIcon, {
+    icon: icon,
+    tone: tone,
+    size: TREND_SIZE[density]
+  });
+}
+function DeltaNumberCell({
+  value,
+  row,
+  col,
+  density,
+  increaseIsGood,
+  symbol
+}) {
+  const numeric = toFiniteNumber(value);
+  if (numeric == null) {
+    return null;
+  }
+  const direction = directionOf(numeric);
+  const tone = deltaTone(direction, increaseIsGood);
+  const magnitude = unsigned(formatRaw(numeric, row, col));
+  let display = magnitude;
+  if (symbol === 'sign' && direction === 'increase') {
+    display = `+${magnitude}`;
+  } else if (symbol === 'sign' && direction === 'decrease') {
+    display = `${MINUS}${magnitude}`;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberReadout, {
+    label: `${directionLabel(direction)} ${magnitude}`,
+    display: display,
+    tone: tone,
+    density: density,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DeltaSymbol, {
+      direction: direction,
+      tone: tone,
+      density: density,
+      symbol: symbol
+    })
+  });
+}
+function gridPolarityNumberColDef(options = {}) {
+  const density = options.density ?? 'default';
+  return {
+    type: 'number',
+    align: 'end',
+    headerAlign: 'end',
+    ...(options.valueFormatter ? {
+      valueFormatter: columnValueFormatter(options.valueFormatter)
+    } : {}),
+    renderCell: ({
+      value,
+      row,
+      col
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PolarityNumberCell, {
+      value: value,
+      row: row,
+      col: col,
+      density: density
+    })
+  };
+}
+function gridDeltaNumberColDef(options = {}) {
+  const density = options.density ?? 'default';
+  const increaseIsGood = options.increaseIsGood ?? true;
+  const symbol = options.symbol ?? 'arrow';
+  return {
+    type: 'number',
+    align: 'end',
+    headerAlign: 'end',
+    ...(options.valueFormatter ? {
+      valueFormatter: columnValueFormatter(options.valueFormatter)
+    } : {}),
+    renderCell: ({
+      value,
+      row,
+      col
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DeltaNumberCell, {
+      value: value,
+      row: row,
+      col: col,
+      density: density,
+      increaseIsGood: increaseIsGood,
+      symbol: symbol
+    })
+  };
+}
+//# sourceMappingURL=numberCells.js.map

package/lib/commonjs/numberCells.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_components","_icons","_utils","_jsxRuntime","MINUS","defaultNumberFormat","Intl","NumberFormat","undefined","maximumFractionDigits","TONE_CLASS","success","danger","neutral","ARROW_SLOT","default","compact","ARROW_SIZE","TREND_SIZE","toFiniteNumber","value","Number","isFinite","columnValueFormatter","format","numeric","formatRaw","row","col","formatted","valueFormatter","length","unsigned","withoutSign","replace","startsWith","endsWith","slice","polarityOf","directionOf","polarityTone","polarity","deltaTone","direction","increaseIsGood","favorable","polarityLabel","directionLabel","NumberReadout","label","display","tone","density","children","jsxs","View","className","jsx","Text","accessibilityElementsHidden","importantForAccessibility","color","size","ToneIcon","icon","Icon","slotClassName","cn","PolarityNumberCell","magnitude","DeltaSymbol","symbol","ArrowDropUp","ArrowDropDown","TrendingUp","TrendingDown","TrendingFlat","DeltaNumberCell","gridPolarityNumberColDef","options","type","align","headerAlign","renderCell","gridDeltaNumberColDef"],"sourceRoot":"../../src","sources":["numberCells.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dataGridToolbarVariants = exports.dataGridToolbarSearchVariants = exports.dataGridToolbarActionsVariants = exports.dataGridTableVariants = exports.dataGridSortButtonVariants = exports.dataGridSelectHeadVariants = exports.dataGridSelectCellVariants = exports.dataGridRootVariants = exports.dataGridPaginationVariants = exports.dataGridPaginationRangeVariants = exports.dataGridOverlayVariants = exports.dataGridMainVariants = exports.dataGridHeaderVariants = exports.dataGridHeaderLabelVariants = exports.dataGridHeaderCellInnerVariants = exports.dataGridHeadVariants = exports.dataGridFooterVariants = exports.dataGridFilterInputVariants = exports.dataGridEmptyOverlayVariants = exports.dataGridCellVariants = exports.dataGridBodyVariants = void 0;
+exports.dataGridToolbarVariants = exports.dataGridToolbarSearchVariants = exports.dataGridToolbarActionsVariants = exports.dataGridTableVariants = exports.dataGridSortButtonVariants = exports.dataGridSelectHeadVariants = exports.dataGridSelectCellVariants = exports.dataGridRootVariants = exports.dataGridPinnedSurfaceVariants = exports.dataGridPinnedEdgeVariants = exports.dataGridPaginationVariants = exports.dataGridPaginationRangeVariants = exports.dataGridOverlayVariants = exports.dataGridMainVariants = exports.dataGridHeaderVariants = exports.dataGridHeaderLabelVariants = exports.dataGridHeaderCellInnerVariants = exports.dataGridHeadVariants = exports.dataGridFooterVariants = exports.dataGridFilterPanelVariants = exports.dataGridFilterPanelValueVariants = exports.dataGridFilterPanelRowVariants = exports.dataGridFilterPanelOperatorVariants = exports.dataGridFilterPanelLogicVariants = exports.dataGridFilterPanelFooterVariants = exports.dataGridFilterPanelFieldVariants = exports.dataGridFilterPanelColumnVariants = exports.dataGridFilterInputVariants = exports.dataGridEmptyOverlayVariants = exports.dataGridCellVariants = exports.dataGridBodyVariants = void 0;
 var _reactNative = require("react-native");
 var _utils = require("@cdx-ui/utils");
 const dataGridRootVariants = exports.dataGridRootVariants = (0, _utils.cva)('w-full min-w-0 max-w-full flex-col overflow-hidden rounded-2xl border border-stroke-secondary bg-surface-primary', {
@@ -39,6 +39,47 @@ const dataGridMainVariants = exports.dataGridMainVariants = (0, _utils.cva)('rel
     overlay: false
   }
 });
+
+/**
+ * Opaque sticky fill so pinned cells cover scrolled content.
+ * Body hover matches the row's 50% secondary tint, mixed over the primary surface
+ * so the cell stays opaque while content scrolls underneath.
+ */
+const dataGridPinnedSurfaceVariants = exports.dataGridPinnedSurfaceVariants = (0, _utils.cva)(_reactNative.Platform.select({
+  web: 'bg-surface-primary',
+  default: ''
+}), {
+  variants: {
+    header: {
+      true: 'bg-neutral-50',
+      false: _reactNative.Platform.select({
+        web: 'web:[tr:hover_&]:bg-[color-mix(in_srgb,var(--color-surface-secondary)_50%,var(--color-surface-primary))]',
+        default: ''
+      })
+    }
+  },
+  defaultVariants: {
+    header: false
+  }
+});
+const dataGridPinnedEdgeVariants = exports.dataGridPinnedEdgeVariants = (0, _utils.cva)('', {
+  variants: {
+    edge: {
+      start: _reactNative.Platform.select({
+        web: 'border-e border-stroke-secondary',
+        default: ''
+      }),
+      end: _reactNative.Platform.select({
+        web: 'border-s border-stroke-secondary',
+        default: ''
+      }),
+      none: ''
+    }
+  },
+  defaultVariants: {
+    edge: 'none'
+  }
+});
 const dataGridToolbarVariants = exports.dataGridToolbarVariants = (0, _utils.cva)('shrink-0 flex-row items-center gap-3 border-b border-stroke-secondary px-4 py-4');
 const dataGridToolbarSearchVariants = exports.dataGridToolbarSearchVariants = (0, _utils.cva)('max-w-80 min-w-0 flex-1');
 const dataGridToolbarActionsVariants = exports.dataGridToolbarActionsVariants = (0, _utils.cva)('ms-auto flex-row items-center gap-3');
@@ -110,6 +151,25 @@ const dataGridBodyVariants = exports.dataGridBodyVariants = (0, _utils.cva)(_rea
   default: ''
 }));
 const dataGridFilterInputVariants = exports.dataGridFilterInputVariants = (0, _utils.cva)('min-w-24');
+const dataGridFilterPanelVariants = exports.dataGridFilterPanelVariants = (0, _utils.cva)('absolute start-4 top-16 z-30 w-max max-w-[calc(100%-2rem)] gap-3 rounded-lg border border-stroke-secondary bg-surface-primary px-3 pb-2 pt-3 shadow-lg');
+
+// The panel is as wide as one unwrapped row, capped at the grid's width. Below that, fields wrap
+// onto new lines and grow to fill them, so the layout follows the grid's width, not the viewport.
+const dataGridFilterPanelRowVariants = exports.dataGridFilterPanelRowVariants = (0, _utils.cva)('flex-row flex-wrap items-end gap-2');
+const dataGridFilterPanelLogicVariants = exports.dataGridFilterPanelLogicVariants = (0, _utils.cva)('min-h-8 w-24 shrink-0 justify-center');
+const dataGridFilterPanelFieldVariants = exports.dataGridFilterPanelFieldVariants = (0, _utils.cva)('min-w-0 shrink grow gap-1', {
+  variants: {
+    size: {
+      column: 'w-40',
+      operator: 'w-40',
+      value: 'w-56'
+    }
+  }
+});
+const dataGridFilterPanelColumnVariants = exports.dataGridFilterPanelColumnVariants = (0, _utils.cva)('w-full');
+const dataGridFilterPanelOperatorVariants = exports.dataGridFilterPanelOperatorVariants = (0, _utils.cva)('w-full');
+const dataGridFilterPanelValueVariants = exports.dataGridFilterPanelValueVariants = (0, _utils.cva)('w-full');
+const dataGridFilterPanelFooterVariants = exports.dataGridFilterPanelFooterVariants = (0, _utils.cva)('flex-row items-center justify-between gap-2 border-t border-stroke-secondary pt-2');
 const dataGridHeadVariants = exports.dataGridHeadVariants = (0, _utils.cva)(['h-12 bg-neutral-50 px-4', _reactNative.Platform.select({
   web: 'border-b border-stroke-secondary',
   default: ''

package/lib/commonjs/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_utils","dataGridRootVariants","exports","cva","variants","autoHeight","true","false","defaultVariants","dataGridMainVariants","overlay","compoundVariants","className","dataGridToolbarVariants","dataGridToolbarSearchVariants","dataGridToolbarActionsVariants","dataGridFooterVariants","dataGridOverlayVariants","headerFilters","dataGridEmptyOverlayVariants","dataGridHeaderCellInnerVariants","align","start","center","end","fitToColumn","dataGridHeaderLabelVariants","dataGridSortButtonVariants","position","leading","trailing","sorted","dataGridTableVariants","Platform","select","web","default","dataGridHeaderVariants","dataGridBodyVariants","dataGridFilterInputVariants","dataGridHeadVariants","dataGridSelectHeadVariants","dataGridCellVariants","dataGridSelectCellVariants","dataGridPaginationVariants","dataGridPaginationRangeVariants"],"sourceRoot":"../../src","sources":["styles.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_utils","dataGridRootVariants","exports","cva","variants","autoHeight","true","false","defaultVariants","dataGridMainVariants","overlay","compoundVariants","className","dataGridPinnedSurfaceVariants","Platform","select","web","default","header","dataGridPinnedEdgeVariants","edge","start","end","none","dataGridToolbarVariants","dataGridToolbarSearchVariants","dataGridToolbarActionsVariants","dataGridFooterVariants","dataGridOverlayVariants","headerFilters","dataGridEmptyOverlayVariants","dataGridHeaderCellInnerVariants","align","center","fitToColumn","dataGridHeaderLabelVariants","dataGridSortButtonVariants","position","leading","trailing","sorted","dataGridTableVariants","dataGridHeaderVariants","dataGridBodyVariants","dataGridFilterInputVariants","dataGridFilterPanelVariants","dataGridFilterPanelRowVariants","dataGridFilterPanelLogicVariants","dataGridFilterPanelFieldVariants","size","column","operator","value","dataGridFilterPanelColumnVariants","dataGridFilterPanelOperatorVariants","dataGridFilterPanelValueVariants","dataGridFilterPanelFooterVariants","dataGridHeadVariants","dataGridSelectHeadVariants","dataGridCellVariants","dataGridSelectCellVariants","dataGridPaginationVariants","dataGridPaginationRangeVariants"],"sourceRoot":"../../src","sources":["styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/types.js

@@ -3,8 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SELECT_COLUMN_ID = exports.EMPTY_SELECTION = exports.DEFAULT_PAGINATION_MODEL = exports.DEFAULT_PAGE_SIZE_OPTIONS = void 0;
+exports.SELECT_COLUMN_ID = exports.MUI_CHECKBOX_FIELD = exports.EMPTY_SELECTION = exports.DEFAULT_PAGINATION_MODEL = exports.DEFAULT_PAGE_SIZE_OPTIONS = void 0;
+/**
+ * Filter operators. Names match MUI Data Grid Community so server handlers written for
+ * MUI keep working. Which operators a column accepts depends on its `type`.
+ */
+
+/**
+ * Columns pinned to the logical start and end edges while the grid scrolls
+ * horizontally.
+ *
+ * `left` and `right` are deprecated compatibility aliases for `start` and `end`
+ * (same mapping as `GridColDef.align`).
+ */
+
+/** How `filterModel` items combine: every item must match (`'and'`) or any one item (`'or'`). */
+
+/**
+ * Built-in column types. Names and defaults match MUI Data Grid Community.
+ * Omit `type` to keep untyped display, alignment, and sort.
+ */
+
+/**
+ * A `singleSelect` choice: a primitive (value and label are the same) or an
+ * explicit `{ value, label }` pair.
+ */
+
 const SELECT_COLUMN_ID = exports.SELECT_COLUMN_ID = '__select__';
+
+/** MUI X Data Grid checkbox-column field; accepted as an alias for {@link SELECT_COLUMN_ID}. */
+const MUI_CHECKBOX_FIELD = exports.MUI_CHECKBOX_FIELD = '__check__';
 const DEFAULT_PAGE_SIZE_OPTIONS = exports.DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100];
 const DEFAULT_PAGINATION_MODEL = exports.DEFAULT_PAGINATION_MODEL = {
   page: 0,

package/lib/commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["SELECT_COLUMN_ID","exports","DEFAULT_PAGE_SIZE_OPTIONS","DEFAULT_PAGINATION_MODEL","page","pageSize","EMPTY_SELECTION","type","ids","Set"],"sourceRoot":"../../src","sources":["types.ts"],"mappings":";;;;;;AAuIO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,YAAY;AAErC,MAAME,yBAAyB,GAAAD,OAAA,CAAAC,yBAAA,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU;AAExD,MAAMC,wBAA6C,GAAAF,OAAA,CAAAE,wBAAA,GAAG;EAC3DC,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE;AACZ,CAAC;AAEM,MAAMC,eAAsC,GAAAL,OAAA,CAAAK,eAAA,GAAG;EACpDC,IAAI,EAAE,SAAS;EACfC,GAAG,EAAE,IAAIC,GAAG,CAAC;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["SELECT_COLUMN_ID","exports","MUI_CHECKBOX_FIELD","DEFAULT_PAGE_SIZE_OPTIONS","DEFAULT_PAGINATION_MODEL","page","pageSize","EMPTY_SELECTION","type","ids","Set"],"sourceRoot":"../../src","sources":["types.ts"],"mappings":";;;;;;AA8BA;AACA;AACA;AACA;;AAsCA;AACA;AACA;AACA;AACA;AACA;AACA;;AAcA;;AAYA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;;AA+HO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,YAAY;;AAE5C;AACO,MAAME,kBAAkB,GAAAD,OAAA,CAAAC,kBAAA,GAAG,WAAW;AAEtC,MAAMC,yBAAyB,GAAAF,OAAA,CAAAE,yBAAA,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU;AAExD,MAAMC,wBAA6C,GAAAH,OAAA,CAAAG,wBAAA,GAAG;EAC3DC,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE;AACZ,CAAC;AAEM,MAAMC,eAAsC,GAAAN,OAAA,CAAAM,eAAA,GAAG;EACpDC,IAAI,EAAE,SAAS;EACfC,GAAG,EAAE,IAAIC,GAAG,CAAC;AACf,CAAC","ignoreList":[]}

package/lib/commonjs/useDataGridTable.js

@@ -17,9 +17,22 @@ var _react = require("react");
 var _reactTable = require("@tanstack/react-table");
 var _selectColumn = require("./adapter/selectColumn");
 var _columns = require("./adapter/columns");
+var _columnTypes = require("./adapter/columnTypes");
+var _filterOperators = require("./adapter/filterOperators");
 var _types = require("./types");
+function gridGlobalFilterFn(row, columnId, filterValue) {
+  if (columnId === _types.SELECT_COLUMN_ID) {
+    return false;
+  }
+  const meta = row.getAllCells().find(cell => cell.column.id === columnId)?.column.columnDef.meta;
+  if ((0, _columnTypes.metaUsesDisplayFilter)(meta)) {
+    return (0, _columnTypes.filterFn_displayText)(row, columnId, filterValue);
+  }
+  return (0, _columnTypes.untypedCellIncludesQuery)(row.getValue(columnId), (0, _columnTypes.normalizeFilterQuery)(filterValue));
+}
 const features = (0, _reactTable.tableFeatures)({
   columnFilteringFeature: _reactTable.columnFilteringFeature,
+  columnPinningFeature: _reactTable.columnPinningFeature,
   globalFilteringFeature: _reactTable.globalFilteringFeature,
   rowSortingFeature: _reactTable.rowSortingFeature,
   rowPaginationFeature: _reactTable.rowPaginationFeature,
@@ -32,7 +45,11 @@ const features = (0, _reactTable.tableFeatures)({
   },
   sortFns: {
     alphanumeric: _reactTable.sortFn_alphanumeric,
-    text: _reactTable.sortFn_text
+    text: _reactTable.sortFn_text,
+    number: _columnTypes.sortFn_number,
+    datetime: _columnTypes.sortFn_datetime,
+    boolean: _columnTypes.sortFn_boolean,
+    selectLabel: _columnTypes.sortFn_selectLabel
   }
 });
 function sortModelToSortingState(model) {
@@ -71,17 +88,60 @@ function columnFilterValueToString(value) {
   }
   return '';
 }
+
+/**
+ * Items without an `operator` keep today's text filter. Items with one carry the operator and
+ * typed operand into the column filter. An item whose operator needs a value but has none is
+ * dropped, so `isEmpty` / `isNotEmpty` survive a blank `value` and nothing else does.
+ */
 function filterModelToColumnFilters(model) {
-  return model.filter(item => item.value.trim().length > 0).map(item => ({
-    id: item.field,
-    value: item.value
+  const valuesByField = new Map();
+  for (const item of model) {
+    let value;
+    if (item.operator !== undefined) {
+      if ((0, _filterOperators.filterOperatorNeedsValue)(item.operator) && (0, _filterOperators.isBlankFilterValue)(item.value)) {
+        continue;
+      }
+      value = {
+        operator: item.operator,
+        value: item.value
+      };
+    } else {
+      const text = columnFilterValueToString(item.value);
+      if (text.trim().length === 0) {
+        continue;
+      }
+      value = text;
+    }
+    const values = valuesByField.get(item.field);
+    if (values) {
+      values.push(value);
+    } else {
+      valuesByField.set(item.field, [value]);
+    }
+  }
+  return [...valuesByField].map(([id, values]) => ({
+    id,
+    value: values.length === 1 ? values[0] : {
+      items: values
+    }
   }));
 }
+function columnFilterValueToItem(field, value) {
+  if ((0, _filterOperators.isOperatorFilterValue)(value)) {
+    return {
+      field,
+      operator: value.operator,
+      value: value.value
+    };
+  }
+  return {
+    field,
+    value: columnFilterValueToString(value)
+  };
+}
 function columnFiltersToFilterModel(state) {
-  return state.filter(item => item.id !== _types.SELECT_COLUMN_ID).map(item => ({
-    field: item.id,
-    value: columnFilterValueToString(item.value)
-  }));
+  return state.filter(item => item.id !== _types.SELECT_COLUMN_ID).flatMap(item => (0, _filterOperators.isFilterValueGroup)(item.value) ? item.value.items.map(value => columnFilterValueToItem(item.id, value)) : [columnFilterValueToItem(item.id, item.value)]);
 }
 function selectionIdKey(id) {
   return `${typeof id}:${String(id)}`;
@@ -162,12 +222,30 @@ function useDataGridTable({
   onPaginationModelChange,
   filterModel,
   onFilterModelChange,
+  filterLogicOperator,
   quickFilter,
   onQuickFilterChange,
   rowSelectionModel,
-  onRowSelectionModelChange
+  onRowSelectionModelChange,
+  columnPinning
 }) {
-  const data = (0, _react.useMemo)(() => [...rows], [rows]);
+  const orFilterItems = (0, _react.useMemo)(() => {
+    if (filterLogicOperator !== 'or' || filterMode === 'server') {
+      return undefined;
+    }
+    const active = filterModel.filter(_filterOperators.isActiveFilterItem);
+    return active.length > 1 ? active : undefined;
+  }, [filterLogicOperator, filterMode, filterModel]);
+  const data = (0, _react.useMemo)(() => {
+    if (!orFilterItems) {
+      return [...rows];
+    }
+    const filterableColumns = new Map(columns.filter(col => col.filterable !== false).map(col => [col.field, col]));
+    return rows.filter(row => orFilterItems.some(item => {
+      const col = filterableColumns.get(item.field);
+      return col !== undefined && (0, _filterOperators.rowMatchesFilterItem)(col, row, item);
+    }));
+  }, [columns, orFilterItems, rows]);
   const allIds = (0, _react.useMemo)(() => data.map(row => resolveRowId(row, getRowId)), [data, getRowId]);
   const columnDefs = (0, _react.useMemo)(() => {
     const mapped = columns.map(col => {
@@ -181,7 +259,7 @@ function useDataGridTable({
   }, [checkboxSelection, columns, disableColumnSorting]);
   const sortingState = (0, _react.useMemo)(() => sortModelToSortingState(sortModel), [sortModel]);
   const paginationState = (0, _react.useMemo)(() => paginationModelToState(paginationModel), [paginationModel]);
-  const columnFilterState = (0, _react.useMemo)(() => filterModelToColumnFilters(filterModel), [filterModel]);
+  const columnFilterState = (0, _react.useMemo)(() => orFilterItems ? [] : filterModelToColumnFilters(filterModel), [filterModel, orFilterItems]);
   const rowSelectionState = (0, _react.useMemo)(() => selectionModelToRowSelection(rowSelectionModel, allIds), [rowSelectionModel, allIds]);
   const resetPaginationPage = () => {
     if (paginationModel.page !== 0) {
@@ -213,6 +291,7 @@ function useDataGridTable({
     getRowId: row => selectionIdKey(resolveRowId(row, getRowId)),
     enableMultiSort: false,
     enableMultiRowSelection: true,
+    globalFilterFn: gridGlobalFilterFn,
     manualPagination: paginationMode === 'server',
     manualSorting: sortingMode === 'server',
     manualFiltering: filterMode === 'server',
@@ -223,7 +302,8 @@ function useDataGridTable({
       pagination: paginationState,
       columnFilters: columnFilterState,
       globalFilter: quickFilter,
-      rowSelection: rowSelectionState
+      rowSelection: rowSelectionState,
+      columnPinning
     },
     onSortingChange: updater => {
       const next = (0, _columns.applyUpdater)(updater, sortingState);
@@ -248,10 +328,15 @@ function useDataGridTable({
       onRowSelectionModelChange(rowSelectionToModel(next, rowSelectionModel, allIds));
     }
   });
+  const setFilterModel = model => {
+    onFilterModelChange(model);
+    resetPaginationPage();
+  };
   return {
     table,
     setQuickFilter,
-    setColumnFilter
+    setColumnFilter,
+    setFilterModel
   };
 }
 //# sourceMappingURL=useDataGridTable.js.map