@conveyorhq/arrow-ds 1.36.0 → 1.39.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.36.0",
+  "version": "1.39.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Accordion/Accordion.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
-export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing" | "className">;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
 export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
@@ -25,7 +25,7 @@ export declare const AccordionContent: ({ children, maxHeight, style, className,
 export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
-    Group: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;

package/public/components/Accordion/Accordion.js

@@ -20,9 +20,10 @@ const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
 const context_1 = require("./context");
 const cn = utilities_1.bemHOF("Accordion");
-const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, ...rest }) => {
-    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation } },
-        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing }, rest), children)));
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, className, ...rest }) => {
+    const totalItems = react_1.default.Children.count(children);
+    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation, totalItems } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), children)));
 };
 exports.AccordionGroup = AccordionGroup;
 const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
@@ -31,7 +32,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
         : defaultIsOpenProp;
-    const { isOpen, onToggle } = hooks_1.useDisclosure(defaultIsOpen);
+    const { isOpen, onToggle, onClose } = hooks_1.useDisclosure(defaultIsOpen);
     const id = `accordion-${auto_id_1.useId()}`;
     const buttonId = `${id}-button`;
     const contentId = `${id}-content`;
@@ -39,8 +40,10 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
             defaultIsOpen,
             isOpen,
             onToggle,
+            onClose,
             buttonId,
             contentId,
+            value,
         } },
         react_1.default.createElement(Box_1.Box, Object.assign({ "data-component": "accordion", className: classnames_1.default(cn(), className, {
                 [cn({ m: "isOpen" })]: isOpen,
@@ -49,7 +52,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
 exports.AccordionItem = AccordionItem;
 exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const { children, className, onClick, disabled = false, ...rest } = props;
-    const { buttonId, contentId, isOpen, onToggle } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, } = context_1.useAccordionItemContext();
     const buttonRef = react_1.default.useRef(null);
     const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
     return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
@@ -59,7 +62,9 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (onToggle) {
                 onToggle();
             }
-        } }, rest), typeof children === "function" ? children({ isOpen }) : children));
+        } }, rest), typeof children === "function"
+        ? children({ isOpen, onClose })
+        : children));
 });
 const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
     const { disableAnimation } = context_1.useAccordionGroupContext();
@@ -73,7 +78,7 @@ const AccordionContent = ({ children, maxHeight, style, className, ...rest }) =>
     const { height } = component_size_1.default(childrenRef);
     const heightObj = { height };
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0 }, enter: { height }, leave: { height: 0 }, update: heightObj, onRest: () => {
+    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0, opacity: 0 }, enter: { height, opacity: 1 }, leave: { height: 0, opacity: 0 }, update: heightObj, onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }

package/public/components/Accordion/context.d.ts

@@ -1,8 +1,10 @@
 import { Context } from "react";
 import type { AccordionGroupOwnProps, AccordionItemOwnProps, AccordionDisclosureProps } from "./types";
-declare type AccordionGroupContextType = AccordionGroupOwnProps;
+declare type AccordionGroupContextType = {
+    totalItems?: number;
+} & AccordionGroupOwnProps;
 export declare const AccordionGroupContext: Context<AccordionGroupContextType>;
-export declare function useAccordionGroupContext(): AccordionGroupOwnProps;
+export declare function useAccordionGroupContext(): AccordionGroupContextType;
 declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
     buttonId: string;
     contentId: string;

package/public/components/Accordion/context.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const defaultGroupContext = {
     defaultValue: undefined,
     disableAnimation: false,
+    totalItems: 0,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {
@@ -18,6 +19,7 @@ const defaultContext = {
     defaultIsOpen: false,
     isOpen: false,
     onToggle: () => { },
+    onClose: () => { },
     buttonId: "accordion-0-button",
     contentId: "accordion-0-content",
 };

package/public/components/Accordion/types.d.ts

@@ -15,4 +15,4 @@ export declare type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOp
     iconSlot?: ReactNode;
     removePadding?: ReactNode;
 };
-export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle">;
+export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle" | "onClose">;

package/public/components/Icon/Icon.d.ts

@@ -112,7 +112,8 @@ export declare enum ICON_TYPE {
     USER_ASTRONAUT = "user-astronaut",
     USER_PLUS = "user-plus",
     USERS = "users",
-    USER_FRIENDS = "user-friends"
+    USER_FRIENDS = "user-friends",
+    USER_SHIELD = "user-shield"
 }
 export declare enum ICON_STYLE_PREFIX {
     SOLID = "fas",

package/public/components/Icon/Icon.js

@@ -138,12 +138,13 @@ const faUserAstronaut_1 = require("@fortawesome/free-solid-svg-icons/faUserAstro
 const faUserPlus_1 = require("@fortawesome/free-solid-svg-icons/faUserPlus");
 const faUsers_1 = require("@fortawesome/free-solid-svg-icons/faUsers");
 const faUserFriends_1 = require("@fortawesome/free-solid-svg-icons/faUserFriends");
+const faUserShield_1 = require("@fortawesome/free-solid-svg-icons/faUserShield");
 const svg_1 = require("./svg");
 const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends, faUserShield_1.faUserShield);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -267,6 +268,7 @@ var ICON_TYPE;
     ICON_TYPE["USER_PLUS"] = "user-plus";
     ICON_TYPE["USERS"] = "users";
     ICON_TYPE["USER_FRIENDS"] = "user-friends";
+    ICON_TYPE["USER_SHIELD"] = "user-shield";
 })(ICON_TYPE = exports.ICON_TYPE || (exports.ICON_TYPE = {}));
 var ICON_STYLE_PREFIX;
 (function (ICON_STYLE_PREFIX) {

package/public/components/ScrollSpy/ScrollSpy.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactNode, Context, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, KeyboardEvent, FocusEvent, InputHTMLAttributes } from "react";
+declare type ScrollSpyContextType = {
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    currentPage: number;
+    setCurrentPage: Dispatch<SetStateAction<number>>;
+    refList: MutableRefObject<HTMLElement[]>;
+    updateCurrentRef(index: number, refItem: HTMLElement): void;
+    scrollToRef(refToScrollTo: HTMLElement): void;
+    scrollToFirst(event: MouseEvent): void;
+    scrollToLast(event: MouseEvent): void;
+    onAnchorClick(event: MouseEvent<HTMLAnchorElement>, index: number): void;
+    onInputChange(event: ChangeEvent<HTMLInputElement>): void;
+    onInputKeyUp(event: KeyboardEvent<HTMLInputElement>): void;
+    onInputFocus(event: FocusEvent<HTMLInputElement>): void;
+    items: number;
+    id: string;
+};
+export declare const ScrollSpyContext: Context<ScrollSpyContextType>;
+export declare function useScrollSpyContext(): ScrollSpyContextType;
+export declare type ScrollSpyInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const ScrollSpyInput: React.ForwardRefExoticComponent<ScrollSpyInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement;
+    threshold: number | number[] | undefined;
+    index: number;
+}
+export declare type ScrollSpyPageUsePropsHookProps = {
+    index: number;
+    id?: string;
+};
+export declare const useScrollSpyPageProps: ({ index, id }?: ScrollSpyPageUsePropsHookProps) => {
+    id: string;
+};
+export declare const ScrollSpyPage: React.ForwardRefExoticComponent<ScrollSpyPageProps & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollSpyAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    index: number;
+}
+export declare type ScrollSpyAnchorUsePropsHookProps = {
+    index: number;
+    id?: string;
+    href?: string;
+    onClick?(event: MouseEvent<HTMLAnchorElement>): void;
+};
+export declare const useScrollSpyAnchorProps: ({ index, id, href, onClick }?: ScrollSpyAnchorUsePropsHookProps) => {
+    id: string;
+    href: string;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    isActive: boolean;
+};
+export declare const ScrollSpyAnchor: React.ForwardRefExoticComponent<ScrollSpyAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare type ScrollSpyRootProps = {
+    children: ReactNode | ((props: ScrollSpyContextType) => JSX.Element);
+    items: number;
+    defaultIndex?: number;
+};
+export declare const ScrollSpyRoot: ({ children, items, defaultIndex, }: ScrollSpyRootProps) => JSX.Element;
+export {};

package/public/components/ScrollSpy/ScrollSpy.js

@@ -0,0 +1,190 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.ScrollSpyInput = exports.useScrollSpyContext = exports.ScrollSpyContext = void 0;
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const auto_id_1 = require("@reach/auto-id");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../utilities");
+const hooks_1 = require("../../hooks");
+const cn = utilities_1.bemHOF("ScrollSpy");
+const defaultRootContext = {
+    currentIndex: 0,
+    setCurrentIndex: (index) => index,
+    currentPage: 1,
+    setCurrentPage: (index) => index,
+    refList: { current: [] },
+    updateCurrentRef: () => { },
+    scrollToRef: () => { },
+    scrollToFirst: () => { },
+    scrollToLast: () => { },
+    onAnchorClick: () => { },
+    onInputChange: () => { },
+    onInputKeyUp: () => { },
+    onInputFocus: () => { },
+    items: 1,
+    id: "scroll-spy-1",
+};
+exports.ScrollSpyContext = react_1.createContext(defaultRootContext);
+function useScrollSpyContext() {
+    const context = react_1.useContext(exports.ScrollSpyContext) || {
+        ...defaultRootContext,
+    };
+    return context;
+}
+exports.useScrollSpyContext = useScrollSpyContext;
+exports.ScrollSpyInput = react_1.forwardRef(({ className, ...rest }, forwardedRef) => {
+    return (react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), className), ref: forwardedRef, type: "number" }, rest)));
+});
+const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
+    const { id: rootId } = useScrollSpyContext();
+    const pageId = `${rootId}-page-${index + 1}`;
+    return {
+        id: id || pageId,
+    };
+};
+exports.useScrollSpyPageProps = useScrollSpyPageProps;
+exports.ScrollSpyPage = react_1.forwardRef(({ id: idProp, children, index, threshold = 0.5, ...rest }, forwardedRef) => {
+    const ref = react_1.useRef(null);
+    const combinedRef = react_merge_refs_1.default([ref, forwardedRef]);
+    const isVisible = hooks_1.useIntersection(ref, {
+        threshold,
+    });
+    const { updateCurrentRef, setCurrentIndex, setCurrentPage, } = useScrollSpyContext();
+    const { id } = exports.useScrollSpyPageProps({ index, id: idProp });
+    const pageNumber = index + 1;
+    react_1.useEffect(() => {
+        if (ref && ref.current) {
+            updateCurrentRef(index, ref.current);
+        }
+    }, [ref, index, updateCurrentRef]);
+    react_1.useEffect(() => {
+        if (isVisible) {
+            setCurrentIndex(index);
+            setCurrentPage(pageNumber);
+        }
+    }, [isVisible, index, pageNumber, setCurrentIndex, setCurrentPage]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(react_1.default.Children.only(children), {
+        ...rest,
+        ...children.props,
+        id,
+        ref: combinedRef,
+    })));
+});
+const useScrollSpyAnchorProps = ({ index, id, href, onClick } = { index: 0 }) => {
+    const { id: rootId, currentIndex, onAnchorClick } = useScrollSpyContext();
+    const { id: pageId } = exports.useScrollSpyPageProps({ index });
+    const anchorId = `${rootId}-anchor-${index + 1}`;
+    return {
+        id: id || anchorId,
+        href: href || `#${pageId}`,
+        onClick: (event) => {
+            event.preventDefault();
+            if (onClick)
+                onClick(event);
+            onAnchorClick(event, index);
+        },
+        isActive: currentIndex === index,
+    };
+};
+exports.useScrollSpyAnchorProps = useScrollSpyAnchorProps;
+exports.ScrollSpyAnchor = react_1.forwardRef(({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+    const { isActive, ...anchorProps } = exports.useScrollSpyAnchorProps({
+        index,
+        id,
+        onClick,
+    });
+    return (react_1.default.createElement("a", Object.assign({ ref: forwardedRef }, anchorProps, rest), children));
+});
+const ScrollSpyRoot = ({ children, items, defaultIndex = 0, }) => {
+    const defaultPageNumber = defaultIndex + 1;
+    const [currentIndex, setCurrentIndex] = react_1.useState(defaultIndex);
+    const [currentPage, setCurrentPage] = react_1.useState(defaultPageNumber);
+    const refList = react_1.useRef([]);
+    const id = `scroll-spy-${auto_id_1.useId()}`;
+    react_1.useEffect(() => {
+        refList.current = refList.current.slice(0, items);
+    }, [items]);
+    const updateCurrentRef = (index, refItem) => {
+        refList.current[index] = refItem;
+    };
+    const scrollToRef = (refToScrollTo) => {
+        refToScrollTo.scrollIntoView({ behavior: "smooth" });
+    };
+    const scrollToFirst = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[0]);
+    };
+    const scrollToLast = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[items - 1]);
+    };
+    const onAnchorClick = (event, index) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[index]);
+        setCurrentPage(index + 1);
+    };
+    const onInputFocus = (event) => event.target.select();
+    const onInputChange = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { value } = event.target;
+        const pageNumber = parseInt(value, 10);
+        const index = pageNumber - 1;
+        setCurrentPage(pageNumber);
+        if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+            scrollToRef(refList.current[index]);
+        }
+    };
+    const onInputKeyUp = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { value } = event.currentTarget;
+        const pageNumber = parseInt(value, 10);
+        const index = pageNumber - 1;
+        if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+            scrollToRef(refList.current[index]);
+        }
+    };
+    const context = {
+        currentIndex,
+        setCurrentIndex,
+        currentPage,
+        setCurrentPage,
+        refList,
+        updateCurrentRef,
+        scrollToRef,
+        scrollToFirst,
+        scrollToLast,
+        onAnchorClick,
+        onInputChange,
+        onInputKeyUp,
+        onInputFocus,
+        items,
+        id,
+    };
+    return (react_1.default.createElement(exports.ScrollSpyContext.Provider, { value: context }, typeof children === "function" ? children(context) : children));
+};
+exports.ScrollSpyRoot = ScrollSpyRoot;

package/public/components/ScrollSpy/index.d.ts

@@ -0,0 +1 @@
+export * from "./ScrollSpy";

package/public/components/ScrollSpy/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ScrollSpy"), exports);

package/public/css/styles.css

@@ -5264,6 +5264,10 @@ override built-in Image component classes */
   overflow-y: auto;
 }
 
+.ads-ScrollSpy-input::-webkit-inner-spin-button {
+  display: none;
+}
+
 .ads-SearchFilter {
   position: relative;
   display: inline-flex;