@zohodesk/components 1.4.4 → 1.4.6

package/README.md

@@ -2,6 +2,31 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.6
+
+- **Popup**
+  - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+
+
+# 1.4.5
+
+- **Portal**
+  - Introduced the `Portal` component to act as a React portal.
+  - Supported `getPortalContainer`, `portalPrefix` from the library config.
+
+- **Popup**
+  - Fixed the auto-repositioning issue during fixed popup resize and improved the position calculation logic.
+
+- **Modal**
+  - Refactored to use the new `Portal` component for rendering, resolving unwanted rendering issues.
+  - Supported `getRootElement` & `portalPrefix` from the library config.
+
+- **Dropbox**
+  - Updated to use the new `Portal` component for rendering, resolving unwanted rendering issues.
+
+- **RippleEffect**
+  - Enhanced CSS specificity for `secondary` active background and border color variables.
+
 # 1.4.4
 
 - **Button** - Strikethrough effect on disabled buttons supported through `shouldStrikeThroughDisabled` prop.

package/es/AppContainer/AppContainer.js

@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/DropBox/DropBox.js

@@ -1,6 +1,6 @@
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from "../Modal/Modal"; // import { getLibraryConfig } from '../Provider/Config';
+import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';
 
 import LibraryContext from "../Provider/LibraryContextInit";
 import cssJSLogic from "./css/cssJSLogic";
@@ -62,13 +62,13 @@ export default function DropBox(props) {
     ...props,
     zIndexStyle: zIndexStyle
   });
-  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${style.freezeLayer} ${style.freeze}`,
     style: zIndexStyle,
     onClick: stopPropagation
-  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,

package/es/Modal/Modal.js

@@ -1,8 +1,9 @@
 /**** Libraries ****/
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Portal from "./Portal/Portal";
+import { getLibraryConfig } from "../Provider/Config";
 import style from "../AppContainer/AppContainer.module.css";
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
@@ -13,10 +14,13 @@ export default class Modal extends React.Component {
     this.handleAddPortalId = this.handleAddPortalId.bind(this);
     this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
     this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.getPortalDiv = this.getPortalDiv.bind(this);
+    this.setPortalDiv = this.setPortalDiv.bind(this);
+    this.getRootElement = this.getRootElement.bind(this);
+    this.getPortalPrefix = this.getPortalPrefix.bind(this);
     this.state = {
       isMounted: false
     };
+    this.portalPrefix = this.getPortalPrefix();
     this.portalId = props.portalId;
     this.setRef = this.setRef.bind(this);
     this.ref = null; // this.portalDiv = document.createDocumentFragment();
@@ -31,24 +35,40 @@ export default class Modal extends React.Component {
     }
   }
 
-  getPortalDiv() {
-    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
+  getRootElement() {
+    const getRootElement = getLibraryConfig('getRootElement');
 
-    if (!this.modalRoot) {
+    if (getRootElement && typeof getRootElement === 'function') {
+      const parent = getRootElement();
+
+      if (parent) {
+        return parent;
+      }
+    }
+
+    return null;
+  }
+
+  getPortalPrefix() {
+    const portalPrefix = getLibraryConfig('portalPrefix');
+    return portalPrefix !== '' ? portalPrefix : '';
+  }
+
+  setPortalDiv() {
+    const modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.portalPrefix}${this.props.portalId}]`) : '';
+
+    if (!modalRoot) {
       this.portalId = this.handleAddPortalId();
       this.newModalRoot = document.createElement('div');
       this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', this.portalId);
+      this.newModalRoot.setAttribute('data-portal', `${this.portalPrefix}${this.portalId}`);
       this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
-      this.modalRoot = this.newModalRoot;
     }
-
-    return this.modalRoot;
   }
 
   componentDidMount() {
-    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
-    this.portalDiv = this.getPortalDiv();
+    this.containerDiv = this.getRootElement() || document.getElementsByTagName('desk')[0] || document.getElementsByTagName('body')[0];
+    this.setPortalDiv();
     this.setState({
       isMounted: true
     }, () => {
@@ -57,7 +77,6 @@ export default class Modal extends React.Component {
   }
 
   componentWillUnmount() {
-    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
     if (this.newModalRoot) {
       this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
       this.handleRemovePortalId();
@@ -129,10 +148,12 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
+        return /*#__PURE__*/React.createElement(Portal, {
+          portalId: `${this.portalPrefix}${this.portalId}`
+        }, /*#__PURE__*/React.createElement(Element, {
           ref: this.setRef,
           ...elementProps
-        }), this.portalDiv);
+        }));
       }
 
       return null;

package/es/Modal/Portal/Portal.js

@@ -0,0 +1,33 @@
+import React from "react";
+import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
+import { getLibraryConfig } from "../../Provider/Config";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+export default function Portal(_ref) {
+  let {
+    children,
+    portalId
+  } = _ref;
+  const portalPrefix = getLibraryConfig("portalPrefix");
+
+  const getPortalContainer = () => {
+    const getPortalContainer = getLibraryConfig('getPortalContainer');
+
+    if (getPortalContainer && typeof getPortalContainer === 'function') {
+      const portal = getPortalContainer();
+
+      if (portal) {
+        return portal;
+      }
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(BasePortal, {
+    portalId: `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`,
+    getFallbackElement: getPortalContainer
+  }, children);
+}
+Portal.propTypes = propTypes;
+Portal.defaultProps = defaultProps;

package/es/Modal/Portal/__tests__/Portal.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import Portal from "../Portal";
+beforeEach(() => {
+  cleanup();
+});
+describe('Portal', () => {
+  test('rendering the defult props', () => {
+    const customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'portal1');
+    document.body.appendChild(customPortalContainer);
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", null, "Portal Div Check")));
+    expect(baseElement).toMatchSnapshot();
+  });
+  test('renders with portalId prop', () => {
+    const customPortalContainer = document.createElement('div');
+    customPortalContainer.setAttribute('data-portal', 'customPortal');
+    document.body.appendChild(customPortalContainer);
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(Portal, {
+      portalId: "customPortal"
+    }, /*#__PURE__*/React.createElement("div", null, "Portal Content Check")));
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/es/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal rendering the defult props 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  >
+    <div>
+      Portal Div Check
+    </div>
+  </div>
+  <div />
+</body>
+`;
+
+exports[`Portal renders with portalId prop 1`] = `
+<body>
+  <div
+    data-portal="portal1"
+  />
+  <div
+    data-portal="customPortal"
+  >
+    <div>
+      Portal Content Check
+    </div>
+  </div>
+  <div />
+</body>
+`;

package/es/Modal/Portal/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  portalId: 'portal1'
+};

package/es/Modal/Portal/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  portalId: PropTypes.string
+};