@rango-dev/ui 0.15.1-next.10 → 0.15.1-next.11

package/dist/widget/ui/src/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAyGxD"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAoGxD"}

package/dist/widget/ui/src/hooks/index.d.ts

@@ -1,3 +1,2 @@
 export { useCopyToClipboard } from './useCopyToClipboard';
-export { usePaddingRight } from './usePaddingRight';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.15.1-next.10",
+  "version": "0.15.1-next.11",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",

package/src/components/Modal/Modal.tsx

@@ -4,9 +4,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { usePaddingRight } from '../../hooks';
 import { CloseIcon } from '../../icons';
-import { theme } from '../../theme';
 import { BottomLogo } from '../BottomLogo';
 import { Divider } from '../Divider';
 import { IconButton } from '../IconButton/IconButton';
@@ -23,7 +21,6 @@ import {
 
 const CLOSED_DELAY = 600;
 const OPEN_DELAY = 10;
-const DEFAULT_CONTENT_PADDING = 20;
 
 export function Modal(props: PropsWithChildren<PropTypes>) {
   const {
@@ -44,11 +41,6 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const [active, setActive] = useState(false);
   const [isMount, setIsMount] = useState(false);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  usePaddingRight({
-    elementRef: contentRef,
-    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget && dismissible) {
@@ -112,7 +104,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
                   </Flex>
                 </ModalHeader>
               )}
-              <Content ref={contentRef}>{children}</Content>
+              <Content>{children}</Content>
               {(hasLogo || footer) && (
                 <Footer>
                   <div className="footer__content">{footer}</div>

package/src/hooks/index.ts

@@ -1,2 +1 @@
 export { useCopyToClipboard } from './useCopyToClipboard';
-export { usePaddingRight } from './usePaddingRight';

package/dist/widget/ui/src/hooks/usePaddingRight.d.ts

@@ -1,8 +0,0 @@
-import type { MutableRefObject } from 'react';
-type Params = {
-    elementRef: MutableRefObject<HTMLElement | null>;
-    paddingRight: string;
-};
-export declare function usePaddingRight(params: Params): void;
-export {};
-//# sourceMappingURL=usePaddingRight.d.ts.map

package/dist/widget/ui/src/hooks/usePaddingRight.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePaddingRight.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/usePaddingRight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C,KAAK,MAAM,GAAG;IACZ,UAAU,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAMF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,QA2B7C"}

package/src/hooks/usePaddingRight.ts

@@ -1,41 +0,0 @@
-import type { MutableRefObject } from 'react';
-
-import { useLayoutEffect } from 'react';
-
-type Params = {
-  elementRef: MutableRefObject<HTMLElement | null>;
-  paddingRight: string;
-};
-
-/*
- * This hook employs ResizeObserver to prevent layout shift when the content of the layout overflows.
- * By implementing this solution, we ensure that there is a constant padding on the right side of the content, regardless of whether or not a scrollbar is present.
- */
-export function usePaddingRight(params: Params) {
-  const { elementRef, paddingRight } = params;
-  useLayoutEffect(() => {
-    let resizeObserver: ResizeObserver | null = null;
-    if (elementRef.current) {
-      resizeObserver = new ResizeObserver(() => {
-        if (elementRef.current) {
-          const scrollable =
-            elementRef.current.scrollHeight > elementRef.current.clientHeight;
-          if (scrollable) {
-            elementRef.current.style.paddingRight = `${
-              parseInt(paddingRight) -
-              (elementRef.current.offsetWidth - elementRef.current.clientWidth)
-            }px`;
-          } else {
-            elementRef.current.style.paddingRight = paddingRight;
-          }
-        }
-      });
-      resizeObserver.observe(elementRef.current);
-    }
-    return () => {
-      if (elementRef.current) {
-        resizeObserver?.unobserve(elementRef.current);
-      }
-    };
-  }, [elementRef.current]);
-}