stream-chat-react/dist/plugins/Emojis/index.browser.cjs

React components to create chat conversations or livestream style chat

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plugins/Emojis/index.ts
var Emojis_exports = {};
__export(Emojis_exports, {
  EmojiPicker: () => EmojiPicker,
  EmojiPickerIcon: () => EmojiPickerIcon
});
module.exports = __toCommonJS(Emojis_exports);

// src/plugins/Emojis/EmojiPicker.tsx
var import_react4 = __toESM(require("react"));
var import_react_popper = require("react-popper");
var import_react5 = __toESM(require("@emoji-mart/react"));

// src/context/TranslationContext.tsx
var import_react = __toESM(require("react"));
var import_dayjs2 = __toESM(require("dayjs"));
var import_calendar = __toESM(require("dayjs/plugin/calendar"));
var import_localizedFormat = __toESM(require("dayjs/plugin/localizedFormat"));

// src/i18n/utils.ts
var import_dayjs = __toESM(require("dayjs"));
var defaultTranslatorFunction = (key) => key;
var defaultDateTimeParser = (input) => (0, import_dayjs.default)(input);

// src/context/TranslationContext.tsx
import_dayjs2.default.extend(import_calendar.default);
import_dayjs2.default.extend(import_localizedFormat.default);
var TranslationContext = import_react.default.createContext({
  t: defaultTranslatorFunction,
  tDateTimeParser: defaultDateTimeParser,
  userLanguage: "en"
});
var useTranslationContext = (componentName) => {
  const contextValue = (0, import_react.useContext)(TranslationContext);
  if (!contextValue) {
    console.warn(
      `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
    );
    return {};
  }
  return contextValue;
};

// src/context/MessageInputContext.tsx
var import_react2 = __toESM(require("react"));
var MessageInputContext = (0, import_react2.createContext)(void 0);
var useMessageInputContext = (componentName) => {
  const contextValue = (0, import_react2.useContext)(MessageInputContext);
  if (!contextValue) {
    console.warn(
      `The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`
    );
    return {};
  }
  return contextValue;
};

// src/plugins/Emojis/icons.tsx
var import_react3 = __toESM(require("react"));
var EmojiPickerIcon = () => /* @__PURE__ */ import_react3.default.createElement(
  "svg",
  {
    preserveAspectRatio: "xMinYMin",
    viewBox: "0 0 28 28",
    width: "100%",
    xmlns: "http://www.w3.org/2000/svg"
  },
  /* @__PURE__ */ import_react3.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z" }))
);

// src/plugins/Emojis/EmojiPicker.tsx
var isShadowRoot = (node) => !!node.host;
var classNames = {
  buttonClassName: "str-chat__emoji-picker-button",
  pickerContainerClassName: "str-chat__message-textarea-emoji-picker-container",
  wrapperClassName: "str-chat__message-textarea-emoji-picker"
};
var EmojiPicker = (props) => {
  const { t } = useTranslationContext("EmojiPicker");
  const { insertText, textareaRef } = useMessageInputContext("EmojiPicker");
  const [displayPicker, setDisplayPicker] = (0, import_react4.useState)(false);
  const [referenceElement, setReferenceElement] = (0, import_react4.useState)(
    null
  );
  const [popperElement, setPopperElement] = (0, import_react4.useState)(null);
  const { attributes, styles } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
    placement: "top-end",
    ...props.popperOptions
  });
  const { buttonClassName, pickerContainerClassName, wrapperClassName } = classNames;
  const { ButtonIconComponent = EmojiPickerIcon } = props;
  (0, import_react4.useEffect)(() => {
    if (!popperElement || !referenceElement) return;
    const handlePointerDown = (e) => {
      const target = e.target;
      const rootNode = target.getRootNode();
      if (popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) || referenceElement.contains(target)) {
        return;
      }
      setDisplayPicker(false);
    };
    window.addEventListener("pointerdown", handlePointerDown);
    return () => window.removeEventListener("pointerdown", handlePointerDown);
  }, [referenceElement, popperElement]);
  return /* @__PURE__ */ import_react4.default.createElement("div", { className: props.wrapperClassName ?? wrapperClassName }, displayPicker && /* @__PURE__ */ import_react4.default.createElement(
    "div",
    {
      className: props.pickerContainerClassName ?? pickerContainerClassName,
      style: styles.popper,
      ...attributes.popper,
      ref: setPopperElement
    },
    /* @__PURE__ */ import_react4.default.createElement(
      import_react5.default,
      {
        data: async () => (await import("@emoji-mart/data")).default,
        onEmojiSelect: (e) => {
          insertText(e.native);
          textareaRef.current?.focus();
          if (props.closeOnEmojiSelect) {
            setDisplayPicker(false);
          }
        },
        ...props.pickerProps
      }
    )
  ), /* @__PURE__ */ import_react4.default.createElement(
    "button",
    {
      "aria-expanded": displayPicker,
      "aria-label": t("aria/Emoji picker"),
      className: props.buttonClassName ?? buttonClassName,
      onClick: () => setDisplayPicker((cv) => !cv),
      ref: setReferenceElement,
      type: "button"
    },
    ButtonIconComponent && /* @__PURE__ */ import_react4.default.createElement(ButtonIconComponent, null)
  ));
};
//# sourceMappingURL=index.browser.cjs.map