@hitachivantara/uikit-react-core 5.37.2 → 5.38.1

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

@@ -17,14 +17,13 @@ const {
     margin: theme.space.sm,
     backgroundColor: "transparent",
     maxWidth: "100%",
-    minWidth: 740,
-    paddingBottom: `calc(${theme.space.md} * 3)`
+    paddingBottom: theme.space.lg
   },
   /** Styles applied to the sub group containers. */
   subGroup: {
     margin: "40px 14px 32px 20px",
     minHeight: 120,
-    paddingBottom: 60,
+    paddingBottom: theme.space.md,
     "&::before": {
       content: '""',
       position: "absolute",
@@ -54,8 +53,8 @@ const {
   /** 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})`
+    top: `calc(-1 * ${theme.space.sm})`,
+    left: `calc(-1 * ${theme.space.sm})`
   },
   /** Styles applied to each combinator button. */
   combinatorButton: {},

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\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: `1px solid ${theme.colors.atmo4}`,\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: `calc(${theme.space.md} * 3)`,\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: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\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: `1px solid ${theme.colors.atmo4}`,\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: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\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: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\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  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","md","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display","createConditionButton","cursor","createGroupButton"],"mappings":"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"}
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\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: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\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: `1px solid ${theme.colors.atmo4}`,\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: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\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: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\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  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","paddingBottom","lg","subGroup","minHeight","md","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","minWidth","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display","createConditionButton","cursor","createGroupButton"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import { Delete } from "@hitachivantara/uikit-react-icons";
 import { useTheme, useMediaQuery } from "@mui/material";
-import { withTooltip } from "../../../hocs/withTooltip.js";
+import { IconButton } from "../../../utils/IconButton.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "./Rule.styles.js";
 import { staticClasses } from "./Rule.styles.js";
@@ -10,7 +10,6 @@ import { HvGrid } from "../../Grid/Grid.js";
 import { Attribute } from "./Attribute/Attribute.js";
 import { Operator } from "./Operator/Operator.js";
 import { Value } from "./Value/Value.js";
-import { HvButton } from "../../Button/Button.js";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 const Rule = (props) => {
   const {
@@ -49,14 +48,13 @@ const Rule = (props) => {
     return -1;
   }, [attribute, attributes, combinator, operators]);
   const shouldShowValueInput = operator !== "Empty" && operator !== "IsNotEmpty";
-  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, {}), labels.rule.delete.tooltip, "bottom");
   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: () => disableConfirmation ? dispatchAction({
+  }), 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: shouldShowValueInput && /* @__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({
@@ -65,7 +63,7 @@ const Rule = (props) => {
         id
       }],
       dialog: labels.rule.delete
-    }), disabled: readOnly, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) })
+    }), disabled: readOnly, children: /* @__PURE__ */ jsx(Delete, { role: "none" }) }) })
   ] });
 };
 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 { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\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  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            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          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;AA+BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,uBAAuB;AAE3B,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBtB,OAAOuB,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGH,QAAQmC,MAAM;AAAA,IAAE,CAACnC,QAAQe,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCpB,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,0BAC/D,QAAO,EAAA,MAAI,MAAC,IAAE,MACZU,kCACE,oBAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW7B,QAAQoC,kBAC9B,UAAC,oBAAA,UAAA,EACC,MAAI,MACJ,cAAY3B,OAAOuB,KAAKC,OAAOI,WAC/B,SAAS,MACP1B,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRiC,SAAS,CAAC;AAAA,QAAEf,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrC8C,QAAQ9B,OAAOuB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUvB,UAEV,UAAC,oBAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\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  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\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          {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        <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":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","root","actionsContainer","rule","delete","tooltip","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;AA8BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,uBAAuB;AAE3B,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEvC,8BACG,QACC,EAAA,WAAS,MACT,WAAWO,GAAGH,QAAQ8B,MAAM;AAAA,IAAE,CAAC9B,QAAQe,QAAQ,GAAGA;AAAAA,EAAAA,CAAU,GAC5D,SAAS,GAET,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCpB,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,MAChE,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACpBU,UACC,wBAAA,oBAAC,SACC,WACA,IACA,UACA,MAAA,CAEH,EACH,CAAA;AAAA,IAEF,oBAAC,UAAO,MAAI,MAAC,WAAW7B,QAAQ+B,kBAC9B,UAAC,oBAAA,YAAA,EACC,WAAU,UACV,OAAOtB,OAAOuB,KAAKC,OAAOC,WAAWzB,OAAOuB,KAAKC,OAAOE,WACxD,SAAS,MACPxB,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACR+B,SAAS,CAAC;AAAA,QAAEb,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrC4C,QAAQ5B,OAAOuB,KAAKC;AAAAA,IACrB,CAAA,GAEP,UAAUvB,UAEV,8BAAC,QAAO,EAAA,MAAK,QAAM,EAAA,CACrB,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -10,7 +10,7 @@ const {
     marginTop: theme.space.xs,
     minHeight: 94,
     "&>div:not(:last-child)": {
-      marginRight: theme.space.md
+      paddingRight: theme.space.md
     },
     // hide required * as all fields are required
     "& label>span[aria-hidden]": {
@@ -25,7 +25,7 @@ const {
       borderBottom: `1px solid ${theme.colors.atmo4}`,
       borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: `calc( -1 * 17px)`
+      left: `calc(-1 * 17px)`
     },
     [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
       content: '""',
@@ -35,7 +35,7 @@ const {
       height: "100%",
       borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: `calc( -1 * 17px)`
+      left: `calc(-1 * 17px)`
     }
   },
   actionsContainer: {
@@ -47,7 +47,10 @@ const {
   },
   isMdDown: {
     "&>div:not(:last-child)": {
-      marginRight: `calc(${theme.space.md} / 2)`
+      paddingRight: 0
+    },
+    "&>div:not(:first-child)": {
+      marginTop: theme.space.xs
     }
   }
 });

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 { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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\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: \"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      [`: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        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","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","isMdDown"],"mappings":";;;AAMa,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,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,MAAMY,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBK,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}
+{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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-child)\": {\n        marginTop: theme.space.xs,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","paddingRight","md","visibility","content","zIndex","width","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","marginRight","isMdDown"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IACvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,cAAcJ,MAAMC,MAAMI;AAAAA,IAC5B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IAEA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,MAAMY,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IAEA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBsB,aAAarB,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAoB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBlB,cAAc;AAAA,IAChB;AAAA,IACA,2BAA2B;AAAA,MACzBL,WAAWC,MAAMC,MAAMC;AAAAA,IACzB;AAAA,EACF;AACF,CACF;"}

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

@@ -8,9 +8,7 @@ const {
     display: "flex",
     flexDirection: "column"
   },
-  row: {
-    minHeight: 94
-  },
+  row: {},
   vertical: {
     display: "flex",
     flexDirection: "column"
@@ -27,10 +25,10 @@ const {
     }
   },
   datePicker: {
-    flex: "0 1 300px"
+    flex: 1
   },
   timePicker: {
-    flex: "0 1 220px"
+    flex: 1
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {\n      minHeight: 94,\n    },\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: \"0 1 300px\",\n    },\n    timePicker: {\n      flex: \"0 1 220px\",\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","row","minHeight","vertical","horizontal","marginRight","theme","space","md","isMdDown","datePicker","flex","timePicker"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,gCACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK;AAAA,IACHC,WAAW;AAAA,EACb;AAAA,EACAC,UAAU;AAAA,IACRJ,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAI,YAAY;AAAA,IACVL,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1BM,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IACVD,MAAM;AAAA,EACR;AACF,CACF;"}
+{"version":3,"file":"DateTimeValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {},\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: 1,\n    },\n    timePicker: {\n      flex: 1,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","row","vertical","horizontal","marginRight","theme","space","md","isMdDown","datePicker","flex","timePicker"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,gCACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK,CAAC;AAAA,EACNC,UAAU;AAAA,IACRH,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAG,YAAY;AAAA,IACVJ,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1BK,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IACVD,MAAM;AAAA,EACR;AACF,CACF;"}

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.js

@@ -4,21 +4,17 @@ const {
   useClasses,
   staticClasses
 } = createClasses("HvQueryBuilder-NumericValue", {
-  root: {
-    display: "flex",
-    flexGrow: 1
-  },
+  root: {},
   label: {
     paddingBottom: "6px"
   },
-  inputContainer: {
-    display: "flex",
-    alignItems: "baseline",
-    flexGrow: 1
-  },
+  inputContainer: {},
   rangeContainer: {
     display: "flex",
-    flexGrow: 1,
+    "& $inputContainer": {
+      flexGrow: 1,
+      overflow: "auto"
+    },
     "& > $inputContainer:not(:last-child)": {
       marginRight: theme.space.md
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Numeric.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexGrow: 1,\n    },\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {\n      display: \"flex\",\n      alignItems: \"baseline\",\n      flexGrow: 1,\n    },\n    rangeContainer: {\n      display: \"flex\",\n      flexGrow: 1,\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexGrow","label","paddingBottom","inputContainer","alignItems","rangeContainer","marginRight","theme","space","md","input","isMdDown"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,EACZ;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTK,YAAY;AAAA,IACZJ,UAAU;AAAA,EACZ;AAAA,EACAK,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,UAAU;AAAA,IAEV,wCAAwC;AAAA,MACtCM,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLV,UAAU;AAAA,EACZ;AAAA,EACAW,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}
+{"version":3,"file":"Numeric.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {},\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {},\n    rangeContainer: {\n      display: \"flex\",\n\n      \"& $inputContainer\": {\n        flexGrow: 1,\n        overflow: \"auto\",\n      },\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","label","paddingBottom","inputContainer","rangeContainer","display","flexGrow","overflow","marginRight","theme","space","md","input","isMdDown"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,+BACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IAET,qBAAqB;AAAA,MACnBC,UAAU;AAAA,MACVC,UAAU;AAAA,IACZ;AAAA,IAEA,wCAAwC;AAAA,MACtCC,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLN,UAAU;AAAA,EACZ;AAAA,EACAO,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}

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

@@ -1,13 +1,12 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useCallback } from "react";
 import { Add, Delete, Info } from "@hitachivantara/uikit-react-icons";
-import { withTooltip } from "../../../hocs/withTooltip.js";
+import { IconButton } from "../../../utils/IconButton.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "../QueryBuilder.styles.js";
 import { HvButton } from "../../Button/Button.js";
 import { Rule } from "../Rule/Rule.js";
 import { HvEmptyState } from "../../EmptyState/EmptyState.js";
-import { HvGrid } from "../../Grid/Grid.js";
 import { HvMultiButton } from "../../MultiButton/MultiButton.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const RuleGroup = ({
@@ -45,9 +44,6 @@ const RuleGroup = ({
       });
     }, disabled: readOnly, startIcon: /* @__PURE__ */ jsx(Add, {}), children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label }) })
   ] });
-  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, { className: cx({
-    [classes.topRemoveButtonDisabled]: readOnly
-  }) }), level === 0 && labels.query?.delete?.tooltip ? labels.query?.delete?.tooltip : labels.group.delete.tooltip, "top");
   const onClickCombinator = useCallback((item) => {
     dispatchAction({
       type: "set-combinator",
@@ -59,19 +55,19 @@ const RuleGroup = ({
     [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, { icon: true, className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+    /* @__PURE__ */ jsx(HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: 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("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsx(IconButton, { className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+      type: "remove-node",
+      id
+    }) : askAction({
+      actions: [{
         type: "remove-node",
         id
-      }) : askAction({
-        actions: [{
-          type: "remove-node",
-          id
-        }],
-        dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
-      }), "aria-label": level === 0 && labels.query?.delete?.ariaLabel ? labels.query?.delete?.ariaLabel : labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) }) })
-    ] }),
+      }],
+      dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
+    }), title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsx(Delete, { role: "none", className: cx({
+      [classes.topRemoveButtonDisabled]: readOnly
+    }) }) }) }),
     rules?.length > 0 && /* @__PURE__ */ jsx("div", { className: cx(classes.rulesContainer, {
       [classes.subRulesContainer]: level > 0,
       [classes.topRulesContainer]: level === 0
@@ -106,7 +102,7 @@ const RuleGroup = ({
         }, className: classes.createGroupButton, children: `${labels.empty?.createGroup}` })
       ] })
     ] }), icon: /* @__PURE__ */ jsx(Info, {}) }),
-    /* @__PURE__ */ jsx(HvGrid, { container: true, children: /* @__PURE__ */ jsx(HvGrid, { item: true, className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons }) })
+    /* @__PURE__ */ jsx("div", { className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvEmptyState } from \"@core/components/EmptyState\";\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQuery, HvQueryBuilderQueryCombinator } from \"../types\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: HvQueryBuilderQuery[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <Delete className={cx({ [classes.topRemoveButtonDisabled]: readOnly })} />\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvGrid container>\n        <HvGrid item>\n          <HvMultiButton\n            className={cx(classes.combinator, classes.topCombinator)}\n            disabled={readOnly}\n          >\n            {combinators &&\n              combinators.map((item) => (\n                <HvButton\n                  key={item.operand}\n                  className={classes.combinatorButton}\n                  selected={item.operand === combinator}\n                  onClick={() => item.operand && onClickCombinator(item)}\n                  disabled={readOnly}\n                  size=\"xs\"\n                >\n                  {item.label}\n                </HvButton>\n              ))}\n          </HvMultiButton>\n        </HvGrid>\n        <HvGrid item>\n          <div\n            className={cx(classes.buttonBackground, classes.topRemoveButton)}\n          >\n            <HvButton\n              icon\n              className={classes.removeButton}\n              onClick={() =>\n                disableConfirmation\n                  ? dispatchAction({ type: \"remove-node\", id })\n                  : askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    })\n              }\n              aria-label={\n                level === 0 && labels.query?.delete?.ariaLabel\n                  ? labels.query?.delete?.ariaLabel\n                  : labels.group.delete.ariaLabel\n              }\n              disabled={readOnly}\n            >\n              <DeleteIcon />\n            </HvButton>\n          </div>\n        </HvGrid>\n      </HvGrid>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <HvGrid container>\n        <HvGrid\n          item\n          className={cx(\n            classes.actionButtonContainer,\n            classes.topActionButtonContainer\n          )}\n        >\n          {actionButtons}\n        </HvGrid>\n      </HvGrid>\n    </div>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","classesProp","cx","useClasses","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","disableConfirmation","useQueryBuilderContext","normalizedMaxDepth","actionButtons","buttonBackground","type","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","topCombinator","map","combinatorButton","topRemoveButton","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","empty","title","createConditionButton","createCondition","spacer","createGroupButton","createGroup","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
+{"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvEmptyState } from \"@core/components/EmptyState\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQuery, HvQueryBuilderQueryCombinator } from \"../types\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: HvQueryBuilderQuery[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvMultiButton\n        className={cx(classes.combinator, classes.topCombinator)}\n        disabled={readOnly}\n      >\n        {combinators?.map((item) => (\n          <HvButton\n            key={item.operand}\n            className={classes.combinatorButton}\n            selected={item.operand === combinator}\n            onClick={() => item.operand && onClickCombinator(item)}\n            disabled={readOnly}\n            size=\"xs\"\n          >\n            {item.label}\n          </HvButton>\n        ))}\n      </HvMultiButton>\n      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n        <IconButton\n          className={classes.removeButton}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                })\n          }\n          title={\n            (level === 0 && labels.query?.delete?.tooltip) ||\n            labels.group.delete.tooltip ||\n            (level === 0 && labels.query?.delete?.ariaLabel) ||\n            labels.group.delete.ariaLabel\n          }\n          disabled={readOnly}\n        >\n          <Delete\n            role=\"none\"\n            className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n          />\n        </IconButton>\n      </div>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <div\n        className={cx(\n          classes.actionButtonContainer,\n          classes.topActionButtonContainer\n        )}\n      >\n        {actionButtons}\n      </div>\n    </div>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","classesProp","cx","useClasses","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","disableConfirmation","useQueryBuilderContext","normalizedMaxDepth","actionButtons","buttonBackground","type","query","addRule","label","group","addGroup","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","topCombinator","map","combinatorButton","topRemoveButton","removeButton","actions","dialog","delete","tooltip","ariaLabel","topRemoveButtonDisabled","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","empty","title","createConditionButton","createCondition","spacer","createGroupButton","createGroup","actionButtonContainer","topActionButtonContainer"],"mappings":";;;;;;;;;;;AAuBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC,QAAQ;AAAA,EACRC;AAAAA,EACAC,aAAa;AAAA,EACbC,QAAQ,CAAE;AAAA,EACVC,SAASC;AACK,MAAM;AACd,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAExC,QAAA;AAAA,IACJG;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,uBAAuB;AAE3B,QAAMC,qBAAqBN,WAAW;AAEtC,QAAMO,gBAEF,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAWb,QAAQc,kBACtB,8BAAC,UACC,EAAA,SAAQ,mBACR,SAAS,MAAM;AACE,qBAAA;AAAA,QAAEC,MAAM;AAAA,QAAYlB;AAAAA,MAAAA,CAAI;AAAA,IACzC,GACA,UAAUY,UACV,+BAAY,UAEXb,UAAU,UAAA,KAAKY,OAAOQ,OAAOC,SAASC,SAAS,OAC5CV,OAAOQ,OAAOC,SAASC,QACvBV,OAAOW,MAAMF,QAAQC,MAAAA,CAC3B,EACF,CAAA;AAAA,IACCtB,SAASgB,sBACP,oBAAA,OAAA,EAAI,WAAWZ,QAAQc,kBACtB,UAAA,oBAAC,UACC,EAAA,SAAQ,mBACR,SAAS,MAAM;AACE,qBAAA;AAAA,QAAEC,MAAM;AAAA,QAAalB;AAAAA,MAAAA,CAAI;AAAA,IAC1C,GACA,UAAUY,UACV,+BAAY,UAEXb,UAAU,UAAA,KAAKY,OAAOQ,OAAOI,UAAUF,SAAS,OAC7CV,OAAOQ,OAAOI,UAAUF,QACxBV,OAAOW,MAAMC,SAASF,MAAAA,CAC5B,EACF,CAAA;AAAA,EAEJ,EAAA,CAAA;AAGIG,QAAAA,oBAAoBC,YACxB,CAACC,SAAwC;AACxB,mBAAA;AAAA,MACbR,MAAM;AAAA,MACNlB;AAAAA,MACAC,YAAYyB,KAAKC;AAAAA,IAAAA,CAClB;AAAA,EAAA,GAEH,CAACpB,gBAAgBP,EAAE,CACrB;AAEA,SACG,qBAAA,OAAA,EACC,WAAWK,GAAGF,QAAQyB,MAAM;AAAA,IAC1B,CAACzB,QAAQ0B,QAAQ,GAAG9B,UAAU;AAAA,IAC9B,CAACI,QAAQ2B,QAAQ,GAAG/B,QAAQ;AAAA,EAC7B,CAAA,GAED,UAAA;AAAA,IAAA,oBAAC,iBACC,WAAWM,GAAGF,QAAQF,YAAYE,QAAQ4B,aAAa,GACvD,UAAUnB,UAETF,uBAAasB,IAAKN,CAAAA,6BAChB,UAEC,EAAA,WAAWvB,QAAQ8B,kBACnB,UAAUP,KAAKC,YAAY1B,YAC3B,SAAS,MAAMyB,KAAKC,WAAWH,kBAAkBE,IAAI,GACrD,UAAUd,UACV,MAAK,MAEJc,UAAAA,KAAKL,SAPDK,KAAKC,OAQZ,CACD,GACH;AAAA,wBACC,OAAI,EAAA,WAAWtB,GAAGF,QAAQc,kBAAkBd,QAAQ+B,eAAe,GAClE,UAAA,oBAAC,cACC,WAAW/B,QAAQgC,cACnB,SAAS,MACPtB,sBACIN,eAAe;AAAA,MAAEW,MAAM;AAAA,MAAelB;AAAAA,IAAI,CAAA,IAC1CQ,UAAU;AAAA,MACR4B,SAAS,CAAC;AAAA,QAAElB,MAAM;AAAA,QAAelB;AAAAA,MAAAA,CAAI;AAAA,MACrCqC,QACEtC,UAAU,KAAKY,OAAOQ,OAAOmB,UAAU,OACnC3B,OAAOQ,MAAMmB,SACb3B,OAAOW,MAAMgB;AAAAA,IAAAA,CACpB,GAEP,OACGvC,UAAU,KAAKY,OAAOQ,OAAOmB,QAAQC,WACtC5B,OAAOW,MAAMgB,OAAOC,WACnBxC,UAAU,KAAKY,OAAOQ,OAAOmB,QAAQE,aACtC7B,OAAOW,MAAMgB,OAAOE,WAEtB,UAAU5B,UAEV,UAAC,oBAAA,QAAA,EACC,MAAK,QACL,WAAWP,GAAG;AAAA,MAAE,CAACF,QAAQsC,uBAAuB,GAAG7B;AAAAA,IAAAA,CAAU,EAAE,CAAA,EAEnE,CAAA,GACF;AAAA,IACCV,OAAOwC,SAAS,KACf,oBAAC,SACC,WAAWrC,GAAGF,QAAQwC,gBAAgB;AAAA,MACpC,CAACxC,QAAQyC,iBAAiB,GAAG7C,QAAQ;AAAA,MACrC,CAACI,QAAQ0C,iBAAiB,GAAG9C,UAAU;AAAA,IAAA,CACxC,GAEAG,UAAAA,MAAM8B,IAAI,CAACc,MAAMC,UAAU;AAC1B,UAAI,gBAAgBD,MAAM;AACxB,eACG,oBAAA,WAAA,EAEC,OAAO/C,QAAQ,GACf,GAAI+C,MACJ,IAAIA,KAAK9C,IACT,QAJK8C,GAAAA,KAAK9C,EAKV;AAAA,MAEN;AAEA,YAAMgD,YACJ/C,eAAe,SACfC,MAAM+C,KAAK,CAACC,GAAGC,MAAM;AACnB,YAAI,eAAeD,GAAG;AAElBA,cAAAA,EAAEE,cAAcN,KAAKM,aACrBF,EAAElD,OAAO8C,KAAK9C,MACdmD,IAAIJ,OACJ;AACO,mBAAA;AAAA,UACT;AAAA,QACF;AACO,eAAA;AAAA,MAAA,CACR;AAGD,aAAA,oBAAC,MAEC,EAAA,GAAID,MACJ,WACA,IAAIA,KAAK9C,IACT,WAJK8C,GAAAA,KAAK9C,EAKV;AAAA,IAEL,CAAA,GACH;AAAA,IAEDE,OAAOwC,WAAW,KAChB,oBAAA,cAAA,EACC,OAAO/B,OAAO0C,OAAOC,OACrB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,gBACC,MAAI,MACJ,WAAU,UACV,SAAS,MAAM;AACE,uBAAA;AAAA,UAAEpC,MAAM;AAAA,UAAYlB;AAAAA,QAAAA,CAAI;AAAA,MAAA,GAEzC,WAAWG,QAAQoD,uBAEjB,aAAE5C,OAAO0C,OAAOG,eAAgB,IACpC;AAAA,MACCzD,SAASgB,sBAEJ,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAEJ,GAAAA,OAAO0C,OAAOI,MAAO;AAAA,4BACxB,cACC,EAAA,MAAI,MACJ,WAAU,UACV,SAAS,MAAM;AACE,yBAAA;AAAA,YAAEvC,MAAM;AAAA,YAAalB;AAAAA,UAAAA,CAAI;AAAA,QAAA,GAE1C,WAAWG,QAAQuD,mBAEjB,aAAE/C,OAAO0C,OAAOM,WAAY,IAChC;AAAA,MAAA,GACF;AAAA,IAAA,EAEJ,CAAA,GAEF,MAAO,oBAAA,MAAA,CAAA,CAAO,EAEjB,CAAA;AAAA,IACD,oBAAC,SACC,WAAWtD,GACTF,QAAQyD,uBACRzD,QAAQ0D,wBACV,GAEC7C,UACH,cAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Table/TableBody/TableBody.js

@@ -8,7 +8,7 @@ import { staticClasses } from "./TableBody.styles.js";
 import { HvFocus } from "../../Focus/Focus.js";
 const tableSectionContext = {
   type: "body",
-  filterClassName: "grid"
+  filterClassName: "_grid"
 };
 const defaultComponent = "tbody";
 const HvTableBody = forwardRef(({

package/dist/esm/components/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  (\n    {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  }\n);\n"],"names":["tableSectionContext","type","filterClassName","defaultComponent","HvTableBody","forwardRef","classes","classesProp","className","component","children","withNavigation","others","externalRef","cx","useClasses","tableContext","useContext","TableContext","bodyRef","useRef","handleRef","useForkRef","Component","components","TBody","root","Children","map","element","isValidElement","key","props","selected"],"mappings":";;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAMZC,MAAAA,cAAcC,WACzB,CACE;AAAA,EACEC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjB,GAAGC;AACL,GACAC,gBACG;AACG,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAExCS,QAAAA,eAAeC,WAAWC,YAAY;AAEtCC,QAAAA,UAAUC,OAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAWT,aAAaM,OAAO;AAEjD,QAAMI,YACJd,aAAaO,cAAcQ,YAAYC,SAAStB;AAGhD,SAAA,oBAAC,oBAAoB,UAApB,EAA6B,OAAOH,qBACnC,UAAA,oBAAC,WACC,EAAA,WAAWc,GAAGR,QAAQoB,MAAMlB,SAAS,GACrC,KAAKa,WACL,MAAME,cAAcpB,mBAAmB,OAAO,YAC9C,GAAIS,QAEHD,UACGgB,iBAAAA,SAASC,IAAIlB,UAAWmB,CAAY,YAAA;AAC9BC,QAAAA,eAAeD,OAAO,GAAG;AAEzB,aAAA,oBAAC,SACC,EAAA,IAAK,SAAQA,QAAQE,GAAI,IACzB,SAASZ,SAET,UAAS,QACT,aAAanB,oBAAoBE,iBACjC,gBAAgB,GAChB,eAAe,OACf,UAAU2B,QAAQG,MAAMC,UAEvBJ,UAPK,QAAA,GAAA,OAAMA,QAAQE,GAAI,EAQ1B;AAAA,IAEJ;AAAA,EAAA,CACD,IACDrB,UACN,EACF,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"_grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  (\n    {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  }\n);\n"],"names":["tableSectionContext","type","filterClassName","defaultComponent","HvTableBody","forwardRef","classes","classesProp","className","component","children","withNavigation","others","externalRef","cx","useClasses","tableContext","useContext","TableContext","bodyRef","useRef","handleRef","useForkRef","Component","components","TBody","root","Children","map","element","isValidElement","key","props","selected"],"mappings":";;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAMZC,MAAAA,cAAcC,WACzB,CACE;AAAA,EACEC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjB,GAAGC;AACL,GACAC,gBACG;AACG,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAExCS,QAAAA,eAAeC,WAAWC,YAAY;AAEtCC,QAAAA,UAAUC,OAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAWT,aAAaM,OAAO;AAEjD,QAAMI,YACJd,aAAaO,cAAcQ,YAAYC,SAAStB;AAGhD,SAAA,oBAAC,oBAAoB,UAApB,EAA6B,OAAOH,qBACnC,UAAA,oBAAC,WACC,EAAA,WAAWc,GAAGR,QAAQoB,MAAMlB,SAAS,GACrC,KAAKa,WACL,MAAME,cAAcpB,mBAAmB,OAAO,YAC9C,GAAIS,QAEHD,UACGgB,iBAAAA,SAASC,IAAIlB,UAAWmB,CAAY,YAAA;AAC9BC,QAAAA,eAAeD,OAAO,GAAG;AAEzB,aAAA,oBAAC,SACC,EAAA,IAAK,SAAQA,QAAQE,GAAI,IACzB,SAASZ,SAET,UAAS,QACT,aAAanB,oBAAoBE,iBACjC,gBAAgB,GAChB,eAAe,OACf,UAAU2B,QAAQG,MAAMC,UAEvBJ,UAPK,QAAA,GAAA,OAAMA,QAAQE,GAAI,EAQ1B;AAAA,IAEJ;AAAA,EAAA,CACD,IACDrB,UACN,EACF,CAAA;AAEJ,CACF;"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -19,7 +19,7 @@ const HvTooltip = forwardRef((props, ref) => {
     TransitionComponent = Fade,
     TransitionProps = {
       timeout: 400,
-      placement
+      placement: "top"
     },
     containerId,
     ...others

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","undefined","tooltip","tooltipMulti","popper","container","getElementById"],"mappings":";;;;;;;;AA6DO,MAAMA,YAAYC,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,WAAWhB,WAAW;AAGxC,SAAA,oBAAC,SACC,EAAA,KACA,MAAMC,QAAQgB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAASd,YAAYL,QAAQmB,UAAUnB,QAAQoB;AAAAA,IAC/CC,QAAQrB,QAAQqB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WAAWC,eAAeX,eAAeG,MAAM;AAAA,EAAA,GAE7CF,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","undefined","tooltip","tooltipMulti","popper","container","getElementById"],"mappings":";;;;;;;;AA6DO,MAAMA,YAAYC,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP,WAAW;AAAA,IAAM;AAAA,IACnDQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,WAAWhB,WAAW;AAGxC,SAAA,oBAAC,SACC,EAAA,KACA,MAAMC,QAAQgB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAASd,YAAYL,QAAQmB,UAAUnB,QAAQoB;AAAAA,IAC/CC,QAAQrB,QAAQqB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WAAWC,eAAeX,eAAeG,MAAM;AAAA,EAAA,GAE7CF,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/Typography/Typography.js

@@ -18,15 +18,22 @@ const HvTypographyMap = {
   // LEGACY
   "5xlTitle": "h1",
   "4xlTitle": "h1",
+  "3xlTitle": "h1",
   xxlTitle: "h1",
+  xlTitle: "h1",
   lTitle: "h2",
+  mTitle: "h3",
   sTitle: "h4",
+  xsTitle: "h5",
   xxsTitle: "h6",
   sectionTitle: "p",
+  highlightText: "p",
+  normalText: "p",
   placeholderText: "p",
   link: "p",
   disabledText: "p",
   selectedNavText: "p",
+  vizText: "p",
   vizTextDisabled: "p",
   xsInlineLink: "p"
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAEjC,QAAMV,UAAUW,WAAWV,aAAaQ,aAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAGnE,SAAA,oBAAC,aACC,KACA,WAAWO,GACTT,QAAQgB,MACRhB,QAAQE,OAAO,GACf;AAAA,IACE,CAACF,QAAQiB,MAAM,GAAG7B;AAAAA,IAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,IAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBP,GAAAA,SACF,GACIU,GAAAA,OACJ,CAAA;AAEN,CACF;"}
+{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { ElementType, forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","xlTitle","lTitle","mTitle","sTitle","xsTitle","xxsTitle","sectionTitle","highlightText","normalText","placeholderText","link","disabledText","selectedNavText","vizText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,SAAS;AAAA,EACTC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AAgCO,MAAMC,eAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBhB,OAAO;AAAA,IACPiB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAEjC,QAAMV,UAAUW,WAAWV,aAAaQ,aAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQxC,gBAAgBoC,OAAO,KAAK;AAGnE,SAAA,oBAAC,aACC,KACA,WAAWO,GACTT,QAAQgB,MACRhB,QAAQE,OAAO,GACf;AAAA,IACE,CAACF,QAAQiB,MAAM,GAAG9B;AAAAA,IAClB,CAACa,QAAQK,MAAM,GAAGA;AAAAA,IAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBP,GAAAA,SACF,GACIU,GAAAA,OACJ,CAAA;AAEN,CACF;"}

package/dist/esm/hooks/useControlled.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlled.js","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n//    so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { useRef, useState, useCallback } from \"react\";\n\nexport const useControlled = (controlledProp, initialState) => {\n  const { current: isControlled } = useRef(controlledProp !== undefined);\n  const [valueState, setValue] = useState(initialState);\n  const value = isControlled ? controlledProp : valueState;\n\n  if (import.meta.env.DEV && isControlled !== (controlledProp !== undefined)) {\n    // eslint-disable-next-line no-console\n    console.error(\n      [\n        `A component is changing the ${\n          isControlled ? \"\" : \"un\"\n        }controlled state to be ${isControlled ? \"un\" : \"\"}controlled.`,\n        \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n        \"Decide between using a controlled or uncontrolled element for the lifetime of the component.\",\n        \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n      ].join(\"\\n\")\n    );\n  }\n\n  const setValueIfUncontrolled = useCallback(\n    (newValue) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [isControlled]\n  );\n\n  return [value, setValueIfUncontrolled];\n};\n"],"names":["useControlled","controlledProp","initialState","current","isControlled","useRef","undefined","valueState","setValue","useState","value","setValueIfUncontrolled","useCallback","newValue"],"mappings":";AAUaA,MAAAA,gBAAgBA,CAACC,gBAAgBC,iBAAiB;AACvD,QAAA;AAAA,IAAEC,SAASC;AAAAA,EAAa,IAAIC,OAAOJ,mBAAmBK,MAAS;AACrE,QAAM,CAACC,YAAYC,QAAQ,IAAIC,SAASP,YAAY;AAC9CQ,QAAAA,QAAQN,eAAeH,iBAAiBM;AAgBxCI,QAAAA,yBAAyBC,YAC5BC,CAAa,aAAA;AACZ,QAAI,CAACT,cAAc;AACjBI,eAASK,QAAQ;AAAA,IACnB;AAAA,EAAA,GAEF,CAACT,YAAY,CACf;AAEO,SAAA,CAACM,OAAOC,sBAAsB;AACvC;"}
+{"version":3,"file":"useControlled.js","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n//    so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { useRef, useState, useCallback, SetStateAction } from \"react\";\n\n// export const useControlled = <T = any>(controlledProp: T, initialState: T) => {\nexport const useControlled = (controlledProp: any, initialState: any) => {\n  const { current: isControlled } = useRef(controlledProp !== undefined);\n  const [valueState, setValue] = useState(initialState);\n  const value = isControlled ? controlledProp : valueState;\n\n  if (import.meta.env.DEV && isControlled !== (controlledProp !== undefined)) {\n    // eslint-disable-next-line no-console\n    console.error(\n      [\n        `A component is changing the ${\n          isControlled ? \"\" : \"un\"\n        }controlled state to be ${isControlled ? \"un\" : \"\"}controlled.`,\n        \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n        \"Decide between using a controlled or uncontrolled element for the lifetime of the component.\",\n        \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n      ].join(\"\\n\")\n    );\n  }\n\n  const setValueIfUncontrolled = useCallback(\n    (newValue: SetStateAction<any>) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [isControlled]\n  );\n\n  return [value, setValueIfUncontrolled];\n};\n"],"names":["useControlled","controlledProp","initialState","current","isControlled","useRef","undefined","valueState","setValue","useState","value","setValueIfUncontrolled","useCallback","newValue"],"mappings":";AAWaA,MAAAA,gBAAgBA,CAACC,gBAAqBC,iBAAsB;AACjE,QAAA;AAAA,IAAEC,SAASC;AAAAA,EAAa,IAAIC,OAAOJ,mBAAmBK,MAAS;AACrE,QAAM,CAACC,YAAYC,QAAQ,IAAIC,SAASP,YAAY;AAC9CQ,QAAAA,QAAQN,eAAeH,iBAAiBM;AAgBxCI,QAAAA,yBAAyBC,YAC7B,CAACC,aAAkC;AACjC,QAAI,CAACT,cAAc;AACjBI,eAASK,QAAQ;AAAA,IACnB;AAAA,EAAA,GAEF,CAACT,YAAY,CACf;AAEO,SAAA,CAACM,OAAOC,sBAAsB;AACvC;"}

package/dist/esm/hooks/useImageLoaded.js

@@ -8,7 +8,7 @@ const useImageLoaded = (src, srcSet) => {
     setImageLoaded(false);
     let active = true;
     const image = new Image();
-    image.src = src;
+    image.src = src || "";
     image.srcset = srcSet || "";
     image.onload = () => {
       if (!active) {

package/dist/esm/hooks/useImageLoaded.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageLoaded.js","sources":["../../../src/hooks/useImageLoaded.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport const useImageLoaded = (src, srcSet) => {\n  const [imageLoaded, setImageLoaded] = useState<boolean | string>(false);\n\n  useEffect(() => {\n    if (!src && !srcSet) {\n      return undefined;\n    }\n\n    setImageLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    image.src = src;\n    image.srcset = srcSet || \"\";\n    image.onload = () => {\n      if (!active) {\n        return;\n      }\n\n      setImageLoaded(\"loaded\");\n    };\n    image.onerror = () => {\n      if (!active) {\n        return;\n      }\n\n      setImageLoaded(\"error\");\n    };\n\n    return () => {\n      active = false;\n    };\n  }, [src, srcSet]);\n\n  return imageLoaded;\n};\n"],"names":["useImageLoaded","src","srcSet","imageLoaded","setImageLoaded","useState","useEffect","undefined","active","image","Image","srcset","onload","onerror"],"mappings":";AAEaA,MAAAA,iBAAiBA,CAACC,KAAKC,WAAW;AAC7C,QAAM,CAACC,aAAaC,cAAc,IAAIC,SAA2B,KAAK;AAEtEC,YAAU,MAAM;AACV,QAAA,CAACL,OAAO,CAACC,QAAQ;AACZK,aAAAA;AAAAA,IACT;AAEAH,mBAAe,KAAK;AAEpB,QAAII,SAAS;AACPC,UAAAA,QAAQ,IAAIC;AAClBD,UAAMR,MAAMA;AACZQ,UAAME,SAAST,UAAU;AACzBO,UAAMG,SAAS,MAAM;AACnB,UAAI,CAACJ,QAAQ;AACX;AAAA,MACF;AAEAJ,qBAAe,QAAQ;AAAA,IAAA;AAEzBK,UAAMI,UAAU,MAAM;AACpB,UAAI,CAACL,QAAQ;AACX;AAAA,MACF;AAEAJ,qBAAe,OAAO;AAAA,IAAA;AAGxB,WAAO,MAAM;AACF,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAACH,KAAKC,MAAM,CAAC;AAETC,SAAAA;AACT;"}
+{"version":3,"file":"useImageLoaded.js","sources":["../../../src/hooks/useImageLoaded.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport const useImageLoaded = (src?: string, srcSet?: string) => {\n  const [imageLoaded, setImageLoaded] = useState<boolean | string>(false);\n\n  useEffect(() => {\n    if (!src && !srcSet) {\n      return undefined;\n    }\n\n    setImageLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    image.src = src || \"\";\n    image.srcset = srcSet || \"\";\n    image.onload = () => {\n      if (!active) {\n        return;\n      }\n\n      setImageLoaded(\"loaded\");\n    };\n    image.onerror = () => {\n      if (!active) {\n        return;\n      }\n\n      setImageLoaded(\"error\");\n    };\n\n    return () => {\n      active = false;\n    };\n  }, [src, srcSet]);\n\n  return imageLoaded;\n};\n"],"names":["useImageLoaded","src","srcSet","imageLoaded","setImageLoaded","useState","useEffect","undefined","active","image","Image","srcset","onload","onerror"],"mappings":";AAEaA,MAAAA,iBAAiBA,CAACC,KAAcC,WAAoB;AAC/D,QAAM,CAACC,aAAaC,cAAc,IAAIC,SAA2B,KAAK;AAEtEC,YAAU,MAAM;AACV,QAAA,CAACL,OAAO,CAACC,QAAQ;AACZK,aAAAA;AAAAA,IACT;AAEAH,mBAAe,KAAK;AAEpB,QAAII,SAAS;AACPC,UAAAA,QAAQ,IAAIC;AAClBD,UAAMR,MAAMA,OAAO;AACnBQ,UAAME,SAAST,UAAU;AACzBO,UAAMG,SAAS,MAAM;AACnB,UAAI,CAACJ,QAAQ;AACX;AAAA,MACF;AAEAJ,qBAAe,QAAQ;AAAA,IAAA;AAEzBK,UAAMI,UAAU,MAAM;AACpB,UAAI,CAACL,QAAQ;AACX;AAAA,MACF;AAEAJ,qBAAe,OAAO;AAAA,IAAA;AAGxB,WAAO,MAAM;AACF,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAACH,KAAKC,MAAM,CAAC;AAETC,SAAAA;AACT;"}