@hitachivantara/uikit-react-core 5.47.1 → 5.48.0

package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.cjs","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEventHandler,\n  AriaAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport { PopperPlacementType, PopperProps } from \"@mui/material/Popper\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"../Typography\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n      children,\n      role,\n      placeholder,\n      component,\n      adornment,\n      expanded,\n      dropdownHeaderProps,\n      defaultExpanded,\n      disabled,\n      readOnly,\n      required,\n      disablePortal,\n      variableWidth,\n      placement: placementProp = \"right\",\n      \"aria-expanded\": ariaExpandedProp,\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n      popperProps = {},\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      onToggle,\n      onClickOutside,\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { rootId } = useTheme();\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const handleDropdownHeaderRefProp = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderProps?.ref\n    );\n    const handleDropdownHeaderRef = useForkRef(\n      setReferenceElement,\n      handleDropdownHeaderRefProp\n    );\n\n    const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n    const id = useUniqueId(idProp, \"hvbasedropdown\");\n    const containerId = setId(id, \"children-container\");\n\n    const headerControlArias = {\n      \"aria-required\": required ?? undefined,\n      \"aria-readonly\": readOnly ?? undefined,\n      \"aria-disabled\": disabled ?? undefined,\n\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": isOpen ? containerId : undefined,\n      \"aria-controls\": isOpen ? containerId : undefined,\n    } satisfies AriaAttributes;\n\n    const headerAriaLabels = {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n    } satisfies AriaAttributes;\n\n    const placement: PopperPlacementType = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const extensionWidth = referenceElement\n      ? referenceElement?.offsetWidth\n      : \"inherit\";\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      []\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      []\n    );\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize]\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      []\n    );\n\n    const modifiers = useMemo<PopperProps[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ]\n    );\n\n    const { styles: popperStyles, attributes } = usePopper(\n      referenceElement,\n      popperElement,\n      {\n        placement,\n        modifiers,\n        onFirstUpdate,\n        ...otherPopperProps,\n      }\n    );\n\n    const popperPlacement =\n      attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n    const handleToggle = useCallback(\n      (event: any) => {\n        if (event && !isKey(event, \"Tab\")) {\n          event.preventDefault();\n        }\n\n        const notControlKey =\n          !!event?.code &&\n          !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n        const ignoredCombinations =\n          (isKey(event, \"Esc\") && !isOpen) ||\n          (isKey(event, \"ArrowDown\") && isOpen) ||\n          (isKey(event, \"Tab\") && !isOpen);\n\n        if (disabled || notControlKey || ignoredCombinations) return;\n\n        const newOpen = !isOpen;\n\n        /* If about to close focus on the header component. */\n        setIsOpen(() => {\n          if (!newOpen) {\n            // Focus-ring won't be visible even if using the keyboard:\n            // https://github.com/WICG/focus-visible/issues/88\n            referenceElement?.focus({ preventScroll: true });\n          }\n\n          return newOpen;\n        });\n\n        onToggle?.(event, newOpen);\n      },\n      [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n    );\n\n    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n    const defaultHeaderElement = (\n      <div\n        id={setId(id, \"header\")}\n        className={cx(classes.header, {\n          [classes.headerDisabled]: disabled,\n          [classes.headerReadOnly]: readOnly,\n          [classes.headerOpen]: isOpen,\n          [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n          [classes.headerOpenDown]:\n            isOpen && popperPlacement.includes(\"bottom\"),\n        })}\n        // TODO: review \"textbox\" role\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        {...headerAriaLabels}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <div className={classes.selection}>\n          {placeholder && typeof placeholder === \"string\" ? (\n            <HvTypography\n              className={cx(classes.placeholder, {\n                [classes.selectionDisabled]: disabled,\n              })}\n              variant=\"body\"\n            >\n              {placeholder}\n            </HvTypography>\n          ) : (\n            placeholder\n          )}\n        </div>\n        <div className={classes.arrowContainer}>\n          {adornment || (\n            <ExpanderComponent\n              iconSize=\"XS\"\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.arrow}\n            />\n          )}\n        </div>\n      </div>\n    );\n\n    const headerElement =\n      component && React.isValidElement(component)\n        ? React.cloneElement(component as React.ReactElement, {\n            ref: handleDropdownHeaderRef,\n            ...headerControlArias,\n          })\n        : defaultHeaderElement;\n\n    const containerComponent = (() => {\n      /**\n       *  Handle keyboard inside children container.\n       */\n      const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n        if (isKey(event, \"Esc\")) {\n          handleToggle(event);\n        }\n        if (isKey(event, \"Tab\") && !event.shiftKey) {\n          const focusList = getFirstAndLastFocus(popperElement);\n          if (document.activeElement === focusList?.last) {\n            event.preventDefault();\n            focusList?.first?.focus();\n          }\n        }\n      };\n\n      const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n        const isButtonClick = referenceElement?.contains(event.target as any);\n        if (!isButtonClick) {\n          onClickOutside?.(event);\n          setIsOpen(false);\n          onToggle?.(event, false);\n        }\n      };\n\n      const container = (\n        <div\n          ref={setPopperElement}\n          className={classes.container}\n          style={popperStyles.popper}\n          {...attributes.popper}\n        >\n          <ClickAwayListener onClickAway={handleOutside}>\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n            <div onKeyDown={handleContainerKeyDown}>\n              {popperPlacement.includes(\"bottom\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(classes.inputExtensionOpen, {\n                    [classes.inputExtensionLeftPosition]:\n                      popperPlacement.includes(\"end\"),\n                  })}\n                />\n              )}\n              <BaseDropdownContext.Provider value={popperMaxSize}>\n                <div\n                  id={containerId}\n                  className={cx(classes.panel, {\n                    [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n                    [classes.panelOpenedDown]:\n                      popperPlacement.includes(\"bottom\"),\n                  })}\n                >\n                  {children}\n                </div>\n              </BaseDropdownContext.Provider>\n              {popperPlacement.includes(\"top\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(\n                    classes.inputExtensionOpen,\n                    classes.inputExtensionOpenShadow,\n                    {\n                      [classes.inputExtensionFloatRight]:\n                        popperPlacement.includes(\"end\"),\n                      [classes.inputExtensionFloatLeft]:\n                        popperPlacement.includes(\"start\"),\n                    }\n                  )}\n                />\n              )}\n            </div>\n          </ClickAwayListener>\n        </div>\n      );\n\n      if (disablePortal) return container;\n\n      return createPortal(\n        container,\n        document.getElementById(rootId || \"\") || document.body\n      );\n    })();\n\n    return (\n      <div className={classes.root}>\n        <div\n          ref={ref}\n          id={id}\n          className={cx(\n            classes.anchor,\n            { [classes.rootDisabled]: disabled },\n            className\n          )}\n          {...(!readOnly && {\n            onKeyDown: handleToggle,\n            onClick: handleToggle,\n          })}\n          {...(ariaRole && {\n            role: ariaRole,\n            ...headerAriaLabels,\n            ...headerControlArias,\n          })}\n          // Removes the element from the navigation sequence for keyboard focus\n          tabIndex={-1}\n          {...others}\n        >\n          {headerElement}\n        </div>\n        {isOpen && containerComponent}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","useControlled","useState","useForkRef","useUniqueId","setId","useCallback","detectOverflow","useMemo","usePopper","isKey","isOneOfKeys","DropUpXS","DropDownXS","jsxs","jsx","HvTypography","React","getFirstAndLastFocus","ClickAwayListener","BaseDropdownContext","createPortal"],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.cjs","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEventHandler,\n  AriaAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { PopperProps, usePopper } from \"react-popper\";\nimport {\n  detectOverflow,\n  ModifierArguments,\n  Options,\n  Placement,\n} from \"@popperjs/core\";\n\nimport { HvTypography } from \"../Typography\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n      children,\n      role,\n      placeholder,\n      component,\n      adornment,\n      expanded,\n      dropdownHeaderProps,\n      defaultExpanded,\n      disabled,\n      readOnly,\n      required,\n      disablePortal,\n      variableWidth,\n      placement: placementProp = \"right\",\n      \"aria-expanded\": ariaExpandedProp,\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n      popperProps = {},\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      onToggle,\n      onClickOutside,\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { rootId } = useTheme();\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const handleDropdownHeaderRefProp = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderProps?.ref\n    );\n    const handleDropdownHeaderRef = useForkRef(\n      setReferenceElement,\n      handleDropdownHeaderRefProp\n    );\n\n    const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n    const id = useUniqueId(idProp, \"hvbasedropdown\");\n    const containerId = setId(id, \"children-container\");\n\n    const headerControlArias = {\n      \"aria-required\": required ?? undefined,\n      \"aria-readonly\": readOnly ?? undefined,\n      \"aria-disabled\": disabled ?? undefined,\n\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": isOpen ? containerId : undefined,\n      \"aria-controls\": isOpen ? containerId : undefined,\n    } satisfies AriaAttributes;\n\n    const headerAriaLabels = {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n    } satisfies AriaAttributes;\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const extensionWidth = referenceElement\n      ? referenceElement?.offsetWidth\n      : \"inherit\";\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      []\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      []\n    );\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize]\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      []\n    );\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ]\n    );\n\n    const { styles: popperStyles, attributes } = usePopper(\n      referenceElement,\n      popperElement,\n      {\n        placement,\n        modifiers,\n        onFirstUpdate,\n        ...otherPopperProps,\n      }\n    );\n\n    const popperPlacement =\n      (attributes.popper?.[\"data-popper-placement\"] as Placement) ?? \"bottom\";\n\n    const handleToggle = useCallback(\n      (event: any) => {\n        if (event && !isKey(event, \"Tab\")) {\n          event.preventDefault();\n        }\n\n        const notControlKey =\n          !!event?.code &&\n          !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n        const ignoredCombinations =\n          (isKey(event, \"Esc\") && !isOpen) ||\n          (isKey(event, \"ArrowDown\") && isOpen) ||\n          (isKey(event, \"Tab\") && !isOpen);\n\n        if (disabled || notControlKey || ignoredCombinations) return;\n\n        const newOpen = !isOpen;\n\n        /* If about to close focus on the header component. */\n        setIsOpen(() => {\n          if (!newOpen) {\n            // Focus-ring won't be visible even if using the keyboard:\n            // https://github.com/WICG/focus-visible/issues/88\n            referenceElement?.focus({ preventScroll: true });\n          }\n\n          return newOpen;\n        });\n\n        onToggle?.(event, newOpen);\n      },\n      [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n    );\n\n    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n    const defaultHeaderElement = (\n      <div\n        id={setId(id, \"header\")}\n        className={cx(classes.header, {\n          [classes.headerDisabled]: disabled,\n          [classes.headerReadOnly]: readOnly,\n          [classes.headerOpen]: isOpen,\n          [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n          [classes.headerOpenDown]:\n            isOpen && popperPlacement.includes(\"bottom\"),\n        })}\n        // TODO: review \"textbox\" role\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        {...headerAriaLabels}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <div className={classes.selection}>\n          {placeholder && typeof placeholder === \"string\" ? (\n            <HvTypography\n              className={cx(classes.placeholder, {\n                [classes.selectionDisabled]: disabled,\n              })}\n              variant=\"body\"\n            >\n              {placeholder}\n            </HvTypography>\n          ) : (\n            placeholder\n          )}\n        </div>\n        <div className={classes.arrowContainer}>\n          {adornment || (\n            <ExpanderComponent\n              iconSize=\"XS\"\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.arrow}\n            />\n          )}\n        </div>\n      </div>\n    );\n\n    const headerElement =\n      component && React.isValidElement(component)\n        ? React.cloneElement(component as React.ReactElement, {\n            ref: handleDropdownHeaderRef,\n            ...headerControlArias,\n          })\n        : defaultHeaderElement;\n\n    const containerComponent = (() => {\n      /**\n       *  Handle keyboard inside children container.\n       */\n      const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n        if (isKey(event, \"Esc\")) {\n          handleToggle(event);\n        }\n        if (isKey(event, \"Tab\") && !event.shiftKey) {\n          const focusList = getFirstAndLastFocus(popperElement);\n          if (document.activeElement === focusList?.last) {\n            event.preventDefault();\n            focusList?.first?.focus();\n          }\n        }\n      };\n\n      const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n        const isButtonClick = referenceElement?.contains(event.target as any);\n        if (!isButtonClick) {\n          onClickOutside?.(event);\n          setIsOpen(false);\n          onToggle?.(event, false);\n        }\n      };\n\n      const container = (\n        <div\n          ref={setPopperElement}\n          className={classes.container}\n          style={popperStyles.popper}\n          {...attributes.popper}\n        >\n          <ClickAwayListener onClickAway={handleOutside}>\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n            <div onKeyDown={handleContainerKeyDown}>\n              {popperPlacement.includes(\"bottom\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(classes.inputExtensionOpen, {\n                    [classes.inputExtensionLeftPosition]:\n                      popperPlacement.includes(\"end\"),\n                  })}\n                />\n              )}\n              <BaseDropdownContext.Provider value={popperMaxSize}>\n                <div\n                  id={containerId}\n                  className={cx(classes.panel, {\n                    [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n                    [classes.panelOpenedDown]:\n                      popperPlacement.includes(\"bottom\"),\n                  })}\n                >\n                  {children}\n                </div>\n              </BaseDropdownContext.Provider>\n              {popperPlacement.includes(\"top\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(\n                    classes.inputExtensionOpen,\n                    classes.inputExtensionOpenShadow,\n                    {\n                      [classes.inputExtensionFloatRight]:\n                        popperPlacement.includes(\"end\"),\n                      [classes.inputExtensionFloatLeft]:\n                        popperPlacement.includes(\"start\"),\n                    }\n                  )}\n                />\n              )}\n            </div>\n          </ClickAwayListener>\n        </div>\n      );\n\n      if (disablePortal) return container;\n\n      return createPortal(\n        container,\n        document.getElementById(rootId || \"\") || document.body\n      );\n    })();\n\n    return (\n      <div className={classes.root}>\n        <div\n          ref={ref}\n          id={id}\n          className={cx(\n            classes.anchor,\n            { [classes.rootDisabled]: disabled },\n            className\n          )}\n          {...(!readOnly && {\n            onKeyDown: handleToggle,\n            onClick: handleToggle,\n          })}\n          {...(ariaRole && {\n            role: ariaRole,\n            ...headerAriaLabels,\n            ...headerControlArias,\n          })}\n          // Removes the element from the navigation sequence for keyboard focus\n          tabIndex={-1}\n          {...others}\n        >\n          {headerElement}\n        </div>\n        {isOpen && containerComponent}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","useControlled","useState","useForkRef","useUniqueId","setId","useCallback","detectOverflow","useMemo","usePopper","isKey","isOneOfKeys","DropUpXS","DropDownXS","jsxs","jsx","HvTypography","React","getFirstAndLastFocus","ClickAwayListener","BaseDropdownContext","createPortal"],"mappings":"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"}

package/dist/cjs/Button/Button.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const useTheme = require("../hooks/useTheme.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const generic = require("../types/generic.cjs");
 const Button_styles = require("./Button.styles.cjs");
 const mapVariant = (variant, theme) => {
   if (theme === "ds3")
@@ -15,61 +15,59 @@ const mapVariant = (variant, theme) => {
   const mappedVariant = deprecatedVariantMap[variant];
   return mappedVariant || variant;
 };
-const HvButton = React.forwardRef(
-  (props, ref) => {
-    const {
-      classes: classesProp,
-      children,
-      variant: variantProp,
-      disabled = false,
-      className,
-      startIcon,
-      endIcon,
-      icon = false,
-      size,
-      radius,
-      overrideIconColors = true,
-      component: Component = "button",
-      ...others
-    } = useDefaultProps.useDefaultProps("HvButton", props);
-    const { classes, css, cx } = Button_styles.useClasses(classesProp);
-    const { activeTheme } = useTheme.useTheme();
-    const variant = mapVariant(
-      variantProp ?? (icon ? "secondaryGhost" : "primary"),
-      activeTheme?.name
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Component,
-      {
-        ref,
-        className: cx(
-          classes.root,
-          classes[variant],
-          size && css(Button_styles.getSizeStyles(size)),
-          radius && css(Button_styles.getRadiusStyles(radius)),
-          overrideIconColors && css(Button_styles.getOverrideColors()),
-          {
-            [classes.icon]: icon,
-            [classes.disabled]: disabled
-          },
-          className
-        ),
-        ...Component === "button" && { type: "button" },
-        ...disabled && {
-          disabled: true,
-          tabIndex: -1,
-          "aria-disabled": true
+const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
+  const {
+    classes: classesProp,
+    children,
+    variant: variantProp,
+    disabled = false,
+    className,
+    startIcon,
+    endIcon,
+    icon = false,
+    size,
+    radius,
+    overrideIconColors = true,
+    component: Component = "button",
+    ...others
+  } = useDefaultProps.useDefaultProps("HvButton", props);
+  const { classes, css, cx } = Button_styles.useClasses(classesProp);
+  const { activeTheme } = useTheme.useTheme();
+  const variant = mapVariant(
+    variantProp ?? (icon ? "secondaryGhost" : "primary"),
+    activeTheme?.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      ref,
+      className: cx(
+        classes.root,
+        classes[variant],
+        size && css(Button_styles.getSizeStyles(size)),
+        radius && css(Button_styles.getRadiusStyles(radius)),
+        overrideIconColors && css(Button_styles.getOverrideColors()),
+        {
+          [classes.icon]: icon,
+          [classes.disabled]: disabled
         },
-        ...others,
-        children: [
-          startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.startIcon, children: startIcon }),
-          children,
-          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endIcon, children: endIcon })
-        ]
-      }
-    );
-  }
-);
+        className
+      ),
+      ...Component === "button" && { type: "button" },
+      ...disabled && {
+        disabled: true,
+        tabIndex: -1,
+        "aria-disabled": true
+      },
+      ...others,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.startIcon, children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endIcon, children: endIcon })
+      ]
+    }
+  );
+});
 exports.buttonClasses = Button_styles.staticClasses;
 exports.HvButton = HvButton;
 //# sourceMappingURL=Button.cjs.map

package/dist/cjs/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","jsxs","getSizeStyles","getRadiusStyles","getOverrideColors","jsx"],"mappings":";;;;;;;AAsDA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAEoBA,MAAA;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB,WAAW,YAAY;AAAA,MACvB,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,UAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,UAAA,EAAE,gBAAgBC,SAAAA;AACxB,UAAM,UAAU;AAAA,MACd,gBAAgB,OAAO,mBAAmB;AAAA,MAC1C,aAAa;AAAA,IAAA;AAIb,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf,QAAQ,IAAIC,4BAAc,IAAI,CAAC;AAAA,UAC/B,UAAU,IAAIC,8BAAgB,MAAM,CAAC;AAAA,UACrC,sBAAsB,IAAIC,cAAAA,mBAAmB;AAAA,UAC7C;AAAA,YACE,CAAC,QAAQ,IAAI,GAAG;AAAA,YAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,QAC/C,GAAI,YAAY;AAAA,UACf,UAAU;AAAA,UACV,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAcC,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UAC5D;AAAA,UACA,WAAYA,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7D;AACF;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\"\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name\n  );\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        size && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        className\n      )}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: true,\n        tabIndex: -1,\n        \"aria-disabled\": true,\n      })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["fixedForwardRef","HvButton","useDefaultProps","useClasses","useTheme","jsxs","getSizeStyles","getRadiusStyles","getOverrideColors","jsx"],"mappings":";;;;;;;AAwDA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAWA,QAAAA,gBAAgB,SAASC,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgBC,SAAAA;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAIb,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,IAAIC,4BAAc,IAAI,CAAC;AAAA,QAC/B,UAAU,IAAIC,8BAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAIC,cAAAA,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAcC,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAYA,2BAAAA,IAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;;;"}

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -31,6 +30,7 @@ const HvDropDownMenu = (props) => {
     expanded,
     defaultExpanded = false,
     category = "secondaryGhost",
+    variant,
     ...others
   } = useDefaultProps.useDefaultProps("HvDropDownMenu", props);
   const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
@@ -55,13 +55,6 @@ const HvDropDownMenu = (props) => {
     containerRef?.getElementsByTagName("li")[0]?.focus();
   };
   const condensed = React.useMemo(() => dataList.every((el) => !el.icon), [dataList]);
-  const popperStyle = {
-    style: {
-      zIndex: uikitStyles.theme.zIndices.tooltip,
-      width: "auto",
-      position: "relative"
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseDropdown.HvBaseDropdown,
     {
@@ -76,7 +69,7 @@ const HvDropDownMenu = (props) => {
         Button.HvButton,
         {
           icon: true,
-          variant: category,
+          variant: variant ?? category,
           id: setId.setId(id, "icon-button"),
           className: cx(classes.icon, { [classes.iconSelected]: open }),
           "aria-expanded": open,
@@ -101,7 +94,6 @@ const HvDropDownMenu = (props) => {
       },
       disabled,
       onContainerCreation: setFocusToContent,
-      popperProps: popperStyle,
       ...others,
       children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
         List.HvList,

package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","theme","jsx","HvBaseDropdown","HvButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}

package/dist/cjs/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps } from \"@mui/material/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvListValue } from \"../List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\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?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\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        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useLabels","useUniqueId","useControlled","useState","getSelectionLabel","useRef","useEffect","useForkRef","getSelected","jsx","HvTypography","jsxs","isInvalid","setId","HvFormElement","HvLabel","HvInfoMessage","HvBaseDropdown","HvDropdownList","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvListValue } from \"../List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\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?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\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        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useLabels","useUniqueId","useControlled","useState","getSelectionLabel","useRef","useEffect","useForkRef","getSelected","jsx","HvTypography","jsxs","isInvalid","setId","HvFormElement","HvLabel","HvInfoMessage","HvBaseDropdown","HvDropdownList","HvWarningText"],"mappings":"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"}

package/dist/cjs/Dropdown/Dropdown.styles.cjs

@@ -28,10 +28,7 @@ const { staticClasses, useClasses } = classes.createClasses("HvDropdown", {
     width: "100%",
     borderRadius: uikitStyles.theme.radii.base,
     "& $dropdownHeaderInvalid": {
-      border: `1px solid ${uikitStyles.theme.colors.negative}`,
-      "&:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.negative}`
-      }
+      border: `1px solid ${uikitStyles.theme.colors.negative}`
     }
   },
   arrow: {},

package/dist/cjs/Dropdown/Dropdown.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.cjs","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative}`,\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.negative}`,\n      },\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAOC,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAYA,YAAAA,MAAM,MAAM;AAAA,IACxB,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,MAC1C,WAAW;AAAA,QACT,QAAQ,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAaA,YAAM,MAAA,OAAO,YAAY;AAAA,MAC9C,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Dropdown.styles.cjs","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAOC,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAYA,YAAAA,MAAM,MAAM;AAAA,IACxB,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAC5C;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAaA,YAAM,MAAA,OAAO,YAAY;AAAA,MAC9C,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/ListContainer/ListContainer.cjs

@@ -14,9 +14,10 @@ const HvListContainer = React.forwardRef((props, ref) => {
     classes: classesProp,
     className,
     interactive = false,
+    selectable,
     condensed,
     disableGutters,
-    children,
+    children: childrenProp,
     ...others
   } = useDefaultProps.useDefaultProps("HvListContainer", props);
   const { classes, cx } = ListContainer_styles.useClasses(classesProp);
@@ -26,25 +27,34 @@ const HvListContainer = React.forwardRef((props, ref) => {
     () => ({
       topContainerRef: topContainerRef || containerRef,
       condensed,
+      selectable,
       disableGutters,
       interactive,
       nesting: nesting + 1
     }),
-    [condensed, disableGutters, interactive, nesting, topContainerRef]
+    [
+      condensed,
+      selectable,
+      disableGutters,
+      interactive,
+      nesting,
+      topContainerRef
+    ]
   );
-  const renderChildren = () => {
-    if (!interactive) {
-      return children;
-    }
-    const anySelected = React__default.default.Children.toArray(children).map((child) => child.props.selected && !child.props.disabled).reduce((result, selected) => result || selected, false);
-    return React__default.default.Children.map(children, (child, i) => {
+  const children = React.useMemo(() => {
+    if (!interactive)
+      return childrenProp;
+    const anySelected = React__default.default.Children.toArray(childrenProp).some(
+      (child) => React.isValidElement(child) && child.props.selected && !child.props.disabled
+    );
+    return React__default.default.Children.map(childrenProp, (child, i) => {
       const tabIndex = child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1;
       return React__default.default.cloneElement(child, {
         tabIndex,
         interactive
       });
     });
-  };
+  }, [childrenProp, interactive]);
   const handleRef = useForkRef.useForkRef(ref, containerRef);
   return /* @__PURE__ */ jsxRuntime.jsx(ListContext.default.Provider, { value: listContext, children: /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -53,7 +63,7 @@ const HvListContainer = React.forwardRef((props, ref) => {
       id,
       className: cx(classes.root, className),
       ...others,
-      children: renderChildren()
+      children
     }
   ) });
 });