@homefile/components-v2 2.8.10 → 2.8.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/contacts/ContactCard.js +4 -4
  2. package/dist/components/contacts/ContactCardHeader.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/contacts/ContactCard.tsx +29 -21
  5. package/src/components/contacts/ContactCardHeader.tsx +8 -6
package/dist/components/contacts/ContactCard.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Box, Container, Flex, Stack } from '@chakra-ui/react';
3
- import { ContactCardHeader, ContactCardInfo, ContactCardAddress, } from '..';
3
+ import { ContactCardHeader, ContactCardInfo, ContactCardAddress, IconMenu, MoreHorizontal, } from '..';
4
4
  import { colors } from '../../theme/colors';
5
5
  export const ContactCard = ({ apiError, contact, index, menuItems, onClick, showAvatar, showHeader = true, }) => {
6
6
  const hasOnClick = typeof onClick === 'function';
7
- 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: {
8
- bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
9
- }, 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 })] }) }));
7
+ 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: {
8
+ bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
9
+ }, 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 }) })] }));
10
10
  };
11
11
  const CardBody = ({ contact, index, showAvatar, }) => {
12
12
  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 CHANGED
@@ -6,5 +6,5 @@ import { IconMenu, MoreHorizontal } from '..';
6
6
  export const ContactCardHeader = ({ contact, menuItems = [], }) => {
7
7
  var _a;
8
8
  const { category, title } = contact;
9
- 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 })] }));
9
+ 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 }))] }));
10
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.8.10",
3
+ "version": "2.8.11",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/contacts/ContactCard.tsx CHANGED
@@ -4,6 +4,8 @@ import {
4
4
  ContactCardHeader,
5
5
  ContactCardInfo,
6
6
  ContactCardAddress,
7
+ IconMenu,
8
+ MoreHorizontal,
7
9
  } from '@/components'
8
10
  import { colors } from '@/theme/colors'
9
11
 
@@ -18,27 +20,33 @@ export const ContactCard = ({
18
20
  }: ContactCardI) => {
19
21
  const hasOnClick = typeof onClick === 'function'
20
22
  return (
21
- <Container
22
- maxW="none"
23
- textAlign="start"
24
- onClick={() => onClick?.({ ...contact, index })}
25
- transition="background-color 0.3s"
26
- _hover={{
27
- bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
28
- }}
29
- cursor={hasOnClick ? 'pointer' : 'default'}
30
- >
31
- <Stack pb="base" pt="1" px="base" spacing="base">
32
- {showHeader && (
33
- <ContactCardHeader
34
- apiError={apiError}
35
- contact={contact}
36
- menuItems={menuItems}
37
- />
38
- )}
39
- <CardBody {...{ contact, index, showAvatar }} />
40
- </Stack>
41
- </Container>
23
+ <Box position="relative" w="100%">
24
+ <Container
25
+ maxW="none"
26
+ textAlign="start"
27
+ onClick={() => onClick?.({ ...contact, index })}
28
+ transition="background-color 0.3s"
29
+ _hover={{
30
+ bg: hasOnClick ? 'lightGreen.1' : 'neutral.white',
31
+ }}
32
+ cursor={hasOnClick ? 'pointer' : 'default'}
33
+ >
34
+ <Stack pb="base" pt="1" px="base" spacing="base">
35
+ {showHeader && (
36
+ <ContactCardHeader apiError={apiError} contact={contact} />
37
+ )}
38
+ <CardBody {...{ contact, index, showAvatar }} />
39
+ </Stack>
40
+ </Container>
41
+ <Box position="absolute" right="1" top="0" zIndex="overlay">
42
+ <IconMenu
43
+ icon={<MoreHorizontal size={32} />}
44
+ itemForm={contact}
45
+ menuItems={menuItems}
46
+ disabled={Number(menuItems?.length) < 1}
47
+ />
48
+ </Box>
49
+ </Box>
42
50
  )
43
51
  }
44
52
 
package/src/components/contacts/ContactCardHeader.tsx CHANGED
@@ -27,12 +27,14 @@ export const ContactCardHeader = ({
27
27
  <Text fontSize="xs">{title.toUpperCase()}</Text>
28
28
  </Flex>
29
29
  </Flex>
30
- <IconMenu
31
- icon={<MoreHorizontal size={32} />}
32
- itemForm={contact}
33
- menuItems={menuItems}
34
- disabled={menuItems.length < 1}
35
- />
30
+ {!!menuItems.length && (
31
+ <IconMenu
32
+ icon={<MoreHorizontal size={32} />}
33
+ itemForm={contact}
34
+ menuItems={menuItems}
35
+ disabled={menuItems.length < 1}
36
+ />
37
+ )}
36
38
  </Flex>
37
39
  )
38
40
  }