@headless-adminapp/fluent 0.0.17-alpha.1

package/App/App.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface AppProps {
+    appId: string;
+}
+export declare const App: FC<PropsWithChildren<AppProps>>;
+export {};

package/App/App.js

@@ -0,0 +1,12 @@
+"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.d.ts

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

package/App/AppHeaderContianer.js

@@ -0,0 +1,67 @@
+"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 app_1 = require("@headless-adminapp/app/app");
+const hooks_1 = require("@headless-adminapp/app/auth/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 = () => {
+    var _a, _b;
+    const { app } = (0, app_1.useAppContext)();
+    const authSession = (0, hooks_1.useAuthSession)();
+    const logout = (0, hooks_1.useLogout)();
+    const strings = (0, AppStringContext_1.useAppStrings)();
+    const { language } = (0, locale_1.useLocale)();
+    const initials = (0, react_1.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]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: 50,
+            minHeight: 50,
+            background: react_components_1.tokens.colorBrandBackground,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    paddingLeft: 20,
+                    paddingRight: 8,
+                    cursor: 'pointer',
+                    color: 'white',
+                }, children: [(0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: app.title })] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    display: 'flex',
+                    gap: 16,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: (_a = app.quickActionItems) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+                            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 }, index));
+                        }) }), (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 === null || authSession === void 0 ? void 0 : authSession.profilePicture,
+                                    } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [(0, jsx_runtime_1.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: {
+                                                        src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
+                                                    } }) }), (0, jsx_runtime_1.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 })] })] }), (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: [(_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+                                                var _a, _b;
+                                                const Icon = item.icon;
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), 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 }, index));
+                                            }), (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.d.ts

@@ -0,0 +1,8 @@
+import { AppExperience } from '@headless-adminapp/core/experience/app';
+import { FC } from 'react';
+interface AppLogoProps {
+    logo: AppExperience['logo'];
+    title: string;
+}
+export declare const AppLogo: FC<AppLogoProps>;
+export {};

package/App/AppLogo.js

@@ -0,0 +1,17 @@
+"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 }) => {
+    var _a;
+    if (logo.Icon) {
+        const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+        return (0, jsx_runtime_1.jsx)(Icon, { size: 24 });
+    }
+    if (logo.image) {
+        return ((0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 24, height: 24 } }));
+    }
+    return null;
+};
+exports.AppLogo = AppLogo;

package/App/AppProvider.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface AppProviderProps {
+    appId: string;
+    loadingComponent: React.ReactNode;
+    notFoundComponent: React.ReactNode;
+}
+/*** @todo: move to app */
+export declare const AppProvider: FC<PropsWithChildren<AppProviderProps>>;
+export {};

package/App/AppProvider.js

@@ -0,0 +1,50 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const app_1 = require("@headless-adminapp/app/app");
+const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+/*** @todo: move to app */
+const AppProvider = ({ children, appId, loadingComponent, notFoundComponent, }) => {
+    const experienceStore = (0, hooks_1.useExperienceStore)();
+    const appStore = (0, hooks_1.useAppStore)();
+    const { data: schemaMetadataList } = (0, react_query_1.useQuery)({
+        queryKey: ['experience-schema-metadata-list'],
+        queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
+            return experienceStore.getExperienceSchemaMetadatList();
+        }),
+        initialData: [],
+    });
+    const { data: app, isLoading } = (0, react_query_1.useQuery)({
+        queryKey: ['experience-app', appId],
+        queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
+            return appStore.getApp(appId);
+        }),
+    });
+    const schemaMetadataDic = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = schemaMetadataList === null || schemaMetadataList === void 0 ? void 0 : schemaMetadataList.reduce((acc, item) => {
+            acc[item.logicalName] = item;
+            return acc;
+        }, {})) !== null && _a !== void 0 ? _a : {};
+    }, [schemaMetadataList]);
+    if (isLoading) {
+        return loadingComponent;
+    }
+    if (!app) {
+        return notFoundComponent;
+    }
+    return ((0, jsx_runtime_1.jsx)(app_1.AppContext.Provider, { value: { app, schemaMetadataDic, schemaMetadataList }, children: children }));
+};
+exports.AppProvider = AppProvider;

package/App/AppStringContext.d.ts

@@ -0,0 +1,16 @@
+import { CalendarStrings } from '@fluentui/react-datepicker-compat';
+import { OperatorStrings } from '@headless-adminapp/app/datagrid/column-filter';
+export interface AppStringSet {
+    datePickerStrings: CalendarStrings;
+    loockupStrings: {
+        newRecord: string;
+        noRecordsFound: string;
+    };
+    operatorStrings: OperatorStrings;
+    logout: string;
+    error: string;
+    searchPlaceholder: string;
+}
+export declare const defaultAppStrings: AppStringSet;
+export declare const AppStringContext: import("react").Context<AppStringSet>;
+export declare function useAppStrings(): AppStringSet;

package/App/AppStringContext.js

@@ -0,0 +1,23 @@
+"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',
+    },
+    logout: 'Logout',
+    error: 'Error',
+    searchPlaceholder: 'Search...',
+};
+exports.AppStringContext = (0, react_1.createContext)(exports.defaultAppStrings);
+function useAppStrings() {
+    const context = (0, react_1.useContext)(exports.AppStringContext);
+    return context;
+}

package/App/AppUI.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const AppUI: FC<PropsWithChildren>;

package/App/AppUI.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppUI = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppHeaderContianer_1 = require("./AppHeaderContianer");
+const NavigationContainer_1 = require("./NavigationContainer");
+const AppUI = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                            position: 'relative',
+                            overflow: 'hidden',
+                        }, children: children })] })] }));
+};
+exports.AppUI = AppUI;

package/App/NavigationContainer.d.ts

@@ -0,0 +1 @@
+export declare const NavigationContainer: () => import("react/jsx-runtime").JSX.Element;

package/App/NavigationContainer.js

@@ -0,0 +1,63 @@
+"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',
+        flexShrink: 0,
+    },
+    content: {
+        flex: '1',
+        padding: '16px',
+        display: 'grid',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    field: {
+        display: 'flex',
+        marginTop: '4px',
+        marginLeft: '8px',
+        flexDirection: 'column',
+        gridRowGap: react_components_1.tokens.spacingVerticalS,
+    },
+});
+const NavigationContainer = () => {
+    const styles = useStyles();
+    const { app, schemaMetadataDic } = (0, app_1.useAppContext)();
+    const [isOpen] = (0, react_1.useState)(true);
+    const [type] = (0, react_1.useState)('inline');
+    const router = (0, hooks_1.useRouter)();
+    const pathname = (0, hooks_1.usePathname)();
+    const selectedPath = pathname;
+    const { language } = (0, locale_1.useLocale)();
+    const isRouteActive = (0, hooks_1.useIsRouteActive)();
+    const routeResolver = (0, hooks_1.useRouteResolver)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, 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) => {
+                                var _a;
+                                const navItem = (0, utils_1.transformNavPageItem)({
+                                    item,
+                                    schemaMetadataDic: schemaMetadataDic,
+                                    language,
+                                    routeResolver,
+                                });
+                                const Icon = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+                                const isActive = isRouteActive(selectedPath, item);
+                                return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
+                                        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 }, index));
+                            })] }, group.label))) }, area.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;

package/App/QuickActionItem.d.ts

@@ -0,0 +1,10 @@
+import { Icon } from '@headless-adminapp/icons';
+import { FC } from 'react';
+interface QuickActionItemProps {
+    label: string;
+    Icon: Icon;
+    link?: string;
+    onClick?: () => void;
+}
+export declare const QuickActionItem: FC<QuickActionItemProps>;
+export {};

package/App/QuickActionItem.js

@@ -0,0 +1,32 @@
+"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)',
+        transition: 'background 0.3s',
+        '&:hover': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.1)',
+        },
+        '&:active': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.2)',
+        },
+        '&:focus': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.2)',
+        },
+    },
+});
+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, {}), 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.d.ts

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

package/App/index.js

@@ -0,0 +1,5 @@
+"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.d.ts

@@ -0,0 +1,14 @@
+import { InternalRouteResolver } from '@headless-adminapp/app/route/context';
+import { NavPageItem } from '@headless-adminapp/core/experience/app';
+import { SchemaExperienceMetadata } from '@headless-adminapp/core/experience/schema';
+export declare function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }: {
+    item: NavPageItem;
+    schemaMetadataDic: Record<string, SchemaExperienceMetadata>;
+    language: string;
+    routeResolver: InternalRouteResolver;
+}): {
+    label: string | undefined;
+    icon: import("@headless-adminapp/icons").Icon | undefined;
+    link: string;
+    isExternal: boolean;
+};

package/App/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformNavPageItem = transformNavPageItem;
+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;
+    let link = routeResolver(item);
+    if (item.type === 'entityview') {
+        const metadata = schemaMetadataObject === null || schemaMetadataObject === void 0 ? void 0 : 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;
+            }
+            if (!icon) {
+                icon = metadata.icon;
+            }
+        }
+    }
+    return {
+        label,
+        icon,
+        link,
+        isExternal: item.type === 'external',
+    };
+}

package/CommandBar/Button.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+import { Icon } from '@headless-adminapp/icons';
+export interface CommandButtonProps {
+    Icon: Icon;
+    iconPosition?: 'before' | 'after';
+    text: string;
+    danger?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+export declare const CommandButton: ForwardRefComponent<CommandButtonProps>;

package/CommandBar/Button.js

@@ -0,0 +1,36 @@
+"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',
+        textWrap: 'nowrap',
+        flexShrink: 0,
+    },
+    danger: {
+        '&:hover:not(:disabled)': {
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
+            '& .fui-Button__icon': {
+                color: react_components_1.tokens.colorPaletteRedForeground1,
+            },
+            '&:active': {
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
+                '& .fui-Button__icon': {
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                },
+            },
+        },
+    },
+});
+const ToolbarButtonInternal = react_components_1.ToolbarButton;
+exports.CommandButton = (0, react_1.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 }));
+});
+exports.CommandButton.displayName = 'CommandButton';

package/CommandBar/Divider.d.ts

@@ -0,0 +1,2 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+export declare const CommandDivider: ForwardRefComponent<{}>;

package/CommandBar/Divider.js

@@ -0,0 +1,10 @@
+"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.forwardRef)(function CommandDivider(_, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarDivider, { ref: ref, style: { paddingInline: react_components_1.tokens.spacingHorizontalXS } }));
+});
+exports.CommandDivider.displayName = 'CommandDivider';

package/CommandBar/IconButton.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+import { Icon } from '@headless-adminapp/icons';
+export interface CommandIconButtonProps {
+    Icon: Icon;
+    disabled?: boolean;
+    onClick?: () => void;
+    danger?: boolean;
+}
+export declare const CommandIconButton: ForwardRefComponent<CommandIconButtonProps>;

package/CommandBar/IconButton.js

@@ -0,0 +1,32 @@
+"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: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
+            '& .fui-Button__icon': {
+                color: react_components_1.tokens.colorPaletteRedForeground1,
+            },
+            '&:active': {
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
+                '& .fui-Button__icon': {
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                },
+            },
+        },
+    },
+});
+exports.CommandIconButton = (0, react_1.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) }));
+});
+exports.CommandIconButton.displayName = 'CommandIconButton';

package/CommandBar/Label.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+import { Icon } from '@headless-adminapp/icons';
+export interface CommandLabelProps {
+    Icon?: Icon;
+    text: string;
+}
+export declare const CommandLabel: ForwardRefComponent<CommandLabelProps>;

package/CommandBar/Label.js

@@ -0,0 +1,23 @@
+"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',
+        textWrap: 'nowrap',
+        flexShrink: 0,
+        cursor: 'default !important',
+        '&:hover:active': {
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2Hover,
+        },
+    },
+});
+exports.CommandLabel = (0, react_1.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 }));
+});
+exports.CommandLabel.displayName = 'CommandLabel';

package/CommandBar/MenuButton.d.ts

@@ -0,0 +1,13 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
+import { Icon } from '@headless-adminapp/icons';
+import { MenuItemProps } from './MenuItem';
+export interface CommandMenuButtonProps {
+    Icon: Icon;
+    text: string;
+    disabled?: boolean;
+    danger?: boolean;
+    onClick?: () => void;
+    items: ArrayGroupWithAtLeastOne<MenuItemProps>;
+}
+export declare const CommandMenuButton: ForwardRefComponent<CommandMenuButtonProps>;

package/CommandBar/MenuButton.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandMenuButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const MenuList_1 = require("./MenuList");
+const useStyles = (0, react_components_1.makeStyles)({
+    splitButton: {
+        '& > button:first-child': {
+            fontWeight: react_components_1.tokens.fontWeightRegular,
+            borderRightColor: react_components_1.tokens.colorNeutralStroke3,
+        },
+    },
+    menuButton: {
+        fontWeight: react_components_1.tokens.fontWeightRegular,
+    },
+    splitButtonDanger: {
+        '& > button:first-child:hover': {
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
+            '& .fui-Button__icon': {
+                color: react_components_1.tokens.colorPaletteRedForeground1,
+            },
+            '&:active': {
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
+                '& .fui-Button__icon': {
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                },
+            },
+        },
+    },
+});
+exports.CommandMenuButton = (0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
+    const styles = useStyles();
+    return (
+    // <div ref={ref}>
+    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
+    // </div>
+    );
+});
+exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.d.ts

@@ -0,0 +1,11 @@
+import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
+import { Icon } from '@headless-adminapp/icons';
+export interface MenuItemProps {
+    Icon: Icon;
+    text: string;
+    disabled?: boolean;
+    danger?: boolean;
+    onClick: (() => void) | undefined;
+    items?: ArrayGroupWithAtLeastOne<MenuItemProps>;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;