@capillarytech/blaze-ui 6.1.6-beta.1 → 6.1.7

package/CapEmojiPicker/Picker/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '../_capEmojiPicker.scss';
+export declare const importEmojiPicker: () => Promise<typeof import("emoji-picker-react")>;
+declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/CapEmojiPicker/Picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/Picker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,yBAAyB,CAAC;AAMjC,eAAO,MAAM,iBAAiB,oDAAqC,CAAC;;AAuJpE,wBAAkC"}

package/CapEmojiPicker/Picker/index.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { intlShape, injectIntl } from "react-intl";
+import CapButton from "../../CapButton/index.js";
+import CapLabelWithStatic from "../../CapLabel/index.js";
+import '../_capEmojiPicker.css';/* empty css                      */
+import { CLS_PREFIX, PICKER_HEIGHT, PICKER_WIDTH } from "../constants.js";
+import messages from "./messages.js";
+const importEmojiPicker = () => import("emoji-picker-react");
+const Picker = ({
+  intl: { formatMessage },
+  onEmojiSelect,
+  className = "",
+  importFunction = importEmojiPicker
+}) => {
+  const [EmojiPickerComponent, setEmojiPickerComponent] = useState(null);
+  const [EmojiPickerEnums, setEmojiPickerEnums] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const isMountedRef = useRef(true);
+  const loadEmojiPicker = useCallback(() => {
+    importFunction().then((module) => {
+      if (isMountedRef.current) {
+        const { Theme, EmojiStyle, SuggestionMode, SkinTonePickerLocation } = module;
+        setEmojiPickerComponent(() => module.default);
+        setEmojiPickerEnums({
+          Theme,
+          EmojiStyle,
+          SuggestionMode,
+          SkinTonePickerLocation
+        });
+        setIsLoading(false);
+        setHasError(false);
+      }
+    }).catch((error) => {
+      console.error("Failed to load emoji-picker-react:", error);
+      if (isMountedRef.current) {
+        setIsLoading(false);
+        setHasError(true);
+      }
+    });
+  }, [importFunction]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    loadEmojiPicker();
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [loadEmojiPicker]);
+  const handleRetry = useCallback(() => {
+    setHasError(false);
+    setIsLoading(true);
+    loadEmojiPicker();
+  }, [loadEmojiPicker]);
+  const handleEmojiClick = useCallback(
+    ({
+      emoji,
+      names,
+      originalUnified
+    }) => {
+      const mappedData = {
+        emoji,
+        label: (names == null ? void 0 : names[0]) || originalUnified || ""
+      };
+      onEmojiSelect(mappedData);
+    },
+    [onEmojiSelect]
+  );
+  const previewConfig = useMemo(
+    () => ({
+      showPreview: true,
+      defaultCaption: formatMessage(messages.defaultCaption)
+    }),
+    [formatMessage]
+  );
+  if (hasError) {
+    return /* @__PURE__ */ jsx("div", { className: classNames(`${CLS_PREFIX}-panel`, className), children: /* @__PURE__ */ jsxs("div", { className: `${CLS_PREFIX}-error-container`, children: [
+      /* @__PURE__ */ jsx(CapLabelWithStatic, { className: `${CLS_PREFIX}-error-message`, children: formatMessage(messages.errorMessage) }),
+      /* @__PURE__ */ jsx(CapButton, { onClick: handleRetry, className: `${CLS_PREFIX}-retry-button`, children: formatMessage(messages.retryButton) })
+    ] }) });
+  }
+  if (isLoading || !EmojiPickerComponent || !EmojiPickerEnums) {
+    return /* @__PURE__ */ jsx("div", { className: classNames(`${CLS_PREFIX}-panel`, className), children: /* @__PURE__ */ jsx("div", { className: `${CLS_PREFIX}-loading-container`, children: /* @__PURE__ */ jsx(CapLabelWithStatic, { children: formatMessage(messages.loadingMessage) }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classNames(`${CLS_PREFIX}-panel`, className), children: /* @__PURE__ */ jsx(
+    EmojiPickerComponent,
+    {
+      onEmojiClick: handleEmojiClick,
+      width: PICKER_WIDTH,
+      height: PICKER_HEIGHT,
+      theme: EmojiPickerEnums.Theme.LIGHT,
+      emojiStyle: EmojiPickerEnums.EmojiStyle.NATIVE,
+      suggestedEmojisMode: EmojiPickerEnums.SuggestionMode.RECENT,
+      skinTonePickerLocation: EmojiPickerEnums.SkinTonePickerLocation.SEARCH,
+      skinTonesDisabled: false,
+      searchDisabled: false,
+      previewConfig,
+      lazyLoadEmojis: true
+    }
+  ) });
+};
+Picker.propTypes = {
+  intl: intlShape.isRequired,
+  onEmojiSelect: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  importFunction: PropTypes.func
+};
+const Picker$1 = injectIntl(Picker);
+export {
+  Picker$1 as default,
+  importEmojiPicker
+};

package/CapEmojiPicker/Picker/messages.d.ts

@@ -0,0 +1,21 @@
+export declare const scope = "app.commonUtils.capUiLibrary.CapEmojiPicker.Picker";
+declare const _default: {
+    defaultCaption: {
+        id: string;
+        defaultMessage: string;
+    };
+    errorMessage: {
+        id: string;
+        defaultMessage: string;
+    };
+    retryButton: {
+        id: string;
+        defaultMessage: string;
+    };
+    loadingMessage: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapEmojiPicker/Picker/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/Picker/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,uDAAuD,CAAC;;;;;;;;;;;;;;;;;;;AAE1E,wBAiBG"}

package/CapEmojiPicker/Picker/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapEmojiPicker.Picker";
+const messages = defineMessages({
+  defaultCaption: {
+    id: `${scope}.defaultCaption`,
+    defaultMessage: "Choose an emoji"
+  },
+  errorMessage: {
+    id: `${scope}.errorMessage`,
+    defaultMessage: "Failed to load emoji picker"
+  },
+  retryButton: {
+    id: `${scope}.retryButton`,
+    defaultMessage: "Retry"
+  },
+  loadingMessage: {
+    id: `${scope}.loadingMessage`,
+    defaultMessage: "Loading emoji picker..."
+  }
+});
+export {
+  messages as default,
+  scope
+};

package/CapEmojiPicker/TriggerButton/_triggerButton.scss

@@ -0,0 +1,45 @@
+@import '../../styles/_variables.scss';
+@import '../_config.scss';
+
+.#{$clsPrefix}-trigger-button {
+  position: absolute;
+  bottom: $CAP_SPACE_02;
+  right: $CAP_SPACE_02;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $CAP_SPACE_28;
+  height: $CAP_SPACE_28;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+  z-index: 10;
+
+  &:hover {
+    background-color: rgba($FONT_COLOR_02, 0.1); // Light background on hover (rounded)
+    transform: scale(1.05);
+  }
+
+  &:active {
+    background-color: rgba($FONT_COLOR_02, 0.15);
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: $CAP_SPACE_02 solid $FONT_COLOR_05;
+    outline-offset: $CAP_SPACE_02;
+    background-color: rgba($FONT_COLOR_02, 0.1);
+  }
+
+  .#{$clsPrefix}-trigger-button-icon {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    pointer-events: none;
+  }
+}

package/CapEmojiPicker/TriggerButton/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const TriggerButton: React.ForwardRefExoticComponent<{
+    onClick?: () => void;
+    className?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default TriggerButton;
+//# sourceMappingURL=index.d.ts.map

package/CapEmojiPicker/TriggerButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/TriggerButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,aAAa;cAGL,MAAM,IAAI;gBACR,MAAM;eACP,OAAO;gBACN,MAAM;2CAapB,CAAC;AAkBH,eAAe,aAAa,CAAC"}

package/CapEmojiPicker/TriggerButton/index.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import emojiIcon from "../assets/sentiment-satsified.svg.js";
+import { CLS_PREFIX } from "../constants.js";
+const TriggerButton = React.forwardRef(({ onClick, className, disabled, ariaLabel }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: classNames(`${CLS_PREFIX}-trigger`, className),
+    onClick,
+    disabled,
+    "aria-label": ariaLabel,
+    ref,
+    children: /* @__PURE__ */ jsx("img", { src: emojiIcon, alt: "emoji picker" })
+  }
+));
+TriggerButton.displayName = "CapEmojiPickerTriggerButton";
+TriggerButton.propTypes = {
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  ariaLabel: PropTypes.string
+};
+TriggerButton.defaultProps = {
+  onClick: () => {
+  },
+  className: "",
+  disabled: false,
+  ariaLabel: "Insert emoji"
+};
+export {
+  TriggerButton as default
+};

package/CapEmojiPicker/Wrapper/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/CapEmojiPicker/Wrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/Wrapper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4E,MAAM,OAAO,CAAC;;AAsOjG,wBAAmC"}

package/CapEmojiPicker/Wrapper/index.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import { lazy, useState, useRef, useEffect, useCallback, useMemo, Suspense } from "react";
+import { intlShape, injectIntl } from "react-intl";
+import CapLabelWithStatic from "../../CapLabel/index.js";
+import CapPopover from "../../CapPopover/index.js";
+import { INPUT_TEXTAREA_SELECTOR, LOADING_FALLBACK_COLOR, PICKER_HEIGHT, PICKER_WIDTH, CLS_PREFIX, DEFAULT_POPOVER_PLACEMENT } from "../constants.js";
+import TriggerButton from "../TriggerButton/index.js";
+import { resolveInputElement } from "../utils.js";
+import messages from "./messages.js";
+import useEmojiTriggerPosition from "./useEmojiTriggerPosition.js";
+const Picker = lazy(() => import("../Picker/index.js"));
+const Wrapper = ({
+  intl: { formatMessage },
+  children,
+  value,
+  onChange,
+  textAreaRef,
+  // Deprecated: kept for backward compatibility
+  inputRef,
+  // New preferred prop name
+  popoverPlacement,
+  disabled,
+  onEmojiSelect,
+  triggerAriaLabel,
+  className,
+  popoverClassName,
+  pickerClassName
+}) => {
+  const [visible, setVisible] = useState(false);
+  const wrapperRef = useRef(null);
+  const extractedInputRef = useRef(null);
+  const inputElementRef = inputRef || textAreaRef;
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+    const rafId = requestAnimationFrame(() => {
+      const inputElement = wrapperRef.current.querySelector(INPUT_TEXTAREA_SELECTOR);
+      if (inputElement) {
+        extractedInputRef.current = inputElement;
+        if (inputElementRef) {
+          if (typeof inputElementRef === "object" && "current" in inputElementRef) {
+            inputElementRef.current = inputElement;
+          } else if (typeof inputElementRef === "function") {
+            inputElementRef(
+              inputElement
+            );
+          }
+        }
+      }
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      if (inputElementRef && typeof inputElementRef === "function") {
+        inputElementRef(null);
+      }
+    };
+  }, [inputElementRef]);
+  const { triggerPositionClass } = useEmojiTriggerPosition(
+    wrapperRef,
+    inputElementRef,
+    value,
+    extractedInputRef
+  );
+  const handleEmojiSelect = useCallback(
+    (emojiData) => {
+      const emoji = (emojiData == null ? void 0 : emojiData.emoji) || "";
+      const target = extractedInputRef.current || resolveInputElement(inputElementRef);
+      const currentValue = value || "";
+      let nextValue = `${currentValue}${emoji}`;
+      if (target && typeof target.selectionStart === "number" && typeof target.selectionEnd === "number") {
+        const { selectionStart, selectionEnd } = target;
+        nextValue = currentValue.slice(0, selectionStart) + emoji + currentValue.slice(selectionEnd);
+        requestAnimationFrame(() => {
+          const caret = selectionStart + emoji.length;
+          target.focus();
+          target.setSelectionRange(caret, caret);
+        });
+      }
+      onChange(nextValue);
+      if (onEmojiSelect) {
+        onEmojiSelect(emojiData);
+      }
+      setVisible(false);
+    },
+    [onChange, onEmojiSelect, inputElementRef, value]
+  );
+  const content = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx("div", { className: classNames(`${CLS_PREFIX}-panel`, pickerClassName), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: PICKER_WIDTH,
+              height: PICKER_HEIGHT,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: LOADING_FALLBACK_COLOR
+            },
+            children: /* @__PURE__ */ jsx(CapLabelWithStatic, { children: formatMessage(messages.loadingMessage) })
+          }
+        ) }),
+        children: /* @__PURE__ */ jsx(Picker, { onEmojiSelect: handleEmojiSelect, className: pickerClassName })
+      }
+    ),
+    [handleEmojiSelect, pickerClassName, formatMessage]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: classNames(`${CLS_PREFIX}-wrapper`, className), children: [
+    children,
+    !disabled && /* @__PURE__ */ jsx("div", { className: classNames(`${CLS_PREFIX}-trigger-container`, triggerPositionClass), children: /* @__PURE__ */ jsx(
+      CapPopover,
+      {
+        content,
+        trigger: "click",
+        placement: popoverPlacement,
+        overlayClassName: classNames(`${CLS_PREFIX}-popover`, popoverClassName),
+        visible,
+        onVisibleChange: (nextVisible) => setVisible(nextVisible),
+        children: /* @__PURE__ */ jsx(
+          TriggerButton,
+          {
+            ariaLabel: triggerAriaLabel || formatMessage(messages.defaultTriggerAriaLabel)
+          }
+        )
+      }
+    ) })
+  ] });
+};
+Wrapper.propTypes = {
+  intl: intlShape.isRequired,
+  children: PropTypes.node.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  textAreaRef: PropTypes.oneOfType([PropTypes.shape({ current: PropTypes.any }), PropTypes.any]),
+  // Deprecated: use inputRef instead
+  inputRef: PropTypes.oneOfType([PropTypes.shape({ current: PropTypes.any }), PropTypes.any]),
+  // Ref to the input/textarea element for inserting emoji at cursor position
+  popoverPlacement: PropTypes.string,
+  disabled: PropTypes.bool,
+  onEmojiSelect: PropTypes.func,
+  triggerAriaLabel: PropTypes.string,
+  className: PropTypes.string,
+  popoverClassName: PropTypes.string,
+  pickerClassName: PropTypes.string
+};
+Wrapper.defaultProps = {
+  value: "",
+  textAreaRef: null,
+  // Deprecated
+  inputRef: null,
+  popoverPlacement: DEFAULT_POPOVER_PLACEMENT,
+  disabled: false,
+  onEmojiSelect: null,
+  triggerAriaLabel: null,
+  // Will use translated default if not provided
+  className: "",
+  popoverClassName: "",
+  pickerClassName: ""
+};
+const Wrapper$1 = injectIntl(Wrapper);
+export {
+  Wrapper$1 as default
+};

package/CapEmojiPicker/Wrapper/messages.d.ts

@@ -0,0 +1,13 @@
+export declare const scope = "app.commonUtils.capUiLibrary.CapEmojiPicker.Wrapper";
+declare const _default: {
+    loadingMessage: {
+        id: string;
+        defaultMessage: string;
+    };
+    defaultTriggerAriaLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapEmojiPicker/Wrapper/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/Wrapper/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,wDAAwD,CAAC;;;;;;;;;;;AAE3E,wBASG"}

package/CapEmojiPicker/Wrapper/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapEmojiPicker.Wrapper";
+const messages = defineMessages({
+  loadingMessage: {
+    id: `${scope}.loadingMessage`,
+    defaultMessage: "Loading emoji picker..."
+  },
+  defaultTriggerAriaLabel: {
+    id: `${scope}.defaultTriggerAriaLabel`,
+    defaultMessage: "Insert emoji"
+  }
+});
+export {
+  messages as default,
+  scope
+};

package/CapEmojiPicker/Wrapper/useEmojiTriggerPosition.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type InputElementRef = React.RefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((el: HTMLInputElement | HTMLTextAreaElement | null) => void) | null;
+/**
+ * Custom hook to calculate and apply emoji trigger positioning
+ * Optimizes DOM queries and style mutations while maintaining backward compatibility
+ *
+ * @param {React.RefObject} wrapperRef - Ref to the wrapper container
+ * @param {React.RefObject|Function} inputElementRef - Ref to the input element (for backward compat)
+ * @param {string} value - Current input value
+ * @param {React.RefObject} extractedInputRef - Ref to the extracted input element from DOM
+ * @returns {Object} { triggerPositionClass, triggerContainerRef } - Position class and ref to container
+ */
+declare const useEmojiTriggerPosition: (wrapperRef: React.RefObject<HTMLDivElement | null>, inputElementRef: InputElementRef, value: string, extractedInputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>) => {
+    triggerPositionClass: string;
+    triggerContainerRef: React.MutableRefObject<HTMLDivElement>;
+};
+export default useEmojiTriggerPosition;
+//# sourceMappingURL=useEmojiTriggerPosition.d.ts.map

package/CapEmojiPicker/Wrapper/useEmojiTriggerPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmojiTriggerPosition.d.ts","sourceRoot":"","sources":["../../../components/CapEmojiPicker/Wrapper/useEmojiTriggerPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,KAAK,eAAe,GAChB,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,mBAAmB,GAAG,IAAI,CAAC,GAC9D,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC,GAC7D,IAAI,CAAC;AAET;;;;;;;;;GASG;AACH,QAAA,MAAM,uBAAuB,GAC3B,YAAY,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAClD,iBAAiB,eAAe,EAChC,OAAO,MAAM,EACb,mBAAmB,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,mBAAmB,GAAG,IAAI,CAAC;;;CAkKlF,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/CapEmojiPicker/Wrapper/useEmojiTriggerPosition.js

@@ -0,0 +1,108 @@
+import { useState, useRef, useEffect } from "react";
+import { CLS_PREFIX, TEXTAREA_TAG, INPUT_TAG } from "../constants.js";
+import { resolveInputElement } from "../utils.js";
+const useEmojiTriggerPosition = (wrapperRef, inputElementRef, value, extractedInputRef) => {
+  const [triggerPositionClass, setTriggerPositionClass] = useState("");
+  const triggerContainerRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  const rafIdRef = useRef(null);
+  useEffect(() => {
+    if (!wrapperRef.current) {
+      setTriggerPositionClass("");
+      return;
+    }
+    const updatePosition = () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      rafIdRef.current = requestAnimationFrame(() => {
+        const target = extractedInputRef.current || resolveInputElement(inputElementRef);
+        if (!target || !wrapperRef.current) {
+          setTriggerPositionClass("");
+          if (triggerContainerRef.current) {
+            triggerContainerRef.current.style.setProperty("--emoji-trigger-bottom", "");
+          }
+          return;
+        }
+        if (!triggerContainerRef.current) {
+          triggerContainerRef.current = wrapperRef.current.querySelector(
+            `.${CLS_PREFIX}-trigger-container`
+          );
+        }
+        const tagName = target.tagName;
+        const hasValue = (value == null ? void 0 : value.trim().length) > 0;
+        const componentWithLabel = wrapperRef.current.querySelector(".component-with-label");
+        const inputWrapper = target.closest(".component-with-label-wrapper") || target.closest(".ant-input-affix-wrapper") || target.parentElement;
+        const errorMessage = componentWithLabel == null ? void 0 : componentWithLabel.querySelector(".error-message");
+        let bottomOffset = null;
+        if (errorMessage && inputWrapper && triggerContainerRef.current) {
+          const inputWrapperRect = inputWrapper.getBoundingClientRect();
+          const wrapperRect = wrapperRef.current.getBoundingClientRect();
+          const inputWrapperBottomFromWrapperTop = inputWrapperRect.bottom - wrapperRect.top;
+          const distanceFromWrapperBottomToInputWrapperBottom = wrapperRect.height - inputWrapperBottomFromWrapperTop;
+          bottomOffset = tagName === TEXTAREA_TAG ? `${distanceFromWrapperBottomToInputWrapperBottom + 4}px` : `${distanceFromWrapperBottomToInputWrapperBottom + 2}px`;
+        }
+        if (triggerContainerRef.current) {
+          if (bottomOffset !== null) {
+            triggerContainerRef.current.style.setProperty("--emoji-trigger-bottom", bottomOffset);
+          } else {
+            triggerContainerRef.current.style.setProperty("--emoji-trigger-bottom", "");
+          }
+        }
+        if (tagName === TEXTAREA_TAG) {
+          setTriggerPositionClass(`${CLS_PREFIX}-trigger-textarea`);
+        } else if (tagName === INPUT_TAG) {
+          let isSearch = false;
+          let hasClearIcon = false;
+          const parentElement = target.parentElement;
+          const prefixArea = parentElement == null ? void 0 : parentElement.querySelector(".ant-input-prefix");
+          const suffixArea = parentElement == null ? void 0 : parentElement.querySelector(".ant-input-suffix");
+          if (prefixArea) {
+            const hasSearchIcon = prefixArea.querySelector('[class*="search"], [class*="Search"]');
+            isSearch = hasSearchIcon !== null;
+          }
+          if (suffixArea) {
+            hasClearIcon = suffixArea.querySelector('.anticon-close, [class*="close"], [class*="Close"]') !== null;
+          }
+          if (isSearch && hasValue && hasClearIcon) {
+            setTriggerPositionClass(`${CLS_PREFIX}-trigger-search-with-value`);
+          } else {
+            setTriggerPositionClass(`${CLS_PREFIX}-trigger-input`);
+          }
+        } else {
+          setTriggerPositionClass("");
+        }
+      });
+    };
+    updatePosition();
+    let observeInputTimeout = null;
+    if (window.ResizeObserver && wrapperRef.current) {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserverRef.current.observe(wrapperRef.current);
+      observeInputTimeout = setTimeout(() => {
+        const target = extractedInputRef.current || resolveInputElement(inputElementRef);
+        if (target && resizeObserverRef.current) {
+          resizeObserverRef.current.observe(target);
+        }
+      }, 0);
+    }
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+      if (observeInputTimeout) {
+        clearTimeout(observeInputTimeout);
+      }
+      triggerContainerRef.current = null;
+    };
+  }, [value]);
+  return { triggerPositionClass, triggerContainerRef };
+};
+export {
+  useEmojiTriggerPosition as default
+};