From 067cdb68842e8d73e5401c183231c9a3388a3307 Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 12:56:59 -0700
Subject: [PATCH 1/9] Run are-the-types-wrong in CI

---
 .github/workflows/main.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index d6aa982..a60283d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -13,3 +13,4 @@ jobs:
       - run: bun run build
       - run: bun run lint --format=github
       - run: bun run fmt --check
+      - run: bun run are-the-types-wrong

From 1629a81939d8aa016d9e736145237d3c98573fc4 Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 12:57:52 -0700
Subject: [PATCH 2/9] Remove unnecessary peerDependencies

---
 bun.lock             | 4 ----
 example/package.json | 4 ----
 package.json         | 4 ----
 3 files changed, 12 deletions(-)

diff --git a/bun.lock b/bun.lock
index a88389f..e0dcb75 100644
--- a/bun.lock
+++ b/bun.lock
@@ -32,10 +32,6 @@
       "peerDependencies": {
         "@chakra-ui/icons": "^2",
         "@chakra-ui/react": "^2",
-        "@chakra-ui/system": "^2",
-        "@emotion/react": "^11",
-        "@emotion/styled": "^11",
-        "framer-motion": "^11",
         "react": ">=18",
         "react-querybuilder": "^8",
       },
diff --git a/example/package.json b/example/package.json
index 5d4281d..82b546b 100644
--- a/example/package.json
+++ b/example/package.json
@@ -2,11 +2,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@react-querybuilder/chakra2": "8.24.0",
-    "framer-motion": "^11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-querybuilder": "8.24.0"
diff --git a/package.json b/package.json
index 87153ba..65d01c8 100644
--- a/package.json
+++ b/package.json
@@ -82,10 +82,6 @@
   "peerDependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "framer-motion": "^11",
     "react": ">=18",
     "react-querybuilder": "^8"
   }

From df1f1f69b410c670b5141f1756b71b4c98513b8c Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 12:59:06 -0700
Subject: [PATCH 3/9] Correct package name in README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 85477c3..79ad1c1 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) comp
 ## Installation
 
 ```bash
-npm i react-querybuilder @react-querybuilder/chakra @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
+npm i react-querybuilder @react-querybuilder/chakra2 @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
 # OR yarn add / pnpm add / bun add
 ```
 
@@ -27,7 +27,7 @@ To configure the query builder to use Chakra-compatible components, place `Query
 
 ```tsx
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
-import { QueryBuilderChakra } from '@react-querybuilder/chakra';
+import { QueryBuilderChakra } from '@react-querybuilder/chakra2';
 import { useState } from 'react';
 import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
 

From 6e4023f196cc4e8e77fd6e633dfddc116e1cfd7e Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:01:35 -0700
Subject: [PATCH 4/9] Correct define in build

---
 tsdown.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsdown.config.ts b/tsdown.config.ts
index 626c60b..99408b9 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -14,7 +14,7 @@ export default (async options => {
 
   const productionOptions = {
     minify: true,
-    define: { NODE_ENV: 'production' },
+    define: { 'process.env.NODE_ENV': 'production' },
   } satisfies UserConfig;
 
   const opts: UserConfig[] = [

From f695c10a1c6ffdb8395adf41d1bcdf7f7e270457 Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:02:25 -0700
Subject: [PATCH 5/9] Pass `testID` prop to all components

---
 src/ChakraActionElement.tsx |  3 +-
 src/ChakraDragHandle.tsx    | 12 +++---
 src/ChakraNotToggle.tsx     |  3 +-
 src/ChakraValueEditor.tsx   | 18 ++++++---
 src/ChakraValueSelector.tsx | 74 ++++++++++++++++++++-----------------
 5 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/src/ChakraActionElement.tsx b/src/ChakraActionElement.tsx
index 4b7def1..5e68a4e 100644
--- a/src/ChakraActionElement.tsx
+++ b/src/ChakraActionElement.tsx
@@ -12,8 +12,8 @@ export const ChakraActionElement = ({
   title,
   disabled,
   disabledTranslation,
+  testID,
   // Props that should not be in extraProps
-  testID: _testID,
   rules: _rules,
   level: _level,
   path: _path,
@@ -24,6 +24,7 @@ export const ChakraActionElement = ({
   ...extraProps
 }: ChakraActionProps): React.JSX.Element => (
   <Button
+    data-testid={testID}
     className={className}
     title={disabledTranslation && disabled ? disabledTranslation.title : title}
     onClick={e => handleOnClick(e)}
diff --git a/src/ChakraDragHandle.tsx b/src/ChakraDragHandle.tsx
index 374a21e..50b60ae 100644
--- a/src/ChakraDragHandle.tsx
+++ b/src/ChakraDragHandle.tsx
@@ -5,11 +5,11 @@ import * as React from 'react';
 import { forwardRef } from 'react';
 import type { DragHandleProps } from 'react-querybuilder';
 
-type IBP = ComponentPropsWithRef<typeof IconButton>;
+type IconButtonProps = ComponentPropsWithRef<typeof IconButton>;
 
 export type ChakraDragHandleProps = DragHandleProps &
-  Omit<IBP, 'aria-label'> &
-  Partial<Pick<IBP, 'aria-label'>>;
+  Omit<IconButtonProps, 'aria-label'> &
+  Partial<Pick<IconButtonProps, 'aria-label'>>;
 
 export const ChakraDragHandle: React.ForwardRefExoticComponent<
   Omit<ChakraDragHandleProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
@@ -19,8 +19,8 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
       className,
       title,
       disabled,
+      testID,
       // Props that should not be in extraProps
-      testID: _testID,
       level: _level,
       path: _path,
       label: _label,
@@ -32,11 +32,11 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
     },
     dragRef
   ) => (
-    <span ref={dragRef} className={className} title={title}>
+    <span data-testid={testID} ref={dragRef} className={className} title={title}>
       <IconButton
         isDisabled={disabled}
         icon={<DragHandleIcon />}
-        aria-label={title ?? /* istanbul ignore next */ ''}
+        aria-label={title ?? ''}
         {...extraProps}
       />
     </span>
diff --git a/src/ChakraNotToggle.tsx b/src/ChakraNotToggle.tsx
index bfbff5d..6692e48 100644
--- a/src/ChakraNotToggle.tsx
+++ b/src/ChakraNotToggle.tsx
@@ -13,11 +13,11 @@ export const ChakraNotToggle = ({
   checked,
   title,
   disabled,
+  testID,
   // Props that should not be in extraProps
   path: _path,
   context: _context,
   validation: _validation,
-  testID: _testID,
   schema: _schema,
   ruleGroup: _ruleGroup,
   ...extraProps
@@ -27,6 +27,7 @@ export const ChakraNotToggle = ({
   return (
     <div style={{ display: 'inline-block' }}>
       <FormControl
+        data-testid={testID}
         display="flex"
         alignItems="center"
         className={className}
diff --git a/src/ChakraValueEditor.tsx b/src/ChakraValueEditor.tsx
index 274fffd..2bc1a7f 100644
--- a/src/ChakraValueEditor.tsx
+++ b/src/ChakraValueEditor.tsx
@@ -4,7 +4,7 @@ import type { ValueEditorProps } from 'react-querybuilder';
 import { ValueEditor, useValueEditor } from 'react-querybuilder';
 
 // oxlint-disable-next-line no-explicit-any
-type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
+export type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
 
 export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.Element | null => {
   const {
@@ -19,7 +19,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     values = [],
     listsAsArrays: _listsAsArrays,
     separator,
-    valueSource: _vs,
+    valueSource: _valueSource,
     testID,
     disabled,
     selectorComponent: SelectorComponent = allProps.schema.controls.valueSelector,
@@ -34,7 +34,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     return null;
   }
 
-  const placeHolderText = fieldData?.placeholder ?? '';
+  const placeholderText = fieldData?.placeholder ?? '';
   const inputTypeCoerced = ['in', 'notIn'].includes(operator) ? 'text' : inputType || 'text';
 
   if (
@@ -50,7 +50,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
             value={valueAsArray[i] ?? ''}
             isDisabled={disabled}
             className={valueListItemClassName}
-            placeholder={placeHolderText}
+            placeholder={placeholderText}
             onChange={e => multiValueHandler(e.target.value, i)}
             {...extraProps}
           />
@@ -72,6 +72,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
       return (
         <SelectorComponent
           {...propsForValueSelector}
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -87,11 +88,12 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'textarea':
       return (
         <Textarea
+          data-testid={testID}
           value={value}
           title={title}
           isDisabled={disabled}
           className={className}
-          placeholder={placeHolderText}
+          placeholder={placeholderText}
           onChange={e => handleOnChange(e.target.value)}
           {...extraProps}
         />
@@ -100,6 +102,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'switch':
       return (
         <Switch
+          data-testid={testID}
           className={className}
           isChecked={!!value}
           title={title}
@@ -112,6 +115,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'checkbox':
       return (
         <Checkbox
+          data-testid={testID}
           className={className}
           title={title}
           isDisabled={disabled}
@@ -124,6 +128,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'radio':
       return (
         <RadioGroup
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -143,12 +148,13 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
 
   return (
     <Input
+      data-testid={testID}
       type={inputTypeCoerced}
       value={value}
       title={title}
       isDisabled={disabled}
       className={className}
-      placeholder={placeHolderText}
+      placeholder={placeholderText}
       onChange={e => handleOnChange(e.target.value)}
       {...extraProps}
     />
diff --git a/src/ChakraValueSelector.tsx b/src/ChakraValueSelector.tsx
index a2e372d..9b2691b 100644
--- a/src/ChakraValueSelector.tsx
+++ b/src/ChakraValueSelector.tsx
@@ -2,41 +2,47 @@ import { Select } from '@chakra-ui/react';
 import type { ComponentPropsWithoutRef } from 'react';
 import * as React from 'react';
 import type { VersatileSelectorProps } from 'react-querybuilder';
-import { toOptions } from 'react-querybuilder';
+import { toOptions, useSelectElementChangeHandler, useValueSelector } from 'react-querybuilder';
 
 export type ChakraValueSelectorProps = VersatileSelectorProps &
   ComponentPropsWithoutRef<typeof Select>;
 
-export const ChakraValueSelector = ({
-  className,
-  handleOnChange,
-  options,
-  value,
-  title,
-  disabled,
-  // Props that should not be in extraProps
-  testID: _testID,
-  rule: _rule,
-  rules: _rules,
-  level: _level,
-  path: _path,
-  context: _context,
-  validation: _validation,
-  operator: _operator,
-  field: _field,
-  fieldData: _fieldData,
-  multiple: _multiple,
-  listsAsArrays: _listsAsArrays,
-  schema: _schema,
-  ...extraProps
-}: ChakraValueSelectorProps): React.JSX.Element => (
-  <Select
-    className={className}
-    title={title}
-    value={value}
-    disabled={disabled}
-    onChange={e => handleOnChange(e.target.value)}
-    {...extraProps}>
-    {toOptions(options)}
-  </Select>
-);
+export const ChakraValueSelector = (props: ChakraValueSelectorProps): React.JSX.Element => {
+  const {
+    className,
+    options,
+    title,
+    disabled,
+    multiple,
+    testID,
+    // Props that should not be in extraProps
+    rule: _rule,
+    rules: _rules,
+    level: _level,
+    path: _path,
+    context: _context,
+    validation: _validation,
+    operator: _operator,
+    field: _field,
+    fieldData: _fieldData,
+    listsAsArrays: _listsAsArrays,
+    schema: _schema,
+    ...extraProps
+  } = props;
+  const { onChange, val } = useValueSelector(props);
+  const selectElementChangeHandler = useSelectElementChangeHandler({ multiple, onChange });
+  return (
+    <Select
+      data-testid={testID}
+      className={className}
+      title={title}
+      value={val}
+      isDisabled={disabled}
+      // Chakra v2 doesn't support multiselect
+      // multiple={!!multiple}
+      onChange={selectElementChangeHandler}
+      {...extraProps}>
+      {toOptions(options)}
+    </Select>
+  );
+};

From db6d7080eeafd7be2ff686ef18522505deb303c3 Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:05:07 -0700
Subject: [PATCH 6/9] Enable and export `ChakraShiftActions`

---
 src/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 1cf9051..c404e91 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,12 +18,14 @@ import { getCompatContextProvider } from 'react-querybuilder';
 import { ChakraActionElement } from './ChakraActionElement';
 import { ChakraDragHandle } from './ChakraDragHandle';
 import { ChakraNotToggle } from './ChakraNotToggle';
+import { ChakraShiftActions } from './ChakraShiftActions';
 import { ChakraValueEditor } from './ChakraValueEditor';
 import { ChakraValueSelector } from './ChakraValueSelector';
 
 export * from './ChakraActionElement';
 export * from './ChakraDragHandle';
 export * from './ChakraNotToggle';
+export * from './ChakraShiftActions';
 export * from './ChakraValueEditor';
 export * from './ChakraValueSelector';
 
@@ -32,6 +34,7 @@ export const chakraControlElements: ControlElementsProp<FullField, string> = {
   valueSelector: ChakraValueSelector,
   dragHandle: ChakraDragHandle,
   notToggle: ChakraNotToggle,
+  shiftActions: ChakraShiftActions,
   valueEditor: ChakraValueEditor,
 };
 

From 8f962fd0637cd4e75ce91e1e9c01bb4ca26d77ec Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:05:19 -0700
Subject: [PATCH 7/9] Add mute icons

---
 src/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index c404e91..d51cc41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,8 @@ import {
   LockIcon,
   UnlockIcon,
   UpDownIcon,
+  ViewIcon,
+  ViewOffIcon,
 } from '@chakra-ui/icons';
 import * as React from 'react';
 import type {
@@ -48,6 +50,10 @@ export const chakraTranslations: Partial<Translations> = {
   lockRule: { label: <UnlockIcon /> },
   lockGroupDisabled: { label: <LockIcon /> },
   lockRuleDisabled: { label: <LockIcon /> },
+  muteRule: { label: <ViewIcon /> },
+  muteGroup: { label: <ViewIcon /> },
+  unmuteRule: { label: <ViewOffIcon /> },
+  unmuteGroup: { label: <ViewOffIcon /> },
   shiftActionDown: { label: <ChevronDownIcon /> },
   shiftActionUp: { label: <ChevronUpIcon /> },
 };

From d10958a5d0e7c8b8f0f295046ee5fbd5a96acd3b Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:13:22 -0700
Subject: [PATCH 8/9] Add `ChakraShiftActions` to README export list

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 79ad1c1..6f08e5b 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,7 @@ export function App() {
 | `ChakraActionElement`   | `controlElements.actionElement` |
 | `ChakraDragHandle`      | `controlElements.dragHandle`    |
 | `ChakraNotToggle`       | `controlElements.notToggle`     |
+| `ChakraShiftActions`    | `controlElements.shiftActions`  |
 | `ChakraValueEditor`     | `controlElements.valueEditor`   |
 | `ChakraValueSelector`   | `controlElements.valueSelector` |
 

From 44a4ae2e8a1390d3ffa07d9c9d5655d78919000d Mon Sep 17 00:00:00 2001
From: Jake Boone <jakeboone02@gmail.com>
Date: Thu, 17 Sep 2026 13:15:12 -0700
Subject: [PATCH 9/9] Remove unnecessary config files

---
 .oxfmtrc.json       | 23 ++++++++++++++++++++++-
 .prettierignore     | 24 ------------------------
 prettier.config.mjs | 20 --------------------
 typedoc.json        |  4 ----
 4 files changed, 22 insertions(+), 49 deletions(-)
 delete mode 100644 .prettierignore
 delete mode 100644 prettier.config.mjs
 delete mode 100644 typedoc.json

diff --git a/.oxfmtrc.json b/.oxfmtrc.json
index a6a699f..8c31900 100644
--- a/.oxfmtrc.json
+++ b/.oxfmtrc.json
@@ -1,6 +1,5 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "ignorePatterns": [],
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
@@ -15,6 +14,28 @@
   "sortImports": {
     "newlinesBetween": false
   },
+  "ignorePatterns": [
+    // Hidden(ish) files
+    "**/.*",
+    // Generated
+    "*Parser.js",
+    // Binaries
+    "*.jpeg",
+    "*.jpg",
+    "*.png",
+    "*.svg",
+    "bun.lockb",
+    // Unsupported
+    "*.jison",
+    "*.toml",
+    "CNAME",
+    "*.go",
+    "go.mod",
+    "go.sum",
+    // Misc
+    "lerna.json",
+    "bun.lock"
+  ],
   "overrides": [{
     "files": ["example/**/*.ts{,x}"],
     "options": {
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index ea5b8f5..0000000
--- a/.prettierignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Hidden(ish) files
-**/.*
-
-# Generated
-*Parser.js
-
-# Binaries
-*.jpeg
-*.jpg
-*.png
-*.svg
-bun.lockb
-
-# Unsupported
-*.jison
-*.toml
-CNAME
-*.go
-go.mod
-go.sum
-
-# Misc
-lerna.json
-bun.lock
diff --git a/prettier.config.mjs b/prettier.config.mjs
deleted file mode 100644
index 21294ea..0000000
--- a/prettier.config.mjs
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @type {import("prettier").Options} */
-export default {
-  printWidth: 100,
-  tabWidth: 2,
-  useTabs: false,
-  semi: true,
-  singleQuote: true,
-  trailingComma: 'es5',
-  bracketSpacing: true,
-  bracketSameLine: true,
-  arrowParens: 'avoid',
-  overrides: [
-    {
-      files: 'example/**/*.!(css|scss)*',
-      options: {
-        printWidth: 80,
-      },
-    },
-  ],
-};
diff --git a/typedoc.json b/typedoc.json
deleted file mode 100644
index c6cae0e..0000000
--- a/typedoc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "entryPoints": ["src/index.tsx"],
-  "extends": ["../../typedoc.json"]
-}