@fibery/ui-kit 1.22.0 → 1.24.0

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/primitives/category.tsx

@@ -1,177 +0,0 @@
-import {Category, EmojiItem} from "@fibery/emoji-data";
-import {css} from "@linaria/core";
-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 {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
-import {useEmojiPickerContentSettings} from "./content";
-import {Emoji} from "./emoji";
-import {emojiPadding} from "./layout";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
-import {useEmojiSkin} from "./skin-provider";
-
-const categoryCss = css``;
-
-const categoryLabelCss = css`
-  ${textStyles.heading6}
-  color: ${themeVars.accentTextColor};
-  background-color: ${themeVars.actionMenuBg};
-  padding: ${space.s12}px ${space.s6}px ${space.s4}px ${space.s6}px;
-  position: sticky;
-  top: 0;
-
-  display: flex;
-  align-items: center;
-  gap: ${space.s4}px;
-
-  z-index: 1;
-`;
-
-const categoryListCss = css`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-
-  & li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    line-height: 1;
-  }
-`;
-
-const notFoundCss = css`
-  padding-top: 70px;
-  text-align: center;
-
-  ${textStyles.regular};
-  color: ${themeVars.accentTextColor};
-`;
-
-const NotFound = () => {
-  const i18n = useEmojiPickerI18N();
-
-  return (
-    <div className={notFoundCss}>
-      <Emoji emoji="sleuth_or_spy" size={38} />
-      <div>{i18n.notfound}</div>
-    </div>
-  );
-};
-
-type CategoryItemProps = {
-  id: string;
-  /** Custom renderer for emoji items */
-  renderEmoji?: (args: {emoji: EmojiItem}) => React.ReactNode;
-};
-
-const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
-  const skin = useEmojiSkin();
-  const emojiPickerCtx = useEmojiPickerCtx();
-  const emojiContentSettings = useEmojiPickerContentSettings();
-
-  const emoji = useEmojiDataStoreSelector((store) => store.get(id, {skin}));
-
-  if (!emoji) {
-    return null;
-  }
-
-  // TODO: title should be shown in preview in footer
-  const title = emoji.shortNames ? emoji.shortNames[0] : undefined;
-
-  return (
-    <IconButton
-      size="big"
-      onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
-      className={css`
-        &:hover:not(:disabled),
-        &:focus-visible {
-          background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
-        }
-      `}
-      title={title}
-      aria-label={emoji.name}
-    >
-      {renderEmoji ? (
-        renderEmoji({emoji})
-      ) : (
-        <Emoji
-          emoji={id}
-          size={emojiContentSettings.emojiSize}
-          version={emojiPickerCtx.version}
-          skin={skin}
-          native={emojiPickerCtx.native}
-        />
-      )}
-    </IconButton>
-  );
-};
-
-export type EmojiPickerCategoryProps = {
-  category: Category;
-
-  preRender?: boolean;
-  scrollParent: Element | null;
-} & Pick<CategoryItemProps, "renderEmoji">;
-
-export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({
-  category,
-  renderEmoji,
-  scrollParent,
-  preRender = false,
-}) {
-  const i18n = useEmojiPickerI18N();
-  const emojiPickerCtx = useEmojiPickerCtx();
-  const emojiContentSettings = useEmojiPickerContentSettings();
-
-  const {ref, inView} = useInView({
-    root: scrollParent,
-    rootMargin: `129px 0px`, // grid height / 2
-    initialInView: preRender,
-    fallbackInView: true,
-    triggerOnce: true,
-  });
-
-  const label = i18n.categories[category.id as keyof (typeof i18n)["categories"]] || category.name;
-
-  const emojiSize = emojiContentSettings.emojiSize + emojiPadding * 2;
-
-  return (
-    <section className={categoryCss} aria-label={label}>
-      <div className={categoryLabelCss}>
-        {/* already labeled by the section aria-label */}
-        <span aria-hidden={true}>{label}</span>
-
-        {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
-          <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
-            <Settings iconSize={16} />
-          </IconButton>
-        )}
-      </div>
-
-      {category.emojis.length > 0 ? (
-        <ul ref={ref} className={categoryListCss}>
-          {category.emojis.map((id) => {
-            return (
-              <li
-                key={id}
-                style={{
-                  width: emojiSize,
-                  height: emojiSize,
-                }}
-              >
-                {inView ? <CategoryItem id={id} renderEmoji={renderEmoji} /> : null}
-              </li>
-            );
-          })}
-        </ul>
-      ) : (
-        <NotFound />
-      )}
-    </section>
-  );
-});

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>
-  );
-};