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

package/PageEntityForm/UploadImageDialog.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadImageDialog = 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/dataform/hooks");
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const transport_1 = require("@headless-adminapp/app/transport");
+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");
+const avatar_1 = require("../utils/avatar");
+const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open, onOpenChange, }) => {
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const fileService = (0, transport_1.useFileService)();
+    const [file, setFile] = (0, react_1.useState)(null); // new file (indicate if file is changed)
+    const [fileUrl, setFileUrl] = (0, react_1.useState)(null); // file url, indicate that file is either selected or changed
+    const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
+    (0, react_1.useEffect)(() => {
+        setFileUrl(currentImage?.url ?? null);
+    }, [currentImage?.url]);
+    const handleSelectFile = () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = async (e) => {
+            const files = e.target.files;
+            if (!files?.length) {
+                return;
+            }
+            const _file = files[0];
+            setFile(_file);
+            const dataUrl = await (0, utils_1.readFileAsDataURL)(_file);
+            setFileUrl(dataUrl);
+        };
+        input.click();
+    };
+    const { isPending, mutate: handleApply } = (0, react_query_1.useMutation)({
+        mutationFn: async () => {
+            if (!fileService) {
+                throw new Error('File service is not available');
+            }
+            if (file) {
+                const url = await fileService.uploadFile(file, {
+                    context: {
+                        type: 'entity-form',
+                        recordId,
+                        attributeName: schema.avatarAttribute,
+                        logicalName: schema.logicalName,
+                    },
+                });
+                onChange?.({
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    url,
+                });
+            }
+            else {
+                onChange?.(null);
+            }
+            onOpenChange(false);
+        },
+        onError: (error) => {
+            console.error(error);
+            openErrorDialog({
+                title: 'Error',
+                text: 'Unable to upload image',
+            });
+        },
+    });
+    // No image - No image selected - Upload Image
+    // No image - Image selected - Change, Cancel
+    // Image - Not changed - Upload Image, Use Default
+    // Image - Removed - Change, Cancel
+    // Image - Changed - Change, Cancel
+    const isFileChanged = (fileUrl ?? null) !== (currentImage?.url ?? null);
+    const showUploadImage = !isFileChanged;
+    const showChangeImage = !!isFileChanged;
+    const showResetImage = !isFileChanged && !!fileUrl;
+    const showCancel = isFileChanged;
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: open, onOpenChange: (e, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { action: "close", children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}) }) }), children: "Choose Image" }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: "Upload an image from your device, or use the default image" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        marginTop: react_components_1.tokens.spacingVerticalM,
+                                        marginBottom: react_components_1.tokens.spacingVerticalM,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { shape: "square", style: { width: 120, height: 120 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
+                                            src: fileUrl ?? undefined,
+                                        } }) })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [showChangeImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => handleApply(), style: {
+                                    whiteSpace: 'nowrap',
+                                    fontWeight: 'normal',
+                                }, disabled: isPending, children: isPending ? 'Changing...' : 'Change' })), showUploadImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: handleSelectFile, style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, children: "Upload Image" })), showResetImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, onClick: () => {
+                                    setFileUrl(null);
+                                    setFile(null);
+                                }, children: "Reset to Default" })), showCancel && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, onClick: () => {
+                                    setFileUrl(currentImage?.url ?? null);
+                                    setFile(null);
+                                }, children: "Cancel" }))] })] }) }) }));
+};
+exports.UploadImageDialog = UploadImageDialog;

package/PageEntityView/FormSubgridContainer.js

@@ -35,11 +35,14 @@ const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
                     }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
-                        gap: 40,
+                        gap: 10,
                         overflow: 'hidden',
                         width: '100%',
                         paddingBlock: 4,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                flex: 1,
+                                minWidth: 0,
+                            }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'end',

package/PageEntityView/FormSubgridNotAvailableContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FormSubgridNotAvailableContainer: FC;

package/PageEntityView/FormSubgridNotAvailableContainer.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSubgridNotAvailableContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+const FormSubgridViewSelector_1 = require("../DataGrid/FormSubgridViewSelector");
+const PageEntityViewStringContext_1 = require("./PageEntityViewStringContext");
+const FormSubgridNotAvailableContainer = () => {
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                // gap: 12,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                // overflow: 'hidden',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        height: 40,
+                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            gap: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                flex: 1,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexDirection: 'column',
+                                gap: react_components_1.tokens.spacingVerticalM,
+                                minHeight: 300,
+                                color: react_components_1.tokens.colorNeutralForeground3,
+                            }, children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Grid, { size: 48 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: strings.subgridNotAvailable })] }) }) })] }) }));
+};
+exports.FormSubgridNotAvailableContainer = FormSubgridNotAvailableContainer;

package/PageEntityView/PageEntityView.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
 const icons_1 = require("@headless-adminapp/icons");
 const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
 const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
+const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer");
 const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
+    const isMobile = (0, hooks_1.useIsMobile)();
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
@@ -17,6 +20,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, commands, viewLookup, view } = result;
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: isMobile ? ((0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {})) : ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {})) }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewDesktopFrame.js

@@ -25,6 +25,7 @@ const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) =>
                         background: react_components_1.tokens.colorNeutralBackground1,
                         display: 'flex',
                         // overflow: 'hidden',
+                        minHeight: 40,
                     }, children: commandBar }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         flex: 1,
                         display: 'flex',

package/PageEntityView/PageEntityViewMobileContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityViewMobileContainer: FC;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewMobileContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CommandContainer_1 = require("../DataGrid/CommandContainer");
+const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
+const GridListContainer_1 = require("../DataGrid/GridListContainer");
+const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewMobileContainer = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+};
+exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/PageEntityView/PageEntityViewStringContext.d.ts

@@ -17,6 +17,8 @@ export interface PageEntityViewStringSet {
     filter: string;
     clearFilter: string;
     filterBy: string;
+    noRecordsFound: string;
+    subgridNotAvailable: string;
 }
 export declare const defaultPageEntityViewStrings: PageEntityViewStringSet;
 export declare const PageEntityViewStringContext: import("react").Context<PageEntityViewStringSet>;

package/PageEntityView/PageEntityViewStringContext.js

@@ -22,6 +22,8 @@ exports.defaultPageEntityViewStrings = {
     filter: 'Filter',
     sortByDescending: 'Sort by descending',
     filterBy: 'Filter by',
+    noRecordsFound: "We didn't find anything to show here",
+    subgridNotAvailable: 'Save the record to view associated records.',
 };
 exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
 function usePageEntityViewStrings() {

package/PageInsights/PageInsights.d.ts

@@ -0,0 +1,9 @@
+import { InsightExpereince, InsightLookup } from '@headless-adminapp/core/experience/insights';
+export declare function createInsightLookup(insights: InsightExpereince[]): InsightLookup[];
+interface PageInsightsProps {
+    insights: InsightExpereince[];
+    insightId: string;
+    onChangeInsight: (id: string) => void;
+}
+export declare function PageInsights({ insightId, insights, onChangeInsight, }: PageInsightsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/PageInsights/PageInsights.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsightLookup = createInsightLookup;
+exports.PageInsights = PageInsights;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InsightsProvider_1 = require("@headless-adminapp/app/insights/InsightsProvider");
+const react_1 = require("react");
+const InsightsContainer_1 = require("../Insights/InsightsContainer");
+function createInsightLookup(insights) {
+    return insights.map((insight) => ({
+        id: insight.id,
+        title: insight.title,
+        subtitle: insight.subtitle,
+    }));
+}
+function PageInsights({ insightId, insights, onChangeInsight, }) {
+    const insightExpereince = (0, react_1.useMemo)(() => {
+        return insights.find((insight) => insight.id === insightId);
+    }, [insightId, insights]);
+    const insightLookups = (0, react_1.useMemo)(() => createInsightLookup(insights), [insights]);
+    if (!insightExpereince) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InsightsProvider_1.InsightsProvider, { experience: insightExpereince, insightLookup: insightLookups, onInsightSelect: onChangeInsight, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }));
+}

package/PageInsights/index.d.ts

@@ -0,0 +1 @@
+export { PageInsights, createInsightLookup } from './PageInsights';

package/PageInsights/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsightLookup = exports.PageInsights = void 0;
+var PageInsights_1 = require("./PageInsights");
+Object.defineProperty(exports, "PageInsights", { enumerable: true, get: function () { return PageInsights_1.PageInsights; } });
+Object.defineProperty(exports, "createInsightLookup", { enumerable: true, get: function () { return PageInsights_1.createInsightLookup; } });

package/ToastNotificationContainer/index.js

@@ -18,7 +18,6 @@ const Item = ({ item, toasterId, }) => {
     const closeToastNotification = (0, hooks_1.useCloseToastNotification)();
     const opened = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        var _a;
         if (!item.isOpen) {
             dismissToast(item.id);
             return;
@@ -27,7 +26,7 @@ const Item = ({ item, toasterId, }) => {
             return;
         }
         opened.current = true;
-        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [(0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
+        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [(0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!item.actions?.length && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
             timeout: 2000,
             intent: item.type,
             pauseOnHover: true,

package/componentStore.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStore } from '@headless-adminapp/app/store';
+export declare const componentStore: ComponentStore;

package/componentStore.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStore = void 0;
+const store_1 = require("@headless-adminapp/app/store");
+exports.componentStore = new store_1.ComponentStore();

package/components/BodyLoading.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 interface BodyLoadingProps {
-    loading: boolean;
+    loading?: boolean;
 }
 export declare const BodyLoading: FC<BodyLoadingProps>;
 export {};

package/components/BodyLoading.js

@@ -7,13 +7,18 @@ const BodyLoading = ({ loading }) => {
     if (!loading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'rgba(255, 255, 255, 0.5)',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                    opacity: 0.7,
+                    zIndex: 1,
+                } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }));
 };
 exports.BodyLoading = BodyLoading;

package/components/DndProvider.d.ts

@@ -0,0 +1,12 @@
+import type { BackendFactory } from 'dnd-core';
+import { FC, PropsWithChildren } from 'react';
+import type * as ReactDndTypes from 'react-dnd';
+interface DndContextState {
+    DndProvider: typeof ReactDndTypes.DndProvider;
+    backend: BackendFactory;
+    useDrag: typeof ReactDndTypes.useDrag;
+    useDrop: typeof ReactDndTypes.useDrop;
+}
+export declare const DndProvider: FC<PropsWithChildren>;
+export declare function useDndContext(): DndContextState;
+export {};

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 } })] }) }));