@hitachivantara/uikit-react-core 5.16.0 → 5.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"NumericValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx"],"sourcesContent":["import { memo, useCallback, useContext, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { ClassNames } from \"@emotion/react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport { HvInput } from \"../../../..\";\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { styles } from \"./Numeric.styles\";\nimport numericValueClasses from \"./numericValueClasses\";\n\nexport interface NumericValueProps {\n  id: number;\n  value: any;\n  operator: string;\n  initialTouched?: boolean;\n}\n\nexport const NumericValue = ({\n  id,\n  value,\n  operator,\n  initialTouched = false,\n}: NumericValueProps) => {\n  const isRange = operator === \"range\";\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const onSingleValueChange = useCallback(\n    (evt, data) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: Number.isNaN(numericData) ? data : numericData,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  const onRangeValueChange = useCallback(\n    (evt, data, from = true) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      const currentValue = value;\n      const numericRange = {\n        from: currentValue?.from,\n        to: currentValue?.to,\n      };\n      if (from) {\n        numericRange.from = Number.isNaN(numericData) ? data : numericData;\n      } else {\n        numericRange.to = Number.isNaN(numericData) ? data : numericData;\n      }\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: numericRange,\n      });\n    },\n    [dispatchAction, id, value]\n  );\n\n  const [touchedNumeric, setTouchedNumeric] = useState(initialTouched);\n  const [touchedNumericTo, setTouchedNumericTo] = useState(initialTouched);\n\n  const elementId = uniqueId(\"numeric\");\n\n  let numericValidation: \"required\" | \"invalid\" | null = null;\n  let rightValidation: \"required\" | \"invalid\" | \"greaterThan\" | \"equal\" | null =\n    null;\n\n  if (touchedNumeric || touchedNumericTo) {\n    if (value === undefined || value?.toString() === \"\") {\n      if (touchedNumeric) {\n        numericValidation = \"required\";\n      }\n      if (touchedNumericTo) {\n        rightValidation = \"required\";\n      }\n    } else if (!isRange) {\n      if (Number.isNaN(Number(value))) {\n        numericValidation = \"invalid\";\n      }\n    } else if (isRange) {\n      const rangeValue = value;\n      if (\n        rangeValue?.from === undefined ||\n        rangeValue?.from?.toString() === \"\"\n      ) {\n        numericValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.from))) {\n        numericValidation = \"invalid\";\n      }\n\n      if (rangeValue?.to === undefined || rangeValue?.to?.toString() === \"\") {\n        rightValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.to))) {\n        rightValidation = \"invalid\";\n      } else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {\n        rightValidation = \"greaterThan\";\n      } else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {\n        rightValidation = \"equal\";\n      }\n    }\n  }\n\n  const numericStatus = numericValidation != null ? \"invalid\" : \"valid\";\n  const rightStatus = rightValidation != null ? \"invalid\" : \"valid\";\n\n  const renderRangeInputs = (rangeValue) => (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            numericValueClasses.rangeContainer,\n            css(styles.rangeContainer),\n            isMdDown\n              ? cx(numericValueClasses.isMdDown, css(styles.isMdDown))\n              : \"\"\n          )}\n        >\n          <div\n            className={cx(\n              numericValueClasses.inputContainer,\n              css(styles.inputContainer)\n            )}\n          >\n            <HvInput\n              label={labels.rule.value.numeric.range.leftLabel}\n              className={cx(numericValueClasses.input, css(styles.input))}\n              id={`${elementId}-numeric-from`}\n              name={`${elementId}-numeric-from`}\n              value={rangeValue?.from?.toString() || \"\"}\n              onChange={(event, data) => onRangeValueChange(event, data)}\n              onBlur={() => {\n                setTouchedNumeric(true);\n              }}\n              onKeyDown={(e: any) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                }\n              }}\n              status={!touchedNumeric ? \"standBy\" : numericStatus}\n              statusMessage={\n                numericValidation\n                  ? labels.rule.value.numeric.validation[numericValidation]\n                  : \"\"\n              }\n              required\n              inputProps={{\n                autoComplete: \"off\",\n              }}\n              placeholder={labels.rule.value.numeric.placeholder}\n              readOnly={readOnly}\n            />\n          </div>\n          <div\n            className={cx(\n              numericValueClasses.inputContainer,\n              css(styles.inputContainer)\n            )}\n          >\n            <HvInput\n              label={labels.rule.value.numeric.range.rightLabel}\n              className={cx(numericValueClasses.input, css(styles.input))}\n              id={`${elementId}-numeric-to`}\n              name={`${elementId}-numeric-to`}\n              value={rangeValue?.to?.toString() || \"\"}\n              onChange={(event, data) => onRangeValueChange(event, data, false)}\n              onBlur={() => {\n                setTouchedNumericTo(true);\n              }}\n              onKeyDown={(e: any) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                }\n              }}\n              status={!touchedNumericTo ? \"standBy\" : rightStatus}\n              statusMessage={\n                rightValidation\n                  ? labels.rule.value.numeric.validation[rightValidation]\n                  : \"\"\n              }\n              required\n              inputProps={{\n                autoComplete: \"off\",\n              }}\n              placeholder={labels.rule.value.numeric.placeholder}\n              readOnly={readOnly}\n            />\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div className={cx(numericValueClasses.root, css(styles.root))}>\n          {isRange && renderRangeInputs(value || {})}\n          {!isRange && (\n            <div\n              className={cx(\n                numericValueClasses.inputContainer,\n                css(styles.inputContainer)\n              )}\n            >\n              <HvInput\n                label={labels.rule.value.numeric.label}\n                className={cx(numericValueClasses.input, css(styles.input))}\n                id={`${elementId}-numeric`}\n                name={`${elementId}-numeric`}\n                value={value ? value.toString() : \"\"}\n                onChange={onSingleValueChange}\n                onBlur={() => {\n                  setTouchedNumeric(true);\n                }}\n                onKeyDown={(e: any) => {\n                  if (e.key === \"Enter\") {\n                    e.preventDefault();\n                  }\n                }}\n                status={!touchedNumeric ? \"standBy\" : numericStatus}\n                required\n                inputProps={{\n                  autoComplete: \"off\",\n                }}\n                placeholder={labels.rule.value.numeric.placeholder}\n                statusMessage={\n                  numericValidation\n                    ? labels.rule.value.numeric.validation[numericValidation]\n                    : \"\"\n                }\n                readOnly={readOnly}\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default memo(NumericValue);\n"],"names":["NumericValue","id","value","operator","initialTouched","isRange","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","onSingleValueChange","useCallback","evt","data","numericData","isEmpty","Number","type","isNaN","onRangeValueChange","from","currentValue","numericRange","to","touchedNumeric","setTouchedNumeric","useState","touchedNumericTo","setTouchedNumericTo","elementId","uniqueId","numericValidation","rightValidation","undefined","toString","rangeValue","numericStatus","rightStatus","renderRangeInputs","_jsx","ClassNames","children","css","cx","className","numericValueClasses","rangeContainer","styles","inputContainer","HvInput","label","rule","numeric","range","leftLabel","input","name","onChange","event","onBlur","onKeyDown","e","key","preventDefault","status","statusMessage","validation","required","inputProps","autoComplete","placeholder","rightLabel","root","memo"],"mappings":"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"}
+{"version":3,"file":"NumericValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx"],"sourcesContent":["import { memo, useCallback, useContext, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvInput } from \"@core/components\";\n\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { useClasses } from \"./Numeric.styles\";\n\nexport interface NumericValueProps {\n  id: number;\n  value: any;\n  operator: string;\n  initialTouched?: boolean;\n}\n\nexport const NumericValue = ({\n  id,\n  value,\n  operator,\n  initialTouched = false,\n}: NumericValueProps) => {\n  const { classes, cx } = useClasses();\n\n  const isRange = operator === \"range\";\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const onSingleValueChange = useCallback(\n    (evt, data) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: Number.isNaN(numericData) ? data : numericData,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  const onRangeValueChange = useCallback(\n    (evt, data, from = true) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      const currentValue = value;\n      const numericRange = {\n        from: currentValue?.from,\n        to: currentValue?.to,\n      };\n      if (from) {\n        numericRange.from = Number.isNaN(numericData) ? data : numericData;\n      } else {\n        numericRange.to = Number.isNaN(numericData) ? data : numericData;\n      }\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: numericRange,\n      });\n    },\n    [dispatchAction, id, value]\n  );\n\n  const [touchedNumeric, setTouchedNumeric] = useState(initialTouched);\n  const [touchedNumericTo, setTouchedNumericTo] = useState(initialTouched);\n\n  const elementId = uniqueId(\"numeric\");\n\n  let numericValidation: \"required\" | \"invalid\" | null = null;\n  let rightValidation: \"required\" | \"invalid\" | \"greaterThan\" | \"equal\" | null =\n    null;\n\n  if (touchedNumeric || touchedNumericTo) {\n    if (value === undefined || value?.toString() === \"\") {\n      if (touchedNumeric) {\n        numericValidation = \"required\";\n      }\n      if (touchedNumericTo) {\n        rightValidation = \"required\";\n      }\n    } else if (!isRange) {\n      if (Number.isNaN(Number(value))) {\n        numericValidation = \"invalid\";\n      }\n    } else if (isRange) {\n      const rangeValue = value;\n      if (\n        rangeValue?.from === undefined ||\n        rangeValue?.from?.toString() === \"\"\n      ) {\n        numericValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.from))) {\n        numericValidation = \"invalid\";\n      }\n\n      if (rangeValue?.to === undefined || rangeValue?.to?.toString() === \"\") {\n        rightValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.to))) {\n        rightValidation = \"invalid\";\n      } else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {\n        rightValidation = \"greaterThan\";\n      } else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {\n        rightValidation = \"equal\";\n      }\n    }\n  }\n\n  const numericStatus = numericValidation != null ? \"invalid\" : \"valid\";\n  const rightStatus = rightValidation != null ? \"invalid\" : \"valid\";\n\n  const renderRangeInputs = (rangeValue) => (\n    <div\n      className={cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown })}\n    >\n      <div className={classes.inputContainer}>\n        <HvInput\n          label={labels.rule.value.numeric.range.leftLabel}\n          className={classes.input}\n          id={`${elementId}-numeric-from`}\n          name={`${elementId}-numeric-from`}\n          value={rangeValue?.from?.toString() || \"\"}\n          onChange={(event, data) => onRangeValueChange(event, data)}\n          onBlur={() => {\n            setTouchedNumeric(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          status={!touchedNumeric ? \"standBy\" : numericStatus}\n          statusMessage={\n            numericValidation\n              ? labels.rule.value.numeric.validation[numericValidation]\n              : \"\"\n          }\n          required\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          placeholder={labels.rule.value.numeric.placeholder}\n          readOnly={readOnly}\n        />\n      </div>\n      <div className={classes.inputContainer}>\n        <HvInput\n          label={labels.rule.value.numeric.range.rightLabel}\n          className={classes.input}\n          id={`${elementId}-numeric-to`}\n          name={`${elementId}-numeric-to`}\n          value={rangeValue?.to?.toString() || \"\"}\n          onChange={(event, data) => onRangeValueChange(event, data, false)}\n          onBlur={() => {\n            setTouchedNumericTo(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          status={!touchedNumericTo ? \"standBy\" : rightStatus}\n          statusMessage={\n            rightValidation\n              ? labels.rule.value.numeric.validation[rightValidation]\n              : \"\"\n          }\n          required\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          placeholder={labels.rule.value.numeric.placeholder}\n          readOnly={readOnly}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {isRange && renderRangeInputs(value || {})}\n      {!isRange && (\n        <div className={classes.inputContainer}>\n          <HvInput\n            label={labels.rule.value.numeric.label}\n            className={classes.input}\n            id={`${elementId}-numeric`}\n            name={`${elementId}-numeric`}\n            value={value ? value.toString() : \"\"}\n            onChange={onSingleValueChange}\n            onBlur={() => {\n              setTouchedNumeric(true);\n            }}\n            onKeyDown={(e: any) => {\n              if (e.key === \"Enter\") {\n                e.preventDefault();\n              }\n            }}\n            status={!touchedNumeric ? \"standBy\" : numericStatus}\n            required\n            inputProps={{\n              autoComplete: \"off\",\n            }}\n            placeholder={labels.rule.value.numeric.placeholder}\n            statusMessage={\n              numericValidation\n                ? labels.rule.value.numeric.validation[numericValidation]\n                : \"\"\n            }\n            readOnly={readOnly}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default memo(NumericValue);\n"],"names":["NumericValue","id","value","operator","initialTouched","classes","cx","useClasses","isRange","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","onSingleValueChange","useCallback","evt","data","numericData","isEmpty","Number","type","isNaN","onRangeValueChange","from","currentValue","numericRange","to","touchedNumeric","setTouchedNumeric","useState","touchedNumericTo","setTouchedNumericTo","elementId","uniqueId","numericValidation","rightValidation","undefined","toString","rangeValue","numericStatus","rightStatus","renderRangeInputs","_jsxs","className","rangeContainer","children","_jsx","inputContainer","HvInput","label","rule","numeric","range","leftLabel","input","name","onChange","event","onBlur","onKeyDown","e","key","preventDefault","status","statusMessage","validation","required","inputProps","autoComplete","placeholder","rightLabel","root","memo"],"mappings":"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"}

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

@@ -1,8 +1,6 @@
-import { ClassNames } from "@emotion/react";
-import { memo, useContext, useState } from "react";
+import { useContext, useState, memo } from "react";
 import { QueryBuilderContext } from "../../../Context.js";
-import { styles } from "./TextValue.styles.js";
-import textValueClasses from "./textValueClasses.js";
+import { useClasses } from "./TextValue.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { HvInput } from "../../../../Input/Input.js";
 const TextValue = ({
@@ -10,6 +8,9 @@ const TextValue = ({
   value = "",
   initialTouched = false
 }) => {
+  const {
+    classes
+  } = useClasses();
   const context = useContext(QueryBuilderContext);
   const {
     labels,
@@ -20,42 +21,37 @@ const TextValue = ({
   const isValid = value != null && value.toString().trim() !== "";
   let status = isValid ? "valid" : "invalid";
   status = !touched ? "standBy" : status;
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(HvInput, {
-      className: cx(textValueClasses.location, css(styles.location)),
-      label: labels.rule.value.text.label,
-      required: true,
-      status,
-      statusMessage: labels.rule.value.text.validation.required,
-      value,
-      inputProps: {
-        autoComplete: "off"
-      },
-      onChange: (t, v) => {
-        dispatchAction({
-          type: "set-value",
-          id,
-          value: v
-        });
-      },
-      onBlur: () => {
-        setTouched(true);
-      },
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-        }
-      },
-      placeholder: "—",
-      readOnly
-    })
+  return /* @__PURE__ */ jsx(HvInput, {
+    className: classes.location,
+    label: labels.rule.value.text.label,
+    required: true,
+    status,
+    statusMessage: labels.rule.value.text.validation.required,
+    value,
+    inputProps: {
+      autoComplete: "off"
+    },
+    onChange: (t, v) => {
+      dispatchAction({
+        type: "set-value",
+        id,
+        value: v
+      });
+    },
+    onBlur: () => {
+      setTouched(true);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+      }
+    },
+    placeholder: "—",
+    readOnly
   });
 };
-const TextValue$1 = memo(TextValue);
+memo(TextValue);
 export {
-  TextValue$1 as default
+  TextValue
 };
 //# sourceMappingURL=TextValue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.tsx"],"sourcesContent":["import { HvFormStatus, HvInput } from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { memo, useContext, useState } from \"react\";\n\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { styles } from \"./TextValue.styles\";\nimport textValueClasses from \"./textValueClasses\";\n\nexport interface TextValueProps {\n  id?: number;\n  value?: any;\n  initialTouched?: boolean;\n}\n\nconst TextValue = ({\n  id,\n  value = \"\",\n  initialTouched = false,\n}: TextValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n  const [touched, setTouched] = useState(initialTouched);\n  const isValid = value != null && value.toString().trim() !== \"\";\n\n  let status: HvFormStatus = isValid ? \"valid\" : \"invalid\";\n  status = !touched ? \"standBy\" : status;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvInput\n          className={cx(textValueClasses.location, css(styles.location))}\n          label={labels.rule.value.text.label}\n          required\n          status={status}\n          statusMessage={labels.rule.value.text.validation.required}\n          value={value}\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          onChange={(t, v) => {\n            dispatchAction({\n              type: \"set-value\",\n              id,\n              value: v,\n            });\n          }}\n          onBlur={() => {\n            setTouched(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          placeholder=\"—\"\n          readOnly={readOnly}\n        />\n      )}\n    </ClassNames>\n  );\n};\n\nexport default memo(TextValue);\n"],"names":["TextValue","id","value","initialTouched","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","touched","setTouched","useState","isValid","toString","trim","status","ClassNames","children","css","cx","HvInput","className","textValueClasses","location","styles","label","rule","text","required","statusMessage","validation","inputProps","autoComplete","onChange","t","v","type","onBlur","onKeyDown","e","key","preventDefault","placeholder","memo"],"mappings":";;;;;;;AAcA,MAAMA,YAAYA,CAAC;AAAA,EACjBC;AAAAA,EACAC,QAAQ;AAAA,EACRC,iBAAiB;AACH,MAAM;AACdC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,IAAgBC;AAAAA,EAAaL,IAAAA;AAC7C,QAAM,CAACM,SAASC,UAAU,IAAIC,SAAST,cAAc;AACrD,QAAMU,UAAUX,SAAS,QAAQA,MAAMY,WAAWC,KAAW,MAAA;AAEzDC,MAAAA,SAAuBH,UAAU,UAAU;AACtC,WAAA,CAACH,UAAU,YAAYM;AAEhC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,SAAO;AAAA,MACNC,WAAWF,GAAGG,iBAAiBC,UAAUL,IAAIM,OAAOD,QAAQ,CAAC;AAAA,MAC7DE,OAAOnB,OAAOoB,KAAKzB,MAAM0B,KAAKF;AAAAA,MAC9BG,UAAQ;AAAA,MACRb;AAAAA,MACAc,eAAevB,OAAOoB,KAAKzB,MAAM0B,KAAKG,WAAWF;AAAAA,MACjD3B;AAAAA,MACA8B,YAAY;AAAA,QACVC,cAAc;AAAA,MAChB;AAAA,MACAC,UAAUA,CAACC,GAAGC,MAAM;AACH,uBAAA;AAAA,UACbC,MAAM;AAAA,UACNpC;AAAAA,UACAC,OAAOkC;AAAAA,QAAAA,CACR;AAAA,MACH;AAAA,MACAE,QAAQA,MAAM;AACZ3B,mBAAW,IAAI;AAAA,MACjB;AAAA,MACA4B,WAAWA,CAACC,MAAW;AACjBA,YAAAA,EAAEC,QAAQ,SAAS;AACrBD,YAAEE,eAAe;AAAA,QACnB;AAAA,MACF;AAAA,MACAC,aAAY;AAAA,MACZlC;AAAAA,IAAAA,CACD;AAAA,EAAA,CAEO;AAEhB;AAEA,MAAemC,cAAAA,KAAK5C,SAAS;"}
+{"version":3,"file":"TextValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.tsx"],"sourcesContent":["import { memo, useContext, useState } from \"react\";\n\nimport { HvFormStatus, HvInput } from \"@core/components\";\n\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { useClasses } from \"./TextValue.styles\";\n\nexport interface TextValueProps {\n  id?: number;\n  value?: any;\n  initialTouched?: boolean;\n}\n\nexport const TextValue = ({\n  id,\n  value = \"\",\n  initialTouched = false,\n}: TextValueProps) => {\n  const { classes } = useClasses();\n\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n  const [touched, setTouched] = useState(initialTouched);\n  const isValid = value != null && value.toString().trim() !== \"\";\n\n  let status: HvFormStatus = isValid ? \"valid\" : \"invalid\";\n  status = !touched ? \"standBy\" : status;\n\n  return (\n    <HvInput\n      className={classes.location}\n      label={labels.rule.value.text.label}\n      required\n      status={status}\n      statusMessage={labels.rule.value.text.validation.required}\n      value={value}\n      inputProps={{\n        autoComplete: \"off\",\n      }}\n      onChange={(t, v) => {\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value: v,\n        });\n      }}\n      onBlur={() => {\n        setTouched(true);\n      }}\n      onKeyDown={(e: any) => {\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n        }\n      }}\n      placeholder=\"—\"\n      readOnly={readOnly}\n    />\n  );\n};\n\nexport default memo(TextValue);\n"],"names":["TextValue","id","value","initialTouched","classes","useClasses","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","touched","setTouched","useState","isValid","toString","trim","status","HvInput","className","location","label","rule","text","required","statusMessage","validation","inputProps","autoComplete","onChange","t","v","type","onBlur","onKeyDown","e","key","preventDefault","placeholder","memo"],"mappings":";;;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC,QAAQ;AAAA,EACRC,iBAAiB;AACH,MAAM;AACd,QAAA;AAAA,IAAEC;AAAAA,MAAYC,WAAW;AAEzBC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,IAAgBC;AAAAA,EAAaL,IAAAA;AAC7C,QAAM,CAACM,SAASC,UAAU,IAAIC,SAASX,cAAc;AACrD,QAAMY,UAAUb,SAAS,QAAQA,MAAMc,WAAWC,KAAW,MAAA;AAEzDC,MAAAA,SAAuBH,UAAU,UAAU;AACtC,WAAA,CAACH,UAAU,YAAYM;AAEhC,6BACGC,SAAO;AAAA,IACNC,WAAWhB,QAAQiB;AAAAA,IACnBC,OAAOb,OAAOc,KAAKrB,MAAMsB,KAAKF;AAAAA,IAC9BG,UAAQ;AAAA,IACRP;AAAAA,IACAQ,eAAejB,OAAOc,KAAKrB,MAAMsB,KAAKG,WAAWF;AAAAA,IACjDvB;AAAAA,IACA0B,YAAY;AAAA,MACVC,cAAc;AAAA,IAChB;AAAA,IACAC,UAAUA,CAACC,GAAGC,MAAM;AACH,qBAAA;AAAA,QACbC,MAAM;AAAA,QACNhC;AAAAA,QACAC,OAAO8B;AAAAA,MAAAA,CACR;AAAA,IACH;AAAA,IACAE,QAAQA,MAAM;AACZrB,iBAAW,IAAI;AAAA,IACjB;AAAA,IACAsB,WAAWA,CAACC,MAAW;AACjBA,UAAAA,EAAEC,QAAQ,SAAS;AACrBD,UAAEE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACAC,aAAY;AAAA,IACZ5B;AAAAA,EAAAA,CACD;AAEL;AAEe6B,KAAKxC,SAAS;"}

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

@@ -1,9 +1,14 @@
-const styles = {
+import { createClasses } from "../../../../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder-TextValue", {
   location: {
     flexGrow: 1
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=TextValue.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvTextValueClasses } from \"./textValueClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvTextValueClasses, CSSInterpolation>\n> = {\n  location: {\n    flexGrow: 1,\n  },\n};\n"],"names":["styles","location","flexGrow"],"mappings":"AAGO,MAAMA,SAET;AAAA,EACFC,UAAU;AAAA,IACRC,UAAU;AAAA,EACZ;AACF;"}
+{"version":3,"file":"TextValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-TextValue\",\n  {\n    location: {\n      flexGrow: 1,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","location","flexGrow"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,4BACA;AAAA,EACEC,UAAU;AAAA,IACRC,UAAU;AAAA,EACZ;AACF,CACF;"}

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

@@ -1,9 +1,10 @@
 import { useContext, memo } from "react";
 import { QueryBuilderContext } from "../../Context.js";
-import TextValue from "./TextValue/TextValue.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { BooleanValue } from "./BooleanValue/BooleanValue.js";
+import { TextValue } from "./TextValue/TextValue.js";
+import { DateTimeValue } from "./DateTimeValue/DateTimeValue.js";
 import { NumericValue } from "./NumericValue/NumericValue.js";
+import { BooleanValue } from "./BooleanValue/BooleanValue.js";
 const Value = ({
   id,
   attribute,
@@ -39,9 +40,11 @@ const Value = ({
       });
     }
     case "dateandtime": {
-      return /* @__PURE__ */ jsx(BooleanValue, {
+      return /* @__PURE__ */ jsx(DateTimeValue, {
         id,
-        value: !!valueProp
+        operator,
+        value: valueProp,
+        initialTouched
       });
     }
     case "text":

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

@@ -1 +1 @@
-{"version":3,"file":"Value.js","sources":["../../../../../../src/components/QueryBuilder/Rule/Value/Value.tsx"],"sourcesContent":["import { memo, useContext } from \"react\";\n\nimport { QueryBuilderContext } from \"../../Context\";\nimport { BooleanValue } from \"./BooleanValue\";\nimport { NumericValue } from \"./NumericValue\";\nimport TextValue from \"./TextValue/TextValue\";\n\n// import DateTimeValue from \"./DateTimeValue\";\n\nexport interface ValueProps {\n  id: number;\n  attribute: string;\n  operator: string;\n  value: any;\n}\n\nexport const Value = ({\n  id,\n  attribute,\n  operator,\n  value: valueProp,\n}: ValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { attributes, initialTouched } = context;\n  const value =\n    attribute && attributes ? { ...attributes[attribute] } : { type: null };\n  const { type } = value;\n\n  switch (type) {\n    case \"boolean\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"numeric\": {\n      return (\n        <NumericValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"dateandtime\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"text\":\n    case \"textarea\":\n    default: {\n      return (\n        <TextValue id={id} value={valueProp} initialTouched={initialTouched} />\n      );\n    }\n  }\n};\n\nexport default memo(Value);\n"],"names":["Value","id","attribute","operator","value","valueProp","context","useContext","QueryBuilderContext","attributes","initialTouched","type","BooleanValue","NumericValue","TextValue","memo"],"mappings":";;;;;;AAgBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AACG,MAAM;AACVC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,EAAmBJ,IAAAA;AACjCF,QAAAA,QACJF,aAAaO,aAAa;AAAA,IAAE,GAAGA,WAAWP,SAAS;AAAA,EAAA,IAAM;AAAA,IAAES,MAAM;AAAA,EAAA;AAC7D,QAAA;AAAA,IAAEA;AAAAA,EAASP,IAAAA;AAEjB,UAAQO,MAAI;AAAA,IACV,KAAK,WAAW;AACd,iCAAQC,cAAY;AAAA,QAACX;AAAAA,QAAQG,OAAO,CAAC,CAACC;AAAAA,MAAAA,CAAY;AAAA,IACpD;AAAA,IACA,KAAK,WAAW;AACd,iCACGQ,cAAY;AAAA,QACXZ;AAAAA,QACAE;AAAAA,QACAC,OAAOC;AAAAA,QACPK;AAAAA,MAAAA,CACD;AAAA,IAEL;AAAA,IACA,KAAK,eAAe;AAClB,iCAAQE,cAAY;AAAA,QAACX;AAAAA,QAAQG,OAAO,CAAC,CAACC;AAAAA,MAAAA,CAAY;AAAA,IACpD;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AACP,iCACGS,WAAS;AAAA,QAACb;AAAAA,QAAQG,OAAOC;AAAAA,QAAWK;AAAAA,MAAAA,CAAiC;AAAA,IAE1E;AAAA,EACF;AACF;AAEeK,KAAKf,KAAK;"}
+{"version":3,"file":"Value.js","sources":["../../../../../../src/components/QueryBuilder/Rule/Value/Value.tsx"],"sourcesContent":["import { memo, useContext } from \"react\";\n\nimport { QueryBuilderContext } from \"../../Context\";\nimport { BooleanValue } from \"./BooleanValue\";\nimport { NumericValue } from \"./NumericValue\";\nimport { TextValue } from \"./TextValue\";\nimport { DateTimeValue } from \"./DateTimeValue\";\n\nexport interface ValueProps {\n  id: number;\n  attribute: string;\n  operator: string;\n  value: any;\n}\n\nexport const Value = ({\n  id,\n  attribute,\n  operator,\n  value: valueProp,\n}: ValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { attributes, initialTouched } = context;\n  const value =\n    attribute && attributes ? { ...attributes[attribute] } : { type: null };\n  const { type } = value;\n\n  switch (type) {\n    case \"boolean\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"numeric\": {\n      return (\n        <NumericValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"dateandtime\": {\n      return (\n        <DateTimeValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"text\":\n    case \"textarea\":\n    default: {\n      return (\n        <TextValue id={id} value={valueProp} initialTouched={initialTouched} />\n      );\n    }\n  }\n};\n\nexport default memo(Value);\n"],"names":["Value","id","attribute","operator","value","valueProp","context","useContext","QueryBuilderContext","attributes","initialTouched","type","BooleanValue","NumericValue","DateTimeValue","TextValue","memo"],"mappings":";;;;;;;AAeO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AACG,MAAM;AACVC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,EAAmBJ,IAAAA;AACjCF,QAAAA,QACJF,aAAaO,aAAa;AAAA,IAAE,GAAGA,WAAWP,SAAS;AAAA,EAAA,IAAM;AAAA,IAAES,MAAM;AAAA,EAAA;AAC7D,QAAA;AAAA,IAAEA;AAAAA,EAASP,IAAAA;AAEjB,UAAQO,MAAI;AAAA,IACV,KAAK,WAAW;AACd,iCAAQC,cAAY;AAAA,QAACX;AAAAA,QAAQG,OAAO,CAAC,CAACC;AAAAA,MAAAA,CAAY;AAAA,IACpD;AAAA,IACA,KAAK,WAAW;AACd,iCACGQ,cAAY;AAAA,QACXZ;AAAAA,QACAE;AAAAA,QACAC,OAAOC;AAAAA,QACPK;AAAAA,MAAAA,CACD;AAAA,IAEL;AAAA,IACA,KAAK,eAAe;AAClB,iCACGI,eAAa;AAAA,QACZb;AAAAA,QACAE;AAAAA,QACAC,OAAOC;AAAAA,QACPK;AAAAA,MAAAA,CACD;AAAA,IAEL;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AACP,iCACGK,WAAS;AAAA,QAACd;AAAAA,QAAQG,OAAOC;AAAAA,QAAWK;AAAAA,MAAAA,CAAiC;AAAA,IAE1E;AAAA,EACF;AACF;AAEeM,KAAKhB,KAAK;"}

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

@@ -1,25 +1,27 @@
 import { useContext, useCallback } from "react";
-import { Delete, Info, Add } from "@hitachivantara/uikit-react-icons";
-import { ClassNames } from "@emotion/react";
-import queryBuilderClasses from "../queryBuilderClasses.js";
+import { Add, Delete, Info } from "@hitachivantara/uikit-react-icons";
 import { QueryBuilderContext } from "../Context.js";
-import { styles } from "./RuleGroup.styles.js";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useClasses } from "../QueryBuilder.styles.js";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import withTooltip from "../../../hocs/withTooltip.js";
 import { Rule } from "../Rule/Rule.js";
 import { HvEmptyState } from "../../EmptyState/EmptyState.js";
+import { HvButton } from "../../Button/Button.js";
 import { HvGrid } from "../../Grid/Grid.js";
 import { HvMultiButton } from "../../MultiButton/MultiButton.js";
-import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const RuleGroup = ({
   level = 0,
   id,
   combinator = "and",
   rules = [],
-  classes
+  classes: classesProp = {}
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const context = useContext(QueryBuilderContext);
   const {
     dispatchAction,
@@ -30,180 +32,167 @@ const RuleGroup = ({
     readOnly
   } = context;
   const normalizedMaxDepth = maxDepth - 1;
-  const actionButtons = /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
-      return /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("div", {
-          className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground),
+  const actionButtons = /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.buttonBackground,
+      children: /* @__PURE__ */ jsx(HvButton, {
+        variant: "secondarySubtle",
+        onClick: () => {
+          dispatchAction({
+            type: "add-rule",
+            id
+          });
+        },
+        disabled: readOnly,
+        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        children: level === 0 && ((_b = (_a = labels.query) == null ? void 0 : _a.addRule) == null ? void 0 : _b.label) != null ? (_d = (_c = labels.query) == null ? void 0 : _c.addRule) == null ? void 0 : _d.label : labels.group.addRule.label
+      })
+    }), level <= normalizedMaxDepth && /* @__PURE__ */ jsx("div", {
+      className: classes.buttonBackground,
+      children: /* @__PURE__ */ jsx(HvButton, {
+        variant: "secondarySubtle",
+        onClick: () => {
+          dispatchAction({
+            type: "add-group",
+            id
+          });
+        },
+        disabled: readOnly,
+        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        children: level === 0 && ((_f = (_e = labels.query) == null ? void 0 : _e.addGroup) == null ? void 0 : _f.label) != null ? (_h = (_g = labels.query) == null ? void 0 : _g.addGroup) == null ? void 0 : _h.label : labels.group.addGroup.label
+      })
+    })]
+  });
+  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, {
+    className: cx({
+      [classes.topRemoveButtonDisabled]: readOnly
+    })
+  }), level === 0 && ((_j = (_i = labels.query) == null ? void 0 : _i.delete) == null ? void 0 : _j.tooltip) ? (_l = (_k = labels.query) == null ? void 0 : _k.delete) == null ? void 0 : _l.tooltip : labels.group.delete.tooltip, "top");
+  const onClickCombinator = useCallback((item) => {
+    dispatchAction({
+      type: "set-combinator",
+      id,
+      combinator: item.operand
+    });
+  }, [dispatchAction, id]);
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.root, {
+      [classes.topGroup]: level === 0,
+      [classes.subGroup]: level > 0
+    }),
+    children: [/* @__PURE__ */ jsxs(HvGrid, {
+      container: true,
+      children: [/* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        children: /* @__PURE__ */ jsx(HvMultiButton, {
+          className: cx(classes.combinator, classes.topCombinator),
+          disabled: readOnly,
+          children: combinators && combinators.map((item) => /* @__PURE__ */ jsx(HvButton, {
+            className: classes.combinatorButton,
+            selected: item.operand === combinator,
+            onClick: () => item.operand && onClickCombinator(item),
+            disabled: readOnly,
+            size: "xs",
+            children: item.label
+          }, item.operand))
+        })
+      }), /* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        children: /* @__PURE__ */ jsx("div", {
+          className: cx(classes.buttonBackground, classes.topRemoveButton),
           children: /* @__PURE__ */ jsx(HvButton, {
-            variant: "secondarySubtle",
+            icon: true,
+            className: classes.removeButton,
             onClick: () => {
-              dispatchAction({
-                type: "add-rule",
-                id
+              var _a2;
+              askAction({
+                actions: [{
+                  type: "remove-node",
+                  id
+                }],
+                dialog: level === 0 && ((_a2 = labels.query) == null ? void 0 : _a2.delete) != null ? labels.query.delete : labels.group.delete
               });
             },
+            "aria-label": level === 0 && ((_n = (_m = labels.query) == null ? void 0 : _m.delete) == null ? void 0 : _n.ariaLabel) ? (_p = (_o = labels.query) == null ? void 0 : _o.delete) == null ? void 0 : _p.ariaLabel : labels.group.delete.ariaLabel,
             disabled: readOnly,
-            startIcon: /* @__PURE__ */ jsx(Add, {}),
-            children: level === 0 && ((_b2 = (_a2 = labels.query) == null ? void 0 : _a2.addRule) == null ? void 0 : _b2.label) != null ? (_d2 = (_c2 = labels.query) == null ? void 0 : _c2.addRule) == null ? void 0 : _d2.label : labels.group.addRule.label
+            variant: "secondaryGhost",
+            children: /* @__PURE__ */ jsx(DeleteIcon, {})
           })
-        }), level <= normalizedMaxDepth && /* @__PURE__ */ jsx("div", {
-          className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground),
-          children: /* @__PURE__ */ jsx(HvButton, {
-            variant: "secondarySubtle",
+        })
+      })]
+    }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsx("div", {
+      className: cx(classes.rulesContainer, {
+        [classes.subRulesContainer]: level > 0,
+        [classes.topRulesContainer]: level === 0
+      }),
+      children: rules.map((rule, index) => {
+        if ("combinator" in rule) {
+          return /* @__PURE__ */ jsx(RuleGroup, {
+            level: level + 1,
+            ...rule,
+            id: rule.id,
+            classes
+          }, rule.id ?? index);
+        }
+        const isInvalid = combinator === "and" && rules.some((r, i) => {
+          if ("attribute" in r) {
+            if (r.attribute === rule.attribute && r.id !== rule.id && i < index) {
+              return true;
+            }
+          }
+          return false;
+        });
+        return /* @__PURE__ */ jsx(Rule, {
+          ...rule,
+          isInvalid,
+          id: rule.id,
+          combinator
+        }, rule.id ?? index);
+      })
+    }), (rules == null ? void 0 : rules.length) === 0 && /* @__PURE__ */ jsx(HvEmptyState, {
+      title: (_q = labels.empty) == null ? void 0 : _q.title,
+      message: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(HvTypography, {
+          variant: "link",
+          component: "a",
+          onClick: () => {
+            dispatchAction({
+              type: "add-rule",
+              id
+            });
+          },
+          style: {
+            cursor: "pointer",
+            textDecoration: "underline"
+          },
+          children: `${(_r = labels.empty) == null ? void 0 : _r.createCondition}`
+        }), level <= normalizedMaxDepth && /* @__PURE__ */ jsxs(Fragment, {
+          children: [`${(_s = labels.empty) == null ? void 0 : _s.spacer}`, /* @__PURE__ */ jsx(HvTypography, {
+            variant: "link",
+            component: "a",
             onClick: () => {
               dispatchAction({
                 type: "add-group",
                 id
               });
             },
-            disabled: readOnly,
-            startIcon: /* @__PURE__ */ jsx(Add, {}),
-            children: level === 0 && ((_f = (_e = labels.query) == null ? void 0 : _e.addGroup) == null ? void 0 : _f.label) != null ? (_h = (_g = labels.query) == null ? void 0 : _g.addGroup) == null ? void 0 : _h.label : labels.group.addGroup.label
-          })
-        })]
-      });
-    }
-  });
-  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(Delete, {
-      className: readOnly ? cx(queryBuilderClasses.topRemoveButtonDisabled, css(styles.topRemoveButtonDisabled), classes == null ? void 0 : classes.topRemoveButtonDisabled) : ""
-    })
-  }), level === 0 && ((_b = (_a = labels.query) == null ? void 0 : _a.delete) == null ? void 0 : _b.tooltip) ? (_d = (_c = labels.query) == null ? void 0 : _c.delete) == null ? void 0 : _d.tooltip : labels.group.delete.tooltip, "top");
-  const onClickCombinator = useCallback((item) => {
-    dispatchAction({
-      type: "set-combinator",
-      id,
-      combinator: item.operand
-    });
-  }, [dispatchAction, id]);
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
-      return /* @__PURE__ */ jsxs("div", {
-        className: cx(queryBuilderClasses.root, level === 0 ? queryBuilderClasses.topGroup : queryBuilderClasses.subGroup, css(styles.root), level === 0 ? css(styles.topGroup) : css(styles.subGroup), classes == null ? void 0 : classes.root, level === 0 ? classes == null ? void 0 : classes.topGroup : classes == null ? void 0 : classes.subGroup),
-        children: [/* @__PURE__ */ jsxs(HvGrid, {
-          container: true,
-          children: [/* @__PURE__ */ jsx(HvGrid, {
-            item: true,
-            children: /* @__PURE__ */ jsx(HvMultiButton, {
-              className: cx(queryBuilderClasses.combinator, queryBuilderClasses.topCombinator, css(styles.combinator), css(styles.topCombinator), classes == null ? void 0 : classes.combinator, classes == null ? void 0 : classes.topCombinator),
-              disabled: readOnly,
-              children: combinators && combinators.map((item) => /* @__PURE__ */ jsx(HvButton, {
-                className: cx(queryBuilderClasses.combinatorButton, css(styles.combinatorButton), classes == null ? void 0 : classes.combinatorButton),
-                selected: item.operand === combinator,
-                onClick: () => item.operand && onClickCombinator(item),
-                disabled: readOnly,
-                size: "xs",
-                children: item.label
-              }, item.operand))
-            })
-          }), /* @__PURE__ */ jsx(HvGrid, {
-            item: true,
-            children: /* @__PURE__ */ jsx("div", {
-              className: cx(queryBuilderClasses.buttonBackground, queryBuilderClasses.topRemoveButton, css(styles.buttonBackground), css(styles.topRemoveButton), classes == null ? void 0 : classes.buttonBackground, classes == null ? void 0 : classes.topRemoveButton),
-              children: /* @__PURE__ */ jsx(HvButton, {
-                icon: true,
-                className: cx(queryBuilderClasses.removeButton, css(styles.removeButton), classes == null ? void 0 : classes.removeButton),
-                onClick: () => {
-                  var _a3;
-                  askAction({
-                    actions: [{
-                      type: "remove-node",
-                      id
-                    }],
-                    dialog: level === 0 && ((_a3 = labels.query) == null ? void 0 : _a3.delete) != null ? labels.query.delete : labels.group.delete
-                  });
-                },
-                "aria-label": level === 0 && ((_b2 = (_a2 = labels.query) == null ? void 0 : _a2.delete) == null ? void 0 : _b2.ariaLabel) ? (_d2 = (_c2 = labels.query) == null ? void 0 : _c2.delete) == null ? void 0 : _d2.ariaLabel : labels.group.delete.ariaLabel,
-                disabled: readOnly,
-                variant: "secondaryGhost",
-                children: /* @__PURE__ */ jsx(DeleteIcon, {})
-              })
-            })
+            style: {
+              cursor: "pointer",
+              textDecoration: "underline"
+            },
+            children: `${(_t = labels.empty) == null ? void 0 : _t.createGroup}`
           })]
-        }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsx("div", {
-          className: cx(queryBuilderClasses.rulesContainer, level > 0 && queryBuilderClasses.subRulesContainer, level === 0 && queryBuilderClasses.topRulesContainer, css(styles.rulesContainer), level > 0 && css(styles.subRulesContainer), level === 0 && css(styles.topRulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 && (classes == null ? void 0 : classes.subRulesContainer), level === 0 && (classes == null ? void 0 : classes.topRulesContainer)),
-          children: rules.map((rule, index) => {
-            if ("combinator" in rule) {
-              return /* @__PURE__ */ jsx(RuleGroup, {
-                level: level + 1,
-                ...rule,
-                id: rule.id,
-                classes
-              }, rule.id ?? index);
-            }
-            const isInvalid = combinator === "and" && rules.some((r, i) => {
-              if ("attribute" in r) {
-                if (r.attribute === rule.attribute && r.id !== rule.id && i < index) {
-                  return true;
-                }
-              }
-              return false;
-            });
-            return /* @__PURE__ */ jsx(Rule, {
-              ...rule,
-              isInvalid,
-              id: rule.id,
-              combinator
-            }, rule.id ?? index);
-          })
-        }), (rules == null ? void 0 : rules.length) === 0 && /* @__PURE__ */ jsx(HvEmptyState, {
-          title: (_e = labels.empty) == null ? void 0 : _e.title,
-          message: /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsx(HvTypography, {
-              variant: "link",
-              component: "a",
-              onClick: () => {
-                dispatchAction({
-                  type: "add-rule",
-                  id
-                });
-              },
-              style: {
-                cursor: "pointer",
-                textDecoration: "underline"
-              },
-              children: `${(_f = labels.empty) == null ? void 0 : _f.createCondition}`
-            }), level <= normalizedMaxDepth && /* @__PURE__ */ jsxs(Fragment, {
-              children: [`${(_g = labels.empty) == null ? void 0 : _g.spacer}`, /* @__PURE__ */ jsx(HvTypography, {
-                variant: "link",
-                component: "a",
-                onClick: () => {
-                  dispatchAction({
-                    type: "add-group",
-                    id
-                  });
-                },
-                style: {
-                  cursor: "pointer",
-                  textDecoration: "underline"
-                },
-                children: `${(_h = labels.empty) == null ? void 0 : _h.createGroup}`
-              })]
-            })]
-          }),
-          icon: /* @__PURE__ */ jsx(Info, {})
-        }), /* @__PURE__ */ jsx(HvGrid, {
-          container: true,
-          children: /* @__PURE__ */ jsx(HvGrid, {
-            item: true,
-            className: cx(queryBuilderClasses.actionButtonContainer, queryBuilderClasses.topActionButtonContainer, css(styles.actionButtonContainer), css(styles.topActionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, classes == null ? void 0 : classes.topActionButtonContainer),
-            children: actionButtons
-          })
         })]
-      });
-    }
+      }),
+      icon: /* @__PURE__ */ jsx(Info, {})
+    }), /* @__PURE__ */ jsx(HvGrid, {
+      container: true,
+      children: /* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        className: cx(classes.actionButtonContainer, classes.topActionButtonContainer),
+        children: actionButtons
+      })
+    })]
   });
 };
 export {