@openedx/paragon 23.1.1 → 23.3.0

package/src/hooks/{useIsVisible.jsx → useIsVisibleHook.tsx}

@@ -1,7 +1,10 @@
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
-const useIsVisible = (defaultIsVisible = true) => {
-  const sentinelRef = useRef();
+const useIsVisible = (defaultIsVisible = true): [
+  isVisible: boolean,
+  sentinelRef: React.MutableRefObject<HTMLElement | null>,
+] => {
+  const sentinelRef = useRef<HTMLElement | null>(null);
   const [isVisible, setIsVisible] = useState(defaultIsVisible);
 
   useEffect(() => {

package/src/hooks/useToggleHook.tsx

@@ -0,0 +1,42 @@
+// Note: this file was renamed from 'useToggle.tsx' to 'useToggleHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
+import { useState, useCallback } from 'react';
+
+export type Toggler = [
+  isOn: boolean,
+  setOn: () => void,
+  setOff: () => void,
+  toggle: () => void,
+];
+
+export interface ToggleHandlers {
+  handleToggleOn?: () => void;
+  handleToggleOff?: () => void;
+  handleToggle?: (newStatus: boolean) => void;
+}
+
+export default function useToggle(defaultIsOn = false, handlers: ToggleHandlers = {}): Toggler {
+  const { handleToggleOn, handleToggleOff, handleToggle } = handlers;
+  const [isOn, setIsOn] = useState(defaultIsOn);
+
+  const setOn = useCallback(() => {
+    setIsOn(true);
+    handleToggleOn?.();
+    handleToggle?.(true);
+  }, [handleToggleOn, handleToggle]);
+
+  const setOff = useCallback(() => {
+    setIsOn(false);
+    handleToggleOff?.();
+    handleToggle?.(false);
+  }, [handleToggleOff, handleToggle]);
+
+  const toggle = useCallback(() => {
+    const doToggle = isOn ? setOff : setOn;
+    doToggle();
+  }, [isOn, setOn, setOff]);
+
+  return [isOn, setOn, setOff, toggle];
+}

package/src/hooks/useWindowSizeHook.tsx

@@ -0,0 +1,39 @@
+import { useState, useLayoutEffect } from 'react';
+
+export interface WindowSizeData {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+function useWindowSize(): WindowSizeData {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<WindowSizeData>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useLayoutEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: global.innerWidth,
+        height: global.innerHeight,
+      });
+    }
+
+    // Add event listener
+    global.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => global.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+}
+
+export default useWindowSize;

package/src/index.d.ts

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
+export { default as useIsVisible } from './hooks/useIsVisibleHook';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -187,11 +192,6 @@ export const Sticky: any; // from './Sticky';
 export const SelectableBox: any; // from './SelectableBox';
 export const breakpoints: any; // from './utils/breakpoints';
 export const Variant: any; // from './utils/constants';
-export const useWindowSize: any; // from './hooks/useWindowSize';
-export const useToggle: any; // from './hooks/useToggle';
-export const useArrowKeyNavigation: any; // from './hooks/useArrowKeyNavigation';
-export const useIndexOfLastVisibleChild: any; // from './hooks/useIndexOfLastVisibleChild';
-export const useIsVisible: any; // from './hooks/useIsVisible';
 export const
   OverflowScrollContext: any,
   OverflowScroll: any,

package/src/index.js

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize } from './hooks/useWindowSizeHook';
+export { default as useToggle } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
+export { default as useIsVisible } from './hooks/useIsVisibleHook';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -159,11 +164,6 @@ export { default as Sticky } from './Sticky';
 export { default as SelectableBox } from './SelectableBox';
 export { default as breakpoints } from './utils/breakpoints';
 export { default as Variant } from './utils/constants';
-export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useToggle } from './hooks/useToggle';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
-export { default as useIsVisible } from './hooks/useIsVisible';
 export {
   OverflowScrollContext,
   OverflowScroll,

package/styles/scss/core/_exports.module.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -13,10 +14,10 @@ $grid-breakpoints: (
 ) !default;
 
 :export {
-  xs: map-get($grid-breakpoints, "xs");
-  sm: map-get($grid-breakpoints, "sm");
-  md: map-get($grid-breakpoints, "md");
-  lg: map-get($grid-breakpoints, "lg");
-  xl: map-get($grid-breakpoints, "xl");
-  xxl: map-get($grid-breakpoints, "xxl");
+  xs: map.get($grid-breakpoints, "xs");
+  sm: map.get($grid-breakpoints, "sm");
+  md: map.get($grid-breakpoints, "md");
+  lg: map.get($grid-breakpoints, "lg");
+  xl: map.get($grid-breakpoints, "xl");
+  xxl: map.get($grid-breakpoints, "xxl");
 }

package/styles/scss/core/_functions.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:meta";
 @import "./bootstrap-override/functions";
 
 //
@@ -15,20 +17,20 @@
   $base-color: #808080 !default;
   $color-level: 500 !default;
 
-  @if map-has-key($theme-colors, $color-name) {
-    $base-color: map-get($theme-colors, $color-name);
+  @if map.has-key($theme-colors, $color-name) {
+    $base-color: map.get($theme-colors, $color-name);
   }
 
-  @if type-of($variant) == "number" {
+  @if meta.type-of($variant) == "number" {
     $color-level: $variant;
   }
 
-  @else if map-has-key($element-color-levels, $variant) {
-    $color-level: map-get($element-color-levels, $variant);
+  @else if map.has-key($element-color-levels, $variant) {
+    $color-level: map.get($element-color-levels, $variant);
   }
 
-  @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
-    @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}");
+  @if map.has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
+    @return map.get($theme-color-levels, "#{$color-name}-#{$color-level}");
   }
 
   @return $base-color;

package/styles/scss/core/_typography.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
@@ -52,7 +53,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (max-width: map.get($grid-breakpoints, "sm")) {
   @include mobile-type;
 }
 

package/styles/scss/core/_utilities.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // explicitly import bootstrap's utility module to exclude some modules which do not work
 // with CSS variables, they are instead overriden by Paragon
 @import "~bootstrap/scss/utilities/align";
@@ -91,7 +92,7 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 // Define classes for z-index
 $indexes: () !default;
-$indexes: map-merge(
+$indexes: map.merge(
   (
     0: 0,
     1: 200,

package/styles/scss/core/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:map";
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -18,7 +20,7 @@ $gray-900: var(--pgn-color-gray-900) !default;
 $black: var(--pgn-color-black) !default;
 
 $grays: () !default;
-$grays: map-merge(
+$grays: map.merge(
   (
     "100": $gray-100,
     "200": $gray-200,
@@ -40,7 +42,7 @@ $green: var(--pgn-color-green) !default;
 $teal: var(--pgn-color-teal) !default;
 
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     "blue": $blue,
     "green": $green,
@@ -67,7 +69,7 @@ $accent-a: var(--pgn-color-accent-a) !default;
 $accent-b: var(--pgn-color-accent-b) !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     "primary":    $primary,
     "secondary":  $secondary,
@@ -177,7 +179,7 @@ $dark-900: var(--pgn-color-dark-900) !default;
 
 $theme-color-levels: () !default;
 
-$theme-color-levels: map-merge(
+$theme-color-levels: map.merge(
   (
     "gray-100": $gray-100,
     "gray-200": $gray-200,
@@ -275,7 +277,7 @@ $theme-color-levels: map-merge(
 
 $element-color-levels: () !default;
 
-$element-color-levels: map-merge(
+$element-color-levels: map.merge(
   (
     "background": 100,
     "disabled-border": 100,
@@ -339,7 +341,7 @@ $enable-deprecation-messages:                 true !default;
 $spacer: var(--pgn-spacing-spacer-base) !default;
 $spacers: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$spacers: map-merge(
+$spacers: map.merge(
   (
     0: 0,
     1: calc(#{$spacer} * .25),
@@ -360,7 +362,7 @@ $spacers: map-merge(
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$sizes: map-merge(
+$sizes: map.merge(
   (
     25: 25%,
     50: 50%,
@@ -672,7 +674,7 @@ $transition-collapse-width: var(--pgn-transition-collapse-width) !default;
 
 $embed-responsive-aspect-ratios: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$embed-responsive-aspect-ratios: join(
+$embed-responsive-aspect-ratios: list.join(
   (
     (21 9),
     (16 9),
@@ -850,7 +852,7 @@ $user-selects: all, auto, none !default;
 // Printing
 
 $print-page-size:                   var(--pgn-typography-print-page-size) !default;
-$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
+$print-body-min-width:              map.get($grid-breakpoints, "lg") !default;
 
 // List group
 

package/styles/scss/core/bootstrap-override/_functions.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -11,11 +14,11 @@
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
 @function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
     // stylelint-disable-next-line max-line-length
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -26,11 +29,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
       }
 
       @else {
@@ -44,17 +47,17 @@
 
 // Retrieve color Sass maps
 @function color($key: "blue") {
-  @return map-get($colors, $key);
+  @return map.get($colors, $key);
 }
 
 @function gray($key: "100") {
-  @return map-get($grays, $key);
+  @return map.get($grays, $key);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
 
   @if $dividend == 0 {
     @return 0;
@@ -87,8 +90,8 @@
   }
 
   $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
   $unit-map: (
     "px": 1px,
     "rem": 1rem,
@@ -96,8 +99,8 @@
     "%": 1%
   );
 
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
   }
 
   @return $result;

package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
@@ -12,7 +13,7 @@
     padding-left: calc(#{$gutter} * .5);
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @if $columns > 0 {

package/styles/scss/core/bootstrap-override/mixins/_grid.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
@@ -38,11 +39,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(divide($size, $columns));
+  flex: 0 0 math.percentage(divide($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage(divide($size, $columns));
+  max-width: math.percentage(divide($size, $columns));
 }
 
 @mixin make-col-auto() {
@@ -53,7 +54,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
+  margin-left: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns

package/styles/scss/core/bootstrap-override/utilities/_spacing.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 // Bootstrap overrides for spacing utility classes
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/styles/scss/core/bootstrap-override/utilities/_text.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
@@ -15,7 +16,7 @@
 
 // Responsive alignment
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/hooks/useArrowKeyNavigation.js

@@ -1,123 +0,0 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useRef, useEffect } from 'react';
-
-/**
- * A React hook to enable arrow key navigation on a component.
- */
-
-function handleEnter(_ref) {
-  var event = _ref.event,
-    currentIndex = _ref.currentIndex,
-    activeElement = _ref.activeElement;
-  if (currentIndex === -1) {
-    return;
-  }
-  activeElement.click();
-  event.preventDefault();
-}
-function handleArrowKey(_ref2) {
-  var _nextElement;
-  var event = _ref2.event,
-    currentIndex = _ref2.currentIndex,
-    availableElements = _ref2.availableElements;
-  // If the focus isn't in the container, focus on the first thing
-  if (currentIndex === -1) {
-    availableElements[0].focus();
-  }
-
-  // Move the focus up or down. Wrap around ends of list.
-  var nextElement;
-  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-    nextElement = availableElements[(currentIndex + 1) % availableElements.length];
-  }
-  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-    nextElement = currentIndex - 1 < 0 ? availableElements[currentIndex - 1 + availableElements.length] : availableElements[currentIndex - 1];
-  }
-  if (event.key === 'End') {
-    nextElement = availableElements[availableElements.length - 1];
-  }
-  if (event.key === 'Home') {
-    var _availableElements = _slicedToArray(availableElements, 1);
-    nextElement = _availableElements[0];
-  }
-  (_nextElement = nextElement) === null || _nextElement === void 0 ? void 0 : _nextElement.focus();
-  event.preventDefault();
-}
-
-/**
- * Implement arrow key navigation for the given parentNode
- */
-function handleEvents(_ref3) {
-  var event = _ref3.event,
-    _ref3$ignoredKeys = _ref3.ignoredKeys,
-    ignoredKeys = _ref3$ignoredKeys === void 0 ? [] : _ref3$ignoredKeys,
-    parentNode = _ref3.parentNode,
-    _ref3$selectors = _ref3.selectors,
-    selectors = _ref3$selectors === void 0 ? 'a,button,input' : _ref3$selectors;
-  if (!parentNode) {
-    return;
-  }
-  var key = event.key;
-  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key) || ignoredKeys.includes(key)) {
-    return;
-  }
-  var _document = document,
-    activeElement = _document.activeElement;
-
-  // If we're not inside the container, don't do anything
-  if (!parentNode.contains(activeElement)) {
-    return;
-  }
-
-  // Get the list of elements we're allowed to scroll through
-  var availableElements = parentNode.querySelectorAll(selectors);
-
-  // No elements are available to loop through.
-  if (!availableElements.length) {
-    return;
-  }
-
-  // Which index is currently selected
-  var currentIndex = Array.from(availableElements).findIndex(function (availableElement) {
-    return availableElement === activeElement;
-  });
-  if (key === 'Enter') {
-    handleEnter({
-      event: event,
-      currentIndex: currentIndex,
-      activeElement: activeElement
-    });
-  }
-  handleArrowKey({
-    event: event,
-    currentIndex: currentIndex,
-    availableElements: availableElements
-  });
-}
-export default function useArrowKeyNavigation(props) {
-  var _ref4 = props || {},
-    selectors = _ref4.selectors,
-    ignoredKeys = _ref4.ignoredKeys;
-  var parentNode = useRef();
-  useEffect(function () {
-    var eventHandler = function eventHandler(event) {
-      handleEvents({
-        event: event,
-        ignoredKeys: ignoredKeys,
-        parentNode: parentNode.current,
-        selectors: selectors
-      });
-    };
-    document.addEventListener('keydown', eventHandler);
-    return function () {
-      return document.removeEventListener('keydown', eventHandler);
-    };
-  }, [ignoredKeys, selectors]);
-  return parentNode;
-}
-//# sourceMappingURL=useArrowKeyNavigation.js.map

package/dist/hooks/useArrowKeyNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","_nextElement","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  nextElement?.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}