@fibery/ui-kit 1.40.4 → 1.41.0

package/src/popover/{mobile-popup-context.tsx → mobile-popover-context.tsx}

@@ -1,20 +1,20 @@
-import _ from "lodash";
+import noop from "lodash/noop";
 import {FC, ReactNode, useState, useMemo} from "react";
 import {createContext} from "@fibery/react/src/create-context";
 
-type MobilePopupContext = {
+type MobilePopoverContext = {
   title?: string;
   headerSlot?: ReactNode;
   setTitle: (title: string) => void;
   setHeader: (header?: ReactNode) => void;
 };
 
-const [Provider, useMobilePopup] = createContext<MobilePopupContext>("MobilePopupContext", {
-  setTitle: _.noop,
-  setHeader: _.noop,
+const [Provider, useMobilePopover] = createContext<MobilePopoverContext>("MobilePopoverContext", {
+  setTitle: noop,
+  setHeader: noop,
 });
 
-export const MobilePopupProvider: FC<{children?: ReactNode}> = ({children}) => {
+export const MobilePopoverProvider: FC<{children?: ReactNode}> = ({children}) => {
   const [title, setTitle] = useState<string | undefined>();
   const [headerSlot, setHeader] = useState<ReactNode | undefined>();
 
@@ -26,4 +26,4 @@ export const MobilePopupProvider: FC<{children?: ReactNode}> = ({children}) => {
   return <Provider value={contextValue}>{children}</Provider>;
 };
 
-export {useMobilePopup};
+export {useMobilePopover};

package/src/popover/mobile-popover.tsx

@@ -0,0 +1,169 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {CSSProperties, ReactNode} from "react";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
+import {space, textStyles, themeVars, transition} from "../design-system";
+import {IconButton} from "../button/icon-button";
+import CloseIcon from "../icons/react/Close";
+import ArrowLeftIcon from "../icons/react/ArrowLeft";
+import {ThemeProvider} from "../theme-provider";
+import {useMobilePopover} from "./mobile-popover-context";
+
+const mobileAnimationClassName = css`
+  transition: transform ${transition}, opacity ${transition};
+  transform: translateY(0);
+  opacity: 1;
+
+  @media (prefers-reduced-motion: no-preference) {
+    @starting-style {
+      transform: translateY(20%);
+      opacity: 0;
+    }
+  }
+`;
+
+const popupContentClassName = css`
+  display: grid;
+  background: ${themeVars.actionMenuBg};
+  grid-template-rows: 60px 1fr;
+`;
+
+export const mobileZIndex = 1002;
+
+export function MobilePopover({
+  content,
+  mobilePopupStyle,
+  mobilePopupContentClassName,
+  title,
+  onClose,
+  height,
+  onNavigateBack,
+}: {
+  content: ReactNode;
+  mobilePopupStyle?: CSSProperties;
+  mobilePopupContentClassName?: string;
+  title: string;
+  height?: string;
+  onClose?: () => void;
+  onNavigateBack?: () => void;
+}) {
+  const {title: contextTitle, headerSlot} = useMobilePopover();
+
+  const headerContent = headerSlot ?? (
+    <>
+      {onNavigateBack && (
+        <IconButton onClick={onNavigateBack} size="xLarge">
+          <ArrowLeftIcon />
+        </IconButton>
+      )}
+      <div
+        className={css`
+          ${textStyles.heading3}
+          flex: 1;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `}
+      >
+        {contextTitle ?? title}
+      </div>
+      {onClose && (
+        <IconButton onClick={onClose} size="xLarge">
+          <CloseIcon />
+        </IconButton>
+      )}
+    </>
+  );
+
+  const popupContent = (
+    <>
+      <div
+        className={cx(
+          css`
+            display: flex;
+            align-items: center;
+            gap: ${space.s8}px;
+            padding: ${space.s8}px ${space.s8}px ${space.s8}px ${space.s20}px;
+            min-width: 0;
+          `,
+          onNavigateBack &&
+            css`
+              padding-left: ${space.s4}px;
+            `
+        )}
+      >
+        {headerContent}
+      </div>
+      <div
+        className={cx(
+          css`
+            border-top: ${themeVars.separators.opacity5};
+            min-width: 0;
+          `,
+          mobilePopupContentClassName
+        )}
+      >
+        {content}
+      </div>
+    </>
+  );
+
+  const res = (
+    <div
+      className={cx(
+        css`
+          position: absolute;
+          left: var(${safeAreaInsetLeftVar});
+          right: var(${safeAreaInsetRightVar});
+          top: var(${safeAreaInsetTopVar});
+          bottom: var(${safeAreaInsetBottomVar});
+          z-index: ${mobileZIndex};
+        `,
+        !height && mobileAnimationClassName,
+        !height && popupContentClassName,
+        height &&
+          css`
+            display: grid;
+          `
+      )}
+      style={{
+        ...mobilePopupStyle,
+        ...(height ? {gridTemplateRows: `1fr ${height}`} : {}),
+      }}
+      onClick={stopPropagation}
+    >
+      {height ? (
+        <>
+          <div
+            onClick={onClose}
+            className={css`
+              background-color: ${themeVars.modalBg};
+            `}
+          />
+          <div
+            className={cx(
+              css`
+                display: grid;
+                grid-template-rows: 60px 1fr;
+              `,
+              mobileAnimationClassName,
+              popupContentClassName
+            )}
+          >
+            {popupContent}
+          </div>
+        </>
+      ) : (
+        popupContent
+      )}
+    </div>
+  );
+  return <ThemeProvider portal>{res}</ThemeProvider>;
+}

package/src/popover/modifiers.tsx

@@ -3,7 +3,7 @@ import {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding,
 import maxSize from "popper-max-size-modifier";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import {isElementReference} from "./reference";
-import _ from "lodash";
+import noop from "lodash/noop";
 
 type MaxSizeOptions = {
   placement: Placement;
@@ -65,6 +65,6 @@ export const observeWidth: Modifier<"observeWidth", Record<string, never>> = {
   name: "observeWidth",
   enabled: true,
   phase: "main",
-  fn: _.noop,
+  fn: noop,
   effect: observeWidthEffect,
 };

package/src/popover/popup-stack-context.tsx

@@ -25,17 +25,16 @@ const [Provider, usePopupStackContext] = createContext<{
 
 export function PopupStackContextProvider({children}: {children: ReactNode}) {
   useEffect(() => {
-    const escapeHandler = (event: KeyboardEvent) => {
-      const reverse = [...callbacksMap].reverse();
-      reverse.forEach(([_id, cb]) => {
-        if (cb) {
-          cb(event);
-        }
-      });
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        const callbacks = [...callbacksMap.values()].filter(Boolean);
+        const topmost = callbacks[callbacks.length - 1];
+        topmost?.(event);
+      }
     };
-    document.addEventListener("keydown", escapeHandler);
+    document.addEventListener("keydown", onKeyDown);
     return () => {
-      document.removeEventListener("keydown", escapeHandler);
+      document.removeEventListener("keydown", onKeyDown);
     };
   }, []);
   return <Provider value={value}>{children}</Provider>;

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

@@ -8,13 +8,10 @@ import {
   useThemeMode,
   useThemePreference,
 } from "./theme-provider";
-import {makeDefaultPalette, ThemePalette} from "./palette-generator";
-import {defaultDarkTheme, defaultLightTheme} from "./theme-styles";
-import {createInlineTheme, getThemeColors} from "./design-system";
-
-jest.unmock("./create-inline-theme");
-
-const palette = makeDefaultPalette();
+import type {ThemePalette} from "./palette-generator";
+import {defaultDarkTheme, defaultLightTheme, defaultPalette} from "./theme-styles";
+import {createInlineStyles, getThemeColors} from "./design-system";
+import {storeWarmPreference} from "./theme-settings";
 
 function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
   const theme = useTheme();
@@ -49,6 +46,7 @@ describe("RootThemeProvider", () => {
   beforeEach(() => {
     document.documentElement.className = "";
     document.documentElement.style.colorScheme = "";
+    localStorage.clear();
   });
 
   describe("context provision", () => {
@@ -200,9 +198,9 @@ describe("RootThemeProvider", () => {
 
   describe("diff optimization integrity", () => {
     it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
-      const lightStyles = createInlineTheme(defaultLightTheme, []);
-      const lightTheme = getThemeColors(null, "light", palette);
-      const actualStyles = createInlineTheme(lightTheme, []);
+      const lightStyles = createInlineStyles(defaultLightTheme);
+      const lightTheme = getThemeColors(null, "light", defaultPalette);
+      const actualStyles = createInlineStyles(lightTheme);
 
       // Count expected diff (theme from getThemeColors vs defaultLightTheme)
       let expectedDiffCount = 0;
@@ -248,7 +246,7 @@ describe("RootThemeProvider", () => {
 
   describe("setPalette", () => {
     it("setPalette updates theme colors", () => {
-      let capturedSetPalette: (p: ThemePalette) => void = () => {};
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
 
       function ThemeCapture() {
         const {setPalette} = useThematic();
@@ -265,10 +263,8 @@ describe("RootThemeProvider", () => {
 
       const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
 
-      // cardBg in light mode = white[0], so modify white scale
-      const newPalette = makeDefaultPalette();
-      newPalette.key = "test-palette"; // must change key - getThemeColors is memoized by key
-      newPalette.white = {...newPalette.white, 0: "oklch(0.9 0.05 200)"};
+      // cardBg in light mode = white, so modify white
+      const newPalette = {...defaultPalette, key: "test-palette", white: "oklch(0.9 0.05 200)"};
 
       act(() => capturedSetPalette(newPalette));
 
@@ -278,7 +274,7 @@ describe("RootThemeProvider", () => {
     });
 
     it("nested ThemeProvider inherits updated palette", () => {
-      let capturedSetPalette: (p: ThemePalette) => void = () => {};
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
 
       function PaletteControl() {
         const {setPalette} = useThematic();
@@ -302,9 +298,7 @@ describe("RootThemeProvider", () => {
 
       const initialCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
 
-      const newPalette = makeDefaultPalette();
-      newPalette.key = "test-palette-2";
-      newPalette.white = {...newPalette.white, 0: "oklch(0.8 0.02 100)"};
+      const newPalette = {...defaultPalette, key: "test-palette-2", white: "oklch(0.8 0.02 100)"};
 
       act(() => capturedSetPalette(newPalette));
 
@@ -312,5 +306,106 @@ describe("RootThemeProvider", () => {
       expect(updatedCardBg).toBe("oklch(0.8 0.02 100)");
       expect(updatedCardBg).not.toBe(initialCardBg);
     });
+
+    it("setPalette(null) resets to default palette", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function ThemeCapture() {
+        const {setPalette} = useThematic();
+        const theme = useTheme();
+        capturedSetPalette = setPalette;
+        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeCapture />
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+
+      const newPalette = {...defaultPalette, key: "test-override", white: "oklch(0.9 0.05 200)"};
+      act(() => capturedSetPalette(newPalette));
+      expect(screen.getByTestId("capture").getAttribute("data-card-bg")).toBe("oklch(0.9 0.05 200)");
+
+      act(() => capturedSetPalette(null));
+      expect(screen.getByTestId("capture").getAttribute("data-card-bg")).toBe(initialCardBg);
+    });
+
+    it("override palette takes precedence over warm preference", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function PaletteKeyDisplay() {
+        const {palette, setPalette} = useThematic();
+        capturedSetPalette = setPalette;
+        return <div data-testid="palette-key" data-key={palette.key} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+
+      const overridePalette = {...defaultPalette, key: "custom-override"};
+      act(() => capturedSetPalette(overridePalette));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("custom-override");
+
+      // Changing warm preference doesn't affect override
+      act(() => storeWarmPreference(true));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("custom-override");
+
+      // Clearing override picks up current warm preference
+      act(() => capturedSetPalette(null));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-user");
+    });
+  });
+
+  describe("warm preference / isArchitect", () => {
+    function PaletteKeyDisplay() {
+      const {palette} = useThematic();
+      return <div data-testid="palette-key" data-key={palette.key} />;
+    }
+
+    it("uses default palette when warm is off and not architect", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("default");
+    });
+
+    it("uses warm palette when warm preference is stored", () => {
+      storeWarmPreference(true);
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-user");
+    });
+
+    it("uses architect palette when isArchitect is true", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto" isArchitect>
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+    });
+
+    it("reacts to warm preference change at runtime", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto" isArchitect>
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+
+      act(() => storeWarmPreference(true));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-arch");
+    });
   });
 });

package/src/scale-generator.ts

@@ -1,8 +1,8 @@
 import {fromOKLCH} from "./color-utils";
 import type {ColorScale} from "./palette-generator";
 
-export type BasedScale12<T> = readonly [
-  base00: T,
+export type OneBasedScale<T> = readonly [
+  base00: null,
   step01: T,
   step02: T,
   step03: T,
@@ -17,7 +17,7 @@ export type BasedScale12<T> = readonly [
   step12: T
 ];
 
-export type Scale12<T> = readonly [
+export type ZeroBasedScale<T> = readonly [
   step01: T,
   step02: T,
   step03: T,
@@ -32,9 +32,13 @@ export type Scale12<T> = readonly [
   step12: T
 ];
 
+export function zeroBasedFromOneBased<T>(scale: OneBasedScale<T>) {
+  return scale.slice(1) as unknown as ZeroBasedScale<T>;
+}
+
 export interface ScaleCurves {
-  lightness: Scale12<number>; // 0-100 scale
-  chroma: Scale12<number>; // multipliers relative to peakChroma
+  lightness: ZeroBasedScale<number>; // 0-100 scale
+  chroma: ZeroBasedScale<number>; // multipliers relative to peakChroma
 }
 
 export interface ScaleConfig {
@@ -155,7 +159,7 @@ function applyContrast(L: number, contrast: number): number {
 }
 
 export function generateColorScale(config: ScaleConfig): ColorScale {
-  const {hue, chroma, mode, curves, contrast = 1, base = "hsl(0, 0%, 100%)"} = config;
+  const {hue, chroma, mode, curves, contrast = 1} = config;
 
   const defaultCurves = mode === "light" ? DEFAULT_LIGHT_CURVES : DEFAULT_DARK_CURVES;
   const {lightness, chroma: chromaCurve} = curves ?? defaultCurves;
@@ -166,7 +170,7 @@ export function generateColorScale(config: ScaleConfig): ColorScale {
     return fromOKLCH(adjustedL / 100, C, hue);
   });
 
-  return [base, ...steps] as unknown as ColorScale;
+  return [null, ...steps] as unknown as ColorScale;
 }
 
 /**
@@ -202,12 +206,10 @@ export function generateGrayScale(config: {
   chroma?: number;
   mode: "light" | "dark";
   contrast?: number;
-  base?: string;
 }): ColorScale {
-  const {hue = 0, chroma = 0, mode, contrast, base} = config;
+  const {hue = 0, chroma = 0, mode, contrast} = config;
   const curves = mode === "light" ? GRAY_CURVES : GRAY_DARK_CURVES;
-  const defaultBase = mode === "dark" ? "hsl(0, 0%, 5%)" : undefined;
-  return generateColorScale({hue, chroma, mode, contrast, curves, base: base ?? defaultBase});
+  return generateColorScale({hue, chroma, mode, contrast, curves});
 }
 
 // ============ HUE INTERPOLATION ============
@@ -329,19 +331,26 @@ export function paletteFromHueBoth(hue: number): {light: ColorScale; dark: Color
   };
 }
 
-const WHITE_ALPHAS: BasedScale12<number> = [1, 0, 0.01, 0.03, 0.06, 0.09, 0.12, 0.18, 0.25, 0.39, 0.45, 0.59, 0.92];
-const BLACK_ALPHAS: BasedScale12<number> = [1, 0.01, 0.03, 0.05, 0.07, 0.09, 0.11, 0.14, 0.22, 0.44, 0.48, 0.57, 0.91];
-
-function alphaScale(L: number, C: number, H: number, alphas: BasedScale12<number>): ColorScale {
-  return alphas.map((a) => fromOKLCH(L, C, H, a)) as {length: 13; [i: number]: string} as ColorScale;
-}
-
-export function generateWhiteScale(hue: number, chroma: number, luminosity = 1, chromaMul = 1): ColorScale {
+export function generateWhites(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
   const c = chroma * 0.1 * chromaMul;
-  return alphaScale((1 - chroma * 0.1) * luminosity, c, hue, WHITE_ALPHAS);
+  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 generateBlackScale(hue: number, chroma: number, luminosity = 1, chromaMul = 1): ColorScale {
+export function generateBlacks(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
   const c = chroma * 0.1 * chromaMul;
-  return alphaScale(chroma * 0.1 * 4 * luminosity, c, hue, BLACK_ALPHAS);
+  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,4 +1,6 @@
-import _, {isFunction, isObject} from "lodash";
+import compact from "lodash/compact";
+import isFunction from "lodash/isFunction";
+import isObject from "lodash/isObject";
 import {
   Children,
   ComponentType,
@@ -37,14 +39,14 @@ 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 [];

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}
     />
   );