@fibery/ui-kit 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @fibery/ui-kit
 
+## 6.0.0
+
+### Major Changes
+
+- 5d8dd40: Remove UnitWithTooltip — use Tooltip with title/description props and a plain wrapper element instead. Its hand-rolled hover tracking worked around a Safari mouseleave-on-scroll bug that no longer reproduces; unit tooltips now also open on keyboard focus. Tooltip's default content no longer renders empty title/description nodes when only one of the two is provided.
+
+### Minor Changes
+
+- b7f6df1: updated badge component added accent state
+
 ## 5.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -58,8 +58,8 @@
     "tabbable": "5.2.1",
     "vaul": "1.1.2",
     "virtua": "0.48.8",
-    "@fibery/helpers": "3.1.0",
     "@fibery/emoji-data": "2.7.3",
+    "@fibery/helpers": "3.1.0",
     "@fibery/react": "1.5.4"
   },
   "devDependencies": {

package/src/badge.tsx

@@ -6,7 +6,7 @@ import {space, textClasses, themeVars} from "./design-system";
 
 type Props = {
   children: ReactNode;
-  kind?: "success" | "error" | "default" | "warning";
+  kind?: "success" | "error" | "default" | "warning" | "accent";
 };
 
 export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...otherProps}, ref) => {
@@ -39,6 +39,11 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...oth
           css`
             color: ${themeVars.colorTextBadgeWarning};
             background: ${themeVars.colorBgBadgeWarning};
+          `,
+        kind === "accent" &&
+          css`
+            color: ${themeVars.colorTextBadgeAccent};
+            background: ${themeVars.colorBgBadgeAccent};
           `
       )}
     >

package/src/tooltip.tsx

@@ -158,8 +158,8 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       description,
       content = (title || description) && (
         <>
-          <TooltipTitle>{title}</TooltipTitle>
-          <TooltipDescription>{description}</TooltipDescription>
+          {title && <TooltipTitle>{title}</TooltipTitle>}
+          {description && <TooltipDescription>{description}</TooltipDescription>}
         </>
       ),
       side,

package/src/unit/index.tsx

@@ -27,7 +27,7 @@ export const BasicUnit = ({
     );
   }
 
-  const bgColor = props.bgColor || props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent;
+  const bgColor = props.bgColor || (props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent);
   return (
     <UnitPrimitive
       bgColor={bgColor}

package/src/unit/primitive.tsx

@@ -5,6 +5,7 @@ import type {ComponentProps} from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, themeVars} from "../design-system";
 import {FieldIcon} from "../field-icon";
+import {Tooltip} from "../tooltip";
 import {useTruncated} from "../tooltip-if-overflown";
 import {
   basicUnitClassName,
@@ -25,7 +26,6 @@ import {
 import type {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
-import {UnitWithTooltip} from "./unit-with-tooltip";
 
 const resetButtonStylesClassName = css`
   all: unset;
@@ -179,9 +179,10 @@ export const UnitPrimitive = ({
 
   return (
     <div className={positionUnitClass}>
-      <UnitWithTooltip title={tooltipTitle} description={tooltipDescription}>
-        {contentWithHeader}
-      </UnitWithTooltip>
+      <Tooltip side="bottom" align="start" title={tooltipTitle} description={tooltipDescription}>
+        {/* The trigger needs a host element: the unit content root does not forward refs/handlers */}
+        <div>{contentWithHeader}</div>
+      </Tooltip>
     </div>
   );
 };

package/src/unit/unit-with-tooltip.tsx

@@ -1,77 +0,0 @@
-import {css} from "@linaria/core";
-import {useRef, useState} from "react";
-
-import {space, tooltipDelay} from "../../src/design-system";
-import {Tooltip, TooltipDescription, TooltipTitle} from "../tooltip";
-
-const contentCss = css`
-  display: flex;
-  flex-direction: column;
-  gap: ${space.s4}px;
-`;
-
-type Props = {
-  children: React.ReactElement;
-  title: React.ReactNode;
-  description: React.ReactNode;
-  hidden?: boolean;
-};
-
-export const UnitWithTooltip = ({children, title, description, hidden}: Props) => {
-  const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
-  const unitElementRef = useRef<HTMLDivElement>(null);
-  const isHoveredRef = useRef(false);
-  const checkHoveredStateTimeoutId = useRef<ReturnType<typeof setTimeout> | null>();
-
-  const onMouseEnter = () => {
-    isHoveredRef.current = true;
-
-    checkHoveredStateTimeoutId.current = setTimeout(() => {
-      checkHoveredStateTimeoutId.current = null;
-      // onMouseLeave works unreliably in Safari, IE on scroll
-      // Sometimes it was not fired leaving tooltip displayed
-      // Had to use additional way to validate if we are still over unit
-      if (isHoveredRef.current && unitElementRef.current && unitElementRef.current.matches(":hover")) {
-        setShouldDisplayTooltip(true);
-        const intervalId = window.setInterval(() => {
-          if (isHoveredRef.current && unitElementRef.current) {
-            if (!unitElementRef.current.matches(":hover")) {
-              isHoveredRef.current = false;
-              setShouldDisplayTooltip(false);
-              clearInterval(intervalId);
-            }
-          } else {
-            clearInterval(intervalId);
-          }
-        }, 250);
-      }
-    }, tooltipDelay.enter);
-  };
-
-  const onMouseLeave = () => {
-    isHoveredRef.current = false;
-    if (checkHoveredStateTimeoutId.current) {
-      clearTimeout(checkHoveredStateTimeoutId.current);
-      checkHoveredStateTimeoutId.current = null;
-    }
-    setShouldDisplayTooltip(false);
-  };
-
-  return (
-    <Tooltip
-      visible={!hidden && shouldDisplayTooltip}
-      content={
-        <div className={contentCss}>
-          <TooltipTitle>{title}</TooltipTitle>
-          {description && <TooltipDescription>{description}</TooltipDescription>}
-        </div>
-      }
-      side="bottom"
-      align="start"
-    >
-      <div ref={unitElementRef} onMouseDown={onMouseLeave} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {children}
-      </div>
-    </Tooltip>
-  );
-};