@headless-adminapp/fluent 0.0.17-alpha.40 → 0.0.17-alpha.42

package/DataGrid/GridListContainer.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridListContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
@@ -14,7 +15,6 @@ const react_1 = require("react");
 const uuid_1 = require("uuid");
 const RecordCard_1 = require("../PageEntityForm/RecordCard");
 const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
-const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         '&:hover': {

package/DataGrid/GridTableContainer.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
@@ -15,7 +16,6 @@ const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
-const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -0,0 +1,15 @@
+import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { ViewColumn } from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+import { UniqueRecord } from '../types';
+interface TableCellChoiceProps {
+    column: ViewColumn;
+    schema: Schema;
+    record: UniqueRecord;
+    value: unknown;
+    attribute: ChoiceAttribute<string | number>;
+    formattedValue: string;
+    width: number;
+}
+export declare function TableCellChoice(props: TableCellChoiceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/TableCell/TableCellChoice.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellChoice = TableCellChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const color_1 = require("@headless-adminapp/app/utils/color");
+const react_1 = require("react");
+const TableCellBase_1 = require("./TableCellBase");
+function TableCellChoice(props) {
+    const bgColor = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!props.value || !props.attribute.options) {
+            return;
+        }
+        return (_a = props.attribute.options.find((option) => option.value === props.value)) === null || _a === void 0 ? void 0 : _a.color;
+    }, [props.attribute.options, props.value]);
+    const color = (0, react_1.useMemo)(() => {
+        if (!bgColor) {
+            return;
+        }
+        return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+    }, [bgColor]);
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width: props.width,
+            minWidth: props.width,
+            maxWidth: props.width,
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "small", style: { backgroundColor: bgColor, color }, children: props.formattedValue }) }));
+}

package/DataGrid/types.d.ts

@@ -0,0 +1,5 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
+    __uuid: string;
+};

package/DataGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/useTableColumns.d.ts

@@ -1,8 +1,4 @@
-import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
-export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
-    __uuid: string;
-};
+import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;

package/DataGrid/useTableColumns.js

@@ -21,6 +21,7 @@ const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
 const ActionCell_1 = require("./ActionCell");
+const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -74,7 +75,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
-    const { currency, dateFormats, timezone } = (0, locale_1.useLocale)();
+    const { currency, dateFormats, timezone, timeFormats } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -206,14 +207,18 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                     const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
                         currency: currency.currency,
                         dateFormat: dateFormats.short,
+                        timeFormat: timeFormats.short,
                         timezone,
                     })) !== null && _c !== void 0 ? _c : '';
+                    if (column.plainText) {
+                        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+                    }
                     if (column.component) {
                         const Component = componentStore_1.componentStore.getComponent(column.component);
                         if (!Component) {
                             throw new Error(`Component with name ${column.component} not found`);
                         }
-                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue }));
+                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
                     }
                     if (schema.primaryAttribute === column.name) {
                         const path = routeResolver({
@@ -247,6 +252,8 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                                 return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
                             }
                             return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
+                        case 'choice':
+                            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
                     }
                     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
                 },
@@ -260,6 +267,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         columnWidths,
         currency.currency,
         dateFormats.short,
+        timeFormats.short,
         disableColumnFilter,
         disableColumnResize,
         disableColumnSort,

package/PageBoard/BoardColumn.d.ts

@@ -0,0 +1,5 @@
+import { BoardColumnConfig } from '@headless-adminapp/app/board/types';
+export type BoardColumnProps = {
+    config: BoardColumnConfig;
+};
+export declare function BoardColumn(props: BoardColumnProps): import("react/jsx-runtime").JSX.Element;

package/PageBoard/BoardColumn.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumn = BoardColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BoardColumnProvider_1 = require("@headless-adminapp/app/board/BoardColumnProvider");
+const BoardColumnUI_1 = require("./BoardColumnUI");
+function BoardColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(BoardColumnProvider_1.BoardColumnProvider, { config: props.config, children: (0, jsx_runtime_1.jsx)(BoardColumnUI_1.BoardColumnUI, {}) }));
+}

package/PageBoard/BoardColumnCard.d.ts

@@ -0,0 +1,12 @@
+import { BoardColumnCardPreviewFC } from '@headless-adminapp/app/board/types';
+import { Schema } from '@headless-adminapp/core/schema';
+interface BoardColumnCardProps {
+    record: Record<string, unknown>;
+    index: number;
+    canDrag: boolean;
+    columnId: string;
+    PreviewComponent: BoardColumnCardPreviewFC;
+    schema: Schema;
+}
+export declare function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }: BoardColumnCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageBoard/BoardColumnCard.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumnCard = BoardColumnCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const react_dnd_1 = require("react-dnd");
+function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
+    const ref = (0, react_1.useRef)(null);
+    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
+        type: columnId,
+        canDrag,
+        item: () => {
+            return { id: record[schema.idAttribute], columnId, record };
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    drag(ref);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+            display: 'flex',
+            background: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            boxShadow: react_components_1.tokens.shadow4,
+            opacity: isDragging ? 0.5 : 1,
+        }, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));
+}

package/PageBoard/BoardColumnUI.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const BoardColumnUI: FC;

package/PageBoard/BoardColumnUI.js

@@ -0,0 +1,78 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumnUI = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const context_1 = require("@headless-adminapp/app/board/context");
+const hooks_1 = require("@headless-adminapp/app/board/hooks");
+const hooks_2 = require("@headless-adminapp/app/command/hooks");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
+const context_2 = require("@headless-adminapp/app/mutable/context");
+const react_1 = require("react");
+const react_dnd_1 = require("react-dnd");
+const BoardColumnCard_1 = require("./BoardColumnCard");
+const BoardingColumnCardLoading_1 = require("./BoardingColumnCardLoading");
+const BoardColumnUI = () => {
+    const data = (0, hooks_1.useBoardColumnData)();
+    const dataState = (0, hooks_1.useBoardColumnDataState)();
+    const fetchNextPage = (0, context_2.useContextSelector)(context_1.BoardColumnContext, (state) => state.fetchNextPage);
+    const { columnId, acceptSourceIds, title, updateFn } = (0, hooks_1.useBoardColumnConfig)();
+    const { PreviewComponent, schema } = (0, hooks_1.useBoardConfig)();
+    const baseContext = (0, hooks_2.useBaseCommandHandlerContext)();
+    const ref = (0, react_1.useRef)(null);
+    const [{ handlerId, over, canDrop }, drop] = (0, react_dnd_1.useDrop)({
+        accept: acceptSourceIds,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+                over: monitor.isOver(),
+                canDrop: monitor.canDrop(),
+            };
+        },
+        drop: (item) => {
+            (() => __awaiter(void 0, void 0, void 0, function* () {
+                yield (updateFn === null || updateFn === void 0 ? void 0 : updateFn(Object.assign(Object.assign({}, baseContext), { primaryControl: {
+                        logicalName: schema.logicalName,
+                        id: item.id,
+                        schema: schema,
+                    } })));
+            }))().catch(console.error);
+        },
+    });
+    drop(ref);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            outline: over
+                ? `2px dashed ${react_components_1.tokens.colorBrandBackground}`
+                : canDrop
+                    ? `2px dashed ${react_components_1.tokens.colorNeutralStroke1}`
+                    : 'none',
+            outlineOffset: -5,
+            paddingTop: react_components_1.tokens.spacingVerticalS,
+        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }), (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, onRequestMore: () => {
+                    fetchNextPage();
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: react_components_1.tokens.spacingHorizontalM,
+                        padding: react_components_1.tokens.spacingHorizontalS,
+                    }, children: [data === null || data === void 0 ? void 0 : data.records.map((record, index) => ((0, jsx_runtime_1.jsx)(BoardColumnCard_1.BoardColumnCard, { record: record, index: index, columnId: columnId, canDrag: acceptSourceIds.length > 0, PreviewComponent: PreviewComponent, schema: schema }, index))), dataState.isFetching &&
+                            Array.from({ length: 5 }).map((_, index) => ((0, jsx_runtime_1.jsx)(BoardingColumnCardLoading_1.BoardingColumnCardLoading, {}, index)))] }) })] }));
+};
+exports.BoardColumnUI = BoardColumnUI;

package/PageBoard/BoardingColumnCardLoading.d.ts

@@ -0,0 +1 @@
+export declare function BoardingColumnCardLoading(): import("react/jsx-runtime").JSX.Element;

package/PageBoard/BoardingColumnCardLoading.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardingColumnCardLoading = BoardingColumnCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function BoardingColumnCardLoading() {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Skeleton, { style: {
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            padding: react_components_1.tokens.spacingHorizontalM,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: react_components_1.tokens.spacingVerticalM,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                    height: 16,
+                    width: '100%',
+                } }), (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                    height: 16,
+                    width: '50%',
+                } })] }));
+}

package/PageBoard/Header.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface HeaderProps {
+    title: string;
+    subtitle: string;
+}
+export declare const Header: FC<HeaderProps>;
+export {};

package/PageBoard/Header.js

@@ -0,0 +1,40 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// eslint-disable-next-line simple-import-sort/imports
+const react_components_1 = require("@fluentui/react-components");
+const react_query_1 = require("@tanstack/react-query");
+const hooks_1 = require("@headless-adminapp/app/board/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const Header = ({ title, subtitle }) => {
+    const client = (0, react_query_1.useQueryClient)();
+    const schema = (0, hooks_1.useBoardSchema)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const refresh = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield client.invalidateQueries({
+            queryKey: ['data', 'retriveRecords', schema.logicalName],
+        });
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: react_components_1.tokens.spacingHorizontalM,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }));
+};
+exports.Header = Header;

package/PageBoard/PageBoard.d.ts

@@ -0,0 +1,7 @@
+import { BoardConfig } from '@headless-adminapp/app/board/types';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+interface PageBoardProps<S extends SchemaAttributes = SchemaAttributes> {
+    config: BoardConfig<S>;
+}
+export declare function PageBoard<S extends SchemaAttributes = SchemaAttributes>(props: PageBoardProps<S>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageBoard/PageBoard.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageBoard = PageBoard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const context_1 = require("@headless-adminapp/app/board/context");
+const context_2 = require("@headless-adminapp/app/mutable/context");
+const react_1 = require("react");
+const react_dnd_1 = require("react-dnd");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const BoardColumn_1 = require("./BoardColumn");
+const Header_1 = require("./Header");
+function PageBoard(props) {
+    const contextValue = (0, context_2.useCreateContextStore)({
+        config: props.config,
+        searchText: '',
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            config: props.config,
+            searchText: '',
+        });
+    }, [contextValue, props.config]);
+    return ((0, jsx_runtime_1.jsx)(context_1.BoardContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    gap: react_components_1.tokens.spacingVerticalM,
+                    padding: react_components_1.tokens.spacingHorizontalL,
+                    background: react_components_1.tokens.colorNeutralBackground3,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: react_components_1.tokens.colorNeutralBackground1,
+                                borderRadius: react_components_1.tokens.borderRadiusLarge,
+                                paddingBlock: react_components_1.tokens.spacingVerticalM,
+                                paddingInline: react_components_1.tokens.spacingHorizontalM,
+                                gap: react_components_1.tokens.spacingVerticalM,
+                                boxShadow: react_components_1.tokens.shadow4,
+                            }, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { title: props.config.title, subtitle: props.config.description }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flex: 1,
+                            marginInline: -6,
+                            marginTop: react_components_1.tokens.spacingVerticalM,
+                        }, children: props.config.columnConfigs.map((config) => ((0, jsx_runtime_1.jsx)(BoardColumn_1.BoardColumn, { config: config }, config.columnId))) })] }) }) }));
+}

package/PageBoard/index.d.ts

@@ -0,0 +1 @@
+export { PageBoard } from './PageBoard';

package/PageBoard/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageBoard = void 0;
+var PageBoard_1 = require("./PageBoard");
+Object.defineProperty(exports, "PageBoard", { enumerable: true, get: function () { return PageBoard_1.PageBoard; } });

package/PageEntityForm/RelatedViewSelector.d.ts

@@ -2,8 +2,6 @@ import { Localized } from '@headless-adminapp/core/types';
 export interface RelatedItemInfo {
     key: string;
     logicalName: string;
-    label: string;
-    localizedLabels?: Localized<string>;
     pluralLabel: string;
     localizedPluralLabels?: Localized<string>;
     attributeName: string;

package/PageEntityForm/RelatedViewSelector.js

@@ -10,7 +10,36 @@ const utils_1 = require("@headless-adminapp/core/attributes/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
-function getRelatedItems(currentSchema, schemas) {
+function getRelatedItems(currentSchema, schemas, relatedItems) {
+    if (relatedItems === null) {
+        return [];
+    }
+    if (relatedItems) {
+        return relatedItems.map((item) => {
+            var _a, _b;
+            const schema = schemas[item.logicalName];
+            if (!schema) {
+                throw new Error(`Schema not found: ${item.logicalName}`);
+            }
+            if (!schema.attributes[item.attributeName]) {
+                throw new Error(`Attribute not found: ${item.logicalName}.${item.attributeName}`);
+            }
+            const attribute = schema.attributes[item.attributeName];
+            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+                throw new Error(`Attribute is not a lookup: ${item.logicalName}.${item.attributeName}`);
+            }
+            if (attribute.entity !== currentSchema.logicalName) {
+                throw new Error(`Attribute entity does not match: ${item.logicalName}.${item.attributeName}`);
+            }
+            return {
+                key: `${schema.logicalName}.${item.attributeName}`,
+                logicalName: schema.logicalName,
+                attributeName: item.attributeName,
+                pluralLabel: (_a = item.pluralLabel) !== null && _a !== void 0 ? _a : schema.pluralLabel,
+                localizedPluralLabels: (_b = item.localizedPluralLabels) !== null && _b !== void 0 ? _b : schema.localizedPluralLabels,
+            };
+        });
+    }
     return Object.values(schemas)
         .map((s) => {
         return Object.entries(s.attributes)
@@ -35,11 +64,9 @@ function getRelatedItems(currentSchema, schemas) {
             return {
                 key: `${s.logicalName}.${item.key}`,
                 logicalName: s.logicalName,
-                label: s.label,
-                localizedLabels: s.localizedLabels,
+                attributeName: item.key,
                 pluralLabel: (_a = item.attribute.relatedLabel) !== null && _a !== void 0 ? _a : s.pluralLabel,
                 localizedPluralLabels: (_b = item.attribute.localizedRelatedLabel) !== null && _b !== void 0 ? _b : s.localizedPluralLabels,
-                attributeName: item.key,
             };
         });
     })
@@ -47,10 +74,11 @@ function getRelatedItems(currentSchema, schemas) {
 }
 function RelatedViewSelector(props) {
     const schema = (0, hooks_1.useDataFormSchema)();
+    const formConfig = (0, hooks_1.useSelectedForm)();
     const { schemas } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const { language } = (0, locale_1.useLocale)();
-    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas), [schema, schemas]);
+    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
     if (!data.length) {
         return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.40",
+  "version": "0.0.17-alpha.42",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "5141e4c378ed0b2aac011927e4d6c10c797624e0"
+  "gitHead": "c5b091139a9d3cf973f69f848b5df0a8ee8c63e7"
 }