reshaped 2.11.10 → 2.11.11

package/components/_private/Flyout/utilities/calculatePosition.js

@@ -0,0 +1,97 @@
+const SCREEN_OFFSET = 16;
+const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};
+/**
+ * Calculate styles for the current position
+ */
+const calculatePosition = (args) => {
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width } = args;
+    let left = 0;
+    let top = 0;
+    let position = passedPosition;
+    if (rtl)
+        position = getRTLPosition(position);
+    if (width === "full" || width === "trigger") {
+        position = position.includes("top") ? "top" : "bottom";
+    }
+    switch (position) {
+        case "bottom":
+        case "top":
+            left = centerBySize(triggerBounds.width, flyoutBounds.width) + triggerBounds.left;
+            break;
+        case "start":
+        case "start-top":
+        case "start-bottom":
+            left = triggerBounds.left - triggerBounds.width;
+            break;
+        case "end":
+        case "end-top":
+        case "end-bottom":
+            left = triggerBounds.right;
+            break;
+        case "top-start":
+        case "bottom-start":
+            left = triggerBounds.left;
+            break;
+        case "top-end":
+        case "bottom-end":
+            left = triggerBounds.right - flyoutBounds.width;
+            break;
+        default:
+            break;
+    }
+    switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+            top = triggerBounds.top - flyoutBounds.height;
+            break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            top = triggerBounds.bottom;
+            break;
+        case "start":
+        case "end":
+            top = centerBySize(triggerBounds.height, flyoutBounds.height) + triggerBounds.top;
+            break;
+        case "start-top":
+        case "end-top":
+            top = triggerBounds.top;
+            break;
+        case "start-bottom":
+        case "end-bottom":
+            top = triggerBounds.bottom - triggerBounds.height;
+            break;
+        default:
+            break;
+    }
+    if (top === undefined || left === undefined) {
+        throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
+    }
+    top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
+    left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
+    let widthStyle = Math.ceil(flyoutBounds.width);
+    const height = Math.ceil(flyoutBounds.height);
+    if (width === "full") {
+        left = SCREEN_OFFSET;
+        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
+    }
+    else if (width === "trigger") {
+        widthStyle = triggerBounds.width;
+    }
+    const styles = { left, top, width: widthStyle, height };
+    return { styles, position };
+};
+export default calculatePosition;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.11.10",
+	"version": "2.11.11",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

package/utilities/a11y/TrapFocus.d.ts

@@ -7,6 +7,7 @@ type ReleaseOptions = {
 type TrapOptions = {
     onNavigateOutside?: () => void;
     includeTrigger?: boolean;
+    initialFocusEl?: FocusableElement;
     mode?: TrapMode;
 };
 declare class TrapFocus {

package/utilities/a11y/TrapFocus.js

@@ -60,7 +60,7 @@ class TrapFocus {
          * and create a chain item
          */
         this.trap = (options = {}) => {
-            const { mode = "dialog", includeTrigger } = options;
+            const { mode = "dialog", includeTrigger, initialFocusEl } = options;
             const trigger = getActiveElement();
             const focusable = getFocusableElements(this.root, {
                 additionalElement: includeTrigger ? trigger : undefined,
@@ -84,14 +84,14 @@ class TrapFocus {
             if (mode === "dialog")
                 this.screenReaderTrap.trap();
             this.mutationObserver.observe(this.root, { childList: true, subtree: true });
-            if (!focusable.length)
+            if (!focusable.length && !initialFocusEl)
                 return;
             this.addListeners();
             // Don't add back to the chain if we're traversing back
             const tailItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
             if (!tailItem || this.root !== tailItem.data.root) {
                 this.chainId = TrapFocus.chain.add(this);
-                focusElement(focusable[0], { pseudoFocus });
+                focusElement(initialFocusEl || focusable[0], { pseudoFocus });
             }
             this.trapped = true;
         };

package/hooks/_private/useFlyout.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-/**
- * Typings
- */
-export type FlyoutPosition = "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "start" | "start-top" | "start-bottom" | "end" | "end-top" | "end-bottom";
-export type FlyoutWidth = "trigger" | string;
-type ElementRef = React.RefObject<HTMLElement>;
-type PassedFlyoutOptions = {
-    width?: FlyoutWidth;
-    position?: FlyoutPosition;
-    defaultActive?: boolean;
-    forcePosition?: boolean;
-};
-type FlyoutStyles = React.CSSProperties;
-type FlyoutState = {
-    styles: FlyoutStyles;
-    position?: FlyoutPosition;
-    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
-};
-type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<FlyoutState, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
-    render: () => void;
-    hide: () => void;
-    remove: () => void;
-};
-declare const useFlyout: UseFlyout;
-export default useFlyout;