@hitachivantara/uikit-react-core 5.58.1 → 5.58.3

package/dist/cjs/FilterGroup/FilterGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.cjs","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.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        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","useLabels","jsxs","HvFormElement","jsx","HvLabel","setId","HvInfoMessage","HvFilterGroupProvider","HvFilterGroupContent","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"FilterGroup.cjs","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.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        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","useLabels","jsxs","HvFormElement","jsx","HvLabel","setId","HvInfoMessage","HvFilterGroupProvider","HvFilterGroupContent","HvWarningText"],"mappings":"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"}

package/dist/cjs/Focus/Focus.cjs

@@ -7,8 +7,6 @@ const browser = require("../utils/browser.cjs");
 const ConditionalWrapper = require("../utils/ConditionalWrapper.cjs");
 const utils = require("./utils.cjs");
 const Focus_styles = require("./Focus.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
 const HvFocus = ({
   classes: classesProp,
   children,
@@ -311,7 +309,7 @@ const HvFocus = ({
     childrenToWrap,
     showFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.falseFocus })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper.ConditionalWrapper, { condition: useFalseFocus, wrapper: focusWrapper, children: React__default.default.cloneElement(children, {
+  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper.ConditionalWrapper, { condition: useFalseFocus, wrapper: focusWrapper, children: React.cloneElement(children, {
     className: cx(
       [classes.root, filterClass],
       {

package/dist/cjs/Focus/Focus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.cjs","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import React, { RefObject, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\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?: 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\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  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\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, 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) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\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) => {\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) => 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) => {\n    if (!useFalseFocus) {\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\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\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\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\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      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\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,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump\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 = (evt, focuses, focusesList) => {\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) => {\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) => {\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 = {\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) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {React.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    </ConditionalWrapper>\n  );\n};\n"],"names":["useState","useClasses","staticClasses","getFocusableChildren","setFocusTo","isOneOfKeys","isKey","isBrowser","jsx","ConditionalWrapper","React"],"mappings":"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"}
+{"version":3,"file":"Focus.cjs","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\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\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  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\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, 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) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\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) => {\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) => 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) => {\n    if (!useFalseFocus) {\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\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\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\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\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      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\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,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump\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 = (evt, focuses, focusesList) => {\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) => {\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) => {\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 = {\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) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {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    </ConditionalWrapper>\n  );\n};\n"],"names":["useState","useClasses","staticClasses","getFocusableChildren","setFocusTo","isOneOfKeys","isKey","isBrowser","jsx","ConditionalWrapper"],"mappings":"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"}

package/dist/cjs/Forms/Adornment/Adornment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Adornment.cjs","sources":["../../../../src/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { useContext, forwardRef, MouseEventHandler, ForwardedRef } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormStatus,\n} from \"../FormElement\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(\n  (\n    {\n      id,\n      classes: classesProp,\n      className,\n      icon,\n      showWhen = undefined,\n      onClick,\n      isVisible = undefined,\n      ...others\n    },\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const { elementStatus = \"\" } = useContext(HvFormElementContext);\n\n    const { input } = useContext(HvFormElementDescriptorsContext);\n\n    const displayIcon =\n      isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n    const isClickable = !!onClick;\n\n    return isClickable ? (\n      <button\n        id={id}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        type=\"button\"\n        tabIndex={-1}\n        aria-controls={input?.[0]?.id}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentButton,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        onClick={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        onKeyDown={noop}\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </button>\n    ) : (\n      <div\n        id={id}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentIcon,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        role=\"presentation\"\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useClasses","useContext","HvFormElementContext","HvFormElementDescriptorsContext","jsx"],"mappings":";;;;;;;AAYA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAcA,MAAA;AAAA,EAIzB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAIC,4BAAW,WAAW;AAE9C,UAAM,EAAE,gBAAgB,GAAG,IAAIC,iBAAWC,mBAAoB,oBAAA;AAE9D,UAAM,EAAE,MAAA,IAAUD,MAAA,WAAWE,8BAA+B,+BAAA;AAE5D,UAAM,cACJ,cAAc,aAAa,UAAa,kBAAkB;AAEtD,UAAA,cAAc,CAAC,CAAC;AAEtB,WAAO,cACLC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,QAC3B,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,QAC7C,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAACA,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA,IAGtCA,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAACA,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1C;AACF;;;"}
+{"version":3,"file":"Adornment.cjs","sources":["../../../../src/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { useContext, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormStatus,\n} from \"../FormElement\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(\n  (\n    {\n      id,\n      classes: classesProp,\n      className,\n      icon,\n      showWhen = undefined,\n      onClick,\n      isVisible = undefined,\n      ...others\n    },\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const { elementStatus = \"\" } = useContext(HvFormElementContext);\n\n    const { input } = useContext(HvFormElementDescriptorsContext);\n\n    const displayIcon =\n      isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n    const isClickable = !!onClick;\n\n    return isClickable ? (\n      <button\n        id={id}\n        ref={ref as React.ForwardedRef<HTMLButtonElement>}\n        type=\"button\"\n        tabIndex={-1}\n        aria-controls={input?.[0]?.id}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentButton,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        onClick={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        onKeyDown={noop}\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </button>\n    ) : (\n      <div\n        id={id}\n        ref={ref as React.ForwardedRef<HTMLDivElement>}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentIcon,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        role=\"presentation\"\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useClasses","useContext","HvFormElementContext","HvFormElementDescriptorsContext","jsx"],"mappings":";;;;;;;AAYA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAcA,MAAA;AAAA,EAIzB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAIC,4BAAW,WAAW;AAE9C,UAAM,EAAE,gBAAgB,GAAG,IAAIC,iBAAWC,mBAAoB,oBAAA;AAE9D,UAAM,EAAE,MAAA,IAAUD,MAAA,WAAWE,8BAA+B,+BAAA;AAE5D,UAAM,cACJ,cAAc,aAAa,UAAa,kBAAkB;AAEtD,UAAA,cAAc,CAAC,CAAC;AAEtB,WAAO,cACLC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,QAC3B,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,QAC7C,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAACA,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA,IAGtCA,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAACA,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1C;AACF;;;"}

package/dist/cjs/Forms/FormElement/FormElement.cjs

@@ -24,7 +24,7 @@ const HvFormElement = (props) => {
     ...others
   } = useDefaultProps.useDefaultProps("HvFormElement", props);
   const { classes, cx } = FormElement_styles.useClasses(classesProp);
-  const elementId = useUniqueId.useUniqueId(id, "hvformelement");
+  const elementId = useUniqueId.useUniqueId(id);
   const contextValue = React.useMemo(
     () => ({
       elementId,

package/dist/cjs/Forms/FormElement/FormElement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.cjs","sources":["../../../../src/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvformelement\");\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":["useDefaultProps","useClasses","useUniqueId","useMemo","findDescriptors","jsx","HvFormElementContextProvider","HvFormElementValueContextProvider","HvFormElementDescriptorsContextProvider"],"mappings":";;;;;;;;;;;AAiEa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAExC,QAAA,YAAYC,YAAAA,YAAY,IAAI,eAAe;AAEjD,QAAM,eAAeC,MAAA;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,UAAU,WAAW,MAAM,UAAU,UAAU,MAAM;AAAA,EAAA;AAGlD,QAAA,cAAcA,MAAAA,QAAQ,MAAMC,UAAAA,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAGrE,SAAAC,2BAAAA,IAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAAA,2BAAA,IAACC,mDAA6B,OAAO,cACnC,UAACD,2BAAA,IAAAE,wBAAA,mCAAA,EAAkC,OACjC,UAAAF,2BAAAA,IAACG,8BAAAA,yCAAwC,EAAA,OAAO,aAC7C,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,cAAc,kBAAkB;;;"}
+{"version":3,"file":"FormElement.cjs","sources":["../../../../src/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":["useDefaultProps","useClasses","useUniqueId","useMemo","findDescriptors","jsx","HvFormElementContextProvider","HvFormElementValueContextProvider","HvFormElementDescriptorsContextProvider"],"mappings":";;;;;;;;;;;AAiEa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAExC,QAAA,YAAYC,wBAAY,EAAE;AAEhC,QAAM,eAAeC,MAAA;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,UAAU,WAAW,MAAM,UAAU,UAAU,MAAM;AAAA,EAAA;AAGlD,QAAA,cAAcA,MAAAA,QAAQ,MAAMC,UAAAA,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAGrE,SAAAC,2BAAAA,IAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAAA,2BAAA,IAACC,mDAA6B,OAAO,cACnC,UAACD,2BAAA,IAAAE,wBAAA,mCAAA,EAAkC,OACjC,UAAAF,2BAAAA,IAACG,8BAAAA,yCAAwC,EAAA,OAAO,aAC7C,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,cAAc,kBAAkB;;;"}

package/dist/cjs/Forms/Suggestions/Suggestions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.cjs","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport MuiPopper from \"@mui/material/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport {\n  HvClickOutsideEvent,\n  useClickOutside,\n} from \"../../hooks/useClickOutside\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvSelectionList } from \"../../SelectionList\";\n\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible. */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: (event: HvClickOutsideEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  const [isOpen, setIsOpen] = useState(expanded);\n\n  useClickOutside(ref, (event) => {\n    setIsOpen(false);\n    onClose?.(event);\n  });\n\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <MuiPopper\n        open={isOpen}\n        disablePortal\n        anchorEl={anchorEl}\n        className={classes.popper}\n      >\n        <HvSelectionList\n          className={classes.list}\n          id={setId(localId, \"list\")}\n          onChange={onSuggestionSelected}\n        >\n          {suggestionValues?.map((item, i) => {\n            const itemKey = item.id || setId(\"item\", i);\n\n            return (\n              <HvListItem\n                key={itemKey}\n                value={item}\n                disabled={item.disabled || undefined}\n              >\n                {item.label}\n              </HvListItem>\n            );\n          })}\n        </HvSelectionList>\n      </MuiPopper>\n    </div>\n  );\n});\n"],"names":["forwardRef","useClasses","useContext","HvFormElementContext","setId","useRef","useForkRef","useState","useClickOutside","useEffect","jsx","MuiPopper","HvSelectionList","HvListItem"],"mappings":";;;;;;;;;;;;;;AAkDO,MAAM,gBAAgBA,MAAA,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAcC,MAAA,WAAWC,mBAAoB,oBAAA;AACrD,QAAM,UAAU,MAAMC,MAAM,MAAA,WAAW,aAAa;AAE9C,QAAA,MAAMC,aAAuB,IAAI;AACjC,QAAA,YAAYC,MAAAA,WAAW,KAAK,MAAM;AAExC,QAAM,CAAC,QAAQ,SAAS,IAAIC,eAAS,QAAQ;AAE7BC,kCAAA,KAAK,CAAC,UAAU;AAC9B,cAAU,KAAK;AACf,cAAU,KAAK;AAAA,EAAA,CAChB;AAEDC,QAAAA,UAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAAA,2BAAA;AAAA,QAACC,mBAAA;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,eAAa;AAAA,UACb;AAAA,UACA,WAAW,QAAQ;AAAA,UAEnB,UAAAD,2BAAA;AAAA,YAACE,cAAA;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,IAAIR,MAAAA,MAAM,SAAS,MAAM;AAAA,cACzB,UAAU;AAAA,cAET,UAAkB,kBAAA,IAAI,CAAC,MAAM,MAAM;AAClC,sBAAM,UAAU,KAAK,MAAMA,MAAAA,MAAM,QAAQ,CAAC;AAGxC,uBAAAM,2BAAA;AAAA,kBAACG,SAAA;AAAA,kBAAA;AAAA,oBAEC,OAAO;AAAA,oBACP,UAAU,KAAK,YAAY;AAAA,oBAE1B,UAAK,KAAA;AAAA,kBAAA;AAAA,kBAJD;AAAA,gBAAA;AAAA,cAKP,CAEH;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;"}
+{"version":3,"file":"Suggestions.cjs","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\n\nimport MuiPopper from \"@mui/material/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport {\n  HvClickOutsideEvent,\n  useClickOutside,\n} from \"../../hooks/useClickOutside\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvSelectionList } from \"../../SelectionList\";\n\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible. */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: (event: HvClickOutsideEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  const [isOpen, setIsOpen] = useState(expanded);\n\n  useClickOutside(ref, (event) => {\n    setIsOpen(false);\n    onClose?.(event);\n  });\n\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <MuiPopper\n        open={isOpen}\n        disablePortal\n        anchorEl={anchorEl}\n        className={classes.popper}\n      >\n        <HvSelectionList\n          className={classes.list}\n          id={setId(localId, \"list\")}\n          onChange={onSuggestionSelected}\n        >\n          {suggestionValues?.map((item, i) => {\n            const itemKey = item.id || setId(\"item\", i);\n\n            return (\n              <HvListItem\n                key={itemKey}\n                value={item}\n                disabled={item.disabled || undefined}\n              >\n                {item.label}\n              </HvListItem>\n            );\n          })}\n        </HvSelectionList>\n      </MuiPopper>\n    </div>\n  );\n});\n"],"names":["forwardRef","useClasses","useContext","HvFormElementContext","setId","useRef","useForkRef","useState","useClickOutside","useEffect","jsx","MuiPopper","HvSelectionList","HvListItem"],"mappings":";;;;;;;;;;;;;;AA4CO,MAAM,gBAAgBA,MAAA,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAcC,MAAA,WAAWC,mBAAoB,oBAAA;AACrD,QAAM,UAAU,MAAMC,MAAM,MAAA,WAAW,aAAa;AAE9C,QAAA,MAAMC,aAAuB,IAAI;AACjC,QAAA,YAAYC,MAAAA,WAAW,KAAK,MAAM;AAExC,QAAM,CAAC,QAAQ,SAAS,IAAIC,eAAS,QAAQ;AAE7BC,kCAAA,KAAK,CAAC,UAAU;AAC9B,cAAU,KAAK;AACf,cAAU,KAAK;AAAA,EAAA,CAChB;AAEDC,QAAAA,UAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAAA,2BAAA;AAAA,QAACC,mBAAA;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,eAAa;AAAA,UACb;AAAA,UACA,WAAW,QAAQ;AAAA,UAEnB,UAAAD,2BAAA;AAAA,YAACE,cAAA;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,IAAIR,MAAAA,MAAM,SAAS,MAAM;AAAA,cACzB,UAAU;AAAA,cAET,UAAkB,kBAAA,IAAI,CAAC,MAAM,MAAM;AAClC,sBAAM,UAAU,KAAK,MAAMA,MAAAA,MAAM,QAAQ,CAAC;AAGxC,uBAAAM,2BAAA;AAAA,kBAACG,SAAA;AAAA,kBAAA;AAAA,oBAEC,OAAO;AAAA,oBACP,UAAU,KAAK,YAAY;AAAA,oBAE1B,UAAK,KAAA;AAAA,kBAAA;AAAA,kBAJD;AAAA,gBAAA;AAAA,cAKP,CAEH;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;"}

package/dist/cjs/Header/Navigation/MenuBar/MenuBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.cjs","sources":["../../../../../src/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, BarProps, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type?: BarProps[\"type\"];\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["useDefaultProps","jsx","Bar","HvHeaderMenuItem"],"mappings":";;;;;;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,mBAAmB,KAAK;AAE1C,SAAAC,2BAAA,IAACC,IAAI,KAAA,EAAA,MAAY,MAAY,SAAmB,GAAG,QAChD,UAAA,KAAK,IAAI,CAAC,SACTD,2BAAA;AAAA,IAACE,SAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;;"}
+{"version":3,"file":"MenuBar.cjs","sources":["../../../../../src/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, BarProps, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type?: BarProps[\"type\"];\n  onClick?: (\n    event: React.MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...others}>\n      {data.map((item) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["useDefaultProps","jsx","Bar","HvHeaderMenuItem"],"mappings":";;;;;;AAqBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,mBAAmB,KAAK;AAE1C,SAAAC,2BAAA,IAACC,IAAI,KAAA,EAAA,MAAY,MAAY,SAAmB,GAAG,QAChD,UAAA,KAAK,IAAI,CAAC,SACTD,2BAAA;AAAA,IAACE,SAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;;"}

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"../../../Typography\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n  node: HvHeaderNavigationItemProp\n): { href?: string; target?: string } => {\n  let href: string | undefined;\n  let target: string | undefined;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n          // Fix for a possible bug in playwright where, even though hidden from screen readers and not appearing in the accessibility\n          // tree, due to the styling duplication (span::after - using 'data-text'), locators have to double the name.\n          aria-label={item.label}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","SelectionContext","FocusContext","isKey","jsx","HvTypography","jsxs","Bar"],"mappings":"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"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvTypography } from \"../../../Typography\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (\n    event: React.MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n  node: HvHeaderNavigationItemProp\n): { href?: string; target?: string } => {\n  let href: string | undefined;\n  let target: string | undefined;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n          // Fix for a possible bug in playwright where, even though hidden from screen readers and not appearing in the accessibility\n          // tree, due to the styling duplication (span::after - using 'data-text'), locators have to double the name.\n          aria-label={item.label}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","SelectionContext","FocusContext","isKey","jsx","HvTypography","jsxs","Bar"],"mappings":"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"}

package/dist/cjs/Header/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (\n    event: MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useSelectionPath","SelectionContext","jsx","FocusProvider","HvHeaderMenuBar"],"mappings":";;;;;;;;;AAiCa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAIC,6BAAW,WAAW;AAExC,QAAA,gBAAgBC,iBAAAA,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CACnD,OACA,cACG;AACH,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,wCACGC,kCAAiB,UAAjB,EAA0B,OAAO,eAChC,UAACC,2BAAAA,IAAAC,aAAA,eAAA,EACC,UAACD,2BAAA,IAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAAA,2BAAA;AAAA,IAACE,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"Navigation.cjs","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (\n    event: React.MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useSelectionPath","SelectionContext","jsx","FocusProvider","HvHeaderMenuBar"],"mappings":";;;;;;;;;AAkCa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAIC,6BAAW,WAAW;AAExC,QAAA,gBAAgBC,iBAAAA,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CAAC,OAAO,cAAc;AACzE,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,wCACGC,kCAAiB,UAAjB,EAA0B,OAAO,eAChC,UAACC,2BAAAA,IAAAC,aAAA,eAAA,EACC,UAACD,2BAAA,IAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAAA,2BAAA;AAAA,IAACE,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FocusContext.cjs","sources":["../../../../../src/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import React, { createContext, useMemo, useReducer } from \"react\";\n\ntype Action = { type: \"setItemFocused\"; itemFocused: EventTarget & Element };\n\nconst reducer: React.Reducer<FocusContextType, Action> = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\ntype FocusContextType = {\n  itemFocused?: EventTarget & Element;\n  dispatch?: React.Dispatch<Action>;\n};\n\nexport const FocusContext = createContext<FocusContextType>(initialState);\n\nexport const FocusProvider = ({ children }: { children?: React.ReactNode }) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(\n    () => ({ ...state, dispatch }),\n    [state, dispatch]\n  );\n\n  return (\n    <FocusContext.Provider value={contextValue}>\n      {children}\n    </FocusContext.Provider>\n  );\n};\n"],"names":["createContext","useReducer","useMemo"],"mappings":";;;;AAIA,MAAM,UAAmD,CAAC,OAAO,WAAW;AAC1E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO;IAC/B;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU;AAO5C,MAAA,eAAeA,oBAAgC,YAAY;AAEjE,MAAM,gBAAgB,CAAC,EAAE,eAA+C;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAeC,MAAA;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAAA;AAGlB,wCACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,SACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"FocusContext.cjs","sources":["../../../../../src/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import { createContext, useMemo, useReducer } from \"react\";\n\ntype Action = { type: \"setItemFocused\"; itemFocused: EventTarget & Element };\n\nconst reducer: React.Reducer<FocusContextType, Action> = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\ntype FocusContextType = {\n  itemFocused?: EventTarget & Element;\n  dispatch?: React.Dispatch<Action>;\n};\n\nexport const FocusContext = createContext<FocusContextType>(initialState);\n\nexport const FocusProvider = ({ children }: { children?: React.ReactNode }) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(\n    () => ({ ...state, dispatch }),\n    [state, dispatch]\n  );\n\n  return (\n    <FocusContext.Provider value={contextValue}>\n      {children}\n    </FocusContext.Provider>\n  );\n};\n"],"names":["createContext","useReducer","useMemo"],"mappings":";;;;AAIA,MAAM,UAAmD,CAAC,OAAO,WAAW;AAC1E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO;IAC/B;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU;AAO5C,MAAA,eAAeA,oBAAgC,YAAY;AAEjE,MAAM,gBAAgB,CAAC,EAAE,eAA+C;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAeC,MAAA;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAAA;AAGlB,wCACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/InlineEditor/InlineEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.cjs","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"../Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"../Typography\";\nimport { HvInput, HvInputProps } from \"../Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** 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 * 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 = (props: HvInlineEditorProps) => {\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\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: 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    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\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          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\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          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInput","useDefaultProps","useClasses","useControlled","useState","useRef","useTheme","useLayoutEffect","isKey","jsx","HvButton","Edit","HvTypography"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.cjs","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"../Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"../Typography\";\nimport { HvInput, HvInputProps } from \"../Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** 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 * 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 = (props: HvInlineEditorProps) => {\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\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: 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    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\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          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\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          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInput","useDefaultProps","useClasses","useControlled","useState","useRef","useTheme","useLayoutEffect","isKey","jsx","HvButton","Edit","HvTypography"],"mappings":";;;;;;;;;;;;;AA0Da,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW,iBAAiBA,MAAA;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAIC,cAAAA,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAIC,eAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAS,KAAK;AACpD,QAAM,WAAWC,MAAAA;AACX,QAAA,EAAE,gBAAgBC,SAAAA;AAExB,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,CAAA;AACvD,QAAA,EAAE,WAAe,IAAA;AAEvBC,QAAAA,gBAAgB,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,IACf;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,EAAA;AAGhB,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,EAAA;AAGpB,QAAA,gBAA2C,CAAC,UAAU;AACtD,QAAAC,cAAA,MAAM,OAAO,KAAK,GAAG;AACvB,kBAAY,KAAK;AACjB,eAAS,WAAW;AAAA,IACtB;AACA,gBAAY,KAAY;AAAA,EAAA;AAGpB,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,EAAA;AAIrB,SAAAC,2BAAA,IAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,sBAAsB,QAAQ;AAAA,MAChC;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmBT,gBAAU,aAAa;AAAA,QACpD;AAAA,MACF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGNS,2BAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,SACED,2BAAA;AAAA,QAACE,gBAAA;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,UAAA,CACxB;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAF,2BAAA;AAAA,QAACG,WAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/Input/Input.cjs

@@ -23,8 +23,6 @@ const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
@@ -94,7 +92,7 @@ const HvInput = React.forwardRef((props, ref) => {
   } = useDefaultProps.useDefaultProps("HvInput", props);
   const { classes, cx } = Input_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const elementId = useUniqueId.useUniqueId(id, "hvinput");
+  const elementId = useUniqueId.useUniqueId(id);
   const inputRef = React.useRef(null);
   const forkedRef = utils.useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = React.useRef(null);
@@ -360,7 +358,7 @@ const HvInput = React.forwardRef((props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
   const customIconEl = React.useMemo(
-    () => React.isValidElement(endAdornment) && React__default.default.cloneElement(endAdornment, {
+    () => React.isValidElement(endAdornment) && React.cloneElement(endAdornment, {
       className: cx(endAdornment.props.className, classes.icon)
     }),
     [classes.icon, endAdornment, cx]