@fibery/ui-kit 1.37.0 → 1.38.1

package/src/command-menu/index.tsx

@@ -4,7 +4,7 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import {CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator} from "cmdk";
 import {forwardRef, useRef, useState} from "react";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {border, layout, layoutVars, space, textStyles, themeVars} from "../design-system";
 import ClearInputFilled from "../icons/react/ClearInputFilled";
 import Search from "../icons/react/Search";
 
@@ -92,7 +92,7 @@ export const CommandMenuEmpty = styled(CommandEmpty)`
   display: flex;
   align-items: center;
   padding: 0 ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
+  min-height: ${layoutVars.menuItemHeight};
   color: ${themeVars.accentTextColor};
 `;
 
@@ -119,7 +119,7 @@ export const commandItemCss = css`
   gap: ${space.s6}px;
   padding: 0 ${space.s8}px;
   cursor: pointer;
-  min-height: ${layout.menuItemHeight}px;
+  min-height: ${layoutVars.menuItemHeight};
   margin: 0 ${space.s4}px;
   border-radius: ${border.radius6}px;
 

package/src/context-menu/index.tsx

@@ -3,6 +3,7 @@ import {styled} from "@linaria/react";
 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";
 
 export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
   <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
@@ -22,7 +23,7 @@ export const rowItemStyles = {
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
-  "&:hover,&[data-highlighted]": {
+  '&:hover,&[data-highlighted],&[aria-expanded="true"]': {
     inset: "10px 4px",
     marginLeft: 4,
     marginRight: 4,
@@ -34,11 +35,19 @@ export const rowItemStyles = {
     cursor: "default",
     color: themeVars.disabledTextColor,
 
+    "--actions-menu-item-icon-color": themeVars.disabledTextColor,
+
     "&:hover": {
       color: themeVars.disabledTextColor,
       backgroundColor: themeVars.transparent,
     },
   },
+
+  [`${mobileRootSelector} &`]: {
+    ...textStyles.big,
+    minHeight: layout.mobileMenuItemHeight,
+    padding: `0px ${space.s12}px`,
+  },
 };
 
 const dropdownMenuContentStyles = css`

package/src/date-picker/autocomplete.tsx

@@ -2,7 +2,8 @@ import moment from "moment";
 import {useMemo} from "react";
 import {Select} from "../select";
 import {SelectControlSettingsProvider} from "../select/select-control-settings-context";
-import {timeFormat as defaultTimeFormat} from "../design-system";
+import {timeFormat as defaultTimeFormat, space} from "../design-system";
+import {useIsPhone} from "../use-is-phone";
 
 const step = 30;
 
@@ -26,6 +27,8 @@ export const AutoComplete = ({
   menuIsOpen: boolean;
   position: number;
 }) => {
+  const isPhone = useIsPhone();
+
   const options = useMemo(
     () =>
       Array.from({length: (24 * 60) / step}, (value, index) => {
@@ -61,12 +64,15 @@ export const AutoComplete = ({
             ...props,
             zIndex: 1000000,
             position: "absolute",
-            width: "auto",
-            top: position,
+            width: isPhone ? `calc(100vw - ${2 * space.s12}px)` : "auto",
+            top: isPhone ? space.s18 : position,
             margin: 0,
-            left: 100,
+            left: isPhone ? -space.s12 : 100,
+          }),
+          menuList: (props) => ({
+            ...props,
+            width: isPhone ? "auto" : 100,
           }),
-          menuList: (props) => ({...props, width: 100}),
         }}
       />
     </SelectControlSettingsProvider>

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

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import cx from "classnames";
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from "react";
 import {MonthChangeEventHandler} from "react-day-picker";
+import {mobileRootSelector} from "../mobile-styles";
 import {AntTransparentInput} from "../antd/input";
 import {AntTransparentTextArea} from "../antd/input";
 import {inputOverrides} from "../antd/styles";
@@ -292,6 +293,9 @@ export const DateRangeInput = forwardRef<
             display: flex;
             margin-bottom: ${space.s12 + space.s6}px;
             padding-right: ${space.s12 - 2}px;
+            ${mobileRootSelector} & {
+              min-height: ${space.s44}px;
+            }
           `,
           {[selectedStyle]: selected, [disabledStyle]: disabled}
         )}
@@ -335,7 +339,7 @@ export const DateRangeInput = forwardRef<
             />
           </div>
           {allowClear && inputValue !== "" && (
-            <IconButton onClick={onClear} size={"tiny"}>
+            <IconButton onClick={onClear} size={"tiny"} supportMobile>
               <RemoveIcon />
             </IconButton>
           )}

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

@@ -19,6 +19,7 @@ import {
   weekendClassName,
 } from "./styles";
 import {getWeekendsForMonth} from "./get-weekends-for-month";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const sortDates = ({from, to}: {from: Date; to: Date}) => {
   const [sortedFrom, sortedTo] = [from, to].sort((a, b) => a.getTime() - b.getTime());
@@ -108,19 +109,36 @@ export const DateRangePickerPopupContent = forwardRef<
       : null;
 
   const footer = duration ? (
-    <div
-      className={css`
-        background-color: ${themeVars.inputDisabledBgColor};
-        border-radius: ${border.radius6}px;
-        padding: ${space.s4}px ${space.s8}px;
-        ${textStyles.small}
-        text-align: center;
-        color: ${themeVars.disabledTextColor};
-        margin-top: ${space.s12}px;
-      `}
-    >
-      {duration}
-    </div>
+    <>
+      <hr
+        className={css`
+          display: none;
+          margin: 0 ${-space.s12}px;
+          border: none;
+          border-bottom: ${themeVars.separators.opacity5};
+          ${mobileRootSelector} & {
+            display: block;
+          }
+        `}
+      />
+      <div
+        className={css`
+          background-color: ${themeVars.inputDisabledBgColor};
+          border-radius: ${border.radius6}px;
+          padding: ${space.s4}px ${space.s8}px;
+          ${textStyles.small}
+          text-align: center;
+          color: ${themeVars.disabledTextColor};
+          margin-top: ${space.s12}px;
+          ${mobileRootSelector} & {
+            ${textStyles.big}
+            color: ${themeVars.disabledTextColor};
+          }
+        `}
+      >
+        {duration}
+      </div>
+    </>
   ) : null;
 
   const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, true)}`);

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

@@ -1,5 +1,5 @@
 import {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
-import {Popup} from "../popup";
+import {PopoverOld} from "../popover";
 import {space} from "../design-system";
 import {withPopupControl} from "./with-popup-control";
 import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
@@ -19,6 +19,7 @@ export const DateRangePicker = forwardRef<
   DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps
 >((props, ref) => {
   const {
+    title,
     open,
     onOpen,
     onClose,
@@ -90,13 +91,15 @@ export const DateRangePicker = forwardRef<
 
   return (
     <div ref={bypassedRef}>
-      <Popup
+      <PopoverOld
+        title={title}
         offset={[0, space.s6]}
         trigger={
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
             {pickerValue}
           </div>
         }
+        supportMobile
         placement="bottom-start"
         open={open}
         onOpen={onOpen}
@@ -116,7 +119,7 @@ export const DateRangePicker = forwardRef<
           value={dateValue}
           onKeyDown={onDatePickerKeyDown}
         />
-      </Popup>
+      </PopoverOld>
     </div>
   );
 });

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

@@ -6,6 +6,7 @@ import {RelativeDateValue} from "./types";
 import {useCallback, useMemo, useState} from "react";
 import {$TSFixMe} from "../tsfixme";
 import {AntInputNumber} from "../antd/input-number";
+import {unitOfTime} from "moment";
 
 type RelativeDatePickerProps = {
   value: RelativeDateValue | null;
@@ -29,11 +30,14 @@ const isBeforeNowOptions = [
 export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
   const {value, onChange, relativeDateToExactDate} = props;
 
-  const valueWithDefault = useMemo(() => value ?? {unit: "day", isBeforeNow: true, amount: 0}, [value]);
+  const valueWithDefault = useMemo(
+    () => value ?? {unit: "day" as unitOfTime.DurationConstructor, isBeforeNow: true, amount: 0},
+    [value]
+  );
 
   const onUnitChange = useCallback(
     (newUnit: SingleValue<{value: string}>) => {
-      onChange({...valueWithDefault, unit: newUnit!.value});
+      onChange({...valueWithDefault, unit: newUnit!.value as unitOfTime.DurationConstructor});
     },
     [valueWithDefault, onChange]
   );

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

@@ -6,6 +6,7 @@ import {AntTransparentInput} from "../antd/input";
 import {inputOverrides} from "../antd/styles";
 import {space} from "../design-system";
 import {IconButton} from "../button/icon-button";
+import {mobileRootSelector} from "../mobile-styles";
 import RemoveIcon from "../icons/react/Remove";
 import {AutoComplete, OnChangeArgs} from "./autocomplete";
 import {InputRef} from "./rc-input-types";
@@ -192,6 +193,9 @@ export const SingleDateInput = forwardRef<
             display: flex;
             margin-bottom: ${space.s12 + space.s6}px;
             padding-right: ${space.s12 - 2}px;
+            ${mobileRootSelector} & {
+              min-height: ${space.s44}px;
+            }
           `,
           {[selectedStyle]: selected, [disabledStyle]: disabled}
         )}
@@ -228,7 +232,7 @@ export const SingleDateInput = forwardRef<
             />
           </div>
           {allowClear && inputValue !== "" && (
-            <IconButton onClick={onClear} size={"tiny"}>
+            <IconButton onClick={onClear} size={"tiny"} supportMobile>
               <RemoveIcon />
             </IconButton>
           )}

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

@@ -11,7 +11,7 @@ import moment, {Moment} from "moment";
 import _ from "lodash";
 import {EmptyValue} from "../empty-value";
 import {formatDateInputValue} from "./utils";
-import {Popup} from "../popup";
+import {PopoverOld} from "../popover";
 import {focusable} from "tabbable";
 import {TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import {RelativeDatePicker} from "./relative-date-picker";
@@ -29,7 +29,7 @@ const tabNavLinkClassName = css`
   justify-content: center;
 `;
 
-const isRelativeDatePlaceholder = (value: $TSFixMe) => {
+export const isRelativeDatePlaceholder = (value: $TSFixMe) => {
   return (
     value !== null &&
     Object.hasOwn(value, "isBeforeNow") &&
@@ -38,7 +38,7 @@ const isRelativeDatePlaceholder = (value: $TSFixMe) => {
   );
 };
 
-const formatRelativeDate = (value: RelativeDateValue) => {
+export const formatRelativeDate = (value: RelativeDateValue) => {
   if (value.amount === 0) {
     return "today";
   } else if (value.amount === 1 && value.unit === "day" && !value.isBeforeNow) {
@@ -76,6 +76,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
   SingleDatePickerProps<boolean>
 >((props, ref) => {
   const {
+    title,
     open,
     onOpen,
     onClose,
@@ -156,7 +157,8 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
 
   return (
     <div ref={bypassedRef}>
-      <Popup
+      <PopoverOld
+        title={title}
         offset={[0, space.s6]}
         trigger={
           <div ref={fakeWrapperRef} onClick={stopPropagation}>
@@ -167,6 +169,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
         open={open}
         onOpen={onOpen}
         onClose={onClose}
+        supportMobile
         popupContainerClassName={css`
           z-index: 10001;
         `}
@@ -234,7 +237,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
             />
           )}
         </div>
-      </Popup>
+      </PopoverOld>
     </div>
   );
 });

package/src/date-picker/styles.ts

@@ -1,6 +1,7 @@
 import {css} from "@linaria/core";
 import {inputOverrides} from "../antd/styles";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const selectedStyle = css`
   ${inputOverrides.focus}
@@ -113,6 +114,32 @@ export const endButtonClassName = css`
     background: linear-gradient(90deg, ${focusGradient}) !important;
   }
 `;
+export const dayWrapper = css`
+  display: flex;
+  height: 100%;
+  position: relative;
+`;
+export const dayContentClassName = css`
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const dayButtonsContainerClassName = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+`;
 export const datePickerStylesOverrideClassName = css`
   .rdp {
     --rdp-cell-size: 36px;
@@ -129,6 +156,10 @@ export const datePickerStylesOverrideClassName = css`
     position: relative;
 
     margin: 0;
+
+    ${mobileRootSelector} & {
+      --rdp-cell-size: 44px;
+    }
   }
 
   padding: ${space.s12}px;
@@ -144,12 +175,20 @@ export const datePickerStylesOverrideClassName = css`
     border: none;
     color: ${themeVars.textColor};
     border-radius: 0;
+    ${mobileRootSelector} & {
+      ${textStyles.big}
+    }
   }
 
   .rdp-day:focus {
     border: none !important;
   }
 
+  ${mobileRootSelector} & .${dayContentClassName} {
+    width: auto;
+    max-width: unset;
+  }
+
   .rdp-day.${startRangeClassName}.${endRangeClassName} {
     border-radius: ${border.radius12}px !important;
   }
@@ -205,6 +244,14 @@ export const datePickerStylesOverrideClassName = css`
   .rdp-head th {
     ${textStyles.small};
     color: ${themeVars.disabledTextColor};
+    ${mobileRootSelector} & {
+      ${textStyles.regular}
+      color: ${themeVars.accentTextColor};
+    }
+  }
+
+  ${mobileRootSelector} & .rdp-caption {
+    margin: ${space.s8}px 0;
   }
 
   .rdp-caption_label {
@@ -220,6 +267,11 @@ export const datePickerStylesOverrideClassName = css`
     padding: ${space.s6}px !important;
   }
 
+  ${mobileRootSelector} & .rdp-nav_button {
+    width: ${space.s44}px;
+    height: ${space.s44}px;
+  }
+
   .rdp-nav_icon {
     color: ${themeVars.textColor};
   }
@@ -234,29 +286,3 @@ export const datePickerStylesOverrideClassName = css`
     }
   }
 `;
-export const dayWrapper = css`
-  display: flex;
-  height: 100%;
-  position: relative;
-`;
-export const dayContentClassName = css`
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const dayButtonsContainerClassName = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-`;

package/src/date-picker/types.ts

@@ -1,8 +1,9 @@
 import {Moment} from "moment";
 import {$TSFixMe} from "../tsfixme";
 import {ReactNode} from "react";
+import {unitOfTime} from "moment";
 
-export type RelativeDateValue = {isBeforeNow: boolean; unit: string; amount: number};
+export type RelativeDateValue = {isBeforeNow: boolean; unit: unitOfTime.DurationConstructor; amount: number};
 
 export type MomentSingleDateProps<AllowRelativeDate extends boolean = false> = {
   value: AllowRelativeDate extends true ? Moment | RelativeDateValue | null : Moment | null;
@@ -17,6 +18,7 @@ export type NativeSingleDatePickerProps = {
 };
 
 export type DatePickerCommonProps = {
+  title?: string;
   showTime?: boolean;
   showToday?: boolean;
   showInput?: boolean;

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

@@ -1,71 +1,27 @@
-import {ChangeEvent} from "react";
 import {css} from "@linaria/core";
-import {colors, themeVars} from "../design-system";
-import {inputOverrides} from "../antd/styles";
+import {RoundToggleButton} from "../toggle-button/round-toggle-button";
+import {ToggleButtonGroup, ToggleButtonGroupItem} from "../toggle-button/toggle-button-group";
 
-export type Props<T extends number> = {
-  value: Array<T>;
-  onChange: (v: Array<T>) => void;
-  days: Array<{key: string; title: string; value: T}>;
+export type Props = {
+  value: Array<number>;
+  onChange: (v: Array<number>) => void;
+  days: Array<{key: string; title: string; value: number}>;
   allowEmpty?: boolean;
 };
 
-const daySize = "28px";
+export function DaySelect({value = [], onChange, days, allowEmpty = false}: Props): JSX.Element {
+  const stringifiedValue = value.map((v) => v.toString());
 
-const checkboxInput = css`
-  position: absolute;
-  appearance: none;
-`;
-
-const checkbox = css`
-  position: absolute;
-  border-radius: 50%;
-  font-size: 14px;
-  width: ${daySize};
-  height: ${daySize};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${themeVars.accentTextColor};
-  background-color: ${themeVars.unitBg};
-  .${checkboxInput}:checked + & {
-    color: ${colors.inversedTextColor};
-    background-color: ${themeVars.primary};
-  }
-  .${checkboxInput}:focus-visible + & {
-    ${inputOverrides.focus}
-  }
-`;
-
-function Day<T extends number>({
-  value,
-  onChange,
-  checked,
-  title,
-}: {
-  value: T;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  checked: boolean;
-  title: string;
-}): JSX.Element {
-  return (
-    <label
-      className={css`
-        cursor: pointer;
-        position: relative;
-        width: ${daySize};
-        height: ${daySize};
-      `}
-    >
-      <input className={checkboxInput} onChange={onChange} checked={checked} type="checkbox" value={value} />
-      <div className={checkbox}>{title}</div>
-    </label>
-  );
-}
-
-export function DaySelect<T extends number>({value = [], onChange, days, allowEmpty = false}: Props<T>): JSX.Element {
   return (
-    <div
+    <ToggleButtonGroup
+      type="multiple"
+      value={stringifiedValue}
+      onValueChange={(v) => {
+        if (v.length === 0 && !allowEmpty) {
+          return;
+        }
+        onChange(v.map(Number));
+      }}
       className={css`
         grid-template-columns: repeat(7, min-content);
         gap: 4px;
@@ -74,21 +30,11 @@ export function DaySelect<T extends number>({value = [], onChange, days, allowEm
     >
       {days.map(({key, value: v, title}) => {
         return (
-          <Day
-            checked={value.includes(v)}
-            onChange={({currentTarget: {checked}}) => {
-              if (checked) {
-                onChange(value.concat(v));
-              } else if (allowEmpty || value.length > 1) {
-                onChange(value.filter((val) => val !== v));
-              }
-            }}
-            key={key}
-            title={title}
-            value={v}
-          />
+          <ToggleButtonGroupItem key={key} asChild value={v.toString()}>
+            <RoundToggleButton>{title}</RoundToggleButton>
+          </ToggleButtonGroupItem>
         );
       })}
-    </div>
+    </ToggleButtonGroup>
   );
 }

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

@@ -10,6 +10,6 @@ const isoWeekDays = _.range(1, 8).map((day) => {
   };
 });
 
-export function IsoWeekdaySelect({value, onChange, allowEmpty}: Omit<Props<number>, "days">): JSX.Element {
+export function IsoWeekdaySelect({value, onChange, allowEmpty}: Omit<Props, "days">): JSX.Element {
   return <DaySelect value={value} onChange={onChange} days={isoWeekDays} allowEmpty={allowEmpty} />;
 }

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

@@ -3,9 +3,9 @@ import {DaySelect, Props} from "./day-select";
 const days = Array.from({length: 28}).map((_, index) => {
   const value = index + 1;
   const key = String(value);
-  return {key: String(value), title: key, value};
+  return {key: String(value), title: key, value: value};
 });
 
-export function MonthdaySelect({value = [], onChange}: Omit<Props<number>, "days">): JSX.Element {
+export function MonthdaySelect({value = [], onChange}: Omit<Props, "days">): JSX.Element {
   return <DaySelect value={value} onChange={onChange} days={days} />;
 }

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

@@ -32,11 +32,7 @@ export const getDays = _.memoize((firstDay) => {
   });
 });
 
-export function WeekdaySelect({
-  value = [],
-  onChange,
-  firstDay,
-}: Omit<Props<Days>, "days"> & {firstDay: number}): JSX.Element {
+export function WeekdaySelect({value = [], onChange, firstDay}: Omit<Props, "days"> & {firstDay: number}): JSX.Element {
   const days = getDays(firstDay);
   return <DaySelect value={value} onChange={onChange} days={days} />;
 }