@fibery/ui-kit 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @fibery/ui-kit
 
+## 4.1.0
+
+### Minor Changes
+
+- fb2ba1d: Add `isRecord`, `noop`, `identity`, `truthy` to `_.ts` in `@fibery/helpers`; drop `lodash` from `@fibery/ui-kit` dependencies.
+
+### Patch Changes
+
+- Updated dependencies [fb2ba1d]
+  - @fibery/helpers@3.1.0
+  - @fibery/react@1.5.4
+
 ## 4.0.0
 
 ### Major Changes

package/esfint.config.mjs

@@ -13,21 +13,4 @@ export default [
       "unicorn/filename-case": "off",
     },
   },
-  {
-    files: ["src/design-system/**/*"],
-    rules: {
-      "no-restricted-imports": [
-        "error",
-        {
-          patterns: [
-            {group: ["@fibery/ui-kit/*"]},
-            {
-              group: ["lodash", "lodash/*", "lodash-es", "lodash-es/*"],
-              message: "lodash is not allowed in design-system",
-            },
-          ],
-        },
-      ],
-    },
-  },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -33,10 +33,10 @@
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",
     "invariant": "2.2.4",
-    "lodash": "4.17.21",
     "lru-cache": "11.2.2",
     "md5": "2.2.1",
     "moment": "2.29.4",
+    "node-types-local": "npm:@types/node@^24",
     "photoswipe": "5.4.4",
     "popper-max-size-modifier": "0.2.0",
     "prop-types": "15.7.2",
@@ -60,8 +60,8 @@
     "tabbable": "5.2.1",
     "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
-    "@fibery/helpers": "3.0.0",
-    "@fibery/react": "1.5.3"
+    "@fibery/helpers": "3.1.0",
+    "@fibery/react": "1.5.4"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -74,7 +74,6 @@
     "@types/culori": "4.0.1",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
-    "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
     "@types/react-color": "2.13.5",
@@ -82,7 +81,7 @@
     "@typescript/native-preview": "beta",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
-    "glob": "7.1.7",
+    "glob": "13.0.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",

package/scripts/generate-icons.mjs

@@ -1,15 +1,29 @@
 import {readFile} from "fs/promises";
-import path from "path";
-import {fileURLToPath} from "url";
-import {promisify} from "util";
+import path from "node:path";
+import {fileURLToPath} from "node:url";
 
 import fs from "fs-extra";
-import glob from "glob";
-import _ from "lodash";
+import {glob} from "glob";
 import {parse} from "svg-parser";
 import svgo from "svgo";
 import {recursiveReduce} from "unist-util-reduce";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const WORD_RE = /[A-Z]+(?![a-z])|[A-Z]?[a-z]+|\d+/g;
+const words = (s) => String(s).match(WORD_RE) ?? [];
+const cap = (w) => w[0].toUpperCase() + w.slice(1).toLowerCase();
+const pascalCase = (s) => words(s).map(cap).join("");
+const camelCase = (s) =>
+  words(s)
+    .map((w, i) => (i ? cap(w) : w.toLowerCase()))
+    .join("");
+const kebabCase = (s) =>
+  words(s)
+    .map((w) => w.toLowerCase())
+    .join("-");
+
 const svgoConfig = (prefix) => ({
   plugins: [
     {
@@ -24,55 +38,55 @@ const svgoConfig = (prefix) => ({
   ],
 });
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const preludeTemplate = `/**
+const preludeTemplate = ({source, generator}) => `/**
  * This file was automatically generated. Do not edit manually.
- * <% if (source) { %>
- * @see import("<%= source %>")<% } %>
- * @see import("<%= generator %>")
+ * ${
+   source
+     ? `
+ * @see import("${source}")`
+     : ""
+ }
+ * @see import("${generator}")
  */
 `;
 
-const render = _.template(
-  `${preludeTemplate}
+const render = ({source, generator, svgIdentifier, svgIdentifierPath}) =>
+  `${preludeTemplate({source, generator})}
 import {forwardRef} from "react";
-import <%= svgIdentifier %>Svg from "../ast/<%= svgIdentifierPath %>";
+import ${svgIdentifier}Svg from "../ast/${svgIdentifierPath}";
 import {Icon} from "../icon";
 import type {IconBaseProps} from "../types";
 
-const <%= svgIdentifier %> = forwardRef<SVGSVGElement, IconBaseProps>(function <%= svgIdentifier %>(
+const ${svgIdentifier} = forwardRef<SVGSVGElement, IconBaseProps>(function ${svgIdentifier}(
   props: IconBaseProps,
   ref: React.Ref<SVGSVGElement>
-) {return <Icon {...props} className={props.className} ref={ref} icon={<%= svgIdentifier %>Svg} />});
+) {return <Icon {...props} className={props.className} ref={ref} icon={${svgIdentifier}Svg} />});
 
-export default <%= svgIdentifier %>;
-`.trim()
-);
+export default ${svgIdentifier};
+`.trim();
 
-const defTemplate = _.template(`${preludeTemplate}
+const defTemplate = ({source, generator, identifier, content}) => `${preludeTemplate({source, generator})}
 import type {IconDefinition} from "../types";
 
-const <%= identifier %>: IconDefinition = <%= content %>;
+const ${identifier}: IconDefinition = ${content};
 
-export default <%= identifier %>;
-`);
+export default ${identifier};
+`;
 
 const iconsDir = path.join(__dirname, "../src/icons");
 const iconsSvgPathDir = path.join(iconsDir, "./svg");
 const iconsReactPathDir = path.join(iconsDir, "./react");
 const iconsAstPathDir = path.join(iconsDir, "./ast");
 const pattern = "**/*.svg";
-const icons = await promisify(glob)(pattern, {cwd: iconsSvgPathDir});
+const icons = await glob(pattern, {cwd: iconsSvgPathDir});
 
 await fs.remove(iconsReactPathDir);
 await fs.remove(iconsAstPathDir);
 
 const generator = path.relative(iconsReactPathDir, __filename);
-let barrelExportContent = _.template(preludeTemplate)({source: null, generator: generator}) + "\n";
+let barrelExportContent = preludeTemplate({source: null, generator: generator}) + "\n";
 for (const icon of icons) {
-  const name = _.upperFirst(_.camelCase(icon.replace("/", "-").replace(".svg", "")));
+  const name = pascalCase(icon.replace("/", "-").replace(".svg", ""));
   const resultFileName = icon.replaceAll("/", "-").replace(".svg", "");
   const iconPath = path.join(iconsSvgPathDir, icon);
   const source = path.relative(iconsReactPathDir, iconPath);
@@ -97,17 +111,17 @@ for (const icon of icons) {
                   value.split(";").forEach((styleItem) => {
                     const [styleKey, styleValue] = styleItem.split(":").map((s) => s.trim());
                     if (styleKey && styleValue) {
-                      style[_.camelCase(styleKey)] = styleValue;
+                      style[camelCase(styleKey)] = styleValue;
                     }
                   });
-                  return [_.camelCase(key), style];
+                  return [camelCase(key), style];
                 }
-                return [_.camelCase(key), value];
+                return [camelCase(key), value];
               })
             ),
           };
         }),
-        name: _.kebabCase(name),
+        name: kebabCase(name),
       }),
     })
   );
@@ -126,16 +140,3 @@ for (const icon of icons) {
 }
 await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), barrelExportContent);
 await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), barrelExportContent);
-
-// import {getSvg, iconNames} from "../Icon";
-//
-// it.skip("generate", async () => {
-//   console.log(iconNames);
-//   for (const iconName of iconNames) {
-//     await fs.outputFile(
-//       path.join(__dirname, "./icons", iconName.replace(":icon", "svg") + ".svg"),
-//       `<?xml version="1.0" standalone="no"?>\n` + getSvg({name: iconName})
-//     );
-//   }
-//   expect(true).toEqual(true);
-// });

package/src/actions-menu/actions-menu-item.tsx

@@ -1,7 +1,7 @@
+import {noop} from "@fibery/helpers/src/_";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
-import noop from "lodash/noop";
 import type {FunctionComponent, ReactNode} from "react";
 import {memo, useId} from "react";
 

package/src/actions-menu/context-actions-menu.tsx

@@ -1,6 +1,6 @@
+import {noop} from "@fibery/helpers/src/_";
 import {preventDefault} from "@fibery/react/src/prevent-default";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
-import noop from "lodash/noop";
 import {useState} from "react";
 
 import * as ContextMenu from "../context-menu";

package/src/animated-height-container.tsx

@@ -1,6 +1,6 @@
+import {noop} from "@fibery/helpers/src/_";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {useSize} from "@fibery/react/src/use-size";
-import noop from "lodash/noop";
 import type {ComponentProps} from "react";
 import React, {forwardRef, useEffect, useRef, useState} from "react";
 

package/src/antd/ant-modal.tsx

@@ -10,7 +10,7 @@ import {ThemeProvider} from "../theme-provider";
 const defaultCloseIcon = <CloseIcon />;
 
 const modalCss = css`
-  & .ant-modal-mask {
+  :where(&) .ant-modal-mask {
     position: fixed;
     inset: 0;
     z-index: 1000;
@@ -18,7 +18,7 @@ const modalCss = css`
     background-color: ${themeVars.modalBg};
   }
 
-  & .ant-modal-wrap {
+  :where(&) .ant-modal-wrap {
     position: fixed;
     inset: 0;
     z-index: 1000;
@@ -27,7 +27,7 @@ const modalCss = css`
     -webkit-overflow-scrolling: touch;
   }
 
-  & .ant-modal {
+  :where(&) .ant-modal {
     position: relative;
     top: 100px;
     margin: 0 auto;
@@ -35,11 +35,11 @@ const modalCss = css`
     pointer-events: none;
   }
 
-  & .ant-modal-centered {
+  :where(&) .ant-modal-centered {
     text-align: center;
   }
 
-  & .ant-modal-centered::before {
+  :where(&) .ant-modal-centered::before {
     display: inline-block;
     width: 0;
     height: 100%;
@@ -47,7 +47,7 @@ const modalCss = css`
     content: "";
   }
 
-  & .ant-modal-centered .ant-modal {
+  :where(&) .ant-modal-centered .ant-modal {
     top: 0;
     display: inline-block;
     padding-bottom: 0;
@@ -55,7 +55,7 @@ const modalCss = css`
     vertical-align: middle;
   }
 
-  & .ant-modal-content {
+  :where(&) .ant-modal-content {
     position: relative;
     box-shadow: ${themeVars.shadowPopup};
     margin-left: ${space.s6}px;
@@ -65,11 +65,11 @@ const modalCss = css`
     pointer-events: auto;
   }
 
-  & .ant-modal-body {
+  :where(&) .ant-modal-body {
     padding: ${space.s20}px;
   }
 
-  & .ant-modal-close {
+  :where(&) .ant-modal-close {
     position: absolute;
     top: 0;
     right: 0;
@@ -87,34 +87,34 @@ const modalCss = css`
     cursor: pointer;
   }
 
-  & .ant-fade-enter,
-  & .ant-fade-appear {
+  :where(&) .ant-fade-enter,
+  :where(&) .ant-fade-appear {
     opacity: 0;
   }
 
-  & .ant-fade-enter-active,
-  & .ant-fade-appear-active {
+  :where(&) .ant-fade-enter-active,
+  :where(&) .ant-fade-appear-active {
     opacity: 1;
     transition: opacity ${transitions.normal};
   }
 
-  & .ant-fade-leave {
+  :where(&) .ant-fade-leave {
     opacity: 1;
   }
 
-  & .ant-fade-leave-active {
+  :where(&) .ant-fade-leave-active {
     opacity: 0;
     transition: opacity ${transitions.normal};
   }
 
-  & .ant-zoom-enter,
-  & .ant-zoom-appear {
+  :where(&) .ant-zoom-enter,
+  :where(&) .ant-zoom-appear {
     opacity: 0;
     transform: scale(0.96);
   }
 
-  & .ant-zoom-enter-active,
-  & .ant-zoom-appear-active {
+  :where(&) .ant-zoom-enter-active,
+  :where(&) .ant-zoom-appear-active {
     opacity: 1;
     transform: scale(1);
     transition:
@@ -122,12 +122,12 @@ const modalCss = css`
       transform ${transitions.normal};
   }
 
-  & .ant-zoom-leave {
+  :where(&) .ant-zoom-leave {
     opacity: 1;
     transform: scale(1);
   }
 
-  & .ant-zoom-leave-active {
+  :where(&) .ant-zoom-leave-active {
     opacity: 0;
     transform: scale(0.96);
     transition:

package/src/antd/styles.ts

@@ -182,6 +182,8 @@ export const inputStyles = css`
     },
     "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
       inputOverrides.hover,
+    "&& .ant-input-affix-wrapper > input.ant-input:focus, && .ant-input-affix-wrapper > input.ant-input:active":
+      inputOverrides.focus,
     "&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
     "&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
       inputOverrides.disabled,

package/src/app-icon-with-fallback.tsx

@@ -1,11 +1,9 @@
 import {css} from "@linaria/core";
-import fromPairs from "lodash/fromPairs";
 import type {FC} from "react";
 import {lazy, Suspense} from "react";
 
 import {AppIconWrapper} from "./app-icon-wrapper";
 import {alpha, iconSize, layout} from "./design-system";
-import {isFlagPresent} from "./flags";
 import {Icon} from "./icons/icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -94,7 +92,7 @@ type UglyExternalIconProps = Omit<UglyExternalIconImplProps, "appIconsLookup">;
 
 const UglyExternalIcon = lazy(async () => {
   const appIcons = await import("./app-icons.json");
-  const appIconsLookup = fromPairs(
+  const appIconsLookup = Object.fromEntries(
     appIcons.default.flatMap((appIcon) => appIcon.short_names.map((shortName) => [shortName, appIcon]))
   );
 
@@ -146,12 +144,10 @@ export const AppIcon: FC<AppIconProps> = ({icon, color: neutralColor, isSelected
   const isPhone = useIsPhone();
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
-  const {fg, bg} = theme.fns.icon(neutralColor);
-
-  const bgColor = !isFlagPresent("no-sidebar-app-icon-bg") ? alpha(fg, 0.2) : bg;
+  const {fg} = theme.fns.icon(neutralColor);
 
   return (
-    <AppIconWrapper color={bgColor} borderless={isSelected} containerSize={containerSize}>
+    <AppIconWrapper color={alpha(fg, 0.2)} borderless={isSelected} containerSize={containerSize}>
       <AppIconWithFallback name={icon} color={fg} colorProcessed containerSize={containerSize} iconSize={iconSize} />
     </AppIconWrapper>
   );

package/src/app-icon-wrapper.tsx

@@ -3,20 +3,12 @@ import cn from "classnames";
 import type {ReactNode} from "react";
 
 import {border, layout} from "./design-system";
-import {isFlagPresent} from "./flags";
-import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
 
 const appIconContainerStyle = css`
   border-radius: ${border.radius4}px;
 `;
 
-const appIconGradientStyle = css`
-  ${{
-    backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
-  }}
-`;
-
 export const AppIconWrapper = ({
   children,
   color,
@@ -28,16 +20,12 @@ export const AppIconWrapper = ({
   borderless?: boolean;
   containerSize?: number;
 }) => {
-  const theme = useTheme();
   const isPhone = useIsPhone();
   const {containerSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize} = rest;
   return (
     <div
       style={{backgroundColor: borderless ? "transparent" : color, width: containerSize, height: containerSize}}
-      className={cn(
-        appIconContainerStyle,
-        !borderless && isFlagPresent("no-sidebar-app-icon-bg") && theme.mode === "dark" && appIconGradientStyle
-      )}
+      className={cn(appIconContainerStyle)}
     >
       {children}
     </div>

package/src/breadcrumb.tsx

@@ -64,10 +64,14 @@ const liReset = css`
   padding: 0;
 `;
 
+const separatorIconCss = css`
+  --fibery-icon-size: var(--breadcrumb-separator-size, 16px);
+`;
+
 export const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => {
   return (
     <li role="presentation" aria-hidden="true" className={cx(liReset, className)} {...props}>
-      {children ?? <ArrowRight color={breadcrumbColor} containerSize={16} iconSize={16} />}
+      {children ?? <ArrowRight color={breadcrumbColor} className={separatorIconCss} />}
     </li>
   );
 };

package/src/color-utils.test.ts

@@ -1,5 +1,5 @@
 // oxlint-disable typescript/consistent-type-imports
-import {cssFromUnsafe, getColorDistance, getLuminance, isValidColor} from "./color-utils";
+import {cssFromUnsafe, getColorDistance, getLuminance, isValidColor, invalidColorFallback} from "./color-utils";
 
 describe("color-utils", () => {
   describe("cssFromUnsafe", () => {
@@ -21,7 +21,7 @@ describe("color-utils", () => {
     });
 
     it("returns fallback for invalid color", () => {
-      expect(cssFromUnsafe("invalid")).toMatchInlineSnapshot(`"rgb(73, 120, 212)"`);
+      expect(cssFromUnsafe("invalid")).toEqual(invalidColorFallback);
     });
   });
 

package/src/color-utils.ts

@@ -27,8 +27,8 @@ export const oklchFrom = converter("oklch");
 const mapToSrgb = toGamut("rgb", "oklch");
 
 export const isValidColor = (color: string) => parse(color) !== undefined;
-
-export function colorFromUnsafe(color: string, fallback = "hsl(220, 62%, 56%)"): Color {
+export const invalidColorFallback = "rgb(94, 94, 94)";
+export function colorFromUnsafe(color: string, fallback = invalidColorFallback): Color {
   const parsed = parse(resolveColorArg(color, "colorFromUnsafe") ?? "") ?? parse(fallback)!;
   if (!parsed) {
     throw new Error(`Failed to parse fallback color ${fallback}`);

package/src/copy-to-clipboard.ts

@@ -1,8 +1,19 @@
-export const copyToClipboard = (text: string) => window.navigator.clipboard.writeText(text);
-export const copyUrlToClipboard = ({url, label}: {url: string; label?: string}) => {
+function checkClipboard() {
+  if (!navigator.clipboard) {
+    throw new Error("Clipboard disabled by browser permissions policy");
+  }
+}
+
+export const copyToClipboard = async (text: string) => {
+  checkClipboard();
+  await navigator.clipboard.writeText(text);
+};
+
+export const copyUrlToClipboard = async ({url, label}: {url: string; label?: string}) => {
+  checkClipboard();
   const htmlString = `<a href="${url}" target="_blank">${label || url}</a>`;
 
-  return window.navigator.clipboard.write([
+  await navigator.clipboard.write([
     new ClipboardItem({
       "text/html": new Blob([htmlString], {type: "text/html"}),
       "text/plain": url,

package/src/date-picker/contexts.ts

@@ -1,7 +1,10 @@
-import noop from "lodash/noop";
-import {createContext} from "react";
+import {noop} from "@fibery/helpers/src/_";
+import {createContext, type Dispatch, type SetStateAction} from "react";
 
-export const StartEndFocusContext = createContext({
+export const StartEndFocusContext = createContext<{
+  focusOnStart: boolean;
+  setFocusOnStart: Dispatch<SetStateAction<boolean>>;
+}>({
   focusOnStart: true,
   setFocusOnStart: noop,
 });

package/src/date-picker/date-range-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
-import omit from "lodash/omit";
 import moment from "moment";
 import {forwardRef, useCallback, useRef} from "react";
 import {focusable} from "tabbable";
@@ -111,7 +110,7 @@ export const DateRangePicker = forwardRef<
           >
             <DateRangePickerPopupContent
               ref={ref}
-              {...omit(props, ["onChange", "value"])}
+              {...props}
               onChange={onDatesChange}
               value={dateValue}
               onKeyDown={onDatePickerKeyDown}

package/src/date-picker/single-date-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import omit from "lodash/omit";
 import type {Moment} from "moment";
 import moment from "moment";
 
@@ -191,7 +190,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
         {!allowRelativeDate || activeButton === "exact" ? (
           <SingleDatePickerPopupContent
             ref={ref}
-            {...omit(props, ["onChange", "value"])}
+            {...props}
             onChange={onDateChange}
             value={!isRelativeValue && value ? (value as Moment).toDate() : null}
             onKeyDown={onDatePickerKeyDown}

package/src/day-select/iso-week-day-select.tsx

@@ -1,10 +1,10 @@
-import range from "lodash/range";
 import moment from "moment";
 
 import type {Props} from "./day-select";
 import {DaySelect} from "./day-select";
 
-const isoWeekDays = range(1, 8).map((day) => {
+const isoWeekDays = Array.from({length: 7}, (_, i) => {
+  const day = i + 1;
   return {
     key: String(day),
     title: moment().isoWeekday(day).format("dd").charAt(0),

package/src/design-system/colors.ts

@@ -560,9 +560,9 @@ export function defsFromPalette({
     colorBgListItemGeneral: transparentAlways,
     colorBgListItemGeneralHover: surface.level3_4,
     colorBgListItemGeneralFocus: surface.level4_6,
-    colorBgListItemGeneralSelected: notificationSelected,
-    colorBgListItemGeneralSelectedHover: notificationSelectedHover,
-    colorBgListItemGeneralSelectedFocus: notificationSelectedHover,
+    colorBgListItemGeneralSelected: [accent[5], accentDark[5]],
+    colorBgListItemGeneralSelectedHover: [accent[6], accentDark[6]],
+    colorBgListItemGeneralSelectedFocus: [accent[6], accentDark[6]],
     colorBgListItemGeneralDisabled: transparentAlways,
     colorTextListItemGeneralDisabled: fg.muted,
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],

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

@@ -1,5 +1,5 @@
+import {truthy} from "@fibery/helpers/src/_";
 import {css} from "@linaria/core";
-import compact from "lodash/compact";
 import {useState} from "react";
 
 import {Button} from "../button/button";
@@ -48,7 +48,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   color,
   getHoverColor,
 }) => {
-  const items = compact([
+  const items = [
     onEmojiSelect && {
       key: "emojis" as const,
       label: "Emojis",
@@ -80,7 +80,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
         />
       ),
     },
-  ]);
+  ].filter(truthy);
 
   const firstTab = items[0];
   const [activeTab, setActiveTab] = useState(defaultTab || firstTab?.key);