@faststore/ui 2.0.53-alpha.0 → 2.0.56-alpha.0

package/dist/components/molecules/Modal/useTrapFocus.d.ts

@@ -1,8 +0,0 @@
-import type { RefObject } from 'react';
-interface TrapFocusParams {
-    beforeElementRef: RefObject<HTMLElement>;
-    trapFocusRef: RefObject<HTMLElement>;
-    afterElementRef: RefObject<HTMLElement>;
-}
-declare const useTrapFocus: ({ trapFocusRef, beforeElementRef, afterElementRef, }: TrapFocusParams) => void;
-export default useTrapFocus;

package/dist/components/molecules/Modal/useTrapFocus.js

@@ -1,76 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { tabbable } from 'tabbable';
-/*
- * Element that will maintain the focus inside trapFocusRef, focus the first element,
- * and focus back on the element that was in focus when useTrapFocus was triggered.
- *
- * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
- */
-const useTrapFocus = ({ trapFocusRef, beforeElementRef, afterElementRef, }) => {
-    const tabbableNodesRef = useRef();
-    const nodeToRestoreRef = useRef(document.hasFocus() ? document.activeElement : null);
-    // Focus back on the element that was focused when useTrapFocus is triggered.
-    useEffect(() => {
-        const nodeToRestore = nodeToRestoreRef.current;
-        return () => {
-            nodeToRestore?.focus();
-        };
-    }, [nodeToRestoreRef]);
-    // Set focus on first tabbable element
-    useEffect(() => {
-        if (!trapFocusRef.current) {
-            return;
-        }
-        if (!tabbableNodesRef.current) {
-            tabbableNodesRef.current = tabbable(trapFocusRef.current);
-        }
-        const [firstTabbable] = tabbableNodesRef.current;
-        if (!firstTabbable) {
-            trapFocusRef.current.focus();
-            return;
-        }
-        firstTabbable.focus();
-    }, [trapFocusRef]);
-    // Handle loop focus. Set keydown and focusin event listeners
-    useEffect(() => {
-        if (!trapFocusRef.current ||
-            !beforeElementRef.current ||
-            !afterElementRef.current) {
-            return;
-        }
-        const beforeElement = beforeElementRef.current;
-        const afterElement = afterElementRef.current;
-        const trapFocus = trapFocusRef.current;
-        const handleLoopFocus = (nativeEvent) => {
-            if (!document.hasFocus()) {
-                return;
-            }
-            tabbableNodesRef.current = tabbable(trapFocusRef.current);
-            if (!tabbableNodesRef.current.length) {
-                trapFocus.focus();
-            }
-            /*
-             * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
-             * It will focus the last element of the trapFocusRef.
-             */
-            if (nativeEvent.target === beforeElement) {
-                tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus();
-            }
-            /*
-             * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
-             * It will focus the first element of the trapFocusRef.
-             */
-            if (nativeEvent.target === afterElement) {
-                tabbableNodesRef.current[0]?.focus();
-            }
-        };
-        beforeElement?.addEventListener('focusin', handleLoopFocus);
-        afterElement?.addEventListener('focusin', handleLoopFocus);
-        return () => {
-            beforeElement?.removeEventListener('focusin', handleLoopFocus);
-            afterElement?.removeEventListener('focusin', handleLoopFocus);
-        };
-    }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef]);
-};
-export default useTrapFocus;
-//# sourceMappingURL=useTrapFocus.js.map

package/dist/components/molecules/Modal/useTrapFocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTrapFocus.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/useTrapFocus.ts"],"names":[],"mappings":"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"}

package/dist/components/molecules/PriceRange/PriceRange.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import type { AriaAttributes } from 'react';
-import type { PriceProps } from '@faststore/components';
-import type { SliderProps } from '../../atoms/Slider';
-export type PriceRangeProps = SliderProps & {
-    /**
-     * The current use case variant for prices.
-     */
-    variant?: PriceProps['variant'];
-    /**
-     * Formatter function that transforms the raw price value and render the result.
-     */
-    formatter: PriceProps['formatter'];
-    /**
-     * Returns the value of element's class content attribute.
-     */
-    className?: string;
-    /**
-     * Defines a string value that labels the current element.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-};
-type PriceRangeRefType = {
-    setPriceRangeValues: (values: {
-        min: number;
-        max: number;
-    }) => void;
-};
-declare const PriceRange: React.ForwardRefExoticComponent<SliderProps & {
-    /**
-     * The current use case variant for prices.
-     */
-    variant?: PriceProps['variant'];
-    /**
-     * Formatter function that transforms the raw price value and render the result.
-     */
-    formatter: PriceProps['formatter'];
-    /**
-     * Returns the value of element's class content attribute.
-     */
-    className?: string | undefined;
-    /**
-     * Defines a string value that labels the current element.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-} & React.RefAttributes<PriceRangeRefType | undefined>>;
-export default PriceRange;

package/dist/components/molecules/PriceRange/PriceRange.js

@@ -1,28 +0,0 @@
-import React, { useRef, useImperativeHandle, forwardRef } from 'react';
-import { Price } from '@faststore/components';
-import Slider from '../../atoms/Slider';
-const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, step, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
-    const sliderRef = useRef();
-    useImperativeHandle(ref, () => ({
-        setPriceRangeValues: (values) => {
-            onChange?.(values);
-            sliderRef.current?.setSliderValues(values);
-        },
-    }));
-    return (React.createElement("div", { "data-fs-price-range": true, "data-testid": testId, className: className },
-        React.createElement(Slider, { ref: sliderRef, min: min, max: max, step: step, onEnd: onEnd, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), minValueLabelComponent: (minValue) => {
-                const minPercent = (minValue / max.absolute) * 100;
-                return (React.createElement(Price, { value: minValue, variant: variant, formatter: formatter, "data-price-range-value-label": "min", style: {
-                        position: 'absolute',
-                        left: `calc(${minPercent}% + (${8 - minPercent * 0.2}px))`,
-                    } }));
-            }, maxValueLabelComponent: (maxValue) => {
-                const maxPercent = (maxValue / max.absolute) * 100;
-                return (React.createElement(Price, { formatter: formatter, variant: variant, value: maxValue, "data-price-range-value-label": "max", style: {
-                        position: 'absolute',
-                        left: `calc(${maxPercent}% + (${8 - maxPercent * 0.2}px))`,
-                    } }));
-            } })));
-});
-export default PriceRange;
-//# sourceMappingURL=PriceRange.js.map

package/dist/components/molecules/PriceRange/PriceRange.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../../src/components/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAG7C,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA0BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,yEAAsC,MAAM,EAAE,SAAS,EAAE,SAAS;QAChE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/molecules/PriceRange/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './PriceRange';
-export type { PriceRangeProps } from './PriceRange';

package/dist/components/molecules/PriceRange/index.js

@@ -1,2 +0,0 @@
-export { default } from './PriceRange';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/PriceRange/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/PriceRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/src/components/atoms/Slider/Slider.tsx

@@ -1,182 +0,0 @@
-/**
- * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
- */
-import React, {
-  useState,
-  useMemo,
-  useImperativeHandle,
-  forwardRef,
-} from 'react'
-import type { ReactNode } from 'react'
-
-interface Range {
-  absolute: number
-  selected: number
-}
-
-export type SliderProps = {
-  /**
-   * The minimum value of the slider.
-   */
-  min: Range
-  /**
-   * The maximum value of the slider.
-   */
-  max: Range
-  /**
-   * Specifies the number interval to be used in the inputs.
-   */
-  step?: number
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   *
-   * @default 'store-slider'
-   */
-  testId?: string
-  /**
-   * Callback that fires when the slider value changes.
-   */
-  onChange?: (value: { min: number; max: number }) => void
-  /**
-   * Callback that fires when the slider value ends changing.
-   */
-  onEnd?: (value: { min: number; max: number }) => void
-  /**
-   * A function used to set a human-readable value text based on the slider's current value.
-   */
-  getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
-  /**
-   * Returns the value of element's class content attribute.
-   */
-  className?: string
-  /**
-   * Component that renders min value label above the left thumb.
-   */
-  minValueLabelComponent?: (minValue: number) => ReactNode
-  /**
-   * Component that renders max value label above the right thumb.
-   */
-  maxValueLabelComponent?: (maxValue: number) => ReactNode
-}
-
-type SliderRefType = {
-  setSliderValues: (values: { min: number; max: number }) => void
-}
-
-const percent = (value: number, min: number, max: number) =>
-  Math.round(((value - min) / (max - min)) * 100)
-
-const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
-  function Slider(
-    {
-      min,
-      max,
-      onChange,
-      onEnd,
-      testId = 'store-slider',
-      getAriaValueText,
-      className,
-      step,
-      minValueLabelComponent,
-      maxValueLabelComponent,
-    },
-    ref
-  ) {
-    const widthPercent = useMemo(
-      () => (max.absolute - min.absolute) / 100,
-      [max.absolute, min.absolute]
-    )
-    const [minPercent, setMinPercent] = useState(() =>
-      percent(min.selected, min.absolute, max.absolute)
-    )
-
-    const [maxPercent, setMaxPercent] = useState(() =>
-      percent(max.selected, min.absolute, max.absolute)
-    )
-
-    const [minVal, setMinVal] = useState(() =>
-      Math.round(min.absolute + minPercent * widthPercent)
-    )
-    const [maxVal, setMaxVal] = useState(() =>
-      Math.round(min.absolute + maxPercent * widthPercent)
-    )
-
-    useImperativeHandle(ref, () => ({
-      setSliderValues: (values: { min: number; max: number }) => {
-        const sliderMinValue = Math.min(Number(values.min), maxVal)
-        setMinVal(sliderMinValue)
-        setMinPercent(percent(sliderMinValue, min.absolute, max.absolute))
-
-        if (values.max > max.absolute) {
-          setMaxVal(max.absolute)
-          setMaxPercent(percent(max.absolute, min.absolute, max.absolute))
-          return
-        }
-
-        const sliderMaxValue = Math.max(Number(values.max), minVal)
-        setMaxVal(sliderMaxValue)
-        setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute))
-      },
-    }))
-
-    return (
-      <div data-fs-slider data-testid={testId} className={className}>
-        <div
-          data-slider-range
-          style={{
-            left: `${minPercent}%`,
-            width: `${maxPercent - minPercent}%`,
-          }}
-        />
-        <input
-          type="range"
-          min={Math.round(min.absolute)}
-          max={Math.round(max.absolute)}
-          value={minVal}
-          step={step}
-          onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
-          onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
-          onChange={(event) => {
-            const minValue = Math.min(Number(event.target.value), maxVal)
-
-            setMinVal(minValue)
-            setMinPercent(percent(minValue, min.absolute, max.absolute))
-            onChange?.({ min: minValue, max: maxVal })
-          }}
-          data-slider-thumb="left"
-          aria-valuemin={min.absolute}
-          aria-valuemax={max.absolute}
-          aria-valuenow={minVal}
-          aria-label={String(minVal)}
-          aria-labelledby={getAriaValueText?.(minVal, 'min')}
-        />
-        {minValueLabelComponent && minValueLabelComponent(minVal)}
-        <input
-          type="range"
-          min={Math.round(min.absolute)}
-          max={Math.round(max.absolute)}
-          value={maxVal}
-          step={step}
-          onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
-          onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
-          onChange={(event) => {
-            const maxValue = Math.max(Number(event.target.value), minVal)
-
-            setMaxVal(maxValue)
-            setMaxPercent(percent(maxValue, min.absolute, max.absolute))
-            onChange?.({ min: minVal, max: maxValue })
-          }}
-          data-slider-thumb="right"
-          aria-valuemin={min.absolute}
-          aria-valuemax={max.absolute}
-          aria-valuenow={maxVal}
-          aria-label={String(maxVal)}
-          aria-labelledby={getAriaValueText?.(maxVal, 'max')}
-        />
-        {maxValueLabelComponent && maxValueLabelComponent(maxVal)}
-      </div>
-    )
-  }
-)
-
-export default Slider

package/src/components/atoms/Slider/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Slider'
-export type { SliderProps } from './Slider'

package/src/components/molecules/Modal/Modal.tsx

@@ -1,82 +0,0 @@
-import type {
-  AriaAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  PropsWithChildren,
-} from 'react'
-import React from 'react'
-import { createPortal } from 'react-dom'
-
-import { Overlay } from '@faststore/components'
-import type { ModalContentProps } from './ModalContent'
-import ModalContent from './ModalContent'
-
-export interface ModalProps extends ModalContentProps {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-  /**
-   * Identifies the element (or elements) that labels the current element.
-   * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
-   */
-  'aria-labelledby'?: AriaAttributes['aria-label']
-
-  /**
-   * This function is called whenever the user hits "Escape" or clicks outside
-   * the dialog.
-   */
-  onDismiss?: (event: MouseEvent | KeyboardEvent) => void
-  /**
-   * Controls whether or not the dialog is open.
-   */
-  isOpen: boolean
-}
-
-/*
- * This component is based on @reach/dialog.
- * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
- * https://reach.tech/dialog
- */
-
-const Modal = ({
-  isOpen,
-  children,
-  onDismiss,
-  testId = 'store-modal',
-  ...otherProps
-}: PropsWithChildren<ModalProps>) => {
-  const handleBackdropClick = (event: MouseEvent) => {
-    if (event.defaultPrevented) {
-      return
-    }
-
-    event.stopPropagation()
-    onDismiss?.(event)
-  }
-
-  const handleBackdropKeyDown = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape' || event.defaultPrevented) {
-      return
-    }
-
-    event.stopPropagation()
-    onDismiss?.(event)
-  }
-
-  return isOpen
-    ? createPortal(
-        <Overlay
-          onClick={handleBackdropClick}
-          onKeyDown={handleBackdropKeyDown}
-        >
-          <ModalContent {...otherProps} testId={testId}>
-            {children}
-          </ModalContent>
-        </Overlay>,
-        document.body
-      )
-    : null
-}
-
-export default Modal

package/src/components/molecules/Modal/ModalContent.tsx

@@ -1,90 +0,0 @@
-import type {
-  DetailedHTMLProps,
-  HTMLAttributes,
-  MouseEvent,
-  RefObject,
-} from 'react'
-import React, { useRef } from 'react'
-
-import useTrapFocus from './useTrapFocus'
-
-interface ModalContentPureProps
-  extends Omit<
-    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-    'ref'
-  > {
-  beforeElementRef: RefObject<HTMLDivElement>
-  trapFocusRef: RefObject<HTMLDivElement>
-  afterElementRef: RefObject<HTMLDivElement>
-  testId?: string
-}
-
-const ModalContentPure = ({
-  beforeElementRef,
-  trapFocusRef,
-  afterElementRef,
-  testId = 'store-modal-content',
-  children,
-  ...otherProps
-}: ModalContentPureProps) => {
-  return (
-    <>
-      <div
-        ref={beforeElementRef}
-        data-testid="beforeElement"
-        tabIndex={0}
-        aria-hidden="true"
-      />
-      <div
-        data-fs-modal-content
-        data-testid={testId}
-        ref={trapFocusRef}
-        aria-modal="true"
-        role="dialog"
-        tabIndex={-1}
-        {...otherProps}
-      >
-        {children}
-      </div>
-      <div
-        ref={afterElementRef}
-        data-testid="afterElement"
-        tabIndex={0}
-        aria-hidden="true"
-      />
-    </>
-  )
-}
-
-export type ModalContentProps = Omit<
-  ModalContentPureProps,
-  'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'
->
-
-const ModalContent = ({ children, ...otherProps }: ModalContentProps) => {
-  const trapFocusRef = useRef<HTMLDivElement>(null)
-  const beforeElementRef = useRef<HTMLDivElement>(null)
-  const afterElementRef = useRef<HTMLDivElement>(null)
-
-  useTrapFocus({
-    beforeElementRef,
-    trapFocusRef,
-    afterElementRef,
-  })
-
-  return (
-    <ModalContentPure
-      {...otherProps}
-      trapFocusRef={trapFocusRef}
-      beforeElementRef={beforeElementRef}
-      afterElementRef={afterElementRef}
-      onClick={(event: MouseEvent) => {
-        event.stopPropagation()
-      }}
-    >
-      {children}
-    </ModalContentPure>
-  )
-}
-
-export default ModalContent

package/src/components/molecules/Modal/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './Modal'
-export type { ModalProps } from './Modal'

package/src/components/molecules/Modal/useTrapFocus.ts

@@ -1,110 +0,0 @@
-import { useEffect, useRef } from 'react'
-import type { RefObject } from 'react'
-import type { FocusableElement } from 'tabbable'
-import { tabbable } from 'tabbable'
-
-interface TrapFocusParams {
-  beforeElementRef: RefObject<HTMLElement>
-  trapFocusRef: RefObject<HTMLElement>
-  afterElementRef: RefObject<HTMLElement>
-}
-
-/*
- * Element that will maintain the focus inside trapFocusRef, focus the first element,
- * and focus back on the element that was in focus when useTrapFocus was triggered.
- *
- * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
- */
-const useTrapFocus = ({
-  trapFocusRef,
-  beforeElementRef,
-  afterElementRef,
-}: TrapFocusParams) => {
-  const tabbableNodesRef = useRef<FocusableElement[]>()
-  const nodeToRestoreRef = useRef<HTMLElement | null>(
-    document.hasFocus() ? (document.activeElement as HTMLElement) : null
-  )
-
-  // Focus back on the element that was focused when useTrapFocus is triggered.
-  useEffect(() => {
-    const nodeToRestore = nodeToRestoreRef.current
-
-    return () => {
-      nodeToRestore?.focus()
-    }
-  }, [nodeToRestoreRef])
-
-  // Set focus on first tabbable element
-  useEffect(() => {
-    if (!trapFocusRef.current) {
-      return
-    }
-
-    if (!tabbableNodesRef.current) {
-      tabbableNodesRef.current = tabbable(trapFocusRef.current)
-    }
-
-    const [firstTabbable] = tabbableNodesRef.current
-
-    if (!firstTabbable) {
-      trapFocusRef.current.focus()
-
-      return
-    }
-
-    firstTabbable.focus()
-  }, [trapFocusRef])
-
-  // Handle loop focus. Set keydown and focusin event listeners
-  useEffect(() => {
-    if (
-      !trapFocusRef.current ||
-      !beforeElementRef.current ||
-      !afterElementRef.current
-    ) {
-      return
-    }
-
-    const beforeElement = beforeElementRef.current
-    const afterElement = afterElementRef.current
-    const trapFocus = trapFocusRef.current
-
-    const handleLoopFocus = (nativeEvent: FocusEvent) => {
-      if (!document.hasFocus()) {
-        return
-      }
-
-      tabbableNodesRef.current = tabbable(trapFocusRef.current!)
-
-      if (!tabbableNodesRef.current.length) {
-        trapFocus.focus()
-      }
-
-      /*
-       * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
-       * It will focus the last element of the trapFocusRef.
-       */
-      if (nativeEvent.target === beforeElement) {
-        tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus()
-      }
-
-      /*
-       * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
-       * It will focus the first element of the trapFocusRef.
-       */
-      if (nativeEvent.target === afterElement) {
-        tabbableNodesRef.current[0]?.focus()
-      }
-    }
-
-    beforeElement?.addEventListener('focusin', handleLoopFocus)
-    afterElement?.addEventListener('focusin', handleLoopFocus)
-
-    return () => {
-      beforeElement?.removeEventListener('focusin', handleLoopFocus)
-      afterElement?.removeEventListener('focusin', handleLoopFocus)
-    }
-  }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef])
-}
-
-export default useTrapFocus