@homefile/components-v2 2.14.30 → 2.14.31

package/dist/components/appBar/TourButton.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { Flag } from '../../assets/images';
+import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const TourButton = ({ label, onClick }) => {
-    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
+    const { setHighlight } = homeAssistantProxy;
+    useComponentStyles({});
+    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: () => {
+            setHighlight(true);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
 };

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -2,21 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, SimpleGrid, Stack } from '@chakra-ui/react';
 import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
-    const stepId = `homeAssistantButton-${currentPanel}`;
-    const componentIds = currentPanel
-        ? [
-            'homeAssistantButton-1',
-            'homeAssistantButton-2',
-            'homeAssistantButton-3',
-            'homeAssistantButton-4',
-            'homeAssistantButton-5',
-            'homeAssistantButton-6',
-        ]
-        : [];
-    useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' });
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
+    const { setSelectedId } = homeAssistantProxy;
+    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: (step) => {
+                            onStepClick(step);
+                            setSelectedId(`homeAssistantButton-${index + 1}`);
+                        }, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -1,21 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useComponentStyles } from '../../hooks';
-import { Fragment, useState } from 'react';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
-    const ids = [
-        'homeMonitorButton-1',
-        'homeMonitorButton-2',
-        'homeMonitorButton-3',
-        'homeMonitorButton-4',
-        'homeMonitorButton-5',
-        'homeMonitorButton-6',
-    ];
-    const [selectedId, setSelectedId] = useState('');
+    const { setSelectedId } = homeAssistantProxy;
     const isDisabled = menuItems.length === 0;
-    useComponentStyles({ ids, selectedId, zIndex: '2' });
     const handleStepClick = (step) => onStepClick(step);
     return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", 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))) }));
 };

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '../../../interfaces';
-export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/panel/HomeAssistantPanel.js

@@ -4,17 +4,20 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '../../../assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading } from '../..';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, } from '../..';
 import { homeAssistantSteps } from '../../../helpers';
 import { useSimpleDynamicForm } from '../../../hooks';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }) => {
+import { homeAssistantProxy } from '../../../proxies';
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
     var _a, _b;
     const [addedAppliances, updateAddedAppliances] = useState([]);
-    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : "";
+    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
     const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`;
     const isAppliances = currentStep === 4;
+    const { setHighlight } = homeAssistantProxy;
     useEffect(() => {
         var _a;
+        setHighlight(true);
         if (isAppliances) {
             const targetAppliances = (_a = currentForm.find((field) => {
                 var _a;
@@ -23,25 +26,36 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
             })) === null || _a === void 0 ? void 0 : _a.value;
             updateAddedAppliances(targetAppliances);
         }
+        return () => {
+            setHighlight(false);
+        };
     }, [currentForm, isAppliances]);
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
+    const handleClose = () => {
+        onClose();
+        setHighlight(false);
+    };
     if (isLoading)
         return _jsx(Loading, {});
-    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
                         buttonStyle: 'secondaryFooter',
                         label: t('buttons.back'),
                         onClick: onBack,
                         isDisabled: backDisabled,
                     }, button2: {
                         buttonStyle: 'primaryFooter',
-                        label: !hasCompleted && currentStep === 6 ? t('buttons.finish') : t('buttons.saveStep'),
+                        label: !hasCompleted && currentStep === 6
+                            ? t('buttons.finish')
+                            : t('buttons.saveStep'),
                         onClick: () => onSave(updatedFields),
-                    }, button3: (!hasCompleted && currentStep === 6) ? undefined : {
-                        buttonStyle: 'primaryFooter',
-                        label: t('buttons.next'),
-                        onClick: onNext,
-                        isDisabled: nextDisabled,
-                    } }) })] }));
+                    }, button3: !hasCompleted && currentStep === 6
+                        ? undefined
+                        : {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.next'),
+                            onClick: onNext,
+                            isDisabled: nextDisabled,
+                        } }) })] }));
 };

package/dist/components/homeBoard/HomeBoard.js

@@ -48,7 +48,7 @@ export const HomeBoard = () => {
             ], onShareContacts: () => null, onDeleteContacts: () => null, handleLoadMore: () => null, showLoadMore: false, loadMoreDisabled: false })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
-        HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false })),
+        HomeAssistant: (_jsx(DrawerContent, { children: _jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false }) })),
         Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';

package/dist/components/tour/BubbleArrow.js

@@ -8,5 +8,5 @@ export const BubbleArrow = ({ arrowBottom = undefined, arrowLeft = undefined, ar
     const { posX: posXLeft, posY: posYLeft, rotation: rotationLeft, } = ArrowLocationMap[arrowLeft !== null && arrowLeft !== void 0 ? arrowLeft : 'left'];
     const { posX: posXRight, posY: posYRight, rotation: rotationRight, } = ArrowLocationMap[arrowRight !== null && arrowRight !== void 0 ? arrowRight : 'right'];
     const { posX: posXTop, posY: posYTop, rotation: rotationTop, } = ArrowLocationMap[arrowTop !== null && arrowTop !== void 0 ? arrowTop : 'top'];
-    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)` })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)` })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)` })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)` }))] }));
+    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)`, filter: "brightness(1.6) saturate(200%)" }))] }));
 };

package/dist/components/tour/HomeBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, arrowSize, distanceFromEdgeArrowToBorder, firstBubbleHeight, firstBubbleWidth, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const [counter, setCounter] = useState(0);
@@ -22,12 +23,19 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         'addCatalog',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;
     const halfBubbleWidth = parsedBubbleWidth / 2;
     const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         homeboard: {
             arrowBottom: 'bottom',
@@ -38,7 +46,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> HomeBoard/HomeCard
         editHomeIcon: {
@@ -154,5 +162,5 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/LaunchpadTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, HelpIconStep, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, firstBubbleHeight, firstBubbleWidth, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClose, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const [counter, setCounter] = useState(0);
@@ -20,9 +21,16 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
         'forwardReceipts',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const cardSize = 220;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         launchpad: {
             arrowBottom: 'bottom',
@@ -33,7 +41,7 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> myHomes/headers/MyHomesHeader
         addHomeButton: {
@@ -103,12 +111,12 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             leftRef: ((_s = coordinates.feedback) === null || _s === void 0 ? void 0 : _s.x) - 225,
             topRef: ((_t = coordinates.feedback) === null || _t === void 0 ? void 0 : _t.y) + appBarHeight,
             component: (_jsx(HelpIconStep, { handleClose: () => {
-                    handleClose();
+                    handleCloseAndHighlight();
                     setCounter(0);
                 } })),
         },
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/RoomsBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { getMiddleAnchorPosition, firstBubbleWidth, firstBubbleHeight, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const [counter, setCounter] = useState(0);
@@ -16,7 +17,10 @@ export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleSt
         'addingItems',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const steps = {
         addRooms: {

package/dist/helpers/tour/Highlights.helper.d.ts

@@ -0,0 +1 @@
+export declare const highlightIds: string[];

package/dist/helpers/tour/Highlights.helper.js

@@ -0,0 +1,42 @@
+export const highlightIds = Array.from(new Set([
+    'customizeRoomName',
+    'trackRoomValue',
+    'organizeByGroup',
+    'trackGroupValue',
+    'addItemToGroup',
+    'addingItems',
+    'addHomeButton',
+    'assignReceipts',
+    'homeCard',
+    'feedback',
+    'trackStorage',
+    'role',
+    'homePicture',
+    'removeHome',
+    'viewHome',
+    'forwardReceipts',
+    'backToLaunchpad',
+    'editHomeIcon',
+    'addFolders',
+    'folder',
+    'shareWithOthers',
+    'viewContacts',
+    'feedback',
+    'storageUsed',
+    'profile',
+    'forwardReceipts',
+    'viewReceipts',
+    'addCatalog',
+    'homeAssistantButton-1',
+    'homeAssistantButton-2',
+    'homeAssistantButton-3',
+    'homeAssistantButton-4',
+    'homeAssistantButton-5',
+    'homeAssistantButton-6',
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+]));

package/dist/helpers/tour/index.d.ts

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/helpers/tour/index.js

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/hooks/forms/useSimpleDynamicForm.js

@@ -17,7 +17,7 @@ export const useSimpleDynamicForm = ({ fields }) => {
         const parsedValue = isCurrency ? parseCurrenyValue(value) : value;
         return Object.assign(Object.assign({}, field), { value: parsedValue, children: (_a = field === null || field === void 0 ? void 0 : field.children) === null || _a === void 0 ? void 0 : _a.map((child) => handleUpdateFields(child, fieldValues)) });
     };
-    const updatedFields = fields.map((field) => {
+    const updatedFields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
         return handleUpdateFields(field, fieldValues);
     });
     const handleSetDefaultValues = (fields) => {

package/dist/hooks/homeBoard/useHomeBoard.js

@@ -66,6 +66,7 @@ export const useHomeBoard = () => {
         isPanelStep ? onRightOpen() : onRightClose();
     };
     const handleClose = () => {
+        setShowOverlay(true);
         setActiveTour(false);
     };
     const [form, setForm] = useState({

package/dist/hooks/useComponentStyles.d.ts

@@ -1,7 +1,6 @@
 interface UseComponentStyles {
-    ids: string[];
-    selectedId: string;
+    ids?: string[];
     zIndex?: string;
 }
-export declare const useComponentStyles: ({ ids, selectedId, zIndex, }: UseComponentStyles) => void;
+export declare const useComponentStyles: ({ ids, zIndex, }: UseComponentStyles) => void;
 export {};

package/dist/hooks/useComponentStyles.js

@@ -1,5 +1,9 @@
-export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
-    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0)
+import { highlightIds } from '../helpers/tour';
+import { homeAssistantProxy } from '../proxies';
+import { useSnapshot } from 'valtio';
+export const useComponentStyles = ({ ids = highlightIds, zIndex = '2', }) => {
+    const { highlight, selectedId } = useSnapshot(homeAssistantProxy);
+    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0 || !selectedId)
         return;
     ids.forEach((id) => {
         const component = document.getElementById(id);
@@ -8,7 +12,7 @@ export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
         }
     });
     const currentComponent = document.getElementById(selectedId);
-    if (currentComponent) {
+    if (currentComponent && highlight) {
         currentComponent.style.zIndex = '1400';
     }
 };

package/dist/proxies/homes/homeAssistant.proxy.d.ts

@@ -0,0 +1,8 @@
+interface HomeAssistantProxyI {
+    highlight: boolean;
+    selectedId: string;
+    setHighlight: (highlight: boolean) => void;
+    setSelectedId: (selectedId: string) => void;
+}
+export declare const homeAssistantProxy: HomeAssistantProxyI;
+export {};

package/dist/proxies/homes/homeAssistant.proxy.js

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio';
+export const homeAssistantProxy = proxy({
+    highlight: false,
+    selectedId: '',
+    setHighlight: (highlight) => {
+        homeAssistantProxy.highlight = highlight;
+    },
+    setSelectedId: (selectedId) => (homeAssistantProxy.selectedId = selectedId),
+});

package/dist/proxies/homes/index.d.ts

@@ -1 +1,2 @@
+export * from './homeAssistant.proxy';
 export * from './homeCard.proxy';

package/dist/proxies/homes/index.js

@@ -1 +1,2 @@
+export * from './homeAssistant.proxy';
 export * from './homeCard.proxy';

package/package.json

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

package/src/components/appBar/TourButton.tsx

@@ -2,8 +2,12 @@ import { t } from 'i18next'
 import { Box, Flex, Image } from '@chakra-ui/react'
 import { TourButtonI } from '@/interfaces'
 import { Flag } from '@/assets/images'
+import { useComponentStyles } from '@/hooks'
+import { homeAssistantProxy } from '@/proxies'
 
 export const TourButton = ({ label, onClick }: TourButtonI) => {
+  const { setHighlight } = homeAssistantProxy
+  useComponentStyles({})
   return (
     <Box
       data-testid="tour-button"
@@ -14,7 +18,10 @@ export const TourButton = ({ label, onClick }: TourButtonI) => {
       fontFamily="secondary"
       transition="all 0.2s ease-in-out"
       _hover={{ bg: 'lightGreen.4' }}
-      onClick={onClick}
+      onClick={() => {
+        setHighlight(true)
+        onClick?.()
+      }}
       flexShrink={0}
       overflow="hidden"
     >

package/src/components/homeAssistant/HomeAssistantSteps.tsx

@@ -2,26 +2,15 @@ import { Center, SimpleGrid, Stack } from '@chakra-ui/react'
 import { HomeAssistantStepsI } from '@/interfaces'
 import { HomeAssistantButton, HomeAssistantStepper } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
-import { useComponentStyles } from '@/hooks'
+import { homeAssistantProxy } from '@/proxies'
 
 export const HomeAssistantSteps = ({
   currentStep,
   onStepClick,
   currentPanel,
 }: HomeAssistantStepsI) => {
-  const stepId = `homeAssistantButton-${currentPanel}`
-  const componentIds = currentPanel
-    ? [
-        'homeAssistantButton-1',
-        'homeAssistantButton-2',
-        'homeAssistantButton-3',
-        'homeAssistantButton-4',
-        'homeAssistantButton-5',
-        'homeAssistantButton-6',
-      ]
-    : []
+  const { setSelectedId } = homeAssistantProxy
 
-  useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' })
   return (
     <Stack
       spacing="8"
@@ -35,7 +24,10 @@ export const HomeAssistantSteps = ({
           <Center key={step.title} w="100%">
             <HomeAssistantButton
               currentStep={index + 1}
-              onStepClick={onStepClick}
+              onStepClick={(step) => {
+                onStepClick(step)
+                setSelectedId(`homeAssistantButton-${index + 1}`)
+              }}
               status={getStatus(index + 1, currentStep)}
               step={step}
             />

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -1,27 +1,19 @@
+import { Fragment } from 'react'
 import { Box, Flex } from '@chakra-ui/react'
 import { HomeMonitortStepsI } from '@/interfaces'
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
-import { useComponentStyles } from '@/hooks'
-import { Fragment, useState } from 'react'
+import { homeAssistantProxy } from '@/proxies'
 
 export const HomeMonitorSteps = ({
   menuItems = [],
   onStepClick,
   stepsWithAlerts,
 }: HomeMonitortStepsI) => {
-  const ids = [
-    'homeMonitorButton-1',
-    'homeMonitorButton-2',
-    'homeMonitorButton-3',
-    'homeMonitorButton-4',
-    'homeMonitorButton-5',
-    'homeMonitorButton-6',
-  ]
-  const [selectedId, setSelectedId] = useState<string>('')
+  const { setSelectedId } = homeAssistantProxy
+
   const isDisabled = menuItems.length === 0
 
-  useComponentStyles({ ids, selectedId, zIndex: '2' })
   const handleStepClick = (step: number) => onStepClick(step)
   return (
     <Flex gap="base" justify="center">

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState, useEffect } from 'react'
+import { PropsWithChildren, useState, useEffect, use } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
@@ -15,11 +15,12 @@ import {
   FooterButtons,
   HomeAssistantPanelStep,
   PanelHeader,
-  Loading
+  Loading,
 } from '@/components'
 import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
 import { useSimpleDynamicForm } from '@/hooks'
+import { homeAssistantProxy } from '@/proxies'
 
 export const HomeAssistantPanel = ({
   children,
@@ -33,14 +34,18 @@ export const HomeAssistantPanel = ({
   backDisabled,
   nextDisabled,
   hasCompleted,
-  isLoading
+  isLoading,
 }: PropsWithChildren<HomeAssistantPanelI>) => {
-  const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>([])
-  const title = homeAssistantSteps?.[currentStep - 1]?.title ?? "";
+  const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>(
+    []
+  )
+  const title = homeAssistantSteps?.[currentStep - 1]?.title ?? ''
   const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`
   const isAppliances = currentStep === 4
+  const { setHighlight } = homeAssistantProxy
 
   useEffect(() => {
+    setHighlight(true)
     if (isAppliances) {
       const targetAppliances = currentForm.find(
         (field) =>
@@ -49,19 +54,28 @@ export const HomeAssistantPanel = ({
       )?.value as AppliancesType[]
       updateAddedAppliances(targetAppliances)
     }
+
+    return () => {
+      setHighlight(false)
+    }
   }, [currentForm, isAppliances])
 
   const { form, updatedFields } = useSimpleDynamicForm({
     fields: currentForm,
   })
 
+  const handleClose = () => {
+    onClose()
+    setHighlight(false)
+  }
+
   if (isLoading) return <Loading />
 
   return (
     <>
       <DrawerHeader p="0">
         <PanelHeader
-          handleCloseButton={onClose}
+          handleCloseButton={handleClose}
           title={t('homeAssistant.title')}
           icon={IA}
         />
@@ -94,15 +108,22 @@ export const HomeAssistantPanel = ({
           }}
           button2={{
             buttonStyle: 'primaryFooter',
-            label: !hasCompleted && currentStep === 6 ? t('buttons.finish') : t('buttons.saveStep'),
+            label:
+              !hasCompleted && currentStep === 6
+                ? t('buttons.finish')
+                : t('buttons.saveStep'),
             onClick: () => onSave(updatedFields),
           }}
-          button3={(!hasCompleted && currentStep === 6) ? undefined : {
-            buttonStyle: 'primaryFooter',
-            label: t('buttons.next'),
-            onClick: onNext,
-            isDisabled: nextDisabled,
-          }}
+          button3={
+            !hasCompleted && currentStep === 6
+              ? undefined
+              : {
+                  buttonStyle: 'primaryFooter',
+                  label: t('buttons.next'),
+                  onClick: onNext,
+                  isDisabled: nextDisabled,
+                }
+          }
         />
       </DrawerFooter>
     </>

package/src/components/homeBoard/HomeBoard.tsx

@@ -271,19 +271,21 @@ export const HomeBoard = () => {
       </DrawerContent>
     ),
     HomeAssistant: (
-      <HomeAssistantPanel
-        currentStep={homeAssistantCurrentStep}
-        currentForm={currentHomeAssistantForm}
-        onNext={handleHomeAssistantFormChange}
-        onBack={handleHomeAssistantBack}
-        onApplianceClick={() => null}
-        onClose={onRightClose}
-        onSave={() => {}}
-        backDisabled={false}
-        nextDisabled={false}
-        hasCompleted={true}
-        isLoading={false}
-      />
+      <DrawerContent>
+        <HomeAssistantPanel
+          currentStep={homeAssistantCurrentStep}
+          currentForm={currentHomeAssistantForm}
+          onNext={handleHomeAssistantFormChange}
+          onBack={handleHomeAssistantBack}
+          onApplianceClick={() => null}
+          onClose={onRightClose}
+          onSave={() => {}}
+          backDisabled={false}
+          nextDisabled={false}
+          hasCompleted={true}
+          isLoading={false}
+        />
+      </DrawerContent>
     ),
     Notifications: (
       <NotificationsPanel

package/src/components/tour/BubbleArrow.tsx

@@ -42,6 +42,7 @@ export const BubbleArrow = ({
           left={posXBottom}
           top={posYBottom}
           transform={`rotate(${rotationBottom}deg)`}
+          filter="brightness(1.6) saturate(200%)"
         />
       )}
       {arrowLeft && (
@@ -53,6 +54,7 @@ export const BubbleArrow = ({
           left={posXLeft}
           top={posYLeft}
           transform={`rotate(${rotationLeft}deg)`}
+          filter="brightness(1.6) saturate(200%)"
         />
       )}
       {arrowRight && (
@@ -64,6 +66,7 @@ export const BubbleArrow = ({
           left={posXRight}
           top={posYRight}
           transform={`rotate(${rotationRight}deg)`}
+          filter="brightness(1.6) saturate(200%)"
         />
       )}
       {arrowTop && (
@@ -75,6 +78,7 @@ export const BubbleArrow = ({
           left={posXTop}
           top={posYTop}
           transform={`rotate(${rotationTop}deg)`}
+          filter="brightness(1.6) saturate(200%)"
         />
       )}
     </>

package/src/components/tour/HomeBoardTour.tsx

@@ -1,12 +1,8 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { t } from 'i18next'
 import { Bubble, BubbleText, MeetStep } from '@/components'
 import { StepI, TourI } from '@/interfaces'
-import {
-  useComponentCoordinates,
-  useComponentStyles,
-  useWindowDimensions,
-} from '@/hooks'
+import { useComponentCoordinates, useWindowDimensions } from '@/hooks'
 import {
   appBarHeight,
   arrowSize,
@@ -18,6 +14,7 @@ import {
   getXPosition,
   getYPosition,
 } from '@/utils'
+import { homeAssistantProxy } from '@/proxies'
 
 export const HomeBoardTour = ({
   currentStep = 'homeboard',
@@ -45,8 +42,11 @@ export const HomeBoardTour = ({
   ]
 
   const { coordinates } = useComponentCoordinates(componentIds)
+  const { setSelectedId, setHighlight } = homeAssistantProxy
 
-  useComponentStyles({ ids: componentIds, selectedId: currentStep })
+  useEffect(() => {
+    setSelectedId(currentStep)
+  }, [currentStep])
 
   const {
     windowDimensions: { width, height },
@@ -57,6 +57,11 @@ export const HomeBoardTour = ({
   const halfBubbleWidth = parsedBubbleWidth / 2
   const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10
 
+  const handleCloseAndHighlight = () => {
+    handleClose()
+    setHighlight(false)
+  }
+
   const steps: StepI = {
     homeboard: {
       arrowBottom: 'bottom',
@@ -72,7 +77,7 @@ export const HomeBoardTour = ({
           description={t('tour.steps.meet.homeboardDescription')}
           nextButtonLabel={t('tour.steps.meet.homeboardLabel')}
           onClick={() => setCounter(counter + 1)}
-          onSkip={handleClose}
+          onSkip={handleCloseAndHighlight}
           title={t('tour.steps.meet.homeboardTitle')}
           tutorialUrl={meetStepUrl}
         />
@@ -291,7 +296,7 @@ export const HomeBoardTour = ({
   return (
     <Bubble
       counter={counter}
-      handleClose={handleClose}
+      handleClose={handleCloseAndHighlight}
       handleStep={handleStep}
       setCounter={setCounter}
       steps={steps}

package/src/components/tour/LaunchpadTour.tsx

@@ -1,12 +1,8 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { t } from 'i18next'
 import { Bubble, BubbleText, HelpIconStep, MeetStep } from '@/components'
 import { StepI, TourI } from '@/interfaces'
-import {
-  useComponentCoordinates,
-  useComponentStyles,
-  useWindowDimensions,
-} from '@/hooks'
+import { useComponentCoordinates, useWindowDimensions } from '@/hooks'
 import {
   appBarHeight,
   getDistanceFromArrow,
@@ -16,6 +12,7 @@ import {
   firstBubbleHeight,
   firstBubbleWidth,
 } from '@/utils'
+import { homeAssistantProxy } from '@/proxies'
 
 export const LaunchpadTour = ({
   currentStep = 'launchpad',
@@ -40,8 +37,11 @@ export const LaunchpadTour = ({
   ]
 
   const { coordinates } = useComponentCoordinates(componentIds)
+  const { setSelectedId, setHighlight } = homeAssistantProxy
 
-  useComponentStyles({ ids: componentIds, selectedId: currentStep })
+  useEffect(() => {
+    setSelectedId(currentStep)
+  }, [currentStep])
 
   const {
     windowDimensions: { width, height },
@@ -49,6 +49,11 @@ export const LaunchpadTour = ({
 
   const cardSize = 220
 
+  const handleCloseAndHighlight = () => {
+    handleClose()
+    setHighlight(false)
+  }
+
   const steps: StepI = {
     launchpad: {
       arrowBottom: 'bottom',
@@ -64,7 +69,7 @@ export const LaunchpadTour = ({
           description={t('tour.steps.meet.launchpadDescription')}
           nextButtonLabel={t('tour.steps.meet.launchpadLabel')}
           onClick={() => setCounter(counter + 1)}
-          onSkip={handleClose}
+          onSkip={handleCloseAndHighlight}
           title={t('tour.steps.meet.launchpadTitle')}
           tutorialUrl={meetStepUrl}
         />
@@ -185,7 +190,7 @@ export const LaunchpadTour = ({
       component: (
         <HelpIconStep
           handleClose={() => {
-            handleClose()
+            handleCloseAndHighlight()
             setCounter(0)
           }}
         />
@@ -198,7 +203,7 @@ export const LaunchpadTour = ({
   return (
     <Bubble
       counter={counter}
-      handleClose={handleClose}
+      handleClose={handleCloseAndHighlight}
       handleStep={handleStep}
       setCounter={setCounter}
       steps={steps}

package/src/components/tour/RoomsBoardTour.tsx

@@ -1,17 +1,14 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { t } from 'i18next'
 import { Bubble, BubbleText, MeetStep } from '@/components'
 import { StepI, TourI } from '@/interfaces'
-import {
-  useComponentCoordinates,
-  useComponentStyles,
-  useWindowDimensions,
-} from '@/hooks'
+import { useComponentCoordinates, useWindowDimensions } from '@/hooks'
 import {
   getMiddleAnchorPosition,
   firstBubbleWidth,
   firstBubbleHeight,
 } from '@/utils'
+import { homeAssistantProxy } from '@/proxies'
 
 export const RoomsBoardTour = ({
   currentStep = 'addRooms',
@@ -32,8 +29,11 @@ export const RoomsBoardTour = ({
   ]
 
   const { coordinates } = useComponentCoordinates(componentIds)
+  const { setSelectedId } = homeAssistantProxy
 
-  useComponentStyles({ ids: componentIds, selectedId: currentStep })
+  useEffect(() => {
+    setSelectedId(currentStep)
+  }, [currentStep])
 
   const {
     windowDimensions: { width, height },

package/src/helpers/tour/Highlights.helper.ts

@@ -0,0 +1,44 @@
+export const highlightIds = Array.from(
+  new Set([
+    'customizeRoomName',
+    'trackRoomValue',
+    'organizeByGroup',
+    'trackGroupValue',
+    'addItemToGroup',
+    'addingItems',
+    'addHomeButton',
+    'assignReceipts',
+    'homeCard',
+    'feedback',
+    'trackStorage',
+    'role',
+    'homePicture',
+    'removeHome',
+    'viewHome',
+    'forwardReceipts',
+    'backToLaunchpad',
+    'editHomeIcon',
+    'addFolders',
+    'folder',
+    'shareWithOthers',
+    'viewContacts',
+    'feedback',
+    'storageUsed',
+    'profile',
+    'forwardReceipts',
+    'viewReceipts',
+    'addCatalog',
+    'homeAssistantButton-1',
+    'homeAssistantButton-2',
+    'homeAssistantButton-3',
+    'homeAssistantButton-4',
+    'homeAssistantButton-5',
+    'homeAssistantButton-6',
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+  ])
+)

package/src/helpers/tour/index.ts

@@ -1 +1,2 @@
-export * from './ArrowLocations.helper'
+export * from './ArrowLocations.helper'
+export * from './Highlights.helper'

package/src/hooks/forms/useSimpleDynamicForm.ts

@@ -36,7 +36,7 @@ export const useSimpleDynamicForm = ({ fields }: UseDynamicFormI) => {
       ),
     }
   }
-  const updatedFields = fields.map((field) => {
+  const updatedFields = fields?.map((field) => {
     return handleUpdateFields(field, fieldValues)
   })
 

package/src/hooks/homeBoard/useHomeBoard.ts

@@ -75,6 +75,7 @@ export const useHomeBoard = () => {
   }
 
   const handleClose = () => {
+    setShowOverlay(true)
     setActiveTour(false)
   }
 

package/src/hooks/useComponentStyles.ts

@@ -1,15 +1,19 @@
+import { highlightIds } from '@/helpers/tour'
+import { homeAssistantProxy } from '@/proxies'
+import { useSnapshot } from 'valtio'
+
 interface UseComponentStyles {
-  ids: string[]
-  selectedId: string
+  ids?: string[]
   zIndex?: string
 }
 
 export const useComponentStyles = ({
-  ids,
-  selectedId,
-  zIndex = 'auto',
+  ids = highlightIds,
+  zIndex = '2',
 }: UseComponentStyles) => {
-  if (ids?.length === 0) return
+  const { highlight, selectedId } = useSnapshot(homeAssistantProxy)
+
+  if (ids?.length === 0 || !selectedId) return
 
   ids.forEach((id) => {
     const component = document.getElementById(id)
@@ -21,7 +25,7 @@ export const useComponentStyles = ({
 
   const currentComponent = document.getElementById(selectedId)
 
-  if (currentComponent) {
+  if (currentComponent && highlight) {
     currentComponent.style.zIndex = '1400'
   }
 }

package/src/proxies/homes/homeAssistant.proxy.ts

@@ -0,0 +1,18 @@
+import { proxy } from 'valtio'
+
+interface HomeAssistantProxyI {
+  highlight: boolean
+  selectedId: string
+  setHighlight: (highlight: boolean) => void
+  setSelectedId: (selectedId: string) => void
+}
+
+export const homeAssistantProxy = proxy<HomeAssistantProxyI>({
+  highlight: false,
+  selectedId: '',
+  setHighlight: (highlight: boolean) => {
+    homeAssistantProxy.highlight = highlight
+  },
+  setSelectedId: (selectedId: string) =>
+    (homeAssistantProxy.selectedId = selectedId),
+})

package/src/proxies/homes/index.ts

@@ -1 +1,2 @@
+export * from './homeAssistant.proxy'
 export * from './homeCard.proxy'