@headless-adminapp/fluent 1.2.2 → 1.2.3

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/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)] }), (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.3",
   "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": "8d3c42183ed245a59d5200b4f0d4d271ebfe2160"
 }