@pathscale/ui 1.1.13 → 1.1.14

package/dist/components/select/index.d.ts

@@ -1 +1,2 @@
-export { default, type SelectProps } from "./Select";
+export { default } from "./Select";
+export type { SelectProps, SelectRootProps, SelectValueType, SelectVariant, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, SelectListboxProps, SelectOptionProps, } from "./Select";

package/dist/components/table/EnhancedTable.js

@@ -10,6 +10,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__ from "../input/
 import * as __WEBPACK_EXTERNAL_MODULE__dropdown_Dropdown_js_1eafe997__ from "../dropdown/Dropdown.js";
 import * as __WEBPACK_EXTERNAL_MODULE__loading_Loading_js_1fa096bd__ from "../loading/Loading.js";
 import * as __WEBPACK_EXTERNAL_MODULE__menu_Menu_js_2e8cbfbf__ from "../menu/Menu.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__ from "./hooks/index.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="cursor-pointer ml-auto shrink-0">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=mb-2></div><div class="flex gap-2 justify-end">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center gap-2"><span class=opacity-70>Rows per page</span></div><div class="flex items-center gap-3 ml-4"><span class=opacity-70>Page <!> of </span><div class=join>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2"><div class=truncate>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex gap-2">');
 function EnhancedTable_EnhancedTable(props) {
     const [local, tableProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -48,67 +49,64 @@ function EnhancedTable_EnhancedTable(props) {
         "nextPageIcon",
         "lastPageIcon"
     ]);
-    const [openFilterFor, setOpenFilterFor] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [pageSizeMenuOpen, setPageSizeMenuOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const [pageSizeMenuStyle, setPageSizeMenuStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
-        position: "fixed",
-        top: "0px",
-        left: "0px",
-        "min-width": "96px",
-        "z-index": 1300
+    const sortingModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableSorting)({
+        sorting: local.sorting,
+        setSorting: local.setSorting,
+        initialSorting: []
+    });
+    const paginationModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTablePagination)({
+        pagination: local.pagination,
+        setPagination: local.setPagination,
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: 10
+        },
+        pageSizeOptions: [
+            10,
+            25,
+            50,
+            100
+        ]
+    });
+    const selectionModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableSelection)({
+        rowSelection: local.rowSelection,
+        setRowSelection: local.setRowSelection,
+        initialRowSelection: {}
+    });
+    const filteringModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableFiltering)({
+        columnFilters: local.columnFilters,
+        setColumnFilters: local.setColumnFilters,
+        initialColumnFilters: [],
+        globalFilter: local.globalFilter,
+        setGlobalFilter: local.setGlobalFilter,
+        initialGlobalFilter: ""
+    });
+    const expansionModel = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableExpansion)({
+        expanded: local.expanded,
+        setExpanded: local.setExpanded,
+        initialExpanded: {}
     });
-    const pageSizeOptions = [
-        10,
-        25,
-        50,
-        100
-    ];
     let pageSizeToggleRef;
     let pageSizeMenuRef;
-    const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.createSolidTable)({
-        get data () {
-            return local.data;
-        },
-        get columns () {
-            return local.columns;
-        },
-        state: {
-            get sorting () {
-                return local.sorting?.() || [];
-            },
-            get columnFilters () {
-                return local.columnFilters?.() || [];
-            },
-            get pagination () {
-                return local.pagination?.() || {
-                    pageIndex: 0,
-                    pageSize: 10
-                };
-            },
-            get globalFilter () {
-                return local.globalFilter?.() || "";
-            },
-            get rowSelection () {
-                return local.rowSelection?.() || {};
-            },
-            get expanded () {
-                return local.expanded?.() || {};
-            }
-        },
-        onSortingChange: local.setSorting,
-        onColumnFiltersChange: local.setColumnFilters,
-        onPaginationChange: local.setPagination,
-        onGlobalFilterChange: local.setGlobalFilter,
-        onRowSelectionChange: local.setRowSelection,
-        onExpandedChange: local.setExpanded,
-        getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getCoreRowModel)(),
-        getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getSortedRowModel)(),
-        getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getFilteredRowModel)(),
-        getPaginationRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getPaginationRowModel)(),
-        getExpandedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getExpandedRowModel)(),
+    const table = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useTableModel)({
+        data: ()=>local.data,
+        columns: ()=>local.columns,
+        sorting: sortingModel.sorting,
+        setSorting: sortingModel.setSorting,
+        columnFilters: filteringModel.columnFilters,
+        setColumnFilters: filteringModel.setColumnFilters,
+        pagination: paginationModel.pagination,
+        setPagination: paginationModel.setPagination,
+        globalFilter: filteringModel.globalFilter,
+        setGlobalFilter: filteringModel.setGlobalFilter,
+        rowSelection: selectionModel.rowSelection,
+        setRowSelection: selectionModel.setRowSelection,
+        expanded: expansionModel.expanded,
+        setExpanded: expansionModel.setExpanded,
         enableSorting: false !== local.enableSorting,
         enableFilters: !!local.enableFilters,
-        manualPagination: !local.enablePagination,
+        enablePagination: !!local.enablePagination,
         enableRowSelection: !!local.enableRowSelection,
         enableExpanding: true,
         getRowCanExpand: ()=>!!local.expandable
@@ -127,82 +125,37 @@ function EnhancedTable_EnhancedTable(props) {
         return pageCount > 1 || totalRows > pageSize;
     });
     const headerGroups = ()=>table.getHeaderGroups();
-    const sortDescriptor = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        const activeSort = table.getState().sorting[0];
-        if (!activeSort) return;
-        return {
-            column: activeSort.id,
-            direction: activeSort.desc ? "descending" : "ascending"
-        };
-    });
-    const handleSortChange = (descriptor)=>{
-        table.setSorting([
-            {
-                id: descriptor.column,
-                desc: "descending" === descriptor.direction
-            }
-        ]);
-    };
+    const sortDescriptor = sortingModel.sortDescriptor;
+    const handleSortChange = sortingModel.setSortDescriptor;
     const totalColumns = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>table.getVisibleLeafColumns().length + (local.enableRowSelection ? 1 : 0) + (local.expandable ? 1 : 0));
     const filterTriggerRefs = new Map();
-    const [filterPanelStyle, setFilterPanelStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
-        position: "fixed",
-        top: "0px",
-        left: "0px",
-        "z-index": 1300
-    });
     let filterPanelRef;
-    const updateFilterPanelPosition = ()=>{
-        const colId = openFilterFor();
-        if (!colId) return;
-        const triggerEl = filterTriggerRefs.get(colId);
-        if (!triggerEl) return;
-        const rect = triggerEl.getBoundingClientRect();
-        const panelWidth = 224;
-        const offset = 6;
-        const viewportPadding = 8;
-        let left = rect.right - panelWidth;
-        left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
-        let top = rect.bottom + offset;
-        if (filterPanelRef) {
-            const panelHeight = filterPanelRef.getBoundingClientRect().height;
-            if (top + panelHeight > window.innerHeight - viewportPadding) {
-                const above = rect.top - panelHeight - offset;
-                top = above >= viewportPadding ? above : Math.max(viewportPadding, window.innerHeight - panelHeight - viewportPadding);
-            }
-        }
-        setFilterPanelStyle({
-            position: "fixed",
-            top: `${top}px`,
-            left: `${left}px`,
-            "z-index": 1300
-        });
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (!openFilterFor()) return;
-        requestAnimationFrame(()=>{
-            updateFilterPanelPosition();
-            requestAnimationFrame(updateFilterPanelPosition);
-        });
-        const onViewportChange = ()=>updateFilterPanelPosition();
-        window.addEventListener("resize", onViewportChange);
-        window.addEventListener("scroll", onViewportChange, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-            window.removeEventListener("resize", onViewportChange);
-            window.removeEventListener("scroll", onViewportChange, true);
-        });
+    const filterPanelAnchor = ()=>filteringModel.openFilterFor() ? filterTriggerRefs.get(filteringModel.openFilterFor()) : void 0;
+    const filterPanelPosition = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useAnchoredOverlayPosition)({
+        isOpen: ()=>Boolean(filteringModel.openFilterFor()),
+        getAnchor: filterPanelAnchor,
+        getOverlay: ()=>filterPanelRef,
+        width: 224,
+        zIndex: 1300
+    });
+    const pageSizeMenuPosition = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_ea54ea0e__.useAnchoredOverlayPosition)({
+        isOpen: pageSizeMenuOpen,
+        getAnchor: ()=>pageSizeToggleRef,
+        getOverlay: ()=>pageSizeMenuRef,
+        minWidth: ()=>pageSizeToggleRef ? Math.max(pageSizeToggleRef.getBoundingClientRect().width, 96) : 96,
+        zIndex: 1300
     });
     const FilterIconTrigger = (props)=>(()=>{
             var _el$ = _tmpl$();
             _el$.$$click = (e)=>{
                 e.stopPropagation();
-                if (!props.disabled) setOpenFilterFor((c)=>c === props.colId ? null : props.colId);
+                if (!props.disabled) filteringModel.toggleFilter(props.colId);
             };
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>filterTriggerRefs.set(props.colId, el), _el$);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.filterIcon);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.classList)(_el$, {
                     "opacity-50 pointer-events-none": props.disabled,
-                    "text-primary": openFilterFor() === props.colId
+                    "text-primary": filteringModel.openFilterFor() === props.colId
                 }, _$p));
             return _el$;
         })();
@@ -211,7 +164,7 @@ function EnhancedTable_EnhancedTable(props) {
         const colId = col.id;
         return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
-                return openFilterFor() === colId;
+                return filteringModel.openFilterFor() === colId;
             },
             get children () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
@@ -232,18 +185,18 @@ function EnhancedTable_EnhancedTable(props) {
                             variant: "outline",
                             onClick: ()=>{
                                 col.setFilterValue(void 0);
-                                setOpenFilterFor(null);
+                                filteringModel.closeFilter();
                             },
                             children: "Clear"
                         }), null);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
                             size: "sm",
                             variant: "primary",
-                            onClick: ()=>setOpenFilterFor(null),
+                            onClick: ()=>filteringModel.closeFilter(),
                             children: "Apply"
                         }), null);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                            var _v$ = filterPanelStyle(), _v$2 = local.filterPanelClass ?? "z-[1300] w-56 border border-nf-border bg-nf-surface-1 shadow-lg rounded-box p-2";
+                            var _v$ = filterPanelPosition.style(), _v$2 = local.filterPanelClass ?? "z-[1300] w-56 border border-nf-border bg-nf-surface-1 shadow-lg rounded-box p-2";
                             _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$, _p$.e);
                             _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.t = _v$2);
                             return _p$;
@@ -266,33 +219,6 @@ function EnhancedTable_EnhancedTable(props) {
         document.body.append(root);
         return root;
     };
-    const updatePageSizeMenuPosition = ()=>{
-        const toggleEl = pageSizeToggleRef;
-        const menuEl = pageSizeMenuRef;
-        if (!toggleEl || !menuEl) return;
-        const viewportPadding = 8;
-        const gap = 4;
-        const toggleRect = toggleEl.getBoundingClientRect();
-        const menuRect = menuEl.getBoundingClientRect();
-        const menuWidth = menuRect.width || Math.max(toggleRect.width, 96);
-        const menuHeight = menuRect.height || 0;
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        let left = toggleRect.right - menuWidth;
-        left = Math.max(viewportPadding, Math.min(left, viewportWidth - menuWidth - viewportPadding));
-        const spaceBelow = viewportHeight - toggleRect.bottom;
-        const spaceAbove = toggleRect.top;
-        const shouldOpenUp = spaceBelow < menuHeight + gap && spaceAbove > menuHeight + gap;
-        let top = shouldOpenUp ? toggleRect.top - menuHeight - gap : toggleRect.bottom + gap;
-        top = Math.max(viewportPadding, Math.min(top, viewportHeight - menuHeight - viewportPadding));
-        setPageSizeMenuStyle({
-            position: "fixed",
-            top: `${top}px`,
-            left: `${left}px`,
-            "min-width": `${Math.max(toggleRect.width, 96)}px`,
-            "z-index": 1300
-        });
-    };
     const closePageSizeMenu = ()=>setPageSizeMenuOpen(false);
     const togglePageSizeMenu = ()=>setPageSizeMenuOpen((current)=>!current);
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
@@ -301,10 +227,6 @@ function EnhancedTable_EnhancedTable(props) {
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!pageSizeMenuOpen()) return;
         ensurePortalRoot();
-        requestAnimationFrame(()=>{
-            updatePageSizeMenuPosition();
-            requestAnimationFrame(updatePageSizeMenuPosition);
-        });
         const onPointerDown = (event)=>{
             const target = event.target;
             if (!target) return;
@@ -315,16 +237,11 @@ function EnhancedTable_EnhancedTable(props) {
         const onKeyDown = (event)=>{
             if ("Escape" === event.key) closePageSizeMenu();
         };
-        const onViewportChange = ()=>updatePageSizeMenuPosition();
         document.addEventListener("pointerdown", onPointerDown);
         document.addEventListener("keydown", onKeyDown);
-        window.addEventListener("resize", onViewportChange);
-        window.addEventListener("scroll", onViewportChange, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
             document.removeEventListener("pointerdown", onPointerDown);
             document.removeEventListener("keydown", onKeyDown);
-            window.removeEventListener("resize", onViewportChange);
-            window.removeEventListener("scroll", onViewportChange, true);
         });
     });
     return [
@@ -676,14 +593,16 @@ function EnhancedTable_EnhancedTable(props) {
                                 pageSizeMenuRef = el;
                             },
                             get style () {
-                                return pageSizeMenuStyle();
+                                return pageSizeMenuPosition.style();
                             },
                             class: "p-2 shadow bg-base-100 rounded-box border border-base-300 w-24",
                             role: "menu",
                             "aria-label": "Rows per page",
                             get children () {
                                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                                    each: pageSizeOptions,
+                                    get each () {
+                                        return paginationModel.pageSizeOptions();
+                                    },
                                     children: (size)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
                                             type: "button",
                                             size: "sm",

package/dist/components/table/Table.css

@@ -18,7 +18,7 @@
     background-color: var(--color-base-200);
     padding-inline: 0.25rem;
     padding-bottom: 0.25rem;
-    border-radius: 0.75rem;
+    border-radius: calc(var(--radius-box, 1rem) * 1.25);
   }
 
   /* --------------------------------------------------------------------------
@@ -102,13 +102,13 @@
   }
 
   .table-root--secondary .table__column:first-child {
-    border-top-left-radius: 0.75rem;
-    border-bottom-left-radius: 0.75rem;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
   }
 
   .table-root--secondary .table__column:last-child {
-    border-top-right-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
   }
 
   .table-root--secondary .table__body tr:first-child td:first-child,
@@ -210,19 +210,19 @@
      Table Body (<tbody>)
      -------------------------------------------------------------------------- */
   .table__body tr:first-child td:first-child {
-    border-top-left-radius: 0.5rem;
+    border-top-left-radius: 1rem;
   }
 
   .table__body tr:first-child td:last-child {
-    border-top-right-radius: 0.5rem;
+    border-top-right-radius: 1rem;
   }
 
   .table__body tr:last-child td:first-child {
-    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 1rem;
   }
 
   .table__body tr:last-child td:last-child {
-    border-bottom-right-radius: 0.5rem;
+    border-bottom-right-radius: 1rem;
   }
 
   /* --------------------------------------------------------------------------
@@ -287,6 +287,14 @@
     box-shadow: inset 0 0 0 2px var(--color-accent);
   }
 
+  .table__expanded-row .table__expanded-cell {
+    background-color: color-mix(in oklch, var(--color-base-200) 75%, var(--color-base-100));
+  }
+
+  .table__expanded-cell {
+    padding-block: 0.875rem;
+  }
+
   /* --------------------------------------------------------------------------
      Table Footer (div outside <table>)
      -------------------------------------------------------------------------- */
@@ -297,6 +305,39 @@
     padding-block: 0.625rem;
   }
 
+  .table__page-size {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
+  .table__page-size-label {
+    opacity: 0.7;
+  }
+
+  .table__page-size-select {
+    min-width: 4.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    background-color: var(--color-base-100);
+    padding-inline: 0.75rem;
+    padding-block: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--color-base-content);
+  }
+
+  .table__page-size-select:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-accent);
+  }
+
   /* --------------------------------------------------------------------------
      Resizable Container
      -------------------------------------------------------------------------- */

package/dist/components/table/Table.d.ts

@@ -45,8 +45,24 @@ export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponent
 declare const TableRow: Component<TableRowProps>;
 export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
 declare const TableCell: Component<TableCellProps>;
+export type TableExpandedRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps & {
+    colSpan: number;
+    cellClass?: string;
+    cellClassName?: string;
+    cellDataTheme?: string;
+};
+declare const TableExpandedRow: Component<TableExpandedRowProps>;
 export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const TableFooter: Component<TableFooterProps>;
+export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> & IComponentBaseProps & {
+    value: number;
+    options: readonly number[];
+    onChange: (value: number) => void;
+    label?: JSX.Element;
+    selectClass?: string;
+    selectClassName?: string;
+};
+declare const TablePageSize: Component<TablePageSizeProps>;
 export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const TableResizableContainer: Component<TableResizableContainerProps>;
 export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
@@ -56,7 +72,7 @@ declare const TableLoadMore: Component<TableLoadMoreProps>;
 export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const TableLoadMoreContent: Component<TableLoadMoreContentProps>;
 export type { TableVariant, TableSortDirection, TableSortDescriptor, TableColumnRenderProps, };
-export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableFooter, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };
+export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableExpandedRow, TableFooter, TablePageSize, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };
 declare const _default: Component<TableRootProps> & {
     Root: Component<TableRootProps>;
     ScrollContainer: Component<TableScrollContainerProps>;
@@ -66,7 +82,9 @@ declare const _default: Component<TableRootProps> & {
     Body: Component<TableBodyProps>;
     Row: Component<TableRowProps>;
     Cell: Component<TableCellProps>;
+    ExpandedRow: Component<TableExpandedRowProps>;
     Footer: Component<TableFooterProps>;
+    PageSize: Component<TablePageSizeProps>;
     ResizableContainer: Component<TableResizableContainerProps>;
     ColumnResizer: Component<TableColumnResizerProps>;
     LoadMore: Component<TableLoadMoreProps>;