@keepkit/ui 0.4.0 → 0.6.0
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 +50 -41
- package/dist/index.d.ts +108 -43
- package/dist/index.js +425 -179
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -4,76 +4,85 @@
|
|
|
4
4
|
|
|
5
5
|
## 日本語
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Reactアプリケーション向けの標準利用パッケージです。`@keepkit/core`を内包し、Provider、保存ボタン、検索・ソート・ページング付きの一覧を少ないコードで構成できます。
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
pnpm add @keepkit/
|
|
10
|
+
pnpm add @keepkit/ui
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
|
-
import {
|
|
14
|
+
import { createBrowserStorageAdapter, createKeepKit } from "@keepkit/ui";
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
type ArticleMeta = { title: string; url: string };
|
|
17
|
+
const keep = createKeepKit<ArticleMeta>({
|
|
18
|
+
storage: createBrowserStorageAdapter({ key: "articles" }),
|
|
19
|
+
locale: "ja-JP",
|
|
20
|
+
labels: { save: "保存", remove: "削除" },
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
function SavedArticles() {
|
|
17
24
|
return (
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
<keep.Provider>
|
|
26
|
+
<keep.Collection
|
|
27
|
+
query={{ targetType: "article" }}
|
|
28
|
+
renderItem={(item) => <keep.Button item={{ id: item.id, targetType: item.targetType, meta: item.meta }} />}
|
|
29
|
+
/>
|
|
30
|
+
</keep.Provider>
|
|
22
31
|
);
|
|
23
32
|
}
|
|
24
33
|
```
|
|
25
34
|
|
|
26
|
-
|
|
35
|
+
`keep.Collection`は検索、ソート、ページング、loading / empty / error、ARIA live通知を標準で提供します。検索は既定で300msデバウンスされます。`features={{ tagFilter: true, bulkActions: true }}`でタグフィルターと一括操作も有効にできます。個別の`KeepList`、`KeepSearchInput`、`KeepSortSelect`、`KeepPagination`、`KeepItemCheckbox`、`KeepTagEditor`などは高度なレイアウト用に利用できます。`KeepBulkActions`はrender propsで操作UIを差し替えられます。
|
|
27
36
|
|
|
28
|
-
|
|
29
|
-
- `KeepList`: 保存一覧、読み込み中・空・エラー状態、標準カード、削除操作。`renderItem` で行単位を置き換えられます。
|
|
30
|
-
- `KeepItemCard`: タイトル、画像、保存ボタン、削除ボタン。`getImageProps`、`imageComponent`、`renderImage` とrender propsで表示を差し替えられます。
|
|
31
|
-
- `KeepTagFilter`: タグと件数を表示するキーボード操作可能なフィルター。`value` / `onValueChange` のcontrolled APIに対応します。
|
|
32
|
-
- `KeepNoteEditor`: ノートの編集・保存フォーム。`render` で完全なカスタムUIにできます。
|
|
33
|
-
- `KeepSearchInput` / `KeepSortSelect` / `KeepPagination`: `useKeepList` に渡す検索、ソート、offsetページング用のプリミティブ。
|
|
34
|
-
- `KeepTagEditor` / `KeepBulkActions`: タグ編集、複数選択、一括削除、一括タグ更新。
|
|
35
|
-
- `KeepUiProvider`: `labels`、`locale`、`labelResolver` をUI全体に適用するラベルコンテキスト。
|
|
36
|
-
- `KeepAnnouncements`: 保存、削除、ノート保存の成功を `aria-live` で通知します。
|
|
37
|
-
- `KeepEmptyState` / `KeepStatus`: 空、読み込み中、保存中、同期中、エラー状態の表示。
|
|
37
|
+
一覧のqueryは次の形式に統一されています。
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
```tsx
|
|
40
|
+
const query = {
|
|
41
|
+
targetType: "article",
|
|
42
|
+
tags: ["read"],
|
|
43
|
+
search: { query: "react", mode: "and" as const },
|
|
44
|
+
sort: { by: "updatedAt" as const, direction: "desc" as const },
|
|
45
|
+
pagination: { page: 1, pageSize: 20 },
|
|
46
|
+
};
|
|
47
|
+
```
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
保存操作にはID付きの最小入力を渡します。保存・更新時刻はKeepKitが管理します。
|
|
42
50
|
|
|
43
|
-
|
|
44
|
-
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- CSSはルートと渡された標準要素の `className` に適用します。コンポーネントはstyleを持ちません。
|
|
48
|
-
- `onClick`、`onSubmit`、`onChange` は利用者のハンドラーを先に実行し、`preventDefault()` された場合は既定操作を実行しません。
|
|
51
|
+
```tsx
|
|
52
|
+
const article = { id: "article-123", targetType: "article", meta: { title, url } };
|
|
53
|
+
const item = keep.useItem(article);
|
|
54
|
+
```
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
高度なフレームワーク中立APIは`@keepkit/core/core`、低レベルのReact APIは`@keepkit/core/react`、ストレージ実装は`@keepkit/core/storage`から利用できます。
|
|
51
57
|
|
|
52
58
|
## English
|
|
53
59
|
|
|
54
|
-
|
|
60
|
+
The standard React package for KeepKit. It includes `@keepkit/core` and provides a single typed provider, save button, and searchable/sortable/paginated collection workflow.
|
|
55
61
|
|
|
56
62
|
```bash
|
|
57
|
-
pnpm add @keepkit/
|
|
63
|
+
pnpm add @keepkit/ui
|
|
58
64
|
```
|
|
59
65
|
|
|
60
66
|
```tsx
|
|
61
|
-
import {
|
|
67
|
+
import { createBrowserStorageAdapter, createKeepKit } from "@keepkit/ui";
|
|
68
|
+
|
|
69
|
+
type ArticleMeta = { title: string; url: string };
|
|
70
|
+
const keep = createKeepKit<ArticleMeta>({
|
|
71
|
+
storage: createBrowserStorageAdapter({ key: "articles" }),
|
|
72
|
+
labels: { save: "Save", remove: "Remove" },
|
|
73
|
+
});
|
|
62
74
|
|
|
63
|
-
function
|
|
75
|
+
function SavedArticles() {
|
|
64
76
|
return (
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
</KeepProvider>
|
|
77
|
+
<keep.Provider>
|
|
78
|
+
<keep.Collection query={{ targetType: "article" }} />
|
|
79
|
+
</keep.Provider>
|
|
69
80
|
);
|
|
70
81
|
}
|
|
71
82
|
```
|
|
72
83
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
The package also exports `KeepSearchInput`, `KeepSortSelect`, `KeepPagination`, `KeepTagEditor`, `KeepBulkActions`, `KeepUiProvider`, and `KeepAnnouncements`. Configure labels once with `KeepUiProvider`, replace card images with `getImageProps` plus `imageComponent` or `renderImage`, and use `KeepAnnouncements` for success messages in a polite live region.
|
|
84
|
+
`keep.Collection` includes search, sorting, pagination, loading/empty/error states, and polite live announcements. Search is debounced by 300ms by default. Enable `features={{ tagFilter: true, bulkActions: true }}` for tag filtering and bulk operations. Use the individual `KeepList`, `KeepSearchInput`, `KeepSortSelect`, `KeepPagination`, `KeepItemCheckbox`, and `KeepTagEditor` primitives when you need a custom layout. `KeepBulkActions` supports render props for replacing its operation UI.
|
|
76
85
|
|
|
77
|
-
|
|
86
|
+
Collection queries use one canonical shape: `targetType`, `tags`, `search`, `sort`, `pagination`, `filter`, and `savedBetween`. Saved item inputs contain only `id`, `meta`, `targetType`, `note`, and `tags`; KeepKit owns persistence timestamps.
|
|
78
87
|
|
|
79
|
-
|
|
88
|
+
Framework-neutral APIs remain available from `@keepkit/core/core`, low-level React bindings from `@keepkit/core/react`, and storage adapters from `@keepkit/core/storage`.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,54 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export { KeepItem, KeepItemInput,
|
|
5
|
-
import { KeepButtonProps as KeepButtonProps$1, UseKeepListResult } from '@keepkit/core/react';
|
|
6
|
-
export { KeepContextValue, KeepProvider, KeepProviderProps, useKeepContext, useKeepItem, useKeepList } from '@keepkit/core/react';
|
|
2
|
+
import { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, ImgHTMLAttributes, HTMLAttributes, ComponentType, ReactElement, FormHTMLAttributes } from 'react';
|
|
3
|
+
import { KeepItem, KeepListQuery, KeepItemInput } from '@keepkit/core/core';
|
|
4
|
+
export { KeepItem, KeepItemInput, KeepListQuery, KeepSyncStatus } from '@keepkit/core/core';
|
|
5
|
+
import { CreateKeepKitOptions as CreateKeepKitOptions$1, KeepButtonProps as KeepButtonProps$1, UseKeepListResult, KeepProviderProps, useKeepContext, useKeepItem, KeepShortcutOptions } from '@keepkit/core/react';
|
|
6
|
+
export { KeepContextValue, KeepProvider, KeepProviderProps, KeepShortcutOptions, useKeepContext, useKeepItem, useKeepList, useKeepShortcut } from '@keepkit/core/react';
|
|
7
|
+
export { FallbackStorageAdapter, IndexedDBAdapter, IndexedDBSyncQueueAdapter, LocalStorageAdapter, LocalStorageSyncQueueAdapter, SyncStorageAdapter, createBrowserStorageAdapter, createStorageAdapter } from '@keepkit/core/storage';
|
|
7
8
|
|
|
8
|
-
type
|
|
9
|
+
type KeepItemCheckboxProps<TMeta = Record<string, unknown>> = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange"> & {
|
|
10
|
+
item: KeepItem<TMeta>;
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
14
|
+
};
|
|
15
|
+
/** A reusable accessible selection checkbox for a saved item. */
|
|
16
|
+
declare function KeepItemCheckbox<TMeta = Record<string, unknown>>({ item, checked, label, onCheckedChange, "aria-label": ariaLabel, ...props }: KeepItemCheckboxProps<TMeta>): react.JSX.Element;
|
|
17
|
+
|
|
18
|
+
type KeepSearchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
|
|
19
|
+
value?: string;
|
|
20
|
+
defaultValue?: string;
|
|
21
|
+
/** Delay before notifying consumers; set to 0 to disable debouncing. */
|
|
22
|
+
debounceMs?: number;
|
|
23
|
+
onValueChange?: (value: string) => void;
|
|
24
|
+
};
|
|
25
|
+
/** A controlled/uncontrolled search field with a small built-in debounce. */
|
|
26
|
+
declare function KeepSearchInput({ value: controlledValue, defaultValue, debounceMs, onValueChange, "aria-label": ariaLabel, placeholder, ...props }: KeepSearchInputProps): react.JSX.Element;
|
|
27
|
+
type KeepSortValue = "savedAt:desc" | "savedAt:asc" | "updatedAt:desc" | "updatedAt:asc";
|
|
28
|
+
type KeepSortSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> & {
|
|
29
|
+
value?: KeepSortValue;
|
|
30
|
+
defaultValue?: KeepSortValue;
|
|
31
|
+
onValueChange?: (value: KeepSortValue, sort: NonNullable<KeepListQuery["sort"]>) => void;
|
|
32
|
+
};
|
|
33
|
+
/** Emits a normalized sort descriptor that can be passed directly to useKeepList. */
|
|
34
|
+
declare function KeepSortSelect({ value: controlledValue, defaultValue, onValueChange, "aria-label": ariaLabel, children, ...props }: KeepSortSelectProps): react.JSX.Element;
|
|
35
|
+
type KeepPaginationState = {
|
|
36
|
+
page: number;
|
|
37
|
+
pageCount: number;
|
|
38
|
+
goToPage: (page: number) => void;
|
|
39
|
+
};
|
|
40
|
+
type KeepPaginationProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
41
|
+
totalCount: number;
|
|
42
|
+
pageSize: number;
|
|
43
|
+
page?: number;
|
|
44
|
+
maxPageButtons?: number;
|
|
45
|
+
onPageChange?: (page: number, offset: number) => void;
|
|
46
|
+
render?: (state: KeepPaginationState) => ReactNode;
|
|
47
|
+
};
|
|
48
|
+
/** Accessible pagination with previous/next controls and numbered page buttons. */
|
|
49
|
+
declare function KeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange, render, ...props }: KeepPaginationProps): react.JSX.Element;
|
|
50
|
+
|
|
51
|
+
type KeepUiLabelKey = "save" | "saved" | "remove" | "loading" | "saving" | "syncing" | "error" | "allTags" | "filterTags" | "note" | "saveNote" | "noItems" | "loadingItems" | "errorItems" | "search" | "sort" | "newest" | "oldest" | "savedNewest" | "savedOldest" | "updatedNewest" | "updatedOldest" | "previousPage" | "nextPage" | "pagination" | "page" | "selectItems" | "selectedCount" | "deleteSelected" | "tagsToApply" | "applyTags" | "savedMessage" | "removedMessage" | "noteSavedMessage";
|
|
9
52
|
type KeepUiLabels = Partial<Record<KeepUiLabelKey, string>>;
|
|
10
53
|
type KeepUiLabelContext = {
|
|
11
54
|
locale?: string;
|
|
@@ -24,6 +67,27 @@ type KeepUiProviderProps = {
|
|
|
24
67
|
declare function KeepUiProvider({ labels, locale, labelResolver, children }: KeepUiProviderProps): react.JSX.Element;
|
|
25
68
|
declare function useKeepUiLabels(): KeepUiLabelContext;
|
|
26
69
|
|
|
70
|
+
type KeepKitProviderProps<TMeta = Record<string, unknown>> = Omit<KeepProviderProps<TMeta>, "children"> & Omit<KeepUiProviderProps, "children"> & {
|
|
71
|
+
children?: ReactNode;
|
|
72
|
+
};
|
|
73
|
+
/** Combines the core store and UI labels into the default application provider. */
|
|
74
|
+
declare function KeepKitProvider<TMeta = Record<string, unknown>>({ labels, locale, labelResolver, children, ...providerProps }: KeepKitProviderProps<TMeta>): react.JSX.Element;
|
|
75
|
+
|
|
76
|
+
type CreateKeepKitOptions<TMeta = Record<string, unknown>> = CreateKeepKitOptions$1<TMeta> & Omit<KeepUiProviderProps, "children"> & {
|
|
77
|
+
getTitle?: (item: KeepItem<TMeta>) => ReactNode;
|
|
78
|
+
getImageProps?: (item: KeepItem<TMeta>, title: ReactNode) => KeepImageProps | undefined;
|
|
79
|
+
};
|
|
80
|
+
type KeepKit<TMeta = Record<string, unknown>> = {
|
|
81
|
+
Provider: ComponentType<KeepKitProviderProps<TMeta>>;
|
|
82
|
+
Button: ComponentType<KeepButtonProps<TMeta>>;
|
|
83
|
+
Collection: ComponentType<KeepCollectionProps<TMeta>>;
|
|
84
|
+
useContext: () => ReturnType<typeof useKeepContext<TMeta>>;
|
|
85
|
+
useItem: (item?: KeepItemInput<TMeta>) => ReturnType<typeof useKeepItem<TMeta>>;
|
|
86
|
+
useList: (query?: KeepListQuery<TMeta>) => UseKeepListResult<TMeta>;
|
|
87
|
+
useShortcut: (options: KeepShortcutOptions<TMeta>) => void;
|
|
88
|
+
};
|
|
89
|
+
/** Create one typed application API for the core and the standard UI layer. */
|
|
90
|
+
declare function createKeepKit<TMeta = Record<string, unknown>>(options?: CreateKeepKitOptions<TMeta>): KeepKit<TMeta>;
|
|
27
91
|
type RenderProp<TState> = (state: TState) => ReactNode;
|
|
28
92
|
type KeepButtonLabels = {
|
|
29
93
|
saved?: ReactNode;
|
|
@@ -52,6 +116,7 @@ type KeepImageProps = ImgHTMLAttributes<HTMLImageElement> & {
|
|
|
52
116
|
type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
|
|
53
117
|
item: KeepItem<TMeta>;
|
|
54
118
|
title?: ReactNode | ((item: KeepItem<TMeta>) => ReactNode);
|
|
119
|
+
getTitle?: (item: KeepItem<TMeta>) => ReactNode;
|
|
55
120
|
getImageProps?: (item: KeepItem<TMeta>, title: ReactNode) => KeepImageProps | undefined;
|
|
56
121
|
imageComponent?: ComponentType<KeepImageProps>;
|
|
57
122
|
renderImage?: (props: KeepImageProps, item: KeepItem<TMeta>) => ReactNode;
|
|
@@ -66,10 +131,10 @@ type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HT
|
|
|
66
131
|
asChild?: boolean;
|
|
67
132
|
};
|
|
68
133
|
/** A low-dependency item presentation primitive. The default markup can be replaced with render props. */
|
|
69
|
-
declare function KeepItemCard<TMeta = Record<string, unknown>>({ item, title, getImageProps, imageComponent: ImageComponent, renderImage, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, showSaveButton, saveButtonLabels, asChild, className, ...rootProps }: KeepItemCardProps<TMeta>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
134
|
+
declare function KeepItemCard<TMeta = Record<string, unknown>>({ item, title, getTitle, getImageProps, imageComponent: ImageComponent, renderImage, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, showSaveButton, saveButtonLabels, asChild, className, ...rootProps }: KeepItemCardProps<TMeta>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
70
135
|
type KeepListState<TMeta = Record<string, unknown>> = UseKeepListResult<TMeta>;
|
|
71
136
|
type KeepListProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
72
|
-
|
|
137
|
+
query?: KeepListQuery<TMeta>;
|
|
73
138
|
children?: ReactNode | RenderProp<KeepListState<TMeta>>;
|
|
74
139
|
renderItem?: (item: KeepItem<TMeta>, state: KeepListState<TMeta>) => ReactNode;
|
|
75
140
|
loading?: ReactNode | RenderProp<KeepListState<TMeta>>;
|
|
@@ -79,7 +144,20 @@ type KeepListProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLEl
|
|
|
79
144
|
asChild?: boolean;
|
|
80
145
|
};
|
|
81
146
|
/** A list primitive with built-in loading, empty, error, and removal states. */
|
|
82
|
-
declare function KeepList<TMeta = Record<string, unknown>>({
|
|
147
|
+
declare function KeepList<TMeta = Record<string, unknown>>({ query, children, renderItem, loading, empty, error: errorContent, itemCardProps, asChild, className, ...rootProps }: KeepListProps<TMeta>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
148
|
+
type KeepCollectionFeature = "search" | "sort" | "pagination" | "tagFilter" | "bulkActions";
|
|
149
|
+
type KeepCollectionProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
150
|
+
query?: KeepListQuery<TMeta>;
|
|
151
|
+
pageSize?: number;
|
|
152
|
+
features?: Partial<Record<KeepCollectionFeature, boolean>>;
|
|
153
|
+
renderItem?: (item: KeepItem<TMeta>, state: KeepListState<TMeta>) => ReactNode;
|
|
154
|
+
itemCardProps?: Omit<KeepItemCardProps<TMeta>, "item" | "children" | "render">;
|
|
155
|
+
loading?: ReactNode | RenderProp<KeepListState<TMeta>>;
|
|
156
|
+
empty?: ReactNode | RenderProp<KeepListState<TMeta>>;
|
|
157
|
+
error?: ReactNode | RenderProp<KeepListState<TMeta>>;
|
|
158
|
+
};
|
|
159
|
+
/** A batteries-included collection with query controls and accessible status feedback. */
|
|
160
|
+
declare function KeepCollection<TMeta = Record<string, unknown>>({ query, pageSize, features, renderItem, itemCardProps, loading, empty, error, className, ...rootProps }: KeepCollectionProps<TMeta>): react.JSX.Element;
|
|
83
161
|
type KeepTagFilterState = {
|
|
84
162
|
tags: string[];
|
|
85
163
|
tagCounts: Record<string, number>;
|
|
@@ -87,7 +165,7 @@ type KeepTagFilterState = {
|
|
|
87
165
|
select: (tag?: string) => void;
|
|
88
166
|
};
|
|
89
167
|
type KeepTagFilterProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children" | "onChange"> & {
|
|
90
|
-
|
|
168
|
+
query?: KeepListQuery<TMeta>;
|
|
91
169
|
value?: string;
|
|
92
170
|
defaultValue?: string;
|
|
93
171
|
onChange?: (tag?: string) => void;
|
|
@@ -99,8 +177,8 @@ type KeepTagFilterProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<H
|
|
|
99
177
|
children?: ReactNode | RenderProp<KeepTagFilterState>;
|
|
100
178
|
asChild?: boolean;
|
|
101
179
|
};
|
|
102
|
-
/** An ARIA button group for tag filtering; consumers can connect value to
|
|
103
|
-
declare function KeepTagFilter<TMeta = Record<string, unknown>>({
|
|
180
|
+
/** An ARIA button group for tag filtering; consumers can connect value to a collection query. */
|
|
181
|
+
declare function KeepTagFilter<TMeta = Record<string, unknown>>({ query, value: controlledValue, defaultValue, onChange, onValueChange, allLabel, ariaLabel, renderTag, render, children, asChild, className, ...rootProps }: KeepTagFilterProps<TMeta>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
104
182
|
type KeepNoteEditorState<TMeta = Record<string, unknown>> = {
|
|
105
183
|
item: KeepItem<TMeta>;
|
|
106
184
|
note: string;
|
|
@@ -123,34 +201,6 @@ type KeepNoteEditorProps<TMeta = Record<string, unknown>> = Omit<FormHTMLAttribu
|
|
|
123
201
|
};
|
|
124
202
|
/** A controlled-by-default note editor that persists through useKeepItem. */
|
|
125
203
|
declare function KeepNoteEditor<TMeta = Record<string, unknown>>({ item, label, saveLabel, placeholder, onSaved, onSaveError, render, children, asChild, className, ...formProps }: KeepNoteEditorProps<TMeta>): react.JSX.Element;
|
|
126
|
-
type KeepSearchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
|
|
127
|
-
value?: string;
|
|
128
|
-
defaultValue?: string;
|
|
129
|
-
onValueChange?: (value: string) => void;
|
|
130
|
-
};
|
|
131
|
-
/** A controlled/uncontrolled search field for wiring into useKeepList.searchQuery. */
|
|
132
|
-
declare function KeepSearchInput({ value: controlledValue, defaultValue, onValueChange, "aria-label": ariaLabel, placeholder, ...props }: KeepSearchInputProps): react.JSX.Element;
|
|
133
|
-
type KeepSortValue = "savedAt:desc" | "savedAt:asc" | "updatedAt:desc" | "updatedAt:asc";
|
|
134
|
-
type KeepSortSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> & {
|
|
135
|
-
value?: KeepSortValue;
|
|
136
|
-
defaultValue?: KeepSortValue;
|
|
137
|
-
onValueChange?: (value: KeepSortValue, sort: NonNullable<KeepListOptions["sort"]>) => void;
|
|
138
|
-
};
|
|
139
|
-
/** Emits a normalized sort descriptor that can be passed directly to useKeepList. */
|
|
140
|
-
declare function KeepSortSelect({ value: controlledValue, defaultValue, onValueChange, "aria-label": ariaLabel, children, ...props }: KeepSortSelectProps): react.JSX.Element;
|
|
141
|
-
type KeepPaginationProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
142
|
-
totalCount: number;
|
|
143
|
-
pageSize: number;
|
|
144
|
-
page?: number;
|
|
145
|
-
onPageChange?: (page: number, offset: number) => void;
|
|
146
|
-
render?: RenderProp<{
|
|
147
|
-
page: number;
|
|
148
|
-
pageCount: number;
|
|
149
|
-
goToPage: (page: number) => void;
|
|
150
|
-
}>;
|
|
151
|
-
};
|
|
152
|
-
/** A small accessible pagination control using one-based pages and zero-based offsets. */
|
|
153
|
-
declare function KeepPagination({ totalCount, pageSize, page, onPageChange, render, ...props }: KeepPaginationProps): react.JSX.Element;
|
|
154
204
|
type KeepTagEditorProps<TMeta = Record<string, unknown>> = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit"> & {
|
|
155
205
|
item: KeepItem<TMeta>;
|
|
156
206
|
availableTags?: string[];
|
|
@@ -165,16 +215,31 @@ type KeepTagEditorProps<TMeta = Record<string, unknown>> = Omit<FormHTMLAttribut
|
|
|
165
215
|
};
|
|
166
216
|
/** Edits one item's normalized tag set and exposes a render-prop escape hatch. */
|
|
167
217
|
declare function KeepTagEditor<TMeta = Record<string, unknown>>({ item, availableTags, onSaved, onSaveError, render, ...props }: KeepTagEditorProps<TMeta>): react.JSX.Element;
|
|
218
|
+
type KeepBulkActionsState<TMeta = Record<string, unknown>> = {
|
|
219
|
+
items: KeepItem<TMeta>[];
|
|
220
|
+
selectedIds: string[];
|
|
221
|
+
selectedCount: number;
|
|
222
|
+
allSelected: boolean;
|
|
223
|
+
tagsInput: string;
|
|
224
|
+
setTagsInput: (value: string) => void;
|
|
225
|
+
toggle: (id: string) => void;
|
|
226
|
+
toggleAll: () => void;
|
|
227
|
+
remove: () => Promise<void>;
|
|
228
|
+
updateTags: () => Promise<void>;
|
|
229
|
+
isMutating: boolean;
|
|
230
|
+
};
|
|
168
231
|
type KeepBulkActionsProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
169
|
-
|
|
232
|
+
query?: KeepListQuery<TMeta>;
|
|
170
233
|
selectedIds?: string[];
|
|
171
234
|
defaultSelectedIds?: string[];
|
|
172
235
|
onSelectedIdsChange?: (ids: string[]) => void;
|
|
173
236
|
renderItem?: (item: KeepItem<TMeta>, selected: boolean) => ReactNode;
|
|
174
237
|
onCompleted?: (action: "remove" | "tags", ids: string[]) => void;
|
|
238
|
+
render?: RenderProp<KeepBulkActionsState<TMeta>>;
|
|
239
|
+
children?: ReactNode | RenderProp<KeepBulkActionsState<TMeta>>;
|
|
175
240
|
};
|
|
176
241
|
/** Selects visible items and performs one storage operation for the whole selection. */
|
|
177
|
-
declare function KeepBulkActions<TMeta = Record<string, unknown>>({
|
|
242
|
+
declare function KeepBulkActions<TMeta = Record<string, unknown>>({ query, selectedIds: controlledSelectedIds, defaultSelectedIds, onSelectedIdsChange, renderItem, onCompleted, render, children, ...props }: KeepBulkActionsProps<TMeta>): react.JSX.Element;
|
|
178
243
|
type KeepEmptyStateProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
|
|
179
244
|
title?: ReactNode;
|
|
180
245
|
description?: ReactNode;
|
|
@@ -207,4 +272,4 @@ type KeepAnnouncementsProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
|
207
272
|
/** Announces successful save, remove, and note operations in a polite live region. */
|
|
208
273
|
declare function KeepAnnouncements<TMeta = Record<string, unknown>>({ messages, ...props }: KeepAnnouncementsProps): react.JSX.Element;
|
|
209
274
|
|
|
210
|
-
export { KeepAnnouncements, type KeepAnnouncementsProps, KeepBulkActions, type KeepBulkActionsProps, KeepButton, type KeepButtonLabels, type KeepButtonProps, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardProps, type KeepItemCardState, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, KeepPagination, type KeepPaginationProps, KeepSearchInput, type KeepSearchInputProps, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepTagEditor, type KeepTagEditorProps, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, KeepUiProvider, type KeepUiProviderProps, type RenderProp, useKeepUiLabels };
|
|
275
|
+
export { type CreateKeepKitOptions, KeepAnnouncements, type KeepAnnouncementsProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardProps, type KeepItemCardState, KeepItemCheckbox, type KeepItemCheckboxProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepSearchInput, type KeepSearchInputProps, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepTagEditor, type KeepTagEditorProps, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, KeepUiProvider, type KeepUiProviderProps, type RenderProp, createKeepKit, useKeepUiLabels };
|