@headless-adminapp/fluent 0.0.17-alpha.52 → 0.0.17-alpha.53

package/PageEntityForm/RecordCard.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecordCard = RecordCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const utils_1 = require("@headless-adminapp/app/utils");
-const color_1 = require("@headless-adminapp/app/utils/color");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Body1, Body1Strong, Caption1, makeStyles, mergeClasses, Tag, tokens, } from '@fluentui/react-components';
+import { getAttributeFormattedValue } from '@headless-adminapp/app/utils';
+import { isColorDark } from '@headless-adminapp/app/utils/color';
+const useStyles = makeStyles({
     root: {
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
-        paddingInline: react_components_1.tokens.spacingHorizontalL,
-        paddingBlock: react_components_1.tokens.spacingVerticalS,
-        gap: react_components_1.tokens.spacingHorizontalS,
+        paddingInline: tokens.spacingHorizontalL,
+        paddingBlock: tokens.spacingVerticalS,
+        gap: tokens.spacingHorizontalS,
         // cursor: 'pointer',
         // '&:hover': {
         //   background: tokens.colorNeutralBackground1Hover,
@@ -29,7 +26,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 function createIntial(name) {
     return name === null || name === void 0 ? void 0 : name.split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
 }
-function RecordCard({ schema, cardView, record, selected, }) {
+export function RecordCard({ schema, cardView, record, selected, }) {
     var _a, _b, _c;
     const styles = useStyles();
     const _record = record;
@@ -47,13 +44,13 @@ function RecordCard({ schema, cardView, record, selected, }) {
             avatarSrc = _record[cardView.avatarColumn];
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+    return (_jsxs("div", { className: mergeClasses(styles.root, selected && styles.selected), children: [cardView.showAvatar && (_jsx(Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
                     src: avatarSrc,
-                } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                } })), _jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_b = cardView.secondaryColumns) === null || _b === void 0 ? void 0 : _b.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!((_c = cardView.rightColumn) === null || _c === void 0 ? void 0 : _c.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [_jsx(Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_b = cardView.secondaryColumns) === null || _b === void 0 ? void 0 : _b.map((column) => (_jsx(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!((_c = cardView.rightColumn) === null || _c === void 0 ? void 0 : _c.length) && (_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -69,7 +66,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                             if (!choice) {
                                 return null;
                             }
-                            return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+                            return (_jsx(Tag, { size: "extra-small", appearance: "filled", style: {
                                     background: choice.color,
                                     color: 'white',
                                     height: 16,
@@ -80,9 +77,9 @@ function RecordCard({ schema, cardView, record, selected, }) {
                         }
                     }
                     if (column.variant === 'strong') {
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
+                        return (_jsx(Body1Strong, { children: getAttributeFormattedValue(value, attribute) }, column.name));
                     }
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
+                    return (_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: getAttributeFormattedValue(value, attribute) }, column.name));
                 }) }))] }));
 }
 function SecondaryColumnContent({ record: _record, column, schema, }) {
@@ -100,21 +97,21 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
     }
     if (column.variant === 'choice') {
         if (attribute.type === 'choice') {
-            return (0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value });
+            return _jsx(ChoiceTag, { attribute: attribute, value: value });
         }
         if (attribute.type === 'choices') {
             const choices = attribute.options.filter((option) => value.includes(option.value));
             if (!choices.length) {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsx)("div", { style: {
+            return (_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     gap: 4,
-                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
+                }, children: choices.map((choice) => (_jsx(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
+    return (_jsxs(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, getAttributeFormattedValue(attribute, value)] }, column.name));
 }
 const ChoiceTag = ({ attribute, value, }) => {
     const choice = attribute.options.find((option) => option.value === value);
@@ -124,9 +121,9 @@ const ChoiceTag = ({ attribute, value, }) => {
     const bgColor = choice.color;
     let color;
     if (bgColor) {
-        color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+        color = isColorDark(bgColor) ? '#FFFFFF' : '#000000';
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+    return (_jsx(Tag, { size: "extra-small", appearance: "filled", style: {
             background: bgColor,
             color: color,
             height: 16,

package/PageEntityForm/RecordCardLoading.js

@@ -1,25 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecordCardLoading = RecordCardLoading;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, makeStyles, mergeClasses, SkeletonItem, tokens, } from '@fluentui/react-components';
+const useStyles = makeStyles({
     root: {
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
-        paddingInline: react_components_1.tokens.spacingHorizontalL,
-        paddingBlock: react_components_1.tokens.spacingVerticalS,
-        gap: react_components_1.tokens.spacingHorizontalS,
+        paddingInline: tokens.spacingHorizontalL,
+        paddingBlock: tokens.spacingVerticalS,
+        gap: tokens.spacingHorizontalS,
     },
 });
-function RecordCardLoading({ cardView }) {
+export function RecordCardLoading({ cardView }) {
     var _a;
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { color: "neutral", style: { cursor: 'pointer' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { className: mergeClasses(styles.root), children: [cardView.showAvatar && (_jsx(Avatar, { color: "neutral", style: { cursor: 'pointer' } })), _jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                    gap: react_components_1.tokens.spacingVerticalXXS,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { height: 16 } }) }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((_, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
+                    gap: tokens.spacingVerticalXXS,
+                }, children: [_jsx("div", { style: { paddingBlock: 2 }, children: _jsx(SkeletonItem, { size: 16, style: { height: 16 } }) }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((_, index) => (_jsx("div", { style: { paddingBlock: 2 }, children: _jsx(SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
 }

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -1,61 +1,58 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecordSetNavigatorContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
-const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
-const locale_1 = require("@headless-adminapp/app/locale");
-const navigation_1 = require("@headless-adminapp/app/navigation");
-const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const react_1 = require("react");
-const RecordCard_1 = require("./RecordCard");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1Strong, Divider, makeStyles, mergeClasses, tokens, } from '@fluentui/react-components';
+import { ScrollView } from '@headless-adminapp/app/components/ScrollView';
+import { useRecordId } from '@headless-adminapp/app/dataform/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useOpenForm } from '@headless-adminapp/app/navigation';
+import { useRecordSetResult, useRecordSetVisibility, } from '@headless-adminapp/app/recordset/hooks';
+import { Fragment } from 'react';
+import { RecordCard } from './RecordCard';
+const useStyles = makeStyles({
     item: {
         cursor: 'pointer',
         '&:hover': {
-            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            background: tokens.colorNeutralBackground1Hover,
         },
         '&:active': {
-            background: react_components_1.tokens.colorNeutralBackground1Pressed,
+            background: tokens.colorNeutralBackground1Pressed,
         },
     },
     selected: {
-        background: react_components_1.tokens.colorNeutralBackground1Selected,
+        background: tokens.colorNeutralBackground1Selected,
     },
 });
-const RecordSetNavigatorContainer = () => {
+export const RecordSetNavigatorContainer = () => {
     var _a, _b;
-    const { data, cardView, schema } = (0, hooks_2.useRecordSetResult)();
-    const [visible] = (0, hooks_2.useRecordSetVisibility)();
-    const recordId = (0, hooks_1.useRecordId)();
+    const { data, cardView, schema } = useRecordSetResult();
+    const [visible] = useRecordSetVisibility();
+    const recordId = useRecordId();
     const styles = useStyles();
-    const openForm = (0, navigation_1.useOpenForm)();
-    const { language, direction } = (0, locale_1.useLocale)();
+    const openForm = useOpenForm();
+    const { language, direction } = useLocale();
     if (!schema) {
         return null;
     }
     if (!visible) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: react_components_1.tokens.spacingVerticalM,
-            paddingBlock: react_components_1.tokens.spacingVerticalM,
+    return (_jsx("div", { style: {
+            [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: tokens.spacingVerticalM,
+            paddingBlock: tokens.spacingVerticalM,
             display: 'flex',
             // display: 'none',
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                boxShadow: react_components_1.tokens.shadow2,
-                borderRadius: react_components_1.tokens.borderRadiusMedium,
-                background: react_components_1.tokens.colorNeutralBackground1,
+        }, children: _jsxs("div", { style: {
+                boxShadow: tokens.shadow2,
+                borderRadius: tokens.borderRadiusMedium,
+                background: tokens.colorNeutralBackground1,
                 display: 'flex',
                 minWidth: 320,
                 flexDirection: 'column',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [_jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         paddingInline: 16,
                         paddingBlock: 8,
-                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (_b = (_a = schema.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : schema === null || schema === void 0 ? void 0 : schema.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
+                    }, children: _jsx(Body1Strong, { children: (_b = (_a = schema.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : schema === null || schema === void 0 ? void 0 : schema.pluralLabel }) }), _jsx("div", { children: _jsx(Divider, { vertical: false, style: { opacity: 0.2 } }) }), _jsx("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: _jsx(ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => (_jsxs(Fragment, { children: [_jsx("div", { role: "button", className: mergeClasses(styles.item, recordId ===
                                         record[schema.idAttribute] &&
                                         styles.selected), onClick: () => {
                                         openForm({
@@ -63,7 +60,6 @@ const RecordSetNavigatorContainer = () => {
                                             id: record[schema.idAttribute],
                                             replace: true,
                                         });
-                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
-                                            record[schema.idAttribute] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingInline: react_components_1.tokens.spacingHorizontalL }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
+                                    }, children: _jsx(RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
+                                            record[schema.idAttribute] }) }), _jsx("div", { style: { paddingInline: tokens.spacingHorizontalL }, children: _jsx(Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
 };
-exports.RecordSetNavigatorContainer = RecordSetNavigatorContainer;

package/PageEntityForm/RelatedViewSelector.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RelatedViewSelector = RelatedViewSelector;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
-const locale_1 = require("@headless-adminapp/app/locale");
-const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
-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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, tokens, } from '@fluentui/react-components';
+import { useDataFormSchema, useSelectedForm, } from '@headless-adminapp/app/dataform/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useMetadata } from '@headless-adminapp/app/metadata/hooks';
+import { isLookupAttribute } from '@headless-adminapp/core/attributes/utils';
+import { Icons } from '@headless-adminapp/icons';
+import { useMemo } from 'react';
+import { usePageEntityFormStrings } from './PageEntityFormStringContext';
 function getRelatedItems(currentSchema, schemas, relatedItems) {
     if (relatedItems === null) {
         return [];
@@ -25,7 +22,7 @@ function getRelatedItems(currentSchema, schemas, relatedItems) {
                 throw new Error(`Attribute not found: ${item.logicalName}.${item.attributeName}`);
             }
             const attribute = schema.attributes[item.attributeName];
-            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+            if (!isLookupAttribute(attribute)) {
                 throw new Error(`Attribute is not a lookup: ${item.logicalName}.${item.attributeName}`);
             }
             if (attribute.entity !== currentSchema.logicalName) {
@@ -44,7 +41,7 @@ function getRelatedItems(currentSchema, schemas, relatedItems) {
         .map((s) => {
         return Object.entries(s.attributes)
             .map(([key, attribute]) => {
-            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+            if (!isLookupAttribute(attribute)) {
                 return null;
             }
             if (attribute.entity !== currentSchema.logicalName) {
@@ -72,24 +69,24 @@ function getRelatedItems(currentSchema, schemas, relatedItems) {
     })
         .flat();
 }
-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, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
+export function RelatedViewSelector(props) {
+    const schema = useDataFormSchema();
+    const formConfig = useSelectedForm();
+    const { schemas } = useMetadata();
+    const strings = usePageEntityFormStrings();
+    const { language } = useLocale();
+    const data = useMemo(() => getRelatedItems(schema, schemas, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
     if (!data.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsxs)("button", { style: {
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { children: _jsxs("button", { style: {
                         border: 'none',
                         overflow: 'hidden',
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
-                        padding: `${react_components_1.tokens.spacingVerticalM} ${react_components_1.tokens.spacingHorizontalMNudge}`,
-                        fontFamily: react_components_1.tokens.fontFamilyBase,
-                        lineHeight: react_components_1.tokens.lineHeightBase300,
-                        backgroundColor: react_components_1.tokens.colorTransparentBackground,
+                        borderRadius: tokens.borderRadiusMedium,
+                        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`,
+                        fontFamily: tokens.fontFamilyBase,
+                        lineHeight: tokens.lineHeightBase300,
+                        backgroundColor: tokens.colorTransparentBackground,
                         alignItems: 'center',
                         position: 'relative',
                         display: 'flex',
@@ -98,10 +95,10 @@ function RelatedViewSelector(props) {
                         cursor: 'pointer',
                         outlineStyle: 'none',
                         textTransform: 'none',
-                        columnGap: react_components_1.tokens.spacingHorizontalSNudge,
-                        color: react_components_1.tokens.colorNeutralForeground2,
-                    }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => {
+                        columnGap: tokens.spacingHorizontalSNudge,
+                        color: tokens.colorNeutralForeground2,
+                    }, children: [strings.related, _jsx(Icons.ChevronDown, { size: 16 })] }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: data.map((item) => {
                         var _a, _b;
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: (_b = (_a = item.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.pluralLabel }, item.key));
+                        return (_jsx(MenuItem, { onClick: () => props.onSelect(item), children: (_b = (_a = item.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.pluralLabel }, item.key));
                     }) }) })] }));
 }

package/PageEntityForm/SectionContainer.js

@@ -1,39 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionContainer = SectionContainer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
-const locale_1 = require("@headless-adminapp/app/locale");
-const utils_1 = require("@headless-adminapp/app/locale/utils");
-const react_hook_form_1 = require("react-hook-form");
-const componentStore_1 = require("../componentStore");
-const SectionControl_1 = require("../DataForm/SectionControl");
-const layout_1 = require("../form/layout");
-const StandardControl_1 = require("./StandardControl");
-const SubgridControl_1 = require("./SubgridControl");
-function SectionContainer({ section }) {
-    const schema = (0, hooks_1.useDataFormSchema)();
-    const formInstance = (0, hooks_1.useFormInstance)();
-    const recordId = (0, hooks_1.useRecordId)();
-    const readonly = (0, hooks_1.useFormIsReadonly)();
-    const { language } = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDataFormSchema, useFormInstance, useFormIsReadonly, useRecordId, } from '@headless-adminapp/app/dataform/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { localizedLabel } from '@headless-adminapp/app/locale/utils';
+import { Controller } from 'react-hook-form';
+import { componentStore } from '../componentStore';
+import { SectionControlWrapper } from '../DataForm/SectionControl';
+import { FormSection } from '../form/layout';
+import { StandardControl } from './StandardControl';
+import { SubgridControl } from './SubgridControl';
+export function SectionContainer({ section }) {
+    const schema = useDataFormSchema();
+    const formInstance = useFormInstance();
+    const recordId = useRecordId();
+    const readonly = useFormIsReadonly();
+    const { language } = useLocale();
+    return (_jsx(FormSection, { title: localizedLabel(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
             var _a;
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
-                    let Control = StandardControl_1.StandardControl;
+                    let Control = StandardControl;
                     if (control.component) {
-                        const OverrideControl = componentStore_1.componentStore.getComponent(control.component);
+                        const OverrideControl = componentStore.getComponent(control.component);
                         if (OverrideControl) {
                             Control = OverrideControl;
                         }
                     }
-                    return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    return (_jsx("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
                                 : undefined,
-                        }, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: control.attributeName, render: ({ field, fieldState, formState }) => {
+                        }, children: _jsx(Controller, { control: formInstance.control, name: control.attributeName, render: ({ field, fieldState, formState }) => {
                                 var _a, _b, _c, _d, _e, _f, _g;
                                 const isError = (fieldState.isTouched || formState.isSubmitted) &&
                                     !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
@@ -41,7 +38,7 @@ function SectionContainer({ section }) {
                                     ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
                                     : '';
                                 const label = (_g = (_f = (_d = (_c = control.localizedLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : (_e = attribute.localizedLabels) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : control.label) !== null && _g !== void 0 ? _g : attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
+                                return (_jsx(SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: _jsx(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
                                             type: 'entity-form',
                                             recordId,
                                             attributeName: control.attributeName,
@@ -57,9 +54,9 @@ function SectionContainer({ section }) {
                 case 'subgrid':
                     let ContainerComponent = null;
                     if (control.component) {
-                        ContainerComponent = componentStore_1.componentStore.getComponent(control.component);
+                        ContainerComponent = componentStore.getComponent(control.component);
                     }
-                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
+                    return (_jsx(SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
                             ? false
                             : {
                                 logicalName: schema.logicalName,
@@ -67,7 +64,7 @@ function SectionContainer({ section }) {
                                 refAttributeName: control.associatedAttribute,
                             } }, index));
                 case 'spacer':
-                    return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    return (_jsx("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
                                 : undefined,

package/PageEntityForm/StandardControl.d.ts

@@ -3,13 +3,13 @@ import { FC } from 'react';
 export interface StandardControlProps {
     attribute: Attribute;
     label?: string;
-    isError: boolean;
-    errorMessage: string | undefined;
+    isError?: boolean;
+    errorMessage?: string;
     name: string;
     value: any;
     placeholder?: string;
     onChange: (value: any) => void;
-    onBlur: () => void;
+    onBlur?: () => void;
     fileServiceContext?: Record<string, unknown>;
     disabled?: boolean;
     borderOnFocusOnly?: boolean;