@economic/taco 2.41.4 → 2.42.0

package/dist/taco.cjs.development.js

@@ -3911,12 +3911,38 @@ const getDialogSizeClassnames = size => {
 const getDialogPositionClassnames = () => 'mt-16 mx-auto';
 const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
 
+const iconPropsByVariant = variant => {
+  switch (variant) {
+    case 'information':
+      return {
+        color: 'blue',
+        icon: 'info'
+      };
+    case 'error':
+      return {
+        color: 'red',
+        icon: 'close'
+      };
+    case 'warning':
+      return {
+        color: 'yellow',
+        icon: 'warning'
+      };
+    default:
+      return undefined;
+  }
+};
 const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref) {
-  const className = cn('text-center', props.className);
+  const {
+    props: parentProps
+  } = useCurrentAlertDialog();
+  const iconProps = iconPropsByVariant(parentProps.variant);
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Title, Object.assign({}, props, {
-    className: className,
+    className: cn('flex items-center', props.className),
     ref: ref
-  }));
+  }), iconProps ? /*#__PURE__*/React.createElement(BadgeIcon, Object.assign({}, iconProps, {
+    className: "mr-2"
+  })) : undefined, props.children);
 });
 const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
   const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
@@ -5060,14 +5086,16 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   const {
     title,
     menu,
-    children
+    children,
+    className,
+    ...otherProps
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
+  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
+    className: cardClassName,
     "data-taco": "card",
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "mx-4 mb-2 mt-4 flex justify-between"
   }, title && (/*#__PURE__*/React.createElement(Truncate, {
     tooltip: title
@@ -6294,7 +6322,8 @@ const UnstyledArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props,
       transform: 'rotateZ(180deg)'
     }
   }), /*#__PURE__*/React.createElement("path", {
-    className: "text-grey-300 fill-current group-focus:text-blue-300",
+    // rgba(89, 85, 98, 0.35) is the primary color of the yt-shadow, giving the arrow a shadow-like appearance
+    className: "text-[rgba(89, 85, 98, 0.35)] fill-current",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
   }), /*#__PURE__*/React.createElement("path", {
     className: "fill-current",
@@ -9746,136 +9775,6 @@ const Provider = props => {
 })(exports.FontSizes || (exports.FontSizes = {}));
 const fixedForwardRef = React__default.forwardRef;
 
-function getSortingFn(dataType, customFnOrBuiltIn) {
-  if (typeof customFnOrBuiltIn === 'function') {
-    return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
-  }
-  // if a built in is being used, just return that
-  if (customFnOrBuiltIn) {
-    return customFnOrBuiltIn;
-  }
-  // some times we alias based on the type
-  if (dataType && dataType !== 'boolean' && dataType !== 'number') {
-    return dataType;
-  }
-  // otherwise fall back to auto
-  return 'auto';
-}
-
-function isInternalColumn(id) {
-  return id === null || id === void 0 ? void 0 : id.startsWith('__');
-}
-// column widths
-const getCellMinWidth = (fontSize = 'medium') => {
-  switch (fontSize) {
-    case exports.FontSizes.small:
-      return 57;
-    case exports.FontSizes.large:
-      return 83;
-    default:
-    case exports.FontSizes.medium:
-      return 72;
-  }
-};
-// highlighting
-function isCellHighlighted(query, value, dataType) {
-  if (value === undefined || value === null) {
-    return false;
-  }
-  return String(getCellValueAsString(value, dataType)).toLocaleLowerCase().includes(query.toLocaleLowerCase());
-}
-function getCellValueAsString(value, dataType) {
-  if (value === undefined || value === null) {
-    return '';
-  } else if (dateFns.isDate(value)) {
-    var _format;
-    return (_format = format(value)) !== null && _format !== void 0 ? _format : '';
-  } else if (dataType === 'datetime' && typeof value === 'string') {
-    var _format2;
-    return (_format2 = format(parseFromISOString(value))) !== null && _format2 !== void 0 ? _format2 : '';
-  }
-  return String(value);
-}
-function orderColumn(column, {
-  orderingDisabled,
-  orderingEnabled
-}) {
-  const groupedColumn = column;
-  if (Array.isArray(groupedColumn.columns) && groupedColumn.columns.length > 0) {
-    groupedColumn.columns.forEach(subcolumn => orderColumn(subcolumn, {
-      orderingDisabled,
-      orderingEnabled
-    }));
-  } else {
-    var _column$meta;
-    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
-      orderingEnabled.push(column.id);
-    } else {
-      orderingDisabled.push(column.id);
-    }
-  }
-}
-// ordering
-function ensureOrdering(columns, settingsOrder, pinnedOrder = [], internalColumnsPinnedToTheRight = ['__actions']) {
-  // internal columns come with a defined order
-  const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
-  // columns with ordering disabled should be moved to the front
-  const orderingDisabled = [];
-  let orderingEnabled = [];
-  let orderedColumns = columns;
-  // if settings is defined, make sure the columns that are actual children are sorted by it
-  if (Array.isArray(settingsOrder)) {
-    orderedColumns = columns.slice().sort(
-    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
-    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
-  }
-  orderedColumns.forEach(column => {
-    if (isInternalColumn(column.id)) {
-      return;
-    }
-    orderColumn(column, {
-      orderingDisabled,
-      orderingEnabled
-    });
-  });
-  if (settingsOrder && settingsOrder.length > 0) {
-    const columnsAbsentInSettingsOrder = [];
-    orderingEnabled = orderingEnabled.reduce((acc, column) => {
-      const index = settingsOrder.indexOf(column);
-      if (index > -1) {
-        acc[index] = column;
-      } else {
-        columnsAbsentInSettingsOrder.push(column);
-      }
-      return acc;
-    }, []).filter(column => !!column)
-    // Append absent columns at the end
-    .concat(columnsAbsentInSettingsOrder);
-  }
-  // if pinned columns are defined, make sure they are sorted first, this ensures state matches the freezing "upto" behaviour
-  if (Array.isArray(pinnedOrder)) {
-    orderingEnabled.sort(
-    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
-    (a, b) => (pinnedOrder.indexOf(a) >>> 0) - (pinnedOrder.indexOf(b) >>> 0));
-  }
-  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
-  // actions should always be last, enforce that
-  internalColumnsPinnedToTheRight.forEach(id => {
-    if (columns.findIndex(column => column.id === id) > -1) {
-      order.push(id);
-    }
-  });
-  return order;
-}
-// freezing - we use the react-table pinning state, but that requires some mapping between them
-function unfreezeAllExternalColumns(leftPinnedState) {
-  var _leftPinnedState$filt;
-  return (_leftPinnedState$filt = leftPinnedState === null || leftPinnedState === void 0 ? void 0 : leftPinnedState.filter(id => isInternalColumn(id) && id !== '__actions')) !== null && _leftPinnedState$filt !== void 0 ? _leftPinnedState$filt : [];
-}
-function freezeUptoExternalColumn(index, columns) {
-  return columns.slice(0, index + 1);
-}
-
 // filtering
 (function (TableFilterComparator) {
   TableFilterComparator[TableFilterComparator["Contains"] = 0] = "Contains";
@@ -9899,6 +9798,74 @@ function freezeUptoExternalColumn(index, columns) {
   TableServerLoadAllState[TableServerLoadAllState["Completed"] = 2] = "Completed";
 })(exports.TableServerLoadAllState || (exports.TableServerLoadAllState = {}));
 
+const dataTypes = {
+  auto: {
+    sortingFn: 'auto',
+    filterComparators: [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  // base
+  text: {
+    sortingFn: 'alphanumeric',
+    filterComparators: [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  number: {
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  datetime: {
+    sortingFn: 'datetime',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty],
+    getDisplayValue: (value, options) => {
+      if (value === undefined) {
+        return '';
+      }
+      if (dateFns.isDate(value)) {
+        var _format, _options$localization;
+        return (_format = format(value, options === null || options === void 0 ? void 0 : (_options$localization = options.localization) === null || _options$localization === void 0 ? void 0 : _options$localization.formatting.date)) !== null && _format !== void 0 ? _format : '';
+      } else if (typeof value === 'string') {
+        var _format2, _options$localization2;
+        return (_format2 = format(parseFromISOString(value), options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.formatting.date)) !== null && _format2 !== void 0 ? _format2 : '';
+      }
+      return String(value);
+    }
+  },
+  boolean: {
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo]
+  },
+  // advanced
+  amount: {
+    align: 'right',
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty],
+    getDisplayValue: (value, options) => {
+      var _options$localization3;
+      if (value === undefined) {
+        return '';
+      }
+      return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization3 = options.localization) === null || _options$localization3 === void 0 ? void 0 : _options$localization3.locale, {
+        minimumFractionDigits: 2
+      }).format(Number(value));
+    }
+  }
+};
+function getDataTypeProperties(dataType) {
+  var _dataTypes;
+  return (_dataTypes = dataTypes[dataType !== null && dataType !== void 0 ? dataType : 'text']) !== null && _dataTypes !== void 0 ? _dataTypes : dataTypes.text;
+}
+
+function getSortingFn(dataType, customFnOrBuiltIn) {
+  // custom functions should override any that come from dataType
+  if (typeof customFnOrBuiltIn === 'function') {
+    return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
+  }
+  // if a built in is being used, just return that
+  if (customFnOrBuiltIn) {
+    return customFnOrBuiltIn;
+  }
+  return getDataTypeProperties(dataType).sortingFn;
+}
+
 const toLowerCase = value => String(value !== null && value !== void 0 ? value : '').toLocaleLowerCase();
 const isWeakContains = (left, right) => toLowerCase(left).includes(toLowerCase(right));
 const isWeakEqual$1 = (left, right) => toLowerCase(left) === toLowerCase(right);
@@ -10009,19 +9976,189 @@ function columnFilterFn(value, filter) {
     return true;
   }
 }
-function globalFilterFn(row, columnId, searchQuery) {
+
+function isMatched(searchQuery, cellValue, dataType, localization) {
+  const cellValueAsString = String(cellValue !== null && cellValue !== void 0 ? cellValue : '');
+  if (cellValueAsString !== undefined && isWeakContains(cellValueAsString, searchQuery)) {
+    return true;
+  } else {
+    const dataTypeProperties = getDataTypeProperties(dataType);
+    if (dataTypeProperties.getDisplayValue) {
+      const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
+        localization
+      });
+      if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function globalFilterFn(row, columnId, searchQuery, localization) {
   try {
     if (row.original) {
       var _row$_getAllCellsByCo, _row$_getAllCellsByCo2;
+      const cellValue = row.original[columnId];
       const dataType = (_row$_getAllCellsByCo = row._getAllCellsByColumnId()[columnId]) === null || _row$_getAllCellsByCo === void 0 ? void 0 : (_row$_getAllCellsByCo2 = _row$_getAllCellsByCo.column.columnDef.meta) === null || _row$_getAllCellsByCo2 === void 0 ? void 0 : _row$_getAllCellsByCo2.dataType;
-      const cellValue = getCellValueAsString(row.original[columnId], dataType);
-      return isWeakContains(cellValue, searchQuery);
+      return isMatched(searchQuery, cellValue, dataType, localization);
     }
   } catch {
     // we don't care, just fail silently and return no results
   }
   return false;
 }
+function resetHighlightedColumnIndexes(searchQuery, table, localization) {
+  const tableMeta = table.options.meta;
+  let firstRowIndex;
+  if (searchQuery) {
+    const indexes = [];
+    const columns = table.getVisibleLeafColumns();
+    const rowGrouping = table.getState().grouping;
+    table.getRowModel().rows.forEach((row, rowIndex) => {
+      columns.forEach((column, columnIndex) => {
+        try {
+          let allowSearch = true;
+          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
+            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
+            if (row.getIsGrouped()) {
+              allowSearch = column.getIsGrouped();
+            }
+            // otherwise for other rows, don't search the grouped column - because it isn't visible
+            else if (rowGrouping.includes(column.id)) {
+              allowSearch = false;
+            }
+          }
+          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
+            var _column$columnDef$met;
+            const cellValue = get(row.original, column.id);
+            const dataType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType;
+            if (isMatched(searchQuery, cellValue, dataType, localization)) {
+              indexes.push([rowIndex, columnIndex]);
+            }
+          }
+        } catch (e) {
+          //
+        }
+      });
+    });
+    tableMeta.search.setHighlightedColumnIndexes(indexes);
+    if (indexes.length) {
+      firstRowIndex = indexes[0][0];
+      tableMeta.search.setCurrentHighlightColumnIndex(0);
+    } else {
+      tableMeta.search.setCurrentHighlightColumnIndex(undefined);
+    }
+  } else {
+    tableMeta.search.setHighlightedColumnIndexes([]);
+    tableMeta.search.setCurrentHighlightColumnIndex(undefined);
+  }
+  if (firstRowIndex !== undefined) {
+    tableMeta.rowActive.setRowActiveIndex(firstRowIndex);
+  }
+  return firstRowIndex;
+}
+
+function isInternalColumn(id) {
+  return id === null || id === void 0 ? void 0 : id.startsWith('__');
+}
+// column widths
+const getCellMinWidth = (fontSize = 'medium') => {
+  switch (fontSize) {
+    case exports.FontSizes.small:
+      return 57;
+    case exports.FontSizes.large:
+      return 83;
+    default:
+    case exports.FontSizes.medium:
+      return 72;
+  }
+};
+// highlighting
+function isCellHighlighted(query, value, dataType, localization) {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  return isMatched(query, value, dataType, localization);
+}
+function orderColumn(column, {
+  orderingDisabled,
+  orderingEnabled
+}) {
+  const groupedColumn = column;
+  if (Array.isArray(groupedColumn.columns) && groupedColumn.columns.length > 0) {
+    groupedColumn.columns.forEach(subcolumn => orderColumn(subcolumn, {
+      orderingDisabled,
+      orderingEnabled
+    }));
+  } else {
+    var _column$meta;
+    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
+      orderingEnabled.push(column.id);
+    } else {
+      orderingDisabled.push(column.id);
+    }
+  }
+}
+// ordering
+function ensureOrdering(columns, settingsOrder, pinnedOrder = [], internalColumnsPinnedToTheRight = ['__actions']) {
+  // internal columns come with a defined order
+  const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
+  // columns with ordering disabled should be moved to the front
+  const orderingDisabled = [];
+  let orderingEnabled = [];
+  let orderedColumns = columns;
+  // if settings is defined, make sure the columns that are actual children are sorted by it
+  if (Array.isArray(settingsOrder)) {
+    orderedColumns = columns.slice().sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
+  }
+  orderedColumns.forEach(column => {
+    if (isInternalColumn(column.id)) {
+      return;
+    }
+    orderColumn(column, {
+      orderingDisabled,
+      orderingEnabled
+    });
+  });
+  if (settingsOrder && settingsOrder.length > 0) {
+    const columnsAbsentInSettingsOrder = [];
+    orderingEnabled = orderingEnabled.reduce((acc, column) => {
+      const index = settingsOrder.indexOf(column);
+      if (index > -1) {
+        acc[index] = column;
+      } else {
+        columnsAbsentInSettingsOrder.push(column);
+      }
+      return acc;
+    }, []).filter(column => !!column)
+    // Append absent columns at the end
+    .concat(columnsAbsentInSettingsOrder);
+  }
+  // if pinned columns are defined, make sure they are sorted first, this ensures state matches the freezing "upto" behaviour
+  if (Array.isArray(pinnedOrder)) {
+    orderingEnabled.sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (pinnedOrder.indexOf(a) >>> 0) - (pinnedOrder.indexOf(b) >>> 0));
+  }
+  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
+  // actions should always be last, enforce that
+  internalColumnsPinnedToTheRight.forEach(id => {
+    if (columns.findIndex(column => column.id === id) > -1) {
+      order.push(id);
+    }
+  });
+  return order;
+}
+// freezing - we use the react-table pinning state, but that requires some mapping between them
+function unfreezeAllExternalColumns(leftPinnedState) {
+  var _leftPinnedState$filt;
+  return (_leftPinnedState$filt = leftPinnedState === null || leftPinnedState === void 0 ? void 0 : leftPinnedState.filter(id => isInternalColumn(id) && id !== '__actions')) !== null && _leftPinnedState$filt !== void 0 ? _leftPinnedState$filt : [];
+}
+function freezeUptoExternalColumn(index, columns) {
+  return columns.slice(0, index + 1);
+}
 
 function getSettings(table) {
   const meta = table.options.meta;
@@ -10054,7 +10191,7 @@ function ignoreInternalColumns(data) {
 }
 
 // mapping children to react-table columns
-function processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId) {
+function processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization) {
   const columnHelper = reactTable.createColumnHelper();
   if (/*#__PURE__*/React__default.isValidElement(child) && child.props.children) {
     const {
@@ -10065,11 +10202,12 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
     columns.push(columnHelper.group({
       id,
       header,
-      columns: React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId), []),
+      columns: React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization), []),
       // we don't want to let column groups be grouped/aggregrated
       enableGrouping: false
     }));
   } else if (/*#__PURE__*/React__default.isValidElement(child) && (child.props.accessor || child.props.id)) {
+    var _meta$align;
     const {
       id: untypedId,
       accessor: accessorKey = untypedId,
@@ -10098,6 +10236,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       ...meta
     } = child.props;
     const id = untypedId;
+    const dataTypeProperties = getDataTypeProperties(child.props.dataType);
     if (defaultHidden && enableHiding) {
       defaultVisibility[id] = false;
     }
@@ -10130,6 +10269,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       // meta
       meta: {
         ...meta,
+        align: (_meta$align = meta.align) !== null && _meta$align !== void 0 ? _meta$align : dataTypeProperties.align,
         defaultWidth,
         enableOrdering: isGrouped ? false : enableOrdering,
         enablePrinting,
@@ -10139,9 +10279,18 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
         renderer
       }
     };
-    // renderers
+    // renderers - use defined renderers first, then fall back to data type renderers (if there is one)
     if (typeof renderer === 'function') {
       column.cell = info => renderer(info.getValue(), info.row.original);
+    } else if (dataTypeProperties.getDisplayValue) {
+      const dataTypeRenderer = value => {
+        var _dataTypeProperties$g, _dataTypeProperties$g2;
+        return (_dataTypeProperties$g = (_dataTypeProperties$g2 = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g2 === void 0 ? void 0 : _dataTypeProperties$g2.call(dataTypeProperties, value, {
+          localization
+        })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
+      };
+      column.cell = info => dataTypeRenderer(info.getValue());
+      column.meta.renderer = dataTypeRenderer;
     }
     if (typeof footer === 'function') {
       column.footer = info => footer(info.table.getRowModel().rows.flatMap(row => row.original !== undefined ? row.original : []));
@@ -10195,7 +10344,7 @@ function createInternalColumn(id, column, defaultSizing) {
     }
   };
 }
-function mapTableChildrenToColumns(props, settings, options, internalColumns) {
+function mapTableChildrenToColumns(props, settings, options, internalColumns, localization) {
   const {
     children,
     defaultRowGroupColumnId
@@ -10203,7 +10352,7 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
   const defaultSizing = {};
   const defaultSorting = [];
   const defaultVisibility = {};
-  const columns = React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId), []);
+  const columns = React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization), []);
   if (internalColumns) {
     var _props$rowActions;
     if (options.enableRowExpansion && props.rowExpansionRenderer && internalColumns.rowExpansion) {
@@ -10230,7 +10379,7 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
     defaultVisibility
   };
 }
-function configureReactTableOptions(options, props) {
+function configureReactTableOptions(options, props, localization) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
@@ -10277,7 +10426,7 @@ function configureReactTableOptions(options, props) {
   if (options.enableSearch) {
     // always set these because enableGlobalFilter can be toggled on and off by the user
     tableOptions.getFilteredRowModel = reactTable.getFilteredRowModel();
-    tableOptions.globalFilterFn = globalFilterFn;
+    tableOptions.globalFilterFn = (row, columnId, searchQuery) => globalFilterFn(row, columnId, searchQuery, localization);
     tableOptions.getColumnCanGlobalFilter = column => {
       var _column$columnDef$met, _column$columnDef$met2;
       return (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
@@ -11394,64 +11543,14 @@ function useTableRowSelectionListener(table, onRowSelect) {
   }, [!!table.options.enableRowSelection, !!table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
 }
 
-function resetHighlightedColumnIndexes(value, table) {
-  const tableMeta = table.options.meta;
-  let firstRowIndex;
-  if (value) {
-    const indexes = [];
-    const columns = table.getVisibleLeafColumns();
-    const rowGrouping = table.getState().grouping;
-    table.getRowModel().rows.forEach((row, rowIndex) => {
-      columns.forEach((column, columnIndex) => {
-        try {
-          let allowSearch = true;
-          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
-            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
-            if (row.getIsGrouped()) {
-              allowSearch = column.getIsGrouped();
-            }
-            // otherwise for other rows, don't search the grouped column - because it isn't visible
-            else if (rowGrouping.includes(column.id)) {
-              allowSearch = false;
-            }
-          }
-          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
-            var _column$columnDef$met;
-            const cellValue = getCellValueAsString(get(row.original, column.id), (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
-            // indexes don't map to sorted data
-            if (cellValue !== undefined && isWeakContains(cellValue, value)) {
-              indexes.push([rowIndex, columnIndex]);
-            }
-          }
-        } catch (e) {
-          //
-        }
-      });
-    });
-    tableMeta.search.setHighlightedColumnIndexes(indexes);
-    if (indexes.length) {
-      firstRowIndex = indexes[0][0];
-      tableMeta.search.setCurrentHighlightColumnIndex(0);
-    } else {
-      tableMeta.search.setCurrentHighlightColumnIndex(undefined);
-    }
-  } else {
-    tableMeta.search.setHighlightedColumnIndexes([]);
-    tableMeta.search.setCurrentHighlightColumnIndex(undefined);
-  }
-  if (firstRowIndex !== undefined) {
-    tableMeta.rowActive.setRowActiveIndex(firstRowIndex);
-  }
-  return firstRowIndex;
-}
-
 function useTableSearchListener(table, onChangeSearch) {
   const meta = table.options.meta;
+  const localization = useLocalization();
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
       const query = table.getState().globalFilter;
-      resetHighlightedColumnIndexes(query, table);
+      resetHighlightedColumnIndexes(query, table, localization);
       if (typeof onChangeSearch === 'function') {
         onChangeSearch(query);
       }
@@ -11571,6 +11670,7 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
 const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, meta, internalColumns) {
   var _props$data, _props$length, _meta$editing, _instance$options$met;
+  const localization = useLocalization();
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
@@ -11603,7 +11703,7 @@ function useTableManager(props, meta, internalColumns) {
   const {
     columns,
     ...defaultState
-  } = mapTableChildrenToColumns(props, settings, options, internalColumns);
+  } = mapTableChildrenToColumns(props, settings, options, internalColumns, localization);
   // configure initial table state
   const initialState = useReactTableInitialState(props, columns, settings, defaultState);
   // create a react-table instance
@@ -11614,7 +11714,7 @@ function useTableManager(props, meta, internalColumns) {
     initialState,
     getCoreRowModel: reactTable.getCoreRowModel(),
     // configure react-table built-in features
-    ...configureReactTableOptions(options, props),
+    ...configureReactTableOptions(options, props, localization),
     // settings that can be toggled by the user, and therefore require our own state
     enableGlobalFilter: search.enableGlobalFilter,
     // custom context
@@ -12568,6 +12668,7 @@ function getCellAttributes(cell, index, isHighlighted) {
   };
 }
 function useSearchHighlighting(cell, cellIndex, ref) {
+  const localization = useLocalization();
   const {
     rowIndex
   } = React__default.useContext(RowContext);
@@ -12580,7 +12681,7 @@ function useSearchHighlighting(cell, cellIndex, ref) {
     }
     let isHighlighted = false;
     if (context.table.getState().globalFilter) {
-      isHighlighted = isCellHighlighted(context.table.getState().globalFilter, cell.getValue(), columnMeta.dataType);
+      isHighlighted = isCellHighlighted(context.table.getState().globalFilter, cell.getValue(), columnMeta.dataType, localization);
     }
     if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {
       return undefined;
@@ -16076,16 +16177,13 @@ function guessComparatorsBasedOnControl(column) {
       }
     }
   }
-  if (columnMeta.dataType === 'number') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-  }
-  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
+  if (columnMeta.control === 'datepicker') {
+    return getDataTypeProperties('datetime').filterComparators;
   }
   if (columnMeta.control === 'switch') {
-    return [exports.TableFilterComparator.IsEqualTo];
+    return getDataTypeProperties('boolean').filterComparators;
   }
-  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+  return getDataTypeProperties(columnMeta.dataType).filterComparators;
 }
 
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -18242,11 +18340,11 @@ function useTableEditingListener(table, tableRef) {
   }, [saveChanges, tableMeta.editing.isEditing]);
 }
 
-function willRowMove(cell, change, rowIndex) {
+function willRowMove(cell, change, rowIndex, localization) {
   const {
     table
   } = cell.getContext();
-  if (willRowMoveAfterSearch(cell, change, table)) {
+  if (willRowMoveAfterSearch(cell, change, table, localization)) {
     return 'search';
   } else if (willRowMoveAfterFilter(cell, change)) {
     return 'filter';
@@ -18255,7 +18353,7 @@ function willRowMove(cell, change, rowIndex) {
   }
   return undefined;
 }
-function willRowMoveAfterSearch(cell, change, table) {
+function willRowMoveAfterSearch(cell, change, table, localization) {
   const searchQuery = table.getState().globalFilter;
   if (!table.options.enableGlobalFilter || !searchQuery) {
     return false;
@@ -18267,7 +18365,7 @@ function willRowMoveAfterSearch(cell, change, table) {
       [cell.column.id]: change
     }
   };
-  return !globalFilterFn(rowWithChange, cell.column.id, searchQuery);
+  return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);
 }
 function willRowMoveAfterFilter(cell, change) {
   if (!cell.column.getIsFiltered()) {
@@ -18499,7 +18597,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
         [cell.column.id]: change
       };
       setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes);
+        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
         pendingChangesUpdater.syncCellChanges(nextChanges);
         return nextChanges;
       });
@@ -18543,6 +18641,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
       return Promise.reject(e);
     }
   };
+  const localization = useLocalization();
   const [pendingChanges, setPendingChanges] = React__default.useState({});
   // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted
   const [saveStates, setSaveState] = React__default.useState({});
@@ -18676,6 +18775,7 @@ function useLastFocusedCellIndex() {
   return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];
 }
 function usePendingChangesUpdater(handleChange, setPendingChanges) {
+  const localization = useLocalization();
   const updatersRef = React__default.useRef({});
   const runCellUpdates = React__default.useCallback(lodash.debounce(function (changes, cell, rowIndex) {
     try {
@@ -18691,7 +18791,7 @@ function usePendingChangesUpdater(handleChange, setPendingChanges) {
           };
           return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextValues, previousValues)).then(function (updates) {
             if (updates && Object.keys(updates).length) {
-              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates));
+              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates, localization));
             }
           });
         }
@@ -18709,7 +18809,7 @@ function usePendingChangesUpdater(handleChange, setPendingChanges) {
     runCellUpdates
   };
 }
-function createPendingChangesSetter(currentChanges, row, rowIndex, changes) {
+function createPendingChangesSetter(currentChanges, row, rowIndex, changes, localization) {
   var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
   // prepare
   const nextChanges = {
@@ -18736,7 +18836,7 @@ function createPendingChangesSetter(currentChanges, row, rowIndex, changes) {
     if (change !== row.original[accessor]) {
       rowChanges[accessor] = change;
       // determine if the row will move position based on this change, and save why it will move
-      const reason = willRowMove(cells[accessor], change, rowIndex);
+      const reason = willRowMove(cells[accessor], change, rowIndex, localization);
       if (reason) {
         rowChanges._meta.moveReason[accessor] = reason;
       } else {