@fibery/ui-kit 2.0.0 → 2.1.0

package/src/color-utils.ts

@@ -1,103 +1,57 @@
-import type {Coords, PlainColorObject} from "colorjs.io/fn";
+import type {Color, Oklch, Rgb} from "culori";
 import {
-  ColorSpace,
-  contrastWCAG21,
-  deltaE76,
-  getLuminance as getLuminanceUnsafe,
-  HSL,
-  Lab,
-  LCH,
-  mix,
-  OKLCH,
-  P3,
+  blend,
+  clampChroma,
+  clampRgb as culoriClampRgb,
+  converter,
+  differenceCie76,
+  formatCss,
+  formatRgb,
+  interpolate,
   parse,
-  serialize,
-  set,
-  sRGB,
-  to,
+  serializeHex,
+  serializeHex8,
   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);
-  }
-}
+  wcagLuminance,
+} from "culori";
+import {isFlagPresent} from "./flags";
+import {resolveColorArg} from "./design-system/vars";
 
-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};
+const useOklchDefs = isFlagPresent("oklch-defs");
+const useOklchMath = isFlagPresent("oklch-math");
 
-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})`;
-}
+export const rgbFrom = converter("rgb");
+export const hslFrom = converter("hsl");
+export const oklchFrom = converter("oklch");
 
-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));
-}
+const mapToSrgb = toGamut("rgb", "oklch");
+const white: Rgb = {mode: "rgb", r: 1, g: 1, b: 1, alpha: 1};
+const black: Rgb = {mode: "rgb", r: 0, g: 0, b: 0, alpha: 1};
 
 /**
  * @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.
+ * Under oklch flag: directly sets OKLCH L via cbrt(target) approximation.
  */
-export function setLuminanceChroma(color: PlainColorObject, target: number): PlainColorObject {
-  const curLum = getLuminanceUnsafe(color);
+export function setLuminanceChroma(color: Color, target: number): Color {
+  if (useOklchMath) {
+    const oklch = oklchFrom(color);
+    return {...oklch, l: Math.cbrt(target)};
+  }
+
+  const curLum = wcagLuminance(color);
   if (Math.abs(curLum - target) < 1e-7) {
     return color;
   }
 
   const endpoint = target > curLum ? white : black;
+  const lerp = interpolate([color, endpoint], "rgb");
   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}));
+    const lum = wcagLuminance(lerp(mid));
     if (target > curLum ? lum < target : lum > target) {
       lo = mid;
     } else {
@@ -105,111 +59,169 @@ export function setLuminanceChroma(color: PlainColorObject, target: number): Pla
     }
   }
 
-  const result = mix(color, endpoint, (lo + hi) / 2, {space: sRGB});
+  const result = lerp((lo + hi) / 2);
   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.
+ * Darken by reducing lightness. Lab L* under legacy, OKLCH L under oklch flag.
  */
-export function darkenChroma(color: PlainColorObject, amount: number): PlainColorObject {
-  return set(color, "lab.l", (l) => l - amount * 18);
+export function darkenChroma(color: Color, amount: number): Color {
+  if (useOklchMath) {
+    const oklch = oklchFrom(color);
+    return {...oklch, l: oklch.l - amount * 0.18};
+  }
+  const lab = converter("lab")(color);
+  return {...lab, l: Math.max(0, lab.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.
+ * Desaturate by reducing chroma. LCH C under legacy, OKLCH C under oklch flag.
  */
-export function desaturateChroma(color: PlainColorObject, amount: number): PlainColorObject {
-  return set(color, "lch.c", (c) => c - amount * 18);
+export function desaturateChroma(color: Color, amount: number): Color {
+  if (useOklchMath) {
+    const oklch = oklchFrom(color);
+    return {...oklch, c: Math.max(0, oklch.c - amount * 0.048)};
+  }
+  const lch = converter("lch")(color);
+  return {...lch, c: Math.max(0, lch.c - amount * 18)};
 }
 
-export function setAlpha(color: PlainColorObject, value: number): void {
+export function setAlpha(color: Color, 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 const isValidColor = (color: string) => parse(resolveColorArg(color, "isValidColor")) !== undefined;
+
+export function colorFromUnsafe(color: string, fallback = "hsl(220, 62%, 56%)"): Color {
+  // eslint-disable-next-line no-param-reassign
+  color = resolveColorArg(color, "colorFromUnsafe");
+  const parsed = parse(color) ?? parse(fallback)!;
+  if (!parsed) {
+    throw new Error(`Failed to parse fallback color ${fallback}`);
   }
+  return useOklchDefs ? oklchFrom(parsed) : rgbFrom(parsed);
 }
 
 export function getAlpha(color: string): number {
-  return colorSafe(color).alpha ?? 1;
+  return colorFromUnsafe(color).alpha ?? 1;
 }
 
-export function getContrastRatio(color1: string, color2: string): number {
-  return contrastWCAG21(colorSafe(color1), colorSafe(color2));
-}
+const cie76 = differenceCie76();
 
 export function getColorDistance(color1: string, color2: string): number {
-  return deltaE76(colorSafe(color1), colorSafe(color2));
+  return cie76(colorFromUnsafe(color1), colorFromUnsafe(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});
+  return wcagLuminance(colorFromUnsafe(color));
 }
 
-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 cssFromColor(color: Color): string {
+  if (!useOklchDefs) {
+    // eslint-disable-next-line no-param-reassign
+    color = mapToSrgb(color);
+  }
+  if (color.mode === "rgb") {
+    return formatRgb(color);
+  }
+  return formatCss(color) ?? formatRgb(color);
 }
 
-export function toOKLCH(color: string) {
-  return produceColor(color, [], OKLCH);
-}
+type ColorTransform = (color: Color) => Color | void;
 
-export function toRGB(color: string) {
-  return produceColor(color, [], sRGB);
+export function produceColor(color: string, transforms: ColorTransform | ColorTransform[]): string {
+  let c: Color = colorFromUnsafe(color);
+  for (const transform of Array.isArray(transforms) ? transforms : [transforms]) {
+    const result = transform(c);
+    if (result !== undefined) {
+      c = result;
+    }
+  }
+  return cssFromColor(useOklchDefs ? oklchFrom(c) : rgbFrom(c));
 }
 
-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];
+export function fromOKLCH(L: number, C: number, H: number, alpha = 1): string {
+  const oklch: Oklch = {mode: "oklch", l: L, c: C, h: H, alpha};
+  return cssFromColor(oklch);
 }
 
 /** @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 clampRgb(color: Rgb): Rgb {
+  if (useOklchMath) {
+    return rgbFrom(clampChroma(color, "oklch")!);
+  }
+  return culoriClampRgb(color);
 }
 
-export function toCss(color: string): string {
+export function cssFromUnsafe(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};
+export function serializeHexVariadic(color: Rgb): string;
+export function serializeHexVariadic(color: string): string | undefined;
+export function serializeHexVariadic(color: string | Rgb): string | undefined {
+  if (typeof color === "string") {
+    // eslint-disable-next-line no-param-reassign
+    color = resolveColorArg(color, "serializeHexVariadic");
+  }
+  const rgb = rgbFrom(color);
+  if (!rgb) {
+    return rgb;
+  }
+  const a = rgb.alpha ?? 1;
+  if (a < 1) {
+    return serializeHex8(rgb);
+  } else {
+    return serializeHex(rgb);
+  }
+}
+
+function formatCssPrecisionNoiseAware(sample: string, color: Color) {
+  return formatCss(color)
+    .replace(/\d+\.\d+(?=%)/g, (m) => String(Math.round(Number(m))))
+    .padEnd(sample.length, " ");
+}
+
+function precision(value: number, decimals: number) {
+  const mod = 10 ** decimals;
+  return Math.round(value * mod) / mod;
+}
+
+export function inspectColor(color: string, sep = " | ") {
+  // eslint-disable-next-line no-param-reassign
+  color = resolveColorArg(color, "inspectColor");
+  return [rgbFrom(color), hslFrom(color), oklchFrom(color)]
+    .filter((x) => x !== undefined)
+    .map((x) => {
+      if (x.mode === "oklch") {
+        return formatCssPrecisionNoiseAware("oklch(0.22 0.22 none / 0.22)", {
+          mode: x.mode,
+          alpha: x.alpha && precision(x.alpha, 2), // 0..1
+          l: precision(x.l, 2), //        lightness:  0..1
+          c: precision(x.c, 2), //           chroma:  0..0.40
+          h: x.h && precision(x.h, 0), //       hue:  0..360
+        });
+      } else if (x.mode === "hsl") {
+        return formatCssPrecisionNoiseAware("hsl(none 100% 100% / 0.22)", {
+          mode: x.mode,
+          alpha: x.alpha && precision(x.alpha, 2), // 0..1
+          h: x.h && precision(x.h, 0), //       hue:  0..360
+          s: precision(x.s, 2), //       saturation:  0..1 -> 0-100%
+          l: precision(x.l, 2), //        lightness:  0..1 -> 0-100%
+        });
+      }
+      return serializeHexVariadic(x).padEnd("#000000AA".length, " ");
+    })
+    .join(sep);
+}
+
+/** Composite a possibly-transparent color over a backdrop (Porter-Duff "over"). */
+export function flattenAlpha(fg: Color, bg: Color): Rgb {
+  return blend([bg, fg]);
+}
+
+export {type Color, type ColorTransform};

package/src/command-menu/index.tsx

@@ -24,7 +24,7 @@ const inputContainerCss = css`
   display: flex;
   padding: ${space.s4}px ${space.s12}px ${space.s8}px;
   align-items: center;
-  border-bottom: 1px solid ${themeVars.separatorColor};
+  border-bottom: ${themeVars.borderSolidSeparator};
   margin-bottom: ${space.s4}px;
 
   & input {

package/src/context-menu/index.tsx

@@ -111,6 +111,10 @@ export const Item = styled(ContextMenuPrimitive.Item)`
   ${rowItemStyles}
 `;
 
+export const CheckboxItem = styled(ContextMenuPrimitive.CheckboxItem)`
+  ${rowItemStyles}
+`;
+
 export const Separator = styled(ContextMenuPrimitive.Separator)`
   ${{
     backgroundColor: themeVars.actionMenuSeparatorColor,

package/src/date-picker/autocomplete.tsx

@@ -52,6 +52,7 @@ export const AutoComplete = ({
     // We override select settings with empty popup container, as we need inline popup here, not inside some global container
     <SelectControlSettingsProvider getPopupContainerElement={undefined}>
       <Select<Option, false>
+        inline
         options={options}
         menuIsOpen={menuIsOpen}
         value={selectedOption}

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

@@ -114,7 +114,7 @@ export const DateRangePickerPopupContent = forwardRef<
           display: none;
           margin: 0 ${-space.s12}px;
           border: none;
-          border-bottom: ${themeVars.separators.opacity5};
+          border-bottom: ${themeVars.borderSeparatorDimmed};
           ${mobileRootSelector} & {
             display: block;
           }

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

@@ -37,7 +37,7 @@ export const DateRangePicker = forwardRef<
 
   const dateValue = [value[0] ? value[0].toDate() : null, value[1] ? value[1].toDate() : null] as [
     Date | null,
-    Date | null
+    Date | null,
   ];
   const onDatesChange = useCallback(
     (value: [Date | null, Date | null]) => {
@@ -90,7 +90,7 @@ export const DateRangePicker = forwardRef<
   return (
     <div>
       <Popover.Root open={open} onOpen={onOpen} onClose={onClose}>
-        <Popover.Trigger>
+        <Popover.Trigger asChild triggerEvent="click">
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
             {pickerValue}
           </div>

package/src/date-picker/fake-date-input.tsx

@@ -2,10 +2,10 @@ import cn from "classnames";
 import React, {forwardRef} from "react";
 import {activeClassName, disabledClassName, fakeDateInputStyle} from "./styles";
 import {css} from "@linaria/core";
-import {themeVars, transition} from "../design-system";
+import {space, textStyles, themeVars, transition} from "../design-system";
 import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
 
-type Props = {children: JSX.Element; disabled: boolean; isPickerOpen: boolean};
+type Props = {children: JSX.Element; disabled: boolean; isPickerOpen: boolean; size?: "small" | "medium"};
 
 const expanderExpandedStyle = css`
   transform: rotate(180deg);
@@ -16,7 +16,7 @@ const expanderStyle = css`
 `;
 
 export const FakeDateInputWrapper = forwardRef<HTMLDivElement, Props>(function FakeDateInputWrapper(
-  {children, disabled, isPickerOpen},
+  {children, disabled, isPickerOpen, size},
   ref
 ) {
   return (
@@ -27,7 +27,13 @@ export const FakeDateInputWrapper = forwardRef<HTMLDivElement, Props>(function F
         css`
           justify-content: space-between;
         `,
-        disabled ? disabledClassName : activeClassName
+        disabled ? disabledClassName : activeClassName,
+        size === "small"
+          ? css`
+              ${textStyles.small}
+              min-height: ${space.s28}px;
+            `
+          : undefined
       )}
       tabIndex={0}
     >

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

@@ -7,11 +7,13 @@ import {useCallback, useMemo, useState} from "react";
 import {$TSFixMe} from "../tsfixme";
 import {AntInputNumber} from "../antd/input-number";
 import {unitOfTime} from "moment";
+import {Button} from "../button/button";
 
 type RelativeDatePickerProps = {
   value: RelativeDateValue | null;
   onChange: (value: RelativeDateValue) => void;
   relativeDateToExactDate?: (value: RelativeDateValue) => string;
+  disableFutureSelection?: boolean;
 };
 
 const unitOptions = [
@@ -28,7 +30,7 @@ const isBeforeNowOptions = [
 ];
 
 export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
-  const {value, onChange, relativeDateToExactDate} = props;
+  const {value, onChange, relativeDateToExactDate, disableFutureSelection} = props;
 
   const valueWithDefault = useMemo(
     () => value ?? {unit: "day" as unitOfTime.DurationConstructor, isBeforeNow: true, amount: 0},
@@ -94,6 +96,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
       >
         <div>
           <AntInputNumber
+            aria-label="Amount"
             autoFocus={true}
             value={valueWithDefault.amount}
             controls={false}
@@ -109,6 +112,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
           `}
         >
           <SingleRowReactSelect
+            aria-label="Unit"
             value={unitOptions.find((option) => option.value === valueWithDefault.unit)}
             components={{
               DropdownIndicator: AlwaysVisibleDropdownIndicator,
@@ -127,12 +131,14 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
           `}
         >
           <SingleRowReactSelect
+            aria-label="Direction"
             value={isBeforeNowOptions.find(
               (option) => option.value === (valueWithDefault.isBeforeNow ? "ago" : "from now")
             )}
             components={{
               DropdownIndicator: AlwaysVisibleDropdownIndicator,
             }}
+            disabled={disableFutureSelection && valueWithDefault.isBeforeNow}
             isCollectionMode={false}
             options={isBeforeNowOptions}
             onChange={onIsBeforeNowChange}
@@ -144,12 +150,38 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
       </div>
       <div
         className={css`
-          padding: ${space.s4}px;
+          padding-left: ${space.s4}px;
           ${{...textStyles.heading6}}
           color: ${themeVars.accentTextColor};
+          display: flex;
+          align-items: center;
+          gap: ${space.s4}px;
         `}
       >
-        {relativeDateToExactDate?.(valueWithDefault)}
+        <div
+          className={css`
+            flex: 1;
+          `}
+        >
+          {relativeDateToExactDate?.(valueWithDefault)}
+        </div>
+        <Button
+          color={"neutral"}
+          variant={"ghost"}
+          size={"small"}
+          onClick={() => {
+            setAmount(0);
+            onChange({...valueWithDefault, amount: 0});
+          }}
+        >
+          <span
+            className={css`
+              text-transform: none;
+            `}
+          >
+            Set Today
+          </span>
+        </Button>
       </div>
     </div>
   );

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

@@ -69,9 +69,9 @@ interface SingleDatePickerWithForwardRefType extends React.FC<SingleDatePickerPr
 }
 
 interface ControlledSingleDatePickerWithForwardRefType extends React.FC<UncontrolledSingleDatePickerProps<boolean>> {
-  <T extends boolean>(props: UncontrolledSingleDatePickerProps<T>): ReturnType<
-    React.FC<UncontrolledSingleDatePickerProps<T>>
-  >;
+  <T extends boolean>(
+    props: UncontrolledSingleDatePickerProps<T>
+  ): ReturnType<React.FC<UncontrolledSingleDatePickerProps<T>>>;
 }
 
 type DatePickerRef = {
@@ -82,7 +82,15 @@ export const SingleDatePickerPopoverContent = forwardRef<
   DatePickerRef,
   {className?: string} & SingleDatePickerPopoverContentProps<boolean>
 >((props, ref) => {
-  const {className, value, onChange, onKeyDown, allowRelativeDate = false, relativeDateToExactDate} = props;
+  const {
+    className,
+    value,
+    onChange,
+    onKeyDown,
+    allowRelativeDate = false,
+    relativeDateToExactDate,
+    disableFutureSelection,
+  } = props;
 
   const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
 
@@ -142,7 +150,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
       {allowRelativeDate ? (
         <div
           className={css`
-            border-bottom: ${themeVars.separators.opacity5};
+            border-bottom: ${themeVars.borderSeparatorDimmed};
           `}
         >
           <TabNavRoot>
@@ -190,6 +198,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
             value={isRelativeValue ? (value as RelativeDateValue) : null}
             onChange={onRelativeDateChange}
             relativeDateToExactDate={relativeDateToExactDate}
+            disableFutureSelection={disableFutureSelection}
           />
         )}
       </div>
@@ -214,6 +223,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
     dateFormat,
     dateTimeFormat,
     allowRelativeDate = false,
+    size,
   } = props;
 
   const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
@@ -221,17 +231,17 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
   const dateValueFormatted = isRelativeValue
     ? formatRelativeDate(value as RelativeDateValue)
     : value
-    ? formatDateInputValue((value as Moment).toDate(), {
-        showTime,
-        dateFormat,
-        dateTimeFormat,
-      })
-    : null;
+      ? formatDateInputValue((value as Moment).toDate(), {
+          showTime,
+          dateFormat,
+          dateTimeFormat,
+        })
+      : null;
 
   const fakeWrapperRef = useRef<HTMLDivElement>(null);
 
   const pickerValue = children || (
-    <FakeDateInputWrapper disabled={disabled} isPickerOpen={open}>
+    <FakeDateInputWrapper disabled={disabled} isPickerOpen={open} size={size}>
       {!dateValueFormatted ? <EmptyValue>{placeholder}</EmptyValue> : <>{dateValueFormatted}</>}
     </FakeDateInputWrapper>
   );
@@ -249,6 +259,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
+          data-testid="single-date-picker-content"
           title={title}
           offset={[0, space.s6]}
           placement="bottom-start"