@fibery/ui-kit 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -59,9 +59,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/react": "1.0.3",
     "@fibery/helpers": "1.1.0",
-    "@fibery/emoji-data": "2.0.0",
-    "@fibery/react": "1.0.3"
+    "@fibery/emoji-data": "2.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -93,8 +93,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.3.0"
+    "@fibery/eslint-config": "8.3.0",
+    "@fibery/babel-preset": "7.2.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/antd/styles.ts

@@ -1,8 +1,24 @@
 import {css} from "@linaria/core";
 import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
 
+const inputVariables = {
+  default: {
+    "--input-border": themeVars.inputBorderColor,
+    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40}`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity25}`,
+    "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
+  },
+  error: {
+    "--input-border": themeVars.inputErrorBorderColor,
+    "--input-hover-border": themeVars.inputErrorBorderHoverColor,
+    "--input-focus-border": themeVars.inputErrorBorderFocusColor,
+    "--input-focus-shadow": themeVars.inputErrorBorderFocusShadow,
+  },
+};
+
 export const inputOverrides = {
   main: {
+    ...inputVariables.default,
     font: "inherit",
     color: themeVars.textColor,
     outline: "none",
@@ -16,18 +32,18 @@ export const inputOverrides = {
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
-    boxShadow: themeVars.inputBorderColor,
+    boxShadow: "var(--input-border)",
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
   hover: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity40} !important`,
+    boxShadow: "var(--input-hover-border) !important",
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus} !important`,
+    boxShadow: "var(--input-focus-border), var(--input-focus-shadow) !important",
     transition: `box-shadow ${transition}`,
   },
   disabled: {
@@ -63,6 +79,7 @@ export const inputStyles = css`
     },
     "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
     "& .ant-input": inputOverrides.main,
+    "& .ant-input-status-error": inputVariables.error,
     "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},

package/src/designSystem.ts

@@ -157,6 +157,10 @@ const lightColors = {
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
   inputPlaceholderTextColor: slate.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red11}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red11).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red11).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
   buttonPrimaryColor: indigo.indigo10,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
@@ -269,12 +273,12 @@ const lightColors = {
   gridHeaderTextColor: slate.slate9,
   // cell
   gridCellBgColor: whiteA.whiteA0,
-  gridCellBorderColor: slate.slate4,
+  gridCellBorderColor: slate.slate5,
   gridPinnedCellBorderColor: slate.slate8,
   gridDisabledCellBgColor: slate.slate2,
   gridSelectedCellBgColor: indigo.indigo3,
   gridHighlightedCellBgColor: indigo.indigo4,
-  gridSelectedCellBorderColor: indigo.indigo5,
+  gridSelectedCellBorderColor: indigo.indigo6,
   gridSelectedPinnedCellBorderColor: indigo.indigo7,
   gridDisabledSelectedCellBgColor: indigo.indigo4,
   gridActiveCellBorderColor: indigo.indigo8,
@@ -341,6 +345,10 @@ const darkColors = {
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
   inputPlaceholderTextColor: slateDark.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red7}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red7).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red7).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
   buttonPrimaryColor: indigoDark.indigo10,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
@@ -450,12 +458,12 @@ const darkColors = {
   gridHeaderTextColor: slateDark.slate10,
   // cell
   gridCellBgColor: slateDark.slate2,
-  gridCellBorderColor: slateDark.slate5,
+  gridCellBorderColor: slateDark.slate6,
   gridPinnedCellBorderColor: slateDark.slate8,
   gridDisabledCellBgColor: slateDark.slate3,
   gridSelectedCellBgColor: indigoDark.indigo3,
   gridHighlightedCellBgColor: indigoDark.indigo5,
-  gridSelectedCellBorderColor: indigoDark.indigo6,
+  gridSelectedCellBorderColor: indigoDark.indigo7,
   gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
   gridDisabledSelectedCellBgColor: indigoDark.indigo5,
   gridActiveCellBorderColor: indigoDark.indigo9,
@@ -925,13 +933,6 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
-  fake: {
-    fontFamily,
-    fontSize: typeSizes[7],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: colors.shades.opacity25,
-  },
   link: {
     color: themeVars.linkColor,
     borderBottom: themeVars.linkBorder,

package/src/emoji-picker/app-icon-picker.tsx

@@ -1,7 +1,7 @@
 import {EmojiItem} from "@fibery/emoji-data/lib/src";
 import {ColorPicker} from "../ColorPicker";
 import {$TSFixMe} from "../tsfixme";
-import {LazyIconDataStore} from "./lazy-icon-data-store";
+import {LazyIconDataStore} from "./stores/lazy-icon-data-store";
 import {EmojiPickerContent} from "./primitives/content";
 import {EmojiPickerFooter} from "./primitives/footer";
 import {EmojiPickerGrid} from "./primitives/grid";

package/src/emoji-picker/emoji-picker.tsx

@@ -7,7 +7,6 @@ import {EmojiPickerSearch} from "./primitives/search";
 import {cx, css} from "@linaria/core";
 import {EmojiPickerSkinTone} from "./primitives/skin-tone";
 import {EmojiPickerGrid} from "./primitives/grid";
-import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
 import {ColorPicker} from "../ColorPicker";
 import {EmojiPickerFooter} from "./primitives/footer";
 import {cardTypeColors} from "../designSystem";
@@ -19,45 +18,48 @@ export type EmojiPickerProps = {
   getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
+  onCustomCategorySettings?: () => void;
+  onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
 
-  onSelect: (emoji: EmojiItem) => void;
+  searchRef?: React.RefObject<HTMLInputElement>;
 };
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   onSelect,
   color,
   colors = cardTypeColors,
   onColorSelect,
+  onCustomCategorySettings,
   getHoverColor,
   showSkinTones,
+  searchRef,
 }) => {
   return (
-    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
+    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <LazyEmojiDataStore fallback={<div style={{height: "282px"}}></div>}>
-          <EmojiPickerHeader>
-            <EmojiPickerSearch
-              autoFocus
-              className={cx(
-                showSkinTones &&
-                  css`
-                    width: 250px !important;
-                  `
-              )}
+        <EmojiPickerHeader>
+          <EmojiPickerSearch
+            searchRef={searchRef}
+            autoFocus
+            className={cx(
+              showSkinTones &&
+                css`
+                  width: 250px !important;
+                `
+            )}
+          />
+          {/* Temporary hacks. SkinTone should move to footer */}
+          {showSkinTones ? (
+            <EmojiPickerSkinTone
+              className={css`
+                position: absolute;
+                top: 4px;
+                right: 12px;
+              `}
             />
-            {/* Temporary hacks. SkinTone should move to footer */}
-            {showSkinTones ? (
-              <EmojiPickerSkinTone
-                className={css`
-                  position: absolute;
-                  top: 4px;
-                  right: 12px;
-                `}
-              />
-            ) : null}
-          </EmojiPickerHeader>
-          <EmojiPickerGrid />
-        </LazyEmojiDataStore>
+          ) : null}
+        </EmojiPickerHeader>
+        <EmojiPickerGrid />
 
         {onColorSelect ? (
           <EmojiPickerFooter>

package/src/emoji-picker/emoji.tsx

@@ -1,11 +1,8 @@
-import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
 import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
+import {isApple} from "./utils/emoji-set";
+import {detectEmojiSupportLevel} from "./utils/emoji-support";
 
 export type EmojiProps = EmojiPrimitiveProps;
-export const Emoji: React.FC<EmojiPrimitiveProps> = function EmojiOrLoader(props) {
-  return (
-    <LazyEmojiDataStore fallback={<div style={{width: props.size, height: props.size}} />}>
-      <EmojiPrimitive {...props} />
-    </LazyEmojiDataStore>
-  );
+export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
+  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
 };

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -23,8 +23,11 @@ export type IconEmojiPickerProps = React.PropsWithChildren<{
   onIconSelect?: AppIconPickerProps["onSelect"];
   onEmojiSelect?: EmojiPickerProps["onSelect"];
   onColorSelect?: (c: $TSFixMe) => void;
+  onCreateClick?: () => void;
+  onCustomEmojisSettings?: () => void;
   onReset?: () => void;
   resetLabel?: string;
+  createLabel?: string;
   defaultTab?: TabKey;
   showColorPickerOnTabs?: TabKey[];
   color?: string;
@@ -34,8 +37,11 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onIconSelect,
   onEmojiSelect,
   onColorSelect,
+  onCreateClick,
+  onCustomEmojisSettings,
   defaultTab,
   onReset,
+  createLabel = "Add Emoji",
   resetLabel = "Reset",
   showColorPickerOnTabs = ["icons", "emojis"],
   color,
@@ -51,13 +57,27 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
           key: "emojis",
           label: <TabHeader>Emojis</TabHeader>,
           children: (
-            <EmojiPicker
-              color={color}
-              onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
-              getHoverColor={getHoverColor}
-              onSelect={onEmojiSelect}
-              showSkinTones
-            />
+            <>
+              <EmojiPicker
+                color={color}
+                onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
+                onCustomCategorySettings={onCustomEmojisSettings}
+                getHoverColor={getHoverColor}
+                onSelect={onEmojiSelect}
+                showSkinTones
+              />
+              {onCreateClick && (
+                <div
+                  className={css`
+                    padding: ${space.l}px;
+                  `}
+                >
+                  <Button size=":button-size/small" onClick={onCreateClick}>
+                    {createLabel}
+                  </Button>
+                </div>
+              )}
+            </>
           ),
         },
         onIconSelect && {

package/src/emoji-picker/primitives/category.tsx

@@ -1,6 +1,9 @@
 import {Category} from "@fibery/emoji-data";
 import {CSSProperties, css} from "@linaria/core";
+import {memo} from "react";
+import {IconButton} from "../../Button/icon-button";
 import {space, textStyles, themeVars} from "../../designSystem";
+import {Settings} from "../../icons/react";
 import {useEmojiPickerContentSettings} from "./content";
 import {Emoji} from "./emoji";
 import {emojiPadding} from "./layout";
@@ -17,6 +20,10 @@ const categoryLabelCss = css`
   position: sticky;
   top: 0;
 
+  display: flex;
+  align-items: center;
+  gap: ${space.xs}px;
+
   /* is required only because contentVisibility lifts emoji up */
   z-index: 1;
 `;
@@ -58,7 +65,7 @@ const NotFound = () => {
 type EmojiPickerCategoryProps = {
   category: Category;
 };
-export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({category}) => {
+export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({category}) {
   const i18n = useEmojiPickerI18N();
   const emojiPickerCtx = useEmojiPickerCtx();
   const emojiContentSettings = useEmojiPickerContentSettings();
@@ -71,6 +78,11 @@ export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({categor
     <section className={categoryCss} aria-label={label}>
       <div className={categoryLabelCss}>
         <span aria-hidden={true /* already labeled by the section aria-label */}>{label}</span>
+        {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
+          <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
+            <Settings iconSize={16} />
+          </IconButton>
+        )}
       </div>
 
       {category.emojis.length > 0 ? (
@@ -90,10 +102,11 @@ export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({categor
                 <Emoji
                   onClick={emojiPickerCtx.onEmojiSelect}
                   emoji={id}
-                  forceSize
+                  size={emojiContentSettings.emojiSize}
                   version={emojiPickerCtx.version}
                   skin={skin}
                   tooltip
+                  native={emojiPickerCtx.native}
                 />
               </li>
             );
@@ -104,4 +117,4 @@ export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({categor
       )}
     </section>
   );
-};
+});

package/src/emoji-picker/primitives/emoji.tsx

@@ -5,15 +5,31 @@ import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {emojiPadding} from "./layout";
 
 const emojiWrapperCss = css`
+  color: ${themeVars.textColor};
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
+    "Noto Color Emoji", "Android Emoji";
+`;
+const emojiWrapperSizedCss = css`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: ${themeVars.textColor};
+`;
+
+const emojiInlineImgCss = css`
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.1em;
+`;
+const emojiSizedImgCss = css`
+  width: 100%;
+  height: 100%;
 `;
 
 const clickableCss = css`
   padding: ${emojiPadding}px;
   cursor: pointer;
+  font-size: 0;
   margin: 0;
   border: none;
   background: none;
@@ -25,11 +41,8 @@ const clickableCss = css`
   }
 `;
 
-const getSizeStyle = (size: number) => ({
-  display: "inline-block",
-  width: size,
-  height: size,
-});
+// This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
+const emptyPixel = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
 
 export type EmojiProps = {
   size?: number;
@@ -40,17 +53,17 @@ export type EmojiProps = {
   version?: number;
   onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
   skin?: EmojiSkin;
-
-  forceSize?: boolean;
+  /** render emoji as native unicode if possible */
+  native?: boolean;
 };
 export const Emoji: React.FC<EmojiProps> = ({
   emoji: idOrColons,
-  size = 20,
   tooltip,
-  forceSize = false,
+  size,
   onClick,
   version = 14,
   skin,
+  native,
 }) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
@@ -61,33 +74,15 @@ export const Emoji: React.FC<EmojiProps> = ({
   let emojiNode: React.ReactNode;
 
   if ("native" in emoji) {
-    if (version >= emoji.version) {
-      emojiNode = (
-        <span
-          style={{
-            fontSize: size,
-            fontFamily:
-              '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"',
-
-            ...(forceSize
-              ? {
-                  ...getSizeStyle(size),
-                  textAlign: "center",
-                  lineHeight: 1,
-                  wordBreak: "keep-all",
-                }
-              : {}),
-          }}
-        >
-          {emoji.native}
-        </span>
-      );
+    if (native && version >= emoji.version) {
+      emojiNode = emoji.native;
     } else {
       emojiNode = (
-        <span
+        <img
+          alt={emoji.name}
+          className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+          src={emptyPixel}
           style={{
-            ...getSizeStyle(size),
-
             backgroundImage: `url(${emoji.sprite.src})`,
             backgroundSize: emoji.sprite.size,
             backgroundPosition: emoji.sprite.position,
@@ -97,33 +92,39 @@ export const Emoji: React.FC<EmojiProps> = ({
     }
   } else {
     emojiNode = (
-      <span
-        style={{
-          ...getSizeStyle(size),
-          backgroundImage: `url(${emoji.imageUrl})`,
-          backgroundSize: "contain",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
-        }}
+      <img
+        alt={emoji.name}
+        loading="lazy"
+        className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+        src={emoji.imageUrl}
       />
     );
   }
 
   // TODO: use fibery's tooltip?
-  const title = tooltip ? emoji.id : undefined;
+  const title = tooltip ? emoji.shortNames[0] : undefined;
+
+  const style = size ? {fontSize: size, width: size, height: size} : {};
 
   return onClick ? (
     <button
       type="button"
       onClick={(e) => onClick(emoji, e)}
-      className={cx(emojiWrapperCss, clickableCss)}
+      className={cx(clickableCss)}
       title={title}
       aria-label={emoji.name}
     >
-      {emojiNode}
+      <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}>
+        {emojiNode}
+      </span>
     </button>
   ) : (
-    <span className={emojiWrapperCss} title={title} aria-label={emoji.name}>
+    <span
+      style={style}
+      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
+      title={title}
+      aria-label={emoji.name}
+    >
       {emojiNode}
     </span>
   );

package/src/emoji-picker/primitives/root.tsx

@@ -5,10 +5,14 @@ import {EmojiPickerSearchProvider} from "./search-provider";
 import {detectEmojiSupportLevel} from "../utils/emoji-support";
 import {EmojiSkinProvider} from "./skin-provider";
 import {add as addToFrequentlyUsed} from "../utils/frequently";
+import {isApple} from "../utils/emoji-set";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 
 type EmojiPickerCtx = {
   version: number;
   onEmojiSelect: (emoji: EmojiItem) => void;
+  onCustomCategorySettings?: () => void;
+  native: boolean;
 };
 const [Provider, useCtx] = createContext<EmojiPickerCtx>("EmojiPickerRoot");
 
@@ -49,19 +53,25 @@ export const EmojiPickerRoot: React.FC<
   React.PropsWithChildren<{
     i18n?: Partial<I18N>;
     onEmojiSelect: (emoji: EmojiItem) => void;
+    onCustomCategorySettings?: () => void;
   }>
-> = ({i18n, onEmojiSelect, children}) => {
+> = ({i18n, onEmojiSelect, onCustomCategorySettings, children}) => {
   const mergedI18N = useMemo(() => ({...defaultI18N, ...i18n}), [i18n]);
 
+  const onEmojiSelectCb = useCallbackRef(onEmojiSelect);
+  const onCustomCategorySettingsCb = useCallbackRef(onCustomCategorySettings);
+
   const emojiPickerCtx = useMemo(
     () => ({
       version: detectEmojiSupportLevel(),
+      native: isApple(),
+      onCustomCategorySettings: onCustomCategorySettingsCb,
       onEmojiSelect(emoji: EmojiItem) {
-        onEmojiSelect(emoji);
+        onEmojiSelectCb(emoji);
         addToFrequentlyUsed(emoji.id);
       },
     }),
-    [onEmojiSelect]
+    [onEmojiSelectCb, onCustomCategorySettingsCb]
   );
 
   return (

package/src/emoji-picker/primitives/search.tsx

@@ -1,13 +1,15 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {startTransition, useId, useRef} from "react";
-import Search from "../../icons/react/Search";
-import Close from "../../icons/react/Close";
+import {IconButton} from "../../Button/icon-button";
 import {border, space, textStyles, themeVars} from "../../designSystem";
+import Close from "../../icons/react/Close";
+import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
-import {IconButton} from "../../Button/icon-button";
-import {EmojiItem} from "@fibery/emoji-data";
+import {useEmojiSkin} from "./skin-provider";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -61,18 +63,24 @@ export type EmojiPickerSearchProps = {
   autoFocus?: boolean;
 
   className?: string;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
 };
 
-export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className}) => {
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef}) => {
   const ref = useRef<HTMLInputElement>(null);
+
+  const setRefs = useComposedRefs(ref, searchRef);
+
   const i18n = useEmojiPickerI18N();
   const emojiPicker = useEmojiPickerCtx();
   const emojiData = useEmojiDataStore();
   const foundEmojis = useFoundEmojis();
+  const skin = useEmojiSkin();
   const _setFoundEmojis = useSetFoundEmojis();
 
   const setFoundEmojis = (emojis: EmojiItem[] | null) => {
-    // imroves responsiveness from input.
+    // improves responsiveness of input.
     // TODO: better just implement a proper virtualization
     startTransition(() => _setFoundEmojis(emojis));
   };
@@ -98,17 +106,17 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
   return (
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
       <input
-        ref={ref}
+        ref={setRefs}
+        autoFocus={autoFocus}
         id={inputId}
         className={searchInputCss}
         type="search"
         placeholder={i18n.search}
-        autoFocus={autoFocus}
         onKeyDown={onKeyDown}
         onChange={(e) => {
           const value = e.target.value;
 
-          setFoundEmojis(value ? emojiData.search(value) : null);
+          setFoundEmojis(value ? emojiData.search(value, {skin}) : null);
         }}
       />
       {/*

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -7,14 +7,17 @@ import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
 
 const skinToneWrapperCss = css`
+  display: flex;
+  align-items: center;
   background-color: ${themeVars.actionMenuBg};
   font-size: 0;
   line-height: 1.15;
+
+  /* magic constant until skin tone is removed from picker search bar */
+  height: 36px;
 `;
 
 const skinToneSwatchCss = css`
-  display: inline-block;
-  vertical-align: middle;
   overflow: hidden;
   width: 0;
   padding: 0;
@@ -83,6 +86,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
             }}
             emoji={`:hand::skin-tone-${skinTone}:`}
             version={emojiPickerCtx.version}
+            native={emojiPickerCtx.native}
             size={20}
           />
         </span>

package/src/emoji-picker/{lazy-icon-data-store.tsx → stores/lazy-icon-data-store.tsx}

@@ -1,9 +1,9 @@
 import {makeEmojiData} from "@fibery/emoji-data";
 import {Suspense, lazy, useEffect, useState} from "react";
-import {getThemedUrl} from "../AppIconWithFallback";
-import {useThemeMode} from "../ThemeProvider";
-import {alignTheme} from "../theme-settings";
-import {EmojiDataStoreProvider, useEmojiDataStore} from "./stores/emoji-data-store";
+import {getThemedUrl} from "../../AppIconWithFallback";
+import {useThemeMode} from "../../ThemeProvider";
+import {alignTheme} from "../../theme-settings";
+import {EmojiDataStoreProvider, useEmojiDataStore} from "./emoji-data-store";
 
 const EMPTY_DATA = {
   aliases: {},
@@ -13,7 +13,7 @@ const EMPTY_DATA = {
 };
 
 const LazyAppIcons = lazy(async () => {
-  const {default: appIcons} = await import("../appIcons.json");
+  const {default: appIcons} = await import("../../appIcons.json");
 
   return {
     default: function EmojiDataStore({children}: React.PropsWithChildren) {

package/src/emoji-picker/stores/static-emoji-data-store.tsx

@@ -0,0 +1,16 @@
+import {FC, ReactNode, useMemo} from "react";
+import {makeEmojiData} from "@fibery/emoji-data";
+import {getEmojiSet} from "../utils/emoji-set";
+import {EmojiDataStoreProvider} from "./emoji-data-store";
+import rawData from "@fibery/emoji-data/data/all.json";
+
+// Static means "preloaded", "non-lazy" here
+
+interface EmojiDataProviderProps {
+  children?: ReactNode;
+}
+
+export const StaticEmojiDataStore: FC<EmojiDataProviderProps> = ({children}) => {
+  const emojiData = useMemo(() => makeEmojiData(rawData, {set: getEmojiSet()}), []);
+  return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -1,5 +1,5 @@
 import {SpritesheetSet} from "@fibery/emoji-data";
 
-const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
+export const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
 
 export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");

package/src/icons/ast/LineDivider.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LineDivider: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z"},"children":[]}],"metadata":""}]},"name":"line-divider"};
+
+export default LineDivider;

package/src/icons/ast/index.tsx

@@ -83,6 +83,7 @@ export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
+export { default as LineDivider } from './LineDivider';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';

package/src/icons/react/LineDivider.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LineDividerSvg from '../ast/LineDivider';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LineDivider = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LineDividerSvg} />;
+
+LineDivider.displayName = 'LineDivider';
+export default LineDivider;

package/src/icons/react/index.tsx

@@ -83,6 +83,7 @@ export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
+export { default as LineDivider } from './LineDivider';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';