@react-querybuilder/bootstrap 4.0.0-beta.8 → 4.1.2

package/dist/index.cjs.js

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

@@ -32,6 +32,17 @@ 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,
@@ -63,10 +74,7 @@ const BootstrapValueEditor = ({
         onChange: (e) => handleOnChange(e.target.value),
         value,
         disabled
-      }, values.map((v) => /* @__PURE__ */ React.createElement("option", {
-        key: v.name,
-        value: v.name
-      }, v.label)));
+      }, toOptions(values));
     case "checkbox":
       return /* @__PURE__ */ React.createElement("input", {
         type: "checkbox",

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.8",
+  "version": "4.1.2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,11 @@
     "build": "vite build && tsc --emitDeclarationOnly"
   },
   "devDependencies": {
-    "@react-querybuilder/compat": "^4.0.0-beta.8",
+    "@react-querybuilder/compat": "^4.1.2",
     "@types/react": "^17.0.0",
     "bootstrap-icons": "^1.7.0",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.8",
+    "react-querybuilder": "^4.1.2",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "react": ">=16.8.0",
     "react-querybuilder": ">=4"
   },
-  "gitHead": "79d0e66c09b058779e90dd5320f386e0e9fdfcd5"
+  "gitHead": "f630509a79b242d519efdc23fc5711b9f50384a7"
 }