@react-querybuilder/bootstrap 4.0.0-beta.6 → 4.1.0

package/README.md

@@ -1,3 +1,77 @@
 ## @react-querybuilder/bootstrap
 
-Custom [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+Official [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+
+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.
+
+## Installation
+
+```bash
+npm i --save react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
+# OR
+yarn add react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
+```
+
+## Usage
+
+```tsx
+import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
+import {
+  BootstrapDragHandle,
+  BootstrapNotToggle,
+  BootstrapValueEditor
+} from '@react-querybuilder/bootstrap';
+
+const fields = [
+  { name: 'firstName', label: 'First Name' },
+  { name: 'lastName', label: 'Last Name' }
+];
+
+const App = () => {
+  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
+
+  return (
+    <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
+      }}
+    />
+  );
+};
+```
+
+To apply the Bootstrap styles, you can add the following SCSS to your app:
+
+```scss
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/dropdown';
+
+.form-control,
+.form-select {
+  display: inline-block;
+  width: auto;
+}
+```

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var u=require("react");function b(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var t=b(u),E=u.forwardRef(function({className:l,title:c},r){return t.default.createElement("span",{ref:r,className:l,title:c},t.default.createElement("i",{className:"bi bi-grip-vertical"}))});const i=({className:a,handleOnChange:l,title:c,label:r,checked:o})=>{const[n]=u.useState(`notToggle-${Math.random()}`);return t.default.createElement("div",{className:`form-check-inline form-switch ${a}`},t.default.createElement("input",{id:n,className:"form-check-input",type:"checkbox",onChange:s=>l(s.target.checked),checked:!!o}),t.default.createElement("label",{title:c,htmlFor:n,className:"form-check-label"},r))};i.displayName="BootstrapNotToggle";const p=({fieldData:a,operator:l,value:c,handleOnChange:r,title:o,className:n,type:s,inputType:m,values:d})=>{var f;if(u.useEffect(()=>{m==="number"&&!["between","notBetween"].includes(l)&&typeof c=="string"&&c.includes(",")&&r("")},[m,l,c,r]),l==="null"||l==="notNull")return null;const g=(f=a==null?void 0:a.placeholder)!=null?f:"",h=["between","notBetween"].includes(l)?"text":m||"text";switch(s){case"select":return t.default.createElement("select",{className:`${n} form-select form-select-sm`,title:o,onChange:e=>r(e.target.value),value:c},d.map(e=>t.default.createElement("option",{key:e.name,value:e.name},e.label)));case"checkbox":return t.default.createElement("input",{type:"checkbox",className:`form-check-input ${n}`,title:o,onChange:e=>r(e.target.checked),checked:!!c});case"radio":return t.default.createElement("span",{title:o},d.map(e=>t.default.createElement("div",{key:e.name,className:"form-check form-check-inline"},t.default.createElement("input",{className:"form-check-input",type:"radio",id:e.name,value:e.name,checked:c===e.name,onChange:k=>r(k.target.value)}),t.default.createElement("label",{className:"form-check-label",htmlFor:e.name},e.label))));default:return t.default.createElement("input",{type:h,value:c,title:o,className:n,placeholder:g,onChange:e=>r(e.target.value)})}};p.displayName="ValueEditor";exports.BootstrapDragHandle=E;exports.BootstrapNotToggle=i;exports.BootstrapValueEditor=p;
+"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;

package/dist/index.es.js

@@ -1,36 +1,48 @@
-import React, { forwardRef, useState, useEffect } from "react";
-var BootstrapDragHandle = forwardRef(function BootstrapDragHandle2({ className, title }, dragRef) {
-  return /* @__PURE__ */ React.createElement("span", {
-    ref: dragRef,
-    className,
-    title
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "bi bi-grip-vertical"
-  }));
-});
+import React, { forwardRef, useRef, useEffect } from "react";
+const BootstrapDragHandle = forwardRef(({ className, title }, dragRef) => /* @__PURE__ */ React.createElement("span", {
+  ref: dragRef,
+  className,
+  title
+}, /* @__PURE__ */ React.createElement("i", {
+  className: "bi bi-grip-vertical"
+})));
+BootstrapDragHandle.displayName = "BootstrapDragHandle";
 const BootstrapNotToggle = ({
   className,
   handleOnChange,
   title,
   label,
-  checked
+  checked,
+  disabled
 }) => {
-  const [id] = useState(`notToggle-${Math.random()}`);
+  const id = useRef(`notToggle-${Math.random()}`);
   return /* @__PURE__ */ React.createElement("div", {
     className: `form-check-inline form-switch ${className}`
   }, /* @__PURE__ */ React.createElement("input", {
-    id,
+    id: id.current,
     className: "form-check-input",
     type: "checkbox",
     onChange: (e) => handleOnChange(e.target.checked),
-    checked: !!checked
+    checked: !!checked,
+    disabled
   }), /* @__PURE__ */ React.createElement("label", {
     title,
-    htmlFor: id,
+    htmlFor: id.current,
     className: "form-check-label"
   }, 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,
@@ -40,11 +52,12 @@ const BootstrapValueEditor = ({
   className,
   type,
   inputType,
-  values
+  values,
+  disabled
 }) => {
   var _a;
   useEffect(() => {
-    if (inputType === "number" && !["between", "notBetween"].includes(operator) && typeof value === "string" && value.includes(",")) {
+    if (inputType === "number" && !["between", "notBetween", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
       handleOnChange("");
     }
   }, [inputType, operator, value, handleOnChange]);
@@ -52,23 +65,22 @@ const BootstrapValueEditor = ({
     return null;
   }
   const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
-  const inputTypeCoerced = ["between", "notBetween"].includes(operator) ? "text" : inputType || "text";
+  const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
   switch (type) {
     case "select":
       return /* @__PURE__ */ React.createElement("select", {
         className: `${className} form-select form-select-sm`,
         title,
         onChange: (e) => handleOnChange(e.target.value),
-        value
-      }, values.map((v) => /* @__PURE__ */ React.createElement("option", {
-        key: v.name,
-        value: v.name
-      }, v.label)));
+        value,
+        disabled
+      }, toOptions(values));
     case "checkbox":
       return /* @__PURE__ */ React.createElement("input", {
         type: "checkbox",
         className: `form-check-input ${className}`,
         title,
+        disabled,
         onChange: (e) => handleOnChange(e.target.checked),
         checked: !!value
       });
@@ -84,6 +96,7 @@ const BootstrapValueEditor = ({
         id: v.name,
         value: v.name,
         checked: value === v.name,
+        disabled,
         onChange: (e) => handleOnChange(e.target.value)
       }), /* @__PURE__ */ React.createElement("label", {
         className: "form-check-label",
@@ -95,6 +108,7 @@ const BootstrapValueEditor = ({
         value,
         title,
         className,
+        disabled,
         placeholder: placeHolderText,
         onChange: (e) => handleOnChange(e.target.value)
       });

package/dist/types/BootstrapDragHandle.d.ts

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

package/dist/types/BootstrapNotToggle.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { NotToggleProps } from 'react-querybuilder';
-declare const BootstrapNotToggle: {
-    ({ className, handleOnChange, title, label, checked }: NotToggleProps): JSX.Element;
+export declare const BootstrapNotToggle: {
+    ({ className, handleOnChange, title, label, checked, disabled, }: NotToggleProps): JSX.Element;
     displayName: string;
 };
-export default BootstrapNotToggle;

package/dist/types/BootstrapValueEditor.d.ts

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

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { default as BootstrapDragHandle } from './BootstrapDragHandle';
-export { default as BootstrapNotToggle } from './BootstrapNotToggle';
-export { default as BootstrapValueEditor } from './BootstrapValueEditor';
+export { BootstrapNotToggle } from './BootstrapNotToggle';
+export { BootstrapValueEditor } from './BootstrapValueEditor';

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+/// <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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-querybuilder/bootstrap",
   "description": "Custom Bootstrap components for react-querybuilder",
-  "version": "4.0.0-beta.6",
+  "version": "4.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,16 +21,18 @@
     "build": "vite build && tsc --emitDeclarationOnly"
   },
   "devDependencies": {
+    "@react-querybuilder/compat": "^4.1.0",
     "@types/react": "^17.0.0",
     "bootstrap-icons": "^1.7.0",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.6",
+    "react-querybuilder": "^4.1.0",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
+    "bootstrap": ">=5",
     "bootstrap-icons": ">=1.7.0",
     "react": ">=16.8.0",
-    "react-querybuilder": "4.0.0-beta.5"
+    "react-querybuilder": ">=4"
   },
-  "gitHead": "484708b1405f14cafef165248e258e4ff679da6b"
+  "gitHead": "b73987bada7b64b5df892f92ceb8691a488d096c"
 }