@fibery/ui-kit 1.36.1 → 1.37.0

package/src/select/select-in-popover.tsx

@@ -1,8 +1,8 @@
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
 import React, {
-  ComponentProps,
   ComponentType,
+  ForwardedRef,
   forwardRef,
   ReactNode,
   useCallback,
@@ -15,9 +15,8 @@ import React, {
 import {inputOverrides} from "../antd/styles";
 import {border, space, textStyles} from "../design-system";
 import {Popup} from "../popup";
-import {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
-import {Menu} from "./custom-select-partials/menu";
+import {MenuTransparent} from "./components/menu";
 import {
   ActionMeta,
   combineStyles,
@@ -30,6 +29,10 @@ import {
   StylesConfig,
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
+import {ButtonColor, ButtonVariant} from "../button/base-button";
+import {makeSelectInPopoverStyles} from "./styles";
+import {SelectInstance} from "react-select";
+import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -85,51 +88,26 @@ const titleClassName = css`
   padding-inline: ${space.s12}px;
 `;
 
-export const valueMaxHeight = 116;
-
-export const selectInPopupStyles = {
-  container: (props: $TSFixMe) => ({
-    ...props,
-    minWidth: 180,
-    width: "100%",
-    paddingTop: space.s6,
-    paddingInline: space.s6,
-  }),
-  option: (props: $TSFixMe) => ({
-    ...props,
-    padding: 0,
-    borderRadius: border.radius4,
-    paddingLeft: 0,
-    paddingRight: 0,
-  }),
-  control: (props: $TSFixMe) => ({
-    ...props,
-    maxHeight: valueMaxHeight,
-    overflow: "auto",
-    margin: space.s2,
-    marginBottom: space.s4,
-    width: `calc(100% - ${space.s2 * 2}px)`,
-    borderRadius: border.radius4,
-  }),
-  menu: (props: $TSFixMe) => ({
-    ...props,
-    minWidth: 100,
-    position: "static",
-    marginBlock: 0,
-    boxShadow: "none !important",
-    borderRadius: border.radius4,
-  }),
-};
-
 export type TriggerProps = {
   innerRef: React.Ref<HTMLDivElement>;
   children: ReactNode;
   onClick?: React.MouseEventHandler;
+  iconStart?: ReactNode;
+  pending?: boolean;
+  pressed?: boolean;
+  menuOpened?: boolean;
   onKeyDown?: React.KeyboardEventHandler;
   disabled?: boolean;
+  size?: "small" | "medium" | "large";
+  fullWidth?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  valueSelected: boolean;
 };
 
-const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
+const TriggerDefault = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   return (
     <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={valueClassName}>
       {children}
@@ -137,59 +115,54 @@ const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   );
 };
 
-type Components = {
-  Trigger: ComponentType<TriggerProps>;
-  Menu: ComponentType<ComponentProps<typeof Menu>>;
+export type SelectComponents<T, U extends boolean, V extends GroupBase<T>> = SelectProps<T, U, V>["components"] & {
+  Trigger?: ComponentType<TriggerProps>;
 };
 
-export type ComponentsConfig = Partial<Components>;
-
-const defaultComponents = {Trigger, Menu};
-
-type Ref = {
+type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
   valueRef: HTMLDivElement | null;
-  selectRef: $TSFixMe | null;
+  selectRef: SelectInstance<T, U, V> | null;
 };
 
-type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
-  value?: PropsValue<Option>;
+type Props<T, U extends boolean, V extends GroupBase<T>> = {
+  value?: PropsValue<T>;
   menuIsOpen?: boolean;
   autoFocus?: boolean;
   virtualized?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
   noOptionsMessage?: () => string | JSX.Element | null;
-  options: OptionsOrGroups<Option, Group>;
-  filterOption?: SelectProps<Option>["filterOption"];
+  options: OptionsOrGroups<T, V>;
+  filterOption?: SelectProps<T, U, V>["filterOption"];
   inputValue?: string;
   disabled?: boolean;
-  isCollectionMode?: IsMulti;
+  isCollectionMode?: U;
   isClearable?: boolean;
   renderValue?: () => ReactNode;
   title?: string;
   maxMenuHeight?: number;
-  hideOnChange?: boolean | ((newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => boolean);
+  hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
   popupStyles?: string;
-  selectStyles?: StylesConfig<Option, IsMulti, Group>;
-  formatGroupLabel?: (group: Group) => ReactNode;
-  formatOptionLabel?: (option: Option, {context}: {context: "menu" | "value"}) => ReactNode;
-  components?: ComponentsConfig;
+  selectStyles?: StylesConfig<T, U, V>;
+  formatGroupLabel?: (group: V) => ReactNode;
+  formatOptionLabel?: (option: T, {context}: {context: "menu" | "value"}) => ReactNode;
+  components?: SelectComponents<T, U, V>;
   onInputChange?: (s: string, actionType: {action: string}) => void;
   onFocus?: () => void;
-  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+  onChange: (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => void;
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   forbidValuesClearInCollnMode?: boolean;
   otherSelectProps?: Record<string, unknown>;
-  isOptionDisabled?: (option: Option) => boolean;
+  isOptionDisabled?: (option: T) => boolean;
 };
 
-function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight">,
-  forwardedRef: React.ForwardedRef<Ref>
+function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
+  props: Omit<Props<T, U, V>, "maxMenuHeight">,
+  forwardedRef: ForwardedRef<SelectInPopoverRef<T, U, V>>
 ) {
   const {
     value,
@@ -234,7 +207,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     },
   });
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const selectRef = useRef<{focus: () => void}>(null);
+  const selectRef = useRef<SelectInstance<T, U, V>>(null);
   const ref = useRef<HTMLDivElement | null>(null);
 
   useImperativeHandle(
@@ -243,11 +216,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       ({
         valueRef: ref.current,
         selectRef: selectRef.current,
-      } as {valueRef: HTMLDivElement; selectRef: $TSFixMe | null})
+      } as {valueRef: HTMLDivElement; selectRef: SelectInstance<T, U, V> | null})
   );
+
   useEffect(() => {
     setTriggerElement(ref.current);
   }, []);
+
   useEffect(() => {
     if (blurTimeoutRef.current) {
       clearTimeout(blurTimeoutRef.current);
@@ -299,7 +274,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   }, [disabled, onMenuOpen, setVisible]);
 
   const styles = useMemo(() => {
-    return combineStyles<Option, IsMulti, Group>([selectInPopupStyles, selectStyles]);
+    return combineStyles<T, U, V>([makeSelectInPopoverStyles(), selectStyles]);
   }, [selectStyles]);
 
   const onTriggerClick: React.MouseEventHandler = useCallback(
@@ -324,27 +299,74 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     },
     [onShow, visible]
   );
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      if ((event.key === "Escape" || event.key === "Tab") && visible) {
+        onHide();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      onSelectKeyDown?.(event);
+    },
+    [onHide, onSelectKeyDown, visible]
+  );
+
+  const isPhone = useIsPhone();
+
+  const onBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
+    if (isPhone) {
+      return;
+    }
+    blurTimeoutRef.current = setTimeout(() => {
+      onHide(false);
+    }, 250);
+  }, [isPhone, onHide]);
+
+  const handleChange = useCallback(
+    (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => {
+      if (typeof hideOnChange === "function") {
+        if (hideOnChange(newValue, actionMeta)) {
+          onHide();
+        }
+      } else if (hideOnChange) {
+        onHide();
+      }
+      onChange(newValue, actionMeta);
+    },
+    [hideOnChange, onChange, onHide]
+  );
+
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
   const paddingMenu = 6 + 6 + 6;
-  const isPhone = useIsPhone();
+
   const maxMenuHeight = isPhone
-    ? document.body.clientHeight - 45 - valueMaxHeight
+    ? document.body.clientHeight - 45 - SELECT_IN_POPOVER_VALUE_MAX_HEIGHT
     : Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
-      valueMaxHeight -
+      SELECT_IN_POPOVER_VALUE_MAX_HEIGHT -
       paddingPopup -
       paddingMenu;
-  const mergedComponents = {...defaultComponents, ...components};
+
+  const Trigger = components.Trigger || TriggerDefault;
+  const selectComponents = {
+    Menu: MenuTransparent,
+    DropdownIndicator: null,
+    IndicatorSeparator: null,
+    ...components,
+  };
 
   return (
     <>
-      <mergedComponents.Trigger
+      <Trigger
         innerRef={ref}
+        menuOpened={visible}
+        disabled={disabled}
+        valueSelected={Boolean(value)}
         onClick={onTriggerClick}
         onKeyDown={onTriggerKeyDown}
-        disabled={disabled}
       >
         {renderValue ? renderValue() : null}
-      </mergedComponents.Trigger>
+      </Trigger>
       {Boolean(triggerElement) && (
         <Popup
           supportMobile
@@ -367,42 +389,19 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
           {/*So in dom react-select will be a child of popover. */}
           <SelectControlSettingsProvider getPopupContainerElement={undefined}>
-            <ReactSelect
+            <ReactSelect<T, U, V>
               ref={selectRef}
               styles={styles}
               isSearchable={true}
-              onKeyDown={(event) => {
-                if ((event.key === "Escape" || event.key === "Tab") && visible) {
-                  onHide();
-                  event.preventDefault();
-                  event.stopPropagation();
-                }
-                onSelectKeyDown?.(event);
-              }}
+              onKeyDown={onKeyDown}
               autoFocus={autoFocus}
-              onBlur={() => {
-                if (isPhone) {
-                  return;
-                }
-                blurTimeoutRef.current = setTimeout(() => {
-                  onHide(false);
-                }, 250);
-              }}
+              onBlur={onBlur}
               value={value}
               defaultMenuIsOpen={defaultMenuIsOpen}
               controlShouldRenderValue
               closeMenuOnScroll={false}
               closeMenuOnSelect={false}
-              onChange={(newValue, actionMeta) => {
-                if (typeof hideOnChange === "function") {
-                  if (hideOnChange(newValue, actionMeta)) {
-                    onHide();
-                  }
-                } else if (hideOnChange) {
-                  onHide();
-                }
-                onChange(newValue, actionMeta);
-              }}
+              onChange={handleChange}
               placeholder={placeholder}
               onInputChange={onInputChange}
               noOptionsMessage={noOptionsMessage}
@@ -419,11 +418,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
               {...otherSelectProps}
-              components={{
-                DropdownIndicator: null,
-                IndicatorSeparator: null,
-                Menu: mergedComponents.Menu as $TSFixMe,
-              }}
+              components={selectComponents}
               forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
               isOptionDisabled={isOptionDisabled}
             />
@@ -434,8 +429,8 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   );
 }
 
-type SelectInPopoverType = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight"> & {ref?: React.ForwardedRef<Ref>}
+type SelectInPopoverType = <T, U extends boolean, V extends GroupBase<T>>(
+  props: Omit<Props<T, U, V>, "maxMenuHeight"> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
 ) => ReturnType<typeof SelectInPopoverInner>;
 
 // Explicit type assertion to specify that component accepts generic props because forwardRef breaks it

package/src/select/styles.ts

@@ -1,20 +1,21 @@
 import {css} from "@linaria/core";
-import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
+import type {CSSObjectWithLabel, GroupBase, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
-import {layout, space, themeVars} from "../design-system";
-import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
-import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
-import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
+import {border, layout, space, themeVars} from "../design-system";
+import {groupHeadingNulledStyles} from "./components/group-heading";
+import {MenuListNulledStyles, MenuNulledStyles} from "./components/menu";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./components/option";
+import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
 
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
 `;
 
-function createControlStyle({
+function makeControlStyle<T, U extends boolean, V extends GroupBase<T>>({
   isSingleLine,
 }: {
   isSingleLine: boolean;
-}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
+}): StylesConfig<T, U, V> {
   const childDivStyle: CSSObjectWithLabel = {
     padding: 0,
     overflow: "visible",
@@ -24,8 +25,8 @@ function createControlStyle({
     childDivStyle.flexWrap = "nowrap";
   }
 
-  return (provided, state) =>
-    ({
+  return {
+    control: (provided, state) => ({
       display: "flex",
       flexWrap: isSingleLine ? "nowrap" : "wrap",
       justifyContent: "space-between",
@@ -38,27 +39,30 @@ function createControlStyle({
       paddingLeft: space.s10,
       paddingRight: space.s12,
       "& > div": childDivStyle,
-    } as unknown as CSSObjectWithLabel);
+    }),
+  };
 }
 
-export const virtualizedStyles: StylesConfig = {
+export const makeVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   option: () => ({...OptionNulledVitualizedStyles, ...OptionNulledStyles}),
   groupHeading: (provided) => ({
     ...provided,
     ...groupHeadingNulledStyles,
     height: layout.menuItemHeight,
   }),
-};
+});
 
-export const nonVirtualizedStyles: StylesConfig = {
+export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   menuList: (provided) => ({
     ...provided,
     paddingTop: 6,
     paddingBottom: 6,
   }),
-};
+});
 
-export const zIndexStyles = (zIndex: number): StylesConfig => ({
+export const makeZIndexStyles = <T, U extends boolean, V extends GroupBase<T>>(
+  zIndex: number
+): StylesConfig<T, U, V> => ({
   menuPortal: (provided) => ({
     ...provided,
     zIndex: zIndex,
@@ -69,13 +73,11 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
   }),
 });
 
-export const componentsStyles: StylesConfig = {
+export const makeComponentsStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   option: () => OptionNulledStyles,
   noOptionsMessage: (provided) => ({
     ...provided,
-    paddingLeft: "",
-    paddingTop: "",
-    paddingBottom: "",
+    padding: 0,
   }),
   placeholder: (provided) => ({
     ...provided,
@@ -112,7 +114,7 @@ export const componentsStyles: StylesConfig = {
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
-  control: createControlStyle({isSingleLine: false}),
+  control: makeControlStyle<T, U, V>({isSingleLine: false}).control,
   group: (provided) => ({
     ...provided,
     padding: 0,
@@ -150,8 +152,42 @@ export const componentsStyles: StylesConfig = {
       color: themeVars.textColor,
     };
   },
-};
+});
+
+export const makeSingleLineStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
+  control: makeControlStyle<T, U, V>({isSingleLine: true}).control,
+});
 
-export const singleLineComponentsStyle: StylesConfig = {
-  control: createControlStyle({isSingleLine: true}),
-};
+export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
+  container: (props) => ({
+    ...props,
+    minWidth: 180,
+    width: "100%",
+    paddingTop: space.s6,
+    paddingInline: space.s6,
+  }),
+  option: (props) => ({
+    ...props,
+    padding: 0,
+    borderRadius: border.radius4,
+    paddingLeft: 0,
+    paddingRight: 0,
+  }),
+  control: (props) => ({
+    ...props,
+    maxHeight: SELECT_IN_POPOVER_VALUE_MAX_HEIGHT,
+    overflow: "auto",
+    margin: space.s2,
+    marginBottom: space.s4,
+    width: `calc(100% - ${space.s2 * 2}px)`,
+    borderRadius: border.radius4,
+  }),
+  menu: (props) => ({
+    ...props,
+    minWidth: 100,
+    position: "static",
+    marginBlock: 0,
+    boxShadow: "none !important",
+    borderRadius: border.radius4,
+  }),
+});

package/src/shortcut-badge.tsx

@@ -5,6 +5,7 @@ import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
 export const shortcutCss = css`
   ${{
     ...textStyles.small,
+    ...textStyles.numeric.tabularOn,
     borderRadius: border.radius4,
     border: themeVars.shortcutBorderColor,
     color: themeVars.shortcutTextColor,

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

@@ -15,6 +15,8 @@ import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
 import {ellipsis} from "../styles-utils";
 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;
 
@@ -124,32 +126,23 @@ 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}>(
@@ -157,7 +150,7 @@ export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {a
     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}>

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/utils/toastify-item-name.ts

@@ -1,4 +1,4 @@
-const trimDynamicToastText = (str: string, charLimit: number) =>
+export const trimDynamicToastText = (str: string, charLimit: number) =>
   str.length > charLimit ? `${str.slice(0, charLimit)}…` : str;
 
 export const toastifyItemName = ({

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/type-badge-box.tsx

@@ -8,9 +8,10 @@ type Props = {
   height: number;
   typeObject: {title: string};
   children: ReactNode;
+  className?: string;
 };
 
-export const TypeBadgeBox = ({width, height, typeObject, children}: Props) => {
+export const TypeBadgeBox = ({width, height, typeObject, children, className}: Props) => {
   const abbr = makeAbbreviation(typeObject.title);
 
   return (
@@ -33,7 +34,8 @@ export const TypeBadgeBox = ({width, height, typeObject, children}: Props) => {
             & > div {
               mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.4));
             }
-          `
+          `,
+        className
       )}
     >
       {children}