@hitachivantara/uikit-react-core 5.30.0 → 5.31.0

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = (props: HvDatePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    onChange,\n    onCancel,\n    onClear,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n\n    labels: labelsProp,\n\n    value,\n    startValue,\n    endValue,\n\n    expanded,\n    defaultExpanded,\n    onToggle,\n    rangeMode = false,\n    startAdornment,\n    horizontalPlacement = \"right\",\n    locale: localeProp,\n    showActions = false,\n    showClear = false,\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    calendarProps,\n    ...others\n  } = useDefaultProps(\"HvDatePicker\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n  const endDateIsSet = useRef(false);\n  endDateIsSet.current = endDate != null;\n\n  useEffect(() => {\n    if (startDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: endDateIsSet.current ? \"left\" : \"best\",\n        year: startDate.getFullYear(),\n        month: startDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, startDate]);\n\n  useEffect(() => {\n    if (endDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: \"right\",\n        year: endDate.getFullYear(),\n        month: endDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, endDate]);\n\n  /**\n   * Handles the `Apply` action. Both single and ranged modes are handled here.\n   */\n  const handleApply = () => {\n    setStartDate(startDate, true);\n    setEndDate(endDate ?? startDate, true);\n\n    onChange?.(startDate, endDate);\n\n    setValidationState(() => {\n      // this will only run if status is uncontrolled\n      if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    onToggle?.(evt, open);\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n    event,\n    newDate,\n    position\n  ) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event as any, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n      {showClear && (\n        <div className={classes.leftContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"clear\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleClear}\n          >\n            {labels?.clearLabel}\n          </HvButton>\n        </div>\n      )}\n      <div className={classes.rightContainer}>\n        <HvButton\n          id={setId(id, \"action\", \"apply\")}\n          className={classes.action}\n          variant=\"primaryGhost\"\n          onClick={handleApply}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"action\", \"cancel\")}\n          className={classes.action}\n          variant=\"primaryGhost\"\n          onClick={handleCancel}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </div>\n    </HvActionBar>\n  );\n\n  const renderInput = (dateString: string) => {\n    return (\n      <HvTypography\n        color={theme.colors.secondary}\n        className={cx(classes.inputText, { [classes.dateText]: dateString })}\n        variant=\"label\"\n      >\n        {(dateString || placeholder) === undefined\n          ? \"\"\n          : dateString || placeholder}\n      </HvTypography>\n    );\n  };\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\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      value={dateValue}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      className={cx(classes.root, className)}\n      readOnly={readOnly}\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        role=\"combobox\"\n        classes={{\n          root: classes.dropdown,\n          panel: classes.panel,\n          header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        readOnly={readOnly}\n        disabled={disabled}\n        disablePortal={disablePortal}\n        variableWidth\n        placement={horizontalPlacement}\n        expanded={calendarOpen}\n        onToggle={handleToggle}\n        onClickOutside={handleCalendarClose}\n        onContainerCreation={focusOnContainer}\n        placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n        adornment={\n          <Calendar\n            className={classes.icon}\n            color={disabled ? \"secondary_80\" : undefined}\n          />\n        }\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        aria-haspopup=\"dialog\"\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        {...dropdownProps}\n      >\n        <div ref={focusTarget} tabIndex={-1} />\n        <HvCalendar\n          id={setId(id, \"calendar\")}\n          startAdornment={startAdornment}\n          onChange={handleDateChange}\n          onInputChange={handleInputDateChange}\n          onVisibleDateChange={(_event, type, month, target) => {\n            dispatchAction({ type, target, month });\n          }}\n          locale={locale}\n          {...visibleDate}\n          {...calendarProps}\n          invalidDateLabel={labels?.invalidDateLabel}\n        />\n        {(rangeMode || showActions) && renderActions()}\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={cx(classes.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","actionContainer","leftContainer","setId","action","rightContainer","renderInput","dateString","theme","colors","secondary","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","root","labelContainer","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","icon","modifiers","enabled","join","trim","_event","invalidDateLabel","error"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdatepicker\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      const shouldSave = !(rangeMode || showActions);\n      if (shouldSave) {\n        handleApply();\n      } else {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\n      );\n    };\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\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        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n          adornment={\n            <Calendar\n              className={classes.icon}\n              color={disabled ? \"secondary_80\" : undefined}\n            />\n          }\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\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          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","forwardRef","props","ref","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","refProp","otherDropdownProps","dropdownForkedRef","useForkRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","actionContainer","leftContainer","setId","action","rightContainer","renderInput","dateString","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","root","labelContainer","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","icon","modifiers","enabled","join","trim","_event","invalidDateLabel","error"],"mappings":"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"}

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import { forwardRef, useState, useEffect, useRef } from "react";
+import { useForkRef } from "@mui/material";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
@@ -24,7 +25,7 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search",
   multiSelectionConjunction: "/"
 };
-const HvDropdown = (props) => {
+const HvDropdown = forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -89,6 +90,13 @@ const HvDropdown = (props) => {
     console.error("Dropdown/List in virtualized mode requires a height. Please define it.");
   }
   const dropdownHeaderRef = useRef();
+  const {
+    ref: refProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    ...otherBaseDropdownProps
+  } = baseDropdownProps;
+  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);
+  const dropdownForkedRef = useForkRef(ref, refProp);
   const handleToggle = (event, open) => {
     onToggle == null ? void 0 : onToggle(event, open);
     setIsOpen(open);
@@ -180,7 +188,7 @@ const HvDropdown = (props) => {
       hasLabel && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), label, className: classes.label }),
       hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description })
     ] }),
-    /* @__PURE__ */ jsx(HvBaseDropdown, { id: setId(id, "dropdown"), classes: {
+    /* @__PURE__ */ jsx(HvBaseDropdown, { ref: dropdownForkedRef, id: setId(id, "dropdown"), classes: {
       root: cx(classes.dropdown, {
         [classes.readOnly]: readOnly
       }),
@@ -189,13 +197,13 @@ const HvDropdown = (props) => {
         [classes.dropdownHeaderInvalid]: isStateInvalid
       }),
       headerOpen: classes.dropdownHeaderOpen
-    }, expanded: isOpen, disabled, readOnly, required, disablePortal, placement, popperProps, placeholder: buildHeaderLabel(), onToggle: handleToggle, onClickOutside: handleClickOutside, onContainerCreation: setFocusToContent, role: "combobox", variableWidth, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, onFocus, onBlur, dropdownHeaderRef, ...baseDropdownProps, children: /* @__PURE__ */ jsx(HvDropdownList, { id: setId(elementId, "values"), classes: {
+    }, expanded: isOpen, disabled, readOnly, required, disablePortal, placement, popperProps, placeholder: buildHeaderLabel(), onToggle: handleToggle, onClickOutside: handleClickOutside, onContainerCreation: setFocusToContent, role: "combobox", variableWidth, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, onFocus, onBlur, dropdownHeaderRef: headerForkedRef, ...otherBaseDropdownProps, children: /* @__PURE__ */ jsx(HvDropdownList, { id: setId(elementId, "values"), classes: {
       rootList: classes.rootList,
       dropdownListContainer: classes.dropdownListContainer
     }, values: internalValues, multiSelect, showSearch, onChange: handleSelection, onCancel: handleCancel, labels, notifyChangesOnFirstRender, hasTooltips, singleSelectionToggle, "aria-label": ariaLabel, "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0, height, maxHeight, virtualized, ...listProps }) }),
     canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
   ] });
-};
+});
 export {
   HvDropdown,
   staticClasses as dropdownClasses

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\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   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: 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   * 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 } = 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(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={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","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","selectionDisabled","placeholderClosed","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","root","labelContainer","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","rootList","dropdownListContainer"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps, useForkRef } 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   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: 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   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: 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 = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n    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 {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection = 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\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","forwardRef","props","ref","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","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","refProp","dropdownHeaderRefProp","otherBaseDropdownProps","headerForkedRef","useForkRef","dropdownForkedRef","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","selectionDisabled","placeholderClosed","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","root","labelContainer","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","rootList","dropdownListContainer"],"mappings":"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"}

package/dist/esm/components/EmptyState/EmptyState.js

@@ -25,7 +25,7 @@ const HvEmptyState = (props) => {
   const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
   const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
   const messageOnly = !!(message && !(title || action));
-  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { variant, className: style, children: node });
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant, className: style, children: node });
   return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs("div", { className: cx(classes.container, onlyXs && css({
     flexDirection: "column",
     alignItems: "center",

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\"title4\", title, classes.titleContainer)}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAEnD,QAAMO,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEjB,WAAW,EAAED,SAASF;AAEvCqB,QAAAA,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACE,oBAAC,cAAa,EAAA,SAAkB,WAAWC,OACxCD,UACH,KAAA,CAAA;AAGJ,6BACG,OAAI,EAAA,WAAWd,GAAGL,QAAQqB,MAAMnB,SAAS,GAAG,GAAIC,QAC/C,+BAAC,OACC,EAAA,WAAWE,GACTL,QAAQsB,WACRZ,UACEJ,IAAI;AAAA,IACFiB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAACzB,QAAQ0B,oBAAoB,GAAGV;AAAAA,EAAAA,GAElCN,UAAUM,eAAeV,IAAI;AAAA,IAAEiB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWvB,QAAQ2B,eAAgB9B,UAAK,MAAA;AAAA,yBAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQ4B,eACRd,QAAQR,IAAI;AAAA,MAAEuB,YAAYC,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECf,UAAAA;AAAAA,MAAW,WAAA,UAAUnB,OAAOE,QAAQiC,cAAc;AAAA,MAClDhB,WAAW,QAAQlB,SAASC,QAAQkC,gBAAgB;AAAA,MACpDjB,WAAW,QAAQrB,QAAQI,QAAQmC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: React.ReactNode;\n  /** The message to be shown. */\n  message?: React.ReactNode;\n  /** The action message to be shown. */\n  action?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography component=\"div\" variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\"title4\", title, classes.titleContainer)}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAEnD,QAAMO,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEjB,WAAW,EAAED,SAASF;AAE7C,QAAMqB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACG,oBAAA,cAAA,EAAa,WAAU,OAAM,SAAkB,WAAWC,OACxDD,UACH,KAAA,CAAA;AAGJ,6BACG,OAAI,EAAA,WAAWd,GAAGL,QAAQqB,MAAMnB,SAAS,GAAG,GAAIC,QAC/C,+BAAC,OACC,EAAA,WAAWE,GACTL,QAAQsB,WACRZ,UACEJ,IAAI;AAAA,IACFiB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAACzB,QAAQ0B,oBAAoB,GAAGV;AAAAA,EAAAA,GAElCN,UAAUM,eAAeV,IAAI;AAAA,IAAEiB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWvB,QAAQ2B,eAAgB9B,UAAK,MAAA;AAAA,yBAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQ4B,eACRd,QAAQR,IAAI;AAAA,MAAEuB,YAAYC,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECf,UAAAA;AAAAA,MAAW,WAAA,UAAUnB,OAAOE,QAAQiC,cAAc;AAAA,MAClDhB,WAAW,QAAQlB,SAASC,QAAQkC,gBAAgB;AAAA,MACpDjB,WAAW,QAAQrB,QAAQI,QAAQmC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/FilterGroup/FilterContent/FilterContent.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useState, useContext, useRef, useMemo } from "react";
+import { forwardRef, useState, useContext, useRef, useMemo } from "react";
 import { Filters } from "@hitachivantara/uikit-react-icons";
 import { useTheme } from "../../../hooks/useTheme.js";
 import { setId } from "../../../utils/setId.js";
@@ -14,7 +14,7 @@ import { HvTypography } from "../../Typography/Typography.js";
 import { HvBaseDropdown } from "../../BaseDropdown/BaseDropdown.js";
 import { HvFilterGroupCounter } from "../Counter/Counter.js";
 import { HvActionBar } from "../../ActionBar/ActionBar.js";
-const HvFilterGroupContent = (props) => {
+const HvFilterGroupContent = forwardRef((props, ref) => {
   const {
     id,
     status,
@@ -81,7 +81,7 @@ const HvFilterGroupContent = (props) => {
     /* @__PURE__ */ jsx(Filters, {}),
     /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: labels == null ? void 0 : labels.placeholder })
   ] }), [labels == null ? void 0 : labels.placeholder]);
-  return /* @__PURE__ */ jsxs(HvBaseDropdown, { id: setId(id, "dropdown"), role: "combobox", classes: {
+  return /* @__PURE__ */ jsxs(HvBaseDropdown, { ref, id: setId(id, "dropdown"), role: "combobox", classes: {
     root: classes.dropdown,
     panel: classes.panel,
     selection: classes.baseDropdownSelection,
@@ -106,7 +106,7 @@ const HvFilterGroupContent = (props) => {
       /* @__PURE__ */ jsx(HvButton, { id: setId(id, "cancel-button"), variant: activeTheme == null ? void 0 : activeTheme.filterGroup.cancelButtonVariant, onClick: onCancelHandler, children: labels == null ? void 0 : labels.cancelLabel })
     ] })
   ] });
-};
+});
 export {
   HvFilterGroupContent,
   staticClasses as filterGroupContentClasses

package/dist/esm/components/FilterGroup/FilterContent/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { useContext, useMemo, useRef, useState } from \"react\";\n\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvFormStatus } from \"@core/components/Forms\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = (props: HvFilterGroupContentProps) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <HvBaseDropdown\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvFilterGroupContent","props","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","leftEmptyElement","rightEmptyElement","classes","classesProp","others","useDefaultProps","useClasses","activeTheme","useTheme","filterGroupOpen","setFilterGroupOpen","useState","defaultValue","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","useContext","HvFilterGroupContext","focusTarget","useRef","focusOnContainer","current","focus","onApplyHandler","event","onCancelHandler","onClearHandler","handleToggle","open","Header","useMemo","placeholder","setId","root","dropdown","panel","selection","baseDropdownSelection","header","modifiers","name","enabled","undefined","join","trim","leftSidePanel","rightSidePanel","actionBar","flat","length","clearLabel","space","filterGroup","applyButtonVariant","applyButton","applyLabel","cancelButtonVariant","cancelLabel"],"mappings":"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"}
+{"version":3,"file":"FilterContent.js","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\n\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvFormStatus } from \"@core/components/Forms\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvFilterGroupContent","forwardRef","props","ref","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","leftEmptyElement","rightEmptyElement","classes","classesProp","others","useDefaultProps","useClasses","activeTheme","useTheme","filterGroupOpen","setFilterGroupOpen","useState","defaultValue","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","useContext","HvFilterGroupContext","focusTarget","useRef","focusOnContainer","current","focus","onApplyHandler","event","onCancelHandler","onClearHandler","handleToggle","open","Header","useMemo","placeholder","setId","root","dropdown","panel","selection","baseDropdownSelection","header","modifiers","name","enabled","undefined","join","trim","leftSidePanel","rightSidePanel","actionBar","flat","length","clearLabel","space","filterGroup","applyButtonVariant","applyButton","applyLabel","cancelButtonVariant","cancelLabel"],"mappings":"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"}

package/dist/esm/components/FilterGroup/FilterGroup.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
 import { useLabels } from "../../hooks/useLabels.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
@@ -21,7 +22,7 @@ const DEFAULT_LABELS = {
   selectAll: "All",
   multiSelectionConjunction: "/"
 };
-const HvFilterGroup = (props) => {
+const HvFilterGroup = forwardRef((props, ref) => {
   const {
     className,
     id,
@@ -66,11 +67,11 @@ const HvFilterGroup = (props) => {
       hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description })
     ] }),
     /* @__PURE__ */ jsxs(HvFilterGroupProvider, { defaultValue, value, filters, children: [
-      /* @__PURE__ */ jsx(HvFilterGroupContent, { id: elementId, disabled, disablePortal, variableWidth: true, placement: horizontalPlacement, escapeWithReference, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, status, onChange, onCancel, onClear, labels, height, ...filterContentProps }),
+      /* @__PURE__ */ jsx(HvFilterGroupContent, { ref, id: elementId, disabled, disablePortal, variableWidth: true, placement: horizontalPlacement, escapeWithReference, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, status, onChange, onCancel, onClear, labels, height, ...filterContentProps }),
       canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
     ] })
   ] });
-};
+});
 export {
   HvFilterGroup,
   staticClasses as filterGroupClasses

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

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.js","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = (props: HvFilterGroupProps) => {\n  const {\n    className,\n    id,\n    name,\n    required = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    status,\n    statusMessage,\n    labels: labelsProp,\n    defaultValue,\n    value,\n    filters,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height = 350,\n    filterContentProps,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroup\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  // Error message area will only be needed if the status is being controlled\n  // or if required is true\n  const canShowError = status !== undefined || required;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={value}\n      status={status}\n      disabled={disabled}\n      required={required}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvFilterGroupProvider\n        defaultValue={defaultValue}\n        value={value}\n        filters={filters}\n      >\n        <HvFilterGroupContent\n          id={elementId}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          escapeWithReference={escapeWithReference}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          status={status}\n          onChange={onChange}\n          onCancel={onCancel}\n          onClear={onClear}\n          labels={labels}\n          height={height}\n          {...filterContentProps}\n        />\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFilterGroupProvider>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","props","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","classesProp","others","useDefaultProps","cx","useClasses","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","root","labelContainer","setId","error"],"mappings":";;;;;;;;;;;;;;AAgGA,MAAMA,iBAAsC;AAAA,EAC1CC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,2BAA2B;AAC7B;AAOaC,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,sBAAsB;AAAA,IACtBC,SAAS;AAAA,IACTC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiB7B,KAAK;AAEpC,QAAA;AAAA,IAAE0B;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,WAAWJ,WAAW;AAC9C,QAAM,CAACK,iBAAiB,IAAIC,cAAclB,eAAe,UAAU;AAE7DmB,QAAAA,YAAYC,YAAYjC,IAAI,eAAe;AAE3Cc,QAAAA,SAASoB,UAAU7C,gBAAgB0B,UAAU;AAEnD,QAAMoB,WAAW/B,SAAS;AAE1B,QAAMgC,iBAAiB7B,eAAe;AAIhC8B,QAAAA,eAAezB,WAAW0B,UAAapC;AAE7C,SACG,qBAAA,eAAA,EACC,IACA,MACA,OACA,QACA,UACA,UACA,WAAW0B,GAAGJ,QAAQe,MAAMxC,SAAS,GACjC2B,GAAAA,QAEFS,UAAAA;AAAAA,KAAAA,YAAYC,mBACZ,qBAAC,OAAI,EAAA,WAAWZ,QAAQgB,gBACrBL,UAAAA;AAAAA,MAAAA,YACE,oBAAA,SAAA,EACC,IAAIM,MAAMT,WAAW,OAAO,GAC5B,SAASS,MAAMT,WAAW,OAAO,GACjC,OACA,WAAWR,QAAQpB,OAEtB;AAAA,MAEAgC,kBACE,oBAAA,eAAA,EACC,IAAIK,MAAMT,WAAW,aAAa,GAClC,WAAWR,QAAQjB,aAElBA,UACH,YAAA,CAAA;AAAA,IAAA,GAEJ;AAAA,IAED,qBAAA,uBAAA,EACC,cACA,OACA,SAEA,UAAA;AAAA,MAAC,oBAAA,sBAAA,EACC,IAAIyB,WACJ,UACA,eACA,eAAa,MACb,WAAWb,qBACX,qBACA,cAAYd,WACZ,mBAAiBC,gBACjB,QACA,UACA,UACA,SACA,QACA,QACA,GAAIiB,mBAAmB,CAAA;AAAA,MAExBc,gBACC,oBAAC,eACC,EAAA,IAAII,MAAMT,WAAW,OAAO,GAC5B,eAAa,MACb,WAAWR,QAAQkB,OAElBZ,UACH,mBAAA;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"FilterGroup.js","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","forwardRef","props","ref","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","classesProp","others","useDefaultProps","cx","useClasses","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","root","labelContainer","setId","error"],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAMA,iBAAsC;AAAA,EAC1CC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,2BAA2B;AAC7B;AAOO,MAAMC,gBAAgBC,WAC3B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,sBAAsB;AAAA,IACtBC,SAAS;AAAA,IACTC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiB9B,KAAK;AAEpC,QAAA;AAAA,IAAE2B;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,WAAWJ,WAAW;AAC9C,QAAM,CAACK,iBAAiB,IAAIC,cAAclB,eAAe,UAAU;AAE7DmB,QAAAA,YAAYC,YAAYjC,IAAI,eAAe;AAE3Cc,QAAAA,SAASoB,UAAU/C,gBAAgB4B,UAAU;AAEnD,QAAMoB,WAAW/B,SAAS;AAE1B,QAAMgC,iBAAiB7B,eAAe;AAIhC8B,QAAAA,eAAezB,WAAW0B,UAAapC;AAE7C,SACG,qBAAA,eAAA,EACC,IACA,MACA,OACA,QACA,UACA,UACA,WAAW0B,GAAGJ,QAAQe,MAAMxC,SAAS,GACjC2B,GAAAA,QAEFS,UAAAA;AAAAA,KAAAA,YAAYC,mBACZ,qBAAC,OAAI,EAAA,WAAWZ,QAAQgB,gBACrBL,UAAAA;AAAAA,MAAAA,YACE,oBAAA,SAAA,EACC,IAAIM,MAAMT,WAAW,OAAO,GAC5B,SAASS,MAAMT,WAAW,OAAO,GACjC,OACA,WAAWR,QAAQpB,OAEtB;AAAA,MAEAgC,kBACE,oBAAA,eAAA,EACC,IAAIK,MAAMT,WAAW,aAAa,GAClC,WAAWR,QAAQjB,aAElBA,UACH,YAAA,CAAA;AAAA,IAAA,GAEJ;AAAA,IAED,qBAAA,uBAAA,EACC,cACA,OACA,SAEA,UAAA;AAAA,MAAC,oBAAA,sBAAA,EACC,KACA,IAAIyB,WACJ,UACA,eACA,eAAa,MACb,WAAWb,qBACX,qBACA,cAAYd,WACZ,mBAAiBC,gBACjB,QACA,UACA,UACA,SACA,QACA,QACA,GAAIiB,mBAAmB,CAAA;AAAA,MAExBc,gBACC,oBAAC,eACC,EAAA,IAAII,MAAMT,WAAW,OAAO,GAC5B,eAAa,MACb,WAAWR,QAAQkB,OAElBZ,UACH,mBAAA;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,CACF;"}

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js

@@ -93,7 +93,18 @@ const HvHeaderMenuItem = (props) => {
     [classes.menubar]: !isMenu,
     [classes.selected]: !!isSelected
   }, className), children: [
-    itemHref ? /* @__PURE__ */ jsx("a", { className: classes.link, href: itemHref, target: itemTarget, ...itemProps, "aria-current": isCurrent, children: label }) : (
+    itemHref ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: classes.link,
+        href: itemHref,
+        target: itemTarget,
+        ...itemProps,
+        "aria-current": isCurrent,
+        "aria-label": item.label,
+        children: label
+      }
+    ) : (
       // keeping this code path for backwards compatibility, but
       // shouldn't really be used as it's not accessible
       /* @__PURE__ */ jsx("div", { className: classes.button, role: "button", ...itemProps, tabIndex: 0, "aria-current": isCurrent, children: label })