@wix/patterns 1.430.0 → 1.431.0

package/src/components/NestedTable/NestedTableParentCell.tsx

@@ -6,7 +6,7 @@ import {
   NestedTableNodeState,
 } from '../../state/NestedTableState/NestedTableNodeState';
 import { Box, TextButton } from '@wix/design-system';
-import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
+import { ChevronRightSmall } from '@wix/wix-ui-icons-common/lazy';
 import { Rotate } from '../Rotate';
 import { MainCellLayout } from './MainCellLayout';
 import type { NestedTableDragAndDrop } from '../NestedTableDragAndDrop/NestedTableDragAndDrop';

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1512195112";
+var _namespace_ = "NestedTablePlaceholderStatesRow875267755";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow1512195112__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow875267755__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow758756333";
+var _namespace_ = "NestedTableRow836910914";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow758756333__root","firstLevel":"NestedTableRow758756333__firstLevel","placeholder":"NestedTableRow758756333__placeholder","parentHovered":"NestedTableRow758756333__parentHovered"};
+export var classes = {"root":"NestedTableRow836910914__root","firstLevel":"NestedTableRow836910914__firstLevel","placeholder":"NestedTableRow836910914__placeholder","parentHovered":"NestedTableRow836910914__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/DepthLimitMessage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { NestedTableDragAndDropState } from './NestedTableDragAndDropState';
 import { Tag } from '@wix/design-system';
-import { BlockSmall } from '@wix/wix-ui-icons-common';
+import { BlockSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface NestedTableDragAndDropDropMessageProps<C extends string> {
   state: NestedTableDragAndDropState<C>;

package/src/components/NestedTableDragAndDrop/DragAndDropDisabledMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tag } from '@wix/design-system';
-import { BlockSmall } from '@wix/wix-ui-icons-common';
+import { BlockSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface DragAndDropDisabledMessageProps {
   message: string;

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1567357389";
+var _namespace_ = "MultipleDragOverlayEffect927374861";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect1567357389__root"};
+export var classes = {"root":"MultipleDragOverlayEffect927374861__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow273561805";
+var _namespace_ = "NestedTableDragAndDropRow915281379";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow273561805__root"};
+export var classes = {"root":"NestedTableDragAndDropRow915281379__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NumberRangeFilter/NumberRangeFilter.tsx

@@ -4,6 +4,7 @@ import { FieldSet, FormField, NumberInput } from '@wix/design-system';
 import { FilterProps } from '../../model';
 import type { RangeItem } from '@wix/bex-core';
 import { useNumberRangeFilter } from './useNumberRangeFilter';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface NumberRangeFilterProps extends FilterProps<RangeItem<number>> {
   decimal?: boolean;
@@ -33,6 +34,8 @@ function NumberRangeFilter({
     max,
   });
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   return (
     <FieldSet
       dataHook={`number-range-filter-${filter.name}`}
@@ -54,7 +57,8 @@ function NumberRangeFilter({
           value={fromValue ?? ''}
           onChange={(value) => handleInputChange({ from: value, isFrom: true })}
           dataHook="number-range-filter-from-input"
-          size="medium"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          border={isBmHarmonyTheme ? 'standard' : undefined}
         />
       </FormField>
       <FormField
@@ -68,7 +72,8 @@ function NumberRangeFilter({
           value={toValue ?? ''}
           onChange={(value) => handleInputChange({ to: value, isFrom: false })}
           dataHook="number-range-filter-to-input"
-          size="medium"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          border={isBmHarmonyTheme ? 'standard' : undefined}
         />
       </FormField>
     </FieldSet>

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -18,8 +18,9 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useOperatorFilterState } from '../../hooks/useOperatorFilterState';
 import { FilterProps } from '../../model';
-import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ChevronDown } from '@wix/wix-ui-icons-common/lazy';
 import { renderOperatorFilterToolbarTag } from './renderOperatorFilterToolbarTag';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface OperatorPickerProps<T>
   extends FilterProps<OperatorFilterValue<T>> {}
@@ -27,6 +28,7 @@ export interface OperatorPickerProps<T>
 function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   const { filter } = props;
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const filterState = filter as OperatorFilterState<T>;
   const allowedOperators = filterState.allowedOperators;
@@ -56,6 +58,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       id: op,
       title: t(getOperatorLabel(op)),
       label: t(getOperatorLabel(op)),
+      ...(isBmHarmonyTheme ? { size: 'small' as const } : {}),
     }),
   );
 
@@ -66,6 +69,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       dataHook={`operator-picker-${filter.name}`}
       direction="vertical"
       gap="12px"
+      style={isBmHarmonyTheme ? { width: '100%' } : undefined}
     >
       <FormField>
         <DropdownBase
@@ -76,6 +80,7 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
           appendTo="window"
           flip
           placement="bottom-start"
+          minWidth={isBmHarmonyTheme ? 0 : undefined}
         >
           {({ toggle }) => (
             <TextButton
@@ -94,7 +99,8 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
       {showValueInput && (
         <FormField>
           <Input
-            border="round"
+            border={isBmHarmonyTheme ? 'standard' : 'round'}
+            size={isBmHarmonyTheme ? 'small' : undefined}
             value={state.value?.toString() || ''}
             placeholder={t('cairo.filterOperator.valuePlaceholder')}
             onChange={(e) => state.setValue(e.target.value as T)}

package/src/components/PageErrorState/PageErrorState.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { LoadingErrorState } from '../ErrorState';
 import { Page, PageProps } from '@wix/design-system';
 import { PageErrorStateIllustration } from './PageErrorStateIllustration';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PageErrorStateProps extends PageProps {
   /**

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2095613214";
+var _namespace_ = "PickerContent3826816446";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent2095613214__root"};
+export var classes = {"root":"PickerContent3826816446__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.tsx

@@ -9,6 +9,7 @@ import { PickerContentWrapped } from './PickerContentWrapped';
 import { PickerContentItemsSelectionProps } from './PickerContentItemsSelection';
 import { SelectorListContentProps } from '@wix/design-system';
 import { PickerContentAdditionalStepProps } from './PickerContentAdditionalStep';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentComponentBaseProps<T, F extends FiltersMap>
   extends PickerContentItemsSelectionProps<T, F>,
@@ -47,6 +48,7 @@ export function PickerContent<T, F extends FiltersMap>(
   props: PickerContentProps<T, F>,
 ) {
   const { modalState } = props;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   // wrap with a new WixPatternsContainer that can get initialProps
   return (
@@ -55,6 +57,7 @@ export function PickerContent<T, F extends FiltersMap>(
         {...props}
         renderPickerContent={({ state, renderItem }) => (
           <PickerSelectorListContent
+            size={isBmHarmonyTheme ? 'small' : undefined}
             {...props.selectorListProps}
             state={state}
             multiple={fromMultipleSelectionToBoolean(props.multiple)}

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1102083508";
+var _namespace_ = "PickerContentAdditionalStep2799604641";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep1102083508__root","titles":"PickerContentAdditionalStep1102083508__titles","suffix":"PickerContentAdditionalStep1102083508__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2799604641__root","titles":"PickerContentAdditionalStep2799604641__titles","suffix":"PickerContentAdditionalStep2799604641__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.tsx

@@ -8,8 +8,9 @@ import {
   PickerContentBaseWrappedProps,
 } from './PickerContentBaseWrapped';
 import { AdditionalStepState, PickerContentState } from '../../state';
-import { ChevronLeft } from '@wix/wix-ui-icons-common';
+import { ChevronLeft, ChevronLeftSmall } from '@wix/wix-ui-icons-common/lazy';
 import { st, classes } from './PickerContentAdditionalStep.st.css.js';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentAdditionalStepProps<T>
   extends Partial<PickerContentBaseWrappedProps> {
@@ -88,6 +89,8 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
     ...rest
   } = props;
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const [state] = useState(
     () =>
       (pickerContentState.additionalStep = new AdditionalStepState({
@@ -170,7 +173,9 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
       sideActions={
         autoAdditionalStepOnInitialSelect ? undefined : (
           <TextButton
-            prefixIcon={<ChevronLeft />}
+            prefixIcon={
+              isBmHarmonyTheme ? <ChevronLeftSmall /> : <ChevronLeft />
+            }
             dataHook="back-button"
             onClick={() => onBackButtonClick()}
           >

package/src/components/PickerEmptyState/PickerEmptyState.tsx

@@ -1,5 +1,5 @@
 import { FiltersMap, OptionalFiltersMap, PickerState } from '@wix/bex-core';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import { Box, Text, TextButton } from '@wix/design-system';
 import {

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutFooter.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { MouseEventHandler, ReactElement } from 'react';
 import { Box, Divider, TextButton, TextButtonProps } from '@wix/design-system';
 import { PickerStandaloneState } from '../../state';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PickerStandaloneLayoutFooterProps<
   T,

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutHeader.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useRef, useState } from 'react';
 import { SwitchTransition } from 'react-transition-group';
 import { Box, Divider } from '@wix/design-system';
-import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
+import { ChevronLeftLarge } from '@wix/wix-ui-icons-common/lazy';
 import { CollectionSearch } from '../CollectionSearch';
 import { EditorXLogo } from '../EditorXLogo';
 import { WixLogo } from '../WixLogo';

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem1050306693";
+var _namespace_ = "PickerTableListItem2844782450";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem1050306693__root"};
+export var classes = {"root":"PickerTableListItem2844782450__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.tsx

@@ -7,7 +7,7 @@ import {
   TableListItemColumn,
   Text,
 } from '@wix/design-system';
-import { ChevronRightLarge } from '@wix/wix-ui-icons-common';
+import { ChevronRightLarge } from '@wix/wix-ui-icons-common/lazy';
 import { PickerListItemProps } from '../PickerListItemProps';
 import { st, classes } from './PickerTableListItem.st.css.js';
 

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { ActionSubitem } from '../ActionControl/ActionSubItemProps';
 import { ActionControl } from '../ActionControl/ActionControl';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useSelector } from '../../useSelector';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';

package/src/components/PrimaryPageButton/PrimaryPageButton.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Button, ButtonProps } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
 import { usePageButtonBiParams } from '../usePageButtonBiParams';

package/src/components/RequestId/RequestId.tsx

@@ -7,7 +7,7 @@ import {
   TextSize,
 } from '@wix/design-system';
 import React, { useEffect, useMemo } from 'react';
-import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common';
+import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface RequestIdProps {
   /**

package/src/components/SchemaCard/SchemaCard.tsx

@@ -15,7 +15,7 @@ import { CustomColumnsEntityPagePanelMount } from '../CustomColumnsPanel/CustomC
 import { useSchemaContext } from '../../providers/SchemaContext';
 import { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
 import { SchemaCardState } from '../../state/SchemaCard/SchemaCardState';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 
 export interface SchemaCardProps extends Omit<CardProps, 'children'> {
   title: string;

package/src/components/SchemaSource/ReferenceFieldCell.tsx

@@ -0,0 +1,98 @@
+import React, { Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { Field } from '@wix/bex-core';
+import type { SchemaState } from './SchemaState';
+
+// The reference views live in @wix/patterns-fields, which statically pulls the
+// rich-text editor and media SDKs — loaded lazily here for the same reason
+// FieldCell does it.
+function lazyView<P extends object>(
+  pick: (m: typeof import('@wix/patterns-fields')) => React.ComponentType<P>,
+) {
+  const C = React.lazy(async () => ({
+    default: pick(await import('@wix/patterns-fields')),
+  }));
+  return (props: P) => (
+    <Suspense fallback={null}>
+      <C {...props} />
+    </Suspense>
+  );
+}
+
+const CellReferenceView = lazyView((m) => m.CellReferenceView);
+const CellMultiReferenceView = lazyView((m) => m.CellMultiReferenceView);
+
+export interface ReferenceFieldCellProps {
+  state: SchemaState<any>;
+  field: Field;
+  row: unknown;
+  /** Stable DOM id prefix for the multi-reference tags. */
+  fieldId: string;
+}
+
+/**
+ * A reference value in a display column. `FieldCell` can't render one: the label
+ * lives in the referenced item's display field, which only the source knows.
+ *
+ * An observer, so the cell fills in when the referenced schema resolves — before
+ * that there is no display field to read and the cell stays empty.
+ */
+function _ReferenceFieldCell({
+  state,
+  field,
+  row,
+  fieldId,
+}: ReferenceFieldCellProps) {
+  const refSchema = state.referenceCells.refSchemaFor(field);
+  const value = state.fieldsSource.getCellValue(row, field);
+  if (!refSchema || value == null) {
+    return null;
+  }
+
+  const { displayField, fields } = refSchema;
+  const imageField = Object.entries(fields ?? {}).find(
+    ([, f]) => f?.type === 'IMAGE',
+  )?.[0];
+
+  const labelOf = (item: unknown) => {
+    // A value that was never expanded (a bare id) has no label to show.
+    if (!item || typeof item !== 'object') {
+      return undefined;
+    }
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[displayField] ?? ''),
+      image: imageField
+        ? (record[imageField] as string | undefined)
+        : undefined,
+    };
+  };
+
+  if (field.type === 'MULTI_REFERENCE') {
+    const items: { id: string; name: string; image?: string }[] = [];
+    (Array.isArray(value) ? value : []).forEach((item, i) => {
+      const label = labelOf(item);
+      if (label) {
+        items.push({ id: `${fieldId}-${i}`, ...label });
+      }
+    });
+    return items.length ? (
+      <CellMultiReferenceView
+        items={items}
+        fieldId={fieldId}
+        dataHook="multi-reference-view"
+      />
+    ) : null;
+  }
+
+  const label = labelOf(value);
+  return label ? (
+    <CellReferenceView
+      name={label.name}
+      imageUrl={label.image}
+      dataHook="reference-view"
+    />
+  ) : null;
+}
+
+export const ReferenceFieldCell = observer(_ReferenceFieldCell);

package/src/components/SchemaSource/SchemaState.ts

@@ -2,9 +2,10 @@ import { computed, makeObservable } from 'mobx';
 import { Field, FieldsSource, SourceState } from '@wix/bex-core';
 import type { ToolbarCollectionState } from '../../state';
 import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
-import { isFilterableFieldType } from '../../state/buildFieldFilters';
+import { isFilterableField } from '../../state/buildFieldFilters';
 import { schemaFieldsSource } from './schemaFieldsSource';
 import { schemaRendering } from './schemaRendering';
+import { ReferenceCellsState } from './referenceCells';
 
 export interface SchemaStateParams<T> {
   sourceState: SourceState<T>;
@@ -23,12 +24,15 @@ export class SchemaState<T = Record<string, unknown>> {
    *  getters read through to `sourceState`, so MobX tracks through it. Built
    *  once: the spine keeps this exact instance. */
   readonly fieldsSource: FieldsSource;
+  /** Supplies the reference cells their referenced-collection config. */
+  readonly referenceCells: ReferenceCellsState<T>;
 
   toolbar?: ToolbarCollectionState<any, any> = undefined;
 
   constructor(params: SchemaStateParams<T>) {
     this.sourceState = params.sourceState;
     this.fieldsSource = schemaFieldsSource(this);
+    this.referenceCells = new ReferenceCellsState<T>(this.sourceState);
 
     makeObservable(this, {
       filterableFields: computed,
@@ -37,7 +41,9 @@ export class SchemaState<T = Record<string, unknown>> {
 
   /** Fields whose type maps to an auto filter in the toolbar. */
   get filterableFields(): Field[] {
-    return this.sourceState.fields.filter((f) => isFilterableFieldType(f.type));
+    return this.sourceState.fields.filter((f) =>
+      isFilterableField(f, this.fieldsSource),
+    );
   }
 
   /** Attaches this source to a table's toolbar via the shared wrapper. */