@akinon/akitable 1.2.4 → 1.2.5-rc.0

package/dist/cjs/akitable.css

@@ -1,7 +1,7 @@
 .akitable-container {
   background-color: white;
   border-radius: 0.5rem;
-  padding: 1.5rem;
+  padding: 1.25rem;
 }
 
 /* For some weird reason, antd does not allow overriding

package/dist/cjs/akitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBA0E5C,CAAC"}
+{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAwE5C,CAAC"}

package/dist/cjs/akitable.js

@@ -8,7 +8,6 @@ const react_1 = require("react");
 const react_error_boundary_1 = require("react-error-boundary");
 const akitable_context_1 = require("./akitable-context");
 const theme_overrides_1 = require("./common/theme-overrides");
-const controls_1 = require("./components/controls");
 const datatable_1 = require("./components/datatable");
 const error_1 = require("./components/error");
 const footer_1 = require("./components/footer");
@@ -46,7 +45,6 @@ const Akitable = (props) => {
             react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
                 react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
                     react_1.default.createElement(header_1.AkitableHeader, Object.assign({}, header)),
-                    react_1.default.createElement(controls_1.AkitableControls, null),
                     react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, maxColumnContent: maxColumnContent, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
                     react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer)))))));
 };

package/dist/cjs/components/actions.css

@@ -1,16 +1,21 @@
 .akitable-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: center;
 }
 
-.akitable-actions .akinon-select {
-  min-width: 200px;
-  height: 38px;
+.akitable-actions .akinon-select-selector {
+  padding: 0.625rem 1rem !important;
+  border-radius: 0.313rem !important;
+}
+
+.akitable-actions .akinon-select .akinon-select-selection-placeholder {
+  font-weight: 600;
+  letter-spacing: 0.1px;
 }
 
 .akitable-actions .akinon-btn {
-  height: 36px;
+  padding: 0.625rem 2.5rem;
 }
 
 .akitable-actions .akitable-actions-info {

package/dist/cjs/components/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA0D3B,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA2D3B,CAAC"}

package/dist/cjs/components/actions.js

@@ -9,26 +9,29 @@ const akitable_context_1 = require("../akitable-context");
 const i18n_1 = require("../i18n");
 const AkitableActions = () => {
     const { t } = i18n_1.i18n;
-    const [selectedAction, setSelectedAction] = react_1.default.useState(undefined);
+    const [selectedActionIndex, setSelectedActionIndex] = react_1.default.useState();
     const { actions, isLoading, selectedRowKeys, pagination } = (0, akitable_context_1.useAkitableContext)();
     const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
-        value: index + 1,
+        value: index,
         label: action.label
     }));
     const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
-    const handleActionChange = (value) => {
-        setSelectedAction(value);
+    const handleChangeAction = (value) => {
+        const newSelectedActionIndex = typeof value === 'number' ? value : undefined;
+        setSelectedActionIndex(newSelectedActionIndex);
     };
     const handleActionTrigger = () => {
-        if (!selectedAction || !hasSelections)
+        if (!hasSelections || selectedActionIndex === undefined)
             return;
-        const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
-        action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
+        const action = actions === null || actions === void 0 ? void 0 : actions[selectedActionIndex];
+        if (!action)
+            return;
+        action.onSelect(selectedRowKeys !== null && selectedRowKeys !== void 0 ? selectedRowKeys : []);
     };
     return (react_1.default.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
-        react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
-        selectedAction && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(ui_button_1.Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
+        react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedActionIndex, options: options, onChange: handleChangeAction, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
+        selectedActionIndex !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ui_button_1.Button, { type: "primary", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
             hasSelections && (react_1.default.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
 };
 exports.AkitableActions = AkitableActions;

package/dist/cjs/components/header.css

@@ -1,26 +1,31 @@
 .akitable-header {
   display: flex;
-  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
   /* Setting min-height to prevent cumulative layout shifts. */
   min-height: 40px;
-  flex-wrap: wrap;
+}
+
+.akitable-header--with-actions {
+  align-items: flex-start;
 }
 
 .akitable-header-title-container {
   display: flex;
-  align-items: center;
-  gap: 0.1rem;
   color: var(--color-gray-900);
 }
 
 .akitable-header-title {
-  font-size: 1.25rem;
-  font-weight: bold;
+  font-size: 1.125rem;
+  font-weight: 600;
   margin: 0;
   padding: 0;
-  line-height: 1;
+  line-height: normal;
   display: flex;
   align-items: center;
+  gap: 0.1rem;
+  color: var(--color-blue-955);
 }
 
 .akitable-header-title-count-skeleton {
@@ -30,11 +35,13 @@
 }
 
 .akitable-header-title-count {
-  font-size: 1.25rem;
-  font-weight: bold;
+  font-size: 1.125rem;
+  font-weight: 600;
   margin: 0;
   padding: 0;
-  line-height: 1;
+  line-height: normal;
+  color: var(--color-blue-955);
+  margin-left: 0.25rem;
 }
 
 .akitable-header-title-description-skeleton {
@@ -43,17 +50,81 @@
 }
 
 .akitable-header-description {
-  color: var(--color-gray-400);
+  color: var(--color-gray-500);
   display: block;
-  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.akitable-header-actions {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.563rem;
+}
+
+.akitable-header-side {
+  margin-left: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.akitable-header-side--single-row {
+  align-items: center;
+}
+
+.akitable-header-side--single-row .akitable-header-downloads {
+  margin: 0 3.625rem;
+}
+
+.akitable-header-side--with-actions {
+  flex-direction: column;
+  align-items: flex-end;
+  align-self: end;
+  justify-content: space-between;
+}
+
+.akitable-header-side-top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.akitable-header-side-bottom {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .akitable-header-extra-content {
-  margin-bottom: 1rem;
   color: var(--color-gray-300);
 }
 
-.akitable-header-extra {
-  margin-left: auto;
-  text-align: right;
+.akitable-header-downloads {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.akitable-header-downloads-placeholder {
+  display: block;
+  height: 0;
+  flex: 0 0 auto;
+}
+
+.akitable-header-downloads .akinon-btn {
+  font-size: 0.762rem;
+  font-weight: bold;
+  letter-spacing: 0.038rem;
+  display: flex;
+  flex-direction: column;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  gap: 0;
+}
+
+.akitable-header-downloads .akinon-btn-icon {
+  font-size: 0.762rem;
 }

package/dist/cjs/components/header.d.ts

@@ -1,5 +1,5 @@
 import './header.css';
 import React from 'react';
 import type { AkitableHeaderProps } from '../types';
-export declare const AkitableHeader: (props: AkitableHeaderProps) => React.JSX.Element | null;
+export declare const AkitableHeader: (props?: AkitableHeaderProps) => React.JSX.Element | null;
 //# sourceMappingURL=header.d.ts.map

package/dist/cjs/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,6BA4ExD,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAMpD,eAAO,MAAM,cAAc,GAAI,QAAO,mBAAwB,6BAyK7D,CAAC"}

package/dist/cjs/components/header.js

@@ -4,21 +4,30 @@ exports.AkitableHeader = void 0;
 require("./header.css");
 const ui_skeleton_1 = require("@akinon/ui-skeleton");
 const ui_spin_1 = require("@akinon/ui-spin");
+const clsx_1 = require("clsx");
 const react_1 = require("react");
 const akitable_context_1 = require("../akitable-context");
 const i18n_1 = require("../i18n");
+const actions_1 = require("./actions");
 const pagination_1 = require("./pagination");
-const AkitableHeader = (props) => {
+const DEFAULT_DOWNLOAD_SLOT_WIDTH = 120;
+const AkitableHeader = (props = {}) => {
     const { isLoading, pagination, actions } = (0, akitable_context_1.useAkitableContext)();
-    const { title, extra } = props;
-    const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    if (!title && !extra)
+    const { title, extra, downloadActions, downloadActionsSlotWidth = DEFAULT_DOWNLOAD_SLOT_WIDTH, reserveDownloadActionsSpace = true } = props;
+    const hasActions = Boolean(actions && actions.length > 0);
+    const hasPagination = Boolean(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination);
+    const shouldRenderHeader = Boolean(title) ||
+        Boolean(extra) ||
+        Boolean(downloadActions) ||
+        hasActions ||
+        hasPagination;
+    if (!shouldRenderHeader)
         return null;
     const renderTitle = () => {
         return (react_1.default.createElement("div", { className: "akitable-header-title-container" },
             react_1.default.createElement("h2", { className: "akitable-header-title" }, title),
             isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
-                react_1.default.createElement(ui_skeleton_1.Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (react_1.default.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
+                react_1.default.createElement(ui_skeleton_1.Skeleton.Button, { active: true, size: "small", className: "akitable-header-title-count-skeleton" }))) : (react_1.default.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
     };
     const renderTitleDescription = () => {
         const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
@@ -26,14 +35,49 @@ const AkitableHeader = (props) => {
             : i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
         return (react_1.default.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
     };
-    return (react_1.default.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
-        !!title && (react_1.default.createElement("div", { "data-testid": "akitable-header-title-container" },
-            renderTitle(),
-            isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
-                react_1.default.createElement(ui_skeleton_1.Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
-        react_1.default.createElement("div", { className: "akitable-header-extra" },
-            extra && (react_1.default.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
-            !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { "data-testid": "akitable-header-pagination" },
-                react_1.default.createElement(pagination_1.AkitablePagination, null))))));
+    const renderExtraContent = () => {
+        if (!extra)
+            return null;
+        return (react_1.default.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra)));
+    };
+    const renderDownloadActions = () => {
+        if (downloadActions) {
+            return react_1.default.createElement("div", { className: "akitable-header-downloads" }, downloadActions);
+        }
+        if (hasActions || !reserveDownloadActionsSpace || !hasPagination) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: "akitable-header-downloads-placeholder", style: { width: downloadActionsSlotWidth } }));
+    };
+    const renderPagination = () => {
+        if (!hasPagination)
+            return null;
+        return (react_1.default.createElement("div", { "data-testid": "akitable-header-pagination" },
+            react_1.default.createElement(pagination_1.AkitablePagination, null)));
+    };
+    const extraContent = renderExtraContent();
+    const downloadContent = renderDownloadActions();
+    const paginationContent = renderPagination();
+    return (react_1.default.createElement("div", { "data-testid": "akitable-header", className: (0, clsx_1.default)('akitable-header', {
+            'akitable-header--with-actions': hasActions
+        }) },
+        react_1.default.createElement("div", { className: "akitable-header-main" },
+            !!title && (react_1.default.createElement("div", { "data-testid": "akitable-header-title-container" },
+                renderTitle(),
+                isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
+                    react_1.default.createElement(ui_skeleton_1.Skeleton.Input, { active: true, size: "small", className: "akitable-header-title-description-skeleton" }))) : (renderTitleDescription()))),
+            hasActions && (react_1.default.createElement("div", { className: "akitable-header-actions" },
+                react_1.default.createElement(actions_1.AkitableActions, null)))),
+        (extraContent || downloadContent || paginationContent) && (react_1.default.createElement("div", { className: (0, clsx_1.default)('akitable-header-side', {
+                'akitable-header-side--single-row': !hasActions,
+                'akitable-header-side--with-actions': hasActions
+            }) }, hasActions ? (react_1.default.createElement(react_1.default.Fragment, null,
+            (extraContent || downloadContent) && (react_1.default.createElement("div", { className: "akitable-header-side-top" },
+                extraContent,
+                downloadContent)),
+            paginationContent && (react_1.default.createElement("div", { className: "akitable-header-side-bottom" }, paginationContent)))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            extraContent,
+            downloadContent,
+            paginationContent))))));
 };
 exports.AkitableHeader = AkitableHeader;

package/dist/cjs/types.d.ts

@@ -76,6 +76,19 @@ export interface AkitableHeaderProps {
      * Additional content for the table header.
      */
     extra?: ReactNode;
+    /**
+     * Download related actions placed next to the pagination.
+     */
+    downloadActions?: ReactNode;
+    /**
+     * Reserved width for download actions when they are hidden in single row layouts.
+     */
+    downloadActionsSlotWidth?: number;
+    /**
+     * Whether the download actions slot should keep its width even when empty.
+     * This only applies when there is no bulk action (Akitable actions) being displayed.
+     */
+    reserveDownloadActionsSpace?: boolean;
 }
 export interface AkitableFooterProps {
     /**

package/dist/cjs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/akitable.css

@@ -1,7 +1,7 @@
 .akitable-container {
   background-color: white;
   border-radius: 0.5rem;
-  padding: 1.5rem;
+  padding: 1.25rem;
 }
 
 /* For some weird reason, antd does not allow overriding

package/dist/esm/akitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBA0E5C,CAAC"}
+{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAwE5C,CAAC"}

package/dist/esm/akitable.js

@@ -5,7 +5,6 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { AkitableProvider } from './akitable-context';
 import { themeOverrides } from './common/theme-overrides';
-import { AkitableControls } from './components/controls';
 import { AkitableDataTable } from './components/datatable';
 import { fallbackRender } from './components/error';
 import { AkitableFooter } from './components/footer';
@@ -43,7 +42,6 @@ export const Akitable = (props) => {
             React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
                 React.createElement(ConfigProvider, { theme: themeOverrides },
                     React.createElement(AkitableHeader, Object.assign({}, header)),
-                    React.createElement(AkitableControls, null),
                     React.createElement(AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, maxColumnContent: maxColumnContent, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
                     React.createElement(AkitableFooter, Object.assign({}, footer)))))));
 };

package/dist/esm/components/actions.css

@@ -1,16 +1,21 @@
 .akitable-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: center;
 }
 
-.akitable-actions .akinon-select {
-  min-width: 200px;
-  height: 38px;
+.akitable-actions .akinon-select-selector {
+  padding: 0.625rem 1rem !important;
+  border-radius: 0.313rem !important;
+}
+
+.akitable-actions .akinon-select .akinon-select-selection-placeholder {
+  font-weight: 600;
+  letter-spacing: 0.1px;
 }
 
 .akitable-actions .akinon-btn {
-  height: 36px;
+  padding: 0.625rem 2.5rem;
 }
 
 .akitable-actions .akitable-actions-info {

package/dist/esm/components/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA0D3B,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA2D3B,CAAC"}

package/dist/esm/components/actions.js

@@ -6,25 +6,28 @@ import { useAkitableContext } from '../akitable-context';
 import { i18n } from '../i18n';
 export const AkitableActions = () => {
     const { t } = i18n;
-    const [selectedAction, setSelectedAction] = React.useState(undefined);
+    const [selectedActionIndex, setSelectedActionIndex] = React.useState();
     const { actions, isLoading, selectedRowKeys, pagination } = useAkitableContext();
     const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
-        value: index + 1,
+        value: index,
         label: action.label
     }));
     const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
-    const handleActionChange = (value) => {
-        setSelectedAction(value);
+    const handleChangeAction = (value) => {
+        const newSelectedActionIndex = typeof value === 'number' ? value : undefined;
+        setSelectedActionIndex(newSelectedActionIndex);
     };
     const handleActionTrigger = () => {
-        if (!selectedAction || !hasSelections)
+        if (!hasSelections || selectedActionIndex === undefined)
             return;
-        const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
-        action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
+        const action = actions === null || actions === void 0 ? void 0 : actions[selectedActionIndex];
+        if (!action)
+            return;
+        action.onSelect(selectedRowKeys !== null && selectedRowKeys !== void 0 ? selectedRowKeys : []);
     };
     return (React.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
-        React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
-        selectedAction && (React.createElement(React.Fragment, null,
-            React.createElement(Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
+        React.createElement(Select, { placeholder: t('selectAction'), value: selectedActionIndex, options: options, onChange: handleChangeAction, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
+        selectedActionIndex !== undefined && (React.createElement(React.Fragment, null,
+            React.createElement(Button, { type: "primary", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
             hasSelections && (React.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
 };

package/dist/esm/components/header.css

@@ -1,26 +1,31 @@
 .akitable-header {
   display: flex;
-  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
   /* Setting min-height to prevent cumulative layout shifts. */
   min-height: 40px;
-  flex-wrap: wrap;
+}
+
+.akitable-header--with-actions {
+  align-items: flex-start;
 }
 
 .akitable-header-title-container {
   display: flex;
-  align-items: center;
-  gap: 0.1rem;
   color: var(--color-gray-900);
 }
 
 .akitable-header-title {
-  font-size: 1.25rem;
-  font-weight: bold;
+  font-size: 1.125rem;
+  font-weight: 600;
   margin: 0;
   padding: 0;
-  line-height: 1;
+  line-height: normal;
   display: flex;
   align-items: center;
+  gap: 0.1rem;
+  color: var(--color-blue-955);
 }
 
 .akitable-header-title-count-skeleton {
@@ -30,11 +35,13 @@
 }
 
 .akitable-header-title-count {
-  font-size: 1.25rem;
-  font-weight: bold;
+  font-size: 1.125rem;
+  font-weight: 600;
   margin: 0;
   padding: 0;
-  line-height: 1;
+  line-height: normal;
+  color: var(--color-blue-955);
+  margin-left: 0.25rem;
 }
 
 .akitable-header-title-description-skeleton {
@@ -43,17 +50,81 @@
 }
 
 .akitable-header-description {
-  color: var(--color-gray-400);
+  color: var(--color-gray-500);
   display: block;
-  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.akitable-header-actions {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.563rem;
+}
+
+.akitable-header-side {
+  margin-left: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.akitable-header-side--single-row {
+  align-items: center;
+}
+
+.akitable-header-side--single-row .akitable-header-downloads {
+  margin: 0 3.625rem;
+}
+
+.akitable-header-side--with-actions {
+  flex-direction: column;
+  align-items: flex-end;
+  align-self: end;
+  justify-content: space-between;
+}
+
+.akitable-header-side-top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.akitable-header-side-bottom {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .akitable-header-extra-content {
-  margin-bottom: 1rem;
   color: var(--color-gray-300);
 }
 
-.akitable-header-extra {
-  margin-left: auto;
-  text-align: right;
+.akitable-header-downloads {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.akitable-header-downloads-placeholder {
+  display: block;
+  height: 0;
+  flex: 0 0 auto;
+}
+
+.akitable-header-downloads .akinon-btn {
+  font-size: 0.762rem;
+  font-weight: bold;
+  letter-spacing: 0.038rem;
+  display: flex;
+  flex-direction: column;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  gap: 0;
+}
+
+.akitable-header-downloads .akinon-btn-icon {
+  font-size: 0.762rem;
 }

package/dist/esm/components/header.d.ts

@@ -1,5 +1,5 @@
 import './header.css';
 import React from 'react';
 import type { AkitableHeaderProps } from '../types';
-export declare const AkitableHeader: (props: AkitableHeaderProps) => React.JSX.Element | null;
+export declare const AkitableHeader: (props?: AkitableHeaderProps) => React.JSX.Element | null;
 //# sourceMappingURL=header.d.ts.map

package/dist/esm/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,6BA4ExD,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAMpD,eAAO,MAAM,cAAc,GAAI,QAAO,mBAAwB,6BAyK7D,CAAC"}

package/dist/esm/components/header.js

@@ -1,21 +1,30 @@
 import './header.css';
 import { Skeleton } from '@akinon/ui-skeleton';
 import { Spin } from '@akinon/ui-spin';
+import clsx from 'clsx';
 import React from 'react';
 import { useAkitableContext } from '../akitable-context';
 import { i18n } from '../i18n';
+import { AkitableActions } from './actions';
 import { AkitablePagination } from './pagination';
-export const AkitableHeader = (props) => {
+const DEFAULT_DOWNLOAD_SLOT_WIDTH = 120;
+export const AkitableHeader = (props = {}) => {
     const { isLoading, pagination, actions } = useAkitableContext();
-    const { title, extra } = props;
-    const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    if (!title && !extra)
+    const { title, extra, downloadActions, downloadActionsSlotWidth = DEFAULT_DOWNLOAD_SLOT_WIDTH, reserveDownloadActionsSpace = true } = props;
+    const hasActions = Boolean(actions && actions.length > 0);
+    const hasPagination = Boolean(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination);
+    const shouldRenderHeader = Boolean(title) ||
+        Boolean(extra) ||
+        Boolean(downloadActions) ||
+        hasActions ||
+        hasPagination;
+    if (!shouldRenderHeader)
         return null;
     const renderTitle = () => {
         return (React.createElement("div", { className: "akitable-header-title-container" },
             React.createElement("h2", { className: "akitable-header-title" }, title),
             isLoading ? (React.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
-                React.createElement(Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (React.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
+                React.createElement(Skeleton.Button, { active: true, size: "small", className: "akitable-header-title-count-skeleton" }))) : (React.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
     };
     const renderTitleDescription = () => {
         const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
@@ -23,13 +32,48 @@ export const AkitableHeader = (props) => {
             : i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
         return (React.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
     };
-    return (React.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
-        !!title && (React.createElement("div", { "data-testid": "akitable-header-title-container" },
-            renderTitle(),
-            isLoading ? (React.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
-                React.createElement(Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
-        React.createElement("div", { className: "akitable-header-extra" },
-            extra && (React.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
-            !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { "data-testid": "akitable-header-pagination" },
-                React.createElement(AkitablePagination, null))))));
+    const renderExtraContent = () => {
+        if (!extra)
+            return null;
+        return (React.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra)));
+    };
+    const renderDownloadActions = () => {
+        if (downloadActions) {
+            return React.createElement("div", { className: "akitable-header-downloads" }, downloadActions);
+        }
+        if (hasActions || !reserveDownloadActionsSpace || !hasPagination) {
+            return null;
+        }
+        return (React.createElement("div", { className: "akitable-header-downloads-placeholder", style: { width: downloadActionsSlotWidth } }));
+    };
+    const renderPagination = () => {
+        if (!hasPagination)
+            return null;
+        return (React.createElement("div", { "data-testid": "akitable-header-pagination" },
+            React.createElement(AkitablePagination, null)));
+    };
+    const extraContent = renderExtraContent();
+    const downloadContent = renderDownloadActions();
+    const paginationContent = renderPagination();
+    return (React.createElement("div", { "data-testid": "akitable-header", className: clsx('akitable-header', {
+            'akitable-header--with-actions': hasActions
+        }) },
+        React.createElement("div", { className: "akitable-header-main" },
+            !!title && (React.createElement("div", { "data-testid": "akitable-header-title-container" },
+                renderTitle(),
+                isLoading ? (React.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
+                    React.createElement(Skeleton.Input, { active: true, size: "small", className: "akitable-header-title-description-skeleton" }))) : (renderTitleDescription()))),
+            hasActions && (React.createElement("div", { className: "akitable-header-actions" },
+                React.createElement(AkitableActions, null)))),
+        (extraContent || downloadContent || paginationContent) && (React.createElement("div", { className: clsx('akitable-header-side', {
+                'akitable-header-side--single-row': !hasActions,
+                'akitable-header-side--with-actions': hasActions
+            }) }, hasActions ? (React.createElement(React.Fragment, null,
+            (extraContent || downloadContent) && (React.createElement("div", { className: "akitable-header-side-top" },
+                extraContent,
+                downloadContent)),
+            paginationContent && (React.createElement("div", { className: "akitable-header-side-bottom" }, paginationContent)))) : (React.createElement(React.Fragment, null,
+            extraContent,
+            downloadContent,
+            paginationContent))))));
 };

package/dist/esm/types.d.ts

@@ -76,6 +76,19 @@ export interface AkitableHeaderProps {
      * Additional content for the table header.
      */
     extra?: ReactNode;
+    /**
+     * Download related actions placed next to the pagination.
+     */
+    downloadActions?: ReactNode;
+    /**
+     * Reserved width for download actions when they are hidden in single row layouts.
+     */
+    downloadActionsSlotWidth?: number;
+    /**
+     * Whether the download actions slot should keep its width even when empty.
+     * This only applies when there is no bulk action (Akitable actions) being displayed.
+     */
+    reserveDownloadActionsSpace?: boolean;
 }
 export interface AkitableFooterProps {
     /**

package/dist/esm/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/akitable",
-  "version": "1.2.4",
+  "version": "1.2.5-rc.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -13,30 +13,30 @@
     "clsx": "^2.1.1",
     "react-error-boundary": "^6.0.0",
     "@akinon/akiform": "1.1.2",
-    "@akinon/ui-button": "1.3.2",
-    "@akinon/ui-card": "1.1.2",
-    "@akinon/ui-input": "1.1.2",
+    "@akinon/ui-button": "1.4.0-rc.0",
     "@akinon/akilocale": "1.2.1",
-    "@akinon/ui-pagination": "1.3.3",
-    "@akinon/ui-result": "1.3.1",
-    "@akinon/icons": "1.1.1",
-    "@akinon/ui-skeleton": "1.1.1",
-    "@akinon/ui-select": "1.3.3",
-    "@akinon/ui-spin": "1.3.2",
-    "@akinon/ui-space": "1.3.2",
-    "@akinon/ui-theme": "1.1.2",
-    "@akinon/ui-table": "1.1.1",
+    "@akinon/ui-input": "1.1.3-rc.0",
+    "@akinon/icons": "1.1.2-rc.0",
+    "@akinon/ui-card": "1.1.3-rc.0",
+    "@akinon/ui-progress": "1.1.3-rc.0",
+    "@akinon/ui-spin": "1.3.3-rc.0",
+    "@akinon/ui-result": "1.3.2-rc.0",
     "@akinon/ui-typography": "1.1.1",
-    "@akinon/ui-progress": "1.1.2",
-    "@akinon/ui-steps": "1.1.2"
+    "@akinon/ui-space": "1.3.3-rc.0",
+    "@akinon/ui-pagination": "1.3.4-rc.0",
+    "@akinon/ui-theme": "1.1.3-rc.0",
+    "@akinon/ui-select": "1.3.4-rc.0",
+    "@akinon/ui-skeleton": "1.1.1",
+    "@akinon/ui-steps": "1.1.3-rc.0",
+    "@akinon/ui-table": "1.1.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "*",
-    "@akinon/utils": "1.1.3",
     "@akinon/typescript-config": "1.1.1",
+    "@akinon/utils": "1.1.4-rc.0",
     "@akinon/vitest-config": "1.1.1"
   },
   "peerDependencies": {

package/dist/cjs/components/pagination.css

@@ -1,3 +0,0 @@
-.akitable-pagination .akinon-pagination-options .akinon-select {
-  height: 38px;
-}

package/dist/esm/components/pagination.css

@@ -1,3 +0,0 @@
-.akitable-pagination .akinon-pagination-options .akinon-select {
-  height: 38px;
-}