@homefile/components-v2 2.8.10 → 2.8.12

package/dist/components/contacts/ContactCard.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Flex, Stack } from '@chakra-ui/react';
-import { ContactCardHeader, ContactCardInfo, ContactCardAddress, } from '..';
+import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal, } from '..';
 import { colors } from '../../theme/colors';
 export const ContactCard = ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader = true, }) => {
     const hasOnClick = typeof onClick === 'function';
-    return (_jsx(Container, { maxW: "none", textAlign: "start", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(Object.assign(Object.assign({}, contact), { index })), transition: "background-color 0.3s", _hover: {
-            bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
-        }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact, menuItems: menuItems })), _jsx(CardBody, { contact, index, showAvatar })] }) }));
+    return (_jsxs(Box, { position: "relative", w: "100%", children: [_jsx(Container, { maxW: "none", textAlign: "start", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(Object.assign(Object.assign({}, contact), { index })), transition: "background-color 0.3s", _hover: {
+                    bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
+                }, cursor: hasOnClick ? 'pointer' : 'default', children: _jsxs(Stack, { pb: "base", pt: "1", px: "base", spacing: "base", children: [showHeader && (_jsx(ContactCardHeader, { apiError: apiError, contact: contact })), _jsx(CardBody, { contact, index, showAvatar })] }) }), _jsx(Box, { position: "absolute", right: "1", top: "0", zIndex: "overlay", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: Number(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) < 1 }) })] }));
 };
 const CardBody = ({ contact, index, showAvatar, }) => {
     return (_jsxs(Flex, { justify: "space-between", align: "stretch", gap: "base", children: [_jsx(ContactCardInfo, Object.assign({}, contact, { index, showAvatar })), _jsx(Box, { borderLeft: `1px solid ${colors.lightBlue[1]}`, w: "45%", pl: "base", children: _jsx(ContactCardAddress, Object.assign({}, contact)) })] }));

package/dist/components/contacts/ContactCardHeader.js

@@ -6,5 +6,5 @@ import { IconMenu, MoreHorizontal } from '..';
 export const ContactCardHeader = ({ contact, menuItems = [], }) => {
     var _a;
     const { category, title } = contact;
-    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: menuItems.length < 1 })] }));
+    return (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: Contacts, boxSize: "1rem", "aria-label": (_a = t('ariaLabels.contact')) !== null && _a !== void 0 ? _a : ' ' }), _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Text, { fontSize: "xs", children: category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title.toUpperCase() })] })] }), !!menuItems.length && (_jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: contact, menuItems: menuItems, disabled: menuItems.length < 1 }))] }));
 };

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, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemFormPanel: ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
 import { PanelHeader, FooterDrawer, ItemNameHeader, ItemFormFooter, Overlay, } from '../../..';
-export const ItemFormPanel = ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter = false, showOverlay = false, }) => {
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { p: "0", pb: "12", overflowX: "hidden", bg: "lightBlue.1", children: [_jsx(ItemNameHeader, { id: "item-name", onSave: onSaveItemName, value: itemName }), _jsxs(Box, { position: "relative", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), children] })] }), _jsx(FooterDrawer, { isOpen: showFooter, children: _jsx(DrawerFooter, { w: "100%", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+export const ItemFormPanel = ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showOverlay = false, }) => {
+    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: [_jsx(ItemNameHeader, { id: "item-name", onSave: onSaveItemName, value: itemName }), _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), children] })] }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
 };

package/dist/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.d.ts

@@ -5,6 +5,5 @@ export interface ItemFormPanelI {
     onSubmitForm: () => void;
     panelIcon: string;
     panelTitle: string;
-    showFooter?: boolean;
     showOverlay?: boolean;
 }

package/package.json

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

package/src/components/contacts/ContactCard.tsx

@@ -4,6 +4,8 @@ import {
   ContactCardHeader,
   ContactCardInfo,
   ContactCardAddress,
+  IconMenu,
+  MoreHorizontal,
 } from '@/components'
 import { colors } from '@/theme/colors'
 
@@ -18,27 +20,33 @@ export const ContactCard = ({
 }: ContactCardI) => {
   const hasOnClick = typeof onClick === 'function'
   return (
-    <Container
-      maxW="none"
-      textAlign="start"
-      onClick={() => onClick?.({ ...contact, index })}
-      transition="background-color 0.3s"
-      _hover={{
-        bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
-      }}
-      cursor={hasOnClick ? 'pointer' : 'default'}
-    >
-      <Stack pb="base" pt="1" px="base" spacing="base">
-        {showHeader && (
-          <ContactCardHeader
-            apiError={apiError}
-            contact={contact}
-            menuItems={menuItems}
-          />
-        )}
-        <CardBody {...{ contact, index, showAvatar }} />
-      </Stack>
-    </Container>
+    <Box position="relative" w="100%">
+      <Container
+        maxW="none"
+        textAlign="start"
+        onClick={() => onClick?.({ ...contact, index })}
+        transition="background-color 0.3s"
+        _hover={{
+          bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
+        }}
+        cursor={hasOnClick ? 'pointer' : 'default'}
+      >
+        <Stack pb="base" pt="1" px="base" spacing="base">
+          {showHeader && (
+            <ContactCardHeader apiError={apiError} contact={contact} />
+          )}
+          <CardBody {...{ contact, index, showAvatar }} />
+        </Stack>
+      </Container>
+      <Box position="absolute" right="1" top="0" zIndex="overlay">
+        <IconMenu
+          icon={<MoreHorizontal size={32} />}
+          itemForm={contact}
+          menuItems={menuItems}
+          disabled={Number(menuItems?.length) < 1}
+        />
+      </Box>
+    </Box>
   )
 }
 

package/src/components/contacts/ContactCardHeader.tsx

@@ -27,12 +27,14 @@ export const ContactCardHeader = ({
           <Text fontSize="xs">{title.toUpperCase()}</Text>
         </Flex>
       </Flex>
-      <IconMenu
-        icon={<MoreHorizontal size={32} />}
-        itemForm={contact}
-        menuItems={menuItems}
-        disabled={menuItems.length < 1}
-      />
+      {!!menuItems.length && (
+        <IconMenu
+          icon={<MoreHorizontal size={32} />}
+          itemForm={contact}
+          menuItems={menuItems}
+          disabled={menuItems.length < 1}
+        />
+      )}
     </Flex>
   )
 }

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

@@ -23,7 +23,6 @@ export const ItemFormPanel = ({
   onSubmitForm,
   panelIcon,
   panelTitle,
-  showFooter = false,
   showOverlay = false,
 }: PropsWithChildren<ItemFormPanelI>) => {
   return (
@@ -36,13 +35,13 @@ export const ItemFormPanel = ({
         />
       </DrawerHeader>
 
-      <DrawerBody p="0" pb="12" overflowX="hidden" bg="lightBlue.1">
+      <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
         <ItemNameHeader
           id="item-name"
           onSave={onSaveItemName}
           value={itemName}
         />
-        <Box position="relative">
+        <Box position="relative" mb="200px">
           <Overlay
             showOverlay={showOverlay}
             position="absolute"
@@ -53,8 +52,8 @@ export const ItemFormPanel = ({
           {children}
         </Box>
       </DrawerBody>
-      <FooterDrawer isOpen={showFooter}>
-        <DrawerFooter w="100%">
+      <FooterDrawer isOpen={!showOverlay}>
+        <DrawerFooter w="100%" py="0">
           <ItemFormFooter onSave={onSubmitForm} onCancel={onClose} />
         </DrawerFooter>
       </FooterDrawer>

package/src/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.ts

@@ -5,6 +5,5 @@ export interface ItemFormPanelI {
   onSubmitForm: () => void
   panelIcon: string
   panelTitle: string
-  showFooter?: boolean
   showOverlay?: boolean
 }