synapse-react-client 4.0.46 → 4.0.47

package/dist/components/QueryBuilder/FilterConditionRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterConditionRow.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"sourcesContent":["import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport {\n  Autocomplete,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Select,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n} from '@mui/material'\nimport { FacetColumnResult } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo, useState } from 'react'\nimport { splitAndTrim } from '../../utils/functions/StringUtils'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport {\n  availableOpsForKind,\n  classifyColumn,\n  facetValueMatchesFilter,\n  isFacetColumnResultValues,\n  labelForOp,\n  QBColumnKind,\n} from './queryBuilderMetadata'\nimport styles from './FilterConditionRow.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { defaultOpForColumnType } from './queryBuilderOperations'\nimport { QBCondition, QBConditionOp } from './QueryBuilderTypes'\n\nexport type FilterConditionRowProps = {\n  condition: QBCondition\n  parentGroupId: string\n  index: number\n}\n\nexport function FilterConditionRow(props: FilterConditionRowProps) {\n  const { condition, parentGroupId, index } = props\n  const {\n    columnModels,\n    facetResults,\n    onlyFacetedColumns,\n    getColumnDisplayName,\n    updateConditionAt,\n    removeConditionAt,\n  } = useQueryBuilderInternalContext()\n\n  // A condition is a drag source only. Dropping onto a condition has no\n  // meaning in a boolean tree — a node joins a group, not another leaf — so\n  // groups own every drop zone and this row never becomes a target.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: condition.id,\n    index,\n    group: parentGroupId,\n    disabled: { droppable: true },\n  })\n\n  const facetColumnNames = useMemo(\n    () =>\n      new Set(\n        facetResults.filter(isFacetColumnResultValues).map(f => f.columnName),\n      ),\n    [facetResults],\n  )\n\n  const propertyOptions = useMemo(() => {\n    const source = onlyFacetedColumns\n      ? columnModels.filter(cm => facetColumnNames.has(cm.name))\n      : columnModels\n    return source.map(cm => ({\n      name: cm.name,\n      columnType: cm.columnType as string,\n      label: getColumnDisplayName(cm.name),\n    }))\n  }, [columnModels, facetColumnNames, onlyFacetedColumns, getColumnDisplayName])\n\n  const selectedOption =\n    propertyOptions.find(opt => opt.name === condition.columnName) ?? null\n\n  const hasFacet =\n    condition.columnName != null && facetColumnNames.has(condition.columnName)\n  const columnKind = classifyColumn(condition.columnType, hasFacet)\n  const availableOps = availableOpsForKind(columnKind)\n\n  const operatorLabelId = `qb-op-label-${condition.id}`\n\n  return (\n    <div\n      ref={sortableRef}\n      className={`${styles.row}${isDragSource ? ` ${dragStyles.dragSource}` : ''}`}\n      role=\"group\"\n      aria-label={`Filter condition${condition.columnName ? ` on ${condition.columnName}` : ''}`}\n      data-qb-node-id={condition.id}\n    >\n      <QBDragHandle\n        handleRef={handleRef}\n        label=\"Drag condition into a condition group\"\n      />\n\n      <Tooltip title=\"Remove condition\">\n        <IconButton\n          size=\"small\"\n          className={styles.remove}\n          aria-label=\"Remove condition\"\n          onClick={() => removeConditionAt(condition.id)}\n        >\n          <DeleteOutlineIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n\n      <Autocomplete\n        className={styles.propertyPicker}\n        size=\"small\"\n        options={propertyOptions}\n        getOptionLabel={opt => opt.label}\n        isOptionEqualToValue={(a, b) => a.name === b.name}\n        value={selectedOption}\n        renderInput={params => (\n          <TextField\n            {...params}\n            variant=\"outlined\"\n            placeholder=\"Select property…\"\n            inputProps={{ ...params.inputProps, 'aria-label': 'Property' }}\n          />\n        )}\n        onChange={(_event, value) => {\n          if (value == null) return\n          // Pick a default op that matches the new column's kind (so a\n          // faceted column shifts the row into pill-picker mode, a numeric\n          // column into range mode, etc.). Fall back to the raw columnType\n          // default if the kind has no ops.\n          const nextKind = classifyColumn(\n            value.columnType,\n            hasFacetForColumnName(facetResults, value.name),\n          )\n          const opsForKind = availableOpsForKind(nextKind)\n          const nextOp =\n            opsForKind.length > 0\n              ? opsForKind[0]\n              : defaultOpForColumnType(value.columnType)\n          updateConditionAt(condition.id, {\n            columnName: value.name,\n            columnType: value.columnType,\n            op: nextOp,\n            values: [],\n            rangeMin: null,\n            rangeMax: null,\n            text: null,\n          })\n        }}\n      />\n\n      {availableOps.length > 0 && (\n        <>\n          <InputLabel id={operatorLabelId} sx={{ display: 'none' }}>\n            Operator\n          </InputLabel>\n          <Select\n            className={styles.operatorPicker}\n            size=\"small\"\n            labelId={operatorLabelId}\n            variant=\"outlined\"\n            value={\n              availableOps.includes(condition.op)\n                ? condition.op\n                : availableOps[0]\n            }\n            onChange={event => {\n              const nextOp = event.target.value as QBConditionOp\n              updateConditionAt(condition.id, { op: nextOp })\n            }}\n            aria-label=\"Operator\"\n          >\n            {availableOps.map(op => (\n              <MenuItem key={op} value={op}>\n                {labelForOp(op)}\n              </MenuItem>\n            ))}\n          </Select>\n        </>\n      )}\n\n      <ValueInput\n        condition={condition}\n        columnKind={columnKind}\n        hasFacet={hasFacet}\n        facetValues={\n          hasFacet && condition.columnName != null\n            ? findFacetValues(facetResults, condition.columnName)\n            : []\n        }\n        onChange={patch => updateConditionAt(condition.id, patch)}\n      />\n    </div>\n  )\n}\n\ntype ValueInputProps = {\n  condition: QBCondition\n  columnKind: QBColumnKind\n  hasFacet: boolean\n  facetValues: string[]\n  onChange: (patch: Partial<Omit<QBCondition, 'kind' | 'id'>>) => void\n}\n\nfunction ValueInput(props: ValueInputProps) {\n  const { condition, columnKind, hasFacet, facetValues, onChange } = props\n  const { op } = condition\n\n  // Presence operators have no input at all.\n  if (op === 'has_value' || op === 'no_value') return null\n\n  switch (op) {\n    case 'is_any_of':\n    case 'is_all_of':\n      if ((columnKind === 'enum' || columnKind === 'list') && hasFacet) {\n        return (\n          <FacetPillGroup\n            columnName={condition.columnName}\n            facetValues={facetValues}\n            selectedValues={condition.values}\n            onChange={next => onChange({ values: next })}\n          />\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder=\"Comma-separated values\"\n          value={condition.values.join(', ')}\n          slotProps={{ htmlInput: { 'aria-label': 'Values' } }}\n          onChange={event =>\n            onChange({ values: splitAndTrim(event.target.value) })\n          }\n        />\n      )\n    case 'between':\n      return (\n        <>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Min\"\n            value={condition.rangeMin ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Minimum' } }}\n            onChange={event => onChange({ rangeMin: event.target.value })}\n          />\n          <span aria-hidden=\"true\">to</span>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Max\"\n            value={condition.rangeMax ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Maximum' } }}\n            onChange={event => onChange({ rangeMax: event.target.value })}\n          />\n        </>\n      )\n    case 'gt':\n    case 'gte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMin ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMin: event.target.value })}\n        />\n      )\n    case 'lt':\n    case 'lte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMax ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMax: event.target.value })}\n        />\n      )\n    case 'equal':\n    case 'not_equal':\n      if (columnKind === 'boolean') {\n        return (\n          <ToggleButtonGroup\n            className={styles.pillGroup}\n            exclusive\n            value={condition.values[0] ?? null}\n            onChange={(_event, next: string | null) => {\n              onChange({ values: next == null ? [] : [next] })\n            }}\n            aria-label=\"Boolean value\"\n          >\n            <ToggleButton value=\"true\">Yes</ToggleButton>\n            <ToggleButton value=\"false\">No</ToggleButton>\n          </ToggleButtonGroup>\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.values[0] ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ values: [event.target.value] })}\n        />\n      )\n    case 'contains':\n    case 'starts_with':\n    case 'ends_with':\n    case 'is_exactly':\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.text ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ text: event.target.value })}\n        />\n      )\n    default:\n      op satisfies never\n      return null\n  }\n}\n\ntype FacetPillGroupProps = {\n  columnName: string | null\n  facetValues: string[]\n  selectedValues: string[]\n  onChange: (next: string[]) => void\n}\n\n// Above this many pills we show a text filter above the group.\nexport const PILL_FILTER_THRESHOLD = 40\n\nfunction FacetPillGroup(props: FacetPillGroupProps) {\n  const { columnName, facetValues, selectedValues, onChange } = props\n  const { getValueDisplayName } = useQueryBuilderInternalContext()\n  const [filter, setFilter] = useState('')\n  const showFilter = facetValues.length > PILL_FILTER_THRESHOLD\n\n  const labelForValue = useCallback(\n    (value: string) => getValueDisplayName(columnName, value),\n    [getValueDisplayName, columnName],\n  )\n\n  // Sort alphabetically by the user-facing label so the pill order is\n  // predictable regardless of the backend's facet-result ordering.\n  const sortedValues = useMemo(() => {\n    return [...facetValues].sort((a, b) =>\n      labelForValue(a).localeCompare(labelForValue(b), undefined, {\n        sensitivity: 'base',\n      }),\n    )\n  }, [facetValues, labelForValue])\n\n  const visibleValues = useMemo(() => {\n    if (!showFilter) return sortedValues\n    return sortedValues.filter(v =>\n      facetValueMatchesFilter(v, labelForValue(v), filter),\n    )\n  }, [sortedValues, filter, showFilter, labelForValue])\n\n  return (\n    <div className={styles.pillGroupContainer}>\n      {showFilter && (\n        <TextField\n          className={styles.pillFilter}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder={`Filter ${facetValues.length} values…`}\n          value={filter}\n          onChange={event => setFilter(event.target.value)}\n          slotProps={{ htmlInput: { 'aria-label': 'Filter values' } }}\n        />\n      )}\n      <div className={styles.pillGroupScroll}>\n        <ToggleButtonGroup\n          className={styles.pillGroup}\n          value={selectedValues}\n          onChange={(_event, next: string[]) => onChange(next)}\n          aria-label=\"Selected values\"\n        >\n          {visibleValues.map(value => (\n            <ToggleButton key={value} value={value}>\n              {labelForValue(value)}\n            </ToggleButton>\n          ))}\n        </ToggleButtonGroup>\n      </div>\n    </div>\n  )\n}\n\nfunction findFacetValues(\n  facetResults: readonly FacetColumnResult[],\n  columnName: string,\n): string[] {\n  const match = facetResults.find(f => f.columnName === columnName)\n  if (match == null || !isFacetColumnResultValues(match)) return []\n  return match.facetValues.map(v => v.value)\n}\n\nfunction hasFacetForColumnName(\n  facetResults: readonly FacetColumnResult[],\n  columnName: string,\n): boolean {\n  return facetResults.some(\n    f => f.columnName === columnName && isFacetColumnResultValues(f),\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FilterConditionRow.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"sourcesContent":["import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport {\n  Autocomplete,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Select,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n} from '@mui/material'\nimport { FacetColumnResult } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo, useState } from 'react'\nimport { getEnumerationFacet } from '../../utils/functions/enumerationFacet'\nimport { splitAndTrim } from '../../utils/functions/StringUtils'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport {\n  availableOpsForKind,\n  classifyColumn,\n  facetValueMatchesFilter,\n  labelForOp,\n  QBColumnKind,\n} from './queryBuilderMetadata'\nimport styles from './FilterConditionRow.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { defaultOpForColumnType } from './queryBuilderOperations'\nimport { QBCondition, QBConditionOp } from './QueryBuilderTypes'\n\nexport type FilterConditionRowProps = {\n  condition: QBCondition\n  parentGroupId: string\n  index: number\n}\n\nexport function FilterConditionRow(props: FilterConditionRowProps) {\n  const { condition, parentGroupId, index } = props\n  const {\n    columnModels,\n    facetResults,\n    onlyFacetedColumns,\n    getColumnDisplayName,\n    updateConditionAt,\n    removeConditionAt,\n  } = useQueryBuilderInternalContext()\n\n  // A condition is a drag source only. Dropping onto a condition has no\n  // meaning in a boolean tree — a node joins a group, not another leaf — so\n  // groups own every drop zone and this row never becomes a target.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: condition.id,\n    index,\n    group: parentGroupId,\n    disabled: { droppable: true },\n  })\n\n  const facetColumnNames = useMemo(\n    () =>\n      new Set(\n        facetResults\n          .filter(f => getEnumerationFacet(f) !== undefined)\n          .map(f => f.columnName),\n      ),\n    [facetResults],\n  )\n\n  const propertyOptions = useMemo(() => {\n    const source = onlyFacetedColumns\n      ? columnModels.filter(cm => facetColumnNames.has(cm.name))\n      : columnModels\n    return source.map(cm => ({\n      name: cm.name,\n      columnType: cm.columnType as string,\n      label: getColumnDisplayName(cm.name),\n    }))\n  }, [columnModels, facetColumnNames, onlyFacetedColumns, getColumnDisplayName])\n\n  const selectedOption =\n    propertyOptions.find(opt => opt.name === condition.columnName) ?? null\n\n  const hasFacet =\n    condition.columnName != null && facetColumnNames.has(condition.columnName)\n  const columnKind = classifyColumn(condition.columnType, hasFacet)\n  const availableOps = availableOpsForKind(columnKind)\n\n  const operatorLabelId = `qb-op-label-${condition.id}`\n\n  return (\n    <div\n      ref={sortableRef}\n      className={`${styles.row}${isDragSource ? ` ${dragStyles.dragSource}` : ''}`}\n      role=\"group\"\n      aria-label={`Filter condition${condition.columnName ? ` on ${condition.columnName}` : ''}`}\n      data-qb-node-id={condition.id}\n    >\n      <QBDragHandle\n        handleRef={handleRef}\n        label=\"Drag condition into a condition group\"\n      />\n\n      <Tooltip title=\"Remove condition\">\n        <IconButton\n          size=\"small\"\n          className={styles.remove}\n          aria-label=\"Remove condition\"\n          onClick={() => removeConditionAt(condition.id)}\n        >\n          <DeleteOutlineIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n\n      <Autocomplete\n        className={styles.propertyPicker}\n        size=\"small\"\n        options={propertyOptions}\n        getOptionLabel={opt => opt.label}\n        isOptionEqualToValue={(a, b) => a.name === b.name}\n        value={selectedOption}\n        renderInput={params => (\n          <TextField\n            {...params}\n            variant=\"outlined\"\n            placeholder=\"Select property…\"\n            inputProps={{ ...params.inputProps, 'aria-label': 'Property' }}\n          />\n        )}\n        onChange={(_event, value) => {\n          if (value == null) return\n          // Pick a default op that matches the new column's kind (so a\n          // faceted column shifts the row into pill-picker mode, a numeric\n          // column into range mode, etc.). Fall back to the raw columnType\n          // default if the kind has no ops.\n          const nextKind = classifyColumn(\n            value.columnType,\n            hasFacetForColumnName(facetResults, value.name),\n          )\n          const opsForKind = availableOpsForKind(nextKind)\n          const nextOp =\n            opsForKind.length > 0\n              ? opsForKind[0]\n              : defaultOpForColumnType(value.columnType)\n          updateConditionAt(condition.id, {\n            columnName: value.name,\n            columnType: value.columnType,\n            op: nextOp,\n            values: [],\n            rangeMin: null,\n            rangeMax: null,\n            text: null,\n          })\n        }}\n      />\n\n      {availableOps.length > 0 && (\n        <>\n          <InputLabel id={operatorLabelId} sx={{ display: 'none' }}>\n            Operator\n          </InputLabel>\n          <Select\n            className={styles.operatorPicker}\n            size=\"small\"\n            labelId={operatorLabelId}\n            variant=\"outlined\"\n            value={\n              availableOps.includes(condition.op)\n                ? condition.op\n                : availableOps[0]\n            }\n            onChange={event => {\n              const nextOp = event.target.value as QBConditionOp\n              updateConditionAt(condition.id, { op: nextOp })\n            }}\n            aria-label=\"Operator\"\n          >\n            {availableOps.map(op => (\n              <MenuItem key={op} value={op}>\n                {labelForOp(op)}\n              </MenuItem>\n            ))}\n          </Select>\n        </>\n      )}\n\n      <ValueInput\n        condition={condition}\n        columnKind={columnKind}\n        hasFacet={hasFacet}\n        facetValues={\n          hasFacet && condition.columnName != null\n            ? findFacetValues(facetResults, condition.columnName)\n            : []\n        }\n        onChange={patch => updateConditionAt(condition.id, patch)}\n      />\n    </div>\n  )\n}\n\ntype ValueInputProps = {\n  condition: QBCondition\n  columnKind: QBColumnKind\n  hasFacet: boolean\n  facetValues: string[]\n  onChange: (patch: Partial<Omit<QBCondition, 'kind' | 'id'>>) => void\n}\n\nfunction ValueInput(props: ValueInputProps) {\n  const { condition, columnKind, hasFacet, facetValues, onChange } = props\n  const { op } = condition\n\n  // Presence operators have no input at all.\n  if (op === 'has_value' || op === 'no_value') return null\n\n  switch (op) {\n    case 'is_any_of':\n    case 'is_all_of':\n      if ((columnKind === 'enum' || columnKind === 'list') && hasFacet) {\n        return (\n          <FacetPillGroup\n            columnName={condition.columnName}\n            facetValues={facetValues}\n            selectedValues={condition.values}\n            onChange={next => onChange({ values: next })}\n          />\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder=\"Comma-separated values\"\n          value={condition.values.join(', ')}\n          slotProps={{ htmlInput: { 'aria-label': 'Values' } }}\n          onChange={event =>\n            onChange({ values: splitAndTrim(event.target.value) })\n          }\n        />\n      )\n    case 'between':\n      return (\n        <>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Min\"\n            value={condition.rangeMin ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Minimum' } }}\n            onChange={event => onChange({ rangeMin: event.target.value })}\n          />\n          <span aria-hidden=\"true\">to</span>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Max\"\n            value={condition.rangeMax ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Maximum' } }}\n            onChange={event => onChange({ rangeMax: event.target.value })}\n          />\n        </>\n      )\n    case 'gt':\n    case 'gte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMin ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMin: event.target.value })}\n        />\n      )\n    case 'lt':\n    case 'lte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMax ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMax: event.target.value })}\n        />\n      )\n    case 'equal':\n    case 'not_equal':\n      if (columnKind === 'boolean') {\n        return (\n          <ToggleButtonGroup\n            className={styles.pillGroup}\n            exclusive\n            value={condition.values[0] ?? null}\n            onChange={(_event, next: string | null) => {\n              onChange({ values: next == null ? [] : [next] })\n            }}\n            aria-label=\"Boolean value\"\n          >\n            <ToggleButton value=\"true\">Yes</ToggleButton>\n            <ToggleButton value=\"false\">No</ToggleButton>\n          </ToggleButtonGroup>\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.values[0] ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ values: [event.target.value] })}\n        />\n      )\n    case 'contains':\n    case 'starts_with':\n    case 'ends_with':\n    case 'is_exactly':\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.text ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ text: event.target.value })}\n        />\n      )\n    default:\n      op satisfies never\n      return null\n  }\n}\n\ntype FacetPillGroupProps = {\n  columnName: string | null\n  facetValues: string[]\n  selectedValues: string[]\n  onChange: (next: string[]) => void\n}\n\n// Above this many pills we show a text filter above the group.\nexport const PILL_FILTER_THRESHOLD = 40\n\nfunction FacetPillGroup(props: FacetPillGroupProps) {\n  const { columnName, facetValues, selectedValues, onChange } = props\n  const { getValueDisplayName } = useQueryBuilderInternalContext()\n  const [filter, setFilter] = useState('')\n  const showFilter = facetValues.length > PILL_FILTER_THRESHOLD\n\n  const labelForValue = useCallback(\n    (value: string) => getValueDisplayName(columnName, value),\n    [getValueDisplayName, columnName],\n  )\n\n  // Sort alphabetically by the user-facing label so the pill order is\n  // predictable regardless of the backend's facet-result ordering.\n  const sortedValues = useMemo(() => {\n    return [...facetValues].toSorted((a, b) =>\n      labelForValue(a).localeCompare(labelForValue(b), undefined, {\n        sensitivity: 'base',\n      }),\n    )\n  }, [facetValues, labelForValue])\n\n  const visibleValues = useMemo(() => {\n    if (!showFilter) return sortedValues\n    return sortedValues.filter(v =>\n      facetValueMatchesFilter(v, labelForValue(v), filter),\n    )\n  }, [sortedValues, filter, showFilter, labelForValue])\n\n  return (\n    <div className={styles.pillGroupContainer}>\n      {showFilter && (\n        <TextField\n          className={styles.pillFilter}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder={`Filter ${facetValues.length} values…`}\n          value={filter}\n          onChange={event => setFilter(event.target.value)}\n          slotProps={{ htmlInput: { 'aria-label': 'Filter values' } }}\n        />\n      )}\n      <div className={styles.pillGroupScroll}>\n        <ToggleButtonGroup\n          className={styles.pillGroup}\n          value={selectedValues}\n          onChange={(_event, next: string[]) => onChange(next)}\n          aria-label=\"Selected values\"\n        >\n          {visibleValues.map(value => (\n            <ToggleButton key={value} value={value}>\n              {labelForValue(value)}\n            </ToggleButton>\n          ))}\n        </ToggleButtonGroup>\n      </div>\n    </div>\n  )\n}\n\nfunction findFacetValues(\n  facetResults: readonly FacetColumnResult[],\n  columnName: string,\n): string[] {\n  const match = facetResults.find(f => f.columnName === columnName)\n  const enumerationFacet = match && getEnumerationFacet(match)\n  return enumerationFacet?.facetValues.map(v => v.value) ?? []\n}\n\nfunction hasFacetForColumnName(\n  facetResults: readonly FacetColumnResult[],\n  columnName: string,\n): boolean {\n  return facetResults.some(\n    f => f.columnName === columnName && getEnumerationFacet(f) !== undefined,\n  )\n}\n"],"mappings":"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"}

package/dist/components/QueryBuilder/FilterGroupNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroupNode.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAa,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAmK1D"}
+{"version":3,"file":"FilterGroupNode.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAa,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAkL1D"}

package/dist/components/QueryBuilder/FilterGroupNode.js

@@ -1,134 +1,150 @@
 import { isQBGroup as e } from "./QueryBuilderTypes.js";
 import { groupDropZoneData as t, groupDropZoneId as n } from "./queryBuilderDnd.js";
-import { useQueryBuilderInternalContext as r } from "./QueryBuilderInternalContext.js";
-import i from "./queryBuilderDrag.module.js";
-import { QBDragHandle as a } from "./QBDragHandle.js";
-import { FilterConditionRow as o } from "./FilterConditionRow.js";
-import s from "./FilterGroupNode.module.js";
-import { Button as c, ToggleButton as l, ToggleButtonGroup as u } from "@mui/material";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useForkRef as p } from "@mui/material/utils";
-import { useDroppable as m } from "@dnd-kit/react";
-import { useSortable as h } from "@dnd-kit/react/sortable";
-import { pointerIntersection as g } from "@dnd-kit/collision";
+import { FILTER_LIMIT_VIOLATION_MESSAGES as r } from "./queryBuilderLimits.js";
+import { useQueryBuilderInternalContext as i } from "./QueryBuilderInternalContext.js";
+import a from "./queryBuilderDrag.module.js";
+import { QBDragHandle as o } from "./QBDragHandle.js";
+import { FilterConditionRow as s } from "./FilterConditionRow.js";
+import c from "./FilterGroupNode.module.js";
+import { Button as l, ToggleButton as u, ToggleButtonGroup as d, Tooltip as f } from "@mui/material";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useForkRef as h } from "@mui/material/utils";
+import { useDroppable as g } from "@dnd-kit/react";
+import { useSortable as _ } from "@dnd-kit/react/sortable";
+import { pointerIntersection as v } from "@dnd-kit/collision";
 //#region src/components/QueryBuilder/FilterGroupNode.tsx
-function _(b) {
-	let { group: x, isRoot: S = !1, parentGroupId: C, index: w, depth: T = 0 } = b, { addConditionAt: E, addChildGroupAt: D, clearGroupAt: O, updateGroupAt: k, removeGroupAt: A } = r(), { ref: j, handleRef: M, isDragSource: N } = h({
-		id: x.id,
-		index: w ?? 0,
-		group: C ?? x.id,
+function y(f) {
+	let { group: C, isRoot: w = !1, parentGroupId: T, index: E, depth: D = 0 } = f, { addConditionAt: O, addChildGroupAt: k, clearGroupAt: A, updateGroupAt: j, removeGroupAt: M, isAtLeafPredicateLimit: N } = i(), P = D + 1, F = C.children.length >= 25, I;
+	F ? I = r.groupChildren : N && (I = r.leafPredicates);
+	let L;
+	F ? L = r.groupChildren : P >= 5 && (L = r.depth);
+	let { ref: R, handleRef: z, isDragSource: B } = _({
+		id: C.id,
+		index: E ?? 0,
+		group: T ?? C.id,
 		disabled: {
-			draggable: S,
+			draggable: w,
 			droppable: !0
 		}
-	}), { ref: P, isDropTarget: F } = m({
-		id: n(x.id),
-		data: t(x.id),
-		collisionDetector: g,
-		collisionPriority: T
-	}), I = p(j, P), L = {
-		"--qb-accent-color": v(x),
-		"--qb-pill-color": v(x)
+	}), { ref: V, isDropTarget: H } = g({
+		id: n(C.id),
+		data: t(C.id),
+		collisionDetector: v,
+		collisionPriority: D
+	}), U = h(R, V), W = {
+		"--qb-accent-color": x(C),
+		"--qb-pill-color": x(C)
 	};
-	return /* @__PURE__ */ f("div", {
-		ref: I,
-		className: `${s.group} ${S ? "" : s.nested}${N ? ` ${i.dragSource}` : ""}${F ? ` ${s.dropTarget}` : ""}`,
-		style: L,
+	return /* @__PURE__ */ m("div", {
+		ref: U,
+		className: `${c.group} ${w ? "" : c.nested}${B ? ` ${a.dragSource}` : ""}${H ? ` ${c.dropTarget}` : ""}`,
+		style: W,
 		role: "group",
-		"aria-label": y(x),
-		"data-qb-node-id": x.id,
-		children: [/* @__PURE__ */ f("div", {
-			className: s.header,
+		"aria-label": S(C),
+		"data-qb-node-id": C.id,
+		children: [/* @__PURE__ */ m("div", {
+			className: c.header,
 			children: [
-				!S && /* @__PURE__ */ d(a, {
-					handleRef: M,
+				!w && /* @__PURE__ */ p(o, {
+					handleRef: z,
 					label: "Drag condition group into another condition group"
 				}),
-				/* @__PURE__ */ f(u, {
+				/* @__PURE__ */ m(d, {
 					size: "small",
-					className: s.combinator,
+					className: c.combinator,
 					exclusive: !0,
-					value: x.combinator,
+					value: C.combinator,
 					"aria-label": "Boolean combinator",
 					onChange: (e, t) => {
-						t != null && k(x.id, { combinator: t });
+						t != null && j(C.id, { combinator: t });
 					},
-					children: [/* @__PURE__ */ d(l, {
+					children: [/* @__PURE__ */ p(u, {
 						value: "AND",
 						"aria-label": "AND",
 						children: "AND"
-					}), /* @__PURE__ */ d(l, {
+					}), /* @__PURE__ */ p(u, {
 						value: "OR",
 						"aria-label": "OR",
 						children: "OR"
 					})]
 				}),
-				/* @__PURE__ */ d(l, {
+				/* @__PURE__ */ p(u, {
 					size: "small",
 					value: "not",
-					selected: x.not,
-					className: s.notToggle,
+					selected: C.not,
+					className: c.notToggle,
 					"aria-label": "Negate this group",
-					"aria-pressed": x.not,
-					onChange: () => k(x.id, { not: !x.not }),
+					"aria-pressed": C.not,
+					onChange: () => j(C.id, { not: !C.not }),
 					children: "Exclude (NOT)"
 				}),
-				/* @__PURE__ */ f("div", {
-					className: s.actions,
+				/* @__PURE__ */ m("div", {
+					className: c.actions,
 					children: [
-						/* @__PURE__ */ d(c, {
-							className: s.actionButton,
-							size: "small",
-							onClick: () => E(x.id),
+						/* @__PURE__ */ p(b, {
+							disabledReason: I,
+							onClick: () => O(C.id),
 							children: "+ Condition"
 						}),
-						/* @__PURE__ */ d(c, {
-							className: s.actionButton,
-							size: "small",
-							onClick: () => D(x.id),
+						/* @__PURE__ */ p(b, {
+							disabledReason: L,
+							onClick: () => k(C.id),
 							children: "+ Condition Group"
 						}),
-						/* @__PURE__ */ d(c, {
-							className: s.actionButton,
+						/* @__PURE__ */ p(l, {
+							className: c.actionButton,
 							size: "small",
-							onClick: () => O(x.id),
-							disabled: x.children.length === 0,
+							onClick: () => A(C.id),
+							disabled: C.children.length === 0,
 							children: "Clear"
 						}),
-						!S && /* @__PURE__ */ d(c, {
-							className: s.actionButton,
+						!w && /* @__PURE__ */ p(l, {
+							className: c.actionButton,
 							size: "small",
-							onClick: () => A(x.id),
+							onClick: () => M(C.id),
 							children: "Delete Condition Group"
 						})
 					]
 				})
 			]
-		}), /* @__PURE__ */ d("div", {
-			className: s.children,
-			children: x.children.length === 0 ? /* @__PURE__ */ d("div", {
-				className: s.emptyState,
+		}), /* @__PURE__ */ p("div", {
+			className: c.children,
+			children: C.children.length === 0 ? /* @__PURE__ */ p("div", {
+				className: c.emptyState,
 				children: "No conditions yet, add one above"
-			}) : x.children.map((t, n) => e(t) ? /* @__PURE__ */ d(_, {
+			}) : C.children.map((t, n) => e(t) ? /* @__PURE__ */ p(y, {
 				group: t,
-				parentGroupId: x.id,
+				parentGroupId: C.id,
 				index: n,
-				depth: T + 1
-			}, t.id) : /* @__PURE__ */ d(o, {
+				depth: D + 1
+			}, t.id) : /* @__PURE__ */ p(s, {
 				condition: t,
-				parentGroupId: x.id,
+				parentGroupId: C.id,
 				index: n
 			}, t.id))
 		})]
 	});
 }
-function v(e) {
+function b(e) {
+	let { disabledReason: t, onClick: n, children: r } = e, i = /* @__PURE__ */ p(l, {
+		className: c.actionButton,
+		size: "small",
+		onClick: n,
+		disabled: t !== void 0,
+		children: r
+	});
+	return t === void 0 ? i : /* @__PURE__ */ p(f, {
+		title: t,
+		children: /* @__PURE__ */ p("span", { children: i })
+	});
+}
+function x(e) {
 	return e.not ? "var(--synapse-error)" : e.combinator === "OR" ? "var(--synapse-warning)" : "var(--synapse-primary-action-color)";
 }
-function y(e) {
+function S(e) {
 	return `${e.not ? "excluded " : ""}${e.combinator} filter group`;
 }
 //#endregion
-export { _ as FilterGroupNode };
+export { y as FilterGroupNode };
 
 //# sourceMappingURL=FilterGroupNode.js.map

package/dist/components/QueryBuilder/FilterGroupNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroupNode.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"sourcesContent":["import { Button, ToggleButton, ToggleButtonGroup } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport { pointerIntersection } from '@dnd-kit/collision'\nimport { useDroppable } from '@dnd-kit/react'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport { CSSProperties } from 'react'\nimport { FilterConditionRow } from './FilterConditionRow'\nimport styles from './FilterGroupNode.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { groupDropZoneData, groupDropZoneId } from './queryBuilderDnd'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport { isQBGroup, QBGroup } from './QueryBuilderTypes'\n\nexport type FilterGroupNodeProps = {\n  group: QBGroup\n  isRoot?: boolean\n  parentGroupId?: string\n  index?: number\n  /** Nesting level, used to resolve drops into the innermost group. */\n  depth?: number\n}\n\nexport function FilterGroupNode(props: FilterGroupNodeProps) {\n  const { group, isRoot = false, parentGroupId, index, depth = 0 } = props\n  const {\n    addConditionAt,\n    addChildGroupAt,\n    clearGroupAt,\n    updateGroupAt,\n    removeGroupAt,\n  } = useQueryBuilderInternalContext()\n\n  // Groups become drop targets only through the `useDroppable` zone below.\n  // Keep the sortable's droppable half disabled unless `useQueryBuilderDrag`\n  // also resolves sortable targets: for any target the app doesn't reposition\n  // in `onDragOver`, dnd-kit's OptimisticSortingPlugin moves the DOM node\n  // itself, and React's next commit throws `NotFoundError` on `removeChild`.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: group.id,\n    index: index ?? 0,\n    group: parentGroupId ?? group.id,\n    disabled: { draggable: isRoot, droppable: true },\n  })\n\n  // `useQueryBuilderDrag` identifies the target group by `data.groupId`. Zones\n  // nest inside their groups, so the pointer is inside every ancestor of the\n  // group it is over; hit-testing by pointer and ranking by depth selects the\n  // innermost. `collisionPriority` replaces the ranking a detector returns, so\n  // the detector has to be one that reports nothing but pointer hits —\n  // otherwise a deeper zone the dragged box merely overlaps outranks the zone\n  // the pointer is actually in.\n  const { ref: dropZoneRef, isDropTarget } = useDroppable({\n    id: groupDropZoneId(group.id),\n    data: groupDropZoneData(group.id),\n    collisionDetector: pointerIntersection,\n    collisionPriority: depth,\n  })\n\n  // The drag source and the drop zone are the same element.\n  const groupRef = useForkRef(sortableRef, dropZoneRef)\n\n  const style: CSSProperties = {\n    ['--qb-accent-color' as string]: accentColorFor(group),\n    ['--qb-pill-color' as string]: accentColorFor(group),\n  }\n\n  return (\n    <div\n      ref={groupRef}\n      className={`${styles.group} ${isRoot ? '' : styles.nested}${\n        isDragSource ? ` ${dragStyles.dragSource}` : ''\n      }${isDropTarget ? ` ${styles.dropTarget}` : ''}`}\n      style={style}\n      role=\"group\"\n      aria-label={groupAriaLabel(group)}\n      data-qb-node-id={group.id}\n    >\n      <div className={styles.header}>\n        {!isRoot && (\n          <QBDragHandle\n            handleRef={handleRef}\n            label=\"Drag condition group into another condition group\"\n          />\n        )}\n        <ToggleButtonGroup\n          size=\"small\"\n          className={styles.combinator}\n          exclusive\n          value={group.combinator}\n          aria-label=\"Boolean combinator\"\n          onChange={(_event, next) => {\n            if (next == null) return\n            updateGroupAt(group.id, { combinator: next })\n          }}\n        >\n          <ToggleButton value=\"AND\" aria-label=\"AND\">\n            AND\n          </ToggleButton>\n          <ToggleButton value=\"OR\" aria-label=\"OR\">\n            OR\n          </ToggleButton>\n        </ToggleButtonGroup>\n\n        <ToggleButton\n          size=\"small\"\n          value=\"not\"\n          selected={group.not}\n          className={styles.notToggle}\n          aria-label=\"Negate this group\"\n          aria-pressed={group.not}\n          onChange={() => updateGroupAt(group.id, { not: !group.not })}\n        >\n          Exclude (NOT)\n        </ToggleButton>\n\n        <div className={styles.actions}>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => addConditionAt(group.id)}\n          >\n            + Condition\n          </Button>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => addChildGroupAt(group.id)}\n          >\n            + Condition Group\n          </Button>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => clearGroupAt(group.id)}\n            disabled={group.children.length === 0}\n          >\n            Clear\n          </Button>\n          {!isRoot && (\n            <Button\n              className={styles.actionButton}\n              size=\"small\"\n              onClick={() => removeGroupAt(group.id)}\n            >\n              Delete Condition Group\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <div className={styles.children}>\n        {group.children.length === 0 ? (\n          <div className={styles.emptyState}>\n            No conditions yet, add one above\n          </div>\n        ) : (\n          group.children.map((child, childIndex) => {\n            if (isQBGroup(child)) {\n              return (\n                <FilterGroupNode\n                  key={child.id}\n                  group={child}\n                  parentGroupId={group.id}\n                  index={childIndex}\n                  depth={depth + 1}\n                />\n              )\n            }\n            return (\n              <FilterConditionRow\n                key={child.id}\n                condition={child}\n                parentGroupId={group.id}\n                index={childIndex}\n              />\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction accentColorFor(group: QBGroup): string {\n  if (group.not) return 'var(--synapse-error)'\n  if (group.combinator === 'OR') return 'var(--synapse-warning)'\n  return 'var(--synapse-primary-action-color)'\n}\n\nfunction groupAriaLabel(group: QBGroup): string {\n  const modifier = group.not ? 'excluded ' : ''\n  return `${modifier}${group.combinator} filter group`\n}\n"],"mappings":"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"}
+{"version":3,"file":"FilterGroupNode.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"sourcesContent":["import { Button, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport { pointerIntersection } from '@dnd-kit/collision'\nimport { useDroppable } from '@dnd-kit/react'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport { CSSProperties, ReactNode } from 'react'\nimport { FilterConditionRow } from './FilterConditionRow'\nimport styles from './FilterGroupNode.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { groupDropZoneData, groupDropZoneId } from './queryBuilderDnd'\nimport {\n  FILTER_LIMIT_VIOLATION_MESSAGES,\n  MAX_FILTER_GROUP_CHILDREN,\n  MAX_FILTER_GROUP_DEPTH,\n} from './queryBuilderLimits'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport { isQBGroup, QBGroup } from './QueryBuilderTypes'\n\nexport type FilterGroupNodeProps = {\n  group: QBGroup\n  isRoot?: boolean\n  parentGroupId?: string\n  index?: number\n  /** Nesting level, used to resolve drops into the innermost group. */\n  depth?: number\n}\n\nexport function FilterGroupNode(props: FilterGroupNodeProps) {\n  const { group, isRoot = false, parentGroupId, index, depth = 0 } = props\n  const {\n    addConditionAt,\n    addChildGroupAt,\n    clearGroupAt,\n    updateGroupAt,\n    removeGroupAt,\n    isAtLeafPredicateLimit,\n  } = useQueryBuilderInternalContext()\n\n  // The root group is sent directly in additionalFilters, where the server counts it as depth 1.\n  const filterDepth = depth + 1\n  const isAtChildLimit = group.children.length >= MAX_FILTER_GROUP_CHILDREN\n  let addConditionDisabledReason: string | undefined\n  if (isAtChildLimit) {\n    addConditionDisabledReason = FILTER_LIMIT_VIOLATION_MESSAGES.groupChildren\n  } else if (isAtLeafPredicateLimit) {\n    addConditionDisabledReason = FILTER_LIMIT_VIOLATION_MESSAGES.leafPredicates\n  }\n  let addGroupDisabledReason: string | undefined\n  if (isAtChildLimit) {\n    addGroupDisabledReason = FILTER_LIMIT_VIOLATION_MESSAGES.groupChildren\n  } else if (filterDepth >= MAX_FILTER_GROUP_DEPTH) {\n    addGroupDisabledReason = FILTER_LIMIT_VIOLATION_MESSAGES.depth\n  }\n\n  // Groups become drop targets only through the `useDroppable` zone below.\n  // Keep the sortable's droppable half disabled unless `useQueryBuilderDrag`\n  // also resolves sortable targets: for any target the app doesn't reposition\n  // in `onDragOver`, dnd-kit's OptimisticSortingPlugin moves the DOM node\n  // itself, and React's next commit throws `NotFoundError` on `removeChild`.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: group.id,\n    index: index ?? 0,\n    group: parentGroupId ?? group.id,\n    disabled: { draggable: isRoot, droppable: true },\n  })\n\n  // `useQueryBuilderDrag` identifies the target group by `data.groupId`. Zones\n  // nest inside their groups, so the pointer is inside every ancestor of the\n  // group it is over; hit-testing by pointer and ranking by depth selects the\n  // innermost. `collisionPriority` replaces the ranking a detector returns, so\n  // the detector has to be one that reports nothing but pointer hits —\n  // otherwise a deeper zone the dragged box merely overlaps outranks the zone\n  // the pointer is actually in.\n  const { ref: dropZoneRef, isDropTarget } = useDroppable({\n    id: groupDropZoneId(group.id),\n    data: groupDropZoneData(group.id),\n    collisionDetector: pointerIntersection,\n    collisionPriority: depth,\n  })\n\n  // The drag source and the drop zone are the same element.\n  const groupRef = useForkRef(sortableRef, dropZoneRef)\n\n  const style: CSSProperties = {\n    ['--qb-accent-color' as string]: accentColorFor(group),\n    ['--qb-pill-color' as string]: accentColorFor(group),\n  }\n\n  return (\n    <div\n      ref={groupRef}\n      className={`${styles.group} ${isRoot ? '' : styles.nested}${\n        isDragSource ? ` ${dragStyles.dragSource}` : ''\n      }${isDropTarget ? ` ${styles.dropTarget}` : ''}`}\n      style={style}\n      role=\"group\"\n      aria-label={groupAriaLabel(group)}\n      data-qb-node-id={group.id}\n    >\n      <div className={styles.header}>\n        {!isRoot && (\n          <QBDragHandle\n            handleRef={handleRef}\n            label=\"Drag condition group into another condition group\"\n          />\n        )}\n        <ToggleButtonGroup\n          size=\"small\"\n          className={styles.combinator}\n          exclusive\n          value={group.combinator}\n          aria-label=\"Boolean combinator\"\n          onChange={(_event, next) => {\n            if (next == null) return\n            updateGroupAt(group.id, { combinator: next })\n          }}\n        >\n          <ToggleButton value=\"AND\" aria-label=\"AND\">\n            AND\n          </ToggleButton>\n          <ToggleButton value=\"OR\" aria-label=\"OR\">\n            OR\n          </ToggleButton>\n        </ToggleButtonGroup>\n\n        <ToggleButton\n          size=\"small\"\n          value=\"not\"\n          selected={group.not}\n          className={styles.notToggle}\n          aria-label=\"Negate this group\"\n          aria-pressed={group.not}\n          onChange={() => updateGroupAt(group.id, { not: !group.not })}\n        >\n          Exclude (NOT)\n        </ToggleButton>\n\n        <div className={styles.actions}>\n          <AddButton\n            disabledReason={addConditionDisabledReason}\n            onClick={() => addConditionAt(group.id)}\n          >\n            + Condition\n          </AddButton>\n          <AddButton\n            disabledReason={addGroupDisabledReason}\n            onClick={() => addChildGroupAt(group.id)}\n          >\n            + Condition Group\n          </AddButton>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => clearGroupAt(group.id)}\n            disabled={group.children.length === 0}\n          >\n            Clear\n          </Button>\n          {!isRoot && (\n            <Button\n              className={styles.actionButton}\n              size=\"small\"\n              onClick={() => removeGroupAt(group.id)}\n            >\n              Delete Condition Group\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <div className={styles.children}>\n        {group.children.length === 0 ? (\n          <div className={styles.emptyState}>\n            No conditions yet, add one above\n          </div>\n        ) : (\n          group.children.map((child, childIndex) => {\n            if (isQBGroup(child)) {\n              return (\n                <FilterGroupNode\n                  key={child.id}\n                  group={child}\n                  parentGroupId={group.id}\n                  index={childIndex}\n                  depth={depth + 1}\n                />\n              )\n            }\n            return (\n              <FilterConditionRow\n                key={child.id}\n                condition={child}\n                parentGroupId={group.id}\n                index={childIndex}\n              />\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype AddButtonProps = {\n  /** When set, the button is disabled and this explanation is shown on hover. */\n  disabledReason: string | undefined\n  onClick: () => void\n  children: ReactNode\n}\n\nfunction AddButton(props: AddButtonProps) {\n  const { disabledReason, onClick, children } = props\n  const button = (\n    <Button\n      className={styles.actionButton}\n      size=\"small\"\n      onClick={onClick}\n      disabled={disabledReason !== undefined}\n    >\n      {children}\n    </Button>\n  )\n  if (disabledReason === undefined) {\n    return button\n  }\n  // A disabled button fires no pointer events, so the tooltip listens on a wrapper.\n  return (\n    <Tooltip title={disabledReason}>\n      <span>{button}</span>\n    </Tooltip>\n  )\n}\n\nfunction accentColorFor(group: QBGroup): string {\n  if (group.not) return 'var(--synapse-error)'\n  if (group.combinator === 'OR') return 'var(--synapse-warning)'\n  return 'var(--synapse-primary-action-color)'\n}\n\nfunction groupAriaLabel(group: QBGroup): string {\n  const modifier = group.not ? 'excluded ' : ''\n  return `${modifier}${group.combinator} filter group`\n}\n"],"mappings":"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"}

package/dist/components/QueryBuilder/QueryBuilderControls.css

@@ -1 +1 @@
-._root_x90xm_1{background:var(--synapse-background-color-gray-light);border:1px solid var(--synapse-border-color-gray);border-radius:4px;flex-direction:column;gap:12px;padding:12px;display:flex}._applyRow_x90xm_11{justify-content:flex-end;display:flex}._applyButton_x90xm_16{text-transform:none}._summaryBar_x90xm_20{border:1px solid var(--synapse-border-color-gray);background:#fff;border-radius:4px;flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px;display:flex}._summaryHeader_x90xm_31{justify-content:space-between;align-items:center;gap:12px;display:flex}._summaryLabel_x90xm_38{text-transform:uppercase;letter-spacing:.5px;color:var(--synapse-gray-regular);font-size:11px;font-weight:700}._summaryContent_x90xm_46{word-break:break-word;font-size:14px;line-height:1.5}._summaryModeToggle_x90xm_52{flex-shrink:0}._summaryModeToggle_x90xm_52 .MuiToggleButton-root{text-transform:none;padding:2px 12px;font-size:12px}._sqlPlaceholder_x90xm_61{color:var(--synapse-gray-deemphasized);font-style:italic}._sqlText_x90xm_66{font-family:var(--synapse-font-family-mono,monospace);white-space:pre-wrap;word-break:break-word;color:var(--synapse-gray-1000);font-size:12px;display:block}._sqlError_x90xm_75{color:var(--synapse-error);font-size:13px}
+._root_1wpms_1{background:var(--synapse-background-color-gray-light);border:1px solid var(--synapse-border-color-gray);border-radius:4px;flex-direction:column;gap:12px;padding:12px;display:flex}._applyRow_1wpms_11{justify-content:flex-end;align-items:center;gap:12px;display:flex}._applyButton_1wpms_18{text-transform:none}._summaryBar_1wpms_22{border:1px solid var(--synapse-border-color-gray);background:#fff;border-radius:4px;flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px;display:flex}._summaryHeader_1wpms_33{justify-content:space-between;align-items:center;gap:12px;display:flex}._summaryLabel_1wpms_40{text-transform:uppercase;letter-spacing:.5px;color:var(--synapse-gray-regular);font-size:11px;font-weight:700}._summaryContent_1wpms_48{word-break:break-word;font-size:14px;line-height:1.5}._summaryModeToggle_1wpms_54{flex-shrink:0}._summaryModeToggle_1wpms_54 .MuiToggleButton-root{text-transform:none;padding:2px 12px;font-size:12px}._sqlPlaceholder_1wpms_63{color:var(--synapse-gray-deemphasized);font-style:italic}._sqlText_1wpms_68{font-family:var(--synapse-font-family-mono,monospace);white-space:pre-wrap;word-break:break-word;color:var(--synapse-gray-1000);font-size:12px;display:block}._sqlError_1wpms_77{color:var(--synapse-error);font-size:13px}

package/dist/components/QueryBuilder/QueryBuilderControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderControls.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/QueryBuilderControls.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAe,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAK1D,MAAM,MAAM,yBAAyB,GAAG;IACtC,iEAAiE;IACjE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACpB,2DAA2D;IAC3D,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAID;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAsLpE"}
+{"version":3,"file":"QueryBuilderControls.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/QueryBuilderControls.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAAe,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAK1D,MAAM,MAAM,yBAAyB,GAAG;IACtC,iEAAiE;IACjE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACpB,2DAA2D;IAC3D,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAID;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAqNpE"}