@strato-admin/cloudscape 0.1.1 → 0.3.0

package/dist/layout/Ready.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Container, Header, SpaceBetween, Link, Icon, ContentLayout, ColumnLayout, } from '@cloudscape-design/components';
+import { CodeView } from '@cloudscape-design/code-view';
+import typescriptHighlight from '@cloudscape-design/code-view/highlight/typescript';
+import { useDefaultTitle } from '@strato-admin/ra-core';
+/**
+ * Default component to display when the admin has no resources.
+ * This is a Cloudscape-themed replacement for the default react-admin Ready component.
+ */
+export const Ready = () => {
+    const defaultTitle = useDefaultTitle();
+    const appTitle = typeof defaultTitle === 'string' ? defaultTitle : 'Strato Admin';
+    const codeSnippet = `import { Admin, ResourceSchema, TextField } from '@strato-admin/admin';
+
+export const App = () => (
+    <Admin dataProvider={...}>
+        <ResourceSchema name="posts" >
+          <TextField source="id" />
+        </ResourceSchema>
+    </Admin>
+);`;
+    return (_jsx(ContentLayout, { maxContentWidth: 1040, headerVariant: "high-contrast", header: _jsx(Box, { padding: { vertical: 'xxxl' }, textAlign: "center", children: _jsxs(SpaceBetween, { size: "l", children: [_jsxs(Header, { variant: "h1", description: "Your Strato Admin application is properly configured and ready to go.", children: ["Welcome to ", appTitle] }), _jsxs(Box, { variant: "p", children: ["Strato Admin uses a ", _jsx("strong", { children: "Schema First" }), " approach to build admin interfaces efficiently. Start by defining your resources and let us handle the rest."] }), _jsx(Box, { margin: { top: 'm' }, children: _jsxs(SpaceBetween, { direction: "horizontal", size: "xs", children: [_jsx(Button, { variant: "primary", href: "https://strato-admin.dev/docs/getting-started/tutorial", iconName: "external", iconAlign: "right", children: "Get started with the tutorial" }), _jsx(Button, { href: "https://github.com/vadimgu/strato-admin", iconName: "external", iconAlign: "right", children: "View on GitHub" })] }) })] }) }), children: _jsxs(SpaceBetween, { size: "xxl", children: [_jsxs(SpaceBetween, { size: "l", children: [_jsx(Container, { header: _jsx(Header, { variant: "h2", children: "How to add your first resource" }), children: _jsxs(SpaceBetween, { size: "m", children: [_jsxs(Box, { variant: "p", children: ["Add a ", _jsx("code", { children: "<ResourceSchema>" }), " component as a child of your ", _jsx("code", { children: "<Admin>" }), " to define your data model."] }), _jsx(CodeView, { content: codeSnippet, highlight: typescriptHighlight })] }) }), _jsx(Container, { header: _jsx(Header, { variant: "h2", children: "Next steps" }), children: _jsxs(ColumnLayout, { columns: 2, variant: "text-grid", children: [_jsxs("div", { children: [_jsxs(Box, { variant: "h3", fontWeight: "bold", children: [_jsx(Icon, { name: "status-info", variant: "link" }), " Core Concepts"] }), _jsxs(Box, { variant: "p", children: ["Learn how", ' ', _jsx(Link, { href: "https://strato-admin.dev/docs/core-concepts/schema", external: true, children: "Schemas" }), ' ', "work to automate your UI."] })] }), _jsxs("div", { children: [_jsxs(Box, { variant: "h3", fontWeight: "bold", children: [_jsx(Icon, { name: "star", variant: "warning" }), " Design System"] }), _jsxs(Box, { variant: "p", children: ["Explore the", ' ', _jsx(Link, { href: "https://cloudscape.design/", external: true, children: "Cloudscape design system" }), ' ', "components."] })] })] }) })] }), _jsxs(Box, { textAlign: "center", color: "text-label", margin: { top: 'xs' }, padding: { bottom: 'xxxl' }, children: ["Built with", ' ', _jsx(Link, { href: "https://www.strato-admin.dev", external: true, children: "Strato Admin" }), "."] })] }) }));
+};
+export default Ready;

package/dist/layout/TopNavigation.d.ts

@@ -1,6 +1,8 @@
 import { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
-export interface MyTopNavigationProps extends Omit<TopNavigationProps, 'identity'> {
+export interface MyTopNavigationProps {
     identity?: TopNavigationProps.Identity;
+    utilities?: ReadonlyArray<TopNavigationProps.Utility>;
+    extraUtilities?: ReadonlyArray<TopNavigationProps.Utility>;
 }
-export declare const TopNavigation: ({ utilities: providedUtilities, identity, ...props }: MyTopNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TopNavigation: ({ utilities: providedUtilities, identity, extraUtilities }: MyTopNavigationProps) => import("react/jsx-runtime").JSX.Element;
 export default TopNavigation;

package/dist/layout/TopNavigation.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloudscapeTopNavigation from '@cloudscape-design/components/top-navigation';
-import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/core';
+import { useLocale, useSetLocale, useLocales, useTranslate, useAuthProvider, useStore } from '@strato-admin/ra-core';
 const LightModeIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", focusable: "false", children: [_jsx("path", { d: "M8 1.5v13a6.5 6.5 0 0 0 0-13z", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "7", fill: "none", stroke: "currentColor", "stroke-width": "1.5" })] }));
 const DarkModeIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", focusable: "false", children: [_jsx("path", { d: "M8 1.5v13a6.5 6.5 0 0 1 0-13z", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "7", fill: "none", stroke: "currentColor", "stroke-width": "1.5" })] }));
-export const TopNavigation = ({ utilities: providedUtilities, identity, ...props }) => {
+export const TopNavigation = ({ utilities: providedUtilities, identity, extraUtilities }) => {
     const locale = useLocale();
     const setLocale = useSetLocale();
     const locales = useLocales();
@@ -38,16 +38,16 @@ export const TopNavigation = ({ utilities: providedUtilities, identity, ...props
         if (authProvider) {
             autoUtilities.push({
                 type: 'menu-dropdown',
-                text: translate('ra.auth.user_menu', { _: 'User' }),
+                text: translate('strato.auth.user_menu', { _: 'User' }),
                 iconName: 'user-profile',
                 items: [
-                    { id: 'profile', text: translate('ra.auth.profile', { _: 'Profile' }) },
-                    { id: 'signout', text: translate('ra.auth.logout', { _: 'Sign out' }) },
+                    { id: 'profile', text: translate('strato.auth.profile', { _: 'Profile' }) },
+                    { id: 'signout', text: translate('strato.auth.logout', { _: 'Sign out' }) },
                 ],
             });
         }
-        utilities = autoUtilities;
+        utilities = extraUtilities ? [...autoUtilities, ...extraUtilities] : autoUtilities;
     }
-    return (_jsx("div", { id: "header", children: _jsx(CloudscapeTopNavigation, { identity: identity || { title: 'Strato Admin', href: '/' }, utilities: utilities, ...props }) }));
+    return (_jsx("div", { id: "header", children: _jsx(CloudscapeTopNavigation, { identity: identity || { title: 'Strato Admin', href: '/' }, utilities: utilities }) }));
 };
 export default TopNavigation;

package/dist/layout/index.d.ts

@@ -1,2 +1,4 @@
 export * from './AppLayout';
 export * from './TopNavigation';
+export * from './Ready';
+export * from './Notifications';

package/dist/layout/index.js

@@ -1,2 +1,4 @@
 export * from './AppLayout';
 export * from './TopNavigation';
+export * from './Ready';
+export * from './Notifications';

package/dist/list/Cards.d.ts

@@ -1,11 +1,38 @@
 import React from 'react';
 import { CardsProps } from '@cloudscape-design/components/cards';
-import { RaRecord } from '@strato-admin/core';
-export interface ListCardsProps<T extends RaRecord = any> extends Omit<CardsProps<T>, 'items' | 'cardDefinition'> {
+import { RaRecord } from '@strato-admin/ra-core';
+export interface ListCardsProps<T extends RaRecord = any> extends Omit<CardsProps<T>, 'items' | 'cardDefinition' | 'preferences'> {
     renderItem?: (item: T) => React.ReactNode;
     include?: string[];
     exclude?: string[];
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: string;
+    actions?: React.ReactNode;
+    selectionType?: 'single' | 'multi';
+    /**
+     * Whether to enable text filtering.
+     * @default true
+     */
+    filtering?: boolean;
+    /**
+     * Placeholder text for the filter input.
+     * @default "Search..."
+     */
+    filteringPlaceholder?: string;
+    /**
+     * Options for the page size selector.
+     */
+    pageSizeOptions?: ReadonlyArray<{
+        value: number;
+        label?: string;
+    }>;
+    /**
+     * Whether to show the preferences button or custom preferences content.
+     * @default true
+     */
+    preferences?: boolean | React.ReactNode;
 }
-export declare const ListCards: <T extends RaRecord = any>({ renderItem, include, exclude, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const Cards: <T extends RaRecord = any>({ renderItem, include, exclude, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ListCards: <T extends RaRecord = any>({ renderItem, include, exclude, children, title, description, actions, selectionType, filtering, filteringPlaceholder, pageSizeOptions, preferences, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Cards: <T extends RaRecord = any>({ renderItem, include, exclude, children, title, description, actions, selectionType, filtering, filteringPlaceholder, pageSizeOptions, preferences, ...props }: ListCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ListCards;

package/dist/list/Cards.js

@@ -1,27 +1,98 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import CloudscapeCards from '@cloudscape-design/components/cards';
 import Pagination from '@cloudscape-design/components/pagination';
-import { RecordContextProvider, useFieldSchema } from '@strato-admin/core';
+import TextFilter from '@cloudscape-design/components/text-filter';
+import CollectionPreferences from '@cloudscape-design/components/collection-preferences';
+import { RecordContextProvider, useTranslateLabel, useTranslate } from '@strato-admin/ra-core';
+import { useResourceSchema, useSettings } from '@strato-admin/core';
 import { useCollection } from '../collection-hooks';
+import { useSchemaFields } from '../hooks/useSchemaFields';
 import KeyValuePairs from '../detail/KeyValuePairs';
-export const ListCards = ({ renderItem, include, exclude, ...props }) => {
-    const { items, paginationProps, collectionProps } = useCollection({
-        filtering: {},
-        pagination: {},
-        sorting: {},
+import TableHeader from './TableHeader';
+export const ListCards = ({ renderItem, include, exclude, children, title, description, actions, selectionType, filtering = true, filteringPlaceholder, pageSizeOptions, preferences = true, ...props }) => {
+    const translate = useTranslate();
+    const { listPageSizes, listPageSizeLabel } = useSettings();
+    const resolvedPageSizeOptions = pageSizeOptions ??
+        (listPageSizes && listPageSizeLabel
+            ? listPageSizes.map((value) => ({ value, label: listPageSizeLabel(value) }))
+            : undefined);
+    const translateLabel = useTranslateLabel();
+    const { resource, label: schemaLabel, definition } = useResourceSchema();
+    const { getListFields } = useSchemaFields();
+    const finalSelectionType = selectionType ?? (definition?.options?.canDelete ? 'multi' : undefined);
+    const finalChildren = React.useMemo(() => getListFields(children, { include, exclude }), [getListFields, children, include, exclude]);
+    const visibleContentOptions = React.useMemo(() => {
+        const options = [];
+        finalChildren.forEach((child, index) => {
+            if (!React.isValidElement(child))
+                return;
+            const { source, label } = child.props;
+            const headerLabel = translateLabel({ label, resource, source });
+            if (typeof headerLabel === 'string') {
+                options.push({
+                    id: source || `section-${index}`,
+                    label: headerLabel,
+                });
+            }
+        });
+        return options;
+    }, [finalChildren, resource, translateLabel]);
+    const { items, paginationProps, collectionProps, filterProps, preferencesProps } = useCollection({
+        preferences: {
+            pageSizeOptions: resolvedPageSizeOptions,
+            visibleContentOptions: visibleContentOptions.length > 0 ? visibleContentOptions : undefined,
+        },
     });
-    const schemaChildren = useFieldSchema();
-    const defaultRenderItem = (_item) => (_jsx(KeyValuePairs, { include: include, exclude: exclude, children: schemaChildren }));
+    const displayedChildren = React.useMemo(() => {
+        const { visibleContent } = preferencesProps.preferences;
+        if (!visibleContent)
+            return finalChildren;
+        return finalChildren.filter((child) => {
+            if (!React.isValidElement(child))
+                return true;
+            const { source } = child.props;
+            // If the child doesn't have a source, we don't know how to toggle it, so we keep it.
+            if (!source)
+                return true;
+            // If it's not in the options, it's not toggleable, so we keep it.
+            if (!visibleContentOptions.some((opt) => opt.id === source))
+                return true;
+            return visibleContent.includes(source);
+        });
+    }, [finalChildren, preferencesProps.preferences.visibleContent, visibleContentOptions]);
+    const defaultRenderItem = (_item) => _jsx(KeyValuePairs, { children: displayedChildren });
     const finalRenderItem = renderItem || defaultRenderItem;
     const cardDefinition = {
         sections: [
             {
                 id: 'main',
-                content: (item) => _jsx(RecordContextProvider, { value: item, children: finalRenderItem(item) }),
+                content: (item) => (_jsx(RecordContextProvider, { value: item, children: finalRenderItem(item) })),
             },
         ],
     };
-    return (_jsx(CloudscapeCards, { ...collectionProps, ...props, items: items || [], cardDefinition: cardDefinition, pagination: _jsx(Pagination, { ...paginationProps }) }));
+    const cardsHeader = React.useMemo(() => {
+        if (React.isValidElement(title)) {
+            return title;
+        }
+        const finalTitle = title !== undefined ? title : schemaLabel;
+        return _jsx(TableHeader, { title: finalTitle, description: description, actions: actions });
+    }, [title, description, actions, schemaLabel]);
+    return (_jsx(CloudscapeCards, { ...collectionProps, ...props, items: items || [], cardDefinition: cardDefinition, pagination: _jsx(Pagination, { ...paginationProps }), header: cardsHeader, selectionType: finalSelectionType, filter: filtering && _jsx(TextFilter, { ...filterProps, filteringPlaceholder: filteringPlaceholder }), preferences: preferences === true || resolvedPageSizeOptions ? (_jsx(CollectionPreferences, { ...preferencesProps, pageSizePreference: resolvedPageSizeOptions
+                ? {
+                    options: resolvedPageSizeOptions,
+                }
+                : undefined, visibleContentPreference: visibleContentOptions.length > 0
+                ? {
+                    title: translate('strato.action.select_sections', { _: 'Select visible sections' }),
+                    options: [
+                        {
+                            label: translate('strato.action.select_sections', { _: 'Select visible sections' }),
+                            options: visibleContentOptions,
+                        },
+                    ],
+                }
+                : undefined })) : React.isValidElement(preferences) ? (preferences) : undefined }));
 };
 export const Cards = ListCards;
 export default ListCards;

package/dist/list/List.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { type RaRecord } from '@strato-admin/core';
-export interface ListProps<_RecordType extends RaRecord = any> {
+import { type RaRecord, type ListBaseProps } from '@strato-admin/ra-core';
+export interface ListProps<RecordType extends RaRecord = any> extends ListBaseProps<RecordType> {
     children?: React.ReactNode;
-    fieldSchema?: React.ReactNode;
     include?: string[];
     exclude?: string[];
-    title?: React.ReactNode;
+    title?: React.ReactNode | (() => React.ReactNode);
+    description?: React.ReactNode | (() => React.ReactNode);
     actions?: React.ReactNode;
     /**
      * Whether to enable text filtering in the implicit Table.
@@ -17,7 +17,10 @@ export interface ListProps<_RecordType extends RaRecord = any> {
      * @default true
      */
     preferences?: boolean | React.ReactNode;
-    [key: string]: any;
+    /**
+     * The fields to display by default.
+     */
+    display?: string[];
 }
 /**
  * A List component that provides a list context and a Cloudscape Table.
@@ -32,12 +35,6 @@ export interface ListProps<_RecordType extends RaRecord = any> {
  * @example
  * // Using FieldSchema from context
  * <List include={['name', 'price']} />
- *
- * @example
- * // Passing a custom field schema
- * <List fieldSchema={<FieldSchema>...</FieldSchema>}>
- *   <Table />
- * </List>
  */
-export declare const List: <RecordType extends RaRecord = any>({ children, fieldSchema, include, exclude, title, actions, filtering, preferences, ...props }: ListProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
+export declare const List: <RecordType extends RaRecord = any>({ children, include, exclude, title, actions, description, filtering, preferences, display, ...props }: ListProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
 export default List;

package/dist/list/List.js

@@ -1,6 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ListBase, ResourceSchemaProvider } from '@strato-admin/core';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { ListBase, useTranslate } from '@strato-admin/ra-core';
+import { ResourceSchemaProvider, useResourceSchema, useConstructedPageTitle, useSettings } from '@strato-admin/core';
 import Table from './Table';
+const ListUI = ({ children, title, actions, description, include, exclude, filtering, preferences, display, }) => {
+    const { label, listTitle, listDescription, listComponent: ListComponent = Table } = useResourceSchema();
+    const translate = useTranslate();
+    const constructedTitle = useConstructedPageTitle('list', label);
+    const finalTitle = React.useMemo(() => {
+        if (typeof title === 'function')
+            return title();
+        if (React.isValidElement(title))
+            return title;
+        if (title)
+            return translate(title);
+        if (React.isValidElement(listTitle))
+            return listTitle;
+        if (listTitle)
+            return translate(listTitle);
+        return constructedTitle;
+    }, [title, listTitle, translate, constructedTitle]);
+    const finalDescription = React.useMemo(() => {
+        if (typeof description === 'function')
+            return description();
+        if (React.isValidElement(description))
+            return description;
+        if (description)
+            return translate(description);
+        if (React.isValidElement(listDescription))
+            return listDescription;
+        if (listDescription)
+            return translate(listDescription);
+        return undefined;
+    }, [description, listDescription, translate]);
+    const finalChildren = children || (_jsx(ListComponent, { include: include, exclude: exclude, display: display, title: finalTitle, description: finalDescription, actions: actions, filtering: filtering, preferences: preferences }));
+    return _jsx(_Fragment, { children: finalChildren });
+};
 /**
  * A List component that provides a list context and a Cloudscape Table.
  *
@@ -14,15 +49,10 @@ import Table from './Table';
  * @example
  * // Using FieldSchema from context
  * <List include={['name', 'price']} />
- *
- * @example
- * // Passing a custom field schema
- * <List fieldSchema={<FieldSchema>...</FieldSchema>}>
- *   <Table />
- * </List>
  */
-export const List = ({ children, fieldSchema, include, exclude, title, actions, filtering = true, preferences = true, ...props }) => {
-    const finalChildren = children || (_jsx(Table, { include: include, exclude: exclude, title: title, actions: actions, filtering: filtering, preferences: preferences }));
-    return (_jsx(ListBase, { ...props, children: _jsx(ResourceSchemaProvider, { resource: props.resource, fieldSchema: fieldSchema, children: finalChildren }) }));
+export const List = ({ children, include, exclude, title, actions, description, filtering = true, preferences = true, display, ...props }) => {
+    const { queryOptions } = useResourceSchema(props.resource);
+    const { listPageSize } = useSettings();
+    return (_jsx(ListBase, { queryOptions: queryOptions, ...props, perPage: props.perPage ?? listPageSize, children: _jsx(ResourceSchemaProvider, { resource: props.resource, children: _jsx(ListUI, { title: title, actions: actions, description: description, include: include, exclude: exclude, filtering: filtering, preferences: preferences, display: display, children: children }) }) }));
 };
 export default List;

package/dist/list/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TableProps as CloudscapeTableProps } from '@cloudscape-design/components/table';
-import { RaRecord } from '@strato-admin/core';
+import { RaRecord } from '@strato-admin/ra-core';
 import { type RecordLinkType } from '../RecordLink';
 export type CloudscapeColumnDefinitionProps = Partial<Omit<CloudscapeTableProps.ColumnDefinition<any>, 'id' | 'header' | 'cell' | 'sortingField'>>;
 export interface ColumnProps extends CloudscapeColumnDefinitionProps {
@@ -38,6 +38,10 @@ export interface TableProps<RecordType extends RaRecord = any> extends Partial<O
      * The title content of the table. Can be a string or a React node.
      */
     title?: React.ReactNode;
+    /**
+     * The description content of the table.
+     */
+    description?: React.ReactNode;
     /**
      * Actions to display in the table header, typically a button group.
      */
@@ -86,7 +90,7 @@ export interface TableProps<RecordType extends RaRecord = any> extends Partial<O
      * Can be an array of field sources/IDs.
      * If not specified, the first 5 fields will be shown.
      */
-    defaultVisibleFields?: string[];
+    display?: string[];
 }
 /**
  * The Table component provides a declarative way to build data tables with Cloudscape components
@@ -101,12 +105,12 @@ export interface TableProps<RecordType extends RaRecord = any> extends Partial<O
  * ```
  */
 export declare const Table: {
-    <RecordType extends RaRecord = any>({ title, actions, children, include, exclude, filtering, filteringPlaceholder, pageSizeOptions, preferences, reorderable, defaultVisibleFields, selectionType, ...props }: TableProps<RecordType>): import("react/jsx-runtime").JSX.Element;
+    <RecordType extends RaRecord = any>({ title, description, actions, children, include, exclude, filtering, filteringPlaceholder, pageSizeOptions, preferences, reorderable, display, selectionType, pagination, ...props }: TableProps<RecordType>): import("react/jsx-runtime").JSX.Element;
     Column: ({ children, source, link, field: FieldComponent }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
     NumberColumn: ({ children, source, link, field: FieldComponent }: NumberColumnProps) => import("react/jsx-runtime").JSX.Element;
     DateColumn: ({ children, source, link, field: FieldComponent }: DateColumnProps) => import("react/jsx-runtime").JSX.Element;
     BooleanColumn: ({ children, source, field: FieldComponent }: BooleanColumnProps) => import("react/jsx-runtime").JSX.Element;
     ReferenceColumn: ({ children, source, reference, link, field: FieldComponent }: ReferenceColumnProps) => import("react/jsx-runtime").JSX.Element;
-    Header: ({ title, actions, ...props }: import("./TableHeader").TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ title, actions, description, counter, info, variant, headingTagOverride }: import("./TableHeader").TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

package/dist/list/Table.js

@@ -5,8 +5,10 @@ import Pagination from '@cloudscape-design/components/pagination';
 import Box from '@cloudscape-design/components/box';
 import TextFilter from '@cloudscape-design/components/text-filter';
 import CollectionPreferences from '@cloudscape-design/components/collection-preferences';
-import { RecordContextProvider, useResourceContext, useFieldSchema, useResourceDefinition, useGetResourceLabel, useTranslateLabel, useTranslate } from '@strato-admin/core';
+import { RecordContextProvider, useTranslateLabel, useTranslate } from '@strato-admin/ra-core';
+import { useResourceSchema, useSettings } from '@strato-admin/core';
 import { useCollection } from '../collection-hooks';
+import { useSchemaFields } from '../hooks/useSchemaFields';
 import TextField from '../field/TextField';
 import NumberField from '../field/NumberField';
 import DateField from '../field/DateField';
@@ -57,12 +59,6 @@ export const ReferenceColumn = ({ children, source, reference, link, field: Fiel
     }
     return (_jsx(ReferenceField, { reference: reference, link: link, source: source, children: children }));
 };
-const defaultPageSizeOptions = [
-    { value: 10, label: '10 items' },
-    { value: 25, label: '25 items' },
-    { value: 50, label: '50 items' },
-    { value: 100, label: '100 items' },
-];
 /**
  * The Table component provides a declarative way to build data tables with Cloudscape components
  * while integrating with React Admin's data fetching and state management.
@@ -75,24 +71,22 @@ const defaultPageSizeOptions = [
  * </Table>
  * ```
  */
-export const Table = ({ title, actions, children, include, exclude, filtering = true, filteringPlaceholder, pageSizeOptions = defaultPageSizeOptions, preferences = true, reorderable = true, defaultVisibleFields, selectionType, ...props }) => {
-    const resource = useResourceContext();
+export const Table = ({ title, description, actions, children, include, exclude, filtering = true, filteringPlaceholder, pageSizeOptions, preferences = true, reorderable = true, display, selectionType, pagination = true, ...props }) => {
     const translate = useTranslate();
+    const { listPageSizes, listPageSizeLabel } = useSettings();
+    const resolvedPageSizeOptions = pageSizeOptions ??
+        (listPageSizes && listPageSizeLabel
+            ? listPageSizes.map((value) => ({
+                value,
+                label: listPageSizeLabel(value),
+            }))
+            : undefined);
     const translateLabel = useTranslateLabel();
-    const schemaChildren = useFieldSchema();
-    const resourceDefinition = useResourceDefinition({ resource });
-    const finalSelectionType = selectionType ?? (resourceDefinition?.options?.canDelete ? 'multi' : undefined);
-    const finalChildren = React.useMemo(() => {
-        const baseChildren = children || schemaChildren;
-        let result = React.Children.toArray(baseChildren);
-        if (include) {
-            result = result.filter((child) => React.isValidElement(child) && include.includes(child.props.source));
-        }
-        else if (exclude) {
-            result = result.filter((child) => React.isValidElement(child) && !exclude.includes(child.props.source));
-        }
-        return result;
-    }, [children, schemaChildren, include, exclude]);
+    const { resource, definition, label: schemaLabel, listDisplay } = useResourceSchema();
+    const { getListFields } = useSchemaFields();
+    const finalSelectionType = selectionType ?? (definition?.options?.canDelete ? 'multi' : undefined);
+    const finalDisplay = display || listDisplay;
+    const finalChildren = React.useMemo(() => getListFields(children, { include, exclude }), [getListFields, children, include, exclude]);
     // 1. Extract columns and options before calling useCollection
     const extractedColumns = React.useMemo(() => {
         const columns = [];
@@ -130,19 +124,18 @@ export const Table = ({ title, actions, children, include, exclude, filtering =
     const defaultVisibleContent = React.useMemo(() => {
         if (extractedColumns.options.length === 0)
             return undefined;
-        if (defaultVisibleFields) {
+        if (finalDisplay) {
             // Map user-provided fields to their actual IDs
             return extractedColumns.options
                 .filter((opt) => {
                 const column = extractedColumns.columns.find((c) => c.id === opt.id);
-                return (defaultVisibleFields.includes(opt.id) ||
-                    (column?.sortingField && defaultVisibleFields.includes(column.sortingField)));
+                return finalDisplay.includes(opt.id) || (column?.sortingField && finalDisplay.includes(column.sortingField));
             })
                 .map((opt) => opt.id);
         }
         // Default to first 5 toggleable columns
         return extractedColumns.options.slice(0, 5).map((opt) => opt.id);
-    }, [extractedColumns, defaultVisibleFields]);
+    }, [extractedColumns, finalDisplay]);
     const defaultContentDisplay = React.useMemo(() => {
         if (extractedColumns.options.length === 0)
             return undefined;
@@ -153,11 +146,8 @@ export const Table = ({ title, actions, children, include, exclude, filtering =
         }));
     }, [extractedColumns.options, defaultVisibleContent]);
     const { items, paginationProps, collectionProps, filterProps, preferencesProps } = useCollection({
-        filtering: {},
-        pagination: {},
-        sorting: {},
         preferences: {
-            pageSizeOptions,
+            pageSizeOptions: resolvedPageSizeOptions,
             visibleContentOptions: !reorderable && extractedColumns.options.length > 0 ? extractedColumns.options : undefined,
             contentDisplayOptions: reorderable && extractedColumns.options.length > 0 ? extractedColumns.options : undefined,
             visibleContent: defaultVisibleContent,
@@ -177,7 +167,6 @@ export const Table = ({ title, actions, children, include, exclude, filtering =
             return preferencesProps.preferences.visibleContent?.includes(col.id);
         });
     }, [extractedColumns.columns, extractedColumns.options, preferencesProps.preferences.visibleContent, reorderable]);
-    const getResourceLabel = useGetResourceLabel();
     const tableHeader = React.useMemo(() => {
         if (title === null || title === false) {
             return undefined;
@@ -185,29 +174,40 @@ export const Table = ({ title, actions, children, include, exclude, filtering =
         if (React.isValidElement(title)) {
             return title;
         }
-        const finalTitle = title !== undefined ? title : getResourceLabel(resource, 2);
-        return _jsx(TableHeader, { title: finalTitle, actions: actions });
-    }, [title, actions, resource, getResourceLabel]);
-    return (_jsx(CloudscapeTable, { ...collectionProps, ...props, selectionType: finalSelectionType, stripedRows: preferencesProps.preferences.stripedRows, wrapLines: preferencesProps.preferences.wrapLines, columnDefinitions: columnDefinitions, columnDisplay: reorderable ? preferencesProps.preferences.contentDisplay : undefined, items: items || [], header: tableHeader, filter: filtering && (_jsx(TextFilter, { ...filterProps })), pagination: _jsx(Pagination, { ...paginationProps }), preferences: preferences === true || pageSizeOptions ? (_jsx(CollectionPreferences, { ...preferencesProps, pageSizePreference: pageSizeOptions
-                ? {
-                    options: pageSizeOptions,
-                }
-                : undefined, visibleContentPreference: !reorderable && extractedColumns.options.length > 0
-                ? {
-                    title: translate('ra.action.select_columns', { _: 'Select visible columns' }),
-                    options: [
-                        {
-                            label: translate('ra.action.select_columns', { _: 'Select visible columns' }),
-                            options: extractedColumns.options,
-                        },
-                    ],
-                }
-                : undefined, contentDisplayPreference: reorderable && extractedColumns.options.length > 0
-                ? {
-                    title: translate('ra.action.select_columns', { _: 'Select visible columns' }),
-                    options: extractedColumns.options,
-                }
-                : undefined })) : React.isValidElement(preferences) ? (preferences) : undefined }));
+        const finalTitle = title !== undefined ? title : schemaLabel;
+        return _jsx(TableHeader, { title: finalTitle, description: description, actions: actions });
+    }, [title, description, actions, schemaLabel]);
+    const finalPreferences = React.useMemo(() => {
+        if (preferences === false)
+            return undefined;
+        if (React.isValidElement(preferences))
+            return preferences;
+        // preferences is true or an object, or we have pageSizeOptions
+        if (preferences === true || resolvedPageSizeOptions) {
+            return (_jsx(CollectionPreferences, { ...preferencesProps, pageSizePreference: resolvedPageSizeOptions
+                    ? {
+                        options: resolvedPageSizeOptions,
+                    }
+                    : undefined, visibleContentPreference: !reorderable && extractedColumns.options.length > 0
+                    ? {
+                        title: translate('strato.action.select_columns', { _: 'Select visible columns' }),
+                        options: [
+                            {
+                                label: translate('strato.action.select_columns', { _: 'Select visible columns' }),
+                                options: extractedColumns.options,
+                            },
+                        ],
+                    }
+                    : undefined, contentDisplayPreference: reorderable && extractedColumns.options.length > 0
+                    ? {
+                        title: translate('strato.action.select_columns', { _: 'Select visible columns' }),
+                        options: extractedColumns.options,
+                    }
+                    : undefined }));
+        }
+        return undefined;
+    }, [preferences, resolvedPageSizeOptions, preferencesProps, reorderable, extractedColumns.options, translate]);
+    return (_jsx(CloudscapeTable, { ...collectionProps, ...props, selectionType: finalSelectionType, stripedRows: preferencesProps.preferences.stripedRows, wrapLines: preferencesProps.preferences.wrapLines, columnDefinitions: columnDefinitions, columnDisplay: reorderable ? preferencesProps.preferences.contentDisplay : undefined, items: items || [], header: tableHeader, filter: filtering && _jsx(TextFilter, { ...filterProps }), pagination: pagination === true ? _jsx(Pagination, { ...paginationProps }) : pagination || undefined, preferences: finalPreferences }));
 };
 Table.Column = Column;
 Table.NumberColumn = NumberColumn;

package/dist/list/TableHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HeaderProps } from '@cloudscape-design/components/header';
-export interface TableHeaderProps extends Omit<HeaderProps, 'children'> {
+export interface TableHeaderProps extends Pick<HeaderProps, 'variant' | 'counter' | 'actions' | 'description' | 'info' | 'headingTagOverride'> {
     title?: React.ReactNode;
 }
-export declare const TableHeader: ({ title, actions, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: ({ title, actions, description, counter, info, variant, headingTagOverride }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

package/dist/list/TableHeader.js

@@ -2,21 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useListContext, useTranslate, useLocale } from '@strato-admin/core';
+import { useListContext, useTranslate, useLocale } from '@strato-admin/ra-core';
 import { BulkDeleteButton } from '../button/BulkDeleteButton';
 import { CreateButton } from '../button/CreateButton';
-export const TableHeader = ({ title, actions, ...props }) => {
+export const TableHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }) => {
     const translate = useTranslate();
     const locale = useLocale();
-    const { total, isPending, defaultTitle } = useListContext();
+    const { defaultTitle } = useListContext();
     const headerTitle = React.useMemo(() => {
         if (title !== undefined) {
             return typeof title === 'string' ? translate(title, { _: title }) : title;
         }
         return defaultTitle;
     }, [title, defaultTitle, translate, locale]);
-    const counter = props.counter !== undefined ? props.counter : !isPending && total !== undefined ? `(${total})` : undefined;
     const headerActions = actions !== undefined ? (actions) : (_jsxs(SpaceBetween, { direction: "horizontal", size: "xs", children: [_jsx(BulkDeleteButton, {}), _jsx(CreateButton, {})] }));
-    return (_jsx(Header, { variant: "h2", ...props, actions: headerActions, counter: counter, children: headerTitle }));
+    return (_jsx(Header, { variant: variant, actions: headerActions, counter: counter, description: description, info: info, headingTagOverride: headingTagOverride, children: headerTitle }));
 };
 export default TableHeader;

package/dist/theme/ThemeManager.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useStore } from '@strato-admin/core';
+import { useStore } from '@strato-admin/ra-core';
 import { Mode, applyMode } from '@cloudscape-design/global-styles';
 export const ThemeManager = () => {
     const [theme] = useStore('theme', 'light');