@homefile/components-v2 2.40.1 → 2.40.3

package/dist/components/homeAssistant/HomeMonitorButton.d.ts

@@ -1,2 +1,2 @@
 import { HomeMonitorButtonI } from '../../interfaces';
-export declare const HomeMonitorButton: ({ alertCount, currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorButton: ({ alertCount, currentStep, onStepClick, status, step, menuItems, index, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,51 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
-import { getIconAltText } from '../../utils';
 import { keyframes } from '@emotion/react';
-export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, }) => {
+import { getIconAltText } from '../../utils';
+import { IconMenu, MoreHorizontal } from '../../components';
+import { homeAssistantProxy } from '../../proxies';
+const COLLAPSE_AFTER_MS = 2000;
+const INITIAL_BOTTOM = 0;
+const COLLAPSED_BOTTOM = -60;
+export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, menuItems = [], index, }) => {
+    const [bottomOffset, setBottomOffset] = useState(INITIAL_BOTTOM);
+    const [isHovered, setIsHovered] = useState(false);
     const buttonId = `homeMonitorButton-${currentStep}`;
-    const iconAltText = getIconAltText(step.icon);
+    const iconAltText = useMemo(() => getIconAltText(step.icon), [step.icon]);
     const alert = status === 'alert';
-    const ok = status === 'ok';
-    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, zIndex: "2", boxShadow: "lg" }, setStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", zIndex: "2", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "10px", left: "8px", zIndex: "8" }), _jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "20px", onClick: () => onStepClick(currentStep), filter: ok ? 'grayscale(1) opacity(0.6)' : '', children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "32px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.title }) })] })] }) })));
+    const isDisabled = menuItems.length === 0;
+    const { setSelectedId } = homeAssistantProxy;
+    const isCollapsed = bottomOffset < 0 && !isHovered;
+    useEffect(() => {
+        const timeout = window.setTimeout(() => {
+            setBottomOffset(COLLAPSED_BOTTOM);
+        }, COLLAPSE_AFTER_MS);
+        return () => window.clearTimeout(timeout);
+    }, []);
+    const handleStepClick = () => {
+        setIsHovered(false);
+        onStepClick(currentStep);
+    };
+    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "lg", bottom: `${bottomOffset}px`, minH: "106px", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false) }, getContainerStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "10px", left: "8px" }), _jsx(Box, { position: "absolute", top: "2px", right: "6px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) }), !isCollapsed && (_jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "20px", onClick: handleStepClick, children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "36px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.title }) })] }))] }) })));
 };
 const alertGradient = keyframes `
-  0% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
 `;
-const setStyles = (status) => {
-    switch (status) {
-        case 'alert':
-            return {
-                background: 'white',
-                cursor: 'pointer',
-                transition: 'all 0.3s',
-                borderRadius: 'lg',
-                border: 'none',
-                _before: {
-                    content: '""',
-                    position: 'absolute',
-                    inset: '-2px',
-                    borderRadius: 'inherit',
-                    background: 'linear-gradient(270deg,rgb(123, 6, 105),rgb(233, 175, 236), #F544DA)',
-                    backgroundSize: '400% 400%',
-                    animation: `${alertGradient} 2s linear infinite`,
-                    animationDirection: 'alternate',
-                    zIndex: -1,
-                    pointerEvents: 'none',
-                },
-                _hover: {
-                    bg: 'lightGreen.7',
-                },
-            };
-        case 'ok':
-            return {
-                bg: 'neutral.white',
-                borderRadius: 'lg',
-            };
+const getContainerStyles = (status) => {
+    const base = {
+        cursor: 'pointer',
+        transition: 'all 0.3s',
+        borderRadius: 'lg',
+        border: '2px solid transparent',
+        boxSizing: 'border-box',
+        _hover: {
+            bottom: 0,
+        },
+    };
+    if (status === 'alert') {
+        return Object.assign(Object.assign({}, base), { background: `linear-gradient(#FFFFFF, #FFFFFF) padding-box, ` +
+                `linear-gradient(270deg, rgb(123, 6, 105), rgb(233, 175, 236), #F544DA) border-box`, backgroundSize: '100% 100%, 400% 400%', backgroundPosition: '0% 50%, 0% 50%', animation: `${alertGradient} 2s linear infinite`, animationDirection: 'alternate' });
     }
+    return Object.assign(Object.assign({}, base), { bg: 'neutral.white' });
 };

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -1,16 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
-import { HomeMonitorButton, IconMenu, MoreHorizontal } from '../../components';
+import { HomeMonitorButton } from '../../components';
 import { homeAssistantSteps } from '../../helpers';
-import { homeAssistantProxy } from '../../proxies';
 export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, steps = homeAssistantSteps, }) => {
-    const { setSelectedId } = homeAssistantProxy;
-    const isDisabled = menuItems.length === 0;
     const handleStepClick = (step) => onStepClick(step);
     return (_jsx(Flex, { gap: "base", justify: "center", children: steps.map((step, index) => {
             var _a;
-            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step }), _jsx(Box, { position: "absolute", top: "2px", right: "6px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
+            return (_jsx(Box, { position: "relative", flex: "1", children: _jsx(Fragment, { children: _jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step, alerts: alerts, menuItems: menuItems, index: index }) }) }, step === null || step === void 0 ? void 0 : step.title));
         }) }));
 };
 const getStatus = (index, alerts) => {

package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.js

@@ -9,6 +9,7 @@ export const HomefileMonitoring = ({ alertCount = 0 }) => {
     const [showMonitoring, setShowMonitoring] = useState(true);
     const [showAlerts, setShowAlerts] = useState(false);
     useEffect(() => {
+        const timeout = setTimeout(() => setShowMonitoring(false), 15000);
         if (alertCount > 0) {
             const timeout1 = setTimeout(() => setShowMonitoring(false), 2000);
             const timeout2 = setTimeout(() => setShowAlerts(true), 3000);
@@ -17,8 +18,9 @@ export const HomefileMonitoring = ({ alertCount = 0 }) => {
                 clearTimeout(timeout2);
             };
         }
+        return () => clearTimeout(timeout);
     }, [alertCount]);
-    return (_jsxs(Box, { flex: "1", zIndex: "2", children: [showAlerts && (_jsx(MonitoringAlerts, { alertCount: alertCount, showAlerts: showAlerts })), _jsx(SlideFade, { in: showMonitoring, offsetY: "-20px", transition: { enter: { duration: 0.5 } }, children: _jsx(Box, { p: "base", borderBottomRadius: "lg", bg: "#C5E9F4", flex: "1", children: _jsxs(Flex, { align: "center", gap: "1", children: [_jsx(CustomCircularLoader, { icon: Brain, color: "#12988C", trackColor: "#A2CFE0", size: "46px", thickness: "6px" }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }) })] }));
+    return (_jsxs(Box, { flex: "1", zIndex: "2", children: [showAlerts && (_jsx(MonitoringAlerts, { alertCount: alertCount, showAlerts: showAlerts })), _jsx(SlideFade, { in: showMonitoring, offsetY: "-20px", transition: { enter: { duration: 0.5 }, exit: { duration: 0.5 } }, children: _jsx(Box, { p: "base", borderBottomRadius: "lg", bg: "#C5E9F4", flex: "1", children: _jsxs(Flex, { align: "center", gap: "1", children: [_jsx(CustomCircularLoader, { icon: Brain, color: "#12988C", trackColor: "#A2CFE0", size: "46px", thickness: "6px" }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }) })] }));
 };
 const MonitoringAlerts = ({ alertCount = 0, showAlerts = false }) => {
     return (_jsx(SlideFade, { in: showAlerts, offsetY: "-20px", transition: { enter: { duration: 0.5 } }, children: _jsx(Box, { px: "base", borderBottomRadius: "lg", bg: "#F444DA", children: _jsxs(Flex, { align: "center", gap: "1", h: "66px", children: [_jsxs(Center, { p: "1", position: "relative", h: "24px", w: "24px", children: [_jsx(Box, { borderRadius: "full", bg: "neutral.white", opacity: 0.3, h: "full", w: "full", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }), _jsx(Image, { src: Exclamation, h: "100%", w: "auto" })] }), _jsx(Text, { color: "neutral.white", children: t('homeAssistant.homeMonitoringAlerts', { count: alertCount }) })] }) }) }));

package/dist/interfaces/homeAssistant/HomeMonitorSteps.interface.d.ts

@@ -9,11 +9,11 @@ export interface HomeMonitortStepsI {
     onStepClick: (step: number) => void;
     steps?: HomeAssistantStepI[];
 }
-export interface HomeMonitorButtonI {
+export interface HomeMonitorButtonI extends Pick<HomeMonitortStepsI, 'alerts' | 'menuItems' | 'onStepClick'> {
     alertCount?: number;
     currentStep: number;
-    onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;
+    index: number;
 }
 export {};

package/dist/mocks/folderPanel/DisplayFiles.mock.js

@@ -21,7 +21,7 @@ export const DisplayFilesMock = [
                 __v: 0,
             },
         ],
-        updatedAt: '2021-08-01T00:00:00.000Z',
+        updatedAt: '2025-12-23T18:08:41.575Z',
         receipt: 'receipt',
         // report: [
         //     {

package/dist/utils/Formaters.utils.js

@@ -22,7 +22,7 @@ export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
         return '';
     const timeFormat = new Intl.DateTimeFormat(locale, {
         timeStyle: 'short',
-        timeZone: 'UTC',
+        // timeZone: 'UTC',
     })
         .format(new Date(date))
         .replaceAll(' ', '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.40.1",
+  "version": "2.40.3",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",