@fibery/ui-kit 1.37.0 → 1.38.0

package/src/breadcrumb.tsx

@@ -0,0 +1,78 @@
+import {css, cx} from "@linaria/core";
+import {themeVars, transition} from "./design-system";
+import ArrowRight from "./icons/react/ArrowRight";
+import {ComponentPropsWithoutRef, ElementType, forwardRef} from "react";
+import More from "./icons/react/More";
+
+export const Breadcrumb = ({...props}: React.ComponentProps<"nav">) => {
+  return <nav aria-label="breadcrumb" {...props} />;
+};
+
+const olReset = css`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+const listCss = css`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${themeVars.colorTextButtonGhostNeutral};
+`;
+
+export const BreadcrumbList = ({className, ...props}: React.ComponentProps<"ol">) => {
+  return <ol className={cx(olReset, listCss, className)} {...props} />;
+};
+
+const itemCss = css`
+  display: flex;
+  align-items: center;
+`;
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({className, ...props}, ref) => {
+  return <li ref={ref} className={cx(itemCss, className)} {...props} />;
+});
+
+const linkCss = css`
+  color: ${themeVars.colorTextButtonGhostNeutral};
+  &:hover {
+    color: ${themeVars.textColor};
+  }
+  transition: color ${transition};
+`;
+
+type BreadcrumbLinkProps<C extends ElementType = "a"> = {
+  as?: C;
+  className?: string;
+} & ComponentPropsWithoutRef<C>;
+
+export const BreadcrumbLink = <C extends ElementType = "a">({className, as, ...props}: BreadcrumbLinkProps<C>) => {
+  const Component = as || "a";
+  return <Component className={cx(linkCss, className)} {...props} />;
+};
+
+const liReset = css`
+  margin: 0;
+  padding: 0;
+`;
+
+export const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => {
+  return (
+    <li role="presentation" aria-hidden="true" className={cx(liReset, className)} {...props}>
+      {children ?? <ArrowRight color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />}
+    </li>
+  );
+};
+
+export const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, React.ComponentProps<"span">>(
+  ({className, ...props}, ref) => {
+    return (
+      <span ref={ref} role="presentation" aria-hidden="true" className={cx(className)} {...props}>
+        <More color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />
+      </span>
+    );
+  }
+);

package/src/button/actions-button-compact.tsx

@@ -1,12 +1,15 @@
 import {forwardRef} from "react";
 import {IconButton, IconButtonProps} from "./icon-button";
 import MoreCompactIcon from "../icons/react/MoreCompact";
+import MoreIcon from "../icons/react/More";
+import {useIsPhone} from "../use-is-phone";
 
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
   function ActionsButtonCompactComponent({...rest}, ref) {
+    const isPhone = useIsPhone();
     return (
       <IconButton supportMobile={true} ref={ref} size="small" {...rest}>
-        <MoreCompactIcon />
+        {isPhone ? <MoreIcon iconSize={20} /> : <MoreCompactIcon />}
       </IconButton>
     );
   }

package/src/button/base-button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
 
-export type ButtonSize = "tiny" | "small" | "medium" | "large";
+export type ButtonSize = "tiny" | "small" | "medium" | "large" | "xLarge";
 export type ButtonVariant = "solid" | "outline" | "soft" | "ghost";
 export type ButtonColor = "accent" | "neutral" | "error";
 
@@ -32,8 +32,10 @@ export const baseButton = css`
 
   box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
 
-  &:hover:not(:disabled) {
-    background-color: var(--fibery-button-hover-color);
+  @media (any-hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--fibery-button-hover-color);
+    }
   }
   &:active {
     color: var(--fibery-button-text-active-color);

package/src/button/button-group.tsx

@@ -29,7 +29,7 @@ const buttonGroupDirection = {
   `,
 };
 
-const buttonGroup = css`
+export const buttonGroup = css`
   display: flex;
   align-items: flex-start;
 `;

package/src/button/button.tsx

@@ -140,6 +140,37 @@ const buttonSize = {
       padding-right: ${space.s8 - space.s1}px;
     }
 
+    & > .${shortcutContainer} {
+      font-size: ${textStyles.regular.fontSize}px;
+    }
+  `,
+  xLarge: css`
+    font-size: ${textStyles.heading3.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.heading3.letterSpacing};
+
+    border-radius: ${border.radius6}px;
+    min-height: 44px;
+    padding: ${space.s6}px ${space.s12}px;
+    gap: ${space.s6}px;
+
+    ${iconSizeVar}: 24px;
+
+    &.${withIconStart} {
+      padding-left: ${space.s10}px;
+      padding-right: ${space.s12}px;
+    }
+
+    &.${withIconEnd} {
+      padding-left: ${space.s12}px;
+      padding-right: ${space.s10}px;
+    }
+
+    &.${withoutChildren} {
+      padding-left: ${space.s8 - space.s1}px;
+      padding-right: ${space.s8 - space.s1}px;
+    }
+
     & > .${shortcutContainer} {
       font-size: ${textStyles.regular.fontSize}px;
     }

package/src/button/icon-button.tsx

@@ -52,6 +52,15 @@ export const iconButtonSizes = {
 
     ${iconSizeVar}: 18px;
   `,
+  xLarge: css`
+    padding: ${space.s6}px;
+
+    min-width: 44px;
+    min-height: 44px;
+    border-radius: ${border.radius6}px;
+
+    ${iconSizeVar}: 24px;
+  `,
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(

package/src/button/select-button.tsx

@@ -21,6 +21,10 @@ const iconSize = {
     margin-left: -${space.s4}px;
     margin-right: -${space.s4}px;
   `,
+  xLarge: css`
+    margin-left: -${space.s4}px;
+    margin-right: -${space.s4}px;
+  `,
 };
 
 export type SelectButtonProps = {

package/src/card-container.tsx

@@ -7,6 +7,7 @@ import {getBg} from "./box";
 import {CardHiddenLink} from "./card-hidden-link";
 import {border, space, themeVars} from "./design-system";
 import {visuallyHidden} from "./styles-utils";
+import {mobileRootSelector} from "./mobile-styles";
 
 export type CardSize =
   | ":card-size/pinned"
@@ -109,10 +110,7 @@ const cardClassName = css`
   flex-direction: column;
   flex-grow: 1;
   height: 100%;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s6}px;
-  padding-top: ${space.s6}px;
-  padding-bottom: ${space.s8}px;
+  padding: ${space.s8}px;
   gap: ${space.s6}px;
 
   & > div:empty:not(.${colorCodingClassName}) {
@@ -159,6 +157,11 @@ const listClassName = css`
   & > div.title-wrapper:has(a:empty) {
     display: none;
   }
+
+  ${mobileRootSelector} & {
+    gap: ${space.s8}px;
+    min-height: 36px;
+  }
 `;
 
 const timelineClassName = css`

package/src/color-picker/swatch.tsx

@@ -66,6 +66,7 @@ const iconSizes = {
   medium: 18,
   large: 20,
   huge: 22,
+  xLarge: 22,
 };
 
 type SwatchProps = {

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/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-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;
@@ -150,6 +177,11 @@ export const datePickerStylesOverrideClassName = css`
     border: none !important;
   }
 
+  ${mobileRootSelector} & .${dayContentClassName} {
+    width: auto;
+    max-width: unset;
+  }
+
   .rdp-day.${startRangeClassName}.${endRangeClassName} {
     border-radius: ${border.radius12}px !important;
   }
@@ -234,29 +266,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} />;
 }