@astryxdesign/lab 0.7.2-canary.58d3353 → 0.7.2-canary.59c4ef7

package/blocks/EmojiPickerInPopover.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'In a popover',
+  displayName: 'In a popover',
+  description:
+    'Open the picker from an emoji button in a Popover with no padding. Leave the Popover’s autofocus on: it lands in the search field, so typing searches right away.',
+  exampleFor: 'EmojiPicker',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['EmojiPicker', 'Popover', 'IconButton', 'Text', 'HStack'],
+};

package/blocks/EmojiPickerInPopover.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input Controlled popover state and the text the picks build
+ * @output An emoji button opening the picker in a Popover; the Popover's own
+ *   autofocus lands in the picker's search field
+ * @position Copyable Lab EmojiPicker example
+ */
+
+import {useState} from 'react';
+import {HStack} from '@astryxdesign/core/Layout';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Popover} from '@astryxdesign/core/Popover';
+import {Text} from '@astryxdesign/core/Text';
+import {EmojiPicker} from '@astryxdesign/lab';
+
+export default function EmojiPickerInPopover() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [text, setText] = useState('');
+
+  return (
+    <HStack gap={2} align="center">
+      <Popover
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        label="Add emoji"
+        padding={0}
+        width={352}
+        content={
+          <EmojiPicker
+            onSelect={emoji => {
+              setText(current => current + emoji);
+              setIsOpen(false);
+            }}
+          />
+        }>
+        <IconButton
+          label="Add emoji"
+          variant="secondary"
+          icon={<span aria-hidden="true">🙂</span>}
+        />
+      </Popover>
+      <Text type="large">{text === '' ? 'Pick some emoji' : text}</Text>
+    </HStack>
+  );
+}

package/blocks/EmojiPickerShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'Inline picker',
+  displayName: 'Inline picker',
+  description:
+    'An emoji picker inline in a Card: search by name or keyword, move with the arrow keys, and pick; the last pick shows above it.',
+  exampleFor: 'EmojiPicker',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 1,
+  componentsUsed: ['EmojiPicker', 'Card', 'HStack', 'VStack', 'Text'],
+};

package/blocks/EmojiPickerShowcase.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input The picked emoji, kept in local state
+ * @output An inline emoji picker in a Card, naming the last pick
+ * @position Lab EmojiPicker's docsite showcase and copyable CLI block
+ */
+
+import {useState} from 'react';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {EmojiPicker, type EmojiOption} from '@astryxdesign/lab';
+
+export default function EmojiPickerShowcase() {
+  const [picked, setPicked] = useState<EmojiOption | null>(null);
+
+  return (
+    <VStack gap={3} width={352}>
+      <HStack gap={2} align="center">
+        <Text type="label">Picked:</Text>
+        <Text type="body" color="secondary">
+          {picked == null ? 'Nothing yet' : `${picked.emoji} ${picked.name}`}
+        </Text>
+      </HStack>
+      <Card padding={0} width="100%">
+        <EmojiPicker onSelect={(_, option) => setPicked(option)} />
+      </Card>
+    </VStack>
+  );
+}

package/dist/EmojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @file EmojiPicker.tsx
+ * @input Uses React, StyleX, theme tokens, useGridFocus, useTranslator,
+ *   TextInput, ScrollableArea, Text, Spinner, Icon, and the lazily loaded CLDR
+ *   emoji set (emojiData.ts)
+ * @output Exports EmojiPicker, EmojiPickerProps, EmojiOption, EmojiCategory,
+ *   DEFAULT_FREQUENT_EMOJIS, and a persistent search-status announcement
+ * @position Standalone emoji panel: a search field over every emoji by CLDR
+ *   group. Hosts place it inline or inside a Popover; CommentComposer uses it
+ *   for its emoji button.
+ *
+ * The full emoji set is the largest part of the picker, so it loads the first
+ * time a picker mounts rather than with the page. Each group is a WAI-ARIA
+ * grid of eight columns; one roving tab stop crosses every group through the
+ * shared `useGridFocus` keyboard model. Enter in the search field picks the
+ * first match, and a footer names the emoji under the pointer or focus.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/EmojiPicker/index.ts (exports)
+ * - /packages/lab/src/EmojiPicker/EmojiPicker.doc.mjs
+ * - /packages/lab/blocks/EmojiPickerShowcase.tsx
+ * - /packages/core/locales/en.json (@astryx.emojiPicker.*)
+ */
+import { type Ref } from 'react';
+import type { BaseProps, SizeValue } from '@astryxdesign/core';
+export interface EmojiOption {
+    /** The emoji character, e.g. "🎉". */
+    emoji: string;
+    /** Its name, used for search and as its accessible label, e.g. "Party popper". */
+    name: string;
+    /** Other words search should match, e.g. ["celebration", "tada"]. */
+    keywords?: readonly string[];
+}
+export interface EmojiCategory {
+    /** The group's heading, e.g. "Smileys & emotion". */
+    name: string;
+    emojis: readonly EmojiOption[];
+}
+/** The emoji listed first, before the groups, when the host passes none. */
+export declare const DEFAULT_FREQUENT_EMOJIS: readonly EmojiOption[];
+export interface EmojiPickerProps extends Omit<BaseProps<HTMLDivElement>, 'onSelect'> {
+    /** Ref forwarded to the root element. */
+    ref?: Ref<HTMLDivElement>;
+    /** Called with the picked emoji character and its option. */
+    onSelect: (emoji: string, option: EmojiOption) => void;
+    /**
+     * Emoji listed first, under "Frequently used": the host's own recent or
+     * favorite emoji. Pass an empty array to leave the row out.
+     * @default DEFAULT_FREQUENT_EMOJIS
+     */
+    frequentEmojis?: readonly EmojiOption[];
+    /**
+     * The emoji to offer, by group. Omit it to load the bundled set: every
+     * emoji through Emoji 15 with English CLDR names, loaded the first time a
+     * picker mounts. Pass your own groups for a localized or custom set.
+     */
+    categories?: readonly EmojiCategory[];
+    /**
+     * Height of the scrolling emoji list.
+     * @default 'calc(var(--spacing-8) * 10)'
+     */
+    height?: SizeValue;
+    /**
+     * Focuses the search field when the picker mounts, for a picker shown
+     * inline or in a Dialog. Inside a Popover, leave the Popover's own autofocus
+     * on instead: it focuses the search field once the Popover shows.
+     * @default false
+     */
+    hasAutoFocus?: boolean;
+    /**
+     * Accessible name of the emoji list. Defaults to the localized "Emoji".
+     */
+    label?: string;
+    /**
+     * Placeholder and hidden label of the search field. Defaults to the
+     * localized "Search emoji".
+     */
+    searchLabel?: string;
+}
+/**
+ * A standalone emoji panel: a search field over every emoji by group, with
+ * the host's frequent emoji first. Picking one calls `onSelect`; the picker
+ * keeps no selection of its own.
+ *
+ * @example
+ * ```
+ * <Card padding={0} width={352}>
+ *   <EmojiPicker onSelect={emoji => insert(emoji)} />
+ * </Card>
+ * ```
+ */
+export declare function EmojiPicker({ onSelect, frequentEmojis, categories: categoriesProp, height, hasAutoFocus, label: labelProp, searchLabel: searchLabelProp, xstyle, className, style, ref, ...rest }: EmojiPickerProps): import("react").JSX.Element;
+export declare namespace EmojiPicker {
+    var displayName: string;
+}
+//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/EmojiPicker/EmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAOL,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAiB7D,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;CAChC;AAED,4EAA4E;AAC5E,eAAO,MAAM,uBAAuB,EAAE,SAAS,WAAW,EASxD,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvD;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAEtC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuKD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,cAAwC,EACxC,UAAU,EAAE,cAAc,EAC1B,MAA4B,EAC5B,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,eAAe,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAiPlB;yBA9Pe,WAAW"}

package/dist/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,451 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file EmojiPicker.tsx
+ * @input Uses React, StyleX, theme tokens, useGridFocus, useTranslator,
+ *   TextInput, ScrollableArea, Text, Spinner, Icon, and the lazily loaded CLDR
+ *   emoji set (emojiData.ts)
+ * @output Exports EmojiPicker, EmojiPickerProps, EmojiOption, EmojiCategory,
+ *   DEFAULT_FREQUENT_EMOJIS, and a persistent search-status announcement
+ * @position Standalone emoji panel: a search field over every emoji by CLDR
+ *   group. Hosts place it inline or inside a Popover; CommentComposer uses it
+ *   for its emoji button.
+ *
+ * The full emoji set is the largest part of the picker, so it loads the first
+ * time a picker mounts rather than with the page. Each group is a WAI-ARIA
+ * grid of eight columns; one roving tab stop crosses every group through the
+ * shared `useGridFocus` keyboard model. Enter in the search field picks the
+ * first match, and a footer names the emoji under the pointer or focus.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/EmojiPicker/index.ts (exports)
+ * - /packages/lab/src/EmojiPicker/EmojiPicker.doc.mjs
+ * - /packages/lab/blocks/EmojiPickerShowcase.tsx
+ * - /packages/core/locales/en.json (@astryx.emojiPicker.*)
+ */
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { useGridFocus } from '@astryxdesign/core/hooks';
+import { useTranslator } from '@astryxdesign/core/i18n';
+import { focusOutlineStyles, isImeKeyEvent, mergeProps, themeProps } from '@astryxdesign/core/utils';
+import { Center } from '@astryxdesign/core/Center';
+import { Icon } from '@astryxdesign/core/Icon';
+import { HStack, VStack } from '@astryxdesign/core/Layout';
+import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
+import { Spinner } from '@astryxdesign/core/Spinner';
+import { Text } from '@astryxdesign/core/Text';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The emoji listed first, before the groups, when the host passes none. */
+export const DEFAULT_FREQUENT_EMOJIS = Object.freeze([{
+  emoji: '👍',
+  name: 'Thumbs up'
+}, {
+  emoji: '❤️',
+  name: 'Red heart'
+}, {
+  emoji: '😂',
+  name: 'Face with tears of joy'
+}, {
+  emoji: '🎉',
+  name: 'Party popper'
+}, {
+  emoji: '😮',
+  name: 'Face with open mouth'
+}, {
+  emoji: '🙏',
+  name: 'Folded hands'
+}, {
+  emoji: '👀',
+  name: 'Eyes'
+}, {
+  emoji: '✅',
+  name: 'Check mark button'
+}]);
+/** Eight emoji a row, so arrow keys move through a fixed geometry. */
+const COLUMNS = 8;
+/* The catalog keys of the bundled groups' headings, by group. */
+const bundledLabelKeys = new WeakMap();
+const BUNDLED_GROUP_KEYS = {
+  'Smileys & emotion': '@astryx.emojiPicker.groupSmileysEmotion',
+  'People & body': '@astryx.emojiPicker.groupPeopleBody',
+  'Animals & nature': '@astryx.emojiPicker.groupAnimalsNature',
+  'Food & drink': '@astryx.emojiPicker.groupFoodDrink',
+  'Travel & places': '@astryx.emojiPicker.groupTravelPlaces',
+  Activities: '@astryx.emojiPicker.groupActivities',
+  Objects: '@astryx.emojiPicker.groupObjects',
+  Symbols: '@astryx.emojiPicker.groupSymbols',
+  Flags: '@astryx.emojiPicker.groupFlags'
+};
+
+/* The bundled set, shared by every picker once one has loaded it. */
+let bundledCategories = null;
+function loadBundledCategories() {
+  bundledCategories ??= import("./emojiData.js").then(({
+    EMOJI_GROUPS
+  }) => EMOJI_GROUPS.map(group => {
+    const category = {
+      name: group.name,
+      emojis: group.emojis.map(([emoji, name, keywords]) => ({
+        emoji,
+        name,
+        keywords: keywords === '' ? undefined : keywords.split(' ')
+      }))
+    };
+    const labelKey = BUNDLED_GROUP_KEYS[group.name];
+    if (labelKey != null) {
+      bundledLabelKeys.set(category, labelKey);
+    }
+    return category;
+  }), error => {
+    // Let the next picker try again.
+    bundledCategories = null;
+    throw error;
+  });
+  return bundledCategories;
+}
+function useCategories(categories) {
+  const [loaded, setLoaded] = useState('loading');
+  // Loading is I/O: the module arrives after the first render.
+  useEffect(() => {
+    if (categories != null) {
+      return;
+    }
+    let isCurrent = true;
+    loadBundledCategories().then(result => {
+      if (isCurrent) {
+        setLoaded(result);
+      }
+    }, () => {
+      if (isCurrent) {
+        setLoaded('failed');
+      }
+    });
+    return () => {
+      isCurrent = false;
+    };
+  }, [categories]);
+  return categories ?? loaded;
+}
+
+/**
+ * Whether an emoji's name or keywords hold every word of a search, each as
+ * the start of a word: `cat` finds Cat face, not Vacation.
+ */
+function emojiMatches(option, queryWords) {
+  const words = [option.name, ...(option.keywords ?? [])].join(' ').toLowerCase().split(/[\s:,()-]+/);
+  return queryWords.every(query => words.some(word => word.startsWith(query)));
+}
+/** A section's emoji in rows of eight; the last row is padded with empty
+ *  cells so every row has the grid's full geometry. */
+function toRows(emojis) {
+  const rows = [];
+  for (let start = 0; start < emojis.length; start += COLUMNS) {
+    const row = emojis.slice(start, start + COLUMNS);
+    while (row.length < COLUMNS) {
+      row.push(null);
+    }
+    rows.push(row);
+  }
+  return rows;
+}
+
+/* A group's heading stays at the top of the list while its emoji scroll
+   under it, on the popover surface the picker usually sits on. */
+const styles = {
+  categoryLabel: {
+    kVAEAm: "x7wzq59",
+    k87sOh: "x13vifvy",
+    kY2c9j: "x1vjfegm",
+    kWkggS: "x1prclbq",
+    $$css: true
+  },
+  cell: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "xh8yej3",
+    kOBAk4: "x1plog1",
+    kmVPX3: "x1717udv",
+    ksu8eU: "xng3xce",
+    kaIpWk: "xx3sua9",
+    kWkggS: "xjbqb8w x1iutq3a xoevpu5",
+    kkrTdU: "x1ypdohk x16khyan",
+    kGuDYH: "x18juvz8",
+    kLWn49: "xo5v014",
+    kInvED: "x1wfwxd8 x1bqaal",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  preview: {
+    kAzted: "xkoleio",
+    $$css: true
+  }
+};
+const DEFAULT_LIST_HEIGHT = 'calc(var(--spacing-8) * 10)';
+
+/**
+ * A standalone emoji panel: a search field over every emoji by group, with
+ * the host's frequent emoji first. Picking one calls `onSelect`; the picker
+ * keeps no selection of its own.
+ *
+ * @example
+ * ```
+ * <Card padding={0} width={352}>
+ *   <EmojiPicker onSelect={emoji => insert(emoji)} />
+ * </Card>
+ * ```
+ */
+export function EmojiPicker({
+  onSelect,
+  frequentEmojis = DEFAULT_FREQUENT_EMOJIS,
+  categories: categoriesProp,
+  height = DEFAULT_LIST_HEIGHT,
+  hasAutoFocus = false,
+  label: labelProp,
+  searchLabel: searchLabelProp,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const label = labelProp ?? t('@astryx.emojiPicker.label');
+  const searchLabel = searchLabelProp ?? t('@astryx.emojiPicker.searchLabel');
+  const [query, setQuery] = useState('');
+  const [preview, setPreview] = useState(null);
+  const categories = useCategories(categoriesProp);
+  const searchRef = useRef(null);
+  const baseId = useId();
+  const {
+    gridRef,
+    handleKeyDown,
+    handleFocus,
+    focusFirst
+  } = useGridFocus({
+    columns: COLUMNS,
+    cellSelector: '[role="gridcell"]',
+    isCellFocusable: cell => cell.querySelector('button') !== null,
+    getFocusTarget: cell => cell.querySelector('button'),
+    hasRovingTabIndex: true,
+    // Up from the first row returns to the search field.
+    onNavigateBefore: (_column, offset) => {
+      if (offset === COLUMNS) {
+        searchRef.current?.focus();
+      }
+    }
+  });
+  const queryWords = useMemo(() => query.toLowerCase().split(/\s+/).filter(Boolean), [query]);
+  const isLoading = categories === 'loading';
+  const groups = useMemo(() => Array.isArray(categories) ? categories : [], [categories]);
+  const frequentLabel = t('@astryx.emojiPicker.frequentlyUsed');
+  const searchResultsLabel = t('@astryx.emojiPicker.searchResults');
+  const sections = useMemo(() => {
+    if (queryWords.length === 0) {
+      return [...(frequentEmojis.length > 0 ? [{
+        key: 'frequent',
+        label: frequentLabel,
+        emojis: frequentEmojis
+      }] : []), ...groups.map((group, index) => {
+        const labelKey = bundledLabelKeys.get(group);
+        return {
+          key: `group-${index}`,
+          label: labelKey != null ? t(labelKey) : group.name,
+          emojis: group.emojis
+        };
+      })];
+    }
+    const seen = new Set();
+    // Match before de-duplicating: a frequent emoji may carry no keywords, so
+    // its group's entry is often the one that matches.
+    const matches = [frequentEmojis, ...groups.map(group => group.emojis)].flat().filter(option => emojiMatches(option, queryWords)).filter(option => {
+      if (seen.has(option.emoji)) {
+        return false;
+      }
+      seen.add(option.emoji);
+      return true;
+    });
+    return matches.length > 0 ? [{
+      key: 'results',
+      label: searchResultsLabel,
+      emojis: matches
+    }] : [];
+  }, [frequentEmojis, frequentLabel, groups, queryWords, searchResultsLabel, t]);
+  const firstMatch = sections[0]?.emojis[0];
+  const noResultsMessage = !isLoading && queryWords.length > 0 && sections.length === 0 ? t('@astryx.emojiPicker.noResults', {
+    query: query.trim()
+  }) : undefined;
+  const pick = option => onSelect(option.emoji, option);
+  const handleSearchKeyDown = event => {
+    // While an IME is composing, the arrows move through its candidates.
+    if (isImeKeyEvent(event.nativeEvent)) {
+      return;
+    }
+    if (event.key === 'ArrowDown' && firstMatch != null) {
+      event.preventDefault();
+      focusFirst();
+    }
+  };
+  const renderSection = (section, sectionIndex) => {
+    // An id holds no spaces: aria-labelledby splits on them.
+    const labelId = `${baseId}-group-${sectionIndex}`;
+    return /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(HStack, {
+        paddingInline: 3,
+        paddingBlock: 1,
+        xstyle: styles.categoryLabel,
+        children: /*#__PURE__*/_jsx(Text, {
+          type: "label",
+          id: labelId,
+          children: section.label
+        })
+      }), /*#__PURE__*/_jsx(VStack, {
+        role: "grid",
+        "aria-labelledby": labelId,
+        gap: 0.5,
+        width: "100%",
+        paddingInline: 3,
+        children: toRows(section.emojis).map((row, rowIndex) => /*#__PURE__*/_jsx("div", {
+          role: "row",
+          ...{
+            className: "xrvj5dj x1grqvj x1kihgfc"
+          },
+          children: row.map((option, column) => /*#__PURE__*/_jsx("div", {
+            role: "gridcell",
+            ...{
+              className: "x78zum5 xeuugli"
+            },
+            children: option != null && /*#__PURE__*/_jsx("button", {
+              type: "button",
+              "aria-label": option.name,
+              ...stylex.props(focusOutlineStyles.focusVisible, styles.cell),
+              onClick: () => pick(option),
+              onFocus: () => setPreview(option),
+              onMouseEnter: () => setPreview(option),
+              children: /*#__PURE__*/_jsx("span", {
+                "aria-hidden": "true",
+                children: option.emoji
+              })
+            })
+          }, option?.emoji ?? `empty-${column}`))
+        }, rowIndex))
+      })]
+    }, section.key);
+  };
+  return /*#__PURE__*/_jsxs(VStack, {
+    ref: ref,
+    gap: 2,
+    width: "100%"
+    // The picker owns its insets, so it sits edge to edge in a Popover or
+    // Card with no padding, its group headings spanning the full width.
+    ,
+    paddingBlockStart: 3,
+    ...rest,
+    ...mergeProps(themeProps('emoji-picker'), stylex.props(xstyle), className, style),
+    children: [/*#__PURE__*/_jsx(VStack, {
+      paddingInline: 3,
+      width: "100%",
+      children: /*#__PURE__*/_jsx(TextInput, {
+        ref: searchRef,
+        label: searchLabel,
+        isLabelHidden: true,
+        placeholder: searchLabel,
+        startIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: "search",
+          size: "sm",
+          color: "secondary"
+        }),
+        hasClear: true,
+        hasAutoFocus: hasAutoFocus,
+        value: query,
+        onChange: value => {
+          setQuery(value);
+          setPreview(null);
+        },
+        onEnter: () => {
+          if (queryWords.length > 0 && firstMatch != null) {
+            pick(firstMatch);
+          }
+        },
+        onKeyDown: handleSearchKeyDown
+      })
+    }), /*#__PURE__*/_jsx(ScrollableArea, {
+      label: label,
+      height: height,
+      overscroll: "contain",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        ref: gridRef,
+        gap: 3,
+        width: "100%",
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onMouseLeave: () => setPreview(null),
+        children: [sections.map(renderSection), queryWords.length > 0 && sections.length === 0 && isLoading ? /*#__PURE__*/_jsx(Center, {
+          children: /*#__PURE__*/_jsx(Spinner, {
+            size: "sm",
+            label: t('@astryx.emojiPicker.loading')
+          })
+        }) : queryWords.length === 0 && isLoading ? /*#__PURE__*/_jsx(Center, {
+          children: /*#__PURE__*/_jsx(Spinner, {
+            size: "sm",
+            label: t('@astryx.emojiPicker.loading')
+          })
+        }) : queryWords.length === 0 && categories === 'failed' ? /*#__PURE__*/_jsx(HStack, {
+          paddingInline: 3,
+          children: /*#__PURE__*/_jsx(Text, {
+            type: "supporting",
+            color: "secondary",
+            children: t('@astryx.emojiPicker.loadFailed')
+          })
+        }) : null, /*#__PURE__*/_jsx(HStack, {
+          role: "status",
+          "aria-atomic": "true",
+          paddingInline: 3,
+          "data-emoji-picker-search-status": "true",
+          children: noResultsMessage != null && /*#__PURE__*/_jsx(Text, {
+            type: "supporting",
+            color: "secondary",
+            children: noResultsMessage
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(HStack, {
+      gap: 2,
+      align: "center",
+      paddingInline: 3,
+      paddingBlockEnd: 2,
+      xstyle: styles.preview
+      // The cell's own name already reaches assistive tech.
+      ,
+      "aria-hidden": "true",
+      children: preview != null ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x18juvz8 xo5v014"
+          },
+          children: preview.emoji
+        }), /*#__PURE__*/_jsx(Text, {
+          type: "supporting",
+          color: "secondary",
+          maxLines: 1,
+          children: preview.name
+        })]
+      }) : /*#__PURE__*/_jsx(Text, {
+        type: "supporting",
+        color: "secondary",
+        maxLines: 1,
+        children: label
+      })
+    })]
+  });
+}
+EmojiPicker.displayName = 'EmojiPicker';

package/dist/EmojiPicker/emojiData.d.ts

@@ -0,0 +1,13 @@
+/** One emoji: the character, its CLDR name, and its other CLDR keywords. */
+export type EmojiDatum = readonly [
+    emoji: string,
+    name: string,
+    keywords: string
+];
+/** A CLDR emoji group, in CLDR order. */
+export interface EmojiDatumGroup {
+    readonly name: string;
+    readonly emojis: readonly EmojiDatum[];
+}
+export declare const EMOJI_GROUPS: readonly EmojiDatumGroup[];
+//# sourceMappingURL=emojiData.d.ts.map

package/dist/EmojiPicker/emojiData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emojiData.d.ts","sourceRoot":"","sources":["../../src/EmojiPicker/emojiData.ts"],"names":[],"mappings":"AAIA,4EAA4E;AAC5E,MAAM,MAAM,UAAU,GAAG,SAAS;IAChC,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,yCAAyC;AACzC,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,EAAE,SAAS,eAAe,EAgjGlD,CAAC"}