@hitachivantara/uikit-react-core 5.37.2 → 5.38.0

package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.cjs","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.cjs","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/cjs/components/QueryBuilder/Rule/Rule.cjs

@@ -53,10 +53,10 @@ const Rule = (props) => {
   const DeleteIcon = withTooltip.withTooltip(() => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}), labels.rule.delete.tooltip, "bottom");
   return /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, { container: true, className: cx(classes.root, {
     [classes.isMdDown]: isMdDown
-  }), spacing: 0, wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 2, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, { attribute, id, disabled, isInvalid }) }),
-    attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 2, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, { id, combinator, attribute, operator }) }),
-    attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: true, children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, { attribute, id, operator, value }) }),
+  }), spacing: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, { attribute, id, disabled, isInvalid }) }),
+    attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, { id, combinator, attribute, operator }) }),
+    attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: true, children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, { attribute, id, operator, value }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, "aria-label": labels.rule.delete.ariaLabel, onClick: () => disableConfirmation ? dispatchAction({
       type: "remove-node",
       id

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.cjs","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","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","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,gBAAA,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,QAAuB,uBAAA;AAE3B,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,MAAAA,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,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBxB,OAAOyB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGH,QAAQsC,MAAM;AAAA,IAAE,CAACtC,QAAQe,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAAiB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC5C,aAAa,QAAQwB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED7C,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,qCAC/DkB,KAAAA,QAAO,EAAA,MAAI,MAAC,IAAE,MACZR,kCACEG,2BAAAA,IAAAS,MAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWrC,QAAQ0C,kBAC9B,UAACV,2BAAAA,IAAAW,OAAA,UAAA,EACC,MAAI,MACJ,cAAYlC,OAAOyB,KAAKC,OAAOS,WAC/B,SAAS,MACPjC,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRwC,SAAS,CAAC;AAAA,QAAEtB,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrCqD,QAAQrC,OAAOyB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUzB,UAEV,UAACsB,2BAAA,IAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Rule.cjs","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    >\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        <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","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","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,gBAAA,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,QAAuB,uBAAA;AAE3B,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,MAAAA,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,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBxB,OAAOyB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGH,QAAQsC,MAAM;AAAA,IAAE,CAACtC,QAAQe,QAAQ,GAAGA;AAAAA,EAAAA,CAAU,GAC5D,SAAS,GAET,UAAA;AAAA,IAAAiB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC5C,aAAa,QAAQwB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED7C,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,MAChEa,2BAAAA,IAACK,eAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACpBR,UACC,wBAAAG,2BAAAA,IAACS,MAAAA,SACC,WACA,IACA,UACA,MAAA,CAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWrC,QAAQ0C,kBAC9B,UAACV,2BAAAA,IAAAW,OAAA,UAAA,EACC,MAAI,MACJ,cAAYlC,OAAOyB,KAAKC,OAAOS,WAC/B,SAAS,MACPjC,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRwC,SAAS,CAAC;AAAA,QAAEtB,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrCqD,QAAQrC,OAAOyB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUzB,UAEV,UAACsB,2BAAA,IAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs

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

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.cjs","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,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,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,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,YAAMY,MAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}
+{"version":3,"file":"Rule.styles.cjs","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,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IACvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,cAAcJ,YAAAA,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,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IAEA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,YAAMY,MAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAoB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBlB,cAAc;AAAA,IAChB;AAAA,IACA,2BAA2B;AAAA,MACzBL,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IACzB;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs

@@ -10,9 +10,7 @@ const {
     display: "flex",
     flexDirection: "column"
   },
-  row: {
-    minHeight: 94
-  },
+  row: {},
   vertical: {
     display: "flex",
     flexDirection: "column"
@@ -29,10 +27,10 @@ const {
     }
   },
   datePicker: {
-    flex: "0 1 300px"
+    flex: 1
   },
   timePicker: {
-    flex: "0 1 220px"
+    flex: 1
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeValue.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,YAAAA,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.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,YAAAA,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/cjs/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs

@@ -6,21 +6,17 @@ const {
   useClasses,
   staticClasses
 } = classes.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: uikitStyles.theme.space.md
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Numeric.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLV,UAAU;AAAA,EACZ;AAAA,EACAW,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}
+{"version":3,"file":"Numeric.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLN,UAAU;AAAA,EACZ;AAAA,EACAO,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -9,7 +9,6 @@ const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const Rule = require("../Rule/Rule.cjs");
 const EmptyState = require("../../EmptyState/EmptyState.cjs");
-const Grid = require("../../Grid/Grid.cjs");
 const MultiButton = require("../../MultiButton/MultiButton.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const RuleGroup = ({
@@ -61,19 +60,17 @@ const RuleGroup = ({
     [classes.topGroup]: level === 0,
     [classes.subGroup]: level > 0
   }), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+    /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, 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__ */ jsxRuntime.jsx(DeleteIcon, {}) }) }) })
-    ] }),
+      }],
+      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__ */ jsxRuntime.jsx(DeleteIcon, {}) }) }),
     rules?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.rulesContainer, {
       [classes.subRulesContainer]: level > 0,
       [classes.topRulesContainer]: level === 0
@@ -108,7 +105,7 @@ const RuleGroup = ({
         }, className: classes.createGroupButton, children: `${labels.empty?.createGroup}` })
       ] })
     ] }), icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons })
   ] });
 };
 exports.RuleGroup = RuleGroup;

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.cjs","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","jsxs","Fragment","jsx","buttonBackground","HvButton","type","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","HvGrid","HvMultiButton","topCombinator","map","combinatorButton","topRemoveButton","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","empty","title","HvTypography","createConditionButton","createCondition","spacer","createGroupButton","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
+{"version":3,"file":"RuleGroup.cjs","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 { 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      <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      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\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      {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","jsxs","Fragment","jsx","buttonBackground","HvButton","type","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","HvMultiButton","topCombinator","map","combinatorButton","topRemoveButton","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","empty","title","HvTypography","createConditionButton","createCondition","spacer","createGroupButton","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}

package/dist/cjs/components/Table/TableBody/TableBody.cjs

@@ -9,7 +9,7 @@ const TableBody_styles = require("./TableBody.styles.cjs");
 const Focus = require("../../Focus/Focus.cjs");
 const tableSectionContext = {
   type: "body",
-  filterClassName: "grid"
+  filterClassName: "_grid"
 };
 const defaultComponent = "tbody";
 const HvTableBody = React.forwardRef(({

package/dist/cjs/components/Table/TableBody/TableBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.cjs","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","jsx","TableSectionContext","root","Children","map","element","isValidElement","HvFocus","key","props","selected"],"mappings":";;;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAMZC,MAAAA,cAAcC,iBACzB,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,iBAAAA,WAAWR,WAAW;AAExCS,QAAAA,eAAeC,iBAAWC,aAAAA,OAAY;AAEtCC,QAAAA,UAAUC,aAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAAA,WAAWT,aAAaM,OAAO;AAEjD,QAAMI,YACJd,aAAaO,cAAcQ,YAAYC,SAAStB;AAGhD,SAAAuB,2BAAA,IAACC,oBAAoB,QAAA,UAApB,EAA6B,OAAO3B,qBACnC,UAAA0B,2BAAAA,IAAC,WACC,EAAA,WAAWZ,GAAGR,QAAQsB,MAAMpB,SAAS,GACrC,KAAKa,WACL,MAAME,cAAcpB,mBAAmB,OAAO,YAC9C,GAAIS,QAEHD,UACGkB,iBAAAA,MAAAA,SAASC,IAAIpB,UAAWqB,CAAY,YAAA;AAC9BC,QAAAA,MAAAA,eAAeD,OAAO,GAAG;AAEzB,aAAAL,2BAAAA,IAACO,MAAAA,SACC,EAAA,IAAK,SAAQF,QAAQG,GAAI,IACzB,SAASf,SAET,UAAS,QACT,aAAanB,oBAAoBE,iBACjC,gBAAgB,GAChB,eAAe,OACf,UAAU6B,QAAQI,MAAMC,UAEvBL,UAPK,QAAA,GAAA,OAAMA,QAAQG,GAAI,EAQ1B;AAAA,IAEJ;AAAA,EAAA,CACD,IACDxB,UACN,EACF,CAAA;AAEJ,CACF;;;"}
+{"version":3,"file":"TableBody.cjs","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","jsx","TableSectionContext","root","Children","map","element","isValidElement","HvFocus","key","props","selected"],"mappings":";;;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAMZC,MAAAA,cAAcC,iBACzB,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,iBAAAA,WAAWR,WAAW;AAExCS,QAAAA,eAAeC,iBAAWC,aAAAA,OAAY;AAEtCC,QAAAA,UAAUC,aAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAAA,WAAWT,aAAaM,OAAO;AAEjD,QAAMI,YACJd,aAAaO,cAAcQ,YAAYC,SAAStB;AAGhD,SAAAuB,2BAAA,IAACC,oBAAoB,QAAA,UAApB,EAA6B,OAAO3B,qBACnC,UAAA0B,2BAAAA,IAAC,WACC,EAAA,WAAWZ,GAAGR,QAAQsB,MAAMpB,SAAS,GACrC,KAAKa,WACL,MAAME,cAAcpB,mBAAmB,OAAO,YAC9C,GAAIS,QAEHD,UACGkB,iBAAAA,MAAAA,SAASC,IAAIpB,UAAWqB,CAAY,YAAA;AAC9BC,QAAAA,MAAAA,eAAeD,OAAO,GAAG;AAEzB,aAAAL,2BAAAA,IAACO,MAAAA,SACC,EAAA,IAAK,SAAQF,QAAQG,GAAI,IACzB,SAASf,SAET,UAAS,QACT,aAAanB,oBAAoBE,iBACjC,gBAAgB,GAChB,eAAe,OACf,UAAU6B,QAAQI,MAAMC,UAEvBL,UAPK,QAAA,GAAA,OAAMA,QAAQG,GAAI,EAQ1B;AAAA,IAEJ;AAAA,EAAA,CACD,IACDxB,UACN,EACF,CAAA;AAEJ,CACF;;;"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

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

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","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","jsx","Tooltip","undefined","tooltip","tooltipMulti","popper","container","getElementById"],"mappings":";;;;;;;;;AA6DO,MAAMA,YAAYC,MAAAA,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,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,eAAAA,WAAWhB,WAAW;AAGxC,SAAAiB,2BAAA,IAACC,SACC,SAAA,EAAA,KACA,MAAMjB,QAAQkB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAAShB,YAAYL,QAAQqB,UAAUrB,QAAQsB;AAAAA,IAC/CC,QAAQvB,QAAQuB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WAAWC,SAAAA,eAAeb,eAAeG,MAAM;AAAA,EAAA,GAE7CF,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;;;"}
+{"version":3,"file":"Tooltip.cjs","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","jsx","Tooltip","undefined","tooltip","tooltipMulti","popper","container","getElementById"],"mappings":";;;;;;;;;AA6DO,MAAMA,YAAYC,MAAAA,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,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP,WAAW;AAAA,IAAM;AAAA,IACnDQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,eAAAA,WAAWhB,WAAW;AAGxC,SAAAiB,2BAAA,IAACC,SACC,SAAA,EAAA,KACA,MAAMjB,QAAQkB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAAShB,YAAYL,QAAQqB,UAAUrB,QAAQsB;AAAAA,IAC/CC,QAAQvB,QAAQuB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WAAWC,SAAAA,eAAeb,eAAeG,MAAM;AAAA,EAAA,GAE7CF,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;;;"}

package/dist/cjs/components/Typography/Typography.cjs

@@ -19,15 +19,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/cjs/components/Typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","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","jsx","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,MAAAA,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,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,aAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAGnE,SAAAc,+BAAC,aACC,KACA,WAAWP,GACTT,QAAQiB,MACRjB,QAAQE,OAAO,GACf;AAAA,IACE,CAACF,QAAQkB,MAAM,GAAG9B;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.cjs","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","jsx","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,MAAAA,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,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,aAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQxC,gBAAgBoC,OAAO,KAAK;AAGnE,SAAAc,+BAAC,aACC,KACA,WAAWP,GACTT,QAAQiB,MACRjB,QAAQE,OAAO,GACf;AAAA,IACE,CAACF,QAAQkB,MAAM,GAAG/B;AAAAA,IAClB,CAACa,QAAQK,MAAM,GAAGA;AAAAA,IAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBP,GAAAA,SACF,GACIU,GAAAA,OACJ,CAAA;AAEN,CACF;;;"}

package/dist/cjs/hooks/useControlled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useControlled.cjs","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,aAAOJ,mBAAmBK,MAAS;AACrE,QAAM,CAACC,YAAYC,QAAQ,IAAIC,eAASP,YAAY;AAC9CQ,QAAAA,QAAQN,eAAeH,iBAAiBM;AAgBxCI,QAAAA,yBAAyBC,kBAC5BC,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.cjs","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,aAAOJ,mBAAmBK,MAAS;AACrE,QAAM,CAACC,YAAYC,QAAQ,IAAIC,eAASP,YAAY;AAC9CQ,QAAAA,QAAQN,eAAeH,iBAAiBM;AAgBxCI,QAAAA,yBAAyBC,kBAC7B,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/cjs/hooks/useImageLoaded.cjs

@@ -10,7 +10,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/cjs/hooks/useImageLoaded.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useImageLoaded.cjs","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,eAA2B,KAAK;AAEtEC,QAAAA,UAAU,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.cjs","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,eAA2B,KAAK;AAEtEC,QAAAA,UAAU,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;;"}

package/dist/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={localId}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(localId, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","val","isInvalid","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","error","invalidMessageStyling","formElementType"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useState, useEffect, useContext } from \"react\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"@core/components/Forms\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { isRange, isSameDay, formatToLocale, isDate } from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id,\n    value,\n    locale = \"en-US\",\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue: string | Date | DateRangeProp | undefined =\n    value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n\n  const [dateValue, setDateValue] = useState<\n    string | Date | DateRangeProp | undefined\n  >(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(formatToLocale(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput\n      ? localeParsedDate.toDate()\n      : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? dayjs(localValue).locale(locale).format(\"L\")\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={localId}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(localId, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value?: string | Date | DateRangeProp;\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale?: string;\n  /**\n   * Callback to define the input date.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null\n  ) => void;\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate?: boolean;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","HvCalendarHeader","props","id","value","locale","classes","classesProp","onChange","showEndDate","showDayOfWeek","onFocus","invalidDateLabel","useDefaultProps","cx","useClasses","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","label","HvFormElementDescriptorsContext","localValue","isRange","endDate","startDate","dateValue","setDateValue","useState","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","setId","inputValue","localeFormat","longDateFormat","isValidValue","setIsValidValue","length","isValid","validateInput","incomingValid","undefined","useEffect","valid","weekday","Intl","DateTimeFormat","format","isDate","formatToLocale","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","isSameDay","onBlurHandler","keyDownHandler","isKey","preventDefault","onFocusHandler","formattedDate","onChangeHandler","val","isInvalid","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","error","invalidMessageStyling","formElementType"],"mappings":"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"}