@fibery/ui-kit 1.40.3 → 1.41.0

package/src/color-utils.ts

@@ -0,0 +1,215 @@
+import type {Coords, PlainColorObject} from "colorjs.io/fn";
+import {
+  ColorSpace,
+  contrastWCAG21,
+  deltaE76,
+  getLuminance as getLuminanceUnsafe,
+  HSL,
+  Lab,
+  LCH,
+  mix,
+  OKLCH,
+  P3,
+  parse,
+  serialize,
+  set,
+  sRGB,
+  to,
+  toGamut,
+} from "colorjs.io/fn";
+
+ColorSpace.register(sRGB);
+ColorSpace.register(HSL);
+ColorSpace.register(Lab);
+ColorSpace.register(LCH);
+ColorSpace.register(OKLCH);
+ColorSpace.register(P3);
+
+type Color = PlainColorObject;
+
+// FIXME consolidate as common util
+const isFlagPresent = (flag: string) => globalThis.window && new RegExp(`[?&]${flag}\\b`).test(window.location.search);
+
+const defaultColorSpace = isFlagPresent("oklch") ? OKLCH : sRGB;
+
+function colorSafe(
+  color: string,
+  fallback = "hsl(220, 62%, 56%)" /* formerly brandColor.blue, currently accent[9] */,
+  space: ColorSpace = defaultColorSpace
+): Color {
+  try {
+    return to(color, space);
+  } catch {
+    return to(fallback, space);
+  }
+}
+
+const coords = (a: number, b: number, c: number): Coords => [a, b, c];
+const clamp01 = (v: number | null): number => Math.max(0, Math.min(1, v ?? 0));
+const white: PlainColorObject = {space: sRGB, coords: [1, 1, 1], alpha: 1};
+const black: PlainColorObject = {space: sRGB, coords: [0, 0, 0], alpha: 1};
+
+function serializesRGB(color: Color): string {
+  const rgb = toGamut(to(color, sRGB), {space: sRGB});
+  const r = Math.round(clamp01(rgb.coords[0]) * 255);
+  const g = Math.round(clamp01(rgb.coords[1]) * 255);
+  const b = Math.round(clamp01(rgb.coords[2]) * 255);
+  const a = rgb.alpha ?? 1;
+  return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`;
+}
+
+type ColorTransform = (color: PlainColorObject) => PlainColorObject | void;
+
+export function produceColor(
+  color: string,
+  transforms: ColorTransform | ColorTransform[],
+  space: ColorSpace = defaultColorSpace
+): string {
+  let c = colorSafe(color);
+  for (const transform of Array.isArray(transforms) ? transforms : [transforms]) {
+    const result = transform(c);
+    if (result !== undefined) {
+      c = result;
+    }
+  }
+  // TODO make sRGB default space and apply colorjs.io outputs CSS Level 4 format (rgb(100% 0% 0%))
+  //  instead of compatible format (rgb(255,0,0))
+  if (space === sRGB) {
+    return serializesRGB(c);
+  }
+  return serialize(to(c, space));
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Set relative luminance by binary-search interpolation toward white/black in sRGB.
+ * This targets relative luminance (Y in XYZ), not perceptual lightness.
+ */
+export function setLuminanceChroma(color: PlainColorObject, target: number): PlainColorObject {
+  const curLum = getLuminanceUnsafe(color);
+  if (Math.abs(curLum - target) < 1e-7) {
+    return color;
+  }
+
+  const endpoint = target > curLum ? white : black;
+  let lo = 0;
+  let hi = 1;
+
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2;
+    const lum = getLuminanceUnsafe(mix(color, endpoint, mid, {space: sRGB}));
+    if (target > curLum ? lum < target : lum > target) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+
+  const result = mix(color, endpoint, (lo + hi) / 2, {space: sRGB});
+  result.alpha = color.alpha ?? 1;
+  return result;
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Darken by reducing L* in Lab color space using colorjs.io set().
+ * Matches chroma-js: darken(1) reduces Lab L* by 18 units.
+ * Negative L* values are handled by toGamut during serialization.
+ */
+export function darkenChroma(color: PlainColorObject, amount: number): PlainColorObject {
+  return set(color, "lab.l", (l) => l - amount * 18);
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Desaturate by reducing C (chroma) in LCH color space using colorjs.io set().
+ * Matches chroma-js: desaturate(1) reduces LCH C by 18 units.
+ * Negative C values are handled by toGamut during serialization.
+ */
+export function desaturateChroma(color: PlainColorObject, amount: number): PlainColorObject {
+  return set(color, "lch.c", (c) => c - amount * 18);
+}
+
+export function setAlpha(color: PlainColorObject, value: number): void {
+  color.alpha = value;
+}
+
+export function isValidColor(color: string): boolean {
+  if (color === "transparent") {
+    return true;
+  }
+  try {
+    parse(color);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function getAlpha(color: string): number {
+  return colorSafe(color).alpha ?? 1;
+}
+
+export function getContrastRatio(color1: string, color2: string): number {
+  return contrastWCAG21(colorSafe(color1), colorSafe(color2));
+}
+
+export function getColorDistance(color1: string, color2: string): number {
+  return deltaE76(colorSafe(color1), colorSafe(color2));
+}
+
+export function getLuminance(color: string): number {
+  return getLuminanceUnsafe(colorSafe(color));
+}
+
+export function fromHSL(h: number, s: number, l: number): string {
+  return serializesRGB({space: HSL, coords: coords(h, s * 100, l * 100), alpha: null});
+}
+
+export function fromOKLCH(L: number, C: number, H: number, alpha = 1): string {
+  return serializesRGB({space: OKLCH, coords: [L, C, H] as [number, number, number], alpha});
+}
+
+export function toOKLCH(color: string) {
+  return produceColor(color, [], OKLCH);
+}
+
+export function toRGB(color: string) {
+  return produceColor(color, [], sRGB);
+}
+
+export function getHsl(color: string): [number, number, number] {
+  const c = to(colorSafe(color), HSL);
+  return [c.coords[0] || 0, (c.coords[1] || 0) / 100, (c.coords[2] || 0) / 100];
+}
+
+/** @deprecated do not use that, chroma-js compatibility */
+export function clampRgb(color: PlainColorObject): PlainColorObject {
+  const rgb = to(color, sRGB);
+  rgb.coords = rgb.coords.map(clamp01) as Coords;
+  return rgb;
+}
+
+export function toCss(color: string): string {
+  return produceColor(color, []);
+}
+
+/**
+ * @deprecated use toCss instead
+ */
+export function toHex(color: string): string {
+  const c = toGamut(to(colorSafe(color), sRGB), {space: sRGB});
+  const r = Math.round(clamp01(c.coords[0]) * 255);
+  const g = Math.round(clamp01(c.coords[1]) * 255);
+  const b = Math.round(clamp01(c.coords[2]) * 255);
+  const a = c.alpha ?? 1;
+  const hex = "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+  return a < 1
+    ? hex +
+        Math.round(a * 255)
+          .toString(16)
+          .padStart(2, "0")
+    : hex;
+}
+
+export {ColorSpace, mix, OKLCH, parse, set, sRGB, to, HSL, Lab, LCH};

package/src/command-menu/index.tsx

@@ -124,6 +124,7 @@ export const commandItemCss = css`
   min-height: ${layoutVars.menuItemHeight};
   margin: 0 ${space.s4}px;
   border-radius: ${border.radius6}px;
+  color: ${themeVars.textColor};
 
   &[data-selected="true"] {
     margin: 0 4px;

package/src/comment.tsx

@@ -6,7 +6,7 @@ import {border, iconSize, space, textStyles, themeVars, transition} from "./desi
 import {formatDateFromNow} from "./format-date-from-now";
 import {LoadingSausage, LoadingSausageList} from "./loading-sausage";
 import {Tooltip} from "./tooltip";
-import {isMobile} from "./platform";
+import {useIsPhone} from "./use-is-phone";
 
 export const commentContentStyle = css`
   ${{
@@ -115,6 +115,7 @@ export const Comment = memo(
 
     const {formatted, relative} = formatDateFromNow(date, {format: dateTimeFormat});
     const IconComponent = icon ? icon : null;
+    const isPhone = useIsPhone();
     return (
       <div
         ref={ref}
@@ -153,7 +154,7 @@ export const Comment = memo(
             <div
               className={cx(
                 actionsClassName,
-                (actionsShowed || isMobile) &&
+                (actionsShowed || isPhone) &&
                   css`
                     display: flex;
                   `

package/src/context-menu/index.tsx

@@ -4,6 +4,7 @@ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";
+import {RadixPortalThemeProvider} from "../theme-provider";
 
 export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
   <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
@@ -94,12 +95,14 @@ export type ContentProps = ContextMenuPrimitive.ContextMenuContentProps;
 export const Content = forwardRef<HTMLDivElement, ContentProps>(function ContextMenuContent({className, ...rest}, ref) {
   return (
     <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        ref={ref}
-        className={cx(dropdownMenuContentStyles, className)}
-        collisionPadding={space.s12 + space.s8}
-        {...rest}
-      />
+      <RadixPortalThemeProvider>
+        <ContextMenuPrimitive.Content
+          ref={ref}
+          className={cx(dropdownMenuContentStyles, className)}
+          collisionPadding={space.s12 + space.s8}
+          {...rest}
+        />
+      </RadixPortalThemeProvider>
     </ContextMenuPrimitive.Portal>
   );
 });
@@ -132,7 +135,9 @@ export const SubContent = forwardRef<HTMLDivElement, ContextMenuPrimitive.Contex
   function DropdownMenuSubContent({className, ...rest}, ref) {
     return (
       <ContextMenuPrimitive.Portal>
-        <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+        <RadixPortalThemeProvider>
+          <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+        </RadixPortalThemeProvider>
       </ContextMenuPrimitive.Portal>
     );
   }

package/src/date-picker/contexts.ts

@@ -1,7 +1,7 @@
 import {createContext} from "react";
-import _ from "lodash";
+import noop from "lodash/noop";
 
 export const StartEndFocusContext = createContext({
   focusOnStart: true,
-  setFocusOnStart: _.noop,
+  setFocusOnStart: noop,
 });

package/src/date-picker/date-range-picker.tsx

@@ -7,7 +7,7 @@ import {css} from "@linaria/core";
 import "react-day-picker/dist/style.css";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {forwardRef, useCallback, useRef} from "react";
-import _ from "lodash";
+import omit from "lodash/omit";
 import moment from "moment";
 import {FakeDateInputWrapper} from "./fake-date-input";
 import {formatDateRangeInputValue} from "./utils";
@@ -27,7 +27,6 @@ export const DateRangePicker = forwardRef<
     bypassedRef,
     value,
     disabled = false,
-    renderInPortal = true,
     onChange,
     showTime = false,
     dateFormat,
@@ -107,14 +106,14 @@ export const DateRangePicker = forwardRef<
         popupContainerClassName={css`
           z-index: 10001;
         `}
-        renderInPortal={renderInPortal}
+        renderInPortal={true}
         preventOverflowOptions={{
           altAxis: true,
         }}
       >
         <DateRangePickerPopupContent
           ref={ref}
-          {..._.omit(props, ["onChange", "value"])}
+          {...omit(props, ["onChange", "value"])}
           onChange={onDatesChange}
           value={dateValue}
           onKeyDown={onDatePickerKeyDown}

package/src/date-picker/single-date-picker.tsx

@@ -1,17 +1,22 @@
-import {ControlledDatePickerProps, RelativeDateValue, SingleDatePickerProps} from "./types";
+import {
+  ControlledDatePickerProps,
+  RelativeDateValue,
+  SingleDatePickerPopoverContentProps,
+  SingleDatePickerProps,
+} from "./types";
 import {FakeDateInputWrapper} from "./fake-date-input";
 import {space, themeVars} from "../design-system";
 import {withPopupControl} from "./with-popup-control";
-import {css} from "@linaria/core";
+import {css, cx} from "@linaria/core";
 import "react-day-picker/dist/style.css";
 import {SingleDatePickerPopupContent} from "./single-date-picker-popup-content";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {forwardRef, useCallback, useRef, useState} from "react";
 import moment, {Moment} from "moment";
-import _ from "lodash";
+import omit from "lodash/omit";
 import {EmptyValue} from "../empty-value";
 import {formatDateInputValue} from "./utils";
-import {PopoverOld} from "../popover";
+import {Popover} from "../popover";
 import {focusable} from "tabbable";
 import {TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import {RelativeDatePicker} from "./relative-date-picker";
@@ -69,43 +74,18 @@ interface ControlledSingleDatePickerWithForwardRefType extends React.FC<Uncontro
   >;
 }
 
-export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
-  {
-    setValue: (value: string) => void;
-  },
-  SingleDatePickerProps<boolean>
+type DatePickerRef = {
+  setValue: (value: string) => void;
+};
+
+export const SingleDatePickerPopoverContent = forwardRef<
+  DatePickerRef,
+  {className?: string} & SingleDatePickerPopoverContentProps<boolean>
 >((props, ref) => {
-  const {
-    title,
-    open,
-    onOpen,
-    onClose,
-    children,
-    bypassedRef,
-    value,
-    disabled = false,
-    placeholder,
-    renderInPortal = true,
-    onChange,
-    showTime = false,
-    dateFormat,
-    dateTimeFormat,
-    onKeyDown,
-    allowRelativeDate = false,
-    relativeDateToExactDate,
-  } = props;
+  const {className, value, onChange, onKeyDown, allowRelativeDate = false, relativeDateToExactDate} = props;
 
   const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
 
-  const dateValueFormatted = isRelativeValue
-    ? formatRelativeDate(value as RelativeDateValue)
-    : value
-    ? formatDateInputValue((value as Moment).toDate(), {
-        showTime,
-        dateFormat,
-        dateTimeFormat,
-      })
-    : null;
   const onDateChange = useCallback(
     (value: Date | null) => {
       // @ts-expect-error fix types
@@ -124,12 +104,6 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
 
   const fakeWrapperRef = useRef<HTMLDivElement>(null);
 
-  const pickerValue = children || (
-    <FakeDateInputWrapper disabled={disabled} isPickerOpen={open}>
-      {!dateValueFormatted ? <EmptyValue>{placeholder}</EmptyValue> : <>{dateValueFormatted}</>}
-    </FakeDateInputWrapper>
-  );
-
   const onDatePickerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Tab" || e.key === "Enter") {
@@ -151,93 +125,147 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
     allowRelativeDate && (isRelativeValue || value === null) ? "relative" : "exact"
   );
 
+  return (
+    <div
+      className={cx(
+        css`
+          display: flex;
+          flex-direction: column;
+        `,
+        allowRelativeDate &&
+          css`
+            min-width: 320px;
+          `,
+        className
+      )}
+    >
+      {allowRelativeDate ? (
+        <div
+          className={css`
+            border-bottom: ${themeVars.separators.opacity5};
+          `}
+        >
+          <TabNavRoot>
+            <TabNavList
+              className={css`
+                padding-left: ${space.s12}px;
+                padding-right: ${space.s12}px;
+                padding-top: ${space.s6}px;
+                display: flex;
+                width: 100%;
+                justify-content: space-evenly;
+              `}
+            >
+              <TabNavLink
+                className={tabNavLinkClassName}
+                itemClassName={tabItemClassName}
+                active={activeButton === "relative"}
+                onSelect={() => setActiveButton("relative")}
+              >
+                Relative
+              </TabNavLink>
+              <TabNavLink
+                className={tabNavLinkClassName}
+                itemClassName={tabItemClassName}
+                active={activeButton === "exact"}
+                onSelect={() => setActiveButton("exact")}
+              >
+                Exact
+              </TabNavLink>
+            </TabNavList>
+          </TabNavRoot>
+        </div>
+      ) : null}
+      <div>
+        {!allowRelativeDate || activeButton === "exact" ? (
+          <SingleDatePickerPopupContent
+            ref={ref}
+            {...omit(props, ["onChange", "value"])}
+            onChange={onDateChange}
+            value={!isRelativeValue && value ? (value as Moment).toDate() : null}
+            onKeyDown={onDatePickerKeyDown}
+          />
+        ) : (
+          <RelativeDatePicker
+            value={isRelativeValue ? (value as RelativeDateValue) : null}
+            onChange={onRelativeDateChange}
+            relativeDateToExactDate={relativeDateToExactDate}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
+  DatePickerRef,
+  SingleDatePickerProps<boolean>
+>((props, ref) => {
+  const {
+    title,
+    open,
+    onOpen,
+    onClose,
+    children,
+    bypassedRef,
+    value,
+    disabled = false,
+    placeholder,
+    showTime = false,
+    dateFormat,
+    dateTimeFormat,
+    allowRelativeDate = false,
+  } = props;
+
+  const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
+
+  const dateValueFormatted = isRelativeValue
+    ? formatRelativeDate(value as RelativeDateValue)
+    : value
+    ? formatDateInputValue((value as Moment).toDate(), {
+        showTime,
+        dateFormat,
+        dateTimeFormat,
+      })
+    : null;
+
+  const fakeWrapperRef = useRef<HTMLDivElement>(null);
+
+  const pickerValue = children || (
+    <FakeDateInputWrapper disabled={disabled} isPickerOpen={open}>
+      {!dateValueFormatted ? <EmptyValue>{placeholder}</EmptyValue> : <>{dateValueFormatted}</>}
+    </FakeDateInputWrapper>
+  );
+
   if (disabled) {
     return pickerValue;
   }
 
   return (
     <div ref={bypassedRef}>
-      <PopoverOld
-        title={title}
-        offset={[0, space.s6]}
-        trigger={
+      <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
+        <Popover.Trigger>
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
             {pickerValue}
           </div>
-        }
-        placement="bottom-start"
-        open={open}
-        onOpen={onOpen}
-        onClose={onClose}
-        supportMobile
-        popupContainerClassName={css`
-          z-index: 10001;
-        `}
-        renderInPortal={renderInPortal}
-        preventOverflowOptions={{
-          altAxis: true,
-        }}
-      >
-        {allowRelativeDate ? (
-          <div
-            className={css`
-              border-bottom: ${themeVars.separators.opacity5};
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            title={title}
+            offset={[0, space.s6]}
+            placement="bottom-start"
+            supportMobile
+            popupContainerClassName={css`
+              z-index: 10001;
             `}
+            preventOverflowOptions={{
+              altAxis: true,
+            }}
           >
-            <TabNavRoot>
-              <TabNavList
-                className={css`
-                  padding-left: ${space.s12}px;
-                  padding-right: ${space.s12}px;
-                  padding-top: ${space.s6}px;
-                  display: flex;
-                  width: 100%;
-                  justify-content: space-evenly;
-                `}
-              >
-                <TabNavLink
-                  className={tabNavLinkClassName}
-                  itemClassName={tabItemClassName}
-                  active={activeButton === "relative"}
-                  onSelect={() => setActiveButton("relative")}
-                >
-                  Relative
-                </TabNavLink>
-                <TabNavLink
-                  className={tabNavLinkClassName}
-                  itemClassName={tabItemClassName}
-                  active={activeButton === "exact"}
-                  onSelect={() => setActiveButton("exact")}
-                >
-                  Exact
-                </TabNavLink>
-              </TabNavList>
-            </TabNavRoot>
-          </div>
-        ) : null}
-        <div
-          style={allowRelativeDate ? {minWidth: 320} : undefined}
-          className={css`
-            width: 100%;
-          `}
-        >
-          {!allowRelativeDate || activeButton === "exact" ? (
-            <SingleDatePickerPopupContent
-              ref={ref}
-              {..._.omit(props, ["onChange", "value"])}
-              onChange={onDateChange}
-              value={!isRelativeValue && value ? (value as Moment).toDate() : null}
-              onKeyDown={onDatePickerKeyDown}
-            />
-          ) : (
-            <RelativeDatePicker
-              value={isRelativeValue ? (value as RelativeDateValue) : null}
-              onChange={onRelativeDateChange}
-              relativeDateToExactDate={relativeDateToExactDate}
-            />
-          )}
-        </div>
-      </PopoverOld>
+            <SingleDatePickerPopoverContent ref={ref} {...props} />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 });

package/src/date-picker/types.ts

@@ -27,7 +27,6 @@ export type DatePickerCommonProps = {
   allowClear?: boolean;
   bypassedRef?: React.Ref<$TSFixMe>;
   disabled?: boolean;
-  renderInPortal?: boolean;
   onKeyDown?: React.KeyboardEventHandler<$TSFixMe>;
   placeholder: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
@@ -49,10 +48,12 @@ export type NativeDateRangePickerProps = {
 
 export type ControlledDatePickerProps = {open: boolean; onOpen: () => void; onClose: () => void};
 
-export type SingleDatePickerProps<IsRelativeDate extends boolean = false> = DatePickerCommonProps &
-  ControlledDatePickerProps &
+export type SingleDatePickerPopoverContentProps<IsRelativeDate extends boolean = false> = DatePickerCommonProps &
   MomentSingleDateProps<IsRelativeDate> & {
     allowRelativeDate?: IsRelativeDate;
   } & (IsRelativeDate extends true
     ? {relativeDateToExactDate?: (value: RelativeDateValue) => string} // Required if IsRelativeDate is true
     : {relativeDateToExactDate?: never}); // Undefined if IsRelativeDate is false;
+
+export type SingleDatePickerProps<IsRelativeDate extends boolean = false> = ControlledDatePickerProps &
+  SingleDatePickerPopoverContentProps<IsRelativeDate>;

package/src/day-select/iso-week-day-select.tsx

@@ -1,8 +1,8 @@
-import _ from "lodash";
+import range from "lodash/range";
 import {DaySelect, Props} from "./day-select";
 import moment from "moment";
 
-const isoWeekDays = _.range(1, 8).map((day) => {
+const isoWeekDays = range(1, 8).map((day) => {
   return {
     key: String(day),
     title: moment().isoWeekday(day).format("dd").charAt(0),