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

package/App/App.js

@@ -1,8 +1,12 @@
-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 }) }));
+"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 }) }));
 };
+exports.App = App;

package/App/AppHeaderContianer.js

@@ -1,69 +1,75 @@
-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 = useItemsWithKey(app.quickActionItems);
-    const accountMenuItems = useItemsWithKey(app.accountMenuItems);
-    return (_jsxs("div", { style: {
+"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)(() => {
+        return authSession?.fullName
+            .split(' ')
+            .map((item) => item[0])
+            .slice(0, 2)
+            .join('');
+    }, [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: {
             display: 'flex',
             alignItems: 'center',
             height: 50,
             minHeight: 50,
-            background: tokens.colorBrandBackground,
+            background: react_components_1.tokens.colorBrandBackground,
             paddingInline: 8,
             gap: 8,
-        }, children: [_jsxs("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && (_jsx("div", { role: "button", style: {
+        }, 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: {
                             cursor: 'pointer',
-                        }, onClick: onNavToggle, children: _jsx(Hamburger, { style: { color: 'white' } }) })), _jsxs("div", { style: {
+                        }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             cursor: 'pointer',
                             color: 'white',
-                        }, 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: {
+                        }, 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: {
                     paddingLeft: 8,
                     display: 'flex',
                     gap: 16,
-                }, children: [_jsx("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems === null || quickActionItems === void 0 ? void 0 : quickActionItems.map((item) => {
-                            var _a, _b;
-                            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,
-                                    } }) }), _jsxs(PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && (_jsxs("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
+                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
+                        }) }), (!isSkipAuthCheck || !!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: {
+                                        src: 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: {
                                             display: 'flex',
                                             gap: 8,
                                             padding: 8,
                                             overflow: 'hidden',
                                             width: 200,
-                                        }, children: [_jsx("div", { children: _jsx(Avatar, { initials: initials, color: "neutral", image: {
-                                                        src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
-                                                    } }) }), _jsxs("div", { style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", image: {
+                                                        src: authSession?.profilePicture,
+                                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     overflow: 'hidden',
                                                     flex: 1,
-                                                }, 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;
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: 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?.map((item) => {
                                                 const Icon = item.icon;
-                                                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 }))] })] })] }))] })] }));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => item.onClick?.(), children: item.localizedLabel?.[language] ?? 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 }))] })] })] }))] })] }));
 };
+exports.AppHeaderContainer = AppHeaderContainer;

package/App/AppLogo.js

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

package/App/AppStringContext.js

@@ -1,9 +1,13 @@
-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,
+"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,
     loockupStrings: {
         newRecord: 'New Record',
         noRecordsFound: 'No records found',
@@ -12,8 +16,8 @@ export const defaultAppStrings = {
     error: 'Error',
     searchPlaceholder: 'Search...',
 };
-export const AppStringContext = createContext(defaultAppStrings);
-export function useAppStrings() {
-    const context = useContext(AppStringContext);
+exports.AppStringContext = (0, react_1.createContext)(exports.defaultAppStrings);
+function useAppStrings() {
+    const context = (0, react_1.useContext)(exports.AppStringContext);
     return context;
 }

package/App/AppUI.js

@@ -1,16 +1,19 @@
-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(() => {
+"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)(() => {
         setIsNavOpen(!isMobile);
     }, [isMobile]);
-    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: {
+    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: {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,
@@ -18,3 +21,4 @@ export const AppUI = ({ children }) => {
                             overflow: 'hidden',
                         }, children: children })] })] }));
 };
+exports.AppUI = AppUI;

package/App/LayoutProvider.js

@@ -1,25 +1,17 @@
-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;
-};
-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 (_jsx(FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : webLightTheme, children: _jsx(LayoutProviderInternal, Object.assign({}, rest, { containers: {
-                DialogContainer,
-                ProgressIndicatorContainer,
-                ToastNotificationContainer,
-            }, children: children })) }));
+"use strict";
+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 = ({ children, theme, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
+                DialogContainer: DialogContainer_1.DialogContainer,
+                ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
+                ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,
+            }, children: children }) }));
 };
+exports.LayoutProvider = LayoutProvider;

package/App/NavigationContainer.js

@@ -1,13 +1,16 @@
-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({
+"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)({
     root: {
         overflow: 'hidden',
         display: 'flex',
@@ -25,39 +28,36 @@ const useStyles = makeStyles({
         marginTop: '4px',
         marginLeft: '8px',
         flexDirection: 'column',
-        gridRowGap: tokens.spacingVerticalS,
+        gridRowGap: react_components_1.tokens.spacingVerticalS,
     },
 });
-export const NavigationContainer = ({ open, type, onOpenChange, }) => {
+const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
-    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 (_jsx(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, ((_a = item.label) !== null && _a !== void 0 ? _a : '') + String(index)));
-                            })] }, group.label))) }, area.label))) }) }) }));
+    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) => ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, (item.label ?? '') + String(index))))] }, group.label))) }, area.label))) }) }) }));
 };
+exports.NavigationContainer = NavigationContainer;
 const Test = ({ item, onOpenChange, drawerType }) => {
-    var _a, _b;
-    const { schemaMetadataDic } = useAppContext();
-    const router = useRouter();
-    const pathname = usePathname();
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
+    const router = (0, hooks_1.useRouter)();
+    const pathname = (0, hooks_1.usePathname)();
     const selectedPath = pathname;
-    const { language } = useLocale();
-    const isRouteActive = useIsRouteActive();
-    const routeResolver = useRouteResolver();
-    const navItem = transformNavPageItem({
+    const { language } = (0, locale_1.useLocale)();
+    const isRouteActive = (0, hooks_1.useIsRouteActive)();
+    const routeResolver = (0, hooks_1.useRouteResolver)();
+    const navItem = (0, utils_1.transformNavPageItem)({
         item,
         schemaMetadataDic: schemaMetadataDic,
         language,
         routeResolver,
     });
-    const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : Icons.Entity) !== null && _b !== void 0 ? _b : IconPlaceholder;
+    const Icon = navItem.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
     const isActive = isRouteActive(selectedPath, item);
-    return (_jsx(NavItem, { href: navItem.link, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
             if (drawerType === 'overlay') {
                 onOpenChange(false);
             }
             event.preventDefault();
             router.push(navItem.link);
-        }, icon: _jsx(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
+        }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
 };

package/App/QuickActionItem.js

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

package/App/index.js

@@ -1 +1,5 @@
-export { App } from './App';
+"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; } });

package/App/utils.js

@@ -1,14 +1,16 @@
-export function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
-    var _a, _b, _c, _d;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformNavPageItem = transformNavPageItem;
+function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
     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;
+    let label = item.localizedLabel?.[language] ?? item.label;
     let link = routeResolver(item);
     if (item.type === 'entityview') {
-        const metadata = schemaMetadataObject === null || schemaMetadataObject === void 0 ? void 0 : schemaMetadataObject[item.logicalName];
+        const metadata = schemaMetadataObject?.[item.logicalName];
         if (metadata) {
             if (!label) {
                 label =
-                    (_d = (_c = metadata.localizedPluralLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : metadata.pluralLabel;
+                    metadata.localizedPluralLabels?.[language] ?? metadata.pluralLabel;
             }
             if (!icon) {
                 icon = metadata.icon;

package/CommandBar/Button.js

@@ -1,7 +1,10 @@
-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({
+"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)({
     root: {
         fontWeight: 'normal',
         minWidth: 'unset',
@@ -10,24 +13,24 @@ const useStyles = makeStyles({
     },
     danger: {
         '&:hover:not(:disabled)': {
-            color: tokens.colorPaletteRedForeground1,
-            background: tokens.colorPaletteRedBackground1,
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: tokens.colorPaletteRedForeground1,
+                color: react_components_1.tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: tokens.colorPaletteRedForeground2,
-                background: tokens.colorPaletteRedBackground2,
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: tokens.colorPaletteRedForeground2,
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-const ToolbarButtonInternal = ToolbarButton;
-export const CommandButton = memo(forwardRef(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
+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 styles = useStyles();
-    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 }));
+    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 }));
 }));
-CommandButton.displayName = 'CommandButton';
+exports.CommandButton.displayName = 'CommandButton';

package/CommandBar/Divider.js

@@ -1,7 +1,10 @@
-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 } }));
+"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 } }));
 }));
-CommandDivider.displayName = 'CommandDivider';
+exports.CommandDivider.displayName = 'CommandDivider';

package/CommandBar/IconButton.js

@@ -1,29 +1,32 @@
-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({
+"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)({
     root: {
         flexShrink: 0,
     },
     danger: {
         '&:hover': {
-            color: tokens.colorPaletteRedForeground1,
-            background: tokens.colorPaletteRedBackground1,
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: tokens.colorPaletteRedForeground1,
+                color: react_components_1.tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: tokens.colorPaletteRedForeground2,
-                background: tokens.colorPaletteRedBackground2,
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: tokens.colorPaletteRedForeground2,
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-export const CommandIconButton = memo(forwardRef(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
+exports.CommandIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
     const styles = useStyles();
-    return (_jsx(ToolbarButton, { ref: ref, icon: _jsx(Icon, { size: 20 }), disabled: disabled, onClick: onClick, className: mergeClasses(styles.root, danger && styles.danger) }));
+    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) }));
 }));
-CommandIconButton.displayName = 'CommandIconButton';
+exports.CommandIconButton.displayName = 'CommandIconButton';

package/CommandBar/Label.js

@@ -1,7 +1,10 @@
-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({
+"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)({
     root: {
         fontWeight: 'normal',
         minWidth: 'unset',
@@ -9,12 +12,12 @@ const useStyles = makeStyles({
         flexShrink: 0,
         cursor: 'default !important',
         '&:hover:active': {
-            backgroundColor: tokens.colorNeutralBackground2Hover,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2Hover,
         },
     },
 });
-export const CommandLabel = memo(forwardRef(function CommandLabel({ Icon, text }, ref) {
+exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
-    return (_jsx(ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? _jsx(Icon, { size: 20 }) : undefined, className: mergeClasses(styles.root), children: text }));
+    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 }));
 }));
-CommandLabel.displayName = 'CommandLabel';
+exports.CommandLabel.displayName = 'CommandLabel';