@gopherium/react-auth 0.14.0 → 0.16.0

package/dist/wpds/users/ResendModal.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { ConfirmBody, markLatest, useCloseWhileOpen, useToaster } from '@gopherium/godmin';
+import { useMutation } from '@tanstack/react-query';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, InputControl, Stack, Text } from '@wordpress/ui';
+import { useEffect, useState } from 'react';
+import { resendInvite } from '../../admin/index.js';
+import { DOMAIN } from '../../domain.js';
+import { errorMessageOf } from './words.js';
+/**
+ * Renders the activation link to deliver by hand when no mail server sent the invitation.
+ * @param props - The link and what closes the dialog.
+ * @returns The link, read only, above Done.
+ */
+function HandDelivery({ link, onDone }) {
+    return (_jsxs(Stack, { direction: "column", gap: "lg", children: [_jsx(Text, { children: __('No mail server is configured. Deliver the activation link by hand.', DOMAIN) }), _jsx(InputControl, { label: __('Activation link', DOMAIN), readOnly: true, value: link }), _jsx(Stack, { direction: "row", justify: "flex-end", children: _jsx(Button, { onClick: onDone, children: __('Done', DOMAIN) }) })] }));
+}
+/**
+ * Renders the confirm sending a pending account a new invitation, closing only itself once the write ends.
+ * @param props - The account, what closes the dialog, the kept activation links and the app's own error words.
+ * @returns The confirm, or the activation link the server answered, kept for the next open if the dialog closed first.
+ */
+export function ResendModal({ items: [account], closeModal, links, errorMessages, }) {
+    const toaster = useToaster();
+    const close = useCloseWhileOpen(closeModal);
+    const [link, setLink] = useState(() => links.get(account.id));
+    const resend = useMutation({
+        mutationFn: () => resendInvite(account.email),
+        onMutate: () => markLatest(links, account.id),
+        onSuccess: (sent, _, stillLatest) => {
+            if (sent.delivered) {
+                toaster.show(sprintf(__('Invitation sent to "%(name)s".', DOMAIN), { name: account.name }));
+                close();
+                return;
+            }
+            if (stillLatest()) {
+                links.set(account.id, sent.activation_link);
+            }
+            setLink(sent.activation_link);
+        },
+        onError: (error) => {
+            toaster.show(errorMessageOf(error, errorMessages, __('The invitation could not be sent.', DOMAIN)));
+            close();
+        },
+    });
+    useEffect(() => {
+        if (link === undefined) {
+            return undefined;
+        }
+        return () => {
+            links.delete(account.id);
+        };
+    }, [link, links, account.id]);
+    if (link !== undefined) {
+        return _jsx(HandDelivery, { link: link, onDone: closeModal });
+    }
+    const question = __('Send a new invitation to "%(name)s" (%(email)s)? The link sent before stops working.', DOMAIN);
+    return (_jsx(ConfirmBody, { confirmLabel: __('Resend invitation', DOMAIN), cancelLabel: __('Cancel', DOMAIN), busy: resend.isPending, onConfirm: () => resend.mutate(), onCancel: closeModal, children: sprintf(question, { name: account.name, email: account.email }) }));
+}

package/dist/wpds/users/RoleSelect.d.ts

@@ -0,0 +1,20 @@
+import type { RoleLabels } from './words.js';
+/** What the role menu takes, all data. */
+export interface RoleSelectProps {
+    /** The roles the reader may give, the one carrying most capabilities first, as the session lists them. */
+    grantable: readonly string[];
+    /** The role chosen, empty for none. */
+    value: string;
+    /** Takes the role the reader picks, empty for the empty first option. */
+    onChange: (role: string) => void;
+    /** The labels the app gives its own roles. */
+    roleLabels?: RoleLabels;
+    /** The words of an empty first option, such as WordPress's Change role to…, no such option when absent. */
+    placeholder?: string;
+}
+/**
+ * Renders the role menu, the roles the reader may give with the fewest capabilities first, as WordPress lists them.
+ * @param props - The roles the reader may give, the role chosen, what takes a pick, the labels and the empty option.
+ * @returns The select.
+ */
+export declare function RoleSelect({ grantable, value, onChange, roleLabels, placeholder }: RoleSelectProps): import("react").JSX.Element;

package/dist/wpds/users/RoleSelect.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/ui';
+import { DOMAIN } from '../../domain.js';
+import { roleLabelOf } from './words.js';
+/**
+ * Renders the role menu, the roles the reader may give with the fewest capabilities first, as WordPress lists them.
+ * @param props - The roles the reader may give, the role chosen, what takes a pick, the labels and the empty option.
+ * @returns The select.
+ */
+export function RoleSelect({ grantable, value, onChange, roleLabels, placeholder }) {
+    const roles = [...grantable]
+        .reverse()
+        .map((role) => ({ value: role, label: roleLabelOf(role, roleLabels) }));
+    const items = placeholder === undefined ? roles : [{ value: null, label: placeholder }, ...roles];
+    return (_jsx(SelectControl, { label: __('Role', DOMAIN), items: items, value: items.find((item) => (item.value ?? '') === value) ?? null, placeholder: placeholder, onValueChange: (item) => onChange(item?.value ?? '') }));
+}

package/dist/wpds/users/UsersPage.d.ts

@@ -0,0 +1,34 @@
+import type { ListView } from '@gopherium/godmin';
+import type { View } from '@wordpress/dataviews';
+import type { ReactElement, ReactNode } from 'react';
+import type { UsersColumn } from './fields.js';
+import type { ErrorMessages, RoleLabels } from './words.js';
+/** What an app hands the users page: the view it holds, its settings and its own words, all as data. */
+export interface UsersPageProps {
+    /** The view godmin's useListView holds in the address. */
+    list: ListView<View>;
+    /** The page sizes the list offers, none while the settings load. */
+    pageSizes?: number[];
+    /** Whether the settings naming the page size could not be read, every account then showing on one page. */
+    sizesFailed?: boolean;
+    /** Whether the site shows avatars, true when absent. */
+    showAvatars?: boolean;
+    /** The labels the app gives its own roles. */
+    roleLabels?: RoleLabels;
+    /** The words the app gives the error codes only it answers. */
+    errorMessages?: ErrorMessages;
+    /** The link element the Add User words go in, no header button when absent. */
+    addLink?: ReactElement<Record<string, unknown>>;
+    /** The tabs drawn under the header. */
+    tabs?: ReactNode;
+    /** The level of the page title, 2 on a screen beside the sidebar. */
+    headingLevel?: 1 | 2;
+    /** The columns the app adds as data, after Role. */
+    columns?: readonly UsersColumn[];
+}
+/**
+ * Renders the Users page: the header, the accounts as a list and what a reader may do with them.
+ * @param props - The view the app holds, its settings and its own words.
+ * @returns The page.
+ */
+export declare function UsersPage(props: UsersPageProps): import("react").JSX.Element;

package/dist/wpds/users/UsersPage.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { ErrorNotice, ListEmpty, Page, focusedTrigger, openOnTap, useBulkRun, useFocusBack, useListRun, useUnsavedText, viewNarrows, } from '@gopherium/godmin';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { people } from '@wordpress/icons';
+import { ButtonLink } from '@wordpress/ui';
+import { useCallback, useMemo, useState } from 'react';
+import { fetchUsers, usersQueryKey } from '../../admin/index.js';
+import { DOMAIN } from '../../domain.js';
+import { useSession } from '../../session.js';
+import { mayChangeRole, useUsersActions } from './actions.js';
+import { OpenRoleDialog } from './ChangeRoleDialog.js';
+import { usersFields } from './fields.js';
+/** The accounts the list holds before the first read answers. */
+const NO_ACCOUNTS = [];
+/** The columns of a list the app adds none to. */
+const NO_COLUMNS = [];
+/** The labels of a list whose app names no role. */
+const NO_LABELS = {};
+/** The words of a list whose app answers no error code of its own. */
+const NO_MESSAGES = {};
+/** The roles a reader may give while the session names none. */
+const NO_ROLES = [];
+/**
+ * Returns the words of the header button adding an account.
+ * @returns The words in the reader's language.
+ */
+function addUserLabel() {
+    return __('Add User', DOMAIN);
+}
+/**
+ * Renders what the list shows when no account is on it.
+ * @param props - Whether a search or a filter narrowed the list.
+ * @returns The empty state, telling how to add an account when nothing narrowed the list.
+ */
+function UsersEmpty({ narrowed }) {
+    if (narrowed) {
+        return _jsx(ListEmpty, { icon: people, title: __('No users found.', DOMAIN) });
+    }
+    const hint = sprintf(__('Add one with %(button)s.', DOMAIN), { button: addUserLabel() });
+    return _jsx(ListEmpty, { icon: people, title: __('No users yet.', DOMAIN), hint: hint });
+}
+/**
+ * Renders the accounts as a list to search, filter, sort and page, with the actions the reader may take.
+ * @param props - The account query, the actions, the reader, what opens Change role and what the app hands the page.
+ * @returns The list, opening Change role from a name or a phone tap on an account the reader may change.
+ */
+function UsersList({ users, actions, reader, openRole, ...props }) {
+    const { list } = props;
+    const accounts = users.data ?? NO_ACCOUNTS;
+    const showAvatars = props.showAvatars ?? true;
+    const roleLabels = props.roleLabels ?? NO_LABELS;
+    const columns = props.columns ?? NO_COLUMNS;
+    const fields = useMemo(() => usersFields(accounts, { roleLabels, showAvatars, columns, phone: list.phone }), [accounts, roleLabels, showAvatars, columns, list.phone]);
+    const shown = filterSortAndPaginate(accounts, list.view, fields);
+    const sizing = list.view.perPage === undefined && props.sizesFailed !== true;
+    const changeable = (account) => mayChangeRole(reader, account);
+    const tapped = (id) => {
+        const account = accounts.find((held) => held.id === id);
+        if (changeable(account)) {
+            openRole([account], 'row');
+        }
+    };
+    return (_jsx(DataViews, { data: shown.data, paginationInfo: shown.paginationInfo, fields: fields, view: list.view, onChangeView: list.onChangeView, defaultLayouts: list.defaultLayouts, selection: list.selection, onChangeSelection: openOnTap(list, tapped), isItemClickable: changeable, onClickItem: (account) => openRole([account], focusedTrigger()), actions: actions, isLoading: users.isPending || sizing, searchLabel: __('Search users…', DOMAIN), config: props.pageSizes === undefined ? undefined : { perPageSizes: props.pageSizes }, empty: _jsx(UsersEmpty, { narrowed: viewNarrows(list.view) }) }));
+}
+/**
+ * Renders the Users page: the header, the accounts as a list and what a reader may do with them.
+ * @param props - The view the app holds, its settings and its own words.
+ * @returns The page.
+ */
+export function UsersPage(props) {
+    const users = useQuery({ queryKey: usersQueryKey, queryFn: ({ signal }) => fetchUsers(signal) });
+    const reader = useSession().data ?? null;
+    const client = useQueryClient();
+    const { run, region } = useListRun('users', props.list.onChangeSelection);
+    const reload = useCallback(() => client.invalidateQueries({ queryKey: usersQueryKey }), [client]);
+    const switches = useBulkRun(run, reload);
+    const unsaved = useUnsavedText();
+    const links = useUnsavedText();
+    const focusBack = useFocusBack(users.isFetching, region);
+    const [opened, setOpened] = useState();
+    const openRole = useCallback((accounts, trigger) => setOpened({ accounts, trigger }), []);
+    const errorMessages = props.errorMessages ?? NO_MESSAGES;
+    const roleLabels = props.roleLabels ?? NO_LABELS;
+    const actions = useUsersActions({ reader, switches, links, errorMessages, openRole });
+    const grantable = reader?.grantable ?? NO_ROLES;
+    const title = _x('Users', 'admin section', DOMAIN);
+    return (_jsxs(Page, { title: title, headingLevel: props.headingLevel, subtitle: __('Manage who can sign in and what they can do.', DOMAIN), actions: props.addLink === undefined ? undefined : (_jsx(ButtonLink, { variant: "solid", size: "compact", render: props.addLink, children: addUserLabel() })), tabs: props.tabs, list: true, listLabel: title, listRef: region, children: [users.isError ? (_jsx(ErrorNotice, { children: __('Users could not be loaded.', DOMAIN) })) : (_jsx(UsersList, { users: users, actions: actions, reader: reader, openRole: openRole, ...props })), _jsx(OpenRoleDialog, { opened: opened, tools: { grantable, roleLabels, errorMessages, unsaved, reload }, onClose: () => setOpened(undefined), onClearSelection: () => props.list.onChangeSelection([]), onBack: focusBack })] }));
+}

package/dist/wpds/users/actions.d.ts

@@ -0,0 +1,31 @@
+import type { BulkRun, Trigger, UnsavedText } from '@gopherium/godmin';
+import type { Action } from '@wordpress/dataviews';
+import type { Account } from '../../account.js';
+import type { User } from '../../api.js';
+import type { ErrorMessages } from './words.js';
+/** What the actions of the users list need from the page. */
+export interface ActionTools {
+    /** The signed-in account, none while nobody is signed in. */
+    reader: User | null;
+    /** Runs an Enable or a Disable over the picked accounts, reads the list again and shows one toast. */
+    switches: BulkRun<Account>;
+    /** The activation links resends answered, by account id, kept until a dialog showing one closes. */
+    links: UnsavedText;
+    /** The words the app gives the error codes only it answers. */
+    errorMessages: ErrorMessages;
+    /** Opens Change role on the accounts, given the trigger it opened from. */
+    openRole: (accounts: Account[], trigger: Trigger) => void;
+}
+/**
+ * Reports whether the reader may change the role of an account, one it may edit while it may give some role.
+ * @param reader - The signed-in account, none while nobody is signed in.
+ * @param account - The account a row shows.
+ * @returns Whether Change role applies.
+ */
+export declare function mayChangeRole(reader: User | null, account: Account): boolean;
+/**
+ * Returns the row and bulk actions of the users list, none on the reader's own row nor on one it may not edit.
+ * @param tools - The reader, the run, the app's error words and what opens Change role.
+ * @returns Change role, Resend invitation, Enable and Disable, in the order the bulk bar draws them, none signed out.
+ */
+export declare function useUsersActions(tools: ActionTools): Action<Account>[];

package/dist/wpds/users/actions.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { focusedTrigger } from '@gopherium/godmin';
+import { __ } from '@wordpress/i18n';
+import { check, notAllowed, pencil } from '@wordpress/icons';
+import { useMemo } from 'react';
+import { setUserDisabled } from '../../admin/index.js';
+import { DOMAIN } from '../../domain.js';
+import { ResendModal } from './ResendModal.js';
+import { switchWords } from './words.js';
+/**
+ * Reports whether the reader may act on an account: never its own, and only one the server says it may edit.
+ * @param reader - The signed-in account.
+ * @param account - The account a row shows.
+ * @returns Whether a row action may apply.
+ */
+function mayEdit(reader, account) {
+    return account.id !== reader.id && account.editable;
+}
+/**
+ * Reports whether the reader may change the role of an account, one it may edit while it may give some role.
+ * @param reader - The signed-in account, none while nobody is signed in.
+ * @param account - The account a row shows.
+ * @returns Whether Change role applies.
+ */
+export function mayChangeRole(reader, account) {
+    return reader !== null && mayEdit(reader, account) && (reader.grantable ?? []).length > 0;
+}
+/**
+ * Returns the row and bulk actions of the users list, none on the reader's own row nor on one it may not edit.
+ * @param tools - The reader, the run, the app's error words and what opens Change role.
+ * @returns Change role, Resend invitation, Enable and Disable, in the order the bulk bar draws them, none signed out.
+ */
+export function useUsersActions(tools) {
+    const { reader, switches, links, errorMessages, openRole } = tools;
+    return useMemo(() => {
+        if (reader === null) {
+            return [];
+        }
+        const grantable = reader.grantable ?? [];
+        const switchAccounts = (accounts, disabled) => switches(accounts, (account) => setUserDisabled(account.id, disabled), switchWords(disabled, errorMessages));
+        const actions = [
+            {
+                id: 'change-role',
+                label: __('Change role…', DOMAIN),
+                icon: pencil,
+                supportsBulk: true,
+                isEligible: (account) => mayChangeRole(reader, account),
+                callback: (accounts) => openRole(accounts, focusedTrigger()),
+            },
+            {
+                id: 'resend-invitation',
+                label: __('Resend invitation…', DOMAIN),
+                modalHeader: __('Resend invitation', DOMAIN),
+                modalFocusOnMount: 'firstContentElement',
+                isEligible: (account) => mayEdit(reader, account) && !account.confirmed && !account.disabled,
+                RenderModal: (props) => _jsx(ResendModal, { ...props, links: links, errorMessages: errorMessages }),
+            },
+            {
+                id: 'enable',
+                label: __('Enable', DOMAIN),
+                icon: check,
+                isPrimary: true,
+                supportsBulk: true,
+                isEligible: (account) => mayEdit(reader, account) && account.disabled && grantable.includes(account.role),
+                callback: (accounts) => switchAccounts(accounts, false),
+            },
+            {
+                id: 'disable',
+                label: __('Disable', DOMAIN),
+                icon: notAllowed,
+                supportsBulk: true,
+                isEligible: (account) => mayEdit(reader, account) && !account.disabled,
+                callback: (accounts) => switchAccounts(accounts, true),
+            },
+        ];
+        return actions;
+    }, [reader, switches, links, errorMessages, openRole]);
+}

package/dist/wpds/users/defaults.d.ts

@@ -0,0 +1,14 @@
+import type { ListDefaults } from '@gopherium/godmin';
+/** What an app names for the view the users list opens on. */
+export interface UsersListOptions {
+    /** How many accounts a page holds, every account while it is unknown. */
+    perPage?: number;
+    /** The ids of the data columns the app passes, shown after Role in the table and never in the phone row. */
+    columns?: readonly string[];
+}
+/**
+ * Returns the view the users list opens on, as data for godmin's useListView.
+ * @param options - The page size and the data columns the app passes.
+ * @returns The fields, the title, the line under it, the avatar, the order and the page size.
+ */
+export declare function usersListDefaults({ perPage, columns }?: UsersListOptions): ListDefaults;

package/dist/wpds/users/defaults.js

@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Returns the view the users list opens on, as data for godmin's useListView.
+ * @param options - The page size and the data columns the app passes.
+ * @returns The fields, the title, the line under it, the avatar, the order and the page size.
+ */
+export function usersListDefaults({ perPage, columns = [] } = {}) {
+    return {
+        fields: ['status', 'role', ...columns, 'created'],
+        phoneFields: ['status', 'role', 'created'],
+        titleField: 'name',
+        descriptionField: 'email',
+        mediaField: 'avatar',
+        sort: { field: 'created', direction: 'desc' },
+        perPage,
+    };
+}

package/dist/wpds/users/fields.d.ts

@@ -0,0 +1,40 @@
+import type { Field } from '@wordpress/dataviews';
+import type { ReactElement } from 'react';
+import type { Account } from '../../account.js';
+import type { RoleLabels } from './words.js';
+/** One cell of a data column: the words shown, the words a screen reader hears and the link the words go in. */
+export interface UsersColumnCell {
+    /** The words shown in the cell. */
+    text: string;
+    /** The words a screen reader hears in place of the shown ones, the shown ones when absent. */
+    hidden?: string;
+    /** The link element the words go in on a wide screen, none for plain words. */
+    link?: ReactElement;
+}
+/** A column an app adds to the users list as data, shown after Role. */
+export interface UsersColumn {
+    /** The id the view names the column by. */
+    id: string;
+    /** The column heading. */
+    label: string;
+    /** The cell of each account, keyed by account id, an account missing from it showing an empty cell. */
+    cells: Readonly<Record<string, UsersColumnCell>>;
+}
+/** What the fields of the users list are built from beside the accounts. */
+export interface FieldOptions {
+    /** The labels the app gives its own roles. */
+    roleLabels: RoleLabels;
+    /** Whether the site shows avatars, the list declaring no avatar field when it does not. */
+    showAvatars: boolean;
+    /** The data columns the app adds. */
+    columns: readonly UsersColumn[];
+    /** Whether the viewport takes the phone layout, where a column draws no link. */
+    phone: boolean;
+}
+/**
+ * Returns the fields the users list shows.
+ * @param accounts - Every account the list holds.
+ * @param options - The role labels, whether avatars show, the data columns and whether the viewport is a phone.
+ * @returns The fields.
+ */
+export declare function usersFields(accounts: readonly Account[], options: FieldOptions): Field<Account>[];

package/dist/wpds/users/fields.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { InitialsAvatar } from '@gopherium/godmin';
+import { listDate } from '@gopherium/godmin/dates';
+import { __, _x } from '@wordpress/i18n';
+import { Badge, VisuallyHidden } from '@wordpress/ui';
+import { cloneElement } from 'react';
+import { DOMAIN } from '../../domain.js';
+import { roleCellOf, roleLabelOf } from './words.js';
+/** Every state an account stands in, in the order the filter offers them. */
+const STATUSES = ['active', 'invited', 'disabled'];
+/** The badge intent each state is drawn with, disabled in the outline one. */
+const STATUS_INTENTS = {
+    active: 'stable',
+    invited: 'informational',
+    disabled: 'none',
+};
+/** The width in pixels of the media box DataViews draws before each name in the phone list. */
+const PHONE_AVATAR_SIZE = 48;
+/**
+ * Returns the state one account stands in.
+ * @param account - The account.
+ * @returns Disabled before invited, invited before active.
+ */
+function statusOf(account) {
+    if (account.disabled) {
+        return 'disabled';
+    }
+    return account.confirmed ? 'active' : 'invited';
+}
+/**
+ * Returns the label each state reads as, read fresh so the loaded catalogue answers.
+ * @returns The labels, keyed by state.
+ */
+function statusLabels() {
+    return {
+        active: _x('Active', 'user status', DOMAIN),
+        invited: _x('Invited', 'user status', DOMAIN),
+        disabled: _x('Disabled', 'user status', DOMAIN),
+    };
+}
+/**
+ * Returns the name field, the title marked with its account so a dialog finds the row again.
+ * @returns The field.
+ */
+function nameField() {
+    return {
+        id: 'name',
+        label: __('Name', DOMAIN),
+        type: 'text',
+        enableGlobalSearch: true,
+        enableHiding: false,
+        filterBy: false,
+        render: ({ item }) => _jsx("span", { "data-item-id": item.id, children: item.name }),
+    };
+}
+/**
+ * Returns the email field, the line under the name.
+ * @returns The field.
+ */
+function emailField() {
+    return { id: 'email', label: __('Email', DOMAIN), type: 'text', enableGlobalSearch: true, filterBy: false };
+}
+/**
+ * Returns the avatar field, the picture the server sends or the initial of the name.
+ * @param phone - Whether the viewport takes the phone layout, whose media box is larger.
+ * @returns The field.
+ */
+function avatarField(phone) {
+    const size = phone ? PHONE_AVATAR_SIZE : undefined;
+    return {
+        id: 'avatar',
+        label: __('Avatar', DOMAIN),
+        render: ({ item }) => _jsx(InitialsAvatar, { name: item.name, src: item.avatar, size: size }),
+        enableSorting: false,
+        filterBy: false,
+    };
+}
+/**
+ * Returns the status field, offering as filter values only the states the accounts stand in.
+ * @param accounts - Every account the list holds.
+ * @returns The field.
+ */
+function statusField(accounts) {
+    const labels = statusLabels();
+    const held = new Set(accounts.map(statusOf));
+    return {
+        id: 'status',
+        label: __('Status', DOMAIN),
+        type: 'text',
+        getValue: ({ item }) => statusOf(item),
+        elements: STATUSES.filter((status) => held.has(status)).map((status) => ({ value: status, label: labels[status] })),
+        filterBy: { operators: ['isAny'] },
+        enableSorting: false,
+        render: ({ item }) => _jsx(Badge, { intent: STATUS_INTENTS[statusOf(item)], children: labels[statusOf(item)] }),
+    };
+}
+/**
+ * Returns the role field, offering as filter values only the roles the accounts hold, by label from A to Z.
+ * @param accounts - Every account the list holds.
+ * @param roleLabels - The labels the app gives its own roles.
+ * @returns The field.
+ */
+function roleField(accounts, roleLabels) {
+    const roles = [...new Set(accounts.map((account) => account.role))]
+        .map((role) => ({ value: role, label: roleLabelOf(role, roleLabels) }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+    return {
+        id: 'role',
+        label: __('Role', DOMAIN),
+        type: 'text',
+        elements: roles,
+        filterBy: { operators: ['isAny'] },
+        enableSorting: false,
+        render: ({ item }) => roleCellOf(item.role, roleLabels),
+    };
+}
+/**
+ * Returns the words of one data column cell, a screen reader hearing its own words when the app gives them.
+ * @param cell - The cell the app gives the account.
+ * @param phone - Whether the viewport takes the phone layout, where the words go in no link.
+ * @returns The words, in the link on a wide screen.
+ */
+function cellWords(cell, phone) {
+    const words = cell.hidden === undefined ? (cell.text) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: cell.text }), _jsx(VisuallyHidden, { children: cell.hidden })] }));
+    return phone || cell.link === undefined ? words : cloneElement(cell.link, undefined, words);
+}
+/**
+ * Returns the field one data column becomes, never sorted nor filtered.
+ * @param column - The column the app adds.
+ * @param phone - Whether the viewport takes the phone layout.
+ * @returns The field.
+ */
+function columnField(column, phone) {
+    return {
+        id: column.id,
+        label: column.label,
+        enableSorting: false,
+        filterBy: false,
+        render: ({ item }) => (Object.hasOwn(column.cells, item.id) ? cellWords(column.cells[item.id], phone) : null),
+    };
+}
+/**
+ * Returns the created field, the abbreviated date and time WordPress lists show, sorted by the moment.
+ * @returns The field.
+ */
+function createdField() {
+    return {
+        id: 'created',
+        label: __('Created', DOMAIN),
+        getValue: ({ item }) => item.created_at.getTime(),
+        render: ({ item }) => listDate(item.created_at),
+        filterBy: false,
+    };
+}
+/**
+ * Returns the fields the users list shows.
+ * @param accounts - Every account the list holds.
+ * @param options - The role labels, whether avatars show, the data columns and whether the viewport is a phone.
+ * @returns The fields.
+ */
+export function usersFields(accounts, options) {
+    return [
+        nameField(),
+        emailField(),
+        ...(options.showAvatars ? [avatarField(options.phone)] : []),
+        statusField(accounts),
+        roleField(accounts, options.roleLabels),
+        ...options.columns.map((column) => columnField(column, options.phone)),
+        createdField(),
+    ];
+}

package/dist/wpds/users/index.d.ts

@@ -0,0 +1,9 @@
+export { usersListDefaults } from './defaults.js';
+export type { UsersListOptions } from './defaults.js';
+export type { UsersColumn, UsersColumnCell } from './fields.js';
+export { RoleSelect } from './RoleSelect.js';
+export type { RoleSelectProps } from './RoleSelect.js';
+export { UsersPage } from './UsersPage.js';
+export type { UsersPageProps } from './UsersPage.js';
+export { errorMessageOf, roleLabelOf } from './words.js';
+export type { ErrorMessages, RoleLabels } from './words.js';

package/dist/wpds/users/index.js

@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: Apache-2.0
+export { usersListDefaults } from './defaults.js';
+export { RoleSelect } from './RoleSelect.js';
+export { UsersPage } from './UsersPage.js';
+export { errorMessageOf, roleLabelOf } from './words.js';

package/dist/wpds/users/words.d.ts

@@ -0,0 +1,47 @@
+import type { BulkWords } from '@gopherium/godmin';
+import type { Account } from '../../account.js';
+/** The label an app gives each role it names, keyed by the role the server stores. */
+export type RoleLabels = Readonly<Record<string, string>>;
+/** The words an app gives each error code only it answers, keyed by the code. */
+export type ErrorMessages = Readonly<Record<string, string>>;
+/**
+ * Returns the label a role reads as, a role the app names no label for reading as its stored name with a capital.
+ * @param role - The role the server stores, empty for an account holding none.
+ * @param roleLabels - The labels the app gives its own roles.
+ * @returns The label, No role for an empty role the app names no label for.
+ */
+export declare function roleLabelOf(role: string, roleLabels?: RoleLabels): string;
+/**
+ * Returns the words a Role cell reads for an account, None for one holding no role as WordPress writes it.
+ * @param role - The role the server stores, empty for an account holding none.
+ * @param roleLabels - The labels the app gives its own roles.
+ * @returns The words.
+ */
+export declare function roleCellOf(role: string, roleLabels: RoleLabels): string;
+/**
+ * Returns the words a failed account write reads as: the words for its code, else the app's, else the fallback.
+ * @param error - What the write failed with.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @param fallback - The words for an error with no code either side words.
+ * @returns The words.
+ */
+export declare function errorMessageOf(error: unknown, errorMessages: ErrorMessages, fallback: string): string;
+/**
+ * Returns the line Change role opens with, naming the one account or counting several.
+ * @param accounts - The accounts the dialog acts on.
+ * @returns The line.
+ */
+export declare function roleLineOf(accounts: readonly Account[]): string;
+/**
+ * Returns the words a Change role run reports its outcome in, WordPress's Changed roles. for several.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @returns The words for the accounts changed, naming one account whole, and for the ones that failed.
+ */
+export declare function roleWords(errorMessages: ErrorMessages): BulkWords<Account>;
+/**
+ * Returns the words an Enable or a Disable run reports its outcome in.
+ * @param disabled - Whether the run disables the accounts rather than enables them.
+ * @param errorMessages - The words the app gives the codes only it answers.
+ * @returns The words for the accounts changed and for the ones that failed.
+ */
+export declare function switchWords(disabled: boolean, errorMessages: ErrorMessages): BulkWords<Account>;