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

package/form/controls/AttachmentControl.js

@@ -1,4 +1,3 @@
-"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) {
@@ -8,27 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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");
+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';
 function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
-    const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
-    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+    const openErrorDialog = useOpenErrorDialog();
+    const { isPending, mutate: handleFile } = useMutation({
         mutationFn: (file) => __awaiter(this, void 0, void 0, function* () {
             if (location === 'local') {
-                return (0, utils_1.fileToObject)(file);
+                return fileToObject(file);
             }
             else {
                 const url = yield fileService.uploadFile(file, {
                     context: fileServiceContext,
                 });
-                return (0, utils_1.urlToFileObject)(url);
+                return urlToFileObject(url);
             }
         }),
         onSuccess: (fileObject) => {
@@ -71,49 +68,49 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
         onChange,
     });
     if (!value) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx("div", { style: { position: 'relative', display: 'flex' }, children: _jsx("div", { style: {
                     width: 100,
                     height: 100,
-                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
-                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    backgroundColor: tokens.colorNeutralBackground2,
+                    borderRadius: tokens.borderRadiusMedium,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    color: react_components_1.tokens.colorNeutralForeground4,
+                    color: 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, {}) }) }));
+                }, onClick: () => selectFile('image/*'), children: isProcessing ? _jsx(Spinner, { size: "small" }) : _jsx(Icons.Image, {}) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsx("div", { style: { position: 'relative', display: 'flex' }, children: _jsxs("div", { style: {
                 maxWidth: '100%',
                 height: 100,
                 position: 'relative',
-            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
+            }, children: [_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: {
+                        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: {
                                 position: 'absolute',
                                 inset: 0,
-                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                                backgroundColor: tokens.colorNeutralBackground1,
                                 opacity: 0.7,
-                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            } }), _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" }) })] }))] }) }));
+                            }, children: _jsx(Spinner, { size: "small" }) })] }))] }) }));
 };
-const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+export 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)(() => {
+    const accept = useMemo(() => {
         switch (format) {
             case 'image':
                 return 'image/*';
@@ -127,74 +124,73 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                 return '';
         }
     }, [format]);
-    const FormatIcon = (0, react_1.useMemo)(() => {
+    const FormatIcon = useMemo(() => {
         switch (format) {
             case 'video':
-                return icons_1.Icons.Video;
+                return Icons.Video;
             case 'audio':
-                return icons_1.Icons.Audio;
+                return Icons.Audio;
             default:
-                return icons_1.Icons.Document;
+                return 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 }));
+        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 }));
     }
     if (!value) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx("div", { style: { position: 'relative', overflow: 'hidden' }, children: _jsx("div", { style: {
                     width: '100%',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: _jsxs("div", { style: {
                         width: '100%',
                         height: 30,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
-                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        borderRadius: tokens.borderRadiusMedium,
+                        backgroundColor: tokens.colorNeutralBackground2,
                         display: 'flex',
-                        paddingLeft: react_components_1.tokens.spacingHorizontalS,
-                        gap: react_components_1.tokens.spacingHorizontalS,
+                        paddingLeft: tokens.spacingHorizontalS,
+                        gap: tokens.spacingHorizontalS,
                         alignItems: 'center',
                         overflow: 'hidden',
-                        color: react_components_1.tokens.colorNeutralForeground4,
+                        color: 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: {
+                    }, onClick: () => selectFile(accept), children: [_jsx(FormatIcon, { size: 16 }), _jsx(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" }) }))] }) }) }));
+                            }, children: placeholder || 'Select a file' }), isProcessing && (_jsx("div", { style: { paddingRight: tokens.spacingHorizontalS }, children: _jsx(Spinner, { size: "extra-tiny" }) }))] }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: { position: 'relative', overflow: 'hidden' }, children: _jsx("div", { style: {
                 width: '100%',
-            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: _jsxs("div", { style: {
                     width: '100%',
                     height: 30,
-                    borderRadius: react_components_1.tokens.borderRadiusMedium,
-                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    borderRadius: tokens.borderRadiusMedium,
+                    backgroundColor: tokens.colorNeutralBackground2,
                     display: 'flex',
-                    paddingLeft: react_components_1.tokens.spacingHorizontalS,
-                    gap: react_components_1.tokens.spacingHorizontalS,
+                    paddingLeft: tokens.spacingHorizontalS,
+                    gap: 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: {
+                }, children: [_jsx(FormatIcon, { size: 16 }), _jsx(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) }))] }) }) }));
+                        }, 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) }))] }) }) }));
 };
-exports.AttachmentControl = AttachmentControl;
 const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick, }) => {
-    const openConfirmDialog = (0, hooks_1.useOpenConfirmDialog)();
-    const FileOpenIcon = (0, react_1.useMemo)(() => {
+    const openConfirmDialog = useOpenConfirmDialog();
+    const FileOpenIcon = useMemo(() => {
         switch (format) {
             case 'video':
             case 'audio':
-                return icons_1.Icons.Play;
+                return Icons.Play;
             default:
-                return icons_1.Icons.OpenInNew;
+                return Icons.OpenInNew;
         }
     }, [format]);
-    const OpenText = (0, react_1.useMemo)(() => {
+    const OpenText = useMemo(() => {
         switch (format) {
             case 'video':
                 return 'Play';
@@ -204,13 +200,13 @@ const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick
                 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: () => {
+    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: () => {
                                 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: () => {
+                            }, children: OpenText }), _jsx(MenuItem, { icon: _jsx(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: () => {
+                            }, 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" }), (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* () {
+                                    }, children: "Change" }), _jsx(MenuDivider, {}), _jsx(MenuItem, { icon: _jsx(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?',

package/form/controls/AttachmentsControl.js

@@ -1,4 +1,3 @@
-"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) {
@@ -8,38 +7,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-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: {
+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: {
                                 flexWrap: 'wrap',
-                                columnGap: react_components_1.tokens.spacingHorizontalXS,
-                                gap: react_components_1.tokens.spacingHorizontalXS,
-                            }, children: [value === null || value === void 0 ? void 0 : 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: () => {
+                                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: () => {
                                             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: (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) => {
+                                        }, children: _jsx(Icons.Close, { size: 16 }) }), children: _jsx(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: () => {
+                                        }, 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;
                                         if (readOnly)
                                             return;
                                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.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: (event) => __awaiter(void 0, void 0, void 0, function* () {
+                                    }, 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* () {
                     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) => (0, utils_1.fileToObject)(file)));
+                        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]);
                     }
                 }) })] }));
 };
-exports.AttachmentsControl = AttachmentsControl;

package/form/controls/CurrencyControl.js

@@ -1,20 +1,17 @@
-"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, 
+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, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, }) {
-    const symbol = (0, locale_1.useCurrencySymbol)();
-    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
-    const internalValueRef = (0, react_1.useRef)(internalValue);
+    const symbol = useCurrencySymbol();
+    const [internalValue, setInternalValue] = useState(value ? value.toString() : '');
+    const internalValueRef = useRef(internalValue);
     internalValueRef.current = internalValue;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let _value = '';
         if (typeof value === 'number') {
             _value = value.toString();
@@ -45,7 +42,7 @@ readOnly, }) {
         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: {
+    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: {
             width: '100%',
         } }));
 }

package/form/controls/DateControl.js

@@ -1,33 +1,27 @@
-"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 === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", 
+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", 
         // size="sm"
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        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 === null || onChange === void 0 ? void 0 : onChange(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+        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: {
                 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 }) }) }));
+                color: tokens.colorNeutralForeground2,
+            }, children: _jsx(Icons.Calendar, { size: 20 }) }) }));
 }

package/form/controls/DateRangeControl.js

@@ -1,21 +1,15 @@
-"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)(() => {
+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(() => {
         if (value) {
             setFrom(value[0]);
             setTo(value[1]);
@@ -41,9 +35,9 @@ function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled
         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]);
         // }
     };
-    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 (_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: {
                     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: {
+                } }), _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: {
                     style: { width: '100%' },
                 } })] }));
 }

package/form/controls/DateTimeControl.js

@@ -1,70 +1,64 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimeControl = DateTimeControl;
-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 react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
-const locale_1 = require("@headless-adminapp/app/locale");
-const icons_1 = require("@headless-adminapp/icons");
-const dayjs_1 = __importDefault(require("dayjs"));
-const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
-const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
-const utc_1 = __importDefault(require("dayjs/plugin/utc"));
-const react_1 = require("react");
-dayjs_1.default.extend(customParseFormat_1.default);
-dayjs_1.default.extend(utc_1.default);
-dayjs_1.default.extend(timezone_1.default);
-function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
-    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
-    const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@fluentui/react-components';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { Icons } from '@headless-adminapp/icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useEffect, useRef, useState } from 'react';
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
+    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = useLocale();
+    const [internalTimeValue, setInternalTimeValue] = useState(value ? dayjs(value).tz(timezone).format(timeFormat) : '');
+    const internalTimeValueRef = useRef(internalTimeValue);
     internalTimeValueRef.current = internalTimeValue;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const updatedValue = value
-            ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
+            ? dayjs(value).tz(timezone).format(timeFormat)
             : '';
         if (internalTimeValueRef.current !== updatedValue) {
             setInternalTimeValue(updatedValue);
         }
     }, [value, timezone, timeFormat]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             display: 'flex',
             alignItems: 'center',
-            gap: react_components_1.tokens.spacingHorizontalS,
-        }, 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: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+            gap: tokens.spacingHorizontalS,
+        }, 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: placeholder, appearance: "filled-darker", formatDate: (date) => date ? dayjs(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
                     if (!date) {
                         onChange === null || onChange === void 0 ? void 0 : onChange(null);
                     }
                     else if (!value) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
+                        onChange === null || onChange === void 0 ? void 0 : onChange(dayjs(date).tz(timezone, true).toISOString());
                     }
                     else {
-                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
+                        onChange === null || onChange === void 0 ? void 0 : onChange(dayjs(date)
                             .tz(timezone, true)
-                            .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
-                            .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
+                            .set('hour', dayjs(value).tz(timezone).hour())
+                            .set('minute', dayjs(value).tz(timezone).minute())
                             .toISOString());
                     }
                 }, 
                 // allowTextInput={true}
-                contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+                contentAfter: _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 }) }), style: { flex: 1 }, input: {
+                        color: tokens.colorNeutralForeground2,
+                    }, children: _jsx(Icons.Calendar, { size: 20 }) }), style: { flex: 1 }, input: {
                     style: { minWidth: 0, width: '100%' },
-                } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
+                } }), _jsx(TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
                     style: { minWidth: 0 },
                 }, readOnly: readOnly || disabled || !value, selectedTime: value ? new Date(value) : null, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
                     const dateValue = value
-                        ? (0, dayjs_1.default)(value).tz(timezone)
-                        : (0, dayjs_1.default)().tz(timezone);
+                        ? dayjs(value).tz(timezone)
+                        : dayjs().tz(timezone);
                     if (data.selectedTime) {
                         onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
                             .set('hour', data.selectedTime.getHours())
@@ -74,7 +68,7 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                     else if (data.selectedTimeText) {
                         let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
                         if (!resolvedTime) {
-                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
+                            setInternalTimeValue(value ? dayjs(value).format(timeFormat) : '');
                             return;
                         }
                         const newValue = dateValue
@@ -84,25 +78,25 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         if (newValue !== value) {
                             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                         }
-                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
+                        setInternalTimeValue(newValue ? dayjs(newValue).tz(timezone).format(timeFormat) : '');
                     }
                 }, onInput: (e) => {
                     setInternalTimeValue(e.currentTarget.value);
                 }, onBlur: () => {
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-                }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
+                }, expandIcon: _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.Clock, { size: 20 }) }) })] }));
+                        color: tokens.colorNeutralForeground2,
+                    }, children: _jsx(Icons.Clock, { size: 20 }) }) })] }));
 }
 function resolveTimeValue(value, timeFormat) {
     if (!value) {
         return;
     }
-    const time = (0, dayjs_1.default)(value, timeFormat);
+    const time = dayjs(value, timeFormat);
     if (!time.isValid()) {
         return;
     }