@hitachivantara/uikit-react-core 5.3.0 → 5.4.0

package/dist/esm/components/InlineEditor/InlineEditor.js

@@ -0,0 +1,122 @@
+import { clsx } from "clsx";
+import { ClassNames } from "@emotion/react";
+import { useState, useRef, useLayoutEffect } from "react";
+import inlineEditorClasses from "./inlineEditorClasses.js";
+import { styles } from "./InlineEditor.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { Edit } from "@hitachivantara/uikit-react-icons";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { getVarValue } from "../../utils/theme.js";
+import { useControlled } from "../../hooks/useControlled.js";
+import { HvInput } from "../Input/Input.js";
+import { HvButton } from "../Button/Button.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
+import { keyboardCodes } from "../../utils/keyboardUtils/keyboardCodes.js";
+const getTypographyStyles = (typography) => {
+  let typographyStyles = {};
+  Object.keys(typography).map((k) => {
+    typographyStyles[k] = getVarValue(typography[k]);
+  });
+  return typographyStyles;
+};
+const HvInlineEditor = ({
+  className,
+  classes,
+  value: valueProp,
+  defaultValue,
+  showIcon,
+  component: InputComponent = HvInput,
+  variant = "body",
+  placeholder = "Enter text",
+  onBlur,
+  onChange,
+  onKeyDown,
+  buttonProps,
+  typographyProps,
+  ...others
+}) => {
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const [editMode, setEditMode] = useState(false);
+  const [cachedValue, setCachedValue] = useState(value);
+  const inputRef = useRef();
+  const typographyStyles = getTypographyStyles(theme.typography[variant] || {});
+  const {
+    lineHeight
+  } = typographyStyles;
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+  const handleClick = () => {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+  const handleBlur = (event) => {
+    setEditMode(false);
+    const newValue = value || cachedValue;
+    setValue(newValue);
+    onBlur == null ? void 0 : onBlur(event, newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (isKeypress(event, keyboardCodes.Esc)) {
+      setEditMode(false);
+      setValue(cachedValue);
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const handleChange = (event, val) => {
+    setValue(val);
+    onChange == null ? void 0 : onChange(event, val);
+  };
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx("div", {
+      className: clsx(className, inlineEditorClasses.root, classes == null ? void 0 : classes.root, css(styles.root)),
+      children: editMode ? /* @__PURE__ */ jsx(InputComponent, {
+        inputRef,
+        classes: {
+          root: clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.inputRoot),
+          input: clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.input, css(styles.input)),
+          inputBorderContainer: clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.inputBorderContainer, css(styles.inputBorderContainer))
+        },
+        inputProps: {
+          style: {
+            ...typographyStyles,
+            height: InputComponent === HvInput ? lineHeight : void 0
+          }
+        },
+        value,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ...others
+      }) : /* @__PURE__ */ jsxs(HvButton, {
+        variant: "secondaryGhost",
+        overrideIconColors: false,
+        className: clsx(classes == null ? void 0 : classes.button, inlineEditorClasses.button, css(styles.button), parseInt(lineHeight, 10) >= 28 && clsx(classes == null ? void 0 : classes.largeText, inlineEditorClasses.largeText, css(styles.largeText))),
+        onClick: handleClick,
+        ...buttonProps,
+        children: [/* @__PURE__ */ jsx(HvTypography, {
+          variant,
+          noWrap: true,
+          className: clsx(classes == null ? void 0 : classes.text, inlineEditorClasses.text, css(styles.text), !value && clsx(classes == null ? void 0 : classes.textEmpty, inlineEditorClasses.textEmpty, css(styles.textEmpty))),
+          ...typographyProps,
+          children: value || placeholder
+        }), /* @__PURE__ */ jsx(Edit, {
+          color: "secondary_60",
+          role: "presentation",
+          className: clsx(classes == null ? void 0 : classes.icon, inlineEditorClasses.icon, css(styles.icon), showIcon && clsx(classes == null ? void 0 : classes.iconVisible, inlineEditorClasses.iconVisible, css(styles.iconVisible)))
+        })]
+      })
+    })
+  });
+};
+export {
+  HvInlineEditor
+};
+//# sourceMappingURL=InlineEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.js","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n  HvButtonProps,\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvInput,\n  HvButton,\n  HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n  let typographyStyles = {};\n  Object.keys(typography).map((k) => {\n    typographyStyles[k] = getVarValue(typography[k]);\n  });\n  return typographyStyles;\n};\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n  className,\n  classes,\n  value: valueProp,\n  defaultValue,\n  showIcon,\n  component: InputComponent = HvInput,\n  variant = \"body\",\n  placeholder = \"Enter text\",\n  onBlur,\n  onChange,\n  onKeyDown,\n  buttonProps,\n  typographyProps,\n  ...others\n}: HvInlineEditorProps) => {\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n\n  const typographyStyles = getTypographyStyles(theme.typography[variant] || {});\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div\n          className={clsx(\n            className,\n            inlineEditorClasses.root,\n            classes?.root,\n            css(styles.root)\n          )}\n        >\n          {editMode ? (\n            <InputComponent\n              inputRef={inputRef}\n              classes={{\n                root: clsx(classes?.inputRoot, inlineEditorClasses.inputRoot),\n                input: clsx(\n                  classes?.input,\n                  inlineEditorClasses.input,\n                  css(styles.input)\n                ),\n                inputBorderContainer: clsx(\n                  classes?.inputBorderContainer,\n                  inlineEditorClasses.inputBorderContainer,\n                  css(styles.inputBorderContainer)\n                ),\n              }}\n              inputProps={{\n                style: {\n                  ...typographyStyles,\n                  height: InputComponent === HvInput ? lineHeight : undefined,\n                },\n              }}\n              value={value}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              {...others}\n            />\n          ) : (\n            <HvButton\n              variant=\"secondaryGhost\"\n              overrideIconColors={false}\n              className={clsx(\n                classes?.button,\n                inlineEditorClasses.button,\n                css(styles.button),\n                parseInt(lineHeight as string, 10) >= 28 &&\n                  clsx(\n                    classes?.largeText,\n                    inlineEditorClasses.largeText,\n                    css(styles.largeText)\n                  )\n              )}\n              onClick={handleClick}\n              {...buttonProps}\n            >\n              <HvTypography\n                variant={variant}\n                noWrap\n                className={clsx(\n                  classes?.text,\n                  inlineEditorClasses.text,\n                  css(styles.text),\n                  !value &&\n                    clsx(\n                      classes?.textEmpty,\n                      inlineEditorClasses.textEmpty,\n                      css(styles.textEmpty)\n                    )\n                )}\n                {...typographyProps}\n              >\n                {value || placeholder}\n              </HvTypography>\n              <Edit\n                color=\"secondary_60\"\n                role=\"presentation\"\n                className={clsx(\n                  classes?.icon,\n                  inlineEditorClasses.icon,\n                  css(styles.icon),\n                  showIcon &&\n                    clsx(\n                      classes?.iconVisible,\n                      inlineEditorClasses.iconVisible,\n                      css(styles.iconVisible)\n                    )\n                )}\n              />\n            </HvButton>\n          )}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","clsx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":";;;;;;;;;;;;;;;AA8CA,MAAMA,sBAAsBA,CAACC,eAAuC;AAClE,MAAIC,mBAAmB,CAAA;AACvBC,SAAOC,KAAKH,UAAU,EAAEI,IAAKC,CAAM,MAAA;AACjCJ,qBAAiBI,CAAC,IAAIC,YAAYN,WAAWK,CAAC,CAAC;AAAA,EAAA,CAChD;AACMJ,SAAAA;AACT;AAMO,MAAMM,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,WAAWC,iBAAiBC;AAAAA,EAC5BC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACzB,QAAM,CAACd,OAAOe,QAAQ,IAAIC,cAAcf,WAAWC,YAAY;AAC/D,QAAM,CAACe,UAAUC,WAAW,IAAIC,SAAS,KAAK;AAC9C,QAAM,CAACC,aAAaC,cAAc,IAAIF,SAASnB,KAAK;AACpD,QAAMsB,WAAWC;AAEjB,QAAMhC,mBAAmBF,oBAAoBmC,MAAMlC,WAAWiB,OAAO,KAAK,CAAA,CAAE;AACtE,QAAA;AAAA,IAAEkB;AAAAA,EAAelC,IAAAA;AAEvBmC,kBAAgB,MAAM;AACpB,UAAMC,QAAQL,SAASM;AACvB,QAAIX,YAAYU,OAAO;AACrBA,YAAME,MAAO;AACbF,YAAMG,OAAQ;AAAA,IAChB;AAAA,EAAA,GACC,CAACb,QAAQ,CAAC;AAEb,QAAMc,cAAcA,MAAM;AACxBb,gBAAY,IAAI;AAChBG,mBAAerB,KAAK;AAAA,EAAA;AAGtB,QAAMgC,aAAcC,CAAU,UAAA;AAC5Bf,gBAAY,KAAK;AAEjB,UAAMgB,WAAWlC,SAASoB;AAC1BL,aAASmB,QAAQ;AACjBzB,qCAASwB,OAAOC;AAAAA,EAAQ;AAG1B,QAAMC,gBAAiBF,CAAU,UAAA;AAC/B,QAAIG,WAAWH,OAAOI,cAAcC,GAAG,GAAG;AACxCpB,kBAAY,KAAK;AACjBH,eAASK,WAAW;AAAA,IACtB;AACAT,2CAAYsB;AAAAA,EAAK;AAGbM,QAAAA,eAAeA,CAACN,OAAOO,QAAQ;AACnCzB,aAASyB,GAAG;AACZ9B,yCAAWuB,OAAOO;AAAAA,EAAG;AAGvB,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACF,OAAA;AAAA,MACE7C,WAAW8C,KACT9C,WACA+C,oBAAoBC,MACpB/C,mCAAS+C,MACTH,IAAII,OAAOD,IAAI,CAAC;AAAA,MAChBJ,UAEDzB,WACC+B,oBAAC3C,gBAAc;AAAA,QACbiB;AAAAA,QACAvB,SAAS;AAAA,UACP+C,MAAMF,KAAK7C,mCAASkD,WAAWJ,oBAAoBI,SAAS;AAAA,UAC5DtB,OAAOiB,KACL7C,mCAAS4B,OACTkB,oBAAoBlB,OACpBgB,IAAII,OAAOpB,KAAK,CAAC;AAAA,UAEnBuB,sBAAsBN,KACpB7C,mCAASmD,sBACTL,oBAAoBK,sBACpBP,IAAII,OAAOG,oBAAoB,CAAC;AAAA,QAEpC;AAAA,QACAC,YAAY;AAAA,UACVC,OAAO;AAAA,YACL,GAAG7D;AAAAA,YACH8D,QAAQhD,mBAAmBC,UAAUmB,aAAa6B;AAAAA,UACpD;AAAA,QACF;AAAA,QACAtD;AAAAA,QACAS,QAAQuB;AAAAA,QACRtB,UAAU6B;AAAAA,QACV5B,WAAWwB;AAAAA,QAAc,GACrBrB;AAAAA,MAAAA,CACJ,IAEFyC,qBAACC,UAAQ;AAAA,QACPjD,SAAQ;AAAA,QACRkD,oBAAoB;AAAA,QACpB3D,WAAW8C,KACT7C,mCAAS2D,QACTb,oBAAoBa,QACpBf,IAAII,OAAOW,MAAM,GACjBC,SAASlC,YAAsB,EAAE,KAAK,MACpCmB,KACE7C,mCAAS6D,WACTf,oBAAoBe,WACpBjB,IAAII,OAAOa,SAAS,CAAC,CACtB;AAAA,QAELC,SAAS9B;AAAAA,QAAY,GACjBnB;AAAAA,QAAW8B,UAAA,CAEfM,oBAACc,cAAY;AAAA,UACXvD;AAAAA,UACAwD,QAAM;AAAA,UACNjE,WAAW8C,KACT7C,mCAASiE,MACTnB,oBAAoBmB,MACpBrB,IAAII,OAAOiB,IAAI,GACf,CAAChE,SACC4C,KACE7C,mCAASkE,WACTpB,oBAAoBoB,WACpBtB,IAAII,OAAOkB,SAAS,CAAC,CACtB;AAAA,UACH,GACEpD;AAAAA,UAAe6B,UAElB1C,SAASQ;AAAAA,QAAAA,CACG,GACfwC,oBAACkB,MAAI;AAAA,UACHC,OAAM;AAAA,UACNC,MAAK;AAAA,UACLtE,WAAW8C,KACT7C,mCAASsE,MACTxB,oBAAoBwB,MACpB1B,IAAII,OAAOsB,IAAI,GACflE,YACEyC,KACE7C,mCAASuE,aACTzB,oBAAoByB,aACpB3B,IAAII,OAAOuB,WAAW,CAAC,CACxB;AAAA,QAAA,CAEL,CAAA;AAAA,MAAA,CAAA;AAAA,IAAA,CAEL;AAAA,EAAA,CAGM;AAEjB;"}

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

@@ -0,0 +1,74 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import inlineEditorClasses from "./inlineEditorClasses.js";
+import baseInputClasses from "../BaseInput/baseInputClasses.js";
+import inputClasses from "../Input/inputClasses.js";
+const styles = {
+  root: {
+    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {
+      height: "100%"
+    }
+  },
+  inputBorderContainer: {
+    top: "unset",
+    bottom: 0
+  },
+  input: {
+    padding: theme.spacing([0, "8px"])
+  },
+  text: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    alignSelf: "center"
+  },
+  textEmpty: {
+    color: theme.typography.placeholderText.color
+  },
+  button: {
+    padding: theme.spacing([0, "8px"]),
+    boxSizing: "border-box",
+    cursor: "text",
+    height: "100%",
+    width: "100%",
+    maxWidth: "100%",
+    justifyContent: "flex-start",
+    backgroundColor: "transparent",
+    "&:hover, &:focus": {
+      outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,
+      backgroundColor: "transparent",
+      [`& .${inlineEditorClasses.icon}`]: {
+        visibility: "visible"
+      }
+    },
+    "&:active": {
+      outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,
+      backgroundColor: "transparent",
+      [`& .${inlineEditorClasses.icon}`]: {
+        visibility: "visible"
+      }
+    },
+    "& > div": {
+      width: "100%"
+    },
+    "& > div > span": {
+      width: "100%",
+      overflow: "hidden"
+    }
+  },
+  icon: {
+    cursor: "pointer",
+    visibility: "hidden",
+    minWidth: 32,
+    alignSelf: "center"
+  },
+  iconVisible: {
+    visibility: "visible"
+  },
+  largeText: {
+    margin: theme.spacing([0, "8px"])
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=InlineEditor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"../index\";\nimport inlineEditorClasses from \"./inlineEditorClasses\";\n\nexport const styles: {\n  root: CSSInterpolation;\n  inputBorderContainer: CSSInterpolation;\n  input: CSSInterpolation;\n  text: CSSInterpolation;\n  textEmpty: CSSInterpolation;\n  button: CSSInterpolation;\n  icon: CSSInterpolation;\n  iconVisible: CSSInterpolation;\n  largeText: CSSInterpolation;\n} = {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {\n    padding: theme.spacing([0, \"8px\"]),\n  },\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  textEmpty: {\n    color: theme.typography.placeholderText.color,\n  },\n  button: {\n    padding: theme.spacing([0, \"8px\"]),\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus\": {\n      outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n    \"&:active\": {\n      outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n      overflow: \"hidden\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    minWidth: 32,\n    alignSelf: \"center\",\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n  largeText: {\n    margin: theme.spacing([0, \"8px\"]),\n  },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","inputBorderContainer","top","bottom","input","padding","theme","spacing","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","typography","placeholderText","button","boxSizing","cursor","width","maxWidth","justifyContent","backgroundColor","outline","inlineEditor","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","iconVisible","largeText","margin"],"mappings":";;;;AAKO,MAAMA,SAUT;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,iBAAiBC,aAAaC,aAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO;AAAA,IACLC,SAASC,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EACnC;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOR,MAAMS,WAAWC,gBAAgBF;AAAAA,EAC1C;AAAA,EACAG,QAAQ;AAAA,IACNZ,SAASC,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IACjCW,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,MAClBC,SAAU,aAAYlB,MAAMmB,aAAaC;AAAAA,MACzCH,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVL,SAAU,aAAYlB,MAAMmB,aAAaK;AAAAA,MACzCP,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,MACPX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAmB,MAAM;AAAA,IACJT,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZE,UAAU;AAAA,IACVnB,WAAW;AAAA,EACb;AAAA,EACAoB,aAAa;AAAA,IACXH,YAAY;AAAA,EACd;AAAA,EACAI,WAAW;AAAA,IACTC,QAAQ5B,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EAClC;AACF;"}

package/dist/esm/components/InlineEditor/inlineEditorClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../utils/classes.js";
+const classKeys = ["root", "button", "largeText", "text", "textEmpty", "icon", "iconVisible", "inputRoot", "input", "inputBorderContainer"];
+const inlineEditorClasses = getClasses(classKeys, "HvInlineEditor");
+const inlineEditorClasses$1 = inlineEditorClasses;
+export {
+  inlineEditorClasses$1 as default
+};
+//# sourceMappingURL=inlineEditorClasses.js.map

package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineEditorClasses.js","sources":["../../../../src/components/InlineEditor/inlineEditorClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvInlineEditorClasses {\n  root?: string;\n  button?: string;\n  largeText?: string;\n  text?: string;\n  textEmpty?: string;\n  icon?: string;\n  iconVisible?: string;\n  inputRoot?: string;\n  input?: string;\n  inputBorderContainer?: string;\n}\n\nconst classKeys: string[] = [\n  \"root\",\n  \"button\",\n  \"largeText\",\n  \"text\",\n  \"textEmpty\",\n  \"icon\",\n  \"iconVisible\",\n  \"inputRoot\",\n  \"input\",\n  \"inputBorderContainer\",\n];\n\nconst inlineEditorClasses = getClasses<HvInlineEditorClasses>(\n  classKeys,\n  \"HvInlineEditor\"\n);\n\nexport default inlineEditorClasses;\n"],"names":["classKeys","inlineEditorClasses","getClasses"],"mappings":";AAeA,MAAMA,YAAsB,CAC1B,QACA,UACA,aACA,QACA,aACA,QACA,eACA,aACA,SACA,sBAAsB;AAGxB,MAAMC,sBAAsBC,WAC1BF,WACA,gBAAgB;AAGlB,MAAA,wBAAeC;"}

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

@@ -0,0 +1,51 @@
+import horizontalScrollListItemClasses from "./horizontalScrollListItemClasses.js";
+import { ClassNames } from "@emotion/react";
+import { clsx } from "clsx";
+import { styles } from "./HorizontalScrollListItem.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { setId } from "../../../../utils/setId.js";
+const HvHorizontalScrollListItem = ({
+  id,
+  className,
+  classes,
+  selected,
+  children,
+  onClick,
+  onKeyDown,
+  tooltipWrapper,
+  ...others
+}) => {
+  const variant = selected ? "label" : "body";
+  const labelId = setId(id, "label");
+  const buttonId = setId(id, "button");
+  const Tooltip = tooltipWrapper;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx("li", {
+      id,
+      className: clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.root, css(styles.root)),
+      "aria-current": selected,
+      children: /* @__PURE__ */ jsx("div", {
+        id: buttonId,
+        role: "button",
+        tabIndex: 0,
+        onClick,
+        onKeyDown,
+        className: clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.button, css(styles.button)),
+        "aria-labelledby": labelId,
+        ...others,
+        children: /* @__PURE__ */ jsx(Tooltip, {
+          id: labelId,
+          className: clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.text, css(styles.text), selected && clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.selected, css(styles.selected))),
+          variant,
+          children
+        })
+      })
+    })
+  });
+};
+export {
+  HvHorizontalScrollListItem
+};
+//# sourceMappingURL=HorizontalScrollListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\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,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\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    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            horizontalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              horizontalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                horizontalScrollListItemClasses.text,\n                css(styles.text),\n                selected &&\n                  clsx(\n                    classes?.selected,\n                    horizontalScrollListItemClasses.selected,\n                    css(styles.selected)\n                  )\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","clsx","root","horizontalScrollListItemClasses","styles","role","tabIndex","button","text"],"mappings":";;;;;;AAiCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,6BACGO,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,0BACF,MAAA;AAAA,MACEf;AAAAA,MACAC,WAAWe,KACTf,WACAC,mCAASe,MACTC,gCAAgCD,MAChCF,IAAII,OAAOF,IAAI,CAAC;AAAA,MAElB,gBAAcd;AAAAA,MAASC,8BAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,KACTd,mCAASoB,QACTJ,gCAAgCI,QAChCP,IAAII,OAAOG,MAAM,CAAC;AAAA,QAEpB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,8BAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,KACTd,mCAASqB,MACTL,gCAAgCK,MAChCR,IAAII,OAAOI,IAAI,GACfpB,YACEa,KACEd,mCAASC,UACTe,gCAAgCf,UAChCY,IAAII,OAAOhB,QAAQ,CAAC,CACrB;AAAA,UAELM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}

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

@@ -0,0 +1,54 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import scrollToHorizontalClasses from "../scrollToHorizontalClasses.js";
+import { outlineStyles } from "../../../../utils/focusUtils.js";
+const styles = {
+  root: {
+    padding: "10px 0"
+  },
+  button: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: theme.scrollTo.horizontal.buttonHeight,
+    cursor: "pointer",
+    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    "&:hover": {
+      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,
+      [`& .${scrollToHorizontalClasses.notSelected}`]: {
+        height: theme.scrollTo.dotHoverSize,
+        width: theme.scrollTo.dotHoverSize,
+        backgroundColor: theme.scrollTo.dotHoverColor
+      },
+      [`& .${scrollToHorizontalClasses.notSelectedRoot}`]: {
+        backgroundColor: theme.scrollTo.dotHoverBackgroundColor
+      }
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  text: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: theme.scrollTo.horizontal.buttonHeight,
+    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    "& p": {
+      padding: theme.scrollTo.horizontal.textPadding,
+      maxWidth: theme.scrollTo.horizontal.textMaxWidth,
+      textOverflow: "ellipsis",
+      overflow: "hidden"
+    }
+  },
+  selected: {
+    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=HorizontalScrollListItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport scrollToHorizontalClasses from \"../scrollToHorizontalClasses\";\n\nexport const styles: {\n  root: CSSInterpolation;\n  button: CSSInterpolation;\n  text: CSSInterpolation;\n  selected: CSSInterpolation;\n} = {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    cursor: \"pointer\",\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n      [`& .${scrollToHorizontalClasses.notSelected}`]: {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n\n      [`& .${scrollToHorizontalClasses.notSelectedRoot}`]: {\n        backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n    \"& p\": {\n      padding: theme.scrollTo.horizontal.textPadding,\n      maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n  },\n};\n"],"names":["styles","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","scrollToHorizontalClasses","notSelected","dotHoverSize","width","dotHoverColor","notSelectedRoot","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,MAAMC,SAASC,WAAWM;AAAAA,MAE3C,CAAE,MAAKC,0BAA0BC,aAAa,GAAG;AAAA,QAC/CX,QAAQC,MAAMC,SAASU;AAAAA,QACvBC,OAAOZ,MAAMC,SAASU;AAAAA,QACtBJ,iBAAiBP,MAAMC,SAASY;AAAAA,MAClC;AAAA,MAEA,CAAE,MAAKJ,0BAA0BK,iBAAiB,GAAG;AAAA,QACnDP,iBAAiBP,MAAMC,SAASc;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfrB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,MAAMC,SAASC,WAAWkB;AAAAA,MACnCC,UAAUrB,MAAMC,SAASC,WAAWoB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRpB,cAAcL,MAAMC,SAASC,WAAWwB;AAAAA,EAC1C;AACF;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../../utils/classes.js";
+const classKeys = ["root", "selected", "button", "text"];
+const horizontalScrollListItemClasses = getClasses(classKeys, "HvHorizontalScrollListItem");
+const horizontalScrollListItemClasses$1 = horizontalScrollListItemClasses;
+export {
+  horizontalScrollListItemClasses$1 as default
+};
+//# sourceMappingURL=horizontalScrollListItemClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"horizontalScrollListItemClasses.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvHorizontalScrollListItemClasses {\n  root?: string;\n  selected?: string;\n  button?: string;\n  text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"selected\", \"button\", \"text\"];\n\nconst horizontalScrollListItemClasses =\n  getClasses<HvHorizontalScrollListItemClasses>(\n    classKeys,\n    \"HvHorizontalScrollListItem\"\n  );\n\nexport default horizontalScrollListItemClasses;\n"],"names":["classKeys","horizontalScrollListItemClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,YAAY,UAAU,MAAM;AAEjE,MAAMC,kCACJC,WACEF,WACA,4BAA4B;AAGhC,MAAA,oCAAeC;"}

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

@@ -0,0 +1,126 @@
+import scrollToHorizontalClasses from "./scrollToHorizontalClasses.js";
+import { ClassNames } from "@emotion/react";
+import { clsx } from "clsx";
+import { styles } from "./ScrollToHorizontal.styles.js";
+import { useScrollTo } from "../useScrollTo.js";
+import { useMemo, useCallback } from "react";
+import { withTooltip } from "../withTooltip.js";
+import { useTheme } from "@mui/material/styles";
+import { theme } from "@hitachivantara/uikit-styles";
+import fade from "../../../utils/hexToRgbA.js";
+import { CurrentStep } from "@hitachivantara/uikit-react-icons";
+import { useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../../hooks/useUniqueId.js";
+import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
+import { useTheme as useTheme$1 } from "../../../hooks/useTheme.js";
+import { setId } from "../../../utils/setId.js";
+import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
+import { keyboardCodes } from "../../../utils/keyboardUtils/keyboardCodes.js";
+const {
+  Enter
+} = keyboardCodes;
+const HvScrollToHorizontal = ({
+  id,
+  defaultSelectedIndex = 0,
+  scrollElementId,
+  href = true,
+  onChange,
+  onClick,
+  onEnter,
+  className,
+  classes,
+  options,
+  offset = 0,
+  position = "relative",
+  tooltipPosition = "top",
+  ...others
+}) => {
+  const muiTheme = useTheme();
+  const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
+  const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
+  const {
+    activeTheme,
+    selectedMode
+  } = useTheme$1();
+  const elementId = useUniqueId(id, "hvHorizontalScrollto");
+  const [selectedIndex, setScrollTo] = useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
+  const handleSelection = (event, value, index) => {
+    event.preventDefault();
+    const wrappedOnChange = () => {
+      onChange == null ? void 0 : onChange(event, index);
+    };
+    setScrollTo(event, value, index, wrappedOnChange);
+  };
+  const tooltipWrappers = useMemo(() => {
+    return options.map((option) => {
+      return withTooltip(option.label, "div", tooltipPosition);
+    });
+  }, [options, tooltipPosition]);
+  const NotSelected = useCallback(() => {
+    return /* @__PURE__ */ jsx(ClassNames, {
+      children: ({
+        css
+      }) => /* @__PURE__ */ jsx("div", {
+        className: clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot)),
+        children: /* @__PURE__ */ jsx("div", {
+          className: clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.notSelected, css(styles.notSelected))
+        })
+      })
+    });
+  }, [classes == null ? void 0 : classes.notSelectedRoot, classes == null ? void 0 : classes.notSelected]);
+  const Selected = useCallback(() => {
+    return /* @__PURE__ */ jsx(ClassNames, {
+      children: ({
+        css
+      }) => /* @__PURE__ */ jsx(CurrentStep, {
+        height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
+        width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
+        className: clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.selected, css(styles.selected))
+      })
+    });
+  }, [classes == null ? void 0 : 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) => {
+        handleSelection(event, option.value, index);
+        onClick == null ? void 0 : onClick(event, index);
+      },
+      onKeyDown: (event) => {
+        if (isKeypress(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(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx("ol", {
+      className: clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.root, css(styles.root), 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: fade(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
+      }), position === "sticky" && clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.positionSticky, css(styles.positionSticky)), position === "fixed" && clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.positionFixed, css(styles.positionFixed))),
+      id: elementId,
+      ...others,
+      children: tabs
+    })
+  });
+};
+export {
+  HvScrollToHorizontal
+};
+//# sourceMappingURL=ScrollToHorizontal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n  HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\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 = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"top\",\n  ...others\n}: HvScrollToHorizontalProps) => {\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, selectedMode } = 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      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelectedRoot,\n              scrollToHorizontalClasses.notSelectedRoot,\n              css(styles.notSelectedRoot)\n            )}\n          >\n            <div\n              className={clsx(\n                classes?.notSelected,\n                scrollToHorizontalClasses.notSelected,\n                css(styles.notSelected)\n              )}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <CurrentStep\n            height={activeTheme?.scrollTo.dotSelectedSize}\n            width={activeTheme?.scrollTo.dotSelectedSize}\n            className={clsx(\n              classes?.selected,\n              scrollToHorizontalClasses.selected,\n              css(styles.selected)\n            )}\n          />\n        )}\n      </ClassNames>\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 (isKeypress(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    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToHorizontalClasses.root,\n            css(styles.root),\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: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"sticky\" &&\n              clsx(\n                classes?.positionSticky,\n                scrollToHorizontalClasses.positionSticky,\n                css(styles.positionSticky)\n              ),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToHorizontalClasses.positionFixed,\n                css(styles.positionFixed)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  root: {
+    display: "flex",
+    padding: "0 30px",
+    listStyleType: "none",
+    flexWrap: "wrap",
+    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`
+  },
+  positionSticky: {
+    position: "sticky",
+    zIndex: `calc(${theme.zIndices.banner} - 2)`,
+    top: 0,
+    left: 0
+  },
+  positionFixed: {
+    position: "fixed",
+    zIndex: `calc(${theme.zIndices.banner} - 2)`,
+    top: 0,
+    left: 0
+  },
+  notSelectedRoot: {
+    display: theme.scrollTo.horizontal.dotDisplay,
+    justifyContent: "center",
+    alignItems: "center",
+    height: theme.scrollTo.dotRootSize,
+    width: theme.scrollTo.dotRootSize,
+    borderRadius: theme.scrollTo.dotRootRadius
+  },
+  notSelected: {
+    height: theme.scrollTo.dotNotSelectedSize,
+    width: theme.scrollTo.dotNotSelectedSize,
+    borderRadius: "50%",
+    display: "inline-block",
+    backgroundColor: theme.scrollTo.dotNotSelectedColor
+  },
+  selected: {
+    display: theme.scrollTo.horizontal.dotDisplay,
+    height: theme.scrollTo.dotRootSize,
+    width: theme.scrollTo.dotRootSize
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=ScrollToHorizontal.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: {\n  root: CSSInterpolation;\n  positionSticky: CSSInterpolation;\n  positionFixed: CSSInterpolation;\n  notSelectedRoot: CSSInterpolation;\n  notSelected: CSSInterpolation;\n  selected: CSSInterpolation;\n} = {\n  root: {\n    display: \"flex\",\n    padding: \"0 30px\",\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n  positionSticky: {\n    position: \"sticky\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  positionFixed: {\n    position: \"fixed\",\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n  },\n  notSelectedRoot: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  selected: {\n    display: theme.scrollTo.horizontal.dotDisplay,\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n  },\n};\n"],"names":["styles","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";AAGO,MAAMA,SAOT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,MAAMC,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,MAAMC,SAASgB;AAAAA,EACxB;AACF;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["root", "positionSticky", "positionFixed", "notSelectedRoot", "notSelected", "selected"];
+const scrollToHorizontalClasses = getClasses(classKeys, "HvScrollToHorizontal");
+const scrollToHorizontalClasses$1 = scrollToHorizontalClasses;
+export {
+  scrollToHorizontalClasses$1 as default
+};
+//# sourceMappingURL=scrollToHorizontalClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollToHorizontalClasses.js","sources":["../../../../../src/components/ScrollTo/Horizontal/scrollToHorizontalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToHorizontalClasses {\n  root?: string;\n  positionSticky?: string;\n  positionFixed?: string;\n  notSelectedRoot?: string;\n  notSelected?: string;\n  selected?: string;\n}\n\nconst classKeys: string[] = [\n  \"root\",\n  \"positionSticky\",\n  \"positionFixed\",\n  \"notSelectedRoot\",\n  \"notSelected\",\n  \"selected\",\n];\n\nconst scrollToHorizontalClasses = getClasses<HvScrollToHorizontalClasses>(\n  classKeys,\n  \"HvScrollToHorizontal\"\n);\n\nexport default scrollToHorizontalClasses;\n"],"names":["classKeys","scrollToHorizontalClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAsB,CAC1B,QACA,kBACA,iBACA,mBACA,eACA,UAAU;AAGZ,MAAMC,4BAA4BC,WAChCF,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;"}