@gympass/yoga 7.118.0 → 7.119.0

package/cjs/Dialog/web/Dialog.js

@@ -1,9 +1,7 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -21,7 +19,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -64,11 +61,13 @@ module.exports = __toCommonJS(Dialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_react_focus_lock = __toESM(require("react-focus-lock"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import_hooks = require("../../hooks");
 var import__ = require("../..");
+var import_utils = require("./utils");
 const StyledDialog = (0, import_styled_components.default)(import__.Card)`
   ${({
   onClose,
@@ -136,10 +135,33 @@ const CloseButton = (0, import_styled_components.default)(import__.Button.Icon)`
 `;
 const Dialog = import_react.default.forwardRef(
   (_a, forwardedRef) => {
-    var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
+    var _b = _a, {
+      isOpen,
+      hideCloseButton,
+      children,
+      dialogId,
+      onClose,
+      zIndex,
+      closeLabel,
+      className
+    } = _b, props = __objRest(_b, [
+      "isOpen",
+      "hideCloseButton",
+      "children",
+      "dialogId",
+      "onClose",
+      "zIndex",
+      "closeLabel",
+      "className"
+    ]);
     const dialogRef = (0, import_hooks.useCombinedRefs)(forwardedRef);
     const dialogElement = (0, import_hooks.usePortal)(dialogId != null ? dialogId : "dialog");
     const isCloseButtonVisible = onClose && !hideCloseButton;
+    const lockProps = __spreadValues({
+      role: "dialog",
+      "aria-modal": true,
+      onClose
+    }, props);
     const closeDialog = (0, import_react.useCallback)(
       (e) => {
         if (dialogRef.current === e.target && isOpen && onClose) {
@@ -170,18 +192,30 @@ const Dialog = import_react.default.forwardRef(
           onClose,
           ref: dialogRef,
           zIndex,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
-            isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              CloseButton,
-              {
-                icon: import_yoga_icons.Close,
-                inverted: true,
-                secondary: true,
-                onClick: onClose
-              }
-            ) }),
-            children
-          ] }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react_focus_lock.default,
+            {
+              as: StyledDialog,
+              lockProps,
+              returnFocus: true,
+              disabled: !isOpen,
+              className,
+              onActivation: import_utils.focusOnFirstProgrammaticFocusableElement,
+              children: [
+                isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  CloseButton,
+                  {
+                    "aria-label": closeLabel,
+                    icon: import_yoga_icons.Close,
+                    inverted: true,
+                    secondary: true,
+                    onClick: onClose
+                  }
+                ) }),
+                children
+              ]
+            }
+          )
         }
       ),
       dialogElement
@@ -197,6 +231,8 @@ Dialog.propTypes = {
   hideCloseButton: import_prop_types.bool,
   /** Function to close the dialog. */
   onClose: import_prop_types.func,
+  closeLabel: import_prop_types.string,
+  className: import_prop_types.string,
   zIndex: import_prop_types.number,
   children: import_prop_types.node.isRequired
 };
@@ -204,6 +240,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: void 0,
+  closeLabel: void 0,
+  className: void 0,
   zIndex: 3,
   dialogId: void 0
 };

package/cjs/Dialog/web/Dialog.test.js

@@ -66,9 +66,9 @@ describe("<Dialog />", () => {
   it("should render with close button", () => {
     const onCloseMock = jest.fn();
     (0, import_react2.render)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, onClose: onCloseMock, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Title" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, onClose: onCloseMock, closeLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Title" }) }) })
     );
-    const button = import_react2.screen.getByRole("button");
+    const button = import_react2.screen.getByRole("button", { name: "Close" });
     import_react2.fireEvent.click(button);
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
@@ -89,4 +89,10 @@ describe("<Dialog />", () => {
     expect(import_react2.screen.getByText("Title")).toBeInTheDocument();
     expect(import_react2.screen.getByText("Second Title")).toBeInTheDocument();
   });
+  it("should focus on the title when dialog is opened", () => {
+    (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Add e-mail" }) }) })
+    );
+    expect(document.activeElement).toHaveTextContent("Add e-mail");
+  });
 });

package/cjs/Dialog/web/Header.js

@@ -48,6 +48,6 @@ module.exports = __toCommonJS(Header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_Text = __toESM(require("../../Text"));
-const Header = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, __spreadValues({ bold: true, as: "header", ta: "center", mb: "large" }, props));
+const Header = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, __spreadValues({ bold: true, as: "h2", ta: "center", mb: "large", tabIndex: -1 }, props));
 Header.displayName = "Dialog.Header";
 var Header_default = Header;

package/cjs/Dialog/web/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  focusOnFirstProgrammaticFocusableElement: () => focusOnFirstProgrammaticFocusableElement
+});
+module.exports = __toCommonJS(utils_exports);
+function focusOnFirstProgrammaticFocusableElement(container) {
+  const element = container.querySelector('[tabindex="-1"]');
+  element == null ? void 0 : element.focus();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  focusOnFirstProgrammaticFocusableElement
+});

package/esm/Dialog/web/Dialog.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -32,11 +29,13 @@ var __objRest = (source, exclude) => {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
+import FocusLock from "react-focus-lock";
 import styled, { css } from "styled-components";
 import { func, bool, node, number, string } from "prop-types";
 import { Close } from "@gympass/yoga-icons";
 import { usePortal, useCombinedRefs } from "../../hooks";
 import { Button, Card, Box } from "../..";
+import { focusOnFirstProgrammaticFocusableElement } from "./utils";
 const StyledDialog = styled(Card)`
   ${({
   onClose,
@@ -104,10 +103,33 @@ const CloseButton = styled(Button.Icon)`
 `;
 const Dialog = React.forwardRef(
   (_a, forwardedRef) => {
-    var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
+    var _b = _a, {
+      isOpen,
+      hideCloseButton,
+      children,
+      dialogId,
+      onClose,
+      zIndex,
+      closeLabel,
+      className
+    } = _b, props = __objRest(_b, [
+      "isOpen",
+      "hideCloseButton",
+      "children",
+      "dialogId",
+      "onClose",
+      "zIndex",
+      "closeLabel",
+      "className"
+    ]);
     const dialogRef = useCombinedRefs(forwardedRef);
     const dialogElement = usePortal(dialogId != null ? dialogId : "dialog");
     const isCloseButtonVisible = onClose && !hideCloseButton;
+    const lockProps = __spreadValues({
+      role: "dialog",
+      "aria-modal": true,
+      onClose
+    }, props);
     const closeDialog = useCallback(
       (e) => {
         if (dialogRef.current === e.target && isOpen && onClose) {
@@ -138,18 +160,30 @@ const Dialog = React.forwardRef(
           onClose,
           ref: dialogRef,
           zIndex,
-          children: /* @__PURE__ */ jsxs(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
-            isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
-              CloseButton,
-              {
-                icon: Close,
-                inverted: true,
-                secondary: true,
-                onClick: onClose
-              }
-            ) }),
-            children
-          ] }))
+          children: /* @__PURE__ */ jsxs(
+            FocusLock,
+            {
+              as: StyledDialog,
+              lockProps,
+              returnFocus: true,
+              disabled: !isOpen,
+              className,
+              onActivation: focusOnFirstProgrammaticFocusableElement,
+              children: [
+                isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
+                  CloseButton,
+                  {
+                    "aria-label": closeLabel,
+                    icon: Close,
+                    inverted: true,
+                    secondary: true,
+                    onClick: onClose
+                  }
+                ) }),
+                children
+              ]
+            }
+          )
         }
       ),
       dialogElement
@@ -165,6 +199,8 @@ Dialog.propTypes = {
   hideCloseButton: bool,
   /** Function to close the dialog. */
   onClose: func,
+  closeLabel: string,
+  className: string,
   zIndex: number,
   children: node.isRequired
 };
@@ -172,6 +208,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: void 0,
+  closeLabel: void 0,
+  className: void 0,
   zIndex: 3,
   dialogId: void 0
 };

package/esm/Dialog/web/Dialog.test.js

@@ -43,9 +43,9 @@ describe("<Dialog />", () => {
   it("should render with close button", () => {
     const onCloseMock = jest.fn();
     render(
-      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, onClose: onCloseMock, children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Title" }) }) })
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, onClose: onCloseMock, closeLabel: "Close", children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Title" }) }) })
     );
-    const button = screen.getByRole("button");
+    const button = screen.getByRole("button", { name: "Close" });
     fireEvent.click(button);
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
@@ -66,4 +66,10 @@ describe("<Dialog />", () => {
     expect(screen.getByText("Title")).toBeInTheDocument();
     expect(screen.getByText("Second Title")).toBeInTheDocument();
   });
+  it("should focus on the title when dialog is opened", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Add e-mail" }) }) })
+    );
+    expect(document.activeElement).toHaveTextContent("Add e-mail");
+  });
 });

package/esm/Dialog/web/Header.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import Text from "../../Text";
-const Header = (props) => /* @__PURE__ */ jsx(Text.H4, __spreadValues({ bold: true, as: "header", ta: "center", mb: "large" }, props));
+const Header = (props) => /* @__PURE__ */ jsx(Text.H4, __spreadValues({ bold: true, as: "h2", ta: "center", mb: "large", tabIndex: -1 }, props));
 Header.displayName = "Dialog.Header";
 var Header_default = Header;
 export {

package/esm/Dialog/web/utils.js

@@ -0,0 +1,7 @@
+function focusOnFirstProgrammaticFocusableElement(container) {
+  const element = container.querySelector('[tabindex="-1"]');
+  element == null ? void 0 : element.focus();
+}
+export {
+  focusOnFirstProgrammaticFocusableElement
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.118.0",
+  "version": "7.119.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -41,6 +41,7 @@
     "prop-types": "^15.7.2",
     "proxy-polyfill": "^0.3.1",
     "rc-slider": "^8.7.1",
+    "react-focus-lock": "^2.13.2",
     "react-google-font-loader": "^1.1.0",
     "react-phone-input-2": "^2.15.1"
   },
@@ -57,7 +58,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "a8f23e4f87e4e60758e10a35ca6afd27c177e60c",
+  "gitHead": "14c7d64e2380f7edaf06dcbe5953b516ee6edea5",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"