@digigov/ui 2.0.0-rc.20 → 2.0.0-rc.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/cjs/navigation/Pagination/__stories__/Auto/index.js +7 -9
  2. package/cjs/navigation/Pagination/__stories__/Auto.js.map +3 -3
  3. package/index.js +1 -1
  4. package/navigation/Pagination/__stories__/Auto/index.js +8 -12
  5. package/navigation/Pagination/__stories__/Auto.js.map +2 -2
  6. package/package.json +5 -7
  7. package/src/navigation/Pagination/__stories__/Auto.tsx +29 -31
package/cjs/navigation/Pagination/__stories__/Auto/index.js CHANGED
@@ -33,8 +33,7 @@ __export(Auto_exports, {
33
33
  module.exports = __toCommonJS(Auto_exports);
34
34
  var import_react = __toESM(require("react"));
35
35
  var import_Card = __toESM(require("@digigov/ui/content/Card"));
36
- var import_Basic = __toESM(require("@digigov/ui/layouts/Basic"));
37
- var import_Basic2 = __toESM(require("@digigov/ui/layouts/Basic"));
36
+ var import_Container = __toESM(require("@digigov/ui/layouts/Basic/Container"));
38
37
  var import_Grid = __toESM(require("@digigov/ui/layouts/Grid"));
39
38
  var import_Pagination = require("@digigov/ui/navigation/Pagination");
40
39
  var import_auto = require("@digigov/ui/navigation/Pagination/auto");
@@ -42,14 +41,13 @@ const fetchedData = [];
42
41
  for (let i = 0; i < 78; i++) {
43
42
  fetchedData.push({ id: i });
44
43
  }
45
- const MyContainer = ({ data }) => {
44
+ const DataGrid = ({ data }) => {
46
45
  const { offset, limit } = (0, import_auto.usePaginationContext)();
47
- return data.filter((item, index) => {
48
- index > offset && index < offset + limit;
49
- console.log(item);
46
+ return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { container: true, spacing: 4, mb: { xs: 4, md: 8 } }, data.filter((_item, index) => {
47
+ return index > offset && index < offset + limit;
50
48
  }).map((item, index) => {
51
- return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { item: true, xs: 4, md: 2, key: index }, /* @__PURE__ */ import_react.default.createElement(import_Card.default, { variant: "border" }, " ", item.id));
52
- });
49
+ return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { item: true, xs: 4, md: 2, key: index }, /* @__PURE__ */ import_react.default.createElement(import_Card.default, { variant: "border", borderColor: "light", dense: true }, item.id));
50
+ }));
53
51
  };
54
52
  const Auto = () => {
55
53
  return /* @__PURE__ */ import_react.default.createElement(
@@ -60,7 +58,7 @@ const Auto = () => {
60
58
  previousLabel: "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7",
61
59
  nextLabel: "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7"
62
60
  },
63
- /* @__PURE__ */ import_react.default.createElement(import_Basic.default, null, /* @__PURE__ */ import_react.default.createElement(import_Basic2.default, null, /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { container: true, spacing: 4 }, /* @__PURE__ */ import_react.default.createElement(MyContainer, { data: fetchedData })), /* @__PURE__ */ import_react.default.createElement(import_Pagination.Pagination, null, /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationLabelAuto, null), /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationListAuto, null))))
61
+ /* @__PURE__ */ import_react.default.createElement(import_Container.default, { grid: false }, /* @__PURE__ */ import_react.default.createElement(DataGrid, { data: fetchedData }), /* @__PURE__ */ import_react.default.createElement(import_Pagination.Pagination, null, /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationLabelAuto, null), /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ import_react.default.createElement(import_auto.PaginationListAuto, null)))
64
62
  );
65
63
  };
66
64
  var Auto_default = Auto;
package/cjs/navigation/Pagination/__stories__/Auto.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/navigation/Pagination/__stories__/Auto.tsx"],
4
- "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic';\nimport Main from '@digigov/ui/layouts/Basic';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport {\n Pagination,\n} from '@digigov/ui/navigation/Pagination';\nimport {\n PaginationContextAuto,\n PaginationLabelAuto,\n PaginationListAuto,\n PaginationResultsPerPageSelectAuto,\n usePaginationContext,\n} from '@digigov/ui/navigation/Pagination/auto';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n fetchedData.push({ id: i });\n}\n\nconst MyContainer = ({ data }) => {\n const { offset, limit } = usePaginationContext();\n\n return data\n .filter((item, index) => {\n index > offset && index < offset + limit;\n console.log(item);\n })\n .map((item, index) => {\n return (\n <Grid item xs={4} md={2} key={index}>\n <Card variant=\"border\"> {item.id}</Card>\n </Grid>\n );\n });\n};\n\nexport const Auto = () => {\n return (\n <PaginationContextAuto\n total={fetchedData.length}\n resultsPerPageOptions={[15, 25]}\n previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n >\n <Container>\n <Main>\n <Grid container spacing={4}>\n <MyContainer data={fetchedData} />\n </Grid>\n <Pagination>\n <PaginationLabelAuto />\n <PaginationResultsPerPageSelectAuto>\n \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n </PaginationResultsPerPageSelectAuto>\n <PaginationListAuto />\n </Pagination>\n </Main>\n </Container>\n </PaginationContextAuto>\n );\n};\nexport default Auto;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,mBAAsB;AACtB,IAAAA,gBAAiB;AACjB,kBAAiB;AACjB,wBAEO;AACP,kBAMO;AAEP,MAAM,cAAgC,CAAC;AAEvC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B;AAEA,MAAM,cAAc,CAAC,EAAE,KAAK,MAAM;AAChC,QAAM,EAAE,QAAQ,MAAM,QAAI,kCAAqB;AAE/C,SAAO,KACJ,OAAO,CAAC,MAAM,UAAU;AACvB,YAAQ,UAAU,QAAQ,SAAS;AACnC,YAAQ,IAAI,IAAI;AAAA,EAClB,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAI,MAAC,IAAI,GAAG,IAAI,GAAG,KAAK,SAC5B,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,YAAS,KAAE,KAAK,EAAG,CACnC;AAAA,EAEJ,CAAC;AACL;AAEO,MAAM,OAAO,MAAM;AACxB,SACE,6BAAAF,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,uBAAuB,CAAC,IAAI,EAAE;AAAA,MAC9B,eAAc;AAAA,MACd,WAAU;AAAA;AAAA,IAEV,6BAAAA,QAAA,cAAC,aAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,cAAAI,SAAA,MACC,6BAAAJ,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAS,MAAC,SAAS,KACvB,6BAAAD,QAAA,cAAC,eAAY,MAAM,aAAa,CAClC,GACA,6BAAAA,QAAA,cAAC,oCACC,6BAAAA,QAAA,cAAC,qCAAoB,GACrB,6BAAAA,QAAA,cAAC,sDAAmC,kIAEpC,GACA,6BAAAA,QAAA,cAAC,oCAAmB,CACtB,CACF,CACF;AAAA,EACF;AAEJ;AACA,IAAO,eAAQ;",
6
- "names": ["import_Basic", "React", "Grid", "Card", "Container", "Main"]
4
+ "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic/Container';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport { Pagination } from '@digigov/ui/navigation/Pagination';\nimport {\n PaginationContextAuto,\n PaginationLabelAuto,\n PaginationListAuto,\n PaginationResultsPerPageSelectAuto,\n usePaginationContext,\n} from '@digigov/ui/navigation/Pagination/auto';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n fetchedData.push({ id: i });\n}\n\nconst DataGrid = ({ data }) => {\n const { offset, limit } = usePaginationContext();\n\n return (\n <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>\n {data\n .filter((_item, index) => {\n return index > offset && index < offset + limit;\n })\n .map((item, index) => {\n return (\n <Grid item xs={4} md={2} key={index}>\n <Card variant=\"border\" borderColor=\"light\" dense>\n {item.id}\n </Card>\n </Grid>\n );\n })}\n </Grid>\n );\n};\n\nexport const Auto = () => {\n return (\n <PaginationContextAuto\n total={fetchedData.length}\n resultsPerPageOptions={[15, 25]}\n previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n >\n <Container grid={false}>\n <DataGrid data={fetchedData} />\n <Pagination>\n <PaginationLabelAuto />\n <PaginationResultsPerPageSelectAuto>\n \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n </PaginationResultsPerPageSelectAuto>\n <PaginationListAuto />\n </Pagination>\n </Container>\n </PaginationContextAuto>\n );\n};\nexport default Auto;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,uBAAsB;AACtB,kBAAiB;AACjB,wBAA2B;AAC3B,kBAMO;AAEP,MAAM,cAAgC,CAAC;AAEvC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B;AAEA,MAAM,WAAW,CAAC,EAAE,KAAK,MAAM;AAC7B,QAAM,EAAE,QAAQ,MAAM,QAAI,kCAAqB;AAE/C,SACE,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAS,MAAC,SAAS,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAC5C,KACE,OAAO,CAAC,OAAO,UAAU;AACxB,WAAO,QAAQ,UAAU,QAAQ,SAAS;AAAA,EAC5C,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAI,MAAC,IAAI,GAAG,IAAI,GAAG,KAAK,SAC5B,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,UAAS,aAAY,SAAQ,OAAK,QAC7C,KAAK,EACR,CACF;AAAA,EAEJ,CAAC,CACL;AAEJ;AAEO,MAAM,OAAO,MAAM;AACxB,SACE,6BAAAF,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,uBAAuB,CAAC,IAAI,EAAE;AAAA,MAC9B,eAAc;AAAA,MACd,WAAU;AAAA;AAAA,IAEV,6BAAAA,QAAA,cAAC,iBAAAG,SAAA,EAAU,MAAM,SACf,6BAAAH,QAAA,cAAC,YAAS,MAAM,aAAa,GAC7B,6BAAAA,QAAA,cAAC,oCACC,6BAAAA,QAAA,cAAC,qCAAoB,GACrB,6BAAAA,QAAA,cAAC,sDAAmC,kIAEpC,GACA,6BAAAA,QAAA,cAAC,oCAAmB,CACtB,CACF;AAAA,EACF;AAEJ;AACA,IAAO,eAAQ;",
6
+ "names": ["React", "Grid", "Card", "Container"]
7
7
  }
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Digigov v2.0.0-rc.20
1
+ /** @license Digigov v2.0.0-rc.21
2
2
  *
3
3
  * This source code is licensed under the BSD-2-Clause license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/navigation/Pagination/__stories__/Auto/index.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import React from "react";
2
2
  import Card from "@digigov/ui/content/Card";
3
- import Container from "@digigov/ui/layouts/Basic";
4
- import Main from "@digigov/ui/layouts/Basic";
3
+ import Container from "@digigov/ui/layouts/Basic/Container";
5
4
  import Grid from "@digigov/ui/layouts/Grid";
6
- import {
7
- Pagination
8
- } from "@digigov/ui/navigation/Pagination";
5
+ import { Pagination } from "@digigov/ui/navigation/Pagination";
9
6
  import {
10
7
  PaginationContextAuto,
11
8
  PaginationLabelAuto,
@@ -17,14 +14,13 @@ const fetchedData = [];
17
14
  for (let i = 0; i < 78; i++) {
18
15
  fetchedData.push({ id: i });
19
16
  }
20
- const MyContainer = ({ data }) => {
17
+ const DataGrid = ({ data }) => {
21
18
  const { offset, limit } = usePaginationContext();
22
- return data.filter((item, index) => {
23
- index > offset && index < offset + limit;
24
- console.log(item);
19
+ return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4, mb: { xs: 4, md: 8 } }, data.filter((_item, index) => {
20
+ return index > offset && index < offset + limit;
25
21
  }).map((item, index) => {
26
- return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4, md: 2, key: index }, /* @__PURE__ */ React.createElement(Card, { variant: "border" }, " ", item.id));
27
- });
22
+ return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4, md: 2, key: index }, /* @__PURE__ */ React.createElement(Card, { variant: "border", borderColor: "light", dense: true }, item.id));
23
+ }));
28
24
  };
29
25
  const Auto = () => {
30
26
  return /* @__PURE__ */ React.createElement(
@@ -35,7 +31,7 @@ const Auto = () => {
35
31
  previousLabel: "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7",
36
32
  nextLabel: "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7"
37
33
  },
38
- /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Main, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, /* @__PURE__ */ React.createElement(MyContainer, { data: fetchedData })), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabelAuto, null), /* @__PURE__ */ React.createElement(PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ React.createElement(PaginationListAuto, null))))
34
+ /* @__PURE__ */ React.createElement(Container, { grid: false }, /* @__PURE__ */ React.createElement(DataGrid, { data: fetchedData }), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabelAuto, null), /* @__PURE__ */ React.createElement(PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ React.createElement(PaginationListAuto, null)))
39
35
  );
40
36
  };
41
37
  var Auto_default = Auto;
package/navigation/Pagination/__stories__/Auto.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/navigation/Pagination/__stories__/Auto.tsx"],
4
- "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic';\nimport Main from '@digigov/ui/layouts/Basic';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport {\n Pagination,\n} from '@digigov/ui/navigation/Pagination';\nimport {\n PaginationContextAuto,\n PaginationLabelAuto,\n PaginationListAuto,\n PaginationResultsPerPageSelectAuto,\n usePaginationContext,\n} from '@digigov/ui/navigation/Pagination/auto';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n fetchedData.push({ id: i });\n}\n\nconst MyContainer = ({ data }) => {\n const { offset, limit } = usePaginationContext();\n\n return data\n .filter((item, index) => {\n index > offset && index < offset + limit;\n console.log(item);\n })\n .map((item, index) => {\n return (\n <Grid item xs={4} md={2} key={index}>\n <Card variant=\"border\"> {item.id}</Card>\n </Grid>\n );\n });\n};\n\nexport const Auto = () => {\n return (\n <PaginationContextAuto\n total={fetchedData.length}\n resultsPerPageOptions={[15, 25]}\n previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n >\n <Container>\n <Main>\n <Grid container spacing={4}>\n <MyContainer data={fetchedData} />\n </Grid>\n <Pagination>\n <PaginationLabelAuto />\n <PaginationResultsPerPageSelectAuto>\n \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n </PaginationResultsPerPageSelectAuto>\n <PaginationListAuto />\n </Pagination>\n </Main>\n </Container>\n </PaginationContextAuto>\n );\n};\nexport default Auto;\n"],
5
- "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAgC,CAAC;AAEvC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B;AAEA,MAAM,cAAc,CAAC,EAAE,KAAK,MAAM;AAChC,QAAM,EAAE,QAAQ,MAAM,IAAI,qBAAqB;AAE/C,SAAO,KACJ,OAAO,CAAC,MAAM,UAAU;AACvB,YAAQ,UAAU,QAAQ,SAAS;AACnC,YAAQ,IAAI,IAAI;AAAA,EAClB,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,oCAAC,QAAK,MAAI,MAAC,IAAI,GAAG,IAAI,GAAG,KAAK,SAC5B,oCAAC,QAAK,SAAQ,YAAS,KAAE,KAAK,EAAG,CACnC;AAAA,EAEJ,CAAC;AACL;AAEO,MAAM,OAAO,MAAM;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,uBAAuB,CAAC,IAAI,EAAE;AAAA,MAC9B,eAAc;AAAA,MACd,WAAU;AAAA;AAAA,IAEV,oCAAC,iBACC,oCAAC,YACC,oCAAC,QAAK,WAAS,MAAC,SAAS,KACvB,oCAAC,eAAY,MAAM,aAAa,CAClC,GACA,oCAAC,kBACC,oCAAC,yBAAoB,GACrB,oCAAC,0CAAmC,kIAEpC,GACA,oCAAC,wBAAmB,CACtB,CACF,CACF;AAAA,EACF;AAEJ;AACA,IAAO,eAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic/Container';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport { Pagination } from '@digigov/ui/navigation/Pagination';\nimport {\n PaginationContextAuto,\n PaginationLabelAuto,\n PaginationListAuto,\n PaginationResultsPerPageSelectAuto,\n usePaginationContext,\n} from '@digigov/ui/navigation/Pagination/auto';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n fetchedData.push({ id: i });\n}\n\nconst DataGrid = ({ data }) => {\n const { offset, limit } = usePaginationContext();\n\n return (\n <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>\n {data\n .filter((_item, index) => {\n return index > offset && index < offset + limit;\n })\n .map((item, index) => {\n return (\n <Grid item xs={4} md={2} key={index}>\n <Card variant=\"border\" borderColor=\"light\" dense>\n {item.id}\n </Card>\n </Grid>\n );\n })}\n </Grid>\n );\n};\n\nexport const Auto = () => {\n return (\n <PaginationContextAuto\n total={fetchedData.length}\n resultsPerPageOptions={[15, 25]}\n previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n >\n <Container grid={false}>\n <DataGrid data={fetchedData} />\n <Pagination>\n <PaginationLabelAuto />\n <PaginationResultsPerPageSelectAuto>\n \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n </PaginationResultsPerPageSelectAuto>\n <PaginationListAuto />\n </Pagination>\n </Container>\n </PaginationContextAuto>\n );\n};\nexport default Auto;\n"],
5
+ "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAgC,CAAC;AAEvC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B;AAEA,MAAM,WAAW,CAAC,EAAE,KAAK,MAAM;AAC7B,QAAM,EAAE,QAAQ,MAAM,IAAI,qBAAqB;AAE/C,SACE,oCAAC,QAAK,WAAS,MAAC,SAAS,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAC5C,KACE,OAAO,CAAC,OAAO,UAAU;AACxB,WAAO,QAAQ,UAAU,QAAQ,SAAS;AAAA,EAC5C,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,oCAAC,QAAK,MAAI,MAAC,IAAI,GAAG,IAAI,GAAG,KAAK,SAC5B,oCAAC,QAAK,SAAQ,UAAS,aAAY,SAAQ,OAAK,QAC7C,KAAK,EACR,CACF;AAAA,EAEJ,CAAC,CACL;AAEJ;AAEO,MAAM,OAAO,MAAM;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,uBAAuB,CAAC,IAAI,EAAE;AAAA,MAC9B,eAAc;AAAA,MACd,WAAU;AAAA;AAAA,IAEV,oCAAC,aAAU,MAAM,SACf,oCAAC,YAAS,MAAM,aAAa,GAC7B,oCAAC,kBACC,oCAAC,yBAAoB,GACrB,oCAAC,0CAAmC,kIAEpC,GACA,oCAAC,wBAAmB,CACtB,CACF;AAAA,EACF;AAEJ;AACA,IAAO,eAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@digigov/ui",
3
- "version": "2.0.0-rc.20",
3
+ "version": "2.0.0-rc.21",
4
4
  "description": "@digigov reusable components toolkit",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./index.js",
7
7
  "dependencies": {
8
- "@uides/react-qr-reader": "3.0.1-rc.20",
9
- "@digigov/react-icons": "2.0.0-rc.20",
8
+ "@uides/react-qr-reader": "3.0.1-rc.21",
9
+ "@digigov/react-icons": "2.0.0-rc.21",
10
10
  "dompurify": "3.0.6",
11
11
  "highlight.js": "11.10.0"
12
12
  },
@@ -15,10 +15,8 @@
15
15
  "clsx": "1.1.1",
16
16
  "react": ">=16.8.0 <19.0.0",
17
17
  "react-dom": ">=16.8.0 <19.0.0",
18
- "@digigov/react-core": "2.0.0-rc.20",
19
- "@digigov/css": "2.0.0-rc.20",
20
- "@digigov/theme-govgr-light": "1.1.0-rc.20",
21
- "@digigov/theme-govgr-dark": "2.0.0-rc.20"
18
+ "@digigov/react-core": "2.0.0-rc.21",
19
+ "@digigov/css": "2.0.0-rc.21"
22
20
  },
23
21
  "peerDependenciesMeta": {
24
22
  "react-native": {
package/src/navigation/Pagination/__stories__/Auto.tsx CHANGED
@@ -1,11 +1,8 @@
1
1
  import React from 'react';
2
2
  import Card from '@digigov/ui/content/Card';
3
- import Container from '@digigov/ui/layouts/Basic';
4
- import Main from '@digigov/ui/layouts/Basic';
3
+ import Container from '@digigov/ui/layouts/Basic/Container';
5
4
  import Grid from '@digigov/ui/layouts/Grid';
6
- import {
7
- Pagination,
8
- } from '@digigov/ui/navigation/Pagination';
5
+ import { Pagination } from '@digigov/ui/navigation/Pagination';
9
6
  import {
10
7
  PaginationContextAuto,
11
8
  PaginationLabelAuto,
@@ -20,21 +17,26 @@ for (let i = 0; i < 78; i++) {
20
17
  fetchedData.push({ id: i });
21
18
  }
22
19
 
23
- const MyContainer = ({ data }) => {
20
+ const DataGrid = ({ data }) => {
24
21
  const { offset, limit } = usePaginationContext();
25
22
 
26
- return data
27
- .filter((item, index) => {
28
- index > offset && index < offset + limit;
29
- console.log(item);
30
- })
31
- .map((item, index) => {
32
- return (
33
- <Grid item xs={4} md={2} key={index}>
34
- <Card variant="border"> {item.id}</Card>
35
- </Grid>
36
- );
37
- });
23
+ return (
24
+ <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>
25
+ {data
26
+ .filter((_item, index) => {
27
+ return index > offset && index < offset + limit;
28
+ })
29
+ .map((item, index) => {
30
+ return (
31
+ <Grid item xs={4} md={2} key={index}>
32
+ <Card variant="border" borderColor="light" dense>
33
+ {item.id}
34
+ </Card>
35
+ </Grid>
36
+ );
37
+ })}
38
+ </Grid>
39
+ );
38
40
  };
39
41
 
40
42
  export const Auto = () => {
@@ -45,19 +47,15 @@ export const Auto = () => {
45
47
  previousLabel="Προηγούμενη"
46
48
  nextLabel="Επόμενη"
47
49
  >
48
- <Container>
49
- <Main>
50
- <Grid container spacing={4}>
51
- <MyContainer data={fetchedData} />
52
- </Grid>
53
- <Pagination>
54
- <PaginationLabelAuto />
55
- <PaginationResultsPerPageSelectAuto>
56
- Αποτελέσματα ανά σελίδα
57
- </PaginationResultsPerPageSelectAuto>
58
- <PaginationListAuto />
59
- </Pagination>
60
- </Main>
50
+ <Container grid={false}>
51
+ <DataGrid data={fetchedData} />
52
+ <Pagination>
53
+ <PaginationLabelAuto />
54
+ <PaginationResultsPerPageSelectAuto>
55
+ Αποτελέσματα ανά σελίδα
56
+ </PaginationResultsPerPageSelectAuto>
57
+ <PaginationListAuto />
58
+ </Pagination>
61
59
  </Container>
62
60
  </PaginationContextAuto>
63
61
  );