@wallarm-org/design-system 0.66.1 → 0.66.2-rc-fix-table-empty-state-story.1

package/dist/components/Page/PageContent.js

@@ -8,7 +8,7 @@ const PageContent = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "page-content",
-        className: cn('flex-1 min-h-0 overflow-auto px-16', className),
+        className: cn('flex-1 min-h-0 overflow-auto px-16 pt-8 pb-16', className),
         children: children
     });
 };

package/dist/components/Page/PageHeader.js

@@ -8,7 +8,7 @@ const PageHeader = ({ ref, sticky, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "page-header",
-        className: cn('flex items-center px-16 pb-16 gap-12', sticky && 'sticky top-0 z-10 bg-bg-surface-2', className),
+        className: cn('flex items-center px-16 pb-8 gap-12', sticky && 'sticky top-0 z-10 bg-bg-surface-2', className),
         children: children
     });
 };

package/dist/components/Pagination/PaginationPageSize.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { usePaginationContext } from "@ark-ui/react/pagination";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { Select, SelectButton, SelectContent, SelectOption, SelectOptionText, SelectPositioner } from "../Select/index.js";
+import { Select, SelectButton, SelectContent, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner } from "../Select/index.js";
 import { Separator } from "../Separator/index.js";
 import { Text } from "../Text/index.js";
 import { PAGINATION_PAGE_SIZE_LABEL } from "./constants.js";
@@ -29,7 +29,7 @@ const PaginationPageSize = ({ options, label = PAGINATION_PAGE_SIZE_LABEL, class
                 })
             }),
             /*#__PURE__*/ jsx("div", {
-                className: "w-fit",
+                className: "w-60",
                 children: /*#__PURE__*/ jsxs(Select, {
                     collection: collection,
                     value: [
@@ -39,15 +39,20 @@ const PaginationPageSize = ({ options, label = PAGINATION_PAGE_SIZE_LABEL, class
                     "data-testid": testId,
                     children: [
                         /*#__PURE__*/ jsx(SelectButton, {
+                            size: "medium",
                             "aria-label": label
                         }),
                         /*#__PURE__*/ jsx(SelectPositioner, {
+                            className: "min-w-0 w-88",
                             children: /*#__PURE__*/ jsx(SelectContent, {
-                                children: collection.items.map((item)=>/*#__PURE__*/ jsx(SelectOption, {
+                                children: collection.items.map((item)=>/*#__PURE__*/ jsxs(SelectOption, {
                                         item: item,
-                                        children: /*#__PURE__*/ jsx(SelectOptionText, {
-                                            children: item.label
-                                        })
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectOptionText, {
+                                                children: item.label
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectOptionIndicator, {})
+                                        ]
                                     }, item.value))
                             })
                         })

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

@@ -1,3 +1,4 @@
+export { useClientPagination } from './lib';
 export { Pagination, type PaginationProps } from './Pagination';
 export { usePaginationSizeContext } from './PaginationContext';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './PaginationEllipsis';

package/dist/components/Pagination/index.js

@@ -1,3 +1,4 @@
+import { useClientPagination } from "./lib/index.js";
 import { Pagination } from "./Pagination.js";
 import { usePaginationSizeContext } from "./PaginationContext.js";
 import { PaginationEllipsis } from "./PaginationEllipsis.js";
@@ -6,4 +7,4 @@ import { PaginationList } from "./PaginationList.js";
 import { PaginationNext } from "./PaginationNext.js";
 import { PaginationPageSize } from "./PaginationPageSize.js";
 import { PaginationPrevious } from "./PaginationPrevious.js";
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, usePaginationSizeContext };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, useClientPagination, usePaginationSizeContext };

package/dist/components/Pagination/lib/index.d.ts

@@ -1 +1,2 @@
 export { createPageSizeCollection } from './createPageSizeCollection';
+export { useClientPagination } from './useClientPagination';

package/dist/components/Pagination/lib/index.js

@@ -1,2 +1,3 @@
 import { createPageSizeCollection } from "./createPageSizeCollection.js";
-export { createPageSizeCollection };
+import { useClientPagination } from "./useClientPagination.js";
+export { createPageSizeCollection, useClientPagination };

package/dist/components/Pagination/lib/useClientPagination.d.ts

@@ -0,0 +1,12 @@
+import type { PaginationPageChangeDetails, PaginationPageSizeChangeDetails } from '../types';
+interface ClientPagination<T> {
+    count: number;
+    page: number;
+    pageSize: number;
+    pageData: T[];
+    onPageChange: (details: PaginationPageChangeDetails) => void;
+    onPageSizeChange: (details: PaginationPageSizeChangeDetails) => void;
+}
+/** Client-side paging: slices `data` for the current page and tracks page state. */
+export declare function useClientPagination<T>(data: T[], initialPageSize?: number): ClientPagination<T>;
+export {};

package/dist/components/Pagination/lib/useClientPagination.js

@@ -0,0 +1,28 @@
+import { useMemo, useState } from "react";
+function useClientPagination(data, initialPageSize = 10) {
+    const [requestedPage, setRequestedPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const count = data.length;
+    const totalPages = Math.max(1, Math.ceil(count / pageSize));
+    const page = Math.min(requestedPage, totalPages);
+    const pageData = useMemo(()=>{
+        const start = (page - 1) * pageSize;
+        return data.slice(start, start + pageSize);
+    }, [
+        data,
+        page,
+        pageSize
+    ]);
+    return {
+        count,
+        page,
+        pageSize,
+        pageData,
+        onPageChange: ({ page })=>setRequestedPage(page),
+        onPageSizeChange: ({ pageSize })=>{
+            setPageSize(pageSize);
+            setRequestedPage(1);
+        }
+    };
+}
+export { useClientPagination };

package/dist/components/Select/SelectButton.d.ts

@@ -5,6 +5,7 @@ type SelectButtonBaseProps = Omit<ButtonProps, 'variant' | 'color' | 'size' | 'd
 export interface SelectButtonVariantProps {
     variant?: Exclude<ButtonProps['variant'], 'primary'>;
     color?: Exclude<ButtonProps['color'], 'destructive'>;
+    size?: ButtonProps['size'];
 }
 type SelectButtonProps = SelectButtonBaseProps & SelectButtonVariantProps & SelectValueTextProps;
 export declare const SelectButton: FC<SelectButtonProps>;

package/dist/components/Select/SelectButton.js

@@ -6,7 +6,7 @@ import { SelectArrow } from "./SelectArrow.js";
 import { useSelectSharedContext } from "./SelectSharedContext/index.js";
 import { SelectValueIcon } from "./SelectValueIcon.js";
 import { SelectValueText } from "./SelectValueText.js";
-const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', 'data-testid': testIdProp, ...props })=>{
+const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', size = 'large', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('button', testIdProp);
     const { loading } = useSelectSharedContext();
     const { disabled } = useSelectContext();
@@ -18,7 +18,7 @@ const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color =
                 "data-testid": testId,
                 variant: variant,
                 color: color,
-                size: "large",
+                size: size,
                 loading: loading,
                 disabled: disabled,
                 fullWidth: true,

package/dist/components/Table/TableEmptyState.js

@@ -4,9 +4,9 @@ import { useTestId } from "../../utils/testId.js";
 import { useTableContext } from "./TableContext/index.js";
 const TableEmptyState = ({ children })=>{
     const testId = useTestId('empty-state');
-    const { table } = useTableContext();
+    const { table, isLoading } = useTableContext();
     const { rows } = table.getRowModel();
-    const tableIsEmpty = !rows.length;
+    const tableIsEmpty = !rows.length && !isLoading;
     if (!tableIsEmpty) return null;
     return /*#__PURE__*/ jsx("div", {
         "data-testid": testId,

package/dist/components/Table/lib/createSelectionColumn.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useIsKeyPressed } from "../../../hooks/index.js";
 import { Checkbox, CheckboxIndicator } from "../../Checkbox/index.js";
-import { useTableContext } from "../TableContext/useTableContext.js";
+import { useTableContext } from "../TableContext/index.js";
 import { TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH } from "./constants.js";
 const applyRangeSelection = (rows, fromIndex, toIndex, table, clickedRow)=>{
     const start = Math.min(fromIndex, toIndex);
@@ -57,9 +57,11 @@ const createSelectionColumn = ()=>({
         header: ({ table })=>{
             const checked = table.getIsAllPageRowsSelected();
             const indeterminate = table.getIsSomePageRowsSelected();
+            const rowCount = table.getRowCount();
             return /*#__PURE__*/ jsx(Checkbox, {
                 checked: indeterminate ? 'indeterminate' : checked,
                 onCheckedChange: ()=>table.toggleAllPageRowsSelected(!checked),
+                disabled: 0 === rowCount,
                 children: /*#__PURE__*/ jsx(CheckboxIndicator, {})
             });
         },

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.66.0",
-  "generatedAt": "2026-06-22T14:57:16.546Z",
+  "version": "0.66.1",
+  "generatedAt": "2026-06-23T05:30:21.081Z",
   "components": [
     {
       "name": "Accordion",
@@ -43997,7 +43997,7 @@
         },
         {
           "name": "WithPageSize",
-          "code": "() => (\n  <Pagination count={120} defaultPageSize={25} defaultPage={2} align='left'>\n    <PaginationPageSize options={[10, 25, 50]} />\n    <PaginationPrevious />\n    <PaginationList />\n    <PaginationNext />\n  </Pagination>\n)"
+          "code": "() => (\n  <Pagination count={120} defaultPageSize={25} defaultPage={2} align='right'>\n    <PaginationPageSize options={[10, 25, 50]} />\n    <PaginationPrevious />\n    <PaginationList />\n    <PaginationNext />\n  </Pagination>\n)"
         },
         {
           "name": "Sizes",
@@ -44017,8 +44017,7 @@
         },
         {
           "name": "InTable",
-          "code": "() => {\n  const [page, setPage] = useState(1);\n  const [pageSize, setPageSize] = useState(10);\n\n  const count = apiEndpoints.length;\n  const totalPages = Math.max(1, Math.ceil(count / pageSize));\n  const currentPage = Math.min(page, totalPages);\n\n  const pageData = useMemo(() => {\n    const start = (currentPage - 1) * pageSize;\n    return apiEndpoints.slice(start, start + pageSize);\n  }, [currentPage, pageSize]);\n\n  return (\n    <div className='w-800'>\n      <VStack gap={12}>\n        <Table data={pageData} columns={endpointColumns} getRowId={row => row.id} />\n        <Pagination\n          count={count}\n          page={currentPage}\n          pageSize={pageSize}\n          aria-label='API endpoints'\n          onPageChange={({ page }) => setPage(page)}\n          onPageSizeChange={({ pageSize }) => {\n            setPageSize(pageSize);\n            setPage(1);\n          }}\n        >\n          <PaginationPageSize options={[5, 10, 25]} />\n          {/* spacer pushes the navigation to the right edge of the footer */}\n          <div className='flex-1' />\n          <PaginationPrevious />\n          <PaginationList />\n          <PaginationNext />\n        </Pagination>\n      </VStack>\n    </div>\n  );\n}",
-          "description": "A table whose rows are paged by a Pagination footer: \"Rows per page\" on the\nleft, page navigation on the right. Changing the page or page size slices the\ndata set client-side (`count` = total rows, Ark derives the page count)."
+          "code": "() => {\n  const { pageData, ...pagination } = useClientPagination(apiEndpoints, 10);\n\n  return (\n    <div className='w-800'>\n      <VStack gap={12}>\n        <Table data={pageData} columns={endpointColumns} getRowId={row => row.id} />\n        <Pagination {...pagination} align='right' aria-label='API endpoints'>\n          <PaginationPageSize options={[5, 10, 25]} />\n          <PaginationPrevious />\n          <PaginationList />\n          <PaginationNext />\n        </Pagination>\n      </VStack>\n    </div>\n  );\n}"
         }
       ]
     },
@@ -70409,6 +70408,10 @@
           "name": "Basic",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'firstDetected', desc: true }]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
         },
+        {
+          "name": "WithPagination",
+          "code": "() => {\n  const allData = useMemo(() => createLargeSecurityEvents(47), []);\n  const { pageData, ...pagination } = useClientPagination(allData, 10);\n\n  return (\n    <VStack gap={12}>\n      <Table data={pageData} columns={securityColumns} getRowId={row => row.id} />\n      <Pagination {...pagination} align='right' aria-label='Security events'>\n        <PaginationPageSize options={[10, 25, 50]} />\n        <PaginationPrevious />\n        <PaginationList />\n        <PaginationNext />\n      </Pagination>\n    </VStack>\n  );\n}"
+        },
         {
           "name": "Sorting",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
@@ -70430,8 +70433,14 @@
           "code": "() => (\n  <Table\n    className='h-500'\n    data={securityEvents}\n    columns={securityColumns}\n    getRowId={row => row.id}\n    isLoading\n  />\n)"
         },
         {
-          "name": "EmptyState",
-          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <VStack align='center' justify='center' gap={8}>\n        <Text size='sm' weight='medium' color='primary'>\n          No results found\n        </Text>\n        <Text size='sm' color='secondary'>\n          Try to apply different filter or reset it.\n        </Text>\n      </VStack>\n    </TableEmptyState>\n  </Table>\n)"
+          "name": "EmptyCollection",
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='collection-empty'>\n        <EmptyStateIllustration>\n          <Database size='lg' />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No events yet</EmptyStateTitle>\n          <EmptyStateDescription>\n            Security events will appear here as soon as Wallarm detects traffic.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium'>Configure source</Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
+          "description": "When `data` is empty and the table is not loading, the `TableEmptyState` slot\nrenders its children. Compose the `EmptyState` component inside it to get the\nstandard illustration / message / actions layout.\n\nUse `type='collection-empty'` when there is genuinely no data yet (nothing has\nbeen created), and offer a primary action that creates the first item."
+        },
+        {
+          "name": "NoResults",
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <EmptyState type='no-results'>\n        <EmptyStateIllustration>\n          <SearchX size='lg' />\n        </EmptyStateIllustration>\n        <EmptyStateMessage>\n          <EmptyStateTitle>No results found</EmptyStateTitle>\n          <EmptyStateDescription>\n            No events match your current filters. Try adjusting or resetting them.\n          </EmptyStateDescription>\n        </EmptyStateMessage>\n        <EmptyStateActions>\n          <Button size='medium' variant='outline' color='neutral'>\n            <FilterX />\n            Reset filters\n          </Button>\n        </EmptyStateActions>\n      </EmptyState>\n    </TableEmptyState>\n  </Table>\n)",
+          "description": "Use `type='no-results'` when data exists but the current filters or search\nmatched nothing. Offer a neutral action that clears the filters rather than\na primary \"create\" action."
         },
         {
           "name": "ColumnResizing",
@@ -70488,7 +70497,7 @@
         },
         {
           "name": "ScrollToRow",
-          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n  const tableRef = useRef<TableHandle>(null);\n  const [lastResult, setLastResult] = useState<string | null>(null);\n\n  const scroll = (index: number, align: 'start' | 'center' | 'end' | 'auto' = 'center') => {\n    const row = largeData[index];\n    if (!row) return;\n    const ok = tableRef.current?.scrollToRow(row.id, { align, behavior: 'smooth' }) ?? false;\n    setLastResult(`scrollToRow(\"${row.id}\", { align: \"${align}\" }) → ${ok}`);\n  };\n\n  return (\n    <VStack gap='md'>\n      <HStack gap='sm'>\n        <Button onClick={() => scroll(0, 'start')}>Top</Button>\n        <Button onClick={() => scroll(499, 'center')}>Middle</Button>\n        <Button onClick={() => scroll(999, 'end')}>Bottom</Button>\n        <Button\n          variant='ghost'\n          onClick={() => {\n            const ok = tableRef.current?.scrollToRow('does-not-exist') ?? false;\n            setLastResult(`scrollToRow(\"does-not-exist\") → ${ok}`);\n          }}\n        >\n          Missing id (returns false)\n        </Button>\n      </HStack>\n      {lastResult && (\n        <Text size='sm' color='secondary'>\n          {lastResult}\n        </Text>\n      )}\n      <Table\n        ref={tableRef}\n        className='h-500'\n        data={largeData}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='container'\n      />\n    </VStack>\n  );\n}"
+          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n  const tableRef = useRef<TableHandle>(null);\n  const [lastResult, setLastResult] = useState<string | null>(null);\n\n  const scroll = (index: number, align: 'start' | 'center' | 'end' | 'auto' = 'center') => {\n    const row = largeData[index];\n    if (!row) return;\n    const ok = tableRef.current?.scrollToRow(row.id, { align, behavior: 'smooth' }) ?? false;\n    setLastResult(`scrollToRow(\"${row.id}\", { align: \"${align}\" }) → ${ok}`);\n  };\n\n  return (\n    <VStack gap={8}>\n      <HStack gap={8}>\n        <Button onClick={() => scroll(0, 'start')}>Top</Button>\n        <Button onClick={() => scroll(499, 'center')}>Middle</Button>\n        <Button onClick={() => scroll(999, 'end')}>Bottom</Button>\n        <Button\n          variant='ghost'\n          onClick={() => {\n            const ok = tableRef.current?.scrollToRow('does-not-exist') ?? false;\n            setLastResult(`scrollToRow(\"does-not-exist\") → ${ok}`);\n          }}\n        >\n          Missing id (returns false)\n        </Button>\n      </HStack>\n      {lastResult && (\n        <Text size='sm' color='secondary'>\n          {lastResult}\n        </Text>\n      )}\n      <Table\n        ref={tableRef}\n        className='h-500'\n        data={largeData}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='container'\n      />\n    </VStack>\n  );\n}"
         },
         {
           "name": "InfiniteScroll",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.66.1",
+  "version": "0.66.2-rc-fix-table-empty-state-story.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",