@hitachivantara/uikit-react-core 5.0.0-next.9 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sources":["../../../../src/components/Input/Input.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAdornment,\n  HvBaseInput,\n  HvFormElement,\n  HvLabel,\n  HvSuggestions,\n} from \"components\";\nimport inputClasses from \"./inputClasses\";\nimport baseInputClasses from \"../BaseInput/baseInputClasses\";\nimport suggestionsClasses from \"../Forms/Suggestions/suggestionsClasses\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"block\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  paddingBottom: \"6px\",\n  display: \"block\",\n});\n\nexport const StyledSuccess = styled(Success)({\n  width: \"30px\",\n  height: \"30px\",\n});\n\nexport const StyledSuggestions = styled((props) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n\nexport const StyledAdornmentsBox = styled(\"div\")({\n  display: \"flex\",\n  flexDirection: \"row\",\n  height: \"30px\",\n  justifyContent: \"center\",\n  marginRight: 1,\n});\n\nexport const StyledAdornmentButton = styled(\n  HvAdornment,\n  transientOptions\n)(({ $iconClear }: { $iconClear?: boolean }) => ({\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  padding: 0,\n  margin: 0,\n  cursor: \"pointer\",\n  ...($iconClear && {\n    display: \"none\",\n  }),\n}));\n\nexport const StyledInputExtension = styled(\"div\")({\n  height: theme.space.xs,\n  backgroundColor: theme.colors.atmo1,\n  boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n});\n\nexport const StyledBaseInput = styled(HvBaseInput)(() => ({\n  [`& .${baseInputClasses.input}`]: {\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  \":hover\": {\n    [`& .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`&.${baseInputClasses.inputRoot}`]: {\n    [`&:focus-within .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    [`& .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootMultiline}`]: {\n    padding: 0,\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    [`.${inputClasses.hasSuggestions} &`]: {\n      display: \"none\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootDisabled}`]: {\n    cursor: \"not-allowed\",\n  },\n}));\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledSuccess","Success","StyledSuggestions","props","width","position","suggestionsClasses","root","list","StyledAdornmentsBox","StyledAdornmentButton","HvAdornment","_extends","transientOptions","$iconClear","backgroundColor","border","padding","margin","cursor","display","StyledInputExtension","height","theme","space","xs","colors","atmo1","boxShadow","StyledBaseInput","HvBaseInput","baseInputClasses","input","inputClasses","iconClear","inputRoot","inputRootFocused","inputRootMultiline","inputBorderContainer","hasSuggestions","inputRootDisabled"],"mappings":"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"}
+{"version":3,"file":"Input.styles.js","sources":["../../../../src/components/Input/Input.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAdornment,\n  HvBaseInput,\n  HvFormElement,\n  HvLabel,\n  HvSuggestions,\n} from \"components\";\nimport inputClasses from \"./inputClasses\";\nimport baseInputClasses from \"../BaseInput/baseInputClasses\";\nimport suggestionsClasses from \"../Forms/Suggestions/suggestionsClasses\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"block\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  paddingBottom: \"6px\",\n  display: \"block\",\n});\n\nexport const StyledSuccess = styled(Success)({\n  width: \"30px\",\n  height: \"30px\",\n});\n\nexport const StyledSuggestions = styled((props) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n\nexport const StyledAdornmentsBox = styled(\"div\")({\n  display: \"flex\",\n  flexDirection: \"row\",\n  height: \"30px\",\n  justifyContent: \"center\",\n  marginRight: 1,\n});\n\nexport const StyledAdornmentButton = styled(\n  HvAdornment,\n  transientOptions\n)(({ $iconClear }: { $iconClear?: boolean }) => ({\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  padding: 0,\n  margin: 0,\n  cursor: \"pointer\",\n  ...($iconClear && {\n    display: \"none\",\n  }),\n}));\n\nexport const StyledInputExtension = styled(\"div\")({\n  height: theme.space.xs,\n  backgroundColor: theme.colors.atmo1,\n  boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n});\n\nexport const StyledBaseInput = styled(HvBaseInput)(() => ({\n  [`& .${baseInputClasses.input}`]: {\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  \":hover\": {\n    [`& .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`&.${baseInputClasses.inputRoot}`]: {\n    [`&:focus-within .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    [`& .${inputClasses.iconClear}`]: {\n      display: \"block\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootMultiline}`]: {\n    padding: 0,\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    [`.${inputClasses.hasSuggestions} &`]: {\n      display: \"none\",\n    },\n  },\n  [`& .${baseInputClasses.inputRootDisabled}`]: {\n    cursor: \"not-allowed\",\n  },\n}));\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledSuccess","Success","StyledSuggestions","_styled","props","_jsx","HvSuggestions","width","position","suggestionsClasses","root","list","StyledAdornmentsBox","StyledAdornmentButton","HvAdornment","_extends","transientOptions","$iconClear","backgroundColor","border","padding","margin","cursor","display","StyledInputExtension","height","theme","space","xs","colors","atmo1","boxShadow","StyledBaseInput","HvBaseInput","baseInputClasses","input","inputClasses","iconClear","inputRoot","inputRootFocused","inputRootMultiline","inputBorderContainer","hasSuggestions","inputRootDisabled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAMA,oBAA2BC,wBAAAA,eAAaC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEpD;AAEK,MAAMC,uBAA8B,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG/C;AAEK,MAAME,cAAqBC,wBAAAA,SAAOZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGxC;AAEK,MAAMI,gBAAuBC,wBAAAA,SAAOd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG1C;AAEK,MAAMM,oBAAoBC,wBAAQC,CACvCC,UAAAA,oBAACC,eAAa;AAAA,EAAA,GAAKF;AAAK,CAAA,GACzBjB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACDgB,OAAO;AAAA,EACPC,UAAU;AAAA,EACV,CAAE,MAAKC,mBAAmBC,SAASD,mBAAmBE,QAAQ,GAAG;AAAA,IAC/DJ,OAAO;AAAA,EACT;AACF,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/HAAA;AAEK,MAAMuB,sBAA6B,wBAAA,OAAKzB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAM9C;AAEWiB,MAAAA,gDACXC,aAAW3B,QAAAC,IAAAC,4BAAA0B,SAAA,IAAA;AAAA,EAAAzB,QAAA;AAAA,GACX0B,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAzB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhByB,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEC;AAAqC,OAAO;AAAA,EAC/CC,iBAAiB;AAAA,EACjBC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACR,GAAIL,cAAc;AAAA,IAChBM,SAAS;AAAA,EACX;AACF,IAAEpC,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/HAAA;AAEI,MAAMmC,uBAA8B,wBAAA,OAAKrC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAChDkC,QAAQC,MAAMC,MAAMC;AAAAA,EACpBV,iBAAiBQ,MAAMG,OAAOC;AAAAA,EAC9BC,WAAY,eAAcL,MAAMG,OAAOC;AACzC,GAAC3C,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/HAAA;AAEK,MAAM2C,kBAAyBC,wBAAAA,aAAW9C,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE,OAAO;AAAA,EACxD,CAAE,MAAK2C,iBAAiBC,OAAO,GAAG;AAAA,IAChC,gBAAgB;AAAA,MACdZ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,CAAE,MAAKa,aAAaC,WAAW,GAAG;AAAA,MAChCd,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,CAAE,KAAIW,iBAAiBI,WAAW,GAAG;AAAA,IACnC,CAAE,mBAAkBF,aAAaC,WAAW,GAAG;AAAA,MAC7Cd,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,CAAE,MAAKW,iBAAiBK,kBAAkB,GAAG;AAAA,IAC3C,CAAE,MAAKH,aAAaC,WAAW,GAAG;AAAA,MAChCd,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,CAAE,MAAKW,iBAAiBM,oBAAoB,GAAG;AAAA,IAC7CpB,SAAS;AAAA,EACX;AAAA,EACA,CAAE,MAAKc,iBAAiBO,sBAAsB,GAAG;AAAA,IAC/C,CAAE,IAAGL,aAAaM,kBAAkB,GAAG;AAAA,MACrCnB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,CAAE,MAAKW,iBAAiBS,mBAAmB,GAAG;AAAA,IAC5CrB,QAAQ;AAAA,EACV;AACF,IAAEnC,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/HAAA;"}

package/dist/esm/components/Kpi/Kpi.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
-import { StyledInternalVisualComparisonTypography, StyledInternalVisualComparisonDiv, StyledRoot, StyledIndicatorsContainer, StyledVisualIndicator, StyledIndicatorText, StyledIndicatorUnit, StyledComparisonComposition, StyledTrendIndicator, StyledComparisonContainer } from "./Kpi.styles.js";
+import { StyledRoot, StyledIndicatorsContainer, StyledVisualIndicator, StyledIndicatorText, StyledIndicatorUnit, StyledComparisonComposition, StyledTrendIndicator, StyledComparisonContainer, StyledInternalVisualComparisonTypography, StyledInternalVisualComparisonDiv } from "./Kpi.styles.js";
 import kpiClasses from "./kpiClasses.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useLabels } from "../../hooks/useLabels.js";
 import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
@@ -23,21 +23,52 @@ const HvKpi = ({
 }) => {
   const mergedLabels = useLabels(DEFAULT_LABELS, labels);
   const InternalVisualComparison = typeof visualComparison === "string" ? StyledInternalVisualComparisonTypography : StyledInternalVisualComparisonDiv;
-  return /* @__PURE__ */ jsxs(StyledRoot, { className: clsx(classes == null ? void 0 : classes.root, className, kpiClasses.root), ...others, children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: mergedLabels == null ? void 0 : mergedLabels.title }) }),
-    /* @__PURE__ */ jsxs(StyledIndicatorsContainer, { className: clsx(kpiClasses.indicatorsContainer, classes == null ? void 0 : classes.indicatorsContainer), children: [
-      visualIndicator && /* @__PURE__ */ jsx(StyledVisualIndicator, { className: clsx(kpiClasses.visualIndicatorContainer, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.visualIndicatorContainer, classes == null ? void 0 : classes.spacingToTheRight), children: visualIndicator }),
-      (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsx(StyledIndicatorText, { className: clsx(kpiClasses.spacingToTheRight, kpiClasses.indicatorText, classes == null ? void 0 : classes.spacingToTheRight, classes == null ? void 0 : classes.indicatorText), variant: indicatorTextVariant, children: mergedLabels.indicator }),
-      (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsx(StyledIndicatorUnit, { className: clsx(kpiClasses.indicatorUnit, classes == null ? void 0 : classes.indicatorUnit), variant: indicatorUnitTextVariant, children: mergedLabels.unit })
-    ] }),
-    visualComparison && /* @__PURE__ */ jsxs(StyledComparisonComposition, { className: clsx(kpiClasses.comparisonComposition, classes == null ? void 0 : classes.comparisonComposition), children: [
-      trendIndicator && /* @__PURE__ */ jsx(StyledTrendIndicator, { className: clsx(kpiClasses.trendLine, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.trendLine, classes == null ? void 0 : classes.spacingToTheRight), children: trendIndicator }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(StyledComparisonContainer, { className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer), children: /* @__PURE__ */ jsx(InternalVisualComparison, { className: clsx(kpiClasses.comparisons, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.comparisons, classes == null ? void 0 : classes.spacingToTheRight), variant: "label", children: visualComparison }) }),
-        /* @__PURE__ */ jsx(StyledComparisonContainer, { className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer), children: /* @__PURE__ */ jsx(HvTypography, { className: clsx(kpiClasses.comparisons, classes == null ? void 0 : classes.comparisons), variant: "caption2", children: mergedLabels == null ? void 0 : mergedLabels.comparisonIndicatorInfo }) })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(StyledRoot, {
+    className: clsx(classes == null ? void 0 : classes.root, className, kpiClasses.root),
+    ...others,
+    children: [/* @__PURE__ */ jsx("div", {
+      children: /* @__PURE__ */ jsx(HvTypography, {
+        variant: "label",
+        children: mergedLabels == null ? void 0 : mergedLabels.title
+      })
+    }), /* @__PURE__ */ jsxs(StyledIndicatorsContainer, {
+      className: clsx(kpiClasses.indicatorsContainer, classes == null ? void 0 : classes.indicatorsContainer),
+      children: [visualIndicator && /* @__PURE__ */ jsx(StyledVisualIndicator, {
+        className: clsx(kpiClasses.visualIndicatorContainer, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.visualIndicatorContainer, classes == null ? void 0 : classes.spacingToTheRight),
+        children: visualIndicator
+      }), (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsx(StyledIndicatorText, {
+        className: clsx(kpiClasses.spacingToTheRight, kpiClasses.indicatorText, classes == null ? void 0 : classes.spacingToTheRight, classes == null ? void 0 : classes.indicatorText),
+        variant: indicatorTextVariant,
+        children: mergedLabels.indicator
+      }), (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsx(StyledIndicatorUnit, {
+        className: clsx(kpiClasses.indicatorUnit, classes == null ? void 0 : classes.indicatorUnit),
+        variant: indicatorUnitTextVariant,
+        children: mergedLabels.unit
+      })]
+    }), visualComparison && /* @__PURE__ */ jsxs(StyledComparisonComposition, {
+      className: clsx(kpiClasses.comparisonComposition, classes == null ? void 0 : classes.comparisonComposition),
+      children: [trendIndicator && /* @__PURE__ */ jsx(StyledTrendIndicator, {
+        className: clsx(kpiClasses.trendLine, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.trendLine, classes == null ? void 0 : classes.spacingToTheRight),
+        children: trendIndicator
+      }), /* @__PURE__ */ jsxs("div", {
+        children: [/* @__PURE__ */ jsx(StyledComparisonContainer, {
+          className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+          children: /* @__PURE__ */ jsx(InternalVisualComparison, {
+            className: clsx(kpiClasses.comparisons, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.comparisons, classes == null ? void 0 : classes.spacingToTheRight),
+            variant: "label",
+            children: visualComparison
+          })
+        }), /* @__PURE__ */ jsx(StyledComparisonContainer, {
+          className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+          children: /* @__PURE__ */ jsx(HvTypography, {
+            className: clsx(kpiClasses.comparisons, classes == null ? void 0 : classes.comparisons),
+            variant: "caption2",
+            children: mergedLabels == null ? void 0 : mergedLabels.comparisonIndicatorInfo
+          })
+        })]
+      })]
+    })]
+  });
 };
 export {
   HvKpi

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

@@ -1 +1 @@
-{"version":3,"file":"Kpi.js","sources":["../../../../src/components/Kpi/Kpi.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useLabels } from \"hooks\";\nimport { HvTypography } from \"../../components\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledComparisonComposition,\n  StyledComparisonContainer,\n  StyledIndicatorsContainer,\n  StyledIndicatorText,\n  StyledIndicatorUnit,\n  StyledInternalVisualComparisonDiv,\n  StyledInternalVisualComparisonTypography,\n  StyledRoot,\n  StyledTrendIndicator,\n  StyledVisualIndicator,\n} from \"./Kpi.styles\";\nimport kpiClasses, { HvKpiClasses } from \"./kpiClasses\";\n\nexport type HvKpiProps = HvBaseProps<HTMLDivElement, { children }> & {\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison?: React.ReactNode;\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels?: {\n    title?: string;\n    indicator?: string;\n    unit?: string;\n    comparisonIndicatorInfo?: string;\n  };\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant?: \"display\" | \"title1\" | \"title2\";\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant?: \"title2\" | \"body\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvKpiClasses;\n};\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = ({\n  trendIndicator = null,\n  visualIndicator = null,\n  visualComparison = null,\n  indicatorUnitTextVariant = \"title2\",\n  indicatorTextVariant = \"title1\",\n  labels,\n  classes,\n  className,\n  ...others\n}: HvKpiProps) => {\n  const mergedLabels = useLabels(DEFAULT_LABELS, labels);\n\n  const InternalVisualComparison =\n    typeof visualComparison === \"string\"\n      ? StyledInternalVisualComparisonTypography\n      : StyledInternalVisualComparisonDiv;\n\n  return (\n    <StyledRoot\n      className={clsx(classes?.root, className, kpiClasses.root)}\n      {...others}\n    >\n      <div>\n        <HvTypography variant=\"label\">{mergedLabels?.title}</HvTypography>\n      </div>\n      <StyledIndicatorsContainer\n        className={clsx(\n          kpiClasses.indicatorsContainer,\n          classes?.indicatorsContainer\n        )}\n      >\n        {visualIndicator && (\n          <StyledVisualIndicator\n            className={clsx(\n              kpiClasses.visualIndicatorContainer,\n              kpiClasses.spacingToTheRight,\n              classes?.visualIndicatorContainer,\n              classes?.spacingToTheRight\n            )}\n          >\n            {visualIndicator}\n          </StyledVisualIndicator>\n        )}\n        {mergedLabels?.indicator && (\n          <StyledIndicatorText\n            className={clsx(\n              kpiClasses.spacingToTheRight,\n              kpiClasses.indicatorText,\n              classes?.spacingToTheRight,\n              classes?.indicatorText\n            )}\n            variant={indicatorTextVariant}\n          >\n            {mergedLabels.indicator}\n          </StyledIndicatorText>\n        )}\n        {mergedLabels?.unit && (\n          <StyledIndicatorUnit\n            className={clsx(kpiClasses.indicatorUnit, classes?.indicatorUnit)}\n            variant={indicatorUnitTextVariant}\n          >\n            {mergedLabels.unit}\n          </StyledIndicatorUnit>\n        )}\n      </StyledIndicatorsContainer>\n      {visualComparison && (\n        <StyledComparisonComposition\n          className={clsx(\n            kpiClasses.comparisonComposition,\n            classes?.comparisonComposition\n          )}\n        >\n          {trendIndicator && (\n            <StyledTrendIndicator\n              className={clsx(\n                kpiClasses.trendLine,\n                kpiClasses.spacingToTheRight,\n                classes?.trendLine,\n                classes?.spacingToTheRight\n              )}\n            >\n              {trendIndicator}\n            </StyledTrendIndicator>\n          )}\n          <div>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <InternalVisualComparison\n                className={clsx(\n                  kpiClasses.comparisons,\n                  kpiClasses.spacingToTheRight,\n                  classes?.comparisons,\n                  classes?.spacingToTheRight\n                )}\n                variant=\"label\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </StyledComparisonContainer>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <HvTypography\n                className={clsx(kpiClasses.comparisons, classes?.comparisons)}\n                variant=\"caption2\"\n              >\n                {mergedLabels?.comparisonIndicatorInfo}\n              </HvTypography>\n            </StyledComparisonContainer>\n          </div>\n        </StyledComparisonComposition>\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","trendIndicator","visualIndicator","visualComparison","indicatorUnitTextVariant","indicatorTextVariant","labels","classes","className","others","mergedLabels","useLabels","InternalVisualComparison","StyledInternalVisualComparisonTypography","StyledInternalVisualComparisonDiv","clsx","root","kpiClasses","indicatorsContainer","visualIndicatorContainer","spacingToTheRight","indicatorText","indicatorUnit","comparisonComposition","trendLine","comparisonContainer","comparisons"],"mappings":";;;;;;AAsDA,MAAMA,iBAAiB;AAAA,EACrBC,OAAO;AAAA,EACPC,WAAWC;AAAAA,EACXC,MAAMD;AAAAA,EACNE,yBAAyBF;AAC3B;AAOO,MAAMG,QAAQA,CAAC;AAAA,EACpBC,iBAAiB;AAAA,EACjBC,kBAAkB;AAAA,EAClBC,mBAAmB;AAAA,EACnBC,2BAA2B;AAAA,EAC3BC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACO,MAAM;AACVC,QAAAA,eAAeC,UAAUjB,gBAAgBY,MAAM;AAErD,QAAMM,2BACJ,OAAOT,qBAAqB,WACxBU,2CACAC;AAGJ,SAAA,qBAAC,YACC,EAAA,WAAWC,KAAKR,mCAASS,MAAMR,WAAWS,WAAWD,IAAI,GACrDP,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,SACC,UAAC,oBAAA,cAAA,EAAa,SAAQ,SAASC,UAAAA,6CAAcf,OAAM,EACrD,CAAA;AAAA,IACA,qBAAC,6BACC,WAAWoB,KACTE,WAAWC,qBACXX,mCAASW,mBAAmB,GAG7BhB,UAAAA;AAAAA,MAAAA,mBACE,oBAAA,uBAAA,EACC,WAAWa,KACTE,WAAWE,0BACXF,WAAWG,mBACXb,mCAASY,0BACTZ,mCAASa,iBAAiB,GAG3BlB,UACH,iBAAA;AAAA,OAEDQ,6CAAcd,cACb,oBAAC,uBACC,WAAWmB,KACTE,WAAWG,mBACXH,WAAWI,eACXd,mCAASa,mBACTb,mCAASc,aAAa,GAExB,SAAShB,sBAERK,uBAAad,WAChB;AAAA,OAEDc,6CAAcZ,SACZ,oBAAA,qBAAA,EACC,WAAWiB,KAAKE,WAAWK,eAAef,mCAASe,aAAa,GAChE,SAASlB,0BAERM,uBAAaZ,MAChB;AAAA,IAAA,GAEJ;AAAA,IACCK,yCACE,6BACC,EAAA,WAAWY,KACTE,WAAWM,uBACXhB,mCAASgB,qBAAqB,GAG/BtB,UAAAA;AAAAA,MAAAA,kBACE,oBAAA,sBAAA,EACC,WAAWc,KACTE,WAAWO,WACXP,WAAWG,mBACXb,mCAASiB,WACTjB,mCAASa,iBAAiB,GAG3BnB,UACH,gBAAA;AAAA,2BAED,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,2BAAA,EACC,WAAWc,KACTE,WAAWQ,qBACXlB,mCAASkB,mBAAmB,GAG9B,UAAC,oBAAA,0BAAA,EACC,WAAWV,KACTE,WAAWS,aACXT,WAAWG,mBACXb,mCAASmB,aACTnB,mCAASa,iBAAiB,GAE5B,SAAQ,SAEPjB,UAAAA,iBAAAA,CACH,EACF,CAAA;AAAA,QACA,oBAAC,6BACC,WAAWY,KACTE,WAAWQ,qBACXlB,mCAASkB,mBAAmB,GAG9B,UAAC,oBAAA,cAAA,EACC,WAAWV,KAAKE,WAAWS,aAAanB,mCAASmB,WAAW,GAC5D,SAAQ,YAEPhB,UAAcX,6CAAAA,wBAAAA,CACjB,EACF,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Kpi.js","sources":["../../../../src/components/Kpi/Kpi.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useLabels } from \"hooks\";\nimport { HvTypography } from \"../../components\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledComparisonComposition,\n  StyledComparisonContainer,\n  StyledIndicatorsContainer,\n  StyledIndicatorText,\n  StyledIndicatorUnit,\n  StyledInternalVisualComparisonDiv,\n  StyledInternalVisualComparisonTypography,\n  StyledRoot,\n  StyledTrendIndicator,\n  StyledVisualIndicator,\n} from \"./Kpi.styles\";\nimport kpiClasses, { HvKpiClasses } from \"./kpiClasses\";\n\nexport type HvKpiLabelProps = {\n  /**\n   * The text at the top of the kpi.\n   */\n  title?: string;\n  /**\n   * The text in the middle of the kpi.\n   */\n  indicator?: string;\n  /**\n   * The text to the right of the indicator.\n   */\n  unit?: string;\n  /**\n   * The text to the right of the visual comparison.\n   */\n  comparisonIndicatorInfo?: string;\n};\n\nexport type HvKpiProps = HvBaseProps<HTMLDivElement, { children }> & {\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison?: React.ReactNode;\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels?: HvKpiLabelProps;\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant?: \"display\" | \"title1\" | \"title2\";\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant?: \"title2\" | \"body\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvKpiClasses;\n};\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = ({\n  trendIndicator = null,\n  visualIndicator = null,\n  visualComparison = null,\n  indicatorUnitTextVariant = \"title2\",\n  indicatorTextVariant = \"title1\",\n  labels,\n  classes,\n  className,\n  ...others\n}: HvKpiProps) => {\n  const mergedLabels = useLabels(DEFAULT_LABELS, labels);\n\n  const InternalVisualComparison =\n    typeof visualComparison === \"string\"\n      ? StyledInternalVisualComparisonTypography\n      : StyledInternalVisualComparisonDiv;\n\n  return (\n    <StyledRoot\n      className={clsx(classes?.root, className, kpiClasses.root)}\n      {...others}\n    >\n      <div>\n        <HvTypography variant=\"label\">{mergedLabels?.title}</HvTypography>\n      </div>\n      <StyledIndicatorsContainer\n        className={clsx(\n          kpiClasses.indicatorsContainer,\n          classes?.indicatorsContainer\n        )}\n      >\n        {visualIndicator && (\n          <StyledVisualIndicator\n            className={clsx(\n              kpiClasses.visualIndicatorContainer,\n              kpiClasses.spacingToTheRight,\n              classes?.visualIndicatorContainer,\n              classes?.spacingToTheRight\n            )}\n          >\n            {visualIndicator}\n          </StyledVisualIndicator>\n        )}\n        {mergedLabels?.indicator && (\n          <StyledIndicatorText\n            className={clsx(\n              kpiClasses.spacingToTheRight,\n              kpiClasses.indicatorText,\n              classes?.spacingToTheRight,\n              classes?.indicatorText\n            )}\n            variant={indicatorTextVariant}\n          >\n            {mergedLabels.indicator}\n          </StyledIndicatorText>\n        )}\n        {mergedLabels?.unit && (\n          <StyledIndicatorUnit\n            className={clsx(kpiClasses.indicatorUnit, classes?.indicatorUnit)}\n            variant={indicatorUnitTextVariant}\n          >\n            {mergedLabels.unit}\n          </StyledIndicatorUnit>\n        )}\n      </StyledIndicatorsContainer>\n      {visualComparison && (\n        <StyledComparisonComposition\n          className={clsx(\n            kpiClasses.comparisonComposition,\n            classes?.comparisonComposition\n          )}\n        >\n          {trendIndicator && (\n            <StyledTrendIndicator\n              className={clsx(\n                kpiClasses.trendLine,\n                kpiClasses.spacingToTheRight,\n                classes?.trendLine,\n                classes?.spacingToTheRight\n              )}\n            >\n              {trendIndicator}\n            </StyledTrendIndicator>\n          )}\n          <div>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <InternalVisualComparison\n                className={clsx(\n                  kpiClasses.comparisons,\n                  kpiClasses.spacingToTheRight,\n                  classes?.comparisons,\n                  classes?.spacingToTheRight\n                )}\n                variant=\"label\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </StyledComparisonContainer>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <HvTypography\n                className={clsx(kpiClasses.comparisons, classes?.comparisons)}\n                variant=\"caption2\"\n              >\n                {mergedLabels?.comparisonIndicatorInfo}\n              </HvTypography>\n            </StyledComparisonContainer>\n          </div>\n        </StyledComparisonComposition>\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","trendIndicator","visualIndicator","visualComparison","indicatorUnitTextVariant","indicatorTextVariant","labels","classes","className","others","mergedLabels","useLabels","InternalVisualComparison","StyledInternalVisualComparisonTypography","StyledInternalVisualComparisonDiv","StyledRoot","clsx","root","kpiClasses","children","_jsx","HvTypography","variant","_jsxs","StyledIndicatorsContainer","indicatorsContainer","StyledVisualIndicator","visualIndicatorContainer","spacingToTheRight","StyledIndicatorText","indicatorText","StyledIndicatorUnit","indicatorUnit","StyledComparisonComposition","comparisonComposition","StyledTrendIndicator","trendLine","StyledComparisonContainer","comparisonContainer","comparisons"],"mappings":";;;;;;AAoEA,MAAMA,iBAAiB;AAAA,EACrBC,OAAO;AAAA,EACPC,WAAWC;AAAAA,EACXC,MAAMD;AAAAA,EACNE,yBAAyBF;AAC3B;AAOO,MAAMG,QAAQA,CAAC;AAAA,EACpBC,iBAAiB;AAAA,EACjBC,kBAAkB;AAAA,EAClBC,mBAAmB;AAAA,EACnBC,2BAA2B;AAAA,EAC3BC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACO,MAAM;AACVC,QAAAA,eAAeC,UAAUjB,gBAAgBY,MAAM;AAErD,QAAMM,2BACJ,OAAOT,qBAAqB,WACxBU,2CACAC;AAEN,8BACGC,YAAU;AAAA,IACTP,WAAWQ,KAAKT,mCAASU,MAAMT,WAAWU,WAAWD,IAAI;AAAA,IAAE,GACvDR;AAAAA,IAAMU,WAEVC,oBAAA,OAAA;AAAA,MAAAD,8BACGE,cAAY;AAAA,QAACC,SAAQ;AAAA,QAAOH,UAAET,6CAAcf;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAC9C,GACN4B,qBAACC,2BAAyB;AAAA,MACxBhB,WAAWQ,KACTE,WAAWO,qBACXlB,mCAASkB,mBAAmB;AAAA,MAC5BN,UAEDjB,CAAAA,mBACCkB,oBAACM,uBAAqB;AAAA,QACpBlB,WAAWQ,KACTE,WAAWS,0BACXT,WAAWU,mBACXrB,mCAASoB,0BACTpB,mCAASqB,iBAAiB;AAAA,QAC1BT,UAEDjB;AAAAA,MAAe,CAAA,IAGnBQ,6CAAcd,kCACZiC,qBAAmB;AAAA,QAClBrB,WAAWQ,KACTE,WAAWU,mBACXV,WAAWY,eACXvB,mCAASqB,mBACTrB,mCAASuB,aAAa;AAAA,QAExBR,SAASjB;AAAAA,QAAqBc,UAE7BT,aAAad;AAAAA,MAAS,CAAA,IAG1Bc,6CAAcZ,6BACZiC,qBAAmB;AAAA,QAClBvB,WAAWQ,KAAKE,WAAWc,eAAezB,mCAASyB,aAAa;AAAA,QAChEV,SAASlB;AAAAA,QAAyBe,UAEjCT,aAAaZ;AAAAA,MAAAA,CAEjB,CAAA;AAAA,IAAA,CAAA,GAEFK,oBACCoB,qBAACU,6BAA2B;AAAA,MAC1BzB,WAAWQ,KACTE,WAAWgB,uBACX3B,mCAAS2B,qBAAqB;AAAA,MAC9Bf,UAEDlB,CAAAA,kBACCmB,oBAACe,sBAAoB;AAAA,QACnB3B,WAAWQ,KACTE,WAAWkB,WACXlB,WAAWU,mBACXrB,mCAAS6B,WACT7B,mCAASqB,iBAAiB;AAAA,QAC1BT,UAEDlB;AAAAA,MAAAA,CAAc,GAGnBsB,qBAAA,OAAA;AAAA,QAAAJ,UAAA,CACEC,oBAACiB,2BAAyB;AAAA,UACxB7B,WAAWQ,KACTE,WAAWoB,qBACX/B,mCAAS+B,mBAAmB;AAAA,UAC5BnB,8BAEDP,0BAAwB;AAAA,YACvBJ,WAAWQ,KACTE,WAAWqB,aACXrB,WAAWU,mBACXrB,mCAASgC,aACThC,mCAASqB,iBAAiB;AAAA,YAE5BN,SAAQ;AAAA,YAAOH,UAEdhB;AAAAA,UAAAA,CAAgB;AAAA,QAAA,CAEO,GAC5BiB,oBAACiB,2BAAyB;AAAA,UACxB7B,WAAWQ,KACTE,WAAWoB,qBACX/B,mCAAS+B,mBAAmB;AAAA,UAC5BnB,8BAEDE,cAAY;AAAA,YACXb,WAAWQ,KAAKE,WAAWqB,aAAahC,mCAASgC,WAAW;AAAA,YAC5DjB,SAAQ;AAAA,YAAUH,UAEjBT,6CAAcX;AAAAA,UAAAA,CAAuB;AAAA,QAAA,CAEd,CAAA;AAAA,MAAA,CACxB,CAAA;AAAA,IAAA,CAET,CAAA;AAAA,EAAA,CACU;AAEjB;"}

package/dist/esm/components/Link/Link.js

@@ -1,10 +1,8 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
-import { StyledBox, StyledA } from "./Link.styles.js";
+import { StyledA } from "./Link.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
 import linkClasses from "./linkClasses.js";
 const HvLink = ({
-  as = "div",
-  tabIndex = 0,
   onClick,
   classes,
   className,
@@ -13,7 +11,17 @@ const HvLink = ({
   children,
   ...others
 }) => {
-  return onClick ? /* @__PURE__ */ jsx(StyledBox, { role: "button", tabIndex, onClick: (event) => onClick == null ? void 0 : onClick(event, data), className: clsx(className, linkClasses.a, classes == null ? void 0 : classes.a), component: as, ...others, children }) : /* @__PURE__ */ jsx(StyledA, { href: route, className: clsx(className, linkClasses.a, classes == null ? void 0 : classes.a), children });
+  const handleClick = (event) => {
+    event.preventDefault();
+    onClick == null ? void 0 : onClick(event, data);
+  };
+  return /* @__PURE__ */ jsx(StyledA, {
+    href: route,
+    onClick: onClick != null ? handleClick : void 0,
+    className: clsx(className, linkClasses.a, classes == null ? void 0 : classes.a),
+    ...others,
+    children
+  });
 };
 export {
   HvLink

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledA, StyledBox } from \"./Link.styles\";\nimport { linkClasses, HvLinkClasses } from \".\";\nimport { MouseEventHandler } from \"react\";\n\nexport type HvLinkProps = HvBaseProps<HTMLDivElement, { onClick }> & {\n  as?: React.ElementType;\n  onClick?: (\n    event: MouseEventHandler<HTMLDivElement>,\n    data: any\n  ) => void | undefined;\n  tabIndex?: number;\n  route?: string;\n  data?: any;\n  children: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLinkClasses;\n};\n\nexport const HvLink = ({\n  as = \"div\",\n  tabIndex = 0,\n  onClick,\n  classes,\n  className,\n  route,\n  data,\n  children,\n  ...others\n}: HvLinkProps) => {\n  return onClick ? (\n    <StyledBox\n      role=\"button\"\n      tabIndex={tabIndex}\n      onClick={(event) => onClick?.(event, data)}\n      className={clsx(className, linkClasses.a, classes?.a)}\n      component={as}\n      {...others}\n    >\n      {children}\n    </StyledBox>\n  ) : (\n    <StyledA\n      href={route}\n      className={clsx(className, linkClasses.a, classes?.a)}\n    >\n      {children}\n    </StyledA>\n  );\n};\n"],"names":["HvLink","as","tabIndex","onClick","classes","className","route","data","children","others","event","clsx","linkClasses","a"],"mappings":";;;;AAoBO,MAAMA,SAASA,CAAC;AAAA,EACrBC,KAAK;AAAA,EACLC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACQ,MAAM;AACjB,SAAON,UACJ,oBAAA,WAAA,EACC,MAAK,UACL,UACA,SAAUO,CAAAA,UAAUP,mCAAUO,OAAOH,OACrC,WAAWI,KAAKN,WAAWO,YAAYC,GAAGT,mCAASS,CAAC,GACpD,WAAWZ,IACPQ,GAAAA,QAEHD,SACH,CAAA,wBAEC,SACC,EAAA,MAAMF,OACN,WAAWK,KAAKN,WAAWO,YAAYC,GAAGT,mCAASS,CAAC,GAEnDL,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledA } from \"./Link.styles\";\nimport { linkClasses, HvLinkClasses } from \".\";\nimport { MouseEventHandler } from \"react\";\n\nexport type HvLinkProps = HvBaseProps<HTMLAnchorElement, { onClick }> & {\n  onClick?: (\n    event: MouseEventHandler<HTMLAnchorElement>,\n    data: any\n  ) => void | undefined;\n  route?: string;\n  data?: any;\n  children: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLinkClasses;\n};\n\nexport const HvLink = ({\n  onClick,\n  classes,\n  className,\n  route,\n  data,\n  children,\n  ...others\n}: HvLinkProps) => {\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  return (\n    <StyledA\n      href={route}\n      onClick={onClick != null ? handleClick : undefined}\n      className={clsx(className, linkClasses.a, classes?.a)}\n      {...others}\n    >\n      {children}\n    </StyledA>\n  );\n};\n"],"names":["HvLink","onClick","classes","className","route","data","children","others","handleClick","event","preventDefault","StyledA","href","undefined","clsx","linkClasses","a"],"mappings":";;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAMC,cAAeC,CAAU,UAAA;AAC7BA,UAAMC,eAAgB;AAEtBT,uCAAUQ,OAAOJ;AAAAA,EAAI;AAGvB,6BACGM,SAAO;AAAA,IACNC,MAAMR;AAAAA,IACNH,SAASA,WAAW,OAAOO,cAAcK;AAAAA,IACzCV,WAAWW,KAAKX,WAAWY,YAAYC,GAAGd,mCAASc,CAAC;AAAA,IAAE,GAClDT;AAAAA,IAAMD;AAAAA,EAAAA,CAGF;AAEd;"}

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

@@ -1,20 +1,6 @@
 import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { HvBox } from "../Box/Box.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const StyledBox = /* @__PURE__ */ _styled(HvBox, process.env.NODE_ENV === "production" ? {
-  target: "e18zed7a1"
-} : {
-  target: "e18zed7a1",
-  label: "StyledBox"
-})({
-  ...theme.typography.label,
-  textDecoration: "underline",
-  color: theme.colors.acce2,
-  "&:focus-visible": {
-    ...outlineStyles
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTXlCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChIdkJveCkoe1xuICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgdGV4dERlY29yYXRpb246IFwidW5kZXJsaW5lXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTIsXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHsgLi4ub3V0bGluZVN0eWxlcyB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBID0gc3R5bGVkKFwiYVwiKSh7XG4gIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxhYmVsIGFzIENTU1Byb3BlcnRpZXMpLFxuICB0ZXh0RGVjb3JhdGlvbjogXCJ1bmRlcmxpbmVcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMixcbiAgXCImOmZvY3VzLXZpc2libGVcIjogeyAuLi5vdXRsaW5lU3R5bGVzIH0sXG59KTtcbiJdfQ== */");
 const StyledA = /* @__PURE__ */ _styled("a", process.env.NODE_ENV === "production" ? {
   target: "e18zed7a0"
 } : {
@@ -23,13 +9,12 @@ const StyledA = /* @__PURE__ */ _styled("a", process.env.NODE_ENV === "productio
 })({
   ...theme.typography.label,
   textDecoration: "underline",
-  color: theme.colors.acce2,
+  color: theme.colors.primary,
   "&:focus-visible": {
     ...outlineStyles
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXVCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChIdkJveCkoe1xuICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgdGV4dERlY29yYXRpb246IFwidW5kZXJsaW5lXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTIsXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHsgLi4ub3V0bGluZVN0eWxlcyB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBID0gc3R5bGVkKFwiYVwiKSh7XG4gIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxhYmVsIGFzIENTU1Byb3BlcnRpZXMpLFxuICB0ZXh0RGVjb3JhdGlvbjogXCJ1bmRlcmxpbmVcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMixcbiAgXCImOmZvY3VzLXZpc2libGVcIjogeyAuLi5vdXRsaW5lU3R5bGVzIH0sXG59KTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3VCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEEgPSBzdHlsZWQoXCJhXCIpKHtcbiAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICBjb2xvcjogdGhlbWUuY29sb3JzLnByaW1hcnksXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHsgLi4ub3V0bGluZVN0eWxlcyB9LFxufSk7XG4iXX0= */");
 export {
-  StyledA,
-  StyledBox
+  StyledA
 };
 //# sourceMappingURL=Link.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.styles.js","sources":["../../../../src/components/Link/Link.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"components\";\nimport { CSSProperties } from \"react\";\nimport { outlineStyles } from \"utils\";\n\nexport const StyledBox = styled(HvBox)({\n  ...(theme.typography.label as CSSProperties),\n  textDecoration: \"underline\",\n  color: theme.colors.acce2,\n  \"&:focus-visible\": { ...outlineStyles },\n});\n\nexport const StyledA = styled(\"a\")({\n  ...(theme.typography.label as CSSProperties),\n  textDecoration: \"underline\",\n  color: theme.colors.acce2,\n  \"&:focus-visible\": { ...outlineStyles },\n});\n"],"names":["StyledBox","HvBox","process","env","NODE_ENV","target","label","theme","typography","textDecoration","color","colors","acce2","outlineStyles","StyledA"],"mappings":";;;;AAMO,MAAMA,YAAmBC,wBAAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrC,GAAIC,MAAMC,WAAWF;AAAAA,EACrBG,gBAAgB;AAAA,EAChBC,OAAOH,MAAMI,OAAOC;AAAAA,EACpB,mBAAmB;AAAA,IAAE,GAAGC;AAAAA,EAAc;AACxC,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,ixCAAA;AAEK,MAAMU,UAAiB,wBAAA,KAAGZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjC,GAAIC,MAAMC,WAAWF;AAAAA,EACrBG,gBAAgB;AAAA,EAChBC,OAAOH,MAAMI,OAAOC;AAAAA,EACpB,mBAAmB;AAAA,IAAE,GAAGC;AAAAA,EAAc;AACxC,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,ixCAAA;"}
+{"version":3,"file":"Link.styles.js","sources":["../../../../src/components/Link/Link.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { outlineStyles } from \"utils\";\n\nexport const StyledA = styled(\"a\")({\n  ...(theme.typography.label as CSSProperties),\n  textDecoration: \"underline\",\n  color: theme.colors.primary,\n  \"&:focus-visible\": { ...outlineStyles },\n});\n"],"names":["StyledA","process","env","NODE_ENV","target","label","theme","typography","textDecoration","color","colors","primary","outlineStyles"],"mappings":";;;AAKO,MAAMA,UAAiB,wBAAA,KAAGC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjC,GAAIC,MAAMC,WAAWF;AAAAA,EACrBG,gBAAgB;AAAA,EAChBC,OAAOH,MAAMI,OAAOC;AAAAA,EACpB,mBAAmB;AAAA,IAAE,GAAGC;AAAAA,EAAc;AACxC,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,y8BAAA;"}

package/dist/esm/components/List/List.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { useRef, useEffect, useMemo, forwardRef, isValidElement } from "react";
 import clsx from "clsx";
 import { StyledFixedSizeList, StyledSelectAllCheckBox, StyledListItem, StyledDropRightXS, StyledMultiSelectCheckBox, StyledSingleSelectRadio, StyledLink } from "./List.styles.js";
 import listClasses from "./listClasses.js";
 import useSelectableList from "./useSelectableList.js";
-import { parseList, wrapperTooltip } from "./utils.js";
+import { parseList } from "./utils.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { setId } from "../../utils/setId.js";
@@ -82,40 +83,68 @@ const HvList = ({
     } = labels;
     const anySelected2 = !!(selection == null ? void 0 : selection.length);
     const allSelected = selection.length === list.length;
-    const selectionLabel = /* @__PURE__ */ jsx(HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selectAll }),
-      ` (${list.length})`
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selection.length }),
-      `\xA0${selectionConjunction}\xA0`,
-      list.length
-    ] }) });
-    return /* @__PURE__ */ jsx(StyledSelectAllCheckBox, { id: setId(id, "select-all"), label: selectionLabel, onChange: handleSelectAll, className: clsx(listClasses.selectAllSelector, classes == null ? void 0 : classes.selectAllSelector), indeterminate: anySelected2 && !allSelected, checked: allSelected });
+    const selectionLabel = /* @__PURE__ */ jsx(HvTypography, {
+      component: "span",
+      children: !anySelected2 ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("b", {
+          children: selectAll
+        }), ` (${list.length})`]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("b", {
+          children: selection.length
+        }), ` ${selectionConjunction} `, list.length]
+      })
+    });
+    return /* @__PURE__ */ jsx(StyledSelectAllCheckBox, {
+      id: setId(id, "select-all"),
+      label: selectionLabel,
+      onChange: handleSelectAll,
+      className: clsx(listClasses.selectAllSelector, classes == null ? void 0 : classes.selectAllSelector),
+      indeterminate: anySelected2 && !allSelected,
+      checked: allSelected
+    });
   };
   const renderItemText = (item) => {
     const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(StyledLink, { route: item.path, classes: {
-      a: clsx(listClasses.link, classes == null ? void 0 : classes.link)
-    }, children: /* @__PURE__ */ jsx(ItemText, {}) }, item.label) : /* @__PURE__ */ jsx(ItemText, {});
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(StyledLink, {
+      route: item.path,
+      classes: {
+        a: clsx(listClasses.link, classes == null ? void 0 : classes.link)
+      },
+      children: /* @__PURE__ */ jsx(ItemText, {})
+    }, item.label) : /* @__PURE__ */ jsx(ItemText, {});
   };
   const renderMultiSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledMultiSelectCheckBox, { id: setId(itemId, "selector"), label: item.label, checked: item.selected, disabled: item.disabled, onChange: (evt) => handleSelect(evt, item), classes: {
-        root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
-        container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
-        label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
-      } }), item.label);
+      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledMultiSelectCheckBox, {
+        id: setId(itemId, "selector"),
+        label: item.label,
+        checked: item.selected,
+        disabled: item.disabled,
+        onChange: (evt) => handleSelect(evt, item),
+        classes: {
+          root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
+          container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
+          label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
+        }
+      }), item.label);
       return /* @__PURE__ */ jsx(Selection, {});
     }
     return renderItemText(item);
   };
   const renderSingleSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledSingleSelectRadio, { id: setId(itemId, "selector"), label: item.label, checked: item.selected, disabled: item.disabled, classes: {
-        root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
-        container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
-        label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
-      } }), item.label);
+      const Selection = wrapperTooltip(hasTooltips, /* @__PURE__ */ jsx(StyledSingleSelectRadio, {
+        id: setId(itemId, "selector"),
+        label: item.label,
+        checked: item.selected,
+        disabled: item.disabled,
+        classes: {
+          root: clsx(listClasses.selectorRoot, classes == null ? void 0 : classes.selectorRoot),
+          container: clsx(listClasses.selectorContainer, classes == null ? void 0 : classes.selectorContainer),
+          label: clsx(listClasses.truncate, classes == null ? void 0 : classes.truncate)
+        }
+      }), item.label);
       return /* @__PURE__ */ jsx(Selection, {});
     }
     return renderItemText(item);
@@ -127,9 +156,25 @@ const HvList = ({
     if (!useSelector && item.icon) {
       startAdornment = renderLeftIcon(item);
     }
-    return /* @__PURE__ */ jsx(StyledListItem, { id: itemId, role: selectable ? "option" : "menuitem", disabled: item.disabled || void 0, className: clsx(listClasses.item, classes == null ? void 0 : classes.item), classes: {
-      selected: useSelector || multiSelect ? clsx(listClasses.itemSelector, classes == null ? void 0 : classes.itemSelector) : void 0
-    }, selected: multiSelect || selected ? selected : void 0, onClick: (evt) => handleSelect(evt, item), startAdornment, endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(StyledDropRightXS, { className: clsx(listClasses.box, classes == null ? void 0 : classes.box), iconSize: "XS" }), $applySelected: useSelector || multiSelect, ...otherProps, children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId) }, i);
+    return /* @__PURE__ */ jsx(StyledListItem, {
+      id: itemId,
+      role: selectable ? "option" : "menuitem",
+      disabled: item.disabled || void 0,
+      className: clsx(listClasses.item, classes == null ? void 0 : classes.item),
+      classes: {
+        selected: useSelector || multiSelect ? clsx(listClasses.itemSelector, classes == null ? void 0 : classes.itemSelector) : void 0
+      },
+      selected: multiSelect || selected ? selected : void 0,
+      onClick: (evt) => handleSelect(evt, item),
+      startAdornment,
+      endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(StyledDropRightXS, {
+        className: clsx(listClasses.box, classes == null ? void 0 : classes.box),
+        iconSize: "XS"
+      }),
+      $applySelected: useSelector || multiSelect,
+      ...otherProps,
+      children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
+    }, i);
   };
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
@@ -161,13 +206,41 @@ const HvList = ({
   const renderFixedList = useMemo(() => {
     return forwardRef(({
       ...rest
-    }, ref) => /* @__PURE__ */ jsx(HvListContainer, { id, className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root), role: selectable ? "listbox" : "menu", interactive: true, condensed, disableGutters: useSelector, "aria-multiselectable": selectable && multiSelect || void 0, ref, ...rest }));
+    }, ref) => /* @__PURE__ */ jsx(HvListContainer, {
+      id,
+      className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root),
+      role: selectable ? "listbox" : "menu",
+      interactive: true,
+      condensed,
+      disableGutters: useSelector,
+      "aria-multiselectable": selectable && multiSelect || void 0,
+      ref,
+      ...rest
+    }));
   }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    multiSelect && useSelector && showSelectAll && renderSelectAll(),
-    filteredList.length > 0 && !virtualized && /* @__PURE__ */ jsx(HvListContainer, { id, className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root), role: selectable ? "listbox" : "menu", interactive: true, condensed, disableGutters: useSelector, "aria-multiselectable": selectable && multiSelect || void 0, ...others, children: filteredList.map((item, i) => renderListItem(item, i)) }),
-    filteredList.length > 0 && virtualized && /* @__PURE__ */ jsx(StyledFixedSizeList, { ref: listRef, className: clsx(listClasses.virtualizedRoot, classes == null ? void 0 : classes.virtualizedRoot), height: (height || 0) + 5, width: "100%", itemCount: filteredList.length, itemSize: condensed ? 32 : 40, innerElementType: renderFixedList, ...others, children: ListItem })
-  ] });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [multiSelect && useSelector && showSelectAll && renderSelectAll(), filteredList.length > 0 && !virtualized && /* @__PURE__ */ jsx(HvListContainer, {
+      id,
+      className: clsx(className, listClasses.root, classes == null ? void 0 : classes.root),
+      role: selectable ? "listbox" : "menu",
+      interactive: true,
+      condensed,
+      disableGutters: useSelector,
+      "aria-multiselectable": selectable && multiSelect || void 0,
+      ...others,
+      children: filteredList.map((item, i) => renderListItem(item, i))
+    }), filteredList.length > 0 && virtualized && /* @__PURE__ */ jsx(StyledFixedSizeList, {
+      ref: listRef,
+      className: clsx(listClasses.virtualizedRoot, classes == null ? void 0 : classes.virtualizedRoot),
+      height: (height || 0) + 5,
+      width: "100%",
+      itemCount: filteredList.length,
+      itemSize: condensed ? 32 : 40,
+      innerElementType: renderFixedList,
+      ...others,
+      children: ListItem
+    })]
+  });
 };
 export {
   HvList

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { forwardRef, isValidElement, useEffect, useMemo, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"../../types\";\nimport {\n  StyledFixedSizeList,\n  StyledSelectAllCheckBox,\n  StyledLink,\n  StyledMultiSelectCheckBox,\n  StyledSingleSelectRadio,\n  StyledListItem,\n  StyledDropRightXS,\n} from \"./List.styles\";\nimport listClasses, { HvListClasses } from \"./listClasses\";\nimport useSelectableList from \"./useSelectableList\";\nimport { parseList, wrapperTooltip } from \"./utils\";\nimport { HvListContainer, HvTypography } from \"components\";\nimport { setId } from \"utils\";\n\nexport type HvListValue = {\n  id?: string | number;\n  label: React.ReactNode;\n  searchValue?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  isHidden?: boolean;\n  icon?:\n    | React.ReactNode\n    | ((params: {\n        isDisabled?: boolean;\n        isSelected?: boolean;\n      }) => React.ReactNode);\n  showNavIcon?: boolean;\n  path?: string;\n  params?: object;\n  tabIndex?: number;\n} & HvExtraProps;\n\nexport type HvListLabels = {\n  /** The label used for the All checkbox action. */\n  selectAll?: string;\n  /** The label used in the middle of the multi-selection count. */\n  selectionConjunction?: string;\n};\n\nexport type HvListProps = HvBaseProps<\n  HTMLUListElement,\n  { onChange; onClick }\n> & {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n};\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = ({\n  id,\n  classes,\n  className,\n  multiSelect = false,\n  hasTooltips = false,\n  showSelectAll = false,\n  labels = DEFAULT_LABELS,\n  useSelector = false,\n  selectable = true,\n  singleSelectionToggle = true,\n  condensed = false,\n  onChange,\n  onClick,\n  values: valuesProp = [],\n  height,\n  virtualized = false,\n  ...others\n}: HvListProps) => {\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <StyledSelectAllCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={clsx(\n          listClasses.selectAllSelector,\n          classes?.selectAllSelector\n        )}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <StyledLink\n        key={item.label}\n        route={item.path}\n        classes={{ a: clsx(listClasses.link, classes?.link) }}\n      >\n        <ItemText />\n      </StyledLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <StyledMultiSelectCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n            container: clsx(\n              listClasses.selectorContainer,\n              classes?.selectorContainer\n            ),\n            label: clsx(listClasses.truncate, classes?.truncate),\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <StyledSingleSelectRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n            container: clsx(\n              listClasses.selectorContainer,\n              classes?.selectorContainer\n            ),\n            label: clsx(listClasses.truncate, classes?.truncate),\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <StyledListItem\n        key={i}\n        id={itemId}\n        role={selectable ? \"option\" : \"menuitem\"}\n        disabled={item.disabled || undefined}\n        className={clsx(listClasses.item, classes?.item)}\n        classes={{\n          selected:\n            useSelector || multiSelect\n              ? clsx(listClasses.itemSelector, classes?.itemSelector)\n              : undefined,\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <StyledDropRightXS\n              className={clsx(listClasses.box, classes?.box)}\n              iconSize=\"XS\"\n            />\n          )\n        }\n        $applySelected={useSelector || multiSelect}\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </StyledListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const ListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const renderFixedList = useMemo(() => {\n    return forwardRef(({ ...rest }, ref) => (\n      <HvListContainer\n        id={id}\n        className={clsx(className, listClasses.root, classes?.root)}\n        role={selectable ? \"listbox\" : \"menu\"}\n        interactive\n        condensed={condensed}\n        disableGutters={useSelector}\n        aria-multiselectable={(selectable && multiSelect) || undefined}\n        ref={ref}\n        {...rest}\n      />\n    ));\n  }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {filteredList.length > 0 && !virtualized && (\n        <HvListContainer\n          id={id}\n          className={clsx(className, listClasses.root, classes?.root)}\n          role={selectable ? \"listbox\" : \"menu\"}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={(selectable && multiSelect) || undefined}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      )}\n      {filteredList.length > 0 && virtualized && (\n        <StyledFixedSizeList\n          ref={listRef}\n          className={clsx(\n            listClasses.virtualizedRoot,\n            classes?.virtualizedRoot\n          )}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={renderFixedList}\n          {...others}\n        >\n          {ListItem}\n        </StyledFixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","id","classes","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","setId","clsx","listClasses","selectAllSelector","renderItemText","ItemText","wrapperTooltip","label","a","link","renderMultiSelectItem","itemId","Selection","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","renderListItem","i","otherProps","startAdornment","itemSelector","showNavIcon","box","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","ListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","renderFixedList","useMemo","forwardRef","rest","ref","virtualizedRoot"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { forwardRef, isValidElement, useEffect, useMemo, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"../../types\";\nimport {\n  StyledFixedSizeList,\n  StyledSelectAllCheckBox,\n  StyledLink,\n  StyledMultiSelectCheckBox,\n  StyledSingleSelectRadio,\n  StyledListItem,\n  StyledDropRightXS,\n} from \"./List.styles\";\nimport listClasses, { HvListClasses } from \"./listClasses\";\nimport useSelectableList from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\nimport { HvListContainer, HvTypography } from \"components\";\nimport { setId, wrapperTooltip } from \"utils\";\n\nexport type HvListValue = {\n  id?: string | number;\n  label: React.ReactNode;\n  searchValue?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  isHidden?: boolean;\n  icon?:\n    | React.ReactNode\n    | ((params: {\n        isDisabled?: boolean;\n        isSelected?: boolean;\n      }) => React.ReactNode);\n  showNavIcon?: boolean;\n  path?: string;\n  params?: object;\n  tabIndex?: number;\n} & HvExtraProps;\n\nexport type HvListLabels = {\n  /** The label used for the All checkbox action. */\n  selectAll?: string;\n  /** The label used in the middle of the multi-selection count. */\n  selectionConjunction?: string;\n};\n\nexport type HvListProps = HvBaseProps<\n  HTMLUListElement,\n  { onChange; onClick }\n> & {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n};\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = ({\n  id,\n  classes,\n  className,\n  multiSelect = false,\n  hasTooltips = false,\n  showSelectAll = false,\n  labels = DEFAULT_LABELS,\n  useSelector = false,\n  selectable = true,\n  singleSelectionToggle = true,\n  condensed = false,\n  onChange,\n  onClick,\n  values: valuesProp = [],\n  height,\n  virtualized = false,\n  ...others\n}: HvListProps) => {\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <StyledSelectAllCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={clsx(\n          listClasses.selectAllSelector,\n          classes?.selectAllSelector\n        )}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <StyledLink\n        key={item.label}\n        route={item.path}\n        classes={{ a: clsx(listClasses.link, classes?.link) }}\n      >\n        <ItemText />\n      </StyledLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <StyledMultiSelectCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n            container: clsx(\n              listClasses.selectorContainer,\n              classes?.selectorContainer\n            ),\n            label: clsx(listClasses.truncate, classes?.truncate),\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <StyledSingleSelectRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n            container: clsx(\n              listClasses.selectorContainer,\n              classes?.selectorContainer\n            ),\n            label: clsx(listClasses.truncate, classes?.truncate),\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <StyledListItem\n        key={i}\n        id={itemId}\n        role={selectable ? \"option\" : \"menuitem\"}\n        disabled={item.disabled || undefined}\n        className={clsx(listClasses.item, classes?.item)}\n        classes={{\n          selected:\n            useSelector || multiSelect\n              ? clsx(listClasses.itemSelector, classes?.itemSelector)\n              : undefined,\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <StyledDropRightXS\n              className={clsx(listClasses.box, classes?.box)}\n              iconSize=\"XS\"\n            />\n          )\n        }\n        $applySelected={useSelector || multiSelect}\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </StyledListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const ListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const renderFixedList = useMemo(() => {\n    return forwardRef(({ ...rest }, ref) => (\n      <HvListContainer\n        id={id}\n        className={clsx(className, listClasses.root, classes?.root)}\n        role={selectable ? \"listbox\" : \"menu\"}\n        interactive\n        condensed={condensed}\n        disableGutters={useSelector}\n        aria-multiselectable={(selectable && multiSelect) || undefined}\n        ref={ref}\n        {...rest}\n      />\n    ));\n  }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {filteredList.length > 0 && !virtualized && (\n        <HvListContainer\n          id={id}\n          className={clsx(className, listClasses.root, classes?.root)}\n          role={selectable ? \"listbox\" : \"menu\"}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={(selectable && multiSelect) || undefined}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      )}\n      {filteredList.length > 0 && virtualized && (\n        <StyledFixedSizeList\n          ref={listRef}\n          className={clsx(\n            listClasses.virtualizedRoot,\n            classes?.virtualizedRoot\n          )}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={renderFixedList}\n          {...others}\n        >\n          {ListItem}\n        </StyledFixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","id","classes","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","StyledSelectAllCheckBox","setId","label","clsx","listClasses","selectAllSelector","indeterminate","checked","renderItemText","ItemText","wrapperTooltip","StyledLink","route","a","link","renderMultiSelectItem","itemId","Selection","StyledMultiSelectCheckBox","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","StyledSingleSelectRadio","renderListItem","i","otherProps","startAdornment","StyledListItem","role","itemSelector","endAdornment","showNavIcon","StyledDropRightXS","box","iconSize","$applySelected","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","ListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","renderFixedList","useMemo","forwardRef","rest","ref","HvListContainer","StyledFixedSizeList","virtualizedRoot","itemCount","itemSize","innerElementType"],"mappings":"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"}