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

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.9](https://github.com/spaced-out/ui-design-system/compare/v0.1.8...v0.1.9) (2023-04-05)
+
+
+### Bug Fixes
+
+* search input loader and typeahead fixes ([67db0fe](https://github.com/spaced-out/ui-design-system/commit/67db0fe3ad41f6d8a40a7fc77fef835ae96cc668))
+
+### [0.1.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.7...v0.1.8) (2023-04-05)
+
+
+### Bug Fixes
+
+* modal scroll fix ([47a2349](https://github.com/spaced-out/ui-design-system/commit/47a23496c8b9328ab6cbe3f7736635776fb4f797))
+* modal scroll fix ([c33b8bd](https://github.com/spaced-out/ui-design-system/commit/c33b8bd6b4a7cf4c4a51c2abe8a3211c829b054b))
+
 ### [0.1.7](https://github.com/spaced-out/ui-design-system/compare/v0.1.6...v0.1.7) (2023-04-05)
 
 

package/lib/components/Modal/Modal.js

@@ -67,6 +67,34 @@ const createPortalRoot = id => {
   return modalRoot;
 };
 const getModalRoot = id => document.getElementById(`modal-root-${id}`);
+function hasChildNode(nodeList) {
+  for (let i = 0, len = nodeList.length; i < len; i++) {
+    if (nodeList[i].firstChild !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+const fixBody = bodyEl => {
+  document.getElementsByTagName('body')[0].classList.add('fixed');
+  bodyEl.style.overflow = 'hidden';
+};
+const unfixBody = bodyEl => {
+  document.getElementsByTagName('body')[0].classList.remove('fixed');
+  bodyEl.style.overflow = '';
+};
+const checkAndAddBodyOverflow = bodyEl => {
+  const nodes = document.querySelectorAll('[id^="modal-root"]');
+  let isParentModalPresent = false;
+  if (nodes.length) {
+    isParentModalPresent = hasChildNode(nodes);
+  }
+  if (isParentModalPresent) {
+    fixBody(bodyEl);
+  } else {
+    unfixBody(bodyEl);
+  }
+};
 const Modal = _ref4 => {
   let {
     classNames,
@@ -74,7 +102,6 @@ const Modal = _ref4 => {
     isOpen = false,
     onClose,
     hideBackdrop = false,
-    removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
   } = _ref4;
@@ -97,7 +124,7 @@ const Modal = _ref4 => {
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -107,11 +134,11 @@ const Modal = _ref4 => {
     const updatePageScroll = () => {
       if (isOpen) {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = 'hidden';
+          fixBody(bodyRef.current);
         }
       } else {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = '';
+          unfixBody(bodyRef.current);
         }
       }
     };
@@ -132,7 +159,14 @@ const Modal = _ref4 => {
       window.removeEventListener('keyup', onKeyPress);
     };
   }, [isOpen, onClose]);
-  if (!isTransitioning && removeWhenClosed && !isOpen) {
+  if (!isTransitioning && !isOpen) {
+    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
+    // TODO(Nishant): Better way to do this?
+    setTimeout(() => {
+      if (bodyRef && !!bodyRef.current) {
+        checkAndAddBodyOverflow(bodyRef.current);
+      }
+    });
     return null;
   }
   const onBackdropClick = e => {

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

@@ -37,6 +37,7 @@ export type ModalProps = {
   isOpen?: boolean,
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
   hideBackdrop?: boolean,
+  // This prop is removed now
   removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
@@ -116,13 +117,44 @@ const createPortalRoot = (id: string) => {
 const getModalRoot = (id: string) =>
   document.getElementById(`modal-root-${id}`);
 
+function hasChildNode(nodeList) {
+  for (let i = 0, len = nodeList.length; i < len; i++) {
+    if (nodeList[i].firstChild !== null) {
+      return true;
+    }
+  }
+  return false;
+}
+
+const fixBody = (bodyEl: HTMLBodyElement) => {
+  document.getElementsByTagName('body')[0].classList.add('fixed');
+  bodyEl.style.overflow = 'hidden';
+};
+
+const unfixBody = (bodyEl: HTMLBodyElement) => {
+  document.getElementsByTagName('body')[0].classList.remove('fixed');
+  bodyEl.style.overflow = '';
+};
+
+const checkAndAddBodyOverflow = (bodyEl: HTMLBodyElement) => {
+  const nodes = document.querySelectorAll('[id^="modal-root"]');
+  let isParentModalPresent = false;
+  if (nodes.length) {
+    isParentModalPresent = hasChildNode(nodes);
+  }
+  if (isParentModalPresent) {
+    fixBody(bodyEl);
+  } else {
+    unfixBody(bodyEl);
+  }
+};
+
 export const Modal = ({
   classNames,
   children,
   isOpen = false,
   onClose,
   hideBackdrop = false,
-  removeWhenClosed = true,
   tapOutsideToClose = true,
   initialFocus = -1,
 }: ModalProps): React.Node => {
@@ -150,7 +182,7 @@ export const Modal = ({
       portal.remove();
       // Ensure scroll overflow is removed
       if (bodyEl) {
-        bodyEl.style.overflow = '';
+        unfixBody(bodyEl);
       }
     };
   }, []);
@@ -160,11 +192,11 @@ export const Modal = ({
     const updatePageScroll = () => {
       if (isOpen) {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = 'hidden';
+          fixBody(bodyRef.current);
         }
       } else {
         if (bodyRef.current) {
-          bodyRef.current.style.overflow = '';
+          unfixBody(bodyRef.current);
         }
       }
     };
@@ -189,7 +221,15 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && removeWhenClosed && !isOpen) {
+  if (!isTransitioning && !isOpen) {
+    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
+    // TODO(Nishant): Better way to do this?
+    setTimeout(() => {
+      if (bodyRef && !!bodyRef.current) {
+        checkAndAddBodyOverflow(bodyRef.current);
+      }
+    });
+
     return null;
   }
 

package/lib/components/SearchInput/SearchInput.js

@@ -53,7 +53,8 @@ const SearchInput = _ref => {
     })
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     colorToken: "colorFillPrimary",
-    size: size
+    className: _SearchInputModule.default.loader,
+    size: "small"
   })));
 };
 exports.SearchInput = SearchInput;

package/lib/components/SearchInput/SearchInput.js.flow

@@ -64,7 +64,11 @@ export const SearchInput = ({
             [css.small]: size === 'small',
           })}
         >
-          <CircularLoader colorToken="colorFillPrimary" size={size} />
+          <CircularLoader
+            colorToken="colorFillPrimary"
+            className={css.loader}
+            size="small"
+          />
         </div>
       )}
     </div>

package/lib/components/SearchInput/SearchInput.module.css

@@ -1,5 +1,6 @@
 @value (
-  colorTextPrimary
+  colorTextPrimary,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -7,15 +8,10 @@
   size34
 ) from '../../styles/variables/_size.css';
 
-@value (
-  spaceXXSmall
-) from '../../styles/variables/_space.css';
-
 .searchInputWrapper {
   display: flex;
   position: relative;
   align-items: end;
-  gap: spaceXXSmall;
   height: fit-content;
 }
 
@@ -34,11 +30,15 @@
   align-items: center;
   justify-content: center;
   align-items: center;
-  margin-right: calc((size42 * -1) - spaceXXSmall);
+  margin-left: calc(size42 * -1);
 }
 
 .loaderContainer.small {
   height: size34;
   width: size34;
-  margin-right: calc((size34 * -1) - spaceXXSmall);
+  margin-left: calc(size34 * -1);
+}
+
+.loader {
+  background-color: colorBackgroundTertiary;
 }

package/lib/components/Table/Row.js

@@ -77,7 +77,9 @@ function DefaultRow(_ref2) {
       sticky
     } = item;
     const value = data[key];
-    return Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+    return Renderer ? /*#__PURE__*/React.createElement(Renderer
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       data: data,
       extras: extras,
@@ -85,7 +87,9 @@ function DefaultRow(_ref2) {
       className: (0, _classify.default)({
         [_TableModule.default.stickyCell]: sticky
       })
-    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell, {
+    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       title: String(value),
       className: (0, _classify.default)(cellClassName, {

package/lib/components/Table/Row.js.flow

@@ -126,6 +126,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
         const value = data[key];
         return Renderer ? (
           <Renderer
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             data={data}
             extras={extras}
@@ -134,6 +135,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
           />
         ) : (
           <SingleCell
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             title={String(value)}
             className={classify(cellClassName, {[css.stickyCell]: sticky})}

package/lib/components/Table/TableHeader.js

@@ -100,7 +100,9 @@ function DefaultTableHeader(props) {
     return /*#__PURE__*/React.createElement(BasicHeadCell, {
       className: (0, _classify.default)({
         [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
-      }, headerClassName),
+      }, headerClassName)
+      // eslint-disable-next-line react/no-array-index-key
+      ,
       key: index,
       scope: "col",
       onClick: headCellClickHandler

package/lib/components/Table/TableHeader.js.flow

@@ -166,6 +166,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
               },
               headerClassName,
             )}
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             scope="col"
             onClick={headCellClickHandler}

package/lib/components/Text/Text.js

@@ -29,8 +29,9 @@ const HighlightText = _ref => {
     highlights = (0, _string.escapeRegExp)(highlight);
   }
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
-  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
-    key: part,
+  return /*#__PURE__*/React.createElement("span", null, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line react/no-array-index-key
+    key: idx,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)

package/lib/components/Text/Text.js.flow

@@ -50,10 +50,11 @@ const HighlightText = ({
 
   return (
     <span>
-      {parts.map((part) =>
+      {parts.map((part, idx) =>
         highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
           <span
-            key={part}
+            // eslint-disable-next-line react/no-array-index-key
+            key={idx}
             className={classify(
               css.highlightText,
               {

package/package.json

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