@factorialco/f0-react 1.317.2 → 1.318.1

package/dist/f0.d.ts

@@ -22,6 +22,7 @@ import { CompanyCellValue } from '../../value-display/types/company';
 import { CompanyCellValue as CompanyCellValue_2 } from './types/company';
 import { ComponentProps } from 'react';
 import { ComponentType } from 'react';
+import { Context } from 'react';
 import { CountryCellValue } from './types/country';
 import { DashboardProps as DashboardProps_2 } from './Dashboard';
 import { DateCellValue } from '../../value-display/types/date';
@@ -30,9 +31,11 @@ import { DateFilterOptions } from './DateFilter/DateFilter';
 import { default as default_2 } from 'react';
 import { DotTagCellValue } from '../../value-display/types/dotTag';
 import { DotTagCellValue as DotTagCellValue_2 } from './types/dotTag';
+import { F0DialogInternalProps } from './internal-types';
 import { F0GridStackProps as F0GridStackProps_2 } from './F0GridStack';
 import { F0SelectProps as F0SelectProps_2 } from './types';
 import { f1Colors } from '@factorialco/f0-core';
+import { FC } from 'react';
 import { FileCellValue } from '../../value-display/types/file';
 import { FileCellValue as FileCellValue_2 } from './types/file';
 import { FolderCellValue } from '../../value-display/types/folder';
@@ -1949,6 +1952,14 @@ export declare const defaultTranslations: {
     };
 };
 
+export declare type DialogPosition = (typeof dialogPositions)[number];
+
+declare const dialogPositions: readonly ["center", "left", "right", "fullscreen"];
+
+export declare type DialogWidth = (typeof dialogWidths)[number];
+
+declare const dialogWidths: readonly ["sm", "md", "lg"];
+
 /**
  * Remove a property from a union of objects.
  * @example
@@ -2399,6 +2410,67 @@ export declare type F0DatePickerProps = Pick<DatePickerPopupProps, "granularitie
     value?: DatePickerValue;
 } & Pick<InputFieldProps<string>, InputFieldInheritedProps>;
 
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export declare const F0Dialog: FC<F0DialogInternalProps>;
+
+export declare type F0DialogActionsProps = {
+    primaryAction?: F0DialogPrimaryAction | F0DialogPrimaryActionItem[];
+    secondaryAction?: F0DialogSecondaryAction;
+};
+
+export declare const F0DialogContext: Context<F0DialogContextType>;
+
+declare type F0DialogContextType = {
+    open: boolean;
+    onClose: () => void;
+    shownBottomSheet: boolean;
+    position: DialogPosition;
+    /**
+     * The dialog's content container element.
+     * Use this as the `portalContainer` prop for components like F0Select
+     * to ensure dropdowns render inside the dialog.
+     */
+    portalContainer: HTMLDivElement | null;
+};
+
+export declare type F0DialogPrimaryAction = {
+    label: string;
+    icon?: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+};
+
+export declare type F0DialogPrimaryActionItem = {
+    value: string;
+    label: string;
+    icon?: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+};
+
+export declare const F0DialogProvider: ({ isOpen, onClose, shownBottomSheet, position, children, portalContainer, }: F0DialogProviderProps) => JSX_2.Element;
+
+declare type F0DialogProviderProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    shownBottomSheet?: boolean;
+    position: DialogPosition;
+    children: ReactNode;
+    portalContainer: HTMLDivElement | null;
+};
+
+export declare type F0DialogSecondaryAction = {
+    label: string;
+    icon?: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+};
+
 export declare type F0DropdownButtonProps<T = string> = {
     size?: ButtonDropdownSize;
     items: ButtonDropdownItem<T>[] | ButtonDropdownGroup<T>[] | ButtonDropdownGroup<T>;
@@ -2411,6 +2483,76 @@ export declare type F0DropdownButtonProps<T = string> = {
 
 export declare function F0EventCatcherProvider({ children, onEvent, enabled, catchEvents, }: EventCatcherProviderProps): JSX.Element;
 
+/**
+ * A standalone dual-pane filter picker content component.
+ *
+ * This component renders the filter picker interface (left panel with filter list,
+ * right panel with filter content) without any popover wrapper, allowing it to be
+ * embedded directly in modals, sidebars, or other containers.
+ *
+ * Features:
+ * - Left panel showing filter categories with search
+ * - Right panel showing filter options for the selected filter
+ * - Multi-select with checkboxes for "in" type filters
+ * - Support for search, date, number, and custom filter types
+ * - Select All and Clear actions
+ *
+ * @template Filters - The type defining the structure of available filters
+ *
+ * @example
+ * ```tsx
+ * // Embed directly in a modal or page
+ * <F0FilterPickerContent
+ *   filters={{
+ *     department: {
+ *       type: "in",
+ *       label: "Department",
+ *       options: {
+ *         options: [
+ *           { value: "engineering", label: "Engineering" },
+ *           { value: "marketing", label: "Marketing" },
+ *         ]
+ *       }
+ *     },
+ *     location: {
+ *       type: "in",
+ *       label: "Location",
+ *       options: {
+ *         options: [
+ *           { value: "nyc", label: "New York" },
+ *           { value: "sf", label: "San Francisco" },
+ *         ]
+ *       }
+ *     }
+ *   }}
+ *   value={selectedFilters}
+ *   onChange={setSelectedFilters}
+ * />
+ * ```
+ */
+export declare function F0FilterPickerContent<Filters extends FiltersDefinition>({ filters, value, onChange, height, width, className, showApplyButton, applyButtonLabel, }: F0FilterPickerContentProps<Filters>): JSX_2.Element | null;
+
+export declare namespace F0FilterPickerContent {
+    var displayName: string;
+}
+
+/**
+ * Props for the F0FilterPickerContent component.
+ * @template Filters - The type defining the structure of available filters
+ */
+export declare interface F0FilterPickerContentProps<Filters extends FiltersDefinition> extends FilterPickerBaseProps<Filters> {
+    /** Current state of applied filters */
+    value: FiltersState<Filters>;
+    /**
+     * Callback fired when filters change.
+     * - With apply button (default): called when Apply button is clicked
+     * - Without apply button: called immediately on every selection
+     */
+    onChange: (value: FiltersState<Filters>) => void;
+    /** Width of the content panel */
+    width?: number;
+}
+
 export declare const F0GridStack: {
     ({ options, widgets, onChange, className, }: F0GridStackProps_2): JSX_2.Element;
     displayName: string;
@@ -2630,6 +2772,24 @@ declare type FilterDefinitionsByType<T = unknown, R extends RecordType = RecordT
  */
 export declare type FilterOptions<FilterKeys extends string> = Record<FilterKeys, FilterDefinition>;
 
+/**
+ * Shared styling and behavior props used by both public and internal components.
+ * Internal type - not exported to external consumers.
+ * @template Filters - The type defining the structure of available filters
+ */
+declare interface FilterPickerBaseProps<Filters extends FiltersDefinition> {
+    /** The schema defining available filters and their configurations */
+    filters: Filters;
+    /** Height of the content panel */
+    height?: number;
+    /** Optional className for the container */
+    className?: string;
+    /** Whether to show the apply button (default: true) */
+    showApplyButton?: boolean;
+    /** Custom label for the apply button */
+    applyButtonLabel?: string;
+}
+
 /**
  * Record of filter definitions for a collection.
  * Maps filter keys to their respective definitions.
@@ -4766,6 +4926,8 @@ export declare const useEmojiConfetti: () => {
     fireEmojiConfetti: (emoji: string, elementRef: RefObject<HTMLElement>) => void;
 };
 
+export declare const useF0Dialog: () => F0DialogContextType;
+
 export declare const useGroups: <R extends RecordType>(groups: GroupRecord<R>[], defaultOpenGroups?: boolean | GroupRecord<R>["key"][]) => {
     openGroups: Record<string, boolean>;
     setGroupOpen: (key: string, open: boolean) => void;
@@ -4958,8 +5120,8 @@ declare global {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        liveCompanion: {
-            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
+        aiBlock: {
+            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
         };
     }
 }
@@ -4967,8 +5129,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        aiBlock: {
-            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
+        liveCompanion: {
+            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
         };
     }
 }