@hitachivantara/uikit-react-core 5.26.2 → 5.26.4

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\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   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\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  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\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?: HvDropdownLabelsProps;\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  /**\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?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\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 = (props: HvDropdownProps) => {\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, css } = 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(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\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 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 = getSelected(internalValues).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      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 ? [...containerRef.getElementsByTagName(\"li\")] : [];\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(\n          classes.placeholder,\n          {\n            [classes.selectionDisabled]: disabled,\n          },\n          !(isOpen || hasSelection) &&\n            css({ color: theme.dropdown.placeholderColor })\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        disabled && css({ color: theme.dropdown.disabledColor }),\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        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(\n            classes.dropdown,\n            readOnly &&\n              css({\n                [`& .${staticClasses.dropdownHeader}`]: {\n                  border: theme.dropdown.readOnlyBorder,\n                  backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n                },\n              })\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={dropdownHeaderRef}\n        {...baseDropdownProps}\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-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"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\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   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\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  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\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?: HvDropdownLabelsProps;\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  /**\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?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\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 = (props: HvDropdownProps) => {\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, css } = 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(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\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 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 = getSelected(internalValues).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      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 ? [...containerRef.getElementsByTagName(\"li\")] : [];\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(\n          classes.placeholder,\n          {\n            [classes.selectionDisabled]: disabled,\n          },\n          !(isOpen || hasSelection) &&\n            css({ color: theme.dropdown.placeholderColor })\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        disabled && css({ color: theme.dropdown.disabledColor }),\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        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(\n            classes.dropdown,\n            readOnly &&\n              css({\n                [`& .${staticClasses.dropdownHeader}`]: {\n                  border: theme.dropdown.readOnlyBorder,\n                  backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n                },\n              })\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={dropdownHeaderRef}\n        {...baseDropdownProps}\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"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/cjs/components/Dropdown/List/List.cjs

@@ -112,6 +112,7 @@ const HvDropdownList = ({
       type: "search",
       value: searchStr,
       placeholder: labels == null ? void 0 : labels.searchPlaceholder,
+      "aria-label": labels == null ? void 0 : labels.searchPlaceholder,
       onChange: (event, str) => handleSearch(str)
     })
   });

package/dist/cjs/components/Dropdown/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\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   * 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. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\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\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 5,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\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   * 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. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\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\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 5,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":";;;;;;;;;;;;;;;;;;AAqGA,MAAMA,QAAQA,CAACC,WAA0BA,OAAOC,IAAKC,CAAW,WAAA;AAAA,EAAE,GAAGA;AAAM,EAAE;AAK7E,MAAMC,cAAcA,CAACC,QACnBA,IAAIH,IAAKI,CAAU,UAAA;AAAA,EAAE,GAAGA;AAAAA,EAAMC,UAAU;AAAM,EAAE;AAElD,MAAMC,cAAcA,CAACP,WACnB,CAACQ,uBAAMR,MAAM,MAAKA,iCAAQS,UAAS;AAE9B,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC,SAASC;AAAAA,EACTb,SAAS,CAAE;AAAA,EACXc,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,6BAA6B;AAAA,EAC7BC,cAAc;AAAA,EACdC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC,cAAc;AAAA,EACd,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAEd;AAAAA,IAASe;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,YAAAA,WAAWhB,WAAW;AAEnD,QAAM,CAACiB,WAAWC,YAAY,IAAIC,eAAiB,EAAE;AACrD,QAAM,CAACC,MAAMC,OAAO,IAAIF,MAAwBjC,SAAAA,MAAMC,MAAM,CAAC;AAC7D,QAAM,CAACmC,aAAaC,cAAc,IAAIJ,eAAkB,KAAK;AAC7D,QAAM,CAACK,aAAaC,cAAc,IAAIN,eAAkB,KAAK;AACvD,QAAA;AAAA,IAAEO;AAAAA,IAAOjB;AAAAA,EAAAA,IAAWkB,MAAAA,WAAWC,oBAAAA,OAAmB;AAExD,QAAMC,YAAY;AAAA,IAChBC,WAAWzB,iCAAQyB;AAAAA,IACnBC,sBAAsB1B,iCAAQ2B;AAAAA,EAAAA;AAM1BC,QAAAA,kBAAkBA,CAACC,eAA8B;AACrD,QAAI,CAACA;AAAY;AACXC,UAAAA,cAAcC,MAAAA,YAAYF,UAAU,EAAEtC;AAC5C,UAAMyC,eAAeF,cAAc;AAC7BG,UAAAA,YAAYH,gBAAgBD,WAAWtC;AAE7C6B,mBAAeY,YAAY;AAC3Bd,mBAAec,gBAAgBC,SAAS;AAAA,EAAA;AAM1CC,QAAAA,UAAU,MAAM;AACV,QAAA,CAAC7C,YAAYP,MAAM;AAAG;AAClBD,YAAAA,MAAMC,MAAM,CAAC;AACrB8C,oBAAgB9C,MAAM;AACtB,QAAImB,4BAA4B;AACnBnB,2CAAAA,QAAQ,OAAO,OAAO;AAAA,IACnC;AAAA,EACC,GAAA,CAACA,QAAQmB,4BAA4BH,QAAQ,CAAC;AAO3CqC,QAAAA,eAAeA,CAACC,QAAgB;AACpC,UAAMC,UAAUtB,OACZA,KAAKuB,OACH,CAAC;AAAA,MACCC;AAAAA,MACAC;AAAAA,MACAxD;AAAAA,IAAAA,MAKI;AACJ,UAAIyD,cAAc;AAClB,UACE,OAAOF,gBAAgB,YACvBA,uBAAuBG,QACvB;AACAD,sBAAcF,YAAYI;MACjB,WAAA,OAAOH,UAAU,YAAYA,iBAAiBE,QAAQ;AAC/DD,sBAAcD,MAAMG;MACX,WAAA,OAAO3D,UAAU,YAAYA,iBAAiB0D,QAAQ;AAC/DD,sBAAczD,MAAM2D;MACtB;AAEA,aAAOF,YAAYG,QAAQR,IAAIO,YAAa,CAAA,KAAK;AAAA,IAErD,CAAA,IACA;AAEA,QAAA,CAACrD,eAAAA,QAAM+C,OAAO,GAAG;AACbQ,YAAAA,UAAU9B,KAAKhC,IAAK+D,CAAS,SAAA;AACjC,cAAMC,WAAWV,QAAQW,KAAMC,YAAWA,OAAOT,UAAUM,KAAKN,KAAK;AAC9D,eAAA;AAAA,UAAE,GAAGM;AAAAA,UAAM1D,UAAU,CAAC2D;AAAAA,QAAAA;AAAAA,MAAS,CACvC;AAED/B,cAAQ6B,OAAO;AACfhC,mBAAauB,GAAG;AAAA,IAClB;AACOA,WAAAA;AAAAA,EAAAA;AAQHc,QAAAA,eAAeA,MACnBC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAW1D,QAAQ2D;AAAAA,IAAgBC,yCACrCC,eAAO;AAAA,MACN9D,IAAI+D,MAAAA,MAAM/D,IAAI,QAAQ;AAAA,MACtBgE,MAAK;AAAA,MACLzE,OAAO4B;AAAAA,MACP8C,aAAa1D,iCAAQ2D;AAAAA,MACrB,cAAY3D,iCAAQ2D;AAAAA,MACpB7D,UAAUA,CAAC8D,OAAOxB,QAAQD,aAAaC,GAAG;AAAA,IAAA,CAC3C;AAAA,EAAA,CACE;AAOP,QAAMyB,kBAAkBA,MAAM;AACtBhB,UAAAA,UAAU9B,KAAKhC,IAAK+D,CAAU,UAAA;AAAA,MAAE,GAAGA;AAAAA,MAAMgB,UAAU,CAAC3C;AAAAA,IAAc,EAAA;AACxEH,YAAQ6B,OAAO;AACfjB,oBAAgBiB,OAAO;AAAA,EAAA;AAQzB,QAAMkB,kBAAkBA,MAAM;AAC5B,UAAMtC,YAAYzB,iCAAQyB;AAC1B,UAAME,4BAA4B3B,iCAAQ2B;AACpCG,UAAAA,cAAcC,MAAAA,YAAYhB,IAAI,EAAExB;AAEhCyE,UAAAA,8CACHC,yBAAY;AAAA,MAACC,WAAU;AAAA,MAAMZ,UAC3BxB,cAAc,IACbqC,2BAAAA,KAAAC,WAAAA,UAAA;AAAA,QAAAd,WACEH,2BAAAA,IAAA,KAAA;AAAA,UAAAG,UAAIxB;AAAAA,QAAAA,CAAe,GACjB,IAAGH,6BAA6BZ,KAAKxB,QAAQ;AAAA,MAAA,CAC/C,IAEF4E,2BAAAA,KAAAC,qBAAA;AAAA,QAAAd,WACEH,2BAAAA,IAAA,KAAA;AAAA,UAAAG,UAAI7B;AAAAA,QAAa,CAAA,GACf,KAAIV,KAAKxB,SAAS;AAAA,MAAA,CACpB;AAAA,IAAA,CAEQ;AAGhB,0CACE,OAAA;AAAA,MAAK6D,WAAW1D,QAAQ2E;AAAAA,MAAmBf,yCACxCgB,qBAAU;AAAA,QACT7E,IAAI+D,MAAAA,MAAM/D,IAAI,YAAY;AAAA,QAC1B+C,OAAOwB;AAAAA,QACPlE,UAAUA,MAAM+D,gBAAgB;AAAA,QAChCnE,SAAS;AAAA,UACP6E,WAAW7E,QAAQ8E;AAAAA,QACrB;AAAA,QACApB,WAAW1D,QAAQ+B;AAAAA,QACnBgD,eAAetD,eAAe,CAACF;AAAAA,QAC/ByD,SAASzD;AAAAA,MAAAA,CACV;AAAA,IAAA,CACE;AAAA,EAAA;AAST,QAAM0D,cAAwC9C,CAAe,eAAA;AAC3D,QAAI,CAACjC,aAAa;AAChBE,eAASb,YAAY4C,UAAU,GAAG,MAAM,MAAM,IAAI;AAAA,IAAA,OAC7C;AACLD,sBAAgBC,UAAU;AAClBhD,cAAAA,MAAMgD,UAAU,CAAC;AAAA,IAC3B;AAAA,EAAA;AAMF,QAAM+C,gBAAgBA,MAAM;AAC1B,UAAMC,aAAa7E,iCAAQ6E;AAC3B,UAAMC,cAAc9E,iCAAQ8E;AAC5B,2CACGC,UAAAA,aAAW;AAAA,MAACtF,IAAI+D,MAAAA,MAAM/D,IAAI,SAAS;AAAA,MAAE6D,UAAA,CACpCH,2BAAAA,IAAC6B,iBAAQ;AAAA,QACPvF,IAAI+D,MAAAA,MAAM/D,IAAI,eAAe;AAAA,QAC7BwF,SAASA,MAAMnF,SAASb,YAAY8B,IAAI,GAAG,MAAM,MAAM,IAAI;AAAA,QAC3DmE,SAAQ;AAAA,QAAc5B,UAErBuB;AAAAA,MAAAA,CACO,GACV1B,2BAAAA,IAAC6B,iBAAQ;AAAA,QACPvF,IAAI+D,MAAAA,MAAM/D,IAAI,gBAAgB;AAAA,QAC9BwF,SAASlF;AAAAA,QACTmF,SAAQ;AAAA,QAAc5B,UAErBwB;AAAAA,MAAAA,CACO,CAAC;AAAA,IAAA,CACA;AAAA,EAAA;AAIXK,QAAAA,WAAW9F,YAAYP,MAAM;AAEnC,yCACE,OAAA;AAAA,IAAKsE,WAAW1D,QAAQ0F;AAAAA,IAAS9B,WAC/BH,2BAAAA,IAAA,OAAA;AAAA,MAAKC,WAAW1D,QAAQ2F;AAAAA,IAAAA,CAAiB,GACzClB,2BAAAA,KAAA,OAAA;AAAA,MAAKf,WAAW1D,QAAQ4F;AAAAA,MAAchC,WACnCzD,cAAcqD,aAAa,GAC3BiC,YAAYvF,eAAemE,mBAC3BoB,YACChC,2BAAAA,IAACoC,aAAM;AAAA,QACL9F,IAAI+D,MAAAA,MAAM/D,IAAI,MAAM;AAAA,QACpBC,SAAS;AAAA,UACP8F,MAAM/E,GACJf,QAAQ+F,uBACR/E,IAAI;AAAA,YACFgF,UAAUrE;AAAAA,YACVf,WACEA,aACC,QAAOF,qBAAqBuF,kBAAMC,MAAMC,QAAQF,YAAAA,MAAMC,MAAME;AAAAA,YAC/DC,UAAU;AAAA,YACVC,SAAS;AAAA,UAAA,CACV,GACD3F,kBACEK,IAAI;AAAA,YACFN,QAAQC;AAAAA,UAAAA,CACT,GACHE,eACEG,IAAI;AAAA,YACFgF,UAAU;AAAA,YACVpF,WAAW;AAAA,YACXyF,UAAU;AAAA,YACVC,SAAS;AAAA,UAAA,CACV,CACL;AAAA,QACF;AAAA,QACAlH,QAAQiC;AAAAA,QACRnB;AAAAA,QACAqG,aAAarG;AAAAA,QACbsG,eAAe;AAAA,QACfpG,UAAU6E;AAAAA,QACV3E,QAAQwB;AAAAA,QACRtB;AAAAA,QACAiG,YAAU;AAAA,QACVC,WAAS;AAAA,QACTjG;AAAAA,QACAC,QAAQC;AAAAA,QACRE;AAAAA,QAAyB,GACrBC;AAAAA,MAAAA,CACL,CACF;AAAA,IACE,CAAA,GACJ2E,YAAYvF,cAAcgF,cAAAA,IAAkB,IAAI;AAAA,EAAA,CAC9C;AAET;;;"}

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs

@@ -45,7 +45,7 @@ const HvOverflowTooltip = (props) => {
     }, className),
     children: data
   }), [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, cx, data, isParag, ref]);
-  return open || isOverflowing ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
     id,
     disableHoverListener: !isOverflowing,
     open,
@@ -55,9 +55,11 @@ const HvOverflowTooltip = (props) => {
       variant: "body",
       children: data
     }),
+    "aria-label": null,
+    "aria-labelledby": null,
     ...tooltipsProps,
     children: content
-  }) : content;
+  });
 };
 exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
 exports.HvOverflowTooltip = HvOverflowTooltip;

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return open || isOverflowing ? (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  ) : (\n    content\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","tooltipAnchor","tooltipAnchorParagraph","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;;AAuCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MAAAA,QACd,MACEG,2BAAAA,IAAA,OAAA;AAAA,IACEb;AAAAA,IACAV,WAAWO,GACT;AAAA,MACE,CAACT,QAAQ0B,aAAa,GAAG,CAACL;AAAAA,MAC1B,CAACrB,QAAQ2B,sBAAsB,GAAGN;AAAAA,OAEpCnB,SACF;AAAA,IAAEP,UAEDQ;AAAAA,EACE,CAAA,GAEP,CACED,WACAF,QAAQ0B,eACR1B,QAAQ2B,wBACRlB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAEOR,SAAAA,QAAQgB,gBACbK,2BAAAA,IAACG,mBAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,sCACGC,yBAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,IACf,GACGI;AAAAA,IAAaZ,UAEhB6B;AAAAA,EACQ,CAAA,IAEXA;AAEJ;;;"}
+{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","tooltipAnchor","tooltipAnchorParagraph","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;;AAuCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MAAAA,QACd,MACEG,2BAAAA,IAAA,OAAA;AAAA,IACEb;AAAAA,IACAV,WAAWO,GACT;AAAA,MACE,CAACT,QAAQ0B,aAAa,GAAG,CAACL;AAAAA,MAC1B,CAACrB,QAAQ2B,sBAAsB,GAAGN;AAAAA,OAEpCnB,SACF;AAAA,IAAEP,UAEDQ;AAAAA,EACE,CAAA,GAEP,CACED,WACAF,QAAQ0B,eACR1B,QAAQ2B,wBACRlB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAEA,wCACGgB,QAAAA,WAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,sCACGC,yBAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,IAGhB,cAAY;AAAA,IACZ,mBAAiB;AAAA,IAAY,GACzBI;AAAAA,IAAaZ,UAEhB6B;AAAAA,EAAAA,CACQ;AAEf;;;"}

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

@@ -25,6 +25,7 @@ const popperSx = (useSingle) => {
       opacity: 1
     },
     [`& .${material.tooltipClasses.tooltip}`]: {
+      fontFamily: uikitStyles.theme.fontFamily.body,
       ...uikitStyles.theme.typography.body,
       display: "flex",
       width: "fit-content",

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {},\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n\nexport const popperSx = (useSingle: boolean) => {\n  return {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n      ...(useSingle && {\n        padding: \"15px 20px\",\n        borderRadius: theme.tooltip.borderRadius,\n      }),\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...(useSingle && { wordBreak: \"break-word\" }),\n      },\n    },\n    [`& .${staticClasses.title}`]: {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    [`& .${staticClasses.valuesContainer}`]: {\n      padding: theme.space.sm,\n    },\n    [`& .${staticClasses.values}`]: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    [`& .${staticClasses.color}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separator}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separatorColor}`]: {\n      width: \"5px\",\n    },\n    [`& .${staticClasses.valueWrapper}`]: {\n      padding: theme.space.sm,\n    },\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","title","valuesContainer","values","color","separatorColor","separator","valueWrapper","popperSx","useSingle","MuitooltipClasses","opacity","theme","typography","body","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","borderRadius","boxOrient","textOverflow","overflow","wordBreak","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;AAEYC,MAAAA,WAAWA,CAACC,cAAuB;AACvC,SAAA;AAAA,IACL,CAAE,MAAKC,wBAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,wBAAkBZ,SAAS,GAAG;AAAA,MACnC,GAAGc,YAAAA,MAAMC,WAAWC;AAAAA,MACpBC,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,YAAAA,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAId,aAAa;AAAA,QACfc,SAAS;AAAA,QACTC,cAAcZ,YAAAA,MAAMd,QAAQ0B;AAAAA,MAC9B;AAAA,MAEA,OAAO;AAAA,QACLT,SAAS;AAAA,QACTC,OAAO;AAAA,QACPS,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,QACV,GAAIlB,aAAa;AAAA,UAAEmB,WAAW;AAAA,QAAa;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAE,MAAKlC,cAAcO,OAAO,GAAG;AAAA,MAC7BsB,SAAS;AAAA,MACTM,cAAe,aAAYjB,YAAAA,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,MAAKpC,cAAcQ,iBAAiB,GAAG;AAAA,MACvCqB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,IACA,CAAE,MAAKtC,cAAcS,QAAQ,GAAG;AAAA,MAC9BY,SAAS;AAAA,MACTkB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAE,MAAKxC,cAAcU,OAAO,GAAG;AAAA,MAC7BY,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAKzC,cAAcY,WAAW,GAAG;AAAA,MACjCU,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAKzC,cAAcW,gBAAgB,GAAG;AAAA,MACtCW,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKtB,cAAca,cAAc,GAAG;AAAA,MACpCgB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {},\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n\nexport const popperSx = (useSingle: boolean) => {\n  return {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n      ...(useSingle && {\n        padding: \"15px 20px\",\n        borderRadius: theme.tooltip.borderRadius,\n      }),\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...(useSingle && { wordBreak: \"break-word\" }),\n      },\n    },\n    [`& .${staticClasses.title}`]: {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    [`& .${staticClasses.valuesContainer}`]: {\n      padding: theme.space.sm,\n    },\n    [`& .${staticClasses.values}`]: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    [`& .${staticClasses.color}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separator}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separatorColor}`]: {\n      width: \"5px\",\n    },\n    [`& .${staticClasses.valueWrapper}`]: {\n      padding: theme.space.sm,\n    },\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","title","valuesContainer","values","color","separatorColor","separator","valueWrapper","popperSx","useSingle","MuitooltipClasses","opacity","fontFamily","theme","body","typography","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","borderRadius","boxOrient","textOverflow","overflow","wordBreak","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;AAEYC,MAAAA,WAAWA,CAACC,cAAuB;AACvC,SAAA;AAAA,IACL,CAAE,MAAKC,wBAAkBV,QAAQ,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,wBAAkBZ,SAAS,GAAG;AAAA,MACnCc,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,YAAAA,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,YAAAA,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAIf,aAAa;AAAA,QACfe,SAAS;AAAA,QACTC,cAAcZ,YAAAA,MAAMf,QAAQ2B;AAAAA,MAC9B;AAAA,MAEA,OAAO;AAAA,QACLT,SAAS;AAAA,QACTC,OAAO;AAAA,QACPS,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,QACV,GAAInB,aAAa;AAAA,UAAEoB,WAAW;AAAA,QAAa;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAE,MAAKnC,cAAcO,OAAO,GAAG;AAAA,MAC7BuB,SAAS;AAAA,MACTM,cAAe,aAAYjB,YAAAA,MAAMO,OAAOW;AAAAA,IAC1C;AAAA,IACA,CAAE,MAAKrC,cAAcQ,iBAAiB,GAAG;AAAA,MACvCsB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,IACA,CAAE,MAAKvC,cAAcS,QAAQ,GAAG;AAAA,MAC9Ba,SAAS;AAAA,MACTkB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAE,MAAKzC,cAAcU,OAAO,GAAG;AAAA,MAC7Ba,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcY,WAAW,GAAG;AAAA,MACjCW,OAAOJ,YAAAA,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcW,gBAAgB,GAAG;AAAA,MACtCY,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKvB,cAAca,cAAc,GAAG;AAAA,MACpCiB,SAASX,YAAAA,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs

@@ -38,6 +38,9 @@ const HvVerticalNavigationAction = ({
       [classes.minimized]: !isOpen
     }, className),
     tabIndex: 0,
+    ...!isOpen && {
+      "aria-label": label
+    },
     onKeyDown: handleKeyDown,
     onClick,
     ...others,

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes: classesProp,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={cx(\n        classes.action,\n        {\n          [classes.noIcon]: !icon,\n          [classes.minimized]: !isOpen,\n        },\n        className\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </HvTypography>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IACVC,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes: classesProp,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={cx(\n        classes.action,\n        {\n          [classes.noIcon]: !icon,\n          [classes.minimized]: !isOpen,\n        },\n        className\n      )}\n      tabIndex={0}\n      {...(!isOpen && { \"aria-label\": label })}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </HvTypography>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IAAE,GACP,CAAChB,UAAU;AAAA,MAAE,cAAcJ;AAAAA,IAAM;AAAA,IACtCqB,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -8,7 +9,7 @@ import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
-const HvAvatar = (props) => {
+const HvAvatar = forwardRef((props, ref) => {
   const {
     className,
     style,
@@ -74,6 +75,7 @@ const HvAvatar = (props) => {
   }
   const badgeColor = getColor(badge || "", theme.colors.positive);
   return /* @__PURE__ */ jsx("div", {
+    ref,
     className: classes.container,
     ...others,
     children: /* @__PURE__ */ jsxs("div", {
@@ -95,7 +97,7 @@ const HvAvatar = (props) => {
       })]
     })
   });
-};
+});
 export {
   HvAvatar,
   staticClasses as avatarClasses

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = (props: HvAvatarProps) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","props","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;AAqEA,MAAMA,WAAWA,CAACC,OAAeC,iBAC/BC,MAAMC,OAAOH,KAAK,KAAKA,SAASC;AAMrBG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBd,QAAQ;AAAA,IACRe;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYpB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASkB;AAAAA,EAAAA,IAAOC,WAAWlB,WAAW;AAE1CC,MAAAA;AAGEkB,QAAAA,cAAcC,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AACpBrB,mCACE,OAAA;AAAA,MACEQ;AAAAA,MACAH;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAX,WAAWE,QAAQwB;AAAAA,MAAI,GACnBb;AAAAA,IAAAA,CACL;AAAA,EAAA,WAEMR,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFmB,UAAUZ,KAAK;AACxB,KAACR,QAAQ,IAAIQ;AAAAA,EAAAA,OACR;AACLR,mCACGuB,MAAI;AAAA,MACHjC;AAAAA,MACAkC,UAAUC,aAAatB,IAAI;AAAA,MAC3BP,WAAWE,QAAQ4B;AAAAA,IAAAA,CACpB;AAAA,EAEL;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG9B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDyB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYvB,kBAAkBf,SAC5Be,iBACAZ,MAAMC,OAAOoC,SACf;AACAF,gBAAYrC,QAAQD,SAASC,OAAOE,MAAMC,OAAOqC,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIrB,QAAQ;AAGV,UAAMsB,cAAc3C,SAASqB,QAAQlB,MAAMC,OAAOwC,QAAQ;AAC1DF,sBAAkBG,YAAa,yBAAwBF;AAAAA,EACzD;AAEA,QAAMG,aAAa9C,SAASsB,SAAS,IAAInB,MAAMC,OAAOwC,QAAQ;AAE9D,6BACE,OAAA;AAAA,IAAKrC,WAAWE,QAAQsC;AAAAA,IAAU,GAAKtB;AAAAA,IAAMd,+BAC3C,OAAA;AAAA,MACEJ,WAAWoB,GAAGlB,QAAQY,QAAQZ,QAAQc,OAAO,GAAGd,QAAQK,IAAI,CAAC;AAAA,MAC7DN,OAAOkC;AAAAA,MAAkB/B,UAAA,CAExBW,SACC0B,oBAAA,OAAA;AAAA,QACEzC,WAAWE,QAAQa;AAAAA,QACnBd,OAAO;AAAA,UAAEO,iBAAiB+B;AAAAA,QAAW;AAAA,MAAA,CACtC,GAEHE,oBAACC,WAAS;AAAA,QACRpC;AAAAA,QAEAN,WAAWoB,GAAGlB,QAAQyC,MAAMzC,QAAQ0C,QAAQ1C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpEC,OAAO8B;AAAAA,QACPf;AAAAA,QACAT;AAAAA,QAAW,GACPU;AAAAA,QAAWb;AAAAA,MAAAA,CAGN,CAAC;AAAA,IAAA,CACT;AAAA,EAAA,CACF;AAET;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","forwardRef","props","ref","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;;AAqEA,MAAMA,WAAWA,CAACC,OAAeC,iBAC/BC,MAAMC,OAAOH,KAAK,KAAKA,SAASC;AAM3B,MAAMG,WAAWC,WAA+B,CAACC,OAAOC,QAAQ;AAC/D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBhB,QAAQ;AAAA,IACRiB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYrB,KAAK;AAC/B,QAAA;AAAA,IAAEI;AAAAA,IAASkB;AAAAA,EAAAA,IAAOC,WAAWlB,WAAW;AAE1CC,MAAAA;AAGEkB,QAAAA,cAAcC,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AACpBrB,mCACE,OAAA;AAAA,MACEQ;AAAAA,MACAH;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAX,WAAWE,QAAQwB;AAAAA,MAAI,GACnBb;AAAAA,IAAAA,CACL;AAAA,EAAA,WAEMR,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFmB,UAAUZ,KAAK;AACxB,KAACR,QAAQ,IAAIQ;AAAAA,EAAAA,OACR;AACLR,mCACGuB,MAAI;AAAA,MACHnC;AAAAA,MACAoC,UAAUC,aAAatB,IAAI;AAAA,MAC3BP,WAAWE,QAAQ4B;AAAAA,IAAAA,CACpB;AAAA,EAEL;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG9B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDyB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYvB,kBAAkBjB,SAC5BiB,iBACAd,MAAMC,OAAOsC,SACf;AACAF,gBAAYvC,QAAQD,SAASC,OAAOE,MAAMC,OAAOuC,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIrB,QAAQ;AAGV,UAAMsB,cAAc7C,SAASuB,QAAQpB,MAAMC,OAAO0C,QAAQ;AAC1DF,sBAAkBG,YAAa,yBAAwBF;AAAAA,EACzD;AAEA,QAAMG,aAAahD,SAASwB,SAAS,IAAIrB,MAAMC,OAAO0C,QAAQ;AAE9D,6BACE,OAAA;AAAA,IAAKtC;AAAAA,IAAUC,WAAWE,QAAQsC;AAAAA,IAAU,GAAKtB;AAAAA,IAAMd,+BACrD,OAAA;AAAA,MACEJ,WAAWoB,GAAGlB,QAAQY,QAAQZ,QAAQc,OAAO,GAAGd,QAAQK,IAAI,CAAC;AAAA,MAC7DN,OAAOkC;AAAAA,MAAkB/B,UAAA,CAExBW,SACC0B,oBAAA,OAAA;AAAA,QACEzC,WAAWE,QAAQa;AAAAA,QACnBd,OAAO;AAAA,UAAEO,iBAAiB+B;AAAAA,QAAW;AAAA,MAAA,CACtC,GAEHE,oBAACC,WAAS;AAAA,QACRpC;AAAAA,QAEAN,WAAWoB,GAAGlB,QAAQyC,MAAMzC,QAAQ0C,QAAQ1C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpEC,OAAO8B;AAAAA,QACPf;AAAAA,QACAT;AAAAA,QAAW,GACPU;AAAAA,QAAWb;AAAAA,MAAAA,CAGN,CAAC;AAAA,IAAA,CACT;AAAA,EAAA,CACF;AAET,CAAC;"}

package/dist/esm/components/BaseDropdown/BaseDropdown.js

@@ -21,7 +21,7 @@ import { HvTypography } from "../Typography/Typography.js";
 const HvBaseDropdown = (props) => {
   var _a;
   const {
-    id,
+    id: idProp,
     className,
     classes: classesProp,
     children,
@@ -37,13 +37,15 @@ const HvBaseDropdown = (props) => {
     required,
     disablePortal,
     variableWidth,
-    placement = "right",
+    placement: placementProp = "right",
+    "aria-expanded": ariaExpandedProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
     popperProps = {},
     dropdownHeaderRef: dropdownHeaderRefProp,
     onToggle,
     onClickOutside,
     onContainerCreation,
-    "aria-expanded": ariaExpandedProp,
     ...others
   } = useDefaultProps("HvBaseDropdown", props);
   const {
@@ -61,8 +63,20 @@ const HvBaseDropdown = (props) => {
   const handleDropdownHeaderRef = useForkRef(setReferenceElement, handleDropdownHeaderRefProp);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-  const elementId = useUniqueId(id, "hvbasedropdown");
-  const bottom = placement && `bottom-${placement === "right" ? "start" : "end"}`;
+  const id = useUniqueId(idProp, "hvbasedropdown");
+  const containerId = setId(id, "children-container");
+  const headerControlArias = {
+    "aria-required": required ?? void 0,
+    "aria-readonly": readOnly ?? void 0,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": isOpen ? containerId : void 0,
+    "aria-controls": isOpen ? containerId : void 0
+  };
+  const headerAriaLabels = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp
+  };
+  const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
   const extensionWidth = referenceElement ? referenceElement == null ? void 0 : referenceElement.offsetWidth : "inherit";
   const {
     modifiers: popperPropsModifiers = [],
@@ -144,7 +158,7 @@ const HvBaseDropdown = (props) => {
     styles: popperStyles,
     attributes
   } = usePopper(referenceElement, popperElement, {
-    placement: bottom,
+    placement,
     modifiers,
     onFirstUpdate,
     ...otherPopperProps
@@ -173,7 +187,8 @@ const HvBaseDropdown = (props) => {
   const headerComponent = (() => {
     if (component) {
       return React__default.cloneElement(component, {
-        ref: handleDropdownHeaderRef
+        ref: handleDropdownHeaderRef,
+        ...headerControlArias
       });
     }
     const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
@@ -187,13 +202,10 @@ const HvBaseDropdown = (props) => {
         [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
       }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
       style: disabled || readOnly ? {
         pointerEvents: "none"
       } : void 0,
-      "aria-label": others["aria-label"] ?? void 0,
-      "aria-labelledby": others["aria-labelledby"] ?? void 0,
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
       tabIndex: disabled ? -1 : 0,
       ref: handleDropdownHeaderRef,
       ...dropdownHeaderProps,
@@ -239,7 +251,6 @@ const HvBaseDropdown = (props) => {
       }
     };
     const container = /* @__PURE__ */ jsx("div", {
-      role: "tooltip",
       ref: setPopperElement,
       className: classes.container,
       style: popperStyles.popper,
@@ -258,7 +269,7 @@ const HvBaseDropdown = (props) => {
           }), /* @__PURE__ */ jsx(BaseDropdownContext.Provider, {
             value: popperMaxSize,
             children: /* @__PURE__ */ jsx("div", {
-              id: setId(elementId, "children-container"),
+              id: containerId,
               className: cx(classes.panel, {
                 [classes.panelOpenedUp]: popperPlacement.includes("top"),
                 [classes.panelOpenedDown]: popperPlacement.includes("bottom")
@@ -285,12 +296,6 @@ const HvBaseDropdown = (props) => {
     className: classes.root,
     children: [/* @__PURE__ */ jsx("div", {
       id,
-      role: ariaRole,
-      "aria-expanded": ariaExpanded,
-      "aria-owns": isOpen ? setId(elementId, "children-container") : void 0,
-      "aria-controls": isOpen ? setId(elementId, "children-container") : void 0,
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
       className: cx(classes.anchor, {
         [classes.rootDisabled]: disabled
       }, className),
@@ -298,6 +303,11 @@ const HvBaseDropdown = (props) => {
         onKeyDown: handleToggle,
         onClick: handleToggle
       },
+      ...ariaRole && {
+        role: ariaRole,
+        ...headerAriaLabels,
+        ...headerControlArias
+      },
       // Removes the element from the navigation sequence for keyboard focus
       tabIndex: -1,
       ...others,