Merge pull request #527 from icflorescu/next

Update dev deps & improve examples code in docs website

app/examples/expanding-rows/RowExpansionExampleInitiallyExpandedRows.tsx

@@ -16,7 +16,8 @@ export function RowExpansionExampleInitiallyExpandedRows() {
       columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
       records={records}
       rowExpansion={{
-        initiallyExpanded: ({ record: { name } }) => name === 'Johnston LLC',
+        allowMultiple: true,
+        initiallyExpanded: ({ record: { state } }) => state === 'WY', // 👈 expand rows where state is WY
         // example-skip
         content: ({ record }) => (
           <Stack className={classes.details} p="xs" gap={6}>

app/examples/expanding-rows/RowExpansionExampleMultipleExpandedRows.tsx

@@ -16,7 +16,7 @@ export function RowExpansionExampleMultipleExpandedRows() {
       columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
       records={records}
       rowExpansion={{
-        allowMultiple: true,
+        allowMultiple: true, // 👈 allow multiple rows to be expanded at the same time
         // example-skip
         content: ({ record }) => (
           <Stack className={classes.details} p="xs" gap={6}>

app/examples/expanding-rows/RowExpansionExampleTriggerAlways.tsx

@@ -16,7 +16,7 @@ export function RowExpansionExampleTriggerAlways() {
       columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
       records={records}
       rowExpansion={{
-        trigger: 'always',
+        trigger: 'always', // 👈 always expand all rows
         // example-skip
         content: ({ record }) => (
           <Stack className={classes.details} p="xs" gap={6}>

app/examples/expanding-rows/RowExpansionExampleWithInlineEditor.tsx

@@ -96,9 +96,9 @@ export function RowExpansionExampleWithInlineEditor() {
             onDone={(data) => {
               const index = companies.findIndex((c) => c.id === data.id);
               setCompanies([...companies.slice(0, index), data, ...companies.slice(index + 1)]);
-              collapse();
+              collapse(); // 👈 collapse the row after editing
             }}
-            onCancel={collapse}
+            onCancel={collapse} // 👈 collapse the row if editing is cancelled
           />
         ),
       }}

app/examples/expanding-rows/page.tsx

@@ -72,18 +72,18 @@ export default async function ExpandingRowsExamplePage() {
       <RowExpansionExampleCollapseProps />
       <Txt>Here is the code for the above example:</Txt>
       <CodeBlock code={code['RowExpansionExampleCollapseProps.tsx']} />
-      <PageSubtitle value="Specifying which rows are initially expanded" />
-      <Txt>You can specify which rows are initially expanded like so:</Txt>
-      <RowExpansionExampleInitiallyExpandedRows />
-      <Txt>Here is the code for the above example:</Txt>
-      <CodeBlock code={code['RowExpansionExampleInitiallyExpandedRows.tsx']} />
       <PageSubtitle value="Allowing multiple rows to be expanded at once" />
       <Txt>
         By default, a single row can be expanded at a certain time. You can override the default behavior like so:
       </Txt>
       <RowExpansionExampleMultipleExpandedRows />
       <Txt>Here is the code for the above example:</Txt>
       <CodeBlock code={code['RowExpansionExampleMultipleExpandedRows.tsx']} />
+      <PageSubtitle value="Specifying which rows are initially expanded" />
+      <Txt>You can specify which rows are initially expanded like so:</Txt>
+      <RowExpansionExampleInitiallyExpandedRows />
+      <Txt>Here is the code for the above example:</Txt>
+      <CodeBlock code={code['RowExpansionExampleInitiallyExpandedRows.tsx']} />
       <PageSubtitle value="Always expand all rows" />
       <Txt>
         If you want all rows to be locked in their expanded state, just set the row expansion <Code>trigger</Code>{' '}

app/examples/overriding-the-default-styles/ColorsExample.tsx

@@ -24,11 +24,13 @@ export function ColorsExample() {
     <DataTable
       withTableBorder
       withColumnBorders
+      // 👇 override default text color for light and dark themes
       c={{ dark: '#dbc7a0', light: '#55350d' }}
+      // 👇 override default background color for light and dark themes
       backgroundColor={{ dark: '#232b25', light: '#f0f7f1' }}
-      borderColor="#40c057"
-      rowBorderColor="#fab005"
-      paginationActiveBackgroundColor="#40c057"
+      borderColor="#40c057" // 👈 override default border color
+      rowBorderColor="#fab005" // 👈 override default row border color
+      paginationActiveBackgroundColor="#40c057" // 👈 override default pagination active background color
       // example-skip
       records={records}
       columns={[

package.json

@@ -63,7 +63,7 @@
     "./styles.layer.css": "./dist/styles.layer.css"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build:package": "rm -rf dist; tsup --config scripts/tsup.esm.ts; tsup --config scripts/tsup.cjs.ts; tsup --config scripts/tsup.dts.ts; postcss package/styles*.css --dir dist",
     "build:docs": "next build",
     "build": "yarn build:package && yarn build:docs",
@@ -82,7 +82,7 @@
     "@mantine/modals": "^7.4.2",
     "@mantine/notifications": "^7.4.2",
     "@tabler/icons-react": "^2.46.0",
-    "@tanstack/react-query": "^5.17.15",
+    "@tanstack/react-query": "^5.17.19",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
@@ -96,7 +96,7 @@
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.4.0",
+    "mantine-contextmenu": "^7.4.1",
     "next": "14.1.0",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",

yarn.lock

@@ -1772,17 +1772,17 @@
   resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.46.0.tgz#e629df8901b799372914c694000cc2ea3d45bb6b"
   integrity sha512-Q5G8Pj5IO+Uhc6pszpu5/hGYY018JwEzzvmuqr+gKJtfIvAHA3umpwUilMRLEy89p+WCP+YsDhicMhfBCCv1qA==
 
-"@tanstack/[email protected].15":
-  version "5.17.15"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.17.15.tgz#e73a3036e72398493ef9eee1678f89938111344c"
-  integrity sha512-QURxpu77/ICA4d61aPvV7EcJ2MwmksxUejKBaq/xLcO2TUJAlXf4PFKHC/WxnVFI/7F1jeLx85AO3Vpk0+uBXw==
+"@tanstack/[email protected].19":
+  version "5.17.19"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.17.19.tgz#212515ccc7a6b913afee6b71ce3e7df2c4d85f7d"
+  integrity sha512-Lzw8FUtnLCc9Jwz0sw9xOjZB+/mCCmJev38v2wHMUl/ioXNIhnNWeMxu0NKUjIhAd62IRB3eAtvxAGDJ55UkyA==
 
-"@tanstack/react-query@^5.17.15":
-  version "5.17.15"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.17.15.tgz#2214491b97d77613155a3607a3af163ecde613b6"
-  integrity sha512-9qur91mOihaUN7pXm6ioDtS+4qgkBcCiIaZyvi3lZNcQZsrMGCYZ+eP3hiFrV4khoJyJrFUX1W0NcCVlgwNZxQ==
+"@tanstack/react-query@^5.17.19":
+  version "5.17.19"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.17.19.tgz#d6fc243faa469bb84952dd810faea47dabe389fc"
+  integrity sha512-qaQENB6/03Gj3dFZGvdmUoqeUGlGm7P1p0RmaR04Bf1Ib1T9lLGimcC9T3oCFbrx0b2ZF21ngjFZNjj9uPJMcg==
   dependencies:
-    "@tanstack/query-core" "5.17.15"
+    "@tanstack/query-core" "5.17.19"
 
 "@trysound/[email protected]":
   version "0.2.0"
@@ -4444,10 +4444,10 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-mantine-contextmenu@^7.4.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.4.0.tgz#b0d5015e0d30fc4accf4f04c4047f7114b5e45ec"
-  integrity sha512-+U9KYHaLN8t6SBR+GH+PLH5gajtBdovQHQwS0gbdckDPd6fGFpcRcMRRXYN9f+2tL4gYaX740kMf4uwnsfZCKw==
+mantine-contextmenu@^7.4.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.4.1.tgz#545052bb3d6ed97ab3db8416ac2077f0f33c8f2e"
+  integrity sha512-6C9uu6cb/VbmJEDkyZcDJyjLzcu4kdhgFF0GcMbsKadlxDWAtvOxRAJ0ewkJ5WtYz6aJ0dw0oz3M1wKy7kjSmg==
 
 [email protected]:
   version "2.0.28"
@@ -5665,6 +5665,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6516,6 +6517,7 @@ [email protected]:
     workbox-core "7.0.0"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==