@headless-adminapp/fluent 0.0.17-alpha.26 → 0.0.17-alpha.28

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -34,7 +34,9 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     };
     const isValid = (0, react_1.useMemo)(() => {
         return (!!selectedOption &&
-            values.filter(Boolean).length === selectedOption.controls.length);
+            values.filter((value) => {
+                return value !== null && value !== undefined;
+            }).length === selectedOption.controls.length);
     }, [selectedOption, values]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { style: { paddingBlock: 8 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',

package/PageEntityForm/RelatedViewSelector.js

@@ -70,6 +70,7 @@ function RelatedViewSelector(props) {
                         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) => {
                         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));

package/PageEntityForm/SectionContainer.js

@@ -41,7 +41,12 @@ 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 }) }));
+                                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: {
+                                            type: 'entity-form',
+                                            recordId,
+                                            logicalName: control.attributeName,
+                                            schemaLogicalName: schema.logicalName,
+                                        } }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {

package/PageEntityForm/StandardControl.d.ts

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

package/PageEntityForm/StandardControl.js

@@ -9,6 +9,7 @@ const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
 const componentStore_1 = require("../componentStore");
+const AttachmentControl_1 = require("../form/controls/AttachmentControl");
 const AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
 const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
@@ -19,13 +20,14 @@ const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
 const NumberControl_1 = require("../form/controls/NumberControl");
+const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
 const StandardControl = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -43,6 +45,7 @@ const StandardControl = (props) => {
         : (_a = _placeholder !== null && _placeholder !== void 0 ? _placeholder : _label) !== null && _a !== void 0 ? _a : attribute.label;
     // const required = quickViewControl ? false : attribute.required;
     const dataService = (0, transport_1.useDataService)();
+    const fileService = (0, transport_1.useFileService)();
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
@@ -78,11 +81,15 @@ const StandardControl = (props) => {
                     const Control = (_f = componentStore_1.componentStore.getComponent('Form.TextAreaControl')) !== null && _f !== void 0 ? _f : TextAreaControl_1.TextAreaControl;
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
+                case 'richtext': {
+                    const Control = (_g = componentStore_1.componentStore.getComponent('Form.RichTextControl')) !== null && _g !== void 0 ? _g : RichTextControl_1.RichTextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
         case 'number': {
-            const Control = (_g = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _g !== void 0 ? _g : NumberControl_1.NumberControl;
+            const Control = (_h = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _h !== void 0 ? _h : NumberControl_1.NumberControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'date': {
@@ -97,11 +104,11 @@ const StandardControl = (props) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                const Control = (_h = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _h !== void 0 ? _h : DateTimeControl_1.DateTimeControl;
+                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _j !== void 0 ? _j : DateTimeControl_1.DateTimeControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
             else {
-                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _j !== void 0 ? _j : DateControl_1.DateControl;
+                const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _k !== void 0 ? _k : DateControl_1.DateControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
@@ -116,35 +123,39 @@ const StandardControl = (props) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _k !== void 0 ? _k : DateRangeControl_1.DateRangeControl;
+            const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _l !== void 0 ? _l : DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
         }
         case 'money': {
-            const Control = (_l = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _l !== void 0 ? _l : CurrencyControl_1.CurrencyControl;
+            const Control = (_m = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _m !== void 0 ? _m : CurrencyControl_1.CurrencyControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            const Control = (_m = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _m !== void 0 ? _m : LookupControl_1.LookupControl;
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _o !== void 0 ? _o : LookupControl_1.LookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            const Control = (_o = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _o !== void 0 ? _o : MultiSelectLookupControl_1.MultiSelectLookupControl;
+            const Control = (_p = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _p !== void 0 ? _p : MultiSelectLookupControl_1.MultiSelectLookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            const Control = (_p = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _p !== void 0 ? _p : SwitchControl_1.SwitchControl;
+            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _q !== void 0 ? _q : SwitchControl_1.SwitchControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _q !== void 0 ? _q : SelectControl_1.default;
+            const Control = (_r = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _r !== void 0 ? _r : SelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _r !== void 0 ? _r : MultiSelectControl_1.default;
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
+        case 'attachment': {
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _t !== void 0 ? _t : AttachmentControl_1.AttachmentControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
+        }
         case 'attachments': {
-            const Control = (_s = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _s !== void 0 ? _s : AttachmentsControl_1.AttachmentsControl;
+            const Control = (_u = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _u !== void 0 ? _u : AttachmentsControl_1.AttachmentsControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {

package/form/controls/AttachmentControl.d.ts

@@ -0,0 +1,17 @@
+import { AttachmentAttribute, FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { IFileService } from '@headless-adminapp/core/transport';
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface AttachmentImageControlProps extends ControlProps<FileObject> {
+    fileService: IFileService;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+}
+interface AttachmentControlProps extends ControlProps<FileObject> {
+    fileService: IFileService;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+    format: AttachmentAttribute['format'];
+}
+export declare const AttachmentControl: FC<AttachmentControlProps>;
+export {};

package/form/controls/AttachmentControl.js

@@ -0,0 +1,217 @@
+"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.AttachmentControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
+const utils_1 = require("@headless-adminapp/core/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
+    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+        mutationFn: (file) => __awaiter(this, void 0, void 0, function* () {
+            if (location === 'local') {
+                return (0, utils_1.fileToObject)(file);
+            }
+            else {
+                const url = yield fileService.uploadFile(file, {
+                    context: fileServiceContext,
+                });
+                return (0, utils_1.urlToFileObject)(url);
+            }
+        }),
+        onSuccess: (fileObject) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(fileObject);
+        },
+    });
+    const selectFile = (accept) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (accept) {
+            input.accept = accept;
+        }
+        input.onchange = (event) => __awaiter(this, void 0, void 0, function* () {
+            const files = event.target.files;
+            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+                return;
+            }
+            const file = files[0];
+            handleFile(file);
+        });
+        input.click();
+    };
+    return {
+        isProcessing: isPending,
+        selectFile,
+    };
+}
+const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileService, fileServiceContext, location, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: 100,
+                    height: 100,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    color: react_components_1.tokens.colorNeutralForeground4,
+                    cursor: 'pointer',
+                    pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                }, onClick: () => selectFile('image/*'), children: isProcessing ? (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Image, {}) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                maxWidth: '100%',
+                height: 100,
+                position: 'relative',
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
+                        maxHeight: '100%',
+                        maxWidth: '100%',
+                        objectFit: 'contain',
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    } }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 0, right: 0 }, children: (0, jsx_runtime_1.jsx)(ActionMenu, { format: 'image', value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile('image/*') }) }), isProcessing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                                opacity: 0.7,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }))] }) }));
+};
+const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    const accept = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'image':
+                return 'image/*';
+            case 'video':
+                return 'video/*';
+            case 'audio':
+                return 'audio/*';
+            case 'document':
+                return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv';
+            default:
+                return '';
+        }
+    }, [format]);
+    const FormatIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return icons_1.Icons.Video;
+            case 'audio':
+                return icons_1.Icons.Audio;
+            default:
+                return icons_1.Icons.Document;
+        }
+    }, [format]);
+    if (format === 'image') {
+        return ((0, jsx_runtime_1.jsx)(AttachmentImageControl, { value: value, disabled: disabled, readOnly: readOnly, id: id, name: name, onBlur: onBlur, onChange: onChange, placeholder: placeholder, fileService: fileService, fileServiceContext: fileServiceContext, location: location }));
+    }
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: '100%',
+                        height: 30,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        display: 'flex',
+                        paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                        gap: react_components_1.tokens.spacingHorizontalS,
+                        alignItems: 'center',
+                        overflow: 'hidden',
+                        color: react_components_1.tokens.colorNeutralForeground4,
+                        cursor: 'pointer',
+                        pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                    }, onClick: () => selectFile(accept), children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                flex: 1,
+                            }, children: placeholder || 'Select a file' }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) }))] }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                width: '100%',
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    width: '100%',
+                    height: 30,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    display: 'flex',
+                    paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                }, children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1,
+                        }, children: value.name || value.url }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) })), !isProcessing && ((0, jsx_runtime_1.jsx)(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
+};
+exports.AttachmentControl = AttachmentControl;
+const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick, }) => {
+    const openConfirmDialog = (0, hooks_1.useOpenConfirmDialog)();
+    const FileOpenIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+            case 'audio':
+                return icons_1.Icons.Play;
+            default:
+                return icons_1.Icons.OpenInNew;
+        }
+    }, [format]);
+    const OpenText = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return 'Play';
+            case 'audio':
+                return 'Play';
+            default:
+                return 'Open';
+        }
+    }, [format]);
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(FileOpenIcon, {}), onClick: () => {
+                                window.open(value.url, '_blank');
+                            }, children: OpenText }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
+                                navigator.clipboard.writeText(value.url).catch(() => { });
+                            }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
+                                        onChangeClick === null || onChangeClick === void 0 ? void 0 : onChangeClick();
+                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                        const result = yield openConfirmDialog({
+                                            title: 'Remove file',
+                                            text: 'Are you sure you want to remove this file?',
+                                            confirmButtonLabel: 'Remove',
+                                            cancelButtonLabel: 'Cancel',
+                                        });
+                                        if (!(result === null || result === void 0 ? void 0 : result.confirmed)) {
+                                            return;
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                                    }), children: "Remove" })] }))] }) })] }));
+};

package/form/controls/AttachmentsControl.d.ts

@@ -1,8 +1,6 @@
 import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
 import { FC } from 'react';
 import { ControlProps } from './types';
-export declare function fileToObject(file: File): Promise<FileObject>;
-export declare function dataUrlToFile(dataUrl: string, name: string): File;
 export interface AttachmentsControlProps extends ControlProps<FileObject[]> {
 }
 export declare const AttachmentsControl: FC<AttachmentsControlProps>;

package/form/controls/AttachmentsControl.js

@@ -10,39 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentsControl = void 0;
-exports.fileToObject = fileToObject;
-exports.dataUrlToFile = dataUrlToFile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-function fileToObject(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-            resolve({
-                name: file.name,
-                type: file.type,
-                size: file.size,
-                url: reader.result,
-            });
-        };
-        reader.onerror = (error) => {
-            reject(error);
-        };
-        reader.readAsDataURL(file);
-    });
-}
-function dataUrlToFile(dataUrl, name) {
-    const byteString = atob(dataUrl.split(',')[1]);
-    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
-    const ab = new ArrayBuffer(byteString.length);
-    const ia = new Uint8Array(ab);
-    for (let i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i);
-    }
-    return new File([ab], name, { type: mimeString });
-}
 const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, }) => {
     const inputRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: react_components_1.tokens.spacingVerticalXXS }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
@@ -65,7 +37,7 @@ const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly,
                                     }, children: "Add" }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TagPickerList, {})] }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", multiple: true, style: { display: 'none' }, onChange: (event) => __awaiter(void 0, void 0, void 0, function* () {
                     const files = event.target.files;
                     if (files === null || files === void 0 ? void 0 : files.length) {
-                        const fileObjects = yield Promise.all(Array.from(files).map((file) => fileToObject(file)));
+                        const fileObjects = yield Promise.all(Array.from(files).map((file) => (0, utils_1.fileToObject)(file)));
                         onChange === null || onChange === void 0 ? void 0 : onChange([...(value !== null && value !== void 0 ? value : []), ...fileObjects]);
                     }
                 }) })] }));

package/form/controls/CurrencyControl.js

@@ -4,18 +4,48 @@ exports.CurrencyControl = CurrencyControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, }) {
-    var _a;
     const symbol = (0, locale_1.useCurrencySymbol)();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
-        // invalid={error}
-        // icon={<div>₹</div>}
-        // startDecorator={<div>₹</div>}
-        contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        setInternalValue(value);
+        onChange === null || onChange === void 0 ? void 0 : 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 === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/RichTextControl.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface RichTextControlProps extends ControlProps<string> {
+}
+export declare const RichTextControl: FC<RichTextControlProps>;

package/form/controls/RichTextControl.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+};
+exports.RichTextControl = RichTextControl;

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({}: SwitchControlProps): null;
+export declare function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }: SwitchControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/SwitchControl.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({}) {
-    return null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/form/controls/utils.d.ts

@@ -0,0 +1,4 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+export declare function fileToObject(file: File): Promise<FileObject>;
+export declare function dataUrlToFile(dataUrl: string, name: string): File;
+export declare function urlToFileObject(url: string, name?: string): FileObject;

package/form/controls/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileToObject = fileToObject;
+exports.dataUrlToFile = dataUrlToFile;
+exports.urlToFileObject = urlToFileObject;
+// TODO: Move to core
+function fileToObject(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                url: reader.result,
+            });
+        };
+        reader.onerror = (error) => {
+            reject(error);
+        };
+        reader.readAsDataURL(file);
+    });
+}
+function dataUrlToFile(dataUrl, name) {
+    const byteString = atob(dataUrl.split(',')[1]);
+    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new File([ab], name, { type: mimeString });
+}
+function urlToFileObject(url, name) {
+    const fileName = name || url.split('/').pop() || 'file';
+    return {
+        name: fileName,
+        size: 0,
+        type: '',
+        url,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.26",
+  "version": "0.0.17-alpha.28",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -17,10 +17,10 @@
     "url": "https://github.com/headless-adminapp/adminapp/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && sass src/styles/index.scss dist/styles.css --no-source-map",
     "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
-    "copy-files": "cp package.json dist && cp src/index.css dist",
+    "copy-files": "cp package.json dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -42,8 +42,10 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "sass": "1.81.0",
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "038654b9eb117468f483652a99089cd92764d9d0"
+  "gitHead": "e25bcf7611efad55ef448866d149ff5e5d19cd64"
 }

package/styles.css

@@ -0,0 +1,100 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.TextControl_readonly:after {
+  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
+}
+
+.FormBody_scrollview > div {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacingVerticalM);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.fui-MenuItem__icon > svg,
+.fui-Button__icon > svg {
+  width: inherit;
+  height: inherit;
+}
+
+.hdlapp_rte {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--colorNeutralBackground3);
+  overflow: hidden;
+  border-radius: var(--borderRadiusMedium);
+  border: 1px solid transparent;
+}
+.hdlapp_rte:focus-within {
+  border-color: var(--colorNeutralForeground2BrandSelected);
+}
+.hdlapp_rte .ql-snow .ql-picker {
+  color: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow .ql-stroke {
+  stroke: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar {
+  border: none;
+}
+.hdlapp_rte .ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 1px solid var(--colorNeutralBackground1Hover);
+}
+.hdlapp_rte .ql-container.ql-snow {
+  border: none;
+}

package/types/index.d.ts

@@ -32,6 +32,13 @@ declare module '@headless-adminapp/icons/types' {
         ExportCsv: Icon;
         ExportExcel: Icon;
         Entity: Icon;
+        OpenInNew: Icon;
+        Play: Icon;
+        Audio: Icon;
+        Video: Icon;
+        Copy: Icon;
+        Document: Icon;
+        Image: Icon;
     }
 }
 export {};

package/index.css

@@ -1,27 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-.TextControl_readonly:after {
-  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
-}
-
-.FormBody_scrollview > div {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacingVerticalM);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-.fui-MenuItem__icon > svg,
-.fui-Button__icon > svg {
-  width: inherit;
-  height: inherit;
-}