react-stick - npm Package Compare versions

Comparing version 5.0.3 to 5.0.6

es/hooks/useAutoFlip.d.ts

 import { type AlignT, type PositionT } from '../types';
-declare type CheckFuncT = (node: HTMLElement, anchor: HTMLElement) => void;
+type CheckFuncT = (node: HTMLElement, anchor: HTMLElement) => void;
 declare const useAutoFlip: (enableAutoHorizontalFlip: boolean, enableAutoVerticalFlip: boolean, initialPosition: PositionT, initialAlign: AlignT) => [PositionT, AlignT, CheckFuncT];
 export default useAutoFlip;
 //# sourceMappingURL=useAutoFlip.d.ts.map

es/hooks/useWatcher.d.ts

@@ -1,3 +0,3 @@
-declare type WatcherFuncT = () => void;
-declare type OptionsT = {
+type WatcherFuncT = () => void;
+type OptionsT = {
     updateOnAnimationFrame: boolean;
@@ -4,0 +4,0 @@ enabled: boolean;

es/Stick.js

@@ -54,3 +54,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
             const { target } = ev;
-            if (target instanceof window.HTMLElement &&
+            if (target instanceof window.Element &&
                 isOutside(anchorRef, containerRef, target)) {
@@ -57,0 +57,0 @@ onClickOutside(ev);

es/StickNode.d.ts

 import React from 'react';
 import { type AlignT, type PositionT } from './types';
 import type { ReactNode } from 'react';
-declare type PropsT = {
+type PropsT = {
     width: number;
@@ -6,0 +6,0 @@ position: PositionT;

es/StickPortal.d.ts

@@ -18,4 +18,4 @@ /// <reference types="substyle" />
 } & React.RefAttributes<HTMLElement | null | undefined>>;
-export declare const PortalContext: React.Context<HTMLElement>;
+export declare const PortalContext: React.Context<HTMLElement | null>;
 export default StickPortal;
 //# sourceMappingURL=StickPortal.d.ts.map

es/StickPortal.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'requestidlecallback';
 import invariant from 'invariant';
-import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
@@ -9,3 +9,3 @@ import { inline } from 'substyle';
 import { scrollX, scrollY } from './utils';
-const StickPortal = forwardRef(function ({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
+const StickPortal = forwardRef(function StickPortal({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
     const nodeRef = useRef();
@@ -24,3 +24,6 @@ const [top, setTop] = useState(null);
     }, [node]);
-    useLayoutEffect(() => {
+    useEffect(() => {
+        if (hostParent == null || host == null) {
+            return;
+        }
         if (visible) {
@@ -35,3 +38,3 @@ hostParent.appendChild(host);
         const node = nodeRef.current;
-        if (!node || !visible) {
+        if (!node || !visible || host == null) {
             return;
@@ -58,3 +61,3 @@ }
             nodeRef.current = node;
-        }, children: [children, top != null && left != null && (_jsx(PortalContext.Provider, { value: (host.parentNode || defaultRoot), children: createPortal(_jsx("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...inline(style('node'), {
+        }, children: [children, top != null && left != null && host != null && (_jsx(PortalContext.Provider, { value: (host.parentNode || document.body), children: createPortal(_jsx("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...inline(style('node'), {
                         position: 'absolute',
@@ -65,10 +68,16 @@ top,
 });
-invariant(document.body, 'Stick can only be used in a browser environment.');
-const defaultRoot = document.body;
-export const PortalContext = createContext(defaultRoot);
+export const PortalContext = createContext(null);
 export default StickPortal;
 function useHost(transportTo) {
-    const [host] = useState(() => document.createElement('div'));
+    const [host] = useState(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('div');
+    });
     const portalHost = useContext(PortalContext);
-    const hostParent = transportTo || portalHost;
+    if (host == null) {
+        return [null, null];
+    }
+    const hostParent = transportTo || portalHost || document.body;
     invariant(hostParent, 'Could not determine a parent for the host node.');
@@ -75,0 +84,0 @@ return [host, hostParent];

es/types.d.ts

 import type { LegacyRef, ReactNode } from 'react';
 import type { StylingProps, Substyle } from 'substyle';
-export declare type VerticalTargetT = 'bottom' | 'middle' | 'top';
-export declare type HorizontalTargetT = 'left' | 'center' | 'right';
-export declare type PositionT = 'bottom left' | 'bottom center' | 'bottom right' | 'middle left' | 'middle center' | 'middle right' | 'top left' | 'top center' | 'top right';
-export declare type AlignT = PositionT;
-export declare type StickPropsT = {
+export type VerticalTargetT = 'bottom' | 'middle' | 'top';
+export type HorizontalTargetT = 'left' | 'center' | 'right';
+export type PositionT = 'bottom left' | 'bottom center' | 'bottom right' | 'middle left' | 'middle center' | 'middle right' | 'top left' | 'top center' | 'top right';
+export type AlignT = PositionT;
+export type StickPropsT = {
     position?: PositionT;
@@ -21,3 +21,3 @@ align?: AlignT;
 } & StylingProps & React.HTMLAttributes<HTMLElement>;
-declare type SpecificStickBasePropsT = {
+type SpecificStickBasePropsT = {
     children: ReactNode;
@@ -30,7 +30,7 @@ node?: ReactNode | null;
 };
-export declare type StickInlinePropsT = {
+export type StickInlinePropsT = {
     position: PositionT;
     align: AlignT;
 } & SpecificStickBasePropsT;
-export declare type StickPortalPropsT = {
+export type StickPortalPropsT = {
     transportTo?: HTMLElement | null;
@@ -37,0 +37,0 @@ position: PositionT;

es/utils/getModifiers.d.ts

 import { type AlignT, type PositionT } from '../types';
-declare type PropsT = {
+type PropsT = {
     align: AlignT;
@@ -4,0 +4,0 @@ position: PositionT;

lib/hooks/useAutoFlip.d.ts

 import { type AlignT, type PositionT } from '../types';
-declare type CheckFuncT = (node: HTMLElement, anchor: HTMLElement) => void;
+type CheckFuncT = (node: HTMLElement, anchor: HTMLElement) => void;
 declare const useAutoFlip: (enableAutoHorizontalFlip: boolean, enableAutoVerticalFlip: boolean, initialPosition: PositionT, initialAlign: AlignT) => [PositionT, AlignT, CheckFuncT];
 export default useAutoFlip;
 //# sourceMappingURL=useAutoFlip.d.ts.map

lib/hooks/useWatcher.d.ts

@@ -1,3 +0,3 @@
-declare type WatcherFuncT = () => void;
-declare type OptionsT = {
+type WatcherFuncT = () => void;
+type OptionsT = {
     updateOnAnimationFrame: boolean;
@@ -4,0 +4,0 @@ enabled: boolean;

lib/Stick.js

@@ -59,3 +59,3 @@ "use strict";
             const { target } = ev;
-            if (target instanceof window.HTMLElement &&
+            if (target instanceof window.Element &&
                 isOutside(anchorRef, containerRef, target)) {
@@ -62,0 +62,0 @@ onClickOutside(ev);

lib/StickNode.d.ts

 import React from 'react';
 import { type AlignT, type PositionT } from './types';
 import type { ReactNode } from 'react';
-declare type PropsT = {
+type PropsT = {
     width: number;
@@ -6,0 +6,0 @@ position: PositionT;

lib/StickPortal.d.ts

@@ -18,4 +18,4 @@ /// <reference types="substyle" />
 } & React.RefAttributes<HTMLElement | null | undefined>>;
-export declare const PortalContext: React.Context<HTMLElement>;
+export declare const PortalContext: React.Context<HTMLElement | null>;
 export default StickPortal;
 //# sourceMappingURL=StickPortal.d.ts.map

lib/StickPortal.js

@@ -15,3 +15,3 @@ "use strict";
 const utils_1 = require("./utils");
-const StickPortal = (0, react_1.forwardRef)(function ({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
+const StickPortal = (0, react_1.forwardRef)(function StickPortal({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
     const nodeRef = (0, react_1.useRef)();
@@ -30,3 +30,6 @@ const [top, setTop] = (0, react_1.useState)(null);
     }, [node]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_1.useEffect)(() => {
+        if (hostParent == null || host == null) {
+            return;
+        }
         if (visible) {
@@ -41,3 +44,3 @@ hostParent.appendChild(host);
         const node = nodeRef.current;
-        if (!node || !visible) {
+        if (!node || !visible || host == null) {
             return;
@@ -64,3 +67,3 @@ }
             nodeRef.current = node;
-        }, children: [children, top != null && left != null && ((0, jsx_runtime_1.jsx)(exports.PortalContext.Provider, { value: (host.parentNode || defaultRoot), children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...(0, substyle_1.inline)(style('node'), {
+        }, children: [children, top != null && left != null && host != null && ((0, jsx_runtime_1.jsx)(exports.PortalContext.Provider, { value: (host.parentNode || document.body), children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...(0, substyle_1.inline)(style('node'), {
                         position: 'absolute',
@@ -71,10 +74,16 @@ top,
 });
-(0, invariant_1.default)(document.body, 'Stick can only be used in a browser environment.');
-const defaultRoot = document.body;
-exports.PortalContext = (0, react_1.createContext)(defaultRoot);
+exports.PortalContext = (0, react_1.createContext)(null);
 exports.default = StickPortal;
 function useHost(transportTo) {
-    const [host] = (0, react_1.useState)(() => document.createElement('div'));
+    const [host] = (0, react_1.useState)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('div');
+    });
     const portalHost = (0, react_1.useContext)(exports.PortalContext);
-    const hostParent = transportTo || portalHost;
+    if (host == null) {
+        return [null, null];
+    }
+    const hostParent = transportTo || portalHost || document.body;
     (0, invariant_1.default)(hostParent, 'Could not determine a parent for the host node.');
@@ -81,0 +90,0 @@ return [host, hostParent];

lib/types.d.ts

 import type { LegacyRef, ReactNode } from 'react';
 import type { StylingProps, Substyle } from 'substyle';
-export declare type VerticalTargetT = 'bottom' | 'middle' | 'top';
-export declare type HorizontalTargetT = 'left' | 'center' | 'right';
-export declare type PositionT = 'bottom left' | 'bottom center' | 'bottom right' | 'middle left' | 'middle center' | 'middle right' | 'top left' | 'top center' | 'top right';
-export declare type AlignT = PositionT;
-export declare type StickPropsT = {
+export type VerticalTargetT = 'bottom' | 'middle' | 'top';
+export type HorizontalTargetT = 'left' | 'center' | 'right';
+export type PositionT = 'bottom left' | 'bottom center' | 'bottom right' | 'middle left' | 'middle center' | 'middle right' | 'top left' | 'top center' | 'top right';
+export type AlignT = PositionT;
+export type StickPropsT = {
     position?: PositionT;
@@ -21,3 +21,3 @@ align?: AlignT;
 } & StylingProps & React.HTMLAttributes<HTMLElement>;
-declare type SpecificStickBasePropsT = {
+type SpecificStickBasePropsT = {
     children: ReactNode;
@@ -30,7 +30,7 @@ node?: ReactNode | null;
 };
-export declare type StickInlinePropsT = {
+export type StickInlinePropsT = {
     position: PositionT;
     align: AlignT;
 } & SpecificStickBasePropsT;
-export declare type StickPortalPropsT = {
+export type StickPortalPropsT = {
     transportTo?: HTMLElement | null;
@@ -37,0 +37,0 @@ position: PositionT;

lib/utils/getModifiers.d.ts

 import { type AlignT, type PositionT } from '../types';
-declare type PropsT = {
+type PropsT = {
     align: AlignT;
@@ -4,0 +4,0 @@ position: PositionT;

package.json

 {
   "name": "react-stick",
-  "version": "5.0.3",
+  "version": "5.0.6",
   "description": "React component to stick a portaled node to an anchor node",
@@ -29,2 +29,3 @@ "main": "lib/index.js",
     "test": "cypress run --component --config-file ./tests/cypress.config.ts",
+    "test:ssr": "vitest --config=tests/vitest.config.ts",
     "test:open": "cypress open --component --config-file ./tests/cypress.config.ts --browser electron",
@@ -40,31 +41,33 @@ "prepare": "husky install"
   "devDependencies": {
-    "@commitlint/cli": "17.2.0",
-    "@commitlint/config-conventional": "17.2.0",
-    "@commitlint/prompt-cli": "17.2.0",
-    "@cypress/code-coverage": "3.10.0",
-    "@cypress/react": "7.0.1",
-    "@cypress/vite-dev-server": "4.0.1",
-    "@testing-library/cypress": "8.0.3",
-    "@types/react": "16.14.34",
-    "@types/react-dom": "16.9.17",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
+    "@commitlint/prompt-cli": "19.3.1",
+    "@cypress/code-coverage": "3.12.39",
+    "@cypress/react": "8.0.1",
+    "@cypress/vite-dev-server": "5.0.7",
+    "@testing-library/cypress": "8.0.7",
+    "@types/react": "16.14.60",
+    "@types/react-dom": "16.9.24",
     "@vitejs/plugin-react": "2.2.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "condition-circle": "2.0.2",
-    "core-js": "3.26.0",
-    "cypress": "10.11.0",
-    "eslint": "8.27.0",
-    "eslint-config-prettier": "8.5.0",
+    "core-js": "3.37.1",
+    "cypress": "11.2.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "4.2.1",
     "glamor": "2.20.40",
-    "husky": "8.0.2",
-    "lint-staged": "13.0.3",
-    "prettier": "2.7.1",
+    "husky": "9.0.11",
+    "lint-staged": "15.2.2",
+    "prettier": "2.8.8",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "rimraf": "3.0.2",
-    "semantic-release": "19.0.5",
+    "rimraf": "5.0.7",
+    "semantic-release": "23.0.8",
     "substyle-glamor": "4.1.2",
-    "typescript": "4.8.4",
-    "vite": "3.2.3",
-    "vite-plugin-istanbul": "3.0.2"
+    "typescript": "5.4.5",
+    "vite": "3.2.10",
+    "vite-plugin-istanbul": "5.0.0",
+    "vitest": "^1.6.0"
   },
@@ -104,4 +107,5 @@ "peerDependencies": {
   "overrides": {
-    "ramda": "0.28.0",
-    "npm": "8.19.1",
+    "ramda": "0.29.1",
+    "npm": "10.5.0",
+    "semver": "7.6.0",
     "find-versions": {
@@ -108,0 +112,0 @@ "semver-regex": "3.1.4"

README.md

@@ -40,3 +40,3 @@ # react-stick
 
-[build-badge]: https://circleci.com/gh/signavio/react-stick/tree/master.svg?style=shield&circle-token=:circle-token
+[build-badge]: https://dl.circleci.com/status-badge/img/gh/signavio/react-stick/tree/master.svg?style=svg
 [build]: https://circleci.com/gh/signavio/react-stick/tree/master
@@ -43,0 +43,0 @@ [npm-badge]: https://img.shields.io/npm/v/react-stick.svg

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147916

increased by1.39%

Lines of code

1662

increased by1.09%

Worsened metrics

Dev dependency count

31

increased by6.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes