50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T41c2,'use client'; /* eslint-disable react-hooks/refs */ import * as React from 'react'; import type { Emoji } from '@emoji-mart/data'; import { type EmojiCategoryList, type EmojiIconList, type GridRow, EmojiSettings, } from '@platejs/emoji'; import { type EmojiDropdownMenuOptions, type UseEmojiPickerType, useEmojiDropdownMenuState, } from '@platejs/emoji/react'; import * as Popover from '@radix-ui/react-popover'; import { AppleIcon, ClockIcon, CompassIcon, FlagIcon, LeafIcon, LightbulbIcon, MusicIcon, SearchIcon, SmileIcon, StarIcon, XIcon, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; import { ToolbarButton } from '@/registry/ui/toolbar'; export function EmojiToolbarButton({ options, ...props }: { options?: EmojiDropdownMenuOptions; } & React.ComponentPropsWithoutRef) { const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState(options); return ( } isOpen={isOpen} setIsOpen={setIsOpen} > ); } export function EmojiPopover({ children, control, isOpen, setIsOpen, }: { children: React.ReactNode; control: React.ReactNode; isOpen: boolean; setIsOpen: (open: boolean) => void; }) { return ( {control} {children} ); } export function EmojiPicker({ clearSearch, emoji, emojiLibrary, focusedCategory, hasFound, i18n, icons = { categories: emojiCategoryIcons, search: emojiSearchIcons, }, isSearching, refs, searchResult, searchValue, setSearch, settings = EmojiSettings, visibleCategories, handleCategoryClick, onMouseOver, onSelectEmoji, }: Omit & { icons?: EmojiIconList; }) { return (

); } const EmojiButton = React.memo(function EmojiButton({ emoji, index, onMouseOver, onSelect, }: { emoji: Emoji; index: number; onMouseOver: (emoji?: Emoji) => void; onSelect: (emoji: Emoji) => void; }) { return ( ); }); const RowOfButtons = React.memo(function RowOfButtons({ emojiLibrary, row, onMouseOver, onSelectEmoji, }: { row: GridRow; } & Pick< UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji' >) { return (

{row.elements.map((emojiId, index) => ( ))}

); }); function EmojiPickerContent({ emojiLibrary, i18n, isSearching = false, refs, searchResult, settings = EmojiSettings, visibleCategories, onMouseOver, onSelectEmoji, }: Pick< UseEmojiPickerType, | 'emojiLibrary' | 'i18n' | 'isSearching' | 'onMouseOver' | 'onSelectEmoji' | 'refs' | 'searchResult' | 'settings' | 'visibleCategories' >) { const getRowWidth = settings.perLine.value * settings.buttonSize.value; const isCategoryVisible = React.useCallback( (categoryId: any) => visibleCategories.has(categoryId) ? visibleCategories.get(categoryId) : false, [visibleCategories] ); const EmojiList = React.useCallback( () => emojiLibrary .getGrid() .sections() .map(({ id: categoryId }) => { const section = emojiLibrary.getGrid().section(categoryId); const { buttonSize } = settings; return (

{i18n.categories[categoryId]}

{isCategoryVisible(categoryId) && section .getRows() .map((row: GridRow) => ( ))}

); }), [ emojiLibrary, getRowWidth, i18n.categories, isCategoryVisible, onSelectEmoji, onMouseOver, settings, ] ); const SearchList = React.useCallback( () => (

{i18n.searchResult}

{searchResult.map((emoji: Emoji, index: number) => ( ))}

), [ emojiLibrary, getRowWidth, i18n.searchResult, searchResult, onSelectEmoji, onMouseOver, ] ); return (

{isSearching ? SearchList() : EmojiList()}

); } function EmojiPickerSearchBar({ children, i18n, searchValue, setSearch, }: { children: React.ReactNode; } & Pick) { return (

setSearch(event.target.value)} placeholder={i18n.search} aria-label="Search" autoComplete="off" type="text" autoFocus /> {children}

); } function EmojiPickerSearchAndClear({ clearSearch, i18n, searchValue, }: Pick) { return (

{emojiSearchIcons.loupe}

{searchValue && ( )}

); } function EmojiPreview({ emoji }: Pick) { return (

{emoji?.skins[0].native}

{emoji?.name}

{`:${emoji?.id}:`}

); } function NoEmoji({ i18n }: Pick) { return (

😢

{i18n.searchNoResultsTitle}

{i18n.searchNoResultsSubtitle}

); } function PickAnEmoji({ i18n }: Pick) { return (

☝️

{i18n.pick}

); } function EmojiPickerPreview({ emoji, hasFound = true, i18n, isSearching = false, ...props }: Pick) { const showPickEmoji = !emoji && (!isSearching || hasFound); const showNoEmoji = isSearching && !hasFound; const showPreview = emoji && !showNoEmoji && !showNoEmoji; return ( <> {showPreview && } {showPickEmoji && } {showNoEmoji && } ); } function EmojiPickerNavigation({ emojiLibrary, focusedCategory, i18n, icons, onClick, }: { onClick: (id: EmojiCategoryList) => void; } & Pick< UseEmojiPickerType, 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons' >) { return (

{emojiLibrary .getGrid() .sections() .map(({ id }) => ( {i18n.categories[id]} ))}

); } const emojiCategoryIcons: Record< EmojiCategoryList, { outline: React.ReactElement; solid: React.ReactElement; // Needed to add another solid variant - outline will be used for now } > = { activity: { outline: ( ), solid: ( ), }, custom: { outline: , solid: , }, flags: { outline: , solid: , }, foods: { outline: , solid: , }, frequent: { outline: , solid: , }, nature: { outline: , solid: , }, objects: { outline: , solid: , }, people: { outline: , solid: , }, places: { outline: , solid: , }, symbols: { outline: , solid: , }, }; const emojiSearchIcons = { delete: , loupe: , }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@platejs/emoji",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Femoji","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/emoji"}]]}]}],["$","li","@emoji-mart/data@1.2.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40emoji-mart%2Fdata","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@emoji-mart/data@1.2.1"}]]}]}],["$","li","@radix-ui/react-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-popover"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["https://platejs.org/r/toolbar.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/emoji-toolbar-button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]