Add disabled prop

.prettierrc

@@ -3,8 +3,8 @@
   "semi": true,
   "printWidth": 100,
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "es5",
   "bracketSpacing": true,
   "bracketSameLine": true,
-  "arrowParens": "always"
+  "arrowParens": "avoid"
 }

jest.config.js

@@ -2,5 +2,5 @@
 module.exports = {
   projects: ['packages/react-querybuilder'],
   collectCoverage: true,
-  coverageDirectory: 'coverage'
+  coverageDirectory: 'coverage',
 };

package.json

@@ -5,7 +5,7 @@
     "packages/*"
   ],
   "scripts": {
-    "start": "lerna run start",
+    "start": "yarn workspace @react-querybuilder/demo start",
     "build": "lerna run build",
     "test": "jest",
     "test:watch": "jest --watch",

packages/antd/src/AntDActionElement.tsx

@@ -1,8 +1,13 @@
 import { Button } from 'antd';
 import type { ActionProps } from 'react-querybuilder';
 
-const AntDActionElement = ({ className, handleOnClick, label, title }: ActionProps) => (
-  <Button type="primary" className={className} title={title} onClick={(e) => handleOnClick(e)}>
+const AntDActionElement = ({ className, handleOnClick, label, title, disabled }: ActionProps) => (
+  <Button
+    type="primary"
+    className={className}
+    title={title}
+    onClick={e => handleOnClick(e)}
+    disabled={disabled}>
     {label}
   </Button>
 );

packages/antd/src/AntDNotToggle.tsx

@@ -1,12 +1,20 @@
 import { Switch } from 'antd';
 import type { NotToggleProps } from 'react-querybuilder';
 
-const AntDNotToggle = ({ className, handleOnChange, label, checked, title }: NotToggleProps) => (
+const AntDNotToggle = ({
+  className,
+  handleOnChange,
+  label,
+  checked,
+  title,
+  disabled,
+}: NotToggleProps) => (
   <Switch
     title={title}
     className={className}
-    onChange={(checked) => handleOnChange(checked)}
+    onChange={checked => handleOnChange(checked)}
     checked={!!checked}
+    disabled={disabled}
     checkedChildren={label}
     unCheckedChildren="="
   />

packages/antd/src/AntDValueEditor.tsx

@@ -13,7 +13,8 @@ const AntDValueEditor = ({
   className,
   type,
   inputType,
-  values
+  values,
+  disabled,
 }: ValueEditorProps) => {
   useEffect(() => {
     if (
@@ -38,8 +39,12 @@ const AntDValueEditor = ({
   switch (type) {
     case 'select':
       return (
-        <Select className={className} onChange={(v) => handleOnChange(v)} value={value}>
-          {values!.map((v) => (
+        <Select
+          className={className}
+          onChange={v => handleOnChange(v)}
+          value={value}
+          disabled={disabled}>
+          {values!.map(v => (
             <Option key={v.name} value={v.name}>
               {v.label}
             </Option>
@@ -52,20 +57,22 @@ const AntDValueEditor = ({
         <Checkbox
           type="checkbox"
           className={className}
-          onChange={(e) => handleOnChange(e.target.checked)}
+          disabled={disabled}
+          onChange={e => handleOnChange(e.target.checked)}
           checked={!!value}
         />
       );
 
     case 'radio':
       return (
         <span className={className} title={title}>
-          {values!.map((v) => (
+          {values!.map(v => (
             <Radio
               key={v.name}
               value={v.name}
               checked={value === v.name}
-              onChange={(e) => handleOnChange(e.target.value)}>
+              disabled={disabled}
+              onChange={e => handleOnChange(e.target.value)}>
               {v.label}
             </Radio>
           ))}
@@ -79,8 +86,9 @@ const AntDValueEditor = ({
           value={value}
           title={title}
           className={className}
+          disabled={disabled}
           placeholder={placeHolderText}
-          onChange={(e) => handleOnChange(e.target.value)}
+          onChange={e => handleOnChange(e.target.value)}
         />
       );
   }

packages/antd/src/AntDValueSelector.tsx

@@ -3,9 +3,15 @@ import type { ValueSelectorProps } from 'react-querybuilder';
 
 const { Option } = Select;
 
-const AntDValueSelector = ({ className, handleOnChange, options, value }: ValueSelectorProps) => (
-  <Select className={className} value={value} onChange={(v) => handleOnChange(v)}>
-    {options.map((option) => {
+const AntDValueSelector = ({
+  className,
+  handleOnChange,
+  options,
+  value,
+  disabled,
+}: ValueSelectorProps) => (
+  <Select disabled={disabled} className={className} value={value} onChange={v => handleOnChange(v)}>
+    {options.map(option => {
       const key = `key-${option.id ?? option.name}`;
       return (
         <Option key={key} value={option.name}>

packages/bootstrap/src/BootstrapNotToggle.tsx

@@ -6,7 +6,8 @@ const BootstrapNotToggle = ({
   handleOnChange,
   title,
   label,
-  checked
+  checked,
+  disabled,
 }: NotToggleProps) => {
   const [id] = useState(`notToggle-${Math.random()}`);
 
@@ -16,8 +17,9 @@ const BootstrapNotToggle = ({
         id={id}
         className="form-check-input"
         type="checkbox"
-        onChange={(e) => handleOnChange(e.target.checked)}
+        onChange={e => handleOnChange(e.target.checked)}
         checked={!!checked}
+        disabled={disabled}
       />
       <label title={title} htmlFor={id} className="form-check-label">
         {label}

packages/bootstrap/src/BootstrapValueEditor.tsx

@@ -10,7 +10,8 @@ const BootstrapValueEditor = ({
   className,
   type,
   inputType,
-  values
+  values,
+  disabled,
 }: ValueEditorProps) => {
   useEffect(() => {
     if (
@@ -38,9 +39,10 @@ const BootstrapValueEditor = ({
         <select
           className={`${className} form-select form-select-sm`}
           title={title}
-          onChange={(e) => handleOnChange(e.target.value)}
-          value={value}>
-          {values!.map((v) => (
+          onChange={e => handleOnChange(e.target.value)}
+          value={value}
+          disabled={disabled}>
+          {values!.map(v => (
             <option key={v.name} value={v.name}>
               {v.label}
             </option>
@@ -54,23 +56,25 @@ const BootstrapValueEditor = ({
           type="checkbox"
           className={`form-check-input ${className}`}
           title={title}
-          onChange={(e) => handleOnChange(e.target.checked)}
+          disabled={disabled}
+          onChange={e => handleOnChange(e.target.checked)}
           checked={!!value}
         />
       );
 
     case 'radio':
       return (
         <span title={title}>
-          {values!.map((v) => (
+          {values!.map(v => (
             <div key={v.name} className="form-check form-check-inline">
               <input
                 className="form-check-input"
                 type="radio"
                 id={v.name}
                 value={v.name}
                 checked={value === v.name}
-                onChange={(e) => handleOnChange(e.target.value)}
+                disabled={disabled}
+                onChange={e => handleOnChange(e.target.value)}
               />
               <label className="form-check-label" htmlFor={v.name}>
                 {v.label}
@@ -87,8 +91,9 @@ const BootstrapValueEditor = ({
           value={value}
           title={title}
           className={className}
+          disabled={disabled}
           placeholder={placeHolderText}
-          onChange={(e) => handleOnChange(e.target.value)}
+          onChange={e => handleOnChange(e.target.value)}
         />
       );
   }

packages/chakra/src/ChakraActionElement.tsx

@@ -1,14 +1,15 @@
 import { Button } from '@chakra-ui/react';
 import type { ActionProps } from 'react-querybuilder';
 
-const ChakraActionElement = ({ className, handleOnClick, label, title }: ActionProps) => (
+const ChakraActionElement = ({ className, handleOnClick, label, title, disabled }: ActionProps) => (
   <Button
     className={className}
     title={title}
     colorScheme="gray"
     variant="solid"
-    onClick={(e) => handleOnClick(e)}
-    size="xs">
+    onClick={e => handleOnClick(e)}
+    size="xs"
+    isDisabled={disabled}>
     {label}
   </Button>
 );

packages/chakra/src/ChakraDragHandle.tsx

@@ -4,12 +4,17 @@ import { forwardRef } from 'react';
 import type { DragHandleProps } from 'react-querybuilder';
 
 export default forwardRef<HTMLSpanElement, DragHandleProps>(function ChakraDragHandle(
-  { className, title },
+  { className, title, disabled },
   dragRef
 ) {
   return (
     <span ref={dragRef} className={className} title={title}>
-      <IconButton aria-label={title ?? ''} size="xs" icon={<DragHandleIcon />} />
+      <IconButton
+        isDisabled={disabled}
+        aria-label={title ?? ''}
+        size="xs"
+        icon={<DragHandleIcon />}
+      />
     </span>
   );
 });

packages/chakra/src/ChakraNotToggle.tsx

@@ -2,18 +2,31 @@ import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
 import { useState } from 'react';
 import type { NotToggleProps } from 'react-querybuilder';
 
-const ChakraNotToggle = ({ className, handleOnChange, label, checked, title }: NotToggleProps) => {
+const ChakraNotToggle = ({
+  className,
+  handleOnChange,
+  label,
+  checked,
+  title,
+  disabled,
+}: NotToggleProps) => {
   const [id] = useState(`notToggle-${Math.random()}`);
 
   return (
     <div style={{ display: 'inline-block' }}>
-      <FormControl display="flex" alignItems="center" className={className} title={title}>
+      <FormControl
+        display="flex"
+        alignItems="center"
+        className={className}
+        title={title}
+        isDisabled={disabled}>
         <Switch
           id={id}
           size="sm"
           colorScheme="red"
           checked={checked}
-          onChange={(e) => handleOnChange(e.target.checked)}
+          isDisabled={disabled}
+          onChange={e => handleOnChange(e.target.checked)}
         />
         <FormLabel htmlFor={id}>{label}</FormLabel>
       </FormControl>

packages/chakra/src/ChakraValueEditor.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Input, RadioGroup, Radio, Select, Stack } from '@chakra-ui/react';
+import { Checkbox, Input, Radio, RadioGroup, Select, Stack } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import type { ValueEditorProps } from 'react-querybuilder';
 
@@ -11,7 +11,8 @@ const ChakraValueEditor = ({
   className,
   type,
   inputType,
-  values
+  values,
+  disabled,
 }: ValueEditorProps) => {
   useEffect(() => {
     if (
@@ -41,9 +42,10 @@ const ChakraValueEditor = ({
           value={value}
           size="xs"
           variant="filled"
-          onChange={(e) => handleOnChange(e.target.value)}>
+          isDisabled={disabled}
+          onChange={e => handleOnChange(e.target.value)}>
           {values &&
-            values.map((v) => (
+            values.map(v => (
               <option key={v.name} value={v.name}>
                 {v.label}
               </option>
@@ -56,16 +58,22 @@ const ChakraValueEditor = ({
         <Checkbox
           className={className}
           size="sm"
-          onChange={(e) => handleOnChange(e.target.checked)}
+          isDisabled={disabled}
+          onChange={e => handleOnChange(e.target.checked)}
           isChecked={!!value}
         />
       );
 
     case 'radio':
       return (
-        <RadioGroup className={className} title={title} value={value} onChange={handleOnChange}>
+        <RadioGroup
+          className={className}
+          title={title}
+          value={value}
+          onChange={handleOnChange}
+          isDisabled={disabled}>
           <Stack direction="row">
-            {values!.map((v) => (
+            {values!.map(v => (
               <Radio key={v.name} value={v.name} size="sm">
                 {v.label}
               </Radio>
@@ -82,9 +90,10 @@ const ChakraValueEditor = ({
           title={title}
           size="xs"
           variant="filled"
+          isDisabled={disabled}
           className={className}
           placeholder={placeHolderText}
-          onChange={(e) => handleOnChange(e.target.value)}
+          onChange={e => handleOnChange(e.target.value)}
         />
       );
   }

packages/chakra/src/ChakraValueSelector.tsx

@@ -6,16 +6,18 @@ const ChakraValueSelector = ({
   handleOnChange,
   options,
   value,
-  title
+  title,
+  disabled,
 }: ValueSelectorProps) => (
   <Select
     className={className}
     title={title}
     value={value}
     size="xs"
     variant="filled"
-    onChange={(e) => handleOnChange(e.target.value)}>
-    {options.map((option) => {
+    disabled={disabled}
+    onChange={e => handleOnChange(e.target.value)}>
+    {options.map(option => {
       const key = `key-${option.id ?? option.name}`;
       return (
         <option key={key} value={option.name}>

packages/demo/src/components/BootstrapDragHandle.ts

@@ -1 +1,2 @@
+import 'bootstrap-icons/font/bootstrap-icons.scss';
 export { BootstrapDragHandle as default } from '@react-querybuilder/bootstrap';