@fibery/ui-kit 2.0.0 → 2.1.0

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

@@ -0,0 +1,74 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css, cx} from "@linaria/core";
+import {FunctionComponent, memo, ReactNode} from "react";
+import {layoutVars, space, themeVars} from "../design-system";
+import CheckedIcon from "../icons/react/Checked";
+import {IconBaseProps} from "../icons/types";
+import {mobileRootSelector} from "../mobile-styles";
+import {useIsPhone} from "../use-is-phone";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const rowCss = css`
+  display: flex;
+  align-items: center;
+  min-height: ${layoutVars.menuItemHeight};
+  gap: ${space.s6}px;
+  ${mobileRootSelector} & {
+    gap: ${space.s8}px;
+  }
+`;
+
+const rowContentCss = css`
+  flex-grow: 1;
+`;
+
+const cornerCss = css`
+  display: flex;
+  align-items: center;
+`;
+
+export type ActionsMenuCheckboxItemProps = {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  Icon?: FunctionComponent<IconBaseProps>;
+  iconColor?: string;
+  disabled?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+export const ActionsMenuCheckboxItem: React.FC<ActionsMenuCheckboxItemProps> = memo(function ActionsMenuCheckboxItem({
+  checked,
+  onCheckedChange,
+  Icon,
+  iconColor,
+  disabled,
+  children,
+  className,
+}) {
+  const {MenuPrimitive} = useActionsMenuContext();
+  const isPhone = useIsPhone();
+
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      onClick={stopPropagation}
+      className={cx(rowCss, className)}
+      disabled={disabled}
+    >
+      {Icon && (
+        <div className={cornerCss}>
+          <Icon
+            color={`var(--actions-menu-item-icon-color, ${iconColor ?? themeVars.iconColor})`}
+            iconSize={isPhone ? 20 : 18}
+          />
+        </div>
+      )}
+      <div className={rowContentCss}>{children}</div>
+      <div className={cornerCss}>
+        {checked && <CheckedIcon iconSize={isPhone ? 20 : 18} color={themeVars.textColor} />}
+      </div>
+    </MenuPrimitive.CheckboxItem>
+  );
+});

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

@@ -99,7 +99,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string[]; loading
 
   return loading || shortcuts || checked ? (
     <div className={cornerCss}>
-      {loading ? <Spinner color={theme.primary} iconSize={16} containerSize={16} /> : null}
+      {loading ? <Spinner color={theme.colors.colorAccent} iconSize={16} containerSize={16} /> : null}
       {shortcuts ? (
         <KbdGroup>
           {shortcuts.map((item) => (

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

@@ -10,7 +10,7 @@ import {preventDefault} from "@fibery/react/src/prevent-default";
 import {useState} from "react";
 import {useFeatures} from "../features";
 import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
-import {useActionsMenuOpenStateTracker} from "./actions-menu-open-state-tracker";
+import {useOpenPopoverTracker} from "../open-popover-tracker";
 
 export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
   event.preventDefault();
@@ -46,14 +46,14 @@ export const ActionsMenu = ({
   height,
 }: ActionsMenuProps): JSX.Element => {
   const features = useFeatures<{enableMobileMenus: boolean}>();
-  const {onMenuOpenChange} = useActionsMenuOpenStateTracker();
+  const {onOpenChange: onPopoverOpenChange} = useOpenPopoverTracker();
   const [isOpen = false, setOpen] = useControllableState({
     value: open,
     onChange: (value) => {
       if (onOpenChange) {
         onOpenChange(value);
       }
-      onMenuOpenChange(value);
+      onPopoverOpenChange(value);
     },
   });
   const isPhone = useIsPhone();

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

@@ -4,6 +4,7 @@ import {ActionsMenuConfirmationProps} from "../actions-menu-confirmation";
 
 type MenuPrimitive = {
   Item: React.ElementType;
+  CheckboxItem: React.ElementType;
   Label: React.ElementType;
   Group: React.ElementType;
   Separator: React.ElementType;

package/src/actions-menu/index.tsx

@@ -3,6 +3,7 @@ import {$TSFixMe} from "../tsfixme";
 
 export {ActionsMenu} from "./actions-menu";
 export {ActionsMenuItem} from "./actions-menu-item";
+export {ActionsMenuCheckboxItem} from "./actions-menu-checkbox-item";
 export {AsyncActionsMenuItem} from "./async-actions-menu-item";
 export {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
 export {useActionsMenuContext} from "./contexts/actions-menu-context";

package/src/ai/model.tsx

@@ -15,7 +15,7 @@ const exampleItemCodeStyle = css`
     backgroundColor: themeVars.transparent,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: themeVars.opacity.opacity10,
+      backgroundColor: themeVars.colorAccentBgSubtle,
     },
   }}
 `;

package/src/ai/temperature.tsx

@@ -15,7 +15,7 @@ const exampleItemCodeStyle = css`
     backgroundColor: themeVars.transparent,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: themeVars.opacity.opacity10,
+      backgroundColor: themeVars.colorAccentBgSubtle,
     },
   }}
 `;

package/src/animated-height-container.tsx

@@ -1,6 +1,6 @@
 import {useSize} from "@fibery/react/src/use-size";
 import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
-import {duration, transition} from "./design-system";
+import {durations, transition} from "./design-system";
 import noop from "lodash/noop";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
@@ -34,7 +34,7 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
         setHeightMeasured(true);
       }
       if (heightMeasured && size.height !== previousHeight) {
-        timeoutId = window.setTimeout(() => setPreviousHeight(size.height), duration);
+        timeoutId = window.setTimeout(() => setPreviousHeight(size.height), durations.faster);
       }
 
       return () => clearTimeout(timeoutId);

package/src/animated-number.tsx

@@ -19,8 +19,8 @@ export function AnimatedNumber({children, speed = 300, fps = 12, fixed, format}:
     fixed === undefined
       ? currentValue
       : fixed === 0
-      ? Math.round(currentValue)
-      : parseFloat(currentValue.toFixed(fixed));
+        ? Math.round(currentValue)
+        : parseFloat(currentValue.toFixed(fixed));
   useEffect(() => {
     let timeout: number | undefined;
     if (step < 0 ? currentValue > children : currentValue < children && currentValue !== children) {

package/src/antd/AutoComplete.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const AntAutoComplete: FunctionComponent<any>;

package/src/antd/{AutoComplete.js → AutoComplete.ts}

@@ -31,4 +31,4 @@ const autoCompleteStyles = css`
     },
   }}
 `;
-export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete);
+export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete<string>);

package/src/antd/Tabs.js

@@ -20,7 +20,7 @@ export const tabsStyles = css`
       overflow: "visible",
     },
     "& .ant-tabs-ink-bar": {
-      backgroundColor: themeVars.primary,
+      backgroundColor: themeVars.colorAccent,
       height: 2,
     },
     "& .ant-tabs-nav": {
@@ -40,7 +40,7 @@ export const tabsStyles = css`
       margin: `0 ${space.s8}px 0 0`,
     },
     ".ant-tabs-top > .ant-tabs-nav::before": {
-      borderBottom: `1px solid ${themeVars.filterGroupBorder}`,
+      borderBottom: themeVars.borderSolidFilterGroup,
     },
   }}
 `;

package/src/antd/ant-upload.tsx

@@ -28,7 +28,7 @@ export const antUploadStyle = css`
       alignContent: "stretch",
     },
     "& .ant-upload:where(.ant-upload-drag), .ant-upload:where(.ant-upload-select-picture-card)": {
-      border: `1px dashed ${themeVars.separator}`,
+      border: `1px dashed ${themeVars.colorAccentBgStrong}`,
       position: "relative",
       backgroundColor: themeVars.transparent,
       borderRadius: border.radius6,
@@ -44,7 +44,7 @@ export const antUploadStyle = css`
       "&.ant-upload-disabled": {
         cursor: "not-allowed",
         "&:hover": {
-          border: `1px dashed ${themeVars.separator}`,
+          border: `1px dashed ${themeVars.colorAccentBgStrong}`,
         },
       },
       "& > .ant-upload": {
@@ -56,11 +56,11 @@ export const antUploadStyle = css`
         padding: space.s8,
       },
       "&.ant-upload-drag-hover": {
-        border: `1px dashed ${themeVars.primary}`,
+        border: `1px dashed ${themeVars.colorAccent}`,
         transition: "none",
       },
       "&:hover": {
-        border: `1px dashed ${themeVars.primary}`,
+        border: `1px dashed ${themeVars.colorAccent}`,
         transition: "none",
       },
     },

package/src/antd/input-number.tsx

@@ -23,7 +23,7 @@ const inputNumberStyles = css`
       background: themeVars.transparent,
     },
     "& .ant-input-number-focused": {boxShadow: "none"},
-    "& .ant-input-number-handler-down": {borderTop: `1px solid ${themeVars.separatorColor} !important`},
+    "& .ant-input-number-handler-down": {borderTop: `${themeVars.borderSolidSeparator} !important`},
     "& .ant-input-number-input:hover": inputOverrides.hover,
     "& .ant-input-number-input:focus, & .ant-input-number-input:active, & .ant-input-number-focused .ant-input-number-input":
       inputOverrides.focus,
@@ -35,7 +35,7 @@ const inputNumberStyles = css`
     },
     "& .ant-input-number-handler": {
       color: themeVars.iconColor,
-      borderLeft: `1px solid ${themeVars.separatorColor}`,
+      borderLeft: themeVars.borderSolidSeparator,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },

package/src/antd/input.tsx

@@ -3,7 +3,7 @@ import Input from "antd/lib/input";
 import "antd/lib/input/style/css";
 import {css} from "@linaria/core";
 import {mobileRootSelector} from "../mobile-styles";
-import {opacity, textStyles, themeVars} from "../design-system";
+import {textStyles, themeVars} from "../design-system";
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 
@@ -33,7 +33,7 @@ export const transparentInputStyle = css`
     },
     "& input.ant-input-disabled, & textarea.ant-input-disabled": {
       WebkitTextFillColor: "currentColor",
-      opacity: opacity.opacity40,
+      opacity: themeVars.opacity40,
       backgroundColor: themeVars.transparent,
       cursor: "default",
     },

package/src/antd/styles.ts

@@ -4,14 +4,14 @@ import {border, layout, shadows, space, textStyles, themeVars, transition} from
 const inputVariables = {
   default: {
     "--input-border": `${themeVars.inputBorderColor} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40} inset`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity50} inset`,
-    "--input-focus-shadow": `0 0 0 2px ${themeVars.focus}`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.colorAccentStrokeHover} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.colorAccentStrokeFocus} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.colorAccentStroke}`,
   },
   error: {
-    "--input-border": `0 0 0 1px ${themeVars.warning} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.warning} inset`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-border": `${themeVars.inputBorderWarningColor} inset`,
+    "--input-hover-border": `${themeVars.inputBorderWarningColor} inset`,
+    "--input-focus-border": `${themeVars.inputBorderWarningColor} inset`,
     "--input-focus-shadow": `0 0 0 2px ${themeVars.warning}`,
   },
 };
@@ -39,11 +39,11 @@ export const inputOverrides = {
     },
   },
   hover: {
-    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.opacity.opacity40}) !important`,
+    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow) !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.colorAccentStroke}), var(--input-focus-shadow) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {

package/src/antd/utils.tsx

@@ -1,16 +1,5 @@
 import {ElementType, forwardRef, useCallback, useRef} from "react";
 
-export const createBodyNode = (className: string) => {
-  const node = document.createElement("div");
-  node.className = className;
-  document.body.appendChild(node);
-  return node;
-};
-
-export const removeBodyNode = (node: Node) => {
-  document.body.removeChild(node);
-};
-
 export const wrapWith = <C extends React.ElementType>(
   WrapperComponent: ElementType,
   Component: C
@@ -28,16 +17,16 @@ export const wrapWith = <C extends React.ElementType>(
 };
 
 export const wrapWithPopupContainer = <C extends React.ElementType>(Wrapper: ElementType, WrappedComponent: C) => {
-  return forwardRef(function ProvidePopupContainerGetter(props, forwardedRef) {
-    const wrapperRef = useRef();
-    const getPopupContainer = useCallback(() => {
-      return wrapperRef.current;
-    }, []);
-    return (
-      <Wrapper ref={wrapperRef}>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <WrappedComponent ref={forwardedRef} getPopupContainer={getPopupContainer} {...(props as any)} />
-      </Wrapper>
-    );
-  });
+  return forwardRef<React.ElementRef<C>, Omit<React.ComponentPropsWithoutRef<C>, "getPopupContainer">>(
+    function ProvidePopupContainerGetter(props, forwardedRef) {
+      const wrapperRef = useRef<HTMLDivElement>(null);
+      const getPopupContainer = useCallback(() => wrapperRef.current!, []);
+      return (
+        <Wrapper ref={wrapperRef}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <WrappedComponent ref={forwardedRef} getPopupContainer={getPopupContainer} {...(props as any)} />
+        </Wrapper>
+      );
+    }
+  );
 };

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

@@ -3,7 +3,7 @@ import fromPairs from "lodash/fromPairs";
 import {FC, lazy, Suspense} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWrapper} from "./app-icon-wrapper";
-import {getOpacities, iconSize, layout} from "./design-system";
+import {alpha, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/Icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -40,6 +40,7 @@ export function getImageUrl(emoji: AppIcon) {
 
 interface UglyExternalIconImplProps {
   color?: string | null;
+  colorProcessed?: boolean;
   name: string;
   iconSize?: number;
   containerSize?: number;
@@ -48,6 +49,7 @@ interface UglyExternalIconImplProps {
 
 const UglyExternalIconImpl: FC<UglyExternalIconImplProps> = ({
   color,
+  colorProcessed,
   iconSize = 16,
   name,
   containerSize,
@@ -77,6 +79,7 @@ const UglyExternalIconImpl: FC<UglyExternalIconImplProps> = ({
       containerSize={containerSize}
       iconSize={iconSize}
       color={color}
+      colorProcessed={colorProcessed}
     >
       <use href={imageUrl} />
     </Icon>
@@ -103,14 +106,27 @@ const UglyExternalIcon = lazy(async () => {
 export interface AppIconWithFallbackProps {
   name: string;
   color?: string | null;
+  colorProcessed?: boolean;
   iconSize?: number;
   containerSize?: number;
 }
 
-export const AppIconWithFallback: FC<AppIconWithFallbackProps> = ({containerSize, name, color, iconSize}) => {
+export const AppIconWithFallback: FC<AppIconWithFallbackProps> = ({
+  containerSize,
+  name,
+  color,
+  colorProcessed,
+  iconSize,
+}) => {
   return (
     <Suspense fallback={<IconLoader containerSize={containerSize} />}>
-      <UglyExternalIcon containerSize={containerSize} color={color} name={name} iconSize={iconSize} />
+      <UglyExternalIcon
+        containerSize={containerSize}
+        color={color}
+        colorProcessed={colorProcessed}
+        name={name}
+        iconSize={iconSize}
+      />
     </Suspense>
   );
 };
@@ -123,22 +139,29 @@ interface AppIconProps {
   containerSize?: number;
 }
 
-export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) => {
+export const AppIcon: FC<AppIconProps> = ({icon, color: neutralColor, isSelected, ...rest}) => {
   const theme = useTheme();
+  const color = theme.fns.deneutralize(neutralColor);
   const isPhone = useIsPhone();
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
   const iconColor = theme.select({
-    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
-    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
-    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.colors.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);
 
   return (
-    <AppIconWrapper color={bgColor as string} borderless={isSelected} containerSize={containerSize}>
-      <AppIconWithFallback name={icon} color={iconColor as string} containerSize={containerSize} iconSize={iconSize} />
+    <AppIconWrapper color={bgColor} borderless={isSelected} containerSize={containerSize}>
+      <AppIconWithFallback
+        name={icon}
+        color={iconColor}
+        colorProcessed
+        containerSize={containerSize}
+        iconSize={iconSize}
+      />
     </AppIconWrapper>
   );
 };

package/src/app-icon.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import {FC} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWithFallback} from "./app-icon-with-fallback";
-import {border, getOpacities} from "./design-system";
+import {alpha, border, themeVars} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -14,20 +14,27 @@ interface AppIconProps {
   className?: string;
 }
 
-export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, iconSize = 36, className}) => {
+export const AppIcon: FC<AppIconProps> = ({
+  color: neutralColor,
+  icon,
+  containerSize = 54,
+  iconSize = 36,
+  className,
+}) => {
   const theme = useTheme();
+  const color = theme.fns.deneutralize(neutralColor);
   const iconColor = theme.select({
-    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
-    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
-    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.colors.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);
 
   const appIconGradientStyle = theme.select({
-    dark: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+    dark: `linear-gradient(180deg, ${themeVars.whiteA10}, transparent)`,
     light: "none",
-    light2: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+    light2: `linear-gradient(180deg, ${themeVars.whiteA10}, transparent)`,
   });
 
   return (
@@ -46,7 +53,13 @@ export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, icon
         height: containerSize,
       }}
     >
-      <AppIconWithFallback containerSize={containerSize} color={iconColor as string} name={icon} iconSize={iconSize} />
+      <AppIconWithFallback
+        containerSize={containerSize}
+        color={iconColor as string}
+        colorProcessed
+        name={icon}
+        iconSize={iconSize}
+      />
     </div>
   );
 };