@orfium/ictinus 5.43.2 → 5.43.3

package/.turbo/turbo-build.log

@@ -1,16 +1,16 @@
 
-> @orfium/ictinus@5.43.2 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.3 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > pnpm build:main && pnpm build:codemods && pnpm build:vanilla
 
 
-> @orfium/ictinus@5.43.2 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.3 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --mode production
 
 production /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 vite v7.3.1 building client environment for production...
 production /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 transforming...
-✓ 804 modules transformed.
+✓ 806 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
@@ -52,10 +52,10 @@ computing gzip size...
 dist/components/Table/components/TBody/TBody.style.js                                                          0.29 kB │ gzip:  0.21 kB
 dist/hooks/useEscape.js                                                                                        0.29 kB │ gzip:  0.19 kB
 dist/hooks/useCombinedRefs.js                                                                                  0.29 kB │ gzip:  0.20 kB
-dist/components/Controls/ControlLabel/ControlHelpText.js                                                       0.30 kB │ gzip:  0.24 kB
 dist/components/Icon/assets/usersAndStatus/statusIndicator.svg.js                                              0.30 kB │ gzip:  0.23 kB
-dist/components/Breadcrumb/Breadcrumb.style.js                                                                 0.30 kB │ gzip:  0.23 kB
+dist/components/Controls/ControlLabel/ControlHelpText.js                                                       0.30 kB │ gzip:  0.24 kB
 dist/components/Chart/Wrapper.js                                                                               0.30 kB │ gzip:  0.21 kB
+dist/components/Breadcrumb/Breadcrumb.style.js                                                                 0.30 kB │ gzip:  0.23 kB
 dist/components/TableV4/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.style.js            0.30 kB │ gzip:  0.24 kB
 dist/components/Tabs/components/TabsContainer/TabsContainer.style.js                                           0.31 kB │ gzip:  0.22 kB
 dist/components/TableV4/components/TableCell/utils.js                                                          0.31 kB │ gzip:  0.23 kB
@@ -207,8 +207,8 @@ computing gzip size...
 dist/components/Search/StatefulSearch.js                                                                       0.89 kB │ gzip:  0.48 kB
 dist/components/Slider/components/SliderMark/SliderMark.js                                                     0.89 kB │ gzip:  0.50 kB
 dist/components/Icon/assets/musicBusiness/recording.svg.js                                                     0.90 kB │ gzip:  0.53 kB
-dist/components/TopAppBar/TopAppBar.style.js                                                                   0.91 kB │ gzip:  0.46 kB
 dist/components/Icon/assets/generic/search filled.svg.js                                                       0.91 kB │ gzip:  0.48 kB
+dist/components/TopAppBar/TopAppBar.style.js                                                                   0.91 kB │ gzip:  0.46 kB
 dist/icons/LicenseIcon.js                                                                                      0.91 kB │ gzip:  0.54 kB
 dist/components/Icon/assets/audioControls/rewind.svg.js                                                        0.91 kB │ gzip:  0.48 kB
 dist/components/Icon/Icon.style.js                                                                             0.91 kB │ gzip:  0.48 kB
@@ -394,8 +394,8 @@ computing gzip size...
 dist/components/Icon/assets/musicBusiness/artist.svg.js                                                        1.54 kB │ gzip:  0.81 kB
 dist/components/Drawer/Drawer.js                                                                               1.55 kB │ gzip:  0.70 kB
 dist/icons/DigitalIcon.js                                                                                      1.55 kB │ gzip:  0.78 kB
-dist/components/Table/components/OptimizedTableRow.js                                                          1.55 kB │ gzip:  0.73 kB
 dist/components/Controls/Switch/Switch.style.js                                                                1.55 kB │ gzip:  0.72 kB
+dist/components/Table/components/OptimizedTableRow.js                                                          1.55 kB │ gzip:  0.73 kB
 dist/icons/ConflictIcon.js                                                                                     1.55 kB │ gzip:  0.86 kB
 dist/icons/AssetIcon.js                                                                                        1.58 kB │ gzip:  0.85 kB
 dist/icons/LockIcon.js                                                                                         1.59 kB │ gzip:  0.81 kB
@@ -605,11 +605,11 @@ computing gzip size...
 dist/icon/Icon.js                                                                                             11.30 kB │ gzip:  2.63 kB
 dist/index.js                                                                                                 13.17 kB │ gzip:  3.18 kB
 dist/sprinkles/properties.css.js                                                                             115.20 kB │ gzip: 14.54 kB
-[vite:dts] Declaration files built in 10187ms.
+[vite:dts] Declaration files built in 10065ms.
 
-✓ built in 14.64s
+✓ built in 14.38s
 
-> @orfium/ictinus@5.43.2 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.3 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --config vite.codemods.config.ts
 
 vite v7.3.1 building client environment for production...
@@ -642,11 +642,11 @@ computing gzip size...
 dist/codemods/drawerCodemod.cjs          1.07 kB │ gzip: 0.42 kB
 dist/codemods/unchangedIconsCodemod.cjs  1.12 kB │ gzip: 0.56 kB
 dist/codemods/globalsCodemod.cjs         6.99 kB │ gzip: 1.11 kB
-[vite:dts] Declaration files built in 815ms.
+[vite:dts] Declaration files built in 778ms.
 
-✓ built in 995ms
+✓ built in 953ms
 
-> @orfium/ictinus@5.43.2 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.3 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > rm -rf dist/vanilla && NODE_ENV=production rollup -c
 
 
@@ -657,4 +657,4 @@ computing gzip size...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 csstype (imported by "node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.ts")
-created dist/vanilla in 3.3s
+created dist/vanilla in 3.4s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orfium/ictinus
 
+## 5.43.3
+
+### Patch Changes
+
+- 9e38725: table counter + bulk actions
+
 ## 5.43.2
 
 ### Patch Changes

package/dist/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "@orfium/ictinus",
-  "version": "5.43.2",
+  "version": "5.43.3",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = "5.43.2";
+const o = "5.43.3";
 export {
   o as version
 };

package/dist/src/components/Box/Box.d.ts

@@ -1,5 +1,10 @@
 import { default as React } from 'react';
 import { StyledBoxProps } from './Box.types';
 export type BoxProps = StyledBoxProps & React.HTMLAttributes<HTMLDivElement>;
+/**
+ *
+ * @deprecated {@link Box} has been deprecated; use vanilla Box instead.
+ *
+ */
 declare const Box: React.ForwardRefExoticComponent<StyledBoxProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default Box;

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

@@ -1,5 +1,10 @@
 import { NoUndefined } from '.';
 import { TableProps } from './types';
+/**
+ *
+ * @deprecated {@link Table} has been deprecated; use DataTable instead.
+ *
+ */
 declare const Table: <TData extends NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const _default: typeof Table;
 export default _default;

package/dist/src/components/Typography/Typography.d.ts

@@ -24,5 +24,10 @@ export type TypographyProps = {
     id?: string;
 };
 export declare const detectComponentBasedOnType: (variant: TypographyVariant) => TypographyComponent;
+/**
+ *
+ * @deprecated {@link Typography} has been deprecated; use vanilla Text instead.
+ *
+ */
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Typography;

package/dist/src/data-table/DataTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/data-table/DataTableBulkActions.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '../vanilla/Box';
+export type DataTableBulkActionsProps = BoxProps<'div'>;
+export declare function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/data-table/DataTableCounter.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '../vanilla/Box';
+export type DataTableCounterProps = BoxProps<'div', {
+    count?: number;
+    singular?: string;
+    plural?: string;
+}>;
+export declare function DataTableCounter({ count: countProp, singular, plural, ...props }: DataTableCounterProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/data-table/index.d.ts

@@ -1,5 +1,7 @@
 export * from './DataTable';
 export * from './DataTableBody';
+export * from './DataTableBulkActions';
 export * from './DataTableCheckbox';
+export * from './DataTableCounter';
 export * from './DataTableEditColumns';
 export * from './DataTableHeader';

package/dist/vanilla/index.d.ts

@@ -1706,6 +1706,9 @@ declare const DataTableBody: react.ForwardRefExoticComponent<{
     className?: string;
 }>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
+type DataTableBulkActionsProps = BoxProps<'div'>;
+declare function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps): _emotion_react_jsx_runtime.JSX.Element;
+
 declare const CheckBox: react__default.ForwardRefExoticComponent<any>;
 
 type DataTableCheckboxProps = ComponentPropsWithoutRef<typeof CheckBox>;
@@ -1714,6 +1717,13 @@ type DataTableCheckboxProps = ComponentPropsWithoutRef<typeof CheckBox>;
  */
 declare const DataTableCheckbox: react.ForwardRefExoticComponent<any>;
 
+type DataTableCounterProps = BoxProps<'div', {
+    count?: number;
+    singular?: string;
+    plural?: string;
+}>;
+declare function DataTableCounter({ count: countProp, singular, plural, ...props }: DataTableCounterProps): _emotion_react_jsx_runtime.JSX.Element;
+
 declare function DataTableEditColumns(): _emotion_react_jsx_runtime.JSX.Element;
 
 type DataTableHeaderProps = BoxProps;
@@ -6164,5 +6174,5 @@ declare namespace TooltipTrigger {
     var displayName: string;
 }
 
-export { AccountIcon, AlbumIcon, AnalyticsIcon, AppsIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArtistIcon, AssetIcon, AudioIcon, AudioOffIcon, BookmarkIcon, BookmarkOffIcon, Box, BroadcastIcon, CalendarIcon, CatalogIcon, ChannelIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CinemaIcon, ClaimIcon, CloseIcon, ColumnChooserIcon, CompositionIcon, ConcertIcon, ConflictIcon, ConvertIcon, CopyIcon, CueSheetIcon, DashboardIcon, DataTable, DataTableBody, DataTableCheckbox, DataTableEditColumns, DataTableHeader, DatasetIcon, DeleteIcon, DeliveryIcon, DetailsIcon, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DigitalIcon, DistributionIcon, DownloadIcon, EarningsIcon, EditIcon, EntitiesIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FavoriteIcon, FavoriteOffIcon, FileIcon, FilterIcon, FlagIcon, FlagOffIcon, ForwardIcon, FreezeIcon, HelpIcon, ICONS, Icon, ImageIcon, ImageOffIcon, IncomeIcon, InformationalIcon, InsightIcon, InvoiceIcon, IssueIcon, KeywordIcon, LanguageIcon, LegalIcon, LicenseIcon, LinkIcon, LocationIcon, LockIcon, LoginIcon, LogoutIcon, MailIcon, ManualIcon, MediaFileIcon, Menu, MenuContent, MenuDescription, MenuHeader, MenuIcon, MenuItem, MenuLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, MinusIcon, MoreOptionsIcon, NextIcon, NotificationIcon, OrganizationIcon, PageFirstIcon, PageLastIcon, PairIcon, PauseIcon, PendingIcon, PlayIcon, PlaycountIcon, PlusIcon, PolicyIcon, Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, PreviousIcon, PublicPerformanceIcon, PublisherIcon, RadioIcon, RecordLabelIcon, RecordingIcon, RedoIcon, RefreshIcon, ReportIcon, RestoreIcon, ResumeIcon, ReviewIcon, RewindIcon, RoleIcon, SearchFilledIcon, SearchIcon, SettingsIcon, ShareIcon, SortAscendingIcon, SortDescendingIcon, SortIcon, StatusIndicatorIcon, StopIcon, SuccessIcon, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, TagIcon, TelevisionIcon, Text, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TooltipContent, TooltipTrigger, TrendingDownIcon, TrendingUpIcon, TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, UndoIcon, UnfreezeIcon, UnlinkIcon, UnlockIcon, UnpairIcon, UnverifiedIcon, UpdateIcon, UploadIcon, UsageIcon, UserIcon, UsersIcon, VerifiedIcon, VideoIcon, VideoOffIcon, WarningIcon, WorkIcon, WriterIcon, YouTubeIcon, extractBoxProps, useTheme };
-export type { BoxProps, DataTableBodyProps, DataTableCheckboxProps, DataTableHeaderProps, DataTableProps, DialogBodyProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps, IconProps, MenuContentProps, MenuHeaderProps, MenuItemProps, MenuSectionProps, MenuTriggerProps, PopoverContentProps, PopoverProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps, TooltipContentProps, TooltipProps };
+export { AccountIcon, AlbumIcon, AnalyticsIcon, AppsIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArtistIcon, AssetIcon, AudioIcon, AudioOffIcon, BookmarkIcon, BookmarkOffIcon, Box, BroadcastIcon, CalendarIcon, CatalogIcon, ChannelIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CinemaIcon, ClaimIcon, CloseIcon, ColumnChooserIcon, CompositionIcon, ConcertIcon, ConflictIcon, ConvertIcon, CopyIcon, CueSheetIcon, DashboardIcon, DataTable, DataTableBody, DataTableBulkActions, DataTableCheckbox, DataTableCounter, DataTableEditColumns, DataTableHeader, DatasetIcon, DeleteIcon, DeliveryIcon, DetailsIcon, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DigitalIcon, DistributionIcon, DownloadIcon, EarningsIcon, EditIcon, EntitiesIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FavoriteIcon, FavoriteOffIcon, FileIcon, FilterIcon, FlagIcon, FlagOffIcon, ForwardIcon, FreezeIcon, HelpIcon, ICONS, Icon, ImageIcon, ImageOffIcon, IncomeIcon, InformationalIcon, InsightIcon, InvoiceIcon, IssueIcon, KeywordIcon, LanguageIcon, LegalIcon, LicenseIcon, LinkIcon, LocationIcon, LockIcon, LoginIcon, LogoutIcon, MailIcon, ManualIcon, MediaFileIcon, Menu, MenuContent, MenuDescription, MenuHeader, MenuIcon, MenuItem, MenuLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, MinusIcon, MoreOptionsIcon, NextIcon, NotificationIcon, OrganizationIcon, PageFirstIcon, PageLastIcon, PairIcon, PauseIcon, PendingIcon, PlayIcon, PlaycountIcon, PlusIcon, PolicyIcon, Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, PreviousIcon, PublicPerformanceIcon, PublisherIcon, RadioIcon, RecordLabelIcon, RecordingIcon, RedoIcon, RefreshIcon, ReportIcon, RestoreIcon, ResumeIcon, ReviewIcon, RewindIcon, RoleIcon, SearchFilledIcon, SearchIcon, SettingsIcon, ShareIcon, SortAscendingIcon, SortDescendingIcon, SortIcon, StatusIndicatorIcon, StopIcon, SuccessIcon, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, TagIcon, TelevisionIcon, Text, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TooltipContent, TooltipTrigger, TrendingDownIcon, TrendingUpIcon, TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, UndoIcon, UnfreezeIcon, UnlinkIcon, UnlockIcon, UnpairIcon, UnverifiedIcon, UpdateIcon, UploadIcon, UsageIcon, UserIcon, UsersIcon, VerifiedIcon, VideoIcon, VideoOffIcon, WarningIcon, WorkIcon, WriterIcon, YouTubeIcon, extractBoxProps, useTheme };
+export type { BoxProps, DataTableBodyProps, DataTableBulkActionsProps, DataTableCheckboxProps, DataTableCounterProps, DataTableHeaderProps, DataTableProps, DialogBodyProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps, IconProps, MenuContentProps, MenuHeaderProps, MenuItemProps, MenuSectionProps, MenuTriggerProps, PopoverContentProps, PopoverProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps, TooltipContentProps, TooltipProps };

package/dist/vanilla/index.js

@@ -1,6 +1,8 @@
 export { DataTable } from './src/data-table/DataTable.js';
 export { DataTableBody } from './src/data-table/DataTableBody.js';
+export { DataTableBulkActions } from './src/data-table/DataTableBulkActions.js';
 export { DataTableCheckbox } from './src/data-table/DataTableCheckbox.js';
+export { DataTableCounter } from './src/data-table/DataTableCounter.js';
 export { DataTableEditColumns } from './src/data-table/DataTableEditColumns.js';
 export { DataTableHeader } from './src/data-table/DataTableHeader.js';
 export { ICONS, Icon } from './src/icon/Icon.js';

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.2";
+var version = "5.43.3";
 
 export { version };

package/dist/vanilla/src/data-table/DataTableBulkActions.js

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { useDataTableContext } from './DataTableContext.js';
+
+function DataTableBulkActions({ children, ...props }) {
+  const { table } = useDataTableContext();
+  const hasSelection = table.getSelectedRowModel().rows.length > 0;
+  if (!hasSelection) return null;
+  return /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children });
+}
+
+export { DataTableBulkActions };

package/dist/vanilla/src/data-table/DataTableCounter.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { Text } from '../../Text/Text.js';
+import { useDataTableContext } from './DataTableContext.js';
+
+function DataTableCounter({
+  count: countProp,
+  singular = "item",
+  plural = "items",
+  ...props
+}) {
+  const { table } = useDataTableContext();
+  const selectedCount = table.getSelectedRowModel().rows.length;
+  const totalCount = countProp ?? table.getRowCount();
+  const hasSelection = selectedCount > 0;
+  const count = hasSelection ? selectedCount : totalCount;
+  const label = count === 1 ? singular : plural;
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children: [
+    /* @__PURE__ */ jsx(Text, { typography: "label02", color: "active", children: count.toLocaleString() }),
+    /* @__PURE__ */ jsx(Text, { typography: "label02", children: hasSelection ? `${label} selected` : label })
+  ] });
+}
+
+export { DataTableCounter };

package/dist/vanilla/src/data-table/DataTableEditColumns.js

@@ -49,7 +49,7 @@ function DataTableEditColumns() {
         children: allColumns.map((column) => {
           const canHide = column.getCanHide();
           const isSelected = canHide ? selectedColumns.has(column.id) : true;
-          const label = column.columnDef.meta?.label;
+          const label = column.columnDef.meta?.label ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : void 0);
           if (!label) {
             return null;
           }

package/dist/vanilla/src/data-table/DataTableHeaderCell.js

@@ -36,7 +36,7 @@ const DataTableHeaderCell = forwardRef(
         ref,
         "data-test": true,
         ...props,
-        children: typeof children !== "string" || !header.column.getCanSort() ? children : /* @__PURE__ */ jsxs(
+        children: typeof children === "string" ? /* @__PURE__ */ jsxs(
           Box,
           {
             display: "flex",
@@ -84,7 +84,7 @@ const DataTableHeaderCell = forwardRef(
                   /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", size: "3", children: /* @__PURE__ */ jsx(Icon, { name: "informational", size: "xs", color: "secondary" }) }) }),
                   /* @__PURE__ */ jsx(TooltipContent, { maxW: "22", children: header.column.columnDef.meta.tooltip })
                 ] }),
-                /* @__PURE__ */ jsxs(
+                header.column.getCanSort() && /* @__PURE__ */ jsxs(
                   ActionsContent,
                   {
                     display: "grid",
@@ -117,19 +117,21 @@ const DataTableHeaderCell = forwardRef(
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
+              (header.column.getCanSort() || header.column.getCanPin()) && /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
                 /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, { type: "tertiary", size: "compact", iconName: "moreOptions" }) }),
                 /* @__PURE__ */ jsxs(MenuContent, { style: { minWidth: "220px" }, children: [
-                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
-                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
-                  ] }) }),
-                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
-                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
-                  ] }) }),
+                  header.column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+                      /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+                      /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
+                    ] }) })
+                  ] }),
                   header.column.getCanPin() && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(MenuSeparator, {}),
+                    header.column.getCanSort() && /* @__PURE__ */ jsx(MenuSeparator, {}),
                     /* @__PURE__ */ jsx(
                       MenuItem,
                       {
@@ -177,7 +179,7 @@ const DataTableHeaderCell = forwardRef(
               ] }) })
             ]
           }
-        )
+        ) : children
       }
     ) });
   }

package/eslint.config.mjs

@@ -111,7 +111,7 @@ export default defineConfig([
       ],
 
       'react/prop-types': 'off',
-      'react/button-has-type': 'warn',
+      'react/button-has-type': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       'react/no-array-index-key': 'warn',
       'react/no-render-return-value': 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.2",
+  "version": "5.43.3",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/src/components/Box/Box.tsx

@@ -10,6 +10,11 @@ import { cssResolver, omitedCSSprops, pickCSSProperties, pickNonCSSProps } from
 
 export type BoxProps = StyledBoxProps & React.HTMLAttributes<HTMLDivElement>;
 
+/**
+ *
+ * @deprecated {@link Box} has been deprecated; use vanilla Box instead.
+ *
+ */
 const Box = forwardRef<HTMLDivElement, BoxProps>(({ children, ...rest }, ref) => {
   const theme = useTheme();
   const cssPropsOnly = pickCSSProperties(rest);

package/src/components/Table/Table.tsx

@@ -13,6 +13,11 @@ import useTable from './hooks/useTable';
 import { tableContainer, tableStyles } from './Table.style';
 import type { TableProps } from './types';
 
+/**
+ *
+ * @deprecated {@link Table} has been deprecated; use DataTable instead.
+ *
+ */
 const Table = <TData extends NoUndefined<TData>>({
   type = 'read-only',
   rowsConfig,

package/src/components/Typography/Typography.tsx

@@ -59,6 +59,11 @@ export const detectComponentBasedOnType = (variant: TypographyVariant): Typograp
   return 'p';
 };
 
+/**
+ *
+ * @deprecated {@link Typography} has been deprecated; use vanilla Text instead.
+ *
+ */
 // display name breaks storybook props
 // https://github.com/storybookjs/storybook/issues/13304
 // eslint-disable-next-line react/display-name

package/src/data-table/DataTable.test.tsx

@@ -0,0 +1,425 @@
+import {
+  type ColumnDef,
+  createColumnHelper,
+  getCoreRowModel,
+  getSortedRowModel,
+  type RowSelectionState,
+  useReactTable,
+  type VisibilityState,
+} from '@tanstack/react-table';
+import userEvent from '@testing-library/user-event';
+import { type ReactNode, useState } from 'react';
+import { render, screen } from '../test';
+import { DataTable } from './DataTable';
+import { DataTableBody } from './DataTableBody';
+import { DataTableBulkActions } from './DataTableBulkActions';
+import { DataTableCounter } from './DataTableCounter';
+import { DataTableEditColumns } from './DataTableEditColumns';
+import { DataTableHeader } from './DataTableHeader';
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+const testData: Person[] = [
+  { firstName: 'Alice', lastName: 'Smith', age: 25 },
+  { firstName: 'Bob', lastName: 'Jones', age: 30 },
+  { firstName: 'Charlie', lastName: 'Brown', age: 35 },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const simpleColumns: ColumnDef<Person, any>[] = [
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    meta: { label: 'First Name' },
+    enableHiding: false,
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+    meta: { label: 'Last Name' },
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+    meta: { label: 'Age' },
+  }),
+];
+
+/**
+ * A wrapper component that creates a `useReactTable` instance and renders
+ * DataTable with the provided children. Props allow controlling initial state.
+ */
+function DataTableFixture({
+  children,
+  data = testData,
+  columns = simpleColumns,
+  enableRowSelection = true,
+  enableSorting = true,
+  initialRowSelection = {},
+  initialVisibility = {},
+}: {
+  children: ReactNode;
+  data?: Person[];
+  columns?: ColumnDef<Person, any>[];
+  enableRowSelection?: boolean;
+  enableSorting?: boolean;
+  initialRowSelection?: RowSelectionState;
+  initialVisibility?: VisibilityState;
+}) {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(initialRowSelection);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(initialVisibility);
+
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection,
+    enableSorting,
+    state: {
+      rowSelection,
+      columnVisibility,
+    },
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+  });
+
+  return <DataTable table={table}>{children}</DataTable>;
+}
+
+describe('DataTable', () => {
+  it('renders children inside a flex container', () => {
+    render(
+      <DataTableFixture>
+        <div data-testid="child">Hello</div>
+      </DataTableFixture>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByTestId('child').textContent).toBe('Hello');
+  });
+
+  it('renders with the DataTable displayName', () => {
+    expect(DataTable.displayName).toBe('DataTable');
+  });
+});
+
+describe('DataTableCounter', () => {
+  it('shows total row count with default plural label', () => {
+    render(
+      <DataTableFixture>
+        <DataTableCounter />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('items')).toBeInTheDocument();
+  });
+
+  it('shows singular label when there is exactly 1 row', () => {
+    render(
+      <DataTableFixture data={[testData[0]]}>
+        <DataTableCounter />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('item')).toBeInTheDocument();
+  });
+
+  it('uses custom singular/plural labels', () => {
+    render(
+      <DataTableFixture>
+        <DataTableCounter singular="Friend" plural="Friends" />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('Friends')).toBeInTheDocument();
+  });
+
+  it('shows selected count with "selected" suffix when rows are selected', () => {
+    render(
+      <DataTableFixture initialRowSelection={{ '0': true, '1': true }}>
+        <DataTableCounter singular="Friend" plural="Friends" />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('Friends selected')).toBeInTheDocument();
+  });
+
+  it('uses singular label when exactly 1 row is selected', () => {
+    render(
+      <DataTableFixture initialRowSelection={{ '0': true }}>
+        <DataTableCounter singular="Friend" plural="Friends" />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('Friend selected')).toBeInTheDocument();
+  });
+
+  it('accepts a custom count prop that overrides the table row count', () => {
+    render(
+      <DataTableFixture>
+        <DataTableCounter count={999} />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('999')).toBeInTheDocument();
+    expect(screen.getByText('items')).toBeInTheDocument();
+  });
+});
+
+describe('DataTableBulkActions', () => {
+  it('does not render children when no rows are selected', () => {
+    render(
+      <DataTableFixture>
+        <DataTableBulkActions>
+          <button>Bulk Action</button>
+        </DataTableBulkActions>
+      </DataTableFixture>
+    );
+
+    expect(screen.queryByText('Bulk Action')).not.toBeInTheDocument();
+  });
+
+  it('renders children when rows are selected', () => {
+    render(
+      <DataTableFixture initialRowSelection={{ '0': true }}>
+        <DataTableBulkActions>
+          <button>Bulk Action</button>
+        </DataTableBulkActions>
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('Bulk Action')).toBeInTheDocument();
+  });
+});
+
+describe('DataTableBody', () => {
+  it('renders column headers', () => {
+    render(
+      <DataTableFixture>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('First Name')).toBeInTheDocument();
+    expect(screen.getByText('Last Name')).toBeInTheDocument();
+    expect(screen.getByText('Age')).toBeInTheDocument();
+  });
+
+  it('renders all data rows', () => {
+    render(
+      <DataTableFixture>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('renders cell values for each row', () => {
+    render(
+      <DataTableFixture>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('Smith')).toBeInTheDocument();
+    expect(screen.getByText('Jones')).toBeInTheDocument();
+    expect(screen.getByText('Brown')).toBeInTheDocument();
+
+    expect(screen.getByText('25')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('35')).toBeInTheDocument();
+  });
+
+  it('respects initial column visibility', () => {
+    render(
+      <DataTableFixture initialVisibility={{ age: false }}>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    // Age column should be hidden
+    expect(screen.queryByText('Age')).not.toBeInTheDocument();
+    expect(screen.queryByText('25')).not.toBeInTheDocument();
+
+    // Other columns should still be visible
+    expect(screen.getByText('First Name')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  it('renders an empty body when data is empty', () => {
+    render(
+      <DataTableFixture data={[]}>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    // Headers should still render
+    expect(screen.getByText('First Name')).toBeInTheDocument();
+
+    // No data rows
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+});
+
+describe('DataTableEditColumns', () => {
+  it('renders the "Edit columns" button', () => {
+    render(
+      <DataTableFixture>
+        <DataTableEditColumns />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('Edit columns')).toBeInTheDocument();
+  });
+
+  it('shows hidable columns in the menu when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataTableFixture>
+        <DataTableEditColumns />
+      </DataTableFixture>
+    );
+
+    await user.click(screen.getByText('Edit columns'));
+
+    expect(screen.getByText('First Name')).toBeInTheDocument();
+    expect(screen.getByText('Last Name')).toBeInTheDocument();
+    expect(screen.getByText('Age')).toBeInTheDocument();
+  });
+
+  it('toggles column visibility when a hidable column is clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataTableFixture>
+        <DataTableEditColumns />
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('35')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Edit columns'));
+
+    const ageOption = screen.getAllByText('Age');
+    // There may be multiple "Age" texts (header cell + menu item)
+    // The menu item is the last one
+    await user.click(ageOption[ageOption.length - 1]);
+
+    expect(screen.queryByText('35')).not.toBeInTheDocument();
+  });
+});
+
+describe('DataTableHeader', () => {
+  it('renders children', () => {
+    render(
+      <DataTableFixture>
+        <DataTableHeader>
+          <span data-testid="header-child">Header Content</span>
+        </DataTableHeader>
+      </DataTableFixture>
+    );
+
+    expect(screen.getByTestId('header-child')).toBeInTheDocument();
+    expect(screen.getByText('Header Content')).toBeInTheDocument();
+  });
+});
+
+describe('DataTable integration', () => {
+  it('counter updates when row selection changes via bulk actions', () => {
+    render(
+      <DataTableFixture initialRowSelection={{ '0': true }}>
+        <DataTableHeader>
+          <DataTableCounter singular="Friend" plural="Friends" />
+          <DataTableBulkActions>
+            <button>Delete</button>
+          </DataTableBulkActions>
+        </DataTableHeader>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('Friend selected')).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('bulk actions disappear and counter shows total when no rows are selected', () => {
+    render(
+      <DataTableFixture>
+        <DataTableHeader>
+          <DataTableCounter singular="Friend" plural="Friends" />
+          <DataTableBulkActions>
+            <button>Delete</button>
+          </DataTableBulkActions>
+        </DataTableHeader>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('Friends')).toBeInTheDocument();
+
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('renders the full composition (header + body) with data', () => {
+    render(
+      <DataTableFixture>
+        <DataTableHeader>
+          <DataTableCounter />
+          <DataTableEditColumns />
+        </DataTableHeader>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    // Header
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('items')).toBeInTheDocument();
+    expect(screen.getByText('Edit columns')).toBeInTheDocument();
+
+    // Body
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('hides column via EditColumns and verifies body updates', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataTableFixture>
+        <DataTableHeader>
+          <DataTableEditColumns />
+        </DataTableHeader>
+        <DataTableBody />
+      </DataTableFixture>
+    );
+
+    expect(screen.getByText('Smith')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Edit columns'));
+
+    const lastNameOptions = screen.getAllByText('Last Name');
+    await user.click(lastNameOptions[lastNameOptions.length - 1]);
+
+    expect(screen.queryByText('Smith')).not.toBeInTheDocument();
+    expect(screen.queryByText('Jones')).not.toBeInTheDocument();
+    expect(screen.queryByText('Brown')).not.toBeInTheDocument();
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+});

package/src/data-table/DataTableBulkActions.tsx

@@ -0,0 +1,17 @@
+import { Box, type BoxProps } from '../vanilla/Box';
+import { useDataTableContext } from './DataTableContext';
+
+export type DataTableBulkActionsProps = BoxProps<'div'>;
+
+export function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps) {
+  const { table } = useDataTableContext();
+  const hasSelection = table.getSelectedRowModel().rows.length > 0;
+
+  if (!hasSelection) return null;
+
+  return (
+    <Box display="flex" alignItems="center" gap="sm" {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/data-table/DataTableCounter.tsx

@@ -0,0 +1,37 @@
+import { Box, type BoxProps } from '../vanilla/Box';
+import { Text } from '../vanilla/Text';
+import { useDataTableContext } from './DataTableContext';
+
+export type DataTableCounterProps = BoxProps<
+  'div',
+  {
+    count?: number;
+    singular?: string;
+    plural?: string;
+  }
+>;
+
+export function DataTableCounter({
+  count: countProp,
+  singular = 'item',
+  plural = 'items',
+  ...props
+}: DataTableCounterProps) {
+  const { table } = useDataTableContext();
+
+  const selectedCount = table.getSelectedRowModel().rows.length;
+  const totalCount = countProp ?? table.getRowCount();
+  const hasSelection = selectedCount > 0;
+
+  const count = hasSelection ? selectedCount : totalCount;
+  const label = count === 1 ? singular : plural;
+
+  return (
+    <Box display="flex" alignItems="center" gap="sm" {...props}>
+      <Text typography="label02" color="active">
+        {count.toLocaleString()}
+      </Text>
+      <Text typography="label02">{hasSelection ? `${label} selected` : label}</Text>
+    </Box>
+  );
+}

package/src/data-table/DataTableEditColumns.tsx

@@ -55,7 +55,9 @@ export function DataTableEditColumns() {
         {allColumns.map((column) => {
           const canHide = column.getCanHide();
           const isSelected = canHide ? selectedColumns.has(column.id) : true;
-          const label = (column.columnDef.meta as { label?: string })?.label;
+          const label =
+            (column.columnDef.meta as { label?: string })?.label ??
+            (typeof column.columnDef.header === 'string' ? column.columnDef.header : undefined);
 
           if (!label) {
             return null;

package/src/data-table/DataTableHeaderCell.tsx

@@ -40,9 +40,7 @@ export const DataTableHeaderCell = forwardRef<HTMLTableCellElement, DataTableHea
           data-test
           {...props}
         >
-          {typeof children !== 'string' || !header.column.getCanSort() ? (
-            children
-          ) : (
+          {typeof children === 'string' ? (
             <Box
               display="flex"
               alignItems="center"
@@ -87,7 +85,6 @@ export const DataTableHeaderCell = forwardRef<HTMLTableCellElement, DataTableHea
                   </TooltipTrigger>
                   <TooltipContent>{children}</TooltipContent>
                 </Tooltip>
-
                 {header.column.columnDef.meta?.tooltip && (
                   <Tooltip>
                     <TooltipTrigger>
@@ -101,95 +98,104 @@ export const DataTableHeaderCell = forwardRef<HTMLTableCellElement, DataTableHea
                     </TooltipContent>
                   </Tooltip>
                 )}
-
-                <ActionsContent
-                  display="grid"
-                  placeItems="center"
-                  position="relative"
-                  visible={sortDir ? 'always' : 'if-needed'}
-                  flexDirection={flexDir}
-                >
-                  <IconButton
-                    onClick={() =>
-                      header.column.toggleSorting(undefined, header.column.getCanMultiSort())
-                    }
-                    type="tertiary"
-                    size="compact"
-                    iconName={getSortIcon(sortDir)}
-                  />
-                  {header.column.getCanMultiSort() && header.column.getSortIndex() > -1 && (
-                    <Text
-                      typography="label04"
-                      color="primary"
-                      position="absolute"
-                      pointerEvents="none"
-                      style={{ top: 0, right: 0 }}
-                    >
-                      {header.column.getSortIndex() + 1}
-                    </Text>
-                  )}
-                </ActionsContent>
+                {header.column.getCanSort() && (
+                  <ActionsContent
+                    display="grid"
+                    placeItems="center"
+                    position="relative"
+                    visible={sortDir ? 'always' : 'if-needed'}
+                    flexDirection={flexDir}
+                  >
+                    <IconButton
+                      onClick={() =>
+                        header.column.toggleSorting(undefined, header.column.getCanMultiSort())
+                      }
+                      type="tertiary"
+                      size="compact"
+                      iconName={getSortIcon(sortDir)}
+                    />
+                    {header.column.getCanMultiSort() && header.column.getSortIndex() > -1 && (
+                      <Text
+                        typography="label04"
+                        color="primary"
+                        position="absolute"
+                        pointerEvents="none"
+                        style={{ top: 0, right: 0 }}
+                      >
+                        {header.column.getSortIndex() + 1}
+                      </Text>
+                    )}
+                  </ActionsContent>
+                )}
               </Box>
 
-              <ActionsContent visible={sortDir ? 'always' : 'if-needed'}>
-                <Menu>
-                  <MenuTrigger>
-                    <IconButton type="tertiary" size="compact" iconName="moreOptions" />
-                  </MenuTrigger>
-                  <MenuContent style={{ minWidth: '220px' }}>
-                    <MenuItem onAction={() => header.column.toggleSorting(true)}>
-                      <Box display="flex" alignItems="center" gap="sm">
-                        <Icon name="sortDescending" />
-                        <Text typography="body03">Sort descending (z-a)</Text>
-                      </Box>
-                    </MenuItem>
-                    <MenuItem onAction={() => header.column.toggleSorting(false)}>
-                      <Box display="flex" alignItems="center" gap="sm">
-                        <Icon name="sortAscending" />
-                        <Text typography="body03">Sort ascending (a-z)</Text>
-                      </Box>
-                    </MenuItem>
-                    {header.column.getCanPin() && (
-                      <>
-                        <MenuSeparator />
-                        <MenuItem
-                          onAction={() => {
-                            const isPinnedLeft = header.column.getIsPinned() === 'left';
-                            header.column.pin(isPinnedLeft ? false : 'left');
-                          }}
-                        >
-                          <Box display="flex" alignItems="center" gap="sm" w="full">
-                            <Icon name="freeze" />
-                            <Text typography="body03">Freeze column (left)</Text>
-                            <Box flex="1" />
-                            <Switch
-                              isSelected={header.column.getIsPinned() === 'left'}
-                              isReadOnly
-                            />
-                          </Box>
-                        </MenuItem>
-                        <MenuItem
-                          onAction={() => {
-                            const isPinnedRight = header.column.getIsPinned() === 'right';
-                            header.column.pin(isPinnedRight ? false : 'right');
-                          }}
-                        >
-                          <Box display="flex" alignItems="center" gap="sm" w="full">
-                            <Icon name="freeze" />
-                            <Text typography="body03">Freeze column (right)</Text>
-                            <Box flex="1" />
-                            <Switch
-                              isSelected={header.column.getIsPinned() === 'right'}
-                              isReadOnly
-                            />
-                          </Box>
-                        </MenuItem>
-                      </>
-                    )}
-                  </MenuContent>
-                </Menu>
-              </ActionsContent>
+              {(header.column.getCanSort() || header.column.getCanPin()) && (
+                <ActionsContent visible={sortDir ? 'always' : 'if-needed'}>
+                  <Menu>
+                    <MenuTrigger>
+                      <IconButton type="tertiary" size="compact" iconName="moreOptions" />
+                    </MenuTrigger>
+                    <MenuContent style={{ minWidth: '220px' }}>
+                      {header.column.getCanSort() && (
+                        <>
+                          <MenuItem onAction={() => header.column.toggleSorting(true)}>
+                            <Box display="flex" alignItems="center" gap="sm">
+                              <Icon name="sortDescending" />
+                              <Text typography="body03">Sort descending (z-a)</Text>
+                            </Box>
+                          </MenuItem>
+                          <MenuItem onAction={() => header.column.toggleSorting(false)}>
+                            <Box display="flex" alignItems="center" gap="sm">
+                              <Icon name="sortAscending" />
+                              <Text typography="body03">Sort ascending (a-z)</Text>
+                            </Box>
+                          </MenuItem>
+                        </>
+                      )}
+                      {header.column.getCanPin() && (
+                        <>
+                          {header.column.getCanSort() && <MenuSeparator />}
+                          <MenuItem
+                            onAction={() => {
+                              const isPinnedLeft = header.column.getIsPinned() === 'left';
+                              header.column.pin(isPinnedLeft ? false : 'left');
+                            }}
+                          >
+                            <Box display="flex" alignItems="center" gap="sm" w="full">
+                              <Icon name="freeze" />
+                              <Text typography="body03">Freeze column (left)</Text>
+                              <Box flex="1" />
+                              <Switch
+                                isSelected={header.column.getIsPinned() === 'left'}
+                                isReadOnly
+                              />
+                            </Box>
+                          </MenuItem>
+                          <MenuItem
+                            onAction={() => {
+                              const isPinnedRight = header.column.getIsPinned() === 'right';
+                              header.column.pin(isPinnedRight ? false : 'right');
+                            }}
+                          >
+                            <Box display="flex" alignItems="center" gap="sm" w="full">
+                              <Icon name="freeze" />
+                              <Text typography="body03">Freeze column (right)</Text>
+                              <Box flex="1" />
+                              <Switch
+                                isSelected={header.column.getIsPinned() === 'right'}
+                                isReadOnly
+                              />
+                            </Box>
+                          </MenuItem>
+                        </>
+                      )}
+                    </MenuContent>
+                  </Menu>
+                </ActionsContent>
+              )}
             </Box>
+          ) : (
+            children
           )}
         </TableHeaderCell>
       </ActionsRoot>

package/src/data-table/index.ts

@@ -1,5 +1,7 @@
 export * from './DataTable';
 export * from './DataTableBody';
+export * from './DataTableBulkActions';
 export * from './DataTableCheckbox';
+export * from './DataTableCounter';
 export * from './DataTableEditColumns';
 export * from './DataTableHeader';