@panneau/lists 5.0.0-alpha.1 → 5.0.0-alpha.10

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 (113) hide show
  1. package/README.md +3 -3
  2. package/dist/ItemDetails.css +34 -0
  3. package/dist/ItemDetails.d.ts +18 -0
  4. package/dist/ItemDetails.d.ts.map +1 -0
  5. package/dist/ItemDetails.js +104 -0
  6. package/dist/ItemDetails.js.map +1 -0
  7. package/dist/ItemDetails.module.js +16 -0
  8. package/dist/ItemDetails.module.js.map +1 -0
  9. package/dist/List.d.ts +2 -2
  10. package/dist/List.js +54 -12
  11. package/dist/List.js.map +1 -1
  12. package/dist/ListSkeleton.d.ts +17 -0
  13. package/dist/ListSkeleton.d.ts.map +1 -0
  14. package/dist/ListSkeleton.js +111 -0
  15. package/dist/ListSkeleton.js.map +1 -0
  16. package/dist/ListView.css +16 -16
  17. package/dist/ListView.d.ts +35 -6
  18. package/dist/ListView.d.ts.map +1 -1
  19. package/dist/ListView.js +544 -211
  20. package/dist/ListView.js.map +1 -1
  21. package/dist/ListView.module.js +10 -10
  22. package/dist/actions/ActionButton.d.ts +1 -1
  23. package/dist/actions/ActionButton.d.ts.map +1 -1
  24. package/dist/actions/ActionButton.js +90 -22
  25. package/dist/actions/ActionButton.js.map +1 -1
  26. package/dist/actions/Actions.css +9 -9
  27. package/dist/actions/Actions.module.js +6 -6
  28. package/dist/actions/ConfirmDialog.d.ts +15 -3
  29. package/dist/actions/ConfirmDialog.d.ts.map +1 -1
  30. package/dist/actions/ConfirmDialog.js +103 -89
  31. package/dist/actions/ConfirmDialog.js.map +1 -1
  32. package/dist/actions/RowActions.d.ts +6 -7
  33. package/dist/actions/RowActions.d.ts.map +1 -1
  34. package/dist/actions/RowActions.js +59 -53
  35. package/dist/actions/RowActions.js.map +1 -1
  36. package/dist/actions/actions.d.ts +5 -4
  37. package/dist/actions/actions.d.ts.map +1 -1
  38. package/dist/actions/actions.js +7 -14
  39. package/dist/actions/actions.js.map +1 -1
  40. package/dist/actions/icons.js.map +1 -1
  41. package/dist/cx.js.map +1 -1
  42. package/dist/displays/Displays.css +25 -13
  43. package/dist/displays/Displays.module.js +18 -14
  44. package/dist/displays/Displays.module.js.map +1 -1
  45. package/dist/displays/displays.d.ts +18 -3
  46. package/dist/displays/displays.d.ts.map +1 -1
  47. package/dist/displays/displays.js +355 -12
  48. package/dist/displays/displays.js.map +1 -1
  49. package/dist/filters/Filters.css +34 -20
  50. package/dist/filters/Filters.d.ts +1 -1
  51. package/dist/filters/Filters.js.map +1 -1
  52. package/dist/filters/Filters.module.js +13 -9
  53. package/dist/filters/Filters.module.js.map +1 -1
  54. package/dist/filters/controls.d.ts +1 -1
  55. package/dist/filters/controls.d.ts.map +1 -1
  56. package/dist/filters/controls.js +57 -35
  57. package/dist/filters/controls.js.map +1 -1
  58. package/dist/filters/format.d.ts +1 -1
  59. package/dist/filters/format.js.map +1 -1
  60. package/dist/index.d.ts +19 -18
  61. package/dist/index.d.ts.map +1 -1
  62. package/dist/index.js +4 -3
  63. package/dist/layouts/CardsLayout.css +22 -11
  64. package/dist/layouts/CardsLayout.d.ts +2 -2
  65. package/dist/layouts/CardsLayout.d.ts.map +1 -1
  66. package/dist/layouts/CardsLayout.js +39 -35
  67. package/dist/layouts/CardsLayout.js.map +1 -1
  68. package/dist/layouts/CardsLayout.module.js +8 -8
  69. package/dist/layouts/CardsLayout.module.js.map +1 -1
  70. package/dist/layouts/ItemTitle.d.ts +3 -1
  71. package/dist/layouts/ItemTitle.d.ts.map +1 -1
  72. package/dist/layouts/ItemTitle.js +12 -8
  73. package/dist/layouts/ItemTitle.js.map +1 -1
  74. package/dist/layouts/TableLayout.css +51 -35
  75. package/dist/layouts/TableLayout.d.ts +2 -2
  76. package/dist/layouts/TableLayout.d.ts.map +1 -1
  77. package/dist/layouts/TableLayout.js +38 -33
  78. package/dist/layouts/TableLayout.js.map +1 -1
  79. package/dist/layouts/TableLayout.module.js +14 -14
  80. package/dist/layouts/TableLayout.module.js.map +1 -1
  81. package/dist/layouts/builtIn.d.ts +1 -1
  82. package/dist/layouts/builtIn.js.map +1 -1
  83. package/dist/layouts/link.css +3 -3
  84. package/dist/layouts/link.module.js +1 -1
  85. package/dist/plugin.d.ts +1 -1
  86. package/dist/plugin.js.map +1 -1
  87. package/dist/query.d.ts +1 -1
  88. package/dist/query.js.map +1 -1
  89. package/dist/selection.d.ts +1 -1
  90. package/dist/selection.js.map +1 -1
  91. package/dist/toolbar/LayoutSwitch.js.map +1 -1
  92. package/dist/toolbar/Pagination.d.ts +33 -0
  93. package/dist/toolbar/Pagination.d.ts.map +1 -1
  94. package/dist/toolbar/Pagination.js +282 -42
  95. package/dist/toolbar/Pagination.js.map +1 -1
  96. package/dist/toolbar/SearchField.js.map +1 -1
  97. package/dist/toolbar/SortSelect.d.ts +1 -1
  98. package/dist/toolbar/SortSelect.js.map +1 -1
  99. package/dist/toolbar/Toolbar.css +12 -12
  100. package/dist/toolbar/Toolbar.module.js +7 -7
  101. package/dist/types.d.ts +16 -1
  102. package/dist/types.d.ts.map +1 -1
  103. package/dist/useDraft.js.map +1 -1
  104. package/dist/useListState.js.map +1 -1
  105. package/dist/useRenderValue.d.ts +8 -0
  106. package/dist/useRenderValue.d.ts.map +1 -0
  107. package/dist/useRenderValue.js +64 -0
  108. package/dist/useRenderValue.js.map +1 -0
  109. package/dist/values.d.ts +3 -1
  110. package/dist/values.d.ts.map +1 -1
  111. package/dist/values.js +6 -2
  112. package/dist/values.js.map +1 -1
  113. package/package.json +9 -9
@@ -1 +1 @@
1
- {"version":3,"file":"LayoutSwitch.js","names":["layout","label","_c","styles"],"sources":["../../src/toolbar/LayoutSwitch.tsx"],"sourcesContent":["import { LayoutGrid, type LucideIcon, Rows3, Square } from 'lucide-react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, Tooltip, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nconst ICONS: Record<string, LucideIcon> = { table: Rows3, cards: LayoutGrid };\n\nexport interface LayoutSwitchProps {\n layouts: readonly string[];\n value: string;\n onChange: (layout: string) => void;\n}\n\n/** Buttons to show the items as a table, as cards, or in a plugin's layout. */\nexport function LayoutSwitch({ layouts, value, onChange }: LayoutSwitchProps) {\n const intl = usePanneauIntl();\n const labels: Record<string, string> = {\n table: intl.formatMessage(messages.layoutTable),\n cards: intl.formatMessage(messages.layoutCards),\n };\n return (\n <ToggleButtonGroup\n aria-label={intl.formatMessage(messages.layout)}\n selectionMode=\"single\"\n disallowEmptySelection\n selectedKeys={[value]}\n onSelectionChange={(keys) => {\n const [next] = [...keys];\n if (next !== undefined) {\n onChange(String(next));\n }\n }}\n className={styles.layouts}\n >\n {layouts.map((layout) => {\n const label = labels[layout] ?? layout;\n return (\n <Tooltip key={layout} content={label}>\n <ToggleButton\n id={layout}\n aria-label={label}\n className={styles.layoutButton}\n >\n <Icon icon={ICONS[layout] ?? Square} />\n </ToggleButton>\n </Tooltip>\n );\n })}\n </ToggleButtonGroup>\n );\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,QAAoC;CAAE,OAAO;CAAO,OAAO;AAAW;;AAS5E,SAAO,aAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAsB,MAAA,EAAA,SAAA,OAAA,aAAA;CACzB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAEnB,KAAA,KAAI,cAAe,SAAQ,WAAY;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EACxC,KAAA,KAAI,cAAe,SAAQ,WAAY;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAFZ,KAAA;GAAA,OAC5B;GAAwC,OACxC;EACX;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAHD,MAAA,SAAuC;CAGrC,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAGkB,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAGjC,KAAA,CAAC,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA;EACF,MAAA,SAAA;GACf,MAAA,CAAA,QAAe,CAAA,GAAI,IAAI;GACvB,IAAI,SAAS,KAAA,GACT,SAAS,OAAO,IAAI,CAAC;EACxB;EACJ,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,SAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,QAAA;GAGY,MAAA,WAAA;IACT,MAAA,QAAc,OAAO,WAAP;IAAyB,OAEnC,oBAAC,SAAD;KAA+BD,SAAA;KAC3B,UAAA,oBAAC,cAAD;MACQD,IAAA;MACQC,cAAA;MACD,WAAAE,uBAAM;MAEjB,UAAA,oBAAC,MAAD,EAAY,MAAA,MAAM,WAAN,OAAuB,CAAA;KAL1B,CAAA;IADT,GAAM,MAAN;GAQE;GAEjB,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAbA,KAAA,QAAO,IAAK,EAaZ;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EA1BN,KAAA,oBAAC,mBAAD;GACgB,cAAA;GACE,eAAA;GACd,wBAAA;GACc,cAAA;GACK,mBAAA;GAMR,WAAAA,uBAAM;GAEhB,UAAA;EAba,CAAA;EA2BE,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OA3BpB;AA2BoB"}
1
+ {"version":3,"file":"LayoutSwitch.js","names":["LayoutGrid","LucideIcon","Rows3","Square","ToggleButton","ToggleButtonGroup","Icon","Tooltip","usePanneauIntl","messages","styles","ICONS","Record","table","cards","LayoutSwitchProps","layouts","value","onChange","layout","LayoutSwitch","t0","$","_c","intl","t1","formatMessage","layoutTable","t2","layoutCards","t3","labels","t4","t5","t6","keys","next","undefined","String","t7","t8","label","layoutButton","map","_c","styles"],"sources":["../../src/toolbar/LayoutSwitch.tsx"],"sourcesContent":["import { LayoutGrid, type LucideIcon, Rows3, Square } from 'lucide-react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, Tooltip, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nconst ICONS: Record<string, LucideIcon> = { table: Rows3, cards: LayoutGrid };\n\nexport interface LayoutSwitchProps {\n layouts: readonly string[];\n value: string;\n onChange: (layout: string) => void;\n}\n\n/** Buttons to show the items as a table, as cards, or in a plugin's layout. */\nexport function LayoutSwitch({ layouts, value, onChange }: LayoutSwitchProps) {\n const intl = usePanneauIntl();\n const labels: Record<string, string> = {\n table: intl.formatMessage(messages.layoutTable),\n cards: intl.formatMessage(messages.layoutCards),\n };\n return (\n <ToggleButtonGroup\n aria-label={intl.formatMessage(messages.layout)}\n selectionMode=\"single\"\n disallowEmptySelection\n selectedKeys={[value]}\n onSelectionChange={(keys) => {\n const [next] = [...keys];\n if (next !== undefined) {\n onChange(String(next));\n }\n }}\n className={styles.layouts}\n >\n {layouts.map((layout) => {\n const label = labels[layout] ?? layout;\n return (\n <Tooltip key={layout} content={label}>\n <ToggleButton\n id={layout}\n aria-label={label}\n className={styles.layoutButton}\n >\n <Icon icon={ICONS[layout] ?? Square} />\n </ToggleButton>\n </Tooltip>\n );\n })}\n </ToggleButtonGroup>\n );\n}\n"],"mappings":";;;;;;;;AAQA,IAAMW,QAAoC;CAAEE,OAAOX;CAAOY,OAAOd;AAAW;;AAS5E,SAAOoB,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAsB,MAAA,EAAAP,SAAAC,OAAAC,aAAAG;CACzB,MAAAG,OAAahB,eAAe;CAAE,IAAAiB;CAAA,IAAAH,EAAA,OAAAE,MAAA;EAEnBC,KAAAD,KAAIE,cAAejB,SAAQkB,WAAY;EAACL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAA;EACxCI,KAAAJ,KAAIE,cAAejB,SAAQoB,WAAY;EAACP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAG,MAAAH,EAAA,OAAAM,IAAA;EAFZE,KAAA;GAAAjB,OAC5BY;GAAwCX,OACxCc;EACX;EAACN,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAHD,MAAAS,SAAuCD;CAGrC,IAAAE;CAAA,IAAAV,EAAA,OAAAE,MAAA;EAGkBQ,KAAAR,KAAIE,cAAejB,SAAQU,MAAO;EAACG,EAAA,KAAAE;EAAAF,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAL,OAAA;EAGjCgB,KAAA,CAAChB,KAAK;EAACK,EAAA,KAAAL;EAAAK,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAJ,UAAA;EACFgB,MAAAC,SAAA;GACf,MAAA,CAAAC,QAAe,CAAA,GAAID,IAAI;GACvB,IAAIC,SAASC,KAAAA,GACTnB,SAASoB,OAAOF,IAAI,CAAC;EACxB;EACJd,EAAA,MAAAJ;EAAAI,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAS,UAAAT,EAAA,QAAAN,SAAA;EAAA,IAAAwB;EAAA,IAAAlB,EAAA,QAAAS,QAAA;GAGYS,MAAArB,WAAA;IACT,MAAAsB,QAAcV,OAAOZ,WAAPA;IAAyB,OAEnC,oBAAC,SAAD;KAA+BsB,SAAAA;KAC3B,UAAA,oBAAC,cAAD;MACQtB,IAAAA;MACQsB,cAAAA;MACD,WAAA/B,uBAAMgC;MAEjB,UAAA,oBAAC,MAAD,EAAY,MAAA/B,MAAMQ,WAANhB,OAAuB,CAAA;KAL1B,CAAA;IADT,GAAMgB,MAAN;GAQE;GAEjBG,EAAA,MAAAS;GAAAT,EAAA,MAAAkB;EAAA,OAAAA,KAAAlB,EAAA;EAbAiB,KAAAvB,QAAO2B,IAAKH,EAaZ;EAAClB,EAAA,MAAAS;EAAAT,EAAA,MAAAN;EAAAM,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAiB,IAAA;EA1BNC,KAAA,oBAAC,mBAAD;GACgB,cAAAR;GACE,eAAA;GACd,wBAAA;GACc,cAAAC;GACK,mBAAAC;GAMR,WAAAxB,uBAAMM;GAEhBuB,UAAAA;EAba,CAAA;EA2BEjB,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OA3BpBkB;AA2BoB"}
@@ -1,3 +1,4 @@
1
+ import type { ListResponse } from '@panneau/protocol';
1
2
  export interface PaginationProps {
2
3
  page: number;
3
4
  perPage: number;
@@ -10,4 +11,36 @@ export interface PaginationProps {
10
11
  }
11
12
  /** The range of items shown, the page, and buttons to the previous and next pages. */
12
13
  export declare function Pagination({ page, perPage, total, onPageChange, perPageOptions, onPerPageChange, }: PaginationProps): import("react").JSX.Element;
14
+ export interface CursorPaginationProps {
15
+ perPage: number;
16
+ /** Whether there is a page before: the list isn't on its first page. */
17
+ hasPrevious: boolean;
18
+ /** Whether there is a page after: the page has a `nextCursor`. */
19
+ hasNext: boolean;
20
+ onPrevious: () => void;
21
+ onNext: () => void;
22
+ /** Page sizes to choose from. Without them, the page size can't be changed. */
23
+ perPageOptions?: readonly number[] | undefined;
24
+ onPerPageChange?: (perPage: number) => void;
25
+ }
26
+ /**
27
+ * Buttons to the previous and next pages of a list paged with cursors, which has no page numbers
28
+ * and no total (decision 0039).
29
+ */
30
+ export declare function CursorPagination({ perPage, hasPrevious, hasNext, onPrevious, onNext, perPageOptions, onPerPageChange, }: CursorPaginationProps): import("react").JSX.Element;
31
+ /**
32
+ * The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for
33
+ * numbered pages, `cursors` for a list paged with cursors.
34
+ *
35
+ * ```tsx
36
+ * <ListView {...getPagingProps(data?.meta)} items={data?.data} … />
37
+ * ```
38
+ */
39
+ export declare function getPagingProps(meta: ListResponse['meta'] | undefined): {
40
+ total?: number;
41
+ cursors?: {
42
+ next: string | null;
43
+ previous?: string | null;
44
+ };
45
+ };
13
46
  //# sourceMappingURL=Pagination.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/toolbar/Pagination.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAmB,EACnB,eAAe,GAClB,EAAE,eAAe,+BAyCjB"}
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/toolbar/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAmB,EACnB,eAAe,GAClB,EAAE,eAAe,+BAyCjB;AAED,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,WAAW,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,OAAO,EACP,UAAU,EACV,MAAM,EACN,cAAmB,EACnB,eAAe,GAClB,EAAE,qBAAqB,+BAmCvB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CAC/D,CAaA"}
@@ -1,62 +1,302 @@
1
1
  import { messages } from "../messages.js";
2
2
  import Toolbar_module_default from "./Toolbar.module.js";
3
+ import { c } from "react/compiler-runtime";
3
4
  import { IconButton, Select, usePanneauIntl } from "@panneau/ui";
4
5
  import { jsx, jsxs } from "react/jsx-runtime";
5
6
  import { ChevronLeft, ChevronRight } from "lucide-react";
7
+ import { isCursorPage } from "@panneau/protocol/runtime";
6
8
  //#region src/toolbar/Pagination.tsx
7
9
  /** The range of items shown, the page, and buttons to the previous and next pages. */
8
- function Pagination({ page, perPage, total, onPageChange, perPageOptions = [], onPerPageChange }) {
10
+ function Pagination(t0) {
11
+ const $ = c(44);
12
+ const { page, perPage, total, onPageChange, perPageOptions: t1, onPerPageChange } = t0;
13
+ const perPageOptions = t1 === void 0 ? [] : t1;
9
14
  const intl = usePanneauIntl();
10
15
  const lastPage = Math.max(1, Math.ceil(total / perPage));
11
16
  const start = total === 0 ? 0 : (page - 1) * perPage + 1;
12
17
  const end = Math.min(total, page * perPage);
13
- const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort((a, b) => a - b);
14
- return /* @__PURE__ */ jsxs("nav", {
15
- "aria-label": intl.formatMessage(messages.pagination),
16
- className: Toolbar_module_default.pagination,
17
- children: [/* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.range, {
18
+ const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(_temp);
19
+ let t2;
20
+ if ($[0] !== intl) {
21
+ t2 = intl.formatMessage(messages.pagination);
22
+ $[0] = intl;
23
+ $[1] = t2;
24
+ } else t2 = $[1];
25
+ const t3 = Toolbar_module_default;
26
+ let t4;
27
+ if ($[2] !== end || $[3] !== intl || $[4] !== start || $[5] !== total) {
28
+ t4 = intl.formatMessage(messages.range, {
18
29
  start,
19
30
  end,
20
31
  total
21
- }) }), /* @__PURE__ */ jsxs("div", {
22
- className: Toolbar_module_default.pages,
32
+ });
33
+ $[2] = end;
34
+ $[3] = intl;
35
+ $[4] = start;
36
+ $[5] = total;
37
+ $[6] = t4;
38
+ } else t4 = $[6];
39
+ let t5;
40
+ if ($[7] !== t4) {
41
+ t5 = /* @__PURE__ */ jsx("span", { children: t4 });
42
+ $[7] = t4;
43
+ $[8] = t5;
44
+ } else t5 = $[8];
45
+ const t6 = Toolbar_module_default;
46
+ const t7 = perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
47
+ "aria-label": intl.formatMessage(messages.perPage),
48
+ options: sizes.map(_temp2),
49
+ value: perPage,
50
+ onChange: (value) => {
51
+ if (typeof value === "number") onPerPageChange(value);
52
+ },
53
+ className: Toolbar_module_default.perPage
54
+ }) : null;
55
+ let t8;
56
+ if ($[9] !== intl) {
57
+ t8 = intl.formatMessage(messages.previousPage);
58
+ $[9] = intl;
59
+ $[10] = t8;
60
+ } else t8 = $[10];
61
+ const t9 = page <= 1;
62
+ let t10;
63
+ if ($[11] !== onPageChange || $[12] !== page) {
64
+ t10 = () => onPageChange(page - 1);
65
+ $[11] = onPageChange;
66
+ $[12] = page;
67
+ $[13] = t10;
68
+ } else t10 = $[13];
69
+ let t11;
70
+ if ($[14] !== t10 || $[15] !== t8 || $[16] !== t9) {
71
+ t11 = /* @__PURE__ */ jsx(IconButton, {
72
+ icon: ChevronLeft,
73
+ label: t8,
74
+ isDisabled: t9,
75
+ onPress: t10
76
+ });
77
+ $[14] = t10;
78
+ $[15] = t8;
79
+ $[16] = t9;
80
+ $[17] = t11;
81
+ } else t11 = $[17];
82
+ let t12;
83
+ if ($[18] !== intl || $[19] !== lastPage || $[20] !== page) {
84
+ t12 = intl.formatMessage(messages.pageOf, {
85
+ page,
86
+ lastPage
87
+ });
88
+ $[18] = intl;
89
+ $[19] = lastPage;
90
+ $[20] = page;
91
+ $[21] = t12;
92
+ } else t12 = $[21];
93
+ let t13;
94
+ if ($[22] !== t12) {
95
+ t13 = /* @__PURE__ */ jsx("span", {
96
+ "aria-current": "page",
97
+ children: t12
98
+ });
99
+ $[22] = t12;
100
+ $[23] = t13;
101
+ } else t13 = $[23];
102
+ let t14;
103
+ if ($[24] !== intl) {
104
+ t14 = intl.formatMessage(messages.nextPage);
105
+ $[24] = intl;
106
+ $[25] = t14;
107
+ } else t14 = $[25];
108
+ const t15 = page >= lastPage;
109
+ let t16;
110
+ if ($[26] !== onPageChange || $[27] !== page) {
111
+ t16 = () => onPageChange(page + 1);
112
+ $[26] = onPageChange;
113
+ $[27] = page;
114
+ $[28] = t16;
115
+ } else t16 = $[28];
116
+ let t17;
117
+ if ($[29] !== t14 || $[30] !== t15 || $[31] !== t16) {
118
+ t17 = /* @__PURE__ */ jsx(IconButton, {
119
+ icon: ChevronRight,
120
+ label: t14,
121
+ isDisabled: t15,
122
+ onPress: t16
123
+ });
124
+ $[29] = t14;
125
+ $[30] = t15;
126
+ $[31] = t16;
127
+ $[32] = t17;
128
+ } else t17 = $[32];
129
+ let t18;
130
+ if ($[33] !== t11 || $[34] !== t13 || $[35] !== t17 || $[36] !== t6.pages || $[37] !== t7) {
131
+ t18 = /* @__PURE__ */ jsxs("div", {
132
+ className: t6.pages,
23
133
  children: [
24
- perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
25
- "aria-label": intl.formatMessage(messages.perPage),
26
- options: sizes.map((size) => ({
27
- value: size,
28
- label: String(size)
29
- })),
30
- value: perPage,
31
- onChange: (value) => {
32
- if (typeof value === "number") onPerPageChange(value);
33
- },
34
- className: Toolbar_module_default.perPage
35
- }) : null,
36
- /* @__PURE__ */ jsx(IconButton, {
37
- icon: ChevronLeft,
38
- label: intl.formatMessage(messages.previousPage),
39
- isDisabled: page <= 1,
40
- onPress: () => onPageChange(page - 1)
41
- }),
42
- /* @__PURE__ */ jsx("span", {
43
- "aria-current": "page",
44
- children: intl.formatMessage(messages.pageOf, {
45
- page,
46
- lastPage
47
- })
48
- }),
49
- /* @__PURE__ */ jsx(IconButton, {
50
- icon: ChevronRight,
51
- label: intl.formatMessage(messages.nextPage),
52
- isDisabled: page >= lastPage,
53
- onPress: () => onPageChange(page + 1)
54
- })
134
+ t7,
135
+ t11,
136
+ t13,
137
+ t17
55
138
  ]
56
- })]
57
- });
139
+ });
140
+ $[33] = t11;
141
+ $[34] = t13;
142
+ $[35] = t17;
143
+ $[36] = t6.pages;
144
+ $[37] = t7;
145
+ $[38] = t18;
146
+ } else t18 = $[38];
147
+ let t19;
148
+ if ($[39] !== t18 || $[40] !== t2 || $[41] !== t3.pagination || $[42] !== t5) {
149
+ t19 = /* @__PURE__ */ jsxs("nav", {
150
+ "aria-label": t2,
151
+ className: t3.pagination,
152
+ children: [t5, t18]
153
+ });
154
+ $[39] = t18;
155
+ $[40] = t2;
156
+ $[41] = t3.pagination;
157
+ $[42] = t5;
158
+ $[43] = t19;
159
+ } else t19 = $[43];
160
+ return t19;
161
+ }
162
+ function _temp2(size) {
163
+ return {
164
+ value: size,
165
+ label: String(size)
166
+ };
167
+ }
168
+ function _temp(a, b) {
169
+ return a - b;
170
+ }
171
+ /**
172
+ * Buttons to the previous and next pages of a list paged with cursors, which has no page numbers
173
+ * and no total (decision 0039).
174
+ */
175
+ function CursorPagination(t0) {
176
+ const $ = c(25);
177
+ const { perPage, hasPrevious, hasNext, onPrevious, onNext, perPageOptions: t1, onPerPageChange } = t0;
178
+ const perPageOptions = t1 === void 0 ? [] : t1;
179
+ const intl = usePanneauIntl();
180
+ const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(_temp3);
181
+ let t2;
182
+ if ($[0] !== intl) {
183
+ t2 = intl.formatMessage(messages.pagination);
184
+ $[0] = intl;
185
+ $[1] = t2;
186
+ } else t2 = $[1];
187
+ const t3 = Toolbar_module_default;
188
+ let t4;
189
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
190
+ t4 = /* @__PURE__ */ jsx("span", {});
191
+ $[2] = t4;
192
+ } else t4 = $[2];
193
+ const t5 = Toolbar_module_default;
194
+ const t6 = perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
195
+ "aria-label": intl.formatMessage(messages.perPage),
196
+ options: sizes.map(_temp4),
197
+ value: perPage,
198
+ onChange: (value) => {
199
+ if (typeof value === "number") onPerPageChange(value);
200
+ },
201
+ className: Toolbar_module_default.perPage
202
+ }) : null;
203
+ let t7;
204
+ if ($[3] !== intl) {
205
+ t7 = intl.formatMessage(messages.previousPage);
206
+ $[3] = intl;
207
+ $[4] = t7;
208
+ } else t7 = $[4];
209
+ const t8 = !hasPrevious;
210
+ let t9;
211
+ if ($[5] !== onPrevious || $[6] !== t7 || $[7] !== t8) {
212
+ t9 = /* @__PURE__ */ jsx(IconButton, {
213
+ icon: ChevronLeft,
214
+ label: t7,
215
+ isDisabled: t8,
216
+ onPress: onPrevious
217
+ });
218
+ $[5] = onPrevious;
219
+ $[6] = t7;
220
+ $[7] = t8;
221
+ $[8] = t9;
222
+ } else t9 = $[8];
223
+ let t10;
224
+ if ($[9] !== intl) {
225
+ t10 = intl.formatMessage(messages.nextPage);
226
+ $[9] = intl;
227
+ $[10] = t10;
228
+ } else t10 = $[10];
229
+ const t11 = !hasNext;
230
+ let t12;
231
+ if ($[11] !== onNext || $[12] !== t10 || $[13] !== t11) {
232
+ t12 = /* @__PURE__ */ jsx(IconButton, {
233
+ icon: ChevronRight,
234
+ label: t10,
235
+ isDisabled: t11,
236
+ onPress: onNext
237
+ });
238
+ $[11] = onNext;
239
+ $[12] = t10;
240
+ $[13] = t11;
241
+ $[14] = t12;
242
+ } else t12 = $[14];
243
+ let t13;
244
+ if ($[15] !== t12 || $[16] !== t5.pages || $[17] !== t6 || $[18] !== t9) {
245
+ t13 = /* @__PURE__ */ jsxs("div", {
246
+ className: t5.pages,
247
+ children: [
248
+ t6,
249
+ t9,
250
+ t12
251
+ ]
252
+ });
253
+ $[15] = t12;
254
+ $[16] = t5.pages;
255
+ $[17] = t6;
256
+ $[18] = t9;
257
+ $[19] = t13;
258
+ } else t13 = $[19];
259
+ let t14;
260
+ if ($[20] !== t13 || $[21] !== t2 || $[22] !== t3.pagination || $[23] !== t4) {
261
+ t14 = /* @__PURE__ */ jsxs("nav", {
262
+ "aria-label": t2,
263
+ className: t3.pagination,
264
+ children: [t4, t13]
265
+ });
266
+ $[20] = t13;
267
+ $[21] = t2;
268
+ $[22] = t3.pagination;
269
+ $[23] = t4;
270
+ $[24] = t14;
271
+ } else t14 = $[24];
272
+ return t14;
273
+ }
274
+ /**
275
+ * The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for
276
+ * numbered pages, `cursors` for a list paged with cursors.
277
+ *
278
+ * ```tsx
279
+ * <ListView {...getPagingProps(data?.meta)} items={data?.data} … />
280
+ * ```
281
+ */
282
+ function _temp4(size) {
283
+ return {
284
+ value: size,
285
+ label: String(size)
286
+ };
287
+ }
288
+ function _temp3(a, b) {
289
+ return a - b;
290
+ }
291
+ function getPagingProps(meta) {
292
+ if (meta === void 0) return {};
293
+ if (isCursorPage(meta)) return { cursors: {
294
+ next: meta.nextCursor,
295
+ ...meta.previousCursor !== void 0 ? { previous: meta.previousCursor } : {}
296
+ } };
297
+ return { total: meta.total };
58
298
  }
59
299
  //#endregion
60
- export { Pagination };
300
+ export { CursorPagination, Pagination, getPagingProps };
61
301
 
62
302
  //# sourceMappingURL=Pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","names":["styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n page: number;\n perPage: number;\n /** How many items match the query, on every page. */\n total: number;\n onPageChange: (page: number) => void;\n /** Page sizes to choose from. Without them, the page size can't be changed. */\n perPageOptions?: readonly number[] | undefined;\n onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n page,\n perPage,\n total,\n onPageChange,\n perPageOptions = [],\n onPerPageChange,\n}: PaginationProps) {\n const intl = usePanneauIntl();\n const lastPage = Math.max(1, Math.ceil(total / perPage));\n const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n const end = Math.min(total, page * perPage);\n const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n return (\n <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n <div className={styles.pages}>\n {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n <Select\n aria-label={intl.formatMessage(messages.perPage)}\n options={sizes.map((size) => ({ value: size, label: String(size) }))}\n value={perPage}\n onChange={(value) => {\n if (typeof value === 'number') {\n onPerPageChange(value);\n }\n }}\n className={styles.perPage}\n />\n ) : null}\n <IconButton\n icon={ChevronLeft}\n label={intl.formatMessage(messages.previousPage)}\n isDisabled={page <= 1}\n onPress={() => onPageChange(page - 1)}\n />\n <span aria-current=\"page\">\n {intl.formatMessage(messages.pageOf, { page, lastPage })}\n </span>\n <IconButton\n icon={ChevronRight}\n label={intl.formatMessage(messages.nextPage)}\n isDisabled={page >= lastPage}\n onPress={() => onPageChange(page + 1)}\n />\n </div>\n </nav>\n );\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,WAAW,EACvB,MACA,SACA,OACA,cACA,iBAAiB,CAAA,GACjB,mBACgB;CAChB,MAAM,OAAO,eAAe;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,OAAO,CAAC;CACvD,MAAM,QAAQ,UAAU,IAAI,KAAK,OAAO,KAAK,UAAU;CACvD,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,OAAO;CAC1C,MAAM,QAAQ,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,gBAAgB,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAC7E,OACI,qBAAC,OAAD;EAAK,cAAY,KAAK,cAAc,SAAS,UAAU;EAAG,WAAWA,uBAAO;EAA5E,UAAA,CACI,oBAAC,QAAD,EAAA,UAAO,KAAK,cAAc,SAAS,OAAO;GAAE;GAAO;GAAK;EAAM,CAAC,EAAQ,CAAA,GACvE,qBAAC,OAAD;GAAK,WAAWA,uBAAO;GAAvB,UAAA;IACK,eAAe,SAAS,KAAK,oBAAoB,KAAA,IAC9C,oBAAC,QAAD;KACI,cAAY,KAAK,cAAc,SAAS,OAAO;KAC/C,SAAS,MAAM,KAAK,UAAU;MAAE,OAAO;MAAM,OAAO,OAAO,IAAI;KAAE,EAAE;KACnE,OAAO;KACP,WAAW,UAAU;MACjB,IAAI,OAAO,UAAU,UACjB,gBAAgB,KAAK;KAE7B;KACA,WAAWA,uBAAO;IAAQ,CAAA,IAE9B;IACJ,oBAAC,YAAD;KACI,MAAM;KACN,OAAO,KAAK,cAAc,SAAS,YAAY;KAC/C,YAAY,QAAQ;KACpB,eAAe,aAAa,OAAO,CAAC;IAAE,CAAA;IAE1C,oBAAC,QAAD;KAAM,gBAAa;KACd,UAAA,KAAK,cAAc,SAAS,QAAQ;MAAE;MAAM;KAAS,CAAC;IACrD,CAAA;IACN,oBAAC,YAAD;KACI,MAAM;KACN,OAAO,KAAK,cAAc,SAAS,QAAQ;KAC3C,YAAY,QAAQ;KACpB,eAAe,aAAa,OAAO,CAAC;IAAE,CAAA;GAEzC;EACJ,CAAA,CAAA;;AAEb"}
1
+ {"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","ListResponse","isCursorPage","IconButton","Select","usePanneauIntl","messages","styles","PaginationProps","page","perPage","total","onPageChange","perPageOptions","onPerPageChange","Pagination","t0","$","_c","t1","undefined","intl","lastPage","Math","max","ceil","start","end","min","sizes","Set","sort","_temp","t2","formatMessage","pagination","t4","range","t5","t7","length","map","_temp2","value","t8","previousPage","t9","t10","t11","t12","pageOf","t13","t14","nextPage","t15","t16","t17","t18","t6","pages","t19","t3","size","label","String","a","b","CursorPaginationProps","hasPrevious","hasNext","onPrevious","onNext","CursorPagination","_temp3","Symbol","for","_temp4","getPagingProps","meta","cursors","next","previous","nextCursor","previousCursor","_c","styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport type { ListResponse } from '@panneau/protocol';\nimport { isCursorPage } from '@panneau/protocol/runtime';\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n page: number;\n perPage: number;\n /** How many items match the query, on every page. */\n total: number;\n onPageChange: (page: number) => void;\n /** Page sizes to choose from. Without them, the page size can't be changed. */\n perPageOptions?: readonly number[] | undefined;\n onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n page,\n perPage,\n total,\n onPageChange,\n perPageOptions = [],\n onPerPageChange,\n}: PaginationProps) {\n const intl = usePanneauIntl();\n const lastPage = Math.max(1, Math.ceil(total / perPage));\n const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n const end = Math.min(total, page * perPage);\n const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n return (\n <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n <div className={styles.pages}>\n {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n <Select\n aria-label={intl.formatMessage(messages.perPage)}\n options={sizes.map((size) => ({ value: size, label: String(size) }))}\n value={perPage}\n onChange={(value) => {\n if (typeof value === 'number') {\n onPerPageChange(value);\n }\n }}\n className={styles.perPage}\n />\n ) : null}\n <IconButton\n icon={ChevronLeft}\n label={intl.formatMessage(messages.previousPage)}\n isDisabled={page <= 1}\n onPress={() => onPageChange(page - 1)}\n />\n <span aria-current=\"page\">\n {intl.formatMessage(messages.pageOf, { page, lastPage })}\n </span>\n <IconButton\n icon={ChevronRight}\n label={intl.formatMessage(messages.nextPage)}\n isDisabled={page >= lastPage}\n onPress={() => onPageChange(page + 1)}\n />\n </div>\n </nav>\n );\n}\n\nexport interface CursorPaginationProps {\n perPage: number;\n /** Whether there is a page before: the list isn't on its first page. */\n hasPrevious: boolean;\n /** Whether there is a page after: the page has a `nextCursor`. */\n hasNext: boolean;\n onPrevious: () => void;\n onNext: () => void;\n /** Page sizes to choose from. Without them, the page size can't be changed. */\n perPageOptions?: readonly number[] | undefined;\n onPerPageChange?: (perPage: number) => void;\n}\n\n/**\n * Buttons to the previous and next pages of a list paged with cursors, which has no page numbers\n * and no total (decision 0039).\n */\nexport function CursorPagination({\n perPage,\n hasPrevious,\n hasNext,\n onPrevious,\n onNext,\n perPageOptions = [],\n onPerPageChange,\n}: CursorPaginationProps) {\n const intl = usePanneauIntl();\n const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n return (\n <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n <span />\n <div className={styles.pages}>\n {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n <Select\n aria-label={intl.formatMessage(messages.perPage)}\n options={sizes.map((size) => ({ value: size, label: String(size) }))}\n value={perPage}\n onChange={(value) => {\n if (typeof value === 'number') {\n onPerPageChange(value);\n }\n }}\n className={styles.perPage}\n />\n ) : null}\n <IconButton\n icon={ChevronLeft}\n label={intl.formatMessage(messages.previousPage)}\n isDisabled={!hasPrevious}\n onPress={onPrevious}\n />\n <IconButton\n icon={ChevronRight}\n label={intl.formatMessage(messages.nextPage)}\n isDisabled={!hasNext}\n onPress={onNext}\n />\n </div>\n </nav>\n );\n}\n\n/**\n * The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for\n * numbered pages, `cursors` for a list paged with cursors.\n *\n * ```tsx\n * <ListView {...getPagingProps(data?.meta)} items={data?.data} … />\n * ```\n */\nexport function getPagingProps(meta: ListResponse['meta'] | undefined): {\n total?: number;\n cursors?: { next: string | null; previous?: string | null };\n} {\n if (meta === undefined) {\n return {};\n }\n if (isCursorPage(meta)) {\n return {\n cursors: {\n next: meta.nextCursor,\n ...(meta.previousCursor !== undefined ? { previous: meta.previousCursor } : {}),\n },\n };\n }\n return { total: meta.total };\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SearchField.js","names":["Search","draft","setDraft","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n /** The search of the query. */\n value: string;\n /** Called once the user stops typing, or presses Enter. */\n onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n const intl = usePanneauIntl();\n const { draft, setDraft, flush } = useDraft(value, onChange);\n return (\n <TextInput\n type=\"search\"\n aria-label={intl.formatMessage(messages.search)}\n placeholder={intl.formatMessage(messages.searchPlaceholder)}\n prefix={<Icon icon={Search} />}\n value={draft}\n onChange={setDraft}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n flush();\n }\n }}\n className={styles.search}\n />\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAG,EAAA,EAAA;CAAqB,MAAA,EAAA,OAAA,aAAA;CACxB,MAAA,OAAa,eAAe;CAC5B,MAAA,EAAA,OAAA,UAAA,UAAmC,SAAS,OAAO,QAAQ;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAIzC,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAClC,KAAA,KAAI,cAAe,SAAQ,iBAAkB;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACnD,KAAA,oBAAC,MAAD,EAAYH,MAAA,OAAM,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAGnB,MAAA,UAAA;GACP,IAAI,MAAK,QAAS,SACd,MAAM;EACT;EACJ,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAXL,KAAA,oBAAC,WAAD;GACS,MAAA;GACO,cAAA;GACC,aAAA;GACL,QAAA;GACDC,OAAA;GACGC,UAAA;GACC,WAAA;GAKA,WAAAE,uBAAM;EAAO,CAAA;EAC1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbF;AAaE"}
1
+ {"version":3,"file":"SearchField.js","names":["Search","Icon","TextInput","usePanneauIntl","messages","useDraft","styles","SearchFieldProps","value","onChange","q","SearchField","t0","$","_c","intl","draft","setDraft","flush","t1","formatMessage","search","t2","searchPlaceholder","t3","Symbol","for","t4","event","key","t5","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n /** The search of the query. */\n value: string;\n /** Called once the user stops typing, or presses Enter. */\n onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n const intl = usePanneauIntl();\n const { draft, setDraft, flush } = useDraft(value, onChange);\n return (\n <TextInput\n type=\"search\"\n aria-label={intl.formatMessage(messages.search)}\n placeholder={intl.formatMessage(messages.searchPlaceholder)}\n prefix={<Icon icon={Search} />}\n value={draft}\n onChange={setDraft}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n flush();\n }\n }}\n className={styles.search}\n />\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAOW,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAN,OAAAC,aAAAG;CACxB,MAAAG,OAAaZ,eAAe;CAC5B,MAAA,EAAAa,OAAAC,UAAAC,UAAmCb,SAASG,OAAOC,QAAQ;CAAE,IAAAU;CAAA,IAAAN,EAAA,OAAAE,MAAA;EAIzCI,KAAAJ,KAAIK,cAAehB,SAAQiB,MAAO;EAACR,EAAA,KAAAE;EAAAF,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAClCO,KAAAP,KAAIK,cAAehB,SAAQmB,iBAAkB;EAACV,EAAA,KAAAE;EAAAF,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAY,OAAAC,IAAA,2BAAA,GAAA;EACnDF,KAAA,oBAAC,MAAD,EAAYxB,MAAAA,OAAM,CAAA;EAAIa,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAK,OAAA;EAGnBS,MAAAC,UAAA;GACP,IAAIA,MAAKC,QAAS,SACdX,MAAM;EACT;EACJL,EAAA,KAAAK;EAAAL,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAG,SAAAH,EAAA,OAAAI,YAAAJ,EAAA,OAAAM,MAAAN,EAAA,QAAAS,MAAAT,EAAA,QAAAc,IAAA;EAXLG,KAAA,oBAAC,WAAD;GACS,MAAA;GACO,cAAAX;GACC,aAAAG;GACL,QAAAE;GACDR,OAAAA;GACGC,UAAAA;GACC,WAAAU;GAKA,WAAArB,uBAAMe;EAAO,CAAA;EAC1BR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,MAAAS;EAAAT,EAAA,MAAAc;EAAAd,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAbFiB;AAaE"}
@@ -1,4 +1,4 @@
1
- import type { ListColumn } from '../types';
1
+ import type { ListColumn } from '../types.js';
2
2
  export interface SortSelectProps {
3
3
  columns: readonly ListColumn[];
4
4
  sort: readonly string[];
@@ -1 +1 @@
1
- {"version":3,"file":"SortSelect.js","names":["column","options","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n columns: readonly ListColumn[];\n sort: readonly string[];\n onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n const intl = usePanneauIntl();\n const sortable = columns.filter((column) => column.sortable === true);\n const label = (column: ListColumn) =>\n typeof column.label === 'string' ? column.label : column.id;\n const options = [\n { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n ...sortable.flatMap((column) => [\n {\n value: column.id,\n label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n },\n {\n value: `-${column.id}`,\n label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n },\n ]),\n ];\n const current = sort[0] ?? DEFAULT;\n return (\n <Select\n label={intl.formatMessage(messages.sortBy)}\n options={options}\n value={options.some((option) => option.value === current) ? current : DEFAULT}\n onChange={(value) =>\n onChange(value === null || value === DEFAULT ? [] : [String(value)])\n }\n className={styles.sort}\n />\n );\n}\n"],"mappings":";;;;;;AAYA,IAAM,UAAU;;AAGhB,SAAO,WAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAoB,MAAA,EAAA,SAAA,MAAA,aAAA;CACvB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,MAAA;EAC9B,MAAA,WAAiB,QAAO,OAAQ,KAAoC;EACpE,MAAA,QAAc;EACkD,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAEnC,KAAA,KAAI,cAAe,SAAQ,WAAY;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,IAAA;GAAjE,KAAA;IAAA,OAAS;IAAO,OAAS;GAAyC;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAC/C,MAAA,aAAY,CAC5B;IAAA,OACWF,SAAM;IAAG,OACT,KAAI,cAAe,SAAQ,eAAgB,EAAA,QAAU,MAAMA,QAAM,EAAE,CAAC;GAC/E,GACA;IAAA,OACW,IAAIA,SAAM;IAAK,OACf,KAAI,cAAe,SAAQ,gBAAiB,EAAA,QAAU,MAAMA,QAAM,EAAE,CAAC;GAChF,CAAC;GACJ,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAXW,KAAA,CACZ,IAAmE,GAChE,SAAQ,QAAS,EASnB,CAAC;EACL,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAZD,MAAA,UAAgB;CAahB,MAAA,UAAgB,KAAI,MAAJ;CAAmB,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAGpB,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAEnC,MAAA,KAAA,QAAO,MAAM,WAAY,OAAM,UAAW,OAA2B,IAArE,UAAA;CAAsE,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA;EACnE,MAAA,UACN,SAAS,UAAU,QAAQ,UAAU,UAA5B,CAAA,IAAA,CAA4C,OAAO,KAAK,CAAC,CAAC;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAL5E,KAAA,oBAAC,QAAD;GACW,OAAA;GACE;GACF,OAAA;GACG,UAAA;GAGC,WAAAG,uBAAM;EAAK,CAAA;EACxB,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OARF;AAQE;AA5BH,SAAA,OAAA,UAAA;CAAA,OAIC,OAAOH,SAAM,UAAW,WAAWA,SAAM,QAASA,SAAM;AAAG;AAJ5D,SAAA,MAAA,QAAA;CAAA,OAEyC,OAAM,aAAc;AAAI"}
1
+ {"version":3,"file":"SortSelect.js","names":["Select","usePanneauIntl","messages","ListColumn","styles","SortSelectProps","columns","sort","onChange","DEFAULT","SortSelect","t0","$","_c","intl","t1","sortable","filter","_temp","label","_temp2","t2","formatMessage","defaultSort","t3","value","t4","column_1","column","id","sortAscending","sortDescending","flatMap","options","current","sortBy","some","option","String","t5","column_0","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n columns: readonly ListColumn[];\n sort: readonly string[];\n onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n const intl = usePanneauIntl();\n const sortable = columns.filter((column) => column.sortable === true);\n const label = (column: ListColumn) =>\n typeof column.label === 'string' ? column.label : column.id;\n const options = [\n { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n ...sortable.flatMap((column) => [\n {\n value: column.id,\n label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n },\n {\n value: `-${column.id}`,\n label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n },\n ]),\n ];\n const current = sort[0] ?? DEFAULT;\n return (\n <Select\n label={intl.formatMessage(messages.sortBy)}\n options={options}\n value={options.some((option) => option.value === current) ? current : DEFAULT}\n onChange={(value) =>\n onChange(value === null || value === DEFAULT ? [] : [String(value)])\n }\n className={styles.sort}\n />\n );\n}\n"],"mappings":";;;;;;AAYA,IAAMS,UAAU;;AAGhB,SAAOC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAP,SAAAC,MAAAC,aAAAG;CACvB,MAAAG,OAAab,eAAe;CAAE,IAAAc;CAAA,IAAAH,EAAA,OAAAN,WAAAM,EAAA,OAAAE,MAAA;EAC9B,MAAAE,WAAiBV,QAAOW,OAAQC,KAAoC;EACpE,MAAAC,QAAcC;EACkD,IAAAC;EAAA,IAAAT,EAAA,OAAAE,MAAA;GAEnCO,KAAAP,KAAIQ,cAAepB,SAAQqB,WAAY;GAACX,EAAA,KAAAE;GAAAF,EAAA,KAAAS;EAAA,OAAAA,KAAAT,EAAA;EAAA,IAAAY;EAAA,IAAAZ,EAAA,OAAAS,IAAA;GAAjEG,KAAA;IAAAC,OAAShB;IAAOU,OAASE;GAAyC;GAACT,EAAA,KAAAS;GAAAT,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAE,MAAA;GAC/CY,MAAAC,aAAY,CAC5B;IAAAF,OACWG,SAAMC;IAAGV,OACTL,KAAIQ,cAAepB,SAAQ4B,eAAgB,EAAAF,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAC/E,GACA;IAAAH,OACW,IAAIG,SAAMC;IAAKV,OACfL,KAAIQ,cAAepB,SAAQ6B,gBAAiB,EAAAH,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAChF,CAAC;GACJhB,EAAA,KAAAE;GAAAF,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAXWG,KAAA,CACZS,IAAmE,GAChER,SAAQgB,QAASN,EASnB,CAAC;EACLd,EAAA,KAAAN;EAAAM,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAZD,MAAAqB,UAAgBlB;CAahB,MAAAmB,UAAgB3B,KAAI,MAAJE;CAAmB,IAAAY;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAGpBO,KAAAP,KAAIQ,cAAepB,SAAQiC,MAAO;EAACvB,EAAA,KAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAEnC,MAAAY,KAAAS,QAAOG,MAAMC,WAAYA,OAAMZ,UAAWS,OAA2B,IAArEA,UAAAzB;CAAsE,IAAAiB;CAAA,IAAAd,EAAA,QAAAJ,UAAA;EACnEkB,MAAAD,UACNjB,SAASiB,UAAU,QAAQA,UAAUhB,UAA5B,CAAA,IAAA,CAA4C6B,OAAOb,KAAK,CAAC,CAAC;EAACb,EAAA,MAAAJ;EAAAI,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAqB,WAAArB,EAAA,QAAAS,MAAAT,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,IAAA;EAL5Ea,KAAA,oBAAC,QAAD;GACW,OAAAlB;GACEY;GACF,OAAAT;GACG,UAAAE;GAGC,WAAAtB,uBAAMG;EAAK,CAAA;EACxBK,EAAA,MAAAqB;EAAArB,EAAA,MAAAS;EAAAT,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OARF2B;AAQE;AA5BH,SAAAnB,OAAAoB,UAAA;CAAA,OAIC,OAAOZ,SAAMT,UAAW,WAAWS,SAAMT,QAASS,SAAMC;AAAG;AAJ5D,SAAAX,MAAAU,QAAA;CAAA,OAEyCA,OAAMZ,aAAc;AAAI"}
@@ -1,9 +1,9 @@
1
- .panneau-search-xZg66e {
1
+ .panneau-toolbar-search {
2
2
  width: 16rem;
3
3
  max-width: 100%;
4
4
  }
5
5
 
6
- .panneau-pagination-dNpeRL {
6
+ .panneau-toolbar-pagination {
7
7
  display: flex;
8
8
  flex-wrap: wrap;
9
9
  align-items: center;
@@ -13,17 +13,17 @@
13
13
  color: var(--panneau-color-text-muted);
14
14
  }
15
15
 
16
- .panneau-pages-e6sKuy {
16
+ .panneau-toolbar-pages {
17
17
  display: flex;
18
18
  align-items: center;
19
19
  gap: var(--panneau-space-2);
20
20
  }
21
21
 
22
- .panneau-perPage-U3R-no {
22
+ .panneau-toolbar-per-page {
23
23
  width: 6rem;
24
24
  }
25
25
 
26
- .panneau-layouts-VUhEzd {
26
+ .panneau-toolbar-layouts {
27
27
  display: inline-flex;
28
28
  padding: 2px;
29
29
  background-color: var(--panneau-color-surface-sunken);
@@ -31,7 +31,7 @@
31
31
  border-radius: var(--panneau-radius-md);
32
32
  }
33
33
 
34
- .panneau-layoutButton-B28Z38 {
34
+ .panneau-toolbar-layout-button {
35
35
  display: inline-flex;
36
36
  align-items: center;
37
37
  justify-content: center;
@@ -44,29 +44,29 @@
44
44
  cursor: pointer;
45
45
  }
46
46
 
47
- .panneau-layoutButton-B28Z38[data-hovered] {
47
+ .panneau-toolbar-layout-button[data-hovered] {
48
48
  color: var(--panneau-color-text);
49
49
  }
50
50
 
51
- .panneau-layoutButton-B28Z38[data-selected] {
51
+ .panneau-toolbar-layout-button[data-selected] {
52
52
  color: var(--panneau-color-text);
53
53
  background-color: var(--panneau-color-surface);
54
54
  box-shadow: var(--panneau-shadow-sm);
55
55
  }
56
56
 
57
- .panneau-layoutButton-B28Z38[data-focus-visible] {
57
+ .panneau-toolbar-layout-button[data-focus-visible] {
58
58
  outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
59
59
  outline-offset: 1px;
60
60
  }
61
61
 
62
- .panneau-sort-5bHxuN {
62
+ .panneau-toolbar-sort {
63
63
  width: 14rem;
64
64
  max-width: 100%;
65
65
  }
66
66
 
67
67
  @container panneau-list (max-width: 40rem) {
68
- .panneau-search-xZg66e,
69
- .panneau-sort-5bHxuN {
68
+ .panneau-toolbar-search,
69
+ .panneau-toolbar-sort {
70
70
  width: 100%;
71
71
  }
72
72
  }
@@ -1,12 +1,12 @@
1
1
  import "./Toolbar.css";
2
2
  //#region src/toolbar/Toolbar.module.css
3
- var search = "panneau-search-xZg66e";
4
- var pagination = "panneau-pagination-dNpeRL";
5
- var pages = "panneau-pages-e6sKuy";
6
- var perPage = "panneau-perPage-U3R-no";
7
- var layouts = "panneau-layouts-VUhEzd";
8
- var layoutButton = "panneau-layoutButton-B28Z38";
9
- var sort = "panneau-sort-5bHxuN";
3
+ var search = "panneau-toolbar-search";
4
+ var pagination = "panneau-toolbar-pagination";
5
+ var pages = "panneau-toolbar-pages";
6
+ var perPage = "panneau-toolbar-per-page";
7
+ var layouts = "panneau-toolbar-layouts";
8
+ var layoutButton = "panneau-toolbar-layout-button";
9
+ var sort = "panneau-toolbar-sort";
10
10
  var Toolbar_module_default = {
11
11
  search,
12
12
  pagination,
package/dist/types.d.ts CHANGED
@@ -6,7 +6,10 @@ import type { Abilities, Action, ActionScope, Field, Filter, FilterValue, Option
6
6
  */
7
7
  export interface ListItem {
8
8
  id: string;
9
- /** What the user can do with the item. Without abilities, every action is shown. */
9
+ /**
10
+ * What the user can do with the item. Without abilities, the built-in item actions (`show`,
11
+ * `edit`, `duplicate`, `delete`) are hidden, and the other actions are shown.
12
+ */
10
13
  abilities?: Abilities;
11
14
  [key: string]: unknown;
12
15
  }
@@ -52,6 +55,16 @@ export interface ListActionEvent {
52
55
  /** Selected items of the current page that don't allow the action: the backend skips them. */
53
56
  skipped: readonly ListItem[];
54
57
  }
58
+ /** What the backend told about an action on a query selection: how many items it would skip. */
59
+ export interface ListActionPreview {
60
+ skipped: number;
61
+ }
62
+ /**
63
+ * Asks the backend what an action would do on a query selection, before the list confirms it (a
64
+ * dry run, for actions with `dryRun`), or resolves with `null` when it can't tell.
65
+ * `useActionPreview()` of `@panneau/actions` is one.
66
+ */
67
+ export type ListActionPreviewer = (event: ListActionEvent) => Promise<ListActionPreview | null>;
55
68
  /**
56
69
  * Runs an action. Lists ask for confirmation first when the action has `confirm`. A returned
57
70
  * promise shows the action as pending until it settles; after a selection action succeeds, the
@@ -87,6 +100,8 @@ export interface ListLayoutProps {
87
100
  getItemLabel: (item: ListItem) => string;
88
101
  /** A link to the item, when the list has one. */
89
102
  getItemHref?: ((item: ListItem) => string | null) | undefined;
103
+ /** Whether the item is the one shown next to the list, such as in a panel of its details. */
104
+ isCurrent?: ((item: ListItem) => boolean) | undefined;
90
105
  /** Whether items have checkboxes. */
91
106
  selectable: boolean;
92
107
  isSelected: (item: ListItem) => boolean;