@fibery/ui-kit 1.34.7 → 1.35.0

package/src/palette.ts

@@ -1,4 +1,5 @@
 export const slate = {
+  slateBase: "hsl(0, 0%, 99%)",
   slate1: "hsl(206, 30%, 99%)",
   slate2: "hsl(210, 17%, 98%)",
   slate3: "hsl(209, 13%, 95%)",
@@ -14,6 +15,7 @@ export const slate = {
 } as const;
 
 export const slateDark = {
+  slateBase: "hsl(0, 0%, 3%)",
   slate1: "hsl(200, 7%, 9%)",
   slate2: "hsl(195, 7%, 11%)",
   slate3: "hsl(197, 7%, 14%)",
@@ -28,36 +30,6 @@ export const slateDark = {
   slate12: "hsl(210, 6%, 93%)",
 } as const;
 
-export const sage = {
-  sage1: "hsl(155, 30%, 99%)",
-  sage2: "hsl(150, 17%, 98%)",
-  sage3: "hsl(151, 11%, 95%)",
-  sage4: "hsl(151, 9%, 93%)",
-  sage5: "hsl(151, 8%, 91%)",
-  sage6: "hsl(152, 7%, 88%)",
-  sage7: "hsl(153, 7%, 85%)",
-  sage8: "hsl(154, 6%, 78%)",
-  sage9: "hsl(155, 4%, 56%)",
-  sage10: "hsl(154, 3%, 52%)",
-  sage11: "hsl(155, 3%, 43%)",
-  sage12: "hsl(155, 24%, 9%)",
-} as const;
-
-export const sageDark = {
-  sage1: "hsl(160, 7%, 8%)",
-  sage2: "hsl(150, 7%, 11%)",
-  sage3: "hsl(150, 7%, 13%)",
-  sage4: "hsl(150, 6%, 15%)",
-  sage5: "hsl(150, 6%, 17%)",
-  sage6: "hsl(150, 6%, 20%)",
-  sage7: "hsl(150, 5%, 24%)",
-  sage8: "hsl(150, 5%, 31%)",
-  sage9: "hsl(155, 6%, 42%)",
-  sage10: "hsl(153, 5%, 48%)",
-  sage11: "hsl(155, 5%, 62%)",
-  sage12: "hsl(155, 6%, 93%)",
-} as const;
-
 export const teal = {
   teal1: "hsl(165, 60%, 99%)",
   teal2: "hsl(169, 65%, 97%)",

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -21,3 +21,7 @@ export function ClearIndicator<
     </div>
   );
 }
+
+export function NoClearIndicator() {
+  return null;
+}

package/src/select/custom-select-partials/group-heading.tsx

@@ -1,10 +1,9 @@
-import {GroupBase} from "../index";
-import {GroupHeadingProps, components} from "react-select";
 import {css} from "@linaria/core";
+import {GroupHeadingProps, components} from "react-select";
 import {layout, space, textStyles, themeVars} from "../../design-system";
-import React from "react";
-import {isPureTextChildren} from "../util";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
+import {GroupBase} from "../index";
+import {isPureTextChildren} from "../util";
 
 export const groupHeadingNulledStyles = {
   paddingLeft: "",
@@ -20,7 +19,7 @@ export const groupHeadingNulledStyles = {
 const groupHeadingClass = css`
   min-height: ${layout.menuItemHeight}px;
   color: ${themeVars.disabledTextColor};
-  padding: 0 ${space.s6}px 0 ${space.s8}px;
+  padding: 0 ${space.s6}px ${space.s2}px ${space.s8}px;
   display: flex;
   align-content: flex-end;
   align-items: flex-end;
@@ -56,6 +55,9 @@ export function GroupHeading<
   if (props.data.separator) {
     return <GroupDivider />;
   }
+  if (props.data.label === undefined) {
+    return null;
+  }
   const isPureText = isPureTextChildren(children);
   return (
     <components.GroupHeading {...props} className={groupHeadingClass}>

package/src/select/custom-select-partials/menu-list-virtualized.tsx

@@ -1,9 +1,25 @@
+import {css} from "@linaria/core";
+import _, {isFunction, isObject} from "lodash";
+import {Children, ComponentType, CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
 import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
 import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
-import {Children, ComponentType, CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
-import {GroupBase, ReactSelectRefContext} from "../util";
 import {layout} from "../../../src/design-system";
-import _, {isFunction, isObject} from "lodash";
+import {GroupBase, ReactSelectRefContext} from "../util";
+
+const PADDING_BLOCK_HEIGHT = 6;
+
+const Spacer = () => (
+  <div
+    className={css`
+      height: ${PADDING_BLOCK_HEIGHT}px;
+    `}
+  />
+);
+
+const components = {
+  Footer: Spacer,
+  Header: Spacer,
+};
 
 const OPTION_HEIGHT = layout.menuItemHeight;
 // this code is logic stolen from windowed-select SCROLL_INTO_VIEW_CHECK_FIX prevents list scrolling when focusing
@@ -128,7 +144,7 @@ export function MenuListVirtualized<
       }
     }
   }, [flattenChildren, initialFocusedOption, select]);
-  const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight, maxHeight);
+  const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight + PADDING_BLOCK_HEIGHT * 2, maxHeight);
   //scrolling to focused option
   useEffect(() => {
     let to: number | undefined;
@@ -171,6 +187,7 @@ export function MenuListVirtualized<
       window.clearTimeout(to);
     };
   }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
+
   return (
     // Needed for correct display inside portals and etc.
     <div style={getStyles("menuList", props) as CSSProperties}>
@@ -183,6 +200,7 @@ export function MenuListVirtualized<
         data={flattenChildren}
         totalCount={flattenChildren.length}
         itemContent={drawListElement}
+        components={components}
       />
     </div>
   );

package/src/select/custom-select-partials/menu.tsx

@@ -1,8 +1,8 @@
-import {GroupBase} from "../index";
-import {CSSObjectWithLabel, MenuProps, components} from "react-select";
-import cn from "classnames";
 import {css} from "@linaria/core";
-import {border, space, themeVars} from "../../design-system";
+import cn from "classnames";
+import {CSSObjectWithLabel, MenuProps, components} from "react-select";
+import {border, themeVars} from "../../design-system";
+import {GroupBase} from "../index";
 
 export const MenuListNulledStyles: CSSObjectWithLabel = {
   paddingTop: "",
@@ -21,10 +21,9 @@ const MenuRootClass = css`
   background-color: ${themeVars.colorBgSelectMenu};
   box-shadow: ${themeVars.shadowSelectMenu};
   border-radius: ${border.radius6}px;
-  padding-top: ${space.s6}px;
-  padding-bottom: ${space.s6}px;
   overflow: hidden;
 `;
+
 export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
 ) {

package/src/select/index.tsx

@@ -1,7 +1,8 @@
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
-  components as reactSelectComponents,
+  Props as BaseSelectProps,
   createFilter,
   MenuListProps,
   MenuProps,
@@ -11,43 +12,47 @@ import BaseSelect, {
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
-  Props as BaseSelectProps,
   PropsValue,
+  components as reactSelectComponents,
   SelectInstance,
   SingleValue,
   SingleValueProps,
   StylesConfig,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
-import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
-import {useSelectControlSettings} from "./select-control-settings-context";
-import {Option, OptionSlow} from "./custom-select-partials/option";
-import {Menu} from "./custom-select-partials/menu";
-import {GroupHeading} from "./custom-select-partials/group-heading";
+import {ClearIndicator, NoClearIndicator} from "./custom-select-partials/clear-indicator";
 import {DropdownIndicator} from "./custom-select-partials/drop-down-indicator";
+import {GroupHeading} from "./custom-select-partials/group-heading";
+import {Menu} from "./custom-select-partials/menu";
+import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
 import {NoOptionsMessage} from "./custom-select-partials/no-option-message";
-import {ClearIndicator} from "./custom-select-partials/clear-indicator";
+import {Option, OptionSlow} from "./custom-select-partials/option";
+import {useSelectControlSettings} from "./select-control-settings-context";
+import {
+  componentsStyles,
+  nonVirtualizedStyles,
+  singleLineComponentsStyle,
+  virtualizedStyles,
+  zIndexStyles,
+} from "./styles";
 import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
-import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
+export {reactSelectComponents as components, MenuListVirtualized};
 export type {
-  OptionsOrGroups,
+  ActionMeta,
   GroupBase,
-  StylesConfig,
-  MenuProps,
   MenuListProps,
-  OptionProps,
-  SingleValueProps,
-  MultiValueProps,
-  SingleValue,
+  MenuProps,
   MultiValue,
-  ActionMeta,
+  MultiValueProps,
   OnChangeValue,
+  OptionProps,
+  OptionsOrGroups,
   PropsValue,
+  SingleValue,
+  SingleValueProps,
+  StylesConfig,
 };
-export {reactSelectComponents as components};
-export {MenuListVirtualized};
 
 //Group dummy for virtualized option-lists. For performance.
 function GroupVirtualized() {
@@ -71,6 +76,7 @@ export type SelectProps<
   virtualized?: boolean;
   isCollectionMode?: IsMulti;
   disabled?: boolean;
+  forbidValuesClearInCollnMode?: boolean;
 };
 
 export function SingleRowSelect<
@@ -110,6 +116,7 @@ export const Select = forwardRef(function Select<
     onMenuOpen,
     onMenuClose,
     onChange,
+    forbidValuesClearInCollnMode,
     ...rest
   }: SelectProps<Option, IsMulti, Group>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -161,11 +168,10 @@ export const Select = forwardRef(function Select<
     },
     [onKeyDown, menuOpenState]
   );
-
   const combinedStyles = useMemo(() => {
     return combineStyles<Option, IsMulti, Group>([
       componentsStyles,
-      virtualized ? virtualizedStyles : {},
+      virtualized ? virtualizedStyles : nonVirtualizedStyles,
       zIndex ? zIndexStyles(zIndex) : {},
       styles,
     ] as StylesConfig<Option, IsMulti, Group>[]);
@@ -183,7 +189,7 @@ export const Select = forwardRef(function Select<
         menuPlacement={"auto"}
         styles={combinedStyles}
         isMulti={isCollectionMode}
-        backspaceRemovesValue={isCollectionMode}
+        backspaceRemovesValue={isCollectionMode && !forbidValuesClearInCollnMode}
         tabSelectsValue={false}
         components={{
           Menu: Menu,
@@ -195,7 +201,7 @@ export const Select = forwardRef(function Select<
    Read Option definition for more info
    bug here: https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
    */
-          MultiValueRemove: ClearIndicator,
+          MultiValueRemove: isCollectionMode && forbidValuesClearInCollnMode ? NoClearIndicator : ClearIndicator,
           NoOptionsMessage,
           GroupHeading,
           Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
@@ -253,15 +259,20 @@ export function CreatableSelectInner<
     return countOptions<Option, Group>(rest.options);
   }, [rest.options]);
 
+  const combinedStyles = useMemo(() => {
+    return combineStyles<Option, IsMulti, Group>([
+      componentsStyles,
+      virtualized ? virtualizedStyles : nonVirtualizedStyles,
+      styles,
+    ] as StylesConfig<Option, IsMulti, Group>[]);
+  }, [styles, virtualized]);
+
   return (
     <BaseCreatableSelect
       ref={ref}
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
-      styles={combineStyles<Option, IsMulti, Group>([
-        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
-        styles,
-      ])}
+      styles={combinedStyles}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}

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

@@ -1,6 +1,5 @@
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
-import {border, space, textStyles} from "../design-system";
-import {inputOverrides} from "../antd/styles";
 import React, {
   ComponentProps,
   ComponentType,
@@ -13,8 +12,12 @@ import React, {
   useRef,
   useState,
 } from "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 {
   ActionMeta,
   combineStyles,
@@ -27,9 +30,6 @@ import {
   StylesConfig,
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
-import {Menu} from "./custom-select-partials/menu";
-import {useIsPhone} from "../use-is-phone";
-import {useControllableState} from "@fibery/react/src/use-controllable-state";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -53,10 +53,6 @@ const popupContainerClassName = css`
 const popupClassName = css`
   min-width: 320px;
   max-width: 440px;
-  padding-top: ${popupPaddingTop}px;
-  padding-bottom: ${popupPaddingBottom}px;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s8}px;
 `;
 const mobileClassName = css`
   padding-top: ${space.s12}px;
@@ -85,10 +81,8 @@ const valueClassName = css`
 
 const titleClassName = css`
   ${textStyles.heading6}
-  padding-top: ${space.s6}px;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s8}px;
-  padding-bottom: ${space.s12}px;
+  padding-top: ${space.s12}px;
+  padding-inline: ${space.s12}px;
 `;
 
 export const valueMaxHeight = 116;
@@ -98,6 +92,8 @@ export const selectInPopupStyles = {
     ...props,
     minWidth: 180,
     width: "100%",
+    paddingTop: space.s6,
+    paddingInline: space.s6,
   }),
   option: (props: $TSFixMe) => ({
     ...props,
@@ -110,13 +106,16 @@ export const selectInPopupStyles = {
     ...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",
-    marginTop: space.s6,
-    marginBottom: 0,
+    marginBlock: 0,
     boxShadow: "none !important",
     borderRadius: border.radius4,
   }),
@@ -169,12 +168,12 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   renderValue?: () => ReactNode;
   title?: string;
   maxMenuHeight?: number;
-  hideOnChange?: boolean;
+  hideOnChange?: boolean | ((newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => boolean);
   renderInPortal?: boolean;
   popupStyles?: string;
   selectStyles?: StylesConfig<Option, IsMulti, Group>;
   formatGroupLabel?: (group: Group) => ReactNode;
-  formatOptionLabel?: (option: Option) => ReactNode;
+  formatOptionLabel?: (option: Option, {context}: {context: "menu" | "value"}) => ReactNode;
   components?: ComponentsConfig;
   onInputChange?: (s: string, actionType: {action: string}) => void;
   onFocus?: () => void;
@@ -183,6 +182,8 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  forbidValuesClearInCollnMode?: boolean;
+  otherSelectProps?: Record<string, unknown>;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -219,6 +220,8 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     onMenuClose,
     getPopupContainer,
     onSelectKeyDown,
+    otherSelectProps,
+    forbidValuesClearInCollnMode,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -280,6 +283,10 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   }, [visible]);
 
   const onShow = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
     if (blurTimeoutRef.current) {
       clearTimeout(blurTimeoutRef.current);
     }
@@ -287,7 +294,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     if (onMenuOpen) {
       onMenuOpen();
     }
-  }, [onMenuOpen, setVisible]);
+  }, [disabled, onMenuOpen, setVisible]);
 
   const styles = useMemo(() => {
     return combineStyles<Option, IsMulti, Group>([selectInPopupStyles, selectStyles]);
@@ -385,7 +392,11 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               closeMenuOnScroll={false}
               closeMenuOnSelect={false}
               onChange={(newValue, actionMeta) => {
-                if (hideOnChange) {
+                if (typeof hideOnChange === "function") {
+                  if (hideOnChange(newValue, actionMeta)) {
+                    onHide();
+                  }
+                } else if (hideOnChange) {
                   onHide();
                 }
                 onChange(newValue, actionMeta);
@@ -405,11 +416,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               isClearable={!isCollectionMode && isClearable}
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
+              {...otherSelectProps}
               components={{
                 DropdownIndicator: null,
                 IndicatorSeparator: null,
                 Menu: mergedComponents.Menu as $TSFixMe,
               }}
+              forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
             />
           </SelectControlSettingsProvider>
         </Popup>

package/src/select/styles.ts

@@ -2,9 +2,9 @@ import {css} from "@linaria/core";
 import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {layout, space, themeVars} from "../design-system";
-import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
-import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
 import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
+import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
 
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
@@ -50,6 +50,14 @@ export const virtualizedStyles: StylesConfig = {
   }),
 };
 
+export const nonVirtualizedStyles: StylesConfig = {
+  menuList: (provided) => ({
+    ...provided,
+    paddingTop: 6,
+    paddingBottom: 6,
+  }),
+};
+
 export const zIndexStyles = (zIndex: number): StylesConfig => ({
   menuPortal: (provided) => ({
     ...provided,

package/src/toast/primitives.tsx

@@ -3,7 +3,7 @@ import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
 import {IconButton} from "../button/icon-button";
-import {border, space, textStyles, themeVars} from "../design-system";
+import {border, space, textStyles, themeVars, transition} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 
 const viewportCss = css`
@@ -21,6 +21,8 @@ const viewportCss = css`
   padding: 0;
   list-style: none;
 
+  transition: bottom ${transition}; // bottom may change dynamically
+
   &:not(:empty) {
     padding: ${space.s24}px; // increased mouse hover area to pause timers of toast
   }

package/src/toast/toast-queue.ts

@@ -13,6 +13,11 @@ type QueuedToast = AddToastProps & {
   id: string;
 };
 
+type BottomOffsetRequest = {
+  id: string;
+  bottomOffset: number;
+};
+
 type ToastQueueOpts = {
   maxActiveToasts?: number;
   onToastAdd?: (params: AddToastProps) => void;
@@ -27,6 +32,7 @@ export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}
   const pubSub = makePubSub();
   let queue: QueuedToast[] = [];
   let activeToasts: QueuedToast[] = [];
+  let bottomOffsets: BottomOffsetRequest[] = [];
 
   let count = 0;
 
@@ -87,6 +93,22 @@ export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}
     getActiveToasts() {
       return activeToasts;
     },
+    addBottomOffset: (bottomOffset: number) => {
+      const id = `${Math.random()}`;
+      bottomOffsets.push({id, bottomOffset});
+      pubSub.publish();
+
+      return () => {
+        bottomOffsets = bottomOffsets.filter((v) => v.id !== id);
+        pubSub.publish();
+      };
+    },
+    getBottomOffset() {
+      if (bottomOffsets.length === 0) {
+        return 0;
+      }
+      return Math.max(...bottomOffsets.map((v) => v.bottomOffset));
+    },
     subscribe: pubSub.subscribe,
     unsubscribe: pubSub.unsubscribe,
 

package/src/toast/toaster.tsx

@@ -24,6 +24,7 @@ export const Toaster: React.FC = () => {
   const toastQueue = useToast();
 
   const toasts = useSyncExternalStore(toastQueue.subscribe, toastQueue.getActiveToasts);
+  const bottomOffset = useSyncExternalStore(toastQueue.subscribe, toastQueue.getBottomOffset);
 
   return (
     <ToastThemeProvider>
@@ -45,7 +46,7 @@ export const Toaster: React.FC = () => {
         />
       ))}
 
-      <ToastViewport id={viewportId} />
+      <ToastViewport id={viewportId} style={{bottom: bottomOffset}} />
     </ToastThemeProvider>
   );
 };

package/src/tooltip.tsx

@@ -4,6 +4,8 @@ import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
 import {ShortcutBadge} from "./shortcut-badge";
 
+const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
+
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
   e.stopPropagation();
@@ -114,6 +116,11 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> &
   visible?: boolean;
   onVisibleChange?: (visible: boolean) => void;
   disabled?: boolean;
+  /**
+   * When `false`, allows to hover the content without closing the tooltip.
+   * @defaultValue trues
+   */
+  disableHoverableContent?: boolean;
   /** should keep tooltip visible after click */
   keepOnClick?: boolean;
 };
@@ -152,6 +159,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       setContentElement,
       container,
       tooltipContentStyle,
+      disableHoverableContent,
       ...triggerProps
     },
     ref
@@ -169,11 +177,16 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         }
       : null;
 
+    if (isFlagPresent("no-tooltips")) {
+      return <>{children}</>;
+    }
+
     return (
       <TooltipPrimitive.Root
         delayDuration={instant ? 0 : tooltipDelay.enter}
         open={disabled ? false : Boolean(content) && visible}
         onOpenChange={onVisibleChange}
+        disableHoverableContent={disableHoverableContent}
       >
         <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
           {children}