@hitachivantara/uikit-react-core 5.91.1 → 5.91.3

package/dist/esm/Dropdown/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../../src/Dropdown/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownList\", {\n  rootList: {},\n  dropdownListContainer: {\n    overflow: \"auto\",\n    padding: 4,\n    margin: -4,\n    maxWidth: \"var(--maxW)\",\n    maxHeight: \"var(--maxH)\",\n  },\n  virtualized: {\n    maxWidth: \"inherit\",\n    maxHeight: \"inherit\",\n    overflow: \"inherit\",\n    padding: 0,\n  },\n  searchContainer: { marginBottom: theme.space.xs },\n  listBorderDown: {},\n  listContainer: { padding: theme.space.sm },\n  selectAllContainer: {},\n  selection: {},\n  selectAll: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,UAAU,CAAC;AAAA,EACX,uBAAuB;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EAChD,gBAAgB,CAAC;AAAA,EACjB,eAAe,EAAE,SAAS,MAAM,MAAM,GAAG;AAAA,EACzC,oBAAoB,CAAC;AAAA,EACrB,WAAW,CAAC;AAAA,EACZ,WAAW,CAAA;AACb,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../../src/Dropdown/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownList\", {\n  rootList: {},\n  dropdownListContainer: {\n    overflow: \"auto\",\n    padding: 4,\n    margin: -4,\n    maxWidth: \"var(--maxW)\",\n    maxHeight: \"var(--maxH)\",\n  },\n  virtualized: {\n    maxWidth: \"inherit\",\n    maxHeight: \"inherit\",\n    overflow: \"inherit\",\n    padding: 0,\n  },\n  searchContainer: { marginBottom: theme.space.xs },\n  listBorderDown: {},\n  listContainer: { padding: theme.space.sm },\n  selectAll: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,UAAU,CAAC;AAAA,EACX,uBAAuB;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EAChD,gBAAgB,CAAC;AAAA,EACjB,eAAe,EAAE,SAAS,MAAM,MAAM,GAAG;AAAA,EACzC,WAAW,CAAA;AACb,CAAC;"}

package/dist/esm/Dropdown/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/Dropdown/utils.tsx"],"sourcesContent":["import { HvListValue } from \"../List\";\nimport type { HvDropdownLabels } from \"./Dropdown\";\n\n/** Filter selected elements. */\nconst getSelected = (list: HvListValue[] = []) =>\n  list.filter((elem) => elem.selected);\n\n/** Checks if any element of the list is selected. */\nconst hasSelected = (list: HvListValue[]) => getSelected(list).length > 0;\n\n/** Gets the selection label according to selection. */\nconst getSelectionLabel = (\n  labels: HvDropdownLabels | undefined,\n  placeholder: string,\n  multiSelect: boolean,\n  list: HvListValue[] = [],\n) => {\n  const { select } = labels || {};\n  const selected = getSelected(list);\n\n  if (select) return { selected: select };\n\n  if (multiSelect) {\n    return {\n      selected: selected.length,\n      total: list.length,\n    };\n  }\n  return { selected: selected.length > 0 ? selected[0].label : placeholder };\n};\n\nexport { getSelectionLabel, getSelected, hasSelected };\n"],"names":[],"mappings":"AAIM,MAAA,cAAc,CAAC,OAAsB,OACzC,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ;AAMrC,MAAM,oBAAoB,CACxB,QACA,aACA,aACA,OAAsB,CAAA,MACnB;AACH,QAAM,EAAE,WAAW,UAAU,CAAC;AACxB,QAAA,WAAW,YAAY,IAAI;AAEjC,MAAI,OAAQ,QAAO,EAAE,UAAU,OAAO;AAEtC,MAAI,aAAa;AACR,WAAA;AAAA,MACL,UAAU,SAAS;AAAA,MACnB,OAAO,KAAK;AAAA,IACd;AAAA,EAAA;AAEK,SAAA,EAAE,UAAU,SAAS,SAAS,IAAI,SAAS,CAAC,EAAE,QAAQ,YAAY;AAC3E;"}
+{"version":3,"file":"utils.js","sources":["../../../src/Dropdown/utils.tsx"],"sourcesContent":["import { HvListValue } from \"../List\";\nimport type { HvDropdownLabels } from \"./Dropdown\";\n\n/** Filter selected elements. */\nexport const getSelected = (list: HvListValue[] = []) =>\n  list.filter((elem) => elem.selected);\n\n/** Gets the selection label according to selection. */\nexport const getSelectionLabel = (\n  labels: HvDropdownLabels | undefined,\n  placeholder: string,\n  multiSelect: boolean,\n  list: HvListValue[] = [],\n) => {\n  const { select } = labels || {};\n  const selected = getSelected(list);\n\n  if (select) return { selected: select };\n\n  if (multiSelect) {\n    return {\n      selected: selected.length,\n      total: list.length,\n    };\n  }\n  return { selected: selected.length > 0 ? selected[0].label : placeholder };\n};\n"],"names":[],"mappings":"AAIa,MAAA,cAAc,CAAC,OAAsB,OAChD,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ;AAG9B,MAAM,oBAAoB,CAC/B,QACA,aACA,aACA,OAAsB,CAAA,MACnB;AACH,QAAM,EAAE,WAAW,UAAU,CAAC;AACxB,QAAA,WAAW,YAAY,IAAI;AAEjC,MAAI,OAAQ,QAAO,EAAE,UAAU,OAAO;AAEtC,MAAI,aAAa;AACR,WAAA;AAAA,MACL,UAAU,SAAS;AAAA,MACnB,OAAO,KAAK;AAAA,IACd;AAAA,EAAA;AAEK,SAAA,EAAE,UAAU,SAAS,SAAS,IAAI,SAAS,CAAC,EAAE,QAAQ,YAAY;AAC3E;"}

package/dist/esm/FileUploader/Preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Preview } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactElement;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <Preview\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":[],"mappings":";;;;;;;AA0Ca,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,YAAU,MAAM;AACd,WAAO,MAAM;AACA,iBAAA;AAAA,IACb;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACV,CAAA;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIG,SAAA;AACT;"}
+{"version":3,"file":"Preview.js","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Preview } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactNode;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <Preview\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":[],"mappings":";;;;;;;AA0Ca,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,YAAU,MAAM;AACd,WAAO,MAAM;AACA,iBAAA;AAAA,IACb;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACV,CAAA;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIG,SAAA;AACT;"}

package/dist/esm/Focus/Focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\ninterface Focuses {\n  first: Element;\n  last: Element;\n  previous: Element;\n  next: Element;\n  fall: Element;\n  jump: Element;\n}\n\n/** @deprecated internal use only. this component has navigation issues. */\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\",\n          ),\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el: any, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\"),\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el: any) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt: any) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el: any) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child: any) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt: any) => {\n    // evt.currentTarget.classList.add(classes.focused);\n    classes.focused\n      .split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n    // add global class HvIsFocused as a marker\n    // not to be styled directly, only as helper in specific css queries\n    evt.currentTarget.classList.add(\"HvIsFocused\");\n    classes?.focus\n      ?.split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n  };\n\n  const removeFocusClass = () => {\n    getFocuses().forEach((element) => {\n      // element.classList.remove(classes.focused);\n      classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n      // remove the global class HvIsFocused\n      element.classList.remove(\"HvIsFocused\");\n      classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n    });\n  };\n\n  const onFocus = (evt: any) => {\n    addFocusClass(evt);\n    // give focus to child element if any focusable\n\n    childFocus?.focus?.();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt: any) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n    }\n  };\n\n  const focusAndUpdateIndex = (\n    nextFocus: Element,\n    previousFocus: any,\n    focusesList: Element[],\n  ) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (\n    currentFocusIndex: number,\n    jump: number,\n    listSize: number,\n  ) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n    currentFocusIndex: number,\n    jump: number,\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length,\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt: any) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt: any) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string),\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses: Focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump,\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt: any) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  return cloneElement(children, {\n    className: cx(\n      [classes.root, filterClass],\n      {\n        [classes.selected]: selected,\n        [classes.disabled]: disabledClass,\n        [classes.focusDisabled]: focusDisabled,\n      },\n      children.props.className,\n    ),\n    ref: config,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    onKeyUp,\n    selected,\n  });\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement<any>;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement | null>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\ninterface Focuses {\n  first: Element;\n  last: Element;\n  previous: Element;\n  next: Element;\n  fall: Element;\n  jump: Element;\n}\n\n/** @deprecated internal use only. this component has navigation issues. */\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\",\n          ),\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el: any, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\"),\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el: any) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt: any) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el: any) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child: any) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt: any) => {\n    // evt.currentTarget.classList.add(classes.focused);\n    classes.focused\n      .split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n    // add global class HvIsFocused as a marker\n    // not to be styled directly, only as helper in specific css queries\n    evt.currentTarget.classList.add(\"HvIsFocused\");\n    classes?.focus\n      ?.split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n  };\n\n  const removeFocusClass = () => {\n    getFocuses().forEach((element) => {\n      // element.classList.remove(classes.focused);\n      classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n      // remove the global class HvIsFocused\n      element.classList.remove(\"HvIsFocused\");\n      classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n    });\n  };\n\n  const onFocus = (evt: any) => {\n    addFocusClass(evt);\n    // give focus to child element if any focusable\n\n    childFocus?.focus?.();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt: any) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n    }\n  };\n\n  const focusAndUpdateIndex = (\n    nextFocus: Element,\n    previousFocus: any,\n    focusesList: Element[],\n  ) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (\n    currentFocusIndex: number,\n    jump: number,\n    listSize: number,\n  ) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n    currentFocusIndex: number,\n    jump: number,\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length,\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt: any) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt: any) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string),\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses: Focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump,\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt: any) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  return cloneElement(children, {\n    className: cx(\n      [classes.root, filterClass],\n      {\n        [classes.selected]: selected,\n        [classes.disabled]: disabledClass,\n        [classes.focusDisabled]: focusDisabled,\n      },\n      children.props.className,\n    ),\n    ref: config,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    onKeyUp,\n    selected,\n  });\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -34,7 +34,7 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const [editMode, setEditMode] = useState(false);
   const [cachedValue, setCachedValue] = useState(value);
-  const inputRef = useRef();
+  const inputRef = useRef(void 0);
   const { activeTheme } = useTheme();
   const [isOverflowing, setIsOverflowing] = useState(false);
   const typographyStyles = activeTheme?.typography[variant] || {};

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            inputRoot: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          endIcon={\n            <Edit\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement | undefined>(undefined);\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            inputRoot: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          endIcon={\n            <Edit\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}

package/dist/esm/Input/Input.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, cloneElement, isValidElement, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
-import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
+import { CloseXS, Search, Success } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
@@ -12,6 +12,7 @@ import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
+import { EyeIcon } from "./icons.js";
 import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
 import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
@@ -318,7 +319,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
             onClick: () => setRevealPassword((s) => !s),
             "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId(elementId, "input"),
-            icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {}),
+            icon: /* @__PURE__ */ jsx(EyeIcon, { selected: revealPassword }),
             tabIndex: 0,
             ...{ selected: revealPassword }
           }

package/dist/esm/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  CloseXS,\n  Preview,\n  PreviewOff,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  computeValidationType,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n} from \"../BaseInput/validations\";\nimport type { HvButtonBaseProps } from \"../ButtonBase\";\nimport {\n  HvAdornment,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n  isValid,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvValidationMessages {\n  /** The value when a validation fails. */\n  error?: string;\n  /** The message that appears when there are too many characters. */\n  maxCharError?: string;\n  /** The message that appears when there are too few characters. */\n  minCharError?: string;\n  /** The message that appears when the input is empty and required. */\n  requiredError?: string;\n  /** The message that appears when the input is value is incompatible with the expected type. */\n  typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n  id: string;\n  label: string;\n  value?: string;\n}\n\nexport interface HvInputProps<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n  > {\n  /** @inheritdoc */\n  name?: string;\n  /** @inheritdoc */\n  value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n  /** @inheritdoc */\n  defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** @inheritdoc */\n  disabled?: boolean;\n  /** @inheritdoc */\n  readOnly?: boolean;\n  /** @inheritdoc */\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 `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** @inheritdoc */\n  onChange?: (event: React.ChangeEvent<InputElement>, value: string) => void;\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when `type=\"search\"`).\n   */\n  onEnter?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity,\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n  /** The input type. */\n  type?: React.HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & Record<string, any>;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\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) => HvInputSuggestion[] | null;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /**\n   * Whether the suggestions should be triggered once the input is focused and not only when typing.\n   * @default false\n   * */\n  suggestOnFocus?: boolean;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** The label of the clear button. */\n  clearButtonLabel: \"Clear the text\",\n  /** The label of the reveal password button. */\n  revealPasswordButtonLabel: \"Reveal password\",\n  /** The tooltip of the reveal password button when the password is hidden. */\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  /** The tooltip of the reveal password button when the password is revealed. */\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  /** The label of the search button. */\n  searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: React.FocusEvent<any>,\n) {\n  return !!container?.contains(event.relatedTarget);\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\",\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = fixedForwardRef(function HvInput<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    enablePortal = false,\n    suggestOnFocus = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLDivElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const isEmptyValue = !inputRef.current?.value;\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ],\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation,\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages),\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps,\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event as any, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    onChange?.(event as any, newValue);\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(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, event.target.value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, event.target.value);\n  };\n\n  const getSuggestions = (li: number | null) => {\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\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    const { value } = event.currentTarget;\n\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event as any, value);\n    }\n\n    onKeyDown?.(event as any, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!onEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      // reset validation status to standBy (only when status is uncontrolled)\n      setValidationState(validationStates.standBy);\n\n      changeInputValue(inputRef.current, \"\");\n\n      // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n      if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n      else {\n        // we want to focus the input when clicked and not active\n        setTimeout(focusInput);\n      }\n    },\n    [canShowSuggestions, setValidationState, suggestOnFocus],\n  );\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (onEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) return null;\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={\n          onEnter &&\n          ((evt) => onEnter?.(evt as any, inputRef.current?.value ?? \"\"))\n        }\n        icon={<Search title={labels.searchButtonLabel} />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    onEnter,\n    validationState,\n    classes.adornmentButton,\n    labels.searchButtonLabel,\n  ]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) return null;\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          revealPassword\n            ? labels?.revealPasswordButtonClickToHideTooltip\n            : labels?.revealPasswordButtonClickToShowTooltip\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={() => setRevealPassword((s) => !s)}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n          tabIndex={0}\n          {...({ selected: revealPassword } satisfies HvButtonBaseProps)}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) return null;\n    if (!isValid(validationState)) return null;\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment)\n        ? cloneElement(endAdornment as React.ReactElement, {\n            className: cx(endAdornment.props.className, classes.icon),\n          })\n        : endAdornment,\n    [classes.icon, endAdornment, cx],\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    return (\n      <div className={classes.adornmentsBox}>\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className,\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={valueProp}\n        defaultValue={defaultValue}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          root: classes.inputRoot,\n          focused: classes.inputRootFocused,\n          disabled: classes.inputRootDisabled,\n          multiline: classes.inputRootMultiline,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n                ? setId(elementId, \"description\")\n                : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          onFocus: (event) => {\n            inputProps.onFocus?.(event);\n\n            // trigger suggestions when focusing the input\n            if (canShowSuggestions && suggestOnFocus) {\n              suggestionHandler(event.currentTarget.value);\n            }\n          },\n\n          onClick: (event) => {\n            inputProps.onClick?.(event);\n\n            // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n            if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n          },\n\n          ...inputProps,\n        }}\n        ref={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n            enablePortal={enablePortal}\n            popperProps={{ ref: suggestionsRef }}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvInput"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { CloseXS, Search, Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  computeValidationType,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n} from \"../BaseInput/validations\";\nimport type { HvButtonBaseProps } from \"../ButtonBase\";\nimport {\n  HvAdornment,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n  isValid,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { EyeIcon } from \"./icons\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvValidationMessages {\n  /** The value when a validation fails. */\n  error?: string;\n  /** The message that appears when there are too many characters. */\n  maxCharError?: string;\n  /** The message that appears when there are too few characters. */\n  minCharError?: string;\n  /** The message that appears when the input is empty and required. */\n  requiredError?: string;\n  /** The message that appears when the input is value is incompatible with the expected type. */\n  typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n  id: string;\n  label: string;\n  value?: string;\n}\n\nexport interface HvInputProps<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n  > {\n  /** @inheritdoc */\n  name?: string;\n  /** @inheritdoc */\n  value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n  /** @inheritdoc */\n  defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** @inheritdoc */\n  disabled?: boolean;\n  /** @inheritdoc */\n  readOnly?: boolean;\n  /** @inheritdoc */\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 `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** @inheritdoc */\n  onChange?: (event: React.ChangeEvent<InputElement>, value: string) => void;\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when `type=\"search\"`).\n   */\n  onEnter?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity,\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<InputElement>, value: string) => void;\n  /** The input type. */\n  type?: React.HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & Record<string, any>;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\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) => HvInputSuggestion[] | null;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /**\n   * Whether the suggestions should be triggered once the input is focused and not only when typing.\n   * @default false\n   * */\n  suggestOnFocus?: boolean;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** The label of the clear button. */\n  clearButtonLabel: \"Clear the text\",\n  /** The label of the reveal password button. */\n  revealPasswordButtonLabel: \"Reveal password\",\n  /** The tooltip of the reveal password button when the password is hidden. */\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  /** The tooltip of the reveal password button when the password is revealed. */\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  /** The label of the search button. */\n  searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: React.FocusEvent<any>,\n) {\n  return !!container?.contains(event.relatedTarget);\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\",\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = fixedForwardRef(function HvInput<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    enablePortal = false,\n    suggestOnFocus = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLDivElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const isEmptyValue = !inputRef.current?.value;\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ],\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation,\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages),\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps,\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event as any, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    onChange?.(event as any, newValue);\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(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, event.target.value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, event.target.value);\n  };\n\n  const getSuggestions = (li: number | null) => {\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\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    const { value } = event.currentTarget;\n\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event as any, value);\n    }\n\n    onKeyDown?.(event as any, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!onEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      // reset validation status to standBy (only when status is uncontrolled)\n      setValidationState(validationStates.standBy);\n\n      changeInputValue(inputRef.current, \"\");\n\n      // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n      if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n      else {\n        // we want to focus the input when clicked and not active\n        setTimeout(focusInput);\n      }\n    },\n    [canShowSuggestions, setValidationState, suggestOnFocus],\n  );\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (onEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) return null;\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={\n          onEnter &&\n          ((evt) => onEnter?.(evt as any, inputRef.current?.value ?? \"\"))\n        }\n        icon={<Search title={labels.searchButtonLabel} />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    onEnter,\n    validationState,\n    classes.adornmentButton,\n    labels.searchButtonLabel,\n  ]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) return null;\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          revealPassword\n            ? labels?.revealPasswordButtonClickToHideTooltip\n            : labels?.revealPasswordButtonClickToShowTooltip\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={() => setRevealPassword((s) => !s)}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={<EyeIcon selected={revealPassword} />}\n          tabIndex={0}\n          {...({ selected: revealPassword } satisfies HvButtonBaseProps)}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) return null;\n    if (!isValid(validationState)) return null;\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  // TODO: remove in v6. don't assume `endAdornment` must be an icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment)\n        ? cloneElement(endAdornment as React.ReactElement, {\n            className: cx(endAdornment.props.className, classes.icon),\n          })\n        : endAdornment,\n    [classes.icon, endAdornment, cx],\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    return (\n      <div className={classes.adornmentsBox}>\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className,\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={valueProp}\n        defaultValue={defaultValue}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          root: classes.inputRoot,\n          focused: classes.inputRootFocused,\n          disabled: classes.inputRootDisabled,\n          multiline: classes.inputRootMultiline,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n                ? setId(elementId, \"description\")\n                : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          onFocus: (event) => {\n            inputProps.onFocus?.(event);\n\n            // trigger suggestions when focusing the input\n            if (canShowSuggestions && suggestOnFocus) {\n              suggestionHandler(event.currentTarget.value);\n            }\n          },\n\n          onClick: (event) => {\n            inputProps.onClick?.(event);\n\n            // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n            if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n          },\n\n          ...inputProps,\n        }}\n        ref={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n            enablePortal={enablePortal}\n            popperProps={{ ref: suggestionsRef }}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvInput"],"mappings":"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"}

package/dist/esm/Input/Input.styles.js

@@ -15,7 +15,13 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
     justifyContent: "center",
     marginRight: 1
   },
-  icon: { width: "30px", height: "30px" },
+  icon: {
+    // TODO: review in v6 - don't assume/force size
+    ":has(svg)": {
+      width: "30px",
+      height: "30px"
+    }
+  },
   adornmentButton: {
     ":focus-visible,:hover": {
       backgroundColor: "transparent"

package/dist/esm/Input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.bgContainer,\n    boxShadow: `0px 8px 0px ${theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {},\n  inputRoot: {\n    \":is(:hover,:focus-within) $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {},\n  inputRootMultiline: { padding: 0 },\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,WAAW;AAAA,EACpD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: {\n    // TODO: review in v6 - don't assume/force size\n    \":has(svg)\": {\n      width: \"30px\",\n      height: \"30px\",\n    },\n  },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.bgContainer,\n    boxShadow: `0px 8px 0px ${theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {},\n  inputRoot: {\n    \":is(:hover,:focus-within) $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {},\n  inputRootMultiline: { padding: 0 },\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA;AAAA,IAEJ,aAAa;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,WAAW;AAAA,EACpD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,wCAAwC;AAAA,MACtC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,EAAE,SAAS,EAAE;AAAA;AAAA,EAEjC,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Input/icons.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { SvgBase } from "../icons.js";
+const EyeIcon = ({ selected }) => /* @__PURE__ */ jsxs(SvgBase, { viewBox: "0 0 16 16", style: { margin: 8 }, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3m5 0s-3.58 6-8 6-8-6-8-6 4-6 8-6 8 6 8 6m-1.2.03a22 22 0 0 0-2-2.32C11.01 3.94 9.35 3 8 3s-3 .93-4.77 2.68a22 22 0 0 0-2.02 2.35 18 18 0 0 0 1.85 2.28C4.25 11.53 6.08 13 8 13s3.73-1.45 4.91-2.67a18 18 0 0 0 1.88-2.3z" }),
+  /* @__PURE__ */ jsx(
+    "rect",
+    {
+      style: { transition: "width 0.2s ease" },
+      width: selected ? 20 : 0,
+      height: 1,
+      x: -2,
+      y: 8,
+      transform: "translate(-4 8) rotate(-45)"
+    }
+  )
+] });
+export {
+  EyeIcon
+};

package/dist/esm/Input/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":["../../../src/Input/icons.tsx"],"sourcesContent":["import { SvgBase } from \"../icons\";\n\nexport const EyeIcon = ({ selected }: { selected: boolean }) => (\n  <SvgBase viewBox=\"0 0 16 16\" style={{ margin: 8 }}>\n    <path d=\"M11 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3m5 0s-3.58 6-8 6-8-6-8-6 4-6 8-6 8 6 8 6m-1.2.03a22 22 0 0 0-2-2.32C11.01 3.94 9.35 3 8 3s-3 .93-4.77 2.68a22 22 0 0 0-2.02 2.35 18 18 0 0 0 1.85 2.28C4.25 11.53 6.08 13 8 13s3.73-1.45 4.91-2.67a18 18 0 0 0 1.88-2.3z\" />\n    <rect\n      style={{ transition: \"width 0.2s ease\" }}\n      width={selected ? 20 : 0}\n      height={1}\n      x={-2}\n      y={8}\n      transform=\"translate(-4 8) rotate(-45)\"\n    />\n  </SvgBase>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,UAAU,CAAC,EAAE,eACxB,qBAAC,SAAQ,EAAA,SAAQ,aAAY,OAAO,EAAE,QAAQ,KAC5C,UAAA;AAAA,EAAC,oBAAA,QAAA,EAAK,GAAE,4PAA4P,CAAA;AAAA,EACpQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,YAAY,kBAAkB;AAAA,MACvC,OAAO,WAAW,KAAK;AAAA,MACvB,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,MACH,WAAU;AAAA,IAAA;AAAA,EAAA;AACZ,EACF,CAAA;"}

package/dist/esm/MultiButton/MultiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Button variant to use when in `split` mode */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size when in `split` mode. */\n  size?: HvSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\n/**\n * Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.\n */\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: !split && vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        return cloneElement(child, {\n          key: index,\n          variant,\n          disabled: disabled || child.props.disabled,\n          size,\n          className: cx(classes.button, child.props.className, {\n            [classes.firstButton]: index === 0,\n            [classes.lastButton]: index === buttons.length - 1,\n            [classes.selected]: child.props.selected,\n          }),\n        });\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAC;AACrB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MAAA;AAAA,IACjB,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG,CAAC,SAAS;AAAA,UAC9B,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,QAAQ,QAAQ,MAAM,MAAM,WAAW;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG,MAAM,MAAM;AAAA,UACjC,CAAA;AAAA,QAAA,CACF;AAAA,MACF,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Button variant to use when in `split` mode */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size when in `split` mode. */\n  size?: HvSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\n/**\n * Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.\n */\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: React.ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: !split && vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        return cloneElement(child, {\n          key: index,\n          variant,\n          disabled: disabled || child.props.disabled,\n          size,\n          className: cx(classes.button, child.props.className, {\n            [classes.firstButton]: index === 0,\n            [classes.lastButton]: index === buttons.length - 1,\n            [classes.selected]: child.props.selected,\n          }),\n        });\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAA6B,CAAC;AAC3B,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MAAA;AAAA,IACjB,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG,CAAC,SAAS;AAAA,UAC9B,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,QAAQ,QAAQ,MAAM,MAAM,WAAW;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG,MAAM,MAAM;AAAA,UACjC,CAAA;AAAA,QAAA,CACF;AAAA,MACF,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Radio/Radio.styles.js

@@ -9,8 +9,11 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     alignItems: "center",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: theme.radii.base,
-    ":hover:not($disabled)": {
+    "&:hover:not($disabled)": {
       backgroundColor: theme.colors.bgHover
+    },
+    ":where(:has($label)) $radio": {
+      borderRadius: "inherit"
     }
   },
   invalidContainer: {},
@@ -18,6 +21,10 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" }
   },
+  focusVisible: {
+    backgroundColor: theme.colors.bgPageSecondary,
+    ...outlineStyles
+  },
   radio: {},
   invalidRadio: {},
   label: {
@@ -28,10 +35,6 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: {
-    backgroundColor: theme.colors.bgPageSecondary,
-    ...outlineStyles
-  },
   checked: {},
   semantic: {}
 });

package/dist/esm/Radio/Radio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    borderRadius: theme.radii.base,\n\n    \":hover:not($disabled)\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  invalidContainer: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.textDisabled, cursor: \"not-allowed\" },\n  },\n  radio: {},\n  invalidRadio: {},\n  label: {\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: {\n    backgroundColor: theme.colors.bgPageSecondary,\n    ...outlineStyles,\n  },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAE1B,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    borderRadius: theme.radii.base,\n\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n    \":where(:has($label)) $radio\": {\n      borderRadius: \"inherit\",\n    },\n  },\n  invalidContainer: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.textDisabled, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    backgroundColor: theme.colors.bgPageSecondary,\n    ...outlineStyles,\n  },\n  radio: {},\n  invalidRadio: {},\n  label: {\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAE1B,0BAA0B;AAAA,MACxB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,+BAA+B;AAAA,MAC7B,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/Table/renderers/DateColumnCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateColumnCell.js","sources":["../../../../src/Table/renderers/DateColumnCell.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport dayjs from \"dayjs\";\n\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\n\nexport interface HvDateColumnCellProp {\n  /** The date's text representation format. */\n  dateFormat?: string;\n  /** Date to render. */\n  date?: string;\n}\n\nexport const HvDateColumnCell = ({\n  date,\n  dateFormat,\n}: HvDateColumnCellProp): JSX.Element => {\n  const formattedDate = useMemo(() => {\n    if (date)\n      return dayjs(date).format(\n        dateFormat !== \"ISO8601\" ? dateFormat : undefined,\n      );\n    return \"—\";\n  }, [date, dateFormat]);\n\n  return <HvOverflowTooltip data={formattedDate} />;\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAAyC;AACjC,QAAA,gBAAgB,QAAQ,MAAM;AAC9B,QAAA;AACK,aAAA,MAAM,IAAI,EAAE;AAAA,QACjB,eAAe,YAAY,aAAa;AAAA,MAC1C;AACK,WAAA;AAAA,EAAA,GACN,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA,oBAAC,mBAAkB,EAAA,MAAM,cAAe,CAAA;AACjD;"}
+{"version":3,"file":"DateColumnCell.js","sources":["../../../../src/Table/renderers/DateColumnCell.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport dayjs from \"dayjs\";\n\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\n\nexport interface HvDateColumnCellProp {\n  /** The date's text representation format. */\n  dateFormat?: string;\n  /** Date to render. */\n  date?: string;\n}\n\nexport const HvDateColumnCell = ({\n  date,\n  dateFormat,\n}: HvDateColumnCellProp) => {\n  const formattedDate = useMemo(() => {\n    if (date)\n      return dayjs(date).format(\n        dateFormat !== \"ISO8601\" ? dateFormat : undefined,\n      );\n    return \"—\";\n  }, [date, dateFormat]);\n\n  return <HvOverflowTooltip data={formattedDate} />;\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,gBAAgB,QAAQ,MAAM;AAC9B,QAAA;AACK,aAAA,MAAM,IAAI,EAAE;AAAA,QACjB,eAAe,YAAY,aAAa;AAAA,MAC1C;AACK,WAAA;AAAA,EAAA,GACN,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA,oBAAC,mBAAkB,EAAA,MAAM,cAAe,CAAA;AACjD;"}

package/dist/esm/Table/renderers/ProgressColumnCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressColumnCell.js","sources":["../../../../src/Table/renderers/ProgressColumnCell.tsx"],"sourcesContent":["import MuiLinearProgress from \"@mui/material/LinearProgress\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { useClasses } = createClasses(\"HvProgressColumnCell\", {\n  root: { display: \"flex\", width: \"100%\" },\n  linearProgressContainer: { width: \"100%\", margin: \"auto\" },\n  linearProgress: {\n    height: 8,\n  },\n  linearProgressRoot: { backgroundColor: theme.colors.border },\n  linearProgressColorPrimary: {\n    backgroundColor: theme.colors.border,\n  },\n  linearProgressBarColorPrimary: {\n    backgroundColor: theme.colors.positive,\n  },\n  linearProgressBarColorSecondary: {\n    backgroundColor: theme.colors.text,\n  },\n});\n\nexport interface HvProgressColumnCellProp {\n  /** Current value of the bar. */\n  partial: number;\n  /** Maximum value of the bar. */\n  total: number;\n  /** The color of the bar. */\n  color?: \"primary\" | \"secondary\";\n  \"aria-labelledby\"?: string;\n}\n\nconst normalizeProgressBar = (value: number, max: number) => {\n  return max > 0 ? Math.floor((value * 100) / max) : 0;\n};\n\nexport const HvProgressColumnCell = ({\n  partial,\n  total,\n  color = \"primary\",\n  \"aria-labelledby\": ariaLabelledBy,\n}: HvProgressColumnCellProp): JSX.Element => {\n  const { classes } = useClasses();\n\n  const percentage = normalizeProgressBar(partial, total);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.linearProgressContainer}>\n        <MuiLinearProgress\n          className={classes.linearProgress}\n          classes={{\n            root: classes.linearProgressRoot,\n            colorPrimary: classes.linearProgressColorPrimary,\n            barColorPrimary: classes.linearProgressBarColorPrimary,\n            barColorSecondary: classes.linearProgressBarColorSecondary,\n          }}\n          color={color}\n          variant=\"determinate\"\n          value={percentage}\n          aria-labelledby={ariaLabelledBy}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,EAAE,WAAA,IAAe,cAAc,wBAAwB;AAAA,EAC3D,MAAM,EAAE,SAAS,QAAQ,OAAO,OAAO;AAAA,EACvC,yBAAyB,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACzD,gBAAgB;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA,EAC3D,4BAA4B;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iCAAiC;AAAA,IAC/B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;AAYD,MAAM,uBAAuB,CAAC,OAAe,QAAgB;AAC3D,SAAO,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,mBAAmB;AACrB,MAA6C;AACrC,QAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,QAAA,aAAa,qBAAqB,SAAS,KAAK;AAGpD,SAAA,oBAAC,SAAI,WAAW,QAAQ,MACtB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,yBACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,cAAc,QAAQ;AAAA,QACtB,iBAAiB,QAAQ;AAAA,QACzB,mBAAmB,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,mBAAiB;AAAA,IAAA;AAAA,KAErB,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"ProgressColumnCell.js","sources":["../../../../src/Table/renderers/ProgressColumnCell.tsx"],"sourcesContent":["import MuiLinearProgress from \"@mui/material/LinearProgress\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { useClasses } = createClasses(\"HvProgressColumnCell\", {\n  root: { display: \"flex\", width: \"100%\" },\n  linearProgressContainer: { width: \"100%\", margin: \"auto\" },\n  linearProgress: {\n    height: 8,\n  },\n  linearProgressRoot: { backgroundColor: theme.colors.border },\n  linearProgressColorPrimary: {\n    backgroundColor: theme.colors.border,\n  },\n  linearProgressBarColorPrimary: {\n    backgroundColor: theme.colors.positive,\n  },\n  linearProgressBarColorSecondary: {\n    backgroundColor: theme.colors.text,\n  },\n});\n\nexport interface HvProgressColumnCellProp {\n  /** Current value of the bar. */\n  partial: number;\n  /** Maximum value of the bar. */\n  total: number;\n  /** The color of the bar. */\n  color?: \"primary\" | \"secondary\";\n  \"aria-labelledby\"?: string;\n}\n\nconst normalizeProgressBar = (value: number, max: number) => {\n  return max > 0 ? Math.floor((value * 100) / max) : 0;\n};\n\nexport const HvProgressColumnCell = ({\n  partial,\n  total,\n  color = \"primary\",\n  \"aria-labelledby\": ariaLabelledBy,\n}: HvProgressColumnCellProp) => {\n  const { classes } = useClasses();\n\n  const percentage = normalizeProgressBar(partial, total);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.linearProgressContainer}>\n        <MuiLinearProgress\n          className={classes.linearProgress}\n          classes={{\n            root: classes.linearProgressRoot,\n            colorPrimary: classes.linearProgressColorPrimary,\n            barColorPrimary: classes.linearProgressBarColorPrimary,\n            barColorSecondary: classes.linearProgressBarColorSecondary,\n          }}\n          color={color}\n          variant=\"determinate\"\n          value={percentage}\n          aria-labelledby={ariaLabelledBy}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,EAAE,WAAA,IAAe,cAAc,wBAAwB;AAAA,EAC3D,MAAM,EAAE,SAAS,QAAQ,OAAO,OAAO;AAAA,EACvC,yBAAyB,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACzD,gBAAgB;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA,EAC3D,4BAA4B;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iCAAiC;AAAA,IAC/B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;AAYD,MAAM,uBAAuB,CAAC,OAAe,QAAgB;AAC3D,SAAO,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,mBAAmB;AACrB,MAAgC;AACxB,QAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,QAAA,aAAa,qBAAqB,SAAS,KAAK;AAGpD,SAAA,oBAAC,SAAI,WAAW,QAAQ,MACtB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,yBACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,cAAc,QAAQ;AAAA,QACtB,iBAAiB,QAAQ;AAAA,QACzB,mBAAmB,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,mBAAiB;AAAA,IAAA;AAAA,KAErB,EACF,CAAA;AAEJ;"}

package/dist/esm/Table/renderers/SwitchColumnCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchColumnCell.js","sources":["../../../../src/Table/renderers/SwitchColumnCell.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch, HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvTypography } from \"../../Typography\";\n\nconst switchStyle = {\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  marginLeft: \"10px\",\n};\n\nconst { useClasses } = createClasses(\"HvSwitchColumnCell\", {\n  switchNo: switchStyle,\n  switchYes: switchStyle,\n});\n\nexport interface HvSwitchColumnCellProp {\n  /** Whether the switch is checked or not. */\n  checked: boolean;\n  /** The switch label. */\n  value: number | string | undefined;\n  /** The value of the switch. */\n  switchLabel: string;\n  /** The right switch label. */\n  falseLabel?: string;\n  /** The left switch label. */\n  trueLabel?: string;\n  /** Extra props to be passed to the switch. */\n  switchProps?: HvBaseSwitchProps;\n}\n\nexport const HvSwitchColumnCell = ({\n  checked,\n  value,\n  switchLabel,\n  falseLabel,\n  trueLabel,\n  switchProps,\n}: HvSwitchColumnCellProp): JSX.Element => {\n  const { classes } = useClasses();\n\n  return (\n    <>\n      {falseLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchNo}\n        >\n          {falseLabel}\n        </HvTypography>\n      )}\n      <HvBaseSwitch\n        checked={checked}\n        value={value}\n        {...switchProps}\n        inputProps={{ \"aria-label\": switchLabel, ...switchProps?.inputProps }}\n      />\n      {trueLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchYes}\n        >\n          {trueLabel}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EACzD,UAAU;AAAA,EACV,WAAW;AACb,CAAC;AAiBM,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2C;AACnC,QAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,cAAc,QACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,YAAY,EAAE,cAAc,aAAa,GAAG,aAAa,WAAW;AAAA,MAAA;AAAA,IACtE;AAAA,IACC,aAAa,QACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
+{"version":3,"file":"SwitchColumnCell.js","sources":["../../../../src/Table/renderers/SwitchColumnCell.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch, HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvTypography } from \"../../Typography\";\n\nconst switchStyle = {\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  marginLeft: \"10px\",\n};\n\nconst { useClasses } = createClasses(\"HvSwitchColumnCell\", {\n  switchNo: switchStyle,\n  switchYes: switchStyle,\n});\n\nexport interface HvSwitchColumnCellProp {\n  /** Whether the switch is checked or not. */\n  checked: boolean;\n  /** The switch label. */\n  value: number | string | undefined;\n  /** The value of the switch. */\n  switchLabel: string;\n  /** The right switch label. */\n  falseLabel?: string;\n  /** The left switch label. */\n  trueLabel?: string;\n  /** Extra props to be passed to the switch. */\n  switchProps?: HvBaseSwitchProps;\n}\n\nexport const HvSwitchColumnCell = ({\n  checked,\n  value,\n  switchLabel,\n  falseLabel,\n  trueLabel,\n  switchProps,\n}: HvSwitchColumnCellProp) => {\n  const { classes } = useClasses();\n\n  return (\n    <>\n      {falseLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchNo}\n        >\n          {falseLabel}\n        </HvTypography>\n      )}\n      <HvBaseSwitch\n        checked={checked}\n        value={value}\n        {...switchProps}\n        inputProps={{ \"aria-label\": switchLabel, ...switchProps?.inputProps }}\n      />\n      {trueLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchYes}\n        >\n          {trueLabel}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EACzD,UAAU;AAAA,EACV,WAAW;AACb,CAAC;AAiBM,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AACtB,QAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,cAAc,QACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,YAAY,EAAE,cAAc,aAAa,GAAG,aAAa,WAAW;AAAA,MAAA;AAAA,IACtE;AAAA,IACC,aAAa,QACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}