@lets-events/react 11.7.10 → 11.8.0

package/.eslintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "@lets-events/eslint-config"
+{
+  "extends": "@lets-events/eslint-config"
 }

package/.turbo/turbo-build.log

@@ -1,20 +1,18 @@
-
-
-> @lets-events/react@11.7.10 build
-> tsup src/index.tsx  --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.4.0
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 321.88 KB
-ESM ⚡️ Build success in 556ms
-CJS dist/index.js 334.13 KB
-CJS ⚡️ Build success in 557ms
-DTS Build start
-DTS ⚡️ Build success in 5866ms
-DTS dist/index.d.mts 374.51 KB
-DTS dist/index.d.ts  374.51 KB
-⠙
+
+> @lets-events/react@11.8.0 build
+> tsup src/index.tsx  --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.4.0
+CLI Target: es6
+ESM Build start
+CJS Build start
+ESM dist\index.mjs 322.91 KB
+ESM ⚡️ Build success in 230ms
+CJS dist\index.js 335.24 KB
+CJS ⚡️ Build success in 230ms
+DTS Build start
+DTS ⚡️ Build success in 4099ms
+DTS dist\index.d.mts 374.57 KB
+DTS dist\index.d.ts  374.57 KB

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @lets-events/react
 
-## 11.7.10
+## 11.8.0
 
-### Patch Changes
+### Minor Changes
 
-- handle outside click of drawer and menudropdown
+- fix multiselect
 
 ## 11.7.9
 

package/dist/index.css

@@ -0,0 +1,171 @@
+/* ../../node_modules/react-international-phone/dist/index.css */
+.react-international-phone-country-selector {
+  position: relative;
+}
+.react-international-phone-country-selector-button {
+  display: flex;
+  height: var(--react-international-phone-height, 36px);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));
+  margin: 0;
+  appearance: button;
+  -webkit-appearance: button;
+  background-color: var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));
+  cursor: pointer;
+  text-transform: none;
+  user-select: none;
+}
+.react-international-phone-country-selector-button:hover {
+  background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
+}
+.react-international-phone-country-selector-button--hide-dropdown {
+  cursor: auto;
+}
+.react-international-phone-country-selector-button--hide-dropdown:hover {
+  background-color: transparent;
+}
+.react-international-phone-country-selector-button__button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-international-phone-country-selector-button__flag-emoji {
+  margin: 0 4px;
+}
+.react-international-phone-country-selector-button__flag-emoji--disabled {
+  opacity: .75;
+}
+.react-international-phone-country-selector-button__dropdown-arrow {
+  border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);
+  border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+  border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+  margin-right: 4px;
+  transition: all .1s ease-out;
+}
+.react-international-phone-country-selector-button__dropdown-arrow--active {
+  transform: rotateX(180deg);
+}
+.react-international-phone-country-selector-button__dropdown-arrow--disabled {
+  border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
+}
+.react-international-phone-country-selector-button--disabled {
+  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+  cursor: auto;
+}
+.react-international-phone-country-selector-button--disabled:hover {
+  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+}
+.react-international-phone-flag-emoji {
+  width: var(--react-international-phone-flag-width, 24px);
+  height: var(--react-international-phone-flag-height, 24px);
+  box-sizing: border-box;
+}
+.react-international-phone-country-selector-dropdown {
+  position: absolute;
+  z-index: 1;
+  top: var(--react-international-phone-dropdown-top, 44px);
+  left: var(--react-international-phone-dropdown-left, 0);
+  display: flex;
+  width: 300px;
+  max-height: 200px;
+  flex-direction: column;
+  padding: 4px 0;
+  margin: 0;
+  background-color: var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));
+  box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));
+  color: var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
+  list-style: none;
+  overflow-y: scroll;
+}
+.react-international-phone-country-selector-dropdown__preferred-list-divider {
+  height: 1px;
+  border: none;
+  margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
+  background: var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro));
+}
+.react-international-phone-country-selector-dropdown__list-item {
+  display: flex;
+  min-height: var(--react-international-phone-dropdown-item-height, 28px);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 2px 8px;
+}
+.react-international-phone-country-selector-dropdown__list-item-flag-emoji {
+  margin-right: 8px;
+}
+.react-international-phone-country-selector-dropdown__list-item-country-name {
+  overflow: hidden;
+  margin-right: 8px;
+  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.react-international-phone-country-selector-dropdown__list-item-dial-code {
+  color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
+  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+}
+.react-international-phone-country-selector-dropdown__list-item:hover {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
+  cursor: pointer;
+}
+.react-international-phone-country-selector-dropdown__list-item--selected,
+.react-international-phone-country-selector-dropdown__list-item--focused {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
+  color: var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
+}
+.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,
+.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code {
+  color: var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray));
+}
+.react-international-phone-country-selector-dropdown__list-item--focused {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
+}
+.react-international-phone-dial-code-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border: 1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));
+  margin-right: -1px;
+  background-color: var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));
+  color: var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));
+  font-size: var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px));
+}
+.react-international-phone-dial-code-preview--disabled {
+  background-color: var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+  color: var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666));
+}
+.react-international-phone-input-container {
+  display: flex;
+}
+.react-international-phone-input-container .react-international-phone-country-selector-button {
+  border-radius: var(--react-international-phone-border-radius, 4px);
+  margin-right: -1px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.react-international-phone-input-container .react-international-phone-input {
+  overflow: visible;
+  height: var(--react-international-phone-height, 36px);
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: 1px solid var(--react-international-phone-border-color, gainsboro);
+  border-radius: var(--react-international-phone-border-radius, 4px);
+  margin: 0;
+  background-color: var(--react-international-phone-background-color, white);
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  color: var(--react-international-phone-text-color, #222);
+  font-family: inherit;
+  font-size: var(--react-international-phone-font-size, 13px);
+}
+.react-international-phone-input-container .react-international-phone-input:focus {
+  outline: none;
+}
+.react-international-phone-input-container .react-international-phone-input--disabled {
+  background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
+  color: var(--react-international-phone-disabled-text-color, #666);
+}

package/dist/index.d.mts

@@ -12595,6 +12595,8 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     }>;
     width?: string;
     zIndex?: string;
+    showSelectedValues?: boolean;
+    singleSelect?: boolean;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -12595,6 +12595,8 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     }>;
     width?: string;
     zIndex?: string;
+    showSelectedValues?: boolean;
+    singleSelect?: boolean;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -262,7 +262,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;
@@ -321,7 +321,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment4;
+        exports2.Fragment = Fragment5;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -9473,29 +9473,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 = import_react17.default.forwardRef(
   ({
@@ -9505,7 +9497,9 @@ var MultiSelect = import_react17.default.forwardRef(
     options,
     color,
     width = "100%",
-    zIndex = "auto"
+    zIndex = "auto",
+    showSelectedValues = true,
+    singleSelect = false
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
@@ -9525,72 +9519,106 @@ var MultiSelect = import_react17.default.forwardRef(
       [selectedValues, onValueChange]
     );
     const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-        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 = (0, import_react16.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__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.Theme, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          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__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelMedium", css: { flex: 1 }, children: placeholder != null ? placeholder : "Selecione" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BadgeWrapper, { children: selectedValues.map((value) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { size: "sm", color: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex2, { justify: "between", align: "center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "badgeSmall", color: "dark100", children: labelByValue[value] }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  BadgeCloseBtn,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    },
-                    role: "button",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faX, size: "xs" })
-                  }
-                )
-              ] }) }, value);
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              import_react_fontawesome3.FontAwesomeIcon,
+            },
+            color,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Text,
+                {
+                  typography: "labelMedium",
+                  css: {
+                    flex: 1,
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis"
+                  },
+                  children: text
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                import_react_fontawesome3.FontAwesomeIcon,
+                {
+                  icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
+                  size: "sm",
+                  color: colors.dark600
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          StyledContent,
+          {
+            css: {
+              width: menuWidth ? menuWidth + "px" : width,
+              zIndex
+            },
+            children: !singleSelect ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              CheckboxGroup,
               {
-                icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
-                size: "sm",
-                color: colors.dark600
+                value: selectedValues,
+                onValueChange: (v) => {
+                  onValueChange == null ? void 0 : onValueChange(v);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i)) })
               }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        StyledContent,
-        {
-          css: {
-            width: menuWidth ? menuWidth + "px" : width,
-            zIndex
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            CheckboxGroup,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i)) })
+          }
+        )
+      ] }),
+      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BadgeWrapper, { children: selectedValues.map((value) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex2, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            BadgeCloseBtn,
             {
-              value: selectedValues,
-              onValueChange: (v) => {
-                onValueChange == null ? void 0 : onValueChange(v);
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemove(value);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i)) })
+              role: "button",
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            Text,
+            {
+              typography: "captionMedium",
+              fontWeight: "regular",
+              color: "dark600",
+              children: labelByValue[value]
             }
           )
-        }
-      )
-    ] }) });
+        ] });
+      }) }) })
+    ] });
   }
 );