@lets-events/react 12.10.8 → 12.10.10

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.10.8 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.62 KB
-CJS ⚡️ Build success in 301ms
-ESM dist/index.mjs 415.97 KB
-ESM ⚡️ Build success in 301ms
+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 6076ms
-DTS dist/index.d.mts 405.30 KB
-DTS dist/index.d.ts  405.30 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,17 @@
 # @lets-events/react
 
+## 12.10.10
+
+### Patch Changes
+
+- Drawer accessibility
+
+## 12.10.9
+
+### Patch Changes
+
+- RadioGroupFormFieldProp
+
 ## 12.10.8
 
 ### 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;
@@ -15230,8 +15232,9 @@ type RadioGroupFormFieldProps = {
     color?: "blue" | "success" | "error";
     fontWeight?: "regular" | "medium" | "semibold" | "bold";
     disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
 };
-declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, orientation, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type Option$1 = {
     label: string;

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;
@@ -15230,8 +15232,9 @@ type RadioGroupFormFieldProps = {
     color?: "blue" | "success" | "error";
     fontWeight?: "regular" | "medium" | "semibold" | "bold";
     disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
 };
-declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, orientation, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type Option$1 = {
     label: string;

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
@@ -11727,7 +11735,8 @@ var RadioGroupFormField = ({
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   color = "blue",
   fontWeight = "regular",
-  disabled = false
+  disabled = false,
+  orientation = "vertical"
 }) => {
   const {
     control,
@@ -11764,7 +11773,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Flex, { direction: "column", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadioItem, { value: option.value, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Flex, { direction: orientation === "horizontal" ? "row" : "column", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadioItem, { value: option.value, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
           }
         )
       }

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
@@ -11619,7 +11627,8 @@ var RadioGroupFormField = ({
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   color = "blue",
   fontWeight = "regular",
-  disabled = false
+  disabled = false,
+  orientation = "vertical"
 }) => {
   const {
     control,
@@ -11656,7 +11665,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: /* @__PURE__ */ jsx49(Flex, { direction: "column", children: options.map((option) => /* @__PURE__ */ jsx49(RadioItem, { value: option.value, children: /* @__PURE__ */ jsx49(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
+            children: /* @__PURE__ */ jsx49(Flex, { direction: orientation === "horizontal" ? "row" : "column", children: options.map((option) => /* @__PURE__ */ jsx49(RadioItem, { value: option.value, children: /* @__PURE__ */ jsx49(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
           }
         )
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.10.8",
+  "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>

package/src/components/FormFields/RadioGroupFormField.tsx

@@ -21,6 +21,7 @@ export type RadioGroupFormFieldProps = {
   color?: "blue" | "success" | "error";
   fontWeight?: "regular" | "medium" | "semibold" | "bold";
   disabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
 };
 
 export const RadioGroupFormField = ({
@@ -33,6 +34,7 @@ export const RadioGroupFormField = ({
   color = "blue",
   fontWeight = "regular",
   disabled = false,
+  orientation = 'vertical',
 }: RadioGroupFormFieldProps) => {
   const {
     control,
@@ -69,7 +71,7 @@ export const RadioGroupFormField = ({
             fontWeight={fontWeight}
             disabled={disabled}
           >
-            <Flex direction="column">
+            <Flex direction={orientation === 'horizontal' ? 'row' : 'column'}>
               {options.map((option) => (
                 <RadioItem key={option.value} value={option.value}>
                   <Text typography={"labelSmall"}>{option.label}</Text>