@faceless-ui/jumplist - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/index.d.ts

@@ -1,3 +0,4 @@
-export { JumplistContext, useJumplist } from './JumplistContext';
+export { JumplistContext, useJumplist } from './JumplistProvider/context';
 export { JumplistNode } from './JumplistNode';
 export { JumplistProvider } from './JumplistProvider';
+export { JumplistButton } from './JumplistButton';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JumplistProvider = exports.JumplistNode = exports.useJumplist = exports.JumplistContext = void 0;
-var JumplistContext_1 = require("./JumplistContext");
-Object.defineProperty(exports, "JumplistContext", { enumerable: true, get: function () { return JumplistContext_1.JumplistContext; } });
-Object.defineProperty(exports, "useJumplist", { enumerable: true, get: function () { return JumplistContext_1.useJumplist; } });
+exports.JumplistButton = exports.JumplistProvider = exports.JumplistNode = exports.useJumplist = exports.JumplistContext = void 0;
+var context_1 = require("./JumplistProvider/context");
+Object.defineProperty(exports, "JumplistContext", { enumerable: true, get: function () { return context_1.JumplistContext; } });
+Object.defineProperty(exports, "useJumplist", { enumerable: true, get: function () { return context_1.useJumplist; } });
 var JumplistNode_1 = require("./JumplistNode");
@@ -11,2 +11,4 @@ Object.defineProperty(exports, "JumplistNode", { enumerable: true, get: function () { return JumplistNode_1.JumplistNode; } });
 Object.defineProperty(exports, "JumplistProvider", { enumerable: true, get: function () { return JumplistProvider_1.JumplistProvider; } });
+var JumplistButton_1 = require("./JumplistButton");
+Object.defineProperty(exports, "JumplistButton", { enumerable: true, get: function () { return JumplistButton_1.JumplistButton; } });
 //# sourceMappingURL=index.js.map

dist/JumplistButton/index.d.ts

@@ -1,14 +0,7 @@
-import React from 'react';
-export declare const JumplistButton: React.FC<{
-    id?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    htmlElement?: string;
-    htmlAttributes?: {
-        [key: string]: string;
-    };
-    targetID?: string;
-    xScrollOffset?: number;
-    yScrollOffset?: number;
+import React, { HTMLProps } from 'react';
+export interface JumplistButtonProps extends HTMLProps<HTMLElement> {
+    htmlElement?: React.ElementType;
     children?: React.ReactNode;
-}>;
+    direction?: 'prev' | 'next';
+}
+export declare const JumplistButton: React.FC<JumplistButtonProps>;

dist/JumplistButton/index.js

@@ -13,39 +13,71 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JumplistButton = void 0;
-var react_1 = __importDefault(require("react"));
-var animated_scroll_to_1 = __importDefault(require("animated-scroll-to"));
-var JumplistContext_1 = require("../JumplistContext");
+var react_1 = __importStar(require("react"));
+var context_1 = require("../JumplistProvider/context");
 var JumplistButton = function (props) {
-    var _a;
-    var _b = (0, JumplistContext_1.useJumplist)(), jumplist = _b.jumplist, classPrefix = _b.classPrefix;
-    var id = props.id, className = props.className, style = props.style, htmlElement = props.htmlElement, htmlAttributes = props.htmlAttributes, targetID = props.targetID, xScrollOffset = props.xScrollOffset, yScrollOffset = props.yScrollOffset, children = props.children;
-    var baseClass = "".concat(classPrefix, "__jumplist-button");
-    var targetNode = jumplist[targetID];
-    var scrollTo = function () {
-        if (targetNode) {
-            var totalOffsetLeft = targetNode.totalOffsetLeft, totalOffsetTop = targetNode.totalOffsetTop;
-            var xCoord = totalOffsetLeft + xScrollOffset;
-            var yCoord = totalOffsetTop + yScrollOffset;
-            (0, animated_scroll_to_1.default)([xCoord, yCoord]);
+    var _a = props.htmlElement, Tag = _a === void 0 ? 'button' : _a, children = props.children, direction = props.direction, onClick = props.onClick, rest = __rest(props, ["htmlElement", "children", "direction", "onClick"]);
+    var _b = (0, context_1.useJumplist)(), scrollToID = _b.scrollToID, jumplist = _b.jumplist, activeJumplistIndex = _b.activeJumplistIndex;
+    var handleClick = (0, react_1.useCallback)(function (e) {
+        if (activeJumplistIndex !== undefined) {
+            if (direction === 'prev') {
+                var prevItem = jumplist[activeJumplistIndex - 1];
+                if (prevItem) {
+                    scrollToID(prevItem.nodeID);
+                }
+            }
+            if (direction === 'next') {
+                var nextItem = jumplist[activeJumplistIndex + 1];
+                if (nextItem) {
+                    scrollToID(nextItem.nodeID);
+                }
+            }
         }
-    };
-    var mergedClasses = [
-        baseClass,
-        className,
-        ((_a = jumplist[targetID]) === null || _a === void 0 ? void 0 : _a.isVisible) && "".concat(baseClass, "--target-is-visible"),
-    ].filter(Boolean).join(' ');
-    var Tag = htmlElement;
-    return (react_1.default.createElement(Tag, __assign({}, {
-        id: id,
-        className: mergedClasses,
-        style: style,
-        htmlElement: htmlElement,
-        htmlAttributes: __assign(__assign({}, htmlAttributes), { onClick: scrollTo }),
-    }), children && children));
+        if (typeof onClick === 'function') {
+            onClick(e);
+        }
+    }, [
+        direction,
+        scrollToID,
+        onClick,
+        jumplist,
+        activeJumplistIndex
+    ]);
+    return (react_1.default.createElement(Tag, __assign({ type: "button" }, rest, { onClick: handleClick }), children && children));
 };
 exports.JumplistButton = JumplistButton;
 //# sourceMappingURL=index.js.map

dist/JumplistNode/index.d.ts

@@ -1,13 +0,7 @@
-import React from 'react';
-export declare const JumplistNode: React.FC<{
-    id?: string;
+import React, { HTMLProps } from 'react';
+export interface JumplistNodeProps extends HTMLProps<HTMLElement> {
     nodeID: string;
-    className?: string;
-    style?: React.CSSProperties;
     htmlElement?: React.ElementType;
-    htmlAttributes?: {
-        [key: string]: string;
-    };
-    classPrefix?: string;
     children: React.ReactNode;
-}>;
+}
+export declare const JumplistNode: React.FC<JumplistNodeProps>;

dist/JumplistNode/index.js

@@ -36,2 +36,13 @@ "use strict";
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -43,9 +54,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var react_1 = __importStar(require("react"));
-var JumplistContext_1 = require("../JumplistContext");
+var context_1 = require("../JumplistProvider/context");
 var useIntersection_1 = __importDefault(require("./useIntersection"));
 var JumplistNode = function (props) {
-    var id = props.id, nodeID = props.nodeID, className = props.className, style = props.style, _a = props.htmlElement, htmlElement = _a === void 0 ? 'div' : _a, htmlAttributes = props.htmlAttributes, classPrefix = props.classPrefix, children = props.children;
-    var _b = (0, JumplistContext_1.useJumplist)(), syncJumplistItem = _b.syncJumplistItem, rootMargin = _b.rootMargin, threshold = _b.threshold;
-    var baseClass = "".concat(classPrefix, "__jumplist-node");
-    var Tag = htmlElement;
+    var nodeID = props.nodeID, _a = props.htmlElement, Tag = _a === void 0 ? 'div' : _a, children = props.children, rest = __rest(props, ["nodeID", "htmlElement", "children"]);
+    var _b = (0, context_1.useJumplist)(), syncJumplistItem = _b.syncJumplistItem, rootMargin = _b.rootMargin, threshold = _b.threshold, scrollTarget = _b.scrollTarget, clearScrollTarget = _b.clearScrollTarget;
     var nodeRef = (0, react_1.useRef)(null);
@@ -66,8 +75,18 @@ var isIntersecting = (0, useIntersection_1.default)(nodeRef, {
     ]);
-    return (react_1.default.createElement(Tag, __assign({}, __assign(__assign({ id: id, className: [
-            baseClass,
-            className,
-        ].filter(Boolean).join(' '), style: style }, htmlAttributes), { ref: nodeRef })), children && children));
+    (0, react_1.useEffect)(function () {
+        if (scrollTarget !== undefined && scrollTarget === nodeID) {
+            var currentNode = nodeRef.current;
+            if (currentNode) {
+                currentNode.scrollIntoView();
+                clearScrollTarget();
+            }
+        }
+    }, [
+        scrollTarget,
+        nodeID,
+        clearScrollTarget
+    ]);
+    return (react_1.default.createElement(Tag, __assign({}, rest, { ref: nodeRef }), children && children));
 };
 exports.JumplistNode = JumplistNode;
 //# sourceMappingURL=index.js.map

dist/JumplistProvider/index.d.ts

 import React from 'react';
-import { IJumplistContext, JumplistNodes } from '../JumplistContext';
+import { IJumplistContext, JumplistNodes } from './context';
 export declare type ChildFunction = (context: IJumplistContext) => React.ReactNode;
-export declare const JumplistProvider: React.FC<{
+export declare type JumplistProviderProps = {
     classPrefix?: string;
@@ -10,2 +10,4 @@ nodes?: JumplistNodes;
     children: React.ReactNode | ChildFunction;
-}>;
+    smoothScroll?: boolean;
+};
+export declare const JumplistProvider: React.FC<JumplistProviderProps>;

dist/JumplistProvider/index.js

@@ -36,12 +36,16 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JumplistProvider = void 0;
 var react_1 = __importStar(require("react"));
-var JumplistContext_1 = require("../JumplistContext");
+var context_1 = __importDefault(require("./context"));
 var reducer_1 = require("./reducer");
 var JumplistProvider = function (props) {
-    var children = props.children, classPrefix = props.classPrefix, nodesFromProps = props.nodes, rootMargin = props.rootMargin, threshold = props.threshold;
+    var children = props.children, classPrefix = props.classPrefix, nodesFromProps = props.nodes, rootMargin = props.rootMargin, threshold = props.threshold, smoothScroll = props.smoothScroll;
     var _a = (0, react_1.useReducer)(reducer_1.jumplistReducer, []), nodes = _a[0], dispatchNodes = _a[1];
     var _b = (0, react_1.useState)(), currentJumplistIndex = _b[0], setCurrentJumplistIndex = _b[1]; // could be -1 if no nodes are intersecting
     var _c = (0, react_1.useState)(), activeJumplistIndex = _c[0], setActiveJumplistIndex = _c[1]; // a memoized version of `activeJumplistIndex` to track the last-known index
+    var _d = (0, react_1.useState)(), scrollTarget = _d[0], setScrollTarget = _d[1]; // when defined, the matching jumplist node will scroll itself into view
     (0, react_1.useEffect)(function () {
@@ -88,3 +92,23 @@ if (nodes) {
         }
-    }, [nodesFromProps]);
+    }, [
+        nodesFromProps,
+        setJumplist
+    ]);
+    var clearScrollTarget = (0, react_1.useCallback)(function () {
+        setScrollTarget(undefined);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (smoothScroll) {
+            document.documentElement.style.scrollBehavior = 'smooth';
+        }
+        else {
+            document.documentElement.style.removeProperty('scroll-behavior');
+        }
+        return function () {
+            document.documentElement.style.removeProperty('scroll-behavior');
+        };
+    }, [smoothScroll]);
+    var scrollToID = (0, react_1.useCallback)(function (incomingID) {
+        setScrollTarget(incomingID);
+    }, []);
     var context = {
@@ -101,7 +125,10 @@ classPrefix: classPrefix,
         rootMargin: rootMargin,
-        threshold: threshold
+        threshold: threshold,
+        scrollTarget: scrollTarget,
+        scrollToID: scrollToID,
+        clearScrollTarget: clearScrollTarget
     };
-    return (react_1.default.createElement(JumplistContext_1.JumplistContext.Provider, { value: context }, (children && (typeof children === 'function' ? children(__assign({}, context)) : children))));
+    return (react_1.default.createElement(context_1.default.Provider, { value: context }, (children && (typeof children === 'function' ? children(__assign({}, context)) : children))));
 };
 exports.JumplistProvider = JumplistProvider;
 //# sourceMappingURL=index.js.map

dist/JumplistProvider/reducer.d.ts

@@ -1,2 +0,2 @@
-import { JumplistNode, JumplistNodes } from "../JumplistContext";
+import { JumplistNode, JumplistNodes } from "./context";
 declare type Action = {
@@ -3,0 +3,0 @@ type: 'sync';

package.json

 {
   "name": "@faceless-ui/jumplist",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "homepage": "https://faceless-ui.com/docs/jumplist",
+  "homepage": "https://facelessui.com/docs/jumplist",
   "repository": "[e-mail]:faceless-ui/jumplist.git",
   "description": "A React library for creating powerful jumplists",
-  "author": "<[e-mail]>",
+  "author": {
+    "email": "[e-mail]",
+    "name": "Jacob Fletcher",
+    "url": "https://jacobsfletch.com"
+  },
+  "bugs": {
+    "url": "https://github.com/faceless-ui/jumplist/issues",
+    "email": "[e-mail]"
+  },
+  "funding": [
+    {
+      "type": "individual",
+      "url": "https://github.com/sponsors/jacobsfletch"
+    }
+  ],
+  "contributors": [],
   "license": "MIT",
@@ -11,0 +26,0 @@ "keywords": [

README.md

 [![NPM](https://img.shields.io/npm/v/@faceless-ui/jumplist)](https://www.npmjs.com/@faceless-ui/jumplist)
 ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@faceless-ui/jumplist?label=zipped)
-[![Supported by TRBL](https://img.shields.io/badge/supported_by-TRBL-black)](https://github.com/trouble)
 
 # React Jumplist
 
-Read the full documentation [here](https://faceless-ui.com/docs/jumplist).
+Read the full documentation [here](https://facelessui.com/docs/jumplist).
 
-## Quick Start
+## Installation
 
-### Installation
-
 ```bash
@@ -19,5 +16,5 @@ $ npm i @faceless-ui/jumplist
 
-## Demo
+## Development
 
-For working examples, spin up the [demo app](./demo/App.demo.js):
+To develop this module locally, spin up the [demo app](./demo/App.demo.js):
 
@@ -31,8 +28,4 @@ ```bash
 
-## Contribution
-
-[Help us,](https://github.com/faceless-ui/.github/blob/master/CONTRIBUTING.md) or let us [help you help us](https://github.com/faceless-ui/.github/blob/master/SUPPORT.md).
-
 ## License
 
-[MIT](https://github.com/faceless-ui/jumplist/blob/master/LICENSE) Copyright (c) TRBL, LLC
+[MIT](https://github.com/faceless-ui/jumplist/blob/master/LICENSE) Copyright (c) Faceless UI

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

33090

decreased by-95.62%

Number of package files

27

decreased by-15.62%

Lines of code

499

decreased by-60.68%

Number of lines in readme file

30

decreased by-18.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes