@fibery/ui-kit 4.1.0 → 4.3.0

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

@@ -3,9 +3,10 @@
 // @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";
+import {backgrounds, darkFromLight, sections, stickers} from "../canvas-colors";
 import {defsFromPalette} from "../design-system/colors";
 import {Swatch, swatches} from "../design-system/colors-swatches";
 import type {ThemePalette} from "../design-system/types";
@@ -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);
     }
@@ -72,9 +73,9 @@ function buildRows(input: Input) {
   return rows.map((r) => ({path: r.path.padStart(width, " "), color: r.color}));
 }
 
-function reflectCanvas(defs: ColorDef[], role: "bg" | "sticker" | "section", prefix: string) {
+function reflectCanvas(defs: readonly string[], role: "bg" | "sticker" | "section", prefix: string) {
   const result: Record<string, Array<readonly [string, string]>> = {};
-  result[prefix] = defs.map((pair) => [pair[0], darkFromLight(pair[0], role)] as const);
+  result[prefix] = defs.map((light) => [light, darkFromLight(light, role)] as const);
   return deepMapColors(result);
 }
 

package/src/palettes/testkit.test.ts

@@ -88,6 +88,12 @@ describe("deepMapColors", () => {
         `"1px solid       #FF0000   | hsl(   0 100%  50%) | oklch(0.63 0.26  29 )"`
       );
     });
+
+    test("keeps informational suffixes on the color line", () => {
+      expect(deepMapColors("#ff0000 | Lc+72.0 over #abcdef panelBg")).toMatchInlineSnapshot(
+        `"#FF0000   | hsl(   0 100%  50%) | oklch(0.63 0.26  29 ) | Lc+72.0 over #abcdef panelBg"`
+      );
+    });
   });
 
   describe("comma-separated color strings", () => {

package/src/palettes/testkit.ts

@@ -1,14 +1,25 @@
+import {isRecord} from "@fibery/helpers/src/_";
+
 import {calcLc} from "../apca";
-import {backgrounds, type ColorDef, sections, stickers} from "../canvas-colors";
+import {avatarSwatches} from "../avatar-colors";
+import {backgrounds, type CanvasColorRole, darkFromLight, sections, stickers} from "../canvas-colors";
 import {inspectColor, type Opts} from "../color-inspect";
-import {colorFromUnsafe, cssFromColor, flattenAlpha, isValidColor, mixSrgb, produceColor} from "../color-utils";
+import {
+  colorFromUnsafe,
+  cssFromColor,
+  flattenAlpha,
+  isValidColor,
+  mixSrgb,
+  produceColor,
+  serializeHexVariadic,
+} from "../color-utils";
 import {defsFromPalette} from "../design-system/colors";
 import {enumFgCustomColorPercent, enumFgTextColorPercent} from "../design-system/colors-css";
 import {Swatch, swatches} from "../design-system/colors-swatches";
 import {mapDef} from "../design-system/def";
-import type {Theme} from "../design-system/theme.ts";
+import type {Theme} from "../design-system/theme";
 import type {ThemePalette} from "../design-system/types";
-import {withColorDiff} from "./diff-colors";
+import {renderLc, withColorDiff} from "./diff-colors";
 
 const COLOR_PREFIXES = ["rgba(", "rgb(", "hsla(", "hsl("] as const;
 const HEX_CHARS = "0123456789abcdefABCDEF";
@@ -17,16 +28,25 @@ function sealBuf(str: string) {
   return str.padEnd("0 8px 20px -4px ".length, " ");
 }
 
+function isInformationalSuffix(str: string) {
+  return /^ \| .+$/.test(str.trimEnd());
+}
+
 function replaceColorsInString(str: string, opts?: Opts) {
   const result: string[] = [];
   let buf = "";
   const seenColors = new Set<string>();
-  function add(verbose: string) {
+  function add(verbose: string, alignEmptyPrefix = true) {
     const seen = seenColors.has(verbose);
     seenColors.add(verbose);
-    result.push(sealBuf(buf) + verbose + (seen ? "(SAME!)" : ""));
+    const prefix = alignEmptyPrefix || buf || result.length > 0 ? sealBuf(buf) : "";
+    result.push(prefix + verbose + (seen ? "(SAME!)" : ""));
     buf = "";
   }
+  function addInformationalSuffix(from: number) {
+    result[result.length - 1] += str.slice(from);
+    return result.length === 1 ? result[0] : result;
+  }
 
   let i = 0;
   while (i < str.length) {
@@ -37,8 +57,12 @@ function replaceColorsInString(str: string, opts?: Opts) {
       if (closeIdx !== -1) {
         const candidate = str.slice(i, closeIdx + 1);
         if (isValidColor(candidate)) {
-          add(inspectColor(candidate, opts));
           i = closeIdx + 1;
+          if (str.startsWith(" | ", i)) {
+            add(inspectColor(candidate, opts), false);
+            return addInformationalSuffix(i);
+          }
+          add(inspectColor(candidate, opts));
           continue;
         }
       }
@@ -50,8 +74,12 @@ function replaceColorsInString(str: string, opts?: Opts) {
       }
       const candidate = str.slice(i, end);
       if (candidate.length >= 4 && isValidColor(candidate)) {
-        add(inspectColor(candidate, opts));
         i = end;
+        if (str.startsWith(" | ", i)) {
+          add(inspectColor(candidate, opts), false);
+          return addInformationalSuffix(i);
+        }
+        add(inspectColor(candidate, opts));
         continue;
       }
     }
@@ -70,6 +98,10 @@ function replaceColorsInString(str: string, opts?: Opts) {
     if (result.length === 0) {
       return buf;
     }
+    if (isInformationalSuffix(buf)) {
+      result[result.length - 1] += buf;
+      return result.length === 1 ? result[0] : result;
+    }
     result.push(sealBuf(buf));
   }
   return result.length === 1 ? result[0] : result;
@@ -96,7 +128,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;
@@ -135,6 +167,23 @@ export function userColorChoices<
   );
 }
 
+export function avatarColorChoices<
+  T extends
+    | string
+    | Readonly<Record<string, string>>
+    | readonly string[]
+    | ReadonlyArray<readonly [string, string] | Readonly<Record<string, string>>>,
+>(fn: (color: string) => T) {
+  const swatchKey = makeSwatchKey();
+  const globalIndex = new Map(swatches.map((c, i) => [c, i] as const));
+  return withColorDiff(
+    Object.fromEntries([
+      ...avatarSwatches.map((c) => [swatchKey(c, globalIndex.get(c) ?? -1), deepMapColors(fn(c))] as const),
+      ["neutral aka Swatch.Grey (no-access)", deepMapColors(fn(Swatch.Grey))] as const,
+    ])
+  );
+}
+
 export function makeSwatchKey() {
   const swatchNameByValue = new Map<string, string>(Object.entries(Swatch).map(([k, v]) => [v, k]));
   const nameWidth = Math.max(...swatches.map((x) => (swatchNameByValue.get(x) ?? "").length));
@@ -154,11 +203,12 @@ export function colors(palette: ThemePalette) {
     return `${prefix}[${String(i).padStart(width, " ")}]`;
   }
 
-  function pairs(colors: ColorDef[], prefix: string) {
+  function pairs(colors: readonly string[], prefix: string, role: CanvasColorRole) {
     const width = indexWidth(colors.length);
     return Object.fromEntries(
-      colors.map((pair, i) => {
-        return [key(prefix, i, width), mapDef(pair, defs.fns.deneutralize)];
+      colors.map((light, i) => {
+        const def: [string, string] = [light, darkFromLight(light, role)];
+        return [key(prefix, i, width), mapDef(def, defs.fns.deneutralize)];
       })
     );
   }
@@ -175,9 +225,9 @@ export function colors(palette: ThemePalette) {
         return [swatchKey(x, i), lightColor];
       })
     ),
-    ...pairs(stickers, "_.canvas.stickers"),
-    ...pairs(sections, "_.canvas.sections"),
-    ...pairs(backgrounds, "_.canvas.backgrounds"),
+    ...pairs(stickers, "_.canvas.stickers", "sticker"),
+    ...pairs(sections, "_.canvas.sections", "section"),
+    ...pairs(backgrounds, "_.canvas.backgrounds", "bg"),
   };
   return deepMapColors(colors);
 }
@@ -195,17 +245,25 @@ const getEnumTextColor = (theme: Theme, c: string) =>
     enumFgTextColorPercent / (enumFgCustomColorPercent + enumFgTextColorPercent)
   );
 
-function Lc(fg: string, bg: string) {
-  return Math.round(calcLc(fg, bg));
+type LcReference = {
+  color: string;
+  label?: string;
+};
+
+function renderReference({color, label}: LcReference) {
+  return [serializeHexVariadic(color) ?? color, label].filter(Boolean).join(" ");
 }
 
-function enumTest(cardSurface: string, cardColorCoding: string | null, theme: Theme, c: string) {
+function withLc(fg: string, bg: LcReference) {
+  return `${fg} | ${renderLc(calcLc(fg, bg.color))} over ${renderReference(bg)}`;
+}
+function enumTest(cardSurface: LcReference, cardColorCoding: string | null, theme: Theme, c: string) {
   const enumBg = theme.fns.enum(c, cardColorCoding).bg;
   const enumFg = getEnumTextColor(theme, c);
 
   return {
-    bg: `Lc=${Lc(enumBg, cardSurface)}; ${enumBg}`,
-    fg: `Lc=${Lc(enumFg, enumBg)}; ${enumFg}`,
+    bg: withLc(enumBg, cardSurface),
+    fg: withLc(enumFg, {color: enumBg, label: "bg"}),
   };
 }
 
@@ -220,8 +278,8 @@ export function enumBgCases(theme: Theme) {
     );
 
   return {
-    overDefaultSurface: (c: string) => enumTest(adaptDefaultSurface, null, theme, c),
-    overColorCoding: (c: string) => enumTest(paintedSurface(c), c, theme, c),
-    overSameColor: (c: string) => enumTest(c, c, theme, c),
+    overDefaultSurface: (c: string) => enumTest({color: adaptDefaultSurface, label: "panelBg"}, null, theme, c),
+    overColorCoding: (c: string) => enumTest({color: paintedSurface(c), label: "paintedSurface"}, c, theme, c),
+    overSameColor: (c: string) => enumTest({color: c, label: "card"}, c, theme, c),
   };
 }

package/src/phone.ts

@@ -0,0 +1,27 @@
+import {isFlagPresent} from "./flags";
+import {getMediaQueryList} from "./media-query-utils";
+
+declare global {
+  const __DISABLE_VERTICAL_MOBILE_BREAKPOINT__: boolean | undefined;
+}
+
+export const isPhoneApp = () =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API
+  );
+
+const disableStatic =
+  typeof __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ !== "undefined" && __DISABLE_VERTICAL_MOBILE_BREAKPOINT__;
+const disableDynamic = disableStatic || isFlagPresent("no-vertical-mobile-breakpoint");
+const heightIgnored = "(max-width: 450px)";
+const heightPresent = "(max-width: 450px), (max-height: 450px)";
+
+export const phoneMediaQuery = disableStatic ? heightIgnored : heightPresent;
+
+export const phoneMediaQueryDynamic = disableDynamic ? heightIgnored : heightPresent;
+
+export function isPhoneMode() {
+  return isPhoneApp() || getMediaQueryList(phoneMediaQueryDynamic).matches;
+}

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/reactions/reaction-picker.tsx

@@ -8,7 +8,7 @@ import {IconButton} from "../button/icon-button";
 import {layout, space, themeVars} from "../design-system";
 import {type EmojiPickerProps} from "../emoji-picker/emoji-picker";
 import {useResponsiveEmojiSize} from "../emoji-picker/use-responsive-emoji-size";
-import AddReactions from "../icons/react/add-reactions";
+import ReactionsAdd from "../icons/react/reactions-add";
 import {mobileRootSelector} from "../mobile-styles";
 import {Popover} from "../popover";
 import {ToggleButton} from "../toggle-button/toggle-button";
@@ -91,7 +91,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
               paddingInline: 0,
             }}
           >
-            <AddReactions iconSize={isPhone ? 20 : 16} />
+            <ReactionsAdd iconSize={isPhone ? 20 : 16} />
           </ToggleButton>
         ) : (
           <IconButton
@@ -103,7 +103,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
             size="small"
             supportMobile
           >
-            <AddReactions />
+            <ReactionsAdd />
           </IconButton>
         )}
       </Tooltip>

package/src/rich-text-embed-error.tsx

@@ -2,7 +2,7 @@ import {css, cx} from "@linaria/core";
 import {type ReactNode} from "react";
 
 import {border, space, themeVars} from "./design-system";
-import ImageXmark from "./icons/react/image-xmark";
+import ImageError from "./icons/react/image-error";
 
 export const richTextEmbedErrorStyle = css`
   min-height: 380px;
@@ -41,7 +41,7 @@ type Props = {
 export const RichTextEmbedError = ({isSelected, label}: Props) => {
   return (
     <div className={cx(richTextEmbedErrorStyle, isSelected && selectedStyle)}>
-      <ImageXmark iconSize={32} color={themeVars.disabledTextColor} />
+      <ImageError iconSize={32} color={themeVars.disabledTextColor} />
       <div className={textStyle}>{label}</div>
     </div>
   );

package/src/root-theme-provider.test.tsx

@@ -12,7 +12,6 @@ import {
 } from "./theme-provider";
 import {storeWarmPreference} from "./theme-settings";
 import {locateThemeBundle} from "./theme-styles";
-import {prefix as themePrefix} from "./theming.generated";
 
 const {
   palette,
@@ -185,9 +184,9 @@ describe("RootThemeProvider", () => {
 
   describe("diff optimization integrity", () => {
     it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
-      const lightStyles = stylesFromTheme(themeLight, themePrefix);
+      const lightStyles = stylesFromTheme(themeLight);
       const lightTheme = themeFromPalette(palette, "light");
-      const actualStyles = stylesFromTheme(lightTheme, themePrefix);
+      const actualStyles = stylesFromTheme(lightTheme);
 
       // Count expected diff (theme from getThemeColors vs defaultLightTheme)
       let expectedDiffCount = 0;

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

@@ -2,10 +2,11 @@ import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {Wrap} from "@fibery/react/src/wrap";
 import {css, cx} from "@linaria/core";
 import type {ForwardedRef, ReactNode, RefObject} from "react";
-import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+import React, {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
 import type {SelectInstance} from "react-select";
 
 import {space, textClasses} from "../design-system";
+import {MobileDrawer} from "../mobile-drawer";
 import type {Placement} from "../popover";
 import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
@@ -42,6 +43,7 @@ export const popupClassName = css`
 const mobileClassName = css`
   display: grid;
   min-height: 0;
+  height: 100%;
   padding-top: ${space.s12}px;
   padding-left: ${space.s12}px;
   padding-right: ${space.s12}px;
@@ -71,7 +73,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 +118,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     onChange,
     onMenuOpen,
     onMenuClose,
-    getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
     popoverPlacement = "bottom-start",
@@ -194,43 +194,57 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     ...components,
   };
 
+  const select = (
+    <SelectControlSettingsProvider inPopover={true} getPopupContainerElement={undefined}>
+      <ReactSelect<T, U, V>
+        {...rest}
+        autoFocus={isPhone ? false : rest.autoFocus}
+        ref={selectRef}
+        styles={composedStyles}
+        onKeyDown={onSelectKeyDown}
+        closeMenuOnSelect={false}
+        onChange={handleChange}
+        menuIsOpen
+        maxMenuHeight={maxMenuHeight}
+        disabled={disabled}
+        isCollectionMode={isCollectionMode}
+        isClearable={!isCollectionMode && isClearable}
+        {...otherSelectProps}
+        components={selectComponents}
+        inline
+      />
+    </SelectControlSettingsProvider>
+  );
+
+  if (isPhone) {
+    return (
+      <MobileDrawer
+        open={visible}
+        onOpenChange={onOpenChange}
+        title={title ?? ""}
+        trigger={isValidElement(trigger) ? trigger : undefined}
+        triggerRef={setTriggerElement}
+      >
+        <div className={mobileClassName}>{select}</div>
+      </MobileDrawer>
+    );
+  }
+
   return (
     <Popover.Root open={visible} onOpenChange={onOpenChange}>
       <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}
           offset={offset}
           popupContainerClassName={cx(defaultPopupContainerClassName, popupContainerClassName)}
           popupClassName={cx(popupClassName, popupStyles)}
-          mobilePopupContentClassName={mobileClassName}
           placement={popoverPlacement}
         >
-          {title && !isPhone && <div className={cx(textClasses.heading6, titleClassName)}>{title}</div>}
-          {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
-          {/*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 inPopover={true} getPopupContainerElement={undefined}>
-            <ReactSelect<T, U, V>
-              {...rest}
-              ref={selectRef}
-              styles={composedStyles}
-              onKeyDown={onSelectKeyDown}
-              closeMenuOnSelect={false}
-              onChange={handleChange}
-              menuIsOpen
-              maxMenuHeight={maxMenuHeight}
-              disabled={disabled}
-              isCollectionMode={isCollectionMode}
-              isClearable={!isCollectionMode && isClearable}
-              {...otherSelectProps}
-              components={selectComponents}
-              inline
-            />
-          </SelectControlSettingsProvider>
+          {title && <div className={cx(textClasses.heading6, titleClassName)}>{title}</div>}
+          {select}
         </Popover.Content>
       </Wrap>
     </Popover.Root>

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/select/util.ts

@@ -29,5 +29,5 @@ export function countOptions<Option, Group extends GroupBase<Option>>(
   }, 0);
 }
 export function isPureTextChildren(children: ReactNode) {
-  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
+  return !Children.toArray(children).some((child) => !(typeof child === "string" || typeof child === "number"));
 }