@fibery/ui-kit 1.40.3 → 1.41.0

package/src/scale-generator.ts

@@ -0,0 +1,356 @@
+import {fromOKLCH} from "./color-utils";
+import type {ColorScale} from "./palette-generator";
+
+export type OneBasedScale<T> = readonly [
+  base00: null,
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T
+];
+
+export type ZeroBasedScale<T> = readonly [
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T
+];
+
+export function zeroBasedFromOneBased<T>(scale: OneBasedScale<T>) {
+  return scale.slice(1) as unknown as ZeroBasedScale<T>;
+}
+
+export interface ScaleCurves {
+  lightness: ZeroBasedScale<number>; // 0-100 scale
+  chroma: ZeroBasedScale<number>; // multipliers relative to peakChroma
+}
+
+export interface ScaleConfig {
+  hue: number;
+  chroma: number;
+  mode: "light" | "dark";
+  curves?: ScaleCurves;
+  /** Adjusts lightness contrast. >1 = more contrast, <1 = less. Default 1. */
+  contrast?: number;
+  /** Override step 0 (base) color. Defaults to white. */
+  base?: string;
+}
+
+// Based on indigo scale (default accent) from palette.ts
+export const DEFAULT_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.069, 98.983, 96.966, 95.012, 92.145, 88.367, 82.757, 76.14, 58.48, 54.173, 49.642, 26.071],
+  chroma: [0.018, 0.027, 0.08, 0.126, 0.19, 0.27, 0.384, 0.529, 0.934, 1.0, 0.878, 0.44],
+};
+
+export const DEFAULT_DARK_CURVES: ScaleCurves = {
+  lightness: [20.512, 22.974, 27.284, 29.742, 32.452, 35.981, 41.256, 47.972, 57.658, 62.928, 76.225, 95.899],
+  chroma: [0.119, 0.226, 0.357, 0.444, 0.475, 0.517, 0.72, 0.952, 1.0, 0.921, 0.601, 0.111],
+};
+
+// Curves extracted from current palette.ts
+const SLATE_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.241, 97.719, 96.955, 94.656, 93.115, 91.568, 89.235, 82.937, 69.959, 57.217, 48.318, 20.441],
+  chroma: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+};
+
+const SLATE_DARK_CURVES: ScaleCurves = {
+  lightness: [20.441, 22.667, 25.908, 28.012, 30.078, 32.109, 36.079, 43.714, 54.586, 59.818, 70.787, 94.656],
+  chroma: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+};
+
+const INDIGO_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.069, 98.983, 96.966, 95.012, 92.145, 88.367, 82.757, 76.14, 58.48, 54.173, 49.642, 26.071],
+  chroma: [0.018, 0.027, 0.08, 0.126, 0.19, 0.27, 0.384, 0.529, 0.934, 1.0, 0.878, 0.44],
+};
+
+const INDIGO_DARK_CURVES: ScaleCurves = {
+  lightness: [20.512, 22.974, 27.284, 29.742, 32.452, 35.981, 41.256, 47.972, 57.658, 62.928, 76.225, 95.899],
+  chroma: [0.119, 0.226, 0.357, 0.444, 0.475, 0.517, 0.72, 0.952, 1.0, 0.921, 0.601, 0.111],
+};
+
+const RED_LIGHT_CURVES: ScaleCurves = {
+  lightness: [98.9, 98.9, 96.6, 94.4, 91.4, 87.5, 81.8, 74.5, 62.5, 59.7, 55.7, 24.9],
+  chroma: [0.027, 0.027, 0.084, 0.138, 0.207, 0.289, 0.403, 0.562, 0.975, 0.985, 1.0, 0.307],
+};
+
+const RED_DARK_CURVES: ScaleCurves = {
+  lightness: [20.6, 22.2, 25.9, 28.7, 31.5, 35.2, 40.8, 48.1, 62.5, 66.2, 70.5, 95.7],
+  chroma: [0.101, 0.178, 0.288, 0.369, 0.441, 0.54, 0.687, 0.872, 1.0, 0.992, 0.967, 0.104],
+};
+
+const TEAL_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.4, 98.4, 96.7, 94.3, 91.2, 86.8, 80.5, 71.8, 65, 61.7, 51.8, 29],
+  chroma: [0.03, 0.094, 0.174, 0.255, 0.337, 0.449, 0.6, 0.859, 1.0, 0.953, 0.799, 0.353],
+};
+
+const TEAL_DARK_CURVES: ScaleCurves = {
+  lightness: [18.9, 22, 25.2, 28.4, 31.6, 34.7, 40.7, 48.5, 65, 68.8, 74.4, 96.5],
+  chroma: [0.163, 0.269, 0.31, 0.354, 0.4, 0.44, 0.528, 0.636, 0.864, 0.913, 1.0, 0.215],
+};
+
+const YELLOW_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.15, 98.666, 98.103, 97.119, 95.34, 92.061, 86.841, 81.273, 88.224, 85.516, 54.771, 28.162],
+  chroma: [0.04, 0.16, 0.299, 0.419, 0.539, 0.621, 0.692, 0.911, 1.0, 0.962, 0.624, 0.231],
+};
+
+const YELLOW_DARK_CURVES: ScaleCurves = {
+  lightness: [18.975, 22.715, 25.994, 27.672, 31.467, 35.323, 40.577, 48.421, 88.224, 93.814, 82.593, 97.801],
+  chroma: [0.213, 0.255, 0.291, 0.31, 0.353, 0.398, 0.444, 0.546, 1.0, 0.898, 0.926, 0.289],
+};
+
+// ============ PRESET CONFIGS ============
+export const SCALE_PRESETS = {
+  slate: {
+    hue: 0,
+    chroma: 0,
+    lightCurves: SLATE_LIGHT_CURVES,
+    darkCurves: SLATE_DARK_CURVES,
+  },
+  indigo: {
+    hue: 264,
+    chroma: 0.1618, // peak chroma at step 10 light
+    lightCurves: INDIGO_LIGHT_CURVES,
+    darkCurves: INDIGO_DARK_CURVES,
+  },
+  red: {
+    hue: 19,
+    chroma: 0.1978, // peak chroma at step 11 light
+    lightCurves: RED_LIGHT_CURVES,
+    darkCurves: RED_DARK_CURVES,
+  },
+  teal: {
+    hue: 183,
+    chroma: 0.1137, // peak chroma at step 9 light
+    lightCurves: TEAL_LIGHT_CURVES,
+    darkCurves: TEAL_DARK_CURVES,
+  },
+  yellow: {
+    hue: 100, // OKLCH yellow hue
+    chroma: 0.19, // peak chroma at step 9 light
+    lightCurves: YELLOW_LIGHT_CURVES,
+    darkCurves: YELLOW_DARK_CURVES,
+  },
+} as const;
+
+/**
+ * Generate a 12-step color scale from hue + peak chroma.
+ * Returns ColorScale (13 elements: base + 12 steps)
+ */
+function applyContrast(L: number, contrast: number): number {
+  // Scale lightness away from midpoint (50)
+  const adjusted = 50 + (L - 50) * contrast;
+  return Math.max(0, Math.min(100, adjusted));
+}
+
+export function generateColorScale(config: ScaleConfig): ColorScale {
+  const {hue, chroma, mode, curves, contrast = 1} = config;
+
+  const defaultCurves = mode === "light" ? DEFAULT_LIGHT_CURVES : DEFAULT_DARK_CURVES;
+  const {lightness, chroma: chromaCurve} = curves ?? defaultCurves;
+
+  const steps = lightness.map((L, i) => {
+    const adjustedL = applyContrast(L, contrast);
+    const C = chroma * chromaCurve[i];
+    return fromOKLCH(adjustedL / 100, C, hue);
+  });
+
+  return [null, ...steps] as unknown as ColorScale;
+}
+
+/**
+ * Generate a scale using a named preset
+ */
+export function generatePresetScale(name: keyof typeof SCALE_PRESETS, mode: "light" | "dark"): ColorScale {
+  const preset = SCALE_PRESETS[name];
+  const curves = "lightCurves" in preset ? (mode === "light" ? preset.lightCurves : preset.darkCurves) : undefined;
+  return generateColorScale({
+    hue: preset.hue,
+    chroma: preset.chroma,
+    mode,
+    curves,
+  });
+}
+
+const GRAY_CURVES: ScaleCurves = {
+  // Based on slate (default base) from palette.ts
+  lightness: SLATE_LIGHT_CURVES.lightness,
+  chroma: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+};
+
+const GRAY_DARK_CURVES: ScaleCurves = {
+  lightness: SLATE_DARK_CURVES.lightness,
+  chroma: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+};
+
+/**
+ * Generate a gray scale with optional subtle hue tint
+ */
+export function generateGrayScale(config: {
+  hue?: number;
+  chroma?: number;
+  mode: "light" | "dark";
+  contrast?: number;
+}): ColorScale {
+  const {hue = 0, chroma = 0, mode, contrast} = config;
+  const curves = mode === "light" ? GRAY_CURVES : GRAY_DARK_CURVES;
+  return generateColorScale({hue, chroma, mode, contrast, curves});
+}
+
+// ============ HUE INTERPOLATION ============
+
+interface HueReference {
+  hue: number;
+  chroma: number;
+  lightCurves: ScaleCurves;
+  darkCurves: ScaleCurves;
+}
+
+// Reference scales sorted by hue for interpolation
+const HUE_REFERENCES: HueReference[] = [
+  {hue: 19, chroma: 0.1978, lightCurves: RED_LIGHT_CURVES, darkCurves: RED_DARK_CURVES},
+  {hue: 183, chroma: 0.1137, lightCurves: TEAL_LIGHT_CURVES, darkCurves: TEAL_DARK_CURVES},
+  {hue: 264, chroma: 0.1618, lightCurves: INDIGO_LIGHT_CURVES, darkCurves: INDIGO_DARK_CURVES},
+].sort((a, b) => a.hue - b.hue);
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+function lerpArray<T extends readonly number[]>(a: T, b: T, t: number): {[K in keyof T]: number} {
+  return a.map((v, i) => lerp(v, b[i], t)) as {[K in keyof T]: number};
+}
+
+function normalizeHue(h: number): number {
+  return ((h % 360) + 360) % 360;
+}
+
+/**
+ * Find bracketing references and interpolation factor for a target hue
+ */
+function findHueBracket(targetHue: number): {before: HueReference; after: HueReference; t: number} {
+  const h = normalizeHue(targetHue);
+  const refs = HUE_REFERENCES;
+
+  // Find which two references bracket the target hue
+  let beforeIdx = refs.length - 1;
+  let afterIdx = 0;
+
+  for (let i = 0; i < refs.length; i++) {
+    if (refs[i].hue <= h) {
+      beforeIdx = i;
+      afterIdx = (i + 1) % refs.length;
+    }
+  }
+
+  const before = refs[beforeIdx];
+  const after = refs[afterIdx];
+
+  // Calculate interpolation factor
+  const beforeHue = before.hue;
+  let afterHue = after.hue;
+
+  // Handle wrap-around (e.g., from indigo 264 to red 19)
+  if (afterHue <= beforeHue) {
+    afterHue += 360;
+  }
+
+  let targetH = h;
+  if (targetH < beforeHue) {
+    targetH += 360;
+  }
+
+  const range = afterHue - beforeHue;
+  const t = range > 0 ? (targetH - beforeHue) / range : 0;
+
+  return {before, after, t: Math.max(0, Math.min(1, t))};
+}
+
+/**
+ * Interpolate curves between two references
+ */
+function interpolateCurves(before: ScaleCurves, after: ScaleCurves, t: number): ScaleCurves {
+  return {
+    lightness: lerpArray(before.lightness, after.lightness, t),
+    chroma: lerpArray(before.chroma, after.chroma, t),
+  };
+}
+
+export interface InterpolatedScaleConfig {
+  /** Target hue (0-360). Curves are interpolated from nearby reference scales. */
+  hue: number;
+  /** Optional chroma override. If not provided, interpolated from references. */
+  chroma?: number;
+  /** Light or dark mode */
+  mode: "light" | "dark";
+}
+
+/**
+ * Generate a scale for any hue by interpolating curves from reference scales.
+ * This produces smooth, natural-looking palettes for any color.
+ */
+export function generateInterpolatedScale(config: InterpolatedScaleConfig): ColorScale {
+  const {hue, chroma: chromaOverride, mode} = config;
+
+  const {before, after, t} = findHueBracket(hue);
+
+  // Interpolate curves
+  const beforeCurves = mode === "light" ? before.lightCurves : before.darkCurves;
+  const afterCurves = mode === "light" ? after.lightCurves : after.darkCurves;
+  const curves = interpolateCurves(beforeCurves, afterCurves, t);
+
+  // Interpolate chroma if not overridden
+  const chroma = chromaOverride ?? lerp(before.chroma, after.chroma, t);
+
+  return generateColorScale({hue, chroma, mode, curves});
+}
+
+export function paletteFromHue(hue: number, mode: "light" | "dark"): ColorScale {
+  return generateInterpolatedScale({hue, mode});
+}
+
+export function paletteFromHueBoth(hue: number): {light: ColorScale; dark: ColorScale} {
+  return {
+    light: generateInterpolatedScale({hue, mode: "light"}),
+    dark: generateInterpolatedScale({hue, mode: "dark"}),
+  };
+}
+
+export function generateWhites(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
+  const c = chroma * 0.1 * chromaMul;
+  const l = (1 - chroma * 0.1) * luminosity;
+  return {
+    white: fromOKLCH(l, c, hue, 1),
+    whiteA: [
+      null,
+      ...[0, 0.01, 0.03, 0.06, 0.09, 0.12, 0.18, 0.25, 0.39, 0.45, 0.59, 0.92].map((a) => fromOKLCH(l, c, hue, a)),
+    ] as unknown as ColorScale,
+  };
+}
+
+export function generateBlacks(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
+  const c = chroma * 0.1 * chromaMul;
+  const l = chroma * 0.1 * 4 * luminosity;
+  return {
+    black: fromOKLCH(l, c, hue, 1),
+    blackA: [
+      null,
+      ...[0.01, 0.03, 0.05, 0.07, 0.09, 0.11, 0.14, 0.22, 0.44, 0.48, 0.57, 0.91].map((a) => fromOKLCH(l, c, hue, a)),
+    ] as unknown as ColorScale,
+  };
+}

package/src/select/components/menu-list-virtualized.tsx

@@ -1,5 +1,6 @@
-import {css} from "@linaria/core";
-import _, {isFunction, isObject} from "lodash";
+import compact from "lodash/compact";
+import isFunction from "lodash/isFunction";
+import isObject from "lodash/isObject";
 import {
   Children,
   ComponentType,
@@ -18,23 +19,9 @@ import {GroupBase, ReactSelectRefContext} from "../util";
 import {useSelectControlSettings} from "../select-control-settings-context";
 import {useIsPhone} from "../../use-is-phone";
 
-const PADDING_BLOCK_HEIGHT = 6;
-
-const Spacer = () => (
-  <div
-    className={css`
-      height: ${PADDING_BLOCK_HEIGHT}px;
-    `}
-  />
-);
-
-const components = {
-  Footer: Spacer,
-  Header: Spacer,
-};
-
 // Threshold to determine when to scroll: if focused item is less than this visible, scroll it into view
 const MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW = 0.2;
+
 function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
   props: unknown
 ): props is GroupProps<Option, isMulty, Group> {
@@ -47,18 +34,19 @@ function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<O
     isObject(props.headingProps)
   );
 }
+
 const flattenGroupChildren: (
   children: ReactNode,
   renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
 ) => ReactNode[] = (children, renderGroup) => {
-  return _.compact(
+  return compact(
     Children.toArray(children)
       .map((child) => {
         if (isObject(child) && "props" in child && isObject(child.props)) {
           const {props} = child;
           if (isGroupChild(props)) {
             //well, it's a group
-            const children = _.compact(Children.toArray(props.children));
+            const children = compact(Children.toArray(props.children));
             if (!children.length) {
               // do not render empty groups
               return [];
@@ -73,7 +61,9 @@ const flattenGroupChildren: (
       .flat()
   );
 };
+
 const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
+
 export function MenuListVirtualized<
   Option,
   IsMulti extends boolean = boolean,
@@ -117,7 +107,7 @@ export function MenuListVirtualized<
 
   // Calculate menu height
   const menuHeight = useMemo(
-    () => Math.min(flattenChildren.length * itemHeight + PADDING_BLOCK_HEIGHT * 2, maxHeight),
+    () => Math.min(flattenChildren.length * itemHeight, maxHeight),
     [flattenChildren.length, itemHeight, maxHeight]
   );
 
@@ -188,10 +178,10 @@ export function MenuListVirtualized<
         }
 
         virtuoso.current.getState((state) => {
-          const focusedItemTop = focusedIndex * itemHeight + PADDING_BLOCK_HEIGHT;
+          const focusedItemTop = focusedIndex * itemHeight;
           const focusedItemBottom = focusedItemTop + itemHeight;
           const viewportTop = state.scrollTop;
-          const viewportBottom = state.scrollTop + menuHeight - PADDING_BLOCK_HEIGHT;
+          const viewportBottom = state.scrollTop + menuHeight;
 
           // Check if item is cut off at the top (even partially)
           const isTopCutOff = focusedItemTop < viewportTop;
@@ -232,18 +222,15 @@ export function MenuListVirtualized<
   }, [focusedOption, focusedIndex, initialFocusedOption, itemHeight, menuHeight, scrollThreshold]);
 
   return (
-    // Needed for correct display inside portals and etc.
     <div style={getStyles("menuList", props) as CSSProperties}>
       <Virtuoso
         ref={virtuoso}
-        // in reality only HTMLDivElement | null will appear here. We do not use Virtuoso's useWindowScroll prop
         scrollerRef={innerRef as (ref: HTMLElement | Window | null) => void}
         style={isPhone && inPopover ? undefined : {height: menuHeight}}
         fixedItemHeight={itemHeight}
         data={flattenChildren}
         totalCount={flattenChildren.length}
         itemContent={drawListElement}
-        components={components}
       />
     </div>
   );

package/src/select/components/menu.tsx

@@ -1,6 +1,8 @@
 import {css, cx} from "@linaria/core";
-import {CSSObjectWithLabel, MenuProps, components} from "react-select";
+import {components, CSSObjectWithLabel, MenuProps} from "react-select";
+import type {MenuPortalProps} from "react-select/dist/declarations/src/components/Menu";
 import {border, space, themeVars} from "../../design-system";
+import {ThemeProvider} from "../../theme-provider";
 import {GroupBase} from "../index";
 
 export const MenuListNulledStyles: CSSObjectWithLabel = {
@@ -20,7 +22,7 @@ export const MenuNulledStyles: CSSObjectWithLabel = {
 const menuCss = css`
   color: ${themeVars.disabledTextColor};
   z-index: 1050;
-  background-color: ${themeVars.colorBgSelectMenu};
+  background-color: ${themeVars.colorBgPopup};
   box-shadow: ${themeVars.shadowSelectMenu};
   border-radius: ${border.radius6}px;
   overflow: hidden;
@@ -38,3 +40,11 @@ const menuTransparentCss = css`
 export function MenuTransparent<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {
   return <components.Menu {...props} className={cx(menuTransparentCss, "react-select-menu", props.className)} />;
 }
+
+export function MenuPortal<T, U extends boolean, V extends GroupBase<T>>(props: MenuPortalProps<T, U, V>) {
+  return (
+    <components.MenuPortal {...props}>
+      <ThemeProvider portal>{props.children}</ThemeProvider>
+    </components.MenuPortal>
+  );
+}

package/src/select/index.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable no-use-before-define */
 import {useIsPhone} from "../use-is-phone";
-import {SelectComponent} from "./select";
+import type {GroupBase, SelectInstance, SelectProps} from "./select";
+import {combineStyles, SelectComponent} from "./select";
 import React, {ForwardedRef, forwardRef} from "react";
-import type {SelectProps, GroupBase, SelectInstance} from "./select";
 import {SelectInPopover} from "./select-in-popover";
-import {combineStyles} from "./select";
 import {makeSingleLineStyles} from "./styles";
 import {css} from "@linaria/core";
 import {$TSFixMe} from "../tsfixme";
@@ -52,12 +50,13 @@ export const Select = forwardRef(function SelectInner<
     placeholder,
     title,
     isSearchable,
+    inline,
     ...restProps
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
 ) {
   const isPhone = useIsPhone();
-  if (isPhone) {
+  if (isPhone && !inline) {
     return (
       <SelectInPopover
         {...(restProps as $TSFixMe)}
@@ -106,6 +105,7 @@ export const Select = forwardRef(function SelectInner<
             </div>
           );
         }}
+        inline={inline}
       />
     );
   }
@@ -119,6 +119,7 @@ export const Select = forwardRef(function SelectInner<
       isOptionDisabled={isOptionDisabled}
       isClearable={isClearable}
       styles={styles}
+      inline={inline}
       {...restProps}
     />
   );

package/src/select/select.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable no-use-before-define */
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
   components as reactSelectComponents,
+  ControlProps,
   createFilter,
   MenuListProps,
   MenuProps,
-  ControlProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
@@ -25,14 +24,15 @@ import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import {ClearIndicator, NoClearIndicator} from "./components/clear-indicator";
 import {DropdownIndicator} from "./components/drop-down-indicator";
 import {GroupHeading} from "./components/group-heading";
-import {Menu} from "./components/menu";
+import {Menu, MenuPortal} from "./components/menu";
 import {MenuListVirtualized} from "./components/menu-list-virtualized";
 import {NoOptionsMessage} from "./components/no-option-message";
 import {Option, OptionSlow} from "./components/option";
 import {useSelectControlSettings} from "./select-control-settings-context";
 import {makeComponentsStyles, makeNonVirtualizedStyles, makeVirtualizedStyles, makeZIndexStyles} from "./styles";
 import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
-import _ from "lodash";
+import compact from "lodash/compact";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 
 export type {
   ActionMeta,
@@ -72,6 +72,7 @@ export type SelectProps<T = unknown, U extends boolean = boolean, V extends Grou
   isCollectionMode?: U;
   disabled?: boolean;
   forbidValuesClearInCollnMode?: boolean;
+  inline?: boolean;
 };
 
 const FAST_OPTION_USAGE_THRESHOLD = 200;
@@ -94,6 +95,7 @@ function useSelectComponents<T, U extends boolean, V extends GroupBase<T>>({
 
   return {
     Menu,
+    MenuPortal,
     DropdownIndicator,
     ClearIndicator,
     MultiValueRemove: shouldHideMultiValueRemove ? NoClearIndicator : ClearIndicator,
@@ -121,7 +123,7 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
 }) {
   return useMemo(() => {
     return combineStyles<T, U, V>(
-      _.compact([
+      compact([
         makeComponentsStyles<T, U, V>(),
         virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
         zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
@@ -140,13 +142,14 @@ export const SelectComponent = forwardRef(function Select<
     components,
     isCollectionMode,
     menuPortalTarget,
-    onKeyDown,
     styles,
     virtualized = true,
+    forbidValuesClearInCollnMode,
+    inline,
     onMenuOpen,
     onMenuClose,
     onChange,
-    forbidValuesClearInCollnMode,
+    onKeyDown,
     ...rest
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
@@ -165,39 +168,35 @@ export const SelectComponent = forwardRef(function Select<
     onMenuClose && onMenuClose();
   }, [onMenuClose]);
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      switch (e.key) {
-        case "Escape":
-          // we can't rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
-          if (menuOpenState) {
-            e.stopPropagation();
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionStart = 0;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(0, 0);
-          }
-          break;
-        case "End": {
-          e.preventDefault();
-          const len = (e.target as HTMLInputElement).value.length;
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionEnd = len;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(len, len);
-          }
-          break;
+  const onKeyDownComposed = composeEventHandlers(onKeyDown, (e) => {
+    switch (e.key) {
+      case "Escape":
+        // we can't rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+        if (menuOpenState && !inline) {
+          e.stopPropagation();
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (e.shiftKey) {
+          (e.target as HTMLInputElement).selectionStart = 0;
+        } else {
+          (e.target as HTMLInputElement).setSelectionRange(0, 0);
+        }
+        break;
+      case "End": {
+        e.preventDefault();
+        const len = (e.target as HTMLInputElement).value.length;
+        if (e.shiftKey) {
+          (e.target as HTMLInputElement).selectionEnd = len;
+        } else {
+          (e.target as HTMLInputElement).setSelectionRange(len, len);
         }
-        default:
+        break;
       }
-      onKeyDown && onKeyDown(e);
-    },
-    [onKeyDown, menuOpenState]
-  );
+      default:
+    }
+  });
 
   const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
   const composedRef = useComposedRefs(forwardedRef, selectRef);
@@ -226,7 +225,7 @@ export const SelectComponent = forwardRef(function Select<
         tabSelectsValue={false}
         components={selectComponents}
         {...rest}
-        onKeyDown={handleKeyDown}
+        onKeyDown={onKeyDownComposed}
         onMenuOpen={onMenuOpenWrapped}
         onMenuClose={onMenuCloseWrapped}
         onChange={rest.disabled ? undefined : onChange}

package/src/select/styles.ts

@@ -190,7 +190,6 @@ export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupB
     margin: space.s2,
     marginBottom: space.s4,
     width: `calc(100% - ${space.s2 * 2}px)`,
-    borderRadius: border.radius4,
   }),
   menuList: (props) => {
     if (isPhone) {