@fibery/ui-kit 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -69,9 +69,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/react": "1.3.0",
+    "@fibery/emoji-data": "2.3.0",
     "@fibery/helpers": "1.2.0",
-    "@fibery/emoji-data": "2.2.1"
+    "@fibery/react": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/design-system.ts

@@ -746,6 +746,8 @@ export const spaceNestedTreeInterval = 0;
 export const layout = {
   logoSize: 16,
   menuDefaultWidth: 243,
+  desktopToolbarHeight: 32,
+  desktopMenuMinWidth: 160,
   menuMinWidth: 47, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,

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

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
 import {Button} from "../button";
-import {AntTabs} from "../antd";
+import {AntTabs} from "../antd/Tabs";
 import {space, textStyles} from "../design-system";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";

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

@@ -4,7 +4,7 @@ import {memo} from "react";
 import {useInView} from "react-intersection-observer";
 import {IconButton} from "../../button/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
-import {Settings} from "../../icons/react";
+import Settings from "../../icons/react/Settings";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";
 import {Emoji} from "./emoji";

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

@@ -19,7 +19,9 @@ type AllCategoriesProps = Pick<EmojiPickerCategoryProps, "renderEmoji" | "scroll
 const AllCategories: React.FC<AllCategoriesProps> = ({renderEmoji, scrollParent}) => {
   const contentSettings = useEmojiPickerContentSettings();
 
+  // TODO: accessing emojiData inside useMemo is not reactive so it won't be re-rendered when emojis are modified
   const emojiData = useEmojiDataStore();
+
   const categories = useEmojiDataStoreSelector((store) => store.getCategories());
 
   const recentCategory = useMemo(

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

@@ -1,7 +1,7 @@
 import type {EmojiData} from "@fibery/emoji-data";
 import {PubSub, makePubSub} from "@fibery/helpers/utils/pub-sub";
 import {createContext} from "@fibery/react/src/create-context";
-import {useMemo, useSyncExternalStore} from "react";
+import {useSyncExternalStore} from "react";
 
 export type EmojiDataStore = EmojiData & {pubSub: PubSub};
 
@@ -11,6 +11,10 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
   return {
     ...emojiData,
 
+    setData(...args: Parameters<EmojiData["setData"]>) {
+      emojiData.setData(...args);
+      pubSub.publish();
+    },
     setCustom(...args: Parameters<EmojiData["setCustom"]>) {
       emojiData.setCustom(...args);
       pubSub.publish();
@@ -30,20 +34,19 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
 
 const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
 
-export const EmojiDataStoreProvider: React.FC<
-  React.PropsWithChildren<{
-    data: EmojiData;
-  }>
-> = ({data, children}) => {
-  const emojiDataStore = useMemo(() => makeEmojiDataStore(data), [data]);
-
-  return <DataStoreProvider value={emojiDataStore}>{children}</DataStoreProvider>;
-};
+export const EmojiDataStoreProvider = DataStoreProvider;
 
 export const useEmojiDataStore = useDataStoreCtx;
 
+// TODO: this https://github.com/facebook/react/blob/main/packages/use-sync-external-store/with-selector.js can be used
+// for more flexible selections (e.g. getManyEmojis(ids: string[]){})
+// but it's not documented by react yet. Even though react-redux uses it in useSelector
 export const useEmojiDataStoreSelector = <Snapshot,>(getter: (emojiDataStore: EmojiDataStore) => Snapshot) => {
   const dataStore = useDataStoreCtx();
 
   return useSyncExternalStore(dataStore.pubSub.subscribe, () => getter(dataStore));
 };
+
+const getIsInitialized = (store: EmojiDataStore) => store.getIsInitialized();
+
+export const useIsInitializedEmojiDataStore = () => useEmojiDataStoreSelector(getIsInitialized);

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

@@ -1,6 +1,6 @@
 import {RawCustomEmoji, makeEmojiData} from "@fibery/emoji-data";
 import {Suspense, lazy} from "react";
-import {EmojiDataStoreProvider} from "./emoji-data-store";
+import {EmojiDataStoreProvider, makeEmojiDataStore} from "./emoji-data-store";
 import {getImageUrl} from "../../app-icon-with-fallback";
 
 const EMPTY_DATA = {
@@ -24,9 +24,11 @@ const LazyAppIcons = lazy(async () => {
 
   appIconsEmojiData.setCustom(custom);
 
+  const appIconsEmojiStore = makeEmojiDataStore(appIconsEmojiData);
+
   return {
     default: function EmojiDataStore({children}: React.PropsWithChildren) {
-      return <EmojiDataStoreProvider data={appIconsEmojiData}>{children}</EmojiDataStoreProvider>;
+      return <EmojiDataStoreProvider value={appIconsEmojiStore}>{children}</EmojiDataStoreProvider>;
     },
   };
 });

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

@@ -1,16 +1,21 @@
-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
+import {FC, ReactNode, useMemo} from "react";
+import {getEmojiSet} from "../utils/emoji-set";
+import {EmojiDataStoreProvider, makeEmojiDataStore} from "./emoji-data-store";
 
 interface EmojiDataProviderProps {
   children?: ReactNode;
 }
 
+/**
+ * @deprecated
+ * Static means "preloaded", "non-lazy" here
+ * Should Not outside of tests
+ */
 export const StaticEmojiDataStore: FC<EmojiDataProviderProps> = ({children}) => {
   const emojiData = useMemo(() => makeEmojiData(rawData, {set: getEmojiSet()}), []);
-  return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
+  const emojiDataStore = useMemo(() => makeEmojiDataStore(emojiData), [emojiData]);
+
+  return <EmojiDataStoreProvider value={emojiDataStore}>{children}</EmojiDataStoreProvider>;
 };

package/src/lists/list-row-surface.tsx

@@ -28,17 +28,25 @@ export const listRowSurfaceStylesBase = css`
   color: ${themeVars.textColor};
   border-radius: ${border.radius6}px;
   transition: background-color;
+
+  &:focus {
+    outline: none;
+  }
+
   ${NATURAL_HOVER},
   &.hover {
     cursor: pointer;
   }
+
   &.done {
     cursor: not-allowed;
     color: ${themeVars.colorTextListItemGeneralDisabled};
+
     > * {
       opacity: ${themeVars.opacityListItemGeneralDisabled};
     }
   }
+
   &.selected {
     cursor: default;
   }

package/src/select/index.tsx

@@ -103,6 +103,11 @@ function countOptions<Option, Group extends GroupBase<Option>>(categorizedOption
   }, 0);
 }
 
+/**
+ * Draws a select input.
+ * Please use formatOptionLabel instead of Option component override. Select has smart optimisations for large lists
+ * those would be lost and your select slow if options are too numerous
+ */
 export const Select = forwardRef(function Select<
   Option = unknown,
   IsMulti extends boolean = boolean,

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

@@ -1,29 +0,0 @@
-import {makeEmojiData} from "@fibery/emoji-data";
-import {Suspense, lazy} from "react";
-import {EmojiDataStoreProvider} from "./emoji-data-store";
-import {getEmojiSet} from "../utils/emoji-set";
-import {loadEmojiData} from "../utils/load-emoji-data";
-
-const LazyEmojiDataStoreComponent = lazy(async () => {
-  const rawData = await loadEmojiData();
-
-  const emojiData = makeEmojiData(rawData, {set: getEmojiSet()});
-
-  return {
-    default: function EmojiDataStore({children}: React.PropsWithChildren) {
-      return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
-    },
-  };
-});
-
-export const LazyEmojiDataStore: React.FC<
-  React.PropsWithChildren<{
-    fallback: React.ReactNode;
-  }>
-> = ({fallback, children}) => {
-  return (
-    <Suspense fallback={fallback}>
-      <LazyEmojiDataStoreComponent>{children}</LazyEmojiDataStoreComponent>
-    </Suspense>
-  );
-};