@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/TextArea/TextArea.cjs

@@ -0,0 +1,277 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const setId = require("../utils/setId.cjs");
+const TextArea_styles = require("./TextArea.styles.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
+const BaseInput = require("../BaseInput/BaseInput.cjs");
+const utils$1 = require("../FormElement/utils.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
+const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    name,
+    label,
+    description: descriptionProp,
+    placeholder,
+    status,
+    statusMessage,
+    infoMessage: infoMessageProp,
+    validationMessages,
+    maxCharQuantity,
+    minCharQuantity,
+    value: valueProp,
+    inputRef: inputRefProp,
+    rows = 1,
+    defaultValue = "",
+    middleCountLabel = "/",
+    countCharProps,
+    inputProps,
+    required,
+    readOnly,
+    disabled,
+    autoFocus,
+    resizable,
+    autoScroll,
+    hideCounter,
+    blockMax,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-errormessage": ariaErrorMessage,
+    validation,
+    onChange,
+    onBlur,
+    onFocus,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvTextArea", props);
+  const { classes, cx } = TextArea_styles.useClasses(classesProp);
+  const elementId = useUniqueId.useUniqueId(id);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const isDirty = React.useRef(false);
+  const inputRef = React.useRef(null);
+  const forkedRef = utils.useForkRef(ref, inputRefProp, inputRef);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
+  const [focused, setFocused] = React.useState(false);
+  const [autoScrolling, setAutoScrolling] = React.useState(autoScroll);
+  const [validationState, setValidationState] = useControlled.useControlled(
+    status,
+    "standBy"
+  );
+  const [validationMessage, setValidationMessage] = useControlled.useControlled(
+    statusMessage,
+    ""
+  );
+  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
+  const isStateInvalid = utils$1.isInvalid(validationState);
+  const isEmptyValue = value == null || value === "";
+  const hasLabel = label != null;
+  const hasCounter = maxCharQuantity != null && !hideCounter;
+  const errorMessages = React.useMemo(
+    () => ({ ...validations.DEFAULT_ERROR_MESSAGES, ...validationMessages }),
+    [validationMessages]
+  );
+  const performValidation = React.useCallback(() => {
+    const inputValidity = validations.validateInput(
+      inputRef.current,
+      required,
+      minCharQuantity,
+      maxCharQuantity,
+      validation
+    );
+    setValidationState(validations.computeValidationState(inputValidity, isEmptyValue));
+    setValidationMessage(
+      validations.computeValidationMessage(inputValidity, errorMessages) || ""
+    );
+    return inputValidity;
+  }, [
+    errorMessages,
+    inputRef,
+    isEmptyValue,
+    maxCharQuantity,
+    minCharQuantity,
+    required,
+    setValidationMessage,
+    setValidationState,
+    validation
+  ]);
+  const limitValue = (currentValue) => {
+    if (currentValue === void 0 || !blockMax) return currentValue;
+    const isOverflow = maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;
+    return !isOverflow ? currentValue : currentValue.slice(0, maxCharQuantity);
+  };
+  const onContainerBlurHandler = (event) => {
+    setFocused(false);
+    const inputValidity = performValidation();
+    onBlur?.(event, String(value), inputValidity);
+  };
+  const onChangeHandler = (event, currentValue) => {
+    isDirty.current = true;
+    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;
+    setValue(limitedValue);
+    onChange?.(event, limitedValue);
+  };
+  const onFocusHandler = (event) => {
+    setFocused(true);
+    setValidationState("standBy");
+    onFocus?.(event, String(value));
+  };
+  const isScrolledDown = React.useCallback(() => {
+    const el = inputRef.current;
+    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;
+  }, [inputRef]);
+  const scrollDown = React.useCallback(() => {
+    const el = inputRef.current;
+    if (el != null) {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    }
+  }, [inputRef]);
+  const addScrollListener = React.useCallback(() => {
+    const scrollHandler = {
+      handleEvent: () => {
+        setAutoScrolling(isScrolledDown());
+      }
+    };
+    inputRef.current?.addEventListener("scroll", scrollHandler);
+  }, [inputRef, isScrolledDown]);
+  React.useEffect(() => {
+    if (autoScroll) {
+      addScrollListener();
+    }
+  }, [autoScroll, addScrollListener]);
+  React.useEffect(() => {
+    if (autoScrolling) {
+      scrollDown();
+    }
+  }, [valueProp, autoScrolling, scrollDown]);
+  React.useEffect(() => {
+    if (focused || !isDirty.current && isEmptyValue) {
+      return;
+    }
+    performValidation();
+  }, [focused, isEmptyValue, performValidation]);
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
+    required,
+    "text",
+    minCharQuantity,
+    // If blockMax is true maxCharQuantity will never produce an error
+    // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity
+    maxCharQuantity != null && (blockMax !== true || value != null) ? maxCharQuantity : null,
+    validation,
+    inputProps
+  ));
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
+  let errorMessageId;
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      id,
+      name,
+      status: validationState,
+      disabled,
+      required,
+      readOnly,
+      className: cx(
+        classes.root,
+        {
+          [classes.resizable]: resizable,
+          [classes.invalid]: isStateInvalid,
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      onBlur: onContainerBlurHandler,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: setId.setId(elementId, "input"),
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
+            },
+            children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
+              CharCounter.HvCharCounter,
+              {
+                disableGutter: true,
+                id: setId.setId(elementId, "charCounter"),
+                className: classes.characterCounter,
+                separator: middleCountLabel,
+                currentCharQuantity: String(value).length,
+                maxCharQuantity,
+                ...countCharProps
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseInput.HvBaseInput,
+          {
+            classes: {
+              root: classes.baseInput,
+              input: classes.input,
+              inputResizable: classes.inputResizable
+            },
+            id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
+            name,
+            value,
+            required,
+            readOnly,
+            disabled,
+            onChange: onChangeHandler,
+            autoFocus,
+            onFocus: onFocusHandler,
+            placeholder,
+            invalid: isStateInvalid,
+            resizable,
+            multiline: true,
+            rows,
+            inputProps: {
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-invalid": isStateInvalid ? true : void 0,
+              "aria-errormessage": errorMessageId,
+              "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
+              "aria-controls": maxCharQuantity ? setId.setId(elementId, "charCounter") : void 0,
+              ...inputProps
+            },
+            inputRef: forkedRef,
+            ...others
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+          WarningText.HvWarningText,
+          {
+            id: setId.setId(elementId, "error"),
+            className: classes.error,
+            disableBorder: true,
+            children: validationMessage
+          }
+        ),
+        canShowInfo && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
+      ]
+    }
+  );
+});
+exports.textAreaClasses = TextArea_styles.staticClasses;
+exports.HvTextArea = HvTextArea;

package/dist/cjs/TimeAgo/useTimeAgo.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const React = require("react");
+const formatUtils = require("./formatUtils.cjs");
+const useTimeout = require("./useTimeout.cjs");
+const fmt = (timestamp, locale, showSeconds) => {
+  const timestampMs = String(timestamp).length > 11 ? timestamp : timestamp * 1e3;
+  return formatUtils.formatTimeAgo(timestampMs, locale, showSeconds);
+};
+function useTimeAgo(timestamp = Date.now(), options) {
+  const { locale, disableRefresh = false, showSeconds = false } = options || {};
+  const [timeAgo, setTimeAgo] = React.useState(
+    () => fmt(timestamp, locale, showSeconds)
+  );
+  const refreshTime = disableRefresh ? 0 : 1e4;
+  React.useEffect(() => {
+    const newTimeAgo = fmt(timestamp, locale, showSeconds);
+    setTimeAgo(newTimeAgo);
+  }, [timestamp, locale, showSeconds]);
+  useTimeout.useTimeout(() => {
+    const newTimeAgo = fmt(timestamp, locale, showSeconds);
+    setTimeAgo(newTimeAgo);
+  }, refreshTime);
+  return timeAgo;
+}
+exports.default = useTimeAgo;

package/dist/cjs/TimeAgo/useTimeout.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useTimeout = (callback, delay) => {
+  const savedCallback = React.useRef(callback);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  React.useEffect(() => {
+    if (!delay) return void 0;
+    const id = setTimeout(() => savedCallback.current(), delay);
+    return () => clearTimeout(id);
+  }, [delay]);
+};
+exports.useTimeout = useTimeout;

package/dist/cjs/TimePicker/Placeholder.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const datepicker = require("@react-aria/datepicker");
+const getDateValue = (date) => {
+  if (!date) return "";
+  const { hour, minute, second } = date;
+  return [hour, minute, second].map((el) => String(el).padStart(2, "0")).join(":");
+};
+const PlaceholderSegment = ({
+  segment,
+  state,
+  placeholder
+}) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...segmentProps, children: (() => {
+    if (segment.type === "literal") return segment.text;
+    if (segment.isPlaceholder) return placeholder ?? segment.text;
+    return segment.text.padStart(2, "0");
+  })() });
+};
+const Placeholder = React.forwardRef(
+  function Placeholder2(props, ref) {
+    const { name, state, placeholders, onKeyDown, ...others } = props;
+    const { value, segments } = state;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        onKeyDown: (event) => {
+          event.stopPropagation();
+          onKeyDown?.(event);
+        },
+        ...others,
+        children: [
+          name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: getDateValue(value) }),
+          segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+            PlaceholderSegment,
+            {
+              segment,
+              state,
+              placeholder: placeholders[segment.type]
+            },
+            segment.type
+          ))
+        ]
+      }
+    ) });
+  }
+);
+exports.Placeholder = Placeholder;

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const date = require("@internationalized/date");
+const utils$1 = require("@mui/material/utils");
+const datepicker$1 = require("@react-aria/datepicker");
+const datepicker = require("@react-stately/datepicker");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("../Calendar/utils.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
+const setId = require("../utils/setId.cjs");
+const Placeholder = require("./Placeholder.cjs");
+const TimePicker_styles = require("./TimePicker.styles.cjs");
+const Unit = require("./Unit/Unit.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const toTime = (value) => {
+  if (!value) return value;
+  const { hours, minutes, seconds } = value;
+  return new date.Time(hours, minutes, seconds);
+};
+const HvTimePicker = React.forwardRef(
+  function HvTimePicker2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      id: idProp,
+      name,
+      required,
+      disabled,
+      readOnly,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      placeholder,
+      hoursPlaceholder = "hh",
+      minutesPlaceholder = "mm",
+      secondsPlaceholder = "ss",
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      timeFormat,
+      showSeconds,
+      disableExpand,
+      locale = utils.DEFAULT_LOCALE,
+      onToggle,
+      onChange,
+      // misc properties:
+      disablePortal = true,
+      escapeWithReference = true,
+      dropdownProps = {},
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvTimePicker", props);
+    const id = useUniqueId.useUniqueId(idProp);
+    const { classes, cx } = TimePicker_styles.useClasses(classesProp);
+    const timeFieldRef = React.useRef(null);
+    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
+    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
+    const stateProps = {
+      value: toTime(valueProp),
+      defaultValue: toTime(defaultValueProp),
+      label,
+      locale,
+      isRequired: required,
+      isReadOnly: readOnly,
+      isDisabled: disabled,
+      granularity: showSeconds === false ? "minute" : "second",
+      hourCycle: timeFormat === "12" ? 12 : 24,
+      onChange: (value) => {
+        if (!value) return;
+        const { hour: hours, minute: minutes, second: seconds } = value;
+        onChange?.({ hours, minutes, seconds });
+      }
+    };
+    const state = datepicker.useTimeFieldState(stateProps);
+    const { labelProps, fieldProps, descriptionProps } = datepicker$1.useTimeField(
+      {
+        ...stateProps,
+        id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      state,
+      timeFieldRef
+    );
+    const [open, setOpen] = React.useState(false);
+    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+    const [validationState] = useControlled.useControlled(status, "standBy");
+    const placeholders = React.useMemo(
+      () => ({
+        hour: hoursPlaceholder,
+        minute: minutesPlaceholder,
+        second: secondsPlaceholder
+      }),
+      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]
+    );
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const isStateInvalid = validationState === "invalid";
+    const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        name,
+        required,
+        disabled,
+        status: validationState,
+        className: cx(classes.root, className),
+        ...others,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              labelProps,
+              descriptionProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseDropdown.HvBaseDropdown,
+            {
+              ref: dropdownForkedRef,
+              role: "combobox",
+              variableWidth: true,
+              disabled,
+              readOnly,
+              placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(
+                Placeholder.Placeholder,
+                {
+                  ref: timeFieldRef,
+                  name,
+                  state,
+                  placeholders,
+                  className: cx(classes.placeholder, {
+                    [classes.placeholderDisabled]: disabled
+                  }),
+                  ...fieldProps
+                }
+              ),
+              classes: {
+                header: cx(classes.dropdownHeader, {
+                  [classes.dropdownHeaderInvalid]: isStateInvalid
+                }),
+                panel: classes.dropdownPanel,
+                headerOpen: classes.dropdownHeaderOpen
+              },
+              placement: "right",
+              adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Time", className: classes.icon }),
+              expanded: open,
+              onToggle: (evt, newOpen) => {
+                if (disableExpand) return;
+                setOpen(newOpen);
+                onToggle?.(evt, newOpen);
+              },
+              onContainerCreation: (containerRef) => {
+                containerRef?.getElementsByTagName("input")[0]?.focus();
+              },
+              "aria-haspopup": "dialog",
+              "aria-label": ariaLabel,
+              "aria-labelledby": fieldProps["aria-labelledby"],
+              "aria-describedby": fieldProps["aria-describedby"],
+              "aria-invalid": isStateInvalid ? true : void 0,
+              "aria-errormessage": errorMessageId,
+              disablePortal,
+              popperProps: {
+                modifiers: [
+                  { name: "preventOverflow", enabled: escapeWithReference }
+                ]
+              },
+              ...otherDropdownProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+                Unit.Unit,
+                {
+                  state,
+                  segment,
+                  placeholder: placeholders[segment.type],
+                  onAdd: () => state.increment(segment.type),
+                  onSub: () => state.decrement(segment.type),
+                  onChange: (evt, val) => {
+                    state.setSegment(segment.type, Number(val));
+                  }
+                },
+                segment.type
+              )) })
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+            WarningText.HvWarningText,
+            {
+              id: setId.setId(id, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.timePickerClasses = TimePicker_styles.staticClasses;
+exports.HvTimePicker = HvTimePicker;

package/dist/cjs/ToggleButton/ToggleButton.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useControlled = require("../hooks/useControlled.cjs");
+const Button = require("../Button/Button.cjs");
+const HvToggleButton = React.forwardRef(function HvToggleButton2(props, ref) {
+  const {
+    defaultSelected,
+    selected,
+    notSelectedIcon,
+    selectedIcon = null,
+    onClick,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvToggleButton", props);
+  const [isSelected, setIsSelected] = useControlled.useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      ref,
+      icon: true,
+      selected: isSelected,
+      onClick: (event) => {
+        setIsSelected(!isSelected);
+        onClick?.(event, !isSelected);
+      },
+      ...others,
+      children: children || (!isSelected ? notSelectedIcon : selectedIcon)
+    }
+  );
+});
+exports.HvToggleButton = HvToggleButton;

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Fade = require("@mui/material/Fade");
+const Tooltip = require("@mui/material/Tooltip");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const document = require("../utils/document.cjs");
+const Tooltip_styles = require("./Tooltip.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Fade__default = /* @__PURE__ */ _interopDefault(Fade);
+const Tooltip__default = /* @__PURE__ */ _interopDefault(Tooltip);
+const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    open,
+    enterDelay = 300,
+    placement = "top",
+    useSingle = true,
+    children,
+    title,
+    TransitionComponent = Fade__default.default,
+    TransitionProps = { timeout: 400, placement: "top" },
+    containerId,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvTooltip", props);
+  const { rootId } = uikitReactUtils.useTheme();
+  const { classes } = Tooltip_styles.useClasses(classesProp);
+  const [container, setContainer] = React.useState(
+    () => document.getElementById(containerId ?? rootId)
+  );
+  React.useEffect(() => {
+    setContainer(document.getElementById(containerId ?? rootId));
+  }, [containerId, rootId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip__default.default,
+    {
+      ref,
+      open,
+      enterDelay,
+      placement,
+      TransitionComponent,
+      TransitionProps,
+      className,
+      classes: {
+        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+        popper: classes.popper
+      },
+      title,
+      PopperProps: { container },
+      ...others,
+      children
+    }
+  );
+});
+exports.tooltipClasses = Tooltip_styles.staticClasses;
+exports.HvTooltip = HvTooltip;