@ttt-productions/ui-core 0.11.33 → 0.11.35
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.
- package/README.md +1 -1
- package/dist/browser/index.d.ts +2 -2
- package/dist/browser/index.d.ts.map +1 -1
- package/dist/browser/index.js +1 -2
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/reload-recovery-watch.d.ts +2 -6
- package/dist/browser/reload-recovery-watch.d.ts.map +1 -1
- package/dist/browser/reload-recovery-watch.js +5 -10
- package/dist/browser/reload-recovery-watch.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -4
- package/dist/index.js.map +1 -1
- package/dist/lib/format-numbers.d.ts +0 -6
- package/dist/lib/format-numbers.d.ts.map +1 -1
- package/dist/lib/format-numbers.js +2 -8
- package/dist/lib/format-numbers.js.map +1 -1
- package/dist/lib/reload-recovery.d.ts +1 -9
- package/dist/lib/reload-recovery.d.ts.map +1 -1
- package/dist/lib/reload-recovery.js +14 -24
- package/dist/lib/reload-recovery.js.map +1 -1
- package/dist/lib/utils.d.ts +0 -3
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +0 -3
- package/dist/lib/utils.js.map +1 -1
- package/dist/react/components/accordion.d.ts +2 -2
- package/dist/react/components/accordion.d.ts.map +1 -1
- package/dist/react/components/accordion.js +8 -8
- package/dist/react/components/accordion.js.map +1 -1
- package/dist/react/components/action-row.d.ts +2 -9
- package/dist/react/components/action-row.d.ts.map +1 -1
- package/dist/react/components/action-row.js +7 -11
- package/dist/react/components/action-row.js.map +1 -1
- package/dist/react/components/alert-dialog.d.ts +2 -2
- package/dist/react/components/alert-dialog.d.ts.map +1 -1
- package/dist/react/components/alert-dialog.js +15 -15
- package/dist/react/components/alert-dialog.js.map +1 -1
- package/dist/react/components/alert.d.ts +2 -2
- package/dist/react/components/alert.d.ts.map +1 -1
- package/dist/react/components/alert.js +12 -12
- package/dist/react/components/alert.js.map +1 -1
- package/dist/react/components/avatar.d.ts +2 -2
- package/dist/react/components/avatar.d.ts.map +1 -1
- package/dist/react/components/avatar.js +7 -7
- package/dist/react/components/avatar.js.map +1 -1
- package/dist/react/components/badge.d.ts +2 -2
- package/dist/react/components/badge.d.ts.map +1 -1
- package/dist/react/components/badge.js +9 -9
- package/dist/react/components/badge.js.map +1 -1
- package/dist/react/components/button.d.ts +2 -12
- package/dist/react/components/button.d.ts.map +1 -1
- package/dist/react/components/button.js +30 -35
- package/dist/react/components/button.js.map +1 -1
- package/dist/react/components/card.d.ts +1 -1
- package/dist/react/components/card.d.ts.map +1 -1
- package/dist/react/components/card.js +15 -15
- package/dist/react/components/card.js.map +1 -1
- package/dist/react/components/checkbox.d.ts +2 -2
- package/dist/react/components/checkbox.d.ts.map +1 -1
- package/dist/react/components/checkbox.js +6 -6
- package/dist/react/components/checkbox.js.map +1 -1
- package/dist/react/components/collapsible.d.ts +1 -1
- package/dist/react/components/collapsible.d.ts.map +1 -1
- package/dist/react/components/collapsible.js +2 -2
- package/dist/react/components/collapsible.js.map +1 -1
- package/dist/react/components/consequence-dialog.d.ts +1 -48
- package/dist/react/components/consequence-dialog.d.ts.map +1 -1
- package/dist/react/components/consequence-dialog.js +7 -23
- package/dist/react/components/consequence-dialog.js.map +1 -1
- package/dist/react/components/date-picker.d.ts +1 -18
- package/dist/react/components/date-picker.d.ts.map +1 -1
- package/dist/react/components/date-picker.js +102 -98
- package/dist/react/components/date-picker.js.map +1 -1
- package/dist/react/components/date-time-picker.d.ts +1 -24
- package/dist/react/components/date-time-picker.d.ts.map +1 -1
- package/dist/react/components/date-time-picker.js +20 -37
- package/dist/react/components/date-time-picker.js.map +1 -1
- package/dist/react/components/dialog.d.ts +2 -2
- package/dist/react/components/dialog.d.ts.map +1 -1
- package/dist/react/components/dialog.js +14 -14
- package/dist/react/components/dialog.js.map +1 -1
- package/dist/react/components/dropdown-menu.d.ts +2 -10
- package/dist/react/components/dropdown-menu.d.ts.map +1 -1
- package/dist/react/components/dropdown-menu.js +24 -20
- package/dist/react/components/dropdown-menu.js.map +1 -1
- package/dist/react/components/end-of-list-indicator.d.ts +1 -1
- package/dist/react/components/end-of-list-indicator.js +3 -3
- package/dist/react/components/end-of-list-indicator.js.map +1 -1
- package/dist/react/components/form.d.ts +3 -3
- package/dist/react/components/form.d.ts.map +1 -1
- package/dist/react/components/form.js +17 -17
- package/dist/react/components/form.js.map +1 -1
- package/dist/react/components/format-control.d.ts +7 -20
- package/dist/react/components/format-control.d.ts.map +1 -1
- package/dist/react/components/format-control.js +18 -22
- package/dist/react/components/format-control.js.map +1 -1
- package/dist/react/components/input.d.ts +10 -27
- package/dist/react/components/input.d.ts.map +1 -1
- package/dist/react/components/input.js +11 -9
- package/dist/react/components/input.js.map +1 -1
- package/dist/react/components/label.d.ts +3 -3
- package/dist/react/components/label.d.ts.map +1 -1
- package/dist/react/components/label.js +6 -6
- package/dist/react/components/label.js.map +1 -1
- package/dist/react/components/layout/screen-adaptive-view.d.ts +2 -9
- package/dist/react/components/layout/screen-adaptive-view.d.ts.map +1 -1
- package/dist/react/components/layout/screen-adaptive-view.js +40 -37
- package/dist/react/components/layout/screen-adaptive-view.js.map +1 -1
- package/dist/react/components/list-pagination.d.ts +1 -31
- package/dist/react/components/list-pagination.d.ts.map +1 -1
- package/dist/react/components/list-pagination.js +10 -37
- package/dist/react/components/list-pagination.js.map +1 -1
- package/dist/react/components/menubar.d.ts +2 -2
- package/dist/react/components/menubar.d.ts.map +1 -1
- package/dist/react/components/menubar.js +17 -17
- package/dist/react/components/menubar.js.map +1 -1
- package/dist/react/components/opener-focus.d.ts +2 -8
- package/dist/react/components/opener-focus.d.ts.map +1 -1
- package/dist/react/components/opener-focus.js +4 -10
- package/dist/react/components/opener-focus.js.map +1 -1
- package/dist/react/components/pending-guard.d.ts +1 -7
- package/dist/react/components/pending-guard.d.ts.map +1 -1
- package/dist/react/components/pending-guard.js +1 -7
- package/dist/react/components/pending-guard.js.map +1 -1
- package/dist/react/components/popover.d.ts +2 -2
- package/dist/react/components/popover.d.ts.map +1 -1
- package/dist/react/components/popover.js +5 -5
- package/dist/react/components/popover.js.map +1 -1
- package/dist/react/components/progress.d.ts +2 -2
- package/dist/react/components/progress.d.ts.map +1 -1
- package/dist/react/components/progress.js +5 -5
- package/dist/react/components/progress.js.map +1 -1
- package/dist/react/components/radio-group.d.ts +2 -2
- package/dist/react/components/radio-group.d.ts.map +1 -1
- package/dist/react/components/radio-group.js +7 -7
- package/dist/react/components/radio-group.js.map +1 -1
- package/dist/react/components/relative-time.d.ts +1 -9
- package/dist/react/components/relative-time.d.ts.map +1 -1
- package/dist/react/components/relative-time.js +8 -11
- package/dist/react/components/relative-time.js.map +1 -1
- package/dist/react/components/reload-recovery-notice.d.ts +3 -17
- package/dist/react/components/reload-recovery-notice.d.ts.map +1 -1
- package/dist/react/components/reload-recovery-notice.js +7 -12
- package/dist/react/components/reload-recovery-notice.js.map +1 -1
- package/dist/react/components/scroll-area.d.ts +2 -2
- package/dist/react/components/scroll-area.d.ts.map +1 -1
- package/dist/react/components/scroll-area.js +6 -8
- package/dist/react/components/scroll-area.js.map +1 -1
- package/dist/react/components/scroll-to-top-button.d.ts +6 -30
- package/dist/react/components/scroll-to-top-button.d.ts.map +1 -1
- package/dist/react/components/scroll-to-top-button.js +9 -9
- package/dist/react/components/scroll-to-top-button.js.map +1 -1
- package/dist/react/components/search-dropdown.d.ts +0 -53
- package/dist/react/components/search-dropdown.d.ts.map +1 -1
- package/dist/react/components/search-dropdown.js +10 -39
- package/dist/react/components/search-dropdown.js.map +1 -1
- package/dist/react/components/select.d.ts +2 -9
- package/dist/react/components/select.d.ts.map +1 -1
- package/dist/react/components/select.js +19 -21
- package/dist/react/components/select.js.map +1 -1
- package/dist/react/components/separator.d.ts +2 -2
- package/dist/react/components/separator.d.ts.map +1 -1
- package/dist/react/components/separator.js +5 -5
- package/dist/react/components/separator.js.map +1 -1
- package/dist/react/components/sheet.d.ts +3 -3
- package/dist/react/components/sheet.d.ts.map +1 -1
- package/dist/react/components/sheet.js +21 -21
- package/dist/react/components/sheet.js.map +1 -1
- package/dist/react/components/show-more-toggle.d.ts +2 -18
- package/dist/react/components/show-more-toggle.d.ts.map +1 -1
- package/dist/react/components/show-more-toggle.js +6 -11
- package/dist/react/components/show-more-toggle.js.map +1 -1
- package/dist/react/components/skeleton.d.ts +1 -1
- package/dist/react/components/skeleton.d.ts.map +1 -1
- package/dist/react/components/skeleton.js +3 -3
- package/dist/react/components/skeleton.js.map +1 -1
- package/dist/react/components/slider.d.ts +2 -2
- package/dist/react/components/slider.d.ts.map +1 -1
- package/dist/react/components/slider.js +5 -5
- package/dist/react/components/slider.js.map +1 -1
- package/dist/react/components/spinner.d.ts +1 -15
- package/dist/react/components/spinner.d.ts.map +1 -1
- package/dist/react/components/spinner.js +10 -18
- package/dist/react/components/spinner.js.map +1 -1
- package/dist/react/components/switch.d.ts +2 -9
- package/dist/react/components/switch.d.ts.map +1 -1
- package/dist/react/components/switch.js +13 -10
- package/dist/react/components/switch.js.map +1 -1
- package/dist/react/components/table.d.ts +2 -12
- package/dist/react/components/table.d.ts.map +1 -1
- package/dist/react/components/table.js +24 -30
- package/dist/react/components/table.js.map +1 -1
- package/dist/react/components/tabs.d.ts +2 -2
- package/dist/react/components/tabs.d.ts.map +1 -1
- package/dist/react/components/tabs.js +7 -7
- package/dist/react/components/tabs.js.map +1 -1
- package/dist/react/components/textarea.d.ts +5 -16
- package/dist/react/components/textarea.d.ts.map +1 -1
- package/dist/react/components/textarea.js +11 -9
- package/dist/react/components/textarea.js.map +1 -1
- package/dist/react/components/toast.d.ts +4 -8
- package/dist/react/components/toast.d.ts.map +1 -1
- package/dist/react/components/toast.js +26 -47
- package/dist/react/components/toast.js.map +1 -1
- package/dist/react/components/toaster.d.ts.map +1 -1
- package/dist/react/components/toaster.js +5 -5
- package/dist/react/components/toaster.js.map +1 -1
- package/dist/react/components/tooltip.d.ts +2 -2
- package/dist/react/components/tooltip.d.ts.map +1 -1
- package/dist/react/components/tooltip.js +5 -5
- package/dist/react/components/tooltip.js.map +1 -1
- package/dist/react/hooks/use-async-action.d.ts +1 -21
- package/dist/react/hooks/use-async-action.d.ts.map +1 -1
- package/dist/react/hooks/use-async-action.js +3 -11
- package/dist/react/hooks/use-async-action.js.map +1 -1
- package/dist/react/hooks/use-cursor-page.d.ts +1 -63
- package/dist/react/hooks/use-cursor-page.d.ts.map +1 -1
- package/dist/react/hooks/use-cursor-page.js +3 -39
- package/dist/react/hooks/use-cursor-page.js.map +1 -1
- package/dist/react/hooks/use-media-query.js +5 -5
- package/dist/react/hooks/use-media-query.js.map +1 -1
- package/dist/react/hooks/use-paged-list.d.ts +0 -43
- package/dist/react/hooks/use-paged-list.d.ts.map +1 -1
- package/dist/react/hooks/use-paged-list.js +2 -17
- package/dist/react/hooks/use-paged-list.js.map +1 -1
- package/dist/react/hooks/use-return-scroll.d.ts +1 -10
- package/dist/react/hooks/use-return-scroll.d.ts.map +1 -1
- package/dist/react/hooks/use-return-scroll.js +13 -45
- package/dist/react/hooks/use-return-scroll.js.map +1 -1
- package/dist/react/hooks/use-toast.d.ts +3 -11
- package/dist/react/hooks/use-toast.d.ts.map +1 -1
- package/dist/react/hooks/use-toast.js +18 -21
- package/dist/react/hooks/use-toast.js.map +1 -1
- package/dist/react/index.d.ts +74 -74
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +51 -57
- package/dist/react/index.js.map +1 -1
- package/package.json +8 -6
|
@@ -1,29 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The control state a paginated list exposes to its paginator UI, rendered by
|
|
3
|
-
* the ONE `ListPagination` component. Nothing else builds
|
|
4
|
-
* Previous / counter / Next controls.
|
|
5
|
-
*
|
|
6
|
-
* `totalPages` is the flavor discriminant, and the ONLY difference between the
|
|
7
|
-
* two flavors:
|
|
8
|
-
*
|
|
9
|
-
* - **Known total** (client-side slice pagination — {@link usePagedList}):
|
|
10
|
-
* `totalPages` is a number and the counter reads `"2 of 5"`.
|
|
11
|
-
* - **Unknown total** (server/cursor pagination — `useCursorPage().paginationFor(hasMore)`,
|
|
12
|
-
* or a caller's own query hook): `totalPages` is omitted and the counter reads
|
|
13
|
-
* `"Page 2"`.
|
|
14
|
-
*
|
|
15
|
-
* Both flavors share one visibility rule, one disabled-edge rule, one live
|
|
16
|
-
* region, and one set of classes because they share one component (ENG-002,
|
|
17
|
-
* FRONTEND-001).
|
|
18
|
-
*/
|
|
19
1
|
export interface ListPaginationState {
|
|
20
|
-
/** 1-based page currently on screen. */
|
|
21
2
|
currentPage: number;
|
|
22
|
-
/**
|
|
23
|
-
* Total page count when it is knowable — at least 1, even for an empty list
|
|
24
|
-
* (an empty list is one empty page). Omitted for cursor/`hasMore` pagination,
|
|
25
|
-
* where the total is unknown until the last page is reached.
|
|
26
|
-
*/
|
|
27
3
|
totalPages?: number;
|
|
28
4
|
canPreviousPage: boolean;
|
|
29
5
|
canNextPage: boolean;
|
|
@@ -31,30 +7,11 @@ export interface ListPaginationState {
|
|
|
31
7
|
goToNextPage: () => void;
|
|
32
8
|
}
|
|
33
9
|
export interface PagedList<T> extends ListPaginationState {
|
|
34
|
-
/** Always known for a slice-paginated list. */
|
|
35
10
|
totalPages: number;
|
|
36
|
-
/** The slice of `items` belonging to `currentPage`. */
|
|
37
11
|
pageItems: T[];
|
|
38
12
|
}
|
|
39
13
|
export interface UsePagedListOptions {
|
|
40
|
-
/**
|
|
41
|
-
* Called after the page actually changed. Surfaces that keep a per-page
|
|
42
|
-
* selection (an open detail row) clear it here — the old selection is not on
|
|
43
|
-
* the new page.
|
|
44
|
-
*/
|
|
45
14
|
onPageChange?: () => void;
|
|
46
15
|
}
|
|
47
|
-
/**
|
|
48
|
-
* The single owner of client-side slice pagination: local page state, the page
|
|
49
|
-
* math, and the current slice over an ALREADY-FETCHED list.
|
|
50
|
-
*
|
|
51
|
-
* Page size is the caller's — every surface passes its own page-size constant
|
|
52
|
-
* (ENG-005), never a literal. Ordering and filtering stay with the caller: pass
|
|
53
|
-
* the list already sorted and filtered.
|
|
54
|
-
*
|
|
55
|
-
* Not for server-paged lists — a cursor/`hasMore` feed pages through the
|
|
56
|
-
* caller's data layer, not through a slice; use `useCursorPage` (or the query
|
|
57
|
-
* hook's own page state) with the same `ListPagination` control.
|
|
58
|
-
*/
|
|
59
16
|
export declare function usePagedList<T>(items: readonly T[], pageSize: number, options?: UsePagedListOptions): PagedList<T>;
|
|
60
17
|
//# sourceMappingURL=use-paged-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-paged-list.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-paged-list.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"use-paged-list.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-paged-list.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,CAAE,SAAQ,mBAAmB;IACvD,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,CAAC,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,CAAC,EAC5B,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,mBAAwB,GAChC,SAAS,CAAC,CAAC,CAAC,CAiCd"}
|
|
@@ -1,24 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import { useCallback, useMemo, useState } from
|
|
3
|
-
/**
|
|
4
|
-
* The single owner of client-side slice pagination: local page state, the page
|
|
5
|
-
* math, and the current slice over an ALREADY-FETCHED list.
|
|
6
|
-
*
|
|
7
|
-
* Page size is the caller's — every surface passes its own page-size constant
|
|
8
|
-
* (ENG-005), never a literal. Ordering and filtering stay with the caller: pass
|
|
9
|
-
* the list already sorted and filtered.
|
|
10
|
-
*
|
|
11
|
-
* Not for server-paged lists — a cursor/`hasMore` feed pages through the
|
|
12
|
-
* caller's data layer, not through a slice; use `useCursorPage` (or the query
|
|
13
|
-
* hook's own page state) with the same `ListPagination` control.
|
|
14
|
-
*/
|
|
1
|
+
'use client';
|
|
2
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
15
3
|
export function usePagedList(items, pageSize, options = {}) {
|
|
16
4
|
const { onPageChange } = options;
|
|
17
5
|
const [requestedPage, setRequestedPage] = useState(1);
|
|
18
6
|
const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
|
|
19
|
-
// The list can shrink under a page that is already open (an item is deleted,
|
|
20
|
-
// a filter narrows). Clamping keeps the paginator on a real page instead of
|
|
21
|
-
// rendering an empty slice under an out-of-range "4 of 2".
|
|
22
7
|
const currentPage = Math.min(Math.max(1, requestedPage), totalPages);
|
|
23
8
|
const pageItems = useMemo(() => {
|
|
24
9
|
const startIndex = (currentPage - 1) * pageSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-paged-list.js","sourceRoot":"","sources":["../../../src/react/hooks/use-paged-list.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-paged-list.js","sourceRoot":"","sources":["../../../src/react/hooks/use-paged-list.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAoBvD,MAAM,UAAU,YAAY,CAC1B,KAAmB,EACnB,QAAgB,EAChB,UAA+B,EAAE;IAEjC,MAAM,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;IACjC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,UAAU,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC;QAChD,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,WAAW,IAAI,CAAC;YAAE,OAAO;QAC7B,gBAAgB,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAClC,YAAY,EAAE,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,WAAW,IAAI,UAAU;YAAE,OAAO;QACtC,gBAAgB,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAClC,YAAY,EAAE,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE5C,OAAO;QACL,WAAW;QACX,UAAU;QACV,SAAS;QACT,eAAe,EAAE,WAAW,GAAG,CAAC;QAChC,WAAW,EAAE,WAAW,GAAG,UAAU;QACrC,gBAAgB;QAChB,YAAY;KACb,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\n\nexport interface ListPaginationState {\n currentPage: number;\n totalPages?: number;\n canPreviousPage: boolean;\n canNextPage: boolean;\n goToPreviousPage: () => void;\n goToNextPage: () => void;\n}\n\nexport interface PagedList<T> extends ListPaginationState {\n totalPages: number;\n pageItems: T[];\n}\n\nexport interface UsePagedListOptions {\n onPageChange?: () => void;\n}\n\nexport function usePagedList<T>(\n items: readonly T[],\n pageSize: number,\n options: UsePagedListOptions = {},\n): PagedList<T> {\n const { onPageChange } = options;\n const [requestedPage, setRequestedPage] = useState(1);\n\n const totalPages = Math.max(1, Math.ceil(items.length / pageSize));\n const currentPage = Math.min(Math.max(1, requestedPage), totalPages);\n\n const pageItems = useMemo(() => {\n const startIndex = (currentPage - 1) * pageSize;\n return items.slice(startIndex, startIndex + pageSize);\n }, [items, currentPage, pageSize]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage <= 1) return;\n setRequestedPage(currentPage - 1);\n onPageChange?.();\n }, [currentPage, onPageChange]);\n\n const goToNextPage = useCallback(() => {\n if (currentPage >= totalPages) return;\n setRequestedPage(currentPage + 1);\n onPageChange?.();\n }, [currentPage, totalPages, onPageChange]);\n\n return {\n currentPage,\n totalPages,\n pageItems,\n canPreviousPage: currentPage > 1,\n canNextPage: currentPage < totalPages,\n goToPreviousPage,\n goToNextPage,\n };\n}\n"]}
|
|
@@ -1,26 +1,17 @@
|
|
|
1
1
|
export interface ReturnScrollEntry {
|
|
2
|
-
/** The saved `window.scrollY`. */
|
|
3
2
|
y: number;
|
|
4
|
-
/** Epoch ms at save time (diagnostic; the caller decides eligibility, not the hook). */
|
|
5
3
|
savedAt: number;
|
|
6
4
|
}
|
|
7
5
|
export interface UseReturnScrollOptions {
|
|
8
|
-
/** The caller's CANONICAL list URL — equivalent list states must give the same key. */
|
|
9
6
|
key: string;
|
|
10
|
-
/** Decided by the caller ONCE at mount (e.g. "the list's data was already cached on first render"). */
|
|
11
7
|
eligible: boolean;
|
|
12
|
-
/** The list is displayed at its real height: data present, no error surface in its place. */
|
|
13
8
|
ready: boolean;
|
|
14
9
|
}
|
|
15
10
|
export interface UseReturnScrollResult {
|
|
16
|
-
/** Record the current window offset for `key`. Call right before navigating away. */
|
|
17
11
|
save: () => void;
|
|
18
12
|
}
|
|
19
|
-
/** The stored entry for `key`, or null when absent, unreadable, or malformed. */
|
|
20
13
|
export declare function readReturnScroll(key: string): ReturnScrollEntry | null;
|
|
21
|
-
/** Record `y` (default: the current `window.scrollY`) for `key`. No-op without storage. */
|
|
22
14
|
export declare function saveReturnScroll(key: string, y?: number): void;
|
|
23
|
-
/** Drop the entry for `key` (e.g. the list changed underneath the saved offset). */
|
|
24
15
|
export declare function clearReturnScroll(key: string): void;
|
|
25
|
-
export declare function useReturnScroll({ key, eligible, ready }: UseReturnScrollOptions): UseReturnScrollResult;
|
|
16
|
+
export declare function useReturnScroll({ key, eligible, ready, }: UseReturnScrollOptions): UseReturnScrollResult;
|
|
26
17
|
//# sourceMappingURL=use-return-scroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-return-scroll.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-return-scroll.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-return-scroll.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-return-scroll.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAeD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,iBAAiB,GAAG,IAAI,CActE;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAQ9D;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAMnD;AAQD,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,QAAQ,EACR,KAAK,GACN,EAAE,sBAAsB,GAAG,qBAAqB,CAkChD"}
|
|
@@ -1,32 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
// A same-page view swap keeps its component mounted and can restore from a ref; a list
|
|
5
|
-
// whose detail pages have their own URLs unmounts, so the offset has to survive in
|
|
6
|
-
// per-tab storage and the restore has to wait until the list is displayed at its real
|
|
7
|
-
// height again. This hook is the ONE owner of that mechanism. It knows nothing about
|
|
8
|
-
// what the list is — the caller supplies a canonical key, decides eligibility once at
|
|
9
|
-
// mount, and reports readiness.
|
|
10
|
-
//
|
|
11
|
-
// Contract (every rule below is tested):
|
|
12
|
-
// - `save()` writes { y, savedAt } for `key` — call it immediately before navigating
|
|
13
|
-
// away (inside any guarded-navigation callback, so a cancelled leave writes nothing).
|
|
14
|
-
// - `eligible` is latched per key the first time the hook sees that key. Not eligible
|
|
15
|
-
// ⇒ the entry is deleted immediately and permanently for that key; a later flip
|
|
16
|
-
// of `eligible` or `ready` never re-arms the restore.
|
|
17
|
-
// - `ready` ⇒ the restore fires ONCE, in a requestAnimationFrame, `behavior: "instant"`,
|
|
18
|
-
// then consumes the entry. The scheduled frame is cancelled on unmount or key change.
|
|
19
|
-
// React Strict Mode's mount/unmount/mount cancels and reschedules, so exactly one
|
|
20
|
-
// scroll happens and the entry is consumed exactly once.
|
|
21
|
-
// - Blocked, unavailable, or malformed storage is a silent no-op.
|
|
22
|
-
import * as React from "react";
|
|
23
|
-
const STORAGE_PREFIX = "return-scroll:";
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
const STORAGE_PREFIX = 'return-scroll:';
|
|
24
4
|
function storageKey(key) {
|
|
25
5
|
return `${STORAGE_PREFIX}${key}`;
|
|
26
6
|
}
|
|
27
7
|
function sessionStorageOrNull() {
|
|
28
8
|
try {
|
|
29
|
-
if (typeof window ===
|
|
9
|
+
if (typeof window === 'undefined')
|
|
30
10
|
return null;
|
|
31
11
|
return window.sessionStorage ?? null;
|
|
32
12
|
}
|
|
@@ -34,7 +14,6 @@ function sessionStorageOrNull() {
|
|
|
34
14
|
return null;
|
|
35
15
|
}
|
|
36
16
|
}
|
|
37
|
-
/** The stored entry for `key`, or null when absent, unreadable, or malformed. */
|
|
38
17
|
export function readReturnScroll(key) {
|
|
39
18
|
const storage = sessionStorageOrNull();
|
|
40
19
|
if (!storage)
|
|
@@ -44,32 +23,28 @@ export function readReturnScroll(key) {
|
|
|
44
23
|
if (!raw)
|
|
45
24
|
return null;
|
|
46
25
|
const parsed = JSON.parse(raw);
|
|
47
|
-
if (typeof parsed !==
|
|
26
|
+
if (typeof parsed !== 'object' || parsed === null)
|
|
48
27
|
return null;
|
|
49
28
|
const { y, savedAt } = parsed;
|
|
50
|
-
if (typeof y !==
|
|
29
|
+
if (typeof y !== 'number' || !Number.isFinite(y) || y < 0)
|
|
51
30
|
return null;
|
|
52
|
-
return { y, savedAt: typeof savedAt ===
|
|
31
|
+
return { y, savedAt: typeof savedAt === 'number' ? savedAt : 0 };
|
|
53
32
|
}
|
|
54
33
|
catch {
|
|
55
34
|
return null;
|
|
56
35
|
}
|
|
57
36
|
}
|
|
58
|
-
/** Record `y` (default: the current `window.scrollY`) for `key`. No-op without storage. */
|
|
59
37
|
export function saveReturnScroll(key, y) {
|
|
60
38
|
const storage = sessionStorageOrNull();
|
|
61
39
|
if (!storage)
|
|
62
40
|
return;
|
|
63
41
|
try {
|
|
64
|
-
const offset = typeof y ===
|
|
42
|
+
const offset = typeof y === 'number' ? y : window.scrollY;
|
|
65
43
|
const entry = { y: offset, savedAt: Date.now() };
|
|
66
44
|
storage.setItem(storageKey(key), JSON.stringify(entry));
|
|
67
45
|
}
|
|
68
|
-
catch {
|
|
69
|
-
/* storage blocked or full — nothing to restore later, which is the honest outcome */
|
|
70
|
-
}
|
|
46
|
+
catch { }
|
|
71
47
|
}
|
|
72
|
-
/** Drop the entry for `key` (e.g. the list changed underneath the saved offset). */
|
|
73
48
|
export function clearReturnScroll(key) {
|
|
74
49
|
const storage = sessionStorageOrNull();
|
|
75
50
|
if (!storage)
|
|
@@ -77,14 +52,10 @@ export function clearReturnScroll(key) {
|
|
|
77
52
|
try {
|
|
78
53
|
storage.removeItem(storageKey(key));
|
|
79
54
|
}
|
|
80
|
-
catch {
|
|
81
|
-
/* nothing to clear */
|
|
82
|
-
}
|
|
55
|
+
catch { }
|
|
83
56
|
}
|
|
84
|
-
export function useReturnScroll({ key, eligible, ready }) {
|
|
57
|
+
export function useReturnScroll({ key, eligible, ready, }) {
|
|
85
58
|
const decisionRef = React.useRef(null);
|
|
86
|
-
// Decide ONCE per key, the first time the hook sees it. Effects may read and write refs;
|
|
87
|
-
// the decision is latched, so a later `eligible` flip finds it already made and returns.
|
|
88
59
|
React.useEffect(() => {
|
|
89
60
|
if (decisionRef.current?.key === key)
|
|
90
61
|
return;
|
|
@@ -94,24 +65,21 @@ export function useReturnScroll({ key, eligible, ready }) {
|
|
|
94
65
|
return;
|
|
95
66
|
}
|
|
96
67
|
if (!eligible) {
|
|
97
|
-
// A cold return: nothing cached to restore against. Discard permanently for this visit.
|
|
98
68
|
clearReturnScroll(key);
|
|
99
69
|
decisionRef.current = { key, y: null, done: true };
|
|
100
70
|
return;
|
|
101
71
|
}
|
|
102
72
|
decisionRef.current = { key, y: entry.y, done: false };
|
|
103
73
|
}, [key, eligible]);
|
|
104
|
-
// Restore once the list is displayed at its real height. The frame is cancelled on unmount
|
|
105
|
-
// or key change; Strict Mode's re-run reschedules it, so exactly one scroll happens.
|
|
106
74
|
React.useEffect(() => {
|
|
107
75
|
const decision = decisionRef.current;
|
|
108
76
|
if (!decision || decision.key !== key || decision.y === null || decision.done || !ready)
|
|
109
77
|
return;
|
|
110
|
-
if (typeof window ===
|
|
78
|
+
if (typeof window === 'undefined')
|
|
111
79
|
return;
|
|
112
80
|
const y = decision.y;
|
|
113
81
|
const frame = window.requestAnimationFrame(() => {
|
|
114
|
-
window.scrollTo({ top: y, left: 0, behavior:
|
|
82
|
+
window.scrollTo({ top: y, left: 0, behavior: 'instant' });
|
|
115
83
|
clearReturnScroll(key);
|
|
116
84
|
decision.done = true;
|
|
117
85
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-return-scroll.js","sourceRoot":"","sources":["../../../src/react/hooks/use-return-scroll.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,
|
|
1
|
+
{"version":3,"file":"use-return-scroll.js","sourceRoot":"","sources":["../../../src/react/hooks/use-return-scroll.ts"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst STORAGE_PREFIX = 'return-scroll:';\n\nexport interface ReturnScrollEntry {\n y: number;\n savedAt: number;\n}\n\nexport interface UseReturnScrollOptions {\n key: string;\n eligible: boolean;\n ready: boolean;\n}\n\nexport interface UseReturnScrollResult {\n save: () => void;\n}\n\nfunction storageKey(key: string): string {\n return `${STORAGE_PREFIX}${key}`;\n}\n\nfunction sessionStorageOrNull(): Storage | null {\n try {\n if (typeof window === 'undefined') return null;\n return window.sessionStorage ?? null;\n } catch {\n return null;\n }\n}\n\nexport function readReturnScroll(key: string): ReturnScrollEntry | null {\n const storage = sessionStorageOrNull();\n if (!storage) return null;\n try {\n const raw = storage.getItem(storageKey(key));\n if (!raw) return null;\n const parsed: unknown = JSON.parse(raw);\n if (typeof parsed !== 'object' || parsed === null) return null;\n const { y, savedAt } = parsed as { y?: unknown; savedAt?: unknown };\n if (typeof y !== 'number' || !Number.isFinite(y) || y < 0) return null;\n return { y, savedAt: typeof savedAt === 'number' ? savedAt : 0 };\n } catch {\n return null;\n }\n}\n\nexport function saveReturnScroll(key: string, y?: number): void {\n const storage = sessionStorageOrNull();\n if (!storage) return;\n try {\n const offset = typeof y === 'number' ? y : window.scrollY;\n const entry: ReturnScrollEntry = { y: offset, savedAt: Date.now() };\n storage.setItem(storageKey(key), JSON.stringify(entry));\n } catch {}\n}\n\nexport function clearReturnScroll(key: string): void {\n const storage = sessionStorageOrNull();\n if (!storage) return;\n try {\n storage.removeItem(storageKey(key));\n } catch {}\n}\n\ninterface Decision {\n key: string;\n y: number | null;\n done: boolean;\n}\n\nexport function useReturnScroll({\n key,\n eligible,\n ready,\n}: UseReturnScrollOptions): UseReturnScrollResult {\n const decisionRef = React.useRef<Decision | null>(null);\n\n React.useEffect(() => {\n if (decisionRef.current?.key === key) return;\n const entry = readReturnScroll(key);\n if (!entry) {\n decisionRef.current = { key, y: null, done: true };\n return;\n }\n if (!eligible) {\n clearReturnScroll(key);\n decisionRef.current = { key, y: null, done: true };\n return;\n }\n decisionRef.current = { key, y: entry.y, done: false };\n }, [key, eligible]);\n\n React.useEffect(() => {\n const decision = decisionRef.current;\n if (!decision || decision.key !== key || decision.y === null || decision.done || !ready) return;\n if (typeof window === 'undefined') return;\n const y = decision.y;\n const frame = window.requestAnimationFrame(() => {\n window.scrollTo({ top: y, left: 0, behavior: 'instant' as ScrollBehavior });\n clearReturnScroll(key);\n decision.done = true;\n });\n return () => window.cancelAnimationFrame(frame);\n }, [key, ready]);\n\n const save = React.useCallback(() => saveReturnScroll(key), [key]);\n\n return { save };\n}\n"]}
|
|
@@ -1,27 +1,19 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
export type ToastVariant =
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning' | 'error';
|
|
3
3
|
export type ToasterToast = {
|
|
4
4
|
id: string;
|
|
5
5
|
title?: React.ReactNode;
|
|
6
6
|
description?: React.ReactNode;
|
|
7
7
|
action?: React.ReactNode;
|
|
8
8
|
variant?: ToastVariant;
|
|
9
|
-
/** Radix controlled open state */
|
|
10
9
|
open?: boolean;
|
|
11
10
|
onOpenChange?: (open: boolean) => void;
|
|
12
|
-
/** ms */
|
|
13
11
|
duration?: number;
|
|
14
|
-
/** show X button */
|
|
15
12
|
dismissible?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* When `true`, the toast does not auto-dismiss and renders no countdown bar.
|
|
18
|
-
* `duration` is ignored. The user must click the X (or programmatic `dismiss`)
|
|
19
|
-
* to remove it.
|
|
20
|
-
*/
|
|
21
13
|
persistent?: boolean;
|
|
22
14
|
};
|
|
23
15
|
type ToastProps = ToasterToast;
|
|
24
|
-
export declare function toast(input: Omit<ToastProps,
|
|
16
|
+
export declare function toast(input: Omit<ToastProps, 'id'>): {
|
|
25
17
|
id: string;
|
|
26
18
|
dismiss: () => void;
|
|
27
19
|
update: (props: Partial<ToastProps>) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-toast.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,UAAU,GAAG,YAAY,CAAC;AAuF/B,wBAAgB,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;;;oBAQ1B,OAAO,CAAC,UAAU,CAAC;EAwB3C;AAED,wBAAgB,QAAQ;;wBAcA,MAAM;YA9HpB,UAAU,EAAE;EAmIrB"}
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import * as React from
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
const TOAST_LIMIT = 3;
|
|
3
|
-
//
|
|
4
|
-
// Just long enough for the close animation to finish. Larger values produce a
|
|
5
|
-
// visible dead-air gap after the countdown bar reaches empty.
|
|
3
|
+
// Long enough for the close animation; longer leaves dead air after the countdown bar empties.
|
|
6
4
|
const TOAST_REMOVE_DELAY = 150;
|
|
7
5
|
const toastTimeouts = new Map();
|
|
8
6
|
const listeners = [];
|
|
9
7
|
let memoryState = { toasts: [] };
|
|
10
8
|
const reducer = (state, action) => {
|
|
11
9
|
switch (action.type) {
|
|
12
|
-
case
|
|
10
|
+
case 'ADD_TOAST':
|
|
13
11
|
return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
|
|
14
|
-
case
|
|
12
|
+
case 'UPDATE_TOAST':
|
|
15
13
|
return {
|
|
16
14
|
...state,
|
|
17
15
|
toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
|
|
18
16
|
};
|
|
19
|
-
case
|
|
17
|
+
case 'DISMISS_TOAST': {
|
|
20
18
|
const { toastId } = action;
|
|
21
19
|
if (toastId) {
|
|
22
20
|
return {
|
|
@@ -26,7 +24,7 @@ const reducer = (state, action) => {
|
|
|
26
24
|
}
|
|
27
25
|
return { ...state, toasts: state.toasts.map((t) => ({ ...t, open: false })) };
|
|
28
26
|
}
|
|
29
|
-
case
|
|
27
|
+
case 'REMOVE_TOAST': {
|
|
30
28
|
const { toastId } = action;
|
|
31
29
|
if (!toastId)
|
|
32
30
|
return { ...state, toasts: [] };
|
|
@@ -48,20 +46,20 @@ function addToRemoveQueue(toastId) {
|
|
|
48
46
|
return;
|
|
49
47
|
const timeout = setTimeout(() => {
|
|
50
48
|
toastTimeouts.delete(toastId);
|
|
51
|
-
dispatch({ type:
|
|
49
|
+
dispatch({ type: 'REMOVE_TOAST', toastId });
|
|
52
50
|
}, TOAST_REMOVE_DELAY);
|
|
53
51
|
toastTimeouts.set(toastId, timeout);
|
|
54
52
|
}
|
|
55
53
|
function defaultDurationForVariant(variant) {
|
|
56
54
|
switch (variant) {
|
|
57
|
-
case
|
|
55
|
+
case 'success':
|
|
58
56
|
return 3000;
|
|
59
|
-
case
|
|
60
|
-
case
|
|
57
|
+
case 'destructive':
|
|
58
|
+
case 'error':
|
|
61
59
|
return 6000;
|
|
62
|
-
case
|
|
60
|
+
case 'warning':
|
|
63
61
|
return 5000;
|
|
64
|
-
case
|
|
62
|
+
case 'default':
|
|
65
63
|
default:
|
|
66
64
|
return 4000;
|
|
67
65
|
}
|
|
@@ -69,17 +67,16 @@ function defaultDurationForVariant(variant) {
|
|
|
69
67
|
export function toast(input) {
|
|
70
68
|
const id = genId();
|
|
71
69
|
const dismiss = () => {
|
|
72
|
-
dispatch({ type:
|
|
70
|
+
dispatch({ type: 'DISMISS_TOAST', toastId: id });
|
|
73
71
|
addToRemoveQueue(id);
|
|
74
72
|
};
|
|
75
|
-
const update = (props) => dispatch({ type:
|
|
76
|
-
const variant = input.variant ??
|
|
77
|
-
// Persistent toasts disable auto-dismiss entirely; Radix accepts `Infinity`.
|
|
73
|
+
const update = (props) => dispatch({ type: 'UPDATE_TOAST', toast: { ...props, id } });
|
|
74
|
+
const variant = input.variant ?? 'default';
|
|
78
75
|
const duration = input.persistent
|
|
79
76
|
? Infinity
|
|
80
|
-
: input.duration ?? defaultDurationForVariant(variant);
|
|
77
|
+
: (input.duration ?? defaultDurationForVariant(variant));
|
|
81
78
|
dispatch({
|
|
82
|
-
type:
|
|
79
|
+
type: 'ADD_TOAST',
|
|
83
80
|
toast: {
|
|
84
81
|
id,
|
|
85
82
|
open: true,
|
|
@@ -109,7 +106,7 @@ export function useToast() {
|
|
|
109
106
|
...state,
|
|
110
107
|
toast,
|
|
111
108
|
dismiss: (toastId) => {
|
|
112
|
-
dispatch({ type:
|
|
109
|
+
dispatch({ type: 'DISMISS_TOAST', toastId });
|
|
113
110
|
if (toastId)
|
|
114
111
|
addToRemoveQueue(toastId);
|
|
115
112
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-toast.js","sourceRoot":"","sources":["../../../src/react/hooks/use-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,GAAG,CAAC,CAAC;AACtB
|
|
1
|
+
{"version":3,"file":"use-toast.js","sourceRoot":"","sources":["../../../src/react/hooks/use-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nconst TOAST_LIMIT = 3;\n// Long enough for the close animation; longer leaves dead air after the countdown bar empties.\nconst TOAST_REMOVE_DELAY = 150;\n\nexport type ToastVariant = 'default' | 'destructive' | 'success' | 'warning' | 'error';\n\nexport type ToasterToast = {\n id: string;\n title?: React.ReactNode;\n description?: React.ReactNode;\n action?: React.ReactNode;\n variant?: ToastVariant;\n\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n duration?: number;\n\n dismissible?: boolean;\n\n persistent?: boolean;\n};\n\ntype ToastProps = ToasterToast;\n\ntype Action =\n | { type: 'ADD_TOAST'; toast: ToastProps }\n | { type: 'UPDATE_TOAST'; toast: Partial<ToastProps> & { id: string } }\n | { type: 'DISMISS_TOAST'; toastId?: string }\n | { type: 'REMOVE_TOAST'; toastId?: string };\n\ninterface State {\n toasts: ToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case 'ADD_TOAST':\n return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };\n\n case 'UPDATE_TOAST':\n return {\n ...state,\n toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),\n };\n\n case 'DISMISS_TOAST': {\n const { toastId } = action;\n\n if (toastId) {\n return {\n ...state,\n toasts: state.toasts.map((t) => (t.id === toastId ? { ...t, open: false } : t)),\n };\n }\n\n return { ...state, toasts: state.toasts.map((t) => ({ ...t, open: false })) };\n }\n\n case 'REMOVE_TOAST': {\n const { toastId } = action;\n if (!toastId) return { ...state, toasts: [] };\n return { ...state, toasts: state.toasts.filter((t) => t.id !== toastId) };\n }\n\n default:\n return state;\n }\n};\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => listener(memoryState));\n}\n\nfunction genId() {\n return Math.random().toString(36).slice(2, 10);\n}\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId)) return;\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({ type: 'REMOVE_TOAST', toastId });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n}\n\nfunction defaultDurationForVariant(variant: ToastVariant | undefined): number {\n switch (variant) {\n case 'success':\n return 3000;\n case 'destructive':\n case 'error':\n return 6000;\n case 'warning':\n return 5000;\n case 'default':\n default:\n return 4000;\n }\n}\n\nexport function toast(input: Omit<ToastProps, 'id'>) {\n const id = genId();\n\n const dismiss = () => {\n dispatch({ type: 'DISMISS_TOAST', toastId: id });\n addToRemoveQueue(id);\n };\n\n const update = (props: Partial<ToastProps>) =>\n dispatch({ type: 'UPDATE_TOAST', toast: { ...props, id } });\n\n const variant = input.variant ?? 'default';\n const duration = input.persistent\n ? Infinity\n : (input.duration ?? defaultDurationForVariant(variant));\n\n dispatch({\n type: 'ADD_TOAST',\n toast: {\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n dismissible: true,\n ...input,\n variant,\n duration,\n },\n });\n\n return { id, dismiss, update };\n}\n\nexport function useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) listeners.splice(index, 1);\n };\n }, []);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => {\n dispatch({ type: 'DISMISS_TOAST', toastId });\n if (toastId) addToRemoveQueue(toastId);\n },\n };\n}\n"]}
|