Implement #916.

packages/embla-carousel-docs/.eslintrc.js

@@ -35,6 +35,10 @@ module.exports = {
         '@typescript-eslint/explicit-module-boundary-types': ['error']
       }
     },
+    {
+      files: ['src/consts/redux.ts'],
+      rules: { '@typescript-eslint/explicit-module-boundary-types': 'off' }
+    },
     {
       files: ['src/components/Page/Mdx.tsx'],
       rules: {

packages/embla-carousel-docs/gatsby-browser.ts

@@ -1,4 +1,7 @@
 import { GatsbyBrowser } from 'gatsby'
+import { ReduxProvider } from './src/components/Redux/ReduxProvider'
+
+export const wrapRootElement = ReduxProvider
 
 export const onRouteUpdate: GatsbyBrowser['onRouteUpdate'] = ({ location }) => {
   const { hash } = location

packages/embla-carousel-docs/gatsby-ssr.tsx

@@ -1,3 +1,5 @@
+/// <reference path="./src/utils/declarations.d.ts" />
+
 import React from 'react'
 import config from './gatsby-config'
 import { GatsbySSR } from 'gatsby'
@@ -8,8 +10,14 @@ import {
   THEME_META_SELECTOR,
   THEME_STYLES
 } from './src/consts/themes'
+import { ReduxProvider } from './src/components/Redux/ReduxProvider'
 import { LOCALSTORAGE_KEYS } from './src/consts/localStorage'
 import { ALGOLIA_SEARCH_CONFIG } from './src/consts/algoliaSearch'
+import { BORDER_SIZES } from './src/consts/border'
+import { COLORS } from './src/consts/themes'
+import { SPACINGS } from './src/consts/spacings'
+import { FONT_WEIGHTS } from './src/consts/fontSizes'
+import { LAYERS } from './src/consts/layers'
 import { FONT_FACE_STYLES } from './src/consts/fontFace'
 import { styledComponentsStylesToString } from './src/utils/styledComponentStylesToString'
 import { removeProtocol } from './src/utils/removeProtocol'
@@ -19,6 +27,8 @@ import logoLightThemeBlurUrl from './src/assets/images/embla-logo-light-theme-bl
 import logoDarkThemeBlurUrl from './src/assets/images/embla-logo-dark-theme-blur.svg'
 import interRomanVar from 'assets/fonts/Inter-roman.var.woff2'
 
+export const wrapRootElement = ReduxProvider
+
 const fontsToPreload: string[] = [interRomanVar]
 
 const imagesToPreload: string[] = [
@@ -57,27 +67,28 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
       dangerouslySetInnerHTML={{
         __html: `
           (function() {            
-            var selectedTheme;
-            var themeColors = {
+            let selectedTheme;
+            const themeColors = {
               light: '${THEME_COLORS[THEME_KEYS.LIGHT].BACKGROUND_SITE}',
               dark: '${THEME_COLORS[THEME_KEYS.DARK].BACKGROUND_SITE}'
             };
 
             try {
-              selectedTheme = localStorage.getItem('${
+              const themeStorage = localStorage.getItem('${
                 LOCALSTORAGE_KEYS.THEME
               }');
+              selectedTheme = (JSON.parse(themeStorage) || {}).currentTheme;
             } catch (error) {
               console.error(error);
             }
 
-            var preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches && '${
+            const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches && '${
               THEME_KEYS.DARK
             }';
-            var themeKey = selectedTheme || preferredTheme || '${
+            const themeKey = selectedTheme || preferredTheme || '${
               THEME_KEYS.LIGHT
             }';
-            var oppositeKey = themeKey === '${THEME_KEYS.LIGHT}' ? '${
+            const oppositeKey = themeKey === '${THEME_KEYS.LIGHT}' ? '${
           THEME_KEYS.DARK
         }' : '${THEME_KEYS.LIGHT}';
 
@@ -154,7 +165,24 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
 
   setPreBodyComponents([
     <noscript key="noscript">
-      This app only works with JavaScript enabled.
+      <div
+        style={{
+          border: `${BORDER_SIZES.OUTLINE} solid ${COLORS.ADMONITION_DANGER}`,
+          padding: `${SPACINGS.ONE} ${SPACINGS.TWO}`,
+          color: `${COLORS.ADMONITION_DANGER}`,
+          position: 'fixed',
+          backgroundColor: `${COLORS.BACKGROUND_SITE}`,
+          textAlign: 'center',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'block',
+          fontWeight: `${FONT_WEIGHTS.BOLD}`,
+          zIndex: `${LAYERS.HEADER}`
+        }}
+      >
+        This app only works with JavaScript enabled.
+      </div>
     </noscript>
   ])
 }

packages/embla-carousel-docs/package.json

@@ -38,6 +38,7 @@
     "@docsearch/react": "^3.0.0",
     "@mdx-js/mdx": "^2.2.1",
     "@mdx-js/react": "^2.2.1",
+    "@reduxjs/toolkit": "^2.2.5",
     "babel-plugin-styled-components": "^2.0.2",
     "codesandbox": "^2.2.3",
     "embla-carousel": "8.1.5",
@@ -64,6 +65,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-intersection-observer": "^8.33.1",
+    "react-redux": "^9.1.2",
     "styled-components": "^5.3.3",
     "ts-node": "^10.9.1"
   },

packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx

@@ -2,9 +2,10 @@ import React, { PropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { COLORS } from 'consts/themes'
 import { BORDER_SIZES } from 'consts/border'
-import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { TAP_HIGHLIGHT_STYLES } from 'consts/tapHighlight'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
+import { useAppSelector } from 'hooks/useRedux'
+import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
 
 export const buttonBareStyles = css<{
   $isKeyNavigating: boolean
@@ -53,7 +54,7 @@ export const ButtonBare = React.forwardRef(function ButtonBare(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   const { children, ...restProps } = props
-  const { isKeyNavigating } = useKeyNavigating()
+  const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
   return (
     <ButtonBareWrapper

packages/embla-carousel-docs/src/components/Header/HeaderActions.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
+import { useAppSelector } from 'hooks/useRedux'
+import { selectHierarchalRoutes } from 'components/Routes/routesReducer'
 import { ThemeToggle } from 'components/Theme/ThemeToggle'
 import { LinkNavigation } from 'components/Link/LinkNavigation'
 import { COLORS } from 'consts/themes'
 import { MEDIA } from 'consts/breakpoints'
 import { SPACINGS } from 'consts/spacings'
-import { useRoutes } from 'hooks/useRoutes'
 import { Search } from 'components/Search/Search'
 import { createGapStyles } from 'utils/createGapStyles'
 
@@ -42,14 +43,14 @@ const Link = styled(LinkNavigation)`
 `
 
 export const HeaderActions = () => {
-  const { hierarchical: routes } = useRoutes()
+  const hierarchicalRoutes = useAppSelector(selectHierarchalRoutes)
 
   return (
     <HeaderActionsWrapper>
       <Item $hiddenAtCompact>
         <nav aria-label="Quick Navigation Menu">
           <HeaderActionsWrapper>
-            {routes.map((route) => (
+            {hierarchicalRoutes.map((route) => (
               <Item key={route.id}>
                 <Link slug={route.slug}>{route.title}</Link>
               </Item>

packages/embla-carousel-docs/src/components/Hero/HeroBrand.tsx

@@ -9,7 +9,7 @@ import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 import { BRAND_GRADIENT_TEXT_STYLES } from 'consts/gradients'
 import { useSiteMetadata } from 'hooks/useSiteMetadata'
 import { createGapStyles } from 'utils/createGapStyles'
-import { MAIN_CONTENT_ID } from 'components/KeyNavigating/KeyNavigatingSkipToContent'
+import { MAIN_CONTENT_ID } from 'consts/page'
 import {
   LinkButtonPrimaryFilled,
   LinkButtonPrimaryOutlined

packages/embla-carousel-docs/src/components/Input/InputText.tsx

@@ -1,14 +1,15 @@
 import React, { PropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
+import { useAppSelector } from 'hooks/useRedux'
+import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
 import { BORDER_RADIUSES, BORDER_SIZES } from 'consts/border'
 import { COLORS } from 'consts/themes'
-import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { SPACINGS } from 'consts/spacings'
 import { FONT_SIZES } from 'consts/fontSizes'
 import { LAYERS } from 'consts/layers'
 import { BRAND_GRADIENT_BACKGROUND_STYLES } from 'consts/gradients'
 import { TAP_HIGHLIGHT_STYLES } from 'consts/tapHighlight'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
 
 const HEIGHT = SPACINGS.EIGHT
 const SIDES_PADDING = SPACINGS.THREE
@@ -134,7 +135,7 @@ type PropType = PropsWithRef<
 
 export const InputText = (props: PropType) => {
   const { children, className, ...restProps } = props
-  const { isKeyNavigating } = useKeyNavigating()
+  const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
   return (
     <InputTextWrapper className={className}>

packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
+import { useAppSelector } from 'hooks/useRedux'
+import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
 import { CARD_STYLES } from 'consts/card'
-import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 import { kebabCaseToPascalCase } from 'utils/stringCasing'
 import { PropType } from './createRadioOrCheckboxDefault'
@@ -10,7 +11,7 @@ import { BORDER_RADIUSES, BORDER_SIZES } from 'consts/border'
 import { TAP_HIGHLIGHT_STYLES } from 'consts/tapHighlight'
 import { LAYERS } from 'consts/layers'
 import { COLORS } from 'consts/themes'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
 
 const RadioOrCheckboxCardWrapper = styled.label`
   ${TAP_HIGHLIGHT_STYLES};
@@ -98,7 +99,7 @@ export const createRadioOrCheckboxCard = (
 
   const InputSelectionComponent = (props: PropType) => {
     const { children, ...restProps } = props
-    const { isKeyNavigating } = useKeyNavigating()
+    const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
     return (
       <RadioOrCheckboxCardWrapper htmlFor={restProps.id}>

packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxDefault.tsx

@@ -1,14 +1,15 @@
 import React, { PropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
+import { useAppSelector } from 'hooks/useRedux'
+import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
-import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 import { BORDER_RADIUSES } from 'consts/border'
 import { BRAND_GRADIENT_BACKGROUND_STYLES } from 'consts/gradients'
 import { kebabCaseToPascalCase } from 'utils/stringCasing'
 import { TAP_HIGHLIGHT_STYLES } from 'consts/tapHighlight'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
 
 const INPUT_SIZE = '2.5rem'
 const CHECK_SIZE = '1.2rem'
@@ -134,7 +135,7 @@ export const createRadioOrCheckboxDefault = (
 
   const InputSelectionComponent = (props: PropType) => {
     const { children, ...restProps } = props
-    const { isKeyNavigating } = useKeyNavigating()
+    const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
     return (
       <RadioOrCheckboxDefaultWrapper>

packages/embla-carousel-docs/src/components/KeyEvents/KeyEventsInit.tsx

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import { useEventListener } from 'hooks/useEventListener'
+import { useAppDispatch, useAppSelector } from 'hooks/useRedux'
+import {
+  selectKeyNavigating,
+  setIsKeyNavigating
+} from 'components/KeyEvents/keyEventsReducer'
+
+export const KeyEventsInit = () => {
+  const dispatch = useAppDispatch()
+  const isKeyNavigating = useAppSelector(selectKeyNavigating)
+
+  const onMouseDown = useCallback(() => {
+    if (isKeyNavigating) dispatch(setIsKeyNavigating(false))
+  }, [dispatch, isKeyNavigating])
+
+  const onKeyDown = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Tab' && !isKeyNavigating) dispatch(setIsKeyNavigating(true))
+    },
+    [dispatch, isKeyNavigating]
+  )
+
+  useEventListener('keydown', onKeyDown)
+  useEventListener('mousedown', onMouseDown)
+
+  return null
+}

packages/embla-carousel-docs/src/components/KeyNavigating/KeyNavigatingSkipToContent.tsx → packages/embla-carousel-docs/src/components/KeyEvents/KeyEventsSkipToContent.tsx

@@ -4,11 +4,10 @@ import { LinkButtonPrimaryOutlined } from 'components/Link/LinkButton'
 import { navigate } from '@reach/router'
 import { isBrowser } from 'utils/isBrowser'
 import { LAYERS } from 'consts/layers'
-import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles'
+import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents'
+import { MAIN_CONTENT_ID } from 'consts/page'
 
-export const MAIN_CONTENT_ID = 'main-content'
-
-const KeyNavigatingSkipToContentWrapper = styled(LinkButtonPrimaryOutlined)`
+const KeyEventsSkipToContentWrapper = styled(LinkButtonPrimaryOutlined)`
   z-index: ${LAYERS.SEARCH + 1};
   top: 1rem;
   left: 1rem;
@@ -23,7 +22,7 @@ const KeyNavigatingSkipToContentWrapper = styled(LinkButtonPrimaryOutlined)`
   }
 `
 
-export const KeyNavigatingSkipToContent = () => {
+export const KeyEventsSkipToContent = () => {
   const [contentElement, setContentElement] = useState<HTMLElement | null>(null)
 
   const onClick = useCallback(
@@ -44,12 +43,12 @@ export const KeyNavigatingSkipToContent = () => {
   if (!contentElement) return null
 
   return (
-    <KeyNavigatingSkipToContentWrapper
+    <KeyEventsSkipToContentWrapper
       to={`#${MAIN_CONTENT_ID}`}
       onClick={onClick}
       $isKeyNavigating
     >
       Skip to content
-    </KeyNavigatingSkipToContentWrapper>
+    </KeyEventsSkipToContentWrapper>
   )
 }

packages/embla-carousel-docs/src/components/KeyEvents/keyEventsReducer.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { AppStateType } from 'consts/redux'
+
+export type KeyEventsStateType = {
+  isKeyNavigating: boolean
+}
+
+const initialState: KeyEventsStateType = {
+  isKeyNavigating: false
+}
+
+const keyEventsSlice = createSlice({
+  name: 'keyEvents',
+  initialState,
+  reducers: {
+    setIsKeyNavigating: (
+      state,
+      action: PayloadAction<KeyEventsStateType['isKeyNavigating']>
+    ): void => {
+      state.isKeyNavigating = action.payload
+    }
+  }
+})
+
+const { name, reducer } = keyEventsSlice
+export { name as keyEventsName, reducer as keyEventsReducer }
+
+export const { setIsKeyNavigating } = keyEventsSlice.actions
+
+export const selectKeyNavigating = (state: AppStateType): boolean =>
+  state.keyEvents.isKeyNavigating