@react-querybuilder/bootstrap 4.1.3 → 4.2.2

package/README.md

@@ -1,6 +1,6 @@
 ## @react-querybuilder/bootstrap
 
-Official [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Bootstrap](https://getbootstrap.com/).
 
 To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/react-querybuilder/) and choose "Bootstrap" from the Style drop-down.
 
@@ -17,14 +17,13 @@ yarn add react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-ic
 ```tsx
 import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
 import {
-  BootstrapDragHandle,
-  BootstrapNotToggle,
-  BootstrapValueEditor
+  bootstrapControlClassnames,
+  bootstrapControlElements,
 } from '@react-querybuilder/bootstrap';
 
 const fields = [
   { name: 'firstName', label: 'First Name' },
-  { name: 'lastName', label: 'Last Name' }
+  { name: 'lastName', label: 'Last Name' },
 ];
 
 const App = () => {
@@ -34,24 +33,9 @@ const App = () => {
     <QueryBuilder
       fields={fields}
       query={query}
-      onQueryChange={(q) => setQuery(q)}
-      controlClassnames={{
-        addGroup: 'btn btn-secondary btn-sm',
-        addRule: 'btn btn-primary btn-sm',
-        cloneGroup: 'btn btn-secondary btn-sm',
-        cloneRule: 'btn btn-secondary btn-sm',
-        removeGroup: 'btn btn-danger btn-sm',
-        removeRule: 'btn btn-danger btn-sm',
-        combinators: 'form-select form-select-sm',
-        fields: 'form-select form-select-sm',
-        operators: 'form-select form-select-sm',
-        value: 'form-control form-control-sm'
-      }}
-      controlElements={{
-        dragHandle: BootstrapDragHandle,
-        notToggle: BootstrapNotToggle,
-        valueEditor: BootstrapValueEditor
-      }}
+      onQueryChange={q => setQuery(q)}
+      controlClassnames={bootstrapControlClassnames}
+      controlElements={bootstrapControlElements}
     />
   );
 };

package/dist/index.cjs.js

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var i=require("react");function b(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var c=b(i);const p=i.forwardRef(({className:e,title:t},a)=>c.default.createElement("span",{ref:a,className:e,title:t},c.default.createElement("i",{className:"bi bi-grip-vertical"})));p.displayName="BootstrapDragHandle";const g=({className:e,handleOnChange:t,title:a,label:n,checked:r,disabled:o})=>{const u=i.useRef(`notToggle-${Math.random()}`);return c.default.createElement("div",{className:`form-check-inline form-switch ${e}`},c.default.createElement("input",{id:u.current,className:"form-check-input",type:"checkbox",onChange:s=>t(s.target.checked),checked:!!r,disabled:o}),c.default.createElement("label",{title:a,htmlFor:u.current,className:"form-check-label"},n))};g.displayName="BootstrapNotToggle";const N=e=>Array.isArray(e)&&e.length>0&&"options"in e[0],B=e=>N(e)?e.map(t=>c.default.createElement("optgroup",{key:t.label,label:t.label},t.options.map(a=>c.default.createElement("option",{key:a.name,value:a.name},a.label)))):Array.isArray(e)?e.map(t=>c.default.createElement("option",{key:t.name,value:t.name},t.label)):null,k=({fieldData:e,operator:t,value:a,handleOnChange:n,title:r,className:o,type:u,inputType:s,values:f,disabled:m})=>{var d;if(i.useEffect(()=>{s==="number"&&!["between","notBetween","in","notIn"].includes(t)&&typeof a=="string"&&a.includes(",")&&n("")},[s,t,a,n]),t==="null"||t==="notNull")return null;const y=(d=e==null?void 0:e.placeholder)!=null?d:"",h=["between","notBetween","in","notIn"].includes(t)?"text":s||"text";switch(u){case"select":return c.default.createElement("select",{className:`${o} form-select form-select-sm`,title:r,onChange:l=>n(l.target.value),value:a,disabled:m},B(f));case"checkbox":return c.default.createElement("input",{type:"checkbox",className:`form-check-input ${o}`,title:r,disabled:m,onChange:l=>n(l.target.checked),checked:!!a});case"radio":return c.default.createElement("span",{title:r},f.map(l=>c.default.createElement("div",{key:l.name,className:"form-check form-check-inline"},c.default.createElement("input",{className:"form-check-input",type:"radio",id:l.name,value:l.name,checked:a===l.name,disabled:m,onChange:E=>n(E.target.value)}),c.default.createElement("label",{className:"form-check-label",htmlFor:l.name},l.label))));default:return c.default.createElement("input",{type:h,value:a,title:r,className:o,disabled:m,placeholder:y,onChange:l=>n(l.target.value)})}};k.displayName="ValueEditor";exports.BootstrapDragHandle=p;exports.BootstrapNotToggle=g;exports.BootstrapValueEditor=k;
+"use strict";var _=Object.defineProperty,$=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var B=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,w=(e,r)=>{for(var t in r||(r={}))y.call(r,t)&&B(e,t,r[t]);if(d)for(var t of d(r))N.call(r,t)&&B(e,t,r[t]);return e},x=(e,r)=>$(e,G(r));var R=(e,r)=>{var t={};for(var o in e)y.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&d)for(var o of d(e))r.indexOf(o)<0&&N.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var f=require("react"),S=require("react-querybuilder");function V(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var c=V(f);const i=f.forwardRef(({className:e,title:r},t)=>c.default.createElement("span",{ref:t,className:e,title:r},c.default.createElement("i",{className:"bi bi-grip-vertical"})));i.displayName="BootstrapDragHandle";const p=({className:e,handleOnChange:r,title:t,label:o,checked:a,disabled:l})=>{const m=f.useRef(`notToggle-${Math.random()}`);return c.default.createElement("div",{className:`form-check-inline form-switch ${e}`},c.default.createElement("input",{id:m.current,className:"form-check-input",type:"checkbox",onChange:u=>r(u.target.checked),checked:!!a,disabled:l}),c.default.createElement("label",{title:t,htmlFor:m.current,className:"form-check-label"},o))};p.displayName="BootstrapNotToggle";const b=j=>{var k=j,{fieldData:e,operator:r,value:t,handleOnChange:o,title:a,className:l,type:m,inputType:u,values:g,disabled:s}=k,C=R(k,["fieldData","operator","value","handleOnChange","title","className","type","inputType","values","disabled"]);var E;if(f.useEffect(()=>{u==="number"&&!["between","notBetween","in","notIn"].includes(r)&&typeof t=="string"&&t.includes(",")&&o("")},[u,r,t,o]),r==="null"||r==="notNull")return null;const h=(E=e==null?void 0:e.placeholder)!=null?E:"",T=["between","notBetween","in","notIn"].includes(r)?"text":u||"text";switch(m){case"select":case"multiselect":return c.default.createElement(S.ValueSelector,x(w({},C),{className:`${l} form-select form-select-sm`,title:a,handleOnChange:o,value:t,disabled:s,multiple:m==="multiselect",options:g}));case"textarea":return c.default.createElement("textarea",{value:t,title:a,className:l,disabled:s,placeholder:h,onChange:n=>o(n.target.value)});case"switch":return c.default.createElement("span",{className:`custom-control custom-switch ${l}`},c.default.createElement("input",{type:"checkbox",className:"form-check-input custom-control-input",title:a,disabled:s,onChange:n=>o(n.target.checked),checked:!!t}));case"checkbox":return c.default.createElement("input",{type:"checkbox",className:`form-check-input ${l}`,title:a,disabled:s,onChange:n=>o(n.target.checked),checked:!!t});case"radio":return c.default.createElement("span",{title:a},g.map(n=>c.default.createElement("div",{key:n.name,className:"form-check form-check-inline"},c.default.createElement("input",{className:"form-check-input",type:"radio",id:n.name,value:n.name,checked:t===n.name,disabled:s,onChange:H=>o(H.target.value)}),c.default.createElement("label",{className:"form-check-label",htmlFor:n.name},n.label))))}return c.default.createElement("input",{type:T,value:t,title:a,className:l,disabled:s,placeholder:h,onChange:n=>o(n.target.value)})};b.displayName="BootstrapValueEditor";const q={dragHandle:i,notToggle:p,valueEditor:b},M={addGroup:"btn btn-secondary btn-sm",addRule:"btn btn-primary btn-sm",cloneGroup:"btn btn-secondary btn-sm",cloneRule:"btn btn-secondary btn-sm",lockGroup:"btn btn-secondary btn-sm",lockRule:"btn btn-secondary btn-sm",removeGroup:"btn btn-danger btn-sm",removeRule:"btn btn-danger btn-sm",combinators:"form-select form-select-sm",fields:"form-select form-select-sm",operators:"form-select form-select-sm",value:"form-control form-control-sm",valueSource:"form-select form-select-sm"};exports.BootstrapDragHandle=i;exports.BootstrapNotToggle=p;exports.BootstrapValueEditor=b;exports.bootstrapControlClassnames=M;exports.bootstrapControlElements=q;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/BootstrapDragHandle.tsx","../src/BootstrapNotToggle.tsx","../src/BootstrapValueEditor.tsx","../src/index.ts"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { DragHandleProps } from 'react-querybuilder';\n\nexport const BootstrapDragHandle = forwardRef<HTMLSpanElement, DragHandleProps>(\n  ({ className, title }, dragRef) => (\n    <span ref={dragRef} className={className} title={title}>\n      <i className=\"bi bi-grip-vertical\"></i>\n    </span>\n  )\n);\n\nBootstrapDragHandle.displayName = 'BootstrapDragHandle';\n","import { useRef } from 'react';\nimport type { NotToggleProps } from 'react-querybuilder';\n\nexport const BootstrapNotToggle = ({\n  className,\n  handleOnChange,\n  title,\n  label,\n  checked,\n  disabled,\n}: NotToggleProps) => {\n  const id = useRef(`notToggle-${Math.random()}`);\n\n  return (\n    <div className={`form-check-inline form-switch ${className}`}>\n      <input\n        id={id.current}\n        className=\"form-check-input\"\n        type=\"checkbox\"\n        onChange={e => handleOnChange(e.target.checked)}\n        checked={!!checked}\n        disabled={disabled}\n      />\n      <label title={title} htmlFor={id.current} className=\"form-check-label\">\n        {label}\n      </label>\n    </div>\n  );\n};\n\nBootstrapNotToggle.displayName = 'BootstrapNotToggle';\n","import { useEffect } from 'react';\nimport { ValueEditorProps, ValueSelector } from 'react-querybuilder';\n\nexport const BootstrapValueEditor = ({\n  fieldData,\n  operator,\n  value,\n  handleOnChange,\n  title,\n  className,\n  type,\n  inputType,\n  values,\n  disabled,\n  ...props\n}: ValueEditorProps) => {\n  useEffect(() => {\n    if (\n      inputType === 'number' &&\n      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&\n      typeof value === 'string' &&\n      value.includes(',')\n    ) {\n      handleOnChange('');\n    }\n  }, [inputType, operator, value, handleOnChange]);\n\n  if (operator === 'null' || operator === 'notNull') {\n    return null;\n  }\n\n  const placeHolderText = fieldData?.placeholder ?? '';\n  const inputTypeCoerced = ['between', 'notBetween', 'in', 'notIn'].includes(operator)\n    ? 'text'\n    : inputType || 'text';\n\n  switch (type) {\n    case 'select':\n    case 'multiselect':\n      return (\n        <ValueSelector\n          {...props}\n          className={`${className} form-select form-select-sm`}\n          title={title}\n          handleOnChange={handleOnChange}\n          value={value}\n          disabled={disabled}\n          multiple={type === 'multiselect'}\n          options={values!}\n        />\n      );\n\n    case 'textarea':\n      return (\n        <textarea\n          value={value}\n          title={title}\n          className={className}\n          disabled={disabled}\n          placeholder={placeHolderText}\n          onChange={e => handleOnChange(e.target.value)}\n        />\n      );\n\n    case 'switch':\n      return (\n        <span className={`custom-control custom-switch ${className}`}>\n          <input\n            type=\"checkbox\"\n            className={`form-check-input custom-control-input`}\n            title={title}\n            disabled={disabled}\n            onChange={e => handleOnChange(e.target.checked)}\n            checked={!!value}\n          />\n        </span>\n      );\n\n    case 'checkbox':\n      return (\n        <input\n          type=\"checkbox\"\n          className={`form-check-input ${className}`}\n          title={title}\n          disabled={disabled}\n          onChange={e => handleOnChange(e.target.checked)}\n          checked={!!value}\n        />\n      );\n\n    case 'radio':\n      return (\n        <span title={title}>\n          {values!.map(v => (\n            <div key={v.name} className=\"form-check form-check-inline\">\n              <input\n                className=\"form-check-input\"\n                type=\"radio\"\n                id={v.name}\n                value={v.name}\n                checked={value === v.name}\n                disabled={disabled}\n                onChange={e => handleOnChange(e.target.value)}\n              />\n              <label className=\"form-check-label\" htmlFor={v.name}>\n                {v.label}\n              </label>\n            </div>\n          ))}\n        </span>\n      );\n  }\n\n  return (\n    <input\n      type={inputTypeCoerced}\n      value={value}\n      title={title}\n      className={className}\n      disabled={disabled}\n      placeholder={placeHolderText}\n      onChange={e => handleOnChange(e.target.value)}\n    />\n  );\n};\n\nBootstrapValueEditor.displayName = 'BootstrapValueEditor';\n","import type { Classnames, Controls } from 'react-querybuilder';\nimport { BootstrapDragHandle } from './BootstrapDragHandle';\nimport { BootstrapNotToggle } from './BootstrapNotToggle';\nimport { BootstrapValueEditor } from './BootstrapValueEditor';\n\nexport const bootstrapControlElements: Partial<Controls> = {\n  dragHandle: BootstrapDragHandle,\n  notToggle: BootstrapNotToggle,\n  valueEditor: BootstrapValueEditor,\n};\n\nexport const bootstrapControlClassnames: Partial<Classnames> = {\n  addGroup: 'btn btn-secondary btn-sm',\n  addRule: 'btn btn-primary btn-sm',\n  cloneGroup: 'btn btn-secondary btn-sm',\n  cloneRule: 'btn btn-secondary btn-sm',\n  lockGroup: 'btn btn-secondary btn-sm',\n  lockRule: 'btn btn-secondary btn-sm',\n  removeGroup: 'btn btn-danger btn-sm',\n  removeRule: 'btn btn-danger btn-sm',\n  combinators: 'form-select form-select-sm',\n  fields: 'form-select form-select-sm',\n  operators: 'form-select form-select-sm',\n  value: 'form-control form-control-sm',\n  valueSource: 'form-select form-select-sm',\n};\n\nexport { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };\n"],"names":["forwardRef","useRef","ValueSelector"],"mappings":"u0BAGa,GAAsBA,aACjC,CAAC,CAAE,YAAW,SAAS,4BACpB,OAAD,CAAM,IAAK,EAAS,YAAsB,iCACvC,IAAD,CAAG,UAAU,0BAKnB,EAAoB,YAAc,2BCRrB,GAAqB,CAAC,CACjC,YACA,iBACA,QACA,QACA,UACA,cACoB,MACd,GAAKC,SAAO,aAAa,KAAK,2CAGjC,MAAD,CAAK,UAAW,iCAAiC,6BAC9C,QAAD,CACE,GAAI,EAAG,QACP,UAAU,mBACV,KAAK,WACL,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,EACX,qCAED,QAAD,CAAO,QAAc,QAAS,EAAG,QAAS,UAAU,oBACjD,KAMT,EAAmB,YAAc,0BC3BpB,GAAuB,AAAC,GAYb,CAZa,QACnC,aACA,WACA,QACA,iBACA,QACA,YACA,OACA,YACA,SACA,YAVmC,EAWhC,IAXgC,EAWhC,CAVH,YACA,WACA,QACA,iBACA,QACA,YACA,OACA,YACA,SACA,kCAGU,IAAM,CAEZ,IAAc,UACd,CAAC,CAAC,UAAW,aAAc,KAAM,SAAS,SAAS,IACnD,MAAO,IAAU,UACjB,EAAM,SAAS,QAEA,KAEhB,CAAC,EAAW,EAAU,EAAO,IAE5B,IAAa,QAAU,IAAa,gBAC/B,WAGH,GAAkB,oBAAW,cAAX,OAA0B,GAC5C,EAAmB,CAAC,UAAW,aAAc,KAAM,SAAS,SAAS,GACvE,OACA,GAAa,cAET,OACD,aACA,6CAEAC,gBAAD,OACM,GADN,CAEE,UAAW,GAAG,+BACd,QACA,iBACA,QACA,WACA,SAAU,IAAS,cACnB,QAAS,SAIV,0CAEA,WAAD,CACE,QACA,QACA,YACA,WACA,YAAa,EACb,SAAU,GAAK,EAAe,EAAE,OAAO,aAIxC,wCAEA,OAAD,CAAM,UAAW,gCAAgC,6BAC9C,QAAD,CACE,KAAK,WACL,UAAW,wCACX,QACA,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,SAKd,0CAEA,QAAD,CACE,KAAK,WACL,UAAW,oBAAoB,IAC/B,QACA,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,QAIZ,uCAEA,OAAD,CAAM,SACH,EAAQ,IAAI,2BACV,MAAD,CAAK,IAAK,EAAE,KAAM,UAAU,wDACzB,QAAD,CACE,UAAU,mBACV,KAAK,QACL,GAAI,EAAE,KACN,MAAO,EAAE,KACT,QAAS,IAAU,EAAE,KACrB,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,iCAExC,QAAD,CAAO,UAAU,mBAAmB,QAAS,EAAE,MAC5C,EAAE,yCASd,QAAD,CACE,KAAM,EACN,QACA,QACA,YACA,WACA,YAAa,EACb,SAAU,GAAK,EAAe,EAAE,OAAO,UAK7C,EAAqB,YAAc,4BCzHtB,GAA8C,CACzD,WAAY,EACZ,UAAW,EACX,YAAa,GAGF,EAAkD,CAC7D,SAAU,2BACV,QAAS,yBACT,WAAY,2BACZ,UAAW,2BACX,UAAW,2BACX,SAAU,2BACV,YAAa,wBACb,WAAY,wBACZ,YAAa,6BACb,OAAQ,6BACR,UAAW,6BACX,MAAO,+BACP,YAAa"}

package/dist/index.es.js

@@ -1,4 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import React, { forwardRef, useRef, useEffect } from "react";
+import { ValueSelector } from "react-querybuilder";
 const BootstrapDragHandle = forwardRef(({ className, title }, dragRef) => /* @__PURE__ */ React.createElement("span", {
   ref: dragRef,
   className,
@@ -32,30 +64,31 @@ const BootstrapNotToggle = ({
   }, label));
 };
 BootstrapNotToggle.displayName = "BootstrapNotToggle";
-const isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && "options" in arr[0];
-const toOptions = (arr) => isOptionGroupArray(arr) ? arr.map((og) => /* @__PURE__ */ React.createElement("optgroup", {
-  key: og.label,
-  label: og.label
-}, og.options.map((opt) => /* @__PURE__ */ React.createElement("option", {
-  key: opt.name,
-  value: opt.name
-}, opt.label)))) : Array.isArray(arr) ? arr.map((opt) => /* @__PURE__ */ React.createElement("option", {
-  key: opt.name,
-  value: opt.name
-}, opt.label)) : null;
-const BootstrapValueEditor = ({
-  fieldData,
-  operator,
-  value,
-  handleOnChange,
-  title,
-  className,
-  type,
-  inputType,
-  values,
-  disabled
-}) => {
-  var _a;
+const BootstrapValueEditor = (_a) => {
+  var _b = _a, {
+    fieldData,
+    operator,
+    value,
+    handleOnChange,
+    title,
+    className,
+    type,
+    inputType,
+    values,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "fieldData",
+    "operator",
+    "value",
+    "handleOnChange",
+    "title",
+    "className",
+    "type",
+    "inputType",
+    "values",
+    "disabled"
+  ]);
+  var _a2;
   useEffect(() => {
     if (inputType === "number" && !["between", "notBetween", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
       handleOnChange("");
@@ -64,17 +97,40 @@ const BootstrapValueEditor = ({
   if (operator === "null" || operator === "notNull") {
     return null;
   }
-  const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
+  const placeHolderText = (_a2 = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a2 : "";
   const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
   switch (type) {
     case "select":
-      return /* @__PURE__ */ React.createElement("select", {
+    case "multiselect":
+      return /* @__PURE__ */ React.createElement(ValueSelector, __spreadProps(__spreadValues({}, props), {
         className: `${className} form-select form-select-sm`,
         title,
-        onChange: (e) => handleOnChange(e.target.value),
+        handleOnChange,
+        value,
+        disabled,
+        multiple: type === "multiselect",
+        options: values
+      }));
+    case "textarea":
+      return /* @__PURE__ */ React.createElement("textarea", {
         value,
-        disabled
-      }, toOptions(values));
+        title,
+        className,
+        disabled,
+        placeholder: placeHolderText,
+        onChange: (e) => handleOnChange(e.target.value)
+      });
+    case "switch":
+      return /* @__PURE__ */ React.createElement("span", {
+        className: `custom-control custom-switch ${className}`
+      }, /* @__PURE__ */ React.createElement("input", {
+        type: "checkbox",
+        className: `form-check-input custom-control-input`,
+        title,
+        disabled,
+        onChange: (e) => handleOnChange(e.target.checked),
+        checked: !!value
+      }));
     case "checkbox":
       return /* @__PURE__ */ React.createElement("input", {
         type: "checkbox",
@@ -102,17 +158,37 @@ const BootstrapValueEditor = ({
         className: "form-check-label",
         htmlFor: v.name
       }, v.label))));
-    default:
-      return /* @__PURE__ */ React.createElement("input", {
-        type: inputTypeCoerced,
-        value,
-        title,
-        className,
-        disabled,
-        placeholder: placeHolderText,
-        onChange: (e) => handleOnChange(e.target.value)
-      });
   }
+  return /* @__PURE__ */ React.createElement("input", {
+    type: inputTypeCoerced,
+    value,
+    title,
+    className,
+    disabled,
+    placeholder: placeHolderText,
+    onChange: (e) => handleOnChange(e.target.value)
+  });
+};
+BootstrapValueEditor.displayName = "BootstrapValueEditor";
+const bootstrapControlElements = {
+  dragHandle: BootstrapDragHandle,
+  notToggle: BootstrapNotToggle,
+  valueEditor: BootstrapValueEditor
+};
+const bootstrapControlClassnames = {
+  addGroup: "btn btn-secondary btn-sm",
+  addRule: "btn btn-primary btn-sm",
+  cloneGroup: "btn btn-secondary btn-sm",
+  cloneRule: "btn btn-secondary btn-sm",
+  lockGroup: "btn btn-secondary btn-sm",
+  lockRule: "btn btn-secondary btn-sm",
+  removeGroup: "btn btn-danger btn-sm",
+  removeRule: "btn btn-danger btn-sm",
+  combinators: "form-select form-select-sm",
+  fields: "form-select form-select-sm",
+  operators: "form-select form-select-sm",
+  value: "form-control form-control-sm",
+  valueSource: "form-select form-select-sm"
 };
-BootstrapValueEditor.displayName = "ValueEditor";
-export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };
+export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor, bootstrapControlClassnames, bootstrapControlElements };
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/BootstrapDragHandle.tsx","../src/BootstrapNotToggle.tsx","../src/BootstrapValueEditor.tsx","../src/index.ts"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { DragHandleProps } from 'react-querybuilder';\n\nexport const BootstrapDragHandle = forwardRef<HTMLSpanElement, DragHandleProps>(\n  ({ className, title }, dragRef) => (\n    <span ref={dragRef} className={className} title={title}>\n      <i className=\"bi bi-grip-vertical\"></i>\n    </span>\n  )\n);\n\nBootstrapDragHandle.displayName = 'BootstrapDragHandle';\n","import { useRef } from 'react';\nimport type { NotToggleProps } from 'react-querybuilder';\n\nexport const BootstrapNotToggle = ({\n  className,\n  handleOnChange,\n  title,\n  label,\n  checked,\n  disabled,\n}: NotToggleProps) => {\n  const id = useRef(`notToggle-${Math.random()}`);\n\n  return (\n    <div className={`form-check-inline form-switch ${className}`}>\n      <input\n        id={id.current}\n        className=\"form-check-input\"\n        type=\"checkbox\"\n        onChange={e => handleOnChange(e.target.checked)}\n        checked={!!checked}\n        disabled={disabled}\n      />\n      <label title={title} htmlFor={id.current} className=\"form-check-label\">\n        {label}\n      </label>\n    </div>\n  );\n};\n\nBootstrapNotToggle.displayName = 'BootstrapNotToggle';\n","import { useEffect } from 'react';\nimport { ValueEditorProps, ValueSelector } from 'react-querybuilder';\n\nexport const BootstrapValueEditor = ({\n  fieldData,\n  operator,\n  value,\n  handleOnChange,\n  title,\n  className,\n  type,\n  inputType,\n  values,\n  disabled,\n  ...props\n}: ValueEditorProps) => {\n  useEffect(() => {\n    if (\n      inputType === 'number' &&\n      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&\n      typeof value === 'string' &&\n      value.includes(',')\n    ) {\n      handleOnChange('');\n    }\n  }, [inputType, operator, value, handleOnChange]);\n\n  if (operator === 'null' || operator === 'notNull') {\n    return null;\n  }\n\n  const placeHolderText = fieldData?.placeholder ?? '';\n  const inputTypeCoerced = ['between', 'notBetween', 'in', 'notIn'].includes(operator)\n    ? 'text'\n    : inputType || 'text';\n\n  switch (type) {\n    case 'select':\n    case 'multiselect':\n      return (\n        <ValueSelector\n          {...props}\n          className={`${className} form-select form-select-sm`}\n          title={title}\n          handleOnChange={handleOnChange}\n          value={value}\n          disabled={disabled}\n          multiple={type === 'multiselect'}\n          options={values!}\n        />\n      );\n\n    case 'textarea':\n      return (\n        <textarea\n          value={value}\n          title={title}\n          className={className}\n          disabled={disabled}\n          placeholder={placeHolderText}\n          onChange={e => handleOnChange(e.target.value)}\n        />\n      );\n\n    case 'switch':\n      return (\n        <span className={`custom-control custom-switch ${className}`}>\n          <input\n            type=\"checkbox\"\n            className={`form-check-input custom-control-input`}\n            title={title}\n            disabled={disabled}\n            onChange={e => handleOnChange(e.target.checked)}\n            checked={!!value}\n          />\n        </span>\n      );\n\n    case 'checkbox':\n      return (\n        <input\n          type=\"checkbox\"\n          className={`form-check-input ${className}`}\n          title={title}\n          disabled={disabled}\n          onChange={e => handleOnChange(e.target.checked)}\n          checked={!!value}\n        />\n      );\n\n    case 'radio':\n      return (\n        <span title={title}>\n          {values!.map(v => (\n            <div key={v.name} className=\"form-check form-check-inline\">\n              <input\n                className=\"form-check-input\"\n                type=\"radio\"\n                id={v.name}\n                value={v.name}\n                checked={value === v.name}\n                disabled={disabled}\n                onChange={e => handleOnChange(e.target.value)}\n              />\n              <label className=\"form-check-label\" htmlFor={v.name}>\n                {v.label}\n              </label>\n            </div>\n          ))}\n        </span>\n      );\n  }\n\n  return (\n    <input\n      type={inputTypeCoerced}\n      value={value}\n      title={title}\n      className={className}\n      disabled={disabled}\n      placeholder={placeHolderText}\n      onChange={e => handleOnChange(e.target.value)}\n    />\n  );\n};\n\nBootstrapValueEditor.displayName = 'BootstrapValueEditor';\n","import type { Classnames, Controls } from 'react-querybuilder';\nimport { BootstrapDragHandle } from './BootstrapDragHandle';\nimport { BootstrapNotToggle } from './BootstrapNotToggle';\nimport { BootstrapValueEditor } from './BootstrapValueEditor';\n\nexport const bootstrapControlElements: Partial<Controls> = {\n  dragHandle: BootstrapDragHandle,\n  notToggle: BootstrapNotToggle,\n  valueEditor: BootstrapValueEditor,\n};\n\nexport const bootstrapControlClassnames: Partial<Classnames> = {\n  addGroup: 'btn btn-secondary btn-sm',\n  addRule: 'btn btn-primary btn-sm',\n  cloneGroup: 'btn btn-secondary btn-sm',\n  cloneRule: 'btn btn-secondary btn-sm',\n  lockGroup: 'btn btn-secondary btn-sm',\n  lockRule: 'btn btn-secondary btn-sm',\n  removeGroup: 'btn btn-danger btn-sm',\n  removeRule: 'btn btn-danger btn-sm',\n  combinators: 'form-select form-select-sm',\n  fields: 'form-select form-select-sm',\n  operators: 'form-select form-select-sm',\n  value: 'form-control form-control-sm',\n  valueSource: 'form-select form-select-sm',\n};\n\nexport { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };\n"],"names":[],"mappings":"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"}

package/dist/types/BootstrapDragHandle.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import type { DragHandleProps } from 'react-querybuilder';
-declare const BootstrapDragHandle: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default BootstrapDragHandle;
+export declare const BootstrapDragHandle: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/BootstrapValueEditor.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { ValueEditorProps } from 'react-querybuilder';
+import { ValueEditorProps } from 'react-querybuilder';
 export declare const BootstrapValueEditor: {
-    ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values, disabled, }: ValueEditorProps): JSX.Element | null;
+    ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values, disabled, ...props }: ValueEditorProps): JSX.Element | null;
     displayName: string;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,7 @@
-export { default as BootstrapDragHandle } from './BootstrapDragHandle';
-export { BootstrapNotToggle } from './BootstrapNotToggle';
-export { BootstrapValueEditor } from './BootstrapValueEditor';
+import type { Classnames, Controls } from 'react-querybuilder';
+import { BootstrapDragHandle } from './BootstrapDragHandle';
+import { BootstrapNotToggle } from './BootstrapNotToggle';
+import { BootstrapValueEditor } from './BootstrapValueEditor';
+export declare const bootstrapControlElements: Partial<Controls>;
+export declare const bootstrapControlClassnames: Partial<Classnames>;
+export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-querybuilder/bootstrap",
   "description": "Custom Bootstrap components for react-querybuilder",
-  "version": "4.1.3",
+  "version": "4.2.2",
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +13,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-querybuilder/react-querybuilder"
+    "url": "https://github.com/react-querybuilder/react-querybuilder.git",
+    "directory": "packages/bootstrap"
   },
   "license": "MIT",
   "homepage": "https://react-querybuilder.js.org/",
@@ -26,7 +27,7 @@
     "@types/react": "^17.0.0",
     "bootstrap-icons": "^1.7.0",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.1.3",
+    "react-querybuilder": "^4.2.2",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
@@ -35,5 +36,5 @@
     "react": ">=16.8.0",
     "react-querybuilder": ">=4"
   },
-  "gitHead": "2d472fc8c1b9fea5d209135ee0d2774120f566da"
+  "gitHead": "7cbb02520fd4f2839115c607303090bb31bfbf54"
 }

package/dist/types/utils.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { Field, NameLabelPair, OptionGroup } from 'react-querybuilder';
-export declare const isOptionGroupArray: (arr: Field['values']) => arr is OptionGroup<NameLabelPair>[];
-export declare const toOptions: (arr?: NameLabelPair[] | OptionGroup<NameLabelPair>[] | undefined) => JSX.Element[] | null;