@faststore/components 2.0.54-alpha.0 → 2.0.56-alpha.0

package/dist/hooks/UIProvider.d.ts

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react';
+interface Toast {
+    message: string;
+    status: 'ERROR' | 'WARNING' | 'INFO';
+    title?: string;
+    icon?: string;
+}
+interface State {
+    /** Cart sidebar */
+    cart: boolean;
+    /** Region modal */
+    modal: boolean;
+    /** Menu slider */
+    navbar: boolean;
+    /** Search page filter slider */
+    filter: boolean;
+    toasts: Toast[];
+}
+interface Context extends State {
+    closeNavbar: () => void;
+    openNavbar: () => void;
+    closeFilter: () => void;
+    openFilter: () => void;
+    openCart: () => void;
+    closeCart: () => void;
+    openModal: () => void;
+    closeModal: () => void;
+    pushToast: (data: Toast) => void;
+    popToast: () => void;
+}
+declare function UIProvider({ children }: PropsWithChildren): JSX.Element;
+export declare function useUI(): Context;
+export default UIProvider;

package/dist/hooks/UIProvider.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { createContext, useContext, useMemo, useReducer } from 'react';
+const reducer = (state, action) => {
+    const { type } = action;
+    switch (type) {
+        case 'open': {
+            const { payload } = action;
+            document.body.classList.add('no-scroll');
+            return {
+                ...state,
+                [payload]: true,
+            };
+        }
+        case 'close': {
+            const { payload } = action;
+            document.body.classList.remove('no-scroll');
+            return {
+                ...state,
+                [payload]: false,
+            };
+        }
+        case 'pushToast': {
+            return {
+                ...state,
+                toasts: [...state.toasts, action.payload],
+            };
+        }
+        case 'popToast': {
+            return {
+                ...state,
+                toasts: state.toasts.slice(1),
+            };
+        }
+        default:
+            throw new Error(`Action ${type} not implemented`);
+    }
+};
+const initializer = () => ({
+    cart: false,
+    modal: false,
+    navbar: false,
+    filter: false,
+    toasts: [],
+});
+const UIContext = createContext(undefined);
+function UIProvider({ children }) {
+    const [ui, dispatch] = useReducer(reducer, undefined, initializer);
+    const callbacks = useMemo(() => ({
+        openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
+        closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
+        openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
+        closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
+        openCart: () => dispatch({ type: 'open', payload: 'cart' }),
+        closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
+        openModal: () => dispatch({ type: 'open', payload: 'modal' }),
+        closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
+        pushToast: (toast) => dispatch({ type: 'pushToast', payload: toast }),
+        popToast: () => dispatch({ type: 'popToast' }),
+    }), []);
+    const value = useMemo(() => ({
+        ...ui,
+        ...callbacks,
+    }), [callbacks, ui]);
+    return React.createElement(UIContext.Provider, { value: value }, children);
+}
+export function useUI() {
+    const context = useContext(UIContext);
+    if (context === undefined) {
+        throw new Error('Missing UI context on React tree');
+    }
+    return context;
+}
+export default UIProvider;
+//# sourceMappingURL=UIProvider.js.map

package/dist/hooks/UIProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/hooks/UIProvider.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UIProvider, useUI } from './UIProvider';
+export { useFadeEffect } from './useFadeEffect';
+export { useTrapFocus } from './useTrapFocus';

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as UIProvider, useUI } from './UIProvider';
+export { useFadeEffect } from './useFadeEffect';
+export { useTrapFocus } from './useTrapFocus';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/hooks/useFadeEffect.d.ts

@@ -0,0 +1,5 @@
+export declare const useFadeEffect: () => {
+    fade: "in" | "out";
+    fadeIn: () => void;
+    fadeOut: () => void;
+};

package/dist/hooks/useFadeEffect.js

@@ -0,0 +1,18 @@
+import { useState, useCallback, useEffect } from 'react';
+export const useFadeEffect = () => {
+    const [fade, setFade] = useState('out');
+    const fadeOut = useCallback(() => setFade('out'), []);
+    const fadeIn = useCallback(() => setFade('in'), []);
+    useEffect(() => {
+        fadeIn();
+        return () => {
+            fadeOut();
+        };
+    }, [fadeIn, fadeOut]);
+    return {
+        fade,
+        fadeIn,
+        fadeOut,
+    };
+};
+//# sourceMappingURL=useFadeEffect.js.map

package/dist/hooks/useFadeEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFadeEffect.js","sourceRoot":"","sources":["../../src/hooks/useFadeEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,CAAA;IACrD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IACrD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,CAAA;QAER,OAAO,GAAG,EAAE;YACV,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAErB,OAAO;QACL,IAAI;QACJ,MAAM;QACN,OAAO;KACR,CAAA;AACH,CAAC,CAAA"}

package/dist/hooks/useTrapFocus.d.ts

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

package/dist/hooks/useTrapFocus.js

@@ -0,0 +1,75 @@
+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
+ */
+export 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]);
+};
+//# sourceMappingURL=useTrapFocus.js.map

package/dist/hooks/useTrapFocus.js.map

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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './assets';
+export * from './hooks';
 export { default as Badge } from './atoms/Badge';
 export type { BadgeProps } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -47,6 +48,8 @@ export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export type { LinkButtonProps } from './molecules/LinkButton';
+export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
+export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';

package/dist/index.js

@@ -1,5 +1,7 @@
 // Assets
 export * from './assets';
+// Hooks
+export * from './hooks';
 // Atoms
 export { default as Badge } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -27,6 +29,7 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 export { default as Gift, GiftContent, GiftImage, } from './molecules/Gift';
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
+export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
 export { default as RadioField } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';

package/dist/index.js.map

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

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

@@ -0,0 +1,34 @@
+import type { AriaAttributes, ReactNode } from 'react';
+import React from 'react';
+import type { ModalContentProps } from './ModalContent';
+export type ModalChildrenProps = {
+    fade: 'in' | 'out';
+    fadeOut: () => void;
+    fadeIn: () => void;
+};
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode;
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+    /**
+     * 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'];
+    /**
+     * A boolean value that represents the state of the Modal
+     */
+    isOpen?: boolean;
+    /**
+     * Event emitted when the modal is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * Children or function as a children
+     */
+    children: ModalChildrenFunction | ReactNode;
+}
+declare const Modal: ({ children, testId, isOpen, onDismiss, ...otherProps }: ModalProps) => React.ReactPortal | null;
+export default Modal;

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Overlay } from '../..';
+import { useFadeEffect, useUI } from '../../hooks';
+import ModalContent from './ModalContent';
+/*
+ * 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 = ({ children, testId = 'fs-modal', isOpen = true, onDismiss, ...otherProps }) => {
+    const { closeModal } = useUI();
+    const { fade, fadeOut, fadeIn } = useFadeEffect();
+    const handleBackdropClick = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    const handleBackdropKeyDown = (event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    return isOpen
+        ? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
+            React.createElement(ModalContent, { onTransitionEnd: () => fade === 'out' && closeModal(), "data-fs-modal": true, "data-fs-modal-state": fade, testId: testId, ...otherProps }, typeof children === 'function'
+                ? children({ fade, fadeOut, fadeIn })
+                : children)), document.body)
+        : null;
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAkCzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,UAAU,EACF,EAAE,EAAE;IACf,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC9B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,IACX,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,UAAU,EAAE,gDAEhC,IAAI,EACzB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,OAAO,QAAQ,KAAK,UAAU;gBAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;gBACrC,CAAC,CAAC,QAAQ,CACC,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/molecules/Modal/ModalBody.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const ModalBody: ({ children, ...otherProps }: ModalBodyProps) => JSX.Element;
+export default ModalBody;

package/dist/molecules/Modal/ModalBody.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ModalBody = ({ children, ...otherProps }) => (React.createElement("div", { "data-fs-modal-body": true, ...otherProps }, children));
+export default ModalBody;
+//# sourceMappingURL=ModalBody.js.map

package/dist/molecules/Modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAMxD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAkB,EAAE,EAAE,CAAC,CACjE,4DAA4B,UAAU,IACnC,QAAQ,CACL,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Modal/ModalContent.d.ts

@@ -0,0 +1,10 @@
+import type { DetailedHTMLProps, HTMLAttributes, RefObject } from 'react';
+interface ModalContentPureProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    beforeElementRef: RefObject<HTMLDivElement>;
+    trapFocusRef: RefObject<HTMLDivElement>;
+    afterElementRef: RefObject<HTMLDivElement>;
+    testId?: string;
+}
+export type ModalContentProps = Omit<ModalContentPureProps, 'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'>;
+declare const ModalContent: ({ children, ...otherProps }: ModalContentProps) => JSX.Element;
+export default ModalContent;

package/dist/molecules/Modal/ModalContent.js

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import { useTrapFocus } from '../../hooks';
+const ModalContentPure = ({ beforeElementRef, trapFocusRef, afterElementRef, testId = 'store-modal-content', children, ...otherProps }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: beforeElementRef, "data-testid": "beforeElement", tabIndex: 0, "aria-hidden": "true" }),
+        React.createElement("div", { "data-fs-modal-content": true, "data-testid": testId, ref: trapFocusRef, "aria-modal": "true", role: "dialog", tabIndex: -1, ...otherProps }, children),
+        React.createElement("div", { ref: afterElementRef, "data-testid": "afterElement", tabIndex: 0, "aria-hidden": "true" })));
+};
+const ModalContent = ({ children, ...otherProps }) => {
+    const trapFocusRef = useRef(null);
+    const beforeElementRef = useRef(null);
+    const afterElementRef = useRef(null);
+    useTrapFocus({
+        beforeElementRef,
+        trapFocusRef,
+        afterElementRef,
+    });
+    return (React.createElement(ModalContentPure, { ...otherProps, trapFocusRef: trapFocusRef, beforeElementRef: beforeElementRef, afterElementRef: afterElementRef, onClick: (event) => {
+            event.stopPropagation();
+        } }, children));
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map

package/dist/molecules/Modal/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAa1C,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,GAAG,UAAU,EACS,EAAE,EAAE;IAC1B,OAAO,CACL;QACE,6BACE,GAAG,EAAE,gBAAgB,iBACT,eAAe,EAC3B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB;QACF,2EAEe,MAAM,EACnB,GAAG,EAAE,YAAY,gBACN,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,KACR,UAAU,IAEb,QAAQ,CACL;QACN,6BACE,GAAG,EAAE,eAAe,iBACR,cAAc,EAC1B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,EAAE,EAAE;IACtE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACrD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEpD,YAAY,CAAC;QACX,gBAAgB;QAChB,YAAY;QACZ,eAAe;KAChB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,gBAAgB,OACX,UAAU,EACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;QACzB,CAAC,IAEA,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/molecules/Modal/ModalHeader.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+import { IconButtonProps } from '../IconButton';
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title for header modal.
+     */
+    title: string;
+    /**
+     * Description for header modal.
+     */
+    description?: string;
+    /**
+     * Props for the Close Button component.
+     */
+    closeButtonProps?: Partial<Omit<IconButtonProps, 'onClick'>>;
+    onClose?: () => void;
+}
+declare const ModalHeader: ({ onClose, title, closeButtonProps, description, }: ModalHeaderProps) => JSX.Element;
+export default ModalHeader;

package/dist/molecules/Modal/ModalHeader.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { X } from '../../assets';
+import IconButton from '../IconButton';
+const ModalHeader = ({ onClose, title, closeButtonProps = {}, description, }) => {
+    return (React.createElement("header", { "data-fs-modal-header": true },
+        onClose && (React.createElement(IconButton, { onClick: () => onClose?.(), "data-fs-modal-header-close-button": true, icon: React.createElement(X, null), "aria-label": "Close modal", ...closeButtonProps })),
+        React.createElement("p", { "data-fs-modal-header-title": true }, title),
+        description && React.createElement("p", { "data-fs-modal-header-description": true }, description)));
+};
+export default ModalHeader;
+//# sourceMappingURL=ModalHeader.js.map

package/dist/molecules/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAChC,OAAO,UAA+B,MAAM,eAAe,CAAA;AAqB3D,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,KAAK,EACL,gBAAgB,GAAG,EAAE,EACrB,WAAW,GACM,EAAE,EAAE;IACrB,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,6CAE1B,IAAI,EAAE,oBAAC,CAAC,OAAG,gBACA,aAAa,KACpB,gBAAgB,GACpB,CACH;QACD,iEAA+B,KAAK,CAAK;QACxC,WAAW,IAAI,uEAAqC,WAAW,CAAK,CAC9D,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+export type { ModalProps } from './Modal';
+export type { ModalHeaderProps } from './ModalHeader';

package/dist/molecules/Modal/index.js

@@ -0,0 +1,4 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+//# sourceMappingURL=index.js.map

package/dist/molecules/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/molecules/Table/Table.d.ts

@@ -22,5 +22,5 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
      */
     nonce?: string | undefined;
 }
-declare const Table: React.ForwardRefExoticComponent<Pick<PropsWithChildren<TableProps>, "slot" | "style" | "summary" | "title" | "testId" | "variant" | "aria-label" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "key" | "align" | "bgcolor" | "border" | "cellPadding" | "cellSpacing" | "frame" | "rules"> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<Pick<PropsWithChildren<TableProps>, "slot" | "style" | "summary" | "title" | "children" | "testId" | "variant" | "aria-label" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "key" | "align" | "bgcolor" | "border" | "cellPadding" | "cellSpacing" | "frame" | "rules"> & React.RefAttributes<HTMLTableElement>>;
 export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.54-alpha.0",
+  "version": "2.0.56-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "7173ea0bec153905a6b800d002401b5c27fd3213"
+  "gitHead": "6afa204ec28032832e3867f805fbc5bcbbed4aab"
 }

package/src/hooks/UIProvider.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
+import type { PropsWithChildren } from 'react'
+
+interface Toast {
+  message: string
+  status: 'ERROR' | 'WARNING' | 'INFO'
+  title?: string
+  icon?: string
+}
+
+interface State {
+  /** Cart sidebar */
+  cart: boolean
+  /** Region modal */
+  modal: boolean
+  /** Menu slider */
+  navbar: boolean
+  /** Search page filter slider */
+  filter: boolean
+  toasts: Toast[]
+}
+
+type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
+
+type Action =
+  | {
+      type: 'open'
+      payload: UIElement
+    }
+  | {
+      type: 'close'
+      payload: UIElement
+    }
+  | {
+      type: 'pushToast'
+      payload: Toast
+    }
+  | {
+      type: 'popToast'
+    }
+
+const reducer = (state: State, action: Action): State => {
+  const { type } = action
+
+  switch (type) {
+    case 'open': {
+      const { payload } = action
+
+      document.body.classList.add('no-scroll')
+
+      return {
+        ...state,
+        [payload]: true,
+      }
+    }
+
+    case 'close': {
+      const { payload } = action
+
+      document.body.classList.remove('no-scroll')
+
+      return {
+        ...state,
+        [payload]: false,
+      }
+    }
+
+    case 'pushToast': {
+      return {
+        ...state,
+        toasts: [...state.toasts, action.payload],
+      }
+    }
+
+    case 'popToast': {
+      return {
+        ...state,
+        toasts: state.toasts.slice(1),
+      }
+    }
+
+    default:
+      throw new Error(`Action ${type} not implemented`)
+  }
+}
+
+const initializer = (): State => ({
+  cart: false,
+  modal: false,
+  navbar: false,
+  filter: false,
+  toasts: [],
+})
+
+interface Context extends State {
+  closeNavbar: () => void
+  openNavbar: () => void
+  closeFilter: () => void
+  openFilter: () => void
+  openCart: () => void
+  closeCart: () => void
+  openModal: () => void
+  closeModal: () => void
+  pushToast: (data: Toast) => void
+  popToast: () => void
+}
+
+const UIContext = createContext<Context | undefined>(undefined)
+
+function UIProvider({ children }: PropsWithChildren) {
+  const [ui, dispatch] = useReducer(reducer, undefined, initializer)
+
+  const callbacks = useMemo(
+    () => ({
+      openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
+      closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
+      openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
+      closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
+      openCart: () => dispatch({ type: 'open', payload: 'cart' }),
+      closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
+      openModal: () => dispatch({ type: 'open', payload: 'modal' }),
+      closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
+      pushToast: (toast: Toast) =>
+        dispatch({ type: 'pushToast', payload: toast }),
+      popToast: () => dispatch({ type: 'popToast' }),
+    }),
+    []
+  )
+
+  const value = useMemo(
+    () => ({
+      ...ui,
+      ...callbacks,
+    }),
+    [callbacks, ui]
+  )
+
+  return <UIContext.Provider value={value}>{children}</UIContext.Provider>
+}
+
+export function useUI() {
+  const context = useContext(UIContext)
+
+  if (context === undefined) {
+    throw new Error('Missing UI context on React tree')
+  }
+
+  return context
+}
+
+export default UIProvider

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as UIProvider, useUI } from './UIProvider'
+export { useFadeEffect } from './useFadeEffect'
+export { useTrapFocus } from './useTrapFocus'

package/src/hooks/useFadeEffect.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback, useEffect } from 'react'
+
+export const useFadeEffect = () => {
+  const [fade, setFade] = useState<'in' | 'out'>('out')
+  const fadeOut = useCallback(() => setFade('out'), [])
+  const fadeIn = useCallback(() => setFade('in'), [])
+
+  useEffect(() => {
+    fadeIn()
+
+    return () => {
+      fadeOut()
+    }
+  }, [fadeIn, fadeOut])
+
+  return {
+    fade,
+    fadeIn,
+    fadeOut,
+  }
+}

package/src/hooks/useTrapFocus.ts

@@ -0,0 +1,108 @@
+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
+ */
+export 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])
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 // Assets
 export * from './assets'
 
+// Hooks
+export * from './hooks'
+
 // Atoms
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
@@ -80,6 +83,8 @@ export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
+export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
+export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
 export {

package/src/molecules/Modal/Modal.tsx

@@ -0,0 +1,106 @@
+import type {
+  AriaAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+import React from 'react'
+import { createPortal } from 'react-dom'
+
+import { Overlay } from '../..'
+import { useFadeEffect, useUI } from '../../hooks'
+import type { ModalContentProps } from './ModalContent'
+import ModalContent from './ModalContent'
+
+export type ModalChildrenProps = {
+  fade: 'in' | 'out'
+  fadeOut: () => void
+  fadeIn: () => void
+}
+
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
+
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+  /**
+   * 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']
+  /**
+   * A boolean value that represents the state of the Modal
+   */
+  isOpen?: boolean
+  /**
+   * Event emitted when the modal is closed
+   */
+  onDismiss?: () => void
+  /**
+   * Children or function as a children
+   */
+  children: ModalChildrenFunction | ReactNode
+}
+
+/*
+ * 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 = ({
+  children,
+  testId = 'fs-modal',
+  isOpen = true,
+  onDismiss,
+  ...otherProps
+}: ModalProps) => {
+  const { closeModal } = useUI()
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
+
+  const handleBackdropClick = (event: MouseEvent) => {
+    if (event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  const handleBackdropKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  return isOpen
+    ? createPortal(
+        <Overlay
+          onClick={handleBackdropClick}
+          onKeyDown={handleBackdropKeyDown}
+        >
+          <ModalContent
+            onTransitionEnd={() => fade === 'out' && closeModal()}
+            data-fs-modal
+            data-fs-modal-state={fade}
+            testId={testId}
+            {...otherProps}
+          >
+            {typeof children === 'function'
+              ? children({ fade, fadeOut, fadeIn })
+              : children}
+          </ModalContent>
+        </Overlay>,
+        document.body
+      )
+    : null
+}
+
+export default Modal

package/src/molecules/Modal/ModalBody.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode, HTMLAttributes } from 'react'
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+const ModalBody = ({ children, ...otherProps }: ModalBodyProps) => (
+  <div data-fs-modal-body {...otherProps}>
+    {children}
+  </div>
+)
+
+export default ModalBody

package/src/molecules/Modal/ModalContent.tsx

@@ -0,0 +1,90 @@
+import type {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  MouseEvent,
+  RefObject,
+} from 'react'
+import React, { useRef } from 'react'
+
+import { useTrapFocus } from '../../hooks'
+
+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/molecules/Modal/ModalHeader.tsx

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react'
+import { X } from '../../assets'
+import IconButton, { IconButtonProps } from '../IconButton'
+
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Title for header modal.
+   */
+  title: string
+
+  /**
+   * Description for header modal.
+   */
+  description?: string
+
+  /**
+   * Props for the Close Button component.
+   */
+  closeButtonProps?: Partial<Omit<IconButtonProps, 'onClick'>>
+
+  onClose?: () => void
+}
+
+const ModalHeader = ({
+  onClose,
+  title,
+  closeButtonProps = {},
+  description,
+}: ModalHeaderProps) => {
+  return (
+    <header data-fs-modal-header>
+      {onClose && (
+        <IconButton
+          onClick={() => onClose?.()}
+          data-fs-modal-header-close-button
+          icon={<X />}
+          aria-label="Close modal"
+          {...closeButtonProps}
+        />
+      )}
+      <p data-fs-modal-header-title>{title}</p>
+      {description && <p data-fs-modal-header-description>{description}</p>}
+    </header>
+  )
+}
+
+export default ModalHeader

package/src/molecules/Modal/index.tsx

@@ -0,0 +1,5 @@
+export { default } from './Modal'
+export { default as ModalHeader } from './ModalHeader'
+export { default as ModalBody } from './ModalBody'
+export type { ModalProps } from './Modal'
+export type { ModalHeaderProps } from './ModalHeader'