@lets-events/react 12.10.9 → 12.10.10

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.10.9 build
+> @lets-events/react@12.10.10 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 431.69 KB
-CJS ⚡️ Build success in 285ms
-ESM dist/index.mjs 416.04 KB
-ESM ⚡️ Build success in 286ms
+ESM dist/index.mjs 416.44 KB
+ESM ⚡️ Build success in 505ms
+CJS dist/index.js 432.14 KB
+CJS ⚡️ Build success in 506ms
 DTS Build start
-DTS ⚡️ Build success in 6361ms
-DTS dist/index.d.mts 405.36 KB
-DTS dist/index.d.ts  405.36 KB
+DTS ⚡️ Build success in 9886ms
+DTS dist/index.d.mts 405.45 KB
+DTS dist/index.d.ts  405.45 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.10.10
+
+### Patch Changes
+
+- Drawer accessibility
+
 ## 12.10.9
 
 ### Patch Changes

package/dist/index.d.mts

@@ -5134,6 +5134,7 @@ declare const DrawerOverlayStyled: _stitches_react_types_styled_component.Styled
 type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     isOpen: boolean;
     onClose: () => void;
+    closeAriaLabel?: string;
     width?: string;
     backgroundColor?: keyof Colors;
     title: string;
@@ -5143,8 +5144,9 @@ type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     zIndex?: number;
     clickOutsideAvailable?: boolean;
     actionButton?: ReactNode;
+    goBackAriaLabel?: string;
 };
-declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, clickOutsideAvailable, actionButton, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ isOpen, onClose, closeAriaLabel, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, clickOutsideAvailable, actionButton, goBackAriaLabel, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;

package/dist/index.d.ts

@@ -5134,6 +5134,7 @@ declare const DrawerOverlayStyled: _stitches_react_types_styled_component.Styled
 type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     isOpen: boolean;
     onClose: () => void;
+    closeAriaLabel?: string;
     width?: string;
     backgroundColor?: keyof Colors;
     title: string;
@@ -5143,8 +5144,9 @@ type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
     zIndex?: number;
     clickOutsideAvailable?: boolean;
     actionButton?: ReactNode;
+    goBackAriaLabel?: string;
 };
-declare function Drawer({ isOpen, onClose, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, clickOutsideAvailable, actionButton, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ isOpen, onClose, closeAriaLabel, width, backgroundColor, title, children, goBackIcon, goBackAction, zIndex, clickOutsideAvailable, actionButton, goBackAriaLabel, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {
     expand?: boolean | "true" | undefined;

package/dist/index.js

@@ -8763,6 +8763,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function Drawer({
   isOpen,
   onClose,
+  closeAriaLabel = "Fechar",
   width,
   backgroundColor,
   title,
@@ -8771,7 +8772,8 @@ function Drawer({
   goBackAction,
   zIndex = 1e3,
   clickOutsideAvailable = true,
-  actionButton = null
+  actionButton = null,
+  goBackAriaLabel = "Voltar"
 }) {
   (0, import_react10.useEffect)(() => {
     if (isOpen) {
@@ -8820,12 +8822,18 @@ function Drawer({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DrawerHeaderDiv, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { gap: 8, align: "center", children: [
-                  goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                  goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(GoBackButtonStyled, { type: "button", onClick: goBackAction, "aria-label": goBackAriaLabel, children: [
+                    goBackIcon,
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: goBackAriaLabel })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DrawerHeaderTitle, { children: title })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { gap: 8, children: [
                   actionButton && actionButton,
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DrawerHeaderCloseButton, { onClick: onClose, "aria-label": closeAriaLabel, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: closeAriaLabel })
+                  ] })
                 ] })
               ] }),
               isOpen ? children : null

package/dist/index.mjs

@@ -8646,6 +8646,7 @@ import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function Drawer({
   isOpen,
   onClose,
+  closeAriaLabel = "Fechar",
   width,
   backgroundColor,
   title,
@@ -8654,7 +8655,8 @@ function Drawer({
   goBackAction,
   zIndex = 1e3,
   clickOutsideAvailable = true,
-  actionButton = null
+  actionButton = null,
+  goBackAriaLabel = "Voltar"
 }) {
   useEffect5(() => {
     if (isOpen) {
@@ -8703,12 +8705,18 @@ function Drawer({
             children: [
               /* @__PURE__ */ jsxs9(DrawerHeaderDiv, { children: [
                 /* @__PURE__ */ jsxs9(Flex, { gap: 8, align: "center", children: [
-                  goBackIcon && goBackIcon && /* @__PURE__ */ jsx17(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                  goBackIcon && /* @__PURE__ */ jsxs9(GoBackButtonStyled, { type: "button", onClick: goBackAction, "aria-label": goBackAriaLabel, children: [
+                    goBackIcon,
+                    /* @__PURE__ */ jsx17("span", { style: { display: "none" }, children: goBackAriaLabel })
+                  ] }),
                   /* @__PURE__ */ jsx17(DrawerHeaderTitle, { children: title })
                 ] }),
                 /* @__PURE__ */ jsxs9(Flex, { gap: 8, children: [
                   actionButton && actionButton,
-                  /* @__PURE__ */ jsx17(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx17(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+                  /* @__PURE__ */ jsxs9(DrawerHeaderCloseButton, { onClick: onClose, "aria-label": closeAriaLabel, children: [
+                    /* @__PURE__ */ jsx17(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }),
+                    /* @__PURE__ */ jsx17("span", { style: { display: "none" }, children: closeAriaLabel })
+                  ] })
                 ] })
               ] }),
               isOpen ? children : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.10.9",
+  "version": "12.10.10",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Drawer/index.tsx

@@ -10,12 +10,12 @@ import {
   GoBackButtonStyled,
   DrawerWrapper,
 } from "./styledComponents";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
 import { Flex } from "../Flex";
 
 export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
   isOpen: boolean;
   onClose: () => void;
+  closeAriaLabel?: string;
   width?: string;
   backgroundColor?: keyof Colors;
   title: string;
@@ -25,11 +25,13 @@ export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
   zIndex?: number;
   clickOutsideAvailable?: boolean;
   actionButton?: ReactNode;
+  goBackAriaLabel?: string;
 };
 
 export function Drawer({
   isOpen,
   onClose,
+  closeAriaLabel = "Fechar",
   width,
   backgroundColor,
   title,
@@ -39,6 +41,7 @@ export function Drawer({
   zIndex = 1000,
   clickOutsideAvailable = true,
   actionButton = null,
+  goBackAriaLabel = "Voltar",
 }: DrawerProps) {
   useEffect(() => {
     if (isOpen) {
@@ -86,17 +89,19 @@ export function Drawer({
         >
           <DrawerHeaderDiv>
             <Flex gap={8} align="center">
-              {goBackIcon && goBackIcon && (
-                <GoBackButtonStyled type="button" onClick={goBackAction}>
+              {goBackIcon && (
+                <GoBackButtonStyled type="button" onClick={goBackAction} aria-label={goBackAriaLabel}>
                   {goBackIcon}
+                  <span style={{ display: "none" }}>{goBackAriaLabel}</span>
                 </GoBackButtonStyled>
               )}
               <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
             </Flex>
             <Flex gap={8}>
               {actionButton && actionButton}
-              <DrawerHeaderCloseButton onClick={onClose}>
+              <DrawerHeaderCloseButton onClick={onClose} aria-label={closeAriaLabel}>
                 <Icon size={"xl"} color="$dark600" name="xmark" />
+                <span style={{ display: "none" }}>{closeAriaLabel}</span>
               </DrawerHeaderCloseButton>
             </Flex>
           </DrawerHeaderDiv>