@spaced-out/ui-design-system 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.7](https://github.com/spaced-out/ui-design-system/compare/v0.1.6...v0.1.7) (2023-04-05)
+
+
+### Bug Fixes
+
+* added documentation for link ([b233ce2](https://github.com/spaced-out/ui-design-system/commit/b233ce236a2ef4d8297bf4a333cf280d24fb6c87))
+* modal fix ([a8bcb31](https://github.com/spaced-out/ui-design-system/commit/a8bcb318f23006c502f74b569fa268c44856bb9c))
+
 ### [0.1.6](https://github.com/spaced-out/ui-design-system/compare/v0.1.5...v0.1.6) (2023-04-05)
 
 

package/lib/components/Modal/Modal.js

@@ -10,6 +10,7 @@ var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
 var _Button = require("../Button/Button");
 var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
@@ -60,11 +61,12 @@ const ModalFooter = _ref3 => {
   }, children)));
 };
 exports.ModalFooter = ModalFooter;
-const createPortalRoot = () => {
+const createPortalRoot = id => {
   const modalRoot = document.createElement('div');
-  modalRoot.setAttribute('id', 'modal-root');
+  modalRoot.setAttribute('id', `modal-root-${id}`);
   return modalRoot;
 };
+const getModalRoot = id => document.getElementById(`modal-root-${id}`);
 const Modal = _ref4 => {
   let {
     classNames,
@@ -80,8 +82,9 @@ const Modal = _ref4 => {
     floating,
     context
   } = (0, _reactDomInteractions.useFloating)();
+  const modalId = (0, _helpers.uuid)();
   const bodyRef = React.useRef(document.querySelector('body'));
-  const portalRootRef = React.useRef(document.getElementById('modal-root') || createPortalRoot());
+  const portalRootRef = React.useRef(getModalRoot(modalId) || createPortalRoot(modalId));
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
 
   // Append portal root on mount

package/lib/components/Modal/Modal.js.flow

@@ -13,6 +13,7 @@ import {
 import useMountTransition from '../../hooks/useMountTransition';
 import {motionDurationNormal} from '../../styles/variables/_motion';
 import classify from '../../utils/classify';
+import {uuid} from '../../utils/helpers';
 import {Button} from '../Button/Button';
 import {Truncate} from '../Truncate/Truncate';
 
@@ -105,13 +106,16 @@ export const ModalFooter = ({
   </>
 );
 
-const createPortalRoot = () => {
+const createPortalRoot = (id: string) => {
   const modalRoot = document.createElement('div');
-  modalRoot.setAttribute('id', 'modal-root');
+  modalRoot.setAttribute('id', `modal-root-${id}`);
 
   return modalRoot;
 };
 
+const getModalRoot = (id: string) =>
+  document.getElementById(`modal-root-${id}`);
+
 export const Modal = ({
   classNames,
   children,
@@ -123,10 +127,11 @@ export const Modal = ({
   initialFocus = -1,
 }: ModalProps): React.Node => {
   const {floating, context} = useFloating();
+  const modalId = uuid();
 
   const bodyRef = React.useRef(document.querySelector('body'));
   const portalRootRef = React.useRef(
-    document.getElementById('modal-root') || createPortalRoot(),
+    getModalRoot(modalId) || createPortalRoot(modalId),
   );
 
   const isTransitioning = useMountTransition(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {