@webority/ui-react 0.34.0 → 0.35.0

package/dist/lib/useListQuery.js

@@ -0,0 +1,120 @@
+import { buildListQuery as e, isFacetActive as t, listQueryParamNames as n, parseListQuery as r } from "./listQuery.js";
+import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+//#region src/lib/useListQuery.js
+function l(t, r) {
+	let i = new URL(window.location.href);
+	for (let e of n(r)) i.searchParams.delete(e);
+	for (let [n, r] of e(t)) i.searchParams.append(n, r);
+	window.history.replaceState(window.history.state, "", `${i.pathname}${i.search}${i.hash}`);
+}
+function u({ fetchPage: n, facets: u = [], defaults: d, debounceMs: f = 250 }) {
+	let [p, m] = c(() => r(window.location.search, {
+		facets: u,
+		defaults: d
+	})), [h, g] = c(null), [_, v] = c(!0), [y, b] = c(null), x = s(p), S = s(n), C = s(u), w = s(d), T = s(!1);
+	a(() => {
+		S.current = n, C.current = u, w.current = d;
+	});
+	let E = i((e, t = !1) => {
+		T.current = t, x.current = e, m(e), l(e, C.current);
+	}, []);
+	a(() => {
+		let e = () => {
+			let e = r(window.location.search, {
+				facets: C.current,
+				defaults: w.current
+			});
+			T.current = !1, x.current = e, m(e);
+		};
+		return window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e);
+	}, []), a(() => {
+		let e = new AbortController(), t = T.current ? f : 0;
+		v(!0), b(null);
+		let n = setTimeout(async () => {
+			try {
+				let t = await S.current(x.current, { signal: e.signal });
+				if (e.signal.aborted) return;
+				g(t), v(!1);
+			} catch (t) {
+				if (e.signal.aborted) return;
+				b(t), v(!1);
+			}
+		}, t);
+		return () => {
+			clearTimeout(n), e.abort();
+		};
+	}, [o(() => e(p).toString(), [p]), f]);
+	let D = i((e, t) => {
+		let n = C.current.find((t) => t.key === e);
+		if (!n) throw Error(`useListQuery: no facet named "${e}".`);
+		let r = x.current;
+		E({
+			...r,
+			page: 1,
+			filters: {
+				...r.filters,
+				[e]: t
+			}
+		}, n.type === "text");
+	}, [E]), O = i((e, t) => {
+		let n = x.current, r = t ?? (n.sortBy === e && n.sortOrder === "asc" ? "desc" : "asc");
+		E({
+			...n,
+			page: 1,
+			sortBy: e,
+			sortOrder: r
+		});
+	}, [E]), k = i((e) => E({
+		...x.current,
+		page: Math.max(1, Math.trunc(e))
+	}), [E]), A = i((e) => E({
+		...x.current,
+		page: 1,
+		pageSize: e
+	}), [E]), j = i(() => E(r("", {
+		facets: C.current,
+		defaults: w.current
+	})), [E]), M = h?.totalCount ?? 0, N = h?.totalPages ?? 0;
+	a(() => {
+		!_ && N > 0 && p.page > N && k(N);
+	}, [
+		_,
+		N,
+		p.page,
+		k
+	]);
+	let P = u.some((e) => t(e, p.filters[e.key])), F = {
+		rows: h?.items ?? [],
+		sort: p.sortBy ? {
+			key: p.sortBy,
+			dir: p.sortOrder
+		} : void 0,
+		onSort: O,
+		loading: _,
+		emptyFiltered: P ? "No records match the current filters." : void 0,
+		sourceCount: +!!P
+	}, I = {
+		page: p.page,
+		totalPages: Math.max(1, N),
+		pageSize: p.pageSize,
+		onPageChange: k,
+		onPageSizeChange: A
+	};
+	return {
+		query: p,
+		rows: F.rows,
+		loading: _,
+		error: y,
+		totalCount: M,
+		totalPages: N,
+		setFilter: D,
+		setSort: O,
+		setPage: k,
+		setPageSize: A,
+		reset: j,
+		tableProps: F,
+		paginationProps: I
+	};
+}
+//#endregion
+export { u as useListQuery };

package/dist/lib/usePagination.js

@@ -0,0 +1,29 @@
+import { useEffect as e, useMemo as t, useState as n } from "react";
+//#region src/lib/usePagination.js
+function r(r, i = 10) {
+	let [a, o] = n(1), [s, c] = n(i), l = r.length, u = Math.max(1, Math.ceil(l / s));
+	e(() => {
+		a > u && o(u);
+	}, [a, u]);
+	let d = (a - 1) * s, f = t(() => r.slice(d, d + s), [
+		r,
+		d,
+		s
+	]);
+	function p(e) {
+		c(e), o(1);
+	}
+	return {
+		page: a,
+		setPage: o,
+		pageSize: s,
+		setPageSize: p,
+		totalPages: u,
+		pageRows: f,
+		total: l,
+		firstRow: l === 0 ? 0 : d + 1,
+		lastRow: Math.min(l, d + s)
+	};
+}
+//#endregion
+export { r as usePagination };

package/dist/lib/useTableView.js

@@ -0,0 +1,42 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/lib/useTableView.js
+var r = (e) => `wui-view:${e}`;
+function i(e, t) {
+	try {
+		let n = window.localStorage.getItem(r(e));
+		if (!n) return t;
+		let i = JSON.parse(n);
+		return {
+			hidden: Array.isArray(i.hidden) ? i.hidden : t.hidden,
+			sort: i.sort && typeof i.sort.key == "string" ? i.sort : t.sort
+		};
+	} catch {
+		return t;
+	}
+}
+function a(a, { sort: o } = {}) {
+	let [s, c] = n(() => i(a, {
+		hidden: [],
+		sort: o
+	}));
+	t(() => {
+		try {
+			window.localStorage.setItem(r(a), JSON.stringify(s));
+		} catch {}
+	}, [a, s]);
+	let l = e((e) => c((t) => ({
+		...t,
+		hidden: t.hidden.includes(e) ? t.hidden.filter((t) => t !== e) : [...t.hidden, e]
+	})), []), u = e((e) => c((t) => ({
+		...t,
+		sort: typeof e == "function" ? e(t.sort) : e
+	})), []);
+	return {
+		hiddenColumns: s.hidden,
+		toggleColumn: l,
+		sort: s.sort,
+		setSort: u
+	};
+}
+//#endregion
+export { a as useTableView };

package/dist/types/components/AppAutocomplete.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/autocomplete";
 /**
  * Searchable autocomplete over the shared `<wui-autocomplete>` element.
  *

package/dist/types/components/AppAvatarPicker.d.ts

@@ -0,0 +1,55 @@
+import "@webority/ui-elements/elements/image-crop";
+/**
+ * Profile photo picker: the current photo (or initials) beside Upload / Take photo / Remove. A
+ * chosen, dropped or camera photo opens a crop dialog (round frame, drag, zoom by slider, wheel or
+ * pinch, rotate, reset, two live previews); Save hands `onPick` a square WebP of `outputSize` px
+ * (PNG where the browser cannot encode WebP).
+ *
+ * @param {object} props
+ * @param {string|null} [props.value] Current photo URL, or null.
+ * @param {string} [props.initials] Shown when there is no photo; a person icon otherwise.
+ * @param {(file: File) => void} props.onPick Receives the cropped square photo.
+ * @param {() => void} [props.onRemove] Shows Remove while there is a photo; called when it is pressed.
+ * @param {string} [props.name] Form field name: the cropped photo is written into the file input,
+ *   so an uncontrolled form posts it.
+ * @param {string} [props.removeName] Form field that posts `true` once Remove is pressed (and
+ *   shows Remove while there is a photo).
+ * @param {string} [props.accept] Types the person may choose. Defaults to JPG, PNG, WebP and HEIC
+ *   (HEIC opens only where the browser can decode it; elsewhere the dialog says so).
+ * @param {number} [props.maxSizeMb=10] Limit on the chosen photo; 0 means none. The saved crop is
+ *   far smaller.
+ * @param {number} [props.outputSize=512] Width and height of the saved square, in px.
+ * @param {'sm'|'md'|'lg'|number} [props.size='md'] Photo diameter: a preset or px.
+ * @param {string} [props.label]
+ * @param {string} [props.hint]
+ * @param {string} [props.error] Caller error; wins over a rejection reason.
+ * @param {boolean} [props.required=false]
+ * @param {boolean} [props.loading=false] Spinner on the photo and every action blocked while it uploads.
+ * @param {boolean} [props.disabled=false]
+ * @param {string} [props.ariaLabel] Accessible name of the photo button; defaults to the action's words.
+ * @param {string} [props.className] Extra class on the picker (photo and actions).
+ * @param {string} [props.fieldClassName] Extra class on the `.field` wrapper.
+ * @param {object} [props.style] Inline style; lands on the picker with `className`.
+ */
+export default function AppAvatarPicker({ value, initials, onPick, onRemove, name, removeName, accept, maxSizeMb, outputSize, size, label, hint, error, required, loading, disabled, ariaLabel, className, fieldClassName, style, ...rest }: {
+    value?: string | null;
+    initials?: string;
+    onPick: (file: File) => void;
+    onRemove?: () => void;
+    name?: string;
+    removeName?: string;
+    accept?: string;
+    maxSizeMb?: number;
+    outputSize?: number;
+    size?: 'sm' | 'md' | 'lg' | number;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+    style?: object;
+}): import("react").JSX.Element;

package/dist/types/components/AppCommandPalette.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/command-palette";
 /**
  * App-wide "search and jump": a top-anchored dialog with a search input over a grouped list
  * of results. Pair it with `useCommandPaletteShortcut` to open it on Ctrl+K / Cmd+K.

package/dist/types/components/AppConsentBanner.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/consent-banner";
 /**
  * The cookie consent banner: accept all, reject all, or choose per category (analytics,
  * functional, marketing; essential is always on).

package/dist/types/components/AppContextMenu.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/context-menu";
 /**
  * A right-click menu over a region of the page. The menu opens on right-click, on a long press
  * of a finger, and on Shift+F10 or the ContextMenu key; it sits at the pointer (under the focused

package/dist/types/components/AppCountrySelect.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/country-select";
 /**
  * @param {object} props
  * @param {string} [props.value] Selected ISO 3166-1 alpha-2 code, e.g. "IN".

package/dist/types/components/AppDatePicker.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/datepicker";
 /**
  * Thin React wrapper over the shared `<wui-datepicker>` element (single
  * implementation, so React and Razor render the same control).

package/dist/types/components/AppDateRangePicker.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/date-range";
 /**
  * Thin React wrapper over the shared `<wui-date-range>` element — a start/end date range
  * field with a two-month popover calendar (single implementation, so React and Razor render

package/dist/types/components/AppFloatingDock.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/dock";
 /**
  * A macOS-style floating dock — a pill of icon links whose items magnify as the pointer
  * approaches them. Marketing / landing-page chrome, not a replacement for `AppShell`

package/dist/types/components/AppKanban.d.ts

@@ -1,4 +1,3 @@
-import "@webority/ui-elements";
 /**
  * A board of columns whose cards move by drag and drop (mouse, pen, or touch after a long press)
  * or by keyboard (Space picks a card up, Left and Right choose a column, Space drops, Escape
@@ -28,6 +27,11 @@ import "@webority/ui-elements";
  *   rest; the count still covers every card, and a card dropped there always shows.
  * @param {object[]} props.cards Every card on the board.
  * @param {(card: object) => import('react').ReactNode} props.renderCard The card's content.
+ * @param {(column: object, cards: object[]) => import('react').ReactNode} [props.renderColumnActions]
+ *   Controls at the right of a column's head (a "+" that adds a card, say), given the column and
+ *   its visible cards; return nothing for a column without any. They are ordinary tab stops and
+ *   never start a drag; `wui-kanban-action` gives an icon button the head's look. A collapsed
+ *   column hides them.
  * @param {(card: object) => string} [props.getCardKey] Default `card.key ?? card.id`.
  * @param {(card: object) => string} [props.getCardColumn] Default `card.column`.
  * @param {(card: object) => number} [props.getCardValue] The number a computed summary adds up.
@@ -51,7 +55,7 @@ import "@webority/ui-elements";
  * @param {string} [props.className]
  * @param {string} [props.id] The board's id; the column, body and help ids derive from it. Generated when omitted.
  */
-export default function AppKanban({ columns, cards, renderCard, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, swipeHint, summaryFormat, summaryUnit, className, id, ...rest }: {
+export default function AppKanban({ columns, cards, renderCard, renderColumnActions, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, swipeHint, summaryFormat, summaryUnit, className, id, ...rest }: {
     columns: {
         key: string;
         title: string;
@@ -66,6 +70,7 @@ export default function AppKanban({ columns, cards, renderCard, getCardKey, getC
     }[];
     cards: object[];
     renderCard: (card: object) => import('react').ReactNode;
+    renderColumnActions?: (column: object, cards: object[]) => import('react').ReactNode;
     getCardKey?: (card: object) => string;
     getCardColumn?: (card: object) => string;
     getCardValue?: (card: object) => number;

package/dist/types/components/AppLogoPicker.d.ts

@@ -1,3 +1,4 @@
+import "@webority/ui-elements/elements/image-crop";
 export default function AppLogoPicker({ value, // current image URL | null
 fallback, // node shown when there's no image (e.g. initials)
 name, onPick, // (file) => void — receives a validated File

package/dist/types/components/AppMultiSelect.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/multiselect";
 /**
  * Multi-value select over the shared `<wui-multiselect>` element. The control shows each
  * chosen value as a removable `.chip`; the dropdown is a searchable checklist.

package/dist/types/components/AppOtpInput.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/otp";
 /**
  * Code entry — MFA, email/phone verification, backup codes. Thin React wrapper over the
  * shared `<wui-otp>` element, in the standard `.field` shell.

package/dist/types/components/AppPhoneNumberInput.d.ts

@@ -1,3 +1,3 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/phone";
 declare const AppPhoneNumberInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export default AppPhoneNumberInput;

package/dist/types/components/AppSelect.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/select";
 /**
  * @param {object} props
  * @param {string} [props.className] Class to apply to the control element.

package/dist/types/components/AppSelectMini.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/select";
 export default function AppSelectMini({ value, onChange, options, placeholder, name, ariaLabel, id, disabled, size, icon, prefix, className, ...rest }: {
     [x: string]: any;
     ariaLabel: any;

package/dist/types/components/AppSlider.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/slider";
 /**
  * Thin React wrapper over the shared `<wui-slider>` element (single or dual-thumb slider).
  *

package/dist/types/components/AppSortableList.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/sortable";
 /**
  * A list whose items the person reorders: drag with a mouse or a finger (the list scrolls when
  * the pointer nears its edge), or with the keyboard (focus an item's handle, Space to lift,

package/dist/types/components/AppTagInput.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/taginput";
 /**
  * Free-text token entry field (emails, tags, keywords) over the shared `<wui-taginput>`
  * custom element. Type text and press Enter/comma to add a chip; Backspace removes the last.

package/dist/types/components/AppThemeToggle.d.ts

@@ -3,13 +3,16 @@
  * from the bottom, a circle growing from the press, a wipe, blinds, or a fade). Two shapes:
  * `variant="icon"` (default), one action disc that cycles through the modes, and
  * `variant="segmented"`, one option per mode laid out like `AppSegmented`, so each mode is a
- * button of its own. It owns the theme either way: it reads the stored choice, writes
- * `data-theme` and `data-bs-theme` on `<html>` (which the design system and Bootstrap both
- * read), and remembers the choice in localStorage under `storageKey`.
+ * button of its own. The modes are light, dark and auto (shown as "System", following the
+ * device); `includeAuto={false}` offers only light and dark. It owns the theme either way: it
+ * reads the stored choice, writes `data-theme` and `data-bs-theme` on `<html>` (which the
+ * design system and Bootstrap both read), and remembers the choice in localStorage under
+ * `storageKey`. Nothing stored means auto, so the page follows the device, live, until someone
+ * picks a theme.
  *
  * Mount it anywhere in the chrome; two on one page stay in step. To avoid a wrong-theme flash
- * before React runs, stamp the stored choice in an inline script in `<head>` (see the catalogue
- * page); the component then takes over from that state.
+ * before React runs, put `themeBootScript(storageKey)` in an inline script in `<head>`; the
+ * component then takes over from that state.
  *
  * The effect needs the View Transitions API; without it, under `prefers-reduced-motion`, or when
  * the page already shows the requested theme (dark to auto on a dark system), the switch is
@@ -19,7 +22,7 @@
  * @param {object} props
  * @param {"icon"|"segmented"} [props.variant="icon"] One cycling disc, or one option per mode.
  * @param {"wave"|"circle"|"slide"|"blinds"|"fade"|"none"} [props.effect="wave"] The page-wide effect.
- * @param {boolean} [props.includeAuto=false] Offer a third, system-following mode: light, dark, auto.
+ * @param {boolean} [props.includeAuto=true] Offer the system-following mode beside light and dark. Off, the toggle offers light and dark and shows an auto page as its resolved theme.
  * @param {string} [props.storageKey="theme"] The localStorage key the choice is kept under.
  * @param {number} [props.duration] Effect length in ms; each effect has its own default.
  * @param {string} [props.label="Theme"] Accessible name: the disc's tooltip ("Theme: dark") or the segmented group's name.

package/dist/types/components/AppTimePicker.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/timepicker";
 /**
  * Thin React wrapper over the shared `<wui-timepicker>` element (single
  * implementation, so React and Razor render the same control).

package/dist/types/components/AppTour.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/tour";
 /**
  * A step-by-step product tour over the shared `<wui-tour>` element: the page is dimmed except
  * around the step's target, and a card holds the step text with Back, Next and Skip. Steps are

package/dist/types/components/AppTreeView.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/tree";
 /**
  * Thin React wrapper over the shared `<wui-tree>` element: a hierarchy in the WAI-ARIA tree
  * pattern (arrow keys, Home/End, typeahead, Enter), with icons and badges, lazy children and an

package/dist/types/components/AppWizard.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/wizard";
 /**
  * A multi-step flow over the shared `<wui-wizard>` element — a stepper progress
  * header, one visible step panel at a time, and a sticky Back / Skip / Next / Finish

package/dist/types/components/ModalIcons.d.ts

@@ -1,4 +1,4 @@
-import "@webority/ui-elements";
+import "@webority/ui-elements/elements/status-icon";
 export declare const SuccessIcon: ({ size }: {
     size?: number;
 }) => import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
-export { createLocalSeenStore, postedMasked } from "@webority/ui-elements";
+export { createLocalSeenStore } from "@webority/ui-elements/elements/tour";
+export { postedMasked, themeBootScript } from "@webority/ui-elements/helpers";
 export { default as AppAccordion } from "./components/AppAccordion.jsx";
 export { default as AppActionIcon } from "./components/AppActionIcon.jsx";
 export { default as AppAlert } from "./components/AppAlert.jsx";
@@ -6,6 +7,7 @@ export { default as AppAsyncBlock } from "./components/AppAsyncBlock.jsx";
 export { default as AppAutocomplete } from "./components/AppAutocomplete.jsx";
 export { default as AppAvatar } from "./components/AppAvatar.jsx";
 export { default as AppAvatarGroup } from "./components/AppAvatarGroup.jsx";
+export { default as AppAvatarPicker } from "./components/AppAvatarPicker.jsx";
 export { default as AppBadge } from "./components/AppBadge.jsx";
 export { default as AppBanner } from "./components/AppBanner.jsx";
 export { default as AppBreadcrumbs } from "./components/AppBreadcrumbs.jsx";