Skip to content

feat: add QueryBar filter component with inline editing and autocomplete#35

Merged
ipwallarm merged 9 commits intomainfrom
feature/filter-attacks-components-oks
Mar 11, 2026
Merged

feat: add QueryBar filter component with inline editing and autocomplete#35
ipwallarm merged 9 commits intomainfrom
feature/filter-attacks-components-oks

Conversation

@pigarevaoks
Copy link
Collaborator

Summary

  • Complete QueryBar component for building filter expressions with progressive chip building flow (field → operator → value)
  • Inline segment editing — click attribute/operator/value to edit in-place with zero layout shift
  • Multi-select value editing with dropdown checkboxes, keyboard multi-select (Cmd+Arrow), and two commit paths (Enter for text, ArrowRight for checkboxes)
  • AND/OR logical connectors, date field support with calendar picker, fuzzy sort for dropdowns, insertion gaps, error validation
  • Comprehensive E2E and unit tests

Test plan

  • Storybook: create single-select chip (field → operator → value)
  • Storybook: create multi-select chip (field → "is any of" → toggle values → ArrowRight)
  • Storybook: inline edit attribute/value segments (click → type → Enter)
  • Storybook: Escape cancels editing without saving
  • Storybook: keyboard navigation (ArrowUp/Down, Cmd+Arrow multi-select)
  • Unit tests pass: pnpm --filter design-system test

🤖 Generated with Claude Code

pigarevaoks and others added 8 commits March 10, 2026 15:55
Complete implementation of the QueryBar component for building filter expressions:

- Progressive chip building flow: field → operator → value
- Inline segment editing (click attribute/operator/value to edit in-place)
- Multi-select value editing with dropdown checkboxes
- AND/OR logical connectors between conditions
- Date field support with calendar picker and range selection
- Keyboard navigation (ArrowUp/Down, Enter, Escape, ArrowRight, Cmd+Arrow multi-select)
- Fuzzy sort for field and value dropdown menus
- Insertion gaps for adding conditions between existing chips
- Error validation for unknown fields and invalid values
- Comprehensive E2E and unit tests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…av and chip editing

- Remove duplicate WithFooter story in DropdownMenu
- Improve keyboard navigation in QueryBar menus
- Fix chip editing flow and value menu state handling
- Update QueryBar e2e tests
- Clean up index exports

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add default clause to switch in useKeyboardNav
- Replace global isNaN with Number.isNaN in useMenuFlow
- Update prepare-publish config and mcp test fixtures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Import DateValue from @ark-ui/react/date-picker instead of @zag-js/date-picker
- Add non-null assertions for array access in conditions.ts
- Cast item.value to ConditionValue in useValueMenuState

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Import DateValue from @ark-ui/react/date-picker instead of @zag-js/date-picker
- Add non-null assertions for array access in conditions.ts
- Cast item.value to ConditionValue in useValueMenuState

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

# Conflicts:
#	packages/design-system/src/components/QueryBar/QueryBarMenu/QueryBarDateValueMenu/DateCalendar.tsx
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Contributor

This PR is included in version 0.8.0-rc-feature-filter-attacks-components-oks.1

Copy link
Collaborator

@ipwallarm ipwallarm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could merge after small changes and replace <DatePicker /> in the next step

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Contributor

This PR is included in version 0.8.0-rc-feature-filter-attacks-components-oks.2

@ipwallarm ipwallarm merged commit cec9e49 into main Mar 11, 2026
17 checks passed
@ipwallarm ipwallarm deleted the feature/filter-attacks-components-oks branch March 11, 2026 10:49
github-actions bot pushed a commit that referenced this pull request Mar 11, 2026
## 0.8.0 (2026-03-11)

* feat: add QueryBar filter component with inline editing and autocomplete (#35) ([cec9e49](cec9e49)), closes [#35](#35)
@github-actions
Copy link
Contributor

This PR is included in version 0.8.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants