@headless-adminapp/fluent 0.0.17-alpha.53 → 0.0.17-alpha.56

package/form/controls/AttachmentControl.js

@@ -1,35 +1,29 @@
-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());
-    });
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1, Button, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, Spinner, tokens, } from '@fluentui/react-components';
-import { useOpenConfirmDialog, useOpenErrorDialog, } from '@headless-adminapp/app/dialog/hooks';
-import { fileToObject, urlToFileObject } from '@headless-adminapp/core/utils';
-import { Icons } from '@headless-adminapp/icons';
-import { useMutation } from '@tanstack/react-query';
-import { useMemo } from 'react';
+"use strict";
+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 openErrorDialog = useOpenErrorDialog();
-    const { isPending, mutate: handleFile } = useMutation({
-        mutationFn: (file) => __awaiter(this, void 0, void 0, function* () {
+    const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
+    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+        mutationFn: async (file) => {
             if (location === 'local') {
-                return fileToObject(file);
+                return (0, utils_1.fileToObject)(file);
             }
             else {
-                const url = yield fileService.uploadFile(file, {
+                const url = await fileService.uploadFile(file, {
                     context: fileServiceContext,
                 });
-                return urlToFileObject(url);
+                return (0, utils_1.urlToFileObject)(url);
             }
-        }),
+        },
         onSuccess: (fileObject) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange(fileObject);
+            onChange?.(fileObject);
         },
         onError: (error) => {
             console.error(error);
@@ -45,14 +39,14 @@ function useAttachmentSelector({ fileService, fileServiceContext, location, onCh
         if (accept) {
             input.accept = accept;
         }
-        input.onchange = (event) => __awaiter(this, void 0, void 0, function* () {
+        input.onchange = async (event) => {
             const files = event.target.files;
-            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+            if (!files?.length) {
                 return;
             }
             const file = files[0];
             handleFile(file);
-        });
+        };
         input.click();
     };
     return {
@@ -68,49 +62,49 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
         onChange,
     });
     if (!value) {
-        return (_jsx("div", { style: { position: 'relative', display: 'flex' }, children: _jsx("div", { style: {
+        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: tokens.colorNeutralBackground2,
-                    borderRadius: tokens.borderRadiusMedium,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    color: tokens.colorNeutralForeground4,
+                    color: react_components_1.tokens.colorNeutralForeground4,
                     cursor: 'pointer',
                     pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
-                }, onClick: () => selectFile('image/*'), children: isProcessing ? _jsx(Spinner, { size: "small" }) : _jsx(Icons.Image, {}) }) }));
+                }, 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 (_jsx("div", { style: { position: 'relative', display: 'flex' }, children: _jsxs("div", { style: {
+    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: [_jsx("img", { src: value.url, style: {
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
                         maxHeight: '100%',
                         maxWidth: '100%',
                         objectFit: 'contain',
-                        borderRadius: tokens.borderRadiusMedium,
-                    } }), _jsx("div", { style: { position: 'absolute', top: 0, right: 0 }, children: _jsx(ActionMenu, { format: 'image', value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile('image/*') }) }), isProcessing && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                        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: tokens.colorNeutralBackground1,
+                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
                                 opacity: 0.7,
-                            } }), _jsx("div", { style: {
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 position: 'absolute',
                                 inset: 0,
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'center',
-                            }, children: _jsx(Spinner, { size: "small" }) })] }))] }) }));
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }))] }) }));
 };
-export const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
     const { isProcessing, selectFile } = useAttachmentSelector({
         fileService,
         fileServiceContext,
         location,
         onChange,
     });
-    const accept = useMemo(() => {
+    const accept = (0, react_1.useMemo)(() => {
         switch (format) {
             case 'image':
                 return 'image/*';
@@ -124,73 +118,74 @@ export const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur,
                 return '';
         }
     }, [format]);
-    const FormatIcon = useMemo(() => {
+    const FormatIcon = (0, react_1.useMemo)(() => {
         switch (format) {
             case 'video':
-                return Icons.Video;
+                return icons_1.Icons.Video;
             case 'audio':
-                return Icons.Audio;
+                return icons_1.Icons.Audio;
             default:
-                return Icons.Document;
+                return icons_1.Icons.Document;
         }
     }, [format]);
     if (format === 'image') {
-        return (_jsx(AttachmentImageControl, { value: value, disabled: disabled, readOnly: readOnly, id: id, name: name, onBlur: onBlur, onChange: onChange, placeholder: placeholder, fileService: fileService, fileServiceContext: fileServiceContext, location: location }));
+        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 (_jsx("div", { style: { position: 'relative', overflow: 'hidden' }, children: _jsx("div", { style: {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                     width: '100%',
-                }, children: _jsxs("div", { style: {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: '100%',
                         height: 30,
-                        borderRadius: tokens.borderRadiusMedium,
-                        backgroundColor: tokens.colorNeutralBackground2,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
                         display: 'flex',
-                        paddingLeft: tokens.spacingHorizontalS,
-                        gap: tokens.spacingHorizontalS,
+                        paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                        gap: react_components_1.tokens.spacingHorizontalS,
                         alignItems: 'center',
                         overflow: 'hidden',
-                        color: tokens.colorNeutralForeground4,
+                        color: react_components_1.tokens.colorNeutralForeground4,
                         cursor: 'pointer',
                         pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
-                    }, onClick: () => selectFile(accept), children: [_jsx(FormatIcon, { size: 16 }), _jsx(Body1, { style: {
+                    }, 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 && (_jsx("div", { style: { paddingRight: tokens.spacingHorizontalS }, children: _jsx(Spinner, { size: "extra-tiny" }) }))] }) }) }));
+                            }, 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 (_jsx("div", { style: { position: 'relative', overflow: 'hidden' }, children: _jsx("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 width: '100%',
-            }, children: _jsxs("div", { style: {
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                     width: '100%',
                     height: 30,
-                    borderRadius: tokens.borderRadiusMedium,
-                    backgroundColor: tokens.colorNeutralBackground2,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
                     display: 'flex',
-                    paddingLeft: tokens.spacingHorizontalS,
-                    gap: tokens.spacingHorizontalS,
+                    paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                    gap: react_components_1.tokens.spacingHorizontalS,
                     alignItems: 'center',
                     overflow: 'hidden',
-                }, children: [_jsx(FormatIcon, { size: 16 }), _jsx(Body1, { style: {
+                }, 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 && (_jsx("div", { style: { paddingRight: tokens.spacingHorizontalS }, children: _jsx(Spinner, { size: "extra-tiny" }) })), !isProcessing && (_jsx(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
+                        }, 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 = useOpenConfirmDialog();
-    const FileOpenIcon = useMemo(() => {
+    const openConfirmDialog = (0, hooks_1.useOpenConfirmDialog)();
+    const FileOpenIcon = (0, react_1.useMemo)(() => {
         switch (format) {
             case 'video':
             case 'audio':
-                return Icons.Play;
+                return icons_1.Icons.Play;
             default:
-                return Icons.OpenInNew;
+                return icons_1.Icons.OpenInNew;
         }
     }, [format]);
-    const OpenText = useMemo(() => {
+    const OpenText = (0, react_1.useMemo)(() => {
         switch (format) {
             case 'video':
                 return 'Play';
@@ -200,22 +195,22 @@ const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick
                 return 'Open';
         }
     }, [format]);
-    return (_jsxs(Menu, { positioning: "before-top", hasIcons: true, children: [_jsx(MenuTrigger, { children: _jsx(Button, { appearance: "transparent", icon: _jsx(Icons.MoreVertical, {}) }) }), _jsx(MenuPopover, { children: _jsxs(MenuList, { children: [_jsx(MenuItem, { icon: _jsx(FileOpenIcon, {}), onClick: () => {
+    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 }), _jsx(MenuItem, { icon: _jsx(Icons.Copy, {}), onClick: () => {
+                            }, 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) && (_jsxs(_Fragment, { children: [_jsx(MenuItem, { icon: _jsx(Icons.Edit, {}), onClick: () => {
-                                        onChangeClick === null || onChangeClick === void 0 ? void 0 : onChangeClick();
-                                    }, children: "Change" }), _jsx(MenuDivider, {}), _jsx(MenuItem, { icon: _jsx(Icons.Delete, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                                        const result = yield openConfirmDialog({
+                            }, 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 === null || result === void 0 ? void 0 : result.confirmed)) {
+                                        if (!result?.confirmed) {
                                             return;
                                         }
-                                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                                    }), children: "Remove" })] }))] }) })] }));
+                                        onChange?.(null);
+                                    }, children: "Remove" })] }))] }) })] }));
 };

package/form/controls/AttachmentsControl.js

@@ -1,41 +1,35 @@
-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());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Caption1, Link, Tag, TagGroup, TagPicker, TagPickerControl, TagPickerList, tokens, } from '@fluentui/react-components';
-import { fileToObject } from '@headless-adminapp/core/utils';
-import { Icons } from '@headless-adminapp/icons';
-import { useRef } from 'react';
-export const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, }) => {
-    const inputRef = useRef(null);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [_jsx(TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: tokens.spacingVerticalXXS }, expandIcon: null, children: _jsxs(TagGroup, { style: {
+"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: tokens.spacingHorizontalXS,
-                                gap: tokens.spacingHorizontalXS,
-                            }, children: [value === null || value === void 0 ? void 0 : value.map((file, index) => (_jsx(Tag, { as: "span", appearance: "brand", size: "small", shape: "rounded", dismissible: !disabled && !readOnly, dismissIcon: _jsx("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                                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 === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.filter((_, i) => i !== index));
-                                        }, children: _jsx(Icons.Close, { size: 16 }) }), children: _jsx(Link, { href: file.url, target: "_blank", onClick: (event) => {
+                                            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: _jsx(Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), !readOnly && !disabled && (_jsx(Button, { size: "small", icon: _jsx(Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
-                                        var _a;
+                                        }, 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;
-                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                    }, children: "Add" }))] }) }), _jsx(TagPickerList, {})] }), _jsx("input", { ref: inputRef, type: "file", multiple: true, style: { display: 'none' }, onChange: (event) => __awaiter(void 0, void 0, void 0, function* () {
+                                        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 === null || files === void 0 ? void 0 : files.length) {
-                        const fileObjects = yield Promise.all(Array.from(files).map((file) => fileToObject(file)));
-                        onChange === null || onChange === void 0 ? void 0 : onChange([...(value !== null && value !== void 0 ? value : []), ...fileObjects]);
+                    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

@@ -1,17 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from '@fluentui/react-components';
-import { useCurrencySymbol } from '@headless-adminapp/app/locale';
-import { useEffect, useRef, useState } from 'react';
-export function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
+"use strict";
+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, }) {
-    const symbol = useCurrencySymbol();
-    const [internalValue, setInternalValue] = useState(value ? value.toString() : '');
-    const internalValueRef = useRef(internalValue);
+    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;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let _value = '';
         if (typeof value === 'number') {
             _value = value.toString();
@@ -27,22 +30,22 @@ readOnly, }) {
         let value = e.target.value;
         if (!value) {
             setInternalValue('');
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            onChange?.(null);
             return;
         }
         value = value.replace(',', '');
         if (value === '-') {
             setInternalValue('-');
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            onChange?.(null);
             return;
         }
         if (isNaN(Number(value))) {
             return;
         }
         setInternalValue(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+        onChange?.(Number(value));
     };
-    return (_jsx(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: _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 }), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/DateControl.js

@@ -1,27 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { DatePicker } from '@fluentui/react-datepicker-compat';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Icons } from '@headless-adminapp/icons';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { useAppStrings } from '../../App/AppStringContext';
-dayjs.extend(utc);
-dayjs.extend(timezone);
-export function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    const { dateFormats, timezone } = useLocale();
-    const { datePickerStrings } = useAppStrings();
-    return (_jsx(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", 
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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, 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?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", 
         // size="sm"
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? dayjs(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? dayjs(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings, contentAfter: _jsx("div", { style: {
+        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: tokens.colorNeutralForeground2,
-            }, children: _jsx(Icons.Calendar, { size: 20 }) }) }));
+                color: react_components_1.tokens.colorNeutralForeground2,
+            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }) }));
 }

package/form/controls/DateRangeControl.js

@@ -1,15 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DatePicker } from '@fluentui/react-datepicker-compat';
-import { useLocale } from '@headless-adminapp/app/locale';
-import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
-import { useAppStrings } from '../../App/AppStringContext';
-export function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
-    const [from, setFrom] = useState(value ? value[0] : null);
-    const [to, setTo] = useState(value ? value[1] : null);
-    const { datePickerStrings } = useAppStrings();
-    const { dateFormats } = useLocale();
-    useEffect(() => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeControl = DateRangeControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
+    const [from, setFrom] = (0, react_1.useState)(value ? value[0] : null);
+    const [to, setTo] = (0, react_1.useState)(value ? value[1] : null);
+    const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
+    const { dateFormats } = (0, locale_1.useLocale)();
+    (0, react_1.useEffect)(() => {
         if (value) {
             setFrom(value[0]);
             setTo(value[1]);
@@ -22,22 +28,20 @@ export function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, d
             : 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 (_jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx(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 ? dayjs(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%' },
-                } }), _jsx(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 ? dayjs(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%' },
                 } })] }));
 }