@hitachivantara/uikit-react-core 5.16.0 → 5.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.js","sources":["../../../../../src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import {\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogTitle,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface ConfirmationDialogProps {\n  title?: string;\n  message?: string;\n  isOpen?: boolean;\n  onConfirm?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onCancel?: () => void;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  closeButtonTooltip?: string;\n}\n\nexport const ConfirmationDialog = ({\n  title,\n  message,\n  isOpen,\n  onConfirm,\n  onCancel,\n  confirmButtonLabel,\n  cancelButtonLabel,\n  closeButtonTooltip,\n}: ConfirmationDialogProps) => {\n  const handleClose = (event, reason) => {\n    if (reason !== \"backdropClick\") {\n      onCancel?.();\n    }\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvDialog\n          classes={{ paper: css({ width: 500 }) }}\n          open={isOpen}\n          onClose={handleClose}\n          firstFocusable=\"confirmation-dialog-cancel\"\n          buttonTitle={closeButtonTooltip}\n        >\n          <HvDialogTitle variant=\"warning\">{title}</HvDialogTitle>\n          <HvDialogContent indentContent>{message}</HvDialogContent>\n          <HvDialogActions>\n            <HvButton variant=\"primaryGhost\" onClick={onConfirm}>\n              {confirmButtonLabel}\n            </HvButton>\n            <HvButton\n              id=\"confirmation-dialog-cancel\"\n              variant=\"primaryGhost\"\n              onClick={() => onCancel?.()}\n            >\n              {cancelButtonLabel}\n            </HvButton>\n          </HvDialogActions>\n        </HvDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["ConfirmationDialog","title","message","isOpen","onConfirm","onCancel","confirmButtonLabel","cancelButtonLabel","closeButtonTooltip","handleClose","event","reason","ClassNames","children","css","HvDialog","classes","paper","width","open","onClose","firstFocusable","buttonTitle","_jsx","HvDialogTitle","variant","HvDialogContent","indentContent","_jsxs","HvDialogActions","HvButton","onClick","id"],"mappings":";;;;;;;AAoBO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACuB,MAAM;AACvBC,QAAAA,cAAcA,CAACC,OAAOC,WAAW;AACrC,QAAIA,WAAW,iBAAiB;AACnB;AAAA,IACb;AAAA,EAAA;AAGF,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,2BACDC,UAAQ;AAAA,MACPC,SAAS;AAAA,QAAEC,OAAOH,IAAI;AAAA,UAAEI,OAAO;AAAA,QAAA,CAAK;AAAA,MAAE;AAAA,MACtCC,MAAMhB;AAAAA,MACNiB,SAASX;AAAAA,MACTY,gBAAe;AAAA,MACfC,aAAad;AAAAA,MAAmBK,UAAA,CAEhCU,oBAACC,eAAa;AAAA,QAACC,SAAQ;AAAA,QAASZ,UAAEZ;AAAAA,MAAAA,CAAqB,GACvDsB,oBAACG,iBAAe;AAAA,QAACC,eAAa;AAAA,QAAAd,UAAEX;AAAAA,MAAAA,CAAyB,GACzD0B,qBAACC,iBAAe;AAAA,QAAAhB,UAAA,CACdU,oBAACO,UAAQ;AAAA,UAACL,SAAQ;AAAA,UAAeM,SAAS3B;AAAAA,UAAUS,UACjDP;AAAAA,QAAAA,CACO,GACViB,oBAACO,UAAQ;AAAA,UACPE,IAAG;AAAA,UACHP,SAAQ;AAAA,UACRM,SAASA,MAAM1B;AAAAA,UAAaQ,UAE3BN;AAAAA,QAAAA,CACO,CAAC;AAAA,MAAA,CACI,CAAC;AAAA,IAAA,CACV;AAAA,EAAA,CAEF;AAEhB;"}
+{"version":3,"file":"ConfirmationDialog.js","sources":["../../../../../src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import {\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogTitle,\n} from \"@core/components\";\n\nimport { useClasses } from \"./ConfirmationDialog.styles\";\n\nexport interface ConfirmationDialogProps {\n  title?: string;\n  message?: string;\n  isOpen?: boolean;\n  onConfirm?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onCancel?: () => void;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  closeButtonTooltip?: string;\n}\n\nexport const ConfirmationDialog = ({\n  title,\n  message,\n  isOpen,\n  onConfirm,\n  onCancel,\n  confirmButtonLabel,\n  cancelButtonLabel,\n  closeButtonTooltip,\n}: ConfirmationDialogProps) => {\n  const { classes } = useClasses();\n\n  const handleClose = (_, reason) => {\n    if (reason !== \"backdropClick\") {\n      onCancel?.();\n    }\n  };\n\n  return (\n    <HvDialog\n      classes={{ paper: classes.paper }}\n      open={isOpen}\n      onClose={handleClose}\n      firstFocusable=\"confirmation-dialog-cancel\"\n      buttonTitle={closeButtonTooltip}\n    >\n      <HvDialogTitle variant=\"warning\">{title}</HvDialogTitle>\n      <HvDialogContent indentContent>{message}</HvDialogContent>\n      <HvDialogActions>\n        <HvButton variant=\"primaryGhost\" onClick={onConfirm}>\n          {confirmButtonLabel}\n        </HvButton>\n        <HvButton\n          id=\"confirmation-dialog-cancel\"\n          variant=\"primaryGhost\"\n          onClick={() => onCancel?.()}\n        >\n          {cancelButtonLabel}\n        </HvButton>\n      </HvDialogActions>\n    </HvDialog>\n  );\n};\n"],"names":["ConfirmationDialog","title","message","isOpen","onConfirm","onCancel","confirmButtonLabel","cancelButtonLabel","closeButtonTooltip","classes","useClasses","handleClose","_","reason","HvDialog","paper","open","onClose","firstFocusable","buttonTitle","children","_jsx","HvDialogTitle","variant","HvDialogContent","indentContent","_jsxs","HvDialogActions","HvButton","onClick","id"],"mappings":";;;;;;;AAqBO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAYC,WAAW;AAEzBC,QAAAA,cAAcA,CAACC,GAAGC,WAAW;AACjC,QAAIA,WAAW,iBAAiB;AACnB;AAAA,IACb;AAAA,EAAA;AAGF,8BACGC,UAAQ;AAAA,IACPL,SAAS;AAAA,MAAEM,OAAON,QAAQM;AAAAA,IAAM;AAAA,IAChCC,MAAMb;AAAAA,IACNc,SAASN;AAAAA,IACTO,gBAAe;AAAA,IACfC,aAAaX;AAAAA,IAAmBY,UAAA,CAEhCC,oBAACC,eAAa;AAAA,MAACC,SAAQ;AAAA,MAASH,UAAEnB;AAAAA,IAAAA,CAAqB,GACvDoB,oBAACG,iBAAe;AAAA,MAACC,eAAa;AAAA,MAAAL,UAAElB;AAAAA,IAAAA,CAAyB,GACzDwB,qBAACC,iBAAe;AAAA,MAAAP,UAAA,CACdC,oBAACO,UAAQ;AAAA,QAACL,SAAQ;AAAA,QAAeM,SAASzB;AAAAA,QAAUgB,UACjDd;AAAAA,MAAAA,CACO,GACVe,oBAACO,UAAQ;AAAA,QACPE,IAAG;AAAA,QACHP,SAAQ;AAAA,QACRM,SAASA,MAAMxB;AAAAA,QAAae,UAE3Bb;AAAAA,MAAAA,CACO,CAAC;AAAA,IAAA,CACI,CAAC;AAAA,EAAA,CACV;AAEd;"}

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

@@ -0,0 +1,14 @@
+import { createClasses } from "../../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder-ConfirmationDialog", {
+  paper: {
+    width: 500
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ConfirmationDialog.styles.js.map

package/dist/esm/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.styles.js","sources":["../../../../../src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-ConfirmationDialog\",\n  {\n    paper: {\n      width: 500,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","paper","width"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,qCACA;AAAA,EACEC,OAAO;AAAA,IACLC,OAAO;AAAA,EACT;AACF,CACF;"}

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

@@ -23,19 +23,19 @@ const HvQueryBuilder = ({
   const [state, dispatchAction] = useReducer(reducer, query, (initialState2) => initialState2 || emptyGroup());
   const initialState = query === state;
   const [prevState, setPrevState] = useState();
-  const defaultcontext = useContext(QueryBuilderContext);
+  const defaultContext = useContext(QueryBuilderContext);
   const context = useMemo(() => ({
     dispatchAction,
     askAction,
     attributes,
     /* eslint-disable react/destructuring-assignment */
-    operators: operators ?? defaultcontext.operators,
-    combinators: combinators ?? defaultcontext.combinators,
-    maxDepth: maxDepth ?? defaultcontext.maxDepth,
-    labels: labels ?? defaultcontext.labels,
+    operators: operators ?? defaultContext.operators,
+    combinators: combinators ?? defaultContext.combinators,
+    maxDepth: maxDepth ?? defaultContext.maxDepth,
+    labels: labels ?? defaultContext.labels,
     initialTouched: initialState,
     readOnly
-  }), [attributes, operators, defaultcontext.operators, defaultcontext.combinators, defaultcontext.maxDepth, defaultcontext.labels, combinators, maxDepth, labels, readOnly, initialState]);
+  }), [attributes, operators, defaultContext.operators, defaultContext.combinators, defaultContext.maxDepth, defaultContext.labels, combinators, maxDepth, labels, readOnly, initialState]);
   useEffect(() => {
     if (currentAttributes.current == null) {
       currentAttributes.current = attributes;

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { HvQueryBuilderClasses } from \"./queryBuilderClasses\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\n\nexport interface HvQueryBuilderProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * **PLEASE NOTE**: This component implementation is still a WIP. There might be breaking changes.\n */\nexport const HvQueryBuilder = ({\n  attributes,\n  query,\n  onChange,\n  operators,\n  combinators,\n  maxDepth = 1,\n  labels,\n  readOnly = false,\n  classes,\n}: HvQueryBuilderProps) => {\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultcontext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultcontext.operators,\n      combinators: combinators ?? defaultcontext.combinators,\n      maxDepth: maxDepth ?? defaultcontext.maxDepth,\n      labels: labels ?? defaultcontext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultcontext.operators,\n      defaultcontext.combinators,\n      defaultcontext.maxDepth,\n      defaultcontext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultcontext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","_jsxs","Provider","value","children","_jsx","RuleGroup","level","id","combinator","rules","ConfirmationDialog","isOpen","onConfirm","onCancel","title","dialog","dialogTitle","message","dialogMessage","confirmButtonLabel","dialogConfirm","cancelButtonLabel","dialogCancel","closeButtonTooltip","dialogCloseTooltip"],"mappings":";;;;;;;;;AAqEO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,WAAW;AAAA,EACXC;AACmB,MAAM;AACzB,QAAM,CAACC,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAhB,OACCiB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAejB,UAAUa;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAV;AAAAA;AAAAA,IAEAG,WAAWA,aAAamB,eAAenB;AAAAA,IACvCC,aAAaA,eAAekB,eAAelB;AAAAA,IAC3CC,UAAUA,YAAYiB,eAAejB;AAAAA,IACrCC,QAAQA,UAAUgB,eAAehB;AAAAA,IACjCqB,gBAAgBT;AAAAA,IAChBX;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAmB,eAAenB,WACfmB,eAAelB,aACfkB,eAAejB,UACfiB,eAAehB,QACfF,aACAC,UACAC,QACAC,UACAW,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAU7B;AAAAA,IAAAA,WACnBY,kBAAkBiB,YAAY7B,YAAY;AAEnDY,wBAAkBiB,UAAU7B;AACb,qBAAA;AAAA,QAAE8B,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC9B,UAAU,CAAC;AAGf4B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAchB,QAAQ,CAAC;AAE7C,QAAMgC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAInBK,SAAAA,qBAAChB,oBAAoBiB,UAAQ;AAAA,IAACC,OAAOjB;AAAAA,IAAQkB,UAAA,CAC3CC,oBAACC,WAAS;AAAA,MACRC,OAAO;AAAA,MACPC,IAAIjC,MAAMiC;AAAAA,MACVC,YAAYlC,MAAMkC;AAAAA,MAClBC,OAAOnC,MAAMmC;AAAAA,MACbzC;AAAAA,IAAAA,CACD,GACDoC,oBAACM,oBAAkB;AAAA,MACjBC,QAAQ1C,iBAAiB;AAAA,MACzB2C,WAAWlB;AAAAA,MACXmB,UAAUd;AAAAA,MACVe,QAAO7C,+CAAe8C,OAAOC,gBAAe;AAAA,MAC5CC,UAAShD,+CAAe8C,OAAOG,kBAAiB;AAAA,MAChDC,qBAAoBlD,+CAAe8C,OAAOK,kBAAiB;AAAA,MAC3DC,oBAAmBpD,+CAAe8C,OAAOO,iBAAgB;AAAA,MACzDC,qBAAoBtD,+CAAe8C,OAAOS,uBAAsB;AAAA,IAAA,CACjE,CAAC;AAAA,EAAA,CAC0B;AAElC;"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = Partial<ExtractNames<typeof useClasses>>;\n\nexport interface HvQueryBuilderProps {\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n */\nexport const HvQueryBuilder = ({\n  attributes,\n  query,\n  onChange,\n  operators,\n  combinators,\n  maxDepth = 1,\n  labels,\n  readOnly = false,\n  classes,\n}: HvQueryBuilderProps) => {\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultContext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultContext.operators,\n      combinators: combinators ?? defaultContext.combinators,\n      maxDepth: maxDepth ?? defaultContext.maxDepth,\n      labels: labels ?? defaultContext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultContext.operators,\n      defaultContext.combinators,\n      defaultContext.maxDepth,\n      defaultContext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultContext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","_jsxs","Provider","value","children","_jsx","RuleGroup","level","id","combinator","rules","ConfirmationDialog","isOpen","onConfirm","onCancel","title","dialog","dialogTitle","message","dialogMessage","confirmButtonLabel","dialogConfirm","cancelButtonLabel","dialogCancel","closeButtonTooltip","dialogCloseTooltip"],"mappings":";;;;;;;;;AA2EO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,WAAW;AAAA,EACXC;AACmB,MAAM;AACzB,QAAM,CAACC,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAhB,OACCiB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAejB,UAAUa;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAV;AAAAA;AAAAA,IAEAG,WAAWA,aAAamB,eAAenB;AAAAA,IACvCC,aAAaA,eAAekB,eAAelB;AAAAA,IAC3CC,UAAUA,YAAYiB,eAAejB;AAAAA,IACrCC,QAAQA,UAAUgB,eAAehB;AAAAA,IACjCqB,gBAAgBT;AAAAA,IAChBX;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAmB,eAAenB,WACfmB,eAAelB,aACfkB,eAAejB,UACfiB,eAAehB,QACfF,aACAC,UACAC,QACAC,UACAW,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAU7B;AAAAA,IAAAA,WACnBY,kBAAkBiB,YAAY7B,YAAY;AAEnDY,wBAAkBiB,UAAU7B;AACb,qBAAA;AAAA,QAAE8B,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC9B,UAAU,CAAC;AAGf4B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAchB,QAAQ,CAAC;AAE7C,QAAMgC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAInBK,SAAAA,qBAAChB,oBAAoBiB,UAAQ;AAAA,IAACC,OAAOjB;AAAAA,IAAQkB,UAAA,CAC3CC,oBAACC,WAAS;AAAA,MACRC,OAAO;AAAA,MACPC,IAAIjC,MAAMiC;AAAAA,MACVC,YAAYlC,MAAMkC;AAAAA,MAClBC,OAAOnC,MAAMmC;AAAAA,MACbzC;AAAAA,IAAAA,CACD,GACDoC,oBAACM,oBAAkB;AAAA,MACjBC,QAAQ1C,iBAAiB;AAAA,MACzB2C,WAAWlB;AAAAA,MACXmB,UAAUd;AAAAA,MACVe,QAAO7C,+CAAe8C,OAAOC,gBAAe;AAAA,MAC5CC,UAAShD,+CAAe8C,OAAOG,kBAAiB;AAAA,MAChDC,qBAAoBlD,+CAAe8C,OAAOK,kBAAiB;AAAA,MAC3DC,oBAAmBpD,+CAAe8C,OAAOO,iBAAgB;AAAA,MACzDC,qBAAoBtD,+CAAe8C,OAAOS,uBAAsB;AAAA,IAAA,CACjE,CAAC;AAAA,EAAA,CAC0B;AAElC;"}

package/dist/esm/components/QueryBuilder/{RuleGroup/RuleGroup.styles.js → QueryBuilder.styles.js}

@@ -1,6 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import queryBuilderClasses from "../queryBuilderClasses.js";
-const styles = {
+import { createClasses } from "../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder", {
+  /** Styles applied to the component root class. */
   root: {
     position: "relative",
     padding: theme.space.sm,
@@ -8,6 +12,15 @@ const styles = {
     marginBottom: 32,
     border: theme.queryBuilder.border
   },
+  /** Styles applied to the top group container. */
+  topGroup: {
+    margin: theme.space.sm,
+    backgroundColor: "transparent",
+    maxWidth: "100%",
+    minWidth: 740,
+    paddingBottom: theme.queryBuilder.topGroupPaddingBottom
+  },
+  /** Styles applied to the sub group containers. */
   subGroup: {
     margin: "40px 14px 32px 20px",
     minHeight: 120,
@@ -23,7 +36,7 @@ const styles = {
       top: -38,
       left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition
     },
-    [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {
+    ":not($topRulesContainer)>&:last-child::after": {
       content: '""',
       position: "absolute",
       zIndex: 1,
@@ -34,48 +47,33 @@ const styles = {
       left: `calc(${theme.space.sm} + 2)`
     }
   },
-  topGroup: {
-    margin: theme.space.sm,
-    backgroundColor: "transparent",
-    maxWidth: "100%",
-    minWidth: 740,
-    paddingBottom: theme.queryBuilder.topGroupPaddingBottom
-  },
+  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */
   combinator: {
     minWidth: 80
   },
+  /** Styles applied to the multi-button combinator container on the top group. */
   topCombinator: {
     position: "absolute",
     top: `calc( -1 * ${theme.space.sm})`,
     left: `calc( -1 * ${theme.space.sm})`
   },
+  /** Styles applied to each combinator button. */
   combinatorButton: {},
-  actionButtonContainer: {
-    marginLeft: "auto",
-    "&>*": {
-      marginLeft: theme.space.sm
-    }
-  },
-  topActionButtonContainer: {
-    position: "absolute",
-    bottom: theme.queryBuilder.topActionButtonContainerBottom,
-    right: theme.queryBuilder.topActionButtonContainerRight
-  },
-  buttonBackground: {
-    backgroundColor: theme.colors.atmo2,
-    display: "inline-flex"
-  },
+  /** Styles applied to the remove button.  */
   removeButton: {},
+  /** Styles applied to the remove button on the top group. */
   topRemoveButton: {
     position: "absolute",
     top: -16,
     right: -16
   },
+  /** Styles applied to the remove button when disabled on the top group. */
   topRemoveButtonDisabled: {
     backgroundColor: theme.colors.atmo2
   },
+  /** Styles applied to the rules container. */
   rulesContainer: {},
-  topRulesContainer: {},
+  /** Styles applied to the sub rules container. */
   subRulesContainer: {
     borderLeft: theme.queryBuilder.border,
     marginLeft: theme.space.sm,
@@ -85,9 +83,30 @@ const styles = {
     position: "relative",
     left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,
     width: "100%"
+  },
+  /** Styles applied to the action button container. */
+  actionButtonContainer: {
+    marginLeft: "auto",
+    "&>*": {
+      marginLeft: theme.space.sm
+    }
+  },
+  /** Styles applied to the top action button container. */
+  topActionButtonContainer: {
+    position: "absolute",
+    bottom: theme.queryBuilder.topActionButtonContainerBottom,
+    right: theme.queryBuilder.topActionButtonContainerRight
+  },
+  /** Styles applied to the top rules container. */
+  topRulesContainer: {},
+  /** Styles applied to the background of buttons to remove transparency */
+  buttonBackground: {
+    backgroundColor: theme.colors.atmo2,
+    display: "inline-flex"
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
-//# sourceMappingURL=RuleGroup.styles.js.map
+//# sourceMappingURL=QueryBuilder.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: theme.queryBuilder.border,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: theme.queryBuilder.topGroupPaddingBottom,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: -38,\n      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: theme.queryBuilder.border,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: theme.queryBuilder.topActionButtonContainerBottom,\n    right: theme.queryBuilder.topActionButtonContainerRight,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","queryBuilder","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","topGroupPaddingBottom","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","ruleSubGroupLeftConnectorPosition","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","colors","atmo2","rulesContainer","subRulesContainer","marginLeft","md","paddingLeft","paddingTop","ruleSubGroupContainerLeftConnectorPosition","actionButtonContainer","topActionButtonContainer","bottom","topActionButtonContainerBottom","topActionButtonContainerRight","topRulesContainer","buttonBackground","display"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAQL,MAAMM,aAAaD;AAAAA,EAC7B;AAAA;AAAA,EAEAE,UAAU;AAAA,IACRC,QAAQR,MAAMC,MAAMC;AAAAA,IACpBO,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAeZ,MAAMM,aAAaO;AAAAA,EACpC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAcpB,MAAMM,aAAaD;AAAAA,MACjCgB,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAMvB,MAAMM,aAAakB;AAAAA,IAC3B;AAAA,IACA,gDAAgD;AAAA,MAC9CR,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAO,QAAOvB,MAAMC,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEd,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Be,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVwB,KAAM,cAAatB,MAAMC,MAAMC;AAAAA,IAC/BqB,MAAO,cAAavB,MAAMC,MAAMC;AAAAA,EAClC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYwB,KAAK;AAAA,IAAKQ,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAEtB,iBAAiBT,MAAMgC,OAAOC;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBd,YAAYrB,MAAMM,aAAaD;AAAAA,IAC/B+B,YAAYpC,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,MAAMC,MAAMoC;AAAAA,IAC1BC,aAAatC,MAAMC,MAAMC;AAAAA,IACzBqC,YAAY;AAAA,IACZzC,UAAU;AAAA,IACVyB,MAAMvB,MAAMM,aAAakC;AAAAA,IACzBtB,OAAO;AAAA,EACT;AAAA;AAAA,EAEAuB,uBAAuB;AAAA,IACrBL,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYpC,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAwC,0BAA0B;AAAA,IACxB5C,UAAU;AAAA,IACV6C,QAAQ3C,MAAMM,aAAasC;AAAAA,IAC3Bd,OAAO9B,MAAMM,aAAauC;AAAAA,EAC5B;AAAA;AAAA,EAEAC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBtC,iBAAiBT,MAAMgC,OAAOC;AAAAA,IAC9Be,SAAS;AAAA,EACX;AACF,CAAC;"}

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

@@ -1,10 +1,8 @@
-import { ClassNames } from "@emotion/react";
 import { Delete } from "@hitachivantara/uikit-react-icons";
 import { useTheme, useMediaQuery } from "@mui/material";
 import { useContext, useMemo } from "react";
 import { QueryBuilderContext } from "../Context.js";
-import { styles } from "./Rule.styles.js";
-import ruleClasses from "./ruleClasses.js";
+import { useClasses } from "./Rule.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import withTooltip from "../../../hocs/withTooltip.js";
 import { HvGrid } from "../../Grid/Grid.js";
@@ -21,6 +19,10 @@ const Rule = ({
   disabled,
   isInvalid
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses();
   const context = useContext(QueryBuilderContext);
   const theme = useTheme();
   const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
@@ -43,65 +45,62 @@ const Rule = ({
   }, [attribute, attributes, combinator, operators]);
   const shouldShowValueInput = operator !== "Empty" && operator !== "IsNotEmpty";
   const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, {}), labels.rule.delete.tooltip, "bottom");
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs(HvGrid, {
-      container: true,
-      className: cx(ruleClasses.root, css(styles.root), isMdDown ? cx(ruleClasses.isMdDown, css(styles.isMdDown)) : ""),
-      spacing: 0,
-      wrap: "nowrap",
-      children: [/* @__PURE__ */ jsx(HvGrid, {
-        item: true,
-        xs: 2,
-        lg: 3,
-        children: /* @__PURE__ */ jsx(Attribute, {
-          attribute,
-          id,
-          disabled,
-          isInvalid
-        })
-      }), attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, {
-        item: true,
-        xs: 2,
-        lg: 3,
-        children: /* @__PURE__ */ jsx(Operator, {
-          id,
-          combinator,
-          attribute,
-          operator
-        })
-      }), attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, {
-        item: true,
-        xs: true,
-        children: shouldShowValueInput && /* @__PURE__ */ jsx(Value, {
-          attribute,
-          id,
-          operator,
-          value
-        })
-      }), /* @__PURE__ */ jsx(HvGrid, {
-        item: true,
-        className: cx(ruleClasses.actionsContainer, css(styles.actionsContainer)),
-        children: /* @__PURE__ */ jsx(HvButton, {
-          icon: true,
-          "aria-label": labels.rule.delete.ariaLabel,
-          onClick: () => {
-            askAction({
-              actions: [{
-                type: "remove-node",
-                id
-              }],
-              dialog: labels.rule.delete
-            });
-          },
-          disabled: readOnly,
-          variant: "secondaryGhost",
-          children: /* @__PURE__ */ jsx(DeleteIcon, {})
-        })
-      })]
-    })
+  return /* @__PURE__ */ jsxs(HvGrid, {
+    container: true,
+    className: cx(classes.root, {
+      [classes.isMdDown]: isMdDown
+    }),
+    spacing: 0,
+    wrap: "nowrap",
+    children: [/* @__PURE__ */ jsx(HvGrid, {
+      item: true,
+      xs: 2,
+      lg: 3,
+      children: /* @__PURE__ */ jsx(Attribute, {
+        attribute,
+        id,
+        disabled,
+        isInvalid
+      })
+    }), attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, {
+      item: true,
+      xs: 2,
+      lg: 3,
+      children: /* @__PURE__ */ jsx(Operator, {
+        id,
+        combinator,
+        attribute,
+        operator
+      })
+    }), attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, {
+      item: true,
+      xs: true,
+      children: shouldShowValueInput && /* @__PURE__ */ jsx(Value, {
+        attribute,
+        id,
+        operator,
+        value
+      })
+    }), /* @__PURE__ */ jsx(HvGrid, {
+      item: true,
+      className: classes.actionsContainer,
+      children: /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        "aria-label": labels.rule.delete.ariaLabel,
+        onClick: () => {
+          askAction({
+            actions: [{
+              type: "remove-node",
+              id
+            }],
+            dialog: labels.rule.delete
+          });
+        },
+        disabled: readOnly,
+        variant: "secondaryGhost",
+        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+      })
+    })]
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { HvButton, HvGrid } from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport { useContext, useMemo } from \"react\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { styles } from \"./Rule.styles\";\nimport ruleClasses from \"./ruleClasses\";\nimport { Value } from \"./Value\";\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n}\n\nexport const Rule = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n  value,\n  disabled,\n  isInvalid,\n}: RuleProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvGrid\n          container\n          className={cx(\n            ruleClasses.root,\n            css(styles.root),\n            isMdDown ? cx(ruleClasses.isMdDown, css(styles.isMdDown)) : \"\"\n          )}\n          spacing={0}\n          wrap=\"nowrap\"\n        >\n          <HvGrid item xs={2} lg={3}>\n            <Attribute\n              attribute={attribute}\n              id={id}\n              disabled={disabled}\n              isInvalid={isInvalid}\n            />\n          </HvGrid>\n          {attribute != null && availableOperators > 0 && (\n            <HvGrid item xs={2} lg={3}>\n              <Operator\n                id={id}\n                combinator={combinator}\n                attribute={attribute}\n                operator={operator}\n              />\n            </HvGrid>\n          )}\n          {attribute != null &&\n            (operator != null || availableOperators === 0) && (\n              <HvGrid item xs>\n                {shouldShowValueInput && (\n                  <Value\n                    attribute={attribute}\n                    id={id}\n                    operator={operator}\n                    value={value}\n                  />\n                )}\n              </HvGrid>\n            )}\n          <HvGrid\n            item\n            className={cx(\n              ruleClasses.actionsContainer,\n              css(styles.actionsContainer)\n            )}\n          >\n            <HvButton\n              icon\n              aria-label={labels.rule.delete.ariaLabel}\n              onClick={() => {\n                askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                });\n              }}\n              disabled={readOnly}\n              variant=\"secondaryGhost\"\n            >\n              <DeleteIcon />\n            </HvButton>\n          </HvGrid>\n        </HvGrid>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","_jsx","Delete","rule","delete","tooltip","ClassNames","children","css","cx","HvGrid","container","className","ruleClasses","root","styles","spacing","wrap","xs","lg","Attribute","Operator","Value","actionsContainer","HvButton","icon","ariaLabel","onClick","actions","dialog","variant"],"mappings":"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"}
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { HvButton, HvGrid } from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\n\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\n\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { useClasses } from \"./Rule.styles\";\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n}\n\nexport const Rule = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n  value,\n  disabled,\n  isInvalid,\n}: RuleProps) => {\n  const { classes, cx } = useClasses();\n\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() => {\n            askAction({\n              actions: [{ type: \"remove-node\", id }],\n              dialog: labels.rule.delete,\n            });\n          }}\n          disabled={readOnly}\n          variant=\"secondaryGhost\"\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","classes","cx","useClasses","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","_jsx","Delete","rule","delete","tooltip","HvGrid","container","className","root","spacing","wrap","children","xs","lg","Attribute","Operator","Value","actionsContainer","HvButton","icon","ariaLabel","onClick","actions","dialog","variant"],"mappings":"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"}

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

@@ -1,6 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import queryBuilderClasses from "../queryBuilderClasses.js";
-const styles = {
+import { staticClasses as staticClasses$1 } from "../QueryBuilder.styles.js";
+import { createClasses } from "../../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder-Rule", {
   root: {
     position: "relative",
     marginTop: theme.space.xs,
@@ -23,7 +27,7 @@ const styles = {
       top: 0,
       left: theme.queryBuilder.ruleLeftConnectorPosition
     },
-    [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {
+    [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
       content: '""',
       position: "absolute",
       zIndex: 1,
@@ -46,8 +50,9 @@ const styles = {
       marginRight: `calc(${theme.space.md} / 2)`
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Rule.styles.js.map

package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport queryBuilderClasses from \"../queryBuilderClasses\";\nimport { HvRuleClasses } from \"./ruleClasses\";\n\nexport const styles: Partial<Record<keyof HvRuleClasses, CSSInterpolation>> = {\n  root: {\n    position: \"relative\",\n    marginTop: theme.space.xs,\n\n    minHeight: 94,\n\n    \"&>div:not(:last-child)\": {\n      marginRight: theme.space.md,\n    },\n\n    // hide required * as all fields are required\n    \"& label>span[aria-hidden]\": {\n      visibility: \"hidden\",\n    },\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: theme.queryBuilder.ruleConnectorHorizontalSize,\n      height: theme.queryBuilder.ruleConnectorHeight,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: theme.queryBuilder.ruleLeftConnectorPosition,\n    },\n    [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: theme.queryBuilder.ruleConnectorHorizontalSize,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: theme.queryBuilder.ruleLeftConnectorPosition,\n    },\n  },\n  actionsContainer: {\n    marginLeft: \"auto\",\n    marginTop: theme.queryBuilder.actionsContainerMarginTop,\n\n    \"&>:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  isMdDown: {\n    \"&>div:not(:last-child)\": {\n      marginRight: `calc(${theme.space.md} / 2)`,\n    },\n  },\n};\n"],"names":["styles","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","queryBuilder","ruleConnectorHorizontalSize","height","ruleConnectorHeight","borderBottom","border","borderLeft","top","left","ruleLeftConnectorPosition","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","actionsContainerMarginTop","isMdDown"],"mappings":";;AAKO,MAAMA,SAAiE;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,oBAAoBC,wCAAwC,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,MAAMC,MAAMI;AAAAA,IACnC;AAAA,EACF;AACF;"}
+{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: theme.queryBuilder.ruleConnectorHeight,\n\n        borderBottom: theme.queryBuilder.border,\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: \"100%\",\n\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: theme.queryBuilder.actionsContainerMarginTop,\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","queryBuilder","ruleConnectorHorizontalSize","height","ruleConnectorHeight","borderBottom","border","borderLeft","top","left","ruleLeftConnectorPosition","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","actionsContainerMarginTop","isMdDown"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,gBAAoBC,wCAAwC,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,MAAMC,MAAMI;AAAAA,IACnC;AAAA,EACF;AACF,CACF;"}