@lets-events/react 11.6.3 → 11.6.5

package/dist/index.mjs

@@ -3293,21 +3293,24 @@ function FilterItem(_a) {
 }
 
 // src/components/Dropdown.tsx
-import { useState } from "react";
+import React2, {
+  useState,
+  useRef,
+  useEffect
+} from "react";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { Theme as Theme2, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+var DropdownMenuItemStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   padding: "$8 $16",
+  cursor: "pointer",
   "&:hover, &:focus": {
     backgroundColor: "$dark100",
     border: "none",
-    outline: "none",
-    cursor: "pointer"
+    outline: "none"
   },
   variants: {
     typography: typographyLabelValues,
@@ -3320,16 +3323,18 @@ var DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
   }
 });
 var DropdownMenuStyled = styled("div", {
+  boxSizing: "border-box",
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   cursor: "pointer",
   border: "1px solid $dark300",
   borderRadius: "$xs",
-  padding: "$8 $12",
-  width: "100%",
+  maxWidth: "100%",
   display: "flex",
+  position: "relative",
   button: {
+    boxSizing: "border-box",
     fontFamily: "$default",
     color: "$dark600",
     letterSpacing: "0px",
@@ -3340,6 +3345,7 @@ var DropdownMenuStyled = styled("div", {
     display: "flex",
     alignItems: "center",
     gap: "$8",
+    padding: "$8 $12",
     cursor: "pointer",
     svg: {
       marginLeft: "auto"
@@ -3388,17 +3394,17 @@ var DropdownMenuStyled = styled("div", {
     }
   }
 });
-var DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
+var DropdownMenuContentStyled = styled("div", {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  width: "100%",
   background: "white",
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "100%",
-  minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
-  height: "100%",
-  position: "relative",
   overflow: "auto",
   zIndex: 9999999999
 });
@@ -3407,63 +3413,144 @@ function DropdownMenu2(_a) {
     children,
     placeholder,
     typography,
-    color,
-    fontWeight
+    color = "default",
+    fontWeight,
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen = false
   } = _b, props = __objRest(_b, [
     "children",
     "placeholder",
     "typography",
     "color",
-    "fontWeight"
+    "fontWeight",
+    "open",
+    "onOpenChange",
+    "defaultOpen"
   ]);
-  const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsx11(Theme2, { children: /* @__PURE__ */ jsx11(DropdownMenuRadix.Root, __spreadProps(__spreadValues({ open: isOpen, onOpenChange: setIsOpen }, props), { children: /* @__PURE__ */ jsxs3(
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const dropdownRef = useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  };
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        handleClose();
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs3(
     DropdownMenuStyled,
-    {
+    __spreadProps(__spreadValues({
+      ref: dropdownRef,
       typography,
       fontWeight,
-      color,
+      color
+    }, props), {
       children: [
-        /* @__PURE__ */ jsx11(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Filtrar", children: [
-          /* @__PURE__ */ jsx11("span", { children: placeholder || "Filtrar" }),
-          /* @__PURE__ */ jsx11(
-            FontAwesomeIcon2,
-            {
-              icon: isOpen ? faChevronUp : faChevronDown,
-              size: "sm",
-              color: colors.dark600
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx11(
-          DropdownMenuContentStyled,
+        /* @__PURE__ */ jsxs3(
+          "button",
           {
-            container: document.body,
-            avoidCollisions: false,
-            align: "start",
-            alignOffset: -14,
-            children: /* @__PURE__ */ jsx11(DropdownMenuRadix.Group, { children })
+            "aria-label": placeholder || "Filtrar",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            onClick: handleToggle,
+            type: "button",
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleToggle();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx11("span", { children: placeholder || "Filtrar" }),
+              /* @__PURE__ */ jsx11(
+                FontAwesomeIcon2,
+                {
+                  icon: isOpen ? faChevronUp : faChevronDown,
+                  size: "sm",
+                  color: colors.dark600
+                }
+              )
+            ]
           }
-        )
+        ),
+        isOpen && /* @__PURE__ */ jsx11(DropdownMenuContentStyled, { role: "listbox", children: /* @__PURE__ */ jsx11(DropdownMenuProvider, { onItemSelect: handleClose, children }) })
       ]
-    }
-  ) })) });
+    })
+  );
+}
+var DropdownMenuContext = React2.createContext(null);
+function DropdownMenuProvider({
+  children,
+  onItemSelect
+}) {
+  return /* @__PURE__ */ jsx11(DropdownMenuContext.Provider, { value: { onItemSelect }, children });
 }
 function DropdownMenuItem(_a) {
   var _b = _a, {
     children,
     typography,
-    fontWeight
+    fontWeight,
+    value,
+    onSelect,
+    onClick
   } = _b, props = __objRest(_b, [
     "children",
     "typography",
-    "fontWeight"
+    "fontWeight",
+    "value",
+    "onSelect",
+    "onClick"
   ]);
+  const context = React2.useContext(DropdownMenuContext);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    onSelect == null ? void 0 : onSelect(value);
+    context == null ? void 0 : context.onItemSelect();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect == null ? void 0 : onSelect(value);
+      context == null ? void 0 : context.onItemSelect();
+    }
+  };
   return /* @__PURE__ */ jsx11(
     DropdownMenuItemStyled,
     __spreadProps(__spreadValues({
       typography,
-      fontWeight
+      fontWeight,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "option"
     }, props), {
       children
     })
@@ -3471,7 +3558,7 @@ function DropdownMenuItem(_a) {
 }
 
 // src/components/Badge.tsx
-import React2 from "react";
+import React3 from "react";
 import { Badge as BadgeRadix } from "@radix-ui/themes";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var BadgeStyled = styled(BadgeRadix, {
@@ -3575,9 +3662,9 @@ var BadgeStyled = styled(BadgeRadix, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ jsx12(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React2.Children.map(children, (child) => {
-    if (React2.isValidElement(child)) {
-      return React2.cloneElement(child, { size: props.size });
+  return /* @__PURE__ */ jsx12(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React3.Children.map(children, (child) => {
+    if (React3.isValidElement(child)) {
+      return React3.cloneElement(child, { size: props.size });
     }
     return child;
   }) }));
@@ -3699,12 +3786,12 @@ function MenuDropdown({ children }) {
 }
 
 // src/components/Calendar/index.tsx
-import { useRef, useEffect as useEffect2, useState as useState3 } from "react";
+import { useRef as useRef2, useEffect as useEffect3, useState as useState3 } from "react";
 
 // src/hooks/useOnClickOutside.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useOnClickOutside(ref, handler) {
-  useEffect(() => {
+  useEffect2(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -7843,13 +7930,13 @@ function Calendar(_a) {
   ]);
   const [inputValue, setInputValue] = useState3("");
   const [showContainer, setShowCalendar] = useState3(false);
-  const dropdownRef = useRef(null);
+  const dropdownRef = useRef2(null);
   useOnClickOutside(dropdownRef, () => {
     setShowCalendar(false);
   });
   const today = /* @__PURE__ */ new Date();
   const maxDate = addYears(today, 20);
-  useEffect2(() => {
+  useEffect3(() => {
     if (selected) {
       setInputValue(format2(selected, "dd/MM/yyyy"));
     } else {
@@ -7999,7 +8086,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8108,7 +8195,7 @@ function TimePicker({
   const [rawHours, setRawHours] = useState4("00");
   const [rawMinutes, setRawMinutes] = useState4("00");
   const [isOpen, setIsOpen] = useState4(false);
-  const dropdownRef = useRef2(null);
+  const dropdownRef = useRef3(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
   const handleIncrement = useCallback(
     (type) => {
@@ -8307,7 +8394,7 @@ function TimePicker({
 }
 
 // src/components/Alert.tsx
-import { Theme as Theme3, AlertDialog } from "@radix-ui/themes";
+import { Theme as Theme2, AlertDialog } from "@radix-ui/themes";
 import { Fragment, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var AlertDialogSimpleStyled = styled(AlertDialog.Content, {
   fontFamily: "$default",
@@ -8423,14 +8510,14 @@ function Alert(_a) {
     "simpleAlert"
   ]);
   return /* @__PURE__ */ jsxs9(Fragment, { children: [
-    simpleAlert && /* @__PURE__ */ jsx18(Theme3, { children: /* @__PURE__ */ jsxs9(AlertDialog.Root, { children: [
+    simpleAlert && /* @__PURE__ */ jsx18(Theme2, { children: /* @__PURE__ */ jsxs9(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx18(AlertDialog.Trigger, { children: trigger }),
       /* @__PURE__ */ jsx18(Fragment, { children: /* @__PURE__ */ jsxs9(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
         /* @__PURE__ */ jsx18(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
         simpleAlert.cancel && /* @__PURE__ */ jsx18(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx18(Button, { variant: "text", children: /* @__PURE__ */ jsx18(Icon_default, { name: "close" }) }) })
       ] })) })
     ] }) }),
-    completAlert && /* @__PURE__ */ jsx18(Theme3, { children: /* @__PURE__ */ jsxs9(AlertDialog.Root, { children: [
+    completAlert && /* @__PURE__ */ jsx18(Theme2, { children: /* @__PURE__ */ jsxs9(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx18(AlertDialog.Trigger, { children: trigger }),
       /* @__PURE__ */ jsxs9(AlertDialogCompleteStyled, { children: [
         /* @__PURE__ */ jsxs9(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
@@ -8646,7 +8733,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-import React5 from "react";
+import React6 from "react";
 import { Box as Box2, Tabs as StepRadix } from "@radix-ui/themes";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var StepStyled = styled("div", {
@@ -8762,9 +8849,9 @@ function StepList(_a) {
     "children",
     "currentStep"
   ]);
-  return /* @__PURE__ */ jsx20(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React5.Children.map(children, (child) => {
-    if (React5.isValidElement(child) && child.type === StepTrigger) {
-      return React5.cloneElement(child, { currentStep });
+  return /* @__PURE__ */ jsx20(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React6.Children.map(children, (child) => {
+    if (React6.isValidElement(child) && child.type === StepTrigger) {
+      return React6.cloneElement(child, { currentStep });
     }
     return child;
   }) }));
@@ -8821,7 +8908,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React6, { useRef as useRef3 } from "react";
+import React7, { useRef as useRef4 } from "react";
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -8886,10 +8973,10 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = React6.forwardRef((_a, fowardedRef) => {
+var TextareaField = React7.forwardRef((_a, fowardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
-  const inputRef = useRef3(null);
-  const badgeRef = useRef3(null);
+  const inputRef = useRef4(null);
+  const badgeRef = useRef4(null);
   const updateCharCountBadge = () => {
     var _a2, _b2;
     if (!maxLength || !badgeRef.current) return;
@@ -9186,15 +9273,15 @@ function Tooltip({
 }
 
 // src/components/MultiSelect.tsx
-import { DropdownMenu as DropdownMenu3, Theme as Theme4 } from "@radix-ui/themes";
+import { DropdownMenu as DropdownMenu3, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
   faChevronDown as faChevronDown2,
   faChevronUp as faChevronUp2,
   faX
 } from "@fortawesome/free-solid-svg-icons";
-import { useCallback as useCallback2, useMemo, useRef as useRef4, useState as useState7 } from "react";
-import React7 from "react";
+import { useCallback as useCallback2, useMemo, useRef as useRef5, useState as useState7 } from "react";
+import React8 from "react";
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledContent = styled(DropdownMenu3.Content, {
   backgroundColor: "$dark50",
@@ -9258,7 +9345,7 @@ var BadgeCloseBtn = styled("div", {
     backgroundColor: "$dark600"
   }
 });
-var MultiSelect = React7.forwardRef(
+var MultiSelect = React8.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
@@ -9270,7 +9357,7 @@ var MultiSelect = React7.forwardRef(
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = useState7(false);
-    const triggerRef = useRef4(null);
+    const triggerRef = useRef5(null);
     const labelByValue = useMemo(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
@@ -9286,7 +9373,7 @@ var MultiSelect = React7.forwardRef(
       [selectedValues, onValueChange]
     );
     const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
-    return /* @__PURE__ */ jsx26(Theme4, { children: /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+    return /* @__PURE__ */ jsx26(Theme3, { children: /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
       /* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ jsxs14(
         StyledTrigger,
         {
@@ -9765,79 +9852,7 @@ var MultiSelectFormField = (_a) => {
 
 // src/components/FormFields/PhoneFormField.tsx
 import { useFormContext as useFormContext4 } from "react-hook-form";
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
 import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
-var PhoneFormInput = styled(PhoneInput, {
-  $$borderColor: "$colors$neutral300",
-  boxSizing: "border-box",
-  borderRadius: "$sm",
-  display: "flex",
-  flex: 1,
-  fontFamily: "$default",
-  color: "$dark500",
-  img: {
-    width: "$18",
-    height: "$18",
-    marginLeft: "$8"
-  },
-  ul: {
-    border: "none"
-  },
-  input: {
-    height: "$40 !important",
-    flex: 1,
-    borderColor: "$$borderColor  !important",
-    borderTopRightRadius: "$sm !important",
-    borderBottomRightRadius: "$sm !important",
-    fontSize: "inherit !important",
-    "&:focus": {
-      $$borderColor: "$colors$brand300"
-    }
-  },
-  button: {
-    height: "$40 !important",
-    borderRight: "none",
-    borderTopLeftRadius: "$sm !important",
-    borderBottomLeftRadius: "$sm !important",
-    borderColor: "$$borderColor  !important",
-    marginRight: "0 !important",
-    "&:active": {
-      $$borderColor: "$colors$brand300"
-    },
-    div: {
-      padding: "auto $12",
-      gap: " $8px"
-    }
-  },
-  "&:has(input:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    $$borderColor: "$colors$dark200",
-    cursor: "not-allowed",
-    img: {
-      opacity: 0.6
-    },
-    button: {
-      $$borderColor: "$colors$dark200"
-    }
-  },
-  variants: {
-    typography: typographyValues,
-    color: {
-      default: {
-        $$borderColor: "$colors$neutral300"
-      },
-      error: {
-        $$borderColor: "$colors$error600"
-      }
-    }
-  },
-  defaultVariants: {
-    typography: "labelSmall",
-    color: "default"
-  }
-});
 var PhoneFormField = (_a) => {
   var _b = _a, {
     name,
@@ -9872,17 +9887,6 @@ var PhoneFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx36(
-      PhoneFormInput,
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, register(name, { required })), {
-        defaultCountry,
-        value: watch(name),
-        color: haveError ? "error" : "default",
-        onChange: handlePhoneChange
-      }), props), {
-        "aria-labelledby": `${name}-label`
-      })
-    ),
     /* @__PURE__ */ jsx36(ErrorFormMessage, { message: errorMsg })
   ] });
 };
@@ -10119,7 +10123,7 @@ var IdentityDocumentNumberFormField = ({
 };
 
 // src/components/FormFields/AddressFormFields/index.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { useFormContext as useFormContext9, useWatch as useWatch2, useFormState } from "react-hook-form";
 
 // src/components/FormFields/SelectFormField.tsx
@@ -10329,7 +10333,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect3, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 import { useFormContext as useFormContext8, Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment3, jsx as jsx45 } from "react/jsx-runtime";
 function CityFormField({
@@ -10344,7 +10348,7 @@ function CityFormField({
   const selectedState = watch(stateName);
   const [cities, setCities] = useState8([]);
   const [loading, setLoading] = useState8(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -10451,7 +10455,7 @@ function AddressFormFields({
   const isBrazil = selectedCountry === "Brasil";
   const addressErrors = getNestedValue2(errors, name);
   const haveError = !!addressErrors;
-  useEffect4(() => {
+  useEffect5(() => {
     const cleanedCep = cep == null ? void 0 : cep.replace(/\D/g, "");
     if (isBrazil && (cleanedCep == null ? void 0 : cleanedCep.length) === 8) {
       fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.6.3",
+  "version": "11.6.5",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,7 +41,6 @@
     "npm": "^11.4.2",
     "radix-ui": "^1.4.2",
     "react-day-picker": "^9.6.7",
-    "react-hook-form": "^7.57.0",
-    "react-international-phone": "^4.5.0"
+    "react-hook-form": "^7.57.0"
   }
 }