@conveyorhq/arrow-ds 1.44.0 → 1.47.0

package/package.json

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

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

@@ -67,6 +67,7 @@ export declare enum ICON_TYPE {
     GRIP_LINES = "grip-lines",
     GRIP_LINES_VERTICAL = "grip-lines-vertical",
     HASHTAG = "hashtag",
+    HIGHLIGHTER = "highlighter",
     INFO_CIRCLE = "info-circle",
     KEY = "key",
     KEYBOARD = "keyboard",

package/public/components/Icon/Icon.js

@@ -94,6 +94,7 @@ const faForward_1 = require("@fortawesome/free-solid-svg-icons/faForward");
 const faGripLines_1 = require("@fortawesome/free-solid-svg-icons/faGripLines");
 const faGripLinesVertical_1 = require("@fortawesome/free-solid-svg-icons/faGripLinesVertical");
 const faHashtag_1 = require("@fortawesome/free-solid-svg-icons/faHashtag");
+const faHighlighter_1 = require("@fortawesome/free-solid-svg-icons/faHighlighter");
 const faInfoCircle_1 = require("@fortawesome/free-solid-svg-icons/faInfoCircle");
 const faKey_1 = require("@fortawesome/free-solid-svg-icons/faKey");
 const faLayerGroup_1 = require("@fortawesome/free-solid-svg-icons/faLayerGroup");
@@ -118,8 +119,8 @@ const faScroll_1 = require("@fortawesome/free-solid-svg-icons/faScroll");
 const faSearch_1 = require("@fortawesome/free-solid-svg-icons/faSearch");
 const faShareAlt_1 = require("@fortawesome/free-solid-svg-icons/faShareAlt");
 const faShieldAlt_1 = require("@fortawesome/free-solid-svg-icons/faShieldAlt");
-const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
 const faSignature_1 = require("@fortawesome/free-solid-svg-icons/faSignature");
+const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
 const faSlidersH_1 = require("@fortawesome/free-solid-svg-icons/faSlidersH");
 const faSort_1 = require("@fortawesome/free-solid-svg-icons/faSort");
 const faSortDown_1 = require("@fortawesome/free-solid-svg-icons/faSortDown");
@@ -140,16 +141,16 @@ const faTrash_1 = require("@fortawesome/free-solid-svg-icons/faTrash");
 const faUnlock_1 = require("@fortawesome/free-solid-svg-icons/faUnlock");
 const faUser_2 = require("@fortawesome/free-solid-svg-icons/faUser");
 const faUserAstronaut_1 = require("@fortawesome/free-solid-svg-icons/faUserAstronaut");
+const faUserFriends_1 = require("@fortawesome/free-solid-svg-icons/faUserFriends");
 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, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, 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, faCompass_1.faCompass, 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, faTimesCircle_2.faTimesCircle, faTools_1.faTools, 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);
+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, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, 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, faCompass_1.faCompass, 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, faHighlighter_1.faHighlighter, 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, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, 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, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserShield_1.faUserShield);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -227,6 +228,7 @@ var ICON_TYPE;
     ICON_TYPE["GRIP_LINES"] = "grip-lines";
     ICON_TYPE["GRIP_LINES_VERTICAL"] = "grip-lines-vertical";
     ICON_TYPE["HASHTAG"] = "hashtag";
+    ICON_TYPE["HIGHLIGHTER"] = "highlighter";
     ICON_TYPE["INFO_CIRCLE"] = "info-circle";
     ICON_TYPE["KEY"] = "key";
     ICON_TYPE["KEYBOARD"] = "keyboard";

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

@@ -1,29 +1,46 @@
-import React, { ReactNode, Context, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, KeyboardEvent, FocusEvent, InputHTMLAttributes } from "react";
+import React, { ReactNode, MutableRefObject, Dispatch, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, InputHTMLAttributes } from "react";
+import { ScrollSpyState, ScrollSpyAction } from "./types";
+export declare const ScrollSpyStateContext: React.Context<{
+    state: ScrollSpyState;
+    dispatch: Dispatch<ScrollSpyAction>;
+}>;
+export declare function useScrollSpyStateContext(): {
+    state: ScrollSpyState;
+    dispatch: React.Dispatch<ScrollSpyAction>;
+};
 declare type ScrollSpyContextType = {
-    currentIndex: number;
-    setCurrentIndex: Dispatch<SetStateAction<number>>;
-    currentPage: number;
-    setCurrentPage: Dispatch<SetStateAction<number>>;
+    id: string;
+    itemCount: number;
     refList: MutableRefObject<HTMLElement[]>;
+    defaultIndex: number;
     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;
+    scrollToPage(page: number): void;
+    skipToPage(page: number): void;
 };
-export declare const ScrollSpyContext: Context<ScrollSpyContextType>;
+export declare const ScrollSpyContext: React.Context<ScrollSpyContextType>;
 export declare function useScrollSpyContext(): ScrollSpyContextType;
+export declare type ScrollSpyInputUsePropsHookProps = {
+    className?: string;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+};
+export declare const useScrollSpyInputProps: ({ className, onChange, }: ScrollSpyInputUsePropsHookProps) => {
+    className: string;
+    type: string;
+    min: string;
+    max: number;
+    maxLength: number;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: number;
+};
 export declare type ScrollSpyInputProps = InputHTMLAttributes<HTMLInputElement>;
-export declare const ScrollSpyInput: React.ForwardRefExoticComponent<ScrollSpyInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ScrollSpyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyInputProps & React.RefAttributes<HTMLInputElement>>>;
 export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement;
-    threshold: number | number[] | undefined;
     index: number;
+    threshold?: number | number[] | undefined;
 }
 export declare type ScrollSpyPageUsePropsHookProps = {
     index: number;
@@ -32,7 +49,7 @@ export declare type ScrollSpyPageUsePropsHookProps = {
 export declare const useScrollSpyPageProps: ({ index, id }?: ScrollSpyPageUsePropsHookProps) => {
     id: string;
 };
-export declare const ScrollSpyPage: React.ForwardRefExoticComponent<ScrollSpyPageProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollSpyPage: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyPageProps & React.RefAttributes<HTMLDivElement>>>;
 export interface ScrollSpyAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
     index: number;
@@ -49,11 +66,27 @@ export declare const useScrollSpyAnchorProps: ({ index, id, href, onClick }?: Sc
     onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
     isActive: boolean;
 };
-export declare const ScrollSpyAnchor: React.ForwardRefExoticComponent<ScrollSpyAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ScrollSpyAnchor: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyAnchorProps & React.RefAttributes<HTMLAnchorElement>>>;
 export declare type ScrollSpyRootProps = {
     children: ReactNode | ((props: ScrollSpyContextType) => JSX.Element);
-    items: number;
+    itemCount: number;
     defaultIndex?: number;
 };
-export declare const ScrollSpyRoot: ({ children, items, defaultIndex, }: ScrollSpyRootProps) => JSX.Element;
+export declare const ScrollSpyRoot: React.MemoExoticComponent<({ children, itemCount, defaultIndex }: ScrollSpyRootProps) => JSX.Element>;
+export declare const ScrollSpyStateProvider: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const ScrollSpyReducers: {
+    reducer: (state: ScrollSpyState | undefined, action: ScrollSpyAction) => ScrollSpyState;
+};
+export declare const ScrollSpySelectors: {
+    selectCurrentIndex: (state: ScrollSpyState) => number;
+    selectCurrentPage: (state: ScrollSpyState) => number;
+};
+export declare const ScrollSpyActions: {
+    updateIndex: (index: number) => {
+        type: import("./types").ScrollSpyActionType;
+        index: number;
+    };
+};
 export {};

package/public/components/ScrollSpy/ScrollSpy.js

@@ -22,30 +22,40 @@ 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;
+exports.ScrollSpyActions = exports.ScrollSpySelectors = exports.ScrollSpyReducers = exports.ScrollSpyStateProvider = exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.ScrollSpyInput = exports.useScrollSpyInputProps = exports.useScrollSpyContext = exports.ScrollSpyContext = exports.useScrollSpyStateContext = exports.ScrollSpyStateContext = 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 reducers_1 = require("./reducers");
+const selectors_1 = require("./selectors");
+const actions_1 = require("./actions");
 const cn = utilities_1.bemHOF("ScrollSpy");
+const initialContextState = {
+    state: reducers_1.scrollSpyInitialState,
+    dispatch: () => { },
+};
+exports.ScrollSpyStateContext = react_1.createContext(initialContextState);
+function useScrollSpyStateContext() {
+    const context = react_1.useContext(exports.ScrollSpyStateContext) || {
+        ...initialContextState,
+    };
+    return context;
+}
+exports.useScrollSpyStateContext = useScrollSpyStateContext;
 const defaultRootContext = {
-    currentIndex: 0,
-    setCurrentIndex: (index) => index,
-    currentPage: 1,
-    setCurrentPage: (index) => index,
+    id: "scroll-spy-1",
+    itemCount: 1,
     refList: { current: [] },
+    defaultIndex: 0,
     updateCurrentRef: () => { },
     scrollToRef: () => { },
     scrollToFirst: () => { },
     scrollToLast: () => { },
-    onAnchorClick: () => { },
-    onInputChange: () => { },
-    onInputKeyUp: () => { },
-    onInputFocus: () => { },
-    items: 1,
-    id: "scroll-spy-1",
+    scrollToPage: () => { },
+    skipToPage: () => { },
 };
 exports.ScrollSpyContext = react_1.createContext(defaultRootContext);
 function useScrollSpyContext() {
@@ -55,9 +65,38 @@ function useScrollSpyContext() {
     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 useScrollSpyInputProps = ({ className, onChange, }) => {
+    const { dispatch, state } = useScrollSpyStateContext();
+    const { itemCount, skipToPage } = useScrollSpyContext();
+    const currentPage = selectors_1.selectCurrentPage(state);
+    const onChangeHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const pageNumber = parseInt(event.target.value, 10);
+        const index = pageNumber - 1;
+        dispatch(actions_1.updateIndex(index));
+        if (pageNumber && pageNumber >= 1 && pageNumber <= itemCount) {
+            skipToPage(pageNumber);
+        }
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    return {
+        className: classnames_1.default(cn({ e: "input" }), className),
+        type: "number",
+        min: "1",
+        max: itemCount,
+        maxLength: itemCount.toString().split("").length,
+        onChange: onChangeHandler,
+        value: currentPage,
+    };
+};
+exports.useScrollSpyInputProps = useScrollSpyInputProps;
+exports.ScrollSpyInput = react_1.memo(react_1.forwardRef(({ className, ...rest }, forwardedRef) => {
+    const props = exports.useScrollSpyInputProps({ className });
+    return react_1.default.createElement("input", Object.assign({ ref: forwardedRef }, props, rest));
+}));
 const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
     const { id: rootId } = useScrollSpyContext();
     const pageId = `${rootId}-page-${index + 1}`;
@@ -66,125 +105,121 @@ const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
     };
 };
 exports.useScrollSpyPageProps = useScrollSpyPageProps;
-exports.ScrollSpyPage = react_1.forwardRef(({ id: idProp, children, index, threshold = 0.5, ...rest }, forwardedRef) => {
+exports.ScrollSpyPage = react_1.memo(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 { dispatch } = useScrollSpyStateContext();
+    const { updateCurrentRef } = 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);
+            dispatch(actions_1.updateIndex(index));
         }
-    }, [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), {
+    }, [isVisible]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.cloneElement(react_1.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: rootId, scrollToPage } = useScrollSpyContext();
     const { id: pageId } = exports.useScrollSpyPageProps({ index });
     const anchorId = `${rootId}-anchor-${index + 1}`;
+    const { state } = useScrollSpyStateContext();
+    const currentIndex = selectors_1.selectCurrentIndex(state);
+    const onClickHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        scrollToPage(index + 1);
+        if (onClick) {
+            onClick(event);
+        }
+    };
     return {
         id: id || anchorId,
         href: href || `#${pageId}`,
-        onClick: (event) => {
-            event.preventDefault();
-            if (onClick)
-                onClick(event);
-            onAnchorClick(event, index);
-        },
+        onClick: onClickHandler,
         isActive: currentIndex === index,
     };
 };
 exports.useScrollSpyAnchorProps = useScrollSpyAnchorProps;
-exports.ScrollSpyAnchor = react_1.forwardRef(({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+exports.ScrollSpyAnchor = react_1.memo(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);
+}));
+exports.ScrollSpyRoot = react_1.memo(({ children, itemCount, defaultIndex = 0 }) => {
     const refList = react_1.useRef([]);
     const id = `scroll-spy-${auto_id_1.useId()}`;
+    const prefersReducedMotion = hooks_1.usePrefersReducedMotion();
+    const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
     react_1.useEffect(() => {
-        refList.current = refList.current.slice(0, items);
-    }, [items]);
+        refList.current = refList.current.slice(0, itemCount);
+    }, [itemCount]);
     const updateCurrentRef = (index, refItem) => {
         refList.current[index] = refItem;
     };
-    const scrollToRef = (refToScrollTo) => {
-        refToScrollTo.scrollIntoView({ behavior: "smooth" });
+    const scrollToRef = (refToScrollTo, behavior = "smooth") => {
+        refToScrollTo.scrollIntoView({ behavior });
     };
     const scrollToFirst = (event) => {
         event.stopPropagation();
-        scrollToRef(refList.current[0]);
+        scrollToRef(refList.current[0], scrollBehavior);
     };
     const scrollToLast = (event) => {
         event.stopPropagation();
-        scrollToRef(refList.current[items - 1]);
+        scrollToRef(refList.current[itemCount - 1], scrollBehavior);
     };
-    const onAnchorClick = (event, index) => {
-        event.stopPropagation();
-        scrollToRef(refList.current[index]);
-        setCurrentPage(index + 1);
+    const scrollToPage = (page) => {
+        const index = page - 1;
+        scrollToRef(refList.current[index], scrollBehavior);
     };
-    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 skipToPage = (page) => {
+        const index = page - 1;
+        scrollToRef(refList.current[index], "auto");
     };
-    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]);
+    react_1.useEffect(() => {
+        const lastIndex = itemCount - 1;
+        if (defaultIndex > 0 && defaultIndex <= lastIndex) {
+            skipToPage(defaultIndex + 1);
         }
-    };
+    }, [defaultIndex, itemCount]);
     const context = {
-        currentIndex,
-        setCurrentIndex,
-        currentPage,
-        setCurrentPage,
+        id,
+        itemCount,
         refList,
+        defaultIndex,
         updateCurrentRef,
         scrollToRef,
         scrollToFirst,
         scrollToLast,
-        onAnchorClick,
-        onInputChange,
-        onInputKeyUp,
-        onInputFocus,
-        items,
-        id,
+        scrollToPage,
+        skipToPage,
     };
     return (react_1.default.createElement(exports.ScrollSpyContext.Provider, { value: context }, typeof children === "function" ? children(context) : children));
+});
+const ScrollSpyStateProvider = ({ children, }) => {
+    const [state, dispatch] = react_1.useReducer(reducers_1.reducer, {
+        index: 0,
+        page: 1,
+    });
+    const value = react_1.useMemo(() => ({ state, dispatch }), [state]);
+    return (react_1.default.createElement(exports.ScrollSpyStateContext.Provider, { value: value }, children));
 };
-exports.ScrollSpyRoot = ScrollSpyRoot;
+exports.ScrollSpyStateProvider = ScrollSpyStateProvider;
+exports.ScrollSpyReducers = { reducer: reducers_1.reducer };
+exports.ScrollSpySelectors = { selectCurrentIndex: selectors_1.selectCurrentIndex, selectCurrentPage: selectors_1.selectCurrentPage };
+exports.ScrollSpyActions = { updateIndex: actions_1.updateIndex };

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

@@ -0,0 +1,5 @@
+import { ScrollSpyActionType } from "./types";
+export declare const updateIndex: (index: number) => {
+    type: ScrollSpyActionType;
+    index: number;
+};

package/public/components/ScrollSpy/actions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateIndex = void 0;
+const types_1 = require("./types");
+const updateIndex = (index) => {
+    return {
+        type: types_1.ScrollSpyActionType.UPDATE,
+        index,
+    };
+};
+exports.updateIndex = updateIndex;

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

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

package/public/components/ScrollSpy/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ScrollSpy"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,6 @@
+import { ScrollSpyState, ScrollSpyAction } from "./types";
+export declare const scrollSpyInitialState: {
+    index: number;
+    page: number;
+};
+export declare const reducer: (state: ScrollSpyState | undefined, action: ScrollSpyAction) => ScrollSpyState;

package/public/components/ScrollSpy/reducers.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.scrollSpyInitialState = void 0;
+const types_1 = require("./types");
+exports.scrollSpyInitialState = {
+    index: 0,
+    page: 1,
+};
+const reducer = (state = exports.scrollSpyInitialState, action) => {
+    switch (action.type) {
+        case types_1.ScrollSpyActionType.UPDATE:
+            return state.index !== action.index
+                ? {
+                    ...state,
+                    index: action.index,
+                    page: action.index + 1,
+                }
+                : state;
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;

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

@@ -0,0 +1,3 @@
+import { ScrollSpyState } from "./types";
+export declare const selectCurrentIndex: (state: ScrollSpyState) => number;
+export declare const selectCurrentPage: (state: ScrollSpyState) => number;

package/public/components/ScrollSpy/selectors.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectCurrentPage = exports.selectCurrentIndex = void 0;
+const selectCurrentIndex = (state) => state.index;
+exports.selectCurrentIndex = selectCurrentIndex;
+const selectCurrentPage = (state) => state.page;
+exports.selectCurrentPage = selectCurrentPage;

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

@@ -0,0 +1,11 @@
+export declare enum ScrollSpyActionType {
+    UPDATE = "UPDATE"
+}
+export declare type ScrollSpyState = {
+    index: number;
+    page: number;
+};
+export declare type ScrollSpyAction = {
+    type: ScrollSpyActionType;
+    index: number;
+};

package/public/components/ScrollSpy/types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSpyActionType = void 0;
+var ScrollSpyActionType;
+(function (ScrollSpyActionType) {
+    ScrollSpyActionType["UPDATE"] = "UPDATE";
+})(ScrollSpyActionType = exports.ScrollSpyActionType || (exports.ScrollSpyActionType = {}));

package/public/components/Select/Select.d.ts

@@ -5,6 +5,7 @@ import { Props as ReactSelectAsyncProps } from "react-select/async";
 declare type ArrowSelectProps = {
     menuInPortal?: boolean;
     menuRef?: Ref<HTMLDivElement>;
+    selectRef?: Ref<HTMLDivElement>;
     height?: number;
     optionsMessage?: string;
 };

package/public/components/Select/Select.js

@@ -110,7 +110,7 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
         },
     };
 };
-const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.tokens.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, ...rest }) => {
+const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.tokens.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, selectRef, ...rest }) => {
     const { variant: variantContext, id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
@@ -123,12 +123,12 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         optionsMessage,
     });
     if (rest.type === "async") {
-        return (react_1.default.createElement(async_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
+        return (react_1.default.createElement(async_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
     if (rest.type === "creatable") {
-        return (react_1.default.createElement(creatable_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
+        return (react_1.default.createElement(creatable_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
     }
-    return (react_1.default.createElement(react_select_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
+    return (react_1.default.createElement(react_select_1.default, Object.assign({ ref: selectRef, className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));
 };
 const SelectAsync = (props) => {
     return react_1.default.createElement(SelectBase, Object.assign({}, props, { type: "async" }));