@strato-admin/cloudscape 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vadim Gubergrits
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @strato-admin/cloudscape
+
+Strato Admin Cloudscape implementation - UI component library and theme for React Admin based on AWS Cloudscape Design System.

package/dist/Admin.d.ts

@@ -0,0 +1,17 @@
+import { type CoreAdminProps, type AdminChildren } from '@strato-admin/core';
+export interface AdminProps extends CoreAdminProps {
+    children?: AdminChildren;
+    title?: string;
+}
+/**
+ * The root component of a Strato Admin application.
+ *
+ * It sets up the data fetching context, authentication, and layout using Cloudscape.
+ *
+ * @example
+ * <Admin dataProvider={myDataProvider} title="My App">
+ *   <Resource name="posts" list={PostList} />
+ * </Admin>
+ */
+export declare const Admin: ({ children, title, layout: Layout, i18nProvider, store, ...props }: AdminProps) => import("react/jsx-runtime").JSX.Element;
+export default Admin;

package/dist/Admin.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { CoreAdmin, SchemaRegistryProvider, localStorageStore, useLocaleState, registerDefaultResourceComponents, registerFieldInputMapping, } from '@strato-admin/core';
+import { icuI18nProvider } from '@strato-admin/i18n';
+import englishMessages from '@strato-admin/language-en';
+import AppLayout from './layout/AppLayout';
+import { List } from './list';
+import { Create } from './create';
+import { Edit } from './edit';
+import { Show } from './detail';
+import { TextField, NumberField, CurrencyField, ReferenceField } from './field';
+import { TextInput, NumberInput, ReferenceInput } from './input';
+import { I18nProvider, importMessages } from '@cloudscape-design/components/i18n';
+// Register Cloudscape themed components as defaults for ResourceSchema.
+// This is done once, here, to avoid circular dependencies at the module level.
+registerDefaultResourceComponents({
+    list: List,
+    create: Create,
+    edit: Edit,
+    show: Show,
+});
+registerFieldInputMapping(new Map([
+    [TextField, TextInput],
+    [NumberField, NumberInput],
+    [CurrencyField, NumberInput],
+    [ReferenceField, ReferenceInput],
+]));
+const defaultI18nProvider = icuI18nProvider(() => englishMessages);
+const defaultStore = localStorageStore();
+/**
+ * Syncs Cloudscape I18n with React-Admin locale.
+ */
+const CloudscapeI18n = ({ children }) => {
+    const [locale] = useLocaleState();
+    const [messages, setMessages] = useState([]);
+    useEffect(() => {
+        let active = true;
+        importMessages(locale).then((msgs) => {
+            if (active) {
+                setMessages(msgs);
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [locale]);
+    if (messages.length === 0) {
+        return null;
+    }
+    return (_jsx(I18nProvider, { locale: locale, messages: messages, children: children }));
+};
+const CloudscapeLayout = (props) => {
+    const { children, layout: Layout = AppLayout, ...rest } = props;
+    return (_jsx(CloudscapeI18n, { children: _jsx(Layout, { ...rest, children: children }) }));
+};
+/**
+ * The root component of a Strato Admin application.
+ *
+ * It sets up the data fetching context, authentication, and layout using Cloudscape.
+ *
+ * @example
+ * <Admin dataProvider={myDataProvider} title="My App">
+ *   <Resource name="posts" list={PostList} />
+ * </Admin>
+ */
+export const Admin = ({ children, title, layout: Layout = AppLayout, i18nProvider = defaultI18nProvider, store = defaultStore, ...props }) => {
+    return (_jsx(SchemaRegistryProvider, { children: _jsx(CoreAdmin, { ...props, layout: (layoutProps) => _jsx(CloudscapeLayout, { ...layoutProps, layout: Layout }), title: title, i18nProvider: i18nProvider, store: store, children: children }) }));
+};
+export default Admin;

package/dist/RecordLink.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type RecordLinkType = string | boolean | ((record: any, reference?: string) => string);
+export interface RecordLinkProps {
+    link?: RecordLinkType;
+    resource?: string;
+    children: React.ReactNode;
+}
+declare const RecordLink: ({ link, resource, children }: RecordLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default RecordLink;

package/dist/RecordLink.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Link from '@cloudscape-design/components/link';
+import { useCreatePath, useResourceContext, useRecordContext } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+const RecordLinkImpl = ({ link, resource, children }) => {
+    const contextResource = useResourceContext();
+    const record = useRecordContext();
+    const createPath = useCreatePath();
+    const navigate = useNavigate();
+    const finalResource = resource ?? contextResource;
+    if (!record || !finalResource) {
+        return _jsx(_Fragment, { children: children });
+    }
+    let href = '';
+    if (typeof link === 'function') {
+        href = link(record, finalResource);
+    }
+    else if (link === true) {
+        href = createPath({ resource: finalResource, id: record.id, type: 'edit' });
+    }
+    else if (link === 'edit' || link === 'show') {
+        href = createPath({ resource: finalResource, id: record.id, type: link });
+    }
+    else if (typeof link === 'string') {
+        href = link;
+    }
+    if (!href) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(Link, { href: href, onFollow: (event) => {
+            if (!event.detail.external) {
+                event.preventDefault();
+                navigate(href);
+            }
+        }, children: children }));
+};
+const RecordLink = ({ link, resource, children }) => {
+    if (!link) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(RecordLinkImpl, { link: link, resource: resource, children: children }));
+};
+export default RecordLink;

package/dist/__mocks__/strato-core.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { vi } from 'vitest';
+export const useTranslate = vi.fn(() => (key, options) => options?._ || key);
+export const useTranslateLabel = vi.fn(() => (label) => typeof label === 'string' ? label : label?.source || '');
+export const useGetResourceLabel = vi.fn(() => (resource) => {
+    if (resource === 'products')
+        return 'Products';
+    if (resource === 'categories')
+        return 'Categories';
+    return resource;
+});
+export const useResourceDefinitions = vi.fn(() => ({}));
+export const useResourceDefinition = vi.fn(() => ({
+    name: 'products',
+    options: { label: 'Products' },
+}));
+export const useResourceContext = vi.fn();
+export const useRecordContext = vi.fn((record) => record || {});
+export const useDefaultTitle = vi.fn(() => '');
+export const useInput = vi.fn();
+export const useChoicesContext = vi.fn(() => ({ allChoices: [], isPending: false }));
+export const useGetRecordRepresentation = vi.fn(() => (record) => record?.name || record?.id || record);
+export const useFieldSchema = vi.fn(() => []);
+export const useInputSchema = vi.fn(() => []);
+export const ResourceSchemaProvider = vi.fn(({ children }) => children);
+export const ValidationError = vi.fn(({ error }) => _jsx("span", { children: error }));
+export const useStore = vi.fn(() => ['light', vi.fn()]);
+export const useSaveContext = vi.fn(() => ({ save: vi.fn(), saving: false }));
+export const useNotify = vi.fn(() => vi.fn());
+export const useRedirect = vi.fn(() => vi.fn());
+export const useRefresh = vi.fn(() => vi.fn());
+export const useFieldValue = vi.fn(({ source, record }) => record?.[source]);
+export const useCreatePath = vi.fn(() => (params) => `/${params.resource}/${params.id}/${params.type}`);
+export const useLocale = vi.fn(() => 'en');
+export const useBulkDeleteController = vi.fn(() => ({
+    handleDelete: vi.fn(),
+    isPending: false,
+    isLoading: false,
+}));
+export const CreateBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "create-base", children: children }));
+export const EditBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "edit-base", children: children }));
+export const ShowBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "show-base", children: children }));
+export const ListBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "list-base", children: children }));
+export const useShowContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useEditContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useCreateContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useListContext = vi.fn(() => ({ total: 0, isPending: false, selectedIds: [], defaultTitle: 'Products' }));
+export const Form = vi.fn(({ children }) => _jsx("div", { "data-testid": "ra-form", children: children }));
+export const FieldTitle = vi.fn(({ label, source }) => _jsx("span", { "data-testid": "field-title", children: label || source }));
+export const RecordContextProvider = vi.fn(({ children }) => _jsx(_Fragment, { children: children }));

package/dist/__mocks__to__delete/strato-core.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { vi } from 'vitest';
+export const useTranslate = vi.fn(() => (key, options) => options?._ || key);
+export const useTranslateLabel = vi.fn(() => (label) => typeof label === 'string' ? label : label?.source || '');
+export const useGetResourceLabel = vi.fn(() => (resource) => {
+    if (resource === 'products')
+        return 'Products';
+    if (resource === 'categories')
+        return 'Categories';
+    return resource;
+});
+export const useResourceDefinitions = vi.fn(() => ({}));
+export const useResourceDefinition = vi.fn(() => ({
+    name: 'products',
+    options: { label: 'Products' },
+}));
+export const useResourceContext = vi.fn();
+export const useRecordContext = vi.fn((record) => record || {});
+export const useDefaultTitle = vi.fn(() => '');
+export const useInput = vi.fn();
+export const useChoicesContext = vi.fn(() => ({ allChoices: [], isPending: false }));
+export const useGetRecordRepresentation = vi.fn(() => (record) => record?.name || record?.id || record);
+export const useFieldSchema = vi.fn(() => []);
+export const useInputSchema = vi.fn(() => []);
+export const ResourceSchemaProvider = vi.fn(({ children }) => children);
+export const ValidationError = vi.fn(({ error }) => _jsx("span", { children: error }));
+export const useStore = vi.fn(() => ['light', vi.fn()]);
+export const useSaveContext = vi.fn(() => ({ save: vi.fn(), saving: false }));
+export const useNotify = vi.fn(() => vi.fn());
+export const useRedirect = vi.fn(() => vi.fn());
+export const useRefresh = vi.fn(() => vi.fn());
+export const useFieldValue = vi.fn(({ source, record }) => record?.[source]);
+export const useCreatePath = vi.fn(() => (params) => `/${params.resource}/${params.id}/${params.type}`);
+export const useLocale = vi.fn(() => 'en');
+export const useBulkDeleteController = vi.fn(() => ({
+    handleDelete: vi.fn(),
+    isPending: false,
+    isLoading: false,
+}));
+export const CreateBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "create-base", children: children }));
+export const EditBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "edit-base", children: children }));
+export const ShowBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "show-base", children: children }));
+export const ListBase = vi.fn(({ children }) => _jsx("div", { "data-testid": "list-base", children: children }));
+export const useShowContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useEditContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useCreateContext = vi.fn(() => ({ isLoading: false, record: {}, defaultTitle: 'Products' }));
+export const useListContext = vi.fn(() => ({ total: 0, isPending: false, selectedIds: [], defaultTitle: 'Products' }));
+export const Form = vi.fn(({ children }) => _jsx("div", { "data-testid": "ra-form", children: children }));
+export const FieldTitle = vi.fn(({ label, source }) => _jsx("span", { "data-testid": "field-title", children: label || source }));
+export const RecordContextProvider = vi.fn(({ children }) => _jsx(_Fragment, { children: children }));

package/dist/button/BulkDeleteButton.d.ts

@@ -0,0 +1,7 @@
+export interface BulkDeleteButtonProps {
+    label?: string;
+    variant?: 'primary' | 'normal' | 'link';
+    mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+}
+export declare const BulkDeleteButton: ({ label, variant, mutationMode, }: BulkDeleteButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BulkDeleteButton;

package/dist/button/BulkDeleteButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition } from '@strato-admin/core';
+import { Button } from './Button';
+export const BulkDeleteButton = ({ label, variant = 'normal', mutationMode = 'pessimistic', }) => {
+    const translate = useTranslate();
+    const { selectedIds } = useListContext();
+    const { options } = useResourceDefinition();
+    const { handleDelete, isPending, isLoading } = useBulkDeleteController({
+        mutationMode,
+    });
+    if (options?.canDelete === false) {
+        return null;
+    }
+    const isBusy = isPending || isLoading;
+    return (_jsx(Button, { variant: variant, onClick: handleDelete, loading: isBusy, disabled: isBusy || !selectedIds || selectedIds.length === 0, children: label || translate('ra.action.delete', { _: 'Delete' }) }));
+};
+export default BulkDeleteButton;

package/dist/button/Button.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps as CloudscapeButtonProps } from '@cloudscape-design/components/button';
+export interface ButtonProps extends CloudscapeButtonProps {
+    children: React.ReactNode;
+}
+export declare const Button: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/button/Button.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CloudscapeButton from '@cloudscape-design/components/button';
+export const Button = ({ children, ...props }) => {
+    return _jsx(CloudscapeButton, { ...props, children: children });
+};
+export default Button;

package/dist/button/CreateButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from './Button';
+export interface CreateButtonProps extends Omit<ButtonProps, 'children'> {
+    label?: string;
+}
+export declare const CreateButton: ({ label, variant, ...props }: CreateButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default CreateButton;

package/dist/button/CreateButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useResourceContext, useTranslate, useCreatePath, useResourceDefinitions } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+import { Button } from './Button';
+export const CreateButton = ({ label, variant = 'primary', ...props }) => {
+    const resource = useResourceContext();
+    const translate = useTranslate();
+    const createPath = useCreatePath();
+    const navigate = useNavigate();
+    const definitions = useResourceDefinitions();
+    const definition = resource ? definitions[resource] : undefined;
+    if (!definition || !definition.hasCreate) {
+        return null;
+    }
+    const handleClick = () => {
+        const path = createPath({
+            resource,
+            type: 'create',
+        });
+        navigate(path);
+    };
+    return (_jsx(Button, { variant: variant, onClick: handleClick, iconName: "add-plus", ...props, children: label || translate('ra.action.create', { _: 'Create' }) }));
+};
+export default CreateButton;

package/dist/button/EditButton.d.ts

@@ -0,0 +1,8 @@
+import { RaRecord } from '@strato-admin/core';
+import { ButtonProps } from './Button';
+export interface EditButtonProps extends Omit<ButtonProps, 'children'> {
+    label?: string;
+    record?: RaRecord;
+}
+export declare const EditButton: ({ label, record: recordProp, variant, ...props }: EditButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default EditButton;

package/dist/button/EditButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useResourceContext, useRecordContext, useTranslate, useCreatePath } from '@strato-admin/core';
+import { useNavigate } from 'react-router-dom';
+import { Button } from './Button';
+export const EditButton = ({ label, record: recordProp, variant = 'primary', ...props }) => {
+    const resource = useResourceContext();
+    const record = useRecordContext(recordProp);
+    const translate = useTranslate();
+    const createPath = useCreatePath();
+    const navigate = useNavigate();
+    if (!record) {
+        return null;
+    }
+    const handleClick = () => {
+        const path = createPath({
+            resource,
+            id: record.id,
+            type: 'edit',
+        });
+        navigate(path);
+    };
+    return (_jsx(Button, { variant: variant, onClick: handleClick, ...props, children: label || translate('ra.action.edit', { _: 'Edit' }) }));
+};
+export default EditButton;

package/dist/button/SaveButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from './Button';
+export interface SaveButtonProps extends Omit<ButtonProps, 'children'> {
+    label?: string;
+}
+export declare const SaveButton: ({ label, variant, ...props }: SaveButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveButton;

package/dist/button/SaveButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@strato-admin/core';
+import { Button } from './Button';
+export const SaveButton = ({ label, variant = 'primary', ...props }) => {
+    const translate = useTranslate();
+    return (_jsx(Button, { variant: variant, formAction: "submit", nativeButtonAttributes: { type: 'submit' }, ...props, children: label || translate('ra.action.save', { _: 'Save' }) }));
+};
+export default SaveButton;

package/dist/button/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './EditButton';
+export * from './BulkDeleteButton';
+export * from './SaveButton';
+export * from './CreateButton';

package/dist/button/index.js

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './EditButton';
+export * from './BulkDeleteButton';
+export * from './SaveButton';
+export * from './CreateButton';

package/dist/collection-hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useCollection';
+export * from './interfaces';

package/dist/collection-hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useCollection';
+export * from './interfaces';

package/dist/collection-hooks/interfaces.d.ts

@@ -0,0 +1,93 @@
+interface CustomEventLike<T> {
+    detail: T;
+}
+export interface TableColumnDisplay {
+    id: string;
+    visible: boolean;
+}
+export interface CollectionPreferences {
+    pageSize?: number;
+    wrapLines?: boolean;
+    stripedRows?: boolean;
+    visibleContent?: ReadonlyArray<string>;
+    contentDisplay?: ReadonlyArray<TableColumnDisplay>;
+    contentDensity?: 'comfortable' | 'compact';
+}
+export interface UseCollectionOptions<_T> {
+    filtering?: any;
+    pagination?: any;
+    sorting?: any;
+    preferences?: {
+        pageSizeOptions?: ReadonlyArray<{
+            value: number;
+            label?: string;
+        }>;
+        visibleContentOptions?: ReadonlyArray<{
+            id: string;
+            label: string;
+            editable?: boolean;
+        }>;
+        contentDisplayOptions?: ReadonlyArray<{
+            id: string;
+            label: string;
+            alwaysVisible?: boolean;
+        }>;
+        wrapLines?: boolean;
+        stripedRows?: boolean;
+        visibleContent?: ReadonlyArray<string>;
+        contentDisplay?: ReadonlyArray<TableColumnDisplay>;
+    };
+}
+export interface UseCollectionResult<T> {
+    items: ReadonlyArray<T> | undefined;
+    collectionProps: {
+        selectedItems: T[];
+        onSelectionChange(event: CustomEventLike<{
+            selectedItems: T[];
+        }>): void;
+        trackBy: string | ((item: T) => string);
+        sortingColumn?: {
+            sortingField?: string;
+        };
+        sortingDescending?: boolean;
+        onSortingChange?(event: CustomEventLike<{
+            sortingColumn: {
+                sortingField?: string;
+            };
+            isDescending?: boolean;
+        }>): void;
+    };
+    paginationProps: {
+        disabled?: boolean;
+        currentPageIndex: number;
+        pagesCount: number;
+        onChange(event: CustomEventLike<{
+            currentPageIndex: number;
+        }>): void;
+    };
+    filterProps: {
+        filteringText: string;
+        onChange(event: CustomEventLike<{
+            filteringText: string;
+        }>): void;
+    };
+    preferencesProps: {
+        preferences: CollectionPreferences;
+        onConfirm(event: CustomEventLike<CollectionPreferences>): void;
+        pageSizeOptions?: ReadonlyArray<{
+            value: number;
+            label?: string;
+        }>;
+        visibleContentOptions?: ReadonlyArray<{
+            id: string;
+            label: string;
+            editable?: boolean;
+        }>;
+        contentDisplayOptions?: ReadonlyArray<{
+            id: string;
+            label: string;
+            alwaysVisible?: boolean;
+        }>;
+    };
+}
+export {};

package/dist/collection-hooks/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection-hooks/useCollection.d.ts

@@ -0,0 +1,3 @@
+import { RaRecord } from '@strato-admin/core';
+import { UseCollectionOptions, UseCollectionResult } from './interfaces';
+export declare function useCollection<T extends RaRecord>(options: UseCollectionOptions<T>): UseCollectionResult<T>;

package/dist/collection-hooks/useCollection.js

@@ -0,0 +1,102 @@
+import { useState, useMemo } from 'react';
+import { useListContext } from '@strato-admin/core';
+export function useCollection(options) {
+    const { data, // Array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }
+    total, // Total number of results for the current filters, excluding pagination. Useful to build the pagination controls, e.g. 23
+    isPending, // Boolean, true until the data is available
+    isFetching, // Boolean, true while the data is being fetched, false once the data is fetched
+    isLoading, // Boolean, true until the data is fetched for the first time
+    // Pagination
+    page, // Current page. Starts at 1
+    perPage, // Number of results per page. Defaults to 25
+    setPage, // Callback to change the page, e.g. setPage(3)
+    setPerPage, // Callback to change the number of results per page, e.g. setPerPage(50)
+    // Selection
+    selectedIds, // Array of the selected record IDs
+    onSelect, // Callback to change the selection, e.g. onSelect([123, 456])
+    // Sorting
+    sort, // Current sort. E.g. { field: 'id', order: 'ASC' }
+    setSort, // Callback to change the sort. E.g. setSort({ field: 'id', order: 'ASC' })
+    // Filtering
+    filterValues, setFilters, } = useListContext();
+    const [wrapLines, setWrapLines] = useState(options.preferences?.wrapLines);
+    const [stripedRows, setStripedRows] = useState(options.preferences?.stripedRows);
+    const [visibleContent, setVisibleContent] = useState(options.preferences?.visibleContent ?? options.preferences?.visibleContentOptions?.map((o) => o.id));
+    const [contentDisplay, setContentDisplay] = useState(options.preferences?.contentDisplay ?? options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })));
+    useMemo(() => {
+        setVisibleContent(options.preferences?.visibleContent ?? options.preferences?.visibleContentOptions?.map((o) => o.id));
+        setContentDisplay(options.preferences?.contentDisplay ?? options.preferences?.contentDisplayOptions?.map((o) => ({ id: o.id, visible: true })));
+    }, [options.preferences?.visibleContent, options.preferences?.visibleContentOptions, options.preferences?.contentDisplay, options.preferences?.contentDisplayOptions]);
+    const selectedItems = (selectedIds || []).map((id) => {
+        const item = data?.find((i) => i.id === id);
+        if (item)
+            return item;
+        return { id };
+    });
+    const items = useMemo(() => {
+        // If it's a client-side list (data contains all records), we need to slice it for pagination.
+        // We detect this by checking if data.length equals total and if data.length is greater than perPage.
+        if (data && total === data.length && data.length > (perPage || 0)) {
+            const p = page || 1;
+            const pp = perPage || 25;
+            return data.slice((p - 1) * pp, p * pp);
+        }
+        return data;
+    }, [data, total, page, perPage]);
+    return {
+        items,
+        collectionProps: {
+            selectedItems,
+            onSelectionChange: (event) => onSelect(event.detail.selectedItems.map((item) => item.id)),
+            trackBy: 'id',
+            sortingColumn: sort ? { sortingField: sort.field } : undefined,
+            sortingDescending: sort?.order === 'DESC',
+            onSortingChange: (event) => {
+                const { sortingColumn, isDescending } = event.detail;
+                if (sortingColumn?.sortingField) {
+                    setSort({ field: sortingColumn.sortingField, order: isDescending ? 'DESC' : 'ASC' });
+                }
+            },
+        },
+        paginationProps: {
+            disabled: isPending || isFetching || isLoading,
+            currentPageIndex: page,
+            pagesCount: total !== undefined && perPage ? Math.ceil(total / perPage) : 1,
+            onChange: (event) => setPage(event.detail.currentPageIndex),
+        },
+        filterProps: {
+            filteringText: filterValues?.q || '',
+            onChange: (event) => {
+                setFilters({ ...filterValues, q: event.detail.filteringText });
+            },
+        },
+        preferencesProps: {
+            preferences: {
+                pageSize: perPage,
+                wrapLines,
+                stripedRows,
+                visibleContent,
+                contentDisplay,
+            },
+            onConfirm: (event) => {
+                const { pageSize, wrapLines: newWrapLines, stripedRows: newStripedRows, visibleContent: newVisibleContent, contentDisplay: newContentDisplay, } = event.detail;
+                if (pageSize !== undefined && pageSize !== perPage) {
+                    setPerPage(pageSize);
+                }
+                if (newWrapLines !== undefined) {
+                    setWrapLines(newWrapLines);
+                }
+                if (newStripedRows !== undefined) {
+                    setStripedRows(newStripedRows);
+                }
+                if (newVisibleContent !== undefined) {
+                    setVisibleContent(newVisibleContent);
+                }
+                if (newContentDisplay !== undefined) {
+                    setContentDisplay(newContentDisplay);
+                }
+            },
+            ...options.preferences,
+        },
+    };
+}