@lets-events/react 11.7.9 → 11.8.0

package/dist/index.mjs

@@ -256,7 +256,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment4 = REACT_FRAGMENT_TYPE;
+        var Fragment5 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -315,7 +315,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment4;
+        exports.Fragment = Fragment5;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -3781,6 +3781,9 @@ function Modal(_a) {
   ] }));
 }
 
+// src/components/MenuDropdown/index.tsx
+import { useRef as useRef2 } from "react";
+
 // src/components/MenuDropdown/styledComponents.ts
 var MenuDropdownContainerStyled = styled("div", {
   position: "relative",
@@ -3812,22 +3815,6 @@ var MenuItemsContainerStyled = styled("div", {
   height: "fit-content"
 });
 
-// src/components/MenuDropdown/index.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-function MenuDropdown({
-  children,
-  isOpen,
-  setIsOpen
-}) {
-  return /* @__PURE__ */ jsxs5(MenuDropdownContainerStyled, { children: [
-    /* @__PURE__ */ jsx14(TriggerButtonStyled, { onClick: () => setIsOpen(!isOpen), children: /* @__PURE__ */ jsx14(Icon_default, { name: "ellipsis", size: "xl", color: "#FFFFFF" }) }),
-    isOpen && /* @__PURE__ */ jsx14(MenuItemsContainerStyled, { children })
-  ] });
-}
-
-// src/components/Calendar/index.tsx
-import { useRef as useRef2, useEffect as useEffect3, useState as useState2 } from "react";
-
 // src/hooks/useOnClickOutside.tsx
 import { useEffect as useEffect2 } from "react";
 function useOnClickOutside(ref, handler) {
@@ -3847,7 +3834,25 @@ function useOnClickOutside(ref, handler) {
   }, [ref, handler]);
 }
 
+// src/components/MenuDropdown/index.tsx
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function MenuDropdown({
+  children,
+  isOpen,
+  setIsOpen
+}) {
+  const dropdownItemsContainerRef = useRef2(null);
+  useOnClickOutside(dropdownItemsContainerRef, () => {
+    setIsOpen(false);
+  });
+  return /* @__PURE__ */ jsxs5(MenuDropdownContainerStyled, { children: [
+    /* @__PURE__ */ jsx14(TriggerButtonStyled, { onClick: () => setIsOpen(!isOpen), children: /* @__PURE__ */ jsx14(Icon_default, { name: "ellipsis", size: "xl", color: "#FFFFFF" }) }),
+    isOpen && /* @__PURE__ */ jsx14(MenuItemsContainerStyled, { ref: dropdownItemsContainerRef, children })
+  ] });
+}
+
 // src/components/Calendar/index.tsx
+import { useRef as useRef3, useEffect as useEffect3, useState as useState2 } from "react";
 import { DayPicker } from "react-day-picker";
 
 // ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
@@ -7970,7 +7975,7 @@ function Calendar(_a) {
   ]);
   const [inputValue, setInputValue] = useState2("");
   const [showContainer, setShowCalendar] = useState2(false);
-  const dropdownRef = useRef2(null);
+  const dropdownRef = useRef3(null);
   useOnClickOutside(dropdownRef, () => {
     setShowCalendar(false);
   });
@@ -8052,6 +8057,9 @@ function Calendar(_a) {
   ] })) });
 }
 
+// src/components/Drawer/index.tsx
+import { useRef as useRef4 } from "react";
+
 // src/components/Drawer/styledComponents.ts
 var DrawerOverlayStyled = styled("div", {
   position: "fixed",
@@ -8107,9 +8115,14 @@ function Drawer({
   children
 }) {
   if (!isOpen) return null;
+  const drawerContainerRef = useRef4(null);
+  useOnClickOutside(drawerContainerRef, () => {
+    onClose();
+  });
   return /* @__PURE__ */ jsx16(DrawerOverlayStyled, { children: /* @__PURE__ */ jsxs7(
     DrawerContainerStyled,
     {
+      ref: drawerContainerRef,
       style: {
         width: width != null ? width : "34.25rem",
         backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
@@ -8126,7 +8139,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback, useRef as useRef5, useState as useState3 } from "react";
 import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8235,7 +8248,7 @@ function TimePicker({
   const [rawHours, setRawHours] = useState3("00");
   const [rawMinutes, setRawMinutes] = useState3("00");
   const [isOpen, setIsOpen] = useState3(false);
-  const dropdownRef = useRef3(null);
+  const dropdownRef = useRef5(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
   const handleIncrement = useCallback(
     (type) => {
@@ -8773,7 +8786,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-import React6 from "react";
+import React7 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", {
@@ -8889,9 +8902,9 @@ function StepList(_a) {
     "children",
     "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 /* @__PURE__ */ jsx20(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React7.Children.map(children, (child) => {
+    if (React7.isValidElement(child) && child.type === StepTrigger) {
+      return React7.cloneElement(child, { currentStep });
     }
     return child;
   }) }));
@@ -8948,7 +8961,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React7, { useRef as useRef4 } from "react";
+import React8, { useRef as useRef6 } from "react";
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -9013,10 +9026,10 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = React7.forwardRef((_a, fowardedRef) => {
+var TextareaField = React8.forwardRef((_a, fowardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
-  const inputRef = useRef4(null);
-  const badgeRef = useRef4(null);
+  const inputRef = useRef6(null);
+  const badgeRef = useRef6(null);
   const updateCharCountBadge = () => {
     var _a2, _b2;
     if (!maxLength || !badgeRef.current) return;
@@ -9318,11 +9331,11 @@ import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawes
 import {
   faChevronDown as faChevronDown2,
   faChevronUp as faChevronUp2,
-  faX
+  faSquareXmark
 } from "@fortawesome/free-solid-svg-icons";
-import { useCallback as useCallback2, useMemo, useRef as useRef5, useState as useState6 } from "react";
-import React8 from "react";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useMemo, useRef as useRef7, useState as useState6 } from "react";
+import React9 from "react";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledContent = styled(DropdownMenu3.Content, {
   backgroundColor: "$dark50",
   borderRadius: "$sm",
@@ -9361,31 +9374,23 @@ var itemStyle = {
   boxSizing: "border-box",
   backgroundColor: "$dark50",
   display: "block",
+  cursor: "pointer",
   "&:hover": {
     backgroundColor: "$dark100"
   }
 };
+var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
 var BadgeWrapper = styled("div", {
   flex: "1",
   display: "flex",
-  justifyContent: "start",
-  flexWrap: "wrap",
-  gap: "4px"
+  gap: "4px",
+  marginTop: "8px",
+  flexDirection: "column"
 });
 var BadgeCloseBtn = styled("div", {
-  borderRadius: "100%",
-  width: "16px",
-  height: "16px",
-  minWidth: "16px",
-  minHeight: "16px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "&:hover": {
-    backgroundColor: "$dark600"
-  }
+  cursor: "pointer"
 });
-var MultiSelect = React8.forwardRef(
+var MultiSelect = React9.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
@@ -9393,11 +9398,13 @@ var MultiSelect = React8.forwardRef(
     options,
     color,
     width = "100%",
-    zIndex = "auto"
+    zIndex = "auto",
+    showSelectedValues = true,
+    singleSelect = false
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = useState6(false);
-    const triggerRef = useRef5(null);
+    const triggerRef = useRef7(null);
     const labelByValue = useMemo(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
@@ -9413,72 +9420,106 @@ var MultiSelect = React8.forwardRef(
       [selectedValues, onValueChange]
     );
     const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
-    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,
-        {
-          css: {
-            width
-          },
-          ref: (r) => {
-            if (!r) return;
-            triggerRef.current = r;
-            if (fowardedRef) {
-              if (typeof fowardedRef === "function") fowardedRef(r);
-              else {
-                fowardedRef.current = r;
+    const text = useMemo(() => {
+      if (selectedValues.length > 0 && singleSelect) {
+        const value = selectedValues[0];
+        return labelByValue[value];
+      }
+      return placeholder != null ? placeholder : "Selecione";
+    }, [selectedValues, placeholder, singleSelect]);
+    const handleItemClick = (v) => {
+      onValueChange == null ? void 0 : onValueChange([v]);
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ jsxs14(Theme3, { children: [
+      /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+        /* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ jsxs14(
+          StyledTrigger,
+          {
+            css: {
+              width
+            },
+            ref: (r) => {
+              if (!r) return;
+              triggerRef.current = r;
+              if (fowardedRef) {
+                if (typeof fowardedRef === "function") fowardedRef(r);
+                else {
+                  fowardedRef.current = r;
+                }
               }
-            }
-          },
-          color,
-          children: [
-            selectedValues.length === 0 ? /* @__PURE__ */ jsx26(Text, { typography: "labelMedium", css: { flex: 1 }, children: placeholder != null ? placeholder : "Selecione" }) : /* @__PURE__ */ jsx26(BadgeWrapper, { children: selectedValues.map((value) => {
-              return /* @__PURE__ */ jsx26(Badge, { size: "sm", color: "dark", children: /* @__PURE__ */ jsxs14(Flex2, { justify: "between", align: "center", children: [
-                /* @__PURE__ */ jsx26(Text, { typography: "badgeSmall", color: "dark100", children: labelByValue[value] }),
-                /* @__PURE__ */ jsx26(
-                  BadgeCloseBtn,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    },
-                    role: "button",
-                    children: /* @__PURE__ */ jsx26(FontAwesomeIcon3, { icon: faX, size: "xs" })
-                  }
-                )
-              ] }) }, value);
-            }) }),
-            /* @__PURE__ */ jsx26(
-              FontAwesomeIcon3,
+            },
+            color,
+            children: [
+              /* @__PURE__ */ jsx26(
+                Text,
+                {
+                  typography: "labelMedium",
+                  css: {
+                    flex: 1,
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis"
+                  },
+                  children: text
+                }
+              ),
+              /* @__PURE__ */ jsx26(
+                FontAwesomeIcon3,
+                {
+                  icon: isOpen ? faChevronUp2 : faChevronDown2,
+                  size: "sm",
+                  color: colors.dark600
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx26(
+          StyledContent,
+          {
+            css: {
+              width: menuWidth ? menuWidth + "px" : width,
+              zIndex
+            },
+            children: !singleSelect ? /* @__PURE__ */ jsx26(
+              CheckboxGroup,
               {
-                icon: isOpen ? faChevronUp2 : faChevronDown2,
-                size: "sm",
-                color: colors.dark600
+                value: selectedValues,
+                onValueChange: (v) => {
+                  onValueChange == null ? void 0 : onValueChange(v);
+                },
+                children: /* @__PURE__ */ jsx26(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i)) })
               }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx26(
-        StyledContent,
-        {
-          css: {
-            width: menuWidth ? menuWidth + "px" : width,
-            zIndex
-          },
-          children: /* @__PURE__ */ jsx26(
-            CheckboxGroup,
+            ) : /* @__PURE__ */ jsx26(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i)) })
+          }
+        )
+      ] }),
+      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ jsx26(Fragment2, { children: /* @__PURE__ */ jsx26(BadgeWrapper, { children: selectedValues.map((value) => {
+        return /* @__PURE__ */ jsxs14(Flex2, { gap: 4, children: [
+          /* @__PURE__ */ jsx26(
+            BadgeCloseBtn,
             {
-              value: selectedValues,
-              onValueChange: (v) => {
-                onValueChange == null ? void 0 : onValueChange(v);
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemove(value);
               },
-              children: /* @__PURE__ */ jsx26(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i)) })
+              role: "button",
+              children: /* @__PURE__ */ jsx26(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            Text,
+            {
+              typography: "captionMedium",
+              fontWeight: "regular",
+              color: "dark600",
+              children: labelByValue[value]
             }
           )
-        }
-      )
-    ] }) });
+        ] });
+      }) }) })
+    ] });
   }
 );
 
@@ -10382,14 +10423,14 @@ var brazilianStates = [
 ];
 
 // src/components/FormFields/AddressFormFields/StateFormField.tsx
-import { Fragment as Fragment2, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44 } from "react/jsx-runtime";
 function StateFormField({
   name,
   label,
   required,
   isBrazil
 }) {
-  return /* @__PURE__ */ jsx44(Fragment2, { children: isBrazil ? /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx44(Fragment3, { children: isBrazil ? /* @__PURE__ */ jsx44(
     SelectFormField,
     {
       name,
@@ -10403,7 +10444,7 @@ function StateFormField({
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
 import { useEffect as useEffect4, useState as useState7 } from "react";
 import { useFormContext as useFormContext6, Controller as Controller2 } from "react-hook-form";
-import { Fragment as Fragment3, jsx as jsx45 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
 function CityFormField({
   name,
   label,
@@ -10455,7 +10496,7 @@ function CityFormField({
     }
     fetchCities();
   }, [selectedState, isBrazil]);
-  return /* @__PURE__ */ jsx45(Fragment3, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx45(Fragment4, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
     Controller2,
     {
       name,

package/package.json

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