@fibery/ui-kit 3.0.0 → 4.1.0

package/src/icons/types.ts

@@ -26,7 +26,7 @@ export type IconBaseProps = Omit<SVGProps<SVGSVGElement>, "ref" | "color"> & {
   iconSize?: number;
   /** Pass null to inherit parent's color */
   color?: string | null | undefined;
-  /** Skip auto-deneutralize when the color is already processed for display (e.g. a11y-adjusted) */
+  /** Skip deneutralize&normalize when the color is already processed for display (e.g. a11y-adjusted) */
   colorProcessed?: boolean;
 };
 

package/src/images-gallery/images-gallery.tsx

@@ -1,8 +1,8 @@
-import {createContext} from "@fibery/react/src/create-context";
+import {noop} from "@fibery/helpers/src/_";
 
 import "photoswipe/style.css";
+import {createContext} from "@fibery/react/src/create-context";
 import {css} from "@linaria/core";
-import noop from "lodash/noop";
 /* eslint-disable max-lines */
 import PhotoSwipeLightbox, {type PhotoSwipeEventsMap, type PhotoSwipeOptions} from "photoswipe/lightbox";
 import type {PropsWithChildren} from "react";

package/src/images-gallery/slide-buttons.tsx

@@ -245,11 +245,9 @@ function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
         if (src) {
           copyUrlToClipboard({url: src, label: pswp.currSlide.data.label})
             .then(() => {
-              toast.success({title: "Copied!"});
+              toast.success({title: "Link copied to clipboard"});
             })
-            .catch(() => {
-              toast.error({title: "Unable to copy."});
-            });
+            .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
         }
       }}
       size={isPhone ? "large" : "medium"}

package/src/layout-styles.ts

@@ -16,7 +16,7 @@ import {
   sidebarMenuItemHeightVar,
   sidebarMenuIconSizeVar,
   menuItemHeightVar,
-} from "./theming";
+} from "./theming.generated";
 
 export const layoutStyles = css`
   :global() {
@@ -40,5 +40,9 @@ export const layoutStyles = css`
         ${listRowSurfaceFontSizeVar}: ${fontSize.md}px;
       }
     }
+
+    :focus:not(:focus-visible) {
+      outline: none;
+    }
   }
 `;

package/src/link-input/components/ant-text-area-with-custom-read-state.tsx

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import {useCallback, useRef, useState} from "react";
 
 import {AntTextArea} from "../../antd";
+import type {TextAreaRef} from "../../antd/input";
 
 const wrapperStyle = css`
   ${{
@@ -33,7 +34,7 @@ export const AntTextAreaWithCustomReadState = ({
   ...rest
 }: AntTextAreaWithCustomReadStateProps) => {
   const [focus, setFocus] = useState(false);
-  const input = useRef<HTMLTextAreaElement>(null);
+  const input = useRef<TextAreaRef>(null);
 
   const handleFocus = useCallback(
     (e: React.FocusEvent<HTMLTextAreaElement>) => {

package/src/lists/actions-menu-row-surface.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 {forwardRef, useId} from "react";
 
 import {useActionsMenuContext} from "../actions-menu";

package/src/media-query-utils.ts

@@ -1,4 +1,4 @@
-import noop from "lodash/noop";
+import {noop} from "@fibery/helpers/src/_";
 export function getMediaQueryList(query: string) {
   // need for test
   return typeof window !== "undefined" && window.matchMedia
@@ -7,17 +7,8 @@ export function getMediaQueryList(query: string) {
 }
 
 export function subscribeOnChange(mediaQueryList: MediaQueryList, cb: (evt: MediaQueryListEvent) => void): () => void {
-  // Safari 13 doesn't support addEventListener here
-  if (mediaQueryList.addEventListener) {
-    mediaQueryList.addEventListener("change", cb);
-    return () => {
-      mediaQueryList.removeEventListener("change", cb);
-    };
-  } else if (mediaQueryList.addListener) {
-    mediaQueryList.addListener(cb);
-    return () => {
-      mediaQueryList.removeListener(cb);
-    };
-  }
-  return noop;
+  mediaQueryList.addEventListener("change", cb);
+  return () => {
+    mediaQueryList.removeEventListener("change", cb);
+  };
 }

package/src/mobile-keyboard-aware-popup.tsx

@@ -1,5 +1,5 @@
+import {noop} from "@fibery/helpers/src/_";
 import {css, cx} from "@linaria/core";
-import noop from "lodash/noop";
 import type {ReactNode} from "react";
 import {useEffect, useRef} from "react";
 import {createPortal} from "react-dom";

package/src/number-input/decimal.ts

@@ -1,12 +1,9 @@
-import isNil from "lodash/isNil";
-import trimEnd from "lodash/trimEnd";
+import {truthy} from "@fibery/helpers/src/_";
 
 type NumericValue = string | number | null | undefined;
 
-const isEmpty = (value: NumericValue): value is null | undefined | "" => isNil(value) || value === "";
-
 const getPrecision = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return 0;
   }
   const [, decimalPart = ""] = String(value).split(".");
@@ -14,11 +11,11 @@ const getPrecision = (value: NumericValue) => {
 };
 
 const removeTrailingZeros = (value: string) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const hasDecimalPart = value.indexOf(".") > 0;
-  return hasDecimalPart ? trimEnd(trimEnd(value, "0"), ".") : value;
+  return hasDecimalPart ? value.replace(/\.?0+$/, "") : value;
 };
 
 export const add = (first: NumericValue, second: NumericValue) => {
@@ -32,7 +29,7 @@ export const sub = (first: NumericValue, second: NumericValue) => {
 };
 
 export const multiplyByHundred = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const result = Number(value) * 100;
@@ -41,7 +38,7 @@ export const multiplyByHundred = (value: NumericValue) => {
 };
 
 export const divideByHundred = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const result = Number(value) / 100;

package/src/number-input/number-input-inline-with-autosize.tsx

@@ -1,6 +1,6 @@
+import {identity} from "@fibery/helpers/src/_";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import identity from "lodash/identity";
 import InputNumber from "rc-input-number";
 import {useCallback, useMemo, useRef, useState} from "react";
 

package/src/online-users.tsx

@@ -1,5 +1,4 @@
 import {css, cx} from "@linaria/core";
-import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
 
 import {AvatarImage} from "./avatar";
@@ -151,8 +150,9 @@ export function OnlineUsers({
           </Tooltip>
         </div>
 
-        {take(users, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1).map(
-          ({id, avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
+        {users
+          .slice(0, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1)
+          .map(({id, avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
             const tooltipDescription = callBack ? "Click to follow" : "";
             const tooltipTitle = hasAccess ? name : "Private User";
             const userBorderColor = theme.fns.deneutralize(getObjectColorMemoized(name));
@@ -187,8 +187,7 @@ export function OnlineUsers({
                 </Tooltip>
               </div>
             );
-          }
-        )}
+          })}
       </div>
       {Boolean(triggerElement) && users.length > maxVisibleUsers && (
         <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>

package/src/palettes/inspect.defs.colors.neutral-arch.test.ts

@@ -741,19 +741,19 @@ test("snapshot", () => {
         "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
       ],
       "colorBgListItemGeneralSelected": [
-        "#FDF3EE   | hsl(  20  79%  96%) | oklch(0.97 0.01  49 )",
-        "#432412   | hsl(  22  58%  17%) | oklch(0.3  0.06  50 )",
+        "#F7E0D3   | hsl(  22  69%  90%) | oklch(0.92 0.03  52 )",
+        "#4C2A16   | hsl(  22  55%  19%) | oklch(0.32 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#F7E0D3   | hsl(  22  69%  90%) | oklch(0.92 0.03  52 )",
         "#4C2A16   | hsl(  22  55%  19%) | oklch(0.32 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
+        "#F1D1C0   | hsl(  21  64%  85%) | oklch(0.88 0.04  50 )",
         "#58321C   | hsl(  22  52%  23%) | oklch(0.36 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
+        "#F1D1C0   | hsl(  21  64%  85%) | oklch(0.88 0.04  50 )",
         "#58321C   | hsl(  22  52%  23%) | oklch(0.36 0.06  50 )",
       ],
       "colorBgLogoCardDark": [

package/src/palettes/inspect.defs.colors.neutral-user.test.ts

@@ -741,19 +741,19 @@ test("snapshot", () => {
         "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
       ],
       "colorBgListItemGeneralSelected": [
-        "#F1F5FE   | hsl( 222  87%  97%) | oklch(0.97 0.01 267 )",
-        "#1C2B4F   | hsl( 222  48%  21%) | oklch(0.3  0.07 265 )",
+        "#DBE5FA   | hsl( 221  76%  92%) | oklch(0.92 0.03 265 )",
+        "#223259   | hsl( 223  45%  24%) | oklch(0.32 0.07 266 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#DBE5FA   | hsl( 221  76%  92%) | oklch(0.92 0.03 265 )",
         "#223259   | hsl( 223  45%  24%) | oklch(0.32 0.07 266 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#E8EFFD   | hsl( 220  84%  95%) | oklch(0.95 0.02 264 )",
+        "#CAD9F6   | hsl( 220  71%  88%) | oklch(0.88 0.04 264 )",
         "#293B66   | hsl( 222  43%  28%) | oklch(0.36 0.08 266 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#E8EFFD   | hsl( 220  84%  95%) | oklch(0.95 0.02 264 )",
+        "#CAD9F6   | hsl( 220  71%  88%) | oklch(0.88 0.04 264 )",
         "#293B66   | hsl( 222  43%  28%) | oklch(0.36 0.08 266 )",
       ],
       "colorBgLogoCardDark": [