@homefile/components-v2 2.8.9 → 2.8.11

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.js

@@ -2,5 +2,5 @@ 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", zIndex: 4, children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { p: "0", pb: "12", overflowX: "hidden", overflowY: "scroll", 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 }) }) })] }));
+    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 }) }) })] }));
 };

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

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box } from '@chakra-ui/react';
 import { DynamicForm, TabsHeader, ItemFormTabImage } from '../../..';
 import { v4 as uuidv4 } from 'uuid';
 export const ItemFormTabs = (_a) => {
@@ -20,7 +19,7 @@ export const ItemFormTabs = (_a) => {
     const tabList = [
         {
             label: t('createDocument.tabs.tab1'),
-            component: (_jsx(Box, { overflow: "scroll", minH: "100vh", children: _jsx(DynamicForm, { form: formWithIds }) })),
+            component: _jsx(DynamicForm, { form: formWithIds }),
         },
         {
             label: t('createDocument.tabs.tab2'),

package/dist/components/launchpad/Panel.d.ts

@@ -1,2 +1,2 @@
 import { PanelI } from '../../interfaces';
-export declare const Panel: ({ children, isOpen, onClose, overlay, placement, size, }: PanelI) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: ({ children, isOpen, onClose, overlay, placement, size, ...props }: PanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/launchpad/Panel.js

@@ -1,9 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer, DrawerOverlay } from '@chakra-ui/react';
 import { useWindowDimensions } from '../../hooks';
 import { MOBILE_WIDTH } from '../../utils';
-export const Panel = ({ children, isOpen, onClose, overlay = true, placement = 'right', size = 'md', }) => {
+export const Panel = (_a) => {
+    var { children, isOpen, onClose, overlay = true, placement = 'right', size = 'md' } = _a, props = __rest(_a, ["children", "isOpen", "onClose", "overlay", "placement", "size"]);
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsxs(Drawer, { placement: placement, onClose: onClose, isOpen: isOpen, size: isMobile ? 'full' : size, children: [overlay && _jsx(DrawerOverlay, { zIndex: "1399" }), children] }));
+    return (_jsxs(Drawer, Object.assign({}, props, { placement: placement, onClose: onClose, isOpen: isOpen, size: isMobile ? 'full' : size, children: [overlay && _jsx(DrawerOverlay, { zIndex: "1399" }), children] })));
 };

package/dist/interfaces/launchpad/LeftPanel.interface.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
-export interface LeftPanelI {
+import { DrawerProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+export interface LeftPanelI extends DrawerProps {
     children: ReactNode;
     isOpen: boolean;
     onClose: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.8.9",
+  "version": "2.8.11",
   "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

@@ -27,7 +27,7 @@ export const ItemFormPanel = ({
   showOverlay = false,
 }: PropsWithChildren<ItemFormPanelI>) => {
   return (
-    <DrawerContent bg="lightBlue.1" zIndex={4}>
+    <DrawerContent bg="lightBlue.1">
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -36,13 +36,7 @@ export const ItemFormPanel = ({
         />
       </DrawerHeader>
 
-      <DrawerBody
-        p="0"
-        pb="12"
-        overflowX="hidden"
-        overflowY="scroll"
-        bg="lightBlue.1"
-      >
+      <DrawerBody p="0" pb="12" overflowX="hidden" bg="lightBlue.1">
         <ItemNameHeader
           id="item-name"
           onSave={onSaveItemName}

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

@@ -1,5 +1,4 @@
 import { t } from 'i18next'
-import { Box } from '@chakra-ui/react'
 import { DynamicForm, TabsHeader, ItemFormTabImage } from '@/components'
 import { ItemFormTabsI } from '@/interfaces'
 import { v4 as uuidv4 } from 'uuid'
@@ -13,11 +12,7 @@ export const ItemFormTabs = ({ form = [], ...props }: ItemFormTabsI) => {
   const tabList = [
     {
       label: t('createDocument.tabs.tab1'),
-      component: (
-        <Box overflow="scroll" minH="100vh">
-          <DynamicForm form={formWithIds} />
-        </Box>
-      ),
+      component: <DynamicForm form={formWithIds} />,
     },
     {
       label: t('createDocument.tabs.tab2'),

package/src/components/launchpad/Panel.tsx

@@ -10,6 +10,7 @@ export const Panel = ({
   overlay = true,
   placement = 'right',
   size = 'md',
+  ...props
 }: PanelI) => {
   const {
     windowDimensions: { width },
@@ -17,6 +18,7 @@ export const Panel = ({
   const isMobile = width < MOBILE_WIDTH
   return (
     <Drawer
+      {...props}
       placement={placement}
       onClose={onClose}
       isOpen={isOpen}

package/src/interfaces/launchpad/LeftPanel.interface.ts

@@ -1,9 +1,10 @@
-import {  ReactNode } from "react"
+import { DrawerProps } from '@chakra-ui/react'
+import { ReactNode } from 'react'
 
-export interface LeftPanelI {
+export interface LeftPanelI extends DrawerProps {
   children: ReactNode
   isOpen: boolean
   onClose: () => void
   overlay?: boolean
   size?: string
-}
+}