@fibery/ui-kit 1.34.7 → 1.34.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.7",
+  "version": "1.34.8",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -113,8 +113,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/design-system.ts

@@ -165,6 +165,30 @@ export const themeColors = {
       getOpacities(slate.slate12).opacity15
     }`,
   ],
+  shadow400: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${getOpacities(slate.slate12).opacity15}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
+  ],
+  shadow500: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${getOpacities(slate.slate12).opacity15}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
+  ],
+  shadow600: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${getOpacities(slate.slate12).opacity20}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
+      getOpacities(slate.slate12).opacity20
+    }`,
+  ],
   actionMenuShadow: [
     `0px 0px 2px 0px ${getOpacities(slate.slate11).opacity30}, 0px 4px 6px 0px ${
       getOpacities(slate.slate11).opacity5
@@ -553,6 +577,12 @@ export const themeColors = {
   gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
   gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
 
+  //timeline
+  timelineEntityHandleColor: [indigo.indigo7, indigoDark.indigo7],
+  timelineDependencyHoverBgColor: [indigo.indigo8, indigoDark.indigo8],
+  timelineDependencyOverlapBgColor: [red.red9, redDark.red9],
+  timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
+
   // #region buttons
   // solid
   colorBgButtonSolidAccentDefault: [indigo.indigo9, indigoDark.indigo9],
@@ -657,9 +687,9 @@ export const themeColors = {
   //Whiteboard
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
   instrumentsMenuShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 12px -2px ${getOpacities(slate.slate10).opacity15}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 12px -6px ${
-      getOpacities(slateDark.slate1).opacity15
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 10px 16px -8px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 10px 16px -8px ${
+      getOpacities(slateDark.slate1).opacity30
     }`,
   ],
   commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
@@ -669,6 +699,9 @@ export const themeColors = {
   colorBgSegmentedControlActive: [slate.slate1, slateDark.slate6],
   colorBgSegmentedControlHover: [slate.slate5, slateDark.slate4],
   colorBorderSegmentedControlDefault: [slate.slate6, slateDark.slate7],
+
+  // Chargebee info
+  colorBgChargebeeInfoBox: [slate.slate3, slateDark.slate1],
 } as const;
 
 type ThemeDefs = typeof themeColors;

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -23,7 +23,7 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   const themeMode = useThemeMode();
   const iconColor = color ? getIconColor(themeMode, color) : undefined;
 
-  const Icon = opened ? ColorCodingFilled : ColorCoding;
+  const Icon = opened ? ColorCoding : ColorCodingFilled;
 
   const label = opened ? "Hide color picker" : "Show color picker";
 

package/src/icons/ast/CollapseAll.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const CollapseAll: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M7 3.5a.8.8 0 1 0-1.131 1.131l3.565 3.335a.8.8 0 0 0 1.132 0L14.13 4.63A.8.8 0 0 0 13 3.5l-3 2.769L7 3.5Zm6 13.237a.8.8 0 1 0 1.131-1.131l-3.565-3.572a.8.8 0 0 0-1.132 0L5.87 15.606A.8.8 0 1 0 7 16.737l3-3.006 3 3.006Z"},"children":[]}],"metadata":""}]},"name":"collapse-all"};
+
+export default CollapseAll;

package/src/icons/ast/DatabaseOff.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const DatabaseOff: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m5.198 4.138 5.353 5.353c1.4-.048 2.66-.282 3.614-.742.353-.17.663-.37.924-.603.463-.414.911-1.097.911-1.745C16 3.97 13.314 3 10 3c-1.964 0-3.707.352-4.802 1.138Zm6.76 6.758 1.74 1.742c.176-.066.344-.137.503-.216.358-.176.672-.384.934-.627.263-.244.706-.72.79-1.082a3.081 3.081 0 0 0 .051-1.052 2.735 2.735 0 0 0-.075-.383 4.934 4.934 0 0 1-1.41.941c-.747.34-1.612.557-2.534.677Zm2.765 2.766 1.053 1.054c.146-.332.224-.703.224-1.117a2.763 2.763 0 0 0-.1-.766 4.78 4.78 0 0 1-1.177.83Zm2.162 2.162.895.896a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 1.06-1.06l.849.848a5.58 5.58 0 0 1 .95-.605C6.462 1.762 8.23 1.5 10 1.5c1.764 0 3.532.253 4.917.95 1.46.735 2.583 2.036 2.583 3.95v7.2c0 .865-.23 1.605-.615 2.224ZM2.5 6.4c0-.328.384-.456.616-.224L6.11 9.17c.534.535.085 1.353-.601 1.038a4.973 4.973 0 0 1-1.405-.939 2.676 2.676 0 0 0-.078.38 2.993 2.993 0 0 0 .048 1.053c.085.362.531.84.795 1.083.26.242.574.45.93.626 1.23.609 2.662.77 4.026.78a.744.744 0 0 1 .521.216l.076.076c.407.407.154 1.088-.422 1.088-1.64 0-3.235-.231-4.491-.808a4.978 4.978 0 0 1-1.405-.939A2.703 2.703 0 0 0 4 13.6c0 .454.096.857.274 1.213C5.038 16.341 7.312 17 10 17c1.093 0 2.117-.106 3-.334a.845.845 0 0 1 .812.207c.393.392.265 1.05-.27 1.2-1.097.306-2.32.427-3.542.427-1.77 0-3.538-.262-4.92-.963-1.453-.736-2.58-2.034-2.58-3.938V6.401Z"},"children":[]}],"metadata":""}]},"name":"database-off"};
+
+export default DatabaseOff;

package/src/icons/ast/Dependency.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Dependency: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M9 3.75A.75.75 0 0 1 9.75 3h7.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-7.5A.75.75 0 0 1 9 5.25v-1.5Zm-7 11a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-1.5ZM14.75 8V7h-1.5v1c0 .69-.56 1.25-1.25 1.25H8A2.75 2.75 0 0 0 5.25 12v1h1.5v-1c0-.69.56-1.25 1.25-1.25h4A2.75 2.75 0 0 0 14.75 8Z"},"children":[]}],"metadata":""}]},"name":"dependency"};
+
+export default Dependency;

package/src/icons/ast/ManyPeople.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ManyPeople: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.25 2a1.583 1.583 0 1 0 0 3.167A1.583 1.583 0 0 0 5.25 2ZM3.478 8.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 0 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 0 0 1.456.362ZM14.75 2a1.583 1.583 0 1 0 0 3.167 1.583 1.583 0 0 0 0-3.167Zm-1.772 6.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 0 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 0 0 1.456.362Zm.189 2.82a1.583 1.583 0 1 1 3.167 0 1.583 1.583 0 0 1-3.167 0Zm1.583 4.083c-.982 0-1.64.563-1.772 1.097a.75.75 0 1 1-1.456-.362c.34-1.367 1.742-2.235 3.228-2.235 1.486 0 2.888.868 3.228 2.235a.75.75 0 1 1-1.456.362c-.132-.534-.79-1.097-1.772-1.097ZM5.25 10a1.583 1.583 0 1 0 0 3.167 1.583 1.583 0 0 0 0-3.167Zm-1.772 6.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 1 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 1 0 1.456.362Z"},"children":[]}],"metadata":""}]},"name":"many-people"};
+
+export default ManyPeople;

package/src/icons/ast/SendArrow.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SendArrow: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10 3.85c.307 0 .6.123.816.34l4.25 4.286a1.15 1.15 0 1 1-1.633 1.62L11.15 7.793V15a1.15 1.15 0 0 1-2.3 0V7.793l-2.283 2.303a1.15 1.15 0 1 1-1.634-1.62l4.25-4.286c.216-.217.51-.34.817-.34Z"},"children":[]}],"metadata":""}]},"name":"send-arrow"};
+const SendArrow: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.707 3.293a1 1 0 0 0-1.415 0L4.57 8.015A1 1 0 1 0 5.984 9.43l3.014-3.013V16a1 1 0 1 0 2 0V6.413l3.017 3.016a1 1 0 1 0 1.414-1.414l-4.722-4.722Z"},"children":[]}],"metadata":""}]},"name":"send-arrow"};
 
 export default SendArrow;

package/src/icons/ast/ViewAi.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ViewAi: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4v-2a4 4 0 0 1 4-4h2V6a2 2 0 0 0-2-2H6Zm2.186 2.224c.101-.296.52-.3.626-.006l.485 1.349c.028.077.09.137.17.162l1.302.412a.33.33 0 0 1 .005.627l-1.307.438a.264.264 0 0 0-.166.163l-.488 1.409a.332.332 0 0 1-.628-.005l-.46-1.4a.264.264 0 0 0-.168-.168l-1.33-.437a.33.33 0 0 1 .006-.628l1.325-.41a.264.264 0 0 0 .172-.167l.456-1.34Zm6.438 6.044a.398.398 0 0 1 .75-.006l.582 1.618a.318.318 0 0 0 .203.195l1.564.494c.366.116.37.63.006.752l-1.568.526a.317.317 0 0 0-.2.196l-.586 1.69a.398.398 0 0 1-.753-.006l-.552-1.679a.318.318 0 0 0-.202-.202l-1.595-.524a.395.395 0 0 1 .006-.754l1.59-.492a.317.317 0 0 0 .207-.201l.548-1.607Z"},"children":[]}],"metadata":""}]},"name":"view-ai"};
+
+export default ViewAi;

package/src/icons/ast/index.tsx

@@ -64,6 +64,7 @@ export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
 export { default as Clock } from './Clock';
 export { default as Close } from './Close';
+export { default as CollapseAll } from './CollapseAll';
 export { default as ColorCodingFilled } from './ColorCodingFilled';
 export { default as ColorCoding } from './ColorCoding';
 export { default as Columns2 } from './Columns2';
@@ -72,10 +73,12 @@ export { default as Columns } from './Columns';
 export { default as CommentBubble } from './CommentBubble';
 export { default as Copy } from './Copy';
 export { default as Create } from './Create';
+export { default as DatabaseOff } from './DatabaseOff';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
+export { default as Dependency } from './Dependency';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
@@ -155,6 +158,7 @@ export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
 export { default as LoupeZoomOut } from './LoupeZoomOut';
 export { default as LoupeZoom } from './LoupeZoom';
+export { default as ManyPeople } from './ManyPeople';
 export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
@@ -319,6 +323,7 @@ export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
+export { default as ViewAi } from './ViewAi';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

package/src/icons/react/CollapseAll.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import CollapseAllSvg from '../ast/CollapseAll';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const CollapseAll = forwardRef<SVGSVGElement, IconBaseProps>(function CollapseAll(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CollapseAllSvg} />});
+
+export default CollapseAll;

package/src/icons/react/DatabaseOff.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DatabaseOffSvg from '../ast/DatabaseOff';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const DatabaseOff = forwardRef<SVGSVGElement, IconBaseProps>(function DatabaseOff(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DatabaseOffSvg} />});
+
+export default DatabaseOff;

package/src/icons/react/Dependency.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import DependencySvg from '../ast/Dependency';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Dependency = forwardRef<SVGSVGElement, IconBaseProps>(function Dependency(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={DependencySvg} />});
+
+export default Dependency;

package/src/icons/react/ManyPeople.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ManyPeopleSvg from '../ast/ManyPeople';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ManyPeople = forwardRef<SVGSVGElement, IconBaseProps>(function ManyPeople(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ManyPeopleSvg} />});
+
+export default ManyPeople;

package/src/icons/react/ViewAi.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ViewAiSvg from '../ast/ViewAi';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ViewAi = forwardRef<SVGSVGElement, IconBaseProps>(function ViewAi(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewAiSvg} />});
+
+export default ViewAi;

package/src/icons/react/index.tsx

@@ -64,6 +64,7 @@ export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
 export { default as Clock } from './Clock';
 export { default as Close } from './Close';
+export { default as CollapseAll } from './CollapseAll';
 export { default as ColorCodingFilled } from './ColorCodingFilled';
 export { default as ColorCoding } from './ColorCoding';
 export { default as Columns2 } from './Columns2';
@@ -72,10 +73,12 @@ export { default as Columns } from './Columns';
 export { default as CommentBubble } from './CommentBubble';
 export { default as Copy } from './Copy';
 export { default as Create } from './Create';
+export { default as DatabaseOff } from './DatabaseOff';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
+export { default as Dependency } from './Dependency';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
 export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
@@ -155,6 +158,7 @@ export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
 export { default as LoupeZoomOut } from './LoupeZoomOut';
 export { default as LoupeZoom } from './LoupeZoom';
+export { default as ManyPeople } from './ManyPeople';
 export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
@@ -319,6 +323,7 @@ export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
+export { default as ViewAi } from './ViewAi';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

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

@@ -56,6 +56,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/select-in-popover.tsx

@@ -169,7 +169,7 @@ 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>;
@@ -183,6 +183,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  otherSelectProps?: Record<string, unknown>;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -219,6 +220,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     onMenuClose,
     getPopupContainer,
     onSelectKeyDown,
+    otherSelectProps,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -280,6 +282,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 +293,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 +391,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,6 +415,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               isClearable={!isCollectionMode && isClearable}
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
+              {...otherSelectProps}
               components={{
                 DropdownIndicator: null,
                 IndicatorSeparator: null,

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;
     },
+    addButtomOffset: (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

@@ -114,6 +114,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 +157,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       setContentElement,
       container,
       tooltipContentStyle,
+      disableHoverableContent,
       ...triggerProps
     },
     ref
@@ -174,6 +180,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         delayDuration={instant ? 0 : tooltipDelay.enter}
         open={disabled ? false : Boolean(content) && visible}
         onOpenChange={onVisibleChange}
+        disableHoverableContent={disableHoverableContent}
       >
         <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
           {children}