@lets-events/react 12.1.13 → 12.2.0

package/dist/index.mjs

@@ -143,7 +143,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment6 = REACT_FRAGMENT_TYPE;
+        var Fragment5 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -202,7 +202,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment6;
+        exports.Fragment = Fragment5;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -9281,9 +9281,9 @@ function Tooltip({
   ] }) });
 }
 
-// src/components/MultiSelect.tsx
+// src/components/MultiSelect/index.tsx
 import React9, { useCallback as useCallback2, useRef as useRef7, useState as useState7 } from "react";
-import { DropdownMenu as DropdownMenu3, Theme as Theme3 } from "@radix-ui/themes";
+import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
   faChevronDown as faChevronDown2,
@@ -9291,7 +9291,9 @@ import {
   faSquareXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { useMemo } from "react";
-import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// src/components/MultiSelect/styledComponents.ts
+import { DropdownMenu as DropdownMenu3 } from "@radix-ui/themes";
 var StyledContent = styled(DropdownMenu3.Content, {
   backgroundColor: "$dark50",
   borderRadius: "$sm",
@@ -9375,12 +9377,67 @@ var StyledFlexWithMaxHeight = styled(Flex2, {
     hasMaxHeight: false
   }
 });
+var StyledFlexSelectedItems = styled(Flex2, {
+  overflowY: "auto",
+  margin: "8px 0",
+  "&::-webkit-scrollbar": {
+    width: "4px"
+  },
+  "&::-webkit-scrollbar-track": {
+    backgroundColor: "$dark100",
+    borderRadius: "2px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "$dark300",
+    borderRadius: "2px",
+    "&:hover": {
+      backgroundColor: "$dark400"
+    }
+  }
+});
 var StyledText = styled(Text, {
   flex: 1,
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
 });
+var ButtonSelectAllStyled = styled("button", {
+  display: "flex !important",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "$8",
+  border: "none",
+  "div": {
+    backgroundCcolor: "#fff",
+    borderRadius: "2px",
+    height: "$16",
+    width: "$16",
+    position: "relative",
+    border: "2px solid $dark300",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    "&.checked::before": {
+      backgroundImage: `url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23004ED2'/%3E%3C/svg%3E")`,
+      content: "",
+      width: "1rem",
+      height: "1rem",
+      position: "absolute",
+      top: "-1px",
+      right: "-2px",
+      zIndex: "2",
+      backgroundRepeat: "no-repeat"
+    }
+  },
+  "&:hover": {
+    "div": {
+      transition: "all 300ms ease-out",
+      boxShadow: "rgba(56, 129, 255, 0.5) 0px 0px 0px 4px"
+    }
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var MultiSelect = React9.forwardRef(
   ({
     placeholder,
@@ -9394,10 +9451,14 @@ var MultiSelect = React9.forwardRef(
     singleSelect = false,
     selectedOrientation = "column",
     disabled = false,
-    maxHeight
+    maxHeight,
+    selectedAllOptions = false,
+    selectedAllText,
+    selectedScroll = false
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = useState7(false);
     const triggerRef = useRef7(null);
+    const [allOptionsSelected, setAllOptionsSelected] = useState7(false);
     const labelByValue = useMemo(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
@@ -9412,6 +9473,21 @@ var MultiSelect = React9.forwardRef(
       },
       [selectedValues, onValueChange]
     );
+    const handleSelectAll = useCallback2(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const allSelected = selectedValues.length === options.length;
+        if (allSelected) {
+          onValueChange == null ? void 0 : onValueChange([]);
+          setAllOptionsSelected(false);
+        } else {
+          onValueChange == null ? void 0 : onValueChange(options.map((o) => o.value));
+          setAllOptionsSelected(true);
+        }
+      },
+      [selectedValues, options, onValueChange]
+    );
     const text = useMemo(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
@@ -9432,9 +9508,9 @@ var MultiSelect = React9.forwardRef(
       },
       [disabled]
     );
-    return /* @__PURE__ */ jsxs14(Theme3, { children: [
-      /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { children: [
-        /* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { children: /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs14(Theme3, { style: width !== "100%" ? { width } : void 0, children: [
+      /* @__PURE__ */ jsxs14(DropdownMenu4.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+        /* @__PURE__ */ jsx26(DropdownMenu4.Trigger, { children: /* @__PURE__ */ jsxs14(
           StyledTrigger,
           {
             ref: (r) => {
@@ -9442,9 +9518,7 @@ var MultiSelect = React9.forwardRef(
               triggerRef.current = r;
               if (fowardedRef) {
                 if (typeof fowardedRef === "function") fowardedRef(r);
-                else {
-                  fowardedRef.current = r;
-                }
+                else fowardedRef.current = r;
               }
             },
             color,
@@ -9484,15 +9558,31 @@ var MultiSelect = React9.forwardRef(
                 value: selectedValues,
                 onValueChange: (v) => {
                   onValueChange == null ? void 0 : onValueChange(v);
+                  if (allOptionsSelected) {
+                    setAllOptionsSelected(false);
+                  }
                 },
-                children: /* @__PURE__ */ jsx26(
+                children: /* @__PURE__ */ jsxs14(
                   StyledFlexWithMaxHeight,
                   {
                     direction: "column",
                     gap: 8,
                     hasMaxHeight: !!maxHeight,
                     style: maxHeight ? { maxHeight } : void 0,
-                    children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i))
+                    children: [
+                      selectedAllOptions && /* @__PURE__ */ jsxs14(
+                        ButtonSelectAllStyled,
+                        {
+                          css: itemStyle,
+                          onClick: (e) => handleSelectAll(e),
+                          children: [
+                            /* @__PURE__ */ jsx26("div", { className: allOptionsSelected ? "checked" : "" }),
+                            /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
+                          ]
+                        }
+                      ),
+                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i))
+                    ]
                   }
                 )
               }
@@ -9509,14 +9599,14 @@ var MultiSelect = React9.forwardRef(
           }
         )
       ] }),
-      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ jsx26(Fragment2, { children: /* @__PURE__ */ jsx26(
-        Flex2,
+      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ jsx26(
+        StyledFlexSelectedItems,
         {
           direction: selectedOrientation,
           gap: 8,
           align: selectedOrientation === "column" ? "start" : "center",
           justify: "start",
-          css: { margin: "8px 0" },
+          css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
           children: selectedValues.map((value) => /* @__PURE__ */ jsxs14(
             Flex2,
             {
@@ -9549,7 +9639,7 @@ var MultiSelect = React9.forwardRef(
             value
           ))
         }
-      ) })
+      )
     ] });
   }
 );
@@ -10055,7 +10145,7 @@ var PhoneFormField = ({
 };
 
 // src/components/FormFields/CPFFormField.tsx
-import { useFormContext as useFormContext4, useWatch } from "react-hook-form";
+import { useFormContext as useFormContext3, useWatch } from "react-hook-form";
 import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var isValidCPF = (cpf) => {
   cpf = cpf.replace(/[^\d]+/g, "");
@@ -10080,7 +10170,7 @@ var CPFFormField = ({
   validationErrorMessage,
   foreignerLabel
 }) => {
-  const { control, setValue } = useFormContext4();
+  const { control, setValue } = useFormContext3();
   const foreigner = useWatch({ name: "foreigner", control });
   return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx37(
@@ -10274,10 +10364,10 @@ var IdentityDocumentNumberFormField = ({
 };
 
 // src/components/FormFields/AddressFormFields/index.tsx
-import { useFormContext as useFormContext7, useWatch as useWatch2, useFormState } from "react-hook-form";
+import { useFormContext as useFormContext6, useWatch as useWatch2, useFormState } from "react-hook-form";
 
 // src/components/FormFields/SelectFormField.tsx
-import { useFormContext as useFormContext5, Controller } from "react-hook-form";
+import { useFormContext as useFormContext4, Controller } from "react-hook-form";
 
 // src/utils/getNestedValue.ts
 function getNestedValue(obj, path) {
@@ -10299,7 +10389,7 @@ var SelectFormField = ({
   const {
     control,
     formState: { errors }
-  } = useFormContext5();
+  } = useFormContext4();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10464,14 +10554,14 @@ var brazilianStates = [
 ];
 
 // src/components/FormFields/AddressFormFields/StateFormField.tsx
-import { Fragment as Fragment3, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx44 } from "react/jsx-runtime";
 function StateFormField({
   name,
   label,
   required,
   isBrazil
 }) {
-  return /* @__PURE__ */ jsx44(Fragment3, { children: isBrazil ? /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx44(Fragment2, { children: isBrazil ? /* @__PURE__ */ jsx44(
     SelectFormField,
     {
       name,
@@ -10484,8 +10574,8 @@ function StateFormField({
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
 import { useEffect as useEffect5, useState as useState8 } from "react";
-import { useFormContext as useFormContext6, Controller as Controller2 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
+import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
+import { Fragment as Fragment3, jsx as jsx45 } from "react/jsx-runtime";
 function CityFormField({
   name,
   label,
@@ -10494,7 +10584,7 @@ function CityFormField({
   isBrazil,
   placeholder
 }) {
-  const { control, watch } = useFormContext6();
+  const { control, watch } = useFormContext5();
   const selectedState = watch(stateName);
   const [cities, setCities] = useState8([]);
   const [loading, setLoading] = useState8(false);
@@ -10537,7 +10627,7 @@ function CityFormField({
     }
     fetchCities();
   }, [selectedState, isBrazil]);
-  return /* @__PURE__ */ jsx45(Fragment4, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx45(Fragment3, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
     Controller2,
     {
       name,
@@ -10598,7 +10688,7 @@ function AddressFormFields({
   required,
   layout = "column"
 }) {
-  const { control, setValue } = useFormContext7();
+  const { control, setValue } = useFormContext6();
   const { errors } = useFormState({ control });
   const selectedCountry = useWatch2({ control, name: `${name}.country` });
   const isBrazil = selectedCountry === "Brasil";
@@ -10697,7 +10787,7 @@ function AddressFormFields({
 }
 
 // src/components/FormFields/RadioGroupFormField.tsx
-import { Controller as Controller3, useFormContext as useFormContext8 } from "react-hook-form";
+import { Controller as Controller3, useFormContext as useFormContext7 } from "react-hook-form";
 import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 var RadioGroupFormField = ({
   name,
@@ -10713,7 +10803,7 @@ var RadioGroupFormField = ({
   const {
     control,
     formState: { errors }
-  } = useFormContext8();
+  } = useFormContext7();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10758,7 +10848,7 @@ var RadioGroupFormField = ({
 };
 
 // src/components/FormFields/CheckboxGroupFormField.tsx
-import { Controller as Controller4, useFormContext as useFormContext9 } from "react-hook-form";
+import { Controller as Controller4, useFormContext as useFormContext8 } from "react-hook-form";
 import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 var CheckboxGroupFormField = ({
   name,
@@ -10774,7 +10864,7 @@ var CheckboxGroupFormField = ({
   const {
     control,
     formState: { errors }
-  } = useFormContext9();
+  } = useFormContext8();
   const fieldError = getNestedValue(errors, name);
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10826,7 +10916,7 @@ var CheckboxGroupFormField = ({
 };
 
 // src/components/FormFields/SwitchFormField.tsx
-import { useFormContext as useFormContext10, Controller as Controller5 } from "react-hook-form";
+import { useFormContext as useFormContext9, Controller as Controller5 } from "react-hook-form";
 import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 var SwitchFormField = ({
   name,
@@ -10837,7 +10927,7 @@ var SwitchFormField = ({
   const {
     control,
     watch: watchForm
-  } = useFormContext10();
+  } = useFormContext9();
   if (watch) {
     watchForm(name);
   }
@@ -12343,7 +12433,7 @@ var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
 import { useState as useState11 } from "react";
-import { Fragment as Fragment5, jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12394,7 +12484,7 @@ var RichEditorFormField = (_a) => {
         }
       ),
       /* @__PURE__ */ jsx53(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ jsx53(Fragment5, { children: label && /* @__PURE__ */ jsx53(
+    ] }) : /* @__PURE__ */ jsx53(Fragment4, { children: label && /* @__PURE__ */ jsx53(
       FormLabel,
       {
         name,

package/package.json

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

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -1,4 +1,4 @@
-import { useController, useFormContext } from "react-hook-form";
+import { useController } from "react-hook-form";
 import { Flex } from "../Flex";
 import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";