@strato-admin/cloudscape 0.1.1 → 0.3.0

package/dist/defaults.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Message } from './i18n/Message';
+import { Table } from './list';
+import { DetailHub } from './detail';
+/**
+ * The framework's last-resort default values for all Admin-level configurable settings.
+ * Override any of these via the `settings` prop on <Admin>.
+ */
+export const FRAMEWORK_DEFAULTS = {
+    listComponent: Table,
+    detailComponent: DetailHub,
+    editSuccessMessage: _jsx(Message, { children: "Element updated" }),
+    deleteSuccessMessage: _jsx(Message, { children: "Element deleted" }),
+    bulkDeleteSuccessMessage: (countDeleted) => (_jsx(Message, { vars: { countDeleted }, children: '{countDeleted, plural, one {# element deleted} other {# elements deleted}}' })),
+    mutationMode: 'pessimistic',
+    createRedirect: 'list',
+    editRedirect: 'detail',
+    listPageSize: 25,
+    listPageSizes: [10, 25, 50, 100],
+    listPageSizeLabel: (pageSize) => (_jsx(Message, { vars: { pageSize }, children: '{pageSize, plural, one {# item} other {# items}}' })),
+};

package/dist/detail/Detail.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ShowBaseProps } from '@strato-admin/ra-core';
+export interface DetailProps extends ShowBaseProps {
+    /**
+     * The title of the detail view.
+     */
+    title?: string;
+    /**
+     * The description of the detail view.
+     */
+    description?: string;
+    /**
+     * Custom fields or components to display in the detail view.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom actions to display in the header.
+     */
+    actions?: React.ReactNode;
+}
+/**
+ * A detail view component that displays a single record's details.
+ * It uses the detailComponent defined in the schema (defaults to DetailHub)
+ * to organize fields into sections.
+ *
+ * @example
+ * <Detail>
+ *   <TextField source="name" />
+ *   <TextField source="description" />
+ * </Detail>
+ */
+export declare const Detail: (props: DetailProps) => import("react/jsx-runtime").JSX.Element;
+export default Detail;

package/dist/detail/Detail.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShowContextProvider, useShowController } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import DetailHub from './DetailHub';
+/**
+ * A detail view component that displays a single record's details.
+ * It uses the detailComponent defined in the schema (defaults to DetailHub)
+ * to organize fields into sections.
+ *
+ * @example
+ * <Detail>
+ *   <TextField source="name" />
+ *   <TextField source="description" />
+ * </Detail>
+ */
+export const Detail = (props) => {
+    const { children, ...rest } = props;
+    const { queryOptions, detailComponent: DetailComponent = DetailHub } = useResourceSchema(props.resource);
+    const controllerProps = useShowController({ queryOptions, ...rest });
+    return (_jsx(ShowContextProvider, { value: controllerProps, children: _jsx(DetailComponent, { ...props }) }));
+};
+export default Detail;

package/dist/detail/DetailHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { HeaderProps } from '@cloudscape-design/components/header';
+export interface DetailHeaderProps extends Pick<HeaderProps, 'variant' | 'counter' | 'actions' | 'description' | 'info' | 'headingTagOverride'> {
+    title?: React.ReactNode;
+}
+/** @deprecated Use DetailHeader instead */
+export type ShowHeaderProps = DetailHeaderProps;
+/** @deprecated Use DetailHeader instead */
+export declare const ShowHeader: (props: DetailHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailHeader: ({ title, actions, description, counter, info, variant, headingTagOverride }: DetailHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DetailHeader;

package/dist/detail/{ShowHeader.js → DetailHeader.js}

@@ -2,9 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useShowContext, useTranslate } from '@strato-admin/core';
+import { useShowContext, useTranslate } from '@strato-admin/ra-core';
 import { EditButton } from '../button/EditButton';
-export const ShowHeader = ({ title, actions, ...props }) => {
+/** @deprecated Use DetailHeader instead */
+export const ShowHeader = (props) => _jsx(DetailHeader, { ...props });
+export const DetailHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }) => {
     const translate = useTranslate();
     const { record, defaultTitle } = useShowContext();
     const headerTitle = React.useMemo(() => {
@@ -13,7 +15,7 @@ export const ShowHeader = ({ title, actions, ...props }) => {
         }
         return defaultTitle;
     }, [title, defaultTitle, translate]);
-    const headerActions = actions || (_jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: _jsx(EditButton, { record: record }) }));
-    return (_jsx(Header, { variant: "h2", ...props, actions: headerActions, children: headerTitle }));
+    const headerActions = actions || (_jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: _jsx(EditButton, { record: record, variant: "primary" }) }));
+    return (_jsx(Header, { variant: variant, actions: headerActions, description: description, counter: counter, info: info, headingTagOverride: headingTagOverride, children: headerTitle }));
 };
-export default ShowHeader;
+export default DetailHeader;

package/dist/detail/DetailHub.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { RaRecord } from '@strato-admin/ra-core';
+export interface DetailHubProps {
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    actions?: ReactNode;
+}
+/**
+ * A detail view component that organizes fields into sections based on their type.
+ * Scalar fields are grouped into a Container with KeyValuePairs, while
+ * collection fields (like ReferenceManyField) are displayed as separate sections
+ * below the main record details.
+ *
+ * It also renders the DetailHeader with the record title and actions (like Edit).
+ *
+ * @example
+ * <DetailHub />
+ *
+ * @example
+ * <DetailHub title="Custom Title">
+ *   <KeyValuePairs columns={3} />
+ *   <ReferenceManyField reference="comments" target="post_id" />
+ * </DetailHub>
+ */
+export declare const DetailHub: <RecordType extends RaRecord = RaRecord>(props: DetailHubProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DetailHub;

package/dist/detail/DetailHub.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, isValidElement } from 'react';
+import Container from '@cloudscape-design/components/container';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useTranslate, useShowContext } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
+import { useSchemaFields } from '../hooks/useSchemaFields';
+import KeyValuePairs from './KeyValuePairs';
+import DetailHeader from './DetailHeader';
+/**
+ * A detail view component that organizes fields into sections based on their type.
+ * Scalar fields are grouped into a Container with KeyValuePairs, while
+ * collection fields (like ReferenceManyField) are displayed as separate sections
+ * below the main record details.
+ *
+ * It also renders the DetailHeader with the record title and actions (like Edit).
+ *
+ * @example
+ * <DetailHub />
+ *
+ * @example
+ * <DetailHub title="Custom Title">
+ *   <KeyValuePairs columns={3} />
+ *   <ReferenceManyField reference="comments" target="post_id" />
+ * </DetailHub>
+ */
+export const DetailHub = (props) => {
+    const { title, description, children, actions } = props;
+    const { record, resource, isLoading } = useShowContext();
+    const translate = useTranslate();
+    const { label, detailTitle, detailDescription } = useResourceSchema();
+    const { getDetailFields } = useSchemaFields();
+    const constructedTitle = useMemo(() => label || translate(`resources.${resource}.name`, { smart_count: 1 }), [label, translate, resource]);
+    const finalTitle = useMemo(() => {
+        if (title)
+            return title;
+        if (typeof detailTitle === 'function')
+            return detailTitle(record);
+        if (isValidElement(detailTitle))
+            return detailTitle;
+        if (detailTitle)
+            return translate(detailTitle, record);
+        return constructedTitle;
+    }, [record, title, detailTitle, translate, constructedTitle]);
+    const finalDescription = useMemo(() => {
+        if (description)
+            return description;
+        if (typeof detailDescription === 'function')
+            return detailDescription(record);
+        if (isValidElement(detailDescription))
+            return detailDescription;
+        if (detailDescription)
+            return translate(detailDescription, record);
+        return undefined;
+    }, [record, description, detailDescription, translate]);
+    const { scalarFields, collectionFields } = useMemo(() => getDetailFields(children), [getDetailFields, children]);
+    if (isLoading || !record) {
+        return null;
+    }
+    const hasScalarFields = scalarFields.length > 0;
+    return (_jsxs(SpaceBetween, { size: "l", children: [_jsx(DetailHeader, { title: finalTitle, description: finalDescription, actions: actions }), hasScalarFields && (_jsx(Container, { children: React.Children.count(children) > 0 ? (_jsx(SpaceBetween, { size: "l", children: scalarFields })) : (_jsx(KeyValuePairs, {})) })), collectionFields] }));
+};
+export default DetailHub;

package/dist/detail/KeyValuePairs.d.ts

@@ -1,9 +1,15 @@
 import React from 'react';
 import { type KeyValuePairsProps as CloudscapeKeyValuePairsProps } from '@cloudscape-design/components/key-value-pairs';
-import { type RaRecord } from '@strato-admin/core';
+import { type RaRecord } from '@strato-admin/ra-core';
 export interface KeyValuePairsProps extends Partial<Omit<CloudscapeKeyValuePairsProps, 'items'>> {
     children?: React.ReactNode;
+    /**
+     * List of field sources to include in the key-value pairs list.
+     */
     include?: string[];
+    /**
+     * List of field sources to exclude from the key-value pairs list.
+     */
     exclude?: string[];
     columns?: number;
     minColumnWidth?: number;

package/dist/detail/KeyValuePairs.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import CloudscapeKeyValuePairs from '@cloudscape-design/components/key-value-pairs';
-import { useResourceContext, useRecordContext, FieldTitle, RecordContextProvider, useFieldSchema, } from '@strato-admin/core';
+import { useRecordContext, FieldTitle, RecordContextProvider } from '@strato-admin/ra-core';
+import { useResourceSchema } from '@strato-admin/core';
 import TextField from '../field/TextField';
 /**
  * KeyValuePairs.Field is a helper component to define a field in a KeyValuePairs component.
@@ -28,20 +29,25 @@ export const KeyValueField = ({ children, source, field: FieldComponent }) => {
  */
 export const KeyValuePairs = ({ children, include, exclude, columns = 3, // Default to 3 columns if not specified
 minColumnWidth, ...props }) => {
-    const resource = useResourceContext();
     const record = useRecordContext();
-    const schemaChildren = useFieldSchema();
+    const { resource, fieldSchema: schemaChildren, detailInclude, detailExclude } = useResourceSchema();
     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));
+        const finalInclude = include || detailInclude;
+        const finalExclude = exclude || detailExclude;
+        if (finalInclude) {
+            result = result.filter((child) => React.isValidElement(child) && finalInclude.includes(child.props.source));
         }
-        else if (exclude) {
-            result = result.filter((child) => React.isValidElement(child) && !exclude.includes(child.props.source));
+        else {
+            // Filter out fields marked as collection fields by default
+            result = result.filter((child) => React.isValidElement(child) && !child.type.isCollectionField);
+            if (finalExclude) {
+                result = result.filter((child) => React.isValidElement(child) && !finalExclude.includes(child.props.source));
+            }
         }
         return result;
-    }, [children, schemaChildren, include, exclude]);
+    }, [children, schemaChildren, include, exclude, detailInclude, detailExclude]);
     const items = React.Children.map(finalChildren, (child) => {
         if (!React.isValidElement(child)) {
             return null;

package/dist/detail/index.d.ts

@@ -1,3 +1,4 @@
 export * from './KeyValuePairs';
-export * from './Show';
-export * from './ShowHeader';
+export * from './Detail';
+export * from './DetailHub';
+export * from './DetailHeader';

package/dist/detail/index.js

@@ -1,3 +1,4 @@
 export * from './KeyValuePairs';
-export * from './Show';
-export * from './ShowHeader';
+export * from './Detail';
+export * from './DetailHub';
+export * from './DetailHeader';

package/dist/edit/Edit.d.ts

@@ -1,19 +1,14 @@
 import React from 'react';
-import { type RaRecord } from '@strato-admin/core';
-export interface EditProps<_RecordType extends RaRecord = RaRecord> {
+import { type RaRecord, type EditBaseProps } from '@strato-admin/ra-core';
+export interface EditProps<RecordType extends RaRecord = RaRecord, ErrorType = Error> extends EditBaseProps<RecordType, ErrorType> {
     children?: React.ReactNode;
-    inputSchema?: React.ReactNode;
-    title?: React.ReactNode;
+    title?: React.ReactNode | ((record: RecordType) => React.ReactNode);
+    description?: React.ReactNode | ((record: RecordType) => React.ReactNode);
     actions?: React.ReactNode;
-    resource?: string;
-    id?: any;
-    mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
-    mutationOptions?: any;
-    queryOptions?: any;
-    redirect?: any;
-    transform?: any;
     include?: string[];
     exclude?: string[];
+    saveButtonLabel?: string;
+    redirect?: false | 'list' | 'detail';
 }
 /**
  * An Edit component that provides record context and a Cloudscape Container.
@@ -28,15 +23,9 @@ export interface EditProps<_RecordType extends RaRecord = RaRecord> {
  * @example
  * // Using InputSchema from context
  * <Edit include={['name', 'price']} />
- *
- * @example
- * // Passing a custom input schema
- * <Edit inputSchema={<InputSchema>...</InputSchema>}>
- *   <Form />
- * </Edit>
  */
 export declare const Edit: {
-    <RecordType extends RaRecord = any>({ children, inputSchema, title, actions, include, exclude, ...props }: EditProps<RecordType>): import("react/jsx-runtime").JSX.Element;
-    Header: ({ title, actions, ...props }: import("./EditHeader").EditHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    <RecordType extends RaRecord = any>({ children, title, actions, description, include, exclude, redirect, saveButtonLabel, ...props }: EditProps<RecordType>): import("react/jsx-runtime").JSX.Element;
+    Header: ({ title, actions, description, counter, info, variant, headingTagOverride }: import("./EditHeader").EditHeaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Edit;

package/dist/edit/Edit.js

@@ -1,15 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { EditBase, useEditContext, ResourceSchemaProvider } from '@strato-admin/core';
+import React from 'react';
+import { EditBase, useEditContext, useNotify, useRedirect } from '@strato-admin/ra-core';
+import { ResourceSchemaProvider, useResourceSchema, useConstructedPageTitle, useSettingValue, } from '@strato-admin/core';
 import Container from '@cloudscape-design/components/container';
 import { EditHeader } from './EditHeader';
 import Form from '../form/Form';
-const EditUI = ({ children, resource, inputSchema, title, actions, include, exclude, }) => {
+const EditUI = ({ children, title, actions, description, include, exclude, saveButtonLabel, }) => {
     const { record, isLoading } = useEditContext();
+    const { label, editTitle, editDescription } = useResourceSchema();
+    const constructedTitle = useConstructedPageTitle('edit', label);
+    const finalTitle = React.useMemo(() => {
+        if (isLoading || !record) {
+            return '';
+        }
+        const resolvedTitle = title ?? editTitle ?? constructedTitle;
+        if (typeof resolvedTitle === 'function') {
+            return resolvedTitle(record);
+        }
+        return resolvedTitle;
+    }, [isLoading, record, title, editTitle, constructedTitle]);
+    const finalDescription = React.useMemo(() => {
+        if (isLoading || !record) {
+            return '';
+        }
+        const resolvedDescription = description ?? editDescription;
+        if (typeof resolvedDescription === 'function') {
+            return resolvedDescription(record);
+        }
+        return resolvedDescription;
+    }, [isLoading, record, description, editDescription]);
     if (isLoading || !record) {
         return null;
     }
-    const finalChildren = children || _jsx(Form, { include: include, exclude: exclude });
-    return (_jsx(ResourceSchemaProvider, { resource: resource, inputSchema: inputSchema, children: _jsx(Container, { header: _jsx(EditHeader, { title: title, actions: actions }), children: finalChildren }) }));
+    const finalSaveButtonLabel = saveButtonLabel; // || <Message>Save</Message>
+    const finalChildren = children || _jsx(Form, { include: include, exclude: exclude, saveButtonLabel: finalSaveButtonLabel });
+    return (_jsx(Container, { header: _jsx(EditHeader, { title: finalTitle, description: finalDescription, actions: actions }), children: finalChildren }));
 };
 /**
  * An Edit component that provides record context and a Cloudscape Container.
@@ -24,15 +49,26 @@ const EditUI = ({ children, resource, inputSchema, title, actions, include, excl
  * @example
  * // Using InputSchema from context
  * <Edit include={['name', 'price']} />
- *
- * @example
- * // Passing a custom input schema
- * <Edit inputSchema={<InputSchema>...</InputSchema>}>
- *   <Form />
- * </Edit>
  */
-export const Edit = ({ children, inputSchema, title, actions, include, exclude, ...props }) => {
-    return (_jsx(EditBase, { ...props, children: _jsx(EditUI, { resource: props.resource, title: title, actions: actions, include: include, exclude: exclude, inputSchema: inputSchema, children: children }) }));
+export const Edit = ({ children, title, actions, description, include, exclude, redirect, saveButtonLabel, ...props }) => {
+    const { queryOptions, editTitle } = useResourceSchema(props.resource);
+    const resolve = useSettingValue();
+    const resolvedRedirect = resolve(redirect, 'editRedirect');
+    const editSuccessMessage = resolve(undefined, 'editSuccessMessage');
+    const notify = useNotify();
+    const redirectFn = useRedirect();
+    const mutationOptions = React.useMemo(() => {
+        if (!editSuccessMessage || props.mutationOptions?.onSuccess)
+            return props.mutationOptions;
+        return {
+            ...props.mutationOptions,
+            onSuccess: (data) => {
+                notify(editSuccessMessage, { type: 'info' });
+                redirectFn(resolvedRedirect ?? 'detail', props.resource ?? '', data.id, data);
+            },
+        };
+    }, [editSuccessMessage, props.mutationOptions, props.resource, notify, redirectFn, resolvedRedirect]);
+    return (_jsx(EditBase, { redirect: resolvedRedirect, queryOptions: queryOptions, ...props, mutationOptions: mutationOptions, children: _jsx(ResourceSchemaProvider, { resource: props.resource, children: _jsx(EditUI, { title: title ?? editTitle ?? undefined, actions: actions, description: description, include: include, exclude: exclude, saveButtonLabel: saveButtonLabel, children: children }) }) }));
 };
 Edit.Header = EditHeader;
 export default Edit;

package/dist/edit/EditHeader.d.ts

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

package/dist/edit/EditHeader.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useEditContext, useTranslate } from '@strato-admin/core';
-export const EditHeader = ({ title, actions, ...props }) => {
+import { useEditContext, useTranslate } from '@strato-admin/ra-core';
+import { DeleteButton } from '../button/DeleteButton';
+export const EditHeader = ({ title, actions, description, counter, info, variant = 'h2', headingTagOverride }) => {
     const translate = useTranslate();
     const { defaultTitle } = useEditContext();
     const headerTitle = React.useMemo(() => {
@@ -12,7 +13,7 @@ export const EditHeader = ({ title, actions, ...props }) => {
         }
         return defaultTitle;
     }, [title, defaultTitle, translate]);
-    const headerActions = actions || (_jsx(SpaceBetween, { direction: "horizontal", size: "xs" }));
-    return (_jsx(Header, { variant: "h2", ...props, actions: headerActions, children: headerTitle }));
+    const headerActions = actions || (_jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: _jsx(DeleteButton, {}) }));
+    return (_jsx(Header, { variant: variant, actions: headerActions, description: description, counter: counter, info: info, headingTagOverride: headingTagOverride, children: headerTitle }));
 };
 export default EditHeader;

package/dist/field/ArrayField.d.ts

@@ -1,10 +1,11 @@
-import { type RaRecord } from '@strato-admin/core';
+import React from 'react';
+import { type RaRecord } from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
 export interface ArrayFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
     /**
-     * Thecomponents to render for each item in the array.
+     * The components to render for each item in the array.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * Number of items per page if pagination is used within the field.
      */
@@ -15,15 +16,30 @@ export interface ArrayFieldProps<RecordType extends RaRecord = RaRecord> extends
  * and ResourceContextProvider initialized with the array data and resource name.
  *
  * This allows using components that expect a ListContext or ResourceContext
- * (like DataTable) to display nested arrays within a record.
+ * (like Table) to display nested arrays within a record.
  *
  * @example
- * <ArrayField source="products" resource="products">
- *   <DataTable variant="embedded">
- *     <DataTable.Col source="title" label="Title" />
- *     <DataTable.NumberCol source="price" label="Price" />
- *   </DataTable>
+ * <ArrayField source="items" label="Items">
+ *   <ReferenceField source="product_id" reference="products" label="Product" />
+ *   <NumberField source="quantity" label="Quantity" />
+ *   <NumberField source="unit_price" label="Price" options={{ style: 'currency', currency: 'USD' }} />
  * </ArrayField>
+ *
+ * NOTE ON FILTERING:
+ * Client-side filtering via useList (used by the implicit Table) only searches
+ * properties directly present in the array items.
+ *
+ * If you have a <ReferenceField> child, filtering by the referenced record's
+ * name (e.g. Product Name) will NOT work by default because that data is fetched
+ * asynchronously and is not in the local array.
+ *
+ * To enable "Deep Filtering", you can:
+ * 1. Denormalize your data at the API level to include the labels in the nested items.
+ * 2. Augment the 'data' array before passing it to useList by pre-fetching labels
+ *    for all referenced IDs and injecting them into the items.
  */
-export declare const ArrayField: <RecordType extends RaRecord = any>(props: ArrayFieldProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayField: {
+    <RecordType extends RaRecord = any>(props: ArrayFieldProps<RecordType>): import("react/jsx-runtime").JSX.Element;
+    isCollectionField: boolean;
+};
 export default ArrayField;

package/dist/field/ArrayField.js

@@ -1,22 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRecordContext, useList, ListContextProvider, ResourceContextProvider } from '@strato-admin/core';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useRecordContext, useList, ListContextProvider, ResourceContextProvider, } from '@strato-admin/ra-core';
+import Table from '../list/Table';
 /**
  * ArrayField component that wraps its children with a ListContextProvider
  * and ResourceContextProvider initialized with the array data and resource name.
  *
  * This allows using components that expect a ListContext or ResourceContext
- * (like DataTable) to display nested arrays within a record.
+ * (like Table) to display nested arrays within a record.
  *
  * @example
- * <ArrayField source="products" resource="products">
- *   <DataTable variant="embedded">
- *     <DataTable.Col source="title" label="Title" />
- *     <DataTable.NumberCol source="price" label="Price" />
- *   </DataTable>
+ * <ArrayField source="items" label="Items">
+ *   <ReferenceField source="product_id" reference="products" label="Product" />
+ *   <NumberField source="quantity" label="Quantity" />
+ *   <NumberField source="unit_price" label="Price" options={{ style: 'currency', currency: 'USD' }} />
  * </ArrayField>
+ *
+ * NOTE ON FILTERING:
+ * Client-side filtering via useList (used by the implicit Table) only searches
+ * properties directly present in the array items.
+ *
+ * If you have a <ReferenceField> child, filtering by the referenced record's
+ * name (e.g. Product Name) will NOT work by default because that data is fetched
+ * asynchronously and is not in the local array.
+ *
+ * To enable "Deep Filtering", you can:
+ * 1. Denormalize your data at the API level to include the labels in the nested items.
+ * 2. Augment the 'data' array before passing it to useList by pre-fetching labels
+ *    for all referenced IDs and injecting them into the items.
  */
 export const ArrayField = (props) => {
-    const { source, resource, children, perPage = 10 } = props;
+    const { source, resource, children, perPage = 10, label = props.source } = props;
     const record = useRecordContext();
     const data = (source && record?.[source]) || [];
     const targetResource = resource || source || '';
@@ -25,6 +39,20 @@ export const ArrayField = (props) => {
         resource: targetResource,
         perPage,
     });
-    return (_jsx(ResourceContextProvider, { value: targetResource, children: _jsx(ListContextProvider, { value: listContext, children: children }) }));
+    return (_jsx(ResourceContextProvider, { value: targetResource, children: _jsx(ListContextProvider, { value: listContext, children: _jsx(ArrayFieldUI, { title: label, children: children }) }) }));
+};
+const ArrayFieldUI = ({ children, title }) => {
+    if (!children)
+        return null;
+    const childrenArray = React.Children.toArray(children);
+    // Check if children already contain a Table
+    const hasTable = childrenArray.some((child) => React.isValidElement(child) && (child.type === Table || child.type.displayName === 'Table'));
+    if (hasTable) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // If children are provided but no Table, wrap them in a Table.
+    // This supports the shorthand <ArrayField><TextField source="foo" /></ArrayField>
+    return (_jsx(Table, { variant: "embedded", title: title, selectionType: undefined, actions: null, children: children }));
 };
 export default ArrayField;
+ArrayField.isCollectionField = true;

package/dist/field/BadgeField.d.ts

@@ -1,5 +1,5 @@
 import { type BadgeProps } from '@cloudscape-design/components/badge';
-import { type RaRecord } from '@strato-admin/core';
+import { type RaRecord } from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
 export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
     /**

package/dist/field/BadgeField.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Badge from '@cloudscape-design/components/badge';
-import { useFieldValue, useRecordContext } from '@strato-admin/core';
+import { useFieldValue, useRecordContext } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 const BadgeField = (props) => {
     const { source, record: recordProp, emptyText, link, color = 'grey' } = props;

package/dist/field/BooleanField.d.ts

@@ -1,4 +1,4 @@
-import { RaRecord } from '@strato-admin/core';
+import { RaRecord } from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
 export type BooleanFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
     /**

package/dist/field/BooleanField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import StatusIndicator from '@cloudscape-design/components/status-indicator';
-import { useFieldValue, useRecordContext, useTranslate } from '@strato-admin/core';
+import { useFieldValue, useRecordContext, useTranslate } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 const BooleanField = (props) => {
     const { source, record: recordProp, trueLabel, falseLabel, showLabel = false, link } = props;
@@ -8,7 +8,7 @@ const BooleanField = (props) => {
     const value = useFieldValue({ source: source, record });
     const translate = useTranslate();
     const isTrue = !!value;
-    const content = isTrue ? (_jsx(StatusIndicator, { type: "success", colorOverride: "green", children: showLabel ? (trueLabel ?? translate('ra.boolean.true', { _: 'Yes' })) : null })) : (_jsx(StatusIndicator, { type: "not-started", children: showLabel ? (falseLabel ?? translate('ra.boolean.false', { _: 'No' })) : null }));
+    const content = isTrue ? (_jsx(StatusIndicator, { type: "success", colorOverride: "green", children: showLabel ? (trueLabel ?? translate('strato.boolean.true', { _: 'Yes' })) : null })) : (_jsx(StatusIndicator, { type: "not-started", children: showLabel ? (falseLabel ?? translate('strato.boolean.false', { _: 'No' })) : null }));
     return _jsx(RecordLink, { link: link, children: content });
 };
 export default BooleanField;

package/dist/field/CurrencyField.d.ts

@@ -1,4 +1,4 @@
-import { type RaRecord } from '@strato-admin/core';
+import { type RaRecord } from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
 export type CurrencyFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
     /**

package/dist/field/CurrencyField.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useFieldValue, useRecordContext, useLocale } from '@strato-admin/core';
+import { useFieldValue, useRecordContext, useLocale } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 const CurrencyField = (props) => {
     const { source, record: recordProp, emptyText, options, locales, link, currency } = props;

package/dist/field/DateField.d.ts

@@ -1,4 +1,4 @@
-import { type RaRecord } from '@strato-admin/core';
+import { type RaRecord } from '@strato-admin/ra-core';
 import { type FieldProps } from './types';
 export type DateFieldProps<RecordType extends RaRecord = RaRecord> = FieldProps<RecordType> & {
     /**