@headless-adminapp/fluent 1.2.2 → 1.2.4

package/App/Navigation/NavItemComponent.js

@@ -4,7 +4,9 @@ exports.NavItemComponent = 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 usePrefetch_1 = require("./usePrefetch");
 const NavItemComponent = ({ item, onClick, isMini, }) => {
+    (0, usePrefetch_1.usePrefetch)(item);
     return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: item.link, onClick: (event) => {
             event.preventDefault();
             onClick(item);

package/App/Navigation/NavMiniCategoryMenu.js

@@ -4,6 +4,7 @@ exports.NavMiniCategoryMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const NavItemComponent_1 = require("./NavItemComponent");
+const usePrefetch_1 = require("./usePrefetch");
 const NavMiniCategoryMenu = ({ item, isActive, onSelect, }) => {
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "after-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: {
                             key: item.key,
@@ -14,6 +15,10 @@ const NavMiniCategoryMenu = ({ item, isActive, onSelect, }) => {
                             isExternal: false,
                             RightComponent: undefined,
                             type: 'item',
-                        }, onClick: () => { }, isMini: true }, item.key) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => onSelect(subItem), children: subItem.label }, subItem.key))) }) })] }));
+                        }, onClick: () => { }, isMini: true }, item.key) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavMenuItem, { item: subItem, onSelect: onSelect }, subItem.key))) }) })] }));
 };
 exports.NavMiniCategoryMenu = NavMiniCategoryMenu;
+const NavMenuItem = ({ item, onSelect }) => {
+    (0, usePrefetch_1.usePrefetch)(item);
+    return (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => onSelect(item), children: item.label });
+};

package/App/Navigation/NavSubItemComponent.js

@@ -4,7 +4,9 @@ exports.NavSubItemComponent = 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 usePrefetch_1 = require("./usePrefetch");
 const NavSubItemComponent = ({ item, onClick, }) => {
+    (0, usePrefetch_1.usePrefetch)(item);
     return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSubItem, { href: item.link, onClick: (event) => {
             event.preventDefault();
             onClick(item);

package/App/Navigation/usePrefetch.d.ts

@@ -0,0 +1,2 @@
+import { NavItemInfo, NavSubItemInfo } from './types';
+export declare function usePrefetch(item: NavItemInfo | NavSubItemInfo): void;

package/App/Navigation/usePrefetch.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrefetch = usePrefetch;
+const route_1 = require("@headless-adminapp/app/route");
+const react_1 = require("react");
+function usePrefetch(item) {
+    const router = (0, route_1.useRouter)();
+    (0, react_1.useEffect)(() => {
+        if (!item.isExternal) {
+            router.prefetch(item.link);
+        }
+    }, [item.isExternal, item.link, router]);
+}

package/PageCalendar/CalendarSection.js

@@ -53,34 +53,28 @@ const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events,
         switch (props.view.type) {
             case types_1.ViewType.Month:
                 onRangeChange?.({
-                    currentStart: currentStart, //dayjs(currentStart).tz(timezone).startOf('month').toDate(),
-                    currentEnd: currentEnd, // dayjs(currentEnd).tz(timezone).endOf('month').toDate(),
-                    activeStart: activeStart, // dayjs(activeStart).tz(timezone).startOf('day').toDate(),
-                    activeEnd: activeEnd, // dayjs(activeEnd).tz(timezone).endOf('day').toDate(),
+                    currentStart: currentStart,
+                    currentEnd: currentEnd,
+                    activeStart: activeStart,
+                    activeEnd: activeEnd,
                     viewType: types_1.ViewType.Month,
                 });
                 break;
             case types_1.ViewType.Week:
                 onRangeChange?.({
-                    currentStart: (0, dayjs_1.default)(currentStart)
-                        .tz(timezone)
-                        .startOf('isoWeek')
-                        .toDate(),
-                    currentEnd: (0, dayjs_1.default)(currentEnd).tz(timezone).endOf('isoWeek').toDate(),
-                    activeStart: (0, dayjs_1.default)(activeStart).tz(timezone).startOf('day').toDate(),
-                    activeEnd: (0, dayjs_1.default)(activeEnd).tz(timezone).endOf('day').toDate(),
+                    currentStart: currentStart,
+                    currentEnd: currentEnd,
+                    activeStart: activeStart,
+                    activeEnd: activeEnd,
                     viewType: types_1.ViewType.Week,
                 });
                 break;
             case types_1.ViewType.Day:
                 onRangeChange?.({
-                    currentStart: (0, dayjs_1.default)(currentStart)
-                        .tz(timezone)
-                        .startOf('day')
-                        .toDate(),
-                    currentEnd: (0, dayjs_1.default)(currentEnd).tz(timezone).endOf('day').toDate(),
-                    activeStart: (0, dayjs_1.default)(activeStart).tz(timezone).startOf('day').toDate(),
-                    activeEnd: (0, dayjs_1.default)(activeEnd).tz(timezone).endOf('day').toDate(),
+                    currentStart: currentStart,
+                    currentEnd: currentEnd,
+                    activeStart: activeStart,
+                    activeEnd: activeEnd,
                     viewType: types_1.ViewType.Day,
                 });
                 break;

package/PageCalendar/Header.js

@@ -4,12 +4,14 @@ exports.Header = Header;
 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 icons_fluent_1 = require("@headless-adminapp/icons-fluent");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function Header({ filterForm, onCreateButtonClick, }) {
     const config = (0, useConfig_1.useConfig)();
+    const queryClient = (0, react_query_1.useQueryClient)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -23,11 +25,15 @@ function Header({ filterForm, onCreateButtonClick, }) {
                     display: 'flex',
                     alignItems: '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: config.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: config.description })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, 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: config.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: config.description })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, 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 &&
+                        }, 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_1.Icons.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, onClick: async () => {
+                                    await queryClient.invalidateQueries({
+                                        queryKey: ['calendar-events', 'list'],
+                                    });
+                                } })] })] }), !!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 }) }));

package/PageCalendar/TitleSelector.js

@@ -28,17 +28,27 @@ const TitleSelector = ({ start, end, onChange, viewType, }) => {
         }
         switch (viewType) {
             case types_1.ViewType.Day:
-                return (0, dayjs_1.default)(start).format(isMobile ? 'MMM D' : 'MMM D, YYYY');
+                return (0, dayjs_1.default)(start)
+                    .tz(timezone)
+                    .format(isMobile ? 'MMM D' : 'MMM D, YYYY');
             case types_1.ViewType.Week:
                 if (isMobile) {
-                    return `${(0, dayjs_1.default)(start).format('MMM D')} - ${(0, dayjs_1.default)(end).format('D')}`;
+                    return `${(0, dayjs_1.default)(start).tz(timezone).format('MMM D')} - ${(0, dayjs_1.default)(end)
+                        .tz(timezone)
+                        .subtract(1, 'millisecond')
+                        .format('D')}`;
                 }
-                return `${(0, dayjs_1.default)(start).format('MMM D')} - ${(0, dayjs_1.default)(end).format('MMM D, YYYY')}`;
+                return `${(0, dayjs_1.default)(start).tz(timezone).format('MMM D')} - ${(0, dayjs_1.default)(end)
+                    .tz(timezone)
+                    .subtract(1, 'millisecond')
+                    .format('MMM D, YYYY')}`;
             case types_1.ViewType.Month:
-                return (0, dayjs_1.default)(start).format(isMobile ? 'MMM YYYY' : 'MMMM YYYY');
+                return (0, dayjs_1.default)(start)
+                    .tz(timezone)
+                    .format(isMobile ? 'MMM YYYY' : 'MMMM YYYY');
         }
         return '';
-    }, [start, end, viewType, isMobile]);
+    }, [start, end, viewType, timezone, isMobile]);
     if (!start || !end) {
         return null;
     }

package/PageCalendar/renderEventContent.js

@@ -23,22 +23,32 @@ dayjs_1.default.extend(timezone_1.default);
 function renderEventContent(eventInfo) {
     return (0, jsx_runtime_1.jsx)(EventContent, { eventInfo: eventInfo });
 }
+const EventItemPreviewComponent = ({ 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,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            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 })] }));
+};
 const EventContent = ({ eventInfo }) => {
     const [open, setOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '100%', display: 'flex' }, children: (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,
-                            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: 480 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { eventInfo: eventInfo, onClose: () => setOpen(false) }) })] }) }));
+    const config = (0, useConfig_1.useConfig)();
+    const EventItemPreview = config.EventItemPreviewComponent ?? EventItemPreviewComponent;
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { positioning: {
+            // coverTarget: true,
+            position: 'after',
+            shiftToCoverTarget: true,
+        }, 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.jsx)("div", { style: { width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)(EventItemPreview, { eventInfo: eventInfo }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { eventInfo: eventInfo, onClose: () => setOpen(false) }) })] }));
 };
 const PopoverContent = ({ eventInfo, onClose }) => {
     const config = (0, useConfig_1.useConfig)();
@@ -101,5 +111,5 @@ const PopoverContent = ({ eventInfo, onClose }) => {
                                     .tz(timezone)
                                     .format(timeFormats.short) +
                                     ' - ' +
-                                    (0, dayjs_1.default)(eventInfo.event.end).tz(timezone).format(timeFormats.short)] }), (0, jsx_runtime_1.jsx)("div", { children: eventInfo.event.extendedProps.description })] })] }));
+                                    (0, dayjs_1.default)(eventInfo.event.end).tz(timezone).format(timeFormats.short)] }), !!eventInfo.event.extendedProps.description && ((0, jsx_runtime_1.jsx)("div", { children: eventInfo.event.extendedProps.description })), !!config.EventExtendedDetailComponent && ((0, jsx_runtime_1.jsx)(config.EventExtendedDetailComponent, { eventInfo: eventInfo }))] })] }));
 };

package/form/controls/TimeControl.js

@@ -33,7 +33,6 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
         }
         return (0, dayjs_1.default)().startOf('day').add(value, 'minutes').toDate();
     }, [value]);
-    console.log('TimeControl', value, selectedTime);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -45,7 +44,6 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
             }, placeholder: placeholder, id: id, name: name, input: {
                 style: { minWidth: 0 },
             }, readOnly: isReadonly, selectedTime: selectedTime, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
-                console.log('onTimeChange', data);
                 if (data.selectedTime) {
                     onChange?.((0, dayjs_1.default)(data.selectedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes'));
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,6 +42,7 @@
     "dnd-core": "^16.0.1",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
+    "moment-timezone": "0.5.46",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
@@ -51,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "ae232366aacd1153ee983d09b24f2f3e20548a68"
+  "gitHead": "776239a44a2e6d53c3f92665f516feff4e8a83b6"
 }