@headless-adminapp/fluent 1.4.32 → 1.4.38

package/DataForm/SectionControl.d.ts

@@ -6,6 +6,7 @@ interface SectionControlWrapperProps {
     required?: boolean;
     isError?: boolean;
     errorMessage?: string;
+    grow?: boolean;
 }
 export declare function SectionControlWrapper(props: PropsWithChildren<SectionControlWrapperProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataForm/SectionControl.js

@@ -4,5 +4,14 @@ exports.SectionControlWrapper = SectionControlWrapper;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 function SectionControlWrapper(props) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Field, { label: props.labelHidden ? undefined : props.label, orientation: props.labelPosition === 'top' ? 'vertical' : 'horizontal', required: props.labelHidden ? undefined : props.required, validationState: props.isError ? 'error' : undefined, validationMessage: props.errorMessage, validationMessageIcon: null, style: { paddingLeft: props.labelHidden ? 0 : undefined }, children: props.children }));
+    const gridTemplateRows = !props.grow
+        ? undefined
+        : props.labelPosition === 'top' && !props.labelHidden
+            ? 'auto 1fr auto auto'
+            : '1fr auto auto auto';
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Field, { label: props.labelHidden ? undefined : props.label, orientation: props.labelPosition === 'top' ? 'vertical' : 'horizontal', required: props.labelHidden ? undefined : props.required, validationState: props.isError ? 'error' : undefined, validationMessage: props.errorMessage, validationMessageIcon: null, style: {
+            paddingLeft: props.labelHidden ? 0 : undefined,
+            gridTemplateRows,
+            flexGrow: props.grow ? 1 : undefined,
+        }, children: props.children }));
 }

package/DataGrid/GridListContainer.js

@@ -55,8 +55,12 @@ const GridListContainer = () => {
     const virtualSize = virtualizer.getTotalSize();
     const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)(async (id) => {
+        const record = dataRef.current?.records.find((r) => r[schema.idAttribute] === id);
+        if (!record) {
+            return;
+        }
         await openFormInternal({
-            logicalName: schema.logicalName,
+            logicalName: record.$entity || schema.logicalName,
             id,
             recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
         });

package/DataGrid/GridTableContainer.js

@@ -110,11 +110,16 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const tableWrapperRef = (0, react_1.useRef)(null);
     const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
+        const record = dataRef.current?.records.find((r) => r[schema.idAttribute] === id);
+        if (!record) {
+            return;
+        }
+        const logicalName = record.$entity || schema.logicalName;
         openFormInternal({
-            logicalName: schema.logicalName,
+            logicalName: logicalName,
             id,
             recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]),
-        });
+        }).catch(console.error);
     }, [openFormInternal, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();

package/PageEntityForm/RecordCard.js

@@ -93,7 +93,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
 }
 function SecondaryColumnContent({ record: _record, column, schema, locale, }) {
     const value = _record[column.name];
-    if (!value) {
+    if (!value && value !== 0) {
         return null;
     }
     const attribute = schema.attributes[column.name];

package/PageEntityForm/SectionContainer.js

@@ -80,6 +80,8 @@ function SectionContainer({ section, skeleton, }) {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
                                 : undefined,
+                            display: control.fullHeight ? 'flex' : undefined,
+                            flexDirection: control.fullHeight ? 'column' : undefined,
                         }, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: control.attributeName, render: ({ field, fieldState, formState }) => {
                                 const isError = (fieldState.isTouched || formState.isSubmitted) &&
                                     !!fieldState.error?.message;
@@ -91,7 +93,7 @@ function SectionContainer({ section, skeleton, }) {
                                     control.label ??
                                     attribute.label;
                                 const labelHidden = control.labelHidden;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelHidden: labelHidden, labelPosition: isMobile ? 'top' : section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelHidden: labelHidden, labelPosition: isMobile ? 'top' : section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, grow: control.fullHeight, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
                                             const previousValue = field.value;
                                             field.onChange(value);
                                             eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value, previousValue);
@@ -100,7 +102,7 @@ function SectionContainer({ section, skeleton, }) {
                                             recordId,
                                             attributeName: control.attributeName,
                                             logicalName: schema.logicalName,
-                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight, skeleton: skeleton, required: required }) }));
+                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight, fullHeight: control.fullHeight, skeleton: skeleton, required: required }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {
@@ -126,13 +128,13 @@ function SectionContainer({ section, skeleton, }) {
                         }
                     }
                     const key = control.key ?? `${control.logicalName}-${index}`;
-                    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: `subgrid.${key}`, nested: true, children: (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 ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: `subgrid.${key}`, nested: true, children: (0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, hideSelector: control.labelHidden, associated: !control.associatedAttribute
                                 ? false
                                 : {
                                     logicalName: schema.logicalName,
                                     id: recordId,
                                     refAttributeName: control.associatedAttribute,
-                                } }, key) }));
+                                }, view: control.view }) }, key));
                 }
                 case 'component': {
                     const Component = control.component === 'string'

package/PageEntityForm/SubgridControl.d.ts

@@ -1,8 +1,11 @@
+import { ViewExperience } from '@headless-adminapp/core/experience/view';
 interface SubgridControlProps {
     logicalName: string;
     allowViewSelection?: boolean;
     viewId?: string;
+    view?: ViewExperience<any>;
     availableViewIds?: string[];
+    hideSelector?: boolean;
     associated: false | {
         logicalName: string;
         id: string;

package/PageEntityForm/SubgridControl.js

@@ -11,7 +11,7 @@ const FormSubgridNotAvailableContainer_1 = require("../PageEntityView/FormSubgri
 function SubgridControl(props) {
     const schema = (0, hooks_1.useSchema)(props.logicalName);
     const [viewId, setViewId] = (0, react_1.useState)(props.viewId);
-    const { view, isLoadingView } = (0, hooks_1.useExperienceView)(props.logicalName, viewId, !!props.associated, props.availableViewIds);
+    const { view, isLoadingView } = (0, hooks_1.useExperienceView)(props.logicalName, viewId, !!props.associated, props.availableViewIds, props.view);
     const { viewLookup } = (0, hooks_1.useExperienceViewLookup)(props.logicalName, !!props.associated, props.availableViewIds);
     const { commands } = (0, hooks_1.useExperienceViewCommands)(props.logicalName);
     const { commands: subgridCommands } = (0, hooks_1.useExperienceViewSubgridCommands)(props.logicalName);
@@ -64,5 +64,5 @@ function SubgridControl(props) {
     }
     const ContainerComponent = props.ContainerComponent ?? FormSubgridContainer_1.FormSubgridContainer;
     const disabled = !!props.associated && !props.associated.id;
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: props.allowViewSelection ?? false, disabled: disabled, children: disabled ? (0, jsx_runtime_1.jsx)(FormSubgridNotAvailableContainer_1.FormSubgridNotAvailableContainer, {}) : (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: props.allowViewSelection ?? false, disabled: disabled, children: disabled ? ((0, jsx_runtime_1.jsx)(FormSubgridNotAvailableContainer_1.FormSubgridNotAvailableContainer, {})) : ((0, jsx_runtime_1.jsx)(ContainerComponent, { hideSelector: props.hideSelector })) }));
 }

package/PageEntityView/FormSubgridContainer.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 interface FormSubgridContainerProps {
+    hideSelector?: boolean;
     hideCommandBar?: boolean;
     hideSearch?: boolean;
 }

package/PageEntityView/FormSubgridContainer.js

@@ -23,7 +23,7 @@ const FormSubgridContainer = (props) => {
     }
 };
 exports.FormSubgridContainer = FormSubgridContainer;
-const FormSubgridDesktopContainer = ({ hideCommandBar, hideSearch, }) => {
+const FormSubgridDesktopContainer = ({ hideSelector, hideCommandBar, hideSearch, }) => {
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -40,12 +40,12 @@ const FormSubgridDesktopContainer = ({ hideCommandBar, hideSearch, }) => {
                 display: 'flex',
                 flexDirection: 'column',
                 // overflow: 'hidden',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        height: 40,
-                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [!hideSelector && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                height: 40,
+                            }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] })), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: 10,
@@ -79,7 +79,7 @@ const FormSubgridDesktopContainer = ({ hideCommandBar, hideSearch, }) => {
                             }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {})] })] })] }) }));
 };
 exports.FormSubgridDesktopContainer = FormSubgridDesktopContainer;
-const FormSubgridMobileContainer = ({ hideCommandBar, hideSearch, }) => {
+const FormSubgridMobileContainer = ({ hideSelector, hideCommandBar, hideSearch, }) => {
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -92,12 +92,12 @@ const FormSubgridMobileContainer = ({ hideCommandBar, hideSearch, }) => {
                 flex: 1,
                 display: 'flex',
                 flexDirection: 'column',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        height: 40,
-                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [!hideSelector && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                height: 40,
+                            }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] })), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: 10,

package/form/layout/FormSection/FormSection.js

@@ -77,7 +77,7 @@ const FormSection = ({ title, children, columnCount, labelPosition, noPadding, h
                                 paddingBlock: 8,
                                 height: 40,
                                 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)(react_components_1.Divider, { style: { opacity: 0.2 } })] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                            }, 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)(react_components_1.Divider, { style: { opacity: 0.2, flexGrow: 0 } })] })), (0, jsx_runtime_1.jsx)("div", { style: {
                         flex: 1,
                         display: 'flex',
                         flexDirection: 'column',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.32",
+  "version": "1.4.38",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "adf0790db7264b5050b1160837bb599780791b24"
+  "gitHead": "f94f402ec1cbba0d94b6122d48dce471eba433e1"
 }