@factorialco/f0-react 1.242.1 → 1.243.0

package/dist/f0.d.ts

@@ -3,6 +3,7 @@ import { AlertTagCellValue as AlertTagCellValue_2 } from './types/alertTag.tsx';
 import { AmountCellValue } from '../../value-display/types/amount';
 import { AmountCellValue as AmountCellValue_2 } from './types/amount.tsx';
 import { AnchorHTMLAttributes } from 'react';
+import { AriaAttributes } from 'react';
 import { AvatarListCellValue } from '../../value-display/types/avatarList';
 import { AvatarListCellValue as AvatarListCellValue_2 } from './types/avatarList.tsx';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -832,6 +833,16 @@ export declare type CompanyAvatarVariant = Extract<AvatarVariant, {
 
 declare type CompanyTagProps = ComponentProps<typeof F0TagCompany>;
 
+declare type CompareToDef = {
+    label: string;
+    value: {
+        delta: number;
+        units: GranularityDefinitionKey;
+    } | ((value: DateRangeComplete) => DateRangeComplete | DateRangeComplete[]);
+};
+
+declare type CompareToDefKey = string;
+
 declare type ComponentTypes = (typeof componentTypes)[number];
 
 declare const componentTypes: readonly ["layout", "info", "action", "form"];
@@ -1094,7 +1105,38 @@ declare type DateNavigatorFilterDefinition = NavigationFilterDefinitionBase<Date
     type: "date-navigator";
 } & DateNavigationOptions_2;
 
-declare interface DatePreset {
+declare type DatePickerCompareTo = Record<GranularityDefinitionKey, CompareToDef[]>;
+
+declare interface DatePickerPopupProps {
+    onSelect?: (value: DatePickerValue_2 | undefined) => void;
+    value?: DatePickerValue_2;
+    defaultValue?: DatePickerValue_2;
+    presets?: DatePreset[];
+    granularities?: GranularityDefinitionKey[];
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    hideGoToCurrent?: boolean;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    compareTo?: DatePickerCompareTo;
+    defaultCompareTo?: CompareToDefKey;
+    hideCalendarInput?: boolean;
+    asChild?: boolean;
+    onCompareToChange?: (compareTo: DateRangeComplete | DateRangeComplete[] | undefined) => void;
+}
+
+export declare const datepickerSizes: readonly ["sm", "md"];
+
+export declare type DatePickerValue = DatePickerValue_2;
+
+declare type DatePickerValue_2 = {
+    value: DateRangeComplete | undefined;
+    granularity: GranularityDefinitionKey;
+};
+
+export declare interface DatePreset {
     label: string;
     granularity: GranularityDefinitionKey;
     value: DateRange | (() => DateRange);
@@ -1667,6 +1709,18 @@ export declare const F0ChipList: {
     displayName: string;
 };
 
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export declare const F0DatePicker: typeof F0DatePicker_2;
+
+declare function F0DatePicker_2({ onChange, value, presets, granularities, minDate, maxDate, open, ...inputProps }: F0DatePickerProps): JSX_2.Element;
+
+export declare type F0DatePickerProps = Pick<DatePickerPopupProps, "granularities" | "minDate" | "maxDate" | "presets" | "open" | "onOpenChange"> & {
+    onChange?: (value: DatePickerValue | undefined, stringValue: string | undefined) => void;
+    value?: DatePickerValue;
+} & Pick<InputFieldProps<string>, InputFieldInheritedProps>;
+
 export declare function F0EventCatcherProvider({ children, onEvent, enabled, catchEvents, }: EventCatcherProviderProps): JSX.Element;
 
 export declare const F0Icon: ForwardRefExoticComponent<Omit<Omit<F0IconProps_2, "ref"> & RefAttributes<SVGSVGElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>;
@@ -2021,6 +2075,86 @@ export declare type InfiniteScrollPaginatedResponse<TRecord> = BasePaginatedResp
     hasMore: boolean;
 };
 
+declare const INPUTFIELD_SIZES: readonly ["sm", "md"];
+
+declare type InputFieldInheritedProps = (typeof inputFieldInheritedProps)[number];
+
+declare const inputFieldInheritedProps: readonly ["label", "placeholder", "hideLabel", "size", "error", "disabled", "readonly", "required", "clearable", "labelIcon", "status", "hint"];
+
+declare type InputFieldProps<T> = {
+    autoFocus?: boolean;
+    label: string;
+    placeholder?: string;
+    labelIcon?: IconType;
+    hideLabel?: boolean;
+    hidePlaceholder?: boolean;
+    name?: string;
+    onClickPlaceholder?: () => void;
+    onClickChildren?: () => void;
+    onClickContent?: () => void;
+    value?: T | undefined;
+    onChange?: (value: T) => void;
+    size?: InputFieldSize;
+    error?: string | boolean;
+    status?: InputFieldStatus;
+    hint?: string;
+    disabled?: boolean;
+    className?: string;
+    required?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    role?: string;
+    inputRef?: React.Ref<unknown>;
+    "aria-controls"?: AriaAttributes["aria-controls"];
+    "aria-expanded"?: AriaAttributes["aria-expanded"];
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    canGrow?: boolean;
+    children: React.ReactNode & {
+        onFocus?: () => void;
+        onBlur?: () => void;
+        onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+        onChange?: (value: T | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        value?: T;
+    };
+    icon?: IconType;
+    isEmpty?: (value: T | undefined) => boolean;
+    emptyValue?: T;
+    maxLength?: number;
+    hideMaxLength?: boolean;
+    append?: React.ReactNode;
+    appendTag?: string;
+    lengthProvider?: (value: T | undefined) => number;
+    loading?: boolean;
+    avatar?: AvatarVariant;
+    loadingIndicator?: {
+        /**
+         * If true, the loading spinner will be displayed over the content without affecting the layout
+         */
+        asOverlay?: boolean;
+        /**
+         * The offset of the loading spinner from the content
+         */
+        offset?: number;
+    };
+};
+
+declare type InputFieldSize = (typeof INPUTFIELD_SIZES)[number];
+
+declare type InputFieldStatus = {
+    type: Exclude<InputFieldStatusType, "error">;
+    message: string;
+} | {
+    type: "error";
+    message?: string;
+};
+
+declare const inputFieldStatus: readonly ["default", "warning", "info", "error"];
+
+declare type InputFieldStatusType = (typeof inputFieldStatus)[number];
+
 declare const internalAvatarColors: readonly ["viridian", "malibu", "yellow", "purple", "lilac", "barbie", "smoke", "army", "flubber", "indigo", "camel"];
 
 declare type InternalAvatarProps = React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
@@ -2419,6 +2553,8 @@ declare type PersonTagProps = ComponentProps<typeof F0TagPerson>;
 
 export declare const PieChart: ForwardRefExoticComponent<Omit<PieChartProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>;
 
+export declare const predefinedPresets: Record<string, DatePreset>;
+
 /**
  * Defines preset filter configurations that can be applied to a collection.
  * @template Filters - The available filter configurations