@protobase/ui 0.23.0 → 0.23.2

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.
@@ -13,6 +13,7 @@ import { Field } from "../record-view/field.js";
13
13
  import { Section } from "../record-view/section.js";
14
14
  import { MetadataCard } from "../record-view/record-sidebar.js";
15
15
  import { RecordHeader } from "../record-view/record-header.js";
16
+ import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
16
17
  import { isMarkdown } from "../markdown/markdown-hint.js";
17
18
  import { recordTitle } from "../live/model-helpers.js";
18
19
  import { contactFormat } from "../live/contact-links.js";
@@ -32,7 +33,6 @@ import { ErrorBanner } from "./error-banner.js";
32
33
  import { useProjectUi } from "./pages/project-ui.js";
33
34
  import { shownWidget } from "./field-types/shown-widget.js";
34
35
  import { WidgetPart } from "./field-types/widget-part.js";
35
- import { Markdown } from "../markdown/markdown.js";
36
36
  import { ContactLink } from "../live/contact-link.js";
37
37
  import { FieldEditor } from "./field-editor.js";
38
38
  import { fieldMessage } from "./field-errors.js";
@@ -303,25 +303,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
303
303
  label: hint(name)?.label ?? humanize(name),
304
304
  value: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
305
305
  }];
306
- const text = displayValue(field, stored.record[name], hint(name));
307
306
  const value = stored.record[name];
308
- const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
307
+ const text = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "" ? markdownExcerpt(value) : displayValue(field, value, hint(name));
309
308
  const contact = field.type === "text" && typeof value === "string" && value !== "" ? contactFormat(hint(name)) : void 0;
310
309
  const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
311
310
  value,
312
311
  hints: hint(name),
313
312
  children: text
314
- }) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : contact ? /* @__PURE__ */ jsx(ContactLink, {
313
+ }) : contact ? /* @__PURE__ */ jsx(ContactLink, {
315
314
  format: contact,
316
315
  value: text
317
316
  }) : /* @__PURE__ */ jsx("strong", {
318
317
  title: valueTitle(field, value, void 0, hint(name)),
319
- className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
320
318
  children: text
321
319
  });
322
320
  const shown = shownWidget(fieldTypes, field, hint(name));
323
321
  return [{
324
322
  label: hint(name)?.label ?? humanize(name),
323
+ title: text,
325
324
  value: shown ? /* @__PURE__ */ jsx(WidgetPart, {
326
325
  shown,
327
326
  part: "display",
@@ -1,4 +1,5 @@
1
1
  import { FilterInput, ListPage } from "@protobase/client";
2
+ import { InfiniteData, QueryKey, UseInfiniteQueryOptions } from "@tanstack/react-query";
2
3
  //#region src/data/use-list.d.ts
3
4
  export type UseListParams = {
4
5
  filter?: FilterInput;
@@ -8,13 +9,15 @@ export type UseListParams = {
8
9
  /** Start at this page token instead of the first page, for example one from `useAnchors`. */
9
10
  startToken?: string;
10
11
  enabled?: boolean;
12
+ /** TanStack Query's `refetchInterval`: refetch every so many milliseconds, `false` to stop, or a function of the query. */
13
+ refetchInterval?: UseInfiniteQueryOptions<ListPage<Row>, Error, InfiniteData<ListPage<Row>>, QueryKey, string>['refetchInterval'];
11
14
  };
12
15
  type Row = Record<string, unknown>;
13
16
  /** Infinite pages of a resource, following `next_page_token`. */
14
- export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled }?: UseListParams) => {
17
+ export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled, refetchInterval }?: UseListParams) => {
15
18
  items: Row[];
16
19
  totalEstimate: number | undefined;
17
- data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
20
+ data: InfiniteData<ListPage<Row>, unknown>;
18
21
  error: Error;
19
22
  isError: true;
20
23
  isPending: false;
@@ -24,8 +27,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
24
27
  isSuccess: false;
25
28
  isPlaceholderData: false;
26
29
  status: "error";
27
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
28
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
30
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
31
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
29
32
  hasNextPage: boolean;
30
33
  hasPreviousPage: boolean;
31
34
  isFetchNextPageError: boolean;
@@ -45,12 +48,12 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
45
48
  isRefetching: boolean;
46
49
  isStale: boolean;
47
50
  isEnabled: boolean;
48
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
51
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
49
52
  fetchStatus: import("@tanstack/react-query").FetchStatus;
50
53
  } | {
51
54
  items: Row[];
52
55
  totalEstimate: number | undefined;
53
- data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
56
+ data: InfiniteData<ListPage<Row>, unknown>;
54
57
  error: null;
55
58
  isError: false;
56
59
  isPending: false;
@@ -62,8 +65,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
62
65
  isSuccess: true;
63
66
  isPlaceholderData: false;
64
67
  status: "success";
65
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
66
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
68
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
69
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
67
70
  hasNextPage: boolean;
68
71
  hasPreviousPage: boolean;
69
72
  isFetchingNextPage: boolean;
@@ -81,7 +84,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
81
84
  isRefetching: boolean;
82
85
  isStale: boolean;
83
86
  isEnabled: boolean;
84
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
87
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
85
88
  fetchStatus: import("@tanstack/react-query").FetchStatus;
86
89
  } | {
87
90
  items: Row[];
@@ -98,8 +101,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
98
101
  isSuccess: false;
99
102
  isPlaceholderData: false;
100
103
  status: "error";
101
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
102
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
104
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
105
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
103
106
  hasNextPage: boolean;
104
107
  hasPreviousPage: boolean;
105
108
  isFetchingNextPage: boolean;
@@ -117,7 +120,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
117
120
  isRefetching: boolean;
118
121
  isStale: boolean;
119
122
  isEnabled: boolean;
120
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
123
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
121
124
  fetchStatus: import("@tanstack/react-query").FetchStatus;
122
125
  } | {
123
126
  items: Row[];
@@ -134,8 +137,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
134
137
  isSuccess: false;
135
138
  isPlaceholderData: false;
136
139
  status: "pending";
137
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
138
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
140
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
141
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
139
142
  hasNextPage: boolean;
140
143
  hasPreviousPage: boolean;
141
144
  isFetchingNextPage: boolean;
@@ -153,7 +156,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
153
156
  isRefetching: boolean;
154
157
  isStale: boolean;
155
158
  isEnabled: boolean;
156
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
159
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
157
160
  fetchStatus: import("@tanstack/react-query").FetchStatus;
158
161
  } | {
159
162
  items: Row[];
@@ -169,8 +172,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
169
172
  isSuccess: false;
170
173
  isPlaceholderData: false;
171
174
  status: "pending";
172
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
173
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
175
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
176
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
174
177
  hasNextPage: boolean;
175
178
  hasPreviousPage: boolean;
176
179
  isFetchingNextPage: boolean;
@@ -189,12 +192,12 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
189
192
  isRefetching: boolean;
190
193
  isStale: boolean;
191
194
  isEnabled: boolean;
192
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
195
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
193
196
  fetchStatus: import("@tanstack/react-query").FetchStatus;
194
197
  } | {
195
198
  items: Row[];
196
199
  totalEstimate: number | undefined;
197
- data: import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>;
200
+ data: InfiniteData<ListPage<Row>, unknown>;
198
201
  isError: false;
199
202
  error: null;
200
203
  isPending: false;
@@ -206,8 +209,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
206
209
  isFetchNextPageError: false;
207
210
  isFetchPreviousPageError: false;
208
211
  status: "success";
209
- fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
210
- fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
212
+ fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
213
+ fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
211
214
  hasNextPage: boolean;
212
215
  hasPreviousPage: boolean;
213
216
  isFetchingNextPage: boolean;
@@ -225,7 +228,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
225
228
  isRefetching: boolean;
226
229
  isStale: boolean;
227
230
  isEnabled: boolean;
228
- refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<ListPage<Row>, unknown>, Error>>;
231
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
229
232
  fetchStatus: import("@tanstack/react-query").FetchStatus;
230
233
  };
231
234
  //#endregion
@@ -4,12 +4,13 @@ import { filterText } from "@protobase/client";
4
4
  import { useInfiniteQuery } from "@tanstack/react-query";
5
5
  //#region src/data/use-list.ts
6
6
  /** Infinite pages of a resource, following `next_page_token`. */
7
- const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true } = {}) => {
7
+ const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true, refetchInterval } = {}) => {
8
8
  const client = useClient();
9
9
  const text = filterText(filter) ?? "";
10
10
  const query = useInfiniteQuery({
11
11
  queryKey: [...keys.list(resource, text, orderBy ?? "", pageSize, startToken), fields?.join(",") ?? ""],
12
12
  enabled,
13
+ refetchInterval,
13
14
  initialPageParam: startToken,
14
15
  queryFn: ({ pageParam }) => client.list(resource, {
15
16
  filter: text,
package/dist/package.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region package.json
2
- var version = "0.23.0";
2
+ var version = "0.23.2";
3
3
  var protobase = { "pluginApi": 1 };
4
4
  //#endregion
5
5
  export { protobase, version };
@@ -2,14 +2,15 @@ import "lucide-react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  //#region src/record-view/record-sidebar.tsx
4
4
  const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
5
- className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2",
5
+ className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2",
6
6
  children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
7
7
  className: "contents",
8
8
  children: [/* @__PURE__ */ jsx("dt", {
9
9
  className: "text-muted-foreground",
10
10
  children: row.label
11
11
  }), /* @__PURE__ */ jsx("dd", {
12
- className: "text-right tabular-nums text-foreground",
12
+ title: row.title,
13
+ className: "truncate text-right tabular-nums text-foreground",
13
14
  children: row.value
14
15
  })]
15
16
  }, row.label))