@hitachivantara/uikit-react-core 5.19.2 → 5.20.0

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 { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nconst { Enter } = keyboardCodes;\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 = ({\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}: HvScrollToHorizontalProps) => {\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, 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      <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 (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    <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: fade(\n            activeTheme?.colors.modes[selectedMode].atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        className,\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        }\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","css","cx","useClasses","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","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKey, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\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 = ({\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}: HvScrollToHorizontalProps) => {\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, 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      <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: fade(\n            activeTheme?.colors.modes[selectedMode].atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        className,\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        }\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","css","cx","useClasses","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","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","fade","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

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

@@ -10,11 +10,7 @@ const useUniqueId = require("../../../hooks/useUniqueId.cjs");
 const VerticalScrollListItem = require("./VerticalScrollListItem/VerticalScrollListItem.cjs");
 const useTheme = require("../../../hooks/useTheme.cjs");
 const setId = require("../../../utils/setId.cjs");
-const keyCheck = require("../../../utils/keyboardUtils/keyCheck.cjs");
-const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
-const {
-  Enter
-} = keyboardCodes.keyboardCodes;
+const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const HvScrollToVertical = ({
   id,
   defaultSelectedIndex = 0,
@@ -65,7 +61,7 @@ const HvScrollToVertical = ({
         onClick == null ? void 0 : onClick(event, index);
       },
       onKeyDown: (event) => {
-        if (keyCheck.isKeypress(event, Enter) === true) {
+        if (keyboardUtils.isKey(event, "Enter") === true) {
           handleSelection(event, option.value, index);
           onEnter == null ? void 0 : onEnter(event, index);
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useMemo } from \"react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes: classesProp,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  style,\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (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        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = fade(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(css({ backgroundColor }), className, classes.root, {\n        [classes.positionFixed]: position === \"fixed\",\n        [classes.positionAbsolute]: position === \"absolute\",\n      })}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","positionOffset","calculateOffset","length","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AA4DX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWT,WAAW;AAC7C,QAAA;AAAA,IAAEU;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,QAAYvB,IAAI,oBAAoB;AAEhD,QAAA,CAACwB,eAAeC,WAAW,IAAIC,wBACnCzB,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMuB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B5B,2CAAWwB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BxB,WAAAA,QAAQyB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOzB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM0B,OAAO7B,QAAQyB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB1C,IAAI2C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCzB,SAAUuB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,2CAAUuB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO/B,KAAK,MAAM,MAAM;AACrB+B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CxB,6CAAUsB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBtC,QAAQuC,MAAM;AAC/CC,QAAAA,kBAAkBC,UAAAA,QACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACEjD,WAAWU,GAAGD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GAAG3C,WAAWC,QAAQiD,MAAM;AAAA,MAC/D,CAACjD,QAAQkD,aAAa,GAAG9C,aAAa;AAAA,MACtC,CAACJ,QAAQmD,gBAAgB,GAAG/C,aAAa;AAAA,IAAA,CAC1C;AAAA,IACDE,OAAO;AAAA,MAAE8C,KAAM,cAAab;AAAAA,MAAqB,GAAGjC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIsB;AAAAA,IAAU,GACVP;AAAAA,IAAM8C,UAETtB;AAAAA,EAAAA,CACC;AAER;;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, isKey, setId } from \"@core/utils\";\nimport { useMemo } from \"react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes: classesProp,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  style,\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = fade(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(css({ backgroundColor }), className, classes.root, {\n        [classes.positionFixed]: position === \"fixed\",\n        [classes.positionAbsolute]: position === \"absolute\",\n      })}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;AAyEO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWT,WAAW;AAC7C,QAAA;AAAA,IAAEU;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,QAAYvB,IAAI,oBAAoB;AAEhD,QAAA,CAACwB,eAAeC,WAAW,IAAIC,wBACnCzB,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMuB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B5B,2CAAWwB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BxB,WAAAA,QAAQyB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOzB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM0B,OAAO7B,QAAQyB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB1C,IAAI2C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCzB,SAAUuB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,2CAAUuB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CxB,6CAAUsB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBtC,QAAQuC,MAAM;AAC/CC,QAAAA,kBAAkBC,UAAAA,QACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACEjD,WAAWU,GAAGD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GAAG3C,WAAWC,QAAQiD,MAAM;AAAA,MAC/D,CAACjD,QAAQkD,aAAa,GAAG9C,aAAa;AAAA,MACtC,CAACJ,QAAQmD,gBAAgB,GAAG/C,aAAa;AAAA,IAAA,CAC1C;AAAA,IACDE,OAAO;AAAA,MAAE8C,KAAM,cAAab;AAAAA,MAAqB,GAAGjC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIsB;AAAAA,IAAU,GACVP;AAAAA,IAAM8C,UAETtB;AAAAA,EAAAA,CACC;AAER;;;"}

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

@@ -9,8 +9,7 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const multiSelectionEventHandler = require("../../utils/multiSelectionEventHandler.cjs");
 const setId = require("../../utils/setId.cjs");
-const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
-const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const getValueFromSelectedChildren = (children, multiple) => {
@@ -69,14 +68,10 @@ const HvSelectionList = ({
   }, [children, multiple, value]);
   const selectionAnchor = React.useRef(void 0);
   const listContainer = React.useRef(null);
-  const {
-    ArrowUp,
-    ArrowDown
-  } = keyboardCodes.keyboardCodes;
   React.useEffect(() => {
     const handleMeta = (event) => {
       const tempArray = [];
-      if (keyCheck.isKeypress(event, ArrowUp) && event.shiftKey && listContainer.current.contains(event.target) || keyCheck.isKeypress(event, ArrowDown) && event.shiftKey && listContainer.current.contains(event.target)) {
+      if (keyboardUtils.isKey(event, "ArrowUp") && event.shiftKey && listContainer.current.contains(event.target) || keyboardUtils.isKey(event, "ArrowDown") && event.shiftKey && listContainer.current.contains(event.target)) {
         selectedState.forEach((isSelected, i) => {
           if (i === event.target.value - 1) {
             if (!isSelected) {
@@ -93,7 +88,7 @@ const HvSelectionList = ({
     return () => {
       window.removeEventListener("keyup", handleMeta);
     };
-  }, [allValues, selectedState, setValue, ArrowUp, ArrowDown]);
+  }, [allValues, selectedState, setValue]);
   const onChildChangeInterceptor = React.useCallback((index, childOnClick, evt) => {
     childOnClick == null ? void 0 : childOnClick(evt);
     if (!readOnly && !disabled) {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport {\n  isKeypress,\n  keyboardCodes,\n  setId,\n  multiSelectionEventHandler,\n} from \"@core/utils\";\nimport {\n  StyledListContainer,\n  StyledFormElement,\n  StyledLabel,\n  StyledInfoMessage,\n  StyledError,\n} from \"./SelectionList.styles\";\nimport { HvFormStatus } from \"../Forms/FormElement\";\nimport selectionListClasses, {\n  HvSelectionListClasses,\n} from \"./selectionListClasses\";\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: ReactNode,\n  multiple: boolean\n) => {\n  const selectedValues = React.Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  value: valueProp,\n  defaultValue,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n  orientation = \"vertical\",\n  multiple = false,\n  singleSelectionToggle = false,\n  ...others\n}: HvSelectionListProps) => {\n  const elementId = useUniqueId(id, \"hvselectionlist\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    React.Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listContainer = useRef<any>(null);\n\n  const { ArrowUp, ArrowDown } = keyboardCodes;\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKeypress(event, ArrowUp) &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target)) ||\n        (isKeypress(event, ArrowDown) &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue, ArrowUp, ArrowDown]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return React.Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return React.cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, selectionListClasses.root, classes?.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(selectionListClasses.label, classes?.label)}\n        />\n      )}\n      {description && (\n        <StyledInfoMessage\n          id={setId(elementId, \"description\")}\n          className={clsx(\n            selectionListClasses.description,\n            classes?.description\n          )}\n        >\n          {description}\n        </StyledInfoMessage>\n      )}\n\n      <StyledListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.listbox,\n          selectionListClasses.listbox,\n          orientation === \"vertical\" &&\n            clsx(selectionListClasses.vertical, classes?.vertical),\n          orientation === \"horizontal\" &&\n            clsx(selectionListClasses.horizontal, classes?.horizontal),\n          validationState === \"invalid\" &&\n            clsx(selectionListClasses.invalid, classes?.invalid)\n        )}\n        ref={listContainer}\n        $orientation={orientation}\n        $validationState={validationState}\n        {...others}\n      >\n        {modifiedChildren}\n      </StyledListContainer>\n\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(selectionListClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","ArrowUp","ArrowDown","keyboardCodes","useEffect","handleMeta","event","tempArray","isKeypress","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","StyledFormElement","clsx","selectionListClasses","root","_jsx","StyledLabel","StyledInfoMessage","StyledListContainer","interactive","condensed","join","trim","listbox","vertical","horizontal","invalid","ref","$orientation","$validationState","StyledError","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"SelectionList.cjs","sources":["../../../../src/components/SelectionList/SelectionList.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useEffect,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { isKey, setId, multiSelectionEventHandler } from \"@core/utils\";\nimport {\n  StyledListContainer,\n  StyledFormElement,\n  StyledLabel,\n  StyledInfoMessage,\n  StyledError,\n} from \"./SelectionList.styles\";\nimport { HvFormStatus } from \"../Forms/FormElement\";\nimport selectionListClasses, {\n  HvSelectionListClasses,\n} from \"./selectionListClasses\";\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: ReactNode,\n  multiple: boolean\n) => {\n  const selectedValues = React.Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  value: valueProp,\n  defaultValue,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n  orientation = \"vertical\",\n  multiple = false,\n  singleSelectionToggle = false,\n  ...others\n}: HvSelectionListProps) => {\n  const elementId = useUniqueId(id, \"hvselectionlist\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    React.Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listContainer = useRef<any>(null);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listContainer.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return React.Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return React.cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, selectionListClasses.root, classes?.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(selectionListClasses.label, classes?.label)}\n        />\n      )}\n      {description && (\n        <StyledInfoMessage\n          id={setId(elementId, \"description\")}\n          className={clsx(\n            selectionListClasses.description,\n            classes?.description\n          )}\n        >\n          {description}\n        </StyledInfoMessage>\n      )}\n\n      <StyledListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.listbox,\n          selectionListClasses.listbox,\n          orientation === \"vertical\" &&\n            clsx(selectionListClasses.vertical, classes?.vertical),\n          orientation === \"horizontal\" &&\n            clsx(selectionListClasses.horizontal, classes?.horizontal),\n          validationState === \"invalid\" &&\n            clsx(selectionListClasses.invalid, classes?.invalid)\n        )}\n        ref={listContainer}\n        $orientation={orientation}\n        $validationState={validationState}\n        {...others}\n      >\n        {modifiedChildren}\n      </StyledListContainer>\n\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(selectionListClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","multiple","selectedValues","React","Children","toArray","map","child","childIsControlled","props","selected","undefined","childIsSelected","defaultSelected","value","filter","v","HvSelectionList","id","classes","className","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","status","statusMessage","ariaErrorMessage","orientation","singleSelectionToggle","others","elementId","useUniqueId","setValue","useControlled","validationState","setValidationState","validationMessage","allValues","selectedState","useMemo","childValues","childSelectedState","forEach","i","childValue","indexOf","selectionAnchor","useRef","listContainer","useEffect","handleMeta","event","tempArray","isKey","shiftKey","current","contains","target","isSelected","push","addEventListener","removeEventListener","onChildChangeInterceptor","useCallback","index","childOnClick","evt","newValue","multiSelectionEventHandler","length","modifiedChildren","cloneElement","role","onClick","canShowError","errorMessageId","setId","listId","StyledFormElement","clsx","selectionListClasses","root","_jsx","StyledLabel","StyledInfoMessage","StyledListContainer","interactive","condensed","join","trim","listbox","vertical","horizontal","invalid","ref","$orientation","$validationState","StyledError","disableBorder","error"],"mappings":";;;;;;;;;;;;;;AAgFA,MAAMA,+BAA+BA,CACnCC,UACAC,aACG;AACGC,QAAAA,iBAAiBC,uBAAMC,SAASC,QAAQL,QAAQ,EACnDM,IAAI,CAACC,UAAe;;AACbC,UAAAA,sBAAoBD,oCAAOE,UAAPF,mBAAcG,cAAaC;AACrD,UAAMC,kBACJL,SAASC,qBACLD,WAAME,UAANF,mBAAaG,YACbH,WAAME,UAANF,mBAAaM;AAEZD,WAAAA,kBAAkBL,+BAAOE,MAAMK,QAAQH;AAAAA,EAAAA,CAC/C,EACAI,OAAQC,CAAAA,MAAMA,MAAML,MAAS;AAEzBV,SAAAA,WAAWC,iBAAiBA,iDAAiB;AACtD;AAQO,MAAMe,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACApB;AAAAA,EACAqB;AAAAA,EACAP,OAAOQ;AAAAA,EACPC;AAAAA,EACAC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC;AAAAA,EACA,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC;AAAAA,EACA,oBAAoBC;AAAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,qBAAqBC;AAAAA,EACrBC,cAAc;AAAA,EACdnC,WAAW;AAAA,EACXoC,wBAAwB;AAAA,EACxB,GAAGC;AACiB,MAAM;AACpBC,QAAAA,YAAYC,YAAAA,QAAYtB,IAAI,iBAAiB;AAEnD,QAAM,CAACJ,OAAO2B,QAAQ,IAAIC,cAAAA,cACxBpB,WACAC,iBAAiBZ,SACbY;AAAAA;AAAAA;AAAAA,IAGA,MAAMxB,6BAA6BC,UAAUC,QAAQ;AAAA,GAC3D;AAEA,QAAM,CAAC0C,iBAAiBC,kBAAkB,IAAIF,cAAAA,cAC5CT,QACA,SACF;AAEA,QAAM,CAACY,iBAAiB,IAAIH,cAAAA,cAAcR,eAAe,UAAU;AAEnE,QAAM,CAACY,WAAWC,aAAa,IAAIC,cAAQ,MAAM;AAC/C,UAAMC,cAAqB,CAAA;AAC3B,UAAMC,qBAAgC,CAAA;AAEtC/C,mBAAAA,QAAMC,SAASC,QAAQL,QAAQ,EAAEmD,QAAQ,CAAC5C,OAAY6C,MAAc;;AAC5DC,YAAAA,cAAa9C,oCAAOE,UAAPF,mBAAcO;AACjC,YAAMF,kBAAkBX,WACpBa,MAAMwC,QAAQD,UAAU,MAAM,KAC9BvC,UAAUuC;AAEdJ,kBAAYG,CAAC,IAAIC;AACjBH,yBAAmBE,CAAC,IAAIxC;AAAAA,IAAAA,CACzB;AAEM,WAAA,CAACqC,aAAaC,kBAAkB;AAAA,EACtC,GAAA,CAAClD,UAAUC,UAAUa,KAAK,CAAC;AAExByC,QAAAA,kBAAkBC,MAAAA,OAAO7C,MAAS;AAElC8C,QAAAA,gBAAgBD,aAAY,IAAI;AAEtCE,QAAAA,UAAU,MAAM;AACRC,UAAAA,aAAaA,CAACC,UAAyB;AAC3C,YAAMC,YAAmB,CAAA;AAEtBC,UAAAA,oBAAMF,OAAO,SAAS,KACrBA,MAAMG,YACNN,cAAcO,QAAQC,SAASL,MAAMM,MAAM,KAC5CJ,cAAMF,MAAAA,OAAO,WAAW,KACvBA,MAAMG,YACNN,cAAcO,QAAQC,SAASL,MAAMM,MAAM,GAC7C;AACcf,sBAAAA,QAAQ,CAACgB,YAAYf,MAAM;AACvC,cAAIA,MAAOQ,MAAMM,OAAepD,QAAQ,GAAG;AACzC,gBAAI,CAACqD,YAAY;AACLC,wBAAAA,KAAKtB,UAAUM,CAAC,CAAC;AAAA,YAC7B;AAAA,qBACSe,YAAY;AACXC,sBAAAA,KAAKtB,UAAUM,CAAC,CAAC;AAAA,UAC7B;AAAA,QAAA,CACD;AACDX,iBAASoB,SAAS;AAAA,MACpB;AAAA,IAAA;AAEKQ,WAAAA,iBAAiB,SAASV,UAAU;AAE3C,WAAO,MAAM;AACJW,aAAAA,oBAAoB,SAASX,UAAU;AAAA,IAAA;AAAA,EAE/C,GAAA,CAACb,WAAWC,eAAeN,QAAQ,CAAC;AAEvC,QAAM8B,2BAA2BC,MAAAA,YAC/B,CACEC,OACAC,cACAC,QACG;AACHD,iDAAeC;AAEX,QAAA,CAAClD,YAAY,CAACC,UAAU;AACtBkD,UAAAA;AACJ,UAAI3E,UAAU;AACZ2E,mBAAWC,2BAAAA,QACTF,KACAF,OACAlB,iBACAT,WACAC,eACApC,MACF;AAAA,MAAA,OACK;AACLiE,mBACEvC,yBAAyBU,cAAc0B,KAAK,IACxC,OACA3B,UAAU2B,KAAK;AAAA,MACvB;AAEAzC,2CAAW2C,KAAKC;AAEhBnC,eAAS,MAAM;AAGTjB,YAAAA,YAAYoD,SAASE,WAAW,GAAG;AACrClC,6BAAmB,SAAS;AAAA,QAAA,OACvB;AACLA,6BAAmB,OAAO;AAAA,QAC5B;AAEOgC,eAAAA;AAAAA,MAAAA,CACR;AAAA,IACH;AAAA,EAEF,GAAA,CACE9B,WACApB,UACAzB,UACA+B,UACAP,UACAD,UACAuB,eACAH,oBACAH,UACAJ,uBACAkB,eAAe,CAEnB;AAEMwB,QAAAA,mBAAmB/B,MAAAA,QAAQ,MAAM;AACrC,WAAO7C,eAAAA,QAAMC,SAASE,IAAIN,UAAU,CAACO,OAAY6C,MAAc;;AACvDxC,YAAAA,kBAAkBmC,cAAcK,CAAC;AAEhCjD,aAAAA,eAAAA,QAAM6E,aAAazE,OAAO;AAAA,QAC/B0E,MAAM;AAAA,QACNvE,UAAUE;AAAAA,QACVsE,SAAUP,CACRJ,QAAAA;;AAAAA,0CAAyBnB,IAAG7C,MAAAA,+BAAOE,UAAPF,gBAAAA,IAAc2E,SAASP,GAAG;AAAA;AAAA,QACxDjD,UAAUA,cAAYnB,oCAAOE,UAAPF,mBAAcmB;AAAAA,MAAAA,CACrC;AAAA,IAAA,CACF;AAAA,KACA,CAAC1B,UAAU0B,UAAU6C,0BAA0BxB,aAAa,CAAC;AAM1DoC,QAAAA,eACJhD,oBAAoB,SAClBF,WAAWtB,UAAauB,kBAAkBvB,UACzCsB,WAAWtB,UAAaa;AAE7B,QAAM4D,iBAAiBD,eACnBE,MAAAA,MAAM9C,WAAW,OAAO,IACxBJ;AAEJ,QAAMmD,SAAU3D,SAAS0D,MAAAA,MAAM9C,WAAW,SAAS,KAAM;AAEzD,yCACGgD,qBAAAA,mBAAiB;AAAA,IAChBrE;AAAAA,IACAG;AAAAA,IACAY,QAAQU;AAAAA,IACRjB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACAL,WAAWoE,KAAKpE,KAAAA,WAAWqE,qBAAqBC,QAAAA,MAAMvE,mCAASuE,IAAI;AAAA,IAAE1F,UAEpE2B,CAAAA,SACCgE,2BAAAA,IAACC,kCAAW;AAAA,MACV1E,IAAImE,MAAAA,MAAM9C,WAAW,OAAO;AAAA,MAC5BZ;AAAAA,MACAP,WAAWoE,KAAAA,KAAKC,qBAAAA,QAAqB9D,OAAOR,mCAASQ,KAAK;AAAA,IAAA,CAC3D,GAEFG,eACC6D,2BAAAA,IAACE,wCAAiB;AAAA,MAChB3E,IAAImE,MAAAA,MAAM9C,WAAW,aAAa;AAAA,MAClCnB,WAAWoE,KAAAA,KACTC,qBAAAA,QAAqB3D,aACrBX,mCAASW,WACX;AAAA,MAAE9B,UAED8B;AAAAA,IAAAA,CACgB,GAGrB6D,2BAAAA,IAACG,0CAAmB;AAAA,MAClB5E,IAAIoE;AAAAA,MACJS,aAAW;AAAA,MACXC,WAAS;AAAA,MACTf,MAAK;AAAA,MACL,wBAAsBhF,YAAYU;AAAAA,MAClC,cAAYiB;AAAAA,MACZ,mBACE,CAACD,SAAS0D,YAAM9C,WAAW,OAAO,GAAGV,cAAc,EAChDoE,KAAK,GAAG,EACRC,UAAUvF;AAAAA,MAEf,gBAAcgC,oBAAoB,YAAY,OAAOhC;AAAAA,MACrD,qBACEgC,oBAAoB,YAAYyC,iBAAiBzE;AAAAA,MAEnD,oBACE,CAACmB,eAAeuD,YAAM9C,WAAW,aAAa,GAAGR,eAAe,EAC7DkE,KAAK,GAAG,EACRC,UAAUvF;AAAAA,MAEfS,WAAWoE,KAAAA,KACTrE,mCAASgF,SACTV,qBAAAA,QAAqBU,SACrB/D,gBAAgB,cACdoD,KAAKC,KAAAA,qBAAAA,QAAqBW,UAAUjF,mCAASiF,QAAQ,GACvDhE,gBAAgB,gBACdoD,KAAKC,KAAAA,qBAAAA,QAAqBY,YAAYlF,mCAASkF,UAAU,GAC3D1D,oBAAoB,aAClB6C,KAAKC,KAAAA,qBAAAA,QAAqBa,SAASnF,mCAASmF,OAAO,CACvD;AAAA,MACAC,KAAK9C;AAAAA,MACL+C,cAAcpE;AAAAA,MACdqE,kBAAkB9D;AAAAA,MAAgB,GAC9BL;AAAAA,MAAMtC,UAET+E;AAAAA,IAAAA,CACkB,GAEpBI,gBACCQ,2BAAAA,IAACe,kCAAW;AAAA,MACVxF,IAAImE,MAAAA,MAAM9C,WAAW,OAAO;AAAA,MAC5BoE,eAAa;AAAA,MACbvF,WAAWoE,KAAAA,KAAKC,qBAAAA,QAAqBmB,OAAOzF,mCAASyF,KAAK;AAAA,MAAE5G,UAE3D6C;AAAAA,IAAAA,CACU,CACd;AAAA,EAAA,CACgB;AAEvB;;"}

package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const actionsGenericClasses = require("../../ActionsGeneric/actionsGenericClasses.cjs");
+const ActionsGeneric_styles = require("../../ActionsGeneric/ActionsGeneric.styles.cjs");
+require("react");
+require("@hitachivantara/uikit-react-icons");
+require("@emotion/react/jsx-runtime");
 const classes = require("../../../utils/classes.cjs");
 const {
   useClasses,
@@ -46,7 +49,7 @@ const {
   action: {
     textAlign: "right",
     marginLeft: uikitStyles.theme.snackbar.actionMarginLeft,
-    [`& .${actionsGenericClasses.default.button}`]: {
+    [`& .${ActionsGeneric_styles.staticClasses.button}`]: {
       borderColor: uikitStyles.theme.colors.base_dark,
       color: uikitStyles.theme.colors.base_dark,
       "&:hover": {

package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContentWrapper.styles.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\nimport { actionsGenericClasses } from \"@core/components\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbar-Content\",\n  {\n    root: {\n      width: \"310px\",\n      minHeight: \"52px\",\n      maxHeight: \"92px\",\n      padding: theme.space.xs,\n      boxShadow: \"none\",\n    },\n    success: {\n      backgroundColor: theme.colors.positive_20,\n    },\n    error: {\n      backgroundColor: theme.colors.negative_20,\n    },\n    default: {\n      backgroundColor: theme.colors.neutral_20,\n    },\n    warning: {\n      backgroundColor: theme.colors.warning_20,\n    },\n    message: {\n      padding: 0,\n      width: \"100%\",\n    },\n    messageSpan: {\n      display: \"flex\",\n      alignItems: \"center\",\n      minHeight: \"32px\",\n    },\n    messageText: {\n      ...(theme.typography.body as CSSProperties),\n      padding: `0 ${theme.space.xs}`,\n      color: theme.colors.base_dark,\n      fontFamily: theme.fontFamily.body,\n      maxHeight: \"72px\",\n      wordBreak: \"break-word\",\n    },\n    action: {\n      textAlign: \"right\",\n      marginLeft: theme.snackbar.actionMarginLeft,\n      [`& .${actionsGenericClasses.button}`]: {\n        borderColor: theme.colors.base_dark,\n        color: theme.colors.base_dark,\n        \"&:hover\": {\n          borderColor: theme.colors.base_dark,\n        },\n      },\n    },\n    iconVariant: {},\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","marginLeft","snackbar","actionMarginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,YAAAA,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,YAAAA,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,YAAAA,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACX,GAAIlB,YAAAA,MAAMmB,WAAWC;AAAAA,IACrBrB,SAAU,KAAIC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BmB,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,IACpBC,YAAYvB,YAAAA,MAAMuB,WAAWH;AAAAA,IAC7BtB,WAAW;AAAA,IACX0B,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXC,YAAY3B,YAAAA,MAAM4B,SAASC;AAAAA,IAC3B,CAAE,MAAKC,8BAAsBC,QAAQ,GAAG;AAAA,MACtCC,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC1BD,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,MACpB,WAAW;AAAA,QACTU,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAW,aAAa,CAAC;AAChB,CACF;;;"}
+{"version":3,"file":"SnackbarContentWrapper.styles.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\nimport { actionsGenericClasses } from \"@core/components\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbar-Content\",\n  {\n    root: {\n      width: \"310px\",\n      minHeight: \"52px\",\n      maxHeight: \"92px\",\n      padding: theme.space.xs,\n      boxShadow: \"none\",\n    },\n    success: {\n      backgroundColor: theme.colors.positive_20,\n    },\n    error: {\n      backgroundColor: theme.colors.negative_20,\n    },\n    default: {\n      backgroundColor: theme.colors.neutral_20,\n    },\n    warning: {\n      backgroundColor: theme.colors.warning_20,\n    },\n    message: {\n      padding: 0,\n      width: \"100%\",\n    },\n    messageSpan: {\n      display: \"flex\",\n      alignItems: \"center\",\n      minHeight: \"32px\",\n    },\n    messageText: {\n      ...(theme.typography.body as CSSProperties),\n      padding: `0 ${theme.space.xs}`,\n      color: theme.colors.base_dark,\n      fontFamily: theme.fontFamily.body,\n      maxHeight: \"72px\",\n      wordBreak: \"break-word\",\n    },\n    action: {\n      textAlign: \"right\",\n      marginLeft: theme.snackbar.actionMarginLeft,\n      [`& .${actionsGenericClasses.button}`]: {\n        borderColor: theme.colors.base_dark,\n        color: theme.colors.base_dark,\n        \"&:hover\": {\n          borderColor: theme.colors.base_dark,\n        },\n      },\n    },\n    iconVariant: {},\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","marginLeft","snackbar","actionMarginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;;;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,YAAAA,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,YAAAA,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,YAAAA,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACX,GAAIlB,YAAAA,MAAMmB,WAAWC;AAAAA,IACrBrB,SAAU,KAAIC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BmB,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,IACpBC,YAAYvB,YAAAA,MAAMuB,WAAWH;AAAAA,IAC7BtB,WAAW;AAAA,IACX0B,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXC,YAAY3B,YAAAA,MAAM4B,SAASC;AAAAA,IAC3B,CAAE,MAAKC,oCAAsBC,QAAQ,GAAG;AAAA,MACtCC,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC1BD,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,MACpB,WAAW;AAAA,QACTU,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAW,aAAa,CAAC;AAChB,CACF;;;"}

package/dist/cjs/components/TagsInput/TagsInput.cjs

@@ -12,8 +12,7 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useIsMounted = require("../../hooks/useIsMounted.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
-const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
-const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
+const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
 const HvTagsInput = ({
@@ -167,10 +166,10 @@ const HvTagsInput = ({
     suggestionClearHandler();
   };
   const onSuggestionKeyDown = (event) => {
-    if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
+    if (keyboardUtils.isKey(event, "Esc")) {
       suggestionClearHandler();
       focusInput();
-    } else if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Tab)) {
+    } else if (keyboardUtils.isKey(event, "Tab")) {
       suggestionClearHandler();
     }
   };

package/dist/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\nimport {\n  HvBaseProps,\n  HvTagSuggestion,\n  HvValidationMessages,\n} from \"@core/types\";\nimport { useControlled, useIsMounted, useUniqueId } from \"@core/hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTagProps } from \"../Tag\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = ({\n  classes,\n  className,\n  id,\n  name,\n  value: valueProp,\n  defaultValue = [],\n  readOnly = false,\n  disabled = false,\n  required = false,\n  label: textAreaLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onAdd,\n  onDelete,\n  onBlur,\n  onFocus,\n  placeholder,\n  hideCounter = false,\n  middleCountLabel = \"/\",\n  maxTagsQuantity,\n  autoFocus = false,\n  resizable = true,\n  inputProps = {},\n  countCharProps = {},\n  multiline = false,\n  status,\n  statusMessage,\n  validationMessages,\n  commitTagOn = [\"Enter\"],\n  commitOnBlur = false,\n  suggestionListCallback,\n  ...others\n}: HvTagsInputProps) => {\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvTagSuggestion[] | null\n  >(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\n      // TODO Replace with ref\n      const listEl = document.getElementById(\n        setId(elementId, \"suggestions-list\") || \"\"\n      );\n      return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n    },\n    [elementId]\n  );\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = useCallback(() => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  }, [isMounted]);\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = useCallback(\n    (val) => {\n      const suggestionsArray = suggestionListCallback?.(val);\n      if (suggestionsArray?.[0]?.label) {\n        setSuggestionValues(suggestionsArray);\n      } else {\n        suggestionClearHandler();\n      }\n    },\n    [suggestionClearHandler, suggestionListCallback]\n  );\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.Tab)) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 &&\n                    clsx(\n                      tagsInputClasses.tagInputRootEmpty,\n                      classes?.tagInputRootEmpty\n                    )\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledDescription","StyledCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","StyledTagsList","tagsList","error","singleLine","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","onKeyDown","onClick","ref","map","t","otherProps","StyledListItem","tabIndex","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","deleteButtonProps","$selected","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","$isTagSelected","StyledInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","StyledError","disableBorder"],"mappings":"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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\nimport {\n  HvBaseProps,\n  HvTagSuggestion,\n  HvValidationMessages,\n} from \"@core/types\";\nimport { useControlled, useIsMounted, useUniqueId } from \"@core/hooks\";\nimport { isKey, setId } from \"@core/utils\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTagProps } from \"../Tag\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = ({\n  classes,\n  className,\n  id,\n  name,\n  value: valueProp,\n  defaultValue = [],\n  readOnly = false,\n  disabled = false,\n  required = false,\n  label: textAreaLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onAdd,\n  onDelete,\n  onBlur,\n  onFocus,\n  placeholder,\n  hideCounter = false,\n  middleCountLabel = \"/\",\n  maxTagsQuantity,\n  autoFocus = false,\n  resizable = true,\n  inputProps = {},\n  countCharProps = {},\n  multiline = false,\n  status,\n  statusMessage,\n  validationMessages,\n  commitTagOn = [\"Enter\"],\n  commitOnBlur = false,\n  suggestionListCallback,\n  ...others\n}: HvTagsInputProps) => {\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvTagSuggestion[] | null\n  >(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\n      // TODO Replace with ref\n      const listEl = document.getElementById(\n        setId(elementId, \"suggestions-list\") || \"\"\n      );\n      return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n    },\n    [elementId]\n  );\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = useCallback(() => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  }, [isMounted]);\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = useCallback(\n    (val) => {\n      const suggestionsArray = suggestionListCallback?.(val);\n      if (suggestionsArray?.[0]?.label) {\n        setSuggestionValues(suggestionsArray);\n      } else {\n        suggestionClearHandler();\n      }\n    },\n    [suggestionClearHandler, suggestionListCallback]\n  );\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 &&\n                    clsx(\n                      tagsInputClasses.tagInputRootEmpty,\n                      classes?.tagInputRootEmpty\n                    )\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledDescription","StyledCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","StyledTagsList","tagsList","error","singleLine","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","onKeyDown","onClick","ref","map","t","otherProps","StyledListItem","tabIndex","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","deleteButtonProps","$selected","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","$isTagSelected","StyledInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","StyledError","disableBorder"],"mappings":"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"}

package/dist/cjs/components/TimePicker/TimePicker.styles.cjs

@@ -5,7 +5,7 @@ const classes = require("../../utils/classes.cjs");
 const {
   useClasses,
   staticClasses
-} = classes.createClasses("HvTimerPicker", {
+} = classes.createClasses("HvTimePicker", {
   root: {
     position: "relative"
   },

package/dist/cjs/components/TimePicker/TimePicker.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.styles.cjs","sources":["../../../../src/components/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimerPicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    marginBottom: 6,\n    display: \"block\",\n  },\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.secondary_60,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    backgroundColor: theme.colors.atmo1,\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing([\"xs\", 0]),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","labelContainer","display","alignItems","label","marginBottom","description","placeholder","gap","placeholderDisabled","color","theme","colors","secondary_60","dropdownHeader","dropdownHeaderOpen","dropdownHeaderInvalid","border","negative","dropdownPanel","icon","timePopperContainer","backgroundColor","atmo1","zIndex","flexDirection","justifyContent","padding","spacing","userSelect","minWidth","error"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EAEAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,cAAc;AAAA,IACdH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EAEdC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,KAAK;AAAA,EACP;AAAA,EACAC,qBAAqB;AAAA,IACnBC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EAEAC,gBAAgB,CAAC;AAAA,EACjBC,oBAAoB,CAAC;AAAA,EACrBC,uBAAuB;AAAA,IACrBC,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IAClC,WAAW;AAAA,MACTD,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IACpC;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAEhBC,MAAM,CAAC;AAAA,EAEPC,qBAAqB;AAAA,IACnBC,iBAAiBX,YAAAA,MAAMC,OAAOW;AAAAA,IAC9BC,QAAQ;AAAA,IACRtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBvB,YAAY;AAAA,IACZwB,SAAShB,YAAAA,MAAMiB,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChCC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ;AAAA,EAEAC,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"TimePicker.styles.cjs","sources":["../../../../src/components/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimePicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    marginBottom: 6,\n    display: \"block\",\n  },\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.secondary_60,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    backgroundColor: theme.colors.atmo1,\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing([\"xs\", 0]),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","labelContainer","display","alignItems","label","marginBottom","description","placeholder","gap","placeholderDisabled","color","theme","colors","secondary_60","dropdownHeader","dropdownHeaderOpen","dropdownHeaderInvalid","border","negative","dropdownPanel","icon","timePopperContainer","backgroundColor","atmo1","zIndex","flexDirection","justifyContent","padding","spacing","userSelect","minWidth","error"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EAEAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,cAAc;AAAA,IACdH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EAEdC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,KAAK;AAAA,EACP;AAAA,EACAC,qBAAqB;AAAA,IACnBC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EAEAC,gBAAgB,CAAC;AAAA,EACjBC,oBAAoB,CAAC;AAAA,EACrBC,uBAAuB;AAAA,IACrBC,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IAClC,WAAW;AAAA,MACTD,QAAS,aAAYN,YAAAA,MAAMC,OAAOM;AAAAA,IACpC;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAEhBC,MAAM,CAAC;AAAA,EAEPC,qBAAqB;AAAA,IACnBC,iBAAiBX,YAAAA,MAAMC,OAAOW;AAAAA,IAC9BC,QAAQ;AAAA,IACRtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBvB,YAAY;AAAA,IACZwB,SAAShB,YAAAA,MAAMiB,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChCC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ;AAAA,EAEAC,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

@@ -43,7 +43,7 @@ const HvTooltip = React.forwardRef((props, ref) => {
     title,
     PopperProps: {
       sx: Tooltip_styles.popperSx(useSingle),
-      container: document.getElementById(containerId || rootId || "") || document.body
+      container: typeof window !== "undefined" ? document.getElementById(containerId || rootId || "") || document.body : void 0
     },
     ...others,
     children

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  Fade,\n  Tooltip as MuiTooltip,\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useTheme } from \"@core/hooks\";\nimport { popperSx } from \"./Tooltip.styles\";\nimport tooltipClasses, { HvTooltipClasses } from \"./tooltipClasses\";\n\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = props;\n\n  const { rootId } = useTheme();\n\n  return (\n    <MuiTooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle\n          ? clsx(tooltipClasses.tooltip, classes?.tooltip)\n          : clsx(tooltipClasses.tooltipMulti, classes?.tooltipMulti),\n        popper: clsx(tooltipClasses.popper, classes?.popper),\n      }}\n      title={title}\n      PopperProps={{\n        sx: popperSx(useSingle),\n        container:\n          document.getElementById(containerId || rootId || \"\") || document.body,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiTooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","rootId","useTheme","MuiTooltip","undefined","tooltip","clsx","tooltipClasses","tooltipMulti","popper","PopperProps","sx","popperSx","container","document","getElementById","body"],"mappings":";;;;;;;;;AA2DO,MAAMA,YAAYC,MAAAA,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EACDf,IAAAA;AAEE,QAAA;AAAA,IAAEgB;AAAAA,MAAWC,SAAS,SAAA;AAE5B,wCACGC,SAAAA,SAAU;AAAA,IACTjB;AAAAA,IACAG,MAAMA,QAAQe;AAAAA,IACdd;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAE;AAAAA,IACAV;AAAAA,IACAC,SAAS;AAAA,MACPiB,SAASb,YACLc,KAAAA,KAAKC,eAAAA,QAAeF,SAASjB,mCAASiB,OAAO,IAC7CC,KAAKC,KAAAA,eAAAA,QAAeC,cAAcpB,mCAASoB,YAAY;AAAA,MAC3DC,QAAQH,KAAAA,KAAKC,eAAAA,QAAeE,QAAQrB,mCAASqB,MAAM;AAAA,IACrD;AAAA,IACAf;AAAAA,IACAgB,aAAa;AAAA,MACXC,IAAIC,wBAASpB,SAAS;AAAA,MACtBqB,WACEC,SAASC,eAAehB,eAAeE,UAAU,EAAE,KAAKa,SAASE;AAAAA,IACrE;AAAA,IAAE,GACEhB;AAAAA,IAAMP;AAAAA,EAAAA,CAGA;AAEhB,CAAC;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  Fade,\n  Tooltip as MuiTooltip,\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useTheme } from \"@core/hooks\";\nimport { popperSx } from \"./Tooltip.styles\";\nimport tooltipClasses, { HvTooltipClasses } from \"./tooltipClasses\";\n\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = props;\n\n  const { rootId } = useTheme();\n\n  return (\n    <MuiTooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle\n          ? clsx(tooltipClasses.tooltip, classes?.tooltip)\n          : clsx(tooltipClasses.tooltipMulti, classes?.tooltipMulti),\n        popper: clsx(tooltipClasses.popper, classes?.popper),\n      }}\n      title={title}\n      PopperProps={{\n        sx: popperSx(useSingle),\n        container:\n          typeof window !== \"undefined\"\n            ? document.getElementById(containerId || rootId || \"\") ||\n              document.body\n            : undefined,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiTooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","rootId","useTheme","MuiTooltip","undefined","tooltip","clsx","tooltipClasses","tooltipMulti","popper","PopperProps","sx","popperSx","container","window","document","getElementById","body"],"mappings":";;;;;;;;;AA2DO,MAAMA,YAAYC,MAAAA,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EACDf,IAAAA;AAEE,QAAA;AAAA,IAAEgB;AAAAA,MAAWC,SAAS,SAAA;AAE5B,wCACGC,SAAAA,SAAU;AAAA,IACTjB;AAAAA,IACAG,MAAMA,QAAQe;AAAAA,IACdd;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAE;AAAAA,IACAV;AAAAA,IACAC,SAAS;AAAA,MACPiB,SAASb,YACLc,KAAAA,KAAKC,eAAAA,QAAeF,SAASjB,mCAASiB,OAAO,IAC7CC,KAAKC,KAAAA,eAAAA,QAAeC,cAAcpB,mCAASoB,YAAY;AAAA,MAC3DC,QAAQH,KAAAA,KAAKC,eAAAA,QAAeE,QAAQrB,mCAASqB,MAAM;AAAA,IACrD;AAAA,IACAf;AAAAA,IACAgB,aAAa;AAAA,MACXC,IAAIC,wBAASpB,SAAS;AAAA,MACtBqB,WACE,OAAOC,WAAW,cACdC,SAASC,eAAejB,eAAeE,UAAU,EAAE,KACnDc,SAASE,OACTb;AAAAA,IACR;AAAA,IAAE,GACEJ;AAAAA,IAAMP;AAAAA,EAAAA,CAGA;AAEhB,CAAC;;"}