@fibery/ui-kit 1.36.2 → 1.38.0

package/src/count-badge.tsx

@@ -0,0 +1,57 @@
+import {fontWeight, space, themeVars} from "./design-system";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {ReactNode} from "react";
+
+type Props = {
+  className?: string;
+  count: number;
+};
+
+const countStyle = css`
+  display: inline-block;
+  padding: 0 ${space.s6}px 0 ${space.s6}px;
+  border-radius: ${space.s8}px;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: ${fontWeight.regular};
+`;
+
+const countMinWidth = css`
+  min-width: 1.5ch;
+  text-align: center;
+  box-sizing: content-box;
+`;
+
+const countBadgeStyle = css`
+  background: ${themeVars.badgeBgColor};
+  color: ${themeVars.textColor};
+`;
+
+const warningStyle = css`
+  background: ${themeVars.warning};
+  color: ${themeVars.textColor};
+`;
+
+export function CountBadge({className, count}: Props) {
+  return <span className={cx(countStyle, countBadgeStyle, className)}>{count <= 99 ? count : "99+"}</span>;
+}
+
+export function CountBadgeWithNoLimits({count, warning}: {count: number | string; warning?: boolean}) {
+  return <span className={cx(countStyle, countBadgeStyle, countMinWidth, warning && warningStyle)}>{count}</span>;
+}
+
+export const ContentWithBadge = ({badge, children}: {badge: ReactNode; children: ReactNode}) => {
+  return (
+    <div
+      className={css`
+        display: flex;
+        align-items: center;
+        gap: ${space.s6}px;
+      `}
+    >
+      {children}
+      {badge}
+    </div>
+  );
+};

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

@@ -219,7 +219,7 @@ export const DateRangeInput = forwardRef<
           }
         }
 
-        const [result] = getLocaleSpecificChrono().parse(inputValue.replace(datesSeparator, " - "));
+        const [result] = getLocaleSpecificChrono(dateFormat).parse(inputValue.replace(datesSeparator, " - "));
         let start;
         let end;
         if (result && result.start && result.end) {

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/fake-date-input.tsx

@@ -33,7 +33,7 @@ export const FakeDateInputWrapper = forwardRef<HTMLDivElement, Props>(function F
     >
       <div>{children}</div>
       <div className={cn(expanderStyle, isPickerOpen && expanderExpandedStyle)}>
-        <ArrowCollapseVertical color={themeVars.disabledTextColor} />
+        {disabled ? null : <ArrowCollapseVertical color={themeVars.disabledTextColor} />}
       </div>
     </div>
   );

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

@@ -1,11 +1,12 @@
 import {css} from "@linaria/core";
 import {space, textStyles, themeVars} from "../design-system";
 import {SingleRowSelect as SingleRowReactSelect, SingleValue} from "../select";
-import {AlwaysVisibleDropdownIndicator} from "../select/custom-select-partials/drop-down-indicator";
+import {AlwaysVisibleDropdownIndicator} from "../select/components/drop-down-indicator";
 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

@@ -143,7 +143,7 @@ export const SingleDateInput = forwardRef<
           }
         }
 
-        const [result] = getLocaleSpecificChrono().parse(inputValue);
+        const [result] = getLocaleSpecificChrono(dateFormat).parse(inputValue);
         if (result && result.start) {
           const newValue = result.start.date();
           onChange(newValue);

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/date-picker/utils.ts

@@ -7,9 +7,16 @@ import {
   dateTimeFormat as defaultDateTimeFormat,
 } from "../design-system";
 
-export const getLocaleSpecificChrono = () => {
+const isMonthBeforeDay = (format: string) => {
+  // Hacky way to get rid of ddd specifier, which does not matter for us here
+  const sanitizedFormat = format.replace("ddd", "").toLowerCase();
+  return sanitizedFormat.indexOf("m") < sanitizedFormat.indexOf("d");
+};
+
+export const getLocaleSpecificChrono = (dateFormat: string | undefined) => {
+  const weirdFormat = dateFormat && isMonthBeforeDay(dateFormat);
   // We use a single exception here - to support US date order, like m/d/y
-  if (navigator.language.toLowerCase().endsWith("-us")) {
+  if (weirdFormat) {
     return chrono.en;
   }
   // Otherwise, use european-style d/m/y

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} />;
 }