dev v3 gethinw jump to page

package.json

@@ -111,7 +111,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "loader-utils": "^3.2.1",
-    "lodash": "^4.17.23",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.4.4",
     "mississippi": "^4.0.0",
     "mockdate": "^3.0.5",
@@ -129,7 +129,7 @@
     "rollup-plugin-license": "^3.0.1",
     "sass": "^1.89.2",
     "sass-loader": "^12.3.0",
-    "size-limit": "^12.0.0",
+    "size-limit": "^11.1.6",
     "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.2",
@@ -163,7 +163,7 @@
       "stylelint --fix"
     ],
     "package-lock.json": [
-      "prepare-package-lock"
+      "node ./scripts/unlock-package-lock.js"
     ]
   },
   "size-limit": [

pages/pagination/permutations.page.tsx

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
 import Pagination, { PaginationProps } from '~components/pagination';
 
 import createPermutations from '../utils/permutations';
@@ -12,6 +14,12 @@ const paginationLabels: PaginationProps.Labels = {
   nextPageLabel: 'Next page',
   previousPageLabel: 'Previous page',
   pageLabel: pageNumber => `Page ${pageNumber} of all pages`,
+  jumpToPageButton: 'Go to page',
+};
+
+const paginationI18nStrings: PaginationProps.I18nStrings = {
+  jumpToPageLabel: 'Page',
+  jumpToPageError: 'Enter a valid page number',
 };
 
 const permutations = createPermutations<PaginationProps>([
@@ -26,16 +34,18 @@ const permutations = createPermutations<PaginationProps>([
     pagesCount: [15],
     openEnd: [true, false],
     ariaLabels: [paginationLabels],
+    i18nStrings: [paginationI18nStrings],
+    jumpToPage: [undefined, { loading: false }, { loading: true }],
   },
 ]);
 
 export default function PaginationPermutations() {
   return (
-    <>
+    <I18nProvider messages={[messages]} locale="en">
       <h1>Pagination permutations</h1>
       <ScreenshotArea>
         <PermutationsView permutations={permutations} render={permutation => <Pagination {...permutation} />} />
       </ScreenshotArea>
-    </>
+    </I18nProvider>
   );
 }

pages/table/jump-to-page-closed.page.tsx

@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { CollectionPreferences } from '~components';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+import Pagination from '~components/pagination';
+import Table from '~components/table';
+
+import { generateItems, Instance } from './generate-data';
+
+const allItems = generateItems(100);
+const PAGE_SIZE = 10;
+
+function JumpToPageClosedContent() {
+  const [currentPageIndex, setCurrentPageIndex] = useState(1);
+
+  const totalPages = Math.ceil(allItems.length / PAGE_SIZE);
+  const startIndex = (currentPageIndex - 1) * PAGE_SIZE;
+  const endIndex = startIndex + PAGE_SIZE;
+  const currentItems = allItems.slice(startIndex, endIndex);
+
+  return (
+    <Table
+      header={<h1>Jump to Page - Closed Pagination (100 items, 10 pages)</h1>}
+      columnDefinitions={[
+        { header: 'ID', cell: (item: Instance) => item.id },
+        { header: 'State', cell: (item: Instance) => item.state },
+        { header: 'Type', cell: (item: Instance) => item.type },
+        { header: 'DNS Name', cell: (item: Instance) => item.dnsName || '-' },
+      ]}
+      preferences={
+        <CollectionPreferences
+          title="Preferences"
+          confirmLabel="Confirm"
+          cancelLabel="Cancel"
+          preferences={{
+            pageSize: 10,
+            contentDisplay: [
+              { id: 'variable', visible: true },
+              { id: 'value', visible: true },
+              { id: 'type', visible: true },
+              { id: 'description', visible: true },
+            ],
+          }}
+          pageSizePreference={{
+            title: 'Page size',
+            options: [
+              { value: 10, label: '10 resources' },
+              { value: 20, label: '20 resources' },
+            ],
+          }}
+          wrapLinesPreference={{}}
+          stripedRowsPreference={{}}
+          contentDensityPreference={{}}
+          contentDisplayPreference={{
+            options: [
+              {
+                id: 'variable',
+                label: 'Variable name',
+                alwaysVisible: true,
+              },
+              { id: 'value', label: 'Text value' },
+              { id: 'type', label: 'Type' },
+              { id: 'description', label: 'Description' },
+            ],
+          }}
+          stickyColumnsPreference={{
+            firstColumns: {
+              title: 'Stick first column(s)',
+              description: 'Keep the first column(s) visible while horizontally scrolling the table content.',
+              options: [
+                { label: 'None', value: 0 },
+                { label: 'First column', value: 1 },
+                { label: 'First two columns', value: 2 },
+              ],
+            },
+            lastColumns: {
+              title: 'Stick last column',
+              description: 'Keep the last column visible while horizontally scrolling the table content.',
+              options: [
+                { label: 'None', value: 0 },
+                { label: 'Last column', value: 1 },
+              ],
+            },
+          }}
+        />
+      }
+      items={currentItems}
+      pagination={
+        <Pagination
+          currentPageIndex={currentPageIndex}
+          pagesCount={totalPages}
+          onChange={({ detail }) => setCurrentPageIndex(detail.currentPageIndex)}
+          jumpToPage={{}}
+        />
+      }
+    />
+  );
+}
+
+export default function JumpToPageClosedExample() {
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <JumpToPageClosedContent />
+    </I18nProvider>
+  );
+}