@mezzanine-ui/react 0.13.11 → 0.13.13

package/Tree/TreeNodeList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
 import { TreeNodeData, TreeNodeRefs } from './typings';

package/Tree/useTreeExpandedValue.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TreeNodeValue } from '@mezzanine-ui/core/tree';
 import { TreeNodeListProps } from './TreeNodeList';
 import { TreeNodeProp } from './typings';

package/Typography/Typography.js

@@ -34,6 +34,5 @@ const Typography = forwardRef(function Typography(props, ref) {
             [typographyClasses.noWrap]: noWrap,
         }, className), style: style, title: title, children: children }));
 });
-var Typography$1 = Typography;
 
-export { Typography$1 as default };
+export { Typography as default };

package/Upload/UploadButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '../Button';
 import { UploadInputProps } from './UploadInput';
 export interface UploadButtonProps extends Omit<ButtonProps, 'component' | 'prefix' | 'suffix'>, UploadInputProps {

package/Upload/UploadInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface UploadInputProps {
     /**
      * The accept attributes of native input element.

package/Upload/UploadInput.js

@@ -20,6 +20,5 @@ const UploadInput = forwardRef((props, ref) => {
             }
         }, type: "file" }));
 });
-var UploadInput$1 = UploadInput;
 
-export { UploadInput$1 as default };
+export { UploadInput as default };

package/Upload/UploadPictureWallItem.d.ts

@@ -11,5 +11,5 @@ export interface UploadPictureWallItemProps extends Pick<UploadPictureBlockProps
     onDelete?: MouseEventHandler;
     onUpload?: (files: File[]) => void;
 }
-declare const UploadPictureWallItem: (props: UploadPictureWallItemProps) => JSX.Element;
+declare const UploadPictureWallItem: (props: UploadPictureWallItemProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadPictureWallItem;

package/Upload/UploadPictureWallItem.js

@@ -14,6 +14,5 @@ const UploadPictureWallItem = (props) => {
     }, []);
     return (jsx("div", { className: cx(uploadPictureWallClasses.item), children: jsx(UploadPictureBlock, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: loader.current, multiple: multiple, onDelete: onDelete, onUpload: onUpload, fileHost: fileHost }) }));
 };
-var UploadPictureWallItem$1 = UploadPictureWallItem;
 
-export { UploadPictureWallItem$1 as default };
+export { UploadPictureWallItem as default };

package/_internal/InputTriggerPopper/InputTriggerPopper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PopperProps } from '../../Popper';
 import { FadeProps } from '../../Transition';
 export interface InputTriggerPopperProps extends PopperProps {

package/_internal/SlideFadeOverlay/SlideFadeOverlay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
 import { OverlayProps } from '../../Overlay';
 import { SlideFadeProps, SlideFadeDirection } from '../../Transition';

package/index.d.ts

@@ -5,6 +5,7 @@ export * from './utils/jsx-types';
 export * from './utils/general';
 export * from './utils/scroll-lock';
 export * from './utils/array-move';
+export * from './utils/get-scrollbar-width';
 export * from './hooks/useClickAway';
 export * from './hooks/useComposeRefs';
 export * from './hooks/useDocumentEscapeKeyDown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.13.11",
+  "version": "0.13.13",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -28,9 +28,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.13.11",
-    "@mezzanine-ui/icons": "^0.13.11",
-    "@mezzanine-ui/system": "^0.13.11",
+    "@mezzanine-ui/core": "^0.13.13",
+    "@mezzanine-ui/icons": "^0.13.13",
+    "@mezzanine-ui/system": "^0.13.13",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",

package/utils/get-scrollbar-width.d.ts

@@ -0,0 +1 @@
+export default function getScrollbarWidth(): number;

package/utils/get-scrollbar-width.js

@@ -0,0 +1,22 @@
+function getScrollbarWidth() {
+    // Create a temporary div container and append it into the body
+    const container = document.createElement('div');
+    // Append the element into the body
+    document.body.appendChild(container);
+    // Force scrollbar on the temporary div element
+    container.style.overflow = 'scroll';
+    container.style.width = '100px';
+    container.style.height = '100px';
+    // Add a fake inner element to get the scrollbar width
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    inner.style.height = '100%';
+    container.appendChild(inner);
+    // Calculate the width based on the container width minus its child width
+    const scrollbarWidth = container.offsetWidth - inner.offsetWidth;
+    // Remove the temporary elements from the DOM
+    document.body.removeChild(container);
+    return scrollbarWidth;
+}
+
+export { getScrollbarWidth as default };

package/utils/scroll-lock.js

@@ -1,10 +1,13 @@
+import getScrollbarWidth from './get-scrollbar-width.js';
+
 function lockBodyScroll() {
     const { scrollY, } = window;
     document.body.style.position = 'fixed';
     document.body.style.top = `-${scrollY}px`;
+    // Calculate scroll bar width and use padding-right to remain layout width.
+    const scrollbarWidth = getScrollbarWidth();
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
     document.body.style.overflow = 'hidden';
-    /** @NOTE workaround for layout breaking (need refactor) */
-    document.body.style.width = '100vw';
 }
 function allowBodyScroll() {
     var _a, _b;
@@ -12,6 +15,7 @@ function allowBodyScroll() {
     if (document.body.style.position === 'fixed') {
         document.body.style.position = '';
         document.body.style.top = '';
+        document.body.style.paddingRight = '';
         document.body.style.overflow = '';
         window.scrollTo(0, (scrollY || 0) * -1);
     }