@mantine/emoji 0.0.0-stage → 9.8.1

package/esm/components/EmojiPicker/EmojiPickerSearch.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { useEmojiPickerContext } from "./EmojiPicker.context.mjs";
+import { useEffect, useRef } from "react";
+import { CloseButton, Input, InputWrapperContext } from "@mantine/core";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerSearch.tsx
+const RESET_WRAPPER_CONTEXT = {
+	offsetTop: false,
+	offsetBottom: false,
+	describedBy: void 0,
+	inputId: void 0,
+	labelId: void 0,
+	getStyles: null
+};
+function EmojiPickerSearch({ query, onQueryChange, placeholder, autoFocus, inputRef, onKeyDown, controls, activeDescendant, searchInputProps }) {
+	const ctx = useEmojiPickerContext();
+	const localRef = useRef(null);
+	const mergedRef = useMergedRef(localRef, inputRef);
+	useEffect(() => {
+		if (autoFocus) localRef.current?.focus({ preventScroll: true });
+	}, []);
+	const handleClear = () => {
+		onQueryChange("");
+		localRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...ctx.getStyles("search"),
+		children: /* @__PURE__ */ jsx(InputWrapperContext, {
+			value: RESET_WRAPPER_CONTEXT,
+			children: /* @__PURE__ */ jsx(Input, {
+				...ctx.getStyles("searchInput"),
+				ref: mergedRef,
+				size: ctx.size,
+				value: query,
+				onChange: (event) => onQueryChange(event.currentTarget.value),
+				placeholder: placeholder || ctx.labels.search,
+				role: "searchbox",
+				"aria-label": ctx.labels.search,
+				"aria-controls": controls,
+				"aria-activedescendant": activeDescendant,
+				onKeyDown,
+				rightSectionPointerEvents: "all",
+				rightSection: query ? /* @__PURE__ */ jsx(CloseButton, {
+					size: "sm",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: handleClear,
+					"aria-label": ctx.labels.clearSearch
+				}) : void 0,
+				...searchInputProps
+			})
+		})
+	});
+}
+export { EmojiPickerSearch };
+
+//# sourceMappingURL=EmojiPickerSearch.mjs.map

package/esm/components/EmojiPicker/EmojiPickerSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerSearch.mjs","names":[],"sources":["../../../src/components/EmojiPicker/EmojiPickerSearch.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { CloseButton, Input, InputProps, InputWrapperContext } from '@mantine/core';\nimport { useMergedRef } from '@mantine/hooks';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiPickerSearchProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  placeholder?: string;\n  autoFocus?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  controls?: string;\n  activeDescendant?: string;\n  searchInputProps?: InputProps;\n}\n\nconst RESET_WRAPPER_CONTEXT = {\n  offsetTop: false,\n  offsetBottom: false,\n  describedBy: undefined,\n  inputId: undefined,\n  labelId: undefined,\n  getStyles: null,\n};\n\nexport function EmojiPickerSearch({\n  query,\n  onQueryChange,\n  placeholder,\n  autoFocus,\n  inputRef,\n  onKeyDown,\n  controls,\n  activeDescendant,\n  searchInputProps,\n}: EmojiPickerSearchProps) {\n  const ctx = useEmojiPickerContext();\n  const localRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(localRef, inputRef);\n\n  useEffect(() => {\n    if (autoFocus) {\n      localRef.current?.focus({ preventScroll: true });\n    }\n  }, []);\n\n  const handleClear = () => {\n    onQueryChange('');\n    localRef.current?.focus();\n  };\n\n  return (\n    <div {...ctx.getStyles('search')}>\n      <InputWrapperContext value={RESET_WRAPPER_CONTEXT}>\n        <Input\n          {...ctx.getStyles('searchInput')}\n          ref={mergedRef}\n          size={ctx.size}\n          value={query}\n          onChange={(event) => onQueryChange(event.currentTarget.value)}\n          placeholder={placeholder || ctx.labels.search}\n          role=\"searchbox\"\n          aria-label={ctx.labels.search}\n          aria-controls={controls}\n          aria-activedescendant={activeDescendant}\n          onKeyDown={onKeyDown}\n          rightSectionPointerEvents=\"all\"\n          rightSection={\n            query ? (\n              <CloseButton\n                size=\"sm\"\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={handleClear}\n                aria-label={ctx.labels.clearSearch}\n              />\n            ) : undefined\n          }\n          {...searchInputProps}\n        />\n      </InputWrapperContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,MAAM,wBAAwB;CAC5B,WAAW;CACX,cAAc;CACd,aAAa,KAAA;CACb,SAAS,KAAA;CACT,SAAS,KAAA;CACT,WAAW;AACb;AAEA,SAAgB,kBAAkB,EAChC,OACA,eACA,aACA,WACA,UACA,WACA,UACA,kBACA,oBACyB;CACzB,MAAM,MAAM,sBAAsB;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,UAAU,QAAQ;CAEjD,gBAAgB;EACd,IAAI,WACF,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CAEnD,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB;EACxB,cAAc,EAAE;EAChB,SAAS,SAAS,MAAM;CAC1B;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,QAAQ;EAC7B,UAAA,oBAAC,qBAAD;GAAqB,OAAO;GAC1B,UAAA,oBAAC,OAAD;IACE,GAAI,IAAI,UAAU,aAAa;IAC/B,KAAK;IACL,MAAM,IAAI;IACV,OAAO;IACP,WAAW,UAAU,cAAc,MAAM,cAAc,KAAK;IAC5D,aAAa,eAAe,IAAI,OAAO;IACvC,MAAK;IACL,cAAY,IAAI,OAAO;IACvB,iBAAe;IACf,yBAAuB;IACZ;IACX,2BAA0B;IAC1B,cACE,QACE,oBAAC,aAAD;KACE,MAAK;KACL,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KACT,cAAY,IAAI,OAAO;IACxB,CAAA,IACC,KAAA;IAEN,GAAI;GACL,CAAA;EACkB,CAAA;CAClB,CAAA;AAET"}

package/esm/components/EmojiPicker/EmojiPickerSkinTone.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { useEmojiPickerContext } from "./EmojiPicker.context.mjs";
+import { useState } from "react";
+import { Popover, UnstyledButton } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+// packages/@mantine/emoji/src/components/EmojiPicker/EmojiPickerSkinTone.tsx
+const SKIN_TONE_EMOJIS = [
+	"👋",
+	"👋🏻",
+	"👋🏼",
+	"👋🏽",
+	"👋🏾",
+	"👋🏿"
+];
+const SKIN_TONE_LABEL_KEYS = [
+	"skinToneDefault",
+	"skinToneLight",
+	"skinToneMediumLight",
+	"skinToneMedium",
+	"skinToneMediumDark",
+	"skinToneDark"
+];
+function EmojiPickerSkinTone({ skinTone, onSkinToneChange }) {
+	const ctx = useEmojiPickerContext();
+	const [opened, setOpened] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		opened,
+		onChange: setOpened,
+		position: "top",
+		withArrow: true,
+		withinPortal: false,
+		trapFocus: true,
+		returnFocus: true,
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+			...ctx.getStyles("skinToneButton"),
+			"aria-label": ctx.labels.skinTone,
+			title: ctx.labels.skinTone,
+			onClick: () => setOpened((o) => !o),
+			children: SKIN_TONE_EMOJIS[skinTone]
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			...ctx.getStyles("skinToneDropdown"),
+			children: /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("skinToneSelector"),
+				children: SKIN_TONE_EMOJIS.map((emoji, index) => /* @__PURE__ */ jsx(UnstyledButton, {
+					...ctx.getStyles("skinToneButton"),
+					"aria-label": ctx.labels[SKIN_TONE_LABEL_KEYS[index]],
+					title: ctx.labels[SKIN_TONE_LABEL_KEYS[index]],
+					"aria-pressed": skinTone === index,
+					"data-active": skinTone === index || void 0,
+					"data-autofocus": skinTone === index || void 0,
+					onClick: () => {
+						onSkinToneChange(index);
+						setOpened(false);
+					},
+					children: emoji
+				}, index))
+			})
+		})]
+	});
+}
+export { EmojiPickerSkinTone };
+
+//# sourceMappingURL=EmojiPickerSkinTone.mjs.map

package/esm/components/EmojiPicker/EmojiPickerSkinTone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerSkinTone.mjs","names":[],"sources":["../../../src/components/EmojiPicker/EmojiPickerSkinTone.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Popover, UnstyledButton } from '@mantine/core';\nimport { useEmojiPickerContext } from './EmojiPicker.context';\n\ninterface EmojiPickerSkinToneProps {\n  skinTone: number;\n  onSkinToneChange: (skinTone: number) => void;\n}\n\nconst SKIN_TONE_EMOJIS = ['👋', '👋🏻', '👋🏼', '👋🏽', '👋🏾', '👋🏿'];\n\nconst SKIN_TONE_LABEL_KEYS = [\n  'skinToneDefault',\n  'skinToneLight',\n  'skinToneMediumLight',\n  'skinToneMedium',\n  'skinToneMediumDark',\n  'skinToneDark',\n] as const;\n\nexport function EmojiPickerSkinTone({ skinTone, onSkinToneChange }: EmojiPickerSkinToneProps) {\n  const ctx = useEmojiPickerContext();\n  const [opened, setOpened] = useState(false);\n\n  return (\n    <Popover\n      opened={opened}\n      onChange={setOpened}\n      position=\"top\"\n      withArrow\n      withinPortal={false}\n      trapFocus\n      returnFocus\n    >\n      <Popover.Target>\n        <UnstyledButton\n          {...ctx.getStyles('skinToneButton')}\n          aria-label={ctx.labels.skinTone}\n          title={ctx.labels.skinTone}\n          onClick={() => setOpened((o) => !o)}\n        >\n          {SKIN_TONE_EMOJIS[skinTone]}\n        </UnstyledButton>\n      </Popover.Target>\n      <Popover.Dropdown {...ctx.getStyles('skinToneDropdown')}>\n        <div {...ctx.getStyles('skinToneSelector')}>\n          {SKIN_TONE_EMOJIS.map((emoji, index) => (\n            <UnstyledButton\n              key={index}\n              {...ctx.getStyles('skinToneButton')}\n              aria-label={ctx.labels[SKIN_TONE_LABEL_KEYS[index]]}\n              title={ctx.labels[SKIN_TONE_LABEL_KEYS[index]]}\n              aria-pressed={skinTone === index}\n              data-active={skinTone === index || undefined}\n              data-autofocus={skinTone === index || undefined}\n              onClick={() => {\n                onSkinToneChange(index);\n                setOpened(false);\n              }}\n            >\n              {emoji}\n            </UnstyledButton>\n          ))}\n        </div>\n      </Popover.Dropdown>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AASA,MAAM,mBAAmB;CAAC;CAAM;CAAQ;CAAQ;CAAQ;CAAQ;AAAM;AAEtE,MAAM,uBAAuB;CAC3B;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,oBAAoB,EAAE,UAAU,oBAA8C;CAC5F,MAAM,MAAM,sBAAsB;CAClC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,OACE,qBAAC,SAAD;EACU;EACR,UAAU;EACV,UAAS;EACT,WAAA;EACA,cAAc;EACd,WAAA;EACA,aAAA;EAPF,UAAA,CASE,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,gBAAD;GACE,GAAI,IAAI,UAAU,gBAAgB;GAClC,cAAY,IAAI,OAAO;GACvB,OAAO,IAAI,OAAO;GAClB,eAAe,WAAW,MAAM,CAAC,CAAC;GAEjC,UAAA,iBAAiB;EACJ,CAAA,EACF,CAAA,GAChB,oBAAC,QAAQ,UAAT;GAAkB,GAAI,IAAI,UAAU,kBAAkB;GACpD,UAAA,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,kBAAkB;IACtC,UAAA,iBAAiB,KAAK,OAAO,UAC5B,oBAAC,gBAAD;KAEE,GAAI,IAAI,UAAU,gBAAgB;KAClC,cAAY,IAAI,OAAO,qBAAqB;KAC5C,OAAO,IAAI,OAAO,qBAAqB;KACvC,gBAAc,aAAa;KAC3B,eAAa,aAAa,SAAS,KAAA;KACnC,kBAAgB,aAAa,SAAS,KAAA;KACtC,eAAe;MACb,iBAAiB,KAAK;MACtB,UAAU,KAAK;KACjB;KAEC,UAAA;IACa,GAbT,KAaS,CACjB;GACE,CAAA;EACW,CAAA,CACX;;AAEb"}

package/esm/components/EmojiPickerInput/EmojiPickerInput.mjs

@@ -0,0 +1,190 @@
+"use client";
+import { EmojiPicker } from "../EmojiPicker/EmojiPicker.mjs";
+import EmojiPickerInput_module_default from "./EmojiPickerInput.module.mjs";
+import { useCallback, useRef, useState } from "react";
+import { Input, InputBase, Popover, createVarsResolver, extractStyleProps, factory, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { useId as useId$1, useMergedRef, useUncontrolled } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+// packages/@mantine/emoji/src/components/EmojiPickerInput/EmojiPickerInput.tsx
+const defaultProps = {
+	closeOnSelect: true,
+	clearable: false,
+	size: "sm"
+};
+const varsResolver = createVarsResolver(() => ({ root: {} }));
+const EmojiPickerInput = factory((_props) => {
+	const props = useProps("EmojiPickerInput", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, value: valueProp, defaultValue, onChange, placeholder, clearable, clearButtonProps, popoverProps, opened: openedProp, defaultOpened, onOpenedChange, closeOnSelect, data, onEmojiSelect, pickerProps, readOnly, disabled, label, description, error, success, required, className, style, id, size, variant, errorProps, successProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, inputContainer, inputWrapperOrder, withAsterisk, mod, attributes, rightSection, ref, ...others } = props;
+	const { styleProps, rest } = extractStyleProps(others);
+	const inputRef = useRef(null);
+	const mergedRef = useMergedRef(inputRef, ref);
+	const getStyles = useStyles({
+		name: "EmojiPickerInput",
+		props,
+		classes: EmojiPickerInput_module_default,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const [value, setValue] = useUncontrolled({
+		value: valueProp,
+		defaultValue: defaultValue ?? null,
+		onChange
+	});
+	const [opened, setOpened] = useUncontrolled({
+		value: openedProp,
+		defaultValue: defaultOpened,
+		finalValue: false,
+		onChange: onOpenedChange
+	});
+	const [skinTone, setSkinTone] = useUncontrolled({
+		value: pickerProps?.skinTone,
+		defaultValue: pickerProps?.defaultSkinTone,
+		finalValue: 0,
+		onChange: pickerProps?.onSkinToneChange
+	});
+	const selectedEmoji = value ? data.emojis[value] : null;
+	const [tonedEmoji, setTonedEmoji] = useState(null);
+	const [prevValue, setPrevValue] = useState(value);
+	if (prevValue !== value) {
+		setPrevValue(value);
+		if (tonedEmoji && tonedEmoji.id !== value) setTonedEmoji(null);
+	}
+	const displayedEmoji = tonedEmoji && tonedEmoji.id === value ? tonedEmoji.emoji : selectedEmoji?.emoji;
+	const handleEmojiSelect = useCallback((emoji) => {
+		setValue(emoji.id);
+		setTonedEmoji({
+			id: emoji.id,
+			emoji: emoji.emoji
+		});
+		onEmojiSelect?.(emoji);
+		if (closeOnSelect) setOpened(false);
+	}, [
+		setValue,
+		onEmojiSelect,
+		closeOnSelect,
+		setOpened
+	]);
+	const handleClear = () => {
+		setValue(null);
+		setTonedEmoji(null);
+		inputRef.current?.focus();
+	};
+	const handleInputClick = () => {
+		if (!readOnly && !disabled) setOpened(!opened);
+	};
+	const inputContent = selectedEmoji ? /* @__PURE__ */ jsxs("span", {
+		...getStyles("inputValue"),
+		children: [/* @__PURE__ */ jsx("span", {
+			...getStyles("inputEmoji"),
+			children: displayedEmoji
+		}), /* @__PURE__ */ jsx("span", {
+			...getStyles("inputEmojiName"),
+			children: selectedEmoji.name
+		})]
+	}) : null;
+	const clearButton = clearable && selectedEmoji && !readOnly && !disabled ? /* @__PURE__ */ jsx(Input.ClearButton, {
+		"aria-label": "Clear emoji",
+		...clearButtonProps,
+		"data-clear": true,
+		onClick: (event) => {
+			event.stopPropagation();
+			handleClear();
+			clearButtonProps?.onClick?.(event);
+		}
+	}) : void 0;
+	const _id = useId$1(id);
+	const wrapperProps = {
+		label,
+		description,
+		error,
+		success,
+		required,
+		classNames: resolvedClassNames,
+		className,
+		__staticSelector: "EmojiPickerInput",
+		__stylesApiProps: props,
+		errorProps,
+		successProps,
+		labelProps,
+		descriptionProps,
+		unstyled,
+		styles: resolvedStyles,
+		size,
+		style,
+		inputContainer,
+		inputWrapperOrder,
+		withAsterisk,
+		variant,
+		mod,
+		attributes,
+		..._wrapperProps,
+		...styleProps,
+		id: _id
+	};
+	return /* @__PURE__ */ jsx(Input.Wrapper, {
+		...wrapperProps,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			__staticSelector: "EmojiPickerInput",
+			position: "bottom-start",
+			offset: 5,
+			trapFocus: true,
+			returnFocus: true,
+			...popoverProps,
+			id: _id,
+			opened,
+			onChange: setOpened,
+			classNames: resolvedClassNames,
+			styles: resolvedStyles,
+			unstyled,
+			disabled: readOnly || disabled,
+			children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Input, {
+				component: "button",
+				type: "button",
+				pointer: true,
+				...rest,
+				ref: mergedRef,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				__staticSelector: "EmojiPickerInput",
+				onClick: handleInputClick,
+				rightSection: rightSection || clearButton,
+				disabled,
+				error,
+				success,
+				size,
+				variant,
+				unstyled,
+				id: _id,
+				attributes,
+				"aria-expanded": opened,
+				children: inputContent || /* @__PURE__ */ jsx(Input.Placeholder, { children: placeholder })
+			}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+				...getStyles("dropdown"),
+				children: /* @__PURE__ */ jsx(EmojiPicker, {
+					...pickerProps,
+					skinTone,
+					onSkinToneChange: setSkinTone,
+					data,
+					onEmojiSelect: handleEmojiSelect,
+					autoFocus: true
+				})
+			})]
+		})
+	});
+});
+EmojiPickerInput.classes = {
+	...InputBase.classes,
+	...EmojiPickerInput_module_default
+};
+EmojiPickerInput.displayName = "@mantine/emoji/EmojiPickerInput";
+export { EmojiPickerInput };
+
+//# sourceMappingURL=EmojiPickerInput.mjs.map

package/esm/components/EmojiPickerInput/EmojiPickerInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerInput.mjs","names":["useId","classes"],"sources":["../../../src/components/EmojiPickerInput/EmojiPickerInput.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Input,\n  InputVariant,\n  Popover,\n  PopoverProps,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n  InputBase,\n  InputClearButtonProps,\n  __BaseInputProps,\n  __InputStylesNames,\n} from '@mantine/core';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport type { EmojiPickerEmoji } from '../../types';\nimport { EmojiPicker, EmojiPickerProps } from '../EmojiPicker';\nimport classes from './EmojiPickerInput.module.css';\n\nexport type EmojiPickerInputStylesNames =\n  | 'dropdown'\n  | 'inputEmoji'\n  | 'inputEmojiName'\n  | 'inputValue'\n  | __InputStylesNames;\n\nexport type EmojiPickerInputCssVariables = {\n  root: never;\n};\n\nexport interface EmojiPickerInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<EmojiPickerInputFactory>,\n    ElementProps<'button', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** Controlled emoji id value */\n  value?: string | null;\n\n  /** Default emoji id value for uncontrolled state */\n  defaultValue?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Input placeholder displayed when no emoji is selected */\n  placeholder?: string;\n\n  /** Determines whether the clear button is displayed @default false */\n  clearable?: boolean;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed to the `Popover` component, use `opened`, `defaultOpened` and `onOpenedChange` props to control opened state */\n  popoverProps?: Omit<PopoverProps, 'children' | 'opened' | 'defaultOpened' | 'onChange'>;\n\n  /** Controlled popover opened state */\n  opened?: boolean;\n\n  /** Default popover opened state for uncontrolled mode */\n  defaultOpened?: boolean;\n\n  /** Called when popover opened state changes */\n  onOpenedChange?: (opened: boolean) => void;\n\n  /** Determines whether the popover closes after emoji is selected @default true */\n  closeOnSelect?: boolean;\n\n  /** Emoji data object, use `emojiMartAdapter` or `emojibaseAdapter` to convert data */\n  data: EmojiPickerProps['data'];\n\n  /** Called when an emoji is selected */\n  onEmojiSelect?: EmojiPickerProps['onEmojiSelect'];\n\n  /** Props passed to the `EmojiPicker` component inside the dropdown */\n  pickerProps?: Omit<EmojiPickerProps, 'data' | 'onEmojiSelect'>;\n\n  /** Determines whether the input is in read-only mode */\n  readOnly?: boolean;\n\n  /** Determines whether the input is disabled */\n  disabled?: boolean;\n}\n\nexport type EmojiPickerInputFactory = Factory<{\n  props: EmojiPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: EmojiPickerInputStylesNames;\n  vars: EmojiPickerInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  closeOnSelect: true,\n  clearable: false,\n  size: 'sm',\n} satisfies Partial<EmojiPickerInputProps>;\n\nconst varsResolver = createVarsResolver<EmojiPickerInputFactory>(() => ({\n  root: {},\n}));\n\nexport const EmojiPickerInput = factory<EmojiPickerInputFactory>((_props) => {\n  const props = useProps('EmojiPickerInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    placeholder,\n    clearable,\n    clearButtonProps,\n    popoverProps,\n    opened: openedProp,\n    defaultOpened,\n    onOpenedChange,\n    closeOnSelect,\n    data,\n    onEmojiSelect,\n    pickerProps,\n    readOnly,\n    disabled,\n    label,\n    description,\n    error,\n    success,\n    required,\n    className,\n    style,\n    id,\n    size,\n    variant,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    mod,\n    attributes,\n    rightSection,\n    ref,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const inputRef = useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const getStyles = useStyles<EmojiPickerInputFactory>({\n    name: 'EmojiPickerInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<EmojiPickerInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [value, setValue] = useUncontrolled({\n    value: valueProp,\n    defaultValue: defaultValue ?? null,\n    onChange,\n  });\n\n  const [opened, setOpened] = useUncontrolled({\n    value: openedProp,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange: onOpenedChange,\n  });\n\n  const [skinTone, setSkinTone] = useUncontrolled({\n    value: pickerProps?.skinTone,\n    defaultValue: pickerProps?.defaultSkinTone,\n    finalValue: 0,\n    onChange: pickerProps?.onSkinToneChange,\n  });\n\n  const selectedEmoji = value ? data.emojis[value] : null;\n  const [tonedEmoji, setTonedEmoji] = useState<{ id: string; emoji: string } | null>(null);\n  const [prevValue, setPrevValue] = useState(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (tonedEmoji && tonedEmoji.id !== value) {\n      setTonedEmoji(null);\n    }\n  }\n  const displayedEmoji =\n    tonedEmoji && tonedEmoji.id === value ? tonedEmoji.emoji : selectedEmoji?.emoji;\n\n  const handleEmojiSelect = useCallback(\n    (emoji: EmojiPickerEmoji) => {\n      setValue(emoji.id);\n      setTonedEmoji({ id: emoji.id, emoji: emoji.emoji });\n      onEmojiSelect?.(emoji);\n      if (closeOnSelect) {\n        setOpened(false);\n      }\n    },\n    [setValue, onEmojiSelect, closeOnSelect, setOpened]\n  );\n\n  const handleClear = () => {\n    setValue(null);\n    setTonedEmoji(null);\n    inputRef.current?.focus();\n  };\n\n  const handleInputClick = () => {\n    if (!readOnly && !disabled) {\n      setOpened(!opened);\n    }\n  };\n\n  const inputContent = selectedEmoji ? (\n    <span {...getStyles('inputValue')}>\n      <span {...getStyles('inputEmoji')}>{displayedEmoji}</span>\n      <span {...getStyles('inputEmojiName')}>{selectedEmoji.name}</span>\n    </span>\n  ) : null;\n\n  const clearButton =\n    clearable && selectedEmoji && !readOnly && !disabled ? (\n      <Input.ClearButton\n        aria-label=\"Clear emoji\"\n        {...clearButtonProps}\n        data-clear\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n          event.stopPropagation();\n          handleClear();\n          clearButtonProps?.onClick?.(event);\n        }}\n      />\n    ) : undefined;\n\n  const _id = useId(id);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    success,\n    required,\n    classNames: resolvedClassNames,\n    className,\n    __staticSelector: 'EmojiPickerInput',\n    __stylesApiProps: props,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles: resolvedStyles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    mod,\n    attributes,\n    ..._wrapperProps,\n    ...styleProps,\n    id: _id,\n  };\n\n  return (\n    <Input.Wrapper {...wrapperProps}>\n      <Popover\n        __staticSelector=\"EmojiPickerInput\"\n        position=\"bottom-start\"\n        offset={5}\n        trapFocus\n        returnFocus\n        {...popoverProps}\n        id={_id}\n        opened={opened}\n        onChange={setOpened}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        disabled={readOnly || disabled}\n      >\n        <Popover.Target>\n          <Input\n            component=\"button\"\n            type=\"button\"\n            pointer\n            {...rest}\n            ref={mergedRef}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            __staticSelector=\"EmojiPickerInput\"\n            onClick={handleInputClick}\n            rightSection={rightSection || clearButton}\n            disabled={disabled}\n            error={error}\n            success={success}\n            size={size}\n            variant={variant}\n            unstyled={unstyled}\n            id={_id}\n            attributes={attributes}\n            aria-expanded={opened}\n          >\n            {inputContent || <Input.Placeholder>{placeholder}</Input.Placeholder>}\n          </Input>\n        </Popover.Target>\n\n        <Popover.Dropdown {...getStyles('dropdown')}>\n          <EmojiPicker\n            {...pickerProps}\n            skinTone={skinTone}\n            onSkinToneChange={setSkinTone}\n            data={data}\n            onEmojiSelect={handleEmojiSelect}\n            autoFocus\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nEmojiPickerInput.classes = { ...InputBase.classes, ...classes };\nEmojiPickerInput.displayName = '@mantine/emoji/EmojiPickerInput';\n"],"mappings":"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"}

package/esm/components/EmojiPickerInput/EmojiPickerInput.module.mjs

@@ -0,0 +1,11 @@
+"use client";
+// packages/@mantine/emoji/src/components/EmojiPickerInput/EmojiPickerInput.module.css
+var EmojiPickerInput_module_default = {
+	"inputEmoji": "m_c78924f3",
+	"inputEmojiName": "m_e3dc621e",
+	"dropdown": "m_e8c48c28",
+	"inputValue": "m_c873361e"
+};
+export { EmojiPickerInput_module_default as default };
+
+//# sourceMappingURL=EmojiPickerInput.module.mjs.map

package/esm/components/EmojiPickerInput/EmojiPickerInput.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerInput.module.mjs","names":[],"sources":["../../../src/components/EmojiPickerInput/EmojiPickerInput.module.css"],"sourcesContent":[".inputEmoji {\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.inputEmojiName {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.dropdown {\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.inputValue {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  overflow: hidden;\n}\n"],"mappings":""}

package/esm/components/EmojiPickerPopover/EmojiPickerPopover.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { EmojiPicker } from "../EmojiPicker/EmojiPicker.mjs";
+import EmojiPickerPopover_module_default from "./EmojiPickerPopover.module.mjs";
+import { cloneElement, isValidElement, useCallback } from "react";
+import { Popover, factory, useProps } from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+// packages/@mantine/emoji/src/components/EmojiPickerPopover/EmojiPickerPopover.tsx
+const defaultProps = { closeOnSelect: true };
+const EmojiPickerPopover = factory((_props) => {
+	const { popoverProps, opened: openedProp, defaultOpened, onOpenedChange, closeOnSelect, children, onEmojiSelect, skinTone: skinToneProp, defaultSkinTone, onSkinToneChange, ...pickerProps } = useProps("EmojiPickerPopover", defaultProps, _props);
+	const [opened, setOpened] = useUncontrolled({
+		value: openedProp,
+		defaultValue: defaultOpened,
+		finalValue: false,
+		onChange: onOpenedChange
+	});
+	const [skinTone, setSkinTone] = useUncontrolled({
+		value: skinToneProp,
+		defaultValue: defaultSkinTone,
+		finalValue: 0,
+		onChange: onSkinToneChange
+	});
+	const target = openedProp === void 0 && isValidElement(children) ? cloneElement(children, { onClick: (event) => {
+		setOpened(!opened);
+		children.props.onClick?.(event);
+	} }) : children;
+	const handleEmojiSelect = useCallback((emoji) => {
+		onEmojiSelect?.(emoji);
+		if (closeOnSelect) setOpened(false);
+	}, [
+		onEmojiSelect,
+		closeOnSelect,
+		setOpened
+	]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "bottom-start",
+		offset: 5,
+		trapFocus: true,
+		returnFocus: true,
+		...popoverProps,
+		opened,
+		onChange: setOpened,
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: target }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			className: EmojiPickerPopover_module_default.dropdown,
+			children: /* @__PURE__ */ jsx(EmojiPicker, {
+				...pickerProps,
+				skinTone,
+				onSkinToneChange: setSkinTone,
+				onEmojiSelect: handleEmojiSelect,
+				autoFocus: true
+			})
+		})]
+	});
+});
+EmojiPickerPopover.displayName = "@mantine/emoji/EmojiPickerPopover";
+export { EmojiPickerPopover };
+
+//# sourceMappingURL=EmojiPickerPopover.mjs.map

package/esm/components/EmojiPickerPopover/EmojiPickerPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopover.mjs","names":["classes"],"sources":["../../../src/components/EmojiPickerPopover/EmojiPickerPopover.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useCallback } from 'react';\nimport { factory, Factory, Popover, PopoverProps, useProps } from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport type { EmojiPickerEmoji } from '../../types';\nimport { EmojiPicker, EmojiPickerProps } from '../EmojiPicker';\nimport classes from './EmojiPickerPopover.module.css';\n\nexport interface EmojiPickerPopoverProps extends EmojiPickerProps {\n  /** Props passed to the `Popover` component, use `opened`, `defaultOpened` and `onOpenedChange` props to control opened state */\n  popoverProps?: Omit<PopoverProps, 'children' | 'opened' | 'defaultOpened' | 'onChange'>;\n\n  /** Controlled popover opened state */\n  opened?: boolean;\n\n  /** Default popover opened state for uncontrolled mode */\n  defaultOpened?: boolean;\n\n  /** Called when popover opened state changes */\n  onOpenedChange?: (opened: boolean) => void;\n\n  /** Determines whether the popover closes after emoji is selected @default true */\n  closeOnSelect?: boolean;\n\n  /** Popover target element */\n  children: React.ReactNode;\n}\n\nexport type EmojiPickerPopoverFactory = Factory<{\n  props: EmojiPickerPopoverProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  closeOnSelect: true,\n} satisfies Partial<EmojiPickerPopoverProps>;\n\nexport const EmojiPickerPopover = factory<EmojiPickerPopoverFactory>((_props) => {\n  const props = useProps('EmojiPickerPopover', defaultProps, _props);\n  const {\n    popoverProps,\n    opened: openedProp,\n    defaultOpened,\n    onOpenedChange,\n    closeOnSelect,\n    children,\n    onEmojiSelect,\n    skinTone: skinToneProp,\n    defaultSkinTone,\n    onSkinToneChange,\n    ...pickerProps\n  } = props;\n\n  const [opened, setOpened] = useUncontrolled({\n    value: openedProp,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange: onOpenedChange,\n  });\n\n  const [skinTone, setSkinTone] = useUncontrolled({\n    value: skinToneProp,\n    defaultValue: defaultSkinTone,\n    finalValue: 0,\n    onChange: onSkinToneChange,\n  });\n\n  const isUncontrolled = openedProp === undefined;\n  const target =\n    isUncontrolled && isValidElement<{ onClick?: (event: React.MouseEvent) => void }>(children)\n      ? cloneElement(children, {\n          onClick: (event: React.MouseEvent) => {\n            setOpened(!opened);\n            children.props.onClick?.(event);\n          },\n        })\n      : children;\n\n  const handleEmojiSelect = useCallback(\n    (emoji: EmojiPickerEmoji) => {\n      onEmojiSelect?.(emoji);\n      if (closeOnSelect) {\n        setOpened(false);\n      }\n    },\n    [onEmojiSelect, closeOnSelect, setOpened]\n  );\n\n  return (\n    <Popover\n      position=\"bottom-start\"\n      offset={5}\n      trapFocus\n      returnFocus\n      {...popoverProps}\n      opened={opened}\n      onChange={setOpened}\n    >\n      <Popover.Target>{target}</Popover.Target>\n      <Popover.Dropdown className={classes.dropdown}>\n        <EmojiPicker\n          {...pickerProps}\n          skinTone={skinTone}\n          onSkinToneChange={setSkinTone}\n          onEmojiSelect={handleEmojiSelect}\n          autoFocus\n        />\n      </Popover.Dropdown>\n    </Popover>\n  );\n});\n\nEmojiPickerPopover.displayName = '@mantine/emoji/EmojiPickerPopover';\n"],"mappings":";;;;;;;;AAgCA,MAAM,eAAe,EACnB,eAAe,KACjB;AAEA,MAAa,qBAAqB,SAAoC,WAAW;CAE/E,MAAM,EACJ,cACA,QAAQ,YACR,eACA,gBACA,eACA,UACA,eACA,UAAU,cACV,iBACA,kBACA,GAAG,gBAZS,SAAS,sBAAsB,cAAc,MAanD;CAER,MAAM,CAAC,QAAQ,aAAa,gBAAgB;EAC1C,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,gBAAgB;EAC9C,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAGD,MAAM,SADiB,eAAe,KAAA,KAElB,eAAgE,QAAQ,IACtF,aAAa,UAAU,EACrB,UAAU,UAA4B;EACpC,UAAU,CAAC,MAAM;EACjB,SAAS,MAAM,UAAU,KAAK;CAChC,EACF,CAAC,IACD;CAEN,MAAM,oBAAoB,aACvB,UAA4B;EAC3B,gBAAgB,KAAK;EACrB,IAAI,eACF,UAAU,KAAK;CAEnB,GACA;EAAC;EAAe;EAAe;CAAS,CAC1C;CAEA,OACE,qBAAC,SAAD;EACE,UAAS;EACT,QAAQ;EACR,WAAA;EACA,aAAA;EACA,GAAI;EACI;EACR,UAAU;EAPZ,UAAA,CASE,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,GACxC,oBAAC,QAAQ,UAAT;GAAkB,WAAWA,kCAAQ;GACnC,UAAA,oBAAC,aAAD;IACE,GAAI;IACM;IACV,kBAAkB;IAClB,eAAe;IACf,WAAA;GACD,CAAA;EACe,CAAA,CACX;;AAEb,CAAC;AAED,mBAAmB,cAAc"}

package/esm/components/EmojiPickerPopover/EmojiPickerPopover.module.mjs

@@ -0,0 +1,6 @@
+"use client";
+// packages/@mantine/emoji/src/components/EmojiPickerPopover/EmojiPickerPopover.module.css
+var EmojiPickerPopover_module_default = { "dropdown": "m_c47f7ead" };
+export { EmojiPickerPopover_module_default as default };
+
+//# sourceMappingURL=EmojiPickerPopover.module.mjs.map

package/esm/components/EmojiPickerPopover/EmojiPickerPopover.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopover.module.mjs","names":[],"sources":["../../../src/components/EmojiPickerPopover/EmojiPickerPopover.module.css"],"sourcesContent":[".dropdown {\n  padding: 0;\n  border: none;\n  background: none;\n}\n"],"mappings":""}

package/esm/hooks/use-emoji-grid-navigation.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { applySkinTone, createEmojiGridModel, getEmojiItemIndex, getNextEmojiIndex } from "../utils/emoji-grid-utils.mjs";
+import { useCallback, useMemo, useState } from "react";
+// packages/@mantine/emoji/src/hooks/use-emoji-grid-navigation.ts
+const INITIAL_STATE = {
+	index: 0,
+	source: "anchor"
+};
+const KEY_DIRECTIONS = {
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	ArrowUp: "up",
+	ArrowDown: "down"
+};
+function useEmojiGridNavigation({ items, resetKey, skinTone, onEmojiSelect, scrollToItem }) {
+	const model = useMemo(() => createEmojiGridModel(items), [items]);
+	const [state, setState] = useState(INITIAL_STATE);
+	const [prevResetKey, setPrevResetKey] = useState(resetKey);
+	if (prevResetKey !== resetKey) {
+		setPrevResetKey(resetKey);
+		setState(INITIAL_STATE);
+	}
+	const isCurrent = state.index < model.emojis.length;
+	const source = isCurrent ? state.source : "anchor";
+	const activeIndex = model.emojis.length === 0 ? -1 : isCurrent ? state.index : 0;
+	const keyboardActive = source === "keyboard" && activeIndex !== -1;
+	const setActive = useCallback((index, nextSource) => {
+		setState((prev) => prev.index === index && prev.source === nextSource ? prev : {
+			index,
+			source: nextSource
+		});
+	}, []);
+	const setPointerIndex = useCallback((index) => setActive(index, "pointer"), [setActive]);
+	const setAnchorIndex = useCallback((index) => setActive(index, "anchor"), [setActive]);
+	const handleKeyDown = useCallback((event) => {
+		if (activeIndex === -1) return;
+		const direction = KEY_DIRECTIONS[event.key];
+		if (direction) {
+			event.preventDefault();
+			const nextIndex = source === "anchor" ? activeIndex : getNextEmojiIndex(model, activeIndex, direction);
+			setActive(nextIndex, "keyboard");
+			scrollToItem?.(getEmojiItemIndex(model, nextIndex));
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			onEmojiSelect(applySkinTone(model.emojis[activeIndex], skinTone));
+		}
+	}, [
+		activeIndex,
+		source,
+		model,
+		setActive,
+		scrollToItem,
+		onEmojiSelect,
+		skinTone
+	]);
+	return {
+		model,
+		activeIndex,
+		activeEmoji: activeIndex === -1 ? null : model.emojis[activeIndex],
+		keyboardActive,
+		handleKeyDown,
+		setPointerIndex,
+		setAnchorIndex
+	};
+}
+export { useEmojiGridNavigation };
+
+//# sourceMappingURL=use-emoji-grid-navigation.mjs.map

package/esm/hooks/use-emoji-grid-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-emoji-grid-navigation.mjs","names":[],"sources":["../../src/hooks/use-emoji-grid-navigation.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { EmojiPickerEmoji, FlattenedRowItem } from '../types';\nimport {\n  applySkinTone,\n  createEmojiGridModel,\n  EmojiGridDirection,\n  getEmojiItemIndex,\n  getNextEmojiIndex,\n} from '../utils';\n\ntype ActiveEmojiSource = 'anchor' | 'pointer' | 'keyboard';\n\ninterface ActiveEmojiState {\n  index: number;\n  source: ActiveEmojiSource;\n}\n\ninterface UseEmojiGridNavigationInput {\n  items: FlattenedRowItem[];\n  resetKey: string;\n  skinTone: number;\n  onEmojiSelect: (emoji: EmojiPickerEmoji) => void;\n  scrollToItem?: (itemIndex: number) => void;\n}\n\nconst INITIAL_STATE: ActiveEmojiState = { index: 0, source: 'anchor' };\n\nconst KEY_DIRECTIONS: Record<string, EmojiGridDirection> = {\n  ArrowLeft: 'left',\n  ArrowRight: 'right',\n  ArrowUp: 'up',\n  ArrowDown: 'down',\n};\n\nexport function useEmojiGridNavigation({\n  items,\n  resetKey,\n  skinTone,\n  onEmojiSelect,\n  scrollToItem,\n}: UseEmojiGridNavigationInput) {\n  const model = useMemo(() => createEmojiGridModel(items), [items]);\n  const [state, setState] = useState<ActiveEmojiState>(INITIAL_STATE);\n  const [prevResetKey, setPrevResetKey] = useState(resetKey);\n\n  if (prevResetKey !== resetKey) {\n    setPrevResetKey(resetKey);\n    setState(INITIAL_STATE);\n  }\n\n  const isCurrent = state.index < model.emojis.length;\n  const source: ActiveEmojiSource = isCurrent ? state.source : 'anchor';\n  const activeIndex = model.emojis.length === 0 ? -1 : isCurrent ? state.index : 0;\n  const keyboardActive = source === 'keyboard' && activeIndex !== -1;\n\n  const setActive = useCallback((index: number, nextSource: ActiveEmojiSource) => {\n    setState((prev) =>\n      prev.index === index && prev.source === nextSource ? prev : { index, source: nextSource }\n    );\n  }, []);\n\n  const setPointerIndex = useCallback((index: number) => setActive(index, 'pointer'), [setActive]);\n  const setAnchorIndex = useCallback((index: number) => setActive(index, 'anchor'), [setActive]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (activeIndex === -1) {\n        return;\n      }\n\n      const direction = KEY_DIRECTIONS[event.key];\n      if (direction) {\n        event.preventDefault();\n        const nextIndex =\n          source === 'anchor' ? activeIndex : getNextEmojiIndex(model, activeIndex, direction);\n        setActive(nextIndex, 'keyboard');\n        scrollToItem?.(getEmojiItemIndex(model, nextIndex));\n        return;\n      }\n\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onEmojiSelect(applySkinTone(model.emojis[activeIndex], skinTone));\n      }\n    },\n    [activeIndex, source, model, setActive, scrollToItem, onEmojiSelect, skinTone]\n  );\n\n  return {\n    model,\n    activeIndex,\n    activeEmoji: activeIndex === -1 ? null : model.emojis[activeIndex],\n    keyboardActive,\n    handleKeyDown,\n    setPointerIndex,\n    setAnchorIndex,\n  };\n}\n"],"mappings":";;;;AAyBA,MAAM,gBAAkC;CAAE,OAAO;CAAG,QAAQ;AAAS;AAErE,MAAM,iBAAqD;CACzD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAEA,SAAgB,uBAAuB,EACrC,OACA,UACA,UACA,eACA,gBAC8B;CAC9B,MAAM,QAAQ,cAAc,qBAAqB,KAAK,GAAG,CAAC,KAAK,CAAC;CAChE,MAAM,CAAC,OAAO,YAAY,SAA2B,aAAa;CAClE,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CAEzD,IAAI,iBAAiB,UAAU;EAC7B,gBAAgB,QAAQ;EACxB,SAAS,aAAa;CACxB;CAEA,MAAM,YAAY,MAAM,QAAQ,MAAM,OAAO;CAC7C,MAAM,SAA4B,YAAY,MAAM,SAAS;CAC7D,MAAM,cAAc,MAAM,OAAO,WAAW,IAAI,KAAK,YAAY,MAAM,QAAQ;CAC/E,MAAM,iBAAiB,WAAW,cAAc,gBAAgB;CAEhE,MAAM,YAAY,aAAa,OAAe,eAAkC;EAC9E,UAAU,SACR,KAAK,UAAU,SAAS,KAAK,WAAW,aAAa,OAAO;GAAE;GAAO,QAAQ;EAAW,CAC1F;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,aAAa,UAAkB,UAAU,OAAO,SAAS,GAAG,CAAC,SAAS,CAAC;CAC/F,MAAM,iBAAiB,aAAa,UAAkB,UAAU,OAAO,QAAQ,GAAG,CAAC,SAAS,CAAC;CAE7F,MAAM,gBAAgB,aACnB,UAA+B;EAC9B,IAAI,gBAAgB,IAClB;EAGF,MAAM,YAAY,eAAe,MAAM;EACvC,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,MAAM,YACJ,WAAW,WAAW,cAAc,kBAAkB,OAAO,aAAa,SAAS;GACrF,UAAU,WAAW,UAAU;GAC/B,eAAe,kBAAkB,OAAO,SAAS,CAAC;GAClD;EACF;EAEA,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GACrB,cAAc,cAAc,MAAM,OAAO,cAAc,QAAQ,CAAC;EAClE;CACF,GACA;EAAC;EAAa;EAAQ;EAAO;EAAW;EAAc;EAAe;CAAQ,CAC/E;CAEA,OAAO;EACL;EACA;EACA,aAAa,gBAAgB,KAAK,OAAO,MAAM,OAAO;EACtD;EACA;EACA;EACA;CACF;AACF"}

package/esm/hooks/use-emoji-search.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { searchEmojis } from "../utils/search-emojis.mjs";
+import { useMemo } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+// packages/@mantine/emoji/src/hooks/use-emoji-search.ts
+function useEmojiSearch({ data, searchValue, onSearchChange }) {
+	const [query, setQuery] = useUncontrolled({
+		value: searchValue,
+		defaultValue: "",
+		onChange: onSearchChange
+	});
+	return {
+		query,
+		setQuery,
+		results: useMemo(() => searchEmojis(data, query), [data, query]),
+		isSearching: query.trim().length > 0
+	};
+}
+export { useEmojiSearch };
+
+//# sourceMappingURL=use-emoji-search.mjs.map

package/esm/hooks/use-emoji-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-emoji-search.mjs","names":[],"sources":["../../src/hooks/use-emoji-search.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport type { EmojiPickerData, EmojiPickerEmoji } from '../types';\nimport { searchEmojis } from '../utils';\n\ninterface UseEmojiSearchInput {\n  data: EmojiPickerData;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n}\n\ninterface UseEmojiSearchResult {\n  query: string;\n  setQuery: (value: string) => void;\n  results: EmojiPickerEmoji[];\n  isSearching: boolean;\n}\n\nexport function useEmojiSearch({\n  data,\n  searchValue,\n  onSearchChange,\n}: UseEmojiSearchInput): UseEmojiSearchResult {\n  const [query, setQuery] = useUncontrolled({\n    value: searchValue,\n    defaultValue: '',\n    onChange: onSearchChange,\n  });\n\n  const results = useMemo(() => searchEmojis(data, query), [data, query]);\n  const isSearching = query.trim().length > 0;\n\n  return { query, setQuery, results, isSearching };\n}\n"],"mappings":";;;;;AAkBA,SAAgB,eAAe,EAC7B,MACA,aACA,kBAC4C;CAC5C,MAAM,CAAC,OAAO,YAAY,gBAAgB;EACxC,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAKD,OAAO;EAAE;EAAO;EAAU,SAHV,cAAc,aAAa,MAAM,KAAK,GAAG,CAAC,MAAM,KAAK,CAGrC;EAAG,aAFf,MAAM,KAAK,CAAC,CAAC,SAAS;CAEK;AACjD"}

package/esm/index.mjs

@@ -0,0 +1,11 @@
+import { DEFAULT_LABELS } from "./types.mjs";
+import { CANONICAL_CATEGORY_IDS } from "./categories.mjs";
+import { searchEmojis } from "./utils/search-emojis.mjs";
+import { flattenEmojiData } from "./utils/flatten-emoji-data.mjs";
+import { filterSupportedEmojis, isEmojiSupported } from "./utils/is-emoji-supported.mjs";
+import { emojiMartAdapter } from "./adapters/emoji-mart-adapter.mjs";
+import { emojibaseAdapter } from "./adapters/emojibase-adapter.mjs";
+import { EmojiPicker } from "./components/EmojiPicker/EmojiPicker.mjs";
+import { EmojiPickerPopover } from "./components/EmojiPickerPopover/EmojiPickerPopover.mjs";
+import { EmojiPickerInput } from "./components/EmojiPickerInput/EmojiPickerInput.mjs";
+export { CANONICAL_CATEGORY_IDS, DEFAULT_LABELS, EmojiPicker, EmojiPickerInput, EmojiPickerPopover, emojiMartAdapter, emojibaseAdapter, filterSupportedEmojis, flattenEmojiData, isEmojiSupported, searchEmojis };

package/esm/types.mjs

@@ -0,0 +1,20 @@
+"use client";
+// packages/@mantine/emoji/src/types.ts
+const DEFAULT_LABELS = {
+	search: "Search emojis",
+	skinTone: "Skin tone",
+	noResults: "No emojis found",
+	skinToneLight: "Light skin tone",
+	skinToneMediumLight: "Medium-light skin tone",
+	skinToneMedium: "Medium skin tone",
+	skinToneMediumDark: "Medium-dark skin tone",
+	skinToneDark: "Dark skin tone",
+	skinToneDefault: "Default skin tone",
+	searchResults: "Search Results",
+	preview: "Emoji preview",
+	clearSearch: "Clear search",
+	emojis: "Emojis"
+};
+export { DEFAULT_LABELS };
+
+//# sourceMappingURL=types.mjs.map

package/esm/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":[],"sources":["../src/types.ts"],"sourcesContent":["export interface EmojiPickerEmoji {\n  id: string;\n  name: string;\n  keywords: string[];\n  emoji: string;\n  skins?: string[];\n  version?: number;\n}\n\nexport interface EmojiPickerCategory {\n  id: string;\n  label: string;\n  emojis: string[];\n}\n\nexport interface EmojiPickerData {\n  categories: EmojiPickerCategory[];\n  emojis: Record<string, EmojiPickerEmoji>;\n}\n\nexport interface EmojiPickerLabels {\n  search?: string;\n  skinTone?: string;\n  noResults?: string;\n  skinToneLight?: string;\n  skinToneMediumLight?: string;\n  skinToneMedium?: string;\n  skinToneMediumDark?: string;\n  skinToneDark?: string;\n  skinToneDefault?: string;\n  searchResults?: string;\n  preview?: string;\n  clearSearch?: string;\n  emojis?: string;\n}\n\nexport const DEFAULT_LABELS: Required<EmojiPickerLabels> = {\n  search: 'Search emojis',\n  skinTone: 'Skin tone',\n  noResults: 'No emojis found',\n  skinToneLight: 'Light skin tone',\n  skinToneMediumLight: 'Medium-light skin tone',\n  skinToneMedium: 'Medium skin tone',\n  skinToneMediumDark: 'Medium-dark skin tone',\n  skinToneDark: 'Dark skin tone',\n  skinToneDefault: 'Default skin tone',\n  searchResults: 'Search Results',\n  preview: 'Emoji preview',\n  clearSearch: 'Clear search',\n  emojis: 'Emojis',\n};\n\nexport type FlattenedRowItem =\n  | { type: 'header'; categoryId: string; label: string }\n  | { type: 'row'; emojis: EmojiPickerEmoji[] };\n"],"mappings":";;AAoCA,MAAa,iBAA8C;CACzD,QAAQ;CACR,UAAU;CACV,WAAW;CACX,eAAe;CACf,qBAAqB;CACrB,gBAAgB;CAChB,oBAAoB;CACpB,cAAc;CACd,iBAAiB;CACjB,eAAe;CACf,SAAS;CACT,aAAa;CACb,QAAQ;AACV"}