@headless-adminapp/fluent 0.0.17-alpha.52 → 0.0.17-alpha.55

package/components/DndProvider.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DndProvider = void 0;
+exports.useDndContext = useDndContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DndProviderIntenral = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-dnd'))).then((mod) => ({ default: mod.DndProvider })));
+let ReactDndPromise = null;
+let HTML5BackendPromise = null;
+const DndContext = (0, react_1.createContext)(null);
+const DndProvider = ({ children }) => {
+    const [context, setContext] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!HTML5BackendPromise) {
+            HTML5BackendPromise = Promise.resolve().then(() => __importStar(require('react-dnd-html5-backend'))).then((mod) => mod.HTML5Backend);
+        }
+        if (!ReactDndPromise) {
+            ReactDndPromise = Promise.resolve().then(() => __importStar(require('react-dnd')));
+        }
+        Promise.all([HTML5BackendPromise, ReactDndPromise])
+            .then(([backend, mod]) => {
+            setContext({
+                DndProvider: mod.DndProvider,
+                backend: backend,
+                useDrag: mod.useDrag,
+                useDrop: mod.useDrop,
+            });
+        })
+            .catch((err) => {
+            console.error(err);
+        });
+    }, []);
+    if (!context) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(DndContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(DndProviderIntenral, { backend: context.backend, children: children }) }));
+};
+exports.DndProvider = DndProvider;
+function useDndContext() {
+    const context = (0, react_1.useContext)(DndContext);
+    if (!context) {
+        throw new Error('useDndContext must be used within DndProvider');
+    }
+    return context;
+}

package/components/LoginForm.js

@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginForm = LoginForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -56,19 +47,18 @@ function LoginForm(props) {
         defaultValues: initialValues,
         resolver: (0, yup_1.yupResolver)(validationSchema),
     });
-    const handleOnSubmit = (values) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
+    const handleOnSubmit = async (values) => {
         form.clearErrors();
         try {
-            yield props.onLogin((_a = values.username) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim(), values.password);
+            await props.onLogin(values.username?.toLowerCase().trim(), values.password);
         }
         catch (error) {
             form.setError('root', {
                 type: 'manual',
-                message: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : 'An error occurred',
+                message: error?.message ?? 'An error occurred',
             });
         }
-    });
+    };
     return ((0, jsx_runtime_1.jsx)("form", { onSubmit: form.handleSubmit(handleOnSubmit), children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -88,13 +78,7 @@ function LoginForm(props) {
                         alignItems: 'stretch',
                         justifyContent: 'flex-start',
                         gap: 16,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => {
-                                var _a, _b, _c;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted }) }));
-                            } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => {
-                                var _a, _b, _c;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
-                            } }), !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
                                 marginTop: 8,
                                 pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
                             }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));

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 };
 };
@@ -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,42 +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)(DecimalControl_1.DecimalControl, 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)));
+            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, { value: value, onChange: onChange, ...rest }));
         default:
             return (0, jsx_runtime_1.jsx)("div", {});
     }
 }
 function FormControl(props) {
     const { label, id, onChange } = props;
-    const _id = (0, react_1.useMemo)(() => id !== null && id !== void 0 ? id : (0, uuid_1.v4)(), [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.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,19 +11,19 @@ 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: (file) => __awaiter(this, void 0, void 0, function* () {
+        mutationFn: async (file) => {
             if (location === 'local') {
                 return (0, utils_1.fileToObject)(file);
             }
             else {
-                const url = yield fileService.uploadFile(file, {
+                const url = await fileService.uploadFile(file, {
                     context: fileServiceContext,
                 });
                 return (0, utils_1.urlToFileObject)(url);
             }
-        }),
+        },
         onSuccess: (fileObject) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange(fileObject);
+            onChange?.(fileObject);
         },
         onError: (error) => {
             console.error(error);
@@ -48,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 {
@@ -209,17 +200,17 @@ const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick
                             }, children: OpenText }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
                                 navigator.clipboard.writeText(value.url).catch(() => { });
                             }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
-                                        onChangeClick === null || onChangeClick === void 0 ? void 0 : onChangeClick();
-                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                                        const result = yield openConfirmDialog({
+                                        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,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentsControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,25 +12,24 @@ const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly,
                                 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: () => {
+                            }, 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));
+                                            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: () => {
-                                        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* () {
+                                        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) => (0, utils_1.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

@@ -30,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 ((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 ((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

@@ -18,12 +18,12 @@ 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", 
+    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).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 ? (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',

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.js

@@ -35,15 +35,15 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
             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) => {
+        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => 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) => {
                     if (!date) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                        onChange?.(null);
                     }
                     else if (!value) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
+                        onChange?.((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
                     }
                     else {
-                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
+                        onChange?.((0, dayjs_1.default)(date)
                             .tz(timezone, true)
                             .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
                             .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
@@ -66,7 +66,7 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         ? (0, dayjs_1.default)(value).tz(timezone)
                         : (0, dayjs_1.default)().tz(timezone);
                     if (data.selectedTime) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
+                        onChange?.(dateValue
                             .set('hour', data.selectedTime.getHours())
                             .set('minute', data.selectedTime.getMinutes())
                             .toISOString());
@@ -82,14 +82,14 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                             .set('minute', resolvedTime.getMinutes())
                             .toISOString();
                         if (newValue !== value) {
-                            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                            onChange?.(newValue);
                         }
                         setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
                     }
                 }, onInput: (e) => {
                     setInternalTimeValue(e.currentTarget.value);
                 }, onBlur: () => {
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                    onBlur?.();
                 }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         alignItems: 'center',

package/form/controls/DecimalControl.js

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

package/form/controls/DurationControl.js

@@ -123,11 +123,11 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }
                 if (newValue !== null) {
                     console.log('onBlur', newValue);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                    onChange?.(newValue);
                 }
                 setSearchText(getDisplayValue(newValue));
                 setFilterEnabled(false);
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                onBlur?.();
             }, onFocus: onFocus, id: id, autoFocus: autoFocus, onChange: (e) => {
                 setFilterEnabled(true);
                 setSearchText(e.target.value);
@@ -137,7 +137,7 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     return;
                 }
                 else {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(item.optionValue));
+                    onChange?.(Number(item.optionValue));
                 }
                 setSearchText('');
             }, children: filteredItems.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item.value, children: item.text }, item.value))) }) }));

package/form/controls/EmailControl.js

@@ -9,11 +9,11 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         // size="sm"
         value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
-                ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())
+                ? onChange?.(e.target.value.toUpperCase())
                 : textTransform === 'lowercase'
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toLowerCase())
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+                    ? onChange?.(e.target.value.toLowerCase())
+                    : onChange?.(e.target.value);
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         disabled: disabled, readOnly: readOnly, autoComplete: autoComplete, style: {
             flex: 1,

package/form/controls/IntegerControl.js

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

package/form/controls/LookupControl.d.ts

@@ -11,6 +11,7 @@ export type DataLookup = {
     id: string;
     name: string;
     logicalName: string;
+    avatar?: string;
 };
 export type LookupControlProps = ControlProps<DataLookup> & {
     async?: boolean;