@parhelia/core 0.3.12832 → 0.3.12833

package/dist/components/emoji/EmojiPicker.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface EmojiPickerPanelProps {
+    onSelect: (emoji: string) => void;
+}
+/** Search box, skin tone, category bar and the emoji grid. */
+export declare function EmojiPickerPanel({ onSelect }: EmojiPickerPanelProps): React.JSX.Element;
+export interface EmojiPickerButtonProps {
+    onSelect: (emoji: string) => void;
+    disabled?: boolean;
+    className?: string;
+    iconClassName?: string;
+    title?: string;
+    align?: "start" | "center" | "end";
+    /** Where focus goes when the picker closes (the input being written). */
+    returnFocusTo?: React.RefObject<HTMLElement | null>;
+}
+/** A smiley button that opens the emoji picker in a popover. */
+export declare function EmojiPickerButton({ onSelect, disabled, className, iconClassName, title, align, returnFocusTo, }: EmojiPickerButtonProps): React.JSX.Element;

package/dist/components/emoji/EmojiPicker.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Clock, Flag, Hand, Hash, Leaf, Lightbulb, Loader2, Pizza, Plane, Search, Smile, Trophy, } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Input } from "../ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Emoji } from "./EmojiText";
+import { EMOJI_GROUPS, SKIN_TONE_LABELS, getRecentEmoji, getSkinTonePreference, rememberRecentEmoji, searchEmoji, setSkinTonePreference, useEmojiIndex, withSkinTone, } from "./emojiIndex";
+const GROUP_ICONS = {
+    0: Smile,
+    1: Hand,
+    3: Leaf,
+    4: Pizza,
+    5: Plane,
+    6: Trophy,
+    7: Lightbulb,
+    8: Hash,
+    9: Flag,
+};
+const RECENT_GROUP = -1;
+/** The raised hand in each tone, for the tone selector. */
+const TONE_SAMPLES = ["✋", "✋🏻", "✋🏼", "✋🏽", "✋🏾", "✋🏿"];
+const GRID_CLASS = "grid grid-cols-8 justify-items-center gap-0.5";
+function EmojiCell({ emoji, label, onSelect, }) {
+    return (_jsx("button", { type: "button", className: "hover:bg-neutral-grey-5 focus-visible:bg-neutral-grey-5 flex size-8 items-center justify-center rounded-md outline-none", title: label, "aria-label": label, "data-testid": "emoji-picker-item", "data-emoji": emoji, onClick: () => onSelect(emoji), children: _jsx(Emoji, { emoji: emoji, className: "mx-0 size-[22px] align-baseline" }) }));
+}
+/** Search box, skin tone, category bar and the emoji grid. */
+export function EmojiPickerPanel({ onSelect }) {
+    const index = useEmojiIndex();
+    const [query, setQuery] = React.useState("");
+    const [tone, setTone] = React.useState(() => getSkinTonePreference());
+    const [choosingTone, setChoosingTone] = React.useState(false);
+    const [recent, setRecent] = React.useState(() => getRecentEmoji());
+    const listRef = React.useRef(null);
+    const labelsByEmoji = React.useMemo(() => {
+        const labels = new Map();
+        index?.forEach((entry) => {
+            labels.set(entry.emoji, entry.label);
+            entry.skins.forEach((skin) => labels.set(skin, entry.label));
+        });
+        return labels;
+    }, [index]);
+    const results = React.useMemo(() => (index && query.trim() ? searchEmoji(index, query, 120) : null), [index, query]);
+    const choose = (emoji) => {
+        setRecent(rememberRecentEmoji(emoji));
+        onSelect(emoji);
+    };
+    const chooseEntry = (entry) => choose(withSkinTone(entry, tone));
+    const pickTone = (next) => {
+        setTone(next);
+        setSkinTonePreference(next);
+        setChoosingTone(false);
+    };
+    const scrollToGroup = (id) => {
+        const list = listRef.current;
+        const section = list?.querySelector(`[data-emoji-group="${id}"]`);
+        if (!list || !section)
+            return;
+        list.scrollTop = section.offsetTop;
+    };
+    const groups = [
+        ...(recent.length > 0
+            ? [{ id: RECENT_GROUP, label: "Recently used" }]
+            : []),
+        ...EMOJI_GROUPS,
+    ];
+    return (_jsxs("div", { className: "flex w-80 flex-col", "data-testid": "emoji-picker", children: [_jsxs("div", { className: "border-border-default flex items-center gap-1.5 border-b p-2", children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Search, { strokeWidth: 1, className: "text-neutral-grey-50 pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2" }), _jsx(Input, { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === "Enter" && results?.[0]) {
+                                        event.preventDefault();
+                                        chooseEntry(results[0]);
+                                    }
+                                }, placeholder: "Search emoji", "aria-label": "Search emoji", className: "h-8 pl-7 text-sm md:text-sm", "data-testid": "emoji-picker-search" })] }), _jsx("button", { type: "button", className: "hover:bg-neutral-grey-5 flex size-8 shrink-0 items-center justify-center rounded-md", title: SKIN_TONE_LABELS[tone], "aria-label": `Skin tone: ${SKIN_TONE_LABELS[tone]}`, "aria-expanded": choosingTone, "data-testid": "emoji-picker-skin-tone", onClick: () => setChoosingTone((current) => !current), children: _jsx(Emoji, { emoji: TONE_SAMPLES[tone] ?? TONE_SAMPLES[0], className: "mx-0 size-5 align-baseline", loading: "eager" }) })] }), choosingTone ? (_jsx("div", { className: "border-border-default flex items-center gap-1 border-b px-2 py-1", role: "radiogroup", "aria-label": "Skin tone", children: TONE_SAMPLES.map((sample, toneIndex) => (_jsx("button", { type: "button", role: "radio", "aria-checked": toneIndex === tone, "aria-label": SKIN_TONE_LABELS[toneIndex], title: SKIN_TONE_LABELS[toneIndex], className: cn("hover:bg-neutral-grey-5 flex size-7 items-center justify-center rounded-md", toneIndex === tone && "bg-neutral-grey-5"), onClick: () => pickTone(toneIndex), children: _jsx(Emoji, { emoji: sample, className: "mx-0 size-5 align-baseline", loading: "eager" }) }, sample))) })) : (_jsx("div", { className: "border-border-default flex items-center gap-0.5 border-b px-2 py-1", children: groups.map((group) => {
+                    const Icon = group.id === RECENT_GROUP ? Clock : GROUP_ICONS[group.id];
+                    if (!Icon)
+                        return null;
+                    return (_jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex size-7 items-center justify-center rounded-md disabled:opacity-50", title: group.label, "aria-label": group.label, disabled: !index || !!results, onClick: () => scrollToGroup(group.id), children: _jsx(Icon, { strokeWidth: 1, className: "size-4" }) }, group.id));
+                }) })), _jsx("div", { ref: listRef, 
+                // No padding on the scroll container: a sticky heading sticks to its
+                // content box, and padding would leave a strip of emoji peeking out
+                // above the heading. The grids and headings pad themselves instead.
+                className: "relative h-72 overflow-y-auto pb-2", "data-testid": "emoji-picker-list", children: !index ? (_jsx("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center", children: _jsx(Loader2, { strokeWidth: 1, className: "size-4 animate-spin" }) })) : results ? (results.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center text-sm", children: "No emoji found" })) : (_jsx("div", { className: cn(GRID_CLASS, "p-2"), children: results.map((entry) => (_jsx(EmojiCell, { emoji: withSkinTone(entry, tone), label: entry.label, onSelect: choose }, entry.emoji))) }))) : (groups.map((group) => (_jsxs("section", { "data-emoji-group": group.id, className: "[contain-intrinsic-size:auto_240px] [content-visibility:auto]", children: [_jsx("h4", { className: "text-neutral-grey-50 bg-popover sticky top-0 z-10 px-3 py-1.5 text-[11px] font-medium", children: group.label }), _jsx("div", { className: cn(GRID_CLASS, "px-2"), children: group.id === RECENT_GROUP
+                                ? recent.map((emoji) => (_jsx(EmojiCell, { emoji: emoji, label: labelsByEmoji.get(emoji) ?? emoji, onSelect: choose }, emoji)))
+                                : index
+                                    .filter((entry) => entry.group === group.id)
+                                    .map((entry) => (_jsx(EmojiCell, { emoji: withSkinTone(entry, tone), label: entry.label, onSelect: choose }, entry.emoji))) })] }, group.id)))) })] }));
+}
+/** A smiley button that opens the emoji picker in a popover. */
+export function EmojiPickerButton({ onSelect, disabled = false, className, iconClassName, title = "Add emoji", align = "end", returnFocusTo, }) {
+    const [open, setOpen] = React.useState(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", disabled: disabled, className: cn("inline-flex shrink-0 items-center justify-center rounded-md transition-colors", className), "aria-label": title, title: title, "data-testid": "emoji-picker-button", children: _jsx(Smile, { className: cn("size-4", iconClassName), strokeWidth: 1 }) }) }), _jsx(PopoverContent, { align: align, sideOffset: 6, collisionPadding: 8, className: "w-auto p-0", onCloseAutoFocus: (event) => {
+                    const target = returnFocusTo?.current;
+                    if (!target)
+                        return;
+                    event.preventDefault();
+                    target.focus({ preventScroll: true });
+                }, children: _jsx(EmojiPickerPanel, { onSelect: (emoji) => {
+                        onSelect(emoji);
+                        setOpen(false);
+                    } }) })] }));
+}
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/components/emoji/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/emoji/EmojiPicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/emoji/EmojiText.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/** Inline with the surrounding text, a touch larger than the font's own glyphs. */
+export declare const EMOJI_IMAGE_CLASS = "inline-block size-[1.2em] align-[-0.25em] mx-[0.05em] select-none";
+export interface EmojiProps {
+    emoji: string;
+    className?: string;
+    loading?: "lazy" | "eager";
+}
+/**
+ * One emoji as its Twemoji image. The alt text is the emoji itself, so copying
+ * the comment and screen readers both get the character; when the image cannot
+ * load (offline, CSP without the CDN, an emoji newer than the image set) the
+ * native glyph is shown instead.
+ */
+export declare const Emoji: React.MemoExoticComponent<({ emoji, className, loading, }: EmojiProps) => React.JSX.Element>;
+/** Plain text with its emoji rendered as Twemoji images. */
+export declare function EmojiText({ text }: {
+    text: string;
+}): React.JSX.Element | null;

package/dist/components/emoji/EmojiText.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../lib/utils";
+import { emojiImageUrl, splitEmojiRuns } from "./twemoji";
+/** Inline with the surrounding text, a touch larger than the font's own glyphs. */
+export const EMOJI_IMAGE_CLASS = "inline-block size-[1.2em] align-[-0.25em] mx-[0.05em] select-none";
+/**
+ * One emoji as its Twemoji image. The alt text is the emoji itself, so copying
+ * the comment and screen readers both get the character; when the image cannot
+ * load (offline, CSP without the CDN, an emoji newer than the image set) the
+ * native glyph is shown instead.
+ */
+export const Emoji = React.memo(function Emoji({ emoji, className, loading = "lazy", }) {
+    const src = emojiImageUrl(emoji);
+    const [failedSrc, setFailedSrc] = React.useState(null);
+    if (failedSrc === src) {
+        return (_jsx("span", { className: className, "data-emoji": emoji, children: emoji }));
+    }
+    return (_jsx("img", { src: src, alt: emoji, draggable: false, loading: loading, decoding: "async", className: cn(EMOJI_IMAGE_CLASS, className), "data-emoji": emoji, onError: () => setFailedSrc(src) }));
+});
+/** Plain text with its emoji rendered as Twemoji images. */
+export function EmojiText({ text }) {
+    const runs = React.useMemo(() => splitEmojiRuns(text), [text]);
+    if (runs.length === 0)
+        return null;
+    if (runs.length === 1 && runs[0]?.type === "text")
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: runs.map((run, index) => run.type === "emoji" ? (_jsx(Emoji, { emoji: run.value }, index)) : (_jsx(React.Fragment, { children: run.value }, index))) }));
+}
+//# sourceMappingURL=EmojiText.js.map

package/dist/components/emoji/EmojiText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiText.js","sourceRoot":"","sources":["../../../src/components/emoji/EmojiText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE1D,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,mEAAmE,CAAC;AAQtE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,EAC7C,KAAK,EACL,SAAS,EACT,OAAO,GAAG,MAAM,GACL;IACX,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,IAAI,SAAS,KAAK,GAAG,EAAE,CAAC;QACtB,OAAO,CACL,eAAM,SAAS,EAAE,SAAS,gBAAc,KAAK,YAC1C,KAAK,GACD,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,gBAC/B,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,GAChC,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,4DAA4D;AAC5D,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAoB;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACnC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM;QAAE,OAAO,4BAAG,IAAI,GAAI,CAAC;IACtE,OAAO,CACL,4BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CACvB,GAAG,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACrB,KAAC,KAAK,IAAa,KAAK,EAAE,GAAG,CAAC,KAAK,IAAvB,KAAK,CAAsB,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,KAAK,CAAC,QAAQ,cAAc,GAAG,CAAC,KAAK,IAAjB,KAAK,CAA8B,CACzD,CACF,GACA,CACJ,CAAC;AACJ,CAAC"}