@akinon/akitable 0.2.1 → 0.3.1

package/dist/cjs/akitable-context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AkitableAction, AkitablePaginationProps, PaginationChangeEvent } from './types';
+export interface AkitableInternalPaginationProps extends AkitablePaginationProps {
+    total: number;
+    hasPagination: boolean;
+}
+export interface AkitableContextProps {
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    pagination?: AkitableInternalPaginationProps;
+    onPaginationChanged?: PaginationChangeEvent;
+    actions?: AkitableAction[];
+    selectedRowKeys?: React.Key[];
+    setSelectedRowKeys?: React.Dispatch<React.SetStateAction<React.Key[]>>;
+}
+export declare const useAkitableContext: () => AkitableContextProps;
+export declare const AkitableProvider: React.FC<AkitableContextProps>;
+//# sourceMappingURL=akitable-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"akitable-context.d.ts","sourceRoot":"","sources":["../../src/akitable-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,+BACf,SAAQ,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,+BAA+B,CAAC;IAC7C,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;CACxE;AAID,eAAO,MAAM,kBAAkB,4BAAoC,CAAC;AAEpE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuB3D,CAAC"}

package/dist/cjs/akitable-context.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableProvider = exports.useAkitableContext = void 0;
+const react_1 = require("react");
+const AkitableContext = (0, react_1.createContext)({});
+const useAkitableContext = () => (0, react_1.useContext)(AkitableContext);
+exports.useAkitableContext = useAkitableContext;
+const AkitableProvider = ({ actions, isLoading, pagination, onPaginationChanged, children }) => {
+    const [selectedRowKeys, setSelectedRowKeys] = (0, react_1.useState)([]);
+    return (react_1.default.createElement(AkitableContext.Provider, { value: {
+            actions,
+            isLoading,
+            pagination,
+            onPaginationChanged,
+            selectedRowKeys,
+            setSelectedRowKeys
+        } }, children));
+};
+exports.AkitableProvider = AkitableProvider;

package/dist/cjs/akitable.css

@@ -0,0 +1,8 @@
+.akitable-container {
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+.akitable-header {
+}

package/dist/cjs/akitable.d.ts

@@ -0,0 +1,5 @@
+import './akitable.css';
+import React from 'react';
+import { AkitableProps } from './types';
+export declare const Akitable: (props: AkitableProps) => React.JSX.Element;
+//# sourceMappingURL=akitable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA4D5C,CAAC"}

package/dist/cjs/akitable.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Akitable = void 0;
+require("./akitable.css");
+const antd_1 = require("antd");
+const react_1 = require("react");
+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 footer_1 = require("./components/footer");
+const header_1 = require("./components/header");
+const Akitable = (props) => {
+    const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick } = props;
+    let parsedData = [];
+    let total;
+    // If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
+    // If not, table data should be accessed from type AkitableData.
+    if (!!pagination) {
+        const result = data;
+        total = result.count;
+        parsedData = result.results;
+    }
+    else {
+        const result = data;
+        total = result.length;
+        parsedData = result;
+    }
+    return (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("div", { className: "akitable-container" },
+                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, onRowClick: onRowClick }),
+                react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer))))));
+};
+exports.Akitable = Akitable;

package/dist/cjs/common/theme-overrides.d.ts

@@ -0,0 +1,3 @@
+import { ThemeConfig } from 'antd';
+export declare const themeOverrides: ThemeConfig;
+//# sourceMappingURL=theme-overrides.d.ts.map

package/dist/cjs/common/theme-overrides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,WAsD5B,CAAC"}

package/dist/cjs/common/theme-overrides.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeOverrides = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const antd_1 = require("antd");
+exports.themeOverrides = {
+    algorithm: antd_1.theme.defaultAlgorithm,
+    components: {
+        Checkbox: {
+            colorBgBase: ui_theme_1.theme.colors.neutral['50'],
+            algorithm: antd_1.theme.defaultAlgorithm
+        },
+        Card: {
+            paddingLG: 0,
+            colorBgContainer: ui_theme_1.theme.colors.neutral['50'],
+            colorBgBase: ui_theme_1.theme.colors.neutral['50'],
+            colorTextBase: ui_theme_1.theme.colors.neutral['950'],
+            algorithm: antd_1.theme.defaultAlgorithm
+        },
+        Typography: {
+            colorTextHeading: ui_theme_1.theme.colors.neutral['950'],
+            colorText: ui_theme_1.theme.colors.neutral['500'],
+            titleMarginBottom: 0,
+            fontWeightStrong: 500
+        },
+        Select: {
+            colorBgContainerDisabled: ui_theme_1.theme.colors.neutral['50'],
+            colorTextDisabled: ui_theme_1.theme.colors.neutral['375'],
+            colorTextPlaceholder: ui_theme_1.theme.colors.neutral['375'],
+            colorText: ui_theme_1.theme.colors.neutral['950'],
+            selectorBg: ui_theme_1.theme.colors.neutral['50'],
+            colorBgElevated: ui_theme_1.theme.colors.neutral['100'],
+            colorBorder: ui_theme_1.theme.colors.neutral['350'],
+            colorTextQuaternary: ui_theme_1.theme.colors.neutral['500'],
+            optionSelectedBg: ui_theme_1.theme.colors.azure['100'],
+            algorithm: antd_1.theme.defaultAlgorithm
+        },
+        Spin: {
+            colorBgContainer: ui_theme_1.theme.colors.neutral['50']
+        },
+        Table: {
+            headerBorderRadius: 0,
+            headerBg: ui_theme_1.theme.colors.neutral['150'],
+            headerColor: ui_theme_1.theme.colors.ebonyClay['375'],
+            borderColor: ui_theme_1.theme.colors.neutral['350'],
+            colorBgContainer: ui_theme_1.theme.colors.neutral['50'],
+            colorText: ui_theme_1.theme.colors.ebonyClay['900'],
+            cellPaddingInline: 28,
+            colorBgBase: ui_theme_1.theme.colors.neutral['50'],
+            algorithm: antd_1.theme.defaultAlgorithm
+        },
+        Button: {
+            colorBgBase: ui_theme_1.theme.colors.neutral['50'],
+            colorTextBase: ui_theme_1.theme.colors.azure['500'],
+            colorBorder: ui_theme_1.theme.colors.azure['500'],
+            borderColorDisabled: ui_theme_1.theme.colors.neutral['350'],
+            algorithm: antd_1.theme.defaultAlgorithm
+        }
+    }
+};

package/dist/cjs/components/actions.css

@@ -0,0 +1,19 @@
+.akitable-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.akitable-actions .akinon-select {
+  min-width: 200px;
+  height: 38px;
+}
+
+.akitable-actions .akinon-btn {
+  height: 36px;
+}
+
+.akitable-actions .akitable-actions-info {
+  color: var(--color-neutral-400);
+  margin-left: 0.25rem;
+}

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

@@ -0,0 +1,4 @@
+import './actions.css';
+import React from 'react';
+export declare const AkitableActions: () => React.JSX.Element;
+//# sourceMappingURL=actions.d.ts.map

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

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

package/dist/cjs/components/actions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableActions = void 0;
+require("./actions.css");
+const icons_1 = require("@akinon/icons");
+const ui_button_1 = require("@akinon/ui-button");
+const ui_select_1 = require("@akinon/ui-select");
+const react_1 = require("react");
+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 { actions, isLoading, selectedRowKeys } = (0, akitable_context_1.useAkitableContext)();
+    const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
+        value: index + 1,
+        label: action.label
+    }));
+    const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
+    const handleActionChange = (value) => {
+        setSelectedAction(value);
+    };
+    const handleActionTrigger = () => {
+        if (!selectedAction || !selectedRowKeys || selectedRowKeys.length === 0)
+            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);
+    };
+    return (react_1.default.createElement("div", { className: "akitable-actions" },
+        react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: handleActionChange, disabled: isLoading, allowClear: true }),
+        selectedAction && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ui_button_1.Button, { type: "primary", icon: react_1.default.createElement(icons_1.Icon, { icon: "katalogkontrol", size: 14, style: { position: 'relative', top: 2 } }), 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/controls.css

@@ -0,0 +1,5 @@
+.akitable-controls {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}

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

@@ -0,0 +1,4 @@
+import './controls.css';
+import React from 'react';
+export declare const AkitableControls: () => React.JSX.Element | null;
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../src/components/controls.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,gCAe5B,CAAC"}

package/dist/cjs/components/controls.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableControls = void 0;
+require("./controls.css");
+const react_1 = require("react");
+const akitable_context_1 = require("../akitable-context");
+const actions_1 = require("./actions");
+const pagination_1 = require("./pagination");
+const AkitableControls = () => {
+    const { actions, pagination } = (0, akitable_context_1.useAkitableContext)();
+    if (!actions && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
+        return null;
+    return (react_1.default.createElement("div", { className: "akitable-controls" },
+        actions && actions.length > 0 && react_1.default.createElement(actions_1.AkitableActions, null),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { className: "ml-auto" },
+            react_1.default.createElement(pagination_1.AkitablePagination, null)))));
+};
+exports.AkitableControls = AkitableControls;

package/dist/cjs/components/datatable.css

@@ -0,0 +1,57 @@
+.akinon-table-wrapper .akinon-table-thead > tr > th {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  padding-top: 0.65rem;
+}
+
+.akitable-wrapper {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  margin-bottom: 1rem;
+}
+
+.akinon-table-content {
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+}
+
+.akinon-table-content::-webkit-scrollbar {
+  height: 8px;
+}
+
+.akinon-table-content::-webkit-scrollbar-track {
+  background-color: var(--color-neutral-100);
+  border: none;
+  padding: 1px;
+}
+
+.akinon-table-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-radius: 3px;
+  border: none;
+}
+
+.akinon-table-row {
+  /* Add background for alternate rows. */
+  &:nth-child(odd) td {
+    background-color: var(--color-neutral-100);
+  }
+}
+
+.akinon-table-row.is-selectable {
+  cursor: pointer;
+
+  & td {
+    transition: background-color 0.2s;
+  }
+
+  &:hover td {
+    background-color: var(--color-blue-100) !important;
+  }
+
+  &:hover td[class*='akinon-table-cell-fix-'] {
+    background-color: var(--color-blue-200) !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+import './datatable.css';
+import React from 'react';
+import { AkitableDataTableProps } from '../types';
+export declare const AkitableDataTable: (props: AkitableDataTableProps) => React.JSX.Element;
+//# sourceMappingURL=datatable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAgB,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAsC9D,CAAC"}

package/dist/cjs/components/datatable.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableDataTable = void 0;
+require("./datatable.css");
+const ui_table_1 = require("@akinon/ui-table");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const akitable_context_1 = require("../akitable-context");
+const AkitableDataTable = (props) => {
+    const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = (0, akitable_context_1.useAkitableContext)();
+    const { columns, data, rowKey, onRowClick } = props;
+    const hasActions = actions && actions.length > 0;
+    const onSelectChange = (newSelectedRowKeys) => {
+        setSelectedRowKeys === null || setSelectedRowKeys === void 0 ? void 0 : setSelectedRowKeys(newSelectedRowKeys);
+    };
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: onSelectChange
+    };
+    return (react_1.default.createElement("div", { className: "akitable-wrapper" },
+        react_1.default.createElement(ui_table_1.Table, { columns: columns, dataSource: data, rowKey: (record) => record[rowKey], bordered: true, rowHoverable: true, pagination: false, scroll: { x: 1500 }, loading: isLoading, onRow: (record, rowIndex) => {
+                return {
+                    onClick: (event) => {
+                        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record, event, rowIndex);
+                    }
+                };
+            }, rowClassName: (0, clsx_1.default)({ 'is-selectable': !!onRowClick }), rowSelection: hasActions ? rowSelection : undefined })));
+};
+exports.AkitableDataTable = AkitableDataTable;

package/dist/cjs/components/footer.css

@@ -0,0 +1,5 @@
+.akitable-footer {
+  display: flex;
+  /* Setting min-height to prevent cumulative layout shifts. */
+  min-height: 40px;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAkBxD,CAAC"}

package/dist/cjs/components/footer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableFooter = void 0;
+require("./footer.css");
+const ui_spin_1 = require("@akinon/ui-spin");
+const react_1 = require("react");
+const akitable_context_1 = require("../akitable-context");
+const pagination_1 = require("./pagination");
+const AkitableFooter = (props) => {
+    const { isLoading } = (0, akitable_context_1.useAkitableContext)();
+    const { extra } = props;
+    if (!extra)
+        return null;
+    return (react_1.default.createElement("div", { className: "akitable-footer" },
+        extra && (react_1.default.createElement("div", { className: "akitable-footer-extra" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin, null) : extra)),
+        react_1.default.createElement("div", { className: "ml-auto" },
+            react_1.default.createElement(pagination_1.AkitablePagination, null))));
+};
+exports.AkitableFooter = AkitableFooter;

package/dist/cjs/components/header.css

@@ -0,0 +1,23 @@
+.akitable-header {
+  display: flex;
+  margin-bottom: 1.5rem;
+  /* Setting min-height to prevent cumulative layout shifts. */
+  min-height: 40px;
+}
+
+.akitable-header-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  color: var(--color-gray-900);
+}
+
+.akitable-header-description {
+  color: var(--color-gray-400);
+}
+
+.akitable-header-extra {
+  margin-left: auto;
+}

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

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

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

@@ -0,0 +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,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BA8BxD,CAAC"}

package/dist/cjs/components/header.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitableHeader = void 0;
+require("./header.css");
+const ui_skeleton_1 = require("@akinon/ui-skeleton");
+const ui_spin_1 = require("@akinon/ui-spin");
+const react_1 = require("react");
+const akitable_context_1 = require("../akitable-context");
+const i18n_1 = require("../i18n");
+const AkitableHeader = (props) => {
+    const { isLoading, pagination } = (0, akitable_context_1.useAkitableContext)();
+    const { title, extra } = props;
+    if (!title && !extra)
+        return null;
+    return (react_1.default.createElement("div", { className: "akitable-header" },
+        title && (react_1.default.createElement("div", null,
+            react_1.default.createElement("h2", { className: "akitable-header-title" },
+                title,
+                " ",
+                !isLoading && `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`),
+            !isLoading && (react_1.default.createElement("span", { className: "akitable-header-description" }, i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total }))),
+            isLoading && react_1.default.createElement(ui_skeleton_1.Skeleton, { count: 0.7, className: "mt-2" }))),
+        extra && (react_1.default.createElement("div", { className: "akitable-header-extra" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin, null) : extra))));
+};
+exports.AkitableHeader = AkitableHeader;

package/dist/cjs/components/pagination.css

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

package/dist/{esm/components/Pagination/index.d.ts → cjs/components/pagination.d.ts}

@@ -1,4 +1,4 @@
-import './index.css';
+import './pagination.css';
 import React from 'react';
 export declare const AkitablePagination: () => React.JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,kBAAkB,yBAoB9B,CAAC"}

package/dist/cjs/components/pagination.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AkitablePagination = void 0;
+require("./pagination.css");
+const ui_pagination_1 = require("@akinon/ui-pagination");
+const react_1 = require("react");
+const akitable_context_1 = require("../akitable-context");
+const i18n_1 = require("../i18n");
+const AkitablePagination = () => {
+    const { isLoading, pagination, onPaginationChanged } = (0, akitable_context_1.useAkitableContext)();
+    const { t } = i18n_1.i18n;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ui_pagination_1.Pagination, { simple: true, disabled: isLoading, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: [20, 50, 100, 250], total: pagination === null || pagination === void 0 ? void 0 : pagination.total, onChange: (page, size) => onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size), locale: {
+                items_per_page: t('itemsPerPage')
+            } })));
+};
+exports.AkitablePagination = AkitablePagination;

package/dist/cjs/i18n/index.d.ts

@@ -0,0 +1,5 @@
+export declare const i18n: {
+    t: (key: string, options?: import("i18next").TOptions | undefined) => string;
+    lng: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;;;CAOf,CAAC"}

package/dist/cjs/i18n/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const akilocale_1 = require("@akinon/akilocale");
+const en_1 = require("./translations/en");
+const tr_1 = require("./translations/tr");
+exports.i18n = akilocale_1.Akilocale.createInstance({
+    debug: false,
+    fallbackLng: 'en',
+    translations: {
+        en: en_1.default,
+        tr: tr_1.default
+    }
+});

package/dist/cjs/i18n/translations/en.d.ts

@@ -0,0 +1,9 @@
+declare const translations: {
+    readonly resultsFound: "{{count}} result(s) found.";
+    readonly itemsPerPage: "/ page";
+    readonly selectAction: "Select Action";
+    readonly selectedCount: "Selected {{count}} record(s).";
+    readonly apply: "Apply";
+};
+export default translations;
+//# sourceMappingURL=en.d.ts.map

package/dist/cjs/i18n/translations/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/en.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const translations = {
+    resultsFound: '{{count}} result(s) found.',
+    itemsPerPage: '/ page',
+    selectAction: 'Select Action',
+    selectedCount: 'Selected {{count}} record(s).',
+    apply: 'Apply'
+};
+exports.default = translations;

package/dist/cjs/i18n/translations/tr.d.ts

@@ -0,0 +1,9 @@
+declare const translations: {
+    readonly resultsFound: "{{count}} sonuç bulundu.";
+    readonly itemsPerPage: "/ sayfa";
+    readonly selectAction: "Aksiyon Seçiniz";
+    readonly selectedCount: "{{count}} kayit seçildi.";
+    readonly apply: "Uygula";
+};
+export default translations;
+//# sourceMappingURL=tr.d.ts.map

package/dist/cjs/i18n/translations/tr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/tr.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const translations = {
+    resultsFound: '{{count}} sonuç bulundu.',
+    itemsPerPage: '/ sayfa',
+    selectAction: 'Aksiyon Seçiniz',
+    selectedCount: '{{count}} kayit seçildi.',
+    apply: 'Uygula'
+};
+exports.default = translations;

package/dist/cjs/index.d.ts

@@ -1,19 +1,3 @@
-import './index.css';
-import * as React from 'react';
-import type { AntdTableProps } from './components/AntdTable';
-import type { AnyObject, HeaderAction, UseAkitablePagination } from './types';
-export type { AkitablePagination, HeaderAction, UseAkitablePagination } from './types';
-export type AkitableProps<IData> = AntdTableProps<IData> & {
-    title: string;
-    description: string;
-    useAkitablePagination: UseAkitablePagination;
-    headerActions?: HeaderAction<IData>[];
-    headerMiddleBlock?: React.ReactNode;
-};
-/**
- * Akitable component
- * @param {AkitableProps} props
- * @returns {React.ReactElement}
- */
-export declare const Akitable: <IData extends AnyObject>({ useAkitablePagination, title, description, headerActions, headerMiddleBlock, ...restProps }: AkitableProps<IData>) => React.JSX.Element;
+export * from './akitable';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAIrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG;IAEzD,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,EAAE,MAAM,CAAC;IAEpB,qBAAqB,EAAE,qBAAqB,CAAC;IAE7C,aAAa,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;IAEtC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qKA4FpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}