@fibery/ui-kit 4.1.0 → 4.2.0

package/src/palettes/inspect.defs.colors.warm-user.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {test, expect} from "vitest";
 
 import {withColorDiff} from "./diff-colors";
@@ -426,6 +425,14 @@ test("snapshot", () => {
         "#D33E4B   | hsl( 355  63%  54%) | oklch(0.59 0.18  20 )",
         "#ED9696   | hsl(   0  71%  76%) | oklch(0.76 0.11  20 )",
       ],
+      "collectionViewBg": [
+        "#FFFBF4   | hsl(  38 100%  98%) | oklch(0.99 0.01  82 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
+      "collectionViewBorder": [
+        "0 0 0 1px       #E8E2DB99 | hsl(  32  22%  88% / 0.6 ) | oklch(0.92 0.01  72  / 0.6 )",
+        "0 0 0 1px       #56504E4D | hsl(  15   5%  32% / 0.3 ) | oklch(0.44 0.01  39  / 0.3 )",
+      ],
       "colorAI": [
         "#9B6FC1   | hsl( 272  40%  60%) | oklch(0.62 0.13 308 )",
         "#8056A3   | hsl( 273  31%  49%) | oklch(0.53 0.12 308 )",
@@ -654,6 +661,14 @@ test("snapshot", () => {
         "#FAF4EC   | hsl(  34  58%  95%) | oklch(0.97 0.01  75 )",
         "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
       ],
+      "colorBgCodeEditor": [
+        "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
+      ],
+      "colorBgCommentHover": [
+        "#FDF6EF   | hsl(  30  78%  96%) | oklch(0.98 0.01  68 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
       "colorBgDbTabFocus": [
         "#E8E2DB   | hsl(  32  22%  88%) | oklch(0.92 0.01  72 )",
         "#373230   | hsl(  17   7%  20%) | oklch(0.32 0.01  43 )",
@@ -722,6 +737,10 @@ test("snapshot", () => {
         "#1F1A1899 | hsl(  17  13%  11% / 0.6 ) | oklch(0.22 0.01  43  / 0.6 )",
         "#1F1A1899 | hsl(  17  13%  11% / 0.6 ) | oklch(0.22 0.01  43  / 0.6 )",
       ],
+      "colorBgFloatingPanel": [
+        "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
+        "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
+      ],
       "colorBgLaneSubtle": [
         "#1F1A180D | hsl(  17  13%  11% / 0.05) | oklch(0.22 0.01  43  / 0.05)",
         "#FFFDFA0D | hsl(  36 100%  99% / 0.05) | oklch(0.99 0     78  / 0.05)",
@@ -780,11 +799,11 @@ test("snapshot", () => {
       ],
       "colorBgMenuItemFocus": [
         "#E8E2DB   | hsl(  32  22%  88%) | oklch(0.92 0.01  72 )",
-        "#322D2B   | hsl(  17   8%  18%) | oklch(0.3  0.01  43 )",
+        "#373230   | hsl(  17   7%  20%) | oklch(0.32 0.01  43 )",
       ],
       "colorBgMenuItemHover": [
         "#EDE7E0   | hsl(  32  27%  90%) | oklch(0.93 0.01  72 )",
-        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+        "#322D2B   | hsl(  17   8%  18%) | oklch(0.3  0.01  43 )",
       ],
       "colorBgMenuItemSelected": [
         "#D5E9F0CC | hsl( 196  47%  89% / 0.8 ) | oklch(0.92 0.02 221  / 0.8 )",
@@ -816,15 +835,15 @@ test("snapshot", () => {
       ],
       "colorBgNotificationHover": [
         "#FAF4EC   | hsl(  34  58%  95%) | oklch(0.97 0.01  75 )",
-        "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
       ],
       "colorBgNotificationSelected": [
         "#EEF7F9   | hsl( 191  48%  95%) | oklch(0.97 0.01 213 )",
-        "#01333F   | hsl( 192  97%  13%) | oklch(0.3  0.05 219 )",
+        "#0D2026   | hsl( 194  49%  10%) | oklch(0.23 0.03 221 )",
       ],
       "colorBgNotificationSelectedHover": [
         "#E4F1F6   | hsl( 197  50%  93%) | oklch(0.95 0.02 223 )",
-        "#074453   | hsl( 192  84%  18%) | oklch(0.36 0.06 220 )",
+        "#082C36   | hsl( 193  74%  12%) | oklch(0.27 0.04 220 )",
       ],
       "colorBgObjectEditorSeparator": [
         "#1B1611   | hsl(  30  23%   9%) | oklch(0.2  0.01  67 )",
@@ -836,7 +855,7 @@ test("snapshot", () => {
       ],
       "colorBgPopup": [
         "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
-        "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
       ],
       "colorBgReactionsDefault": [
         "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
@@ -855,24 +874,28 @@ test("snapshot", () => {
         "#007E9F   | hsl( 192 100%  31%) | oklch(0.55 0.1  224 )",
       ],
       "colorBgRelationContainer": [
-        "#FDF6EF   | hsl(  30  78%  96%) | oklch(0.98 0.01  68 )",
-        "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
+        "#FFFBF4   | hsl(  38 100%  98%) | oklch(0.99 0.01  82 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
       ],
       "colorBgScrollFade": [
         "#FFFDFA26 | hsl(  36 100%  99% / 0.15) | oklch(0.99 0     78  / 0.15)",
         "#1F1A1826 | hsl(  17  13%  11% / 0.15) | oklch(0.22 0.01  43  / 0.15)",
       ],
+      "colorBgSearchPanel": [
+        "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
       "colorBgSearchRowCreateHover": [
         "#E4F1F6   | hsl( 197  50%  93%) | oklch(0.95 0.02 223 )",
         "#01333F   | hsl( 192  97%  13%) | oklch(0.3  0.05 219 )",
       ],
       "colorBgSearchRowHover": [
         "#F3ECE5   | hsl(  30  37%  93%) | oklch(0.95 0.01  68 )",
-        "#322D2B   | hsl(  17   8%  18%) | oklch(0.3  0.01  43 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
       ],
       "colorBgSegmentedControl": [
         "#EDE7E0CC | hsl(  32  27%  90% / 0.8 ) | oklch(0.93 0.01  72  / 0.8 )",
-        "#272321CC | hsl(  20   8%  14% / 0.8 ) | oklch(0.26 0.01  48  / 0.8 )",
+        "#201B19CC | hsl(  17  12%  11% / 0.8 ) | oklch(0.23 0.01  43  / 0.8 )",
       ],
       "colorBgSegmentedControlActive": [
         "#FFFBF4   | hsl(  38 100%  98%) | oklch(0.99 0.01  82 )",
@@ -910,6 +933,10 @@ test("snapshot", () => {
         "#FFFBF4   | hsl(  38 100%  98%) | oklch(0.99 0.01  82 )",
         "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
       ],
+      "colorBgViewMetaItem": [
+        "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
       "colorBgWhiteboard": [
         "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
         "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
@@ -1398,6 +1425,33 @@ test("snapshot", () => {
         "#2E6B7E   | hsl( 194  47%  34%) | oklch(0.5  0.07 221 )",
         "#2E6B7E   | hsl( 194  47%  34%) | oklch(0.5  0.07 221 )",
       ],
+      "dbSettingsCardBg": [
+        "#FDF6EF   | hsl(  30  78%  96%) | oklch(0.98 0.01  68 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
+      "dbSettingsCardBorder": [
+        "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
+        "0 0 0 1px       #37323099 | hsl(  17   7%  20% / 0.6 ) | oklch(0.32 0.01  43  / 0.6 )",
+      ],
+      "dbSettingsSidebarBg": [
+        "#FDF6EF   | hsl(  30  78%  96%) | oklch(0.98 0.01  68 )",
+        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+      ],
+      "dbSettingsSidebarIconBg": [
+        "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
+      ],
+      "dbSettingsSidebarIconBorder": [
+        [
+          "0 1px 4px 0     #635E571A | hsl(  35   6%  36% / 0.1 ) | oklch(0.48 0.01  77  / 0.1 )",
+          "0 0 0 0.5px     #EDE7E080 | hsl(  32  27%  90% / 0.5 ) | oklch(0.93 0.01  72  / 0.5 )",
+        ],
+        "0 0 0 1px       #756F6D33 | hsl(  15   4%  44% / 0.2 ) | oklch(0.55 0.01  39  / 0.2 )",
+      ],
+      "dbSettingsSidebarItemHover": [
+        "#F3ECE5   | hsl(  30  37%  93%) | oklch(0.95 0.01  68 )",
+        "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
+      ],
       "disabledInversedTextColor": [
         "#1F1A1840 | hsl(  17  13%  11% / 0.25) | oklch(0.22 0.01  43  / 0.25)",
         "#FFFDFA40 | hsl(  36 100%  99% / 0.25) | oklch(0.99 0     78  / 0.25)",
@@ -1680,15 +1734,15 @@ test("snapshot", () => {
       ],
       "inputBgColor": [
         "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
-        "#201B19   | hsl(  17  12%  11%) | oklch(0.23 0.01  43 )",
+        "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
       ],
       "inputBorderBlendMode": [
         "multiply",
         "lighten",
       ],
       "inputBorderColor": [
-        "0 0 0 1px       #E8E2DBB3 | hsl(  32  22%  88% / 0.7 ) | oklch(0.92 0.01  72  / 0.7 )",
-        "0 0 0 1px       #56504EB3 | hsl(  15   5%  32% / 0.7 ) | oklch(0.44 0.01  39  / 0.7 )",
+        "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
+        "0 0 0 1px       #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
       ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #CCC6BF   | hsl(  32  11%  77%) | oklch(0.83 0.01  72 )",
@@ -1696,7 +1750,7 @@ test("snapshot", () => {
       ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #E1DAD3   | hsl(  30  19%  85%) | oklch(0.89 0.01  68 )",
-        "0 0 0 1px       #56504E   | hsl(  15   5%  32%) | oklch(0.44 0.01  39 )",
+        "0 0 0 1px       #413C3A   | hsl(  17   6%  24%) | oklch(0.36 0.01  43 )",
       ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F7D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
@@ -1711,8 +1765,8 @@ test("snapshot", () => {
         "#3732304D | hsl(  17   7%  20% / 0.3 ) | oklch(0.32 0.01  43  / 0.3 )",
       ],
       "inputDisabledBorderColor": [
-        "0 0 0 1px       #E8E2DB33 | hsl(  32  22%  88% / 0.2 ) | oklch(0.92 0.01  72  / 0.2 )",
-        "0 0 0 1px       #56504E33 | hsl(  15   5%  32% / 0.2 ) | oklch(0.44 0.01  39  / 0.2 )",
+        "0 0 0 1px       #E8E2DB99 | hsl(  32  22%  88% / 0.6 ) | oklch(0.92 0.01  72  / 0.6 )",
+        "0 0 0 1px       #56504E4D | hsl(  15   5%  32% / 0.3 ) | oklch(0.44 0.01  39  / 0.3 )",
       ],
       "inputErrorBorderColor": [
         "0 0 0 1px       #AF2436   | hsl( 352  66%  41%) | oklch(0.5  0.17  20 )",
@@ -1772,7 +1826,7 @@ test("snapshot", () => {
       ],
       "mainBg": [
         "#FAF4EC   | hsl(  34  58%  95%) | oklch(0.97 0.01  75 )",
-        "#2D2623   | hsl(  18  13%  16%) | oklch(0.28 0.01  45 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
       ],
       "mentionBgColor": [
         "#E1DAD34D | hsl(  30  19%  85% / 0.3 ) | oklch(0.89 0.01  68  / 0.3 )",
@@ -1780,7 +1834,7 @@ test("snapshot", () => {
       ],
       "menuBg": [
         "#FAF4EC   | hsl(  34  58%  95%) | oklch(0.97 0.01  75 )",
-        "#2D2623   | hsl(  18  13%  16%) | oklch(0.28 0.01  45 )",
+        "#272321   | hsl(  20   8%  14%) | oklch(0.26 0.01  48 )",
       ],
       "menuIconColor": [
         "#1B1611B3 | hsl(  30  23%   9% / 0.7 ) | oklch(0.2  0.01  67  / 0.7 )",
@@ -1914,6 +1968,10 @@ test("snapshot", () => {
         "#FFFDFA   | hsl(  36 100%  99%) | oklch(0.99 0     78 )",
         "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
       ],
+      "panelBorder": [
+        "0 0 0 1px       #CCC6BF33 | hsl(  32  11%  77% / 0.2 ) | oklch(0.83 0.01  72  / 0.2 )",
+        "0 0 0 1px       #56504E33 | hsl(  15   5%  32% / 0.2 ) | oklch(0.44 0.01  39  / 0.2 )",
+      ],
       "panelContentBg": [
         "#FDF6EF   | hsl(  30  78%  96%) | oklch(0.98 0.01  68 )",
         "#1A1614   | hsl(  20  13%   9%) | oklch(0.2  0.01  48 )",
@@ -2056,27 +2114,27 @@ test("snapshot", () => {
       ],
       "shadowCardDefault": [
         [
-          "0 0 0 1px       #E8E2DBB3 | hsl(  32  22%  88% / 0.7 ) | oklch(0.92 0.01  72  / 0.7 )",
+          "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
           "0 1px 4px 0     #1B16110D | hsl(  30  23%   9% / 0.05) | oklch(0.2  0.01  67  / 0.05)",
         ],
         [
-          "0 0 0 1px       #56504EB3 | hsl(  15   5%  32% / 0.7 ) | oklch(0.44 0.01  39  / 0.7 )",
+          "0 0 0 1px       #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
           "0 1px 4px 0     #1B16111A | hsl(  30  23%   9% / 0.1 ) | oklch(0.2  0.01  67  / 0.1 )",
         ],
       ],
       "shadowCardHover": [
         [
-          "0 0 0 1px       #E8E2DBB3 | hsl(  32  22%  88% / 0.7 ) | oklch(0.92 0.01  72  / 0.7 )",
+          "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
           "0 2px 6px 0     #1B16110D | hsl(  30  23%   9% / 0.05) | oklch(0.2  0.01  67  / 0.05)",
         ],
         [
-          "0 0 0 1px       #56504EB3 | hsl(  15   5%  32% / 0.7 ) | oklch(0.44 0.01  39  / 0.7 )",
+          "0 0 0 1px       #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
           "0 2px 6px 0     #1B16111A | hsl(  30  23%   9% / 0.1 ) | oklch(0.2  0.01  67  / 0.1 )",
         ],
       ],
       "shadowCardInset": [
-        "inset 0 0 0 1px #E8E2DBB3 | hsl(  32  22%  88% / 0.7 ) | oklch(0.92 0.01  72  / 0.7 )",
-        "inset 0 0 0 1px #56504EB3 | hsl(  15   5%  32% / 0.7 ) | oklch(0.44 0.01  39  / 0.7 )",
+        "inset 0 0 0 1px #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
+        "inset 0 0 0 1px #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
       ],
       "shadowEntityBoxDefault": [
         "0 2px 4px 0     #1B16110D | hsl(  30  23%   9% / 0.05) | oklch(0.2  0.01  67  / 0.05)",
@@ -2090,6 +2148,16 @@ test("snapshot", () => {
         "0 4px 8px 0     #1B16111A | hsl(  30  23%   9% / 0.1 ) | oklch(0.2  0.01  67  / 0.1 )",
         "0 4px 8px 0     #1A16141A | hsl(  20  13%   9% / 0.1 ) | oklch(0.2  0.01  48  / 0.1 )",
       ],
+      "shadowFloatingPanel": [
+        [
+          "0 0 0 1px       #7D777026 | hsl(  32   5%  46% / 0.15) | oklch(0.57 0.01  72  / 0.15)",
+          "0 3px 12px 0    #635E5726 | hsl(  35   6%  36% / 0.15) | oklch(0.48 0.01  77  / 0.15)",
+        ],
+        [
+          "0 0 0 1px       #373230   | hsl(  17   7%  20%) | oklch(0.32 0.01  43 )",
+          "0 3px 12px 0    #1A161480 | hsl(  20  13%   9% / 0.5 ) | oklch(0.2  0.01  48  / 0.5 )",
+        ],
+      ],
       "shadowMenuHeaderAvatar": [
         [
           "0 1px 4px 0     #635E571A | hsl(  35   6%  36% / 0.1 ) | oklch(0.48 0.01  77  / 0.1 )",
@@ -2193,7 +2261,7 @@ test("snapshot", () => {
       ],
       "surfaceElevationS": [
         "0 2px 4px 0     #0000000D | hsl(none   0%   0% / 0.05) | oklch(0    0    none / 0.05)",
-        "0 2px 4px 0     #FFFFFE08 | hsl(  60 100% 100% / 0.03) | oklch(1    0    106  / 0.03)",
+        "0 2px 4px 0     #1A16140D | hsl(  20  13%   9% / 0.05) | oklch(0.2  0.01  48  / 0.05)",
       ],
       "swatchDefault": [
         "#1FBED3   | hsl( 187  74%  47%) | oklch(0.74 0.12 209 )",

package/src/palettes/show-colors.test.ts

@@ -3,6 +3,7 @@
 // @ts-ignore node out of frontend scope, mixed types/node-present and absent usages
 import {inspect} from "node:util";
 
+import {isRecord} from "@fibery/helpers/src/_";
 import {test} from "vitest";
 
 import {backgrounds, type ColorDef, darkFromLight, sections, stickers} from "../canvas-colors";
@@ -55,7 +56,7 @@ function walk(buckets: Buckets, path: string, value: unknown) {
     });
     return;
   }
-  if (value && typeof value === "object") {
+  if (isRecord(value)) {
     for (const [k, v] of Object.entries(value)) {
       walk(buckets, `${path}.${k}`, v);
     }

package/src/palettes/testkit.ts

@@ -1,3 +1,5 @@
+import {isRecord} from "@fibery/helpers/src/_";
+
 import {calcLc} from "../apca";
 import {backgrounds, type ColorDef, sections, stickers} from "../canvas-colors";
 import {inspectColor, type Opts} from "../color-inspect";
@@ -96,7 +98,7 @@ export function deepMapColors<T>(value: T, opts?: Opts): T {
     return value.map((v) => deepMapColors(v, opts)) as T;
   }
 
-  if (typeof value === "object" && value !== null) {
+  if (isRecord(value)) {
     const entries = Object.entries(value);
     const keyFrom = makeKeyFrom(entries);
     return Object.fromEntries(entries.map(([k, v]) => [keyFrom(k), deepMapColors(v, opts)])) as T;

package/src/popover/index.tsx

@@ -1,7 +1,6 @@
 import {truthy} from "@fibery/helpers/src/_";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {createContext} from "@fibery/react/src/create-context";
-// oxlint-disable max-lines
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {composeRefs, useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
@@ -23,8 +22,10 @@ import {
   useEffect,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 import {createPortal} from "react-dom";
 import {usePopper} from "react-popper";
@@ -74,7 +75,7 @@ type PopoverRootProps = {
   onClose?: (event: Event) => unknown;
 };
 
-const Root = (props: PopoverRootProps) => {
+const PopoverRoot = (props: PopoverRootProps) => {
   const {children, open, disabled = false, onOpenChange, onOpen, onClose, ...rest} = props;
   const contentId = useId();
 
@@ -135,7 +136,7 @@ const Root = (props: PopoverRootProps) => {
   return <PopoverProvider value={contextValue}>{children}</PopoverProvider>;
 };
 
-const Backdrop = ({className}: {className?: string}) => {
+const PopoverBackdrop = ({className}: {className?: string}) => {
   return (
     <div
       id={"popup-backdrop"}
@@ -153,14 +154,22 @@ const Backdrop = ({className}: {className?: string}) => {
 };
 
 type PopoverPortalProps = {
-  getPopupContainer?: () => HTMLElement;
+  /** Portal target element. Defaults to document.body, same as Radix Portal. */
+  container?: HTMLElement;
   children: ReactNode;
 };
 
-const Portal = ({getPopupContainer, children}: PopoverPortalProps) => {
+const PopoverPortal = ({container: containerProp, children}: PopoverPortalProps) => {
   const popupModifiers = usePopupModifiers();
-  const getPopupContainerResult = getPopupContainer ?? popupModifiers.getPopupContainer;
-  return createPortal(children, getPopupContainerResult());
+  // Render nothing until mounted so that importing/rendering the popover never
+  // touches the DOM during SSR or hydration (same trick as Radix Portal).
+  const [mounted, setMounted] = useState(false);
+  useLayoutEffect(() => setMounted(true), []);
+
+  const container =
+    containerProp ?? (mounted ? (popupModifiers.getPopupContainer?.() ?? globalThis?.document?.body) : null);
+
+  return container ? createPortal(children, container) : null;
 };
 
 type PopoverTriggerProps = {
@@ -171,7 +180,7 @@ type PopoverTriggerProps = {
   triggerEvent?: "mousedown" | "click";
 } & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = forwardRef<HTMLDivElement, PopoverTriggerProps>((props, ref) => {
+const PopoverTrigger = forwardRef<HTMLDivElement, PopoverTriggerProps>((props, ref) => {
   const {asChild = false, reference, children, triggerEvent = "mousedown", onMouseDown, onClick, ...rest} = props;
   const {contentId, setTriggerElement, disabled, open, onOpen, onClose} = usePopoverContext();
 
@@ -275,7 +284,7 @@ type PopoverContentProps = {
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
-const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
+const PopoverContent = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
   const {
     children,
     placement,
@@ -466,7 +475,7 @@ const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
 
   return (
     <ThemeProvider portal>
-      {renderBackdrop && <Backdrop className={backdropClassName} />}
+      {renderBackdrop && <PopoverBackdrop className={backdropClassName} />}
       <FocusScope
         asChild
         loop
@@ -511,7 +520,7 @@ const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
   );
 });
 
-const Popover = {Root, Trigger, Portal, Content};
+const Popover = {Root: PopoverRoot, Trigger: PopoverTrigger, Portal: PopoverPortal, Content: PopoverContent};
 
 export {createPopper, Popover};
 

package/src/popover/popup-modifiers-context.ts

@@ -1,7 +1,6 @@
 import {createContext} from "@fibery/react/src/create-context";
 import type {Modifier} from "react-popper";
 
-import {getPopupContainerElement} from "../dom-utils";
 import type {$TSFixMe} from "../tsfixme";
 import type {PopoverContentProps} from "./index";
 
@@ -10,4 +9,4 @@ export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
   preventOverflowOptions?: PopoverContentProps["preventOverflowOptions"];
   flipOptions?: PopoverContentProps["flipOptions"];
-}>("PopupModifiersProvider", {getPopupContainer: getPopupContainerElement});
+}>("PopupModifiersProvider", {getPopupContainer: () => document.body});

package/src/select/components/option.tsx

@@ -99,7 +99,6 @@ export function Option<Option, IsMulti extends boolean = false, Group extends Gr
    * This makes this option component fast.
    * Excluding onMouseOver, onMouseMove makes ReactSelect not rerender the whole list on option hover
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {onMouseOver, onMouseMove, ...truncatedInnerProps} = rest.innerProps;
   const props = Object.assign(rest, {innerProps: truncatedInnerProps});
   return <OptionSlow {...props}>{children}</OptionSlow>;

package/src/select/index.tsx

@@ -17,6 +17,7 @@ export type {
   ControlProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,

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

@@ -71,7 +71,6 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   selectStyles?: StylesConfig<T, U, V>;
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
-  getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   otherSelectProps?: Record<string, unknown>;
   popoverPlacement?: Placement;
@@ -117,7 +116,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     onChange,
     onMenuOpen,
     onMenuClose,
-    getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
     popoverPlacement = "bottom-start",
@@ -199,7 +197,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
         {trigger}
       </Popover.Trigger>
-      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+      <Wrap with={Popover.Portal} if={renderInPortal}>
         <Popover.Content
           supportMobile
           title={title}

package/src/select/select.tsx

@@ -10,6 +10,7 @@ import type {
   MenuProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
@@ -44,6 +45,7 @@ export type {
   ControlProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,

package/src/thematic.tsx

@@ -1,4 +1,3 @@
-// oxlint-disable max-lines
 import {css} from "@linaria/core";
 import {useState} from "react";
 import {createPortal} from "react-dom";

package/src/theme-provider.test.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, no-console */
+/* eslint-disable no-console */
 import {render, screen} from "@testing-library/react";
 
 import {stylesFromTheme, themeFromPalette, themeVars} from "./design-system";