@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/tables/DataTable/features/Pagination/Pagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Pagination/Pagination.tsx"],
-  "sourcesContent": ["import { functionalUpdate } from '@tanstack/react-table';\nimport {\n  type ReactElement,\n  type ReactNode,\n  type PropsWithChildren,\n  Children,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { getPaginationRowModel } from './pagination-row-model.js';\nimport type {\n  DataTablePaginationProps,\n  DataTablePaginationState,\n} from './pagination-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,\n  DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION,\n} from '../../constants.js';\nimport type {\n  Table,\n  TableFeature,\n  TableOptions,\n  Updater,\n} from '../../hooks/useTable/types.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\n\n/**\n * DataTable slot definition.\n * @public\n */\nexport function DataTablePagination(props: DataTablePaginationProps) {\n  return null;\n}\n\n/**\n * Helper function that will check if a passed component is of type `DataTablePagination`\n * @internal\n */\nexport function _isDataTablePagination(\n  child: ReactNode,\n): child is ReactElement<DataTablePaginationProps> {\n  return isElement(child) && child.type === DataTablePagination;\n}\n\n/**\n * Returns the default page size based on `defaultPageSize` being\n * passed as a prop, or the first option of `pageSizeOptions` array\n * if `defaultPageSize` is passed.\n * @internal\n * @defaultValue 100\n */\nfunction getDefaultPageSize(\n  pageSizeOptions?: number[],\n  defaultPageSize?: number,\n): number {\n  if (typeof defaultPageSize === 'number') {\n    return defaultPageSize;\n  }\n\n  if (Array.isArray(pageSizeOptions) && pageSizeOptions[0]) {\n    return pageSizeOptions[0];\n  }\n\n  return DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION;\n}\n\n/**\n * @internal\n */\nexport const DataTablePaginationFeature: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    table.setPagination = (updater, trigger) => {\n      const safeUpdater: Updater<DataTablePaginationState> = (old) => {\n        const newState: DataTablePaginationState = functionalUpdate(\n          updater,\n          old,\n        );\n\n        return newState;\n      };\n\n      return table.options.onPaginationChange?.(safeUpdater, trigger);\n    };\n\n    table.setPageIndex = (updater, trigger) => {\n      table.setPagination((old) => {\n        let pageIndex = functionalUpdate(updater, old.pageIndex);\n\n        const maxPageIndex =\n          typeof table.options.pageCount === 'undefined' ||\n          table.options.pageCount === -1\n            ? Number.MAX_SAFE_INTEGER\n            : table.options.pageCount - 1;\n\n        pageIndex = Math.max(0, Math.min(pageIndex, maxPageIndex));\n\n        return {\n          ...old,\n          pageIndex,\n        };\n      }, trigger);\n    };\n\n    table.resetPageIndex = (defaultState) => {\n      table.setPageIndex(\n        defaultState\n          ? DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX\n          : table.initialState?.pagination?.pageIndex ??\n              DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n        'internal',\n      );\n    };\n\n    table.getPrePaginationRowModel = () => table.getRowOrderRowModel();\n  },\n};\n\n/**\n * Configuration hook for pagination of the DataTable.\n * @internal\n */\nexport function usePagination<TData>(\n  props: PropsWithChildren,\n  options: TableOptions<TData>,\n): void {\n  const configPagination = useDataTableConfigElement('pagination');\n\n  const paginationElement = Children.toArray(props.children).find(\n    _isDataTablePagination,\n  );\n\n  // Init the paginationOptions to make sure they are a valid boolean.\n  options.enablePagination = false;\n\n  const paginationSizeOptions = paginationElement?.props.pageSizeOptions ?? [\n    ...DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,\n  ];\n\n  const defaultPaginationSizeOption = getDefaultPageSize(\n    paginationElement?.props.pageSizeOptions,\n    paginationElement?.props.defaultPageSize ??\n      configPagination?.defaultPageSize,\n  );\n\n  const [pageSize, setPageSize] = useControllableState({\n    value: paginationElement?.props.pageSize,\n    defaultValue: defaultPaginationSizeOption,\n    onChange: paginationElement?.props.onPageSizeChange,\n  });\n\n  const defaultPaginationIndexOption =\n    paginationElement?.props.defaultPageIndex ??\n    configPagination?.defaultPageIndex ??\n    DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX;\n\n  const [pageIndex, setPageIndex] = useControllableState({\n    value: paginationElement?.props.pageIndex,\n    defaultValue: defaultPaginationIndexOption,\n  });\n\n  if (!paginationElement) {\n    return;\n  }\n\n  options.enablePagination = true;\n  options.availablePaginationOptions = paginationSizeOptions;\n  options.controlledPageIndex = paginationElement.props.pageIndex !== undefined;\n\n  if (paginationElement.props.autoResetPageIndex === false) {\n    options.autoResetPageIndex = paginationElement.props.autoResetPageIndex;\n  }\n\n  // Server side pagination.\n  if (\n    paginationElement.props.enableNextPage !== undefined &&\n    paginationElement.props.enablePreviousPage !== undefined\n  ) {\n    options.manualPagination = true;\n    // Ensure pageCount is considered unknown to react table.\n    options.pageCount = -1;\n  } else {\n    options.manualPagination = false;\n    options.getPaginationRowModel = getPaginationRowModel();\n  }\n  options.state = {\n    ...options.state,\n    pagination: {\n      pageSize,\n      pageIndex,\n      enablePreviousPage: paginationElement.props.enablePreviousPage,\n      enableNextPage: paginationElement.props.enableNextPage,\n      totalRowsCount: paginationElement.props.totalRowsCount,\n    },\n  };\n\n  options.onPaginationChange = (\n    updater: Updater<DataTablePaginationState>,\n    trigger: 'user' | 'internal' = 'user',\n  ) => {\n    const nextState: DataTablePaginationState = functionalUpdate(\n      updater,\n      options.state?.pagination ?? {\n        pageSize,\n        pageIndex,\n      },\n    );\n\n    if (nextState?.pageSize !== pageSize && nextState?.pageSize !== undefined) {\n      setPageSize(nextState.pageSize);\n      // Reset page index once page size changes\n      setPageIndex(DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX);\n      paginationElement?.props.onPageIndexChange?.(\n        DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n        'internal',\n      );\n    } else if (\n      nextState?.pageIndex !== pageIndex &&\n      nextState?.pageIndex !== undefined\n    ) {\n      setPageIndex(nextState.pageIndex);\n      paginationElement?.props.onPageIndexChange?.(\n        nextState.pageIndex,\n        trigger,\n      );\n    }\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type RowModel,\n  assignTableAPIs,\n  functionalUpdate,\n  type RowData,\n  type Table_Internal,\n  type TableFeature,\n  type TableFeatures,\n  type Updater,\n} from '@tanstack/react-table';\n\nimport type {\n  DataTablePaginationState,\n  RowPaginationFeatureConstructors,\n} from './pagination-types.js';\nimport {\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION,\n  DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n} from '../../constants.js';\n\n/**\n * @internal\n */\nexport function table_getPrePaginatedRowModel<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {\n  return table.getRowOrderRowModel();\n}\n\n/**\n * Helper function to update the pagination state with the provided updater function or value.\n * @internal\n */\nexport function table_setPagination<\n  TFeatues extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatues, TData>,\n  updater: Updater<DataTablePaginationState>,\n  trigger?: 'user' | 'internal',\n) {\n  const safeUpdater: Updater<DataTablePaginationState> = (old) => {\n    const newState: DataTablePaginationState = functionalUpdate(updater, old);\n\n    return newState;\n  };\n\n  return table.options.onPaginationChange?.(safeUpdater, trigger);\n}\n\n/**\n * Helper function to update the page index with the provided updater function or value.\n * @internal\n */\nexport function table_setPageIndex<\n  TFeatues extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table_Internal<TFeatues, TData>,\n  updater: Updater<number>,\n  trigger?: 'user' | 'internal',\n) {\n  table_setPagination(\n    table,\n    (old) => {\n      let pageIndex = functionalUpdate(updater, old.pageIndex);\n\n      const maxPageIndex =\n        typeof table.options.pageCount === 'undefined' ||\n        table.options.pageCount === -1\n          ? Number.MAX_SAFE_INTEGER\n          : table.options.pageCount - 1;\n\n      pageIndex = Math.max(0, Math.min(pageIndex, maxPageIndex));\n\n      return {\n        ...old,\n        pageIndex,\n      };\n    },\n    trigger,\n  );\n}\n\n/**\n * Override of tanstack function in order to call the correct table_setPagination\n */\nexport function table_setPageSize<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(table: Table_Internal<TFeatures, TData>, updater: Updater<number>) {\n  table_setPagination(table, (old) => {\n    const pageSize = Math.max(1, functionalUpdate(updater, old.pageSize));\n    const topRowIndex = old.pageSize * old.pageIndex;\n    const pageIndex = Math.floor(topRowIndex / pageSize);\n\n    return {\n      ...old,\n      pageIndex,\n      pageSize,\n    };\n  });\n}\n\nexport function table_resetPageSize<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {\n  table_setPageSize(\n    table,\n    defaultState\n      ? DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION\n      : table.initialState.pagination?.pageSize ??\n          DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION,\n  );\n}\n\n/**\n * Override of tanstack function in order to call the correct table_setPageIndex\n * @internal\n */\nexport function table_autoResetPageIndex<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(table: Table_Internal<TFeatures, TData>) {\n  if (\n    table.options.autoResetAll ??\n    table.options.autoResetPageIndex ??\n    !table.options.manualPagination\n  ) {\n    table_resetPageIndex(table);\n  }\n}\n/**\n * Helper function to reset the page index to the default page index.\n * @internal\n */\nexport function table_resetPageIndex<\n  TFeatues extends TableFeatures,\n  TData extends RowData,\n>(table: Table_Internal<TFeatues, TData>, defaultState?: boolean) {\n  table_setPageIndex(\n    table,\n    defaultState\n      ? DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX\n      : table.initialState?.pagination?.pageIndex ??\n          DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n    'internal',\n  );\n}\n\n/**\n * Constructs the pagination feature for the table.\n * @internal\n */\nexport function constructRowPaginationFeature<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(): TableFeature<RowPaginationFeatureConstructors<TFeatures, TData>> {\n  return {\n    constructTableAPIs: (table) => {\n      assignTableAPIs('rowPaginationFeature', table, {\n        table_autoResetPageIndex: {\n          fn: () => table_autoResetPageIndex(table),\n        },\n        table_setPagination: {\n          fn: (\n            updater: Updater<DataTablePaginationState>,\n            trigger?: 'user' | 'internal',\n          ) => table_setPagination(table, updater, trigger),\n        },\n        table_setPageIndex: {\n          fn: (updater: Updater<number>, trigger?: 'user' | 'internal') =>\n            table_setPageIndex(table, updater, trigger),\n        },\n        table_setPageSize: {\n          fn: (updater) => table_setPageSize(table, updater),\n        },\n        table_resetPageIndex: {\n          fn: (defaultState?: boolean) =>\n            table_resetPageIndex(table, defaultState),\n        },\n        table_resetPageSize: {\n          fn: (defaultState) => table_resetPageSize(table, defaultState),\n        },\n        table_getPrePaginatedRowModel: {\n          fn: () => table_getPrePaginatedRowModel(table),\n        },\n      });\n    },\n  };\n}\n\n/**\n * Feature implementation for row pagination.\n * @internal\n */\nexport const DataTableRowPaginationFeature = constructRowPaginationFeature();\n"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAMK;AAMP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKA,SAAS,8BAGd,OAAqE;AACrE,SAAO,MAAM,oBAAoB;AACnC;AAMO,SAAS,oBAId,OACA,SACA,SACA;AACA,QAAM,cAAiD,CAAC,QAAQ;AAC9D,UAAM,WAAqC,iBAAiB,SAAS,GAAG;AAExE,WAAO;AAAA,EACT;AAEA,SAAO,MAAM,QAAQ,qBAAqB,aAAa,OAAO;AAChE;AAMO,SAAS,mBAId,OACA,SACA,SACA;AACA;AAAA,IACE;AAAA,IACA,CAAC,QAAQ;AACP,UAAI,YAAY,iBAAiB,SAAS,IAAI,SAAS;AAEvD,YAAM,eACJ,OAAO,MAAM,QAAQ,cAAc,eACnC,MAAM,QAAQ,cAAc,KACxB,OAAO,mBACP,MAAM,QAAQ,YAAY;AAEhC,kBAAY,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,YAAY,CAAC;AAEzD,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;AAKO,SAAS,kBAGd,OAAyC,SAA0B;AACnE,sBAAoB,OAAO,CAAC,QAAQ;AAClC,UAAM,WAAW,KAAK,IAAI,GAAG,iBAAiB,SAAS,IAAI,QAAQ,CAAC;AACpE,UAAM,cAAc,IAAI,WAAW,IAAI;AACvC,UAAM,YAAY,KAAK,MAAM,cAAc,QAAQ;AAEnD,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,oBAGd,OAAyC,cAAwB;AACjE;AAAA,IACE;AAAA,IACA,eACI,sCACA,MAAM,aAAa,YAAY,YAC7B;AAAA,EACR;AACF;AAMO,SAAS,yBAGd,OAAyC;AACzC,MACE,MAAM,QAAQ,gBACd,MAAM,QAAQ,sBACd,CAAC,MAAM,QAAQ,kBACf;AACA,yBAAqB,KAAK;AAAA,EAC5B;AACF;AAKO,SAAS,qBAGd,OAAwC,cAAwB;AAChE;AAAA,IACE;AAAA,IACA,eACI,2CACA,MAAM,cAAc,YAAY,aAC9B;AAAA,IACN;AAAA,EACF;AACF;AAMO,SAAS,gCAGsD;AACpE,SAAO;AAAA,IACL,oBAAoB,CAAC,UAAU;AAC7B,sBAAgB,wBAAwB,OAAO;AAAA,QAC7C,0BAA0B;AAAA,UACxB,IAAI,MAAM,yBAAyB,KAAK;AAAA,QAC1C;AAAA,QACA,qBAAqB;AAAA,UACnB,IAAI,CACF,SACA,YACG,oBAAoB,OAAO,SAAS,OAAO;AAAA,QAClD;AAAA,QACA,oBAAoB;AAAA,UAClB,IAAI,CAAC,SAA0B,YAC7B,mBAAmB,OAAO,SAAS,OAAO;AAAA,QAC9C;AAAA,QACA,mBAAmB;AAAA,UACjB,IAAI,CAAC,YAAY,kBAAkB,OAAO,OAAO;AAAA,QACnD;AAAA,QACA,sBAAsB;AAAA,UACpB,IAAI,CAAC,iBACH,qBAAqB,OAAO,YAAY;AAAA,QAC5C;AAAA,QACA,qBAAqB;AAAA,UACnB,IAAI,CAAC,iBAAiB,oBAAoB,OAAO,YAAY;AAAA,QAC/D;AAAA,QACA,+BAA+B;AAAA,UAC7B,IAAI,MAAM,8BAA8B,KAAK;AAAA,QAC/C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAMO,MAAM,gCAAgC,8BAA8B;",
   "names": []
 }

package/esm/tables/DataTable/features/Pagination/PaginationInternal.js

@@ -98,7 +98,7 @@ function DataTablePaginationInternal(props) {
   const table = useDataTable();
   const intl = useIntl();
   const pageSizeSelectId = useId();
-  const paginationState = table.getState().pagination;
+  const paginationState = table.atoms.pagination?.get();
   const pageSize = paginationState.pageSize;
   const onPageSizeChange = table.setPageSize;
   const pageSizeOptions = table.options.availablePaginationOptions ?? [];

package/esm/tables/DataTable/features/Pagination/PaginationInternal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Pagination/PaginationInternal.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { SelectSingleValue } from '../../../../forms/select/types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable internal pagination component that is actually rendering the pagination.\n * @internal\n */\ninterface DataTablePaginationInternalProps extends DataTestId, StylingProps {\n  /**\n   * The element's unique identifier.\n   *  @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n}\n\ninterface PaginationControlsProps {\n  /**\n   * Number of rows per page.\n   */\n  pageSize: number;\n  /**\n   *  Number that represents the number of available pages. Will be -1 for server-side pagination.\n   */\n  pageCount: number;\n  /**\n   * Current page index in a controlled scenario.\n   */\n  pageIndex: number;\n  /**\n   * Whether the \"Go to previous page\" button is disabled.\n   */\n  isPrevPageDisabled: boolean;\n  /**\n   * Whether the \"Go to next page\" button is disabled.\n   */\n  isNextPageDisabled: boolean;\n  /**\n   * Whether pagination is server-side controlled, derived from enablePreviousPage or enableNextPage pagination state flags\n   */\n  isServerSidePaginated: boolean;\n  /**\n   * Called when the page index changes. Provides the changed page index along with the underlying trigger.\n   */\n  onPageIndexChange: (pageIndex: number, trigger: 'user' | 'internal') => void;\n  /**\n   * The total number of rows.\n   * Will be used to determine the total number of pages to display the indicator \"Page X of Y\" for server-side pagination.\n   */\n  totalRowsCount?: number;\n}\n\n/**\n * Page Select and next/prev buttons\n */\nconst PaginationNavigation = ({\n  pageSize,\n  pageCount,\n  pageIndex,\n  isPrevPageDisabled,\n  isNextPageDisabled,\n  isServerSidePaginated,\n  totalRowsCount,\n  onPageIndexChange,\n}: PaginationControlsProps) => {\n  const pageIndexSelectId = useId();\n  const intl = useIntl();\n  const smallScreen = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n  const totalPages =\n    isServerSidePaginated && totalRowsCount !== undefined\n      ? Math.ceil(totalRowsCount / pageSize)\n      : pageCount;\n  // An array of zero-based index integers corresponding to available pages in the table\n  const pageCountArray: number[] = Array.from(\n    { length: totalPages },\n    (_, i) => i,\n  );\n  const hasMultiplePages = totalPages > 1;\n  const shouldShowPageInfo =\n    !isServerSidePaginated || (isServerSidePaginated && totalPages !== -1);\n\n  const totalPagesCountText = hasMultiplePages\n    ? intl.formatMessage(dataTableMessages.paginationTotalPages, { totalPages })\n    : intl.formatMessage(dataTableMessages.paginationSinglePageInfo);\n\n  const handlePageIndexSelect = (newPageIndex: SelectSingleValue<number>) =>\n    newPageIndex !== null && onPageIndexChange(newPageIndex, 'user');\n\n  const handlePreviousPage = () => {\n    const prevPageIndex = Math.max(0, pageIndex - 1);\n    onPageIndexChange(prevPageIndex, 'user');\n  };\n\n  const handleNextPage = () => onPageIndexChange(pageIndex + 1, 'user');\n\n  return (\n    <Flex gap={16} justifySelf=\"flex-end\">\n      {shouldShowPageInfo && (\n        <Flex flexWrap=\"nowrap\" alignItems=\"center\">\n          <Text as=\"p\">\n            {intl.formatMessage(dataTableMessages.paginationPageSelection)}\n          </Text>\n          {hasMultiplePages && (\n            <Select\n              id={pageIndexSelectId}\n              value={pageIndex}\n              onChange={handlePageIndexSelect}\n              aria-label={intl.formatMessage(dataTableMessages.selectPage)}\n              data-dt-name=\"PaginationPageIndex\"\n            >\n              <Select.Content>\n                {pageCountArray.length === 0 ? (\n                  <Select.Option key=\"pageIndex-0\" id={0} value={0}>\n                    {0}\n                  </Select.Option>\n                ) : (\n                  pageCountArray.map((pageIndexOption) => (\n                    <Select.Option\n                      key={`pageIndex-${pageIndexOption}`}\n                      id={pageIndexOption}\n                      value={pageIndexOption}\n                    >\n                      {pageIndexOption + 1}\n                    </Select.Option>\n                  ))\n                )}\n              </Select.Content>\n            </Select>\n          )}\n          {(!hasMultiplePages || !smallScreen) && (\n            <Text as=\"span\" textStyle=\"base\" style={{ whiteSpace: 'nowrap' }}>\n              {totalPagesCountText}\n            </Text>\n          )}\n        </Flex>\n      )}\n      {(!smallScreen || isServerSidePaginated) && (\n        <Flex gap={2}>\n          <Button\n            onClick={handlePreviousPage}\n            disabled={isPrevPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationPrevPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationPreviousPage\"\n          >\n            <Button.Prefix>\n              <ChevronLeftSmallIcon />\n            </Button.Prefix>\n          </Button>\n          <Button\n            onClick={handleNextPage}\n            disabled={isNextPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationNextPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationNextPage\"\n          >\n            <Button.Prefix>\n              <ChevronRightSmallIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\n/**\n * Internal component that actually renders the pagination.\n * @internal\n */\nexport function DataTablePaginationInternal(\n  props: Readonly<DataTablePaginationInternalProps>,\n): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n  const pageSizeSelectId = useId();\n  const paginationState = table.getState().pagination;\n  // Number of rows per page\n  const pageSize = paginationState.pageSize;\n  // handler that is called when the page size changes\n  const onPageSizeChange = table.setPageSize;\n  const pageSizeOptions = table.options.availablePaginationOptions ?? [];\n  // If there is only one entry in the pageSizeOptions, we do not render the select\n  const hasPageSizeOptions = pageSizeOptions.length > 1;\n  const { manualPagination } = table.options;\n  const { enablePreviousPage, enableNextPage } = paginationState;\n  const isServerSidePaginated =\n    enableNextPage !== undefined || enablePreviousPage !== undefined;\n  const isPrevPageDisabled = manualPagination\n    ? !enablePreviousPage\n    : !table.getCanPreviousPage();\n\n  const isNextPageDisabled = manualPagination\n    ? !enableNextPage\n    : !table.getCanNextPage();\n\n  const {\n    id,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Flex\n      id={id}\n      data-testid={dataTestId}\n      className={consumerClassName}\n      style={consumerStyle}\n      justifyContent={hasPageSizeOptions ? 'space-between' : 'flex-end'}\n      paddingTop={8}\n      role=\"navigation\"\n      flexWrap=\"wrap\"\n      {...remainingProps}\n    >\n      {hasPageSizeOptions && (\n        <Flex alignItems=\"center\">\n          <Select\n            id={pageSizeSelectId}\n            value={pageSize}\n            required\n            onChange={(newPageSize) =>\n              newPageSize !== null && onPageSizeChange?.(newPageSize)\n            }\n            aria-label={intl.formatMessage(dataTableMessages.selectPageSize)}\n            data-dt-name=\"PaginationPageSize\"\n          >\n            <Select.Content>\n              {pageSizeOptions.map((pageSize) => (\n                <Select.Option\n                  key={`${pageSize}`}\n                  id={pageSize}\n                  value={pageSize}\n                >\n                  {`${pageSize}`}\n                </Select.Option>\n              ))}\n            </Select.Content>\n          </Select>\n          <Text as=\"span\" style={{ whiteSpace: 'nowrap' }}>\n            {intl.formatMessage(dataTableMessages.paginationRowsPerPage)}\n          </Text>\n        </Flex>\n      )}\n\n      <PaginationNavigation\n        pageSize={pageSize}\n        pageCount={table.getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        isPrevPageDisabled={isPrevPageDisabled}\n        isNextPageDisabled={isNextPageDisabled}\n        isServerSidePaginated={isServerSidePaginated}\n        totalRowsCount={paginationState.totalRowsCount}\n        onPageIndexChange={table.setPageIndex}\n      />\n    </Flex>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { SelectSingleValue } from '../../../../forms/select/types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable internal pagination component that is actually rendering the pagination.\n * @internal\n */\ninterface DataTablePaginationInternalProps extends DataTestId, StylingProps {\n  /**\n   * The element's unique identifier.\n   *  @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n}\n\ninterface PaginationControlsProps {\n  /**\n   * Number of rows per page.\n   */\n  pageSize: number;\n  /**\n   *  Number that represents the number of available pages. Will be -1 for server-side pagination.\n   */\n  pageCount: number;\n  /**\n   * Current page index in a controlled scenario.\n   */\n  pageIndex: number;\n  /**\n   * Whether the \"Go to previous page\" button is disabled.\n   */\n  isPrevPageDisabled: boolean;\n  /**\n   * Whether the \"Go to next page\" button is disabled.\n   */\n  isNextPageDisabled: boolean;\n  /**\n   * Whether pagination is server-side controlled, derived from enablePreviousPage or enableNextPage pagination state flags\n   */\n  isServerSidePaginated: boolean;\n  /**\n   * Called when the page index changes. Provides the changed page index along with the underlying trigger.\n   */\n  onPageIndexChange: (pageIndex: number, trigger: 'user' | 'internal') => void;\n  /**\n   * The total number of rows.\n   * Will be used to determine the total number of pages to display the indicator \"Page X of Y\" for server-side pagination.\n   */\n  totalRowsCount?: number;\n}\n\n/**\n * Page Select and next/prev buttons\n */\nconst PaginationNavigation = ({\n  pageSize,\n  pageCount,\n  pageIndex,\n  isPrevPageDisabled,\n  isNextPageDisabled,\n  isServerSidePaginated,\n  totalRowsCount,\n  onPageIndexChange,\n}: PaginationControlsProps) => {\n  const pageIndexSelectId = useId();\n  const intl = useIntl();\n  const smallScreen = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n  const totalPages =\n    isServerSidePaginated && totalRowsCount !== undefined\n      ? Math.ceil(totalRowsCount / pageSize)\n      : pageCount;\n  // An array of zero-based index integers corresponding to available pages in the table\n  const pageCountArray: number[] = Array.from(\n    { length: totalPages },\n    (_, i) => i,\n  );\n  const hasMultiplePages = totalPages > 1;\n  const shouldShowPageInfo =\n    !isServerSidePaginated || (isServerSidePaginated && totalPages !== -1);\n\n  const totalPagesCountText = hasMultiplePages\n    ? intl.formatMessage(dataTableMessages.paginationTotalPages, { totalPages })\n    : intl.formatMessage(dataTableMessages.paginationSinglePageInfo);\n\n  const handlePageIndexSelect = (newPageIndex: SelectSingleValue<number>) =>\n    newPageIndex !== null && onPageIndexChange(newPageIndex, 'user');\n\n  const handlePreviousPage = () => {\n    const prevPageIndex = Math.max(0, pageIndex - 1);\n    onPageIndexChange(prevPageIndex, 'user');\n  };\n\n  const handleNextPage = () => onPageIndexChange(pageIndex + 1, 'user');\n\n  return (\n    <Flex gap={16} justifySelf=\"flex-end\">\n      {shouldShowPageInfo && (\n        <Flex flexWrap=\"nowrap\" alignItems=\"center\">\n          <Text as=\"p\">\n            {intl.formatMessage(dataTableMessages.paginationPageSelection)}\n          </Text>\n          {hasMultiplePages && (\n            <Select\n              id={pageIndexSelectId}\n              value={pageIndex}\n              onChange={handlePageIndexSelect}\n              aria-label={intl.formatMessage(dataTableMessages.selectPage)}\n              data-dt-name=\"PaginationPageIndex\"\n            >\n              <Select.Content>\n                {pageCountArray.length === 0 ? (\n                  <Select.Option key=\"pageIndex-0\" id={0} value={0}>\n                    {0}\n                  </Select.Option>\n                ) : (\n                  pageCountArray.map((pageIndexOption) => (\n                    <Select.Option\n                      key={`pageIndex-${pageIndexOption}`}\n                      id={pageIndexOption}\n                      value={pageIndexOption}\n                    >\n                      {pageIndexOption + 1}\n                    </Select.Option>\n                  ))\n                )}\n              </Select.Content>\n            </Select>\n          )}\n          {(!hasMultiplePages || !smallScreen) && (\n            <Text as=\"span\" textStyle=\"base\" style={{ whiteSpace: 'nowrap' }}>\n              {totalPagesCountText}\n            </Text>\n          )}\n        </Flex>\n      )}\n      {(!smallScreen || isServerSidePaginated) && (\n        <Flex gap={2}>\n          <Button\n            onClick={handlePreviousPage}\n            disabled={isPrevPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationPrevPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationPreviousPage\"\n          >\n            <Button.Prefix>\n              <ChevronLeftSmallIcon />\n            </Button.Prefix>\n          </Button>\n          <Button\n            onClick={handleNextPage}\n            disabled={isNextPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationNextPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationNextPage\"\n          >\n            <Button.Prefix>\n              <ChevronRightSmallIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\n/**\n * Internal component that actually renders the pagination.\n * @internal\n */\nexport function DataTablePaginationInternal(\n  props: Readonly<DataTablePaginationInternalProps>,\n): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n  const pageSizeSelectId = useId();\n  const paginationState = table.atoms.pagination?.get();\n  // Number of rows per page\n  const pageSize = paginationState.pageSize;\n  // handler that is called when the page size changes\n  const onPageSizeChange = table.setPageSize;\n  const pageSizeOptions = table.options.availablePaginationOptions ?? [];\n  // If there is only one entry in the pageSizeOptions, we do not render the select\n  const hasPageSizeOptions = pageSizeOptions.length > 1;\n  const { manualPagination } = table.options;\n  const { enablePreviousPage, enableNextPage } = paginationState;\n  const isServerSidePaginated =\n    enableNextPage !== undefined || enablePreviousPage !== undefined;\n  const isPrevPageDisabled = manualPagination\n    ? !enablePreviousPage\n    : !table.getCanPreviousPage();\n\n  const isNextPageDisabled = manualPagination\n    ? !enableNextPage\n    : !table.getCanNextPage();\n\n  const {\n    id,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Flex\n      id={id}\n      data-testid={dataTestId}\n      className={consumerClassName}\n      style={consumerStyle}\n      justifyContent={hasPageSizeOptions ? 'space-between' : 'flex-end'}\n      paddingTop={8}\n      role=\"navigation\"\n      flexWrap=\"wrap\"\n      {...remainingProps}\n    >\n      {hasPageSizeOptions && (\n        <Flex alignItems=\"center\">\n          <Select\n            id={pageSizeSelectId}\n            value={pageSize}\n            required\n            onChange={(newPageSize) =>\n              newPageSize !== null && onPageSizeChange?.(newPageSize)\n            }\n            aria-label={intl.formatMessage(dataTableMessages.selectPageSize)}\n            data-dt-name=\"PaginationPageSize\"\n          >\n            <Select.Content>\n              {pageSizeOptions.map((pageSize) => (\n                <Select.Option\n                  key={`${pageSize}`}\n                  id={pageSize}\n                  value={pageSize}\n                >\n                  {`${pageSize}`}\n                </Select.Option>\n              ))}\n            </Select.Content>\n          </Select>\n          <Text as=\"span\" style={{ whiteSpace: 'nowrap' }}>\n            {intl.formatMessage(dataTableMessages.paginationRowsPerPage)}\n          </Text>\n        </Flex>\n      )}\n\n      <PaginationNavigation\n        pageSize={pageSize}\n        pageCount={table.getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        isPrevPageDisabled={isPrevPageDisabled}\n        isNextPageDisabled={isNextPageDisabled}\n        isServerSidePaginated={isServerSidePaginated}\n        totalRowsCount={paginationState.totalRowsCount}\n        onPageIndexChange={table.setPageIndex}\n      />\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAmHQ,SACE,KADF;AAlHR,SAAS,eAAe;AAExB,OAAO,iBAAiB;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,aAAa;AAGtB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAqDlC,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,oBAAoB,MAAM;AAChC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,cAAc,eAAe,YAAY,IAAI,MAAM,KAAK;AAC5E,QAAM,aACJ,yBAAyB,mBAAmB,SACxC,KAAK,KAAK,iBAAiB,QAAQ,IACnC;AAEN,QAAM,iBAA2B,MAAM;AAAA,IACrC,EAAE,QAAQ,WAAW;AAAA,IACrB,CAAC,GAAG,MAAM;AAAA,EACZ;AACA,QAAM,mBAAmB,aAAa;AACtC,QAAM,qBACJ,CAAC,yBAA0B,yBAAyB,eAAe;AAErE,QAAM,sBAAsB,mBACxB,KAAK,cAAc,kBAAkB,sBAAsB,EAAE,WAAW,CAAC,IACzE,KAAK,cAAc,kBAAkB,wBAAwB;AAEjE,QAAM,wBAAwB,CAAC,iBAC7B,iBAAiB,QAAQ,kBAAkB,cAAc,MAAM;AAEjE,QAAM,qBAAqB,MAAM;AAC/B,UAAM,gBAAgB,KAAK,IAAI,GAAG,YAAY,CAAC;AAC/C,sBAAkB,eAAe,MAAM;AAAA,EACzC;AAEA,QAAM,iBAAiB,MAAM,kBAAkB,YAAY,GAAG,MAAM;AAEpE,SACE,qBAAC,QAAK,KAAK,IAAI,aAAY,YACxB;AAAA,0BACC,qBAAC,QAAK,UAAS,UAAS,YAAW,UACjC;AAAA,0BAAC,QAAK,IAAG,KACN,eAAK,cAAc,kBAAkB,uBAAuB,GAC/D;AAAA,MACC,oBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU;AAAA,UACV,cAAY,KAAK,cAAc,kBAAkB,UAAU;AAAA,UAC3D,gBAAa;AAAA,UAEb,8BAAC,OAAO,SAAP,EACE,yBAAe,WAAW,IACzB,oBAAC,OAAO,QAAP,EAAgC,IAAI,GAAG,OAAO,GAC5C,eADgB,aAEnB,IAEA,eAAe,IAAI,CAAC,oBAClB;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cAEC,IAAI;AAAA,cACJ,OAAO;AAAA,cAEN,4BAAkB;AAAA;AAAA,YAJd,aAAa,eAAe;AAAA,UAKnC,CACD,GAEL;AAAA;AAAA,MACF;AAAA,OAEA,CAAC,oBAAoB,CAAC,gBACtB,oBAAC,QAAK,IAAG,QAAO,WAAU,QAAO,OAAO,EAAE,YAAY,SAAS,GAC5D,+BACH;AAAA,OAEJ;AAAA,KAEA,CAAC,eAAe,0BAChB,qBAAC,QAAK,KAAK,GACT;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAY,KAAK;AAAA,YACf,kBAAkB;AAAA,UACpB;AAAA,UACA,SAAQ;AAAA,UACR,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAY,KAAK;AAAA,YACf,kBAAkB;AAAA,UACpB;AAAA,UACA,SAAQ;AAAA,UACR,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,GACzB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KAEJ;AAEJ;AAMO,SAAS,4BACd,OACa;AACb,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,MAAM;AAC/B,QAAM,kBAAkB,MAAM,MAAM,YAAY,IAAI;AAEpD,QAAM,WAAW,gBAAgB;AAEjC,QAAM,mBAAmB,MAAM;AAC/B,QAAM,kBAAkB,MAAM,QAAQ,8BAA8B,CAAC;AAErE,QAAM,qBAAqB,gBAAgB,SAAS;AACpD,QAAM,EAAE,iBAAiB,IAAI,MAAM;AACnC,QAAM,EAAE,oBAAoB,eAAe,IAAI;AAC/C,QAAM,wBACJ,mBAAmB,UAAa,uBAAuB;AACzD,QAAM,qBAAqB,mBACvB,CAAC,qBACD,CAAC,MAAM,mBAAmB;AAE9B,QAAM,qBAAqB,mBACvB,CAAC,iBACD,CAAC,MAAM,eAAe;AAE1B,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,gBAAgB,qBAAqB,kBAAkB;AAAA,MACvD,YAAY;AAAA,MACZ,MAAK;AAAA,MACL,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,8BACC,qBAAC,QAAK,YAAW,UACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,OAAO;AAAA,cACP,UAAQ;AAAA,cACR,UAAU,CAAC,gBACT,gBAAgB,QAAQ,mBAAmB,WAAW;AAAA,cAExD,cAAY,KAAK,cAAc,kBAAkB,cAAc;AAAA,cAC/D,gBAAa;AAAA,cAEb,8BAAC,OAAO,SAAP,EACE,0BAAgB,IAAI,CAACA,cACpB;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBAEC,IAAIA;AAAA,kBACJ,OAAOA;AAAA,kBAEN,aAAGA,SAAQ;AAAA;AAAA,gBAJP,GAAGA,SAAQ;AAAA,cAKlB,CACD,GACH;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,QAAK,IAAG,QAAO,OAAO,EAAE,YAAY,SAAS,GAC3C,eAAK,cAAc,kBAAkB,qBAAqB,GAC7D;AAAA,WACF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,MAAM,aAAa;AAAA,YAC9B,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAgB,gBAAgB;AAAA,YAChC,mBAAmB,MAAM;AAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["pageSize"]
 }

package/esm/tables/DataTable/features/Pagination/pagination-row-model.js

@@ -1,44 +1,53 @@
-import { getMemoOptions } from "../../hooks/useTable/utils.js";
-import { memo } from "../../tanstack-table-core-override/src/index.js";
-function getPaginationRowModel() {
-  return (table) => memo(
-    () => [
-      table.getState().pagination,
-      table.getPrePaginationRowModel(),
-      table.options.paginateExpandedRows ? void 0 : table.getState().expanded
-    ],
-    (pagination, rowModel) => {
-      if (!rowModel.rows.length || table.options.enablePagination !== true) {
-        return rowModel;
-      }
-      const { pageSize, pageIndex } = pagination;
-      const { rowsById } = rowModel;
-      const pageStart = pageSize * pageIndex;
-      const pageEnd = pageStart + pageSize;
-      const rows = rowModel.rows.slice(pageStart, pageEnd);
-      const paginatedRowModel = {
-        rows,
-        flatRows: [],
-        rowsById
-      };
-      const addedFlatRowsSet = /* @__PURE__ */ new Set();
-      const handleRow = (row) => {
-        if (addedFlatRowsSet.has(row.id)) {
-          return;
-        }
-        paginatedRowModel.flatRows.push(row);
-        addedFlatRowsSet.add(row.id);
-        if (row.subRows.length) {
-          row.subRows.forEach(handleRow);
-        }
-      };
-      paginatedRowModel.rows.forEach(handleRow);
-      return paginatedRowModel;
-    },
-    getMemoOptions(table.options, "debugTable", "getPaginationRowModel")
-  );
+import {
+  tableMemo
+} from "@tanstack/react-table";
+function createPaginatedRowModel() {
+  return (_table) => {
+    const table = _table;
+    return tableMemo({
+      feature: "rowPaginationFeature",
+      table,
+      fnName: "table.getPaginatedRowModel",
+      memoDeps: () => [
+        table.getPrePaginatedRowModel(),
+        table.atoms.pagination?.get(),
+        table.options.paginateExpandedRows ? table.atoms.expanded?.get() : void 0
+      ],
+      fn: () => _createPaginatedRowModel(table)
+    });
+  };
+}
+function _createPaginatedRowModel(table) {
+  const prePaginatedRowModel = table.getPrePaginatedRowModel();
+  const pagination = table.atoms.pagination?.get();
+  if (!prePaginatedRowModel.rows.length || table.options.enablePagination !== true) {
+    return prePaginatedRowModel;
+  }
+  const { pageSize, pageIndex } = pagination;
+  const { rowsById } = prePaginatedRowModel;
+  const pageStart = pageSize * pageIndex;
+  const pageEnd = pageStart + pageSize;
+  const rows = prePaginatedRowModel.rows.slice(pageStart, pageEnd);
+  const paginatedRowModel = {
+    rows,
+    flatRows: [],
+    rowsById
+  };
+  const addedFlatRowsSet = /* @__PURE__ */ new Set();
+  const handleRow = (row) => {
+    if (addedFlatRowsSet.has(row.id)) {
+      return;
+    }
+    paginatedRowModel.flatRows.push(row);
+    addedFlatRowsSet.add(row.id);
+    if (row.subRows.length) {
+      row.subRows.forEach(handleRow);
+    }
+  };
+  paginatedRowModel.rows.forEach(handleRow);
+  return paginatedRowModel;
 }
 export {
-  getPaginationRowModel
+  createPaginatedRowModel
 };
 //# sourceMappingURL=pagination-row-model.js.map

package/esm/tables/DataTable/features/Pagination/pagination-row-model.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Pagination/pagination-row-model.ts"],
-  "sourcesContent": ["import type {\n  Row,\n  RowData,\n  RowModel,\n  Table,\n} from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Creates a custom pagination row model.\n *\n * @returns A function that takes a table instance and returns a memoed function to get the paginated row model.\n */\nexport function getPaginationRowModel<TData extends RowData>(): (\n  table: Table<TData>,\n) => () => RowModel<TData> {\n  return (table) =>\n    memo(\n      () => [\n        table.getState().pagination,\n        table.getPrePaginationRowModel(),\n        table.options.paginateExpandedRows\n          ? undefined\n          : table.getState().expanded,\n      ],\n      (pagination, rowModel) => {\n        if (!rowModel.rows.length || table.options.enablePagination !== true) {\n          return rowModel;\n        }\n\n        const { pageSize, pageIndex } = pagination;\n        const { rowsById } = rowModel;\n        const pageStart = pageSize * pageIndex;\n        const pageEnd = pageStart + pageSize;\n\n        const rows = rowModel.rows.slice(pageStart, pageEnd);\n\n        const paginatedRowModel: RowModel<TData> = {\n          rows,\n          flatRows: [],\n          rowsById,\n        };\n\n        // keep track of the already added flatRows, to avoid duplication of already expanded sub-rows\n        const addedFlatRowsSet = new Set();\n\n        const handleRow = (row: Row<TData>) => {\n          if (addedFlatRowsSet.has(row.id)) {\n            return;\n          }\n\n          paginatedRowModel.flatRows.push(row);\n          addedFlatRowsSet.add(row.id);\n\n          if (row.subRows.length) {\n            row.subRows.forEach(handleRow);\n          }\n        };\n\n        paginatedRowModel.rows.forEach(handleRow);\n\n        return paginatedRowModel;\n      },\n      getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel'),\n    );\n}\n"],
-  "mappings": "AAMA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAOd,SAAS,wBAEW;AACzB,SAAO,CAAC,UACN;AAAA,IACE,MAAM;AAAA,MACJ,MAAM,SAAS,EAAE;AAAA,MACjB,MAAM,yBAAyB;AAAA,MAC/B,MAAM,QAAQ,uBACV,SACA,MAAM,SAAS,EAAE;AAAA,IACvB;AAAA,IACA,CAAC,YAAY,aAAa;AACxB,UAAI,CAAC,SAAS,KAAK,UAAU,MAAM,QAAQ,qBAAqB,MAAM;AACpE,eAAO;AAAA,MACT;AAEA,YAAM,EAAE,UAAU,UAAU,IAAI;AAChC,YAAM,EAAE,SAAS,IAAI;AACrB,YAAM,YAAY,WAAW;AAC7B,YAAM,UAAU,YAAY;AAE5B,YAAM,OAAO,SAAS,KAAK,MAAM,WAAW,OAAO;AAEnD,YAAM,oBAAqC;AAAA,QACzC;AAAA,QACA,UAAU,CAAC;AAAA,QACX;AAAA,MACF;AAGA,YAAM,mBAAmB,oBAAI,IAAI;AAEjC,YAAM,YAAY,CAAC,QAAoB;AACrC,YAAI,iBAAiB,IAAI,IAAI,EAAE,GAAG;AAChC;AAAA,QACF;AAEA,0BAAkB,SAAS,KAAK,GAAG;AACnC,yBAAiB,IAAI,IAAI,EAAE;AAE3B,YAAI,IAAI,QAAQ,QAAQ;AACtB,cAAI,QAAQ,QAAQ,SAAS;AAAA,QAC/B;AAAA,MACF;AAEA,wBAAkB,KAAK,QAAQ,SAAS;AAExC,aAAO;AAAA,IACT;AAAA,IACA,eAAe,MAAM,SAAS,cAAc,uBAAuB;AAAA,EACrE;AACJ;",
+  "sourcesContent": ["import {\n  tableMemo,\n  type Row,\n  type RowData,\n  type RowModel,\n  type Table,\n  type Table_Internal,\n  type TableFeatures,\n} from '@tanstack/react-table';\n\n/**\n * Creates a custom pagination row model.\n *\n * @returns A function that takes a table instance and returns a memoed function to get the paginated row model.\n */\nexport function createPaginatedRowModel<\n  TFeatures extends TableFeatures,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends RowData = any,\n>(): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {\n  return (_table) => {\n    const table = _table as Table_Internal<TFeatures, TData>;\n    return tableMemo({\n      feature: 'rowPaginationFeature',\n      table,\n      fnName: 'table.getPaginatedRowModel',\n      memoDeps: () => [\n        table.getPrePaginatedRowModel(),\n        table.atoms.pagination?.get(),\n        table.options.paginateExpandedRows\n          ? table.atoms.expanded?.get()\n          : undefined,\n      ],\n      fn: () => _createPaginatedRowModel(table),\n    });\n  };\n}\n\n/**\n * Creates a custom pagination row model.\n */\nfunction _createPaginatedRowModel<\n  TFeatures extends TableFeatures,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends RowData = any,\n>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {\n  const prePaginatedRowModel = table.getPrePaginatedRowModel();\n  const pagination = table.atoms.pagination?.get();\n\n  if (\n    !prePaginatedRowModel.rows.length ||\n    table.options.enablePagination !== true\n  ) {\n    return prePaginatedRowModel;\n  }\n\n  const { pageSize, pageIndex } = pagination;\n  const { rowsById } = prePaginatedRowModel;\n  const pageStart = pageSize * pageIndex;\n  const pageEnd = pageStart + pageSize;\n\n  const rows = prePaginatedRowModel.rows.slice(pageStart, pageEnd);\n\n  const paginatedRowModel: RowModel<TFeatures, TData> = {\n    rows,\n    flatRows: [],\n    rowsById,\n  };\n\n  // keep track of the already added flatRows, to avoid duplication of already expanded sub-rows\n  const addedFlatRowsSet = new Set();\n\n  const handleRow = (row: Row<TFeatures, TData>) => {\n    if (addedFlatRowsSet.has(row.id)) {\n      return;\n    }\n\n    paginatedRowModel.flatRows.push(row);\n    addedFlatRowsSet.add(row.id);\n\n    if (row.subRows.length) {\n      row.subRows.forEach(handleRow);\n    }\n  };\n\n  paginatedRowModel.rows.forEach(handleRow);\n\n  return paginatedRowModel;\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAOK;AAOA,SAAS,0BAI0D;AACxE,SAAO,CAAC,WAAW;AACjB,UAAM,QAAQ;AACd,WAAO,UAAU;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR,UAAU,MAAM;AAAA,QACd,MAAM,wBAAwB;AAAA,QAC9B,MAAM,MAAM,YAAY,IAAI;AAAA,QAC5B,MAAM,QAAQ,uBACV,MAAM,MAAM,UAAU,IAAI,IAC1B;AAAA,MACN;AAAA,MACA,IAAI,MAAM,yBAAyB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACF;AAKA,SAAS,yBAIP,OAAqE;AACrE,QAAM,uBAAuB,MAAM,wBAAwB;AAC3D,QAAM,aAAa,MAAM,MAAM,YAAY,IAAI;AAE/C,MACE,CAAC,qBAAqB,KAAK,UAC3B,MAAM,QAAQ,qBAAqB,MACnC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,YAAY,WAAW;AAC7B,QAAM,UAAU,YAAY;AAE5B,QAAM,OAAO,qBAAqB,KAAK,MAAM,WAAW,OAAO;AAE/D,QAAM,oBAAgD;AAAA,IACpD;AAAA,IACA,UAAU,CAAC;AAAA,IACX;AAAA,EACF;AAGA,QAAM,mBAAmB,oBAAI,IAAI;AAEjC,QAAM,YAAY,CAAC,QAA+B;AAChD,QAAI,iBAAiB,IAAI,IAAI,EAAE,GAAG;AAChC;AAAA,IACF;AAEA,sBAAkB,SAAS,KAAK,GAAG;AACnC,qBAAiB,IAAI,IAAI,EAAE;AAE3B,QAAI,IAAI,QAAQ,QAAQ;AACtB,UAAI,QAAQ,QAAQ,SAAS;AAAA,IAC/B;AAAA,EACF;AAEA,oBAAkB,KAAK,QAAQ,SAAS;AAExC,SAAO;AACT;",
   "names": []
 }

package/esm/tables/DataTable/features/Pagination/usePagination.js

@@ -0,0 +1,117 @@
+import {
+  functionalUpdate
+} from "@tanstack/react-table";
+import {
+  Children,
+  useCallback,
+  useMemo
+} from "react";
+import { isElement } from "react-is";
+import { useControllableState } from "../../../../core/hooks/useControllableState.js";
+import { useDataTableConfigElement } from "../../../hooks/useDataTableConfig.js";
+import {
+  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION,
+  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,
+  DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX
+} from "../../constants.js";
+function getDefaultPageSize(pageSizeOptions, defaultPageSize) {
+  if (typeof defaultPageSize === "number") {
+    return defaultPageSize;
+  }
+  if (Array.isArray(pageSizeOptions) && pageSizeOptions[0]) {
+    return pageSizeOptions[0];
+  }
+  return DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION;
+}
+function DataTablePagination(props) {
+  return null;
+}
+function _isDataTablePagination(child) {
+  return isElement(child) && child.type === DataTablePagination;
+}
+function usePagination(props, options) {
+  const configPagination = useDataTableConfigElement("pagination");
+  const paginationElement = Children.toArray(props.children).find(
+    _isDataTablePagination
+  );
+  options.enablePagination = false;
+  const paginationSizeOptions = paginationElement?.props.pageSizeOptions ?? DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS;
+  const defaultPaginationSizeOption = getDefaultPageSize(
+    paginationElement?.props.pageSizeOptions,
+    paginationElement?.props.defaultPageSize ?? configPagination?.defaultPageSize
+  );
+  const [pageSize, setPageSize] = useControllableState({
+    value: paginationElement?.props.pageSize,
+    defaultValue: defaultPaginationSizeOption,
+    onChange: paginationElement?.props.onPageSizeChange
+  });
+  const defaultPaginationIndexOption = paginationElement?.props.defaultPageIndex ?? configPagination?.defaultPageIndex ?? DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX;
+  const [pageIndex, setPageIndex] = useControllableState({
+    value: paginationElement?.props.pageIndex,
+    defaultValue: defaultPaginationIndexOption
+  });
+  const paginationState = useMemo(() => {
+    return {
+      pageSize,
+      pageIndex,
+      enablePreviousPage: paginationElement?.props.enablePreviousPage,
+      enableNextPage: paginationElement?.props.enableNextPage,
+      totalRowsCount: paginationElement?.props.totalRowsCount
+    };
+  }, [
+    pageSize,
+    pageIndex,
+    paginationElement?.props.enablePreviousPage,
+    paginationElement?.props.enableNextPage,
+    paginationElement?.props.totalRowsCount
+  ]);
+  const onPaginationChangeCallback = useCallback(
+    (updater, trigger = "user") => {
+      const nextState = functionalUpdate(updater, {
+        pageSize,
+        pageIndex
+      });
+      if (nextState?.pageSize !== pageSize && nextState?.pageSize !== void 0) {
+        setPageSize(nextState.pageSize);
+        setPageIndex(DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX);
+        paginationElement?.props.onPageIndexChange?.(
+          DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,
+          "internal"
+        );
+      } else if (nextState?.pageIndex !== pageIndex && nextState?.pageIndex !== void 0) {
+        setPageIndex(nextState.pageIndex);
+        paginationElement?.props.onPageIndexChange?.(
+          nextState.pageIndex,
+          trigger
+        );
+      }
+    },
+    [setPageSize, setPageIndex, pageSize, pageIndex, paginationElement]
+  );
+  if (!paginationElement) {
+    return;
+  }
+  options.enablePagination = true;
+  options.availablePaginationOptions = paginationSizeOptions;
+  options.controlledPageIndex = paginationElement.props.pageIndex !== void 0;
+  if (paginationElement.props.autoResetPageIndex === false) {
+    options.autoResetPageIndex = paginationElement.props.autoResetPageIndex;
+  }
+  if (paginationElement.props.enableNextPage !== void 0 && paginationElement.props.enablePreviousPage !== void 0) {
+    options.manualPagination = true;
+    options.pageCount = -1;
+  } else {
+    options.manualPagination = false;
+  }
+  options.state = {
+    ...options.state,
+    pagination: paginationState
+  };
+  options.onPaginationChange = onPaginationChangeCallback;
+}
+export {
+  DataTablePagination,
+  _isDataTablePagination,
+  usePagination
+};
+//# sourceMappingURL=usePagination.js.map

package/esm/tables/DataTable/features/Pagination/usePagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/Pagination/usePagination.ts"],
+  "sourcesContent": ["import {\n  functionalUpdate,\n  type TableOptions,\n  type Updater,\n} from '@tanstack/react-table';\nimport {\n  Children,\n  useCallback,\n  useMemo,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type {\n  DataTablePaginationProps,\n  DataTablePaginationState,\n} from './pagination-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION,\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,\n  DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n} from '../../constants.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * Returns the default page size based on `defaultPageSize` being\n * passed as a prop, or the first option of `pageSizeOptions` array\n * if `defaultPageSize` is passed.\n * @internal\n * @defaultValue 100\n */\nfunction getDefaultPageSize(\n  pageSizeOptions?: number[],\n  defaultPageSize?: number,\n): number {\n  if (typeof defaultPageSize === 'number') {\n    return defaultPageSize;\n  }\n\n  if (Array.isArray(pageSizeOptions) && pageSizeOptions[0]) {\n    return pageSizeOptions[0];\n  }\n\n  return DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION;\n}\n\n/**\n * DataTable slot definition.\n * @public\n */\nexport function DataTablePagination(props: DataTablePaginationProps) {\n  return null;\n}\n\n/**\n * Helper function that will check if a passed component is of type `DataTablePagination`\n * @internal\n */\nexport function _isDataTablePagination(\n  child: ReactNode,\n): child is ReactElement<DataTablePaginationProps> {\n  return isElement(child) && child.type === DataTablePagination;\n}\n\n/**\n * Configuration hook for pagination of the DataTable.\n * @internal\n */\nexport function usePagination<TData extends DataTableRowData>(\n  props: PropsWithChildren,\n  options: TableOptions<TDataTableFeatures, Exclude<TData, unknown>>,\n): void {\n  const configPagination = useDataTableConfigElement('pagination');\n\n  const paginationElement = Children.toArray(props.children).find(\n    _isDataTablePagination,\n  );\n\n  // Init the paginationOptions to make sure they are a valid boolean.\n  // eslint-disable-next-line react-hooks/immutability\n  options.enablePagination = false;\n\n  const paginationSizeOptions: readonly number[] =\n    paginationElement?.props.pageSizeOptions ??\n    DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS;\n\n  const defaultPaginationSizeOption = getDefaultPageSize(\n    paginationElement?.props.pageSizeOptions,\n    paginationElement?.props.defaultPageSize ??\n      configPagination?.defaultPageSize,\n  );\n\n  const [pageSize, setPageSize] = useControllableState({\n    value: paginationElement?.props.pageSize,\n    defaultValue: defaultPaginationSizeOption,\n    onChange: paginationElement?.props.onPageSizeChange,\n  });\n\n  const defaultPaginationIndexOption =\n    paginationElement?.props.defaultPageIndex ??\n    configPagination?.defaultPageIndex ??\n    DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX;\n\n  const [pageIndex, setPageIndex] = useControllableState({\n    value: paginationElement?.props.pageIndex,\n    defaultValue: defaultPaginationIndexOption,\n  });\n\n  const paginationState = useMemo<DataTablePaginationState>(() => {\n    return {\n      pageSize,\n      pageIndex,\n      enablePreviousPage: paginationElement?.props.enablePreviousPage,\n      enableNextPage: paginationElement?.props.enableNextPage,\n      totalRowsCount: paginationElement?.props.totalRowsCount,\n    };\n  }, [\n    pageSize,\n    pageIndex,\n    paginationElement?.props.enablePreviousPage,\n    paginationElement?.props.enableNextPage,\n    paginationElement?.props.totalRowsCount,\n  ]);\n\n  const onPaginationChangeCallback = useCallback(\n    (\n      updater: Updater<DataTablePaginationState>,\n      trigger: 'user' | 'internal' = 'user',\n    ) => {\n      const nextState: DataTablePaginationState = functionalUpdate(updater, {\n        pageSize,\n        pageIndex,\n      });\n\n      if (\n        nextState?.pageSize !== pageSize &&\n        nextState?.pageSize !== undefined\n      ) {\n        setPageSize(nextState.pageSize);\n        setPageIndex(DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX);\n        paginationElement?.props.onPageIndexChange?.(\n          DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX,\n          'internal',\n        );\n      } else if (\n        nextState?.pageIndex !== pageIndex &&\n        nextState?.pageIndex !== undefined\n      ) {\n        setPageIndex(nextState.pageIndex);\n        paginationElement?.props.onPageIndexChange?.(\n          nextState.pageIndex,\n          trigger,\n        );\n      }\n    },\n    [setPageSize, setPageIndex, pageSize, pageIndex, paginationElement],\n  );\n\n  if (!paginationElement) {\n    return;\n  }\n\n  // eslint-disable-next-line react-hooks/immutability\n  options.enablePagination = true;\n  // eslint-disable-next-line react-hooks/immutability\n  options.availablePaginationOptions = paginationSizeOptions;\n  // eslint-disable-next-line react-hooks/immutability\n  options.controlledPageIndex = paginationElement.props.pageIndex !== undefined;\n\n  if (paginationElement.props.autoResetPageIndex === false) {\n    // eslint-disable-next-line react-hooks/immutability\n    options.autoResetPageIndex = paginationElement.props.autoResetPageIndex;\n  }\n\n  // Server side pagination.\n  if (\n    paginationElement.props.enableNextPage !== undefined &&\n    paginationElement.props.enablePreviousPage !== undefined\n  ) {\n    // eslint-disable-next-line react-hooks/immutability\n    options.manualPagination = true;\n    // Ensure pageCount is considered unknown to react table.\n    // eslint-disable-next-line react-hooks/immutability\n    options.pageCount = -1;\n  } else {\n    // eslint-disable-next-line react-hooks/immutability\n    options.manualPagination = false;\n  }\n  // eslint-disable-next-line react-hooks/immutability\n  options.state = {\n    ...options.state,\n    pagination: paginationState,\n  };\n\n  // eslint-disable-next-line react-hooks/immutability\n  options.onPaginationChange = onPaginationChangeCallback;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/tables/DataTable/features/RowDetails/RowDetails.css

@@ -1,4 +1,4 @@
-._2twyod0-3-5-2::before {
+._2twyod0-3-7-0::before {
   content: "";
   display: block;
   top: 0;
@@ -8,10 +8,10 @@
   width: 100%;
   z-index: 4;
 }
-._or8s40-3-5-2 ._2twyod0-3-5-2::before, ._2twyod0-3-5-2:not(:first-child)::before {
+._or8s40-3-7-0 ._2twyod0-3-7-0::before, ._2twyod0-3-7-0:not(:first-child)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod1-3-5-2 {
+._2twyod1-3-7-0 {
   position: relative;
   box-sizing: border-box;
   border-bottom-width: 1px;
@@ -19,40 +19,40 @@
   border-bottom-color: transparent;
   overflow: hidden;
 }
-._2twyod1-3-5-2:not(:has(+ ._2twyod0-3-5-2)) {
+._2twyod1-3-7-0:not(:has(+ ._2twyod0-3-7-0)) {
   border-bottom-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod4-3-5-2:not(._or8s40-3-5-2 ._2twyod4-3-5-2) {
+._2twyod4-3-7-0:not(._or8s40-3-7-0 ._2twyod4-3-7-0) {
   opacity: 0;
 }
-._2twyod6-3-5-2 {
+._2twyod6-3-7-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod7-3-5-2 {
+._2twyod7-3-7-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod8-3-5-2 {
+._2twyod8-3-7-0 {
   border-bottom-width: 0;
 }
-._2twyod9-3-5-2 {
+._2twyod9-3-7-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._2twyoda-3-5-2 {
+._2twyoda-3-7-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._2twyodc-3-5-2 {
+._2twyodc-3-7-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._2twyodd-3-5-2 {
+._2twyodd-3-7-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._2twyode-3-5-2 {
+._2twyode-3-7-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);