@bikdotai/bik-component-library 0.0.13-beta.38 → 0.0.13-beta.40

package/dist/cjs/components/QueryBuilder/Filters/Segment/components/SegmentFilter.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("../../../components/AllowedListDropdown.js"),o=require("../../../helpers/ApiResponse.helper.js"),i=require("../../../hooks/useQueryBuilder.js"),d=require("../../../hooks/useQueryBuilderCache.js"),s=require("../../../components/DropdownWrapper.js"),u=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const n=new o.ApiResponseHelper;exports.default=o=>{let{node:t,allowedNodes:a,apiHandler:v,mode:c,selectorKey:p}=o;var y,m,j,f,h,w,x,B,g;const{updateMeta:A,selectType:k,createMeta:q}=i.useQueryBuilder(p),{cacheWrap:b}=d.useQueryBuilderCache(),[Q,D]=r.useState(!1),[S,_]=r.useState([]),L=t.metas.find((e=>"segmentID"===e.key));return r.useEffect((()=>{q({key:"segmentID"},t._id),b((()=>v({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))_([...e.map((e=>({label:e.name,value:e.id,descriptions:e.desc,selected:"create"!==c&&(!!(null==L?void 0:L.value)&&L.value===e.id)})))]);else{const r=n.convertToGroupOptions(e,(null==L?void 0:L.value)?[L.value]:void 0);_([...r])}D(!1)}))}),[]),e.jsx(u.BaseQueryBuilderNode,Object.assign({node:t,mode:c},{children:e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(l.default,{disabled:"view"===c,loading:Q,selectedType:t.type,allowedList:a,onSelect:function(e){Array.isArray(e)||(D(!0),k(e.value,t._id))}}),(null===(m=null===(y=null==t?void 0:t.metas)||void 0===y?void 0:y[0])||void 0===m?void 0:m.key)&&e.jsx(s.default,{isLoading:Q,disabled:"view"===c,width:"200px",dropdownLabel:"Select segment",options:S,onSelect:function(e){Array.isArray(e)||A({key:"segmentID",value:e.value,error:{}},t._id)},error:null!==(B=null!==(w=null===(h=null===(f=null===(j=t.metas)||void 0===j?void 0:j[0])||void 0===f?void 0:f.error)||void 0===h?void 0:h.key)&&void 0!==w?w:null===(x=null==L?void 0:L.error)||void 0===x?void 0:x.key)&&void 0!==B?B:null===(g=null==L?void 0:L.error)||void 0===g?void 0:g.value})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("../../../components/AllowedListDropdown.js"),o=require("../../../helpers/ApiResponse.helper.js"),i=require("../../../hooks/useQueryBuilder.js"),d=require("../../../hooks/useQueryBuilderCache.js"),s=require("../../../components/DropdownWrapper.js"),u=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const n=new o.ApiResponseHelper;exports.default=o=>{let{node:t,allowedNodes:a,apiHandler:v,mode:c,selectorKey:p}=o;var y,m,j,f,h,w,x,B,g;const{updateMeta:A,selectType:k,createMeta:q}=i.useQueryBuilder(p),{cacheWrap:b}=d.useQueryBuilderCache(),[Q,D]=r.useState(!1),[S,_]=r.useState([]),L=t.metas.find((e=>"segmentID"===e.key));return r.useEffect((()=>{q({key:"segmentID"},t._id),b((()=>v({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))_([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==c&&(!!(null==L?void 0:L.value)&&L.value===e.id)})))]);else{const r=n.convertToGroupOptions(e,(null==L?void 0:L.value)?[L.value]:void 0);_([...r])}D(!1)}))}),[]),e.jsx(u.BaseQueryBuilderNode,Object.assign({node:t,mode:c},{children:e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(l.default,{disabled:"view"===c,loading:Q,selectedType:t.type,allowedList:a,onSelect:function(e){Array.isArray(e)||(D(!0),k(e.value,t._id))}}),(null===(m=null===(y=null==t?void 0:t.metas)||void 0===y?void 0:y[0])||void 0===m?void 0:m.key)&&e.jsx(s.default,{isLoading:Q,disabled:"view"===c,width:"200px",dropdownLabel:"Select segment",options:S,onSelect:function(e){Array.isArray(e)||A({key:"segmentID",value:e.value,error:{}},t._id)},error:null!==(B=null!==(w=null===(h=null===(f=null===(j=t.metas)||void 0===j?void 0:j[0])||void 0===f?void 0:f.error)||void 0===h?void 0:h.key)&&void 0!==w?w:null===(x=null==L?void 0:L.error)||void 0===x?void 0:x.key)&&void 0!==B?B:null===(g=null==L?void 0:L.error)||void 0===g?void 0:g.value})]}))}))};

package/dist/cjs/components/QueryBuilder/QueryBuilder.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { QueryBuilderRoot } from './types/QueryBuilder';
 import { QueryBuilderProps } from './types/QueryBuilderProps.type';
 /**
  * @exported
@@ -6,4 +7,6 @@ import { QueryBuilderProps } from './types/QueryBuilderProps.type';
  * @param param0
  * @returns
  */
-export declare const QueryBuilder: React.FC<QueryBuilderProps>;
+export declare const QueryBuilder: React.ForwardRefExoticComponent<QueryBuilderProps & React.RefAttributes<{
+    getState: () => QueryBuilderRoot;
+}>>;

package/dist/cjs/components/QueryBuilder/QueryBuilder.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../TypographyStyle.js"),s=require("./components/QueryBuilderNodes.js"),i=require("./hooks/useQueryBuilder.js");exports.QueryBuilder=n=>{let{queryPreText:o,infinite:u,addNodeBtnText:d,typesAPIHandlers:l,onStateChange:a,mode:y,selectorKey:c,state:j,errorState:f}=n;const{init:x,fillState:m}=i.useQueryBuilder(c),p=l?Object.keys(l):[];return r.useEffect((()=>{j?m(j):x(null==p?void 0:p[0])}),[]),r.useEffect((()=>{f&&m(f)}),[f]),e.jsxs(e.Fragment,{children:[e.jsx(t.BodyPrimary,Object.assign({style:{marginBottom:12}},{children:o})),e.jsx(s.default,{selectorKey:c,onStateChange:a,typesAPIHandlers:l,allowedNodes:p,infinite:null==u||u,addNodeBtnText:d,mode:y})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../TypographyStyle.js"),s=require("./components/QueryBuilderNodes.js"),u=require("./hooks/useQueryBuilder.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=i(t).default.forwardRef(((i,n)=>{let{queryPreText:o,infinite:d,addNodeBtnText:l,typesAPIHandlers:a,onStateChange:y,mode:c,selectorKey:f,state:j,errorState:p}=i;const{init:m,fillState:x}=u.useQueryBuilder(f),B=a?Object.keys(a):[];return t.useEffect((()=>{j?x(j):m(null==B?void 0:B[0])}),[]),t.useEffect((()=>{p&&x(p)}),[p]),e.jsxs(e.Fragment,{children:[e.jsx(r.BodyPrimary,Object.assign({style:{marginBottom:12}},{children:o})),e.jsx(s.default,{ref:n,selectorKey:f,onStateChange:y,typesAPIHandlers:a,allowedNodes:B,infinite:null==d||d,addNodeBtnText:l,mode:c})]})}));n.displayName="QueryBuilder",exports.QueryBuilder=n;

package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../../helpers/ApiResponse.helper.js"),o=require("../../hooks/useQueryBuilder.js"),a=require("../../hooks/useQueryBuilderCache.js"),n=require("../../components/DropdownWrapper.js"),u=require("../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const l=new i.ApiResponseHelper,s="triggerName";exports.default=i=>{let{node:d,apiHandler:c,cacheKey:p,propertyAddBtnText:v,mode:y,selectorKey:j}=i;const[f,g]=t.useState([]),{updateMeta:h,createMeta:_,createProperty:O,deleteProperty:m,updateProperty:P,selectPropertyJoinOperator:b,clearProperty:x}=o.useQueryBuilder(j),{cacheWrap:B}=a.useQueryBuilderCache(),q=d.metas.find((e=>e.key===s)),N=e=>B((()=>c({query:{triggerName:e}})),`${p}_${e}`),A=(e,r)=>B((()=>c({query:{triggerName:e,propertyName:r}})),`${p}_${e}_${r}`);return t.useEffect((()=>{B((()=>c({})),p).then((e=>{var r;if(e)if(Array.isArray(e)){const t=null!==(r=null==e?void 0:e.map((e=>({label:e.name,value:e.id,descriptions:e.desc,selected:"create"!==y&&(!!(null==q?void 0:q.value)&&q.value===e.id)}))))&&void 0!==r?r:[];g([...t])}else{const r=l.convertToGroupOptions(e,(null==q?void 0:q.value)?[q.value]:void 0);g([...r])}}))}),[]),r.jsx(u.BaseQueryBuilderNode,Object.assign({node:d,addPropertyBtnText:(null==q?void 0:q.value)&&v,deleteProperty:m,createProperty:O,propertySelectorText:"Select condition",fetchPropertyData:function(){return e.__awaiter(this,void 0,void 0,(function*(){if(null==q?void 0:q.value){return yield N(null==q?void 0:q.value)}return null}))},onPropertyNameSelect:function(r,t){return e.__awaiter(this,void 0,void 0,(function*(){if(P(Object.assign(Object.assign({},t),{name:r.id,dataType:r.type,operator:void 0,value:void 0}),d._id),!r.needValuesRetrieval)return[];const e=yield A(null==q?void 0:q.value,r.id);return e?l.convertToGroupOptions(e):[]}))},onPropertyOperatorChange:function(e,r){P(Object.assign(Object.assign({},r),{operator:e,value:void 0}),d._id)},onPropertyValueChange:function(e,r){P(Object.assign(Object.assign({},r),{value:e}),d._id)},selectPropertyJoinOperator:b,mode:y},{children:r.jsx("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:8}},{children:r.jsx(n.default,{width:"200px",options:f,onSelect:function(e){Array.isArray(e)||(x(d._id),(null==q?void 0:q.key)===s?h(Object.assign(Object.assign({},q),{value:e.value}),d._id):_({key:s,value:e.value},d._id))}})}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../../helpers/ApiResponse.helper.js"),o=require("../../hooks/useQueryBuilder.js"),a=require("../../hooks/useQueryBuilderCache.js"),n=require("../../components/DropdownWrapper.js"),u=require("../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const l=new i.ApiResponseHelper,s="triggerName";exports.default=i=>{let{node:d,apiHandler:c,cacheKey:p,propertyAddBtnText:v,mode:y,selectorKey:j}=i;const[f,g]=t.useState([]),{updateMeta:h,createMeta:_,createProperty:O,deleteProperty:m,updateProperty:P,selectPropertyJoinOperator:b,clearProperty:x}=o.useQueryBuilder(j),{cacheWrap:B}=a.useQueryBuilderCache(),q=d.metas.find((e=>e.key===s)),N=e=>B((()=>c({query:{triggerName:e}})),`${p}_${e}`),A=(e,r)=>B((()=>c({query:{triggerName:e,propertyName:r}})),`${p}_${e}_${r}`);return t.useEffect((()=>{B((()=>c({})),p).then((e=>{var r;if(e)if(Array.isArray(e)){const t=null!==(r=null==e?void 0:e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==y&&(!!(null==q?void 0:q.value)&&q.value===e.id)}))))&&void 0!==r?r:[];g([...t])}else{const r=l.convertToGroupOptions(e,(null==q?void 0:q.value)?[q.value]:void 0);g([...r])}}))}),[]),r.jsx(u.BaseQueryBuilderNode,Object.assign({node:d,addPropertyBtnText:(null==q?void 0:q.value)&&v,deleteProperty:m,createProperty:O,propertySelectorText:"Select condition",fetchPropertyData:function(){return e.__awaiter(this,void 0,void 0,(function*(){if(null==q?void 0:q.value){return yield N(null==q?void 0:q.value)}return null}))},onPropertyNameSelect:function(r,t){return e.__awaiter(this,void 0,void 0,(function*(){if(P(Object.assign(Object.assign({},t),{name:r.id,dataType:r.type,operator:void 0,value:void 0}),d._id),!r.needValuesRetrieval)return[];const e=yield A(null==q?void 0:q.value,r.id);return e?l.convertToGroupOptions(e):[]}))},onPropertyOperatorChange:function(e,r){P(Object.assign(Object.assign({},r),{operator:e,value:void 0}),d._id)},onPropertyValueChange:function(e,r){P(Object.assign(Object.assign({},r),{value:e}),d._id)},selectPropertyJoinOperator:b,mode:y},{children:r.jsx("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:8}},{children:r.jsx(n.default,{width:"200px",options:f,onSelect:function(e){Array.isArray(e)||(x(d._id),(null==q?void 0:q.key)===s?h(Object.assign(Object.assign({},q),{value:e.value}),d._id):_({key:s,value:e.value},d._id))}})}))}))};

package/dist/cjs/components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../constants/connectorPosition.js"),t=require("../../../helpers/ApiResponse.helper.js"),n=require("../../Connectors/Connector.js"),a=require("../../DropdownWrapper.js"),i=require("./PropertyNode.styled.js"),s=require("./PropertyNodeUIWrapper.js");const l=new t.ApiResponseHelper,d=t=>{let{propertySelectorText:s,fetchPropertyData:d,onPropertyNameSelect:p,onPropertyOperatorChange:u,onPropertyValueChange:c,property:v,mode:y}=t;var j,g,h,x,f,b;const[m,C]=r.useState([]),[O,A]=r.useState({}),[P,w]=r.useState(!0),q=Array.isArray(m)?m.map((e=>Object.assign(Object.assign({},e),{label:e.name,value:e.id,descriptions:e.desc,selected:(null==v?void 0:v.name)===e.id}))):l.convertToGroupOptions(m,(null==v?void 0:v.name)?[v.name.toString()]:void 0);return r.useEffect((()=>{d?d().then((e=>{e&&(Array.isArray(e)?C([...e]):C(Object.assign({},e))),w(!1)})):w(!1)}),[]),e.jsxs(e.Fragment,{children:[e.jsxs(i.Container,{children:[e.jsx(a.default,{disabled:"view"===y,width:"200px",isLoading:P,dropdownLabel:null!=s?s:"Select property",options:q,onSelect:function(e){if(!Array.isArray(e)){let r=null;Array.isArray(m)?r=m.find((r=>{let{id:o}=r;return o===e.value})):Object.keys(m).forEach((o=>{const t=m[o].find((r=>{let{id:o}=r;return o===e.value}));t&&(r=t)})),A({}),r&&(null==p||p(r,v).then((e=>{A({options:Array.isArray(e)?[...e]:Object.assign({},e)})})))}}}),(null==v?void 0:v.name)&&!(null===(j=o.isNewLineConnectorPosition[v.dataType])||void 0===j?void 0:j[v.operator])&&e.jsx(n.default,{disabled:"view"===y,extra:O,errors:{val:null===(g=v.error)||void 0===g?void 0:g.value,operator:null===(h=v.error)||void 0===h?void 0:h.operator},connectorVal:v.value,connectorType:v.dataType,defaultConnector:v.operator,onOperatorChange:e=>null==u?void 0:u(e,v),onValueChange:e=>null==c?void 0:c(e,v)})]}),(null==v?void 0:v.name)&&(null===(x=o.isNewLineConnectorPosition[v.dataType])||void 0===x?void 0:x[v.operator])&&e.jsx(n.default,{disabled:"view"===y,extra:O,errors:{val:null===(f=v.error)||void 0===f?void 0:f.value,operator:null===(b=v.error)||void 0===b?void 0:b.operator},connectorVal:v.value,connectorType:v.dataType,defaultConnector:v.operator,onOperatorChange:e=>null==u?void 0:u(e,v),onValueChange:e=>null==c?void 0:c(e,v)})]})};exports.PropertyNode=r=>e.jsx(s.default,Object.assign({isLast:r.isLast,mode:r.mode},{children:e.jsx("div",Object.assign({style:{padding:12}},{children:e.jsx(d,Object.assign({},r))}))})),exports.PropertyNodeHeadless=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../constants/connectorPosition.js"),t=require("../../../helpers/ApiResponse.helper.js"),n=require("../../Connectors/Connector.js"),a=require("../../DropdownWrapper.js"),i=require("./PropertyNode.styled.js"),s=require("./PropertyNodeUIWrapper.js");const l=new t.ApiResponseHelper,d=t=>{let{propertySelectorText:s,fetchPropertyData:d,onPropertyNameSelect:p,onPropertyOperatorChange:u,onPropertyValueChange:c,property:v,mode:y}=t;var j,g,h,x,f,b;const[m,C]=r.useState([]),[O,A]=r.useState({}),[P,w]=r.useState(!0),q=Array.isArray(m)?m.map((e=>Object.assign(Object.assign({},e),{label:e.name,value:e.id,description:e.description,selected:(null==v?void 0:v.name)===e.id}))):l.convertToGroupOptions(m,(null==v?void 0:v.name)?[v.name.toString()]:void 0);return r.useEffect((()=>{d?d().then((e=>{e&&(Array.isArray(e)?C([...e]):C(Object.assign({},e))),w(!1)})):w(!1)}),[]),e.jsxs(e.Fragment,{children:[e.jsxs(i.Container,{children:[e.jsx(a.default,{disabled:"view"===y,width:"200px",isLoading:P,dropdownLabel:null!=s?s:"Select property",options:q,onSelect:function(e){if(!Array.isArray(e)){let r=null;Array.isArray(m)?r=m.find((r=>{let{id:o}=r;return o===e.value})):Object.keys(m).forEach((o=>{const t=m[o].find((r=>{let{id:o}=r;return o===e.value}));t&&(r=t)})),A({}),r&&(null==p||p(r,v).then((e=>{A({options:Array.isArray(e)?[...e]:Object.assign({},e)})})))}}}),(null==v?void 0:v.name)&&!(null===(j=o.isNewLineConnectorPosition[v.dataType])||void 0===j?void 0:j[v.operator])&&e.jsx(n.default,{disabled:"view"===y,extra:O,errors:{val:null===(g=v.error)||void 0===g?void 0:g.value,operator:null===(h=v.error)||void 0===h?void 0:h.operator},connectorVal:v.value,connectorType:v.dataType,defaultConnector:v.operator,onOperatorChange:e=>null==u?void 0:u(e,v),onValueChange:e=>null==c?void 0:c(e,v)})]}),(null==v?void 0:v.name)&&(null===(x=o.isNewLineConnectorPosition[v.dataType])||void 0===x?void 0:x[v.operator])&&e.jsx(n.default,{disabled:"view"===y,extra:O,errors:{val:null===(f=v.error)||void 0===f?void 0:f.value,operator:null===(b=v.error)||void 0===b?void 0:b.operator},connectorVal:v.value,connectorType:v.dataType,defaultConnector:v.operator,onOperatorChange:e=>null==u?void 0:u(e,v),onValueChange:e=>null==c?void 0:c(e,v)})]})};exports.PropertyNode=r=>e.jsx(s.default,Object.assign({isLast:r.isLast,mode:r.mode},{children:e.jsx("div",Object.assign({style:{padding:12}},{children:e.jsx(d,Object.assign({},r))}))})),exports.PropertyNodeHeadless=d;

package/dist/cjs/components/QueryBuilder/components/QueryBuilderNodes.d.ts

@@ -6,7 +6,7 @@ type QueryBuilderNodesProps = {
     infinite: boolean;
     addNodeBtnText: string;
     allowedNodes: QueryBuilderType[];
-    onStateChange: (state: QueryBuilderRoot) => void;
+    onStateChange?: (state: QueryBuilderRoot) => void;
     typesAPIHandlers: {
         [key in QueryBuilderType]?: <T>(payload: BaseQueryBuilderPayload<T>) => Promise<Response<BaseQueryBuilderResponse>>;
     };
@@ -14,5 +14,7 @@ type QueryBuilderNodesProps = {
     mode?: 'create' | 'edit' | 'view';
     selectorKey: string;
 };
-declare const QueryBuilderNodes: React.FC<QueryBuilderNodesProps>;
+declare const QueryBuilderNodes: React.ForwardRefExoticComponent<QueryBuilderNodesProps & React.RefAttributes<{
+    getState: () => QueryBuilderRoot;
+}>>;
 export default QueryBuilderNodes;

package/dist/cjs/components/QueryBuilder/components/QueryBuilderNodes.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-redux"),s=require("../../button/Button.js"),i=require("../../dropdown/Dropdown.js"),o=require("../constants/operators.js"),l=require("../hooks/useQueryBuilder.js"),d=require("./AddNodeButton.js"),n=require("./DeleteButton.js"),a=require("./QueryBuilderNode/QueryBuilderNode.js"),u=require("./QueryBuilderNodes.styled.js");exports.default=c=>{let{infinite:j,addNodeBtnText:p,allowedNodes:x,typesAPIHandlers:y,onStateChange:v,mode:f,selectorKey:g}=c;var w;const b=r.useSelector((e=>null==e?void 0:e[g])),{deleteNode:h,clearAll:O,selectJoinOperator:m}=l.useQueryBuilder(g);t.useEffect((()=>{v(b)}),[b]);const q=o.JOIN_OPERATOR_OPTIONS.map((e=>(null==b?void 0:b.operator)&&e.value===b.operator?Object.assign(Object.assign({},e),{selected:!0}):e));return e.jsxs(e.Fragment,{children:[null===(w=null==b?void 0:b.nodes)||void 0===w?void 0:w.map(((t,r)=>e.jsxs(e.Fragment,{children:[0!==r&&e.jsx("div",Object.assign({style:{width:80,position:"relative"}},{children:e.jsx(i.Dropdown,{disabled:"view"===f,onSelect:e=>{m(e.value)},options:q,width:"80px",height:96,size:"small"})})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:12}},{children:[e.jsx(u.LinedContainer,Object.assign({style:{paddingTop:0===r?0:24}},{children:e.jsx(a.default,{selectorKey:g,mode:null!=f?f:"create",allowedNodes:x,node:t,apiHandler:y[t.type]})})),"view"!==f?e.jsx(e.Fragment,{children:0!==r&&e.jsx(n.default,{onClick:()=>h(t._id)})}):e.jsx(e.Fragment,{})]}),t._id)]}))),j&&"view"!==f&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[e.jsx(d.default,{buttonText:p,allowedNodes:x,selectorKey:g}),e.jsx(s.Button,{buttonText:"Clear filters",size:"medium",buttonType:"tertiaryGray",onClick:()=>O(x[0])})]}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-redux"),s=require("../../button/Button.js"),i=require("../../dropdown/Dropdown.js"),l=require("../constants/operators.js"),o=require("../hooks/useQueryBuilder.js"),d=require("./AddNodeButton.js"),n=require("./DeleteButton.js"),a=require("./QueryBuilderNode/QueryBuilderNode.js"),u=require("./QueryBuilderNodes.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=c(t).default.forwardRef(((c,j)=>{let{infinite:p,addNodeBtnText:x,allowedNodes:y,typesAPIHandlers:f,onStateChange:v,mode:g,selectorKey:b}=c;var w;const m=r.useSelector((e=>null==e?void 0:e[b])),{deleteNode:O,clearAll:h,selectJoinOperator:N}=o.useQueryBuilder(b);t.useEffect((()=>{null==v||v(m)}),[m]);const q=l.JOIN_OPERATOR_OPTIONS.map((e=>(null==m?void 0:m.operator)&&e.value===m.operator?Object.assign(Object.assign({},e),{selected:!0}):e));return t.useImperativeHandle(j,(()=>({getState:()=>Object.assign({},m)}))),e.jsxs(e.Fragment,{children:[null===(w=null==m?void 0:m.nodes)||void 0===w?void 0:w.map(((t,r)=>e.jsxs(e.Fragment,{children:[0!==r&&e.jsx("div",Object.assign({style:{width:80,position:"relative"}},{children:e.jsx(i.Dropdown,{disabled:"view"===g,onSelect:e=>{N(e.value)},options:q,width:"80px",height:96,size:"small"})})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:12}},{children:[e.jsx(u.LinedContainer,Object.assign({style:{paddingTop:0===r?0:24}},{children:e.jsx(a.default,{selectorKey:b,mode:null!=g?g:"create",allowedNodes:y,node:t,apiHandler:f[t.type]})})),"view"!==g?e.jsx(e.Fragment,{children:0!==r&&e.jsx(n.default,{onClick:()=>O(t._id)})}):e.jsx(e.Fragment,{})]}),t._id)]}))),p&&"view"!==g&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[e.jsx(d.default,{buttonText:x,allowedNodes:y,selectorKey:b}),e.jsx(s.Button,{buttonText:"Clear filters",size:"medium",buttonType:"tertiaryGray",onClick:()=>h(y[0])})]}))]})}));j.displayName="QueryBuilderNodes",exports.default=j;

package/dist/cjs/components/QueryBuilder/types/QueryBuilderProps.type.d.ts

@@ -26,8 +26,10 @@ export type QueryBuilderProps = {
     mode?: 'create' | 'edit' | 'view';
     /**
      * the on change handler, this callback will be called whenever there is any change in the state
+     * @note
+     * try using on-demand flow instead of reactive flow using ref.getState to avoid extra re-renders
      */
-    onStateChange: (state: QueryBuilderRoot) => void;
+    onStateChange?: (state: QueryBuilderRoot) => void;
     /**
      * in property,
      * if this is `true`,  it will allow user to re-select the selected property name again,

package/dist/esm/components/QueryBuilder/Filters/Segment/components/SegmentFilter.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as r,useEffect as l}from"react";import i from"../../../components/AllowedListDropdown.js";import{ApiResponseHelper as d}from"../../../helpers/ApiResponse.helper.js";import{useQueryBuilder as n}from"../../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as s}from"../../../hooks/useQueryBuilderCache.js";import t from"../../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as a}from"../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const u=new d,v=d=>{let{node:v,allowedNodes:p,apiHandler:m,mode:c,selectorKey:y}=d;var f,w,h,g,j,k,A,b,B;const{updateMeta:D,selectType:x,createMeta:L}=n(y),{cacheWrap:T}=s(),[I,N]=r(!1),[Q,S]=r([]),_=v.metas.find((e=>"segmentID"===e.key));return l((()=>{L({key:"segmentID"},v._id),T((()=>m({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))S([...e.map((e=>({label:e.name,value:e.id,descriptions:e.desc,selected:"create"!==c&&(!!(null==_?void 0:_.value)&&_.value===e.id)})))]);else{const o=u.convertToGroupOptions(e,(null==_?void 0:_.value)?[_.value]:void 0);S([...o])}N(!1)}))}),[]),e(a,Object.assign({node:v,mode:c},{children:o("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(i,{disabled:"view"===c,loading:I,selectedType:v.type,allowedList:p,onSelect:function(e){Array.isArray(e)||(N(!0),x(e.value,v._id))}}),(null===(w=null===(f=null==v?void 0:v.metas)||void 0===f?void 0:f[0])||void 0===w?void 0:w.key)&&e(t,{isLoading:I,disabled:"view"===c,width:"200px",dropdownLabel:"Select segment",options:Q,onSelect:function(e){Array.isArray(e)||D({key:"segmentID",value:e.value,error:{}},v._id)},error:null!==(b=null!==(k=null===(j=null===(g=null===(h=v.metas)||void 0===h?void 0:h[0])||void 0===g?void 0:g.error)||void 0===j?void 0:j.key)&&void 0!==k?k:null===(A=null==_?void 0:_.error)||void 0===A?void 0:A.key)&&void 0!==b?b:null===(B=null==_?void 0:_.error)||void 0===B?void 0:B.value})]}))}))};export{v as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as r,useEffect as i}from"react";import l from"../../../components/AllowedListDropdown.js";import{ApiResponseHelper as d}from"../../../helpers/ApiResponse.helper.js";import{useQueryBuilder as n}from"../../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as t}from"../../../hooks/useQueryBuilderCache.js";import s from"../../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as a}from"../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const u=new d,p=d=>{let{node:p,allowedNodes:v,apiHandler:m,mode:c,selectorKey:y}=d;var f,w,h,g,j,k,A,b,B;const{updateMeta:D,selectType:x,createMeta:L}=n(y),{cacheWrap:T}=t(),[I,N]=r(!1),[Q,S]=r([]),_=p.metas.find((e=>"segmentID"===e.key));return i((()=>{L({key:"segmentID"},p._id),T((()=>m({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))S([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==c&&(!!(null==_?void 0:_.value)&&_.value===e.id)})))]);else{const o=u.convertToGroupOptions(e,(null==_?void 0:_.value)?[_.value]:void 0);S([...o])}N(!1)}))}),[]),e(a,Object.assign({node:p,mode:c},{children:o("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(l,{disabled:"view"===c,loading:I,selectedType:p.type,allowedList:v,onSelect:function(e){Array.isArray(e)||(N(!0),x(e.value,p._id))}}),(null===(w=null===(f=null==p?void 0:p.metas)||void 0===f?void 0:f[0])||void 0===w?void 0:w.key)&&e(s,{isLoading:I,disabled:"view"===c,width:"200px",dropdownLabel:"Select segment",options:Q,onSelect:function(e){Array.isArray(e)||D({key:"segmentID",value:e.value,error:{}},p._id)},error:null!==(b=null!==(k=null===(j=null===(g=null===(h=p.metas)||void 0===h?void 0:h[0])||void 0===g?void 0:g.error)||void 0===j?void 0:j.key)&&void 0!==k?k:null===(A=null==_?void 0:_.error)||void 0===A?void 0:A.key)&&void 0!==b?b:null===(B=null==_?void 0:_.error)||void 0===B?void 0:B.value})]}))}))};export{p as default};

package/dist/esm/components/QueryBuilder/QueryBuilder.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { QueryBuilderRoot } from './types/QueryBuilder';
 import { QueryBuilderProps } from './types/QueryBuilderProps.type';
 /**
  * @exported
@@ -6,4 +7,6 @@ import { QueryBuilderProps } from './types/QueryBuilderProps.type';
  * @param param0
  * @returns
  */
-export declare const QueryBuilder: React.FC<QueryBuilderProps>;
+export declare const QueryBuilder: React.ForwardRefExoticComponent<QueryBuilderProps & React.RefAttributes<{
+    getState: () => QueryBuilderRoot;
+}>>;

package/dist/esm/components/QueryBuilder/QueryBuilder.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{useEffect as r}from"react";import{BodyPrimary as n}from"../TypographyStyle.js";import i from"./components/QueryBuilderNodes.js";import{useQueryBuilder as s}from"./hooks/useQueryBuilder.js";const l=l=>{let{queryPreText:d,infinite:a,addNodeBtnText:m,typesAPIHandlers:y,onStateChange:c,mode:p,selectorKey:u,state:f,errorState:h}=l;const{init:j,fillState:g}=s(u),x=y?Object.keys(y):[];return r((()=>{f?g(f):j(null==x?void 0:x[0])}),[]),r((()=>{h&&g(h)}),[h]),e(t,{children:[o(n,Object.assign({style:{marginBottom:12}},{children:d})),o(i,{selectorKey:u,onStateChange:c,typesAPIHandlers:y,allowedNodes:x,infinite:null==a||a,addNodeBtnText:m,mode:p})]})};export{l as QueryBuilder};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useEffect as n}from"react";import{BodyPrimary as i}from"../TypographyStyle.js";import s from"./components/QueryBuilderNodes.js";import{useQueryBuilder as d}from"./hooks/useQueryBuilder.js";const l=o.forwardRef(((o,l)=>{let{queryPreText:a,infinite:m,addNodeBtnText:y,typesAPIHandlers:p,onStateChange:u,mode:c,selectorKey:f,state:h,errorState:j}=o;const{init:B,fillState:g}=d(f),x=p?Object.keys(p):[];return n((()=>{h?g(h):B(null==x?void 0:x[0])}),[]),n((()=>{j&&g(j)}),[j]),e(t,{children:[r(i,Object.assign({style:{marginBottom:12}},{children:a})),r(s,{ref:l,selectorKey:f,onStateChange:u,typesAPIHandlers:p,allowedNodes:x,infinite:null==m||m,addNodeBtnText:y,mode:c})]})}));l.displayName="QueryBuilder";export{l as QueryBuilder};

package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as o}from"react";import{ApiResponseHelper as i}from"../../helpers/ApiResponse.helper.js";import{useQueryBuilder as n}from"../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as a}from"../../hooks/useQueryBuilderCache.js";import l from"../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as s}from"../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const d=new i,u="triggerName",p=i=>{let{node:p,apiHandler:c,cacheKey:v,propertyAddBtnText:y,mode:m,selectorKey:f}=i;const[g,j]=t([]),{updateMeta:h,createMeta:O,createProperty:P,deleteProperty:b,updateProperty:_,selectPropertyJoinOperator:x,clearProperty:B}=n(f),{cacheWrap:N}=a(),A=p.metas.find((e=>e.key===u)),T=e=>N((()=>c({query:{triggerName:e}})),`${v}_${e}`),k=(e,r)=>N((()=>c({query:{triggerName:e,propertyName:r}})),`${v}_${e}_${r}`);return o((()=>{N((()=>c({})),v).then((e=>{var r;if(e)if(Array.isArray(e)){const t=null!==(r=null==e?void 0:e.map((e=>({label:e.name,value:e.id,descriptions:e.desc,selected:"create"!==m&&(!!(null==A?void 0:A.value)&&A.value===e.id)}))))&&void 0!==r?r:[];j([...t])}else{const r=d.convertToGroupOptions(e,(null==A?void 0:A.value)?[A.value]:void 0);j([...r])}}))}),[]),r(s,Object.assign({node:p,addPropertyBtnText:(null==A?void 0:A.value)&&y,deleteProperty:b,createProperty:P,propertySelectorText:"Select condition",fetchPropertyData:function(){return e(this,void 0,void 0,(function*(){if(null==A?void 0:A.value){return yield T(null==A?void 0:A.value)}return null}))},onPropertyNameSelect:function(r,t){return e(this,void 0,void 0,(function*(){if(_(Object.assign(Object.assign({},t),{name:r.id,dataType:r.type,operator:void 0,value:void 0}),p._id),!r.needValuesRetrieval)return[];const e=yield k(null==A?void 0:A.value,r.id);return e?d.convertToGroupOptions(e):[]}))},onPropertyOperatorChange:function(e,r){_(Object.assign(Object.assign({},r),{operator:e,value:void 0}),p._id)},onPropertyValueChange:function(e,r){_(Object.assign(Object.assign({},r),{value:e}),p._id)},selectPropertyJoinOperator:x,mode:m},{children:r("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:8}},{children:r(l,{width:"200px",options:g,onSelect:function(e){Array.isArray(e)||(B(p._id),(null==A?void 0:A.key)===u?h(Object.assign(Object.assign({},A),{value:e.value}),p._id):O({key:u,value:e.value},p._id))}})}))}))};export{p as default};
+import{__awaiter as e}from"../../../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as o}from"react";import{ApiResponseHelper as i}from"../../helpers/ApiResponse.helper.js";import{useQueryBuilder as n}from"../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as a}from"../../hooks/useQueryBuilderCache.js";import l from"../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as s}from"../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const d=new i,u="triggerName",p=i=>{let{node:p,apiHandler:c,cacheKey:v,propertyAddBtnText:y,mode:m,selectorKey:f}=i;const[g,j]=t([]),{updateMeta:h,createMeta:O,createProperty:P,deleteProperty:b,updateProperty:_,selectPropertyJoinOperator:x,clearProperty:B}=n(f),{cacheWrap:N}=a(),A=p.metas.find((e=>e.key===u)),T=e=>N((()=>c({query:{triggerName:e}})),`${v}_${e}`),k=(e,r)=>N((()=>c({query:{triggerName:e,propertyName:r}})),`${v}_${e}_${r}`);return o((()=>{N((()=>c({})),v).then((e=>{var r;if(e)if(Array.isArray(e)){const t=null!==(r=null==e?void 0:e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==m&&(!!(null==A?void 0:A.value)&&A.value===e.id)}))))&&void 0!==r?r:[];j([...t])}else{const r=d.convertToGroupOptions(e,(null==A?void 0:A.value)?[A.value]:void 0);j([...r])}}))}),[]),r(s,Object.assign({node:p,addPropertyBtnText:(null==A?void 0:A.value)&&y,deleteProperty:b,createProperty:P,propertySelectorText:"Select condition",fetchPropertyData:function(){return e(this,void 0,void 0,(function*(){if(null==A?void 0:A.value){return yield T(null==A?void 0:A.value)}return null}))},onPropertyNameSelect:function(r,t){return e(this,void 0,void 0,(function*(){if(_(Object.assign(Object.assign({},t),{name:r.id,dataType:r.type,operator:void 0,value:void 0}),p._id),!r.needValuesRetrieval)return[];const e=yield k(null==A?void 0:A.value,r.id);return e?d.convertToGroupOptions(e):[]}))},onPropertyOperatorChange:function(e,r){_(Object.assign(Object.assign({},r),{operator:e,value:void 0}),p._id)},onPropertyValueChange:function(e,r){_(Object.assign(Object.assign({},r),{value:e}),p._id)},selectPropertyJoinOperator:x,mode:m},{children:r("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:8}},{children:r(l,{width:"200px",options:g,onSelect:function(e){Array.isArray(e)||(B(p._id),(null==A?void 0:A.key)===u?h(Object.assign(Object.assign({},A),{value:e.value}),p._id):O({key:u,value:e.value},p._id))}})}))}))};export{p as default};

package/dist/esm/components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{useState as n,useEffect as t}from"react";import{isNewLineConnectorPosition as a}from"../../../constants/connectorPosition.js";import{ApiResponseHelper as i}from"../../../helpers/ApiResponse.helper.js";import l from"../../Connectors/Connector.js";import d from"../../DropdownWrapper.js";import{Container as p}from"./PropertyNode.styled.js";import s from"./PropertyNodeUIWrapper.js";const c=new i,v=r=>e(s,Object.assign({isLast:r.isLast,mode:r.mode},{children:e("div",Object.assign({style:{padding:12}},{children:e(u,Object.assign({},r))}))})),u=i=>{let{propertySelectorText:s,fetchPropertyData:v,onPropertyNameSelect:u,onPropertyOperatorChange:m,onPropertyValueChange:y,property:h,mode:f}=i;var g,j,b,O,A,C;const[T,w]=n([]),[P,x]=n({}),[S,V]=n(!0),L=Array.isArray(T)?T.map((e=>Object.assign(Object.assign({},e),{label:e.name,value:e.id,descriptions:e.desc,selected:(null==h?void 0:h.name)===e.id}))):c.convertToGroupOptions(T,(null==h?void 0:h.name)?[h.name.toString()]:void 0);return t((()=>{v?v().then((e=>{e&&(Array.isArray(e)?w([...e]):w(Object.assign({},e))),V(!1)})):V(!1)}),[]),r(o,{children:[r(p,{children:[e(d,{disabled:"view"===f,width:"200px",isLoading:S,dropdownLabel:null!=s?s:"Select property",options:L,onSelect:function(e){if(!Array.isArray(e)){let r=null;Array.isArray(T)?r=T.find((r=>{let{id:o}=r;return o===e.value})):Object.keys(T).forEach((o=>{const n=T[o].find((r=>{let{id:o}=r;return o===e.value}));n&&(r=n)})),x({}),r&&(null==u||u(r,h).then((e=>{x({options:Array.isArray(e)?[...e]:Object.assign({},e)})})))}}}),(null==h?void 0:h.name)&&!(null===(g=a[h.dataType])||void 0===g?void 0:g[h.operator])&&e(l,{disabled:"view"===f,extra:P,errors:{val:null===(j=h.error)||void 0===j?void 0:j.value,operator:null===(b=h.error)||void 0===b?void 0:b.operator},connectorVal:h.value,connectorType:h.dataType,defaultConnector:h.operator,onOperatorChange:e=>null==m?void 0:m(e,h),onValueChange:e=>null==y?void 0:y(e,h)})]}),(null==h?void 0:h.name)&&(null===(O=a[h.dataType])||void 0===O?void 0:O[h.operator])&&e(l,{disabled:"view"===f,extra:P,errors:{val:null===(A=h.error)||void 0===A?void 0:A.value,operator:null===(C=h.error)||void 0===C?void 0:C.operator},connectorVal:h.value,connectorType:h.dataType,defaultConnector:h.operator,onOperatorChange:e=>null==m?void 0:m(e,h),onValueChange:e=>null==y?void 0:y(e,h)})]})};export{v as PropertyNode,u as PropertyNodeHeadless};
+import{jsx as r,jsxs as e,Fragment as o}from"react/jsx-runtime";import{useState as n,useEffect as t}from"react";import{isNewLineConnectorPosition as a}from"../../../constants/connectorPosition.js";import{ApiResponseHelper as i}from"../../../helpers/ApiResponse.helper.js";import l from"../../Connectors/Connector.js";import d from"../../DropdownWrapper.js";import{Container as p}from"./PropertyNode.styled.js";import s from"./PropertyNodeUIWrapper.js";const c=new i,v=e=>r(s,Object.assign({isLast:e.isLast,mode:e.mode},{children:r("div",Object.assign({style:{padding:12}},{children:r(u,Object.assign({},e))}))})),u=i=>{let{propertySelectorText:s,fetchPropertyData:v,onPropertyNameSelect:u,onPropertyOperatorChange:m,onPropertyValueChange:y,property:h,mode:f}=i;var g,j,b,O,A,C;const[T,w]=n([]),[P,x]=n({}),[S,V]=n(!0),L=Array.isArray(T)?T.map((r=>Object.assign(Object.assign({},r),{label:r.name,value:r.id,description:r.description,selected:(null==h?void 0:h.name)===r.id}))):c.convertToGroupOptions(T,(null==h?void 0:h.name)?[h.name.toString()]:void 0);return t((()=>{v?v().then((r=>{r&&(Array.isArray(r)?w([...r]):w(Object.assign({},r))),V(!1)})):V(!1)}),[]),e(o,{children:[e(p,{children:[r(d,{disabled:"view"===f,width:"200px",isLoading:S,dropdownLabel:null!=s?s:"Select property",options:L,onSelect:function(r){if(!Array.isArray(r)){let e=null;Array.isArray(T)?e=T.find((e=>{let{id:o}=e;return o===r.value})):Object.keys(T).forEach((o=>{const n=T[o].find((e=>{let{id:o}=e;return o===r.value}));n&&(e=n)})),x({}),e&&(null==u||u(e,h).then((r=>{x({options:Array.isArray(r)?[...r]:Object.assign({},r)})})))}}}),(null==h?void 0:h.name)&&!(null===(g=a[h.dataType])||void 0===g?void 0:g[h.operator])&&r(l,{disabled:"view"===f,extra:P,errors:{val:null===(j=h.error)||void 0===j?void 0:j.value,operator:null===(b=h.error)||void 0===b?void 0:b.operator},connectorVal:h.value,connectorType:h.dataType,defaultConnector:h.operator,onOperatorChange:r=>null==m?void 0:m(r,h),onValueChange:r=>null==y?void 0:y(r,h)})]}),(null==h?void 0:h.name)&&(null===(O=a[h.dataType])||void 0===O?void 0:O[h.operator])&&r(l,{disabled:"view"===f,extra:P,errors:{val:null===(A=h.error)||void 0===A?void 0:A.value,operator:null===(C=h.error)||void 0===C?void 0:C.operator},connectorVal:h.value,connectorType:h.dataType,defaultConnector:h.operator,onOperatorChange:r=>null==m?void 0:m(r,h),onValueChange:r=>null==y?void 0:y(r,h)})]})};export{v as PropertyNode,u as PropertyNodeHeadless};

package/dist/esm/components/QueryBuilder/components/QueryBuilderNodes.d.ts

@@ -6,7 +6,7 @@ type QueryBuilderNodesProps = {
     infinite: boolean;
     addNodeBtnText: string;
     allowedNodes: QueryBuilderType[];
-    onStateChange: (state: QueryBuilderRoot) => void;
+    onStateChange?: (state: QueryBuilderRoot) => void;
     typesAPIHandlers: {
         [key in QueryBuilderType]?: <T>(payload: BaseQueryBuilderPayload<T>) => Promise<Response<BaseQueryBuilderResponse>>;
     };
@@ -14,5 +14,7 @@ type QueryBuilderNodesProps = {
     mode?: 'create' | 'edit' | 'view';
     selectorKey: string;
 };
-declare const QueryBuilderNodes: React.FC<QueryBuilderNodesProps>;
+declare const QueryBuilderNodes: React.ForwardRefExoticComponent<QueryBuilderNodesProps & React.RefAttributes<{
+    getState: () => QueryBuilderRoot;
+}>>;
 export default QueryBuilderNodes;

package/dist/esm/components/QueryBuilder/components/QueryBuilderNodes.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{useEffect as r}from"react";import{useSelector as i}from"react-redux";import{Button as l}from"../../button/Button.js";import{Dropdown as d}from"../../dropdown/Dropdown.js";import{JOIN_OPERATOR_OPTIONS as s}from"../constants/operators.js";import{useQueryBuilder as n}from"../hooks/useQueryBuilder.js";import a from"./AddNodeButton.js";import c from"./DeleteButton.js";import p from"./QueryBuilderNode/QueryBuilderNode.js";import{LinedContainer as m}from"./QueryBuilderNodes.styled.js";const u=u=>{let{infinite:y,addNodeBtnText:f,allowedNodes:j,typesAPIHandlers:v,onStateChange:h,mode:w,selectorKey:b}=u;var x;const g=i((e=>null==e?void 0:e[b])),{deleteNode:N,clearAll:B,selectJoinOperator:O}=n(b);r((()=>{h(g)}),[g]);const C=s.map((e=>(null==g?void 0:g.operator)&&e.value===g.operator?Object.assign(Object.assign({},e),{selected:!0}):e));return e(o,{children:[null===(x=null==g?void 0:g.nodes)||void 0===x?void 0:x.map(((r,i)=>e(o,{children:[0!==i&&t("div",Object.assign({style:{width:80,position:"relative"}},{children:t(d,{disabled:"view"===w,onSelect:e=>{O(e.value)},options:C,width:"80px",height:96,size:"small"})})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:12}},{children:[t(m,Object.assign({style:{paddingTop:0===i?0:24}},{children:t(p,{selectorKey:b,mode:null!=w?w:"create",allowedNodes:j,node:r,apiHandler:v[r.type]})})),t(o,"view"!==w?{children:0!==i&&t(c,{onClick:()=>N(r._id)})}:{})]}),r._id)]}))),y&&"view"!==w&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[t(a,{buttonText:f,allowedNodes:j,selectorKey:b}),t(l,{buttonText:"Clear filters",size:"medium",buttonType:"tertiaryGray",onClick:()=>B(j[0])})]}))]})};export{u as default};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import r,{useEffect as i,useImperativeHandle as l}from"react";import{useSelector as d}from"react-redux";import{Button as s}from"../../button/Button.js";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{JOIN_OPERATOR_OPTIONS as a}from"../constants/operators.js";import{useQueryBuilder as c}from"../hooks/useQueryBuilder.js";import p from"./AddNodeButton.js";import u from"./DeleteButton.js";import m from"./QueryBuilderNode/QueryBuilderNode.js";import{LinedContainer as y}from"./QueryBuilderNodes.styled.js";const f=r.forwardRef(((r,f)=>{let{infinite:j,addNodeBtnText:v,allowedNodes:w,typesAPIHandlers:b,onStateChange:h,mode:g,selectorKey:x}=r;var N;const B=d((e=>null==e?void 0:e[x])),{deleteNode:O,clearAll:C,selectJoinOperator:Q}=c(x);i((()=>{null==h||h(B)}),[B]);const T=a.map((e=>(null==B?void 0:B.operator)&&e.value===B.operator?Object.assign(Object.assign({},e),{selected:!0}):e));return l(f,(()=>({getState:()=>Object.assign({},B)}))),e(t,{children:[null===(N=null==B?void 0:B.nodes)||void 0===N?void 0:N.map(((r,i)=>e(t,{children:[0!==i&&o("div",Object.assign({style:{width:80,position:"relative"}},{children:o(n,{disabled:"view"===g,onSelect:e=>{Q(e.value)},options:T,width:"80px",height:96,size:"small"})})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:12}},{children:[o(y,Object.assign({style:{paddingTop:0===i?0:24}},{children:o(m,{selectorKey:x,mode:null!=g?g:"create",allowedNodes:w,node:r,apiHandler:b[r.type]})})),o(t,"view"!==g?{children:0!==i&&o(u,{onClick:()=>O(r._id)})}:{})]}),r._id)]}))),j&&"view"!==g&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[o(p,{buttonText:v,allowedNodes:w,selectorKey:x}),o(s,{buttonText:"Clear filters",size:"medium",buttonType:"tertiaryGray",onClick:()=>C(w[0])})]}))]})}));f.displayName="QueryBuilderNodes";export{f as default};

package/dist/esm/components/QueryBuilder/types/QueryBuilderProps.type.d.ts

@@ -26,8 +26,10 @@ export type QueryBuilderProps = {
     mode?: 'create' | 'edit' | 'view';
     /**
      * the on change handler, this callback will be called whenever there is any change in the state
+     * @note
+     * try using on-demand flow instead of reactive flow using ref.getState to avoid extra re-renders
      */
-    onStateChange: (state: QueryBuilderRoot) => void;
+    onStateChange?: (state: QueryBuilderRoot) => void;
     /**
      * in property,
      * if this is `true`,  it will allow user to re-select the selected property name again,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.13-beta.38",
+	"version": "0.0.13-beta.40",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",