@bigbinary/neetoui 8.2.50 → 8.2.51

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.
package/dist/Pane.js CHANGED
@@ -45,8 +45,6 @@ var Body = function Body(_ref) {
45
45
  }, children);
46
46
  };
47
47
 
48
- var DEFAULT_PANE_HEADER_HEIGHT = 78;
49
-
50
48
  var Footer = function Footer(_ref) {
51
49
  var children = _ref.children,
52
50
  className = _ref.className;
@@ -64,9 +62,18 @@ var Header = function Header(_ref) {
64
62
  }, children);
65
63
  };
66
64
 
67
- var getHeaderHeight = function getHeaderHeight(paneWrapper) {
68
- var header = paneWrapper.current.querySelector(".neeto-ui-pane__header");
69
- return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;
65
+ var DEFAULT_PANE_HEADER_HEIGHT = 78;
66
+
67
+ var getHeader = function getHeader(paneWrapperRef) {
68
+ return paneWrapperRef.current.querySelector(".neeto-ui-pane__header");
69
+ };
70
+ var updateHeaderHeight = function updateHeaderHeight(header, paneWrapperRef) {
71
+ var headerHeight = header.offsetHeight;
72
+ if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
73
+ paneWrapperRef.current.style.setProperty("--neeto-ui-pane-header-height", "".concat(headerHeight, "px"));
74
+ } else {
75
+ paneWrapperRef.current.style.removeProperty("--neeto-ui-pane-header-height");
76
+ }
70
77
  };
71
78
 
72
79
  var _excluded = ["size", "isOpen", "onClose", "children", "className", "closeOnEsc", "closeButton", "backdropClassName", "closeOnOutsideClick", "initialFocusRef", "finalFocusRef"];
@@ -99,11 +106,16 @@ var Pane = function Pane(_ref) {
99
106
  _useState2 = _slicedToArray(_useState, 2),
100
107
  hasTransitionCompleted = _useState2[0],
101
108
  setHasTransitionCompleted = _useState2[1];
102
- var paneWrapper = useRef(null);
109
+ var paneWrapperRef = useRef(null);
103
110
  var backdropRef = useRef(null);
104
- useOverlayManager(paneWrapper, isOpen);
111
+ var observerRef = useRef(new ResizeObserver(function (_ref2) {
112
+ var _ref3 = _slicedToArray(_ref2, 1),
113
+ entry = _ref3[0];
114
+ return updateHeaderHeight(entry.target, paneWrapperRef);
115
+ }));
116
+ useOverlayManager(paneWrapperRef, isOpen);
105
117
  var _useOverlay = useOverlay({
106
- overlayWrapper: paneWrapper,
118
+ overlayWrapper: paneWrapperRef,
107
119
  backdropRef: backdropRef,
108
120
  closeOnOutsideClick: closeOnOutsideClick,
109
121
  closeOnEsc: closeOnEsc,
@@ -116,11 +128,14 @@ var Pane = function Pane(_ref) {
116
128
  handleOverlayClose = _useOverlay.handleOverlayClose,
117
129
  setFocusField = _useOverlay.setFocusField;
118
130
  useEffect(function () {
119
- if (!hasTransitionCompleted) return;
120
- var headerHeight = getHeaderHeight(paneWrapper);
121
- if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
122
- paneWrapper.current.style.setProperty("--neeto-ui-pane-header-height", "".concat(headerHeight, "px"));
123
- }
131
+ if (!hasTransitionCompleted) return undefined;
132
+ var header = getHeader(paneWrapperRef);
133
+ if (!header) return undefined;
134
+ var observer = observerRef.current;
135
+ observer.observe(header);
136
+ return function () {
137
+ return observer.disconnect();
138
+ };
124
139
  }, [hasTransitionCompleted]);
125
140
  return /*#__PURE__*/React__default.createElement(Portal, {
126
141
  rootId: "neeto-ui-portal"
@@ -144,7 +159,7 @@ var Pane = function Pane(_ref) {
144
159
  }, /*#__PURE__*/React__default.createElement("div", _extends({
145
160
  "data-cy": "pane-wrapper",
146
161
  key: "pane-wrapper",
147
- ref: paneWrapper,
162
+ ref: paneWrapperRef,
148
163
  className: classnames("neeto-ui-pane__wrapper", _defineProperty({
149
164
  "neeto-ui-pane__wrapper--small": size === SIZES.small,
150
165
  "neeto-ui-pane__wrapper--large": size === SIZES.large
package/dist/Pane.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pane.js","sources":["../src/components/Pane/Body.jsx","../src/components/Pane/constants.js","../src/components/Pane/Footer.jsx","../src/components/Pane/Header.jsx","../src/components/Pane/utils.js","../src/components/Pane/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Body = ({ children, className, hasFooter = true }) => (\n <div\n data-cy=\"pane-body\"\n className={classnames(\n \"neeto-ui-pane__body neeto-ui-flex neeto-ui-flex-col neeto-ui-items-start neeto-ui-justify-start\",\n {\n \"neeto-ui-pane__body--has-footer\": hasFooter,\n [className]: className,\n }\n )}\n >\n {children}\n </div>\n);\n\nBody.propTypes = {\n /**\n * To specify if the Pane has a footer.\n * @default true\n */\n hasFooter: PropTypes.bool,\n /**\n * To specify className to be applied to the Pane Body container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Body.\n */\n children: PropTypes.node,\n};\n\nexport default Body;\n","export const DEFAULT_PANE_HEADER_HEIGHT = 78;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Footer = ({ children, className }) => (\n <div\n className={classnames(\n \"neeto-ui-pane__footer neeto-ui-flex neeto-ui-items-center\",\n className\n )}\n >\n {children}\n </div>\n);\n\nFooter.propTypes = {\n /**\n * To specify className to be applied to the Pane Footer container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Footer.\n */\n children: PropTypes.node,\n};\n\nexport default Footer;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Header = ({ children, className }) => (\n <div\n className={classnames(\"neeto-ui-pane__header\", className)}\n data-cy=\"pane-header\"\n >\n {children}\n </div>\n);\n\nHeader.propTypes = {\n /**\n * To specify className to be applied to the Pane Header container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Header.\n */\n children: PropTypes.node,\n};\n\nexport default Header;\n","import { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\n\nexport const getHeaderHeight = paneWrapper => {\n const header = paneWrapper.current.querySelector(\".neeto-ui-pane__header\");\n\n return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;\n};\n","import React, { useRef, useState, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\nimport { Close } from \"neetoicons\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport Backdrop from \"atoms/Backdrop\";\nimport Portal from \"atoms/Portal\";\nimport Button from \"components/Button\";\nimport { useOverlay, useOverlayManager } from \"hooks\";\n\nimport Body from \"./Body\";\nimport { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\nimport Footer from \"./Footer\";\nimport Header from \"./Header\";\nimport { getHeaderHeight } from \"./utils\";\n\nconst SIZES = { small: \"small\", large: \"large\" };\n\nconst Pane = ({\n size = SIZES.small,\n isOpen = false,\n onClose = () => {},\n children,\n className = \"\",\n closeOnEsc = true,\n closeButton = true,\n backdropClassName = \"\",\n closeOnOutsideClick = true,\n initialFocusRef,\n finalFocusRef,\n ...otherProps\n}) => {\n const [hasTransitionCompleted, setHasTransitionCompleted] = useState(false);\n\n const paneWrapper = useRef(null);\n const backdropRef = useRef(null);\n\n useOverlayManager(paneWrapper, isOpen);\n\n const { handleOverlayClose, setFocusField } = useOverlay({\n overlayWrapper: paneWrapper,\n backdropRef,\n closeOnOutsideClick,\n closeOnEsc,\n onClose,\n isOpen,\n initialFocusRef,\n finalFocusRef,\n hasTransitionCompleted,\n });\n\n useEffect(() => {\n if (!hasTransitionCompleted) return;\n const headerHeight = getHeaderHeight(paneWrapper);\n if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {\n paneWrapper.current.style.setProperty(\n \"--neeto-ui-pane-header-height\",\n `${headerHeight}px`\n );\n }\n }, [hasTransitionCompleted]);\n\n return (\n <Portal rootId=\"neeto-ui-portal\">\n <CSSTransition\n unmountOnExit\n appear={isOpen}\n classNames=\"neeto-ui-pane\"\n in={isOpen}\n timeout={230}\n onEntered={() => setHasTransitionCompleted(true)}\n onExited={() => setHasTransitionCompleted(false)}\n >\n <Backdrop\n data-testid=\"backdrop\"\n key=\"pane-backdrop\"\n ref={backdropRef}\n className={classnames(\n \"neeto-ui-pane__backdrop neeto-ui-flex neeto-ui-justify-end\",\n backdropClassName\n )}\n >\n <div\n data-cy=\"pane-wrapper\"\n key=\"pane-wrapper\"\n ref={paneWrapper}\n className={classnames(\"neeto-ui-pane__wrapper\", {\n \"neeto-ui-pane__wrapper--small\": size === SIZES.small,\n \"neeto-ui-pane__wrapper--large\": size === SIZES.large,\n [className]: className,\n })}\n {...otherProps}\n >\n {closeButton && (\n <Button\n aria-label=\"Close\"\n className=\"neeto-ui-pane__close\"\n data-cy=\"pane-close-button\"\n data-testid=\"close-button\"\n icon={Close}\n size=\"small\"\n style=\"text\"\n onClick={handleOverlayClose}\n />\n )}\n {hasTransitionCompleted && (\n <>\n {typeof children === \"function\"\n ? children({ setFocusField })\n : children}\n </>\n )}\n </div>\n </Backdrop>\n </CSSTransition>\n </Portal>\n );\n};\n\nPane.propTypes = {\n /**\n * To specify the size of the Pane.\n */\n size: PropTypes.oneOf(Object.values(SIZES)),\n /**\n * To specify whether the Pane component is open or not.\n */\n isOpen: PropTypes.bool,\n /**\n * To specify the callback which will be invoked when the close button of Pane is clicked.\n */\n onClose: PropTypes.func,\n /**\n * To specify the content to be rendered inside the Pane component.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n /**\n * To provide external classname to the Pane component.\n */\n className: PropTypes.string,\n /**\n * To specify whether the Pane component should close on esc key press.\n */\n closeOnEsc: PropTypes.bool,\n /**\n * To specify whether the Pane component should render close button.\n */\n closeButton: PropTypes.bool,\n /**\n * To specify the classname to be applied to the backdrop element.\n */\n backdropClassName: PropTypes.string,\n /**\n * To specify whether the Pane component should close on outside click.\n */\n closeOnOutsideClick: PropTypes.bool,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is opened.\n * If not specified, the first focusable element inside the Pane component will be focused.\n * If there are no focusable elements, the Pane component itself will be focused.\n */\n initialFocusRef: PropTypes.object,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is closed.\n * If not specified, the element which was focused when the Pane component was opened will be focused.\n */\n finalFocusRef: PropTypes.object,\n};\n\nPane.Header = Header;\nPane.Body = Body;\nPane.Footer = Footer;\n\nexport default Pane;\n"],"names":["Body","_ref","children","className","_ref$hasFooter","hasFooter","React","createElement","classnames","_defineProperty","DEFAULT_PANE_HEADER_HEIGHT","Footer","Header","getHeaderHeight","paneWrapper","header","current","querySelector","offsetHeight","SIZES","small","large","Pane","_ref$size","size","_ref$isOpen","isOpen","_ref$onClose","onClose","_ref$className","_ref$closeOnEsc","closeOnEsc","_ref$closeButton","closeButton","_ref$backdropClassNam","backdropClassName","_ref$closeOnOutsideCl","closeOnOutsideClick","initialFocusRef","finalFocusRef","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","hasTransitionCompleted","setHasTransitionCompleted","useRef","backdropRef","useOverlayManager","_useOverlay","useOverlay","overlayWrapper","handleOverlayClose","setFocusField","useEffect","headerHeight","style","setProperty","concat","Portal","rootId","CSSTransition","unmountOnExit","appear","classNames","timeout","onEntered","onExited","Backdrop","key","ref","_extends","Button","icon","Close","onClick","Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"Pane.js","sources":["../src/components/Pane/Body.jsx","../src/components/Pane/Footer.jsx","../src/components/Pane/Header.jsx","../src/components/Pane/constants.js","../src/components/Pane/utils.js","../src/components/Pane/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Body = ({ children, className, hasFooter = true }) => (\n <div\n data-cy=\"pane-body\"\n className={classnames(\n \"neeto-ui-pane__body neeto-ui-flex neeto-ui-flex-col neeto-ui-items-start neeto-ui-justify-start\",\n {\n \"neeto-ui-pane__body--has-footer\": hasFooter,\n [className]: className,\n }\n )}\n >\n {children}\n </div>\n);\n\nBody.propTypes = {\n /**\n * To specify if the Pane has a footer.\n * @default true\n */\n hasFooter: PropTypes.bool,\n /**\n * To specify className to be applied to the Pane Body container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Body.\n */\n children: PropTypes.node,\n};\n\nexport default Body;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Footer = ({ children, className }) => (\n <div\n className={classnames(\n \"neeto-ui-pane__footer neeto-ui-flex neeto-ui-items-center\",\n className\n )}\n >\n {children}\n </div>\n);\n\nFooter.propTypes = {\n /**\n * To specify className to be applied to the Pane Footer container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Footer.\n */\n children: PropTypes.node,\n};\n\nexport default Footer;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Header = ({ children, className }) => (\n <div\n className={classnames(\"neeto-ui-pane__header\", className)}\n data-cy=\"pane-header\"\n >\n {children}\n </div>\n);\n\nHeader.propTypes = {\n /**\n * To specify className to be applied to the Pane Header container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Header.\n */\n children: PropTypes.node,\n};\n\nexport default Header;\n","export const DEFAULT_PANE_HEADER_HEIGHT = 78;\n","import { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\n\nexport const getHeader = paneWrapperRef =>\n paneWrapperRef.current.querySelector(\".neeto-ui-pane__header\");\n\nexport const updateHeaderHeight = (header, paneWrapperRef) => {\n const headerHeight = header.offsetHeight;\n\n if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {\n paneWrapperRef.current.style.setProperty(\n \"--neeto-ui-pane-header-height\",\n `${headerHeight}px`\n );\n } else {\n paneWrapperRef.current.style.removeProperty(\n \"--neeto-ui-pane-header-height\"\n );\n }\n};\n","import React, { useRef, useState, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\nimport { Close } from \"neetoicons\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport Backdrop from \"atoms/Backdrop\";\nimport Portal from \"atoms/Portal\";\nimport Button from \"components/Button\";\nimport { useOverlay, useOverlayManager } from \"hooks\";\n\nimport Body from \"./Body\";\nimport Footer from \"./Footer\";\nimport Header from \"./Header\";\nimport { getHeader, updateHeaderHeight } from \"./utils\";\n\nconst SIZES = { small: \"small\", large: \"large\" };\n\nconst Pane = ({\n size = SIZES.small,\n isOpen = false,\n onClose = () => {},\n children,\n className = \"\",\n closeOnEsc = true,\n closeButton = true,\n backdropClassName = \"\",\n closeOnOutsideClick = true,\n initialFocusRef,\n finalFocusRef,\n ...otherProps\n}) => {\n const [hasTransitionCompleted, setHasTransitionCompleted] = useState(false);\n\n const paneWrapperRef = useRef(null);\n const backdropRef = useRef(null);\n\n const observerRef = useRef(\n new ResizeObserver(([entry]) =>\n updateHeaderHeight(entry.target, paneWrapperRef)\n )\n );\n\n useOverlayManager(paneWrapperRef, isOpen);\n\n const { handleOverlayClose, setFocusField } = useOverlay({\n overlayWrapper: paneWrapperRef,\n backdropRef,\n closeOnOutsideClick,\n closeOnEsc,\n onClose,\n isOpen,\n initialFocusRef,\n finalFocusRef,\n hasTransitionCompleted,\n });\n\n useEffect(() => {\n if (!hasTransitionCompleted) return undefined;\n\n const header = getHeader(paneWrapperRef);\n if (!header) return undefined;\n\n const observer = observerRef.current;\n observer.observe(header);\n\n return () => observer.disconnect();\n }, [hasTransitionCompleted]);\n\n return (\n <Portal rootId=\"neeto-ui-portal\">\n <CSSTransition\n unmountOnExit\n appear={isOpen}\n classNames=\"neeto-ui-pane\"\n in={isOpen}\n timeout={230}\n onEntered={() => setHasTransitionCompleted(true)}\n onExited={() => setHasTransitionCompleted(false)}\n >\n <Backdrop\n data-testid=\"backdrop\"\n key=\"pane-backdrop\"\n ref={backdropRef}\n className={classnames(\n \"neeto-ui-pane__backdrop neeto-ui-flex neeto-ui-justify-end\",\n backdropClassName\n )}\n >\n <div\n data-cy=\"pane-wrapper\"\n key=\"pane-wrapper\"\n ref={paneWrapperRef}\n className={classnames(\"neeto-ui-pane__wrapper\", {\n \"neeto-ui-pane__wrapper--small\": size === SIZES.small,\n \"neeto-ui-pane__wrapper--large\": size === SIZES.large,\n [className]: className,\n })}\n {...otherProps}\n >\n {closeButton && (\n <Button\n aria-label=\"Close\"\n className=\"neeto-ui-pane__close\"\n data-cy=\"pane-close-button\"\n data-testid=\"close-button\"\n icon={Close}\n size=\"small\"\n style=\"text\"\n onClick={handleOverlayClose}\n />\n )}\n {hasTransitionCompleted && (\n <>\n {typeof children === \"function\"\n ? children({ setFocusField })\n : children}\n </>\n )}\n </div>\n </Backdrop>\n </CSSTransition>\n </Portal>\n );\n};\n\nPane.propTypes = {\n /**\n * To specify the size of the Pane.\n */\n size: PropTypes.oneOf(Object.values(SIZES)),\n /**\n * To specify whether the Pane component is open or not.\n */\n isOpen: PropTypes.bool,\n /**\n * To specify the callback which will be invoked when the close button of Pane is clicked.\n */\n onClose: PropTypes.func,\n /**\n * To specify the content to be rendered inside the Pane component.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n /**\n * To provide external classname to the Pane component.\n */\n className: PropTypes.string,\n /**\n * To specify whether the Pane component should close on esc key press.\n */\n closeOnEsc: PropTypes.bool,\n /**\n * To specify whether the Pane component should render close button.\n */\n closeButton: PropTypes.bool,\n /**\n * To specify the classname to be applied to the backdrop element.\n */\n backdropClassName: PropTypes.string,\n /**\n * To specify whether the Pane component should close on outside click.\n */\n closeOnOutsideClick: PropTypes.bool,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is opened.\n * If not specified, the first focusable element inside the Pane component will be focused.\n * If there are no focusable elements, the Pane component itself will be focused.\n */\n initialFocusRef: PropTypes.object,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is closed.\n * If not specified, the element which was focused when the Pane component was opened will be focused.\n */\n finalFocusRef: PropTypes.object,\n};\n\nPane.Header = Header;\nPane.Body = Body;\nPane.Footer = Footer;\n\nexport default Pane;\n"],"names":["Body","_ref","children","className","_ref$hasFooter","hasFooter","React","createElement","classnames","_defineProperty","Footer","Header","DEFAULT_PANE_HEADER_HEIGHT","getHeader","paneWrapperRef","current","querySelector","updateHeaderHeight","header","headerHeight","offsetHeight","style","setProperty","concat","removeProperty","SIZES","small","large","Pane","_ref$size","size","_ref$isOpen","isOpen","_ref$onClose","onClose","_ref$className","_ref$closeOnEsc","closeOnEsc","_ref$closeButton","closeButton","_ref$backdropClassNam","backdropClassName","_ref$closeOnOutsideCl","closeOnOutsideClick","initialFocusRef","finalFocusRef","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","hasTransitionCompleted","setHasTransitionCompleted","useRef","backdropRef","observerRef","ResizeObserver","_ref2","_ref3","entry","target","useOverlayManager","_useOverlay","useOverlay","overlayWrapper","handleOverlayClose","setFocusField","useEffect","undefined","observer","observe","disconnect","Portal","rootId","CSSTransition","unmountOnExit","appear","classNames","timeout","onEntered","onExited","Backdrop","key","ref","_extends","Button","icon","Close","onClick","Fragment"],"mappings":"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"}
package/dist/cjs/Pane.js CHANGED
@@ -47,8 +47,6 @@ var Body = function Body(_ref) {
47
47
  }, children);
48
48
  };
49
49
 
50
- var DEFAULT_PANE_HEADER_HEIGHT = 78;
51
-
52
50
  var Footer = function Footer(_ref) {
53
51
  var children = _ref.children,
54
52
  className = _ref.className;
@@ -66,9 +64,18 @@ var Header = function Header(_ref) {
66
64
  }, children);
67
65
  };
68
66
 
69
- var getHeaderHeight = function getHeaderHeight(paneWrapper) {
70
- var header = paneWrapper.current.querySelector(".neeto-ui-pane__header");
71
- return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;
67
+ var DEFAULT_PANE_HEADER_HEIGHT = 78;
68
+
69
+ var getHeader = function getHeader(paneWrapperRef) {
70
+ return paneWrapperRef.current.querySelector(".neeto-ui-pane__header");
71
+ };
72
+ var updateHeaderHeight = function updateHeaderHeight(header, paneWrapperRef) {
73
+ var headerHeight = header.offsetHeight;
74
+ if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
75
+ paneWrapperRef.current.style.setProperty("--neeto-ui-pane-header-height", "".concat(headerHeight, "px"));
76
+ } else {
77
+ paneWrapperRef.current.style.removeProperty("--neeto-ui-pane-header-height");
78
+ }
72
79
  };
73
80
 
74
81
  var _excluded = ["size", "isOpen", "onClose", "children", "className", "closeOnEsc", "closeButton", "backdropClassName", "closeOnOutsideClick", "initialFocusRef", "finalFocusRef"];
@@ -101,11 +108,16 @@ var Pane = function Pane(_ref) {
101
108
  _useState2 = _slicedToArray(_useState, 2),
102
109
  hasTransitionCompleted = _useState2[0],
103
110
  setHasTransitionCompleted = _useState2[1];
104
- var paneWrapper = React.useRef(null);
111
+ var paneWrapperRef = React.useRef(null);
105
112
  var backdropRef = React.useRef(null);
106
- useOverlayManager.useOverlayManager(paneWrapper, isOpen);
113
+ var observerRef = React.useRef(new ResizeObserver(function (_ref2) {
114
+ var _ref3 = _slicedToArray(_ref2, 1),
115
+ entry = _ref3[0];
116
+ return updateHeaderHeight(entry.target, paneWrapperRef);
117
+ }));
118
+ useOverlayManager.useOverlayManager(paneWrapperRef, isOpen);
107
119
  var _useOverlay = useOverlayManager.useOverlay({
108
- overlayWrapper: paneWrapper,
120
+ overlayWrapper: paneWrapperRef,
109
121
  backdropRef: backdropRef,
110
122
  closeOnOutsideClick: closeOnOutsideClick,
111
123
  closeOnEsc: closeOnEsc,
@@ -118,11 +130,14 @@ var Pane = function Pane(_ref) {
118
130
  handleOverlayClose = _useOverlay.handleOverlayClose,
119
131
  setFocusField = _useOverlay.setFocusField;
120
132
  React.useEffect(function () {
121
- if (!hasTransitionCompleted) return;
122
- var headerHeight = getHeaderHeight(paneWrapper);
123
- if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {
124
- paneWrapper.current.style.setProperty("--neeto-ui-pane-header-height", "".concat(headerHeight, "px"));
125
- }
133
+ if (!hasTransitionCompleted) return undefined;
134
+ var header = getHeader(paneWrapperRef);
135
+ if (!header) return undefined;
136
+ var observer = observerRef.current;
137
+ observer.observe(header);
138
+ return function () {
139
+ return observer.disconnect();
140
+ };
126
141
  }, [hasTransitionCompleted]);
127
142
  return /*#__PURE__*/React.createElement(useOverlayManager.Portal, {
128
143
  rootId: "neeto-ui-portal"
@@ -146,7 +161,7 @@ var Pane = function Pane(_ref) {
146
161
  }, /*#__PURE__*/React.createElement("div", _extends({
147
162
  "data-cy": "pane-wrapper",
148
163
  key: "pane-wrapper",
149
- ref: paneWrapper,
164
+ ref: paneWrapperRef,
150
165
  className: classnames("neeto-ui-pane__wrapper", _defineProperty({
151
166
  "neeto-ui-pane__wrapper--small": size === SIZES.small,
152
167
  "neeto-ui-pane__wrapper--large": size === SIZES.large
@@ -1 +1 @@
1
- {"version":3,"file":"Pane.js","sources":["../../src/components/Pane/Body.jsx","../../src/components/Pane/constants.js","../../src/components/Pane/Footer.jsx","../../src/components/Pane/Header.jsx","../../src/components/Pane/utils.js","../../src/components/Pane/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Body = ({ children, className, hasFooter = true }) => (\n <div\n data-cy=\"pane-body\"\n className={classnames(\n \"neeto-ui-pane__body neeto-ui-flex neeto-ui-flex-col neeto-ui-items-start neeto-ui-justify-start\",\n {\n \"neeto-ui-pane__body--has-footer\": hasFooter,\n [className]: className,\n }\n )}\n >\n {children}\n </div>\n);\n\nBody.propTypes = {\n /**\n * To specify if the Pane has a footer.\n * @default true\n */\n hasFooter: PropTypes.bool,\n /**\n * To specify className to be applied to the Pane Body container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Body.\n */\n children: PropTypes.node,\n};\n\nexport default Body;\n","export const DEFAULT_PANE_HEADER_HEIGHT = 78;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Footer = ({ children, className }) => (\n <div\n className={classnames(\n \"neeto-ui-pane__footer neeto-ui-flex neeto-ui-items-center\",\n className\n )}\n >\n {children}\n </div>\n);\n\nFooter.propTypes = {\n /**\n * To specify className to be applied to the Pane Footer container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Footer.\n */\n children: PropTypes.node,\n};\n\nexport default Footer;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Header = ({ children, className }) => (\n <div\n className={classnames(\"neeto-ui-pane__header\", className)}\n data-cy=\"pane-header\"\n >\n {children}\n </div>\n);\n\nHeader.propTypes = {\n /**\n * To specify className to be applied to the Pane Header container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Header.\n */\n children: PropTypes.node,\n};\n\nexport default Header;\n","import { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\n\nexport const getHeaderHeight = paneWrapper => {\n const header = paneWrapper.current.querySelector(\".neeto-ui-pane__header\");\n\n return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;\n};\n","import React, { useRef, useState, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\nimport { Close } from \"neetoicons\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport Backdrop from \"atoms/Backdrop\";\nimport Portal from \"atoms/Portal\";\nimport Button from \"components/Button\";\nimport { useOverlay, useOverlayManager } from \"hooks\";\n\nimport Body from \"./Body\";\nimport { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\nimport Footer from \"./Footer\";\nimport Header from \"./Header\";\nimport { getHeaderHeight } from \"./utils\";\n\nconst SIZES = { small: \"small\", large: \"large\" };\n\nconst Pane = ({\n size = SIZES.small,\n isOpen = false,\n onClose = () => {},\n children,\n className = \"\",\n closeOnEsc = true,\n closeButton = true,\n backdropClassName = \"\",\n closeOnOutsideClick = true,\n initialFocusRef,\n finalFocusRef,\n ...otherProps\n}) => {\n const [hasTransitionCompleted, setHasTransitionCompleted] = useState(false);\n\n const paneWrapper = useRef(null);\n const backdropRef = useRef(null);\n\n useOverlayManager(paneWrapper, isOpen);\n\n const { handleOverlayClose, setFocusField } = useOverlay({\n overlayWrapper: paneWrapper,\n backdropRef,\n closeOnOutsideClick,\n closeOnEsc,\n onClose,\n isOpen,\n initialFocusRef,\n finalFocusRef,\n hasTransitionCompleted,\n });\n\n useEffect(() => {\n if (!hasTransitionCompleted) return;\n const headerHeight = getHeaderHeight(paneWrapper);\n if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {\n paneWrapper.current.style.setProperty(\n \"--neeto-ui-pane-header-height\",\n `${headerHeight}px`\n );\n }\n }, [hasTransitionCompleted]);\n\n return (\n <Portal rootId=\"neeto-ui-portal\">\n <CSSTransition\n unmountOnExit\n appear={isOpen}\n classNames=\"neeto-ui-pane\"\n in={isOpen}\n timeout={230}\n onEntered={() => setHasTransitionCompleted(true)}\n onExited={() => setHasTransitionCompleted(false)}\n >\n <Backdrop\n data-testid=\"backdrop\"\n key=\"pane-backdrop\"\n ref={backdropRef}\n className={classnames(\n \"neeto-ui-pane__backdrop neeto-ui-flex neeto-ui-justify-end\",\n backdropClassName\n )}\n >\n <div\n data-cy=\"pane-wrapper\"\n key=\"pane-wrapper\"\n ref={paneWrapper}\n className={classnames(\"neeto-ui-pane__wrapper\", {\n \"neeto-ui-pane__wrapper--small\": size === SIZES.small,\n \"neeto-ui-pane__wrapper--large\": size === SIZES.large,\n [className]: className,\n })}\n {...otherProps}\n >\n {closeButton && (\n <Button\n aria-label=\"Close\"\n className=\"neeto-ui-pane__close\"\n data-cy=\"pane-close-button\"\n data-testid=\"close-button\"\n icon={Close}\n size=\"small\"\n style=\"text\"\n onClick={handleOverlayClose}\n />\n )}\n {hasTransitionCompleted && (\n <>\n {typeof children === \"function\"\n ? children({ setFocusField })\n : children}\n </>\n )}\n </div>\n </Backdrop>\n </CSSTransition>\n </Portal>\n );\n};\n\nPane.propTypes = {\n /**\n * To specify the size of the Pane.\n */\n size: PropTypes.oneOf(Object.values(SIZES)),\n /**\n * To specify whether the Pane component is open or not.\n */\n isOpen: PropTypes.bool,\n /**\n * To specify the callback which will be invoked when the close button of Pane is clicked.\n */\n onClose: PropTypes.func,\n /**\n * To specify the content to be rendered inside the Pane component.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n /**\n * To provide external classname to the Pane component.\n */\n className: PropTypes.string,\n /**\n * To specify whether the Pane component should close on esc key press.\n */\n closeOnEsc: PropTypes.bool,\n /**\n * To specify whether the Pane component should render close button.\n */\n closeButton: PropTypes.bool,\n /**\n * To specify the classname to be applied to the backdrop element.\n */\n backdropClassName: PropTypes.string,\n /**\n * To specify whether the Pane component should close on outside click.\n */\n closeOnOutsideClick: PropTypes.bool,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is opened.\n * If not specified, the first focusable element inside the Pane component will be focused.\n * If there are no focusable elements, the Pane component itself will be focused.\n */\n initialFocusRef: PropTypes.object,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is closed.\n * If not specified, the element which was focused when the Pane component was opened will be focused.\n */\n finalFocusRef: PropTypes.object,\n};\n\nPane.Header = Header;\nPane.Body = Body;\nPane.Footer = Footer;\n\nexport default Pane;\n"],"names":["Body","_ref","children","className","_ref$hasFooter","hasFooter","React","createElement","classnames","_defineProperty","DEFAULT_PANE_HEADER_HEIGHT","Footer","Header","getHeaderHeight","paneWrapper","header","current","querySelector","offsetHeight","SIZES","small","large","Pane","_ref$size","size","_ref$isOpen","isOpen","_ref$onClose","onClose","_ref$className","_ref$closeOnEsc","closeOnEsc","_ref$closeButton","closeButton","_ref$backdropClassNam","backdropClassName","_ref$closeOnOutsideCl","closeOnOutsideClick","initialFocusRef","finalFocusRef","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","hasTransitionCompleted","setHasTransitionCompleted","useRef","backdropRef","useOverlayManager","_useOverlay","useOverlay","overlayWrapper","handleOverlayClose","setFocusField","useEffect","headerHeight","style","setProperty","concat","Portal","rootId","CSSTransition","unmountOnExit","appear","classNames","timeout","onEntered","onExited","Backdrop","key","ref","_extends","Button","icon","Close","onClick","Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"Pane.js","sources":["../../src/components/Pane/Body.jsx","../../src/components/Pane/Footer.jsx","../../src/components/Pane/Header.jsx","../../src/components/Pane/constants.js","../../src/components/Pane/utils.js","../../src/components/Pane/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Body = ({ children, className, hasFooter = true }) => (\n <div\n data-cy=\"pane-body\"\n className={classnames(\n \"neeto-ui-pane__body neeto-ui-flex neeto-ui-flex-col neeto-ui-items-start neeto-ui-justify-start\",\n {\n \"neeto-ui-pane__body--has-footer\": hasFooter,\n [className]: className,\n }\n )}\n >\n {children}\n </div>\n);\n\nBody.propTypes = {\n /**\n * To specify if the Pane has a footer.\n * @default true\n */\n hasFooter: PropTypes.bool,\n /**\n * To specify className to be applied to the Pane Body container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Body.\n */\n children: PropTypes.node,\n};\n\nexport default Body;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Footer = ({ children, className }) => (\n <div\n className={classnames(\n \"neeto-ui-pane__footer neeto-ui-flex neeto-ui-items-center\",\n className\n )}\n >\n {children}\n </div>\n);\n\nFooter.propTypes = {\n /**\n * To specify className to be applied to the Pane Footer container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Footer.\n */\n children: PropTypes.node,\n};\n\nexport default Footer;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nconst Header = ({ children, className }) => (\n <div\n className={classnames(\"neeto-ui-pane__header\", className)}\n data-cy=\"pane-header\"\n >\n {children}\n </div>\n);\n\nHeader.propTypes = {\n /**\n * To specify className to be applied to the Pane Header container.\n */\n className: PropTypes.string,\n /**\n * To specify the content to be rendered inside the Pane Header.\n */\n children: PropTypes.node,\n};\n\nexport default Header;\n","export const DEFAULT_PANE_HEADER_HEIGHT = 78;\n","import { DEFAULT_PANE_HEADER_HEIGHT } from \"./constants\";\n\nexport const getHeader = paneWrapperRef =>\n paneWrapperRef.current.querySelector(\".neeto-ui-pane__header\");\n\nexport const updateHeaderHeight = (header, paneWrapperRef) => {\n const headerHeight = header.offsetHeight;\n\n if (headerHeight > DEFAULT_PANE_HEADER_HEIGHT) {\n paneWrapperRef.current.style.setProperty(\n \"--neeto-ui-pane-header-height\",\n `${headerHeight}px`\n );\n } else {\n paneWrapperRef.current.style.removeProperty(\n \"--neeto-ui-pane-header-height\"\n );\n }\n};\n","import React, { useRef, useState, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\nimport { Close } from \"neetoicons\";\nimport PropTypes from \"prop-types\";\nimport { CSSTransition } from \"react-transition-group\";\n\nimport Backdrop from \"atoms/Backdrop\";\nimport Portal from \"atoms/Portal\";\nimport Button from \"components/Button\";\nimport { useOverlay, useOverlayManager } from \"hooks\";\n\nimport Body from \"./Body\";\nimport Footer from \"./Footer\";\nimport Header from \"./Header\";\nimport { getHeader, updateHeaderHeight } from \"./utils\";\n\nconst SIZES = { small: \"small\", large: \"large\" };\n\nconst Pane = ({\n size = SIZES.small,\n isOpen = false,\n onClose = () => {},\n children,\n className = \"\",\n closeOnEsc = true,\n closeButton = true,\n backdropClassName = \"\",\n closeOnOutsideClick = true,\n initialFocusRef,\n finalFocusRef,\n ...otherProps\n}) => {\n const [hasTransitionCompleted, setHasTransitionCompleted] = useState(false);\n\n const paneWrapperRef = useRef(null);\n const backdropRef = useRef(null);\n\n const observerRef = useRef(\n new ResizeObserver(([entry]) =>\n updateHeaderHeight(entry.target, paneWrapperRef)\n )\n );\n\n useOverlayManager(paneWrapperRef, isOpen);\n\n const { handleOverlayClose, setFocusField } = useOverlay({\n overlayWrapper: paneWrapperRef,\n backdropRef,\n closeOnOutsideClick,\n closeOnEsc,\n onClose,\n isOpen,\n initialFocusRef,\n finalFocusRef,\n hasTransitionCompleted,\n });\n\n useEffect(() => {\n if (!hasTransitionCompleted) return undefined;\n\n const header = getHeader(paneWrapperRef);\n if (!header) return undefined;\n\n const observer = observerRef.current;\n observer.observe(header);\n\n return () => observer.disconnect();\n }, [hasTransitionCompleted]);\n\n return (\n <Portal rootId=\"neeto-ui-portal\">\n <CSSTransition\n unmountOnExit\n appear={isOpen}\n classNames=\"neeto-ui-pane\"\n in={isOpen}\n timeout={230}\n onEntered={() => setHasTransitionCompleted(true)}\n onExited={() => setHasTransitionCompleted(false)}\n >\n <Backdrop\n data-testid=\"backdrop\"\n key=\"pane-backdrop\"\n ref={backdropRef}\n className={classnames(\n \"neeto-ui-pane__backdrop neeto-ui-flex neeto-ui-justify-end\",\n backdropClassName\n )}\n >\n <div\n data-cy=\"pane-wrapper\"\n key=\"pane-wrapper\"\n ref={paneWrapperRef}\n className={classnames(\"neeto-ui-pane__wrapper\", {\n \"neeto-ui-pane__wrapper--small\": size === SIZES.small,\n \"neeto-ui-pane__wrapper--large\": size === SIZES.large,\n [className]: className,\n })}\n {...otherProps}\n >\n {closeButton && (\n <Button\n aria-label=\"Close\"\n className=\"neeto-ui-pane__close\"\n data-cy=\"pane-close-button\"\n data-testid=\"close-button\"\n icon={Close}\n size=\"small\"\n style=\"text\"\n onClick={handleOverlayClose}\n />\n )}\n {hasTransitionCompleted && (\n <>\n {typeof children === \"function\"\n ? children({ setFocusField })\n : children}\n </>\n )}\n </div>\n </Backdrop>\n </CSSTransition>\n </Portal>\n );\n};\n\nPane.propTypes = {\n /**\n * To specify the size of the Pane.\n */\n size: PropTypes.oneOf(Object.values(SIZES)),\n /**\n * To specify whether the Pane component is open or not.\n */\n isOpen: PropTypes.bool,\n /**\n * To specify the callback which will be invoked when the close button of Pane is clicked.\n */\n onClose: PropTypes.func,\n /**\n * To specify the content to be rendered inside the Pane component.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n /**\n * To provide external classname to the Pane component.\n */\n className: PropTypes.string,\n /**\n * To specify whether the Pane component should close on esc key press.\n */\n closeOnEsc: PropTypes.bool,\n /**\n * To specify whether the Pane component should render close button.\n */\n closeButton: PropTypes.bool,\n /**\n * To specify the classname to be applied to the backdrop element.\n */\n backdropClassName: PropTypes.string,\n /**\n * To specify whether the Pane component should close on outside click.\n */\n closeOnOutsideClick: PropTypes.bool,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is opened.\n * If not specified, the first focusable element inside the Pane component will be focused.\n * If there are no focusable elements, the Pane component itself will be focused.\n */\n initialFocusRef: PropTypes.object,\n\n /**\n * To specify the ref of the element which should be focused when the Pane component is closed.\n * If not specified, the element which was focused when the Pane component was opened will be focused.\n */\n finalFocusRef: PropTypes.object,\n};\n\nPane.Header = Header;\nPane.Body = Body;\nPane.Footer = Footer;\n\nexport default Pane;\n"],"names":["Body","_ref","children","className","_ref$hasFooter","hasFooter","React","createElement","classnames","_defineProperty","Footer","Header","DEFAULT_PANE_HEADER_HEIGHT","getHeader","paneWrapperRef","current","querySelector","updateHeaderHeight","header","headerHeight","offsetHeight","style","setProperty","concat","removeProperty","SIZES","small","large","Pane","_ref$size","size","_ref$isOpen","isOpen","_ref$onClose","onClose","_ref$className","_ref$closeOnEsc","closeOnEsc","_ref$closeButton","closeButton","_ref$backdropClassNam","backdropClassName","_ref$closeOnOutsideCl","closeOnOutsideClick","initialFocusRef","finalFocusRef","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","hasTransitionCompleted","setHasTransitionCompleted","useRef","backdropRef","observerRef","ResizeObserver","_ref2","_ref3","entry","target","useOverlayManager","_useOverlay","useOverlay","overlayWrapper","handleOverlayClose","setFocusField","useEffect","undefined","observer","observe","disconnect","Portal","rootId","CSSTransition","unmountOnExit","appear","classNames","timeout","onEntered","onExited","Backdrop","key","ref","_extends","Button","icon","Close","onClick","Fragment"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui",
3
- "version": "8.2.50",
3
+ "version": "8.2.51",
4
4
  "author": "BigBinary",
5
5
  "license": "MIT",
6
6
  "description": "neetoUI drives the experience at all neeto products",