@headless-adminapp/fluent 1.1.12 → 1.2.0

package/DataGrid/GridHeaderDesktop.js

@@ -10,6 +10,7 @@ const react_1 = require("react");
 const AppStringContext_1 = require("../App/AppStringContext");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const CustomizeColumns_1 = require("./CustomizeColumns");
+const GridQuickFilterDesktop_1 = require("./GridQuickFilterDesktop");
 const GridHeaderDesktop = (props) => {
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
@@ -20,19 +21,23 @@ const GridHeaderDesktop = (props) => {
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            alignItems: 'center',
-            paddingInline: 8,
-            gap: 16,
             display: 'flex',
-        }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            paddingInline: 8,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     alignItems: 'center',
                     gap: 16,
-                    justifyContent: 'space-between',
                     display: 'flex',
-                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
-                                    fontSize: react_components_1.tokens.fontSizeBase400,
-                                    fontWeight: react_components_1.tokens.fontWeightMedium,
-                                }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), appearance: "filled-darker" })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: 1,
+                            alignItems: 'center',
+                            gap: 16,
+                            justifyContent: 'space-between',
+                            display: 'flex',
+                        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
+                                            fontSize: react_components_1.tokens.fontSizeBase400,
+                                            fontWeight: react_components_1.tokens.fontWeightMedium,
+                                        }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), appearance: "filled-darker" })] })] }), (0, jsx_runtime_1.jsx)(GridQuickFilterDesktop_1.GridQuickFilterDesktop, {})] }));
 };
 exports.GridHeaderDesktop = GridHeaderDesktop;

package/DataGrid/GridQuickFilterDesktop.d.ts

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

package/DataGrid/GridQuickFilterDesktop.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridQuickFilterDesktop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useQuickFilter_1 = require("@headless-adminapp/app/datagrid/hooks/useQuickFilter");
+const SectionControl_1 = require("../DataForm/SectionControl");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+const GridQuickFilterDesktop = () => {
+    const [quickFilter, values, setValue] = (0, useQuickFilter_1.useQuickFilter)();
+    if (!quickFilter) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            gap: react_components_1.tokens.spacingHorizontalS,
+            paddingInline: react_components_1.tokens.spacingHorizontalM,
+        }, children: Object.entries(quickFilter.attributes).map(([key, attribute]) => {
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: key, value: values[key] ?? null, onChange: (value) => setValue(key, value) }) }) }, key));
+        }) }));
+};
+exports.GridQuickFilterDesktop = GridQuickFilterDesktop;

package/DataGrid/useTableColumns.js

@@ -287,7 +287,18 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
     }
     if (column.component) {
-        const Component = componentStore_1.componentStore.getComponent(column.component);
+        let Component;
+        if (column.component) {
+            if (typeof column.component === 'function') {
+                Component = column.component;
+            }
+            else if (typeof column.component === 'string') {
+                const OverrideControl = componentStore_1.componentStore.getComponent(column.component);
+                if (OverrideControl) {
+                    Component = OverrideControl;
+                }
+            }
+        }
         if (!Component) {
             throw new Error(`Component with name ${column.component} not found`);
         }

package/Insights/charts/PieChart.js

@@ -29,7 +29,7 @@ function PieChart({ dataset, chartInfo, }) {
                         overflow: 'auto',
                         top: 5,
                         bottom: 5,
-                    } })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                    }, formatter: nameFormatter })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ payload }) => renderTooltipContent({

package/PageBoard/Header.js

@@ -8,6 +8,7 @@ const hooks_2 = require("@headless-adminapp/app/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const AppStringContext_1 = require("../App/AppStringContext");
+const HeaderQuickFilter_1 = require("./HeaderQuickFilter");
 const Header = ({ title, subtitle }) => {
     const client = (0, react_query_1.useQueryClient)();
     const schema = (0, hooks_1.useBoardSchema)();
@@ -21,13 +22,17 @@ const Header = ({ title, subtitle }) => {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            alignItems: isMobile ? 'flex-start' : 'center',
-            gap: react_components_1.tokens.spacingHorizontalM,
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+            flexDirection: 'column',
+            gap: 16,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
-                    alignItems: 'center',
-                    gap: react_components_1.tokens.spacingHorizontalS,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }));
+                    flexDirection: isMobile ? 'column' : 'row',
+                    alignItems: isMobile ? 'flex-start' : 'center',
+                    gap: react_components_1.tokens.spacingHorizontalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: subtitle })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: react_components_1.tokens.spacingHorizontalS,
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }), (0, jsx_runtime_1.jsx)(HeaderQuickFilter_1.HeaderQuickFilter, {})] }));
 };
 exports.Header = Header;

package/PageBoard/HeaderQuickFilter.d.ts

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

package/PageBoard/HeaderQuickFilter.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderQuickFilter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useQuickFilter_1 = require("@headless-adminapp/app/board/hooks/useQuickFilter");
+const SectionControl_1 = require("../DataForm/SectionControl");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+const HeaderQuickFilter = () => {
+    const [quickFilter, values, setValue] = (0, useQuickFilter_1.useQuickFilter)();
+    if (!quickFilter) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            gap: react_components_1.tokens.spacingHorizontalS,
+        }, children: Object.entries(quickFilter.attributes).map(([key, attribute]) => {
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: key, value: values[key] ?? null, onChange: (value) => setValue(key, value) }) }) }, key));
+        }) }));
+};
+exports.HeaderQuickFilter = HeaderQuickFilter;

package/PageBoard/PageBoard.js

@@ -14,11 +14,13 @@ function PageBoard(props) {
     const contextValue = (0, context_2.useCreateContextStore)({
         config: props.config,
         searchText: '',
+        quickFilterValues: props.config.quickFilter?.defaultValues ?? {},
     });
     (0, react_1.useEffect)(() => {
         contextValue.setValue({
             config: props.config,
             searchText: '',
+            quickFilterValues: props.config.quickFilter?.defaultValues ?? {},
         });
     }, [contextValue, props.config]);
     return ((0, jsx_runtime_1.jsx)(context_1.BoardContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsxs)("div", { style: {

package/PageCalendar/CalendarSection.d.ts

@@ -1,4 +1,4 @@
-import { DateSelectArg, EventClickArg, EventInput } from '@fullcalendar/core';
+import { DateSelectArg, EventInput } from '@fullcalendar/core';
 import { ViewType } from './types';
 interface CalendarSectionProps {
     startDate: Date | null;
@@ -12,9 +12,8 @@ interface CalendarSectionProps {
         viewType: ViewType;
     }) => void;
     events: EventInput[];
-    onEventClick?: (event: EventClickArg) => void;
     onDateSelect?: (event: DateSelectArg) => void;
     loading?: boolean;
 }
-export declare const CalendarSection: ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, onEventClick, loading, }: Readonly<CalendarSectionProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarSection: ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, loading, }: Readonly<CalendarSectionProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/PageCalendar/CalendarSection.js

@@ -26,7 +26,7 @@ const ViewSelector_1 = require("./ViewSelector");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
 dayjs_1.default.extend(isoWeek_1.default);
-const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, onEventClick, loading, }) => {
+const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events, onDateSelect, loading, }) => {
     const calendarRef = (0, react_2.useRef)(null);
     const { timezone } = (0, locale_1.useLocale)();
     const isMobile = (0, hooks_1.useIsMobile)();
@@ -130,7 +130,7 @@ const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events,
                         }, children: (0, jsx_runtime_1.jsx)(ViewSelector_1.ViewSelector, { viewType: viewType, onChange: (viewType) => {
                                 calendarRef.current?.getApi().changeView(viewType);
                                 calendarRef.current?.getApi().scrollToTime(initialScrollTime);
-                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.default, { ref: calendarRef, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], initialView: types_1.ViewType.Month, weekends: true, firstDay: 1, events: events, datesSet: handleDateRangeChange, select: onDateSelect, eventClick: onEventClick, eventContent: renderEventContent_1.renderEventContent, timeZone: timezone, height: "100%", nowIndicator: true, scrollTime: initialScrollTime, scrollTimeReset: false, editable: false, selectable: true, selectMirror: true, dayMaxEvents: true, eventMinHeight: 24, eventTimeFormat: (props) => {
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.default, { ref: calendarRef, plugins: [daygrid_1.default, timegrid_1.default, interaction_1.default], initialView: types_1.ViewType.Month, weekends: true, firstDay: 1, events: events, datesSet: handleDateRangeChange, select: onDateSelect, eventContent: renderEventContent_1.renderEventContent, timeZone: timezone, height: "100%", nowIndicator: true, scrollTime: initialScrollTime, scrollTimeReset: false, editable: false, selectable: true, selectMirror: true, dayMaxEvents: true, eventMinHeight: 24, eventTimeFormat: (props) => {
                                 return (0, dayjs_1.default)(props.start.marker).tz(timezone).format('hh:mm A');
                             }, headerToolbar: false }) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: loading })] })] }));
 };

package/PageCalendar/EventDialog/EventDialog.d.ts

@@ -15,9 +15,6 @@ interface EventDialogProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2
     }) => Promise<void>;
     onCancel?: () => void;
     onDismiss?: () => void;
-    allowOpenRecord?: boolean;
-    onOpenRecord?: (id: string) => void;
-    onDelete?: (id: string) => void;
     eventResolver?: CalendarEventResolverFn;
     config: CalendarConfig;
 }

package/PageCalendar/EventDialog/EventDialog.js

@@ -17,5 +17,5 @@ function defineEventAttributes(beforeDescriptionAttributes, afterDescriptionAttr
 function EventDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.isOpen, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(EventFormBody_1.EventFormBody, { values: props.values, config: props.config, onCancel: props.onCancel, onSubmit: props.onSubmit, allowOpenRecord: props.allowOpenRecord, onOpenRecord: props.onOpenRecord, onDelete: props.onDelete }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(EventFormBody_1.EventFormBody, { values: props.values, config: props.config, onCancel: props.onCancel, onSubmit: props.onSubmit }) }) }));
 }

package/PageCalendar/EventDialog/EventFormBody.d.ts

@@ -9,9 +9,6 @@ interface EventFormBodyProps<SA1 extends SchemaAttributes = SchemaAttributes, SA
         values: Nullable<InferredSchemaType<BaseEventAttributes>>;
     }) => Promise<void>;
     onCancel?: () => void;
-    allowOpenRecord?: boolean;
-    onOpenRecord?: (id: string) => void;
-    onDelete?: (id: string) => void;
     config: CalendarConfig;
 }
 export declare function EventFormBody(props: Readonly<EventFormBodyProps>): import("react/jsx-runtime").JSX.Element;

package/PageCalendar/EventDialog/EventFormBody.js

@@ -7,7 +7,6 @@ const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEvent
 const saveRecord_1 = require("@headless-adminapp/app/dataform/utils/saveRecord");
 const form_1 = require("@headless-adminapp/app/form");
 const locale_1 = require("@headless-adminapp/app/locale");
-const icons_fluent_1 = require("@headless-adminapp/icons-fluent");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -54,22 +53,12 @@ function EventFormBody(props) {
     (0, react_1.useEffect)(() => {
         formRef.current.reset(defaultValues);
     }, [defaultValues]);
-    const menuItems = [];
-    if (props.allowOpenRecord) {
-        menuItems.push((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.OpenInNew, { size: 20 }), onClick: () => props.onOpenRecord?.(props.values.id), children: "Open" }, "open"));
-    }
-    if (!props.config.disableEdit) {
-        menuItems.push((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Delete, { size: 20 }), onClick: () => props.onDelete?.(props.values.id), children: "Delete" }, "delete"));
-    }
     let title = (props.values.id ? 'Edit' : 'New') +
         ` ${props.config.eventLabel.toLowerCase()}`;
-    if (props.values.id && props.config.disableEdit) {
+    if (props.values.id) {
         title = props.config.eventLabel;
     }
-    let readOnly = props.values.id
-        ? props.config.disableEdit
-        : props.config.disableCreate;
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: props.values.id && menuItems.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems }) })] })) : null, children: title }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes, readOnly: readOnly, config: props.config }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [!readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes, config: props.config }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
                             await form.handleSubmit(async (values) => {
                                 await props.onSubmit?.({
                                     modifiedValues: values.id
@@ -78,7 +67,7 @@ function EventFormBody(props) {
                                     values,
                                 });
                             })();
-                        }, children: props.values.id ? 'Save' : 'Create' })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                        }, children: props.values.id ? 'Save' : 'Create' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                             props.onCancel?.();
                         }, children: props.values.id ? 'Close' : 'Cancel' })] }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isPending })] }));
 }

package/PageCalendar/Header.js

@@ -27,7 +27,8 @@ function Header({ filterForm, onCreateButtonClick, }) {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: !config.disableCreate && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
+                        }, children: !!config.createOptions && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })) })] }), !!config.filterAttributes &&
+                Object.keys(config.filterAttributes).length > 0 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
                             return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
                                     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
                                 } }, attributeName));

package/PageCalendar/PageCalendar.js

@@ -1,56 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageCalendar = PageCalendar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const auth_1 = require("@headless-adminapp/app/auth");
-const context_1 = require("@headless-adminapp/app/calendar/context");
-const dialog_1 = require("@headless-adminapp/app/dialog");
-const hooks_1 = require("@headless-adminapp/app/hooks");
+const CalendarProvider_1 = require("@headless-adminapp/app/calendar/CalendarProvider");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const progress_indicator_1 = require("@headless-adminapp/app/progress-indicator");
-const toast_notification_1 = require("@headless-adminapp/app/toast-notification");
-const react_query_1 = require("@tanstack/react-query");
-const dayjs_1 = __importDefault(require("dayjs"));
-const isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
-const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
-const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const EventDialog_1 = require("./EventDialog/EventDialog");
-const Header_1 = require("./Header");
-const types_1 = require("./types");
-const utils_1 = require("./utils");
-const CalendarSection = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CalendarSection'))).then((mod) => ({ default: mod.CalendarSection })));
-dayjs_1.default.extend(utc_1.default);
-dayjs_1.default.extend(timezone_1.default);
-dayjs_1.default.extend(isoWeek_1.default);
+const PageCalendarUI_1 = require("./PageCalendarUI");
 function PageCalendar(props) {
     const contextValue = (0, mutable_1.useCreateContextStore)({
         config: props.config,
@@ -61,176 +16,5 @@ function PageCalendar(props) {
         });
     }, [contextValue, props.config]);
     const config = props.config;
-    const openDialog = (0, dialog_1.useOpenDialog)();
-    const openConfirmDialog = (0, dialog_1.useOpenConfirmDialog)();
-    const openToastNotification = (0, toast_notification_1.useOpenToastNotification)();
-    const { hideProgressIndicator, showProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
-    const isMobile = (0, hooks_1.useIsMobile)();
-    const [activeStartDate, setActiveStartDate] = (0, react_1.useState)(null);
-    const [activeEndDate, setActiveEndDate] = (0, react_1.useState)(null);
-    const [currentStartDate, setCurrentStartDate] = (0, react_1.useState)(null);
-    const [currentEndDate, setCurrentEndDate] = (0, react_1.useState)(null);
-    const [viewType, setViewType] = (0, react_1.useState)(isMobile ? types_1.ViewType.Day : types_1.ViewType.Month);
-    const queryClient = (0, react_query_1.useQueryClient)();
-    const filterForm = (0, react_hook_form_1.useForm)({
-        mode: 'all',
-        defaultValues: config.defaultFilter,
-        shouldUnregister: false,
-    });
-    const filterValues = filterForm.watch();
-    const auth = (0, auth_1.useAuthSession)();
-    const { data: events, isPending: loading } = (0, react_query_1.useQuery)({
-        queryKey: [
-            'calendar-events',
-            'list',
-            activeStartDate,
-            activeEndDate,
-            filterValues,
-            auth,
-        ],
-        queryFn: async () => {
-            if (!activeStartDate || !activeEndDate) {
-                return [];
-            }
-            try {
-                const result = await config.eventsResolver({
-                    start: activeStartDate,
-                    end: activeEndDate,
-                    filter: filterValues,
-                    auth,
-                });
-                return result.map(utils_1.transformEvent);
-            }
-            catch (error) {
-                openToastNotification({
-                    title: 'Error',
-                    text: error.message,
-                    type: 'error',
-                });
-                throw error;
-            }
-        },
-        staleTime: 1000 * 60 * 5, // 5 minutes
-    });
-    function openEventDetailModel(values) {
-        const { close } = openDialog({
-            type: 'custom',
-            Component: EventDialog_1.EventDialog,
-            props: {
-                onDismiss: () => {
-                    close();
-                },
-                config,
-                values,
-                onSubmit: async (data) => {
-                    try {
-                        const { id, end, start, title, allDay, description, ...rest } = data.values;
-                        await config.saveEvent({
-                            event: {
-                                id,
-                                title,
-                                start: start ? new Date(start) : null,
-                                end: end ? new Date(end) : null,
-                                allDay: allDay ?? false,
-                                description,
-                                ...rest,
-                            },
-                            modifiedValues: data.modifiedValues,
-                        });
-                        await queryClient.invalidateQueries({
-                            queryKey: ['calendar-events'],
-                        });
-                        close();
-                    }
-                    catch (error) {
-                        openToastNotification({
-                            title: 'Error',
-                            text: error.message,
-                            type: 'error',
-                        });
-                    }
-                },
-                onDelete: async (id) => {
-                    try {
-                        const confirmResult = await openConfirmDialog({
-                            title: 'Delete Event',
-                            text: 'Are you sure you want to delete this event?',
-                        });
-                        if (!confirmResult?.confirmed) {
-                            return;
-                        }
-                        showProgressIndicator('Deleting event...');
-                        await config.deleteEvent(id);
-                        await queryClient.invalidateQueries({
-                            queryKey: ['calendar-events'],
-                        });
-                        close();
-                    }
-                    catch (error) {
-                        openToastNotification({
-                            title: 'Error',
-                            text: error.message,
-                            type: 'error',
-                        });
-                    }
-                    finally {
-                        hideProgressIndicator();
-                    }
-                },
-                allowOpenRecord: !!config.openRecord,
-                onOpenRecord: config.openRecord,
-                onCancel: () => {
-                    close();
-                },
-            },
-        });
-    }
-    function handleDateSelect(selectInfo) {
-        if (config.disableCreate) {
-            return;
-        }
-        openEventDetailModel({
-            title: '',
-            start: selectInfo.start.toISOString(),
-            end: selectInfo.end.toISOString(),
-            allDay: selectInfo.allDay,
-            customer: null,
-            description: '',
-        });
-    }
-    function handleEventClick(clickInfo) {
-        openEventDetailModel({
-            id: clickInfo.event.id,
-            title: clickInfo.event.title,
-            start: clickInfo.event.start?.toISOString(),
-            end: clickInfo.event.end?.toISOString(),
-            allDay: clickInfo.event.allDay,
-            description: '',
-            ...clickInfo.event.extendedProps,
-        });
-    }
-    function handleCreateButtonClick() {
-        openEventDetailModel({
-            title: '',
-            start: null,
-            end: null,
-            allDay: false,
-            description: '',
-        });
-    }
-    const onRangeChange = ({ currentStart, currentEnd, activeStart, activeEnd, viewType, }) => {
-        setCurrentStartDate(currentStart);
-        setCurrentEndDate(currentEnd);
-        setActiveStartDate(activeStart);
-        setActiveEndDate(activeEnd);
-        setViewType(viewType);
-    };
-    return ((0, jsx_runtime_1.jsx)(context_1.CalendarContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                flex: 1,
-                gap: react_components_1.tokens.spacingVerticalM,
-                padding: react_components_1.tokens.spacingHorizontalM,
-                background: react_components_1.tokens.colorNeutralBackground2,
-            }, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { filterForm: filterForm, onCreateButtonClick: handleCreateButtonClick }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CalendarSection, { startDate: currentStartDate, endDate: currentEndDate, viewType: viewType, onRangeChange: onRangeChange, events: events ?? [], onEventClick: handleEventClick, onDateSelect: handleDateSelect, loading: loading }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(CalendarProvider_1.CalendarProvider, { config: config, children: (0, jsx_runtime_1.jsx)(PageCalendarUI_1.PageCalendarUI, {}) }));
 }

package/PageCalendar/PageCalendarUI.d.ts

@@ -0,0 +1,2 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+export declare function PageCalendarUI<SA3 extends SchemaAttributes = SchemaAttributes>(): import("react/jsx-runtime").JSX.Element;

package/PageCalendar/PageCalendarUI.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCalendarUI = PageCalendarUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const auth_1 = require("@headless-adminapp/app/auth");
+const hooks_1 = require("@headless-adminapp/app/calendar/hooks");
+const useOpenDetailDialog_1 = require("@headless-adminapp/app/calendar/hooks/useOpenDetailDialog");
+const hooks_2 = require("@headless-adminapp/app/hooks");
+const navigation_1 = require("@headless-adminapp/app/navigation");
+const route_1 = require("@headless-adminapp/app/route");
+const toast_notification_1 = require("@headless-adminapp/app/toast-notification");
+const react_query_1 = require("@tanstack/react-query");
+const dayjs_1 = __importDefault(require("dayjs"));
+const isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const EventDialog_1 = require("./EventDialog/EventDialog");
+const Header_1 = require("./Header");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+const CalendarSection = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CalendarSection'))).then((mod) => ({ default: mod.CalendarSection })));
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+dayjs_1.default.extend(isoWeek_1.default);
+function PageCalendarUI() {
+    const config = (0, hooks_1.useConfig)();
+    const openToastNotification = (0, toast_notification_1.useOpenToastNotification)();
+    const isMobile = (0, hooks_2.useIsMobile)();
+    const [activeStartDate, setActiveStartDate] = (0, react_1.useState)(null);
+    const [activeEndDate, setActiveEndDate] = (0, react_1.useState)(null);
+    const [currentStartDate, setCurrentStartDate] = (0, react_1.useState)(null);
+    const [currentEndDate, setCurrentEndDate] = (0, react_1.useState)(null);
+    const [viewType, setViewType] = (0, react_1.useState)(isMobile ? types_1.ViewType.Day : types_1.ViewType.Month);
+    const filterForm = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: config.defaultFilter,
+        shouldUnregister: false,
+    });
+    const filterValues = filterForm.watch();
+    const auth = (0, auth_1.useAuthSession)();
+    const { data: events, isPending: loading } = (0, react_query_1.useQuery)({
+        queryKey: [
+            'calendar-events',
+            'list',
+            activeStartDate,
+            activeEndDate,
+            filterValues,
+            auth,
+        ],
+        queryFn: async () => {
+            if (!activeStartDate || !activeEndDate) {
+                return [];
+            }
+            try {
+                const result = await config.eventsResolver({
+                    start: activeStartDate,
+                    end: activeEndDate,
+                    filter: filterValues,
+                    auth,
+                });
+                return result.map(utils_1.transformEvent);
+            }
+            catch (error) {
+                openToastNotification({
+                    title: 'Error',
+                    text: error.message,
+                    type: 'error',
+                });
+                throw error;
+            }
+        },
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+    const openEventDetailModel = (0, useOpenDetailDialog_1.useOpenDetailDialog)(EventDialog_1.EventDialog);
+    const router = (0, route_1.useRouter)();
+    const routeResolver = (0, route_1.useRouteResolver)();
+    const openForm = (0, navigation_1.useOpenForm)();
+    const handleNewRecord = (values) => {
+        if (!config.createOptions) {
+            return;
+        }
+        if (config.createOptions.mode === 'dialog') {
+            if (!config.saveEvent) {
+                return;
+            }
+            openEventDetailModel(values);
+        }
+        else if (config.createOptions.mode === 'custom') {
+            config.createOptions.onClick(values, {
+                openForm,
+                router,
+                routeResolver,
+            });
+        }
+    };
+    function handleDateSelect(selectInfo) {
+        if (!config.createOptions) {
+            return;
+        }
+        if (config.createOptions.mode === 'custom' &&
+            !config.createOptions.allowQuickCreate) {
+            return;
+        }
+        if (config.disableAllDay && selectInfo.allDay) {
+            return;
+        }
+        handleNewRecord({
+            title: '',
+            start: selectInfo.start.toISOString(),
+            end: selectInfo.end.toISOString(),
+            allDay: selectInfo.allDay,
+            customer: null,
+            description: '',
+        });
+    }
+    function handleCreateButtonClick() {
+        handleNewRecord({
+            title: '',
+            start: null,
+            end: null,
+            allDay: false,
+            description: '',
+        });
+    }
+    const onRangeChange = ({ currentStart, currentEnd, activeStart, activeEnd, viewType, }) => {
+        setCurrentStartDate(currentStart);
+        setCurrentEndDate(currentEnd);
+        setActiveStartDate(activeStart);
+        setActiveEndDate(activeEnd);
+        setViewType(viewType);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            gap: react_components_1.tokens.spacingVerticalM,
+            padding: react_components_1.tokens.spacingHorizontalM,
+            background: react_components_1.tokens.colorNeutralBackground2,
+        }, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { filterForm: filterForm, onCreateButtonClick: handleCreateButtonClick }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CalendarSection, { startDate: currentStartDate, endDate: currentEndDate, viewType: viewType, onRangeChange: onRangeChange, events: events ?? [], onDateSelect: handleDateSelect, loading: loading }) })] }));
+}

package/PageCalendar/renderEventContent.js

@@ -1,22 +1,98 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderEventContent = renderEventContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const useConfig_1 = require("@headless-adminapp/app/calendar/hooks/useConfig");
+const useDeleteEvent_1 = require("@headless-adminapp/app/calendar/hooks/useDeleteEvent");
+const useOpenDetailDialog_1 = require("@headless-adminapp/app/calendar/hooks/useOpenDetailDialog");
+const locale_1 = require("@headless-adminapp/app/locale");
+const navigation_1 = require("@headless-adminapp/app/navigation");
+const route_1 = require("@headless-adminapp/app/route");
+const icons_1 = require("@headless-adminapp/icons");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const EventDialog_1 = require("./EventDialog/EventDialog");
 function renderEventContent(eventInfo) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            backgroundColor: react_components_1.tokens.colorBrandBackground2,
-            color: react_components_1.tokens.colorNeutralForeground1,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
-            paddingBlock: react_components_1.tokens.spacingVerticalXXS,
-            paddingInline: react_components_1.tokens.spacingHorizontalS,
-            border: `1px solid ${react_components_1.tokens.colorBrandStroke2}`,
-            gap: react_components_1.tokens.spacingHorizontalS,
-            width: '100%',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            height: '100%',
-            cursor: 'pointer',
-        }, children: [eventInfo.timeText && (0, jsx_runtime_1.jsx)("span", { children: eventInfo.timeText }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: react_components_1.tokens.fontWeightSemibold }, children: eventInfo.event.title })] }));
+    return (0, jsx_runtime_1.jsx)(EventContent, { eventInfo: eventInfo });
 }
+const EventContent = ({ eventInfo }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { positioning: "after", withArrow: true, open: open, onOpenChange: (e, data) => setOpen(data.open), children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        backgroundColor: react_components_1.tokens.colorBrandBackground2,
+                        color: react_components_1.tokens.colorNeutralForeground1,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        paddingBlock: react_components_1.tokens.spacingVerticalXXS,
+                        paddingInline: react_components_1.tokens.spacingHorizontalS,
+                        border: `1px solid ${react_components_1.tokens.colorBrandStroke2}`,
+                        gap: react_components_1.tokens.spacingHorizontalS,
+                        width: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        height: '100%',
+                        cursor: 'pointer',
+                    }, children: [eventInfo.timeText && (0, jsx_runtime_1.jsx)("span", { children: eventInfo.timeText }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: react_components_1.tokens.fontWeightSemibold }, children: eventInfo.event.title })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { maxWidth: 600 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { eventInfo: eventInfo, onClose: () => setOpen(false) }) })] }));
+};
+const PopoverContent = ({ eventInfo, onClose }) => {
+    const config = (0, useConfig_1.useConfig)();
+    const { dateFormats, timeFormats } = (0, locale_1.useLocale)();
+    const deleteEvent = (0, useDeleteEvent_1.useDeleteEvent)();
+    const openEventDetailModel = (0, useOpenDetailDialog_1.useOpenDetailDialog)(EventDialog_1.EventDialog);
+    const router = (0, route_1.useRouter)();
+    const routeResolver = (0, route_1.useRouteResolver)();
+    const openForm = (0, navigation_1.useOpenForm)();
+    const handleEdit = () => {
+        if (!config.editOptions) {
+            return;
+        }
+        onClose();
+        if (config.editOptions.mode === 'dialog') {
+            openEventDetailModel({
+                id: eventInfo.event.id,
+                title: eventInfo.event.title,
+                start: eventInfo.event.start?.toISOString(),
+                end: eventInfo.event.end?.toISOString(),
+                allDay: eventInfo.event.allDay,
+                description: '',
+                ...eventInfo.event.extendedProps,
+            });
+        }
+        else if (config.editOptions.mode === 'custom') {
+            config.editOptions.onClick(eventInfo.event, {
+                openForm,
+                router,
+                routeResolver,
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: react_components_1.tokens.spacingHorizontalM,
+                    paddingBottom: react_components_1.tokens.spacingVerticalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontWeight: react_components_1.tokens.fontWeightBold,
+                            fontSize: react_components_1.tokens.fontSizeBase400,
+                            flex: 1,
+                            alignSelf: 'center',
+                        }, children: eventInfo.event.title }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: react_components_1.tokens.spacingHorizontalS,
+                        }, children: [!!config.deleteEvent && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: async () => {
+                                    onClose();
+                                    await deleteEvent(eventInfo.event.id);
+                                } })), !!config.editOptions && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, { size: 16 }), appearance: "subtle", onClick: handleEdit })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }), appearance: "subtle", onClick: onClose })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    paddingTop: react_components_1.tokens.spacingVerticalM,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: react_components_1.tokens.spacingVerticalM,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, dayjs_1.default)(eventInfo.event.start).format(dateFormats.long), ' ', (0, dayjs_1.default)(eventInfo.event.start).format(timeFormats.short), ' ', eventInfo.event.allDay
+                                ? 'All Day'
+                                : '- ' + (0, dayjs_1.default)(eventInfo.event.end).format(timeFormats.short)] }), (0, jsx_runtime_1.jsx)("div", { children: eventInfo.event.extendedProps.description })] })] }));
+};

package/PageEntityForm/RecordCard.js

@@ -4,7 +4,7 @@ exports.RecordCard = RecordCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/utils");
-const color_1 = require("@headless-adminapp/app/utils/color");
+const ChoiceBadge_1 = require("../components/ChoiceBadge");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         width: '100%',
@@ -113,18 +113,5 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
 }
 const ChoiceTag = ({ attribute, value, }) => {
-    const choice = attribute.options.find((option) => option.value === value);
-    if (!choice) {
-        return null;
-    }
-    const bgColor = choice.color;
-    let color;
-    if (bgColor) {
-        color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
-    }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { size: "small", appearance: "filled", style: {
-            background: bgColor,
-            color: color,
-            fontWeight: react_components_1.tokens.fontWeightRegular,
-        }, children: choice.label }));
+    return (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: attribute, value: value, size: "small" });
 };

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -28,6 +28,7 @@ const RecordSetNavigatorContainer = () => {
     const { data, cardView, schema } = (0, hooks_2.useRecordSetResult)();
     const [visible] = (0, hooks_2.useRecordSetVisibility)();
     const recordId = (0, hooks_1.useRecordId)();
+    const formSchema = (0, hooks_1.useDataFormSchema)();
     const styles = useStyles();
     const openForm = (0, navigation_1.useOpenForm)();
     const { language, direction } = (0, locale_1.useLocale)();
@@ -37,6 +38,9 @@ const RecordSetNavigatorContainer = () => {
     if (!visible) {
         return null;
     }
+    if (schema.logicalName !== formSchema?.logicalName) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: react_components_1.tokens.spacingVerticalM,
             paddingBlock: react_components_1.tokens.spacingVerticalM,

package/components/ChoiceBadge.d.ts

@@ -1,8 +1,9 @@
 import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { ChoicesAttribute } from '@headless-adminapp/core/attributes/ChoiceAttribute';
 interface ChoiceBadgeProps {
     value: unknown;
-    attribute: ChoiceAttribute<string | number>;
-    formattedValue: string | null;
+    attribute: ChoiceAttribute<string | number> | ChoicesAttribute<string | number>;
+    formattedValue?: string | null;
     size?: 'small' | 'medium';
 }
 export declare function ChoiceBadge(props: Readonly<ChoiceBadgeProps>): import("react/jsx-runtime").JSX.Element | null;

package/components/ChoiceBadge.js

@@ -18,12 +18,25 @@ function ChoiceBadge(props) {
         }
         return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
     }, [bgColor]);
-    if (!props.formattedValue) {
+    const formattedValue = (0, react_1.useMemo)(() => {
+        if (props.formattedValue) {
+            return props.formattedValue;
+        }
+        if (!props.value) {
+            return null;
+        }
+        const choice = props.attribute.options.find((option) => option.value === props.value);
+        if (!choice) {
+            return null;
+        }
+        return choice.label;
+    }, [props.attribute.options, props.formattedValue, props.value]);
+    if (!formattedValue) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: {
             backgroundColor: bgColor ?? react_components_1.tokens.colorNeutralBackground3,
             color: color ?? react_components_1.tokens.colorNeutralForeground2,
             fontWeight: react_components_1.tokens.fontWeightRegular,
-        }, size: props.size, children: props.formattedValue }));
+        }, size: props.size, children: formattedValue }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.12",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "ead918f1f609c2a260ceae498368ddc2c4980725"
+  "gitHead": "3c59cbbf000e71e39b81c9440a71363b729e6e3c"
 }