@hitachivantara/uikit-react-core 5.30.0 → 5.31.0

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps, descriptionProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage\n              className={classes.description}\n              {...descriptionProps}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={fieldProps[\"aria-labelledby\"]}\n        aria-describedby={fieldProps[\"aria-describedby\"]}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","jsxs","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","jsx","HvBaseDropdown","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","TimeIcon","icon","evt","newOpen","containerRef","getElementsByTagName","focus","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","increment","decrement","val","setSegment","Number","HvWarningText","error"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","forwardRef","props","ref","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","cx","useClasses","timeFieldRef","useRef","refProp","otherDropdownProps","dropdownForkedRef","useForkRef","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","jsxs","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","jsx","HvBaseDropdown","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","TimeIcon","icon","evt","newOpen","containerRef","getElementsByTagName","focus","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","increment","decrement","val","setSegment","Number","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -250,6 +250,7 @@ const InlineEditor_styles = require("./components/InlineEditor/InlineEditor.styl
 const InlineEditor = require("./components/InlineEditor/InlineEditor.cjs");
 const TimeAgo_styles = require("./components/TimeAgo/TimeAgo.styles.cjs");
 const TimeAgo = require("./components/TimeAgo/TimeAgo.cjs");
+const Context = require("./components/QueryBuilder/Context.cjs");
 const QueryBuilder_styles = require("./components/QueryBuilder/QueryBuilder.styles.cjs");
 const QueryBuilder = require("./components/QueryBuilder/QueryBuilder.cjs");
 const ColorPicker_styles = require("./components/ColorPicker/ColorPicker.styles.cjs");
@@ -607,6 +608,9 @@ exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = InlineEditor.HvInlineEditor;
 exports.timeAgoClasses = TimeAgo_styles.staticClasses;
 exports.HvTimeAgo = TimeAgo.HvTimeAgo;
+exports.hvQueryBuilderDefaultCombinators = Context.defaultCombinators;
+exports.hvQueryBuilderDefaultLabels = Context.defaultLabels;
+exports.hvQueryBuilderDefaultOperators = Context.defaultOperators;
 exports.queryBuilderClasses = QueryBuilder_styles.staticClasses;
 exports.HvQueryBuilder = QueryBuilder.HvQueryBuilder;
 exports.colorPickerClasses = ColorPicker_styles.staticClasses;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/useSavedState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSavedState.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(\n  defaultState: T\n): [T | undefined, (v?: T, s?: boolean) => void, () => void, T | undefined, T] {\n  const [initialState] = useState<T>(defaultState);\n\n  const [state, setState] = useState<T | undefined>(initialState);\n  const [submittedState, setSubmittedState] = useState<T | undefined>(\n    initialState\n  );\n\n  const changeState = useCallback((value?: T, save = false) => {\n    setState(value);\n    if (save) setSubmittedState(value);\n  }, []);\n\n  const rollback = () => {\n    setState(submittedState);\n  };\n\n  return [state, changeState, rollback, submittedState, initialState];\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";;;AAEO,SAASA,cACdC,cAC6E;AAC7E,QAAM,CAACC,YAAY,IAAIC,MAAAA,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,eAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,eAC1CD,YACF;AAEA,QAAMM,cAAcC,MAAAA,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;;"}
+{"version":3,"file":"useSavedState.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n  const [initialState] = useState<T>(defaultState);\n\n  const [state, setState] = useState<T | undefined>(initialState);\n  const [submittedState, setSubmittedState] = useState<T | undefined>(\n    initialState\n  );\n\n  const changeState = useCallback((value?: T, save = false) => {\n    setState(value);\n    if (save) setSubmittedState(value);\n  }, []);\n\n  const rollback = () => {\n    setState(submittedState);\n  };\n\n  return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";;;AAEO,SAASA,cAAiBC,cAAiB;AAChD,QAAM,CAACC,YAAY,IAAIC,MAAAA,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,eAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,eAC1CD,YACF;AAEA,QAAMM,cAAcC,MAAAA,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;;"}

package/dist/esm/components/ActionBar/ActionBar.styles.js

@@ -7,7 +7,7 @@ const {
   root: {
     width: "100%",
     padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.atmo3}`,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/esm/components/ActionBar/ActionBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.js","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo3","display","alignItems","justifyContent"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,MAAMI,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;"}
+{"version":3,"file":"ActionBar.styles.js","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo4","display","alignItems","justifyContent"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,MAAMI,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;"}

package/dist/esm/components/BaseCheckBox/BaseCheckBox.js

@@ -1,8 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { forwardRef, useState, useCallback } from "react";
+import MuiCheckbox from "@mui/material/Checkbox";
 import { Checkbox, CheckboxPartial, CheckboxCheck } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import MuiCheckbox from "@mui/material/Checkbox";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
 const getSelectorIcons = (options, classes) => {
@@ -18,7 +18,7 @@ const getSelectorIcons = (options, classes) => {
     checkboxChecked: /* @__PURE__ */ jsx(CheckboxCheck, { color: checkedColor, className: classes.icon })
   };
 };
-const HvBaseCheckBox = (props) => {
+const HvBaseCheckBox = forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -61,11 +61,11 @@ const HvBaseCheckBox = (props) => {
     setFocusVisible(true);
     onFocusVisible == null ? void 0 : onFocusVisible(event);
   }, [onFocusVisible]);
-  return /* @__PURE__ */ jsx(MuiCheckbox, { id, name, value, className: cx(classes.root, {
+  return /* @__PURE__ */ jsx(MuiCheckbox, { ref, id, name, value, className: cx(classes.root, {
     [classes.disabled]: disabled,
     [classes.focusVisible]: focusVisible
   }, className), icon: icons.checkbox, indeterminateIcon: icons.checkboxPartial, checkedIcon: icons.checkboxChecked, disabled, required, readOnly, checked, defaultChecked, indeterminate, inputProps, onChange: onChangeCallback, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, color: "default", disableRipple: true, ...others });
-};
+});
 export {
   HvBaseCheckBox,
   staticClasses as baseCheckBoxClasses

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.js","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = (props: HvBaseCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","props","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","root"],"mappings":";;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAW,oBAAAC,UAAA,EAAa,OAAc,WAAWP,QAAQQ,MAAQ;AAAA,IACjEC,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAWV,QAAQQ,MACvD;AAAA,IACDG,iBACG,oBAAAC,eAAA,EAAkB,OAAOP,cAAc,WAAWL,QAAQQ,MAAK;AAAA,EAAA;AAGtE;AAQaK,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAf,SAASgB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX3B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG2B;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBhB,KAAK;AAErC,QAAA;AAAA,IAAEd;AAAAA,IAAS+B;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAkB,KAAK;AAE/D,QAAMC,QAAQtC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDqC,QAAAA,mBAAmBC,YACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,YACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,YAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAA,oBAAC,eACC,IACA,MACA,OACA,WAAWU,GACT/B,QAAQ2C,MACR;AAAA,IAAE,CAAC3C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQiC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAM9B,UACZ,mBAAmB8B,MAAM3B,iBACzB,aAAa2B,MAAMzB,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU0B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","forwardRef","props","ref","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","root"],"mappings":";;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAW,oBAAAC,UAAA,EAAa,OAAc,WAAWP,QAAQQ,MAAQ;AAAA,IACjEC,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAWV,QAAQQ,MACvD;AAAA,IACDG,iBACG,oBAAAC,eAAA,EAAkB,OAAOP,cAAc,WAAWL,QAAQQ,MAAK;AAAA,EAAA;AAGtE;AAQO,MAAMK,iBAAiBC,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAjB,SAASkB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX7B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG6B;AAAAA,EAAAA,IACDC,gBAAgB,kBAAkBjB,KAAK;AAErC,QAAA;AAAA,IAAEf;AAAAA,IAASiC;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAkB,KAAK;AAE/D,QAAMC,QAAQxC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDuC,QAAAA,mBAAmBC,YACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,YACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,YAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAA,oBAAC,eACC,KACA,IACA,MACA,OACA,WAAWU,GACTjC,QAAQ6C,MACR;AAAA,IAAE,CAAC7C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQmC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAMhC,UACZ,mBAAmBgC,MAAM7B,iBACzB,aAAa6B,MAAM3B,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU4B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN,CAAC;"}

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

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import React__default, { useState, useCallback, useMemo } from "react";
+import React__default, { forwardRef, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { ClickAwayListener } from "@mui/material";
-import { theme } from "@hitachivantara/uikit-styles";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { usePopper } from "react-popper";
 import { detectOverflow } from "@popperjs/core";
@@ -18,7 +17,7 @@ import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvBaseDropdown = (props) => {
+const HvBaseDropdown = forwardRef((props, ref) => {
   var _a;
   const {
     id: idProp,
@@ -83,8 +82,7 @@ const HvBaseDropdown = (props) => {
     ...otherPopperProps
   } = popperProps;
   const onFirstUpdate = useCallback(() => {
-    if (onContainerCreation)
-      onContainerCreation(popperElement);
+    onContainerCreation == null ? void 0 : onContainerCreation(popperElement);
   }, [onContainerCreation, popperElement]);
   const widthCalculator = useCallback(({
     state
@@ -173,53 +171,48 @@ const HvBaseDropdown = (props) => {
     if (disabled || notControlKey || ignoredCombinations)
       return;
     const newOpen = !isOpen;
-    const focusHeader = () => {
+    setIsOpen(() => {
       if (!newOpen) {
         referenceElement == null ? void 0 : referenceElement.focus({
           preventScroll: true
         });
       }
       return newOpen;
-    };
-    setIsOpen(focusHeader());
+    });
     onToggle == null ? void 0 : onToggle(event, newOpen);
   }, [isOpen, disabled, setIsOpen, onToggle, referenceElement]);
-  const headerComponent = (() => {
-    if (component) {
-      return React__default.cloneElement(component, {
-        ref: handleDropdownHeaderRef,
-        ...headerControlArias
-      });
+  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+  const defaultHeaderElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: setId(id, "header"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+      }),
+      role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
+      style: disabled || readOnly ? {
+        pointerEvents: "none"
+      } : void 0,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleDropdownHeaderRef,
+      ...dropdownHeaderProps,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled
+        }), variant: "body", children: placeholder }) : placeholder }),
+        /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? "secondary_60" : void 0, className: classes.arrow }) })
+      ]
     }
-    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: setId(id, "header"),
-        className: cx(classes.header, {
-          [classes.headerDisabled]: disabled,
-          [classes.headerReadOnly]: readOnly,
-          [classes.headerOpen]: isOpen,
-          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
-          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
-        }),
-        role: ariaRole === "combobox" ? "textbox" : void 0,
-        ...headerAriaLabels,
-        style: disabled || readOnly ? {
-          pointerEvents: "none"
-        } : void 0,
-        tabIndex: disabled ? -1 : 0,
-        ref: handleDropdownHeaderRef,
-        ...dropdownHeaderProps,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled
-          }), variant: "body", children: placeholder }) : placeholder }),
-          /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? theme.colors.secondary_60 : void 0, className: classes.arrow }) })
-        ]
-      }
-    );
-  })();
+  );
+  const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
+    ref: handleDropdownHeaderRef,
+    ...headerControlArias
+  }) : defaultHeaderElement;
   const containerComponent = (() => {
     const handleContainerKeyDown = (event) => {
       var _a2;
@@ -267,6 +260,7 @@ const HvBaseDropdown = (props) => {
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref,
         id,
         className: cx(classes.anchor, {
           [classes.rootDisabled]: disabled
@@ -282,12 +276,12 @@ const HvBaseDropdown = (props) => {
         },
         tabIndex: -1,
         ...others,
-        children: headerComponent
+        children: headerElement
       }
     ),
     isOpen && containerComponent
   ] });
-};
+});
 export {
   HvBaseDropdown,
   staticClasses as baseDropdownClasses

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

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

package/dist/esm/components/BaseRadio/BaseRadio.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { forwardRef, useState, useCallback } from "react";
 import MuiRadio from "@mui/material/Radio";
 import { RadioButtonUnselected, RadioButtonSelected } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
@@ -17,7 +17,7 @@ const getSelectorIcons = (options, classes) => {
     radioChecked: /* @__PURE__ */ jsx(RadioButtonSelected, { color: checkedColor, className: classes.icon })
   };
 };
-const HvBaseRadio = (props) => {
+const HvBaseRadio = forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -59,11 +59,11 @@ const HvBaseRadio = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsx(MuiRadio, { id, name, className: cx(classes.root, {
+  return /* @__PURE__ */ jsx(MuiRadio, { ref, id, name, className: cx(classes.root, {
     [classes.disabled]: disabled,
     [classes.focusVisible]: focusVisible
   }, className), icon: icons.radio, checkedIcon: icons.radioChecked, color: "default", disabled, required, readOnly, disableRipple: true, onChange: onLocalChange, value, checked, defaultChecked, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
-};
+});
 export {
   HvBaseRadio,
   staticClasses as baseRadioClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvBaseRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <MuiRadio\n      id={id}\n      name={name}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n        },\n        className\n      )}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","icon","radioChecked","HvBaseRadio","props","classesProp","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","root"],"mappings":";;;;;;;AA6FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAWN,QAAQO,MAAQ;AAAA,IACvEC,cACG,oBAAA,qBAAA,EAAoB,OAAOH,cAAc,WAAWL,QAAQO,MAAK;AAAA,EAAA;AAGxE;AAQaE,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJV,SAASW;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXhB,WAAW;AAAA,IACXiB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAlB,WAAW;AAAA,IACXmB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAef,KAAK;AAElC,QAAA;AAAA,IAAEV;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQrC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDoC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,6BACG,UACC,EAAA,IACA,MACA,WAAWW,GACT1B,QAAQsC,MACR;AAAA,IACE,CAACtC,QAAQC,QAAQ,GAAGA;AAAAA,IACpB,CAACD,QAAQ4B,YAAY,GAAGA;AAAAA,EAC1B,GACAhB,SACF,GACA,MAAMuB,MAAM7B,OACZ,aAAa6B,MAAM3B,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAU4B,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJV,GAAAA,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value]\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n          },\n          className\n        )}\n        icon={icons.radio}\n        checkedIcon={icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","icon","radioChecked","HvBaseRadio","forwardRef","props","ref","classesProp","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","root"],"mappings":";;;;;;;AA6FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAWN,QAAQO,MAAQ;AAAA,IACvEC,cACG,oBAAA,qBAAA,EAAoB,OAAOH,cAAc,WAAWL,QAAQO,MAAK;AAAA,EAAA;AAGxE;AAQO,MAAME,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJZ,SAASa;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXlB,WAAW;AAAA,IACXmB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACApB,WAAW;AAAA,IACXqB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAehB,KAAK;AAElC,QAAA;AAAA,IAAEX;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQvC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDsC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAGE,SAAA,oBAAC,YACC,KACA,IACA,MACA,WAAWW,GACT5B,QAAQwC,MACR;AAAA,IACE,CAACxC,QAAQC,QAAQ,GAAGA;AAAAA,IACpB,CAACD,QAAQ8B,YAAY,GAAGA;AAAAA,EAC1B,GACAhB,SACF,GACA,MAAMuB,MAAM/B,OACZ,aAAa+B,MAAM7B,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAU8B,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJV,GAAAA,OACJ,CAAA;AAEN,CACF;"}