@elvia/elvis-toolbox - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

CHANGELOG.json

@@ -5,2 +5,19 @@ {
     {
+      "date": "15.09.22",
+      "version": "3.0.0",
+      "changelog": [
+        {
+          "type": "breaking_changes",
+          "changes": [
+            "Added horizontal alignment to <span class=\"code-text\">useConnectedOverlay</span> hook.",
+            "Redefined api for <span class=\"code-text\">useConnectedOverlay</span> to return an object",
+            "Added hook <span class=\"code-text\">useLongPress</span> to detect long presses on elements."
+          ],
+          "fixes": [
+            "Change response from <span class=\"code-text\">useConnectedOverlay</span> to an object, instead of an array."
+          ]
+        }
+      ]
+    },
+    {
       "date": "09.09.22",
@@ -7,0 +24,0 @@ "version": "2.2.0",

dist/hooks/useConnectedOverlay.d.ts

 import { Dispatch, RefObject, SetStateAction } from 'react';
+export declare type OverlayVerticalPosition = 'bottom' | 'center' | 'top';
+export declare type OverlayHorizontalPosition = 'left' | 'center' | 'right';
 interface Options {
     offset: number;
     alignWidths: boolean;
-    verticalPosition: 'bottom' | 'top';
+    verticalPosition: OverlayVerticalPosition;
+    horizontalPosition: OverlayHorizontalPosition;
 }
+interface OverlayApi {
+    isShowing: boolean;
+    setIsShowing: Dispatch<SetStateAction<boolean>>;
+    verticalPosition: OverlayVerticalPosition;
+    horizontalPosition: OverlayHorizontalPosition;
+    updatePreferredPosition: (verticalPosition?: OverlayVerticalPosition, horizontalPosition?: OverlayHorizontalPosition) => void;
+}
 /**
@@ -26,3 +36,3 @@ * A React hook that allows creating an overlay that is positioned relative to an element.
  */
-export declare const useConnectedOverlay: (connectedElement: RefObject<HTMLElement>, overlayContainer: RefObject<HTMLElement>, options?: Partial<Options>) => [boolean, Dispatch<SetStateAction<boolean>>];
+export declare const useConnectedOverlay: (connectedElement: RefObject<HTMLElement>, overlayContainer: RefObject<HTMLElement>, options?: Partial<Options>) => OverlayApi;
 export {};

dist/hooks/useConnectedOverlay.js

@@ -10,2 +10,3 @@ "use strict";
     verticalPosition: 'bottom',
+    horizontalPosition: 'center',
 };
@@ -32,3 +33,6 @@ /**
 const useConnectedOverlay = (connectedElement, overlayContainer, options) => {
+    const windowPadding = 8;
     const opts = Object.assign(Object.assign({}, defaultOptions), options);
+    const [verticalPosition, setVerticalPosition] = (0, react_1.useState)(opts.verticalPosition);
+    const [horizontalPosition, setHorizontalPosition] = (0, react_1.useState)(opts.horizontalPosition);
     const [isShowing, setIsShowing] = (0, react_1.useState)(false);
@@ -40,7 +44,11 @@ /** Get screen dimensions based on device */
         }
-        if (navigator.userAgent.toLowerCase().includes('android')) {
-            return { height: window.visualViewport.height, width: window.visualViewport.width };
+        if (navigator.userAgent.toLowerCase().includes('android') && window.visualViewport) {
+            return {
+                height: window.visualViewport.height,
+                width: window.visualViewport.width,
+                innerWidth: window.visualViewport.width,
+            };
         }
         else {
-            return { height: window.innerHeight, width: window.innerWidth };
+            return { height: window.innerHeight, width: window.innerWidth, innerWidth: document.body.clientWidth };
         }
@@ -51,5 +59,11 @@ };
             overlay.top = `${hostRect.bottom + opts.offset + scrollOffsetY}px`;
+            setVerticalPosition('bottom');
         };
+        const alignCenter = () => {
+            overlay.top = `${hostRect.top + (hostRect.height - overlayRect.height) / 2 + scrollOffsetY}px`;
+            setVerticalPosition('center');
+        };
         const alignTop = () => {
             overlay.top = `${hostRect.top - opts.offset - overlayRect.height + scrollOffsetY}px`;
+            setVerticalPosition('top');
         };
@@ -59,2 +73,5 @@ if (opts.verticalPosition === 'bottom') {
         }
+        else if (opts.verticalPosition === 'center') {
+            alignCenter();
+        }
         else {
@@ -64,6 +81,59 @@ hostRect.top - opts.offset - overlayRect.height > 0 ? alignTop() : alignBottom();
     };
-    const alignHorizontally = (overlay, hostRect) => {
-        // Extend useEffect to support horizontal positioning
-        overlay.left = `${hostRect.left}px`;
+    const alignHorizontally = (overlay, hostRect, scrollOffsetX, overlayWidth, window) => {
+        const alignLeft = () => {
+            overlay.left = `${hostRect.left - opts.offset - overlayWidth + scrollOffsetX}px`;
+            setHorizontalPosition('left');
+        };
+        const alignCenter = () => {
+            const overlayLeft = hostRect.left + (hostRect.width - overlayWidth) / 2 + scrollOffsetX;
+            if (overlayLeft <= windowPadding) {
+                overlay.left = `${windowPadding}px`;
+            }
+            else if (overlayLeft + overlayWidth >= window.innerWidth - windowPadding) {
+                overlay.left = `${window.innerWidth - overlayWidth - windowPadding}px`;
+            }
+            else {
+                overlay.left = `${hostRect.left + (hostRect.width - overlayWidth) / 2 + scrollOffsetX}px`;
+            }
+            setHorizontalPosition('center');
+        };
+        const alignRight = () => {
+            overlay.left = `${hostRect.right + opts.offset + scrollOffsetX}px`;
+            setHorizontalPosition('right');
+        };
+        if (opts.horizontalPosition === 'left') {
+            hostRect.left - opts.offset - overlayWidth > 0 ? alignLeft() : alignRight();
+        }
+        else if (opts.horizontalPosition === 'center') {
+            alignCenter();
+        }
+        else {
+            hostRect.right + opts.offset + overlayWidth < window.width ? alignRight() : alignLeft();
+        }
     };
+    const positionPopover = () => {
+        var _a, _b, _c;
+        const overlayStyle = (_a = overlayContainer.current) === null || _a === void 0 ? void 0 : _a.style;
+        const overlayRect = (_b = overlayContainer.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        const hostRect = (_c = connectedElement.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        const windowRect = getScreenDimensions();
+        const scrollOffsetY = window.scrollY;
+        const scrollOffsetX = window.scrollX;
+        if (overlayStyle && overlayRect && hostRect && windowRect) {
+            if (opts.alignWidths) {
+                overlayStyle.width = `${hostRect.width}px`;
+            }
+            alignVertically(overlayStyle, hostRect, scrollOffsetY, overlayRect, windowRect);
+            alignHorizontally(overlayStyle, hostRect, scrollOffsetX, opts.alignWidths ? hostRect.width : overlayRect.width, windowRect);
+        }
+    };
+    const updatePreferredPosition = (verticalPosition, horizontalPosition) => {
+        if (verticalPosition) {
+            opts.verticalPosition = verticalPosition;
+        }
+        if (horizontalPosition) {
+            opts.horizontalPosition = horizontalPosition;
+        }
+        positionPopover();
+    };
     (0, react_1.useEffect)(() => {
@@ -75,18 +145,6 @@ if (!isShowing) {
         const alignOverlayWithConnectedElement = () => {
-            var _a, _b, _c;
             if (!isShowing) {
                 return;
             }
-            const overlayStyle = (_a = overlayContainer.current) === null || _a === void 0 ? void 0 : _a.style;
-            const overlayRect = (_b = overlayContainer.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            const hostRect = (_c = connectedElement.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-            const windowRect = getScreenDimensions();
-            const scrollOffsetY = window.scrollY;
-            if (overlayStyle && overlayRect && hostRect && windowRect) {
-                alignVertically(overlayStyle, hostRect, scrollOffsetY, overlayRect, windowRect);
-                alignHorizontally(overlayStyle, hostRect);
-                if (opts.alignWidths) {
-                    overlayStyle.width = `${hostRect.width}px`;
-                }
-            }
+            positionPopover();
         };
@@ -104,4 +162,4 @@ alignOverlayWithConnectedElement();
     }, [isShowing]);
-    return [isShowing, setIsShowing];
+    return { isShowing, setIsShowing, verticalPosition, horizontalPosition, updatePreferredPosition };
 };
 exports.useConnectedOverlay = useConnectedOverlay;

dist/index.d.ts

 export * from './elvis-toolbox';
 export { isSsr } from './isSsr';
-export { useConnectedOverlay } from './hooks/useConnectedOverlay';
+export { useConnectedOverlay, OverlayVerticalPosition, OverlayHorizontalPosition, } from './hooks/useConnectedOverlay';
 export { useFocusTrap } from './hooks/useFocusTrap';
+export { useLongPress } from './hooks/useLongPress';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusTrap = exports.useConnectedOverlay = exports.isSsr = void 0;
+exports.useLongPress = exports.useFocusTrap = exports.useConnectedOverlay = exports.isSsr = void 0;
 const tslib_1 = require("tslib");
@@ -12,1 +12,3 @@ tslib_1.__exportStar(require("./elvis-toolbox"), exports);
 Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return useFocusTrap_1.useFocusTrap; } });
+var useLongPress_1 = require("./hooks/useLongPress");
+Object.defineProperty(exports, "useLongPress", { enumerable: true, get: function () { return useLongPress_1.useLongPress; } });

package.json

 {
   "name": "@elvia/elvis-toolbox",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

src/hooks/useConnectedOverlay.ts

@@ -7,8 +7,13 @@ import { Dispatch, RefObject, SetStateAction, useEffect, useState } from 'react';
   width: number;
+  innerWidth: number;
 }
 
+export type OverlayVerticalPosition = 'bottom' | 'center' | 'top';
+export type OverlayHorizontalPosition = 'left' | 'center' | 'right';
+
 interface Options {
   offset: number;
   alignWidths: boolean;
-  verticalPosition: 'bottom' | 'top'; // TODO: Make a single type for this for the whole repo
+  verticalPosition: OverlayVerticalPosition;
+  horizontalPosition: OverlayHorizontalPosition;
 }
@@ -20,4 +25,16 @@
   verticalPosition: 'bottom',
+  horizontalPosition: 'center',
 };
 
+interface OverlayApi {
+  isShowing: boolean;
+  setIsShowing: Dispatch<SetStateAction<boolean>>;
+  verticalPosition: OverlayVerticalPosition;
+  horizontalPosition: OverlayHorizontalPosition;
+  updatePreferredPosition: (
+    verticalPosition?: OverlayVerticalPosition,
+    horizontalPosition?: OverlayHorizontalPosition,
+  ) => void;
+}
+
 /**
@@ -46,4 +63,9 @@ * A React hook that allows creating an overlay that is positioned relative to an element.
   options?: Partial<Options>,
-): [boolean, Dispatch<SetStateAction<boolean>>] => {
+): OverlayApi => {
+  const windowPadding = 8;
   const opts: Options = { ...defaultOptions, ...options };
+  const [verticalPosition, setVerticalPosition] = useState<OverlayVerticalPosition>(opts.verticalPosition);
+  const [horizontalPosition, setHorizontalPosition] = useState<OverlayHorizontalPosition>(
+    opts.horizontalPosition,
+  );
   const [isShowing, setIsShowing] = useState(false);
@@ -56,6 +78,10 @@
     }
-    if (navigator.userAgent.toLowerCase().includes('android')) {
-      return { height: window.visualViewport.height, width: window.visualViewport.width };
+    if (navigator.userAgent.toLowerCase().includes('android') && window.visualViewport) {
+      return {
+        height: window.visualViewport.height,
+        width: window.visualViewport.width,
+        innerWidth: window.visualViewport.width,
+      };
     } else {
-      return { height: window.innerHeight, width: window.innerWidth };
+      return { height: window.innerHeight, width: window.innerWidth, innerWidth: document.body.clientWidth };
     }
@@ -73,6 +99,13 @@ };
       overlay.top = `${hostRect.bottom + opts.offset + scrollOffsetY}px`;
+      setVerticalPosition('bottom');
     };
 
+    const alignCenter = () => {
+      overlay.top = `${hostRect.top + (hostRect.height - overlayRect.height) / 2 + scrollOffsetY}px`;
+      setVerticalPosition('center');
+    };
+
     const alignTop = () => {
       overlay.top = `${hostRect.top - opts.offset - overlayRect.height + scrollOffsetY}px`;
+      setVerticalPosition('top');
     };
@@ -82,2 +115,4 @@
       hostRect.bottom + opts.offset + overlayRect.height < window.height ? alignBottom() : alignTop();
+    } else if (opts.verticalPosition === 'center') {
+      alignCenter();
     } else {
@@ -88,7 +123,77 @@ hostRect.top - opts.offset - overlayRect.height > 0 ? alignTop() : alignBottom();
 
-  const alignHorizontally = (overlay: CSSStyleDeclaration, hostRect: DOMRect): void => {
-    // Extend useEffect to support horizontal positioning
-    overlay.left = `${hostRect.left}px`;
+  const alignHorizontally = (
+    overlay: CSSStyleDeclaration,
+    hostRect: DOMRect,
+    scrollOffsetX: number,
+    overlayWidth: number,
+    window: WindowRect,
+  ): void => {
+    const alignLeft = () => {
+      overlay.left = `${hostRect.left - opts.offset - overlayWidth + scrollOffsetX}px`;
+      setHorizontalPosition('left');
+    };
+
+    const alignCenter = () => {
+      const overlayLeft = hostRect.left + (hostRect.width - overlayWidth) / 2 + scrollOffsetX;
+      if (overlayLeft <= windowPadding) {
+        overlay.left = `${windowPadding}px`;
+      } else if (overlayLeft + overlayWidth >= window.innerWidth - windowPadding) {
+        overlay.left = `${window.innerWidth - overlayWidth - windowPadding}px`;
+      } else {
+        overlay.left = `${hostRect.left + (hostRect.width - overlayWidth) / 2 + scrollOffsetX}px`;
+      }
+      setHorizontalPosition('center');
+    };
+
+    const alignRight = () => {
+      overlay.left = `${hostRect.right + opts.offset + scrollOffsetX}px`;
+      setHorizontalPosition('right');
+    };
+
+    if (opts.horizontalPosition === 'left') {
+      hostRect.left - opts.offset - overlayWidth > 0 ? alignLeft() : alignRight();
+    } else if (opts.horizontalPosition === 'center') {
+      alignCenter();
+    } else {
+      hostRect.right + opts.offset + overlayWidth < window.width ? alignRight() : alignLeft();
+    }
   };
 
+  const positionPopover = (): void => {
+    const overlayStyle = overlayContainer.current?.style;
+    const overlayRect = overlayContainer.current?.getBoundingClientRect();
+    const hostRect = connectedElement.current?.getBoundingClientRect();
+    const windowRect = getScreenDimensions();
+    const scrollOffsetY = window.scrollY;
+    const scrollOffsetX = window.scrollX;
+
+    if (overlayStyle && overlayRect && hostRect && windowRect) {
+      if (opts.alignWidths) {
+        overlayStyle.width = `${hostRect.width}px`;
+      }
+
+      alignVertically(overlayStyle, hostRect, scrollOffsetY, overlayRect, windowRect);
+      alignHorizontally(
+        overlayStyle,
+        hostRect,
+        scrollOffsetX,
+        opts.alignWidths ? hostRect.width : overlayRect.width,
+        windowRect,
+      );
+    }
+  };
+
+  const updatePreferredPosition = (
+    verticalPosition?: OverlayVerticalPosition,
+    horizontalPosition?: OverlayHorizontalPosition,
+  ): void => {
+    if (verticalPosition) {
+      opts.verticalPosition = verticalPosition;
+    }
+    if (horizontalPosition) {
+      opts.horizontalPosition = horizontalPosition;
+    }
+    positionPopover();
+  };
+
   useEffect(() => {
@@ -105,16 +210,3 @@ if (!isShowing) {
 
-      const overlayStyle = overlayContainer.current?.style;
-      const overlayRect = overlayContainer.current?.getBoundingClientRect();
-      const hostRect = connectedElement.current?.getBoundingClientRect();
-      const windowRect = getScreenDimensions();
-      const scrollOffsetY = window.scrollY;
-
-      if (overlayStyle && overlayRect && hostRect && windowRect) {
-        alignVertically(overlayStyle, hostRect, scrollOffsetY, overlayRect, windowRect);
-        alignHorizontally(overlayStyle, hostRect);
-
-        if (opts.alignWidths) {
-          overlayStyle.width = `${hostRect.width}px`;
-        }
-      }
+      positionPopover();
     };
@@ -137,3 +229,3 @@
 
-  return [isShowing, setIsShowing];
+  return { isShowing, setIsShowing, verticalPosition, horizontalPosition, updatePreferredPosition };
 };

src/index.ts

 export * from './elvis-toolbox';
 export { isSsr } from './isSsr';
-export { useConnectedOverlay } from './hooks/useConnectedOverlay';
+export {
+  useConnectedOverlay,
+  OverlayVerticalPosition,
+  OverlayHorizontalPosition,
+} from './hooks/useConnectedOverlay';
 export { useFocusTrap } from './hooks/useFocusTrap';
+export { useLongPress } from './hooks/useLongPress';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42541

increased by29.8%

Number of package files

21

increased by16.67%

Lines of code

1096

increased by29.09%

No dependency changes