@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/form/FormControl.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-// import { AttachmentControl } from './controls/AttachmentControl';
+const uuid_1 = require("uuid");
 const CurrencyControl_1 = require("./controls/CurrencyControl");
 const DateControl_1 = require("./controls/DateControl");
 const DateTimeControl_1 = require("./controls/DateTimeControl");
+const DecimalControl_1 = require("./controls/DecimalControl");
 const EmailControl_1 = require("./controls/EmailControl");
 const LookupControl_1 = require("./controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("./controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("./controls/MultiSelectLookupControl");
-const NumberControl_1 = require("./controls/NumberControl");
 const PasswordControl_1 = require("./controls/PasswordControl");
 const SelectControl_1 = __importDefault(require("./controls/SelectControl"));
 const SwitchControl_1 = require("./controls/SwitchControl");
@@ -34,7 +23,7 @@ const TextAreaControl_1 = require("./controls/TextAreaControl");
 const TextControl_1 = require("./controls/TextControl");
 const FormControlLoading_1 = require("./FormControlLoading");
 function Control(props) {
-    const { type, label: _label, value, onChange } = props, rest = __rest(props, ["type", "label", "value", "onChange"]);
+    const { type, label: _label, value, onChange, ...rest } = props;
     switch (type) {
         case 'custom':
             return props.renderControl({
@@ -43,53 +32,42 @@ function Control(props) {
                 disabled: props.disabled,
             });
         case 'text':
-            return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { value: value, onChange: onChange, ...rest }));
         case 'textarea':
-            return ((0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, { value: value, onChange: onChange, ...rest }));
         case 'telephone':
-            return ((0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, { value: value, onChange: onChange, ...rest }));
         case 'email':
-            return ((0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, { value: value, onChange: onChange, ...rest }));
         case 'password':
-            return ((0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { value: value, onChange: onChange, ...rest }));
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(NumberControl_1.NumberControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(DecimalControl_1.DecimalControl, { value: value, onChange: onChange, ...rest }));
         case 'currency':
-            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, { value: value, onChange: onChange, ...rest }));
         case 'date':
-            return ((0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(DateControl_1.DateControl, { value: value, onChange: onChange, ...rest }));
         case 'datetime':
-            return ((0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, { value: value, onChange: onChange, ...rest }));
         case 'select':
-            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { value: value, onChange: onChange, ...rest }));
         case 'multi-select':
-            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, { value: value, onChange: onChange, ...rest }));
         case 'lookup':
-            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, { value: value, onChange: onChange, ...rest }));
         case 'lookups':
-            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, { value: value, onChange: onChange, ...rest }));
         case 'switch':
-            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, Object.assign({ value: value, onChange: onChange }, rest)));
-        // case 'attachment':
-        //   return (
-        //     <AttachmentControl
-        //       value={value}
-        //       onChange={onChange}
-        //       {...(rest as any)}
-        //     />
-        //   );
+            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, { value: value, onChange: onChange, ...rest }));
         default:
             return (0, jsx_runtime_1.jsx)("div", {});
     }
 }
-function randomUUID() {
-    return Math.random().toString(36).substring(2, 15);
-}
 function FormControl(props) {
     const { label, id, onChange } = props;
-    const _id = (0, react_1.useMemo)(() => id || randomUUID(), [id]);
+    const _id = (0, react_1.useMemo)(() => id ?? (0, uuid_1.v4)(), [id]);
     const noop = (0, react_1.useCallback)(() => { }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, { id: _id, onChange: onChange || noop, ...props }) })] }));
 }
 FormControl.Loading = FormControlLoading_1.FormControlLoading;
 exports.default = FormControl;

package/form/controls/AttachmentControl.d.ts

@@ -0,0 +1,27 @@
+import { AttachmentAttribute, FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { IFileService } from '@headless-adminapp/core/transport';
+import { FC } from 'react';
+import { ControlProps } from './types';
+interface UseAttachmentSelectorOptions {
+    fileService: IFileService | null;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+    onChange?: (fileObject: FileObject) => void;
+}
+export declare function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }: UseAttachmentSelectorOptions): {
+    isProcessing: boolean;
+    selectFile: (accept: string) => void;
+};
+export interface AttachmentImageControlProps extends ControlProps<FileObject> {
+    fileService: IFileService | null;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+}
+interface AttachmentControlProps extends ControlProps<FileObject> {
+    fileService: IFileService | null;
+    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,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentControl = void 0;
+exports.useAttachmentSelector = useAttachmentSelector;
+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 openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
+    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+        mutationFn: async (file) => {
+            if (location === 'local') {
+                return (0, utils_1.fileToObject)(file);
+            }
+            else {
+                if (!fileService) {
+                    throw new Error('File service is not provided');
+                }
+                const url = await fileService.uploadFile(file, {
+                    context: fileServiceContext,
+                });
+                return (0, utils_1.urlToFileObject)(url);
+            }
+        },
+        onSuccess: (fileObject) => {
+            onChange?.(fileObject);
+        },
+        onError: (error) => {
+            console.error(error);
+            openErrorDialog({
+                title: 'Failed to upload file',
+                text: error.message,
+            });
+        },
+    });
+    const selectFile = (accept) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (accept) {
+            input.accept = accept;
+        }
+        input.onchange = async (event) => {
+            const files = event.target.files;
+            if (!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?.();
+                                    }, 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: async () => {
+                                        const result = await openConfirmDialog({
+                                            title: 'Remove file',
+                                            text: 'Are you sure you want to remove this file?',
+                                            confirmButtonLabel: 'Remove',
+                                            cancelButtonLabel: 'Cancel',
+                                        });
+                                        if (!result?.confirmed) {
+                                            return;
+                                        }
+                                        onChange?.(null);
+                                    }, children: "Remove" })] }))] }) })] }));
+};

package/form/controls/AttachmentsControl.d.ts

@@ -0,0 +1,6 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface AttachmentsControlProps extends ControlProps<FileObject[]> {
+}
+export declare const AttachmentsControl: FC<AttachmentsControlProps>;

package/form/controls/AttachmentsControl.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentsControl = void 0;
+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");
+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: {
+                                flexWrap: 'wrap',
+                                columnGap: react_components_1.tokens.spacingHorizontalXS,
+                                gap: react_components_1.tokens.spacingHorizontalXS,
+                            }, children: [value?.map((file, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", shape: "rounded", dismissible: !disabled && !readOnly, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                                            if (disabled || readOnly)
+                                                return;
+                                            onChange?.(value?.filter((_, i) => i !== index));
+                                        }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { href: file.url, target: "_blank", onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            window.open(file.url, '_blank');
+                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), !readOnly && !disabled && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
+                                        if (readOnly)
+                                            return;
+                                        inputRef.current?.click();
+                                    }, 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: async (event) => {
+                    const files = event.target.files;
+                    if (files?.length) {
+                        const fileObjects = await Promise.all(Array.from(files).map((file) => (0, utils_1.fileToObject)(file)));
+                        onChange?.([...(value ?? []), ...fileObjects]);
+                    }
+                } })] }));
+};
+exports.AttachmentsControl = AttachmentsControl;

package/form/controls/CurrencyControl.js

@@ -3,17 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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;
-    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: "\u20B9" }), disabled: disabled, readOnly: readOnly, style: {
+    const symbol = (0, locale_1.useCurrencySymbol)();
+    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);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange?.(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        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 }), readOnly: readOnly || disabled, style: {
             width: '100%',
         } }));
 }

package/form/controls/DateControl.d.ts

@@ -3,4 +3,4 @@ export interface DateControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateControl.js

@@ -5,17 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateControl = DateControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const AppStringContext_1 = require("../../App/AppStringContext");
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
 function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    const { dateFormats } = (0, locale_1.useLocale)();
+    const { dateFormats, timezone } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
-    return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", 
+    return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", 
         // size="sm"
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format(dateFormats.short) : ''), value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null), strings: datePickerStrings }));
+        disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => onChange?.(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginRight: -4,
+                color: react_components_1.tokens.colorNeutralForeground2,
+            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }) }));
 }

package/form/controls/DateRangeControl.js

@@ -28,22 +28,20 @@ function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled
             : undefined;
     const _maxDate = maxDate ? new Date(maxDate) : to ? new Date(to) : undefined;
     const handleChangeFrom = (date) => {
-        var _a;
         setFrom(date ? date.toISOString() : null);
         // if (date && to) {
-        onChange === null || onChange === void 0 ? void 0 : onChange([(_a = date === null || date === void 0 ? void 0 : date.toISOString()) !== null && _a !== void 0 ? _a : null, to]);
+        onChange?.([date?.toISOString() ?? null, to]);
         // }
     };
     const handleChangeTo = (date) => {
-        var _a;
         setTo(date ? date.toISOString() : null);
         // if (date && from) {
-        onChange === null || onChange === void 0 ? void 0 : onChange([from, (_a = date === null || date === void 0 ? void 0 : date.toISOString()) !== null && _a !== void 0 ? _a : null]);
+        onChange?.([from, date?.toISOString() ?? null]);
         // }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: "From", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).format(dateFormats.short) : '', value: from ? new Date(from) : null, onSelectDate: (date) => handleChangeFrom(date), strings: datePickerStrings, minDate: minDate, maxDate: _maxDate, style: { flex: 1 }, input: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: "From", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).format(dateFormats.short) : '', value: from ? new Date(from) : null, onSelectDate: (date) => handleChangeFrom(date), strings: datePickerStrings, minDate: minDate, maxDate: _maxDate, style: { flex: 1 }, input: {
                     style: { width: '100%' },
-                } }), (0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: "To", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), value: to ? new Date(to) : null, onSelectDate: (date) => handleChangeTo(date), strings: datePickerStrings, minDate: _minDate, maxDate: maxDate, style: { flex: 1 }, input: {
+                } }), (0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: "To", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), value: to ? new Date(to) : null, onSelectDate: (date) => handleChangeTo(date), strings: datePickerStrings, minDate: _minDate, maxDate: maxDate, style: { flex: 1 }, input: {
                     style: { width: '100%' },
                 } })] }));
 }

package/form/controls/DateTimeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;