@react-querybuilder/bootstrap 4.0.0-beta.7 → 4.1.1

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 f=({className:a,handleOnChange:l,title:c,label:r,checked:n})=>{const[o]=u.useState(`notToggle-${Math.random()}`);return t.default.createElement("div",{className:`form-check-inline form-switch ${a}`},t.default.createElement("input",{id:o,className:"form-check-input",type:"checkbox",onChange:s=>l(s.target.checked),checked:!!n}),t.default.createElement("label",{title:c,htmlFor:o,className:"form-check-label"},r))};f.displayName="BootstrapNotToggle";const p=({fieldData:a,operator:l,value:c,handleOnChange:r,title:n,className:o,type:s,inputType:m,values:d})=>{var i;if(u.useEffect(()=>{m==="number"&&!["between","notBetween","in","notIn"].includes(l)&&typeof c=="string"&&c.includes(",")&&r("")},[m,l,c,r]),l==="null"||l==="notNull")return null;const g=(i=a==null?void 0:a.placeholder)!=null?i:"",h=["between","notBetween","in","notIn"].includes(l)?"text":m||"text";switch(s){case"select":return t.default.createElement("select",{className:`${o} form-select form-select-sm`,title:n,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 ${o}`,title:n,onChange:e=>r(e.target.checked),checked:!!c});case"radio":return t.default.createElement("span",{title:n},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:n,className:o,placeholder:g,onChange:e=>r(e.target.value)})}};p.displayName="ValueEditor";exports.BootstrapDragHandle=E;exports.BootstrapNotToggle=f;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,7 +52,8 @@ const BootstrapValueEditor = ({
   className,
   type,
   inputType,
-  values
+  values,
+  disabled
 }) => {
   var _a;
   useEffect(() => {
@@ -59,16 +72,15 @@ const BootstrapValueEditor = ({
         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.7",
+  "version": "4.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,16 +21,18 @@
     "build": "vite build && tsc --emitDeclarationOnly"
   },
   "devDependencies": {
+    "@react-querybuilder/compat": "^4.1.1",
     "@types/react": "^17.0.0",
     "bootstrap-icons": "^1.7.0",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.7",
+    "react-querybuilder": "^4.1.1",
     "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": "f79e9f52a332794898b342af701ce81f1eebef14"
+  "gitHead": "f482fa65b4808a573ece7d2eeeb5831f69df58f2"
 }