@homefile/components-v2 2.8.7 → 2.8.9

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.
@@ -12,6 +12,7 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
12
12
  });
13
13
  const { windowDimensions: { width }, } = useWindowDimensions();
14
14
  const maxW = width > 413 ? '16rem' : '10rem';
15
+ const isDisabled = Number(itemsSelected.length) === 0;
15
16
  return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: handleClose, icon: Contacts, title: t('contacts.title') }), _jsxs(Flex, { justify: "space-between", pl: "base", my: "base", align: "center", gap: "base", children: [_jsx(SearchInput, { maxW: maxW, value: search, onChange: handleChange }), _jsx(LeftButtonAnimated, { onClick: handleAdd, label: t('contacts.addBtn'), disabled: disabled })] })] }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", children: [_jsxs(Stack, { spacing: "base", pt: "base", pb: "120px", pr: "base", bg: "lightBlue.2", minHeight: "full", children: [_jsxs(Flex, { gap: "3", pl: "base", children: [_jsx(Checkbox, { onChange: handleSelectAll }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", children: t('subscription.select') })] }), _jsx(Box, { children: Object.keys(splittedContacts).map((letter, idx) => {
16
17
  const showLetterDivider = idx !== 0;
17
18
  return (_jsxs(Stack, { spacing: "0", children: [showLetterDivider && _jsx(LetterDivider, { letter: letter }), _jsx(Stack, { spacing: "2px", children: splittedContacts[letter].map((contact, idx) => {
@@ -24,11 +25,12 @@ export const ContactsContent = ({ apiError, contacts, menuItems, handleClose, ch
24
25
  }) })] }), children] }), _jsx(DrawerFooter, { p: "0", zIndex: "overlay", children: _jsx(FooterDrawer, { isOpen: true, children: _jsx(FooterButtons, { button1: {
25
26
  buttonStyle: 'primaryFooter',
26
27
  label: t('buttons.share'),
27
- isDisabled: Number(itemsSelected.length) === 0,
28
+ isDisabled,
28
29
  onClick: () => onShareContacts(getContactByIds(itemsSelected)),
29
30
  }, button2: {
30
31
  buttonStyle: 'secondaryFooter',
31
32
  label: t('buttons.delete'),
33
+ isDisabled,
32
34
  onClick: () => onDeleteContacts(itemsSelected),
33
35
  } }) }) })] }));
34
36
  };
@@ -1,3 +1,3 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { ItemFormPanelI } from '../../../../interfaces';
3
- export declare const ItemFormPanel: ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const ItemFormPanel: ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
3
3
  import { PanelHeader, FooterDrawer, ItemNameHeader, ItemFormFooter, Overlay, } from '../../..';
4
- export const ItemFormPanel = ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter = false, }) => {
5
- return (_jsxs(DrawerContent, { bg: "lightBlue.1", zIndex: 4, children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { padding: "0", bg: "lightBlue.1", children: [_jsx(ItemNameHeader, { id: "item-name", onSave: onSaveItemName, value: itemName }), _jsxs(Box, { position: "relative", overflowY: "scroll", h: "inherit", pb: "12", children: [_jsx(Overlay, { showOverlay: !itemName, 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 }) }) })] }));
4
+ export const ItemFormPanel = ({ children, itemName, onClose, onSaveItemName, onSubmitForm, panelIcon, panelTitle, showFooter = false, showOverlay = false, }) => {
5
+ 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 }) }) })] }));
6
6
  };
@@ -2,7 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
2
2
  import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-ui/react';
3
3
  import { ChevronDown, Overlay } from '..';
4
4
  export const IconMenu = ({ disabled = false, icon = _jsx(ChevronDown, {}), itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', }) => {
5
- return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Box, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick, "data-testid": "icon-menu" }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: () => handleClick(itemForm), _hover: {
5
+ return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Box, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick, "data-testid": "icon-menu" }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: (e) => {
6
+ e.stopPropagation();
7
+ handleClick(itemForm);
8
+ }, _hover: {
6
9
  bg: 'lightGreen.1',
7
10
  }, _focus: {
8
11
  bg: 'lightGreen.1',
@@ -6,4 +6,5 @@ export interface ItemFormPanelI {
6
6
  panelIcon: string;
7
7
  panelTitle: string;
8
8
  showFooter?: boolean;
9
+ showOverlay?: boolean;
9
10
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.8.7",
3
+ "version": "2.8.9",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
@@ -66,6 +66,7 @@ export const ContactsContent = ({
66
66
  } = useWindowDimensions()
67
67
 
68
68
  const maxW = width > 413 ? '16rem' : '10rem'
69
+ const isDisabled = Number(itemsSelected.length) === 0
69
70
 
70
71
  return (
71
72
  <DrawerContent bg="lightBlue.1">
@@ -161,12 +162,13 @@ export const ContactsContent = ({
161
162
  button1={{
162
163
  buttonStyle: 'primaryFooter',
163
164
  label: t('buttons.share'),
164
- isDisabled: Number(itemsSelected.length) === 0,
165
+ isDisabled,
165
166
  onClick: () => onShareContacts(getContactByIds(itemsSelected)),
166
167
  }}
167
168
  button2={{
168
169
  buttonStyle: 'secondaryFooter',
169
170
  label: t('buttons.delete'),
171
+ isDisabled,
170
172
  onClick: () => onDeleteContacts(itemsSelected),
171
173
  }}
172
174
  />
@@ -24,6 +24,7 @@ export const ItemFormPanel = ({
24
24
  panelIcon,
25
25
  panelTitle,
26
26
  showFooter = false,
27
+ showOverlay = false,
27
28
  }: PropsWithChildren<ItemFormPanelI>) => {
28
29
  return (
29
30
  <DrawerContent bg="lightBlue.1" zIndex={4}>
@@ -35,15 +36,21 @@ export const ItemFormPanel = ({
35
36
  />
36
37
  </DrawerHeader>
37
38
 
38
- <DrawerBody padding="0" bg="lightBlue.1">
39
+ <DrawerBody
40
+ p="0"
41
+ pb="12"
42
+ overflowX="hidden"
43
+ overflowY="scroll"
44
+ bg="lightBlue.1"
45
+ >
39
46
  <ItemNameHeader
40
47
  id="item-name"
41
48
  onSave={onSaveItemName}
42
49
  value={itemName}
43
50
  />
44
- <Box position="relative" overflowY="scroll" h="inherit" pb="12">
51
+ <Box position="relative">
45
52
  <Overlay
46
- showOverlay={!itemName}
53
+ showOverlay={showOverlay}
47
54
  position="absolute"
48
55
  w="inherit"
49
56
  h="inherit"
@@ -41,7 +41,10 @@ export const IconMenu = ({
41
41
  <MenuItem
42
42
  data-testid={label}
43
43
  key={label}
44
- onClick={() => handleClick(itemForm)}
44
+ onClick={(e) => {
45
+ e.stopPropagation()
46
+ handleClick(itemForm)
47
+ }}
45
48
  _hover={{
46
49
  bg: 'lightGreen.1',
47
50
  }}
@@ -6,4 +6,5 @@ export interface ItemFormPanelI {
6
6
  panelIcon: string
7
7
  panelTitle: string
8
8
  showFooter?: boolean
9
+ showOverlay?: boolean
9
10
  }