@fibery/ui-kit 1.40.4 → 1.42.0

package/src/color-utils.ts

@@ -1,4 +1,4 @@
-import type {ColorConstructor, Coords, PlainColorObject} from "colorjs.io/fn";
+import type {Coords, PlainColorObject} from "colorjs.io/fn";
 import {
   ColorSpace,
   contrastWCAG21,
@@ -25,13 +25,22 @@ ColorSpace.register(LCH);
 ColorSpace.register(OKLCH);
 ColorSpace.register(P3);
 
-type Color = PlainColorObject | ColorConstructor;
+type Color = PlainColorObject;
 
-function colorSafe(color: string, fallback = "#4978D4"): Color {
+// 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 parse(color);
+    return to(color, space);
   } catch {
-    return parse(fallback);
+    return to(fallback, space);
   }
 }
 
@@ -51,8 +60,12 @@ function serializesRGB(color: Color): string {
 
 type ColorTransform = (color: PlainColorObject) => PlainColorObject | void;
 
-export function produceColor(color: string, transforms: ColorTransform | ColorTransform[], space?: ColorSpace): string {
-  let c = to(colorSafe(color), sRGB);
+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) {
@@ -61,7 +74,7 @@ export function produceColor(color: string, transforms: ColorTransform | ColorTr
   }
   // 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 === undefined) {
+  if (space === sRGB) {
     return serializesRGB(c);
   }
   return serialize(to(c, space));
@@ -161,6 +174,10 @@ 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];
@@ -177,4 +194,22 @@ 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/context-menu/index.tsx

@@ -4,7 +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 {ThemeProvider} from "../theme-provider";
+import {RadixPortalThemeProvider} from "../theme-provider";
 
 export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
   <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
@@ -95,14 +95,14 @@ export type ContentProps = ContextMenuPrimitive.ContextMenuContentProps;
 export const Content = forwardRef<HTMLDivElement, ContentProps>(function ContextMenuContent({className, ...rest}, ref) {
   return (
     <ContextMenuPrimitive.Portal>
-      <ThemeProvider portal>
+      <RadixPortalThemeProvider>
         <ContextMenuPrimitive.Content
           ref={ref}
           className={cx(dropdownMenuContentStyles, className)}
           collisionPadding={space.s12 + space.s8}
           {...rest}
         />
-      </ThemeProvider>
+      </RadixPortalThemeProvider>
     </ContextMenuPrimitive.Portal>
   );
 });
@@ -135,9 +135,9 @@ export const SubContent = forwardRef<HTMLDivElement, ContextMenuPrimitive.Contex
   function DropdownMenuSubContent({className, ...rest}, ref) {
     return (
       <ContextMenuPrimitive.Portal>
-        <ThemeProvider portal>
+        <RadixPortalThemeProvider>
           <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
-        </ThemeProvider>
+        </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-popup-content.tsx

@@ -41,7 +41,6 @@ export const DateRangePickerPopupContent = forwardRef<
     timeFormat,
     dateTimeFormat,
     header,
-    bypassedRef,
     onKeyDown,
     weekStartsOn,
     weekends,
@@ -148,7 +147,7 @@ export const DateRangePickerPopupContent = forwardRef<
   const weekendsForMonth = useMemo(() => getWeekendsForMonth(month, weekends), [month, weekends]);
 
   return (
-    <div className={datePickerStylesOverrideClassName} ref={bypassedRef} onKeyDown={onKeyDown}>
+    <div className={datePickerStylesOverrideClassName} onKeyDown={onKeyDown}>
       {header}
       {showInput && (
         <DateRangeInput

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

@@ -1,5 +1,5 @@
 import {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
-import {PopoverOld} from "../popover";
+import {Popover} from "../popover";
 import {space} from "../design-system";
 import {withPopupControl} from "./with-popup-control";
 import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
@@ -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";
@@ -24,10 +24,8 @@ export const DateRangePicker = forwardRef<
     onOpen,
     onClose,
     children,
-    bypassedRef,
     value,
     disabled = false,
-    renderInPortal = true,
     onChange,
     showTime = false,
     dateFormat,
@@ -90,36 +88,36 @@ export const DateRangePicker = forwardRef<
   }
 
   return (
-    <div ref={bypassedRef}>
-      <PopoverOld
-        title={title}
-        offset={[0, space.s6]}
-        trigger={
+    <div>
+      <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
+        <Popover.Trigger>
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
             {pickerValue}
           </div>
-        }
-        supportMobile
-        placement="bottom-start"
-        open={open}
-        onOpen={onOpen}
-        onClose={onClose}
-        popupContainerClassName={css`
-          z-index: 10001;
-        `}
-        renderInPortal={renderInPortal}
-        preventOverflowOptions={{
-          altAxis: true,
-        }}
-      >
-        <DateRangePickerPopupContent
-          ref={ref}
-          {..._.omit(props, ["onChange", "value"])}
-          onChange={onDatesChange}
-          value={dateValue}
-          onKeyDown={onDatePickerKeyDown}
-        />
-      </PopoverOld>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            title={title}
+            offset={[0, space.s6]}
+            supportMobile
+            placement="bottom-start"
+            popupContainerClassName={css`
+              z-index: 10001;
+            `}
+            preventOverflowOptions={{
+              altAxis: true,
+            }}
+          >
+            <DateRangePickerPopupContent
+              ref={ref}
+              {...omit(props, ["onChange", "value"])}
+              onChange={onDatesChange}
+              value={dateValue}
+              onKeyDown={onDatePickerKeyDown}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 });

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

@@ -28,7 +28,6 @@ export const SingleDatePickerPopupContent = forwardRef<
     timeFormat,
     dateTimeFormat,
     onKeyDown,
-    bypassedRef,
     weekStartsOn,
     weekends,
   } = props;
@@ -47,7 +46,7 @@ export const SingleDatePickerPopupContent = forwardRef<
   const weekendsForMonth = useMemo(() => getWeekendsForMonth(month, weekends), [month, weekends]);
 
   return (
-    <div className={datePickerStylesOverrideClassName} ref={bypassedRef} onKeyDown={onKeyDown}>
+    <div className={datePickerStylesOverrideClassName} onKeyDown={onKeyDown}>
       <SingleDateInput
         ref={ref}
         value={dateValue}

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,96 +125,147 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
     allowRelativeDate && (isRelativeValue || value === null) ? "relative" : "exact"
   );
 
-  if (disabled) {
-    return pickerValue;
-  }
-
   return (
-    <div ref={bypassedRef}>
-      <PopoverOld
-        title={title}
-        offset={[0, space.s6]}
-        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};
-            `}
-          >
-            <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
+      className={cx(
+        css`
+          display: flex;
+          flex-direction: column;
+        `,
+        allowRelativeDate &&
+          css`
+            min-width: 320px;
+          `,
+        className
+      )}
+    >
+      {allowRelativeDate ? (
         <div
-          style={allowRelativeDate ? {minWidth: 320} : undefined}
           className={css`
-            width: 100%;
+            border-bottom: ${themeVars.separators.opacity5};
           `}
         >
-          {!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}
-            />
-          )}
+          <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>
-      </PopoverOld>
+      ) : 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,
+    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 (
+    <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
+      <Popover.Trigger>
+        <div ref={fakeWrapperRef} onClick={stopPropagation}>
+          {pickerValue}
+        </div>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          title={title}
+          offset={[0, space.s6]}
+          placement="bottom-start"
+          supportMobile
+          popupContainerClassName={css`
+            z-index: 10001;
+          `}
+          preventOverflowOptions={{
+            altAxis: true,
+          }}
+        >
+          <SingleDatePickerPopoverContent ref={ref} {...props} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+});
+
 export const ControlledSingleDatePicker: ControlledSingleDatePickerWithForwardRefType =
   withPopupControl(SingleDatePicker);

package/src/date-picker/types.ts

@@ -25,9 +25,7 @@ export type DatePickerCommonProps = {
   header?: ReactNode;
   children?: JSX.Element;
   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 +47,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),

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

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {DaySelect, Props} from "./day-select";
 
 export enum Days {
@@ -21,7 +21,7 @@ const WeekDayMap = {
   SU: Days.SU,
 };
 
-export const getDays = _.memoize((firstDay) => {
+export const getDays = memoize((firstDay) => {
   const entries = Object.entries(WeekDayMap);
   const firstDayIndex = entries.findIndex((entry) => entry[1] === firstDay);
   const partA = entries.slice(firstDayIndex);

package/src/delayed.tsx

@@ -7,7 +7,6 @@ export const Delayed: React.FC<React.PropsWithChildren<{delayMs: number}>> = ({c
 
   useEffect(() => {
     if (!delayMs) {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
     }