@faststore/core 2.0.87-alpha.0 → 2.0.89-alpha.0

package/.next/server/chunks/98.js

@@ -0,0 +1,266 @@
+"use strict";
+exports.id = 98;
+exports.ids = [98];
+exports.modules = {
+
+/***/ 2543:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+// Icon from Phosphor Icons
+const X = () => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { width: "256", height: "256", fill: "none" }),
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("line", { x1: "200", y1: "56", x2: "56", y2: "200", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("line", { x1: "200", y1: "200", x2: "56", y2: "56", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (X);
+//# sourceMappingURL=X.js.map
+
+/***/ }),
+
+/***/ 6074:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "b": () => (/* binding */ useFadeEffect)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+const useFadeEffect = () => {
+    const [fade, setFade] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('out');
+    const fadeOut = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => setFade('out'), []);
+    const fadeIn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => setFade('in'), []);
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        fadeIn();
+        return () => {
+            fadeOut();
+        };
+    }, [fadeIn, fadeOut]);
+    return {
+        fade,
+        fadeIn,
+        fadeOut,
+    };
+};
+//# sourceMappingURL=useFadeEffect.js.map
+
+/***/ }),
+
+/***/ 9600:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ Modal_Modal)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(6405);
+;// CONCATENATED MODULE: ../components/dist/atoms/Overlay/Overlay.js
+
+const Overlay = (0,external_react_.forwardRef)(function Overlay({ testId = 'fs-overlay', ...otherProps }, ref) {
+    return (external_react_default().createElement("div", { ref: ref, "data-fs-overlay": true, role: "presentation", "data-testid": testId, ...otherProps }));
+});
+/* harmony default export */ const Overlay_Overlay = (Overlay);
+//# sourceMappingURL=Overlay.js.map
+// EXTERNAL MODULE: ../components/dist/hooks/UIProvider.js
+var UIProvider = __webpack_require__(395);
+// EXTERNAL MODULE: ../components/dist/hooks/useFadeEffect.js
+var useFadeEffect = __webpack_require__(6074);
+// EXTERNAL MODULE: external "tabbable"
+var external_tabbable_ = __webpack_require__(3823);
+;// CONCATENATED MODULE: ../components/dist/hooks/useTrapFocus.js
+
+
+/*
+ * 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 = (0,external_react_.useRef)();
+    const nodeToRestoreRef = (0,external_react_.useRef)(document.hasFocus() ? document.activeElement : null);
+    // Focus back on the element that was focused when useTrapFocus is triggered.
+    (0,external_react_.useEffect)(() => {
+        const nodeToRestore = nodeToRestoreRef.current;
+        return () => {
+            nodeToRestore?.focus();
+        };
+    }, [nodeToRestoreRef]);
+    // Set focus on first tabbable element
+    (0,external_react_.useEffect)(() => {
+        if (!trapFocusRef.current) {
+            return;
+        }
+        if (!tabbableNodesRef.current) {
+            tabbableNodesRef.current = (0,external_tabbable_.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
+    (0,external_react_.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 = (0,external_tabbable_.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
+;// CONCATENATED MODULE: ../components/dist/molecules/Modal/ModalContent.js
+
+
+const ModalContentPure = ({ beforeElementRef, trapFocusRef, afterElementRef, testId = 'store-modal-content', children, ...otherProps }) => {
+    return (external_react_default().createElement((external_react_default()).Fragment, null,
+        external_react_default().createElement("div", { ref: beforeElementRef, "data-testid": "beforeElement", tabIndex: 0, "aria-hidden": "true" }),
+        external_react_default().createElement("div", { "data-fs-modal-content": true, "data-testid": testId, ref: trapFocusRef, "aria-modal": "true", role: "dialog", tabIndex: -1, ...otherProps }, children),
+        external_react_default().createElement("div", { ref: afterElementRef, "data-testid": "afterElement", tabIndex: 0, "aria-hidden": "true" })));
+};
+const ModalContent = ({ children, ...otherProps }) => {
+    const trapFocusRef = (0,external_react_.useRef)(null);
+    const beforeElementRef = (0,external_react_.useRef)(null);
+    const afterElementRef = (0,external_react_.useRef)(null);
+    useTrapFocus({
+        beforeElementRef,
+        trapFocusRef,
+        afterElementRef,
+    });
+    return (external_react_default().createElement(ModalContentPure, { ...otherProps, trapFocusRef: trapFocusRef, beforeElementRef: beforeElementRef, afterElementRef: afterElementRef, onClick: (event) => {
+            event.stopPropagation();
+        } }, children));
+};
+/* harmony default export */ const Modal_ModalContent = (ModalContent);
+//# sourceMappingURL=ModalContent.js.map
+;// CONCATENATED MODULE: ../components/dist/molecules/Modal/Modal.js
+
+
+
+
+
+/*
+ * 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 } = (0,UIProvider/* useUI */.l)();
+    const { fade, fadeOut, fadeIn } = (0,useFadeEffect/* useFadeEffect */.b)();
+    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
+        ? (0,external_react_dom_.createPortal)(external_react_default().createElement(Overlay_Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
+            external_react_default().createElement(Modal_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;
+};
+/* harmony default export */ const Modal_Modal = (Modal);
+//# sourceMappingURL=Modal.js.map
+
+/***/ }),
+
+/***/ 1021:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9600);
+
+
+function SlideOver({ isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, onDismiss, testId = 'fs-slide-over', ...otherProps }) {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, ...otherProps }, children));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SlideOver);
+//# sourceMappingURL=SlideOver.js.map
+
+/***/ }),
+
+/***/ 9648:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2543);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2765);
+
+
+
+const SlideOverHeader = ({ onClose, children, closeBtnProps = {}, }) => {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("header", { "data-fs-slide-over-header": true },
+        children,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, { "data-fs-slide-over-header-icon": true, "aria-label": "Close", icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_assets__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, null), onClick: onClose, ...closeBtnProps })));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SlideOverHeader);
+//# sourceMappingURL=SlideOverHeader.js.map
+
+/***/ })
+
+};
+;