@fibery/ui-kit 1.40.3 → 1.40.4

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

@@ -1,4 +1,3 @@
-import {css} from "@linaria/core";
 import _, {isFunction, isObject} from "lodash";
 import {
   Children,
@@ -18,23 +17,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,6 +32,7 @@ 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
@@ -73,7 +59,9 @@ const flattenGroupChildren: (
       .flat()
   );
 };
+
 const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
+
 export function MenuListVirtualized<
   Option,
   IsMulti extends boolean = boolean,
@@ -117,7 +105,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 +176,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 +220,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/select.tsx

@@ -25,7 +25,7 @@ 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";
@@ -94,6 +94,7 @@ function useSelectComponents<T, U extends boolean, V extends GroupBase<T>>({
 
   return {
     Menu,
+    MenuPortal,
     DropdownIndicator,
     ClearIndicator,
     MultiValueRemove: shouldHideMultiValueRemove ? NoClearIndicator : ClearIndicator,

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) {

package/src/static-palettes.ts

@@ -0,0 +1,146 @@
+import {makeDefaultPalette, type ThemePalette} from "./palette-generator";
+
+export interface LabPalettes {
+  make: () => ThemePalette;
+}
+
+export const StaticPalettes: LabPalettes[] = [
+  {
+    make: () => {
+      const base = makeDefaultPalette();
+      return {
+        ...base,
+        key: "vivid1",
+        base: [
+          "#fff",
+          "#ffe6f7",
+          "#ffccef",
+          "#ffb3e7",
+          "#ff99df",
+          "#ff80d7",
+          "#ff66cf",
+          "#ff4dc7",
+          "#ff33bf",
+          "#ff00aa",
+          "#e6009a",
+          "#cc0088",
+          "#990066",
+        ],
+        baseDark: [
+          "#1a0011",
+          "#330022",
+          "#4d0033",
+          "#660044",
+          "#800055",
+          "#990066",
+          "#b30077",
+          "#cc0088",
+          "#e6009a",
+          "#ff00aa",
+          "#ff33bf",
+          "#ff66cf",
+          "#ffccef",
+        ],
+        accent: [
+          "#fff",
+          "#e6ffff",
+          "#ccffff",
+          "#b3ffff",
+          "#99ffff",
+          "#80ffff",
+          "#66ffff",
+          "#4dffff",
+          "#33ffff",
+          "#00ffff",
+          "#00e6e6",
+          "#00cccc",
+          "#009999",
+        ],
+        accentDark: [
+          "#001a1a",
+          "#003333",
+          "#004d4d",
+          "#006666",
+          "#008080",
+          "#009999",
+          "#00b3b3",
+          "#00cccc",
+          "#00e6e6",
+          "#00ffff",
+          "#33ffff",
+          "#66ffff",
+          "#ccffff",
+        ],
+      };
+    },
+  },
+  {
+    make: () => {
+      const base = makeDefaultPalette();
+      return {
+        ...base,
+        key: "vivid2",
+        base: [
+          "#FFFFFF",
+          "#e6ffe6",
+          "#ccffcc",
+          "#99FF99",
+          "#66ff66",
+          "#33ff33",
+          "#00ff00",
+          "#00e600",
+          "#00CC00",
+          "#00b300",
+          "#009900",
+          "#007700",
+          "#005500",
+        ],
+        baseDark: [
+          "#001a00",
+          "#003300",
+          "#004d00",
+          "#006600",
+          "#008000",
+          "#009900",
+          "#00b300",
+          "#00cc00",
+          "#00e600",
+          "#00ff00",
+          "#33ff33",
+          "#66ff66",
+          "#ccffcc",
+        ],
+        accent: [
+          "#fff",
+          "#fff5e6",
+          "#ffebcc",
+          "#ffd699",
+          "#ffc266",
+          "#ffad33",
+          "#ff9900",
+          "#e68a00",
+          "#cc7a00",
+          "#b36b00",
+          "#995c00",
+          "#804d00",
+          "#663d00",
+        ],
+        accentDark: [
+          "#1a1200",
+          "#332400",
+          "#4d3600",
+          "#664800",
+          "#805a00",
+          "#996b00",
+          "#b37d00",
+          "#cc8f00",
+          "#e6a000",
+          "#ff9900",
+          "#ffad33",
+          "#ffc266",
+          "#ffebcc",
+        ],
+      };
+    },
+  },
+];

package/src/thematic-color-picker.tsx

@@ -0,0 +1,266 @@
+import {css} from "@linaria/core";
+import {useCallback, useEffect, useRef, useState} from "react";
+// @ts-expect-error - no types
+import {ColorWrap, EditableInput, Hue, Saturation} from "react-color/lib/components/common";
+import {Popover} from "./popover";
+import {getAlpha, produceColor, setAlpha} from "./color-utils";
+import {border, space} from "./design-system";
+
+const colorPickerPopupCss = css`
+  padding: ${space.s8}px;
+  width: 200px;
+`;
+
+const saturationWrapperCss = css`
+  position: relative;
+  height: 120px;
+`;
+
+const hueWrapperCss = css`
+  height: 12px;
+  position: relative;
+  margin-top: ${space.s8}px;
+`;
+
+const hexInputWrapperCss = css`
+  margin-top: ${space.s8}px;
+`;
+
+const hexInputStyle = {
+  input: {
+    width: "100%",
+    padding: `${space.s4}px ${space.s8}px`,
+    border: `1px solid var(--fibery-color-separator-color)`,
+    borderRadius: border.radius4,
+    background: "var(--fibery-color-bg-popup)",
+    color: "var(--fibery-color-text-color)",
+    fontSize: 11,
+    fontFamily: "monospace",
+  },
+};
+
+const colorPickerPopoverCss = css`
+  z-index: 999999;
+`;
+
+const SliderPointer = () => (
+  <div
+    className={css`
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+      transform: translate(-50%, -50%);
+    `}
+  />
+);
+
+const alphaSliderCss = css`
+  height: 12px;
+  position: relative;
+  margin-top: ${space.s8}px;
+  background: linear-gradient(to right, transparent, var(--alpha-color));
+  border-radius: ${border.radius4}px;
+`;
+
+const alphaTrackCss = css`
+  position: absolute;
+  inset: 0;
+  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;
+  border-radius: ${border.radius4}px;
+  z-index: -1;
+`;
+
+type ColorPickerInnerProps = {
+  hex: string;
+  onChange: (color: {hex: string}) => void;
+  hsl: {h: number; s: number; l: number};
+  hsv: {h: number; s: number; v: number};
+  originalColor: string;
+  onColorWithAlpha: (color: string) => void;
+};
+
+const ColorPickerInner = ColorWrap(
+  ({hex, onChange, hsl, hsv, originalColor, onColorWithAlpha}: ColorPickerInnerProps) => {
+    const alpha = getAlpha(originalColor);
+
+    const handleAlphaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newAlpha = parseFloat(e.target.value);
+      const newColor = produceColor(hex, (c) => setAlpha(c, newAlpha));
+      onColorWithAlpha(newColor);
+    };
+
+    return (
+      <div className={colorPickerPopupCss}>
+        <div className={saturationWrapperCss}>
+          <Saturation hsl={hsl} hsv={hsv} onChange={onChange} pointer={SliderPointer} />
+        </div>
+        <div className={hueWrapperCss}>
+          <Hue hsl={hsl} onChange={onChange} pointer={SliderPointer} />
+        </div>
+        <div className={alphaSliderCss} style={{"--alpha-color": hex} as React.CSSProperties}>
+          <div className={alphaTrackCss} />
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={alpha}
+            onChange={handleAlphaChange}
+            className={css`
+              width: 100%;
+              height: 100%;
+              opacity: 0;
+              cursor: pointer;
+            `}
+          />
+          <div
+            className={css`
+              position: absolute;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              pointer-events: none;
+            `}
+            style={{left: `${alpha * 100}%`}}
+          >
+            <SliderPointer />
+          </div>
+        </div>
+        <div className={hexInputWrapperCss}>
+          <EditableInput
+            style={hexInputStyle}
+            value={alpha < 1 ? `${hex} ${Math.round(alpha * 100)}%` : hex}
+            onChange={(value: string | {hex: string}) => {
+              const input = typeof value === "string" ? value : value.hex;
+              const match = input.match(/^(#?[0-9a-fA-F]{6})\s*(\d+%)?$/);
+              if (match) {
+                const newHex = match[1].startsWith("#") ? match[1] : `#${match[1]}`;
+                const newAlpha = match[2] ? parseInt(match[2]) / 100 : alpha;
+                const newColor = produceColor(newHex, (c) => setAlpha(c, newAlpha));
+                onColorWithAlpha(newColor);
+              }
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+const CHECKERBOARD = "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px";
+
+function swatchStyle(color: string): React.CSSProperties {
+  const hasAlpha = getAlpha(color) < 1;
+  return hasAlpha ? {background: `linear-gradient(${color}, ${color}), ${CHECKERBOARD}`} : {background: color};
+}
+
+export const swatchCss = css`
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--fibery-color-separator-color);
+`;
+
+export const swatchClickableCss = css`
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.15);
+  }
+`;
+
+export function SwatchWithPicker({
+  color,
+  title,
+  onChange,
+  onHighlight,
+  onHighlightEnd,
+  isAltPressed,
+}: {
+  color: string;
+  title: string;
+  onChange?: (color: string) => void;
+  onHighlight?: () => void;
+  onHighlightEnd?: () => void;
+  isAltPressed?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [triggerEl, setTriggerEl] = useState<HTMLDivElement | null>(null);
+
+  const handleClose = useCallback(() => setOpen(false), []);
+
+  const handleColorChange = useCallback(
+    (newColor: {hex: string}) => {
+      const alpha = getAlpha(color);
+      const newColorWithAlpha = produceColor(newColor.hex, (c) => setAlpha(c, alpha));
+      onChange?.(newColorWithAlpha);
+    },
+    [onChange, color]
+  );
+
+  const handleColorWithAlpha = useCallback(
+    (newColor: string) => {
+      onChange?.(newColor);
+    },
+    [onChange]
+  );
+
+  const handleClick = useCallback(() => {
+    if (onChange) {
+      setOpen(true);
+    }
+  }, [onChange]);
+
+  const hoveredRef = useRef(false);
+  const wasHighlightingRef = useRef(false);
+
+  useEffect(() => {
+    const shouldHighlight = hoveredRef.current && isAltPressed;
+    if (shouldHighlight) {
+      onHighlight?.();
+      wasHighlightingRef.current = true;
+    } else if (wasHighlightingRef.current) {
+      onHighlightEnd?.();
+      wasHighlightingRef.current = false;
+    }
+  }, [isAltPressed, onHighlight, onHighlightEnd]);
+
+  return (
+    <>
+      <div
+        ref={setTriggerEl}
+        className={`${swatchCss} ${onChange ? swatchClickableCss : ""}`}
+        style={{...swatchStyle(color), ...(isAltPressed && onHighlight ? {cursor: "crosshair"} : undefined)}}
+        title={title}
+        onClick={handleClick}
+        onMouseEnter={() => {
+          hoveredRef.current = true;
+          if (isAltPressed) {
+            onHighlight?.();
+            wasHighlightingRef.current = true;
+          }
+        }}
+        onMouseLeave={() => {
+          hoveredRef.current = false;
+          if (wasHighlightingRef.current) {
+            onHighlightEnd?.();
+            wasHighlightingRef.current = false;
+          }
+        }}
+      />
+      <Popover.Root open={open} onClose={handleClose}>
+        <Popover.Trigger reference={triggerEl} />
+        <Popover.Portal>
+          <Popover.Content placement="top" offset={[0, 4]} popupContainerClassName={colorPickerPopoverCss}>
+            <ColorPickerInner
+              color={color}
+              onChange={handleColorChange}
+              originalColor={color}
+              onColorWithAlpha={handleColorWithAlpha}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </>
+  );
+}

package/src/thematic-constants.tsx

@@ -0,0 +1,27 @@
+import {type ThematicPrefs} from "./palette-generator";
+import type {ThemePreference} from "./theme-settings";
+import AppearanceLight from "./icons/react/AppearanceLight";
+import AppearanceDark from "./icons/react/AppearanceDark";
+import AppearanceAuto from "./icons/react/AppearanceAuto";
+
+export const defaultPrefs: ThematicPrefs = {
+  baseHue: 0,
+  baseChroma: 0,
+  accentHue: 264,
+  accentChroma: 0.16,
+  contrast: 1,
+};
+
+export const HIGHLIGHT_COLOR = "#ff00ff";
+
+export const themeIcons: Record<ThemePreference, React.ReactNode> = {
+  light: <AppearanceLight />,
+  dark: <AppearanceDark />,
+  auto: <AppearanceAuto />,
+};
+
+export const nextThemePref: Record<ThemePreference, ThemePreference> = {
+  light: "dark",
+  dark: "light",
+  auto: "light",
+};