@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    colors?.atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(\n        css({ backgroundColor }),\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAEnCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAAA,MAAMrB,WAAY,QAAOQ,KAAM,EAAC;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AACrD,QAAMC,kBAAkBC,UAAAA,UACtB/B,iCAAQgC,OACRjC,2CAAakC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACEhD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQgD,MACR;AAAA,MACE,CAAChD,QAAQiD,aAAa,GAAG7C,aAAa;AAAA,MACtC,CAACJ,QAAQkD,gBAAgB,GAAG9C,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE6C,KAAM,cAAaX,cAAe;AAAA,MAAM,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM6C,UAETpB;AAAAA,EAAAA,CACC;AAER;;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    colors?.atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(\n        css({ backgroundColor }),\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","jsx","HvVerticalScrollListItem","setId","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAEnCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAG1C,WAAAY,2BAAA,IAACC,uBACC,0BAAA,EAAA,IAAIC,MAAMtB,MAAAA,WAAY,QAAOQ,KAAM,EAAC,GACpC,SAAUF,CAAU,UAAA;AACFA,sBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,yCAAUwB,OAAOE;AAAAA,IAAK,GAExB,WAAYF,CAAU,UAAA;AACpB,UAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,2CAAUuB,OAAOE;AAAAA,MACnB;AAAA,IACF,GACA,gBACA,UAEA,cAAYM,OAAOE,SADdF,OAAOU,OAAOV,OAAOE,KAE1B;AAAA,EAAA,CAEL;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AACrD,QAAMC,kBAAkBC,UAAAA,UACtB/B,iCAAQgC,OACRjC,2CAAakC,SAASC,sBACxB;AAEA,SACGZ,2BAAA,IAAA,MAAA,EACC,WAAWzB,GACTD,IAAI;AAAA,IAAEkC;AAAAA,EAAAA,CAAiB,GACvB3C,QAAQgD,MACR;AAAA,IACE,CAAChD,QAAQiD,aAAa,GAAG7C,aAAa;AAAA,IACtC,CAACJ,QAAQkD,gBAAgB,GAAG9C,aAAa;AAAA,EAAA,GAE3CL,SACF,GACA,OAAO;AAAA,IAAEoD,KAAM,cAAaX,cAAe;AAAA,IAAM,GAAGlC;AAAAA,EAAAA,GACpD,IAAIS,WACAR,GAAAA,QAEHyB,UACH,KAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../../../utils/setId.cjs");
 const useTheme = require("../../../../hooks/useTheme.cjs");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvVerticalScrollListItem = ({
   id,
   className,
@@ -27,34 +27,8 @@ const HvVerticalScrollListItem = ({
   const labelId = setId.setId(id, "label");
   const buttonId = setId.setId(id, "button");
   const Tooltip = tooltipWrapper;
-  const icon = selected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
-    height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-    width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize
-  }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.notSelected)
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("li", {
-    id,
-    className: cx(classes.root, className),
-    "aria-current": selected,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      id: buttonId,
-      role: "button",
-      tabIndex: 0,
-      onClick,
-      onKeyDown,
-      className: classes.button,
-      "aria-label": ariaLabel,
-      "aria-labelledby": labelId,
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
-        id: labelId,
-        className: classes.text,
-        variant,
-        children: icon
-      })
-    })
-  });
+  const icon = selected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, { height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.notSelected) });
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: buttonId, role: "button", tabIndex: 0, onClick, onKeyDown, className: classes.button, "aria-label": ariaLabel, "aria-labelledby": labelId, ...others, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { id: labelId, className: classes.text, variant, children: icon }) }) });
 };
 exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
 exports.HvVerticalScrollListItem = HvVerticalScrollListItem;

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={cx(classes.notSelected)} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-label={ariaLabel}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip id={labelId} className={classes.text} variant={variant}>\n          {icon}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","notSelected","root","children","role","tabIndex","button","text"],"mappings":";;;;;;;AAmCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,8BAAAA,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAAA,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAAA,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEVW,QAAAA,OAAOf,WACXgB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQV,2CAAaW,SAASC;AAAAA,IAC9BC,OAAOb,2CAAaW,SAASC;AAAAA,EAAAA,CAC9B,IAEDJ,2BAAAA,IAAA,OAAA;AAAA,IAAKnB,WAAWS,GAAGR,QAAQwB,WAAW;AAAA,EAAA,CAAI;AAG5C,wCACE,MAAA;AAAA,IAAI1B;AAAAA,IAAQC,WAAWS,GAAGR,QAAQyB,MAAM1B,SAAS;AAAA,IAAG,gBAAcG;AAAAA,IAASwB,yCACzE,OAAA;AAAA,MACE5B,IAAIiB;AAAAA,MACJY,MAAK;AAAA,MACLC,UAAU;AAAA,MACVxB;AAAAA,MACAC;AAAAA,MACAN,WAAWC,QAAQ6B;AAAAA,MACnB,cAAY1B;AAAAA,MACZ,mBAAiBU;AAAAA,MAAQ,GACrBN;AAAAA,MAAMmB,yCAETV,SAAO;AAAA,QAAClB,IAAIe;AAAAA,QAASd,WAAWC,QAAQ8B;AAAAA,QAAMlB;AAAAA,QAAiBc,UAC7DT;AAAAA,MAAAA,CACM;AAAA,IAAA,CACN;AAAA,EAAA,CACH;AAER;;;"}
+{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <div className={cx(classes.notSelected)} />\n  );\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-label={ariaLabel}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip id={labelId} className={classes.text} variant={variant}>\n          {icon}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","jsx","CurrentStep","scrollTo","dotSelectedSize","notSelected","root","button","text"],"mappings":";;;;;;;AAmCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,8BAAAA,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAAA,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAAA,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEhB,QAAMW,OAAOf,WACXgB,2BAAAA,IAACC,+BACC,QAAQT,2CAAaU,SAASC,iBAC9B,OAAOX,2CAAaU,SAASC,gBAC7B,CAAA,IAEDH,2BAAA,IAAA,OAAA,EAAI,WAAWV,GAAGR,QAAQsB,WAAW,EACvC,CAAA;AAED,wCACG,MAAG,EAAA,IAAQ,WAAWd,GAAGR,QAAQuB,MAAMxB,SAAS,GAAG,gBAAcG,UAChE,yCAAC,OACC,EAAA,IAAIa,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWf,QAAQwB,QACnB,cAAYrB,WACZ,mBAAiBU,SACbN,GAAAA,QAEJ,UAAAW,2BAAAA,IAAC,SAAQ,EAAA,IAAIL,SAAS,WAAWb,QAAQyB,MAAM,SAC5CR,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/ScrollTo/withTooltip.cjs

@@ -1,18 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const withTooltip$1 = require("../../hocs/withTooltip.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const withTooltip$1 = require("../../hocs/withTooltip.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const hideTooltip = (event) => {
   const isOverFlow = event.target.children.length > 1 ? Array.from(event.currentTarget.children).some((child) => child.scrollWidth > child.clientWidth) : event.target.scrollWidth > event.target.clientWidth;
   return !isOverFlow;
 };
 const withTooltip = (label, componentType, tooltipPosition = "top", hideOnOverflow = true) => {
-  const component = (props) => /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-    component: componentType,
-    ...props,
-    children: props.children
-  });
+  const component = (props) => /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: componentType, ...props, children: props.children });
   const hideTooltipFunc = hideOnOverflow ? hideTooltip : void 0;
   return withTooltip$1.withTooltip(component, label, tooltipPosition, hideTooltipFunc);
 };

package/dist/cjs/components/ScrollTo/withTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.cjs","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs/withTooltip\";\n\nimport { HvScrollToTooltipPositions } from \"./types\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n  const isOverFlow =\n    (event.target as HTMLDivElement).children.length > 1\n      ? Array.from(event.currentTarget.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : (event.target as HTMLDivElement).scrollWidth >\n        (event.target as HTMLDivElement).clientWidth;\n  return !isOverFlow;\n};\n\nexport const withTooltip = (\n  label: string,\n  componentType: React.ElementType,\n  tooltipPosition: HvScrollToTooltipPositions = \"top\",\n  hideOnOverflow: boolean = true\n) => {\n  const component = (props: HvTypographyProps) => (\n    <HvTypography component={componentType} {...props}>\n      {props.children}\n    </HvTypography>\n  );\n\n  const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n  return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["hideTooltip","event","isOverFlow","target","children","length","Array","from","currentTarget","some","child","scrollWidth","clientWidth","withTooltip","label","componentType","tooltipPosition","hideOnOverflow","component","props","_jsx","HvTypography","hideTooltipFunc","undefined","withTooltipUtil"],"mappings":";;;;;AAKA,MAAMA,cAAcA,CAACC,UAA4C;AACzDC,QAAAA,aACHD,MAAME,OAA0BC,SAASC,SAAS,IAC/CC,MAAMC,KAAKN,MAAMO,cAAcJ,QAAQ,EAAEK,KACtCC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WACvC,IACCX,MAAME,OAA0BQ,cAChCV,MAAME,OAA0BS;AACvC,SAAO,CAACV;AACV;AAEO,MAAMW,cAAcA,CACzBC,OACAC,eACAC,kBAA8C,OAC9CC,iBAA0B,SACvB;AACH,QAAMC,YAAYA,CAACC,UACjBC,2BAAAA,IAACC,WAAAA,cAAY;AAAA,IAACH,WAAWH;AAAAA,IAAc,GAAKI;AAAAA,IAAKf,UAC9Ce,MAAMf;AAAAA,EAAAA,CACK;AAGVkB,QAAAA,kBAAkBL,iBAAiBjB,cAAcuB;AAEvD,SAAOC,cAAgBN,YAAAA,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;;"}
+{"version":3,"file":"withTooltip.cjs","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs/withTooltip\";\n\nimport { HvScrollToTooltipPositions } from \"./types\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n  const isOverFlow =\n    (event.target as HTMLDivElement).children.length > 1\n      ? Array.from(event.currentTarget.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : (event.target as HTMLDivElement).scrollWidth >\n        (event.target as HTMLDivElement).clientWidth;\n  return !isOverFlow;\n};\n\nexport const withTooltip = (\n  label: string,\n  componentType: React.ElementType,\n  tooltipPosition: HvScrollToTooltipPositions = \"top\",\n  hideOnOverflow: boolean = true\n) => {\n  const component = (props: HvTypographyProps) => (\n    <HvTypography component={componentType} {...props}>\n      {props.children}\n    </HvTypography>\n  );\n\n  const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n  return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["hideTooltip","event","isOverFlow","target","children","length","Array","from","currentTarget","some","child","scrollWidth","clientWidth","withTooltip","label","componentType","tooltipPosition","hideOnOverflow","component","props","jsx","HvTypography","hideTooltipFunc","undefined","withTooltipUtil"],"mappings":";;;;;AAKA,MAAMA,cAAcA,CAACC,UAA4C;AACzDC,QAAAA,aACHD,MAAME,OAA0BC,SAASC,SAAS,IAC/CC,MAAMC,KAAKN,MAAMO,cAAcJ,QAAQ,EAAEK,KACtCC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WACvC,IACCX,MAAME,OAA0BQ,cAChCV,MAAME,OAA0BS;AACvC,SAAO,CAACV;AACV;AAEO,MAAMW,cAAcA,CACzBC,OACAC,eACAC,kBAA8C,OAC9CC,iBAA0B,SACvB;AACGC,QAAAA,YAAYA,CAACC,UAChBC,2BAAA,IAAAC,WAAA,cAAA,EAAa,WAAWN,eAAe,GAAII,OACzCA,UAAAA,MAAMf,SACT,CAAA;AAGIkB,QAAAA,kBAAkBL,iBAAiBjB,cAAcuB;AAEvD,SAAOC,cAAgBN,YAAAA,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;;"}

package/dist/cjs/components/SelectionList/SelectionList.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
@@ -8,7 +9,6 @@ const multiSelectionEventHandler = require("../../utils/multiSelectionEventHandl
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const SelectionList_styles = require("./SelectionList.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
@@ -136,48 +136,16 @@ const HvSelectionList = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   const listId = label && setId.setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    id,
-    name,
-    status: validationState,
-    disabled,
-    required,
-    readOnly,
-    className: cx(classes.root, className),
-    children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-      id: setId.setId(elementId, "label"),
-      label,
-      className: classes.label
-    }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-      id: setId.setId(elementId, "description"),
-      className: classes.description,
-      children: description
-    }), /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
-      id: listId,
-      interactive: true,
-      condensed: true,
-      role: "listbox",
-      "aria-multiselectable": multiple || void 0,
-      "aria-label": ariaLabel,
-      "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-      "aria-invalid": validationState === "invalid" ? true : void 0,
-      "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
-      "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      className: cx(classes.listbox, {
-        [classes.vertical]: orientation === "vertical",
-        [classes.horizontal]: orientation === "horizontal",
-        [classes.invalid]: validationState === "invalid"
-      }),
-      ref: listContainer,
-      ...others,
-      children: modifiedChildren
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id: listId, interactive: true, condensed: true, role: "listbox", "aria-multiselectable": multiple || void 0, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": validationState === "invalid" ? true : void 0, "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, className: cx(classes.listbox, {
+      [classes.vertical]: orientation === "vertical",
+      [classes.horizontal]: orientation === "horizontal",
+      [classes.invalid]: validationState === "invalid"
+    }), ref: listContainer, ...others, children: modifiedChildren }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
+  ] });
 };
 exports.selectionListClasses = SelectionList_styles.staticClasses;
 exports.HvSelectionList = HvSelectionList;

package/dist/cjs/components/SelectionList/SelectionList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect,\n  ReactNode,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n} from \"@core/components/Forms/FormElement\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvLabel } from \"@core/components/Forms/Label\";\nimport { HvInfoMessage } from \"@core/components/Forms/InfoMessage\";\nimport { HvWarningText } from \"@core/components/Forms/WarningText\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\n\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: ReactNode,\n  multiple: boolean\n) => {\n  const selectedValues = React.Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = (props: HvSelectionListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvselectionlist\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    React.Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listContainer = useRef<any>(null);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return React.Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return React.cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={classes.label}\n        />\n      )}\n      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listContainer}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","classesProp","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","useEffect","handleMeta","event","tempArray","isKey","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","HvFormElement","root","_jsx","HvLabel","HvInfoMessage","HvListContainer","interactive","condensed","join","trim","listbox","vertical","horizontal","invalid","ref","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect,\n  ReactNode,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n} from \"@core/components/Forms/FormElement\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvLabel } from \"@core/components/Forms/Label\";\nimport { HvInfoMessage } from \"@core/components/Forms/InfoMessage\";\nimport { HvWarningText } from \"@core/components/Forms/WarningText\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\n\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: ReactNode,\n  multiple: boolean\n) => {\n  const selectedValues = React.Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = (props: HvSelectionListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvselectionlist\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    React.Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listContainer = useRef<any>(null);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return React.Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return React.cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={classes.label}\n        />\n      )}\n      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listContainer}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","classesProp","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","useEffect","handleMeta","event","tempArray","isKey","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","jsxs","HvFormElement","root","jsx","HvLabel","HvInfoMessage","HvListContainer","join","trim","listbox","vertical","horizontal","invalid","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const SimpleGrid_styles = require("./SimpleGrid.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvSimpleGrid = (props) => {
   const {
     children,
@@ -23,11 +23,7 @@ const HvSimpleGrid = (props) => {
     spacing,
     cols
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(css(containerStyle), classes.root, className),
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(css(containerStyle), classes.root, className), ...others, children });
 };
 exports.simpleGridClasses = SimpleGrid_styles.staticClasses;
 exports.HvSimpleGrid = HvSimpleGrid;

package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { Breakpoint, Spacing } from \"./types\";\nimport {\n  getContainerStyle,\n  staticClasses,\n  useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /**\n   * Spacing with pre-defined values according the values defined in the theme\n   */\n  spacing?: Spacing;\n  /**\n   * Provide an array to define responsive behavior:\n   *\n   *    maxWidth or minWidth: max-width or min-width at which media query will work\n   *\n   *    cols: number of columns per row at given max-width\n   *\n   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /**\n   * Number of how many columns the content will be displayed\n   */\n  cols?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing = \"sm\",\n    cols,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n  return (\n    <div\n      className={cx(css(containerStyle), classes.root, className)}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["HvSimpleGrid","props","children","breakpoints","spacing","cols","className","classes","classesProp","others","useDefaultProps","cx","css","useClasses","containerStyle","getContainerStyle","root"],"mappings":";;;;;AAuCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEM;AAAAA,IAASI;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWL,WAAW;AAEnD,QAAMM,iBAAiBC,kBAAAA,kBAAkB;AAAA,IAAEZ;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,EAAAA,CAAM;AAEvE,wCACE,OAAA;AAAA,IACEC,WAAWK,GAAGC,IAAIE,cAAc,GAAGP,QAAQS,MAAMV,SAAS;AAAA,IAAE,GACxDG;AAAAA,IAAMP;AAAAA,EAAAA,CAGP;AAET;;;"}
+{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { Breakpoint, Spacing } from \"./types\";\nimport {\n  getContainerStyle,\n  staticClasses,\n  useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /**\n   * Spacing with pre-defined values according the values defined in the theme\n   */\n  spacing?: Spacing;\n  /**\n   * Provide an array to define responsive behavior:\n   *\n   *    maxWidth or minWidth: max-width or min-width at which media query will work\n   *\n   *    cols: number of columns per row at given max-width\n   *\n   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /**\n   * Number of how many columns the content will be displayed\n   */\n  cols?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing = \"sm\",\n    cols,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n  return (\n    <div\n      className={cx(css(containerStyle), classes.root, className)}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["HvSimpleGrid","props","children","breakpoints","spacing","cols","className","classes","classesProp","others","useDefaultProps","cx","css","useClasses","containerStyle","getContainerStyle","jsx","root"],"mappings":";;;;;AAuCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEM;AAAAA,IAASI;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWL,WAAW;AAEnD,QAAMM,iBAAiBC,kBAAAA,kBAAkB;AAAA,IAAEZ;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,EAAAA,CAAM;AAEvE,SACGW,2BAAAA,IAAA,OAAA,EACC,WAAWL,GAAGC,IAAIE,cAAc,GAAGP,QAAQU,MAAMX,SAAS,GACtDG,GAAAA,QAEHP,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/Slider/Slider.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Slider = require("rc-slider");
 const React = require("react");
 const Tooltip = require("rc-tooltip");
@@ -11,7 +12,6 @@ const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Slider_styles = require("./Slider.styles.cjs");
 const utils = require("./utils.cjs");
 const SliderInput = require("./SliderInput/SliderInput.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
@@ -195,122 +195,32 @@ const HvSlider = (props) => {
     const isEmpty = Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;
     const handleId = setId.setId(elementId, "knob");
     const indexedHandleId = setId.setId(handleId, index);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: cx({
-        [classes.handleContainer]: !!(!disabled && !isEmpty),
-        [classes.handleContainerDisabled]: !!(disabled && !isEmpty),
-        [classes.handleHiddenContainer]: isEmpty || readOnly
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip__default.default, {
-        prefixCls: "rc-slider-tooltip",
-        overlay: (formatTooltip == null ? void 0 : formatTooltip(scaledKnobValue)) || scaledKnobValue,
-        visible: dragging,
-        placement: "top",
-        overlayClassName: classes.sliderTooltip,
-        getTooltipContainer: () => document.getElementById(indexedHandleId || ""),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          id: indexedHandleId,
-          style,
-          className: cx(knobClassName, classes.handle),
-          ...restProps,
-          "aria-label": `${label}-knob-${index}`,
-          "aria-valuenow": utils.knobsPositionToScaledValue(knobValue, minPointValue, stepValue),
-          "aria-valuemin": minPointValue,
-          "aria-valuemax": maxPointValue,
-          ...knobProps == null ? void 0 : knobProps[index]
-        })
-      })
-    }, index);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({
+      [classes.handleContainer]: !!(!disabled && !isEmpty),
+      [classes.handleContainerDisabled]: !!(disabled && !isEmpty),
+      [classes.handleHiddenContainer]: isEmpty || readOnly
+    }), children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip__default.default, { prefixCls: "rc-slider-tooltip", overlay: (formatTooltip == null ? void 0 : formatTooltip(scaledKnobValue)) || scaledKnobValue, visible: dragging, placement: "top", overlayClassName: classes.sliderTooltip, getTooltipContainer: () => document.getElementById(indexedHandleId || ""), children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: indexedHandleId, style, className: cx(knobClassName, classes.handle), ...restProps, "aria-label": `${label}-knob-${index}`, "aria-valuenow": utils.knobsPositionToScaledValue(knobValue, minPointValue, stepValue), "aria-valuemin": minPointValue, "aria-valuemax": maxPointValue, ...knobProps == null ? void 0 : knobProps[index] }) }) }, index);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    className: cx(classes.root, {
-      [classes.trackStandBy]: !readOnly && !disabled && !isSingle && !isDraggingTrack,
-      [classes.trackDragging]: !readOnly && !disabled && !isSingle && isDraggingTrack,
-      [classes.rootDisabled]: !!disabled
-    }, className),
-    id,
-    name,
-    status: utils.statusArrayToFormStatus(validationStatus),
-    disabled,
-    required,
-    readOnly,
-    onMouseDown: onMouseDownHandler,
-    onMouseUp: onMouseUpHandler,
-    onBlur: onBlurHandler,
-    ...others,
-    children: [(hasLabel || !hideInput) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: cx(classes.labelContainer, {
-        [classes.labelIncluded]: hasLabel,
-        [classes.onlyInput]: !hasLabel
-      }),
-      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        id: setId.setId(elementId, "label"),
-        className: classes.label,
-        htmlFor: setId.setId(elementId, "slider"),
-        label
-      }), !hideInput && /* @__PURE__ */ jsxRuntime.jsx(SliderInput.HvSliderInput, {
-        id: sliderInputId,
-        label,
-        values: utils.knobsPositionsToKnobsValues(knobsPositions, stepValue, minPointValue),
-        onChange: onInputChangeHandler,
-        status: validationStatus,
-        disabled,
-        readOnly,
-        markDigits,
-        inputProps
-      })]
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: cx(classes.sliderBase, classes.sliderContainer),
-      children: [isSingle && /* @__PURE__ */ jsxRuntime.jsx(Slider__default.default, {
-        handleRender: createKnob,
-        className: classes.sliderRoot,
-        min: 0,
-        max: divisionQuantity,
-        step: 1,
-        marks,
-        dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot,
-        onChange: (singleValue) => onChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        onBeforeChange: (singleValue) => onBeforeChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        onAfterChange: (singleValue) => onAfterChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        value: knobsPositions.length > 0 ? knobsPositions[0] : void 0,
-        allowCross: false,
-        disabled,
-        count: rangesCount,
-        railStyle: Slider_styles.sliderStyles.rail,
-        handleStyle: knobStyles.knobInner,
-        trackStyle: trackStyles,
-        ...sliderProps
-      }), !isSingle && /* @__PURE__ */ jsxRuntime.jsx(Slider__default.default, {
-        range: true,
-        handleRender: createKnob,
-        className: cx(classes.sliderRoot, {
-          [classes.rootRange]: !isSingle
-        }),
-        min: 0,
-        max: divisionQuantity,
-        step: 1,
-        marks,
-        disabled,
-        dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot,
-        onChange: (singleValue) => onChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        onBeforeChange: (singleValue) => onBeforeChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        onAfterChange: (singleValue) => onAfterChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]),
-        value: knobsPositions.length > 0 ? [...knobsPositions] : void 0,
-        allowCross: false,
-        count: rangesCount,
-        railStyle: Slider_styles.sliderStyles.rail,
-        handleStyle: knobStyles.knobInner,
-        trackStyle: trackStyles,
-        draggableTrack: !readOnly && !isSingle,
-        ...sliderProps
-      })]
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      className: classes.error,
-      disableBorder: true,
-      children: validationMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { className: cx(classes.root, {
+    [classes.trackStandBy]: !readOnly && !disabled && !isSingle && !isDraggingTrack,
+    [classes.trackDragging]: !readOnly && !disabled && !isSingle && isDraggingTrack,
+    [classes.rootDisabled]: !!disabled
+  }, className), id, name, status: utils.statusArrayToFormStatus(validationStatus), disabled, required, readOnly, onMouseDown: onMouseDownHandler, onMouseUp: onMouseUpHandler, onBlur: onBlurHandler, ...others, children: [
+    (hasLabel || !hideInput) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.labelContainer, {
+      [classes.labelIncluded]: hasLabel,
+      [classes.onlyInput]: !hasLabel
+    }), children: [
+      hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), className: classes.label, htmlFor: setId.setId(elementId, "slider"), label }),
+      !hideInput && /* @__PURE__ */ jsxRuntime.jsx(SliderInput.HvSliderInput, { id: sliderInputId, label, values: utils.knobsPositionsToKnobsValues(knobsPositions, stepValue, minPointValue), onChange: onInputChangeHandler, status: validationStatus, disabled, readOnly, markDigits, inputProps })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: [
+      isSingle && /* @__PURE__ */ jsxRuntime.jsx(Slider__default.default, { handleRender: createKnob, className: classes.sliderRoot, min: 0, max: divisionQuantity, step: 1, marks, dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot, onChange: (singleValue) => onChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), onBeforeChange: (singleValue) => onBeforeChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), onAfterChange: (singleValue) => onAfterChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), value: knobsPositions.length > 0 ? knobsPositions[0] : void 0, allowCross: false, disabled, count: rangesCount, railStyle: Slider_styles.sliderStyles.rail, handleStyle: knobStyles.knobInner, trackStyle: trackStyles, ...sliderProps }),
+      !isSingle && /* @__PURE__ */ jsxRuntime.jsx(Slider__default.default, { range: true, handleRender: createKnob, className: cx(classes.sliderRoot, {
+        [classes.rootRange]: !isSingle
+      }), min: 0, max: divisionQuantity, step: 1, marks, disabled, dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot, onChange: (singleValue) => onChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), onBeforeChange: (singleValue) => onBeforeChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), onAfterChange: (singleValue) => onAfterChangeHandler(Array.isArray(singleValue) ? singleValue : [singleValue]), value: knobsPositions.length > 0 ? [...knobsPositions] : void 0, allowCross: false, count: rangesCount, railStyle: Slider_styles.sliderStyles.rail, handleStyle: knobStyles.knobInner, trackStyle: trackStyles, draggableTrack: !readOnly && !isSingle, ...sliderProps })
+    ] }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), className: classes.error, disableBorder: true, children: validationMessage })
+  ] });
 };
 exports.sliderClasses = Slider_styles.staticClasses;
 exports.HvSlider = HvSlider;