@hitachivantara/uikit-react-core 5.27.6 → 5.27.8

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Children, useMemo, useCallback, cloneElement } 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 { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\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 `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = (props: HvRadioGroupProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    label,\n    description,\n    status,\n    statusMessage,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    orientation = \"vertical\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvRadioGroup\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvradiogroup\");\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)\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        checked: boolean,\n        value: any\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean,\n      newValue: any\n    ) => {\n      childOnChange?.(event, isChecked, newValue);\n\n      onChange?.(event, newValue);\n\n      setValue(newValue);\n    },\n    [onChange, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any) => {\n      const childValue = child?.props?.value ?? \"on\";\n\n      const childIsSelected = childValue === value;\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name || elementId,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n          newValue: any\n        ) =>\n          onChildChangeInterceptor(\n            child?.props?.onChange,\n            event,\n            isChecked,\n            newValue\n          ),\n        inputProps: {\n          ...child?.props?.inputProps,\n          // Set the required attribute directly in the input\n          // the radio form element context shouldn't be aware so the\n          // label doesn't show redundant asterisk\n          required,\n        },\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    elementId,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    required,\n    value,\n  ]);\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  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\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\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-invalid={status === \"invalid\" ? true : undefined}\n        aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.group, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: status === \"invalid\",\n        })}\n        {...others}\n      >\n        {modifiedChildren}\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","childrenArray","Children","toArray","childrenCount","length","i","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","HvRadioGroup","id","classes","classesProp","className","name","valueProp","defaultValue","label","description","status","statusMessage","required","readOnly","disabled","orientation","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","setValue","useControlled","onChildChangeInterceptor","useCallback","childOnChange","event","isChecked","newValue","modifiedChildren","useMemo","map","childValue","cloneElement","inputProps","canShowError","errorMessageId","setId","HvFormElement","root","_jsx","HvLabel","HvInfoMessage","role","join","trim","group","vertical","horizontal","invalid","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Children, useMemo, useCallback, cloneElement } 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 { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\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 `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = (props: HvRadioGroupProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    label,\n    description,\n    status,\n    statusMessage,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    orientation = \"vertical\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvRadioGroup\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvradiogroup\");\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)\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        checked: boolean,\n        value: any\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean,\n      newValue: any\n    ) => {\n      childOnChange?.(event, isChecked, newValue);\n\n      onChange?.(event, newValue);\n\n      setValue(newValue);\n    },\n    [onChange, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any) => {\n      const childValue = child?.props?.value ?? \"on\";\n\n      const childIsSelected = childValue === value;\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name || elementId,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n          newValue: any\n        ) =>\n          onChildChangeInterceptor(\n            child?.props?.onChange,\n            event,\n            isChecked,\n            newValue\n          ),\n        inputProps: {\n          ...child?.props?.inputProps,\n          // Set the required attribute directly in the input\n          // the radio form element context shouldn't be aware so the\n          // label doesn't show redundant asterisk\n          required,\n        },\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    elementId,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    required,\n    value,\n  ]);\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  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\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\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-invalid={status === \"invalid\" ? true : undefined}\n        aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.group, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: status === \"invalid\",\n        })}\n        {...others}\n      >\n        {modifiedChildren}\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","childrenArray","Children","toArray","childrenCount","length","i","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","HvRadioGroup","id","classes","classesProp","className","name","valueProp","defaultValue","label","description","status","statusMessage","required","readOnly","disabled","orientation","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","setValue","useControlled","onChildChangeInterceptor","useCallback","childOnChange","event","isChecked","newValue","modifiedChildren","useMemo","map","childValue","cloneElement","inputProps","canShowError","errorMessageId","setId","root","join","trim","group","vertical","horizontal","invalid","error"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { setId } from "../../../../utils/setId.js";
 import { useClasses } from "./HorizontalScrollListItem.styles.js";
 import { staticClasses } from "./HorizontalScrollListItem.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvHorizontalScrollListItem = ({
   id,
   className,
@@ -21,29 +21,9 @@ const HvHorizontalScrollListItem = ({
   const labelId = setId(id, "label");
   const buttonId = setId(id, "button");
   const Tooltip = tooltipWrapper;
-  return /* @__PURE__ */ jsx("li", {
-    id,
-    className: cx(classes.root, className),
-    "aria-current": selected,
-    children: /* @__PURE__ */ jsx("div", {
-      id: buttonId,
-      role: "button",
-      tabIndex: 0,
-      onClick,
-      onKeyDown,
-      className: classes.button,
-      "aria-labelledby": labelId,
-      ...others,
-      children: /* @__PURE__ */ jsx(Tooltip, {
-        id: labelId,
-        className: cx(classes.text, {
-          [classes.selected]: selected
-        }),
-        variant,
-        children
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsx("div", { id: buttonId, role: "button", tabIndex: 0, onClick, onKeyDown, className: classes.button, "aria-labelledby": labelId, ...others, children: /* @__PURE__ */ jsx(Tooltip, { id: labelId, className: cx(classes.text, {
+    [classes.selected]: selected
+  }), variant, children }) }) });
 };
 export {
   HvHorizontalScrollListItem,

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\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  /** 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  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\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-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","role","tabIndex","button","text"],"mappings":";;;;AAkCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,6BACE,MAAA;AAAA,IAAIR;AAAAA,IAAQC,WAAWS,GAAGR,QAAQe,MAAMhB,SAAS;AAAA,IAAG,gBAAcG;AAAAA,IAASC,8BACzE,OAAA;AAAA,MACEL,IAAIe;AAAAA,MACJG,MAAK;AAAA,MACLC,UAAU;AAAA,MACVb;AAAAA,MACAC;AAAAA,MACAN,WAAWC,QAAQkB;AAAAA,MACnB,mBAAiBP;AAAAA,MAAQ,GACrBJ;AAAAA,MAAMJ,8BAETW,SAAO;AAAA,QACNhB,IAAIa;AAAAA,QACJZ,WAAWS,GAAGR,QAAQmB,MAAM;AAAA,UAAE,CAACnB,QAAQE,QAAQ,GAAGA;AAAAA,QAAAA,CAAU;AAAA,QAC5DQ;AAAAA,QAAiBP;AAAAA,MAAAA,CAGV;AAAA,IAAA,CACN;AAAA,EAAA,CACH;AAER;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\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  /** 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  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\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-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","button","text"],"mappings":";;;;AAkCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,SACG,oBAAA,MAAA,EAAG,IAAQ,WAAWE,GAAGR,QAAQe,MAAMhB,SAAS,GAAG,gBAAcG,UAChE,UAAA,oBAAC,OACC,EAAA,IAAIW,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWb,QAAQgB,QACnB,mBAAiBL,SACbJ,GAAAA,QAEJ,UAAA,oBAAC,WACC,IAAII,SACJ,WAAWH,GAAGR,QAAQiB,MAAM;AAAA,IAAE,CAACjB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useTheme } from "@mui/material/styles";
@@ -13,7 +14,6 @@ import { withTooltip } from "../withTooltip.js";
 import { useScrollTo } from "../useScrollTo.js";
 import { useClasses } from "./ScrollToHorizontal.styles.js";
 import { staticClasses } from "./ScrollToHorizontal.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
 const HvScrollToHorizontal = (props) => {
   const {
@@ -59,58 +59,38 @@ const HvScrollToHorizontal = (props) => {
     });
   }, [options, tooltipPosition]);
   const NotSelected = useCallback(() => {
-    return /* @__PURE__ */ jsx("div", {
-      className: classes.notSelectedRoot,
-      children: /* @__PURE__ */ jsx("div", {
-        className: classes.notSelected
-      })
-    });
+    return /* @__PURE__ */ jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsx("div", { className: classes.notSelected }) });
   }, [classes.notSelectedRoot, classes.notSelected]);
   const Selected = useCallback(() => {
-    return /* @__PURE__ */ jsx(CurrentStep, {
-      height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-      width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-      className: classes.selected
-    });
+    return /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, className: classes.selected });
   }, [classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
   const tabs = options.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
-    return /* @__PURE__ */ jsxs(HvHorizontalScrollListItem, {
-      id: setId(elementId, `item-${index}`),
-      onClick: (event) => {
+    return /* @__PURE__ */ jsxs(HvHorizontalScrollListItem, { id: setId(elementId, `item-${index}`), onClick: (event) => {
+      handleSelection(event, option.value, index);
+      onClick == null ? void 0 : onClick(event, index);
+    }, onKeyDown: (event) => {
+      if (isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onClick == null ? void 0 : onClick(event, index);
-      },
-      onKeyDown: (event) => {
-        if (isKey(event, "Enter") === true) {
-          handleSelection(event, option.value, index);
-          onEnter == null ? void 0 : onEnter(event, index);
-        }
-      },
-      tooltipWrapper,
-      selected,
-      children: [/* @__PURE__ */ jsx("p", {
-        children: option.label
-      }), selected ? /* @__PURE__ */ jsx(Selected, {}) : /* @__PURE__ */ jsx(NotSelected, {})]
-    }, option.key || option.label);
-  });
-  return /* @__PURE__ */ jsx("ol", {
-    className: cx(css({
-      width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
-      marginTop: 0,
-      marginBottom: 0,
-      marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
-      marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
-      backgroundColor: hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-    }), classes.root, {
-      [classes.positionSticky]: position === "sticky",
-      [classes.positionFixed]: position === "fixed"
-    }, className),
-    id: elementId,
-    ...others,
-    children: tabs
+        onEnter == null ? void 0 : onEnter(event, index);
+      }
+    }, tooltipWrapper, selected, children: [
+      /* @__PURE__ */ jsx("p", { children: option.label }),
+      selected ? /* @__PURE__ */ jsx(Selected, {}) : /* @__PURE__ */ jsx(NotSelected, {})
+    ] }, option.key || option.label);
   });
+  return /* @__PURE__ */ jsx("ol", { className: cx(css({
+    width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
+    marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
+    backgroundColor: hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
+  }), classes.root, {
+    [classes.positionSticky]: position === "sticky",
+    [classes.positionFixed]: position === "fixed"
+  }, className), id: elementId, ...others, children: tabs });
 };
 export {
   HvScrollToHorizontal,

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\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 { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\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: HvScrollToHorizontalOption[];\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 Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\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?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\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 = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\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);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\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      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            colors?.atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\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 { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\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: HvScrollToHorizontalOption[];\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 Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\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?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\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 = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\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);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\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      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            colors?.atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","notSelected","Selected","scrollTo","dotSelectedSize","selected","tabs","tooltipWrapper","setId","isKey","key","width","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useTheme } from "../../../hooks/useTheme.js";
@@ -9,7 +10,6 @@ import { useClasses, calculateOffset } from "./ScrollToVertical.styles.js";
 import { staticClasses } from "./ScrollToVertical.styles.js";
 import { useScrollTo } from "../useScrollTo.js";
 import { withTooltip } from "../withTooltip.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvVerticalScrollListItem } from "./VerticalScrollListItem/VerticalScrollListItem.js";
 const HvScrollToVertical = (props) => {
   const {
@@ -55,40 +55,27 @@ const HvScrollToVertical = (props) => {
   const tabs = options.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
-    return /* @__PURE__ */ jsx(HvVerticalScrollListItem, {
-      id: setId(elementId, `item-${index}`),
-      onClick: (event) => {
+    return /* @__PURE__ */ jsx(HvVerticalScrollListItem, { id: setId(elementId, `item-${index}`), onClick: (event) => {
+      handleSelection(event, option.value, index);
+      onClick == null ? void 0 : onClick(event, index);
+    }, onKeyDown: (event) => {
+      if (isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onClick == null ? void 0 : onClick(event, index);
-      },
-      onKeyDown: (event) => {
-        if (isKey(event, "Enter") === true) {
-          handleSelection(event, option.value, index);
-          onEnter == null ? void 0 : onEnter(event, index);
-        }
-      },
-      tooltipWrapper,
-      selected,
-      "aria-label": option.label
-    }, option.key || option.label);
+        onEnter == null ? void 0 : onEnter(event, index);
+      }
+    }, tooltipWrapper, selected, "aria-label": option.label }, option.key || option.label);
   });
   const positionOffset = calculateOffset(options.length);
   const backgroundColor = hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
-  return /* @__PURE__ */ jsx("ol", {
-    className: cx(css({
-      backgroundColor
-    }), classes.root, {
-      [classes.positionFixed]: position === "fixed",
-      [classes.positionAbsolute]: position === "absolute"
-    }, className),
-    style: {
-      top: `calc(50% - ${positionOffset}px)`,
-      ...style
-    },
-    id: elementId,
-    ...others,
-    children: tabs
-  });
+  return /* @__PURE__ */ jsx("ol", { className: cx(css({
+    backgroundColor
+  }), classes.root, {
+    [classes.positionFixed]: position === "fixed",
+    [classes.positionAbsolute]: position === "absolute"
+  }, className), style: {
+    top: `calc(50% - ${positionOffset}px)`,
+    ...style
+  }, id: elementId, ...others, children: tabs });
 };
 export {
   HvScrollToVertical,

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.js","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,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,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,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,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,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,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,MAAMjB,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,gBAAgBvC,QAAQwC,MAAM;AACrD,QAAMC,kBAAkBC,UACtB/B,iCAAQgC,OACRjC,2CAAakC,SAASC,sBACxB;AAEA,6BACE,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.js","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","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,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,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,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,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,WAAA,oBAAC,0BACC,EAAA,IAAIY,MAAMpB,WAAY,QAAOQ,KAAM,EAAC,GACpC,SAAUF,CAAU,UAAA;AACFA,sBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,yCAAUwB,OAAOE;AAAAA,IAAK,GAExB,WAAYF,CAAU,UAAA;AACpB,UAAIe,MAAMf,OAAO,OAAO,MAAM,MAAM;AAClBA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,2CAAUuB,OAAOE;AAAAA,MACnB;AAAA,IACF,GACA,gBACA,UAEA,cAAYM,OAAOE,SADdF,OAAOQ,OAAOR,OAAOE,KAE1B;AAAA,EAAA,CAEL;AAEKO,QAAAA,iBAAiBC,gBAAgBrC,QAAQsC,MAAM;AACrD,QAAMC,kBAAkBC,UACtB7B,iCAAQ8B,OACR/B,2CAAagC,SAASC,sBACxB;AAEA,SACG,oBAAA,MAAA,EACC,WAAWnC,GACTD,IAAI;AAAA,IAAEgC;AAAAA,EAAAA,CAAiB,GACvBzC,QAAQ8C,MACR;AAAA,IACE,CAAC9C,QAAQ+C,aAAa,GAAG3C,aAAa;AAAA,IACtC,CAACJ,QAAQgD,gBAAgB,GAAG5C,aAAa;AAAA,EAAA,GAE3CL,SACF,GACA,OAAO;AAAA,IAAEkD,KAAM,cAAaX,cAAe;AAAA,IAAM,GAAGhC;AAAAA,EAAAA,GACpD,IAAIS,WACAR,GAAAA,QAEHyB,UACH,KAAA,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js

@@ -1,9 +1,9 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { CurrentStep } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../../../utils/setId.js";
 import { useTheme } from "../../../../hooks/useTheme.js";
 import { useClasses } from "./VerticalScrollListItem.styles.js";
 import { staticClasses } from "./VerticalScrollListItem.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvVerticalScrollListItem = ({
   id,
   className,
@@ -26,34 +26,8 @@ const HvVerticalScrollListItem = ({
   const labelId = setId(id, "label");
   const buttonId = setId(id, "button");
   const Tooltip = tooltipWrapper;
-  const icon = selected ? /* @__PURE__ */ jsx(CurrentStep, {
-    height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-    width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize
-  }) : /* @__PURE__ */ jsx("div", {
-    className: cx(classes.notSelected)
-  });
-  return /* @__PURE__ */ jsx("li", {
-    id,
-    className: cx(classes.root, className),
-    "aria-current": selected,
-    children: /* @__PURE__ */ jsx("div", {
-      id: buttonId,
-      role: "button",
-      tabIndex: 0,
-      onClick,
-      onKeyDown,
-      className: classes.button,
-      "aria-label": ariaLabel,
-      "aria-labelledby": labelId,
-      ...others,
-      children: /* @__PURE__ */ jsx(Tooltip, {
-        id: labelId,
-        className: classes.text,
-        variant,
-        children: icon
-      })
-    })
-  });
+  const icon = selected ? /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize }) : /* @__PURE__ */ jsx("div", { className: cx(classes.notSelected) });
+  return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsx("div", { id: buttonId, role: "button", tabIndex: 0, onClick, onKeyDown, className: classes.button, "aria-label": ariaLabel, "aria-labelledby": labelId, ...others, children: /* @__PURE__ */ jsx(Tooltip, { id: labelId, className: classes.text, variant, children: icon }) }) });
 };
 export {
   HvVerticalScrollListItem,

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.js","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,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEVW,QAAAA,OAAOf,WACXgB,oBAACC,aAAW;AAAA,IACVC,QAAQV,2CAAaW,SAASC;AAAAA,IAC9BC,OAAOb,2CAAaW,SAASC;AAAAA,EAAAA,CAC9B,IAEDJ,oBAAA,OAAA;AAAA,IAAKnB,WAAWS,GAAGR,QAAQwB,WAAW;AAAA,EAAA,CAAI;AAG5C,6BACE,MAAA;AAAA,IAAI1B;AAAAA,IAAQC,WAAWS,GAAGR,QAAQyB,MAAM1B,SAAS;AAAA,IAAG,gBAAcG;AAAAA,IAASwB,8BACzE,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,8BAETV,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.js","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","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,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCV,WAAW,UAAU;AAE7DW,QAAAA,UAAUC,MAAMhB,IAAI,OAAO;AAE3BiB,QAAAA,WAAWD,MAAMhB,IAAI,QAAQ;AAEnC,QAAMkB,UAAUV;AAEhB,QAAMW,OAAOf,WACX,oBAAC,eACC,QAAQQ,2CAAaQ,SAASC,iBAC9B,OAAOT,2CAAaQ,SAASC,gBAC7B,CAAA,IAED,oBAAA,OAAA,EAAI,WAAWX,GAAGR,QAAQoB,WAAW,EACvC,CAAA;AAED,6BACG,MAAG,EAAA,IAAQ,WAAWZ,GAAGR,QAAQqB,MAAMtB,SAAS,GAAG,gBAAcG,UAChE,8BAAC,OACC,EAAA,IAAIa,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWf,QAAQsB,QACnB,cAAYnB,WACZ,mBAAiBU,SACbN,GAAAA,QAEJ,UAAA,oBAAC,SAAQ,EAAA,IAAIM,SAAS,WAAWb,QAAQuB,MAAM,SAC5CN,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/withTooltip.js

@@ -1,16 +1,12 @@
-import { withTooltip as withTooltip$1 } from "../../hocs/withTooltip.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { withTooltip as withTooltip$1 } from "../../hocs/withTooltip.js";
 import { HvTypography } from "../Typography/Typography.js";
 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__ */ jsx(HvTypography, {
-    component: componentType,
-    ...props,
-    children: props.children
-  });
+  const component = (props) => /* @__PURE__ */ jsx(HvTypography, { component: componentType, ...props, children: props.children });
   const hideTooltipFunc = hideOnOverflow ? hideTooltip : void 0;
   return withTooltip$1(component, label, tooltipPosition, hideTooltipFunc);
 };

package/dist/esm/components/ScrollTo/withTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.js","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,oBAACC,cAAY;AAAA,IAACH,WAAWH;AAAAA,IAAc,GAAKI;AAAAA,IAAKf,UAC9Ce,MAAMf;AAAAA,EAAAA,CACK;AAGVkB,QAAAA,kBAAkBL,iBAAiBjB,cAAcuB;AAEvD,SAAOC,cAAgBN,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;"}
+{"version":3,"file":"withTooltip.js","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","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,UAChB,oBAAA,cAAA,EAAa,WAAWJ,eAAe,GAAII,OACzCA,UAAAA,MAAMf,SACT,CAAA;AAGIgB,QAAAA,kBAAkBH,iBAAiBjB,cAAcqB;AAEvD,SAAOC,cAAgBJ,WAAWJ,OAAOE,iBAAiBI,eAAe;AAC3E;"}

package/dist/esm/components/SelectionList/SelectionList.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import React__default, { useMemo, useRef, useEffect, useCallback } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
@@ -7,7 +8,6 @@ import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./SelectionList.styles.js";
 import { staticClasses } from "./SelectionList.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvFormElement } from "../Forms/FormElement/FormElement.js";
 import { HvLabel } from "../Forms/Label/Label.js";
 import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
@@ -133,48 +133,16 @@ const HvSelectionList = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   const listId = label && setId(elementId, "listbox") || "";
-  return /* @__PURE__ */ jsxs(HvFormElement, {
-    id,
-    name,
-    status: validationState,
-    disabled,
-    required,
-    readOnly,
-    className: cx(classes.root, className),
-    children: [label && /* @__PURE__ */ jsx(HvLabel, {
-      id: setId(elementId, "label"),
-      label,
-      className: classes.label
-    }), description && /* @__PURE__ */ jsx(HvInfoMessage, {
-      id: setId(elementId, "description"),
-      className: classes.description,
-      children: description
-    }), /* @__PURE__ */ jsx(HvListContainer, {
-      id: listId,
-      interactive: true,
-      condensed: true,
-      role: "listbox",
-      "aria-multiselectable": multiple || void 0,
-      "aria-label": ariaLabel,
-      "aria-labelledby": [label && 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(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__ */ jsx(HvWarningText, {
-      id: setId(elementId, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, className), children: [
+    label && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), label, className: classes.label }),
+    description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description }),
+    /* @__PURE__ */ jsx(HvListContainer, { id: listId, interactive: true, condensed: true, role: "listbox", "aria-multiselectable": multiple || void 0, "aria-label": ariaLabel, "aria-labelledby": [label && 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(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__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
+  ] });
 };
 export {
   HvSelectionList,