@react-querybuilder/bulma - npm Package Compare versions

Comparing version 7.8.0-alpha.0 to 8.0.0-alpha.0

dist/cjs/react-querybuilder_bulma.cjs.development.js

@@ -44,111 +44,190 @@ "use strict";
 // src/BulmaNotToggle.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var BulmaNotToggle = function BulmaNotToggle2(_ref) {
+  var className = _ref.className, handleOnChange = _ref.handleOnChange, label = _ref.label, checked = _ref.checked, title = _ref.title, disabled = _ref.disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "".concat(className, " checkbox"), title, children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", disabled, checked, onChange: function onChange(e) {
+    return handleOnChange(e.target.checked);
+  } }), label] });
+};
+
+// ../../utils/react-compiler/react-compiler-runtime.ts
 var React = __toESM(require("react"));
-var BulmaNotToggle = ({
-  className,
-  handleOnChange,
-  label,
-  checked,
-  title,
-  disabled
-}) => /* @__PURE__ */ React.createElement("label", { className: `${className} checkbox`, title }, /* @__PURE__ */ React.createElement(
-  "input",
-  {
-    type: "checkbox",
-    disabled,
-    checked,
-    onChange: (e) => handleOnChange(e.target.checked)
-  }
-), label);
+var $empty = Symbol["for"]("react.memo_cache_sentinel");
+function c(size) {
+  return React.useMemo(
+    function() {
+      var $ = Array.from({ length: size });
+      for (var ii = 0; ii < size; ii++) {
+        $[ii] = $empty;
+      }
+      $[$empty] = true;
+      return $;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}
 
 // src/BulmaValueEditor.tsx
-var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_react_querybuilder = require("react-querybuilder");
-var BulmaValueEditor = (props) => {
-  const { valueAsArray, multiValueHandler } = (0, import_react_querybuilder.useValueEditor)({
-    handleOnChange: props.handleOnChange,
-    inputType: props.inputType,
-    operator: props.operator,
-    value: props.value,
-    type: props.type,
-    listsAsArrays: props.listsAsArrays,
-    parseNumbers: props.parseNumbers,
-    values: props.values
-  });
-  const { selectorComponent: SelectorComponent = props.schema.controls.valueSelector } = props;
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
+    return typeof o2;
+  } : function(o2) {
+    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
+  }, _typeof(o);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var BulmaValueEditor = function BulmaValueEditor2(props) {
+  var $ = c(22);
+  var _useValueEditor = (0, import_react_querybuilder.useValueEditor)(props), valueListItemClassName = _useValueEditor.valueListItemClassName;
   if (props.operator === "null" || props.operator === "notNull") {
     return null;
   }
-  const placeHolderText = props.fieldData?.placeholder ?? "";
-  const { values = [] } = props;
-  if ((props.operator === "between" || props.operator === "notBetween") && (props.type === "select" || props.type === "text")) {
-    const editors = ["from", "to"].map((key, i) => {
-      if (props.type === "text") {
-        return /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            key,
-            type: props.inputType || "text",
-            placeholder: placeHolderText,
-            value: valueAsArray[i] ?? "",
-            className: `${import_react_querybuilder.standardClassnames.valueListItem} input`,
-            disabled: props.disabled,
-            onChange: (e) => multiValueHandler(e.target.value, i)
-          }
-        );
-      }
-      return /* @__PURE__ */ React2.createElement(
-        SelectorComponent,
-        {
-          key,
-          ...props,
-          className: import_react_querybuilder.standardClassnames.valueListItem,
-          handleOnChange: (v) => multiValueHandler(v, i),
-          disabled: props.disabled,
-          value: valueAsArray[i] ?? (0, import_react_querybuilder.getFirstOption)(values),
-          options: values,
-          listsAsArrays: props.listsAsArrays
-        }
-      );
-    });
-    return /* @__PURE__ */ React2.createElement("span", { "data-testid": props.testID, className: props.className, title: props.title }, editors[0], props.separator, editors[1]);
+  var t0 = props.values;
+  var t1;
+  if ($[0] !== t0) {
+    t1 = t0 === void 0 ? [] : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
   }
+  var values = t1;
+  if ((props.operator === "between" || props.operator === "notBetween") && props.type === "text") {
+    var _t = "".concat(valueListItemClassName, " input");
+    var _t2;
+    if ($[2] !== props || $[3] !== _t) {
+      _t2 = (0, import_jsx_runtime2.jsx)(import_react_querybuilder.ValueEditor, _objectSpread(_objectSpread({}, props), {}, { skipHook: true, schema: _objectSpread(_objectSpread({}, props.schema), {}, { classNames: _objectSpread(_objectSpread({}, props.schema.classNames), {}, { valueListItem: _t }) }) }));
+      $[2] = props;
+      $[3] = _t;
+      $[4] = _t2;
+    } else {
+      _t2 = $[4];
+    }
+    return _t2;
+  }
   switch (props.type) {
-    case "select":
-    case "multiselect":
-      return /* @__PURE__ */ React2.createElement(
-        SelectorComponent,
-        {
-          ...props,
-          title: props.title,
-          className: props.className,
-          handleOnChange: props.handleOnChange,
-          options: values,
-          value: props.value,
-          disabled: props.disabled,
-          multiple: props.type === "multiselect",
-          listsAsArrays: props.listsAsArrays
+    case "select": {
+    }
+    case "multiselect": {
+      var _t3;
+      if ($[5] !== props) {
+        _t3 = (0, import_jsx_runtime2.jsx)(import_react_querybuilder.ValueEditor, _objectSpread(_objectSpread({}, props), {}, { skipHook: true }));
+        $[5] = props;
+        $[6] = _t3;
+      } else {
+        _t3 = $[6];
+      }
+      return _t3;
+    }
+    case "textarea": {
+      var _t4 = "".concat(props.className, " control");
+      var _t5;
+      if ($[7] !== props || $[8] !== _t4) {
+        _t5 = (0, import_jsx_runtime2.jsx)("div", { className: _t4, children: (0, import_jsx_runtime2.jsx)(import_react_querybuilder.ValueEditor, _objectSpread(_objectSpread({}, props), {}, { skipHook: true, className: "textarea" })) });
+        $[7] = props;
+        $[8] = _t4;
+        $[9] = _t5;
+      } else {
+        _t5 = $[9];
+      }
+      return _t5;
+    }
+    case "switch": {
+    }
+    case "checkbox": {
+      var _t6 = "".concat(props.className, " checkbox");
+      var _t7;
+      if ($[10] !== props || $[11] !== _t6) {
+        _t7 = (0, import_jsx_runtime2.jsx)("label", { title: props.title, className: _t6, children: (0, import_jsx_runtime2.jsx)(import_react_querybuilder.ValueEditor, _objectSpread(_objectSpread({}, props), {}, { skipHook: true, title: "", className: "" })) });
+        $[10] = props;
+        $[11] = _t6;
+        $[12] = _t7;
+      } else {
+        _t7 = $[12];
+      }
+      return _t7;
+    }
+    case "radio": {
+      var _t8 = "".concat(props.className, " control");
+      var _t9;
+      if ($[13] !== props || $[14] !== values || $[15] !== _t8) {
+        var t4;
+        if ($[17] !== props) {
+          t4 = function t42(v) {
+            return (0, import_jsx_runtime2.jsxs)("label", { className: "radio", children: [(0, import_jsx_runtime2.jsx)("input", { type: "radio", value: v.name, checked: props.value === v.name, onChange: function onChange() {
+              return props.handleOnChange(v.name);
+            }, disabled: props.disabled }), v.label] }, v.name);
+          };
+          $[17] = props;
+          $[18] = t4;
+        } else {
+          t4 = $[18];
         }
-      );
-    case "textarea":
-      return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control` }, /* @__PURE__ */ React2.createElement(import_react_querybuilder.ValueEditor, { skipHook: true, ...props, className: "textarea" }));
-    case "switch":
-    case "checkbox":
-      return /* @__PURE__ */ React2.createElement("label", { title: props.title, className: `${props.className} checkbox` }, /* @__PURE__ */ React2.createElement(import_react_querybuilder.ValueEditor, { skipHook: true, ...props, title: "", className: "" }));
-    case "radio":
-      return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control`, title: props.title }, values.map((v) => /* @__PURE__ */ React2.createElement("label", { key: v.name, className: "radio" }, /* @__PURE__ */ React2.createElement(
-        "input",
-        {
-          type: "radio",
-          value: v.name,
-          checked: props.value === v.name,
-          onChange: () => props.handleOnChange(v.name),
-          disabled: props.disabled
-        }
-      ), v.label)));
+        _t9 = (0, import_jsx_runtime2.jsx)("div", { className: _t8, title: props.title, children: values.map(t4) });
+        $[13] = props;
+        $[14] = values;
+        $[15] = _t8;
+        $[16] = _t9;
+      } else {
+        _t9 = $[16];
+      }
+      return _t9;
+    }
   }
-  return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control` }, /* @__PURE__ */ React2.createElement(import_react_querybuilder.ValueEditor, { skipHook: true, ...props, disabled: props.disabled, className: "input" }));
+  var t2 = "".concat(props.className, " control");
+  var t3;
+  if ($[19] !== props || $[20] !== t2) {
+    t3 = (0, import_jsx_runtime2.jsx)("div", { className: t2, children: (0, import_jsx_runtime2.jsx)(import_react_querybuilder.ValueEditor, _objectSpread(_objectSpread({}, props), {}, { skipHook: true, disabled: props.disabled, className: "input" })) });
+    $[19] = props;
+    $[20] = t2;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  return t3;
 };
 
 // src/BulmaValueSelector.tsx
-var React3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var import_react_querybuilder3 = require("react-querybuilder");
@@ -160,39 +239,49 @@
 // src/BulmaValueSelector.tsx
-var BulmaValueSelector = ({
-  className,
-  handleOnChange,
-  options,
-  value,
-  title,
-  disabled,
-  multiple,
-  listsAsArrays
-}) => {
-  const { onChange, val } = (0, import_react_querybuilder3.useValueSelector)({ handleOnChange, listsAsArrays, multiple, value });
-  const selectElementChangeHandler = (0, import_react_querybuilder3.useSelectElementChangeHandler)({ multiple, onChange });
-  return /* @__PURE__ */ React3.createElement("div", { title, className: `${className} select${multiple ? " is-multiple" : ""}` }, /* @__PURE__ */ React3.createElement(
-    "select",
-    {
-      value: val,
-      multiple,
-      disabled,
-      onChange: selectElementChangeHandler
-    },
-    (0, import_react_querybuilder2.toOptions)(options)
-  ));
+var BulmaValueSelector = function BulmaValueSelector2(t0) {
+  var $ = c(16);
+  var className = t0.className, handleOnChange = t0.handleOnChange, options = t0.options, value = t0.value, title = t0.title, disabled = t0.disabled, multiple = t0.multiple, listsAsArrays = t0.listsAsArrays;
+  var t1;
+  if ($[0] !== handleOnChange || $[1] !== listsAsArrays || $[2] !== multiple || $[3] !== value) {
+    t1 = { handleOnChange, listsAsArrays, multiple, value };
+    $[0] = handleOnChange;
+    $[1] = listsAsArrays;
+    $[2] = multiple;
+    $[3] = value;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  var _useValueSelector = (0, import_react_querybuilder3.useValueSelector)(t1), onChange = _useValueSelector.onChange, val = _useValueSelector.val;
+  var t2;
+  if ($[5] !== multiple || $[6] !== onChange) {
+    t2 = { multiple, onChange };
+    $[5] = multiple;
+    $[6] = onChange;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  var selectElementChangeHandler = (0, import_react_querybuilder3.useSelectElementChangeHandler)(t2);
+  var t3 = "".concat(className, " select").concat(multiple ? " is-multiple" : "");
+  var t4;
+  if ($[8] !== options || $[9] !== val || $[10] !== multiple || $[11] !== disabled || $[12] !== selectElementChangeHandler || $[13] !== title || $[14] !== t3) {
+    t4 = (0, import_jsx_runtime3.jsx)("div", { title, className: t3, children: (0, import_jsx_runtime3.jsx)("select", { value: val, multiple, disabled, onChange: selectElementChangeHandler, children: (0, import_react_querybuilder2.toOptions)(options) }) });
+    $[8] = options;
+    $[9] = val;
+    $[10] = multiple;
+    $[11] = disabled;
+    $[12] = selectElementChangeHandler;
+    $[13] = title;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
 };
 
 // src/index.ts
-var bulmaControlClassnames = {
-  actionElement: "button"
-};
-var bulmaControlElements = {
-  notToggle: BulmaNotToggle,
-  valueEditor: BulmaValueEditor,
-  valueSelector: BulmaValueSelector
-};
-var QueryBuilderBulma = (0, import_react_querybuilder4.getCompatContextProvider)({
-  controlElements: bulmaControlElements,
-  controlClassnames: bulmaControlClassnames
-});
+var bulmaControlClassnames = { actionElement: "button" };
+var bulmaControlElements = { notToggle: BulmaNotToggle, valueEditor: BulmaValueEditor, valueSelector: BulmaValueSelector };
+var QueryBuilderBulma = (0, import_react_querybuilder4.getCompatContextProvider)({ controlElements: bulmaControlElements, controlClassnames: bulmaControlClassnames });
 // Annotate the CommonJS export names for ESM import in node:
@@ -199,0 +288,0 @@ 0 && (module.exports = {

dist/cjs/react-querybuilder_bulma.cjs.production.js

@@ -1,2 +0,2 @@
-"use strict";var S=Object.create;var d=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},f=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of B(t))!T.call(e,n)&&n!==a&&d(e,n,{get:()=>t[n],enumerable:!(s=V(t,n))||s.enumerable});return e};var h=(e,t,a)=>(a=e!=null?S(O(e)):{},f(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),H=e=>f(d({},"__esModule",{value:!0}),e);var F={};$(F,{BulmaNotToggle:()=>C,BulmaValueEditor:()=>v,BulmaValueSelector:()=>x,QueryBuilderBulma:()=>R,bulmaControlClassnames:()=>k,bulmaControlElements:()=>A});module.exports=H(F);var E=require("react-querybuilder");var g=h(require("react")),C=({className:e,handleOnChange:t,label:a,checked:s,title:n,disabled:i})=>g.createElement("label",{className:`${e} checkbox`,title:n},g.createElement("input",{type:"checkbox",disabled:i,checked:s,onChange:l=>t(l.target.checked)}),a);var o=h(require("react")),r=require("react-querybuilder"),v=e=>{let{valueAsArray:t,multiValueHandler:a}=(0,r.useValueEditor)({handleOnChange:e.handleOnChange,inputType:e.inputType,operator:e.operator,value:e.value,type:e.type,listsAsArrays:e.listsAsArrays,parseNumbers:e.parseNumbers,values:e.values}),{selectorComponent:s=e.schema.controls.valueSelector}=e;if(e.operator==="null"||e.operator==="notNull")return null;let n=e.fieldData?.placeholder??"",{values:i=[]}=e;if((e.operator==="between"||e.operator==="notBetween")&&(e.type==="select"||e.type==="text")){let l=["from","to"].map((u,c)=>e.type==="text"?o.createElement("input",{key:u,type:e.inputType||"text",placeholder:n,value:t[c]??"",className:`${r.standardClassnames.valueListItem} input`,disabled:e.disabled,onChange:m=>a(m.target.value,c)}):o.createElement(s,{key:u,...e,className:r.standardClassnames.valueListItem,handleOnChange:m=>a(m,c),disabled:e.disabled,value:t[c]??(0,r.getFirstOption)(i),options:i,listsAsArrays:e.listsAsArrays}));return o.createElement("span",{"data-testid":e.testID,className:e.className,title:e.title},l[0],e.separator,l[1])}switch(e.type){case"select":case"multiselect":return o.createElement(s,{...e,title:e.title,className:e.className,handleOnChange:e.handleOnChange,options:i,value:e.value,disabled:e.disabled,multiple:e.type==="multiselect",listsAsArrays:e.listsAsArrays});case"textarea":return o.createElement("div",{className:`${e.className} control`},o.createElement(r.ValueEditor,{skipHook:!0,...e,className:"textarea"}));case"switch":case"checkbox":return o.createElement("label",{title:e.title,className:`${e.className} checkbox`},o.createElement(r.ValueEditor,{skipHook:!0,...e,title:"",className:""}));case"radio":return o.createElement("div",{className:`${e.className} control`,title:e.title},i.map(l=>o.createElement("label",{key:l.name,className:"radio"},o.createElement("input",{type:"radio",value:l.name,checked:e.value===l.name,onChange:()=>e.handleOnChange(l.name),disabled:e.disabled}),l.label)))}return o.createElement("div",{className:`${e.className} control`},o.createElement(r.ValueEditor,{skipHook:!0,...e,disabled:e.disabled,className:"input"}))};var N=h(require("react")),b=require("react-querybuilder");var y=require("react-querybuilder");var x=({className:e,handleOnChange:t,options:a,value:s,title:n,disabled:i,multiple:l,listsAsArrays:u})=>{let{onChange:c,val:m}=(0,b.useValueSelector)({handleOnChange:t,listsAsArrays:u,multiple:l,value:s}),P=(0,b.useSelectElementChangeHandler)({multiple:l,onChange:c});return N.createElement("div",{title:n,className:`${e} select${l?" is-multiple":""}`},N.createElement("select",{value:m,multiple:l,disabled:i,onChange:P},(0,y.toOptions)(a)))};var k={actionElement:"button"},A={notToggle:C,valueEditor:v,valueSelector:x},R=(0,E.getCompatContextProvider)({controlElements:A,controlClassnames:k});0&&(module.exports={BulmaNotToggle,BulmaValueEditor,BulmaValueSelector,QueryBuilderBulma,bulmaControlClassnames,bulmaControlElements});
+"use strict";var G=Object.create;var S=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,t)=>{for(var e in t)S(a,e,{get:t[e],enumerable:!0})},T=(a,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Q(t))!F.call(a,n)&&n!==e&&S(a,n,{get:()=>t[n],enumerable:!(r=M(t,n))||r.enumerable});return a};var U=(a,t,e)=>(e=a!=null?G(q(a)):{},T(t||!a||!a.__esModule?S(e,"default",{value:a,enumerable:!0}):e,a)),W=a=>T(S({},"__esModule",{value:!0}),a);var _={};J(_,{BulmaNotToggle:()=>p,BulmaValueEditor:()=>V,BulmaValueSelector:()=>H,QueryBuilderBulma:()=>z,bulmaControlClassnames:()=>K,bulmaControlElements:()=>R});module.exports=W(_);var L=require("react-querybuilder");var E=require("react/jsx-runtime"),p=function(t){var e=t.className,r=t.handleOnChange,n=t.label,c=t.checked,u=t.title,s=t.disabled;return(0,E.jsxs)("label",{className:"".concat(e," checkbox"),title:u,children:[(0,E.jsx)("input",{type:"checkbox",disabled:s,checked:c,onChange:function(l){return r(l.target.checked)}}),n]})};var $=U(require("react")),D=Symbol.for("react.memo_cache_sentinel");function P(a){return $.useMemo(function(){for(var t=Array.from({length:a}),e=0;e<a;e++)t[e]=D;return t[D]=!0,t},[])}var i=require("react/jsx-runtime"),N=require("react-querybuilder");function j(a){"@babel/helpers - typeof";return j=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},j(a)}function I(a,t){var e=Object.keys(a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(a);t&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(a,n).enumerable})),e.push.apply(e,r)}return e}function o(a){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?I(Object(e),!0).forEach(function(r){X(a,r,e[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):I(Object(e)).forEach(function(r){Object.defineProperty(a,r,Object.getOwnPropertyDescriptor(e,r))})}return a}function X(a,t,e){return(t=Y(t))in a?Object.defineProperty(a,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):a[t]=e,a}function Y(a){var t=Z(a,"string");return j(t)=="symbol"?t:t+""}function Z(a,t){if(j(a)!="object"||!a)return a;var e=a[Symbol.toPrimitive];if(e!==void 0){var r=e.call(a,t||"default");if(j(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(a)}var V=function(t){var e=P(22),r=(0,N.useValueEditor)(t),n=r.valueListItemClassName;if(t.operator==="null"||t.operator==="notNull")return null;var c=t.values,u;e[0]!==c?(u=c===void 0?[]:c,e[0]=c,e[1]=u):u=e[1];var s=u;if((t.operator==="between"||t.operator==="notBetween")&&t.type==="text"){var m="".concat(n," input"),l;return e[2]!==t||e[3]!==m?(l=(0,i.jsx)(N.ValueEditor,o(o({},t),{},{skipHook:!0,schema:o(o({},t.schema),{},{classNames:o(o({},t.schema.classNames),{},{valueListItem:m})})})),e[2]=t,e[3]=m,e[4]=l):l=e[4],l}switch(t.type){case"select":case"multiselect":{var f;return e[5]!==t?(f=(0,i.jsx)(N.ValueEditor,o(o({},t),{},{skipHook:!0})),e[5]=t,e[6]=f):f=e[6],f}case"textarea":{var d="".concat(t.className," control"),O;return e[7]!==t||e[8]!==d?(O=(0,i.jsx)("div",{className:d,children:(0,i.jsx)(N.ValueEditor,o(o({},t),{},{skipHook:!0,className:"textarea"}))}),e[7]=t,e[8]=d,e[9]=O):O=e[9],O}case"switch":case"checkbox":{var x="".concat(t.className," checkbox"),v;return e[10]!==t||e[11]!==x?(v=(0,i.jsx)("label",{title:t.title,className:x,children:(0,i.jsx)(N.ValueEditor,o(o({},t),{},{skipHook:!0,title:"",className:""}))}),e[10]=t,e[11]=x,e[12]=v):v=e[12],v}case"radio":{var b="".concat(t.className," control"),h;if(e[13]!==t||e[14]!==s||e[15]!==b){var y;e[17]!==t?(y=function(C){return(0,i.jsxs)("label",{className:"radio",children:[(0,i.jsx)("input",{type:"radio",value:C.name,checked:t.value===C.name,onChange:function(){return t.handleOnChange(C.name)},disabled:t.disabled}),C.label]},C.name)},e[17]=t,e[18]=y):y=e[18],h=(0,i.jsx)("div",{className:b,title:t.title,children:s.map(y)}),e[13]=t,e[14]=s,e[15]=b,e[16]=h}else h=e[16];return h}}var g="".concat(t.className," control"),k;return e[19]!==t||e[20]!==g?(k=(0,i.jsx)("div",{className:g,children:(0,i.jsx)(N.ValueEditor,o(o({},t),{},{skipHook:!0,disabled:t.disabled,className:"input"}))}),e[19]=t,e[20]=g,e[21]=k):k=e[21],k};var A=require("react/jsx-runtime"),B=require("react-querybuilder");var w=require("react-querybuilder");var H=function(t){var e=P(16),r=t.className,n=t.handleOnChange,c=t.options,u=t.value,s=t.title,m=t.disabled,l=t.multiple,f=t.listsAsArrays,d;e[0]!==n||e[1]!==f||e[2]!==l||e[3]!==u?(d={handleOnChange:n,listsAsArrays:f,multiple:l,value:u},e[0]=n,e[1]=f,e[2]=l,e[3]=u,e[4]=d):d=e[4];var O=(0,B.useValueSelector)(d),x=O.onChange,v=O.val,b;e[5]!==l||e[6]!==x?(b={multiple:l,onChange:x},e[5]=l,e[6]=x,e[7]=b):b=e[7];var h=(0,B.useSelectElementChangeHandler)(b),y="".concat(r," select").concat(l?" is-multiple":""),g;return e[8]!==c||e[9]!==v||e[10]!==l||e[11]!==m||e[12]!==h||e[13]!==s||e[14]!==y?(g=(0,A.jsx)("div",{title:s,className:y,children:(0,A.jsx)("select",{value:v,multiple:l,disabled:m,onChange:h,children:(0,w.toOptions)(c)})}),e[8]=c,e[9]=v,e[10]=l,e[11]=m,e[12]=h,e[13]=s,e[14]=y,e[15]=g):g=e[15],g};var K={actionElement:"button"},R={notToggle:p,valueEditor:V,valueSelector:H},z=(0,L.getCompatContextProvider)({controlElements:R,controlClassnames:K});0&&(module.exports={BulmaNotToggle,BulmaValueEditor,BulmaValueSelector,QueryBuilderBulma,bulmaControlClassnames,bulmaControlElements});
 //# sourceMappingURL=react-querybuilder_bulma.cjs.production.js.map

dist/react-querybuilder_bulma.legacy-esm.js

@@ -0,1 +1,77 @@
+// src/index.ts
+import { getCompatContextProvider } from "react-querybuilder";
+
+// src/BulmaNotToggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BulmaNotToggle = function BulmaNotToggle2(_ref) {
+  var className = _ref.className, handleOnChange = _ref.handleOnChange, label = _ref.label, checked = _ref.checked, title = _ref.title, disabled = _ref.disabled;
+  return /* @__PURE__ */ jsxs("label", { className: "".concat(className, " checkbox"), title, children: [/* @__PURE__ */ jsx("input", { type: "checkbox", disabled, checked, onChange: function onChange(e) {
+    return handleOnChange(e.target.checked);
+  } }), label] });
+};
+
+// ../../utils/react-compiler/react-compiler-runtime.ts
+import * as React from "react";
+var $empty = Symbol["for"]("react.memo_cache_sentinel");
+function c(size) {
+  return React.useMemo(
+    function() {
+      var $ = Array.from({ length: size });
+      for (var ii = 0; ii < size; ii++) {
+        $[ii] = $empty;
+      }
+      $[$empty] = true;
+      return $;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}
+
+// src/BulmaValueEditor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useValueEditor, ValueEditor } from "react-querybuilder";
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+      t && (r = t);
+      var _n = 0, F = function F2() {
+      };
+      return { s: F, n: function n() {
+        return _n >= r.length ? { done: true } : { done: false, value: r[_n++] };
+      }, e: function e2(r2) {
+        throw r2;
+      }, f: F };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o, a = true, u = false;
+  return { s: function s() {
+    t = t.call(r);
+  }, n: function n() {
+    var r2 = t.next();
+    return a = r2.done, r2;
+  }, e: function e2(r2) {
+    u = true, o = r2;
+  }, f: function f() {
+    try {
+      a || null == t["return"] || t["return"]();
+    } finally {
+      if (u) throw o;
+    }
+  } };
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
 var __defProp = Object.defineProperty;
@@ -7,135 +83,137 @@ var __defProps = Object.defineProperties;
 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]);
+var __defNormalProp = function __defNormalProp2(obj, key, value) {
+  return key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+};
+var __spreadValues = function __spreadValues2(a, b) {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) {
+    var _iterator = _createForOfIteratorHelper(__getOwnPropSymbols(b)), _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done; ) {
+        var prop = _step.value;
+        if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
+  }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/index.ts
-import { getCompatContextProvider } from "react-querybuilder";
-
-// src/BulmaNotToggle.tsx
-import * as React from "react";
-var BulmaNotToggle = ({
-  className,
-  handleOnChange,
-  label,
-  checked,
-  title,
-  disabled
-}) => /* @__PURE__ */ React.createElement("label", { className: `${className} checkbox`, title }, /* @__PURE__ */ React.createElement(
-  "input",
-  {
-    type: "checkbox",
-    disabled,
-    checked,
-    onChange: (e) => handleOnChange(e.target.checked)
-  }
-), label);
-
-// src/BulmaValueEditor.tsx
-import * as React2 from "react";
-import {
-  getFirstOption,
-  standardClassnames,
-  useValueEditor,
-  ValueEditor
-} from "react-querybuilder";
-var BulmaValueEditor = (props) => {
-  var _a, _b;
-  const { valueAsArray, multiValueHandler } = useValueEditor({
-    handleOnChange: props.handleOnChange,
-    inputType: props.inputType,
-    operator: props.operator,
-    value: props.value,
-    type: props.type,
-    listsAsArrays: props.listsAsArrays,
-    parseNumbers: props.parseNumbers,
-    values: props.values
-  });
-  const { selectorComponent: SelectorComponent = props.schema.controls.valueSelector } = props;
+var __spreadProps = function __spreadProps2(a, b) {
+  return __defProps(a, __getOwnPropDescs(b));
+};
+var BulmaValueEditor = function BulmaValueEditor2(props) {
+  var $ = c(22);
+  var _useValueEditor = useValueEditor(props), valueListItemClassName = _useValueEditor.valueListItemClassName;
   if (props.operator === "null" || props.operator === "notNull") {
     return null;
   }
-  const placeHolderText = (_b = (_a = props.fieldData) == null ? void 0 : _a.placeholder) != null ? _b : "";
-  const { values = [] } = props;
-  if ((props.operator === "between" || props.operator === "notBetween") && (props.type === "select" || props.type === "text")) {
-    const editors = ["from", "to"].map((key, i) => {
-      var _a2, _b2;
-      if (props.type === "text") {
-        return /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            key,
-            type: props.inputType || "text",
-            placeholder: placeHolderText,
-            value: (_a2 = valueAsArray[i]) != null ? _a2 : "",
-            className: `${standardClassnames.valueListItem} input`,
-            disabled: props.disabled,
-            onChange: (e) => multiValueHandler(e.target.value, i)
-          }
-        );
-      }
-      return /* @__PURE__ */ React2.createElement(
-        SelectorComponent,
-        __spreadProps(__spreadValues({
-          key
-        }, props), {
-          className: standardClassnames.valueListItem,
-          handleOnChange: (v) => multiValueHandler(v, i),
-          disabled: props.disabled,
-          value: (_b2 = valueAsArray[i]) != null ? _b2 : getFirstOption(values),
-          options: values,
-          listsAsArrays: props.listsAsArrays
-        })
-      );
-    });
-    return /* @__PURE__ */ React2.createElement("span", { "data-testid": props.testID, className: props.className, title: props.title }, editors[0], props.separator, editors[1]);
+  var t0 = props.values;
+  var t1;
+  if ($[0] !== t0) {
+    t1 = t0 === void 0 ? [] : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
   }
+  var values = t1;
+  if ((props.operator === "between" || props.operator === "notBetween") && props.type === "text") {
+    var _t;
+    if ($[2] !== props || $[3] !== valueListItemClassName) {
+      _t = jsx2(ValueEditor, __spreadProps(__spreadValues({}, props), { skipHook: true, schema: __spreadProps(__spreadValues({}, props.schema), { classNames: __spreadProps(__spreadValues({}, props.schema.classNames), { valueListItem: "".concat(valueListItemClassName, " input") }) }) }));
+      $[2] = props;
+      $[3] = valueListItemClassName;
+      $[4] = _t;
+    } else {
+      _t = $[4];
+    }
+    return _t;
+  }
   switch (props.type) {
-    case "select":
-    case "multiselect":
-      return /* @__PURE__ */ React2.createElement(
-        SelectorComponent,
-        __spreadProps(__spreadValues({}, props), {
-          title: props.title,
-          className: props.className,
-          handleOnChange: props.handleOnChange,
-          options: values,
-          value: props.value,
-          disabled: props.disabled,
-          multiple: props.type === "multiselect",
-          listsAsArrays: props.listsAsArrays
-        })
-      );
-    case "textarea":
-      return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control` }, /* @__PURE__ */ React2.createElement(ValueEditor, __spreadProps(__spreadValues({ skipHook: true }, props), { className: "textarea" })));
-    case "switch":
-    case "checkbox":
-      return /* @__PURE__ */ React2.createElement("label", { title: props.title, className: `${props.className} checkbox` }, /* @__PURE__ */ React2.createElement(ValueEditor, __spreadProps(__spreadValues({ skipHook: true }, props), { title: "", className: "" })));
-    case "radio":
-      return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control`, title: props.title }, values.map((v) => /* @__PURE__ */ React2.createElement("label", { key: v.name, className: "radio" }, /* @__PURE__ */ React2.createElement(
-        "input",
-        {
-          type: "radio",
-          value: v.name,
-          checked: props.value === v.name,
-          onChange: () => props.handleOnChange(v.name),
-          disabled: props.disabled
+    case "select": {
+    }
+    case "multiselect": {
+      var _t2;
+      if ($[5] !== props) {
+        _t2 = jsx2(ValueEditor, __spreadProps(__spreadValues({}, props), { skipHook: true }));
+        $[5] = props;
+        $[6] = _t2;
+      } else {
+        _t2 = $[6];
+      }
+      return _t2;
+    }
+    case "textarea": {
+      var _t3 = "".concat(props.className, " control");
+      var _t4;
+      if ($[7] !== props || $[8] !== _t3) {
+        _t4 = jsx2("div", { className: _t3, children: jsx2(ValueEditor, __spreadProps(__spreadValues({}, props), { skipHook: true, className: "textarea" })) });
+        $[7] = props;
+        $[8] = _t3;
+        $[9] = _t4;
+      } else {
+        _t4 = $[9];
+      }
+      return _t4;
+    }
+    case "switch": {
+    }
+    case "checkbox": {
+      var _t5 = "".concat(props.className, " checkbox");
+      var _t6;
+      if ($[10] !== props || $[11] !== _t5) {
+        _t6 = jsx2("label", { title: props.title, className: _t5, children: jsx2(ValueEditor, __spreadProps(__spreadValues({}, props), { skipHook: true, title: "", className: "" })) });
+        $[10] = props;
+        $[11] = _t5;
+        $[12] = _t6;
+      } else {
+        _t6 = $[12];
+      }
+      return _t6;
+    }
+    case "radio": {
+      var _t7 = "".concat(props.className, " control");
+      var _t8;
+      if ($[13] !== props || $[14] !== values || $[15] !== _t7) {
+        var t4;
+        if ($[17] !== props) {
+          t4 = function t42(v) {
+            return jsxs2("label", { className: "radio", children: [jsx2("input", { type: "radio", value: v.name, checked: props.value === v.name, onChange: function onChange() {
+              return props.handleOnChange(v.name);
+            }, disabled: props.disabled }), v.label] }, v.name);
+          };
+          $[17] = props;
+          $[18] = t4;
+        } else {
+          t4 = $[18];
         }
-      ), v.label)));
+        _t8 = jsx2("div", { className: _t7, title: props.title, children: values.map(t4) });
+        $[13] = props;
+        $[14] = values;
+        $[15] = _t7;
+        $[16] = _t8;
+      } else {
+        _t8 = $[16];
+      }
+      return _t8;
+    }
   }
-  return /* @__PURE__ */ React2.createElement("div", { className: `${props.className} control` }, /* @__PURE__ */ React2.createElement(ValueEditor, __spreadProps(__spreadValues({ skipHook: true }, props), { disabled: props.disabled, className: "input" })));
+  var t2 = "".concat(props.className, " control");
+  var t3;
+  if ($[19] !== props || $[20] !== t2) {
+    t3 = jsx2("div", { className: t2, children: jsx2(ValueEditor, __spreadProps(__spreadValues({}, props), { skipHook: true, disabled: props.disabled, className: "input" })) });
+    $[19] = props;
+    $[20] = t2;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  return t3;
 };
 
 // src/BulmaValueSelector.tsx
-import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 import { useSelectElementChangeHandler, useValueSelector } from "react-querybuilder";
@@ -147,39 +225,49 @@
 // src/BulmaValueSelector.tsx
-var BulmaValueSelector = ({
-  className,
-  handleOnChange,
-  options,
-  value,
-  title,
-  disabled,
-  multiple,
-  listsAsArrays
-}) => {
-  const { onChange, val } = useValueSelector({ handleOnChange, listsAsArrays, multiple, value });
-  const selectElementChangeHandler = useSelectElementChangeHandler({ multiple, onChange });
-  return /* @__PURE__ */ React3.createElement("div", { title, className: `${className} select${multiple ? " is-multiple" : ""}` }, /* @__PURE__ */ React3.createElement(
-    "select",
-    {
-      value: val,
-      multiple,
-      disabled,
-      onChange: selectElementChangeHandler
-    },
-    toOptions(options)
-  ));
+var BulmaValueSelector = function BulmaValueSelector2(t0) {
+  var $ = c(16);
+  var className = t0.className, handleOnChange = t0.handleOnChange, options = t0.options, value = t0.value, title = t0.title, disabled = t0.disabled, multiple = t0.multiple, listsAsArrays = t0.listsAsArrays;
+  var t1;
+  if ($[0] !== handleOnChange || $[1] !== listsAsArrays || $[2] !== multiple || $[3] !== value) {
+    t1 = { handleOnChange, listsAsArrays, multiple, value };
+    $[0] = handleOnChange;
+    $[1] = listsAsArrays;
+    $[2] = multiple;
+    $[3] = value;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  var _useValueSelector = useValueSelector(t1), onChange = _useValueSelector.onChange, val = _useValueSelector.val;
+  var t2;
+  if ($[5] !== multiple || $[6] !== onChange) {
+    t2 = { multiple, onChange };
+    $[5] = multiple;
+    $[6] = onChange;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  var selectElementChangeHandler = useSelectElementChangeHandler(t2);
+  var t3 = "".concat(className, " select").concat(multiple ? " is-multiple" : "");
+  var t4;
+  if ($[8] !== options || $[9] !== val || $[10] !== multiple || $[11] !== disabled || $[12] !== selectElementChangeHandler || $[13] !== title || $[14] !== t3) {
+    t4 = jsx3("div", { title, className: t3, children: jsx3("select", { value: val, multiple, disabled, onChange: selectElementChangeHandler, children: toOptions(options) }) });
+    $[8] = options;
+    $[9] = val;
+    $[10] = multiple;
+    $[11] = disabled;
+    $[12] = selectElementChangeHandler;
+    $[13] = title;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
 };
 
 // src/index.ts
-var bulmaControlClassnames = {
-  actionElement: "button"
-};
-var bulmaControlElements = {
-  notToggle: BulmaNotToggle,
-  valueEditor: BulmaValueEditor,
-  valueSelector: BulmaValueSelector
-};
-var QueryBuilderBulma = getCompatContextProvider({
-  controlElements: bulmaControlElements,
-  controlClassnames: bulmaControlClassnames
-});
+var bulmaControlClassnames = { actionElement: "button" };
+var bulmaControlElements = { notToggle: BulmaNotToggle, valueEditor: BulmaValueEditor, valueSelector: BulmaValueSelector };
+var QueryBuilderBulma = getCompatContextProvider({ controlElements: bulmaControlElements, controlClassnames: bulmaControlClassnames });
 export {
@@ -186,0 +274,0 @@ BulmaNotToggle,

package.json

 {
   "name": "@react-querybuilder/bulma",
   "description": "Custom Bulma components for react-querybuilder",
-  "version": "7.8.0-alpha.0",
+  "version": "8.0.0-alpha.0",
   "publishConfig": {
@@ -35,2 +35,14 @@ "access": "public"
   "homepage": "https://react-querybuilder.js.org/",
+  "keywords": [
+    "react",
+    "querybuilder",
+    "bulma",
+    "query",
+    "builder",
+    "operators",
+    "component",
+    "clause",
+    "expression",
+    "sql"
+  ],
   "scripts": {
@@ -45,18 +57,18 @@ "start": "bunx --bun vite",
     "@testing-library/react": "^16.0.1",
-    "@types/react": "^18.3.9",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "bulma": "^0.9.4",
+    "@types/react": "^18.3.12",
+    "@vitejs/plugin-react": "^4.3.3",
+    "bulma": "^1.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-querybuilder": "7.8.0-alpha.0",
+    "react-querybuilder": "8.0.0-alpha.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
-    "bulma": "^0.9.4",
+    "bulma": "^0.9.4 || ^1",
     "react": ">=18",
-    "react-querybuilder": "7.8.0-alpha.0"
+    "react-querybuilder": "8.0.0-alpha.0"
   },
-  "gitHead": "2e7089a27e676cff934dcd6514dbd379b7a6d869"
+  "gitHead": "c7df027ef644d535daac4f7178d5045ecf26c4bb"
 }

README.md

 ## @react-querybuilder/bulma
 
-Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Bulma](https://bulma.io/).
+Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Bulma](https://bulma.io/).
 
-To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/demo/bulma) or [load the example in CodeSandbox](https://githubbox.com/react-querybuilder/react-querybuilder/tree/main/examples/bulma).
+- [Demo](https://react-querybuilder.js.org/demo/bulma)
+- [Full documentation](https://react-querybuilder.js.org/)
+- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=bulma) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=bulma) example projects
 
-**[Full documentation](https://react-querybuilder.js.org/)**
+![Screenshot](../../_assets/screenshot-bulma.png)
 
@@ -18,10 +20,10 @@ ## Installation
 
-To render Bulma-compatible components in the query builder, wrap the `<QueryBuilder />` element in `<QueryBuilderBulma />`.
+To configure the query builder to use Bulma-compatible components, place `QueryBuilderBulma` above `QueryBuilder` in the component hierarchy.
 
 ```tsx
 import { QueryBuilderBulma } from '@react-querybuilder/bulma';
-import 'bulma/bulma.sass';
-import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
+import { useState } from 'react';
+import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
 
-const fields = [
+const fields: Field[] = [
   { name: 'firstName', label: 'First Name' },
@@ -31,3 +33,3 @@ { name: 'lastName', label: 'Last Name' },
 
-const App = () => {
+export function App() {
   const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
@@ -37,18 +39,26 @@
     <QueryBuilderBulma>
-      <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />
+      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
     </QueryBuilderBulma>
   );
-};
+}
 ```
 
-## Notes
+> [!NOTE]
+>
+> Some additional styling may be necessary. We recommend the following:
+>
+> ```css
+> .queryBuilder .input {
+>   width: auto;
+> }
+> ```
 
-- Some additional styling may be necessary, e.g.:
+`QueryBuilderBulma` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.
 
-  ```css
-  .queryBuilder .input {
-    width: auto;
-  }
-  ```
-
-- This package exports `bulmaControlElements` which can be assigned directly to the `controlElements` prop on `<QueryBuilder />` (and also exports each component individually), but wrapping `<QueryBuilder />` in `<QueryBuilderBulma />` is the recommended method.
+| Export                   | `QueryBuilder` prop             |
+| ------------------------ | ------------------------------- |
+| `bulmaControlClassnames` | `controlClassnames`             |
+| `bulmaControlElements`   | `controlElements`               |
+| `BulmaNotToggle`         | `controlElements.notToggle`     |
+| `BulmaValueEditor`       | `controlElements.valueEditor`   |
+| `BulmaValueSelector`     | `controlElements.valueSelector` |

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124440

increased by47.43%

Lines of code

868

increased by45.88%

Number of lines in readme file

62

increased by19.23%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes