@homefile/components-v2 2.8.19 → 2.8.21

package/dist/components/contacts/ContactCardAddress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
 export const ContactCardAddress = ({ address, city, company, state, zip, }) => {
-    return (_jsxs(Stack, { spacing: "-1", minH: "full", children: [_jsx(Text, { variant: "address", children: company.toUpperCase() }), _jsx(Text, { variant: "address", children: address }), _jsxs(Text, { variant: "address", children: [city, ", ", state, " ", zip] })] }));
+    return (_jsxs(Stack, { spacing: "-1", minH: "full", children: [_jsx(Text, { variant: "address", children: company === null || company === void 0 ? void 0 : company.toUpperCase() }), _jsx(Text, { variant: "address", children: address }), _jsxs(Text, { variant: "address", children: [city, ", ", state, " ", zip] })] }));
 };

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() })] })] }), !!menuItems.length && (_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 === null || category === void 0 ? void 0 : category.toUpperCase() }), title && (_jsx(Text, { fontSize: "xs", color: "gray.4", children: "|" })), _jsx(Text, { fontSize: "xs", children: title === null || title === void 0 ? void 0 : 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, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
+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,6 +1,15 @@
 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, 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 }) }) })] }));
+import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, } 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.id === 'item-name-header') {
+            firstChild = header;
+            otherChildren = children.slice(1);
+        }
+    }
+    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 }) }) })] }));
 };

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

@@ -1,7 +1,5 @@
 export interface ItemFormPanelI {
-    itemName?: string;
     onClose: () => void;
-    onSaveItemName: (name: string) => void;
     onSubmitForm: () => void;
     panelIcon: string;
     panelTitle: string;

package/dist/stories/forms/ItemFormPanel/ItemFormPanel.stories.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ItemFormPanel, ItemFormTabs, RightPanel } from '../../../components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ItemFormPanel, ItemFormTabs, ItemNameHeader, RightPanel, } from '../../../components';
 import { Paint } from '../../../assets/images/groups';
 import { action } from '@storybook/addon-actions';
 import { contactFieldsMock } from '../../../mocks';
@@ -16,5 +16,5 @@ export default {
     },
 };
 export const ItemFormPanelComponent = (args) => {
-    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ItemFormPanel, Object.assign({}, args, { children: _jsx(ItemFormTabs, { form: contactFieldsMock }) })) }));
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsxs(ItemFormPanel, Object.assign({}, args, { children: [_jsx(ItemNameHeader, { id: "item-name-header", onSave: action('onSaveItemName') }), _jsx(ItemFormTabs, { form: contactFieldsMock })] })) }));
 };

package/package.json

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

package/src/components/contacts/ContactCardAddress.tsx

@@ -10,7 +10,7 @@ export const ContactCardAddress = ({
 }: ContactCardAddressI) => {
   return (
     <Stack spacing="-1" minH="full">
-      <Text variant="address">{company.toUpperCase()}</Text>
+      <Text variant="address">{company?.toUpperCase()}</Text>
       <Text variant="address">{address}</Text>
       <Text variant="address">
         {city}, {state} {zip}

package/src/components/contacts/ContactCardHeader.tsx

@@ -18,13 +18,13 @@ export const ContactCardHeader = ({
           aria-label={t('ariaLabels.contact') ?? ' '}
         />
         <Flex align="center" gap="base">
-          <Text fontSize="xs">{category.toUpperCase()}</Text>
+          <Text fontSize="xs">{category?.toUpperCase()}</Text>
           {title && (
             <Text fontSize="xs" color="gray.4">
               |
             </Text>
           )}
-          <Text fontSize="xs">{title.toUpperCase()}</Text>
+          <Text fontSize="xs">{title?.toUpperCase()}</Text>
         </Flex>
       </Flex>
       {!!menuItems.length && (

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import {
   DrawerBody,
   DrawerHeader,
@@ -9,7 +9,6 @@ import {
 import {
   PanelHeader,
   FooterDrawer,
-  ItemNameHeader,
   ItemFormFooter,
   Overlay,
 } from '@/components'
@@ -17,14 +16,23 @@ import { ItemFormPanelI } from '@/interfaces'
 
 export const ItemFormPanel = ({
   children,
-  itemName,
   onClose,
-  onSaveItemName,
   onSubmitForm,
   panelIcon,
   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.id === 'item-name-header') {
+      firstChild = header
+      otherChildren = children.slice(1)
+    }
+  }
+
   return (
     <DrawerContent bg="lightBlue.1">
       <DrawerHeader p="0">
@@ -36,11 +44,7 @@ export const ItemFormPanel = ({
       </DrawerHeader>
 
       <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
-        <ItemNameHeader
-          id="item-name"
-          onSave={onSaveItemName}
-          value={itemName}
-        />
+        {firstChild}
         <Box position="relative" mb="200px">
           <Overlay
             showOverlay={showOverlay}
@@ -49,7 +53,7 @@ export const ItemFormPanel = ({
             h="inherit"
             zIndex="9"
           />
-          {children}
+          {otherChildren}
         </Box>
       </DrawerBody>
       <FooterDrawer isOpen={!showOverlay}>

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

@@ -1,7 +1,5 @@
 export interface ItemFormPanelI {
-  itemName?: string
   onClose: () => void
-  onSaveItemName: (name: string) => void
   onSubmitForm: () => void
   panelIcon: string
   panelTitle: string

package/src/stories/forms/ItemFormPanel/ItemFormPanel.stories.tsx

@@ -1,5 +1,10 @@
 import { Meta } from '@storybook/react'
-import { ItemFormPanel, ItemFormTabs, RightPanel } from '@/components'
+import {
+  ItemFormPanel,
+  ItemFormTabs,
+  ItemNameHeader,
+  RightPanel,
+} from '@/components'
 import { ItemFormPanelI } from '@/interfaces'
 import { Paint } from '@/assets/images/groups'
 import { action } from '@storybook/addon-actions'
@@ -22,6 +27,10 @@ export const ItemFormPanelComponent = (args: ItemFormPanelI) => {
   return (
     <RightPanel isOpen onClose={() => null}>
       <ItemFormPanel {...args}>
+        <ItemNameHeader
+          id="item-name-header"
+          onSave={action('onSaveItemName')}
+        />
         <ItemFormTabs form={contactFieldsMock} />
       </ItemFormPanel>
     </RightPanel>