@lets-events/react 11.7.10 → 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;
@@ -9331,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 useRef7, useState as useState6 } from "react";
 import React9 from "react";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledContent = styled(DropdownMenu3.Content, {
   backgroundColor: "$dark50",
   borderRadius: "$sm",
@@ -9374,29 +9374,21 @@ 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 = React9.forwardRef(
   ({
@@ -9406,7 +9398,9 @@ var MultiSelect = React9.forwardRef(
     options,
     color,
     width = "100%",
-    zIndex = "auto"
+    zIndex = "auto",
+    showSelectedValues = true,
+    singleSelect = false
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = useState6(false);
@@ -9426,72 +9420,106 @@ var MultiSelect = React9.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]
             }
           )
-        }
-      )
-    ] }) });
+        ] });
+      }) }) })
+    ] });
   }
 );
 
@@ -10395,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,
@@ -10416,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,
@@ -10468,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.10",
+  "version": "11.8.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",