venice-ui 1.0.13 → 1.0.15

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 (4) hide show
  1. package/dist/cjs/components/Sidepanel/Sidepanel.js +12 -9
  2. package/dist/esm/components/Sidepanel/Sidepanel.js +12 -9
  3. package/dist/types/components/Sidepanel/Sidepanel.d.ts +1 -0
  4. package/package.json +1 -1
package/dist/cjs/components/Sidepanel/Sidepanel.js CHANGED
@@ -30,11 +30,11 @@ const react_1 = __importStar(require("react"));
30
30
  const Modal_styles_1 = require("../Modal/Modal.styles");
31
31
  const Sidepanel_styles_1 = require("./Sidepanel.styles");
32
32
  const Icons_1 = require("../Icons");
33
- const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
33
+ const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
34
34
  const ref = (0, react_1.useRef)(null);
35
35
  (0, react_1.useEffect)(() => {
36
36
  const handleClickOutside = (event) => {
37
- if (ref.current && !ref.current.contains(event.target)) {
37
+ if (ref.current && !ref.current.contains(event.target) && isOpen) {
38
38
  handleClose && handleClose();
39
39
  }
40
40
  };
@@ -42,13 +42,16 @@ const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top
42
42
  return () => {
43
43
  document.removeEventListener('click', handleClickOutside, true);
44
44
  };
45
- }, [handleClose]);
45
+ }, []);
46
46
  const modalRoot = document.getElementById('root');
47
- return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
48
- react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
49
- react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
50
- iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
51
- children),
52
- overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })), modalRoot);
47
+ if (isOpen) {
48
+ return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
49
+ react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
50
+ react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
51
+ iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
52
+ children),
53
+ overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })), modalRoot);
54
+ }
55
+ return null;
53
56
  };
54
57
  exports.Sidepanel = Sidepanel;
package/dist/esm/components/Sidepanel/Sidepanel.js CHANGED
@@ -4,11 +4,11 @@ import React, { useEffect, useRef } from 'react';
4
4
  import { ModalOverlayer } from '../Modal/Modal.styles';
5
5
  import { SidepanelElement } from './Sidepanel.styles';
6
6
  import { Icon } from '../Icons';
7
- export const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
7
+ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
8
8
  const ref = useRef(null);
9
9
  useEffect(() => {
10
10
  const handleClickOutside = (event) => {
11
- if (ref.current && !ref.current.contains(event.target)) {
11
+ if (ref.current && !ref.current.contains(event.target) && isOpen) {
12
12
  handleClose && handleClose();
13
13
  }
14
14
  };
@@ -16,12 +16,15 @@ export const Sidepanel = ({ handleClose, children, right = false, overlayer = tr
16
16
  return () => {
17
17
  document.removeEventListener('click', handleClickOutside, true);
18
18
  };
19
- }, [handleClose]);
19
+ }, []);
20
20
  const modalRoot = document.getElementById('root');
21
- return ReactDOM.createPortal(React.createElement(React.Fragment, null,
22
- React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
23
- React.createElement(ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
24
- iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
25
- children),
26
- overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })), modalRoot);
21
+ if (isOpen) {
22
+ return ReactDOM.createPortal(React.createElement(React.Fragment, null,
23
+ React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
24
+ React.createElement(ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
25
+ iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
26
+ children),
27
+ overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })), modalRoot);
28
+ }
29
+ return null;
27
30
  };
package/dist/types/components/Sidepanel/Sidepanel.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { FC } from 'react';
2
2
  import { IIconsActions } from 'types';
3
3
  interface ISidepanel {
4
+ isOpen: boolean;
4
5
  children: React.ReactNode;
5
6
  handleClose: () => void;
6
7
  right?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",