@fibery/ui-kit 1.36.2 → 1.38.0

package/src/tab-nav/tab-nav.tsx

@@ -14,7 +14,10 @@ import {
 import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
 import {ellipsis} from "../styles-utils";
+import {mobileRootSelector} from "../mobile-styles";
 import {TooltipIfOverflown} from "../tooltip-if-overflown";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
 
 const tabNavIndicatorWidth = 100;
 
@@ -33,6 +36,10 @@ const tabNavItem = css`
   list-style: none;
 `;
 
+const tabNavItemWide = css`
+  flex: 1 0 0;
+`;
+
 const tabButton = css`
   all: unset;
   display: flex;
@@ -52,23 +59,40 @@ const tabButton = css`
   font-weight: ${fontWeight.medium};
   line-height: 16px;
 
-  &:hover,
-  &:focus-visible {
-    background-color: ${themeVars.colorBgTabHover};
-    color: ${themeVars.textColor};
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: ${themeVars.colorBgTabHover};
+      color: ${themeVars.textColor};
+    }
   }
 
   &:focus-visible {
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.colorBgTabHover};
     outline: 2px solid ${themeVars.colorBorderNeutralFocusRing};
   }
 
   &[data-active] {
     color: ${themeVars.textColor};
   }
+
+  .${tabNavItemWide} & {
+    justify-content: center;
+    text-align: center;
+  }
+
+  ${mobileRootSelector} & {
+    padding: ${space.s4}px ${space.s8}px ${space.s8}px ${space.s4}px;
+    font-size: ${textStyles.regular.fontSize}px;
+  }
 `;
 
 const tabNavButtonText = css`
   padding: 0 ${space.s4}px;
+
+  ${mobileRootSelector} & {
+    padding: 0 ${space.s6}px;
+  }
 `;
 
 const tabNavIndicatorTrack = css`
@@ -124,43 +148,34 @@ export const TabNavList = forwardRef<HTMLUListElement, NavigationMenuListProps>(
   }
 );
 
-const useTabNavIndicator = (
-  {
-    active,
-    itemRef,
-  }: {
-    active?: boolean;
-    itemRef: RefObject<HTMLElement>;
-  },
-  deps: Array<unknown> = []
-) => {
+const useTabNavIndicator = ({active, itemRef}: {active?: boolean; itemRef: RefObject<HTMLElement>}) => {
   const indicatorRef = useTabNavIndicatorCtx();
 
-  useLayoutEffect(() => {
+  const updateIndicator = useCallbackRef(() => {
     if (active && itemRef.current && indicatorRef.current) {
       indicatorRef.current.style.transform = `translateX(${itemRef.current.offsetLeft}px) scaleX(${
         itemRef.current.offsetWidth / tabNavIndicatorWidth
       })`;
       indicatorRef.current.classList.add(tabNavIndicatorMounted);
     }
-  }, [
-    active,
-    indicatorRef,
-    itemRef,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...deps,
-  ]);
+  });
+
+  useLayoutEffect(() => {
+    updateIndicator();
+  }, [updateIndicator, active, indicatorRef, itemRef]);
+
+  useResizeObserver(itemRef, () => updateIndicator());
 };
 
-export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean}>(
-  ({className, children, active, ...props}, forwardedRef) => {
+export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean; wide?: boolean}>(
+  ({className, children, active, wide, ...props}, forwardedRef) => {
     const itemRef = useRef(null);
     const ref = useComposedRefs(itemRef, forwardedRef);
 
-    useTabNavIndicator({active, itemRef}, [children]);
+    useTabNavIndicator({active, itemRef});
 
     return (
-      <NavigationMenuItem ref={ref} className={cx(tabNavItem, className)} {...props}>
+      <NavigationMenuItem ref={ref} className={cx(tabNavItem, wide && tabNavItemWide, className)} {...props}>
         {children}
       </NavigationMenuItem>
     );
@@ -172,9 +187,13 @@ export const TabNavLink = forwardRef<
   Omit<NavigationMenuLinkProps, "asChild"> & {
     before?: ReactNode;
     after?: ReactNode;
+    wide?: boolean;
     itemClassName?: string;
   }
->(function TabNavLink({children, className, itemClassName, active, before, after, href, ...linkProps}, forwardedRef) {
+>(function TabNavLink(
+  {children, className, itemClassName, active, wide, before, after, href, ...linkProps},
+  forwardedRef
+) {
   const renderAsButton = typeof href === "undefined";
 
   const Component = renderAsButton ? "button" : "a";
@@ -185,7 +204,7 @@ export const TabNavLink = forwardRef<
   return (
     <TooltipIfOverflown title={children}>
       {({setNode}) => (
-        <TabNavItem className={itemClassName} active={active}>
+        <TabNavItem className={itemClassName} active={active} wide={wide}>
           <NavigationMenuLink
             ref={forwardedRef}
             className={cx(tabButton, className)}

package/src/theme-provider.tsx

@@ -1,6 +1,7 @@
 import invariant from "invariant";
 import {themeStyles} from "./theme-styles";
-import {createContext, ReactNode, useContext, useEffect, useState} from "react";
+import {layoutStyles} from "./layout-styles";
+import {createContext, ReactNode, useContext, useEffect, useLayoutEffect, useState} from "react";
 import {colors, getThemeColors, ThemeColors} from "./design-system";
 import {
   subscribeOnThemeMenuPreferenceChange,
@@ -86,6 +87,13 @@ export function RootThemeProvider({
       unsubscribeMenuPreference();
     };
   }, []);
+  useLayoutEffect(() => {
+    const documentElement = document.documentElement;
+    documentElement.classList.add(layoutStyles);
+    return () => {
+      documentElement.classList.remove(layoutStyles);
+    };
+  }, []);
   useEffect(() => {
     const darkThemeClassName = "dark-theme";
     const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";

package/src/toast/primitives.tsx

@@ -5,6 +5,12 @@ import {ElementRef, forwardRef} from "react";
 import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars, transition} from "../design-system";
 import CloseIcon from "../icons/react/Close";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
 
 const viewportCss = css`
   position: fixed;
@@ -17,7 +23,8 @@ const viewportCss = css`
   gap: ${space.s16}px;
   margin: 0;
   z-index: 1010; // inherited from old toast implementation
-  padding: 0;
+  padding: var(${safeAreaInsetTopVar}) var(${safeAreaInsetRightVar}) var(${safeAreaInsetBottomVar})
+    var(${safeAreaInsetLeftVar});
   list-style: none;
 
   transition: bottom ${transition}; // bottom may change dynamically

package/src/toggle-button/round-toggle-button.tsx

@@ -0,0 +1,23 @@
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {css, cx} from "@linaria/core";
+
+const roundToggleButtonCss = css`
+  &:is(&) {
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    justify-content: center;
+  }
+`;
+
+export const RoundToggleButton = forwardRef<ComponentRef<typeof ToggleButton>, Omit<ToggleButtonProps, "iconStart">>(
+  function RoundToggleButton({children, className, ...props}, ref) {
+    return (
+      <ToggleButton ref={ref} className={cx(roundToggleButtonCss, className)} {...props}>
+        {children}
+      </ToggleButton>
+    );
+  }
+);

package/src/toggle-button/toggle-button-group.tsx

@@ -0,0 +1,34 @@
+import {css, cx} from "@linaria/core";
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupItemProps,
+  ToggleGroupMultipleProps,
+  ToggleGroupSingleProps,
+} from "@radix-ui/react-toggle-group";
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {space} from "../design-system";
+
+export const toggleButtonGroupCss = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const ToggleButtonGroup = forwardRef<
+  ComponentRef<typeof ToggleGroup>,
+  (ToggleGroupSingleProps | ToggleGroupMultipleProps) & {gap?: number}
+>(function ToggleButtonGroup({className, gap = space.s4, ...props}, ref) {
+  return <ToggleGroup ref={ref} style={{gap}} className={cx(toggleButtonGroupCss, className)} {...props} />;
+});
+
+export const ToggleButtonGroupItem = forwardRef<
+  ComponentRef<typeof ToggleGroupItem>,
+  ToggleGroupItemProps & ToggleButtonProps
+>(function ToggleButtonGroupItem({className, children, asChild, ...props}, ref) {
+  return (
+    <ToggleGroupItem ref={ref} className={className} {...props} asChild>
+      {asChild ? children : <ToggleButton>{children}</ToggleButton>}
+    </ToggleGroupItem>
+  );
+});

package/src/toggle-button/toggle-button.tsx

@@ -0,0 +1,164 @@
+import {css, cx} from "@linaria/core";
+import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
+import {forwardRef} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {iconColorVar, iconSizeVar} from "../icons/Icon";
+
+export const toggleButtonCss = css`
+  button:where(&) {
+    all: unset;
+  }
+
+  padding-inline: ${space.s6}px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  font-size: ${textStyles.small.fontSize}px;
+  border-radius: ${border.radius8}px;
+
+  transition-property: border, background-color, color, opacity, box-shadow;
+  transition-duration: 0.15s;
+
+  color: ${themeVars.textColor};
+  ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
+
+  ${iconSizeVar}: 16px;
+
+  border: 1.5px solid ${themeVars.colorBorderReactionsHover};
+  background-color: ${themeVars.colorBgReactionsDefault};
+
+  &[aria-readonly="true"] {
+    background-color: ${themeVars.colorBgReactionsHover};
+    border-color: ${themeVars.colorBgReactionsHover};
+  }
+
+  cursor: pointer;
+  line-height: 16px;
+  user-select: none;
+
+  &[data-size="medium"] {
+    min-height: 28px;
+  }
+
+  &[data-size="large"] {
+    min-height: 32px;
+    padding-inline: 7px;
+  }
+
+  &:not(:disabled, [aria-readonly="true"]) {
+    &:hover {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+
+    &:is(:active, [aria-expanded="true"]) {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+  }
+
+  &:disabled,
+  &[aria-readonly="true"] {
+    cursor: default;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: ${themeVars.colorBgReactionsHover};
+    outline: 2px solid ${themeVars.colorBorderReactionsHover};
+  }
+
+  &:is([aria-pressed="true"], [aria-checked="true"]) {
+    color: ${themeVars.colorTextReactionsSelected};
+    ${iconColorVar}: ${themeVars.colorIconButtonGhostAccent};
+    background-color: ${themeVars.colorBgReactionsSelectedDefault};
+    border-color: ${themeVars.colorBorderReactionsSelectedDefault};
+
+    &[aria-readonly="true"] {
+      background-color: ${themeVars.colorBgReactionsSelectedDefault};
+      border-color: ${themeVars.colorBgReactionsSelectedDefault};
+    }
+
+    &:not(:disabled, [aria-readonly="true"]) {
+      &:hover {
+        background-color: ${themeVars.colorBgReactionsSelectedHover};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+
+      &:active {
+        background-color: ${themeVars.colorBgReactionsSelectedDefault};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+    }
+  }
+`;
+
+export const toggleButtonCssWithIconStart = css`
+  padding-left: ${space.s4}px;
+`;
+
+export const toggleButtonContent = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s4}px;
+  height: 100%;
+
+  transition-property: opacity;
+  transition-duration: 0.15s;
+
+  .${toggleButtonCss}:is(:active, [aria-expanded="true"]) > & {
+    opacity: 0.8;
+  }
+
+  .${toggleButtonCss}:disabled > & {
+    opacity: 0.6;
+  }
+
+  overflow: hidden;
+`;
+
+export type ToggleButtonVariant = "outline";
+export type ToggleButtonSize = "small" | "medium" | "large";
+
+export type ToggleButtonProps = {
+  iconStart?: React.ReactNode;
+  variant?: ToggleButtonVariant;
+  size?: ToggleButtonSize;
+  readOnly?: boolean;
+} & Omit<ToggleProps, "asChild">;
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (
+    {
+      className,
+      iconStart,
+      size = "small",
+      variant = "outline",
+      children,
+      "aria-readonly": ariaReadonly,
+      readOnly = ariaReadonly,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    return (
+      <Toggle
+        ref={ref}
+        className={cx(toggleButtonCss, iconStart && toggleButtonCssWithIconStart, className)}
+        data-variant={variant}
+        data-size={size}
+        aria-readonly={readOnly}
+        {...props}
+      >
+        <div className={toggleButtonContent}>
+          {iconStart}
+          {children}
+        </div>
+      </Toggle>
+    );
+  }
+);

package/src/toggle.tsx

@@ -2,7 +2,7 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
-import {layout, space, textStyles, transition} from "./design-system";
+import {space, textStyles, transition} from "./design-system";
 import _ from "lodash";
 import SpinnerIcon from "./icons/react/Spinner";
 
@@ -26,7 +26,8 @@ const Input = styled.input<{outlineColor: string}>`
   }
 
   &:focus-visible {
-    box-shadow: ${({outlineColor}) => `inset 0 0 0 1px ${outlineColor}`};
+    outline: ${({outlineColor}) => `2px solid ${outlineColor}`};
+    outline-offset: 1px;
   }
 `;
 
@@ -34,7 +35,6 @@ const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
   margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
   margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
-  line-height: ${layout.checkboxSize}px;
   width: 100%;
   min-width: 0;
 `;

package/src/tooltip-if-overflown.tsx

@@ -4,9 +4,7 @@ import {Tooltip, TooltipProps} from "./tooltip";
 
 type SetNode = (element: HTMLElement | null) => void;
 
-export const TooltipIfOverflown: React.FC<
-  Omit<TooltipProps, "children"> & {children: (args: {setNode: SetNode}) => JSX.Element | null}
-> = ({children, ...tooltipProps}) => {
+export const useTruncated = () => {
   const [truncated, setTruncated] = useState(false);
   const [node, setNode] = useState<HTMLElement | null>(null);
 
@@ -18,6 +16,14 @@ export const TooltipIfOverflown: React.FC<
       : target.scrollWidth > target.clientWidth;
     setTruncated(truncated);
   });
+
+  return {setNode, truncated};
+};
+
+export const TooltipIfOverflown: React.FC<
+  Omit<TooltipProps, "children"> & {children: (args: {setNode: SetNode}) => JSX.Element | null}
+> = ({children, ...tooltipProps}) => {
+  const {truncated, setNode} = useTruncated();
   return (
     <Tooltip {...tooltipProps} disabled={!truncated}>
       {children({setNode})}

package/src/tooltip.tsx

@@ -24,10 +24,10 @@ const descriptionStyle = css`
 `;
 
 export const tooltipStyle = css`
-  font-size: 13px;
+  font-size: 12px;
   color: ${themeVars.whiteColor};
   z-index: 100000;
-  min-height: 30px;
+  min-height: 28px;
   max-width: 300px;
   background-color: ${themeVars.tooltipBgColor};
   padding: ${space.s6}px ${space.s8}px;

package/src/unit/index.tsx

@@ -51,5 +51,13 @@ export const OptionUnit = (props: UnitPrimitiveProps) => {
 };
 
 export const HistoryUnit = (props: UnitPrimitiveProps & {size: CardSize}) => {
-  return <UnitPrimitive big={props.size === ":card-size/cell"} bgColor={themeVars.unitBg} border={false} {...props} />;
+  return (
+    <UnitPrimitive
+      big={props.size === ":card-size/cell"}
+      bgColor={themeVars.unitBg}
+      border={false}
+      tooltip={false}
+      {...props}
+    />
+  );
 };

package/src/unit/loading-unit-value.tsx

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import {LoadingSausage, LoadingSausageProps} from "../loading-sausage";
 
 export const unitTextHeight = 8;
+
 export const LoadingUnitValue = (props: LoadingSausageProps) => (
   <div
     className={css`

package/src/unit/maybe-unit-value.tsx

@@ -1,9 +1,9 @@
 import {LoadingUnitValue} from "./loading-unit-value";
 
-interface MaybeUnitValueProps {
+type Props = {
   value?: string;
-}
+};
 
-export const MaybeUnitValue: React.FC<MaybeUnitValueProps> = ({value}) => {
+export const MaybeUnitValue: React.FC<Props> = ({value}) => {
   return value === undefined ? <LoadingUnitValue minWidth={18} maxWidth={18} /> : <>{value}</>;
 };