@redis-ui/table 2.12.0 → 2.18.0

package/dist/Table/components/TablePagination/TablePagination.js

@@ -1,112 +1,78 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { DoubleChevronLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleChevronRightIcon } from "@redislabsdev/redis-ui-icons";
-import { useId } from "../../../node_modules/@radix-ui/react-id/dist/index.js";
-import { useTableContext } from "../../Table.context.js";
-import { PaginationRow, CountInfo, ItemPerPageText, Label, Select, PaginationActions, PaginationIconButton, PaginationIndexText, PageLabelText, TotalPagesText } from "./TablePagination.style.js";
-const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
-const TablePagination = ({
-  pageSizes = DEFAULT_PAGE_SIZES
-}) => {
-  const {
-    table
-  } = useTableContext();
-  const perPageId = useId();
-  const pageNumId = useId();
-  if (!table._getPaginationRowModel) {
+import { Pagination } from "@redislabsdev/redis-ui-components";
+import { usePaginationContext } from "../../plugins/PaginationPlugin.js";
+import { TablePaginationCompose } from "./components/Compose/Compose.js";
+import { PaginationBar, InfoLabel, PageSelect, PageSizeSelect, NavigationButton, PageSizeGroup, PageNavGroup, PageSelectGroup } from "./TablePagination.style.js";
+const renderRowCount = ({
+  visibleItemCount,
+  totalItemCount
+}) => `Showing ${visibleItemCount} out of ${totalItemCount} rows`;
+const renderPageCount = ({
+  pageIndex,
+  pageCount
+}) => `${pageIndex + 1} of ${pageCount}`;
+const renderTotalPageCount = ({
+  pageCount
+}) => `of ${pageCount}`;
+const TablePagination = Object.assign(() => {
+  const pagination = usePaginationContext();
+  if (!pagination) {
     return null;
   }
-  const {
-    pageIndex,
-    pageSize
-  } = table.getState().pagination;
-  const totalRowCount = table.getRowCount();
-  const pageCount = Math.max(table.getPageCount(), 1);
-  const handlePageSizeChange = (value) => {
-    table.setPageSize(Number(value));
-  };
-  const handlePageIndexChange = (index) => {
-    table.setPageIndex(index);
-  };
-  return jsxRuntimeExports.jsx(PaginationRow, {
-    "data-role": "pagination",
-    children: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-      children: [jsxRuntimeExports.jsxs(CountInfo, {
-        children: ["Showing ", table.getRowModel().rows.length, " out of ", totalRowCount, " rows"]
-      }), jsxRuntimeExports.jsxs("div", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "1rem"
-        },
-        children: [jsxRuntimeExports.jsx(ItemPerPageText, {
-          children: jsxRuntimeExports.jsx(Label, {
-            htmlFor: perPageId,
-            children: "Items per page:"
-          })
-        }), jsxRuntimeExports.jsx(Select, {
-          id: perPageId,
-          value: pageSize.toString(),
-          onChange: handlePageSizeChange,
-          disabled: pageSizes[0] > totalRowCount,
-          options: pageSizes.map(String).map((value) => ({
-            value
-          }))
+  return jsxRuntimeExports.jsx(TablePagination.Compose, {
+    children: jsxRuntimeExports.jsxs(TablePagination.Bar, {
+      "data-role": "pagination",
+      children: [jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+        renderer: renderRowCount,
+        ellipsis: true,
+        tooltipOnEllipsis: true
+      }), jsxRuntimeExports.jsx(TablePagination.Split, {}), jsxRuntimeExports.jsxs(TablePagination.PageSizeGroup, {
+        children: [jsxRuntimeExports.jsx(TablePagination.PageSizeSelect.Label, {
+          children: "Items per page:"
+        }), jsxRuntimeExports.jsx(TablePagination.PageSizeSelect, {
+          pageSizes: pagination.pageSizes
         })]
-      }), jsxRuntimeExports.jsxs(PaginationActions, {
-        children: [jsxRuntimeExports.jsx(PaginationIconButton, {
-          icon: DoubleChevronLeftIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(0),
-          disabled: pageIndex === 0,
-          title: "First page",
-          "aria-label": "first page"
-        }), jsxRuntimeExports.jsx(PaginationIconButton, {
-          icon: ChevronLeftIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageIndex - 1),
-          disabled: pageIndex === 0,
-          title: "Previous page",
-          "aria-label": "previous page"
-        }), jsxRuntimeExports.jsxs(PaginationIndexText, {
-          size: "S",
-          children: [pageIndex + 1, " of ", pageCount]
-        }), jsxRuntimeExports.jsx(PaginationIconButton, {
-          icon: ChevronRightIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageIndex + 1),
-          disabled: pageIndex === pageCount - 1,
-          title: "Next page",
-          "aria-label": "next page"
-        }), jsxRuntimeExports.jsx(PaginationIconButton, {
-          icon: DoubleChevronRightIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageCount - 1),
-          disabled: pageIndex === pageCount - 1,
-          title: "Last page",
-          "aria-label": "last page"
+      }), jsxRuntimeExports.jsxs(TablePagination.PageNavGroup, {
+        children: [jsxRuntimeExports.jsxs("div", {
+          children: [jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "first"
+          }), jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "prev"
+          })]
+        }), jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+          ellipsis: true,
+          tooltipOnEllipsis: true,
+          renderer: renderPageCount
+        }), jsxRuntimeExports.jsxs("div", {
+          children: [jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "next"
+          }), jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "last"
+          })]
         })]
-      }), jsxRuntimeExports.jsxs(PaginationActions, {
-        children: [jsxRuntimeExports.jsx(PageLabelText, {
-          children: jsxRuntimeExports.jsx(Label, {
-            htmlFor: pageNumId,
-            children: "Page"
-          })
-        }), jsxRuntimeExports.jsx(Select, {
-          id: pageNumId,
-          value: (pageIndex + 1).toString(),
-          onChange: (value) => handlePageIndexChange(Number(value) - 1),
-          options: Array.from({
-            length: pageCount
-          }, (_, i) => String(i + 1)).map((value) => ({
-            value
-          }))
-        }), jsxRuntimeExports.jsxs(TotalPagesText, {
-          children: ["of ", pageCount]
+      }), jsxRuntimeExports.jsxs(TablePagination.PageSelectGroup, {
+        children: [jsxRuntimeExports.jsx(TablePagination.PageSelect.Label, {
+          children: "Page"
+        }), jsxRuntimeExports.jsx(TablePagination.PageSelect, {}), jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+          ellipsis: true,
+          tooltipOnEllipsis: true,
+          renderer: renderTotalPageCount
         })]
       })]
     })
   });
-};
+}, {
+  Compose: TablePaginationCompose,
+  Bar: PaginationBar,
+  Split: Pagination.Split,
+  InfoLabel,
+  PageSelect,
+  PageSizeSelect,
+  NavigationButton,
+  PageSizeGroup,
+  PageNavGroup,
+  PageSelectGroup
+});
 export {
   TablePagination as default
 };

package/dist/Table/components/TablePagination/TablePagination.style.cjs

@@ -5,61 +5,81 @@ const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const redisUiComponents = require("@redislabsdev/redis-ui-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const PaginationIconButton = _styled__default.default(redisUiComponents.IconButton).withConfig({
-  displayName: "TablePaginationstyle__PaginationIconButton",
+const NavigationButton = _styled__default.default(redisUiComponents.Pagination.NavigationButton).withConfig({
+  displayName: "TablePaginationstyle__NavigationButton",
   componentId: "RedisUI__sc-ccqfi0-0"
-})(["color:", ";&:disabled{color:", ";}"], () => redisUiStyles.useTheme().components.table.components.tablePagination.paginationIconButton.enabledColor, () => redisUiStyles.useTheme().components.table.components.tablePagination.paginationIconButton.disabledColor);
-const CountInfo = _styled__default.default(redisUiComponents.Typography.Body).withConfig({
-  displayName: "TablePaginationstyle__CountInfo",
+})(["", ";"], () => {
+  const styles = redisUiStyles.useTheme().components.table.pagination.navButton;
+  return _styled.css`
+      width: ${styles.width};
+      height: ${styles.height};
+      padding: ${styles.padding};
+      color: ${styles.color};
+
+      &:disabled {
+        color: ${styles.disabledColor};
+      }
+    `;
+});
+const PaginationBar = _styled__default.default(redisUiComponents.Pagination.Bar).attrs(({
+  "aria-label": al
+}) => ({
+  "aria-label": al ?? "Table Pagination"
+})).withConfig({
+  displayName: "TablePaginationstyle__PaginationBar",
   componentId: "RedisUI__sc-ccqfi0-1"
-})(["display:flex;margin-right:auto;font-size:1.2rem;color:", ";"], () => redisUiStyles.useTheme().components.table.components.tablePagination.countInfoText.color);
-const PaginationRow = _styled__default.default.div.withConfig({
-  displayName: "TablePaginationstyle__PaginationRow",
+})(["", " width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
+  const styles = redisUiStyles.useTheme().components.table.pagination.bar;
+  return _styled.css`
+      font-size: ${styles.fontSize};
+      gap: ${styles.gap};
+      height: ${styles.height};
+      padding: ${styles.padding};
+      border: solid ${styles.borderColor};
+      border-width: ${styles.borderSize};
+      color: ${styles.textColor};
+    `;
+});
+const InfoLabel = _styled__default.default(redisUiComponents.Pagination.InfoLabel).withConfig({
+  displayName: "TablePaginationstyle__InfoLabel",
   componentId: "RedisUI__sc-ccqfi0-2"
-})(["display:flex;align-items:center;gap:3.2rem;width:100%;height:4.8rem;padding:0 1.2rem;justify-content:flex-end;border-top:1px solid ", ";"], () => redisUiStyles.useTheme().components.table.components.tablePagination.paginationRow.borderTop);
-const Select = _styled__default.default(redisUiComponents.Select).withConfig({
-  displayName: "TablePaginationstyle__Select",
+})(["line-height:", ";"], () => redisUiStyles.useTheme().components.table.pagination.select.height);
+const useSelectStyles = () => {
+  const styles = redisUiStyles.useTheme().components.table.pagination.select;
+  return _styled.css`
+    gap: ${styles.gap};
+    height: ${styles.height};
+    padding: ${styles.padding};
+    color: ${styles.textColor};
+    font-size: ${styles.fontSize};
+    line-height: initial;
+  `;
+};
+const PageSizeSelect = _styled__default.default(redisUiComponents.Pagination.PageSizeSelect).withConfig({
+  displayName: "TablePaginationstyle__PageSizeSelect",
   componentId: "RedisUI__sc-ccqfi0-3"
-})(["height:2rem;padding:0 0.4rem;gap:0.4rem;span{font-size:1.2rem;line-height:initial;}"]);
-const PaginationActions = _styled__default.default.div.withConfig({
-  displayName: "TablePaginationstyle__PaginationActions",
+})(["", ""], useSelectStyles);
+const PageSelect = _styled__default.default(redisUiComponents.Pagination.PageSelect).withConfig({
+  displayName: "TablePaginationstyle__PageSelect",
   componentId: "RedisUI__sc-ccqfi0-4"
-})(["display:flex;align-items:center;gap:0.4rem;"]);
-const ItemPerPageText = _styled__default.default(redisUiComponents.Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__ItemPerPageText",
+})(["", ""], useSelectStyles);
+const PageSizeGroup = _styled__default.default(redisUiComponents.Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageSizeGroup",
   componentId: "RedisUI__sc-ccqfi0-5"
-})(["color:", ";flex-shrink:0;"], () => redisUiStyles.useTheme().components.table.components.tablePagination.itemPerPageText.color);
-const PaginationIndexText = _styled__default.default(redisUiComponents.Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__PaginationIndexText",
+})(["gap:1rem;"]);
+const PageNavGroup = _styled__default.default(redisUiComponents.Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageNavGroup",
   componentId: "RedisUI__sc-ccqfi0-6"
-})(["color:", ";"], () => redisUiStyles.useTheme().components.table.components.tablePagination.paginationIndexText.color);
-const PageLabelText = _styled__default.default(redisUiComponents.Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__PageLabelText",
+})(["gap:0.4rem;"]);
+const PageSelectGroup = _styled__default.default(redisUiComponents.Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageSelectGroup",
   componentId: "RedisUI__sc-ccqfi0-7"
-})(["color:", ";flex-shrink:0;"], () => redisUiStyles.useTheme().components.table.components.tablePagination.pageLabelText.color);
-const Label = _styled__default.default.label.withConfig({
-  displayName: "TablePaginationstyle__Label",
-  componentId: "RedisUI__sc-ccqfi0-8"
-})(["all:unset;"]);
-const TotalPagesText = _styled__default.default(redisUiComponents.Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__TotalPagesText",
-  componentId: "RedisUI__sc-ccqfi0-9"
-})(["color:", ";flex-shrink:0;"], () => redisUiStyles.useTheme().components.table.components.tablePagination.totalPagesText.color);
-exports.CountInfo = CountInfo;
-exports.ItemPerPageText = ItemPerPageText;
-exports.Label = Label;
-exports.PageLabelText = PageLabelText;
-exports.PaginationActions = PaginationActions;
-exports.PaginationIconButton = PaginationIconButton;
-exports.PaginationIndexText = PaginationIndexText;
-exports.PaginationRow = PaginationRow;
-exports.Select = Select;
-exports.TotalPagesText = TotalPagesText;
+})(["gap:0.4rem;"]);
+exports.InfoLabel = InfoLabel;
+exports.NavigationButton = NavigationButton;
+exports.PageNavGroup = PageNavGroup;
+exports.PageSelect = PageSelect;
+exports.PageSelectGroup = PageSelectGroup;
+exports.PageSizeGroup = PageSizeGroup;
+exports.PageSizeSelect = PageSizeSelect;
+exports.PaginationBar = PaginationBar;

package/dist/Table/components/TablePagination/TablePagination.style.d.ts

@@ -1,51 +1,18 @@
-/// <reference types="react" />
-export declare const PaginationIconButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const CountInfo: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const PaginationRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Select: import("styled-components").StyledComponent<(<TValue extends string = string, TOption extends import("@redislabsdev/redis-ui-components").SelectOption<TValue> = import("@redislabsdev/redis-ui-components").SelectOption<TValue>>({ options, disabled, defaultOpen, open, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, valueRender, searchable, placement, maxVisibleItems, placeholder, virtualized, contentWidth, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Compose/Compose.types").SelectComposeProps<TValue, TOption> & Omit<import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption> & {
-    allowReset?: boolean | undefined;
-    loading?: boolean | undefined;
-} & Omit<import("@redislabsdev/redis-ui-components/dist/Select/components/Content/Content.types").SelectContentProps<TOption>, "optionComponent" | "optionValueRender"> & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: <TValue_1 extends string = string, TOption_1 extends import("@redislabsdev/redis-ui-components").SelectOption<TValue_1> = import("@redislabsdev/redis-ui-components").SelectOption<TValue_1>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Compose/Compose.types").SelectComposeProps<TValue_1, TOption_1> & import("@redislabsdev/redis-ui-components/dist/Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (<TOption_2 extends import("@redislabsdev/redis-ui-components").SelectOption<string> = import("@redislabsdev/redis-ui-components").SelectOption<string>>({ placeholder, valueRender, allowReset, loading, ...props }: Omit<import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_2> & {
-        allowReset?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ customContainer, id, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps & import("@redislabsdev/redis-ui-components/dist/Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-        Value: <TOption_3 extends import("@redislabsdev/redis-ui-components").SelectOption<string> = import("@redislabsdev/redis-ui-components").SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_3> & import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
-        ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
-        StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
-        LoadingIndicator: ({ loading, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
-        Arrow: ({ icon, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
-        ErrorIcon: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
-    };
-    Content: (<TOption_4 extends import("@redislabsdev/redis-ui-components").SelectOption<string> = import("@redislabsdev/redis-ui-components").SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
-        searchable?: boolean | undefined;
-    } & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Compose/Compose.types").RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, placement, contentWidth, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Compose/Compose.types").RestSelectContentComposeProps & import("@redislabsdev/redis-ui-components/dist/Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-        OptionList: <TOption_5 extends import("@redislabsdev/redis-ui-components").SelectOption<string> = import("@redislabsdev/redis-ui-components").SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_5> & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
-        Search: import("react").ForwardRefExoticComponent<Omit<import("@redislabsdev/redis-ui-components/dist/Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("@redislabsdev/redis-ui-components/dist/Inputs/components/InputTag/InputTag.types").InputTagProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("@redislabsdev/redis-ui-components/dist/Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("@redislabsdev/redis-ui-components").RestInputProps & import("react").RefAttributes<HTMLInputElement>>;
-        Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
-    };
-    Option: (<TOption_6 extends import("@redislabsdev/redis-ui-components").SelectOption<string> = import("@redislabsdev/redis-ui-components").SelectOption<string>>({ option, content, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<TOption_6> & {
-        content?: import("react").ReactNode;
-    } & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: import("react").ForwardRefExoticComponent<import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<import("@redislabsdev/redis-ui-components").SelectOption<string>> & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps & import("@redislabsdev/redis-ui-components/dist/Helpers/common.types").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
-        Content: (props: import("@redislabsdev/redis-ui-components/dist/Helpers/common.types").ComposeChildrenProps & import("@redislabsdev/redis-ui-components/dist/Select/components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
-        Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-    };
+export declare const NavigationButton: import("styled-components").StyledComponent<({ navType, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const PaginationBar: import("styled-components").StyledComponent<"nav", any, {
+    'aria-label': string;
+} & {
+    'aria-label': string;
+}, "aria-label">;
+export declare const InfoLabel: import("styled-components").StyledComponent<({ renderer, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const PageSizeSelect: import("styled-components").StyledComponent<{
+    ({ pageSizes, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
+    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
 }, any, {}, never>;
-export declare const PaginationActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemPerPageText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
-    size: "S";
-}, "size">;
-export declare const PaginationIndexText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
-    size: "S";
-}, "size">;
-export declare const PageLabelText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
-    size: "S";
-}, "size">;
-export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const TotalPagesText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("@redislabsdev/redis-ui-components/dist/Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
-    size: "S";
-}, "size">;
+export declare const PageSelect: import("styled-components").StyledComponent<{
+    ({ ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+}, any, {}, never>;
+export declare const PageSizeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageNavGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageSelectGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/components/TablePagination/TablePagination.style.js

@@ -1,63 +1,83 @@
-import _styled from "styled-components";
+import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { IconButton, Typography, Select as Select$1 } from "@redislabsdev/redis-ui-components";
-const PaginationIconButton = _styled(IconButton).withConfig({
-  displayName: "TablePaginationstyle__PaginationIconButton",
+import { Pagination } from "@redislabsdev/redis-ui-components";
+const NavigationButton = _styled(Pagination.NavigationButton).withConfig({
+  displayName: "TablePaginationstyle__NavigationButton",
   componentId: "RedisUI__sc-ccqfi0-0"
-})(["color:", ";&:disabled{color:", ";}"], () => useTheme().components.table.components.tablePagination.paginationIconButton.enabledColor, () => useTheme().components.table.components.tablePagination.paginationIconButton.disabledColor);
-const CountInfo = _styled(Typography.Body).withConfig({
-  displayName: "TablePaginationstyle__CountInfo",
+})(["", ";"], () => {
+  const styles = useTheme().components.table.pagination.navButton;
+  return css`
+      width: ${styles.width};
+      height: ${styles.height};
+      padding: ${styles.padding};
+      color: ${styles.color};
+
+      &:disabled {
+        color: ${styles.disabledColor};
+      }
+    `;
+});
+const PaginationBar = _styled(Pagination.Bar).attrs(({
+  "aria-label": al
+}) => ({
+  "aria-label": al ?? "Table Pagination"
+})).withConfig({
+  displayName: "TablePaginationstyle__PaginationBar",
   componentId: "RedisUI__sc-ccqfi0-1"
-})(["display:flex;margin-right:auto;font-size:1.2rem;color:", ";"], () => useTheme().components.table.components.tablePagination.countInfoText.color);
-const PaginationRow = _styled.div.withConfig({
-  displayName: "TablePaginationstyle__PaginationRow",
+})(["", " width:100%;overflow:auto hidden;> *{flex:none;}"], () => {
+  const styles = useTheme().components.table.pagination.bar;
+  return css`
+      font-size: ${styles.fontSize};
+      gap: ${styles.gap};
+      height: ${styles.height};
+      padding: ${styles.padding};
+      border: solid ${styles.borderColor};
+      border-width: ${styles.borderSize};
+      color: ${styles.textColor};
+    `;
+});
+const InfoLabel = _styled(Pagination.InfoLabel).withConfig({
+  displayName: "TablePaginationstyle__InfoLabel",
   componentId: "RedisUI__sc-ccqfi0-2"
-})(["display:flex;align-items:center;gap:3.2rem;width:100%;height:4.8rem;padding:0 1.2rem;justify-content:flex-end;border-top:1px solid ", ";"], () => useTheme().components.table.components.tablePagination.paginationRow.borderTop);
-const Select = _styled(Select$1).withConfig({
-  displayName: "TablePaginationstyle__Select",
+})(["line-height:", ";"], () => useTheme().components.table.pagination.select.height);
+const useSelectStyles = () => {
+  const styles = useTheme().components.table.pagination.select;
+  return css`
+    gap: ${styles.gap};
+    height: ${styles.height};
+    padding: ${styles.padding};
+    color: ${styles.textColor};
+    font-size: ${styles.fontSize};
+    line-height: initial;
+  `;
+};
+const PageSizeSelect = _styled(Pagination.PageSizeSelect).withConfig({
+  displayName: "TablePaginationstyle__PageSizeSelect",
   componentId: "RedisUI__sc-ccqfi0-3"
-})(["height:2rem;padding:0 0.4rem;gap:0.4rem;span{font-size:1.2rem;line-height:initial;}"]);
-const PaginationActions = _styled.div.withConfig({
-  displayName: "TablePaginationstyle__PaginationActions",
+})(["", ""], useSelectStyles);
+const PageSelect = _styled(Pagination.PageSelect).withConfig({
+  displayName: "TablePaginationstyle__PageSelect",
   componentId: "RedisUI__sc-ccqfi0-4"
-})(["display:flex;align-items:center;gap:0.4rem;"]);
-const ItemPerPageText = _styled(Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__ItemPerPageText",
+})(["", ""], useSelectStyles);
+const PageSizeGroup = _styled(Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageSizeGroup",
   componentId: "RedisUI__sc-ccqfi0-5"
-})(["color:", ";flex-shrink:0;"], () => useTheme().components.table.components.tablePagination.itemPerPageText.color);
-const PaginationIndexText = _styled(Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__PaginationIndexText",
+})(["gap:1rem;"]);
+const PageNavGroup = _styled(Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageNavGroup",
   componentId: "RedisUI__sc-ccqfi0-6"
-})(["color:", ";"], () => useTheme().components.table.components.tablePagination.paginationIndexText.color);
-const PageLabelText = _styled(Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__PageLabelText",
+})(["gap:0.4rem;"]);
+const PageSelectGroup = _styled(Pagination.Group).withConfig({
+  displayName: "TablePaginationstyle__PageSelectGroup",
   componentId: "RedisUI__sc-ccqfi0-7"
-})(["color:", ";flex-shrink:0;"], () => useTheme().components.table.components.tablePagination.pageLabelText.color);
-const Label = _styled.label.withConfig({
-  displayName: "TablePaginationstyle__Label",
-  componentId: "RedisUI__sc-ccqfi0-8"
-})(["all:unset;"]);
-const TotalPagesText = _styled(Typography.Body).attrs({
-  size: "S"
-}).withConfig({
-  displayName: "TablePaginationstyle__TotalPagesText",
-  componentId: "RedisUI__sc-ccqfi0-9"
-})(["color:", ";flex-shrink:0;"], () => useTheme().components.table.components.tablePagination.totalPagesText.color);
+})(["gap:0.4rem;"]);
 export {
-  CountInfo,
-  ItemPerPageText,
-  Label,
-  PageLabelText,
-  PaginationActions,
-  PaginationIconButton,
-  PaginationIndexText,
-  PaginationRow,
-  Select,
-  TotalPagesText
+  InfoLabel,
+  NavigationButton,
+  PageNavGroup,
+  PageSelect,
+  PageSelectGroup,
+  PageSizeGroup,
+  PageSizeSelect,
+  PaginationBar
 };

package/dist/Table/components/TablePagination/components/Compose/Compose.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const React = require("react");
+const Table_context = require("../../../../Table.context.cjs");
+const PaginationPlugin = require("../../../../plugins/PaginationPlugin.cjs");
+const TablePaginationCompose = ({
+  children
+}) => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  const pagination = PaginationPlugin.usePaginationContext();
+  const paginationEnabled = !!pagination;
+  const {
+    pageIndex,
+    pageSize
+  } = table.getState().pagination;
+  const pageCount = Math.max(table.getPageCount(), 1);
+  React.useEffect(() => {
+    if (paginationEnabled) {
+      const fixedIndex = Math.min(pageIndex, pageCount - 1);
+      if (fixedIndex !== pageIndex) table.setPageIndex(fixedIndex);
+    }
+  }, [pageCount, pageIndex, table, paginationEnabled]);
+  if (!paginationEnabled) {
+    return null;
+  }
+  return jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.Pagination.Compose, {
+    onPageChange: table.setPageIndex,
+    pageIndex,
+    pageSize,
+    pageCount,
+    onPageSizeChange: table.setPageSize,
+    totalItemCount: table.getRowCount(),
+    visibleItemCount: table.getRowModel().rows.length,
+    children
+  });
+};
+exports.TablePaginationCompose = TablePaginationCompose;

package/dist/Table/components/TablePagination/components/Compose/Compose.d.ts

@@ -0,0 +1,3 @@
+import { ComposeChildrenProps } from '@redislabsdev/redis-ui-components';
+export type PaginationComposeProps = ComposeChildrenProps;
+export declare const TablePaginationCompose: ({ children }: PaginationComposeProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Table/components/TablePagination/components/Compose/Compose.js

@@ -0,0 +1,41 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Pagination } from "@redislabsdev/redis-ui-components";
+import { useEffect } from "react";
+import { useTableContext } from "../../../../Table.context.js";
+import { usePaginationContext } from "../../../../plugins/PaginationPlugin.js";
+const TablePaginationCompose = ({
+  children
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const pagination = usePaginationContext();
+  const paginationEnabled = !!pagination;
+  const {
+    pageIndex,
+    pageSize
+  } = table.getState().pagination;
+  const pageCount = Math.max(table.getPageCount(), 1);
+  useEffect(() => {
+    if (paginationEnabled) {
+      const fixedIndex = Math.min(pageIndex, pageCount - 1);
+      if (fixedIndex !== pageIndex) table.setPageIndex(fixedIndex);
+    }
+  }, [pageCount, pageIndex, table, paginationEnabled]);
+  if (!paginationEnabled) {
+    return null;
+  }
+  return jsxRuntimeExports.jsx(Pagination.Compose, {
+    onPageChange: table.setPageIndex,
+    pageIndex,
+    pageSize,
+    pageCount,
+    onPageSizeChange: table.setPageSize,
+    totalItemCount: table.getRowCount(),
+    visibleItemCount: table.getRowModel().rows.length,
+    children
+  });
+};
+export {
+  TablePaginationCompose
+};