@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

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

@@ -0,0 +1,68 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo, memo } from "react";
+import { isBigList } from "../../utils/index.js";
+import { useQueryBuilderContext } from "../../Context.js";
+import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+const Attribute = ({
+  id,
+  attribute,
+  disabled,
+  isInvalid
+}) => {
+  const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
+  const values = useMemo(() => {
+    if (!attributes)
+      return [];
+    return Object.keys(attributes).map((key) => ({
+      id: key,
+      label: attributes[key].label,
+      selected: key === attribute
+    }));
+  }, [attributes, attribute]);
+  const currentType = attribute != null && attributes ? attributes[attribute]?.type : null;
+  return /* @__PURE__ */ jsx(
+    HvDropdown,
+    {
+      singleSelectionToggle: false,
+      label: labels.rule.attribute.label,
+      placeholder: labels.rule.attribute.placeholder,
+      values,
+      disabled,
+      readOnly,
+      status: isInvalid ? "invalid" : "valid",
+      statusMessage: labels.rule.attribute.exists,
+      onChange: (selected) => {
+        if (selected && !Array.isArray(selected)) {
+          const attributeId = selected.id;
+          const type = attributes && attributeId && attributes[attributeId]?.type;
+          const typeOperators = type ? operators[type] : void 0;
+          let operator;
+          if (currentType === type) {
+            operator = void 0;
+          } else if (typeOperators?.length === 1) {
+            operator = typeOperators[0].operator;
+          } else {
+            operator = null;
+          }
+          const value = type === "boolean" ? true : void 0;
+          dispatchAction({
+            type: "set-attribute",
+            id,
+            attribute: attributeId?.toString(),
+            operator,
+            value
+          });
+        } else {
+          dispatchAction({ type: "set-attribute", id, attribute: null });
+        }
+      },
+      showSearch: isBigList(values),
+      ...isBigList(values) && { virtualized: true, height: 300 }
+    }
+  );
+};
+memo(Attribute);
+export {
+  Attribute
+};
+//# sourceMappingURL=Attribute.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attribute.js","sources":["../../../../../src/QueryBuilder/Rule/Attribute/Attribute.tsx"],"sourcesContent":["import { useMemo, memo } from \"react\";\n\nimport { HvDropdown } from \"../../../Dropdown\";\n\nimport { isBigList } from \"../../utils\";\nimport { useQueryBuilderContext } from \"../../Context\";\n\nexport interface AttributeProps {\n  id: React.Key;\n  attribute?: string;\n  disabled?: boolean;\n  isInvalid?: boolean;\n}\n\nexport const Attribute = ({\n  id,\n  attribute,\n  disabled,\n  isInvalid,\n}: AttributeProps) => {\n  const { dispatchAction, attributes, operators, labels, readOnly } =\n    useQueryBuilderContext();\n\n  const values = useMemo(() => {\n    if (!attributes) return [];\n\n    return Object.keys(attributes).map((key) => ({\n      id: key,\n      label: attributes[key].label,\n      selected: key === attribute,\n    }));\n  }, [attributes, attribute]);\n\n  const currentType =\n    attribute != null && attributes ? attributes[attribute]?.type : null;\n\n  return (\n    <HvDropdown\n      singleSelectionToggle={false}\n      label={labels.rule.attribute.label}\n      placeholder={labels.rule.attribute.placeholder}\n      values={values}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={isInvalid ? \"invalid\" : \"valid\"}\n      statusMessage={labels.rule.attribute.exists}\n      onChange={(selected) => {\n        if (selected && !Array.isArray(selected)) {\n          const attributeId = selected.id;\n\n          const type =\n            attributes && attributeId && attributes[attributeId]?.type;\n          const typeOperators = type ? operators[type] : undefined;\n\n          let operator;\n          if (currentType === type) {\n            operator = undefined;\n          } else if (typeOperators?.length === 1) {\n            operator = typeOperators[0].operator;\n          } else {\n            operator = null;\n          }\n\n          // default boolean attributes to true\n          const value = type === \"boolean\" ? true : undefined;\n\n          dispatchAction({\n            type: \"set-attribute\",\n            id,\n            attribute: attributeId?.toString(),\n            operator,\n            value,\n          });\n        } else {\n          dispatchAction({ type: \"set-attribute\", id, attribute: null });\n        }\n      }}\n      showSearch={isBigList(values)}\n      {...(isBigList(values) && { virtualized: true, height: 300 })}\n    />\n  );\n};\n\nexport default memo(Attribute);\n"],"names":[],"mappings":";;;;;AAcO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,EAAE,gBAAgB,YAAY,WAAW,QAAQ,SAAA,IACrD;AAEI,QAAA,SAAS,QAAQ,MAAM;AAC3B,QAAI,CAAC;AAAY,aAAO;AAExB,WAAO,OAAO,KAAK,UAAU,EAAE,IAAI,CAAC,SAAS;AAAA,MAC3C,IAAI;AAAA,MACJ,OAAO,WAAW,GAAG,EAAE;AAAA,MACvB,UAAU,QAAQ;AAAA,IAClB,EAAA;AAAA,EAAA,GACD,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAM,cACJ,aAAa,QAAQ,aAAa,WAAW,SAAS,GAAG,OAAO;AAGhE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,uBAAuB;AAAA,MACvB,OAAO,OAAO,KAAK,UAAU;AAAA,MAC7B,aAAa,OAAO,KAAK,UAAU;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,YAAY,YAAY;AAAA,MAChC,eAAe,OAAO,KAAK,UAAU;AAAA,MACrC,UAAU,CAAC,aAAa;AACtB,YAAI,YAAY,CAAC,MAAM,QAAQ,QAAQ,GAAG;AACxC,gBAAM,cAAc,SAAS;AAE7B,gBAAM,OACJ,cAAc,eAAe,WAAW,WAAW,GAAG;AACxD,gBAAM,gBAAgB,OAAO,UAAU,IAAI,IAAI;AAE3C,cAAA;AACJ,cAAI,gBAAgB,MAAM;AACb,uBAAA;AAAA,UAAA,WACF,eAAe,WAAW,GAAG;AAC3B,uBAAA,cAAc,CAAC,EAAE;AAAA,UAAA,OACvB;AACM,uBAAA;AAAA,UACb;AAGM,gBAAA,QAAQ,SAAS,YAAY,OAAO;AAE3B,yBAAA;AAAA,YACb,MAAM;AAAA,YACN;AAAA,YACA,WAAW,aAAa,SAAS;AAAA,YACjC;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA,OACI;AACL,yBAAe,EAAE,MAAM,iBAAiB,IAAI,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACA,YAAY,UAAU,MAAM;AAAA,MAC3B,GAAI,UAAU,MAAM,KAAK,EAAE,aAAa,MAAM,QAAQ,IAAI;AAAA,IAAA;AAAA,EAAA;AAGjE;AAEe,KAAK,SAAS;"}

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

@@ -0,0 +1,62 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo, memo } from "react";
+import { useQueryBuilderContext } from "../../Context.js";
+import { isBigList } from "../../utils/index.js";
+import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+const Operator = ({
+  id,
+  combinator,
+  attribute,
+  operator
+}) => {
+  const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
+  const value = operator ?? null;
+  const values = useMemo(() => {
+    const attributeSpec = attribute && attributes ? attributes[attribute] : null;
+    const options = attributeSpec ? operators[attributeSpec.type].filter(
+      (o) => o.combinators.includes(combinator)
+    ) ?? [] : [];
+    return options.map((key) => ({
+      id: key.operator,
+      label: key.label,
+      selected: key.operator === value
+    }));
+  }, [attribute, attributes, operators, combinator, value]);
+  return /* @__PURE__ */ jsx(
+    HvDropdown,
+    {
+      required: true,
+      status: "valid",
+      singleSelectionToggle: false,
+      label: labels.rule.operator.label,
+      placeholder: labels.rule.operator.placeholder,
+      values,
+      disabled: values.length === 0,
+      readOnly,
+      onChange: (selected) => {
+        if (selected && !Array.isArray(selected) && selected.id) {
+          dispatchAction({
+            type: "set-operator",
+            id,
+            operator: selected.id.toString(),
+            value: value === "range" || selected.id === "range" ? null : void 0
+          });
+        } else {
+          dispatchAction({
+            type: "set-operator",
+            id,
+            operator: null,
+            value: null
+          });
+        }
+      },
+      showSearch: isBigList(values),
+      ...isBigList(values) && { virtualized: true, height: 300 }
+    }
+  );
+};
+memo(Operator);
+export {
+  Operator
+};
+//# sourceMappingURL=Operator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Operator.js","sources":["../../../../../src/QueryBuilder/Rule/Operator/Operator.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { HvDropdown } from \"../../../Dropdown\";\n\nimport { useQueryBuilderContext } from \"../../Context\";\nimport { isBigList } from \"../../utils\";\n\nexport interface OperatorProps {\n  id: React.Key;\n  combinator: string;\n  attribute: string;\n  operator?: string;\n}\n\nexport const Operator = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n}: OperatorProps) => {\n  const { dispatchAction, attributes, operators, labels, readOnly } =\n    useQueryBuilderContext();\n\n  const value = operator ?? null;\n\n  const values = useMemo(() => {\n    const attributeSpec =\n      attribute && attributes ? attributes[attribute] : null;\n    const options = attributeSpec\n      ? operators[attributeSpec.type].filter((o) =>\n          o.combinators.includes(combinator)\n        ) ?? []\n      : [];\n    return options.map((key) => ({\n      id: key.operator,\n      label: key.label,\n      selected: key.operator === value,\n    }));\n  }, [attribute, attributes, operators, combinator, value]);\n\n  return (\n    <HvDropdown\n      required\n      status=\"valid\"\n      singleSelectionToggle={false}\n      label={labels.rule.operator.label}\n      placeholder={labels.rule.operator.placeholder}\n      values={values}\n      disabled={values.length === 0}\n      readOnly={readOnly}\n      onChange={(selected) => {\n        if (selected && !Array.isArray(selected) && selected.id) {\n          dispatchAction({\n            type: \"set-operator\",\n            id,\n            operator: selected.id.toString(),\n            value:\n              value === \"range\" || selected.id === \"range\" ? null : undefined,\n          });\n        } else {\n          dispatchAction({\n            type: \"set-operator\",\n            id,\n            operator: null,\n            value: null,\n          });\n        }\n      }}\n      showSearch={isBigList(values)}\n      {...(isBigList(values) && { virtualized: true, height: 300 })}\n    />\n  );\n};\n\nexport default memo(Operator);\n"],"names":[],"mappings":";;;;;AAcO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,gBAAgB,YAAY,WAAW,QAAQ,SAAA,IACrD;AAEF,QAAM,QAAQ,YAAY;AAEpB,QAAA,SAAS,QAAQ,MAAM;AAC3B,UAAM,gBACJ,aAAa,aAAa,WAAW,SAAS,IAAI;AACpD,UAAM,UAAU,gBACZ,UAAU,cAAc,IAAI,EAAE;AAAA,MAAO,CAAC,MACpC,EAAE,YAAY,SAAS,UAAU;AAAA,IAAA,KAC9B,CAAA,IACL,CAAA;AACG,WAAA,QAAQ,IAAI,CAAC,SAAS;AAAA,MAC3B,IAAI,IAAI;AAAA,MACR,OAAO,IAAI;AAAA,MACX,UAAU,IAAI,aAAa;AAAA,IAC3B,EAAA;AAAA,EAAA,GACD,CAAC,WAAW,YAAY,WAAW,YAAY,KAAK,CAAC;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAQ;AAAA,MACR,QAAO;AAAA,MACP,uBAAuB;AAAA,MACvB,OAAO,OAAO,KAAK,SAAS;AAAA,MAC5B,aAAa,OAAO,KAAK,SAAS;AAAA,MAClC;AAAA,MACA,UAAU,OAAO,WAAW;AAAA,MAC5B;AAAA,MACA,UAAU,CAAC,aAAa;AACtB,YAAI,YAAY,CAAC,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;AACxC,yBAAA;AAAA,YACb,MAAM;AAAA,YACN;AAAA,YACA,UAAU,SAAS,GAAG,SAAS;AAAA,YAC/B,OACE,UAAU,WAAW,SAAS,OAAO,UAAU,OAAO;AAAA,UAAA,CACzD;AAAA,QAAA,OACI;AACU,yBAAA;AAAA,YACb,MAAM;AAAA,YACN;AAAA,YACA,UAAU;AAAA,YACV,OAAO;AAAA,UAAA,CACR;AAAA,QACH;AAAA,MACF;AAAA,MACA,YAAY,UAAU,MAAM;AAAA,MAC3B,GAAI,UAAU,MAAM,KAAK,EAAE,aAAa,MAAM,QAAQ,IAAI;AAAA,IAAA;AAAA,EAAA;AAGjE;AAEe,KAAK,QAAQ;"}

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

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { Delete } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { IconButton } from "../../utils/IconButton.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useQueryBuilderContext } from "../Context.js";
+import { useClasses } from "./Rule.styles.js";
+import { staticClasses } from "./Rule.styles.js";
+import { HvGrid } from "../../Grid/Grid.js";
+import { Attribute } from "./Attribute/Attribute.js";
+import { Operator } from "./Operator/Operator.js";
+import { Value } from "./Value/Value.js";
+const Rule = (props) => {
+  const {
+    id,
+    combinator,
+    attribute,
+    operator,
+    value,
+    disabled,
+    isInvalid,
+    classes: classesProp
+  } = useDefaultProps("HvQueryBuilderRule", props);
+  const { classes, cx } = useClasses(classesProp);
+  const {
+    askAction,
+    dispatchAction,
+    attributes,
+    operators,
+    labels,
+    readOnly,
+    disableConfirmation
+  } = useQueryBuilderContext();
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const availableOperators = useMemo(() => {
+    const attributeSpec = attribute != null && attributes ? attributes[attribute] : null;
+    if (attributeSpec != null) {
+      const typeOperators = operators[attributeSpec.type];
+      if (typeOperators != null) {
+        return typeOperators.reduce(
+          (count, item) => count + (item.combinators.includes(combinator) ? 1 : 0),
+          0
+        );
+      }
+    }
+    return -1;
+  }, [attribute, attributes, combinator, operators]);
+  return /* @__PURE__ */ jsxs(
+    HvGrid,
+    {
+      container: true,
+      className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
+      spacing: 0,
+      children: [
+        /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
+          Attribute,
+          {
+            attribute,
+            id,
+            disabled,
+            isInvalid
+          }
+        ) }),
+        attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
+          Operator,
+          {
+            id,
+            combinator,
+            attribute,
+            operator
+          }
+        ) }),
+        attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsx(
+          Value,
+          {
+            attribute,
+            id,
+            operator,
+            value
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            placement: "bottom",
+            title: labels.rule.delete.tooltip || labels.rule.delete.ariaLabel,
+            onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
+              actions: [{ type: "remove-node", id }],
+              dialog: labels.rule.delete
+            }),
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsx(Delete, { role: "none" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Rule,
+  staticClasses as queryBuilderRuleClasses
+};
+//# sourceMappingURL=Rule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.js","sources":["../../../../src/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvGrid } from \"../../Grid\";\nimport { IconButton } from \"../../utils/IconButton\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\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  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={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={12} md={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={12} md>\n          <Value\n            attribute={attribute}\n            id={id}\n            operator={operator}\n            value={value}\n          />\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <IconButton\n          placement=\"bottom\"\n          title={labels.rule.delete.tooltip || labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <Delete role=\"none\" />\n        </IconButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA+Ba,MAAA,OAAO,CAAC,UAAqB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,uBAAuB;AAE3B,QAAM,QAAQ;AAEd,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAErD,QAAA,qBAAqB,QAAQ,MAAM;AACvC,UAAM,gBACJ,aAAa,QAAQ,aAAa,WAAW,SAAS,IAAI;AAC5D,QAAI,iBAAiB,MAAM;AACnB,YAAA,gBAAgB,UAAU,cAAc,IAAI;AAClD,UAAI,iBAAiB,MAAM;AACzB,eAAO,cAAc;AAAA,UACnB,CAAC,OAAO,SACN,SAAS,KAAK,YAAY,SAAS,UAAU,IAAI,IAAI;AAAA,UACvD;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAAC,WAAW,YAAY,YAAY,SAAS,CAAC;AAG/C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,MAC5D,SAAS;AAAA,MAET,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,aAAa,QAAQ,qBAAqB,KACzC,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAED,aAAa,SAAS,YAAY,QAAQ,uBAAuB,MAC/D,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,4BAED,QAAO,EAAA,MAAI,MAAC,WAAW,QAAQ,kBAC9B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,OAAO,KAAK,OAAO,WAAW,OAAO,KAAK,OAAO;AAAA,YACxD,SAAS,MACP,sBACI,eAAe,EAAE,MAAM,eAAe,IAAI,IAC1C,UAAU;AAAA,cACR,SAAS,CAAC,EAAE,MAAM,eAAe,IAAI;AAAA,cACrC,QAAQ,OAAO,KAAK;AAAA,YAAA,CACrB;AAAA,YAEP,UAAU;AAAA,YAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QAAA,GAExB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,61 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../QueryBuilder.styles.js";
+const { useClasses, staticClasses } = createClasses(
+  "HvQueryBuilder-Rule",
+  {
+    root: {
+      position: "relative",
+      marginTop: theme.space.xs,
+      minHeight: 94,
+      "&>div:not(:last-child)": {
+        paddingRight: theme.space.md
+      },
+      // hide required * as all fields are required
+      "& label>span[aria-hidden]": {
+        visibility: "hidden"
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        zIndex: 2,
+        width: "17px",
+        height: "39px",
+        borderBottom: `1px solid ${theme.colors.atmo4}`,
+        borderLeft: `1px solid ${theme.colors.atmo4}`,
+        top: 0,
+        left: `calc(-1 * 17px)`
+      },
+      [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
+        content: '""',
+        position: "absolute",
+        zIndex: 1,
+        width: "17px",
+        height: "100%",
+        borderLeft: `1px solid ${theme.colors.atmo4}`,
+        top: 0,
+        left: `calc(-1 * 17px)`
+      }
+    },
+    actionsContainer: {
+      marginLeft: "auto",
+      marginTop: "24px",
+      "&>:not(:last-child)": {
+        marginRight: theme.space.xs
+      }
+    },
+    isMdDown: {
+      "&>div:not(:last-child)": {
+        paddingRight: 0
+      },
+      "&>div:not(:first-of-type)": {
+        marginTop: theme.space.xs
+      }
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Rule.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.styles.js","sources":["../../../../src/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\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      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        paddingRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        paddingRight: 0,\n      },\n      \"&>div:not(:first-of-type)\": {\n        marginTop: theme.space.xs,\n      },\n    },\n  }\n);\n"],"names":["queryBuilderClasses"],"mappings":";;;AAMa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,MAAM,MAAM;AAAA,MACvB,WAAW;AAAA,MAEX,0BAA0B;AAAA,QACxB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA;AAAA,MAGA,6BAA6B;AAAA,QAC3B,YAAY;AAAA,MACd;AAAA,MAEA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,QAC7C,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAE3C,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MAEA,CAAC,SAASA,gBAAoB,iBAAiB,uBAAuB,GAAG;AAAA,QACvE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAE3C,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MAEX,uBAAuB;AAAA,QACrB,aAAa,MAAM,MAAM;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,0BAA0B;AAAA,QACxB,cAAc;AAAA,MAChB;AAAA,MACA,6BAA6B;AAAA,QAC3B,WAAW,MAAM,MAAM;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,43 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { useQueryBuilderContext } from "../../../Context.js";
+import { isBigList } from "../../../utils/index.js";
+import { HvDropdown } from "../../../../Dropdown/Dropdown.js";
+const BooleanValue = ({ id, value = true }) => {
+  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
+  const values = ["true", "false"].map((v) => ({
+    id: v,
+    label: labels.rule.value.boolean.options[v],
+    selected: value === (v === "true")
+  }));
+  return /* @__PURE__ */ jsx(
+    HvDropdown,
+    {
+      required: true,
+      status: "valid",
+      singleSelectionToggle: false,
+      label: labels.rule.value.boolean.label,
+      placeholder: labels.rule.value.boolean.placeholder,
+      values,
+      readOnly,
+      onChange: (selected) => {
+        if (selected && !Array.isArray(selected) && selected.id) {
+          dispatchAction({
+            type: "set-value",
+            id,
+            value: selected.id === "true"
+          });
+        } else {
+          dispatchAction({ type: "set-value", id, value: null });
+        }
+      },
+      showSearch: isBigList(values),
+      ...isBigList(values) && { virtualized: true, height: 300 }
+    }
+  );
+};
+memo(BooleanValue);
+export {
+  BooleanValue
+};
+//# sourceMappingURL=BooleanValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanValue.js","sources":["../../../../../../src/QueryBuilder/Rule/Value/BooleanValue/BooleanValue.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { HvDropdown } from \"../../../../Dropdown\";\n\nimport { useQueryBuilderContext } from \"../../../Context\";\nimport { isBigList } from \"../../../utils\";\n\nexport interface BooleanValueProps {\n  id: React.Key;\n  value?: boolean;\n}\n\nexport const BooleanValue = ({ id, value = true }: BooleanValueProps) => {\n  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();\n\n  const values = [\"true\", \"false\"].map((v) => ({\n    id: v,\n    label: labels.rule.value.boolean.options[v],\n    selected: value === (v === \"true\"),\n  }));\n\n  return (\n    <HvDropdown\n      required\n      status=\"valid\"\n      singleSelectionToggle={false}\n      label={labels.rule.value.boolean.label}\n      placeholder={labels.rule.value.boolean.placeholder}\n      values={values}\n      readOnly={readOnly}\n      onChange={(selected) => {\n        if (selected && !Array.isArray(selected) && selected.id) {\n          dispatchAction({\n            type: \"set-value\",\n            id,\n            value: selected.id === \"true\",\n          });\n        } else {\n          dispatchAction({ type: \"set-value\", id, value: null });\n        }\n      }}\n      showSearch={isBigList(values)}\n      {...(isBigList(values) && { virtualized: true, height: 300 })}\n    />\n  );\n};\n\nexport default memo(BooleanValue);\n"],"names":[],"mappings":";;;;;AAYO,MAAM,eAAe,CAAC,EAAE,IAAI,QAAQ,WAA8B;AACvE,QAAM,EAAE,QAAQ,gBAAgB,aAAa,uBAAuB;AAEpE,QAAM,SAAS,CAAC,QAAQ,OAAO,EAAE,IAAI,CAAC,OAAO;AAAA,IAC3C,IAAI;AAAA,IACJ,OAAO,OAAO,KAAK,MAAM,QAAQ,QAAQ,CAAC;AAAA,IAC1C,UAAU,WAAW,MAAM;AAAA,EAC3B,EAAA;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAQ;AAAA,MACR,QAAO;AAAA,MACP,uBAAuB;AAAA,MACvB,OAAO,OAAO,KAAK,MAAM,QAAQ;AAAA,MACjC,aAAa,OAAO,KAAK,MAAM,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACA,UAAU,CAAC,aAAa;AACtB,YAAI,YAAY,CAAC,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;AACxC,yBAAA;AAAA,YACb,MAAM;AAAA,YACN;AAAA,YACA,OAAO,SAAS,OAAO;AAAA,UAAA,CACxB;AAAA,QAAA,OACI;AACL,yBAAe,EAAE,MAAM,aAAa,IAAI,OAAO,MAAM;AAAA,QACvD;AAAA,MACF;AAAA,MACA,YAAY,UAAU,MAAM;AAAA,MAC3B,GAAI,UAAU,MAAM,KAAK,EAAE,aAAa,MAAM,QAAQ,IAAI;AAAA,IAAA;AAAA,EAAA;AAGjE;AAEe,KAAK,YAAY;"}

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

@@ -0,0 +1,281 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useState, useCallback, useMemo, memo } from "react";
+import uniqueId from "lodash/uniqueId";
+import dayjs from "dayjs";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useQueryBuilderContext } from "../../../Context.js";
+import { padTime, parseDate, parseTime } from "./utils.js";
+import { useClasses } from "./DateTimeValue.styles.js";
+import { HvDatePicker } from "../../../../DatePicker/DatePicker.js";
+import { HvTimePicker } from "../../../../TimePicker/TimePicker.js";
+import { HvWarningText } from "../../../../Forms/WarningText/WarningText.js";
+function valueIsRange(operator) {
+  return operator === "range";
+}
+const DateTimeValue = ({
+  id,
+  operator,
+  value: valueProp = {},
+  initialTouched = false
+}) => {
+  const { classes, cx } = useClasses();
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const isRange = valueIsRange(operator);
+  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
+  const elementId = uniqueId(`datetime${id}`);
+  const [touchedDate, setTouchedDate] = useState(initialTouched);
+  const [touchedTime, setTouchedTime] = useState(initialTouched);
+  const [touchedEndDate, setTouchedEndDate] = useState(initialTouched);
+  const [touchedEndTime, setTouchedEndTime] = useState(initialTouched);
+  const onDateChange = useCallback(
+    (data) => {
+      setTouchedDate(true);
+      let date;
+      if (data != null) {
+        date = dayjs(data).format("YYYY-MM-DD");
+      }
+      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
+      if (date !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date,
+            time: valueProp?.time
+          };
+        } else {
+          value = {
+            start: {
+              date,
+              time: valueProp?.start?.time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onTimeChange = useCallback(
+    (data) => {
+      setTouchedTime(true);
+      let time;
+      if (data != null) {
+        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(
+          data.seconds
+        )}`;
+      }
+      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
+      if (time !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date: valueProp?.date,
+            time
+          };
+        } else {
+          value = {
+            start: {
+              date: valueProp?.start?.date,
+              time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onEndDateChange = useCallback(
+    (data) => {
+      setTouchedEndDate(true);
+      let date;
+      if (data != null) {
+        date = dayjs(data).format("YYYY-MM-DD");
+      }
+      if (date !== valueProp?.end?.date) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date,
+            time: valueProp?.end?.time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const onEndTimeChange = useCallback(
+    (data) => {
+      setTouchedEndTime(true);
+      let time;
+      if (data != null) {
+        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(
+          data.seconds
+        )}`;
+      }
+      if (time !== valueProp?.end?.time) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date: valueProp?.end?.date,
+            time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;
+  const datePickerValue = useMemo(() => parseDate(startDate), [startDate]);
+  const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
+  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? "";
+  const timePickerValue = useMemo(() => parseTime(startTime), [startTime]);
+  const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
+  const endDate = isRange ? valueProp?.end?.date : null;
+  const endDatePickerValue = useMemo(() => parseDate(endDate), [endDate]);
+  const endTime = isRange ? valueProp?.end?.time : null;
+  const endTimePickerValue = useMemo(() => parseTime(endTime), [endTime]);
+  const dateStatus = !touchedDate ? "standBy" : datePickerStatus;
+  const timeStatus = !touchedTime ? "standBy" : timePickerStatus;
+  const endDateIsBefore = startDate != null && endDate != null && endDate < startDate;
+  const endTimeIsBeforeOrSame = startDate != null && endDate != null && endDate === startDate && startTime != null && endTime != null && endTime <= startTime;
+  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;
+  const endDatePickerStatus = endDatePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endDateStatus = !touchedEndDate ? "standBy" : endDatePickerStatus;
+  const endTimePickerStatus = endTimePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endTimeStatus = !touchedEndTime ? "standBy" : endTimePickerStatus;
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classes.row, classes.horizontal, {
+          [classes.isMdDown]: isMdDown
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            HvDatePicker,
+            {
+              className: classes.datePicker,
+              name: `${elementId}-date`,
+              required: true,
+              status: dateStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startDateLabel : labels.rule.value.datetime.dateLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startDatePlaceholder : labels.rule.value.datetime.datePlaceholder,
+              value: datePickerValue,
+              onChange: onDateChange,
+              readOnly
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HvTimePicker,
+            {
+              className: classes.timePicker,
+              timeFormat: "24",
+              name: `${elementId}-time`,
+              required: true,
+              status: timeStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startTimeLabel : labels.rule.value.datetime.timeLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startTimePlaceholder : labels.rule.value.datetime.timePlaceholder,
+              value: timePickerValue || void 0,
+              onChange: onTimeChange,
+              onToggle: (_evt, open) => {
+                if (!open && !touchedTime) {
+                  setTouchedTime(true);
+                }
+              },
+              readOnly
+            }
+          )
+        ]
+      }
+    ),
+    isRange && /* @__PURE__ */ jsxs("div", { className: cx(classes.row, classes.vertical), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(classes.horizontal, {
+            [classes.isMdDown]: isMdDown
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              HvDatePicker,
+              {
+                className: classes.datePicker,
+                name: `${elementId}-endDate`,
+                required: true,
+                status: endDateStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endDateLabel,
+                placeholder: labels.rule.value.datetime.endDatePlaceholder,
+                value: endDatePickerValue,
+                onChange: onEndDateChange,
+                readOnly
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HvTimePicker,
+              {
+                className: classes.timePicker,
+                timeFormat: "24",
+                name: `${elementId}-endTime`,
+                required: true,
+                status: endTimeStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endTimeLabel,
+                placeholder: labels.rule.value.datetime.endTimePlaceholder,
+                value: endTimePickerValue || void 0,
+                onChange: onEndTimeChange,
+                onToggle: (_evt, open) => {
+                  if (!open && !touchedEndTime) {
+                    setTouchedEndTime(true);
+                  }
+                },
+                readOnly
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        HvWarningText,
+        {
+          disableBorder: true,
+          id: `${elementId}-combined-error`,
+          isVisible: endDateTimeIsBefore,
+          children: labels.rule.value.datetime.validation.invalidInterval
+        }
+      )
+    ] })
+  ] });
+};
+memo(DateTimeValue);
+export {
+  DateTimeValue
+};
+//# sourceMappingURL=DateTimeValue.js.map