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

package/App/App.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.App = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const app_1 = require("@headless-adminapp/app/app");
-const BodyLoading_1 = require("../components/BodyLoading");
-const PageBroken_1 = require("../components/PageBroken");
-const AppUI_1 = require("./AppUI");
-const App = ({ appId, children }) => {
-    return ((0, jsx_runtime_1.jsx)(app_1.AppProvider, { appId: appId, loadingComponent: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: true }), notFoundComponent: (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "App not found" }), children: (0, jsx_runtime_1.jsx)(AppUI_1.AppUI, { children: children }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppProvider } from '@headless-adminapp/app/app';
+import { BodyLoading } from '../components/BodyLoading';
+import { PageBroken } from '../components/PageBroken';
+import { AppUI } from './AppUI';
+export const App = ({ appId, children }) => {
+    return (_jsx(AppProvider, { appId: appId, loadingComponent: _jsx(BodyLoading, { loading: true }), notFoundComponent: _jsx(PageBroken, { title: "App not found" }), children: _jsx(AppUI, { children: children }) }));
 };
-exports.App = App;

package/App/AppHeaderContianer.js

@@ -1,73 +1,69 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppHeaderContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
-const app_1 = require("@headless-adminapp/app/app");
-const hooks_1 = require("@headless-adminapp/app/auth/hooks");
-const useIsSkipAuthCheck_1 = require("@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck");
-const hooks_2 = require("@headless-adminapp/app/hooks");
-const locale_1 = require("@headless-adminapp/app/locale");
-const icons_1 = require("@headless-adminapp/icons");
-const react_1 = require("react");
-const AppLogo_1 = require("./AppLogo");
-const AppStringContext_1 = require("./AppStringContext");
-const QuickActionItem_1 = require("./QuickActionItem");
-const AppHeaderContainer = ({ onNavToggle, }) => {
-    const { app } = (0, app_1.useAppContext)();
-    const authSession = (0, hooks_1.useAuthSession)();
-    const isSkipAuthCheck = (0, useIsSkipAuthCheck_1.useIsSkipAuthCheck)();
-    const logout = (0, hooks_1.useLogout)();
-    const strings = (0, AppStringContext_1.useAppStrings)();
-    const { language } = (0, locale_1.useLocale)();
-    const isMobile = (0, hooks_2.useIsMobile)();
-    const initials = (0, react_1.useMemo)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Caption1, Caption1Strong, MenuDivider, MenuItem, MenuList, Popover, PopoverSurface, PopoverTrigger, Subtitle2, tokens, } from '@fluentui/react-components';
+import { Hamburger } from '@fluentui/react-nav-preview';
+import { useAppContext } from '@headless-adminapp/app/app';
+import { useAuthSession, useLogout } from '@headless-adminapp/app/auth/hooks';
+import { useIsSkipAuthCheck } from '@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck';
+import { useIsMobile, useItemsWithKey } from '@headless-adminapp/app/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { Icons } from '@headless-adminapp/icons';
+import { useMemo } from 'react';
+import { AppLogo } from './AppLogo';
+import { useAppStrings } from './AppStringContext';
+import { QuickActionItem } from './QuickActionItem';
+export const AppHeaderContainer = ({ onNavToggle, }) => {
+    const { app } = useAppContext();
+    const authSession = useAuthSession();
+    const isSkipAuthCheck = useIsSkipAuthCheck();
+    const logout = useLogout();
+    const strings = useAppStrings();
+    const { language } = useLocale();
+    const isMobile = useIsMobile();
+    const initials = useMemo(() => {
         return authSession === null || authSession === void 0 ? void 0 : authSession.fullName.split(' ').map((item) => item[0]).slice(0, 2).join('');
     }, [authSession === null || authSession === void 0 ? void 0 : authSession.fullName]);
-    const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
-    const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    const quickActionItems = useItemsWithKey(app.quickActionItems);
+    const accountMenuItems = useItemsWithKey(app.accountMenuItems);
+    return (_jsxs("div", { style: {
             display: 'flex',
             alignItems: 'center',
             height: 50,
             minHeight: 50,
-            background: react_components_1.tokens.colorBrandBackground,
+            background: tokens.colorBrandBackground,
             paddingInline: 8,
             gap: 8,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
+        }, children: [_jsxs("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && (_jsx("div", { role: "button", style: {
                             cursor: 'pointer',
-                        }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, onClick: onNavToggle, children: _jsx(Hamburger, { style: { color: 'white' } }) })), _jsxs("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             cursor: 'pointer',
                             color: 'white',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: (0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: [_jsx("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: _jsx(AppLogo, { logo: app.logo, title: app.title }) }), _jsx(Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), _jsxs("div", { style: {
                     paddingLeft: 8,
                     display: 'flex',
                     gap: 16,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems === null || quickActionItems === void 0 ? void 0 : quickActionItems.map((item) => {
+                }, children: [_jsx("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems === null || quickActionItems === void 0 ? void 0 : quickActionItems.map((item) => {
                             var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, item.__key));
-                        }) }), (!isSkipAuthCheck || !!(accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.length)) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+                            return (_jsx(QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, item.__key));
+                        }) }), (!isSkipAuthCheck || !!(accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.length)) && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
                                         src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
-                                    } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }) }), _jsxs(PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && (_jsxs("div", { style: {
                                             display: 'flex',
                                             gap: 8,
                                             padding: 8,
                                             overflow: 'hidden',
                                             width: 200,
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", image: {
+                                        }, children: [_jsx("div", { children: _jsx(Avatar, { initials: initials, color: "neutral", image: {
                                                         src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
-                                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    } }) }), _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     overflow: 'hidden',
                                                     flex: 1,
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.map((item) => {
+                                                }, children: [_jsx(Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), _jsx(Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] })), !isSkipAuthCheck && _jsx(MenuDivider, { style: { marginInline: 0 } }), _jsxs(MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.map((item) => {
                                                 var _a, _b;
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, item.__key));
-                                            }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
+                                                return (_jsx(MenuItem, { icon: _jsx(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, item.__key));
+                                            }), !isSkipAuthCheck && (_jsx(MenuItem, { icon: _jsx(Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
 };
-exports.AppHeaderContainer = AppHeaderContainer;

package/App/AppLogo.js

@@ -1,29 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppLogo = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@headless-adminapp/icons");
-const AppLogo = ({ logo, title }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconPlaceholder } from '@headless-adminapp/icons';
+export const AppLogo = ({ logo, title }) => {
     var _a;
     if (logo.Icon) {
-        const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : IconPlaceholder;
+        return (_jsx("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 width: 32,
                 height: 32,
-            }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) }));
+            }, children: _jsx(Icon, { size: 24 }) }));
     }
     if (logo.image) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 width: 32,
                 height: 32,
-            }, children: (0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 32, height: 32 } }) }));
+            }, children: _jsx("img", { src: logo.image, alt: title, style: { width: 32, height: 32 } }) }));
     }
     return null;
 };
-exports.AppLogo = AppLogo;

package/App/AppStringContext.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppStringContext = exports.defaultAppStrings = void 0;
-exports.useAppStrings = useAppStrings;
-const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
-const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
-const react_1 = require("react");
-exports.defaultAppStrings = {
-    datePickerStrings: react_datepicker_compat_1.defaultDatePickerStrings,
-    operatorStrings: column_filter_1.defaultOperatorStrings,
+import { defaultDatePickerStrings, } from '@fluentui/react-datepicker-compat';
+import { defaultOperatorStrings, } from '@headless-adminapp/app/datagrid/column-filter';
+import { createContext, useContext } from 'react';
+export const defaultAppStrings = {
+    datePickerStrings: defaultDatePickerStrings,
+    operatorStrings: defaultOperatorStrings,
     loockupStrings: {
         newRecord: 'New Record',
         noRecordsFound: 'No records found',
@@ -16,8 +12,8 @@ exports.defaultAppStrings = {
     error: 'Error',
     searchPlaceholder: 'Search...',
 };
-exports.AppStringContext = (0, react_1.createContext)(exports.defaultAppStrings);
-function useAppStrings() {
-    const context = (0, react_1.useContext)(exports.AppStringContext);
+export const AppStringContext = createContext(defaultAppStrings);
+export function useAppStrings() {
+    const context = useContext(AppStringContext);
     return context;
 }

package/App/AppUI.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppUI = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("@headless-adminapp/app/hooks");
-const react_1 = require("react");
-const AppHeaderContianer_1 = require("./AppHeaderContianer");
-const NavigationContainer_1 = require("./NavigationContainer");
-const AppUI = ({ children }) => {
-    const isMobile = (0, hooks_1.useIsMobile)();
-    const [isNavOpen, setIsNavOpen] = (0, react_1.useState)(!isMobile);
-    const navType = (0, react_1.useMemo)(() => (isMobile ? 'overlay' : 'inline'), [isMobile]);
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIsMobile } from '@headless-adminapp/app/hooks';
+import { useEffect, useMemo, useState } from 'react';
+import { AppHeaderContainer } from './AppHeaderContianer';
+import { NavigationContainer } from './NavigationContainer';
+export const AppUI = ({ children }) => {
+    const isMobile = useIsMobile();
+    const [isNavOpen, setIsNavOpen] = useState(!isMobile);
+    const navType = useMemo(() => (isMobile ? 'overlay' : 'inline'), [isMobile]);
+    useEffect(() => {
         setIsNavOpen(!isMobile);
     }, [isMobile]);
-    return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, { onNavToggle: () => setIsNavOpen(!isNavOpen) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, { open: isNavOpen, type: navType, onOpenChange: (open) => setIsNavOpen(open) }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [_jsx(AppHeaderContainer, { onNavToggle: () => setIsNavOpen(!isNavOpen) }), _jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [_jsx(NavigationContainer, { open: isNavOpen, type: navType, onOpenChange: (open) => setIsNavOpen(open) }), _jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,
@@ -21,4 +18,3 @@ const AppUI = ({ children }) => {
                             overflow: 'hidden',
                         }, children: children })] })] }));
 };
-exports.AppUI = AppUI;

package/App/LayoutProvider.js

@@ -1,4 +1,3 @@
-"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)
@@ -10,20 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const LayoutProvider_1 = require("@headless-adminapp/app/app/LayoutProvider");
-const DialogContainer_1 = require("../DialogContainer");
-const ProgressIndicatorContainer_1 = require("../ProgressIndicatorContainer");
-const ToastNotificationContainer_1 = require("../ToastNotificationContainer");
-const LayoutProvider = (_a) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FluentProvider, webLightTheme, } from '@fluentui/react-components';
+import { LayoutProvider as LayoutProviderInternal, } from '@headless-adminapp/app/app/LayoutProvider';
+import { DialogContainer } from '../DialogContainer';
+import { ProgressIndicatorContainer } from '../ProgressIndicatorContainer';
+import { ToastNotificationContainer } from '../ToastNotificationContainer';
+export const LayoutProvider = (_a) => {
     var { children, theme } = _a, rest = __rest(_a, ["children", "theme"]);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, Object.assign({}, rest, { containers: {
-                DialogContainer: DialogContainer_1.DialogContainer,
-                ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
-                ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,
+    return (_jsx(FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : webLightTheme, children: _jsx(LayoutProviderInternal, Object.assign({}, rest, { containers: {
+                DialogContainer,
+                ProgressIndicatorContainer,
+                ToastNotificationContainer,
             }, children: children })) }));
 };
-exports.LayoutProvider = LayoutProvider;

package/App/NavigationContainer.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
-const app_1 = require("@headless-adminapp/app/app");
-const locale_1 = require("@headless-adminapp/app/locale");
-const hooks_1 = require("@headless-adminapp/app/route/hooks");
-const icons_1 = require("@headless-adminapp/icons");
-const react_1 = require("react");
-const utils_1 = require("./utils");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { NavDrawer, NavDrawerBody, NavItem, NavSectionHeader, } from '@fluentui/react-nav-preview';
+import { useAppContext } from '@headless-adminapp/app/app';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useIsRouteActive, usePathname, useRouter, useRouteResolver, } from '@headless-adminapp/app/route/hooks';
+import { IconPlaceholder, Icons } from '@headless-adminapp/icons';
+import { Fragment } from 'react';
+import { transformNavPageItem } from './utils';
+const useStyles = makeStyles({
     root: {
         overflow: 'hidden',
         display: 'flex',
@@ -28,40 +25,39 @@ const useStyles = (0, react_components_1.makeStyles)({
         marginTop: '4px',
         marginLeft: '8px',
         flexDirection: 'column',
-        gridRowGap: react_components_1.tokens.spacingVerticalS,
+        gridRowGap: tokens.spacingVerticalS,
     },
 });
-const NavigationContainer = ({ open, type, onOpenChange, }) => {
+export const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
-    const { app } = (0, app_1.useAppContext)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
+    const { app } = useAppContext();
+    return (_jsx("div", { className: styles.root, children: _jsx(NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: _jsx(NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => (_jsx(Fragment, { children: area.groups.map((group) => (_jsxs(Fragment, { children: [!group.hideLabel && (_jsx(NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, ((_a = item.label) !== null && _a !== void 0 ? _a : '') + String(index)));
+                                return (_jsx(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, ((_a = item.label) !== null && _a !== void 0 ? _a : '') + String(index)));
                             })] }, group.label))) }, area.label))) }) }) }));
 };
-exports.NavigationContainer = NavigationContainer;
 const Test = ({ item, onOpenChange, drawerType }) => {
     var _a, _b;
-    const { schemaMetadataDic } = (0, app_1.useAppContext)();
-    const router = (0, hooks_1.useRouter)();
-    const pathname = (0, hooks_1.usePathname)();
+    const { schemaMetadataDic } = useAppContext();
+    const router = useRouter();
+    const pathname = usePathname();
     const selectedPath = pathname;
-    const { language } = (0, locale_1.useLocale)();
-    const isRouteActive = (0, hooks_1.useIsRouteActive)();
-    const routeResolver = (0, hooks_1.useRouteResolver)();
-    const navItem = (0, utils_1.transformNavPageItem)({
+    const { language } = useLocale();
+    const isRouteActive = useIsRouteActive();
+    const routeResolver = useRouteResolver();
+    const navItem = transformNavPageItem({
         item,
         schemaMetadataDic: schemaMetadataDic,
         language,
         routeResolver,
     });
-    const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : icons_1.IconPlaceholder;
+    const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : Icons.Entity) !== null && _b !== void 0 ? _b : IconPlaceholder;
     const isActive = isRouteActive(selectedPath, item);
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
+    return (_jsx(NavItem, { href: navItem.link, onClick: (event) => {
             if (drawerType === 'overlay') {
                 onOpenChange(false);
             }
             event.preventDefault();
             router.push(navItem.link);
-        }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
+        }, icon: _jsx(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
 };

package/App/QuickActionItem.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickActionItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, makeStyles } from '@fluentui/react-components';
+const useStyles = makeStyles({
     root: {
         color: 'rgba(255, 255, 255, 1) !important',
         background: 'rgba(0, 0, 0, 0)',
@@ -22,11 +19,10 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const QuickActionItem = ({ label, Icon, onClick, link, }) => {
+export const QuickActionItem = ({ label, Icon, onClick, link, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
+    return (_jsx(Button, { icon: _jsx(Icon, { size: "inherit" }), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
             onClick === null || onClick === void 0 ? void 0 : onClick();
         } }));
 };
-exports.QuickActionItem = QuickActionItem;

package/App/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.App = void 0;
-var App_1 = require("./App");
-Object.defineProperty(exports, "App", { enumerable: true, get: function () { return App_1.App; } });
+export { App } from './App';

package/App/utils.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformNavPageItem = transformNavPageItem;
-function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
+export function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
     var _a, _b, _c, _d;
     let icon = item.icon;
     let label = (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label;

package/CommandBar/Button.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_1 = require("react");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses, tokens, ToolbarButton, } from '@fluentui/react-components';
+import { forwardRef, memo } from 'react';
+const useStyles = makeStyles({
     root: {
         fontWeight: 'normal',
         minWidth: 'unset',
@@ -13,24 +10,24 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
     danger: {
         '&:hover:not(:disabled)': {
-            color: react_components_1.tokens.colorPaletteRedForeground1,
-            background: react_components_1.tokens.colorPaletteRedBackground1,
+            color: tokens.colorPaletteRedForeground1,
+            background: tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: react_components_1.tokens.colorPaletteRedForeground1,
+                color: tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: react_components_1.tokens.colorPaletteRedForeground2,
-                background: react_components_1.tokens.colorPaletteRedBackground2,
+                color: tokens.colorPaletteRedForeground2,
+                background: tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                    color: tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-const ToolbarButtonInternal = react_components_1.ToolbarButton;
-exports.CommandButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
+const ToolbarButtonInternal = ToolbarButton;
+export const CommandButton = memo(forwardRef(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(ToolbarButtonInternal, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, iconPosition: iconPosition, disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger), children: text }));
+    return (_jsx(ToolbarButtonInternal, { ref: ref, type: "button", icon: !!Icon ? _jsx(Icon, { size: 20 }) : undefined, iconPosition: iconPosition, disabled: disabled, onClick: onClick, className: mergeClasses(styles.root, danger && styles.danger), children: text }));
 }));
-exports.CommandButton.displayName = 'CommandButton';
+CommandButton.displayName = 'CommandButton';

package/CommandBar/Divider.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandDivider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_1 = require("react");
-exports.CommandDivider = (0, react_1.memo)((0, react_1.forwardRef)(function CommandDivider(_, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarDivider, { ref: ref, style: { paddingInline: react_components_1.tokens.spacingHorizontalXS } }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokens, ToolbarDivider, } from '@fluentui/react-components';
+import { forwardRef, memo } from 'react';
+export const CommandDivider = memo(forwardRef(function CommandDivider(_, ref) {
+    return (_jsx(ToolbarDivider, { ref: ref, style: { paddingInline: tokens.spacingHorizontalXS } }));
 }));
-exports.CommandDivider.displayName = 'CommandDivider';
+CommandDivider.displayName = 'CommandDivider';

package/CommandBar/IconButton.js

@@ -1,32 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandIconButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_1 = require("react");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses, tokens, ToolbarButton, } from '@fluentui/react-components';
+import { forwardRef, memo } from 'react';
+const useStyles = makeStyles({
     root: {
         flexShrink: 0,
     },
     danger: {
         '&:hover': {
-            color: react_components_1.tokens.colorPaletteRedForeground1,
-            background: react_components_1.tokens.colorPaletteRedBackground1,
+            color: tokens.colorPaletteRedForeground1,
+            background: tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: react_components_1.tokens.colorPaletteRedForeground1,
+                color: tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: react_components_1.tokens.colorPaletteRedForeground2,
-                background: react_components_1.tokens.colorPaletteRedBackground2,
+                color: tokens.colorPaletteRedForeground2,
+                background: tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                    color: tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-exports.CommandIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
+export const CommandIconButton = memo(forwardRef(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger) }));
+    return (_jsx(ToolbarButton, { ref: ref, icon: _jsx(Icon, { size: 20 }), disabled: disabled, onClick: onClick, className: mergeClasses(styles.root, danger && styles.danger) }));
 }));
-exports.CommandIconButton.displayName = 'CommandIconButton';
+CommandIconButton.displayName = 'CommandIconButton';

package/CommandBar/Label.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandLabel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_1 = require("react");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses, tokens, ToolbarButton, } from '@fluentui/react-components';
+import { forwardRef, memo } from 'react';
+const useStyles = makeStyles({
     root: {
         fontWeight: 'normal',
         minWidth: 'unset',
@@ -12,12 +9,12 @@ const useStyles = (0, react_components_1.makeStyles)({
         flexShrink: 0,
         cursor: 'default !important',
         '&:hover:active': {
-            backgroundColor: react_components_1.tokens.colorNeutralBackground2Hover,
+            backgroundColor: tokens.colorNeutralBackground2Hover,
         },
     },
 });
-exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
+export const CommandLabel = memo(forwardRef(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
+    return (_jsx(ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? _jsx(Icon, { size: 20 }) : undefined, className: mergeClasses(styles.root), children: text }));
 }));
-exports.CommandLabel.displayName = 'CommandLabel';
+CommandLabel.displayName = 'CommandLabel';