@factorialco/f0-react 1.289.0 → 1.291.0

package/dist/f0.d.ts

@@ -28,6 +28,7 @@ import { DotTagCellValue as DotTagCellValue_2 } from './types/dotTag';
 import { F0GridStackProps as F0GridStackProps_2 } from './F0GridStack';
 import { F0GridStackRef as F0GridStackRef_2 } from './F0GridStack';
 import { F0IconProps as F0IconProps_2 } from './F0Icon';
+import { F0SelectProps as F0SelectProps_2 } from './types';
 import { f1Colors } from '@factorialco/f0-core';
 import { FileCellValue } from '../../value-display/types/file';
 import { FileCellValue as FileCellValue_2 } from './types/file';
@@ -81,6 +82,14 @@ import { VariantProps } from 'cva';
 export declare type Action = UpsellAction | RegularAction;
 
 declare type Action_2 = {
+    label: string;
+    onClick: () => void;
+    icon?: IconType;
+    variant?: F0ButtonProps["variant"];
+    disabled?: boolean;
+};
+
+declare type Action_3 = {
     label: string;
     onClick: () => void;
     icon?: IconType;
@@ -920,7 +929,9 @@ declare interface CheckboxProps extends DataAttributes_2 {
     name?: string;
 }
 
-declare type ChildrenResponse<R extends RecordType> = BaseResponse<R> | R[] | NestedResponseWithType<R>;
+declare type ChildrenPaginationInfo<R extends RecordType> = Omit<InfiniteScrollPaginatedResponse<R>, "type" | "records">;
+
+declare type ChildrenResponse<R extends RecordType> = NestedResponseWithType<R>;
 
 declare type ChipLabel = {
     label: string;
@@ -1308,11 +1319,11 @@ export declare type DataSourceDefinition<R extends RecordType = RecordType, Filt
     currentGrouping?: GroupingState<R, Grouping>;
     /*******************************************************/
     /***** NESTED RECORDS ***************************************************/
-    fetchChildren?: (item: R, filters?: FiltersState<FiltersDefinition>) => Promise<ChildrenResponse<R>>;
+    fetchChildren?: (item: R, filters?: FiltersState<FiltersDefinition>, pagination?: ChildrenPaginationInfo<R>) => Promise<ChildrenResponse<R>>;
     /** Function to determine if an item has children */
     itemsWithChildren?: (item: R) => boolean;
     /** Function to get the number of children for an item */
-    childrenCount?: (item: R) => number | undefined;
+    childrenCount?: (item: R, pagination?: ChildrenPaginationInfo<R>) => number | undefined;
 };
 
 export declare type DateFilterDefinition = BaseFilterDefinition<"date"> & {
@@ -1561,6 +1572,7 @@ export declare const defaultTranslations: {
         readonly other: "Other actions";
         readonly toggle: "Toggle";
         readonly toggleDropdownMenu: "Toggle dropdown menu";
+        readonly selectAll: "Select all";
     };
     readonly status: {
         readonly selected: {
@@ -1569,6 +1581,13 @@ export declare const defaultTranslations: {
         };
     };
     readonly filters: {
+        readonly searchPlaceholder: "Search filters...";
+        readonly inFilter: {
+            readonly searchPlaceholder: "Search options...";
+        };
+        readonly activeFilters: "Active filters: {{filters}}";
+        readonly filteringBy: "Filtering by {{label}}";
+        readonly availableFilters: "Available filters";
         readonly label: "Filters";
         readonly applyFilters: "Apply filters";
         readonly applySelection: "Apply selection";
@@ -2345,6 +2364,79 @@ export declare const F0Provider: React.FC<{
     dataCollectionStorageHandler?: DataCollectionStorageHandler;
 }>;
 
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export declare const F0Select: <T extends string = string, R = unknown>(props: F0SelectProps_2<T, R> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.ReactElement;
+
+export declare type F0SelectItemObject<T, R = unknown> = {
+    type?: "item";
+    value: T;
+    label: string;
+    description?: string;
+    avatar?: AvatarVariant;
+    tag?: string;
+    icon?: IconType;
+    item?: R;
+    disabled?: boolean;
+};
+
+export declare type F0SelectItemProps<T, R = unknown> = F0SelectItemObject<T, R> | {
+    type: "separator";
+};
+
+/**
+ * Select component for choosing from a list of options.
+ *
+ * @template T - The type of the emitted  value
+ * @template R - The type of the record/item data (used with data source)
+ *
+ */
+export declare type F0SelectProps<T extends string, R = unknown> = {
+    onChangeSelectedOption?: (option: F0SelectItemObject<T, ResolvedRecordType<R>> | undefined, checked: boolean) => void;
+    children?: React.ReactNode;
+    open?: boolean;
+    showSearchBox?: boolean;
+    searchBoxPlaceholder?: string;
+    onSearchChange?: (value: string) => void;
+    searchValue?: string;
+    onOpenChange?: (open: boolean) => void;
+    searchEmptyMessage?: string;
+    className?: string;
+    selectContentClassName?: string;
+    actions?: Action_2[];
+    portalContainer?: HTMLElement | null;
+} & ({
+    clearable?: false;
+    multiple?: false;
+    value?: T;
+    defaultItem?: F0SelectItemObject<T, ResolvedRecordType<R>>;
+    onChange?: (value: T, originalItem?: ResolvedRecordType<R> | undefined, option?: F0SelectItemObject<T, ResolvedRecordType<R>>) => void;
+} | {
+    clearable: true;
+    multiple?: false;
+    value?: T;
+    defaultItem?: F0SelectItemObject<T, ResolvedRecordType<R>>;
+    onChange?: (value: T, originalItem?: ResolvedRecordType<R> | undefined, option?: F0SelectItemObject<T, ResolvedRecordType<R>>) => void;
+} | {
+    multiple: true;
+    clearable?: boolean;
+    value?: T[];
+    defaultItem?: F0SelectItemObject<T, ResolvedRecordType<R>>[];
+    onChange?: (value: T[], originalItems: ResolvedRecordType<R>[], options: F0SelectItemObject<T, ResolvedRecordType<R>>[]) => void;
+}) & ({
+    source: DataSourceDefinition<ResolvedRecordType<R>, FiltersDefinition, SortingsDefinition, GroupingDefinition<ResolvedRecordType<R>>>;
+    mapOptions: (item: ResolvedRecordType<R>) => F0SelectItemProps<T, ResolvedRecordType<R>>;
+    options?: never;
+} | {
+    source?: never;
+    mapOptions?: never;
+    searchFn?: (option: F0SelectItemProps<T, unknown>, search?: string) => boolean | undefined;
+    options: F0SelectItemProps<T, unknown>[];
+}) & Pick<InputFieldProps<T>, "required" | "loading" | "hideLabel" | "labelIcon" | "size" | "label" | "icon" | "placeholder" | "disabled" | "name" | "error" | "status" | "hint">;
+
 export declare const F0TagAlert: ForwardRefExoticComponent<TagAlertProps & RefAttributes<HTMLDivElement>>;
 
 export declare const F0TagBalance: ForwardRefExoticComponent<TagBalanceProps & RefAttributes<HTMLDivElement>>;
@@ -3114,6 +3206,7 @@ declare type NestedKeyOf<T> = {
 declare type NestedResponseWithType<R extends RecordType> = {
     records: R[];
     type?: NestedVariant;
+    paginationInfo?: ChildrenPaginationInfo<R>;
 };
 
 declare type NestedVariant = "basic" | "detailed";
@@ -3406,8 +3499,8 @@ declare type ProductModalProps = {
         label: string;
         variant?: Variant;
     };
-    primaryAction?: Action_2;
-    secondaryAction?: Action_2;
+    primaryAction?: Action_3;
+    secondaryAction?: Action_3;
     portalContainer?: HTMLElement | null;
     showResponseDialog?: boolean;
 };
@@ -3546,6 +3639,8 @@ declare type RegularAction = BaseAction & {
 
 declare type RendererDefinition = ValueDisplayRendererDefinition;
 
+export declare type ResolvedRecordType<R> = R extends RecordType ? R : RecordType;
+
 export declare type SearchFilterDefinition = BaseFilterDefinition<"search">;
 
 declare type SearchOptions = {
@@ -3613,6 +3708,8 @@ export declare type SelectedItemsState = {
     }>;
 };
 
+export declare const selectSizes: readonly ["sm", "md"];
+
 /**
  * Response structure for non-paginated data
  */
@@ -4407,6 +4504,31 @@ declare global {
 }
 
 
+declare module "gridstack" {
+    interface GridStackWidget {
+        id?: string;
+        allowedSizes?: Array<{
+            w: number;
+            h: number;
+        }>;
+        renderFn?: () => React.ReactElement | null;
+        meta?: Record<string, unknown>;
+    }
+    interface GridStackNode {
+        id?: string;
+        w?: number;
+        h?: number;
+        x?: number;
+        y?: number;
+        allowedSizes?: Array<{
+            w: number;
+            h: number;
+        }>;
+        renderFn?: () => React.ReactElement | null;
+    }
+}
+
+
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         aiBlock: {
@@ -4434,31 +4556,6 @@ declare module "@tiptap/core" {
 }
 
 
-declare module "gridstack" {
-    interface GridStackWidget {
-        id?: string;
-        allowedSizes?: Array<{
-            w: number;
-            h: number;
-        }>;
-        renderFn?: () => React.ReactElement | null;
-        meta?: Record<string, unknown>;
-    }
-    interface GridStackNode {
-        id?: string;
-        w?: number;
-        h?: number;
-        x?: number;
-        y?: number;
-        allowedSizes?: Array<{
-            w: number;
-            h: number;
-        }>;
-        renderFn?: () => React.ReactElement | null;
-    }
-}
-
-
 declare namespace Calendar {
     var displayName: string;
 }

package/dist/f0.js

@@ -1,10 +1,10 @@
-import { S as Ge, a as Kt, f as Ce, L as J, b as Vt, A as qt, i as ae, c as tt, d as it, E as Xt, g as he, e as Yt, h as Jt, C as Zt, j as Qt, k as V, l as st, u as ei, G as ti, m as ii, n as $e, o as si, p as rt, q as ri, B as nt, X as ot, Y as ze, r as ni, s as at, t as oi, v as ai, w as li, x as hi, y as di, z as ci, D as ui, F as fi, H as Ue, I as gi, J as Z, K as Ne, M as pi, N as mi, O as vi, P as lt, Q as L, R as F, T as yi, U as bi, V as xi, W as _i, Z as wi, _ as Ei, $ as Ci, a0 as ht, a1 as Ni, a2 as de, a3 as dt, a4 as ct, a5 as Ri, a6 as ut, a7 as ft, a8 as gt, a9 as pt, aa as zi, ab as Di, ac as mt, ad as Pi, ae as Si, af as vt, ag as ki, ah as yt, ai as Oi, aj as Ai, ak as Ti, al as Li, am as Mi, an as Hi, ao as Bi, ap as Fi, aq as bt, ar as q, as as xt, at as Ii, au as Wi, av as je, aw as Gi, ax as _t, ay as $i, az as Ui, aA as ji, aB as Ki, aC as Vi, aD as qi, aE as Xi, aF as Yi, aG as Ji, aH as Zi, aI as Qi, aJ as es } from "./hooks-B2MvGPG3.js";
-import { ba as Fr, bn as Ir, bw as Wr, aK as Gr, aL as $r, aM as Ur, aN as jr, aO as Kr, aP as Vr, aQ as qr, aR as Xr, aT as Yr, aU as Jr, aV as Zr, aW as Qr, aX as en, aY as tn, aZ as sn, bs as rn, a$ as nn, b1 as on, b2 as an, b3 as ln, b4 as hn, b7 as dn, b8 as cn, b9 as un, bc as fn, b0 as gn, bb as pn, b6 as mn, bt as vn, bm as yn, bh as bn, bk as xn, bg as _n, bx as wn, bf as En, be as Cn, aS as Nn, a_ as Rn, b5 as zn, bd as Dn, bi as Pn, bo as Sn, bp as kn, bq as On, by as An, bj as Tn, br as Ln, bv as Mn, bl as Hn, bu as Bn } from "./hooks-B2MvGPG3.js";
+import { S as Ge, a as Kt, f as Ce, L as J, b as Vt, A as qt, i as ae, c as tt, d as it, E as Xt, g as he, e as Yt, h as Jt, C as Zt, j as Qt, k as V, l as st, u as ei, G as ti, m as ii, n as $e, o as si, p as rt, q as ri, B as nt, X as ot, Y as ze, r as ni, s as at, t as oi, v as ai, w as li, x as hi, y as di, z as ci, D as ui, F as fi, H as Ue, I as gi, J as Z, K as Ne, M as pi, N as mi, O as vi, P as lt, Q as L, R as F, T as yi, U as bi, V as xi, W as _i, Z as wi, _ as Ei, $ as Ci, a0 as ht, a1 as Ni, a2 as de, a3 as dt, a4 as ct, a5 as Ri, a6 as ut, a7 as ft, a8 as gt, a9 as pt, aa as zi, ab as Di, ac as mt, ad as Pi, ae as Si, af as vt, ag as ki, ah as yt, ai as Oi, aj as Ai, ak as Ti, al as Li, am as Mi, an as Hi, ao as Bi, ap as Fi, aq as bt, ar as q, as as xt, at as Ii, au as Wi, av as je, aw as Gi, ax as _t, ay as $i, az as Ui, aA as ji, aB as Ki, aC as Vi, aD as qi, aE as Xi, aF as Yi, aG as Ji, aH as Zi, aI as Qi, aJ as es } from "./hooks-6cqO_f33.js";
+import { bc as Fr, bp as Ir, by as Wr, aK as Gr, aL as $r, aM as Ur, aN as jr, aO as Kr, aP as Vr, aQ as qr, aR as Xr, aT as Yr, aU as Jr, aV as Zr, aW as Qr, aX as en, aY as tn, aZ as sn, bu as rn, a$ as nn, b0 as on, b3 as an, b4 as ln, b5 as hn, b6 as dn, b9 as cn, ba as un, bb as fn, be as gn, b2 as pn, bd as mn, b8 as vn, bv as yn, bo as bn, bj as xn, bm as _n, bi as wn, bz as En, bh as Cn, bg as Nn, aS as Rn, a_ as zn, b1 as Dn, b7 as Pn, bf as Sn, bk as kn, bq as On, br as An, bs as Tn, bA as Ln, bl as Mn, bt as Hn, bx as Bn, bn as Fn, bw as In } from "./hooks-6cqO_f33.js";
 import { jsx as g, jsxs as R, Fragment as xe } from "react/jsx-runtime";
 import * as ke from "react";
 import P, { PureComponent as ts, useState as M, forwardRef as U, createElement as Ke, useRef as Q, useImperativeHandle as wt, Children as is, createContext as _e, useContext as Et, useCallback as K, useEffect as ce, useLayoutEffect as Ve, useMemo as Ct } from "react";
 import { createPortal as ss } from "react-dom";
-import { defaultTranslations as In } from "./i18n-provider-defaults.js";
+import { defaultTranslations as Gn } from "./i18n-provider-defaults.js";
 import './f0.css';const cr = [
   "person",
   "team",
@@ -5154,29 +5154,30 @@ export {
   Ti as F0Icon,
   nn as F0Link,
   Lr as F0Provider,
-  on as F0TagAlert,
-  an as F0TagBalance,
-  ln as F0TagCompany,
-  hn as F0TagDot,
-  dn as F0TagList,
-  cn as F0TagPerson,
+  on as F0Select,
+  an as F0TagAlert,
+  ln as F0TagBalance,
+  hn as F0TagCompany,
+  dn as F0TagDot,
+  cn as F0TagList,
+  un as F0TagPerson,
   Oi as F0TagRaw,
   Ai as F0TagStatus,
-  un as F0TagTeam,
+  fn as F0TagTeam,
   Bs as F0Text,
-  fn as GROUP_ID_SYMBOL,
+  gn as GROUP_ID_SYMBOL,
   kr as HomeLayout,
   mr as LineChart,
-  gn as OneFilterPicker,
+  pn as OneFilterPicker,
   vr as PieChart,
   Yi as PrivacyModeProvider,
   $t as ProductBlankslate,
-  pn as ProductCard,
+  mn as ProductCard,
   Ar as ProductModal,
   ir as ProductWidget,
   br as ProgressBarChart,
   Pr as StandardLayout,
-  mn as TagCounter,
+  vn as TagCounter,
   Sr as TwoColumnLayout,
   xt as UpsellRequestResponseDialog,
   sr as UpsellingBanner,
@@ -5184,36 +5185,37 @@ export {
   Tr as UpsellingPopover,
   yr as VerticalBarChart,
   cr as avatarVariants,
-  vn as buildTranslations,
+  yn as buildTranslations,
   Cr as buttonDropdownSizes,
   Er as buttonDropdownVariants,
   wr as buttonSizes,
   Nr as buttonToggleSizes,
   _r as buttonVariants,
-  yn as createAtlaskitDriver,
-  bn as createDataSourceDefinition,
+  bn as createAtlaskitDriver,
+  xn as createDataSourceDefinition,
   Mr as dataCollectionLocalStorageHandler,
   Dr as datepickerSizes,
-  In as defaultTranslations,
+  Gn as defaultTranslations,
   pt as experimental,
-  xn as getAnimationVariants,
-  _n as getDataSourcePaginationType,
-  wn as getEmojiLabel,
-  En as isInfiniteScrollPagination,
-  Cn as isPageBasedPagination,
+  _n as getAnimationVariants,
+  wn as getDataSourcePaginationType,
+  En as getEmojiLabel,
+  Cn as isInfiniteScrollPagination,
+  Nn as isPageBasedPagination,
   Rr as linkVariants,
-  Nn as modules,
-  Rn as predefinedPresets,
-  zn as tagDotColors,
-  Dn as useData,
-  Pn as useDataSource,
-  Sn as useDndEvents,
-  kn as useDraggable,
-  On as useDroppableList,
-  An as useEmojiConfetti,
-  Tn as useGroups,
-  Ln as usePrivacyMode,
-  Mn as useReducedMotion,
-  Hn as useSelectable,
-  Bn as useXRay
+  Rn as modules,
+  zn as predefinedPresets,
+  Dn as selectSizes,
+  Pn as tagDotColors,
+  Sn as useData,
+  kn as useDataSource,
+  On as useDndEvents,
+  An as useDraggable,
+  Tn as useDroppableList,
+  Ln as useEmojiConfetti,
+  Mn as useGroups,
+  Hn as usePrivacyMode,
+  Bn as useReducedMotion,
+  Fn as useSelectable,
+  In as useXRay
 };