reshaped 3.0.3 → 3.0.5

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

@@ -33,7 +33,7 @@ const calculatePosition = (args) => {
         case "start":
         case "start-top":
         case "start-bottom":
-            left = triggerBounds.left - triggerBounds.width;
+            left = triggerBounds.left - flyoutBounds.width;
             break;
         case "end":
         case "end-top":
@@ -72,7 +72,7 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - triggerBounds.height;
+            top = triggerBounds.bottom - flyoutBounds.height;
             break;
         default:
             break;
@@ -92,6 +92,6 @@ const calculatePosition = (args) => {
         widthStyle = triggerBounds.width;
     }
     const styles = { left, top, width: widthStyle, height };
-    return { styles, position };
+    return { styles, position, scopeOffset };
 };
 export default calculatePosition;

package/dist/components/_private/Flyout/utilities/cooldown.d.ts

@@ -0,0 +1,8 @@
+declare class Cooldown {
+    status: "cold" | "warm" | "cooling";
+    timer?: ReturnType<typeof setTimeout>;
+    warm: () => void;
+    cool: () => void;
+}
+declare const _default: Cooldown;
+export default _default;

package/dist/components/_private/Flyout/utilities/cooldown.js

@@ -0,0 +1,18 @@
+class Cooldown {
+    status = "cold";
+    timer;
+    warm = () => {
+        clearTimeout(this.timer);
+        this.status = "warm";
+    };
+    cool = () => {
+        this.status = "cooling";
+        const currentTimer = setTimeout(() => {
+            this.status = "cold";
+            if (currentTimer === this.timer)
+                this.timer = undefined;
+        }, 1000);
+        this.timer = currentTimer;
+    };
+}
+export default new Cooldown();

package/dist/components/_private/Portal/Portal.types.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export type Props = {
     children?: React.ReactNode;
-    targetRef?: React.RefObject<HTMLElement | null>;
+    targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;
 };
 export type ScopeProps<T extends HTMLElement> = {
     children: (ref: React.RefObject<T>) => React.ReactNode;

package/dist/hooks/useScrollLock.d.ts

@@ -1,4 +1,7 @@
-declare const useScrollLock: () => {
+import React from "react";
+declare const useScrollLock: (args?: {
+    ref?: React.RefObject<HTMLElement | ShadowRoot>;
+}) => {
     scrollLocked: boolean;
     lockScroll: () => void;
     unlockScroll: () => void;

package/dist/hooks/useScrollLock.js

@@ -17,28 +17,33 @@ const getScrollbarWidth = (() => {
         return scrollbarWidth;
     };
 })();
-const useScrollLock = () => {
+const useScrollLock = (args) => {
+    const { ref } = args || {};
     const [locked, setLocked] = React.useState(false);
     const overflowStyleRef = React.useRef();
     const isOverflowingRef = React.useRef(false);
+    let targetEl = document.body;
+    if (ref?.current) {
+        targetEl =
+            ref?.current instanceof ShadowRoot ? ref?.current?.host : ref.current;
+    }
     const lockScroll = React.useCallback(() => {
-        const { body } = document;
-        const rect = body.getBoundingClientRect();
+        const rect = targetEl.getBoundingClientRect();
         isOverflowingRef.current = rect.left + rect.right < window.innerWidth;
-        overflowStyleRef.current = body.style.overflow;
-        body.style.overflow = "hidden";
+        overflowStyleRef.current = targetEl.style.overflow;
+        targetEl.style.overflow = "hidden";
         if (isOverflowingRef.current) {
             const scrollBarWidth = getScrollbarWidth();
-            document.body.style.paddingRight = `${scrollBarWidth}px`;
+            targetEl.style.paddingRight = `${scrollBarWidth}px`;
         }
         setLocked(true);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
+    }, [setLocked, isOverflowingRef, overflowStyleRef, targetEl]);
     const unlockScroll = React.useCallback(() => {
-        document.body.style.overflow = overflowStyleRef.current || "";
+        targetEl.style.overflow = overflowStyleRef.current || "";
         if (isOverflowingRef.current)
-            document.body.style.paddingRight = "";
+            targetEl.style.paddingRight = "";
         setLocked(false);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
+    }, [setLocked, isOverflowingRef, overflowStyleRef, targetEl]);
     return { scrollLocked: locked, lockScroll, unlockScroll };
 };
 export default useScrollLock;

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export type { CalendarProps } from "./components/Calendar";
 export { default as Card } from "./components/Card";
 export type { CardProps } from "./components/Card";
 export { default as Carousel } from "./components/Carousel";
-export type { CarouselProps, CarouselInstanceRef } from "./components/Carousel";
+export type { CarouselProps, CarouselInstanceRef, CarouselInstance } from "./components/Carousel";
 export { default as Checkbox } from "./components/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
@@ -36,7 +36,7 @@ export type { DismissibleProps } from "./components/Dismissible";
 export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
 export { default as DropdownMenu } from "./components/DropdownMenu";
-export type { DropdownMenuProps } from "./components/DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuInstance } from "./components/DropdownMenu";
 export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
@@ -66,7 +66,7 @@ export type { PaginationProps } from "./components/Pagination";
 export { default as PinField } from "./components/PinField";
 export type { PinFieldProps } from "./components/PinField";
 export { default as Popover } from "./components/Popover";
-export type { PopoverProps } from "./components/Popover";
+export type { PopoverProps, PopoverInstance } from "./components/Popover";
 export { default as Progress } from "./components/Progress";
 export type { ProgressProps } from "./components/Progress";
 export { default as Radio } from "./components/Radio";

package/dist/styles/border/border.module.css

@@ -0,0 +1 @@
+.root{border:1px solid var(--rs-border-color)}.--border-neutral{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand{--rs-border-color:var(--rs-color-brand)}.--border-transparent{--rs-border-color:transparent}@media (--rs-viewport-m ){.--border-neutral--m{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--m{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--m{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--m{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--m{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--m{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--m{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--m{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--m{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--m{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--m{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--m{--rs-border-color:var(--rs-color-brand)}.--border-transparent--m{--rs-border-color:transparent}}@media (--rs-viewport-l ){.--border-neutral--l{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--l{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--l{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--l{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--l{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--l{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--l{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--l{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--l{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--l{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--l{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--l{--rs-border-color:var(--rs-color-brand)}.--border-transparent--l{--rs-border-color:transparent}}@media (--rs-viewport-xl ){.--border-neutral--xl{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--xl{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--xl{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--xl{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--xl{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--xl{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--xl{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--xl{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--xl{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--xl{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--xl{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--xl{--rs-border-color:var(--rs-color-brand)}.--border-transparent--xl{--rs-border-color:transparent}}

package/dist/styles/border/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getBorderStyles: T.StaticStyleUtility<T.BorderColor>;
+export default getBorderStyles;

package/dist/styles/border/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./border.module.css";
+const getBorderStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: [s.root, ...responsiveClassNames(s, "--border", value)],
+    };
+};
+export default getBorderStyles;

package/dist/styles/types.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import * as G from "../types/global";
 export type Radius = "small" | "medium" | "large" | "circular" | "none";
 export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
+export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";
 /**
  * Utility controlled only with classnames
  */

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": "3.0.3",
+	"version": "3.0.5",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

package/dist/constants/timeouts.d.ts

@@ -1,2 +0,0 @@
-export declare const mouseEnter = 100;
-export declare const mouseLeave = 150;

package/dist/constants/timeouts.js

@@ -1,2 +0,0 @@
-export const mouseEnter = 100;
-export const mouseLeave = 150;