@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/Radio/Radio.cjs

@@ -1,12 +1,12 @@
 "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");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
 const Radio_styles = require("./Radio.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const BaseRadio = require("../BaseRadio/BaseRadio.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
@@ -65,57 +65,27 @@ const HvRadio = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   }
-  const radio = /* @__PURE__ */ jsxRuntime.jsx(BaseRadio.HvBaseRadio, {
-    id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"),
-    name,
-    className: cx(classes.radio, {
-      [classes.invalidRadio]: isStateInvalid
-    }),
-    disabled,
-    readOnly,
-    onChange: onLocalChange,
-    value,
-    checked: isChecked,
-    semantic,
-    inputProps: {
-      "aria-invalid": isStateInvalid ? true : void 0,
-      "aria-errormessage": errorMessageId,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      ...inputProps
-    },
-    onFocusVisible: onFocusVisibleCallback,
-    onBlur: onBlurCallback,
-    ...others
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    id,
-    name,
-    status: status || "standBy",
-    disabled,
-    required,
-    readOnly,
-    className: cx(classes.root, className),
-    children: [hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: cx(classes.container, {
-        [classes.disabled]: disabled,
-        [classes.focusVisible]: !!(focusVisible && label),
-        [classes.invalidContainer]: isStateInvalid
-      }),
-      children: [radio, /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        id: setId.setId(elementId, "label"),
-        htmlFor: setId.setId(elementId, "input"),
-        label,
-        className: classes.label,
-        ...labelProps
-      })]
-    }) : radio, canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      disableBorder: true,
-      children: statusMessage
-    })]
-  });
+  const radio = /* @__PURE__ */ jsxRuntime.jsx(BaseRadio.HvBaseRadio, { id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"), name, className: cx(classes.radio, {
+    [classes.invalidRadio]: isStateInvalid
+  }), disabled, readOnly, onChange: onLocalChange, value, checked: isChecked, semantic, inputProps: {
+    "aria-invalid": isStateInvalid ? true : void 0,
+    "aria-errormessage": errorMessageId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...inputProps
+  }, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: status || "standBy", disabled, required, readOnly, className: cx(classes.root, className), children: [
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.container, {
+      [classes.disabled]: disabled,
+      [classes.focusVisible]: !!(focusVisible && label),
+      [classes.invalidContainer]: isStateInvalid
+    }), children: [
+      radio,
+      /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), htmlFor: setId.setId(elementId, "input"), label, className: classes.label, ...labelProps })
+    ] }) : radio,
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, children: statusMessage })
+  ] });
 };
 exports.radioClasses = Radio_styles.staticClasses;
 exports.HvRadio = HvRadio;

package/dist/cjs/components/Radio/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseRadio } from \"@core/components/BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: 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.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = (props: HvRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n    checked,\n    defaultChecked = false,\n    onChange,\n    status = \"standBy\",\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvradio\");\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n      setIsChecked(newChecked);\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, setIsChecked, 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\n  const canShowError =\n    ariaErrorMessage == null &&\n    status !== undefined &&\n    statusMessage !== undefined;\n\n  const hasLabel = label != null;\n\n  const isStateInvalid = isInvalid(status);\n\n  let errorMessageId: string | undefined;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const radio = (\n    <HvBaseRadio\n      id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={cx(classes.radio, { [classes.invalidRadio]: isStateInvalid })}\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={onLocalChange}\n      value={value}\n      checked={isChecked}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\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      {hasLabel ? (\n        <div\n          className={cx(classes.container, {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: !!(focusVisible && label),\n            [classes.invalidContainer]: isStateInvalid,\n          })}\n        >\n          {radio}\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        </div>\n      ) : (\n        radio\n      )}\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvRadio","props","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","HvBaseRadio","invalidRadio","HvFormElement","root","children","_jsxs","container","invalidContainer","_jsx","HvLabel","htmlFor","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseRadio } from \"@core/components/BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: 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.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = (props: HvRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n    checked,\n    defaultChecked = false,\n    onChange,\n    status = \"standBy\",\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvradio\");\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n      setIsChecked(newChecked);\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, setIsChecked, 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\n  const canShowError =\n    ariaErrorMessage == null &&\n    status !== undefined &&\n    statusMessage !== undefined;\n\n  const hasLabel = label != null;\n\n  const isStateInvalid = isInvalid(status);\n\n  let errorMessageId: string | undefined;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const radio = (\n    <HvBaseRadio\n      id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={cx(classes.radio, { [classes.invalidRadio]: isStateInvalid })}\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={onLocalChange}\n      value={value}\n      checked={isChecked}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\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      {hasLabel ? (\n        <div\n          className={cx(classes.container, {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: !!(focusVisible && label),\n            [classes.invalidContainer]: isStateInvalid,\n          })}\n        >\n          {radio}\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        </div>\n      ) : (\n        radio\n      )}\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvRadio","props","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","jsx","HvBaseRadio","invalidRadio","jsxs","HvFormElement","root","container","invalidContainer","HvLabel","HvWarningText"],"mappings":"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"}

package/dist/cjs/components/RadioGroup/RadioGroup.cjs

@@ -1,12 +1,12 @@
 "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");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
 const RadioGroup_styles = require("./RadioGroup.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");
@@ -90,42 +90,16 @@ const HvRadioGroup = (props) => {
   }, [children, disabled, elementId, name, onChildChangeInterceptor, readOnly, required, value]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    id,
-    name,
-    status: status || "standBy",
-    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"),
-      children: description
-    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      role: "radiogroup",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
-      "aria-invalid": status === "invalid" ? true : void 0,
-      "aria-errormessage": status === "invalid" ? errorMessageId : void 0,
-      "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      className: cx(classes.group, {
-        [classes.vertical]: orientation === "vertical",
-        [classes.horizontal]: orientation === "horizontal",
-        [classes.invalid]: status === "invalid"
-      }),
-      ...others,
-      children: modifiedChildren
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: statusMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: status || "standBy", 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"), children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0, "aria-invalid": status === "invalid" ? true : void 0, "aria-errormessage": status === "invalid" ? errorMessageId : void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, className: cx(classes.group, {
+      [classes.vertical]: orientation === "vertical",
+      [classes.horizontal]: orientation === "horizontal",
+      [classes.invalid]: status === "invalid"
+    }), ...others, children: modifiedChildren }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: classes.error, children: statusMessage })
+  ] });
 };
 exports.radioGroupClasses = RadioGroup_styles.staticClasses;
 exports.HvRadioGroup = HvRadioGroup;

package/dist/cjs/components/RadioGroup/RadioGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.cjs","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.cjs","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","jsxs","HvFormElement","root","jsx","HvLabel","HvInfoMessage","join","trim","group","vertical","horizontal","invalid","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const setId = require("../../../../utils/setId.cjs");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvHorizontalScrollListItem = ({
   id,
   className,
@@ -22,29 +22,9 @@ const HvHorizontalScrollListItem = ({
   const labelId = setId.setId(id, "label");
   const buttonId = setId.setId(id, "button");
   const Tooltip = tooltipWrapper;
-  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-labelledby": labelId,
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
-        id: labelId,
-        className: cx(classes.text, {
-          [classes.selected]: selected
-        }),
-        variant,
-        children
-      })
-    })
-  });
+  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-labelledby": labelId, ...others, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { id: labelId, className: cx(classes.text, {
+    [classes.selected]: selected
+  }), variant, children }) }) });
 };
 exports.horizontalScrollListItemClasses = HorizontalScrollListItem_styles.staticClasses;
 exports.HvHorizontalScrollListItem = HvHorizontalScrollListItem;

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.cjs","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,gCAAAA,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAAA,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAAA,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,wCACE,MAAA;AAAA,IAAIR;AAAAA,IAAQC,WAAWS,GAAGR,QAAQe,MAAMhB,SAAS;AAAA,IAAG,gBAAcG;AAAAA,IAASC,yCACzE,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,yCAETW,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.cjs","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","jsx","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,gCAAAA,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAAA,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAAA,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,SACGS,2BAAA,IAAA,MAAA,EAAG,IAAQ,WAAWP,GAAGR,QAAQgB,MAAMjB,SAAS,GAAG,gBAAcG,UAChE,UAAAa,+BAAC,OACC,EAAA,IAAIF,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWb,QAAQiB,QACnB,mBAAiBN,SACbJ,GAAAA,QAEJ,UAAAQ,2BAAA,IAAC,WACC,IAAIJ,SACJ,WAAWH,GAAGR,QAAQkB,MAAM;AAAA,IAAE,CAAClB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.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 styles = require("@mui/material/styles");
@@ -14,7 +15,6 @@ const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
 const withTooltip = require("../withTooltip.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
 const HvScrollToHorizontal = (props) => {
   const {
@@ -60,58 +60,38 @@ const HvScrollToHorizontal = (props) => {
     });
   }, [options, tooltipPosition]);
   const NotSelected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.notSelectedRoot,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.notSelected
-      })
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelected }) });
   }, [classes.notSelectedRoot, classes.notSelected]);
   const Selected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
-      height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-      width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-      className: classes.selected
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.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__ */ jsxRuntime.jsxs(HorizontalScrollListItem.HvHorizontalScrollListItem, {
-      id: setId.setId(elementId, `item-${index}`),
-      onClick: (event) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(HorizontalScrollListItem.HvHorizontalScrollListItem, { id: setId.setId(elementId, `item-${index}`), onClick: (event) => {
+      handleSelection(event, option.value, index);
+      onClick == null ? void 0 : onClick(event, index);
+    }, onKeyDown: (event) => {
+      if (keyboardUtils.isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onClick == null ? void 0 : onClick(event, index);
-      },
-      onKeyDown: (event) => {
-        if (keyboardUtils.isKey(event, "Enter") === true) {
-          handleSelection(event, option.value, index);
-          onEnter == null ? void 0 : onEnter(event, index);
-        }
-      },
-      tooltipWrapper,
-      selected,
-      children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
-        children: option.label
-      }), selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})]
-    }, option.key || option.label);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", {
-    className: cx(css({
-      width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
-      marginTop: 0,
-      marginBottom: 0,
-      marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
-      marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
-      backgroundColor: hexToRgbA.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__ */ jsxRuntime.jsx("p", { children: option.label }),
+      selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})
+    ] }, option.key || option.label);
   });
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cx(css({
+    width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
+    marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
+    backgroundColor: hexToRgbA.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 });
 };
 exports.scrollToHorizontalClasses = ScrollToHorizontal_styles.staticClasses;
 exports.HvScrollToHorizontal = HvScrollToHorizontal;

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.cjs","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.cjs","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","jsx","notSelectedRoot","notSelected","Selected","CurrentStep","scrollTo","dotSelectedSize","selected","tabs","tooltipWrapper","jsxs","HvHorizontalScrollListItem","setId","isKey","key","width","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.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 useTheme = require("../../../hooks/useTheme.cjs");
@@ -10,7 +11,6 @@ const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
 const withTooltip = require("../withTooltip.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const VerticalScrollListItem = require("./VerticalScrollListItem/VerticalScrollListItem.cjs");
 const HvScrollToVertical = (props) => {
   const {
@@ -56,40 +56,27 @@ const HvScrollToVertical = (props) => {
   const tabs = options.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
-    return /* @__PURE__ */ jsxRuntime.jsx(VerticalScrollListItem.HvVerticalScrollListItem, {
-      id: setId.setId(elementId, `item-${index}`),
-      onClick: (event) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(VerticalScrollListItem.HvVerticalScrollListItem, { id: setId.setId(elementId, `item-${index}`), onClick: (event) => {
+      handleSelection(event, option.value, index);
+      onClick == null ? void 0 : onClick(event, index);
+    }, onKeyDown: (event) => {
+      if (keyboardUtils.isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onClick == null ? void 0 : onClick(event, index);
-      },
-      onKeyDown: (event) => {
-        if (keyboardUtils.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 = ScrollToVertical_styles.calculateOffset(options.length);
   const backgroundColor = hexToRgbA.hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 });
 };
 exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
 exports.HvScrollToVertical = HvScrollToVertical;