@servicetitan/anvil2 1.48.0 → 1.48.1

package/dist/beta/components/Table/DataTable/DataTable.d.ts

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { LayoutUtilProps } from '../../../../types';
 import { ColumnDef, CustomTableFooterCellProps, TableRow } from '../types';
 import { TableContainerProps } from '../base/TableContainer';
+import { DataTablePaginationConfig } from './types';
 /**
  * Represents a sorted column configuration for DataTable
  */
@@ -24,7 +25,7 @@ export type DataTableProps<T> = LayoutUtilProps & ComponentPropsWithoutRef<"div"
     /**
      * The data for the table. Must be an array of objects with an `id` property.
      */
-    data: TableRow<T>[];
+    data: TableRow<T>[] | Promise<TableRow<T>[]>;
     /**
      * The columns for the table, created with the `createColumnHelper` factory function.
      */
@@ -71,6 +72,12 @@ export type DataTableProps<T> = LayoutUtilProps & ComponentPropsWithoutRef<"div"
      * Called when the column sorting state changes. Passes the sorted column.
      */
     onSort?: (sortedColumn: SortedColumn | undefined) => void;
+    /**
+     * Pagination configuration. When provided, enables pagination and filters data to show only the current page.
+     * When `true`, the default pagination configuration is used.
+     * When `false` or `undefined`, no pagination is applied and all data is shown.
+     */
+    pagination?: boolean | DataTablePaginationConfig<T>;
     /**
      * The selected row ids.
      */
@@ -94,6 +101,7 @@ export type DataTableProps<T> = LayoutUtilProps & ComponentPropsWithoutRef<"div"
  * - Row sub-component
  * - Row sub-rows
  * - Default and Strong backgrounds
+ * - Pagination support with configurable items per page
  *
  * @param props - The props for the DataTable component
  * @param props.data - The data for the table. Must be an array of objects with an `id` property.
@@ -108,9 +116,22 @@ export type DataTableProps<T> = LayoutUtilProps & ComponentPropsWithoutRef<"div"
  * @param props.onSelectRow - Called when the row selection state changes. Passes the selected row ids.
  * @param props.onSort - Called when the column sorting state changes. Passes the sorted column.
  * @param props.onExpandRow - Called when the row expansion state changes. Passes the expanded row ids.
+ * @param props.pagination - Pagination configuration. When provided, enables pagination and filters data to show only the current page. When undefined, all data is shown and no pagination controls are rendered.
  * @param props.selectedRowIds - The selected row ids.
  * @param props.sortedColumn - The sorted column.
  * @param props.style - The style of the table container.
  * @param props.rest - The rest of the props for the DataTable component, spread to the div surrounding the table.
+ *
+ * @example
+ * <DataTable
+ *   data={tableData}
+ *   columns={columns}
+ *   pagination={{
+ *     itemsPerPage: 25,
+ *     defaultPageIndex: 0,
+ *     onPageChange: (pageIndex) => console.log('Page changed to:', pageIndex),
+ *     showCount: true,
+ *   }}
+ * />
  */
 export declare function DataTable<T>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Table/DataTable/DataTable.test-data.d.ts

@@ -7,6 +7,7 @@ export type TableStoryData = {
     status?: Status[];
 };
 export declare const data: TableRow<TableStoryData>[];
+export declare const longData: TableRow<TableStoryData>[];
 export declare const dataWithEmptyCells: TableRow<TableStoryData>[];
 export declare const dataWithSubRow: TableRow<TableStoryData>[];
 export declare const dataWithSubComponent: TableRow<TableStoryData>[];

package/dist/beta/components/Table/DataTable/internal/DataTableContext.d.ts

@@ -3,7 +3,7 @@ import { RegisterCellProps } from '../../internal/focus-management/useFocusManag
 /**
  * The context type for the table
  */
-interface DataTableContextType {
+export interface DataTableContextType {
     hoveredColumnId: string | null;
     setHoveredColumnId: (columnId: string | null) => void;
     isOffGridInteractionOccurring: boolean;
@@ -23,4 +23,3 @@ interface DataTableContextType {
  * The context for the table context provider
  */
 export declare const DataTableContext: import('react').Context<DataTableContextType | undefined>;
-export {};

package/dist/beta/components/Table/DataTable/internal/DataTablePagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from '../../../../..';
+export type DataTablePaginationProps = Pick<PaginationProps, "page" | "itemsPerPage" | "totalItemCount" | "showCount" | "onPageChange">;
+export declare const DataTablePagination: ({ showCount, ...props }: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Table/DataTable/internal/useDataTableContext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook to access the internal data table context
+ */
+export declare function useDataTableContext(): import('./DataTableContext').DataTableContextType;

package/dist/beta/components/Table/DataTable/stories/DataTable.story-data.d.ts

@@ -15,6 +15,7 @@ export declare const expandedRowData: TableRow<TableStoryData>[];
 export declare const subComponentsData: TableRow<TableStoryData>[];
 export declare const primaryColumns: import('../..').ColumnDef<TableStoryData>[];
 export declare const groupedColumns: import('../..').ColumnDef<TableStoryData>[];
+export declare const columnsWithoutFooter: import('../..').ColumnDef<TableStoryData>[];
 export type Category = "electronics" | "clothing" | "home" | "garden" | "other";
 export type EditableTableStoryData = {
     id: string;

package/dist/beta/components/Table/DataTable/types.d.ts

@@ -0,0 +1,43 @@
+import { TableRow } from '../types';
+/**
+ * Configuration for pagination in DataTable
+ */
+export type DataTablePaginationConfig<T> = {
+    /**
+     * Number of rows displayed per page
+     * @default 25
+     */
+    rowsPerPage?: number;
+    /**
+     * Current page index (0-based)
+     */
+    currentPageIndex?: number;
+    /**
+     * Function to get the data for the current page. When used, the data displayed will be
+     * fully controlled by the implementor. This is useful for server-side pagination scenarios where
+     * the total number of rows may differ from the data array length.
+     */
+    loadPageData?: ({ pageIndex, pageSize, }: {
+        pageIndex: number;
+        pageSize: number;
+    }) => TableRow<T>[] | Promise<TableRow<T>[]>;
+    /**
+     * Default page index for uncontrolled mode (0-based)
+     * @default 0
+     */
+    defaultPageIndex?: number;
+    /**
+     * Callback when page changes. Receives the new page index (0-based)
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Whether to display the item count information in pagination
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Total number of rows across all pages. Falls back to data.length if not provided.
+     * Useful for server-side pagination scenarios where totalRowCount may differ from data array length.
+     */
+    totalRowCount?: number;
+};

package/dist/beta/components/Table/createColumnHelper.d.ts

@@ -4,7 +4,7 @@ import { ColumnDef } from './types';
  * Utility type that allows a value to be either the original type or,
  * if it's an array, one of the elements in the array
  */
-type ValueOrElement<V> = V extends (infer U)[] ? V | U : V;
+export type ValueOrElement<V> = V extends (infer U)[] ? V | U : V;
 /**
  * Factory function to create column helper function for defining Table columns
  *
@@ -22,4 +22,3 @@ export declare function createColumnHelper<T>(): <K extends keyof T>(id: K | {
         label: string;
     }[];
 }) => ColumnDef<T>;
-export {};

package/dist/beta/components/Table/index.d.ts

@@ -1,3 +1,4 @@
+export * from './createColumnHelper';
 export * from './formatters';
 export * from './DataTable';
 export * from './types';

package/dist/beta.js

@@ -1,5 +1,5 @@
-export { D as DataTable, c as chipsFormatter, a as currencyFormatter, p as percentFormatter } from './DataTable-BHI2ONJ-.js';
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-hhk9ZQ9l.js';
-export { u as useCalendarBetaProps } from './Calendar-BWETPlKE.js';
-export { C as Calendar } from './Calendar-Bv7N3SoB.js';
+export { D as DataTable, a as chipsFormatter, c as createColumnHelper, b as currencyFormatter, p as percentFormatter } from './DataTable-xUON92DR.js';
+export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-CcJa_YpH.js';
+export { u as useCalendarBetaProps } from './Calendar-NDOcurOz.js';
+export { C as Calendar } from './Calendar-8bP4LsQV.js';
 //# sourceMappingURL=beta.js.map

package/dist/index.js

@@ -1,4 +1,5 @@
-import './index2.css';export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
+import './anvil-fonts.css';import './index2.css';/* empty css                     */
+export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
 export { A as Alert } from './Alert-Cz_w_cw0.js';
 export { A as Announcement } from './Announcement-C1xSJkl0.js';
 export { A as Avatar } from './Avatar-VQrimv28.js';
@@ -9,18 +10,18 @@ import { B as Button } from './Button-DzcOa6iJ.js';
 export { B as ButtonCompound } from './ButtonCompound-Dvr3Fres.js';
 import { B as ButtonLink } from './ButtonLink-DGIRpyK6.js';
 import { B as ButtonToggle } from './ButtonToggle-Dv6VAm4W.js';
-export { a as Calendar, g as CalendarMonth, f as CalendarMonthButton, e as CalendarNext, b as CalendarNow, d as CalendarPrev, c as CalendarYearButton } from './Calendar-BWETPlKE.js';
+export { a as Calendar, g as CalendarMonth, f as CalendarMonthButton, e as CalendarNext, b as CalendarNow, d as CalendarPrev, c as CalendarYearButton } from './Calendar-NDOcurOz.js';
 export { C as Card } from './Card-Cyoz-LaD.js';
 export { C as Checkbox } from './Checkbox-BJnt8TFk.js';
 export { C as CheckboxGroup } from './Checkbox-Bsa1FgoI.js';
 export { C as Chip } from './Chip-BGa1Inb8.js';
 export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, e as ComboboxItem, f as ComboboxItemAddNew, d as ComboboxList, g as ComboboxSearchField, b as ComboboxSelect, h as ComboboxSelectTrigger } from './Combobox-BfqKpX1v.js';
 export { u as useInfiniteCombobox } from './useInfiniteCombobox-WcRgC9p6.js';
-export { D as DateField } from './DateField-HeK2wOzu.js';
-export { D as DateFieldRange } from './DateFieldRange-GNPGcfcD.js';
-export { D as DateFieldSingle } from './DateFieldSingle-CvKdVIqR.js';
-export { D as DateFieldYearless } from './DateFieldYearless-B801SnxH.js';
-export { D as DaysOfTheWeek } from './DaysOfTheWeek-BJErLzD2.js';
+export { D as DateField } from './DateField-Cm0FIG3Y.js';
+export { D as DateFieldRange } from './DateFieldRange-CGGqW_cg.js';
+export { D as DateFieldSingle } from './DateFieldSingle-BYWuJ3IL.js';
+export { D as DateFieldYearless } from './DateFieldYearless-BXRgNWzy.js';
+export { D as DaysOfTheWeek } from './DaysOfTheWeek-BIi9dyJP.js';
 export { D as Details, b as DetailsContent, a as DetailsSummary } from './Details-Bg7QzlOm.js';
 export { D as Dialog, a as DialogCancelButton, b as DialogContent, c as DialogFooter, d as DialogHeader } from './Dialog-fJClGTI6.js';
 export { D as Divider } from './Divider-DYZFKug1.js';
@@ -32,26 +33,26 @@ export { F as FieldMessage } from './FieldMessage-BbARBii0.js';
 import { F as Flex } from './Flex-GLF5XRJg.js';
 export { G as Grid } from './Grid-BpAt2zA7.js';
 import { I as Icon } from './Icon-TcJbUdTz.js';
-export { I as InputMask } from './InputMask-BOkWmhsv.js';
+export { I as InputMask } from './InputMask-B6oJlChY.js';
 export { L as Layout, a as LayoutElement, b as LayoutItem } from './Layout-CUUb2PVr.js';
 export { L as Link, u as useLinkStyles } from './Link-Br_AJ7Af.js';
 export { L as LinkButton } from './LinkButton-CwiVzaro.js';
 import { L as Listbox } from './Listbox-gtZ2Ao_I.js';
 export { a as ListboxOption, b as ListboxOptionGroup } from './Listbox-gtZ2Ao_I.js';
-export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-kfwvU4Z-.js';
+export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-fBFSagWO.js';
 export { M as Menu, a as MenuItem } from './Menu-CBbUK_sX.js';
-export { N as NumberField } from './NumberField-CjvsSokL.js';
+export { N as NumberField } from './NumberField-CNskrtsN.js';
 export { Overflow, OverflowText } from './Overflow.js';
 export { P as Page } from './Page-4VdFrCjy.js';
-export { P as Pagination } from './Pagination-p734If5z.js';
+export { P as Pagination } from './Pagination-CQjNN1yN.js';
 import { P as Popover } from './Popover--c9PXAVi.js';
 export { a as PopoverButton, b as PopoverClose, c as PopoverContent, d as PopoverTrigger } from './Popover--c9PXAVi.js';
 export { P as ProgressBar } from './ProgressBar-CXMuhBQV.js';
-export { R as Radio } from './Radio-CLaDEpuU.js';
-export { R as RadioGroup } from './RadioGroup-DMJqrF4q.js';
+export { R as Radio } from './Radio-CTYs8JpI.js';
+export { R as RadioGroup } from './RadioGroup-BVGnsTuG.js';
 export { S as SearchField } from './SearchField-DLqva3o3.js';
 export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-1OzOQmCp.js';
-export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup } from './SelectCard-BORQF-zC.js';
+export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup } from './SelectCard-Dw7zW0UN.js';
 export { S as SelectTrigger } from './SelectTrigger-BQNqyG3M.js';
 export { S as SideNav, b as SideNavCollapsible, c as SideNavGroup, a as SideNavLink } from './SideNav-COiPAIph.js';
 export { Skeleton, SkeletonCircle, SkeletonPill, SkeletonRectangle, SkeletonText } from './Skeleton.js';
@@ -61,9 +62,9 @@ export { S as Stepper, a as StepperFinalPanel, b as StepperList, c as StepperNex
 export { S as Switch } from './Switch-mhyHJeex.js';
 export { T as Tab, a as TabButton, b as TabList, c as TabPanel } from './Tab-BISlFW_i.js';
 export { T as Text } from './Text-CDzLZl1O.js';
-export { T as Textarea } from './Textarea-CJG9i528.js';
-export { T as TextField } from './TextField-3szrbqNi.js';
-export { T as TimeField } from './TimeField-BfxAImzQ.js';
+export { T as Textarea } from './Textarea-f0jAKcvn.js';
+export { T as TextField } from './TextField-CUrYEZR4.js';
+export { T as TimeField } from './TimeField-CGSwrpl0.js';
 export { T as Toaster } from './Toaster-C6iB4h0P.js';
 export { t as toast } from './Toaster-D72xHdfH.js';
 import { jsx, jsxs } from 'react/jsx-runtime';