@homefile/components-v2 2.8.31 → 2.8.33

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { ItemFormPanelI } from '../../../../interfaces';
-export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
-import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, } from '../../..';
+import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading } from '../../..';
 export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, }) => {
-    let firstChild = null;
-    let otherChildren = children;
-    if (Array.isArray(children) && children.length > 0) {
-        const header = children[0];
-        if (header.props && header.props.id === 'item-name-header') {
-            firstChild = header;
-            otherChildren = children.slice(1);
+    const { firstChild, otherChildren } = useMemo(() => {
+        let firstChild = null;
+        let otherChildren = children;
+        if (Array.isArray(children) && children.length > 0) {
+            const header = children[0];
+            if (header.props && header.props.id === 'item-name-header') {
+                firstChild = header;
+                otherChildren = children.slice(1);
+            }
         }
-    }
-    if (!firstChild)
-        return null;
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+        return { firstChild, otherChildren };
+    }, [children]);
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
 };

package/dist/components/rooms/RoomsMenu.js

@@ -7,7 +7,7 @@ import { House } from '../../assets/images';
 export const RoomsMenu = ({ activeRoom, rooms, roomsToAdd, onClick, onHomeClick, onAddRoom, disabled, }) => {
     const { handleDragStart, handleDrop, newRooms } = useRoomList(rooms);
     const { isOpen, onOpen, onClose } = useDisclosure();
-    return (_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsxs(Box, { bg: "neutral.white", minW: "fit-content", children: [_jsxs(Box, { w: "container.roomIcon", minW: "container.roomIcon", transition: "all 0.2s ease-in-out", bg: "lightBlue.4", children: [_jsx(Box, { overflow: "hidden", children: _jsx(Tooltip, { hasArrow: true, isDisabled: false, label: t('addRoom.addBtn'), placement: "right", children: _jsx(Box, { as: "button", w: "full", h: "container.masthead", onClick: onOpen, transition: "all 0.2s ease-in-out", bg: "blue.2", disabled: disabled, overflow: "hidden", _hover: { backgroundColor: 'blue.3' }, _disabled: {
+    return (_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsxs(Box, { bg: "neutral.white", minW: "fit-content", "data-testid": "rooms-menu", children: [_jsxs(Box, { w: "container.roomIcon", minW: "container.roomIcon", transition: "all 0.2s ease-in-out", bg: "lightBlue.4", children: [_jsx(Box, { overflow: "hidden", children: _jsx(Tooltip, { hasArrow: true, isDisabled: false, label: t('addRoom.addBtn'), placement: "right", children: _jsx(Box, { as: "button", w: "full", h: "container.masthead", onClick: onOpen, transition: "all 0.2s ease-in-out", bg: "blue.2", disabled: disabled, overflow: "hidden", _hover: { backgroundColor: 'blue.3' }, _disabled: {
                                         filter: 'grayscale(100%)',
                                         pointerEvents: 'none',
                                     }, children: _jsx(Center, { minW: "container.roomIcon", children: _jsx(Plus, {}) }) }) }) }), _jsx(Tooltip, { hasArrow: true, isDisabled: activeRoom === 'homeboard', label: t('rooms.homeboard'), placement: "right", children: _jsx(Box, { w: "full", as: "button", h: "3.2rem", bg: activeRoom === 'homeboard' ? 'lightGreen.3' : 'neutral.white', onClick: onHomeClick, children: _jsx(Center, { minW: "container.roomIcon", children: _jsx(Image, { src: House, alt: t('ariaLabels.returnHomeBoard'), w: "1.5rem", h: "auto" }) }) }) }), _jsx(Box, { children: newRooms.map((room, i) => {

package/dist/components/rooms/RoomsMenuMobile.js

@@ -8,7 +8,7 @@ import { House } from '../../assets/images';
 export const RoomsMenuMobile = ({ activeRoom, rooms, roomsToAdd, onClick, onHomeClick, onAddRoom, }) => {
     const { newRooms } = useRoomList(rooms);
     const { isOpen, onOpen, onClose } = useDisclosure();
-    return (_jsx(Show, { breakpoint: "(max-width: 590px)", children: _jsxs(Box, { mt: "2", w: "full", position: "fixed", bottom: "0", shadow: "0 0 8px 1px #00000010", zIndex: "dropdown", overflow: "hidden", overflowX: "auto", css: {
+    return (_jsx(Show, { breakpoint: "(max-width: 590px)", children: _jsxs(Box, { "data-testid": "rooms-menu-mobile", mt: "2", w: "full", position: "fixed", bottom: "0", shadow: "0 0 8px 1px #00000010", zIndex: "dropdown", overflow: "hidden", overflowX: "auto", css: {
                 '&::-webkit-scrollbar': {
                     height: '0px',
                 },

package/package.json

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

package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react'
+import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import {
   DrawerBody,
   DrawerHeader,
@@ -11,6 +11,7 @@ import {
   FooterDrawer,
   ItemFormFooter,
   Overlay,
+  Loading
 } from '@/components'
 import { ItemFormPanelI } from '@/interfaces'
 
@@ -22,18 +23,21 @@ export const ItemFormPanel = ({
   panelTitle,
   showOverlay = false,
 }: PropsWithChildren<ItemFormPanelI>) => {
-  let firstChild: ReactNode | null = null
-  let otherChildren: ReactNode = children
 
-  if (Array.isArray(children) && children.length > 0) {
-    const header = children[0]
-    if (header.props && header.props.id === 'item-name-header') {
-      firstChild = header
-      otherChildren = children.slice(1)
-    }
-  }
+  const { firstChild, otherChildren } = useMemo(() => {
+    let firstChild: ReactNode | null = null
+    let otherChildren: ReactNode = children
 
-  if (!firstChild) return null
+    if (Array.isArray(children) && children.length > 0) {
+      const header = children[0]
+      if (header.props && header.props.id === 'item-name-header') {
+        firstChild = header
+        otherChildren = children.slice(1)
+      }
+    }
+  
+    return { firstChild, otherChildren }
+  }, [children])
 
   return (
     <DrawerContent bg="lightBlue.1">
@@ -46,17 +50,25 @@ export const ItemFormPanel = ({
       </DrawerHeader>
 
       <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
-        {firstChild}
-        <Box position="relative" mb="200px">
-          <Overlay
-            showOverlay={showOverlay}
-            position="absolute"
-            w="inherit"
-            h="inherit"
-            zIndex="9"
-          />
-          {otherChildren}
-        </Box>
+        {
+          firstChild ? (
+            <>
+              {firstChild}
+              <Box position="relative" mb="200px">
+                <Overlay
+                  showOverlay={showOverlay}
+                  position="absolute"
+                  w="inherit"
+                  h="inherit"
+                  zIndex="9"
+                />
+                {otherChildren}
+              </Box>
+            </>
+          ) : (
+            <Loading />
+          )
+        }
       </DrawerBody>
       <FooterDrawer isOpen={!showOverlay}>
         <DrawerFooter w="100%" py="0">

package/src/components/rooms/RoomsMenu.tsx

@@ -26,7 +26,7 @@ export const RoomsMenu = ({
 
   return (
     <Show breakpoint="(min-width: 600px)">
-      <Box bg="neutral.white" minW="fit-content">
+      <Box bg="neutral.white" minW="fit-content" data-testid="rooms-menu">
         <Box
           w="container.roomIcon"
           minW="container.roomIcon"

package/src/components/rooms/RoomsMenuMobile.tsx

@@ -20,6 +20,7 @@ export const RoomsMenuMobile = ({
   return (
     <Show breakpoint="(max-width: 590px)">
       <Box
+        data-testid="rooms-menu-mobile"
         mt="2"
         w="full"
         position="fixed"