@headless-adminapp/fluent 0.0.17-alpha.59 → 0.0.17-alpha.62

package/App/AppHeaderContianer.js

@@ -9,6 +9,7 @@ const hooks_1 = require("@headless-adminapp/app/auth/hooks");
 const useIsSkipAuthCheck_1 = require("@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const route_1 = require("@headless-adminapp/app/route");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppLogo_1 = require("./AppLogo");
@@ -31,6 +32,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     }, [authSession?.fullName]);
     const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
+    const router = (0, route_1.useRouter)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -69,7 +71,14 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                                                     flex: 1,
                                                 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => item.onClick?.(), children: item.localizedLabel?.[language] ?? item.label }, item.__key));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => {
+                                                        if (item.onClick) {
+                                                            item.onClick();
+                                                        }
+                                                        else if (item.link) {
+                                                            router.push(item.link);
+                                                        }
+                                                    }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
                                             }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/DialogContainer/PromptDialog.js

@@ -65,7 +65,7 @@ function PromptDialog(props) {
                                             const errorMessage = fieldState.isTouched || formState.isSubmitted
                                                 ? fieldState.error?.message
                                                 : '';
-                                            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError }) }));
+                                            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: attribute.readonly }) }));
                                         } }, attributeName));
                                 }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                                     props.onCancel?.();

package/PageEntityForm/RecordAvatar.js

@@ -23,6 +23,7 @@ const RecordAvatar = () => {
     const dataService = (0, transport_1.useDataService)();
     const refresh = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.refresh);
     const [showAvatarChangeDialog, setShowAvatarChangeDialog] = (0, react_1.useState)(false);
+    const fileService = (0, transport_1.useFileService)();
     const { showProgressIndicator, hideProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
     const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
     if (!schema.avatarAttribute) {
@@ -73,7 +74,10 @@ const RecordAvatar = () => {
         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: { width: 36, height: 36 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
                     src: value?.url,
                 }, onClick: () => {
+                    if (!fileService) {
+                        return;
+                    }
                     setShowAvatarChangeDialog(true);
-                } }), !!recordId && ((0, jsx_runtime_1.jsx)(UploadImageDialog_1.UploadImageDialog, { recordTitle: recordTitle, currentImage: value, onChange: handleChange, recordId: recordId, open: showAvatarChangeDialog, onOpenChange: (open) => setShowAvatarChangeDialog(open) }))] }));
+                } }), !!recordId && !!fileService && ((0, jsx_runtime_1.jsx)(UploadImageDialog_1.UploadImageDialog, { recordTitle: recordTitle, currentImage: value, onChange: handleChange, recordId: recordId, open: showAvatarChangeDialog, onOpenChange: (open) => setShowAvatarChangeDialog(open) }))] }));
 };
 exports.RecordAvatar = RecordAvatar;

package/PageEntityForm/RelatedViewSelector.js

@@ -72,12 +72,13 @@ function getRelatedItems(currentSchema, schemas, relatedItems) {
 }
 function RelatedViewSelector(props) {
     const schema = (0, hooks_1.useDataFormSchema)();
+    const recordId = (0, hooks_1.useRecordId)();
     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]);
-    if (!data.length) {
+    if (!data.length || !recordId) {
         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: {

package/PageEntityForm/SectionContainer.d.ts

@@ -3,4 +3,4 @@ import { SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare function SectionContainer<S extends SchemaAttributes = SchemaAttributes>({ section }: {
     section: Section<S>;
     readOnly: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

package/PageEntityForm/SectionContainer.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionContainer = SectionContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const constants_1 = require("@headless-adminapp/app/dataform/constants");
+const utils_1 = require("@headless-adminapp/app/dataform/DataFormProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const useEventManager_1 = require("@headless-adminapp/app/dataform/hooks/useEventManager");
 const locale_1 = require("@headless-adminapp/app/locale");
-const utils_1 = require("@headless-adminapp/app/locale/utils");
+const utils_2 = require("@headless-adminapp/app/locale/utils");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
@@ -15,9 +21,23 @@ 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 isFormReadonly = (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) => {
+    const eventManager = (0, useEventManager_1.useEventManager)();
+    const disabledControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.disabledControls);
+    const hiddenControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenControls);
+    const requiredFields = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.requiredFields);
+    const hiddenSections = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenSections);
+    const visibleControls = (0, react_1.useMemo)(() => section.controls.filter((control) => {
+        return !(0, utils_1.getIsControlHidden)({
+            control,
+            hiddenControls,
+        });
+    }), [section.controls, hiddenControls]);
+    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) => {
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
@@ -28,6 +48,17 @@ function SectionContainer({ section }) {
                             Control = OverrideControl;
                         }
                     }
+                    const disabled = (0, utils_1.getIsFieldDisabled)({
+                        isFormReadonly,
+                        disabledFields: disabledControls,
+                        attribute,
+                        control,
+                    });
+                    const required = (0, utils_1.getIsFieldRequired)({
+                        attribute,
+                        requiredFields,
+                        control,
+                    });
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
@@ -42,7 +73,10 @@ function SectionContainer({ section }) {
                                     attribute.localizedLabels?.[language] ??
                                     control.label ??
                                     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 ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: 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) => {
+                                            field.onChange(value);
+                                            eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value);
+                                        }, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: disabled, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
                                             type: 'entity-form',
                                             recordId,
                                             attributeName: control.attributeName,

package/PageEntityForm/StandardControl.d.ts

@@ -11,7 +11,6 @@ export interface StandardControlProps {
     onChange: (value: any) => void;
     onBlur?: () => void;
     fileServiceContext?: Record<string, unknown>;
-    disabled?: boolean;
     borderOnFocusOnly?: boolean;
     hideLabel?: boolean;
     hidePlaceholder?: boolean;

package/PageEntityForm/StandardControl.js

@@ -35,12 +35,12 @@ const StandardControl = (props) => {
     name, value, onBlur, onChange, 
     // dataService,
     // fileService,
-    disabled, borderOnFocusOnly, placeholder: _placeholder, 
+    borderOnFocusOnly, placeholder: _placeholder, 
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
     allowNavigation, allowNewRecord, } = props;
-    const isDisabled = attribute.readonly || disabled;
+    const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
         ? undefined
@@ -51,7 +51,7 @@ const StandardControl = (props) => {
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
-        case 'string':
+        case 'string': {
             const controlProps = {
                 name,
                 placeholder,
@@ -59,7 +59,7 @@ const StandardControl = (props) => {
                 onChange,
                 onBlur,
                 error: isError,
-                disabled: isDisabled,
+                disabled: readOnly,
                 readOnly,
             };
             switch (attribute.format) {
@@ -91,6 +91,7 @@ const StandardControl = (props) => {
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
+        }
         case 'number': {
             switch (attribute.format) {
                 case 'decimal': {

package/PageEntityForm/UploadImageDialog.js

@@ -38,6 +38,9 @@ const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open
     };
     const { isPending, mutate: handleApply } = (0, react_query_1.useMutation)({
         mutationFn: async () => {
+            if (!fileService) {
+                throw new Error('File service is not available');
+            }
             if (file) {
                 const url = await fileService.uploadFile(file, {
                     context: {

package/form/controls/AttachmentControl.d.ts

@@ -13,12 +13,12 @@ export declare function useAttachmentSelector({ fileService, fileServiceContext,
     selectFile: (accept: string) => void;
 };
 export interface AttachmentImageControlProps extends ControlProps<FileObject> {
-    fileService: IFileService;
+    fileService: IFileService | null;
     fileServiceContext?: Record<string, unknown>;
     location: AttachmentAttribute['location'];
 }
 interface AttachmentControlProps extends ControlProps<FileObject> {
-    fileService: IFileService;
+    fileService: IFileService | null;
     fileServiceContext?: Record<string, unknown>;
     location: AttachmentAttribute['location'];
     format: AttachmentAttribute['format'];

package/form/controls/CurrencyControl.js

@@ -45,7 +45,7 @@ readOnly, }) {
         setInternalValue(value);
         onChange?.(Number(value));
     };
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: readOnly || disabled, style: {
             width: '100%',
         } }));
 }

package/form/controls/DecimalControl.js

@@ -46,7 +46,7 @@ function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, dis
         setInternalValue(value);
         onChange?.(Number(value));
     };
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), disabled: disabled, readOnly: readOnly, style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
             width: '100%',
         } }));
 }

package/form/controls/EmailControl.d.ts

@@ -3,4 +3,4 @@ export interface EmailControlProps extends ControlProps<string> {
     autoComplete?: string;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: EmailControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: Readonly<EmailControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/EmailControl.js

@@ -15,7 +15,7 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
                     : onChange?.(e.target.value);
         }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
-        disabled: disabled, readOnly: readOnly, autoComplete: autoComplete, style: {
+        readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             flex: 1,
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Mail, {}), size: "small" })) : undefined }));

package/form/controls/IntegerControl.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
 function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, onChange: (e, data) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, onChange: (e, data) => {
             if (data.value !== undefined) {
                 onChange?.(data.value);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.59",
+  "version": "0.0.17-alpha.62",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,5 +42,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "813d07729a10a5613b46f012ba4b24bcaab384dc"
+  "gitHead": "7b4ba8b46dc270e88055b7352d74fae7a2363cd0"
 }