@headless-adminapp/fluent 1.1.6 → 1.1.7

package/PageEntityForm/SectionContainer.js

@@ -39,7 +39,7 @@ function SectionContainer({ section }) {
     if (hiddenSections[section.name] || visibleControls.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_2.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: visibleControls.map((control, index) => {
+    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_2.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, fullHeight: section.fullHeight, children: visibleControls.map((control, index) => {
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
@@ -94,7 +94,7 @@ function SectionContainer({ section }) {
                                             recordId,
                                             attributeName: control.attributeName,
                                             logicalName: schema.logicalName,
-                                        } }) }));
+                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {

package/PageEntityForm/StandardControl.js

@@ -44,7 +44,7 @@ const StandardControl = (props) => {
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
-    allowNavigation, allowNewRecord, } = props;
+    allowNavigation, allowNewRecord, autoHeight, maxHeight, } = props;
     const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
@@ -87,7 +87,7 @@ const StandardControl = (props) => {
                 }
                 case 'textarea': {
                     const Control = componentStore_1.componentStore.getComponent('Form.TextAreaControl') ?? TextAreaControl_1.TextAreaControl;
-                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                    return ((0, jsx_runtime_1.jsx)(Control, { ...controlProps, autoHeight: autoHeight, maxHeight: maxHeight }));
                 }
                 case 'richtext': {
                     const Control = componentStore_1.componentStore.getComponent('Form.RichTextControl') ?? RichTextControl_1.RichTextControl;

package/form/controls/RegardingControl.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const app_1 = require("@headless-adminapp/app/app");
 const hooks_1 = require("@headless-adminapp/app/hooks");
-const metadata_1 = require("@headless-adminapp/app/metadata");
+const useMetadata_1 = require("@headless-adminapp/app/metadata/hooks/useMetadata");
 const hooks_2 = require("@headless-adminapp/app/route/hooks");
 const app_2 = require("@headless-adminapp/core/experience/app");
 const icons_1 = require("@headless-adminapp/icons");
@@ -68,7 +68,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     }, [open]);
     const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
     const styles = useStyles();
-    const { experienceStore } = (0, metadata_1.useMetadata)();
+    const { experienceStore } = (0, useMetadata_1.useMetadata)();
     const { isFetching: isConfigFetching, data: configs } = (0, react_query_1.useQuery)({
         queryKey: ['data', 'getLookupViews', entities, undefined],
         queryFn: async () => {

package/form/controls/TextAreaControl.d.ts

@@ -2,5 +2,7 @@ import { ControlProps } from './types';
 export interface TextAreaControlProps extends ControlProps<string> {
     rows?: number;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
+    autoHeight?: boolean;
+    maxHeight?: number;
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextAreaControl.js

@@ -3,14 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => {
-            textTransform === 'uppercase'
-                ? onChange?.(e.target.value.toUpperCase())
-                : textTransform === 'lowercase'
-                    ? onChange?.(e.target.value.toLowerCase())
-                    : onChange?.(e.target.value);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+const react_1 = require("react");
+const DEFAULT_MAX_HEIGHT = 260;
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, autoHeight, maxHeight, }) {
+    const textAreaRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const textarea = textAreaRef.current;
+        if (!textarea)
+            return;
+        if (autoHeight) {
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+            textarea.style.maxHeight = maxHeight
+                ? `${maxHeight}px`
+                : textarea.scrollHeight + 'px';
+        }
+        else {
+            textarea.style.height = '';
+            textarea.style.maxHeight = maxHeight
+                ? `${maxHeight}px`
+                : `${DEFAULT_MAX_HEIGHT}px`;
+        }
+    }, [value, autoHeight, maxHeight]);
+    const handleInput = (e, data) => {
+        let newValue = data.value;
+        if (textTransform === 'uppercase') {
+            newValue = newValue.toUpperCase();
+        }
+        else if (textTransform === 'lowercase') {
+            newValue = newValue.toLowerCase();
+        }
+        onChange?.(newValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ref: textAreaRef, placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: handleInput, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // error={error}
         readOnly: disabled || readOnly, rows: rows }));
 }

package/form/layout/FormSection/FormSection.js

@@ -11,7 +11,7 @@ const FormSectionLoading_1 = require("./FormSectionLoading");
 function determineItemCount(availableWidth, itemWidth, gap, padding) {
     return Math.floor((availableWidth + gap - 2 * padding) / (itemWidth + gap));
 }
-const FormSection = ({ title, children, columnCount, labelPosition, noPadding, hideLabel }) => {
+const FormSection = ({ title, children, columnCount, labelPosition, noPadding, hideLabel, fullHeight, }) => {
     // const columnCount = 2;
     const divRef = (0, react_1.useRef)(null);
     const divSize = (0, hooks_1.useElementSize)(divRef, 100);
@@ -64,7 +64,14 @@ const FormSection = ({ title, children, columnCount, labelPosition, noPadding, h
             boxShadow: react_components_1.tokens.shadow2,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             background: react_components_1.tokens.colorNeutralBackground1,
-        }, children: (0, jsx_runtime_1.jsxs)("div", { children: [!hideLabel && !!title && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: fullHeight ? 1 : undefined,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flex: fullHeight ? 1 : undefined,
+            }, children: [!hideLabel && !!title && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 paddingInline: 16,
                                 paddingBlock: 8,

package/form/layout/FormTab/FormTab.js

@@ -77,6 +77,7 @@ const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidth
                 gridRowGap: 12,
                 gridColumnGap: 12,
                 gridTemplateColumns: template,
+                flex: 1,
             }, children: children }) }));
 };
 exports.FormTab.Column = FormTabColumn_1.FormTabColumn;

package/form/layout/FormTab/FormTabColumn.js

@@ -10,6 +10,7 @@ const FormTabColumn = ({ children, span: _span, }) => {
                 flexDirection: 'column',
                 width: '100%',
                 gap: react_components_1.tokens.spacingVerticalM,
+                minHeight: '100%',
             }, children: children }) }));
 };
 exports.FormTabColumn = FormTabColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "23ea276caca4d792a5229dc2e1323f6888eb1424"
+  "gitHead": "e5d75e8b5da3f818064090455eefd3cb27b5a2ce"
 }