@homefile/components-v2 2.8.33 → 2.8.35

package/dist/components/rooms/GroupsContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
 export const GroupsContainer = ({ children }) => {
-    return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", children: children }));
+    return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", "data-testid": "groups-container", children: children }));
 };

package/dist/components/rooms/GroupsHeader.js

@@ -5,5 +5,5 @@ import { GroupContent, LeftButton, RightPanel } from '..';
 import { useGroupsHeader } from '../../hooks';
 export const GroupsHeader = ({ groupList, onClick, showingTour = false, disabled, }) => {
     const { handleClick, isOpen, onOpen, onClose } = useGroupsHeader(onClick);
-    return (_jsxs(Box, { w: "10rem", ml: "auto", children: [_jsx(LeftButton, { onClick: onOpen, height: "2rem", label: t('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), _jsx(RightPanel, { children: _jsx(GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
+    return (_jsxs(Box, { w: "10rem", ml: "auto", "data-testid": "groups-header", children: [_jsx(LeftButton, { onClick: onOpen, height: "2rem", label: t('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), _jsx(RightPanel, { children: _jsx(GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
 };

package/dist/components/rooms/RoomHeader.js

@@ -6,7 +6,7 @@ import { roomIcons } from '../../helpers';
 import { useRoomHeader } from '../../hooks';
 export const RoomHeader = ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, disabled, }) => {
     const { formattedAmount, handleChange, handleClick, inputValue, isEditing } = useRoomHeader({ onSubmit, room, roomAmount });
-    return (_jsx(Box, { w: "full", bg: "lightBlue.4", py: "2", px: "base", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { w: "fit-content", children: [_jsx(Center, { h: "2.3rem", minW: "2.6rem", mr: "2", children: _jsx(Image, { alt: room.name, maxH: "2rem", src: roomIcons[room.type], w: "auto" }) }), _jsx(TextInput, { fontWeight: isEditing ? 'regular' : 'medium', fontSize: "1.25rem", fontFamily: "primary", handleChange: handleChange, height: "full", id: room.name, isDisabled: !isEditing || disabled, placeholder: "", value: isEditing && !disabled
+    return (_jsx(Box, { w: "full", bg: "lightBlue.4", py: "2", px: "base", "data-testid": "room-header", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { w: "fit-content", children: [_jsx(Center, { h: "2.3rem", minW: "2.6rem", mr: "2", children: _jsx(Image, { alt: room.name, maxH: "2rem", src: roomIcons[room.type], w: "auto" }) }), _jsx(TextInput, { fontWeight: isEditing ? 'regular' : 'medium', fontSize: "1.25rem", fontFamily: "primary", handleChange: handleChange, height: "full", id: room.name, isDisabled: !isEditing || disabled, placeholder: "", value: isEditing && !disabled
                                 ? inputValue || ''
                                 : (inputValue === null || inputValue === void 0 ? void 0 : inputValue.toUpperCase()) || '' }), isEditing && !disabled ? (_jsx(Button, { variant: "tertiary", onClick: handleClick, ml: "2", children: t('roomHeader.saveBtn') })) : (_jsx(IconButton, { "aria-label": t('ariaLabels.edit'), icon: _jsx(Edit, {}), maxW: "fit-content", onClick: handleClick, px: "2", variant: "menuIconWithShadow", id: "customizeRoomName" }))] }), _jsxs(Flex, { align: "center", gap: "6", children: [_jsxs(Flex, { align: "center", gap: "6", id: "trackRoomValue", bg: "lightBlue.4", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { fontWeight: "medium", variant: "caption", children: t('roomHeader.roomValue').toUpperCase() }) }), _jsx(Text, { variant: "titleBolder", children: formattedAmount }), _jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Box, { h: "5", w: "1px", bg: "lightBlue.6" }) })] }), _jsx(IconButton, { "aria-label": t('ariaLabels.delete'), icon: _jsx(TrashIcon, {}), maxW: "fit-content", onClick: () => onClickDelete(room._id), disabled: isDeleteDisabled, px: "1", variant: "menuIconWithShadow" })] })] }) }));
 };

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", "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: {
+    return (_jsx(Show, { breakpoint: "(min-width: 591px)", 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/package.json

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

package/src/components/rooms/GroupsContainer.tsx

@@ -8,6 +8,7 @@ export const GroupsContainer = ({ children }: { children?: ReactNode }) => {
       bgGradient="linear(to-b, lightBlue.6, transparent)"
       py="2"
       px="base"
+      data-testid="groups-container"
     >
       {children}
     </Stack>

package/src/components/rooms/GroupsHeader.tsx

@@ -13,7 +13,7 @@ export const GroupsHeader = ({
   const { handleClick, isOpen, onOpen, onClose } = useGroupsHeader(onClick)
 
   return (
-    <Box w="10rem" ml="auto">
+    <Box w="10rem" ml="auto" data-testid="groups-header">
       <LeftButton
         onClick={onOpen}
         height="2rem"

package/src/components/rooms/RoomHeader.tsx

@@ -26,7 +26,7 @@ export const RoomHeader = ({
     useRoomHeader({ onSubmit, room, roomAmount })
 
   return (
-    <Box w="full" bg="lightBlue.4" py="2" px="base">
+    <Box w="full" bg="lightBlue.4" py="2" px="base" data-testid="room-header">
       <Flex justify="space-between" align="center">
         <Flex w="fit-content">
           <Center h="2.3rem" minW="2.6rem" mr="2">

package/src/components/rooms/RoomsMenu.tsx

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