@panneau/lists 5.0.0-alpha.6 → 5.0.0-alpha.8

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 (74) hide show
  1. package/README.md +1 -1
  2. package/dist/ItemDetails.d.ts +5 -3
  3. package/dist/ItemDetails.d.ts.map +1 -1
  4. package/dist/ItemDetails.js +48 -6
  5. package/dist/ItemDetails.js.map +1 -1
  6. package/dist/List.d.ts +2 -2
  7. package/dist/List.js +54 -12
  8. package/dist/List.js.map +1 -1
  9. package/dist/ListSkeleton.d.ts +17 -0
  10. package/dist/ListSkeleton.d.ts.map +1 -0
  11. package/dist/ListSkeleton.js +111 -0
  12. package/dist/ListSkeleton.js.map +1 -0
  13. package/dist/ListView.d.ts +7 -4
  14. package/dist/ListView.d.ts.map +1 -1
  15. package/dist/ListView.js +494 -179
  16. package/dist/ListView.js.map +1 -1
  17. package/dist/actions/ActionButton.d.ts +1 -1
  18. package/dist/actions/ActionButton.js +79 -21
  19. package/dist/actions/ActionButton.js.map +1 -1
  20. package/dist/actions/ConfirmDialog.d.ts +1 -1
  21. package/dist/actions/ConfirmDialog.js +121 -24
  22. package/dist/actions/ConfirmDialog.js.map +1 -1
  23. package/dist/actions/RowActions.d.ts +2 -2
  24. package/dist/actions/RowActions.js +1 -1
  25. package/dist/actions/RowActions.js.map +1 -1
  26. package/dist/actions/actions.d.ts +1 -1
  27. package/dist/actions/actions.js.map +1 -1
  28. package/dist/actions/icons.js.map +1 -1
  29. package/dist/cx.js.map +1 -1
  30. package/dist/displays/displays.d.ts +1 -1
  31. package/dist/displays/displays.js +1 -1
  32. package/dist/displays/displays.js.map +1 -1
  33. package/dist/filters/Filters.d.ts +1 -1
  34. package/dist/filters/Filters.js +1 -1
  35. package/dist/filters/Filters.js.map +1 -1
  36. package/dist/filters/controls.d.ts +1 -1
  37. package/dist/filters/controls.js +1 -1
  38. package/dist/filters/controls.js.map +1 -1
  39. package/dist/filters/format.d.ts +1 -1
  40. package/dist/filters/format.js.map +1 -1
  41. package/dist/index.d.ts +19 -19
  42. package/dist/layouts/CardsLayout.d.ts +1 -1
  43. package/dist/layouts/CardsLayout.js +1 -1
  44. package/dist/layouts/CardsLayout.js.map +1 -1
  45. package/dist/layouts/ItemTitle.js +20 -7
  46. package/dist/layouts/ItemTitle.js.map +1 -1
  47. package/dist/layouts/TableLayout.d.ts +1 -1
  48. package/dist/layouts/TableLayout.js +1 -1
  49. package/dist/layouts/TableLayout.js.map +1 -1
  50. package/dist/layouts/builtIn.d.ts +1 -1
  51. package/dist/layouts/builtIn.js.map +1 -1
  52. package/dist/plugin.d.ts +1 -1
  53. package/dist/plugin.js.map +1 -1
  54. package/dist/query.d.ts +1 -1
  55. package/dist/query.js.map +1 -1
  56. package/dist/selection.d.ts +1 -1
  57. package/dist/selection.js.map +1 -1
  58. package/dist/toolbar/LayoutSwitch.js +1 -1
  59. package/dist/toolbar/LayoutSwitch.js.map +1 -1
  60. package/dist/toolbar/Pagination.js +152 -41
  61. package/dist/toolbar/Pagination.js.map +1 -1
  62. package/dist/toolbar/SearchField.js +1 -1
  63. package/dist/toolbar/SearchField.js.map +1 -1
  64. package/dist/toolbar/SortSelect.d.ts +1 -1
  65. package/dist/toolbar/SortSelect.js +1 -1
  66. package/dist/toolbar/SortSelect.js.map +1 -1
  67. package/dist/useDraft.js.map +1 -1
  68. package/dist/useListState.js.map +1 -1
  69. package/dist/useRenderValue.d.ts +1 -1
  70. package/dist/useRenderValue.js +1 -1
  71. package/dist/useRenderValue.js.map +1 -1
  72. package/dist/values.d.ts +1 -1
  73. package/dist/values.js.map +1 -1
  74. package/package.json +9 -9
package/README.md CHANGED
@@ -87,7 +87,7 @@ const { data, isFetching, error } = useResourceList('pages', query); // @panneau
87
87
  | Pagination | With `total`: the range, previous and next pages, and the page size (`perPageOptions`) |
88
88
  | Selection | Checkboxes, the page, then "select all N items", which selects every item matching the query, with exceptions |
89
89
  | Actions | `row` (buttons), `menu` (the row's menu), `toolbar` (selection and resource actions), with `confirm`, hidden by abilities ([0011](../../docs/decisions/0011-permissions.md)) |
90
- | States | A spinner, an error with a retry, an empty message, and "no results" with a button that clears the filters |
90
+ | States | Skeleton rows of the columns while `items` is `undefined`, an error with a retry, an empty message, and "no results" with a button that clears the filters |
91
91
 
92
92
  An action shows the icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`, which needs an `iconLoader` on `PanneauRoot`, such as `lucideIconLoader` of `@panneau/ui/named-icons`), or the icon of a built-in action (`edit`, `delete`…). Actions written in code can get icon components by id instead, which win over names: `actionIcons={{ archive: Archive }}`.
93
93
 
@@ -1,6 +1,7 @@
1
- import type { DisplayEntry, ListColumn, ListItem } from './types';
1
+ import type { DisplayEntry, ListColumn, ListItem } from './types.js';
2
2
  export interface ItemDetailsProps {
3
- item: ListItem;
3
+ /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */
4
+ item: ListItem | undefined;
4
5
  /** The values to show, with their label and display, in order. */
5
6
  columns: readonly ListColumn[];
6
7
  /** Displays by name, over the built-in ones and those of the plugins. */
@@ -10,7 +11,8 @@ export interface ItemDetailsProps {
10
11
  }
11
12
  /**
12
13
  * The values of one item, each with its label, shown with the displays of the lists: for the
13
- * details of an item next to its list, or anywhere a read-only view of it is needed.
14
+ * details of an item next to its list, or anywhere a read-only view of it is needed. While the
15
+ * item loads, it draws the labels with a skeleton of each value (decision 0034).
14
16
  */
15
17
  export declare function ItemDetails({ item, columns, displays, 'aria-label': ariaLabel, className, }: ItemDetailsProps): import("react").JSX.Element;
16
18
  //# sourceMappingURL=ItemDetails.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,kEAAkE;IAClE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BAYlB"}
1
+ {"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMlE,MAAM,WAAW,gBAAgB;IAC7B,uFAAuF;IACvF,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BA6BlB"}
@@ -1,16 +1,28 @@
1
+ import { messages } from "./messages.js";
1
2
  import { cx } from "./cx.js";
2
3
  import ItemDetails_module_default from "./ItemDetails.module.js";
3
4
  import { useRenderValue } from "./useRenderValue.js";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { c } from "react/compiler-runtime";
6
+ import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
6
8
  //#region src/ItemDetails.tsx
9
+ /** Widths of the values of a skeleton, varied so they read as text. */
10
+ var WIDTHS = [
11
+ "70%",
12
+ "40%",
13
+ "55%",
14
+ "30%",
15
+ "65%"
16
+ ];
7
17
  /**
8
18
  * The values of one item, each with its label, shown with the displays of the lists: for the
9
- * details of an item next to its list, or anywhere a read-only view of it is needed.
19
+ * details of an item next to its list, or anywhere a read-only view of it is needed. While the
20
+ * item loads, it draws the labels with a skeleton of each value (decision 0034).
10
21
  */
11
22
  function ItemDetails(t0) {
12
- const $ = c(13);
23
+ const $ = c(20);
13
24
  const { item, columns, displays, "aria-label": ariaLabel, className } = t0;
25
+ const intl = usePanneauIntl();
14
26
  const renderValue = useRenderValue(displays);
15
27
  let t1;
16
28
  if ($[0] !== className) {
@@ -22,14 +34,14 @@ function ItemDetails(t0) {
22
34
  if ($[2] !== columns || $[3] !== item || $[4] !== renderValue) {
23
35
  let t3;
24
36
  if ($[6] !== item || $[7] !== renderValue) {
25
- t3 = (column) => /* @__PURE__ */ jsxs("div", {
37
+ t3 = (column, index) => /* @__PURE__ */ jsxs("div", {
26
38
  className: ItemDetails_module_default.entry,
27
39
  children: [/* @__PURE__ */ jsx("dt", {
28
40
  className: ItemDetails_module_default.label,
29
41
  children: column.label ?? column.id
30
42
  }), /* @__PURE__ */ jsx("dd", {
31
43
  className: ItemDetails_module_default.value,
32
- children: renderValue(item, column)
44
+ children: item !== void 0 ? renderValue(item, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
33
45
  })]
34
46
  }, column.id);
35
47
  $[6] = item;
@@ -54,7 +66,37 @@ function ItemDetails(t0) {
54
66
  $[11] = t2;
55
67
  $[12] = t3;
56
68
  } else t3 = $[12];
57
- return t3;
69
+ const details = t3;
70
+ if (item === void 0) {
71
+ let t4;
72
+ if ($[13] !== intl) {
73
+ t4 = intl.formatMessage(messages.loadingItem);
74
+ $[13] = intl;
75
+ $[14] = t4;
76
+ } else t4 = $[14];
77
+ let t5;
78
+ if ($[15] !== details) {
79
+ t5 = /* @__PURE__ */ jsx("div", {
80
+ inert: true,
81
+ "aria-hidden": "true",
82
+ children: details
83
+ });
84
+ $[15] = details;
85
+ $[16] = t5;
86
+ } else t5 = $[16];
87
+ let t6;
88
+ if ($[17] !== t4 || $[18] !== t5) {
89
+ t6 = /* @__PURE__ */ jsx(LoadingRegion, {
90
+ label: t4,
91
+ children: t5
92
+ });
93
+ $[17] = t4;
94
+ $[18] = t5;
95
+ $[19] = t6;
96
+ } else t6 = $[19];
97
+ return t6;
98
+ }
99
+ return details;
58
100
  }
59
101
  //#endregion
60
102
  export { ItemDetails };
@@ -1 +1 @@
1
- {"version":3,"file":"ItemDetails.js","names":["ariaLabel","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\n\nexport interface ItemDetailsProps {\n item: ListItem;\n /** The values to show, with their label and display, in order. */\n columns: readonly ListColumn[];\n /** Displays by name, over the built-in ones and those of the plugins. */\n displays?: Readonly<Record<string, DisplayEntry>>;\n 'aria-label'?: string;\n className?: string;\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed.\n */\nexport function ItemDetails({\n item,\n columns,\n displays,\n 'aria-label': ariaLabel,\n className,\n}: ItemDetailsProps) {\n const renderValue = useRenderValue(displays);\n return (\n <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n {columns.map((column) => (\n <div key={column.id} className={styles.entry}>\n <dt className={styles.label}>{column.label ?? column.id}</dt>\n <dd className={styles.value}>{renderValue(item, column)}</dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAA,MAAA,SAAA,UAAA,cAAA,WAAA,cAAA;CAOxB,MAAA,cAAoB,eAAe,QAAQ;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA;EAEH,KAAA,GAAGC,2BAAM,SAAU,SAAS;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,QAAA,EAAA,OAAA,aAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,QAAA,EAAA,OAAA,aAAA;GAClD,MAAA,WACT,qBAAA,OAAA;IAAgC,WAAAA,2BAAM;IAAtC,UAAA,CACI,oBAAA,MAAA;KAAe,WAAAA,2BAAM;KAAS,UAAA,OAAM,SAAU,OAAM;IAAS,CAAA,GAC7D,oBAAA,MAAA;KAAe,WAAAA,2BAAM;KAAS,UAAA,YAAY,MAAM,MAAM;IAAO,CAAA,CAC3D;GAHI,GAAA,OAAM,EAGV;GACT,EAAA,KAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EALA,KAAA,QAAO,IAAK,EAKZ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,aAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EANN,KAAA,oBAAA,MAAA;GAAgBF,cAAA;GAAsB,WAAA;GACjC,UAAA;EAMA,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAPL;AAOK"}
1
+ {"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","WIDTHS","ItemDetailsProps","item","columns","displays","Readonly","Record","className","ItemDetails","t0","$","_c","ariaLabel","intl","renderValue","t1","details","t2","t3","column","index","id","entry","label","value","undefined","length","map","t4","formatMessage","loadingItem","t5","t6","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport { messages } from './messages';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\n\n/** Widths of the values of a skeleton, varied so they read as text. */\nconst WIDTHS = ['70%', '40%', '55%', '30%', '65%'];\n\nexport interface ItemDetailsProps {\n /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */\n item: ListItem | undefined;\n /** The values to show, with their label and display, in order. */\n columns: readonly ListColumn[];\n /** Displays by name, over the built-in ones and those of the plugins. */\n displays?: Readonly<Record<string, DisplayEntry>>;\n 'aria-label'?: string;\n className?: string;\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed. While the\n * item loads, it draws the labels with a skeleton of each value (decision 0034).\n */\nexport function ItemDetails({\n item,\n columns,\n displays,\n 'aria-label': ariaLabel,\n className,\n}: ItemDetailsProps) {\n const intl = usePanneauIntl();\n const renderValue = useRenderValue(displays);\n const details = (\n <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n {columns.map((column, index) => (\n <div key={column.id} className={styles.entry}>\n <dt className={styles.label}>{column.label ?? column.id}</dt>\n <dd className={styles.value}>\n {item !== undefined ? (\n renderValue(item, column)\n ) : (\n <Skeleton width={WIDTHS[index % WIDTHS.length]} />\n )}\n </dd>\n </div>\n ))}\n </dl>\n );\n if (item === undefined) {\n return (\n <LoadingRegion label={intl.formatMessage(messages.loadingItem)}>\n <div inert aria-hidden=\"true\">\n {details}\n </div>\n </LoadingRegion>\n );\n }\n return details;\n}\n"],"mappings":";;;;;;;;;AASA,IAAMU,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;AAAK;;;;;;AAkBjD,SAAOQ,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAT,MAAAC,SAAAC,UAAA,cAAAQ,WAAAL,cAAAE;CAOxB,MAAAI,OAAarB,eAAe;CAC5B,MAAAsB,cAAoBf,eAAeK,QAAQ;CAAE,IAAAW;CAAA,IAAAL,EAAA,OAAAH,WAAA;EAEHQ,KAAArB,GAAGD,2BAAMuB,SAAUT,SAAS;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,WAAAO,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;EAAA,IAAAI;EAAA,IAAAR,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;GAClDI,MAAAC,QAAAC,UACT,qBAAA,OAAA;IAAgC,WAAA3B,2BAAM6B;IAAtC,UAAA,CACI,oBAAA,MAAA;KAAe,WAAA7B,2BAAM8B;KAASJ,UAAAA,OAAMI,SAAUJ,OAAME;IAAS,CAAA,GAC7D,oBAAA,MAAA;KAAe,WAAA5B,2BAAM+B;KAChBtB,UAAAA,SAASuB,KAAAA,IACNX,YAAYZ,MAAMiB,MAGtB,IADI,oBAAC,UAAD,EAAiB,OAAAnB,OAAOoB,QAAQpB,OAAM0B,QAAQ,CAAA;IAEjD,CAAA,CACH;GATIP,GAAAA,OAAME,EASV;GACTX,EAAA,KAAAR;GAAAQ,EAAA,KAAAI;GAAAJ,EAAA,KAAAQ;EAAA,OAAAA,KAAAR,EAAA;EAXAO,KAAAd,QAAOwB,IAAKT,EAWZ;EAACR,EAAA,KAAAP;EAAAO,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,aAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAZNC,KAAA,oBAAA,MAAA;GAAgBN,cAAAA;GAAsB,WAAAG;GACjCE,UAAAA;EAYA,CAAA;EAAAP,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAdT,MAAAM,UACIE;CAeJ,IAAIhB,SAASuB,KAAAA,GAAS;EAAA,IAAAG;EAAA,IAAAlB,EAAA,QAAAG,MAAA;GAEQe,KAAAf,KAAIgB,cAAelC,SAAQmC,WAAY;GAACpB,EAAA,MAAAG;GAAAH,EAAA,MAAAkB;EAAA,OAAAA,KAAAlB,EAAA;EAAA,IAAAqB;EAAA,IAAArB,EAAA,QAAAM,SAAA;GAC1De,KAAA,oBAAA,OAAA;IAAK,OAAA;IAAkB,eAAA;IAClBf,UAAAA;GACC,CAAA;GAAAN,EAAA,MAAAM;GAAAN,EAAA,MAAAqB;EAAA,OAAAA,KAAArB,EAAA;EAAA,IAAAsB;EAAA,IAAAtB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAqB,IAAA;GAHVC,KAAA,oBAAC,eAAD;IAAsB,OAAAJ;IAClBG,UAAAA;GADU,CAAA;GAIErB,EAAA,MAAAkB;GAAAlB,EAAA,MAAAqB;GAAArB,EAAA,MAAAsB;EAAA,OAAAA,KAAAtB,EAAA;EAAA,OAJhBsB;CAIgB;CAEvB,OACMhB;AAAO"}
package/dist/List.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type ListOptions } from '@panneau/core';
2
- import { type ListViewProps } from './ListView';
3
- import type { ListItem } from './types';
2
+ import { type ListViewProps } from './ListView.js';
3
+ import type { ListItem } from './types.js';
4
4
  export interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {
5
5
  /** Every item: the list searches, filters, sorts and paginates them in memory. */
6
6
  items: readonly ListItem[] | undefined;
package/dist/List.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ListView } from "./ListView.js";
2
2
  import { applyListQuery } from "./query.js";
3
3
  import { useList } from "@panneau/core";
4
+ import { c } from "react/compiler-runtime";
4
5
  import { usePanneauIntl } from "@panneau/ui";
5
6
  import { jsx } from "react/jsx-runtime";
6
7
  //#region src/List.tsx
@@ -12,25 +13,66 @@ import { jsx } from "react/jsx-runtime";
12
13
  *
13
14
  * The page size and the default sort are read once.
14
15
  */
15
- function List({ items, perPage = 20, defaultSort = [], router, ...props }) {
16
+ function List(t0) {
17
+ const $ = c(15);
18
+ const { items, perPage: t1, defaultSort: t2, router, ...props } = t0;
19
+ const perPage = t1 === void 0 ? 20 : t1;
20
+ let t3;
21
+ if ($[0] !== t2) {
22
+ t3 = t2 === void 0 ? [] : t2;
23
+ $[0] = t2;
24
+ $[1] = t3;
25
+ } else t3 = $[1];
26
+ const defaultSort = t3;
16
27
  const intl = usePanneauIntl();
17
- const { query, list } = useList({
18
- defaults: {
28
+ let t4;
29
+ if ($[2] !== defaultSort || $[3] !== perPage) {
30
+ t4 = {
19
31
  perPage,
20
32
  sort: defaultSort
21
- },
22
- ...router !== void 0 ? { router } : {}
23
- });
33
+ };
34
+ $[2] = defaultSort;
35
+ $[3] = perPage;
36
+ $[4] = t4;
37
+ } else t4 = $[4];
38
+ let t5;
39
+ if ($[5] !== router) {
40
+ t5 = router !== void 0 ? { router } : {};
41
+ $[5] = router;
42
+ $[6] = t5;
43
+ } else t5 = $[6];
44
+ let t6;
45
+ if ($[7] !== t4 || $[8] !== t5) {
46
+ t6 = {
47
+ defaults: t4,
48
+ ...t5
49
+ };
50
+ $[7] = t4;
51
+ $[8] = t5;
52
+ $[9] = t6;
53
+ } else t6 = $[9];
54
+ const { query, list } = useList(t6);
24
55
  const result = items !== void 0 ? applyListQuery(items, query, {
25
56
  columns: props.columns,
26
57
  locale: intl.locale
27
58
  }) : void 0;
28
- return /* @__PURE__ */ jsx(ListView, {
29
- ...props,
30
- list,
31
- items: result?.items,
32
- total: result?.total
33
- });
59
+ const t7 = result?.items;
60
+ const t8 = result?.total;
61
+ let t9;
62
+ if ($[10] !== list || $[11] !== props || $[12] !== t7 || $[13] !== t8) {
63
+ t9 = /* @__PURE__ */ jsx(ListView, {
64
+ ...props,
65
+ list,
66
+ items: t7,
67
+ total: t8
68
+ });
69
+ $[10] = list;
70
+ $[11] = props;
71
+ $[12] = t7;
72
+ $[13] = t8;
73
+ $[14] = t9;
74
+ } else t9 = $[14];
75
+ return t9;
34
76
  }
35
77
  //#endregion
36
78
  export { List };
package/dist/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","names":[],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n /** Every item: the list searches, filters, sorts and paginates them in memory. */\n items: readonly ListItem[] | undefined;\n /** Items per page. Defaults to 20. */\n perPage?: number;\n /** Default sort, as `sort` query values (`['-published_at']`). */\n defaultSort?: string[];\n /**\n * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n * `PanneauProvider`; `null` keeps it in memory.\n */\n router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n const intl = usePanneauIntl();\n const { query, list } = useList({\n defaults: { perPage, sort: defaultSort },\n ...(router !== undefined ? { router } : {}),\n });\n const result =\n items !== undefined\n ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n : undefined;\n return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,KAAK,EAAE,OAAO,UAAU,IAAI,cAAc,CAAA,GAAI,QAAQ,GAAG,SAAoB;CACzF,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,OAAO,SAAS,QAAQ;EAC5B,UAAU;GAAE;GAAS,MAAM;EAAY;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC7C,CAAC;CACD,MAAM,SACF,UAAU,KAAA,IACJ,eAAe,OAAO,OAAO;EAAE,SAAS,MAAM;EAAS,QAAQ,KAAK;CAAO,CAAC,IAC5E,KAAA;CACV,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAa;EAAM,OAAO,QAAQ;EAAO,OAAO,QAAQ;CAAM,CAAA;AACvF"}
1
+ {"version":3,"file":"List.js","names":["ListOptions","useList","usePanneauIntl","ListView","ListViewProps","applyListQuery","ListItem","ListProps","Omit","items","perPage","defaultSort","router","List","t0","$","_c","t1","t2","props","undefined","t3","intl","t4","sort","t5","t6","defaults","query","list","result","columns","locale","t7","t8","total","t9","_c"],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n /** Every item: the list searches, filters, sorts and paginates them in memory. */\n items: readonly ListItem[] | undefined;\n /** Items per page. Defaults to 20. */\n perPage?: number;\n /** Default sort, as `sort` query values (`['-published_at']`). */\n defaultSort?: string[];\n /**\n * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n * `PanneauProvider`; `null` keeps it in memory.\n */\n router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n const intl = usePanneauIntl();\n const { query, list } = useList({\n defaults: { perPage, sort: defaultSort },\n ...(router !== undefined ? { router } : {}),\n });\n const result =\n items !== undefined\n ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n : undefined;\n return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAOa,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAP,OAAAC,SAAAO,IAAAN,aAAAO,IAAAN,QAAA,GAAAO,UAAAL;CAAS,MAAAJ,UAAAO,OAAAG,KAAAA,IAAA,KAAAH;CAAY,IAAAI;CAAA,IAAAN,EAAA,OAAAG,IAAA;EAAEG,KAAAH,OAAAE,KAAAA,IAAA,CAAA,IAAAF;EAAgBH,EAAA,KAAAG;EAAAH,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhB,MAAAJ,cAAAU;CACxC,MAAAC,OAAapB,eAAe;CAAE,IAAAqB;CAAA,IAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAL,SAAA;EAEhBa,KAAA;GAAAb;GAAAc,MAAiBb;EAAY;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAL;EAAAK,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAH,QAAA;EACpCa,KAAAb,WAAWQ,KAAAA,IAAX,EAAAR,OAAqC,IAArC,CAAqC;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAQ,MAAAR,EAAA,OAAAU,IAAA;EAFdC,KAAA;GAAAC,UAClBJ;GAA8B,GACpCE;EACR;EAACV,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;EAAAV,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAHD,MAAA,EAAAa,OAAAC,SAAwB5B,QAAQyB,EAG/B;CACD,MAAAI,SACIrB,UAAUW,KAAAA,IACJf,eAAeI,OAAOmB,OAAO;EAAAG,SAAWZ,MAAKY;EAAQC,QAAUV,KAAIU;CAAQ,CACnE,IAFdZ,KAAAA;CAG2C,MAAAa,KAAAH,QAAMrB;CAAgB,MAAAyB,KAAAJ,QAAMK;CAAO,IAAAC;CAAA,IAAArB,EAAA,QAAAc,QAAAd,EAAA,QAAAI,SAAAJ,EAAA,QAAAkB,MAAAlB,EAAA,QAAAmB,IAAA;EAA3EE,KAAA,oBAAC,UAAD;GAAS,GAAKjB;GAAaU;GAAa,OAAAI;GAAsB,OAAAC;EAAa,CAAA;EAAInB,EAAA,MAAAc;EAAAd,EAAA,MAAAI;EAAAJ,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OAA/EqB;AAA+E"}
@@ -0,0 +1,17 @@
1
+ import type { ListColumn, ListLayoutEntry } from './types.js';
2
+ export interface ListSkeletonProps {
3
+ Layout: ListLayoutEntry;
4
+ columns: readonly ListColumn[];
5
+ /** The page size: as many rows, up to what fits. */
6
+ perPage: number | undefined;
7
+ sort: readonly string[];
8
+ label: string;
9
+ }
10
+ /**
11
+ * The first page of a list that loads (decision 0034): the list's own layout, with its columns
12
+ * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
13
+ * inert and hidden: its headers can't be used before the items are there, and the status message
14
+ * of the region says that the list loads.
15
+ */
16
+ export declare function ListSkeleton({ Layout, columns, perPage, sort, label }: ListSkeletonProps): import("react").JSX.Element;
17
+ //# sourceMappingURL=ListSkeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListSkeleton.d.ts","sourceRoot":"","sources":["../src/ListSkeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAUrE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,oDAAoD;IACpD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAgCxF"}
@@ -0,0 +1,111 @@
1
+ import { messages } from "./messages.js";
2
+ import { c } from "react/compiler-runtime";
3
+ import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
4
+ import { jsx } from "react/jsx-runtime";
5
+ //#region src/ListSkeleton.tsx
6
+ /** The most rows a skeleton draws: about what fits in a window. */
7
+ var MAX_ROWS = 10;
8
+ /** Widths of the values, varied so the rows read as text. */
9
+ var WIDTHS = [
10
+ "72%",
11
+ "48%",
12
+ "64%",
13
+ "40%",
14
+ "56%",
15
+ "80%"
16
+ ];
17
+ var none = () => null;
18
+ var nothing = () => void 0;
19
+ /**
20
+ * The first page of a list that loads (decision 0034): the list's own layout, with its columns
21
+ * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
22
+ * inert and hidden: its headers can't be used before the items are there, and the status message
23
+ * of the region says that the list loads.
24
+ */
25
+ function ListSkeleton(t0) {
26
+ const $ = c(17);
27
+ const { Layout, columns, perPage, sort, label } = t0;
28
+ const intl = usePanneauIntl();
29
+ const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));
30
+ let t1;
31
+ if ($[0] !== rows) {
32
+ t1 = Array.from({ length: rows }, _temp);
33
+ $[0] = rows;
34
+ $[1] = t1;
35
+ } else t1 = $[1];
36
+ const items = t1;
37
+ let t2;
38
+ if ($[2] !== columns || $[3] !== items) {
39
+ t2 = (item, column) => {
40
+ const offset = items.indexOf(item) + columns.indexOf(column);
41
+ return /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[offset % WIDTHS.length] });
42
+ };
43
+ $[2] = columns;
44
+ $[3] = items;
45
+ $[4] = t2;
46
+ } else t2 = $[4];
47
+ const renderValue = t2;
48
+ let t3;
49
+ if ($[5] !== intl) {
50
+ t3 = intl.formatMessage(messages.loading);
51
+ $[5] = intl;
52
+ $[6] = t3;
53
+ } else t3 = $[6];
54
+ let t4;
55
+ if ($[7] !== Layout || $[8] !== columns || $[9] !== items || $[10] !== label || $[11] !== renderValue || $[12] !== sort) {
56
+ t4 = /* @__PURE__ */ jsx("div", {
57
+ inert: true,
58
+ "aria-hidden": "true",
59
+ children: /* @__PURE__ */ jsx(Layout, {
60
+ items,
61
+ columns,
62
+ renderValue,
63
+ getItemLabel: _temp2,
64
+ getItemHref: none,
65
+ isCurrent: _temp3,
66
+ selectable: false,
67
+ isSelected: _temp4,
68
+ onToggle: nothing,
69
+ renderActions: none,
70
+ sort,
71
+ onSort: nothing,
72
+ label,
73
+ pageSelection: null
74
+ })
75
+ });
76
+ $[7] = Layout;
77
+ $[8] = columns;
78
+ $[9] = items;
79
+ $[10] = label;
80
+ $[11] = renderValue;
81
+ $[12] = sort;
82
+ $[13] = t4;
83
+ } else t4 = $[13];
84
+ let t5;
85
+ if ($[14] !== t3 || $[15] !== t4) {
86
+ t5 = /* @__PURE__ */ jsx(LoadingRegion, {
87
+ label: t3,
88
+ children: t4
89
+ });
90
+ $[14] = t3;
91
+ $[15] = t4;
92
+ $[16] = t5;
93
+ } else t5 = $[16];
94
+ return t5;
95
+ }
96
+ function _temp4() {
97
+ return false;
98
+ }
99
+ function _temp3() {
100
+ return false;
101
+ }
102
+ function _temp2(item_0) {
103
+ return item_0.id;
104
+ }
105
+ function _temp(_, index) {
106
+ return { id: `skeleton-${String(index)}` };
107
+ }
108
+ //#endregion
109
+ export { ListSkeleton };
110
+
111
+ //# sourceMappingURL=ListSkeleton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListSkeleton.js","names":["ReactNode","LoadingRegion","Skeleton","usePanneauIntl","messages","ListColumn","ListItem","ListLayoutEntry","MAX_ROWS","WIDTHS","none","nothing","undefined","ListSkeletonProps","Layout","columns","perPage","sort","label","ListSkeleton","t0","$","_c","intl","rows","Math","max","min","t1","Array","from","length","_temp","items","t2","item","column","offset","indexOf","renderValue","t3","formatMessage","loading","t4","_temp2","_temp3","_temp4","t5","item_0","id","_","index","String","_c"],"sources":["../src/ListSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from './messages';\nimport type { ListColumn, ListItem, ListLayoutEntry } from './types';\n\n/** The most rows a skeleton draws: about what fits in a window. */\nconst MAX_ROWS = 10;\n/** Widths of the values, varied so the rows read as text. */\nconst WIDTHS = ['72%', '48%', '64%', '40%', '56%', '80%'];\n\nconst none = () => null;\nconst nothing = () => undefined;\n\nexport interface ListSkeletonProps {\n Layout: ListLayoutEntry;\n columns: readonly ListColumn[];\n /** The page size: as many rows, up to what fits. */\n perPage: number | undefined;\n sort: readonly string[];\n label: string;\n}\n\n/**\n * The first page of a list that loads (decision 0034): the list's own layout, with its columns\n * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is\n * inert and hidden: its headers can't be used before the items are there, and the status message\n * of the region says that the list loads.\n */\nexport function ListSkeleton({ Layout, columns, perPage, sort, label }: ListSkeletonProps) {\n const intl = usePanneauIntl();\n const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));\n const items: ListItem[] = Array.from({ length: rows }, (_, index) => ({\n id: `skeleton-${String(index)}`,\n }));\n const renderValue = (item: ListItem, column: ListColumn): ReactNode => {\n const offset = items.indexOf(item) + columns.indexOf(column);\n return <Skeleton width={WIDTHS[offset % WIDTHS.length]} />;\n };\n return (\n <LoadingRegion label={intl.formatMessage(messages.loading)}>\n <div inert aria-hidden=\"true\">\n <Layout\n items={items}\n columns={columns}\n renderValue={renderValue}\n getItemLabel={(item) => item.id}\n getItemHref={none}\n isCurrent={() => false}\n selectable={false}\n isSelected={() => false}\n onToggle={nothing}\n renderActions={none}\n sort={sort}\n onSort={nothing}\n label={label}\n pageSelection={null}\n />\n </div>\n </LoadingRegion>\n );\n}\n"],"mappings":";;;;;;AAQA,IAAMQ,WAAW;;AAEjB,IAAMC,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAExD,IAAMC,aAAa;AACnB,IAAMC,gBAAgBC,KAAAA;;;;;;;AAiBtB,SAAOO,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAsB,MAAA,EAAAR,QAAAC,SAAAC,SAAAC,MAAAC,UAAAE;CACzB,MAAAG,OAAapB,eAAe;CAC5B,MAAAqB,OAAaC,KAAIC,IAAK,GAAGD,KAAIE,IAAKX,WAAAR,UAAqBA,QAAQ,CAAC;CAAE,IAAAoB;CAAA,IAAAP,EAAA,OAAAG,MAAA;EACxCI,KAAAC,MAAKC,KAAM,EAAAC,QAAUP,KAAK,GAAGQ,KAErD;EAACX,EAAA,KAAAG;EAAAH,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAFH,MAAAY,QAA0BL;CAEtB,IAAAM;CAAA,IAAAb,EAAA,OAAAN,WAAAM,EAAA,OAAAY,OAAA;EACgBC,MAAAC,MAAAC,WAAA;GAChB,MAAAC,SAAeJ,MAAKK,QAASH,IAAI,IAAIpB,QAAOuB,QAASF,MAAM;GAAE,OACtD,oBAAC,UAAD,EAAiB,OAAA3B,OAAO4B,SAAS5B,OAAMsB,QAAQ,CAAA;EAAI;EAC7DV,EAAA,KAAAN;EAAAM,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAHD,MAAAkB,cAAoBL;CAGlB,IAAAM;CAAA,IAAAnB,EAAA,OAAAE,MAAA;EAEwBiB,KAAAjB,KAAIkB,cAAerC,SAAQsC,OAAQ;EAACrB,EAAA,KAAAE;EAAAF,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAP,UAAAO,EAAA,OAAAN,WAAAM,EAAA,OAAAY,SAAAZ,EAAA,QAAAH,SAAAG,EAAA,QAAAkB,eAAAlB,EAAA,QAAAJ,MAAA;EACtD0B,KAAA,oBAAA,OAAA;GAAK,OAAA;GAAkB,eAAA;GACnB,UAAA,oBAAC,QAAD;IACWV;IACElB;IACIwB;IACC,cAAAK;IACDlC,aAAAA;IACF,WAAAmC;IACC,YAAA;IACA,YAAAC;IACFnC,UAAAA;IACKD,eAAAA;IACTO;IACEN,QAAAA;IACDO;IACQ,eAAA;GAAI,CAAA;EAErB,CAAA;EAAAG,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAY;EAAAZ,EAAA,MAAAH;EAAAG,EAAA,MAAAkB;EAAAlB,EAAA,MAAAJ;EAAAI,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,IAAA;EAlBVI,KAAA,oBAAC,eAAD;GAAsB,OAAAP;GAClBG,UAAAA;EADU,CAAA;EAmBEtB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAnBhB0B;AAmBgB;AA9BjB,SAAAD,SAAA;CAAA,OAqB+B;AAAK;AArBpC,SAAAD,SAAA;CAAA,OAmB8B;AAAK;AAnBnC,SAAAD,OAAAI,QAAA;CAAA,OAiBqCb,OAAIc;AAAG;AAjB5C,SAAAjB,MAAAkB,GAAAC,OAAA;CAAA,OAGmE,EAAAF,IAC9D,YAAYG,OAAOD,KAAK,IAChC;AAAC"}
@@ -1,13 +1,16 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import type { List } from '@panneau/core';
3
3
  import type { Field, Filter } from '@panneau/protocol';
4
- import { type ListActions } from './actions/actions';
5
- import type { ActionIcons } from './actions/icons';
6
- import type { DisplayEntry, FilterEntry, ListActionHandler, ListActionPreviewer, ListColumn, ListItem, ListLayoutEntry } from './types';
4
+ import { type ListActions } from './actions/actions.js';
5
+ import type { ActionIcons } from './actions/icons.js';
6
+ import type { DisplayEntry, FilterEntry, ListActionHandler, ListActionPreviewer, ListColumn, ListItem, ListLayoutEntry } from './types.js';
7
7
  export interface ListViewProps {
8
8
  /** The list state of `@panneau/core` (`useList()`): query and selection. */
9
9
  list: List;
10
- /** The items of the current page. `undefined` while they load for the first time. */
10
+ /**
11
+ * The items of the current page. `undefined` while they load for the first time: the list
12
+ * draws a skeleton of its rows, from its columns and its page size.
13
+ */
11
14
  items: readonly ListItem[] | undefined;
12
15
  columns: readonly ListColumn[];
13
16
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../src/ListView.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../src/ListView.tsx"],"names":[],"mappings":"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"}