@openeditor/emoji 0.0.14

package/README.md

@@ -0,0 +1,19 @@
+# `@openeditor/emoji`
+
+Reusable web emoji selection for OpenEditor. The package composes Frimousse's
+emoji primitives with a Base UI popover and exposes a stable OpenEditor-owned
+component API. It intentionally contains no document or block knowledge.
+
+Callouts, pages, and future emoji-bearing features store plain Unicode strings
+in the portable document model and use this package only for web selection.
+Import `@openeditor/ui/styles.css` for the default visual treatment.
+
+```tsx
+import { OpenEditorEmojiPicker } from "@openeditor/emoji";
+
+<OpenEditorEmojiPicker
+  emoji="💡"
+  label="Change emoji"
+  onEmojiSelect={(emoji) => console.log(emoji)}
+/>
+```

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Locale } from 'frimousse';
+
+type OpenEditorEmojiPickerProps = {
+    emoji: string;
+    onEmojiSelect: (emoji: string) => void;
+    label: string;
+    disabled?: boolean;
+    container?: HTMLElement | null;
+    className?: string;
+    children?: ReactNode;
+    locale?: Locale;
+    emojibaseUrl?: string;
+    emojiVersion?: number;
+};
+declare const OpenEditorEmojiPicker: ({ emoji, onEmojiSelect, label, disabled, container, className, children, locale, emojibaseUrl, emojiVersion, }: OpenEditorEmojiPickerProps) => react.JSX.Element;
+
+export { OpenEditorEmojiPicker, type OpenEditorEmojiPickerProps };

package/dist/index.js

@@ -0,0 +1,102 @@
+import { Popover } from '@base-ui/react/popover';
+import { EmojiPicker } from 'frimousse';
+import { useState } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/index.tsx
+var emojiListComponents = {
+  CategoryHeader: ({ category, ...props }) => /* @__PURE__ */ jsx("div", { className: "oe-emoji-category", ...props, children: category.label }),
+  Row: ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "oe-emoji-row", ...props, children }),
+  Emoji: ({ emoji, ...props }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      "aria-label": emoji.label,
+      className: "oe-emoji-option",
+      type: "button",
+      children: emoji.emoji
+    }
+  )
+};
+var OpenEditorEmojiPicker = ({
+  emoji,
+  onEmojiSelect,
+  label,
+  disabled = false,
+  container,
+  className,
+  children,
+  locale,
+  emojibaseUrl,
+  emojiVersion
+}) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(
+      Popover.Trigger,
+      {
+        "aria-label": label,
+        className: ["oe-emoji-trigger", className].filter(Boolean).join(" "),
+        disabled,
+        type: "button",
+        children: children ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji })
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(
+      Popover.Positioner,
+      {
+        align: "start",
+        collisionPadding: 12,
+        positionMethod: "fixed",
+        side: "bottom",
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsx(Popover.Popup, { className: "oe-emoji-popover", children: /* @__PURE__ */ jsxs(
+          EmojiPicker.Root,
+          {
+            className: "oe-emoji-picker",
+            emojibaseUrl,
+            emojiVersion,
+            locale,
+            onEmojiSelect: (selection) => {
+              onEmojiSelect(selection.emoji);
+              setOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                EmojiPicker.Search,
+                {
+                  "aria-label": "Search emoji",
+                  autoFocus: true,
+                  className: "oe-emoji-search",
+                  placeholder: "Search emoji\u2026"
+                }
+              ),
+              /* @__PURE__ */ jsxs(EmojiPicker.Viewport, { className: "oe-emoji-viewport", children: [
+                /* @__PURE__ */ jsx(EmojiPicker.Loading, { className: "oe-emoji-state", children: "Loading emoji\u2026" }),
+                /* @__PURE__ */ jsx(EmojiPicker.Empty, { className: "oe-emoji-state", children: "No emoji found." }),
+                /* @__PURE__ */ jsx(
+                  EmojiPicker.List,
+                  {
+                    className: "oe-emoji-list",
+                    components: emojiListComponents
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("footer", { className: "oe-emoji-footer", children: [
+                /* @__PURE__ */ jsx(EmojiPicker.ActiveEmoji, { children: ({ emoji: active }) => active ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: active.emoji }),
+                  /* @__PURE__ */ jsx("span", { children: active.label })
+                ] }) : "Choose an emoji" }),
+                /* @__PURE__ */ jsx(EmojiPicker.SkinToneSelector, { "aria-label": "Change skin tone" })
+              ] })
+            ]
+          }
+        ) })
+      }
+    ) })
+  ] });
+};
+
+export { OpenEditorEmojiPicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { Popover } from \"@base-ui/react/popover\";\nimport {\n  EmojiPicker,\n  type EmojiPickerListComponents,\n  type Locale,\n} from \"frimousse\";\nimport { useState, type ReactNode } from \"react\";\n\nconst emojiListComponents: EmojiPickerListComponents = {\n  CategoryHeader: ({ category, ...props }) => (\n    <div className=\"oe-emoji-category\" {...props}>{category.label}</div>\n  ),\n  Row: ({ children, ...props }) => (\n    <div className=\"oe-emoji-row\" {...props}>{children}</div>\n  ),\n  Emoji: ({ emoji, ...props }) => (\n    <button\n      {...props}\n      aria-label={emoji.label}\n      className=\"oe-emoji-option\"\n      type=\"button\"\n    >\n      {emoji.emoji}\n    </button>\n  ),\n};\n\nexport type OpenEditorEmojiPickerProps = {\n  emoji: string;\n  onEmojiSelect: (emoji: string) => void;\n  label: string;\n  disabled?: boolean;\n  container?: HTMLElement | null;\n  className?: string;\n  children?: ReactNode;\n  locale?: Locale;\n  emojibaseUrl?: string;\n  emojiVersion?: number;\n};\n\nexport const OpenEditorEmojiPicker = ({\n  emoji,\n  onEmojiSelect,\n  label,\n  disabled = false,\n  container,\n  className,\n  children,\n  locale,\n  emojibaseUrl,\n  emojiVersion,\n}: OpenEditorEmojiPickerProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen} modal={false}>\n      <Popover.Trigger\n        aria-label={label}\n        className={[\"oe-emoji-trigger\", className].filter(Boolean).join(\" \")}\n        disabled={disabled}\n        type=\"button\"\n      >\n        {children ?? <span aria-hidden=\"true\">{emoji}</span>}\n      </Popover.Trigger>\n      <Popover.Portal container={container}>\n        <Popover.Positioner\n          align=\"start\"\n          collisionPadding={12}\n          positionMethod=\"fixed\"\n          side=\"bottom\"\n          sideOffset={8}\n        >\n          <Popover.Popup className=\"oe-emoji-popover\">\n            <EmojiPicker.Root\n              className=\"oe-emoji-picker\"\n              emojibaseUrl={emojibaseUrl}\n              emojiVersion={emojiVersion}\n              locale={locale}\n              onEmojiSelect={(selection) => {\n                onEmojiSelect(selection.emoji);\n                setOpen(false);\n              }}\n            >\n              <EmojiPicker.Search\n                aria-label=\"Search emoji\"\n                autoFocus\n                className=\"oe-emoji-search\"\n                placeholder=\"Search emoji…\"\n              />\n              <EmojiPicker.Viewport className=\"oe-emoji-viewport\">\n                <EmojiPicker.Loading className=\"oe-emoji-state\">Loading emoji…</EmojiPicker.Loading>\n                <EmojiPicker.Empty className=\"oe-emoji-state\">No emoji found.</EmojiPicker.Empty>\n                <EmojiPicker.List\n                  className=\"oe-emoji-list\"\n                  components={emojiListComponents}\n                />\n              </EmojiPicker.Viewport>\n              <footer className=\"oe-emoji-footer\">\n                <EmojiPicker.ActiveEmoji>\n                  {({ emoji: active }) => active ? <><span aria-hidden=\"true\">{active.emoji}</span><span>{active.label}</span></> : \"Choose an emoji\"}\n                </EmojiPicker.ActiveEmoji>\n                <EmojiPicker.SkinToneSelector aria-label=\"Change skin tone\" />\n              </footer>\n            </EmojiPicker.Root>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@openeditor/emoji",
+  "version": "0.0.14",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EasyLink-HQ/openeditor.git",
+    "directory": "packages/emoji"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "frimousse": "0.3.0",
+    "react": "19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "tsup": "^8.5.1",
+    "typescript": "6.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  }
+}