@postxl/generators 1.11.5 → 1.11.7

package/dist/backend-view/template/query.utils.ts

@@ -158,6 +158,83 @@ export function hasTextMatching(filter: StringFilter | undefined): boolean {
   return !!(filter.contains || filter.startsWith || filter.endsWith || filter.exclude)
 }
 
+/**
+ * Type for hierarchy node data used in filter expansion.
+ * Must have id and childIds fields for tree traversal.
+ */
+export type HierarchyNodeLike = {
+  id: string
+  childIds: string[]
+}
+
+/**
+ * Expands a set of hierarchy node IDs to include all descendant IDs.
+ * Used for hierarchy filtering where selecting a parent should include all children.
+ *
+ * @param selectedIds - The IDs selected in the filter
+ * @param hierarchyNodesMap - Map of all hierarchy nodes with their childIds
+ * @returns Set of IDs including selected nodes and all their descendants
+ */
+export function expandHierarchyFilterValues(
+  selectedIds: string[] | undefined,
+  hierarchyNodesMap: Map<string, HierarchyNodeLike> | undefined,
+): Set<string> {
+  const expandedIds = new Set<string>()
+
+  if (!selectedIds || selectedIds.length === 0 || !hierarchyNodesMap) {
+    return expandedIds
+  }
+
+  // Recursive function to add a node and all its descendants
+  const addWithDescendants = (nodeId: string) => {
+    if (expandedIds.has(nodeId)) {
+      return // Already processed
+    }
+    expandedIds.add(nodeId)
+
+    const node = hierarchyNodesMap.get(nodeId)
+    if (node?.childIds) {
+      for (const childId of node.childIds) {
+        addWithDescendants(childId)
+      }
+    }
+  }
+
+  // Process each selected ID
+  for (const id of selectedIds) {
+    addWithDescendants(id)
+  }
+
+  return expandedIds
+}
+
+/**
+ * Matches a hierarchy value against a filter, expanding to include descendants.
+ * When a parent node is selected in the filter, all descendants are considered matches.
+ *
+ * @param itemValue - The hierarchy node ID on the item being filtered
+ * @param filter - The filter containing selected node IDs in the values array
+ * @param hierarchyNodesMap - Map of all hierarchy nodes for expansion
+ */
+export function matchHierarchyFilter(
+  itemValue: string | null | undefined,
+  filter: StringFilter | undefined,
+  hierarchyNodesMap: Map<string, HierarchyNodeLike> | undefined,
+): boolean {
+  if (!filter?.values?.length) {
+    return true
+  }
+
+  // Expand selected values to include descendants
+  const expandedValues = expandHierarchyFilterValues(filter.values, hierarchyNodesMap)
+
+  // Check if item value matches any expanded value
+  if (itemValue === null || itemValue === undefined || itemValue === '') {
+    return expandedValues.has('')
+  }
+  return expandedValues.has(itemValue)
+}
+
 /**
  * Applies range filters for number and date fields.
  */

package/dist/frontend-core/template/src/components/admin/admin-slicer.tsx

@@ -14,6 +14,7 @@ export const AdminSlicer = <TField extends FilterFieldName, TFilters extends Fil
   title,
   optionsHeight,
   className,
+  __e2e_test_id__,
 }: {
   field: TField
   filters: TFilters
@@ -23,6 +24,7 @@ export const AdminSlicer = <TField extends FilterFieldName, TFilters extends Fil
   title?: string
   optionsHeight?: number
   className?: string
+  __e2e_test_id__?: string
 }) => {
   const fieldConfig = config[field]
   const { filterKey, valueType: fieldType } = fieldConfig
@@ -183,6 +185,7 @@ export const AdminSlicer = <TField extends FilterFieldName, TFilters extends Fil
       isLoading={isLoading}
       optionsHeight={optionsHeight}
       className={className}
+      __e2e_test_id__={__e2e_test_id__}
     />
   )
 }

package/dist/frontend-core/template/src/components/admin/table-filter.stories.tsx

@@ -0,0 +1,265 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+import { FilterConfig, FilterFieldName, FilterOption, FilterState, FilterValue } from '@types'
+
+import { Popover, PopoverContent, PopoverTrigger, Button } from '@postxl/ui-components'
+
+import { TableFilter } from './table-filter'
+
+const meta = {
+  title: 'Admin/TableFilter',
+  component: TableFilter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      })
+      return (
+        <QueryClientProvider client={queryClient}>
+          <Story />
+        </QueryClientProvider>
+      )
+    },
+  ],
+} satisfies Meta<typeof TableFilter>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Mock data for different filter types
+const stringOptions = [
+  { value: '', label: 'Empty', hasMatches: true },
+  { value: 'apple', label: 'Apple', hasMatches: true },
+  { value: 'banana', label: 'Banana', hasMatches: true },
+  { value: 'cherry', label: 'Cherry', hasMatches: true },
+  { value: 'date', label: 'Date', hasMatches: true },
+  { value: 'elderberry', label: 'Elderberry', hasMatches: true },
+]
+
+const numberOptions = [
+  { value: '10', label: '10', hasMatches: true },
+  { value: '20', label: '20', hasMatches: true },
+  { value: '30', label: '30', hasMatches: true },
+  { value: '40', label: '40', hasMatches: true },
+  { value: '50', label: '50', hasMatches: true },
+]
+
+const booleanOptions = [
+  { value: 'true', label: 'Yes', hasMatches: true },
+  { value: 'false', label: 'No', hasMatches: true },
+]
+
+const dateOptions = [
+  { value: '2024-01-15', label: '2024-01-15', hasMatches: true },
+  { value: '2024-02-20', label: '2024-02-20', hasMatches: true },
+  { value: '2024-03-25', label: '2024-03-25', hasMatches: true },
+]
+
+const hierarchyOptions: FilterOption[] = [
+  {
+    value: 'europe',
+    label: 'Europe',
+    hasMatches: true,
+    children: [
+      {
+        value: 'germany',
+        label: 'Germany',
+        hasMatches: true,
+        children: [
+          { value: 'berlin', label: 'Berlin', hasMatches: true },
+          { value: 'munich', label: 'Munich', hasMatches: true },
+          { value: 'hamburg', label: 'Hamburg', hasMatches: true },
+        ],
+      },
+      {
+        value: 'france',
+        label: 'France',
+        hasMatches: true,
+        children: [
+          { value: 'paris', label: 'Paris', hasMatches: true },
+          { value: 'lyon', label: 'Lyon', hasMatches: true },
+        ],
+      },
+      {
+        value: 'spain',
+        label: 'Spain',
+        hasMatches: true,
+        children: [
+          { value: 'madrid', label: 'Madrid', hasMatches: true },
+          { value: 'barcelona', label: 'Barcelona', hasMatches: true },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'asia',
+    label: 'Asia',
+    hasMatches: true,
+    children: [
+      {
+        value: 'japan',
+        label: 'Japan',
+        hasMatches: true,
+        children: [
+          { value: 'tokyo', label: 'Tokyo', hasMatches: true },
+          { value: 'osaka', label: 'Osaka', hasMatches: true },
+        ],
+      },
+      { value: 'singapore', label: 'Singapore', hasMatches: true },
+    ],
+  },
+]
+
+// Mock filter configs
+type MockFilterState = FilterState & {
+  stringField?: { values?: string[] }
+  numberField?: { values?: number[]; min?: number; max?: number }
+  booleanField?: boolean[]
+  dateField?: { values?: string[]; start?: string; end?: string }
+  hierarchyField?: { values?: string[] }
+}
+
+const stringFilterConfig: FilterConfig<FilterFieldName, MockFilterState> = {
+  stringField: {
+    filterKey: 'stringField',
+    valueType: 'string',
+    kind: 'scalar',
+  },
+}
+
+const numberFilterConfig: FilterConfig<FilterFieldName, MockFilterState> = {
+  numberField: {
+    filterKey: 'numberField',
+    valueType: 'number',
+    kind: 'scalar',
+  },
+}
+
+const booleanFilterConfig: FilterConfig<FilterFieldName, MockFilterState> = {
+  booleanField: {
+    filterKey: 'booleanField',
+    valueType: 'boolean',
+    kind: 'scalar',
+  },
+}
+
+const dateFilterConfig: FilterConfig<FilterFieldName, MockFilterState> = {
+  dateField: {
+    filterKey: 'dateField',
+    valueType: 'date',
+    kind: 'scalar',
+  },
+}
+
+const hierarchyFilterConfig: FilterConfig<FilterFieldName, MockFilterState> = {
+  hierarchyField: {
+    filterKey: 'hierarchyField',
+    valueType: 'hierarchy',
+    kind: 'hierarchy',
+  },
+}
+
+// Mock getFilterOptions function
+const createMockGetFilterOptions =
+  (options: FilterOption[]) => (_args: { field: FilterFieldName; filters: MockFilterState }) => ({
+    queryKey: ['mockFilterOptions'],
+    queryFn: async () => options,
+  })
+
+// Wrapper component for stories
+const FilterWrapper = ({
+  field,
+  config,
+  options,
+  initialFilters = {},
+}: {
+  field: FilterFieldName
+  config: FilterConfig<FilterFieldName, MockFilterState>
+  options: FilterOption[]
+  initialFilters?: MockFilterState
+}) => {
+  const [filters, setFilters] = useState<MockFilterState>(initialFilters)
+  const [open, setOpen] = useState(false)
+
+  const handleChange = (val: FilterValue) => {
+    const fieldConfig = config[field]
+    if (fieldConfig) {
+      setFilters((prev) => ({
+        ...prev,
+        [fieldConfig.filterKey]: val,
+      }))
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline">{open ? 'Filter Open' : 'Open Filter'}</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[280px] p-0">
+          <TableFilter
+            open={open}
+            field={field}
+            filters={filters}
+            onChange={handleChange}
+            config={config}
+            getFilterOptions={createMockGetFilterOptions(options)}
+          />
+        </PopoverContent>
+      </Popover>
+
+      <div className="text-xs bg-muted p-2 rounded">
+        <pre>{JSON.stringify(filters, null, 2)}</pre>
+      </div>
+    </div>
+  )
+}
+
+export const StringFilter: Story = {
+  args: {} as any,
+  render: () => <FilterWrapper field="stringField" config={stringFilterConfig} options={stringOptions} />,
+}
+
+export const NumberFilter: Story = {
+  args: {} as any,
+  render: () => <FilterWrapper field="numberField" config={numberFilterConfig} options={numberOptions} />,
+}
+
+export const BooleanFilter: Story = {
+  args: {} as any,
+  render: () => <FilterWrapper field="booleanField" config={booleanFilterConfig} options={booleanOptions} />,
+}
+
+export const DateFilter: Story = {
+  args: {} as any,
+  render: () => <FilterWrapper field="dateField" config={dateFilterConfig} options={dateOptions} />,
+}
+
+export const HierarchyFilter: Story = {
+  args: {} as any,
+  render: () => <FilterWrapper field="hierarchyField" config={hierarchyFilterConfig} options={hierarchyOptions} />,
+}
+
+export const WithOutMatchesOnCrossFiltering: Story = {
+  args: {} as any,
+  render: () => (
+    <FilterWrapper
+      field="stringField"
+      config={stringFilterConfig}
+      options={stringOptions
+        .map((opt) => (opt.value === 'banana' || opt.value === 'elderberry' ? { ...opt, hasMatches: false } : opt))
+        .sort((a, b) => (a.hasMatches && !b.hasMatches ? -1 : !a.hasMatches && b.hasMatches ? 1 : 0))} // Simulate "banana" and "elderberry" having no matches due to cross-filtering
+    />
+  ),
+}

package/dist/frontend-core/template/src/components/admin/table-filter.tsx

@@ -4,6 +4,7 @@ import {
   FieldValueType,
   FilterConfig,
   FilterFieldName,
+  FilterOption,
   FilterState,
   FilterValue,
   NumberFilter,
@@ -11,7 +12,7 @@ import {
 } from '@types'
 
 import { CalendarIcon, FilterX, TrashIcon } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { cn } from '@lib/utils'
 import {
@@ -23,6 +24,9 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  SlicerHierarchyItem,
+  SlicerFilterOption,
+  testId,
 } from '@postxl/ui-components'
 
 export const TableFilter = <TField extends FilterFieldName, TFilters extends FilterState>({
@@ -32,6 +36,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
   onChange,
   config,
   getFilterOptions,
+  __e2e_test_id__,
 }: {
   open?: boolean
   field: TField
@@ -39,10 +44,14 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
   onChange: (val: FilterValue) => void
   config: FilterConfig<TField, TFilters>
   getFilterOptions: (args: { field: TField; filters: TFilters }) => any
+  __e2e_test_id__?: string
 }) => {
   const fieldConfig = config[field]
   const { filterKey, valueType: fieldType } = fieldConfig
 
+  // Check if this is a hierarchy filter
+  const isHierarchyFilter = fieldConfig.kind === 'hierarchy'
+
   // We exclude the current field from the filters passed to the query.
   // This prevents the options from refetching (and resetting scroll position) when the user selects an item within the same filter.
   const queryFilters = useMemo(() => {
@@ -98,20 +107,40 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     enabled: open,
   })
 
-  const options = useMemo(
-    () =>
-      optionsData && Array.isArray(optionsData)
-        ? optionsData.filter(
-            (opt): opt is { value: string; label: string; hasMatches: boolean } => opt != null && 'value' in opt,
-          )
-        : [],
-    [optionsData],
-  )
+  // Options from backend - same type for both flat and hierarchy (hierarchy has children)
+  const options = useMemo<FilterOption[]>(() => {
+    if (!optionsData || !Array.isArray(optionsData)) {
+      return []
+    }
+    return optionsData.filter((opt): opt is FilterOption => opt != null && 'value' in opt)
+  }, [optionsData])
 
   const [searchQuery, setSearchQuery] = useState('')
 
+  // Expanded state for hierarchy filter
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+  // Auto-expand single top-level item when hierarchy options load
+  useEffect(() => {
+    if (isHierarchyFilter && options.length === 1 && options[0].children?.length) {
+      setExpandedIds(new Set([options[0].value]))
+    }
+  }, [isHierarchyFilter, options])
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }, [])
+
   // Check if this field uses StringFilter (all string-type fields including ID, relation, enum, discriminatedUnion)
-  const isStringFilter = fieldType === 'string'
+  const isStringFilter = fieldType === 'string' && !isHierarchyFilter
 
   const filteredOptions = useMemo(() => {
     if (!searchQuery) {
@@ -136,13 +165,17 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     if (fieldType === 'boolean') {
       return (val as boolean[]).map(String)
     }
+    if (fieldType === 'hierarchy') {
+      // Hierarchy filters use StringFilter format
+      return ((val as StringFilter).values || []).map(String)
+    }
     if (isStringFilter) {
       return ((val as StringFilter).values || []).map(String)
     }
     return val as string[]
   }, [fieldConfig.filterKey, fieldType, filters, isStringFilter])
 
-  const selectedValues = new Set(value)
+  const selectedValues = useMemo(() => new Set(value), [value])
   const areAllSelected = options.length > 0 && options.every((option) => selectedValues.has(option.value))
 
   const areAllFilteredSelected =
@@ -182,48 +215,58 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     }
   }, [open, filters, fieldType, fieldConfig.filterKey, isStringFilter])
 
-  const handleNumberChange = (newValues: string[], newMin: string, newMax: string) => {
-    const values = newValues.length > 0 ? newValues.map((v) => (v === '' ? '' : Number(v))) : undefined
-    const min = newMin === '' ? null : Number(newMin)
-    const max = newMax === '' ? null : Number(newMax)
+  const handleNumberChange = useCallback(
+    (newValues: string[], newMin: string, newMax: string) => {
+      const values = newValues.length > 0 ? newValues.map((v) => (v === '' ? '' : Number(v))) : undefined
+      const min = newMin === '' ? null : Number(newMin)
+      const max = newMax === '' ? null : Number(newMax)
 
-    if (!values && min === null && max === null) {
-      onChange(undefined)
-    } else {
-      onChange({ values, min, max })
-    }
-  }
-  const handleDateChange = (newValues: string[], newStart: string, newEnd: string) => {
-    const values = newValues.length > 0 ? newValues : undefined
-    const start = newStart === '' ? null : newStart
-    const end = newEnd === '' ? null : newEnd
-
-    if (!values && start === null && end === null) {
-      onChange(undefined)
-    } else {
-      onChange({ values, start, end })
-    }
-  }
+      if (!values && min === null && max === null) {
+        onChange(undefined)
+      } else {
+        onChange({ values, min, max })
+      }
+    },
+    [onChange],
+  )
 
-  const handleStringFilterChange = (
-    newValues: string[],
-    contains: string,
-    startsWith: string,
-    endsWith: string,
-    exclude: string,
-  ) => {
-    const values = newValues.length > 0 ? newValues : undefined
-    const containsVal = contains === '' ? null : contains
-    const startsWithVal = startsWith === '' ? null : startsWith
-    const endsWithVal = endsWith === '' ? null : endsWith
-    const excludeVal = exclude === '' ? null : exclude
-
-    if (!values && !containsVal && !startsWithVal && !endsWithVal && !excludeVal) {
-      onChange(undefined)
-    } else {
-      onChange({ values, contains: containsVal, startsWith: startsWithVal, endsWith: endsWithVal, exclude: excludeVal })
-    }
-  }
+  const handleDateChange = useCallback(
+    (newValues: string[], newStart: string, newEnd: string) => {
+      const values = newValues.length > 0 ? newValues : undefined
+      const start = newStart === '' ? null : newStart
+      const end = newEnd === '' ? null : newEnd
+
+      if (!values && start === null && end === null) {
+        onChange(undefined)
+      } else {
+        onChange({ values, start, end })
+      }
+    },
+    [onChange],
+  )
+
+  const handleStringFilterChange = useCallback(
+    (newValues: string[], contains: string, startsWith: string, endsWith: string, exclude: string) => {
+      const values = newValues.length > 0 ? newValues : undefined
+      const containsVal = contains === '' ? null : contains
+      const startsWithVal = startsWith === '' ? null : startsWith
+      const endsWithVal = endsWith === '' ? null : endsWith
+      const excludeVal = exclude === '' ? null : exclude
+
+      if (!values && !containsVal && !startsWithVal && !endsWithVal && !excludeVal) {
+        onChange(undefined)
+      } else {
+        onChange({
+          values,
+          contains: containsVal,
+          startsWith: startsWithVal,
+          endsWith: endsWithVal,
+          exclude: excludeVal,
+        })
+      }
+    },
+    [onChange],
+  )
 
   const commitMinMax = () => {
     let nextMin = minVal
@@ -256,25 +299,59 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
   }
 
   // Unified callback for FilterItem to handle value changes
-  const handleValueChange = (newSelected: Set<string>) => {
-    const newVals = Array.from(newSelected).map(String)
-    if (fieldType === 'number') {
-      handleNumberChange(newVals, minVal, maxVal)
-    } else if (fieldType === 'date') {
-      handleDateChange(newVals, minVal, maxVal)
-    } else if (isStringFilter) {
-      handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
-    } else {
-      onChange(newVals)
-    }
-  }
+  const handleValueChange = useCallback(
+    (newSelected: Set<string>) => {
+      const newVals = Array.from(newSelected).map(String)
+      if (fieldType === 'number') {
+        handleNumberChange(newVals, minVal, maxVal)
+      } else if (fieldType === 'date') {
+        handleDateChange(newVals, minVal, maxVal)
+      } else if (fieldType === 'hierarchy') {
+        // Hierarchy uses StringFilter format but without text filters
+        onChange(newVals.length > 0 ? { values: newVals } : undefined)
+      } else if (isStringFilter) {
+        handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
+      } else {
+        onChange(newVals)
+      }
+    },
+    [
+      fieldType,
+      isStringFilter,
+      minVal,
+      maxVal,
+      containsVal,
+      startsWithVal,
+      endsWithVal,
+      excludeVal,
+      handleNumberChange,
+      handleDateChange,
+      handleStringFilterChange,
+      onChange,
+    ],
+  )
+
+  // Handle hierarchy option toggle
+  const handleHierarchySelect = useCallback(
+    (value: string) => {
+      const newSelected = new Set(selectedValues)
+      if (newSelected.has(value)) {
+        newSelected.delete(value)
+      } else {
+        newSelected.add(value)
+      }
+      handleValueChange(newSelected)
+    },
+    [selectedValues, handleValueChange],
+  )
 
   return (
-    <div className="w-full flex flex-col">
+    <div className="w-full flex flex-col" data-test-id={__e2e_test_id__}>
       {/* Clear filter button */}
       <Button
         variant="ghost"
         size="xs"
+        __e2e_test_id__={testId(__e2e_test_id__, 'clear')}
         disabled={
           selectedValues.size === 0 &&
           minVal === '' &&
@@ -293,6 +370,8 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             } else if (fieldType === 'date') {
               handleDateChange([], '', '')
             }
+          } else if (fieldType === 'hierarchy') {
+            onChange(undefined)
           } else if (isStringFilter) {
             setContainsVal('')
             setStartsWithVal('')
@@ -318,6 +397,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="At least"
             placeholder="min"
             onCommit={commitMinMax}
+            data-test-id={testId(__e2e_test_id__, 'min')}
           />
           <NumberMinMaxInput
             value={maxVal}
@@ -325,6 +405,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="At most"
             placeholder="max"
             onCommit={commitMinMax}
+            data-test-id={testId(__e2e_test_id__, 'max')}
           />
         </>
       )}
@@ -341,6 +422,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
               handleDateChange(Array.from(selectedValues).map(String), '', maxVal)
             }}
             onCommit={commitMinMax}
+            data-test-id={testId(__e2e_test_id__, 'from')}
           />
           <DateMinMaxInput
             value={maxVal}
@@ -354,6 +436,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             setTime={(date: Date) => {
               date.setHours(23, 59, 59, 999)
             }}
+            data-test-id={testId(__e2e_test_id__, 'to')}
           />
         </>
       )}
@@ -367,6 +450,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="Contains"
             placeholder="text"
             onCommit={commitStringFilter}
+            data-test-id={testId(__e2e_test_id__, 'contains')}
           />
           <StringFilterInput
             value={startsWithVal}
@@ -374,6 +458,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="Starts with"
             placeholder="prefix"
             onCommit={commitStringFilter}
+            data-test-id={testId(__e2e_test_id__, 'starts-with')}
           />
           <StringFilterInput
             value={endsWithVal}
@@ -381,6 +466,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="Ends with"
             placeholder="suffix"
             onCommit={commitStringFilter}
+            data-test-id={testId(__e2e_test_id__, 'ends-with')}
           />
           <StringFilterInput
             value={excludeVal}
@@ -388,6 +474,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             label="Exclude"
             placeholder="text"
             onCommit={commitStringFilter}
+            data-test-id={testId(__e2e_test_id__, 'exclude')}
           />
         </>
       )}
@@ -401,6 +488,7 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
           placeholder="Search..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
+          data-test-id={testId(__e2e_test_id__, 'search')}
         />
       </div>
 
@@ -408,67 +496,92 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
         <div className="w-full border-b border-b-border/70" />
       </div>
 
-      {/* Select all / all search results button */}
-      <Button
-        variant="ghost"
-        size="xs"
-        className="w-full justify-start px-2 py-1 rounded-sm text-sm font-normal"
-        onClick={() => {
-          let newVals: string[] = []
-          if (searchQuery.length > 0) {
-            const newSelected = new Set(selectedValues)
-            if (areAllFilteredSelected) {
-              filteredOptions.forEach((o) => newSelected.delete(o.value))
+      {/* Select all / all search results button - hidden for hierarchy mode because "select all"
+          is ambiguous: would it select all items at every level, only top-level items (implicitly
+          selecting everything underneath), only visible/expanded items, or only leaf nodes? Each
+          interpretation has different filtering effects, so we omit it to avoid confusion. */}
+      {!isHierarchyFilter && (
+        <Button
+          variant="ghost"
+          size="xs"
+          className="w-full justify-start px-2 py-1 rounded-sm text-sm font-normal"
+          __e2e_test_id__={testId(__e2e_test_id__, 'select-all')}
+          onClick={() => {
+            let newVals: string[] = []
+            if (searchQuery.length > 0) {
+              const newSelected = new Set(selectedValues)
+              if (areAllFilteredSelected) {
+                filteredOptions.forEach((o) => newSelected.delete(o.value))
+              } else {
+                filteredOptions.forEach((o) => newSelected.add(o.value))
+              }
+              newVals = Array.from(newSelected)
+            } else if (areAllSelected) {
+              newVals = []
             } else {
-              filteredOptions.forEach((o) => newSelected.add(o.value))
+              newVals = options.map((o) => o.value)
             }
-            newVals = Array.from(newSelected)
-          } else if (areAllSelected) {
-            newVals = []
-          } else {
-            newVals = options.map((o) => o.value)
-          }
 
-          if (fieldType === 'number') {
-            handleNumberChange(newVals, minVal, maxVal)
-          } else if (fieldType === 'date') {
-            handleDateChange(newVals, minVal, maxVal)
-          } else if (isStringFilter) {
-            handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
-          } else {
-            onChange(newVals)
-          }
-        }}
-      >
-        {searchQuery.length > 0 ? (
-          <Checkbox
-            readOnly
-            checked={isAnyFilteredSelected}
-            disabled={filteredOptions.length === 0}
-            label="Select Search Results"
-            className="pointer-events-none"
-            checkboxSize="sm"
-            variant={areAllFilteredSelected ? 'simple' : 'default'}
-            iconStyle={areAllFilteredSelected ? 'simple' : 'solo'}
-            checkIcon={areAllFilteredSelected ? 'check' : 'square'}
-          />
-        ) : (
-          <Checkbox
-            readOnly
-            checked={selectedValues.size > 0}
-            disabled={options.length === 0}
-            label="Select All"
-            className="pointer-events-none"
-            checkboxSize="sm"
-            variant={areAllSelected ? 'simple' : 'default'}
-            iconStyle={areAllSelected ? 'simple' : 'solo'}
-            checkIcon={areAllSelected ? 'check' : 'square'}
-          />
-        )}
-      </Button>
+            if (fieldType === 'number') {
+              handleNumberChange(newVals, minVal, maxVal)
+            } else if (fieldType === 'date') {
+              handleDateChange(newVals, minVal, maxVal)
+            } else if (isStringFilter) {
+              handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
+            } else {
+              onChange(newVals)
+            }
+          }}
+        >
+          {searchQuery.length > 0 ? (
+            <Checkbox
+              readOnly
+              checked={isAnyFilteredSelected}
+              disabled={filteredOptions.length === 0}
+              label="Select Search Results"
+              className="pointer-events-none"
+              checkboxSize="sm"
+              variant={areAllFilteredSelected ? 'simple' : 'default'}
+              iconStyle={areAllFilteredSelected ? 'simple' : 'solo'}
+              checkIcon={areAllFilteredSelected ? 'check' : 'square'}
+            />
+          ) : (
+            <Checkbox
+              readOnly
+              checked={selectedValues.size > 0}
+              disabled={options.length === 0}
+              label="Select All"
+              className="pointer-events-none"
+              checkboxSize="sm"
+              variant={areAllSelected ? 'simple' : 'default'}
+              iconStyle={areAllSelected ? 'simple' : 'solo'}
+              checkIcon={areAllSelected ? 'check' : 'square'}
+            />
+          )}
+        </Button>
+      )}
 
-      {/* Options list */}
-      {filteredOptions.length === 0 ? (
+      {/* Options list - hierarchy tree view or flat list */}
+      {isHierarchyFilter ? (
+        options.length === 0 ? (
+          <div className="py-6 text-center text-sm">No options available.</div>
+        ) : (
+          <div className="px-1 py-1 max-h-[250px] overflow-auto">
+            {options.map((option) => (
+              <SlicerHierarchyItem
+                key={option.value}
+                option={option as SlicerFilterOption<string>}
+                selectedValues={selectedValues}
+                inheritedSelected={false}
+                expandedIds={expandedIds}
+                onToggleExpand={toggleExpand}
+                onSelect={handleHierarchySelect}
+                searchTerm={searchQuery}
+              />
+            ))}
+          </div>
+        )
+      ) : filteredOptions.length === 0 ? (
         <div className="py-6 text-center text-sm">No results found.</div>
       ) : (
         <div className="px-2 py-1 max-h-[200px] overflow-auto">
@@ -494,12 +607,14 @@ const NumberMinMaxInput = ({
   label,
   placeholder,
   onCommit,
+  'data-test-id': dataTestId,
 }: {
   value: string
   setValue: (val: string) => void
   label: string
   placeholder: string
   onCommit: () => void
+  'data-test-id'?: string
 }) => {
   return (
     <div className="flex items-center gap-2 px-2 pt-0.5">
@@ -514,6 +629,7 @@ const NumberMinMaxInput = ({
         onChange={(e) => setValue(e === undefined ? '' : String(e))}
         onBlur={onCommit}
         onEnter={onCommit}
+        data-test-id={dataTestId}
       />
     </div>
   )
@@ -538,6 +654,7 @@ const DateMinMaxInput = ({
   onCommit,
   onDelete,
   setTime, // to use last ms of the day for 'To' field
+  'data-test-id': dataTestId,
 }: {
   value: string
   setValue: (val: string) => void
@@ -545,6 +662,7 @@ const DateMinMaxInput = ({
   onCommit: () => void
   onDelete: () => void
   setTime?: (date: Date) => void
+  'data-test-id'?: string
 }) => {
   return (
     <div className="flex items-center gap-2 px-2 pt-0.5">
@@ -565,6 +683,7 @@ const DateMinMaxInput = ({
           }}
           onBlur={onCommit}
           onEnter={onCommit}
+          data-test-id={dataTestId}
         />
         <Popover
           onOpenChange={(open) => {
@@ -622,12 +741,14 @@ const StringFilterInput = ({
   label,
   placeholder,
   onCommit,
+  'data-test-id': dataTestId,
 }: {
   value: string
   setValue: (val: string) => void
   label: string
   placeholder: string
   onCommit: () => void
+  'data-test-id'?: string
 }) => {
   return (
     <div className="flex items-center gap-2 px-2 pt-0.5">
@@ -641,6 +762,7 @@ const StringFilterInput = ({
         onChange={(e) => setValue(e.target.value)}
         onBlur={onCommit}
         onEnter={onCommit}
+        data-test-id={dataTestId}
       />
     </div>
   )
@@ -653,13 +775,14 @@ const FilterItem = ({
   selectedValues,
   onValueChange,
 }: {
-  option: { label: string; value: string; hasMatches: boolean }
+  option: FilterOption
   isSelected: boolean
   fieldType: FieldValueType
   selectedValues: Set<string>
   onValueChange: (newSelected: Set<string>) => void
 }) => {
   let displayLabel = option.label
+  const hasMatches = option.hasMatches ?? true
 
   // needs to happen in frontend (and can't be directly provided by backend) because of localization
   if (option.value !== '') {
@@ -685,11 +808,7 @@ const FilterItem = ({
       }}
       checkIcon="check"
       checkboxSize="sm"
-      className={cn(
-        'whitespace-nowrap py-px text-sm',
-        !option.hasMatches && 'opacity-50',
-        option.value === '' && 'italic',
-      )}
+      className={cn('whitespace-nowrap py-px text-sm', !hasMatches && 'opacity-50', option.value === '' && 'italic')}
       label={displayLabel}
     />
   )

package/dist/types/template/query.types.ts

@@ -42,7 +42,20 @@ export const zStringFilter = z.object({
   exclude: z.string().nullable().optional(),
 })
 
-export type FieldValueType = 'string' | 'number' | 'date' | 'boolean'
+export type FieldValueType = 'string' | 'number' | 'date' | 'boolean' | 'hierarchy'
+
+/**
+ * Filter option type - supports both flat and hierarchical structures.
+ * For hierarchy mode, items can have nested children forming a tree structure.
+ */
+export type FilterOption = {
+  value: string
+  label: string
+  /** Whether this option has matches in current cross-filter state. Defaults to true. */
+  hasMatches?: boolean
+  /** Child options for hierarchy mode. */
+  children?: FilterOption[]
+}
 
 export type FilterValue = string[] | boolean[] | NumberFilter | DateFilter | StringFilter | undefined
 
@@ -90,11 +103,16 @@ type ScalarFilterConfig<TFilters extends FilterState> = BaseFilterConfig<TFilter
   kind: 'scalar' | 'id'
 }
 
+export type HierarchyFilterConfig<TFilters extends FilterState> = BaseFilterConfig<TFilters> & {
+  kind: 'hierarchy'
+}
+
 export type FilterConfigItem<TFilters extends FilterState> =
   | RelationFilterConfig<TFilters>
   | EnumFilterConfig<TFilters>
   | DiscriminatedUnionFilterConfig<TFilters>
   | ScalarFilterConfig<TFilters>
+  | HierarchyFilterConfig<TFilters>
 
 export type FilterConfig<TField extends FilterFieldName, TFilters extends FilterState> = Record<
   TField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postxl/generators",
-  "version": "1.11.5",
+  "version": "1.11.7",
   "description": "Code generators for PXL - generates backend, frontend, Prisma schemas, and more",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,7 +46,7 @@
     "exceljs": "^4.4.0",
     "@postxl/generator": "^1.3.3",
     "@postxl/schema": "^1.3.1",
-    "@postxl/ui-components": "^1.3.5",
+    "@postxl/ui-components": "^1.3.7",
     "@postxl/utils": "^1.3.1"
   },
   "devDependencies": {},