@lets-events/react 12.1.13 → 12.2.0

package/src/components/{MultiSelect.tsx → MultiSelect/index.tsx}

@@ -1,8 +1,7 @@
 import React, { useCallback, useRef, useState } from "react";
 import { DropdownMenu, Theme } from "@radix-ui/themes";
-import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";
-import { styled } from "../styles";
-import { Text } from "./Text";
+import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
+import { Text } from "../Text";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronDown,
@@ -11,109 +10,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { colors } from "@lets-events/tokens";
 import { ComponentProps, useMemo } from "react";
-import { Flex } from "./Flex";
-import { CSS } from "@stitches/react";
-
-const StyledContent = styled(DropdownMenu.Content, {
-  backgroundColor: "$dark50",
-  borderRadius: "$sm",
-  padding: "$8 0",
-  boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
-  boxSizing: "border-box",
-  border: "1px solid $dark300",
-  zIndex: 999999,
-  minWidth: "var(--radix-dropdown-menu-trigger-width)",
-  maxWidth: "var(--radix-dropdown-menu-trigger-width)",
-});
-
-const StyledTrigger = styled("div", {
-  minHeight: "40px",
-  borderRadius: "$sm",
-  cursor: "pointer",
-  display: "flex",
-  justifyContent: "start",
-  alignItems: "center",
-  padding: "$6 $14",
-  boxSizing: "border-box",
-  gap: "4px",
-  width: "100%",
-
-  variants: {
-    color: {
-      default: {
-        border: "1px solid $dark300",
-      },
-      error: {
-        border: "1px solid $error400",
-      },
-    },
-    disabled: {
-      true: {
-        cursor: "not-allowed",
-        border: "1px solid $dark100",
-      },
-    },
-  },
-
-  defaultVariants: {
-    color: "default",
-  },
-});
-
-const itemStyle: CSS = {
-  padding: "$4 $16",
-  minHeight: "$32",
-  boxSizing: "border-box",
-  backgroundColor: "$dark50",
-  display: "block",
-  cursor: "pointer",
-
-  "&:hover": {
-    backgroundColor: "$dark100",
-  },
-};
-
-const StyledItem = styled("div", {
-  ...itemStyle,
-});
-
-const BadgeCloseBtn = styled("div", {
-  cursor: "pointer",
-});
-
-const StyledFlexWithMaxHeight = styled(Flex, {
-  variants: {
-    hasMaxHeight: {
-      true: {
-        overflowY: "auto",
-        "&::-webkit-scrollbar": {
-          width: "4px",
-        },
-        "&::-webkit-scrollbar-track": {
-          backgroundColor: "$dark100",
-          borderRadius: "2px",
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "$dark300",
-          borderRadius: "2px",
-          "&:hover": {
-            backgroundColor: "$dark400",
-          },
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    hasMaxHeight: false,
-  },
-});
-const StyledText = styled(Text, {
-  flex: 1,
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis",
-});
+import { Flex } from "../Flex";
+import { BadgeCloseBtn, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
 
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   placeholder?: string;
@@ -130,6 +28,9 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   selectedOrientation?: "row" | "column";
   disabled?: boolean;
   maxHeight?: string;
+  selectedAllOptions?: boolean;
+  selectedAllText?: string;
+  selectedScroll?: boolean;
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -147,12 +48,15 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       selectedOrientation = "column",
       disabled = false,
       maxHeight,
+      selectedAllOptions = false,
+      selectedAllText,
+      selectedScroll = false
     },
     fowardedRef
   ) => {
     const [isOpen, setIsOpen] = useState(false);
-
     const triggerRef = useRef<HTMLDivElement>(null);
+    const [allOptionsSelected, setAllOptionsSelected] = useState(false)
     const labelByValue = useMemo(() => {
       return options.reduce<{ [key: string]: string }>((prev, curr) => {
         return {
@@ -170,12 +74,27 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       [selectedValues, onValueChange]
     );
 
+    const handleSelectAll = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const allSelected = selectedValues.length === options.length;
+        if (allSelected) {
+          onValueChange?.([]);
+          setAllOptionsSelected(false)
+        } else {
+          onValueChange?.(options.map((o) => o.value));
+          setAllOptionsSelected(true)
+        }
+      },
+      [selectedValues, options, onValueChange]
+    );
+
     const text = useMemo(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         return labelByValue[value];
       }
-
       return placeholder ?? "Selecione";
     }, [selectedValues, placeholder, singleSelect]);
 
@@ -183,6 +102,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       onValueChange?.([v]);
       setIsOpen(false);
     };
+
     const handleToggle = useCallback(
       (e: React.MouseEvent) => {
         e.preventDefault();
@@ -194,8 +114,8 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
     );
 
     return (
-      <Theme>
-        <DropdownMenu.Root>
+      <Theme style={width !== "100%" ? { width } : undefined}>
+        <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
           <DropdownMenu.Trigger>
             <StyledTrigger
               ref={(r) => {
@@ -203,9 +123,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                 triggerRef.current = r;
                 if (fowardedRef) {
                   if (typeof fowardedRef === "function") fowardedRef(r);
-                  else {
-                    fowardedRef.current = r;
-                  }
+                  else fowardedRef.current = r;
                 }
               }}
               color={color}
@@ -236,7 +154,10 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
               <CheckboxGroup
                 value={selectedValues}
                 onValueChange={(v) => {
-                  onValueChange?.(v);
+                  onValueChange?.(v)
+                  if (allOptionsSelected) {
+                    setAllOptionsSelected(false)
+                  }
                 }}
               >
                 <StyledFlexWithMaxHeight
@@ -245,6 +166,18 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                   hasMaxHeight={!!maxHeight}
                   style={maxHeight ? { maxHeight } : undefined}
                 >
+                  {selectedAllOptions && (
+                    <ButtonSelectAllStyled
+                      css={itemStyle}
+                      onClick={(e) => handleSelectAll(e)}
+                    >
+                      <div className={allOptionsSelected ? "checked" : ""}></div>
+                      <Text typography="labelSmall">
+                        {selectedAllText ? selectedAllText : "Selecionar Todos"}
+                      </Text>
+                    </ButtonSelectAllStyled>
+                  )}
+
                   {options.map(({ value, label }, i) => (
                     <CheckboxItem value={value} css={itemStyle} key={i}>
                       <Text typography={"labelSmall"}>{label}</Text>
@@ -269,41 +202,39 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
           </StyledContent>
         </DropdownMenu.Root>
         {selectedValues.length > 0 && showSelectedValues && (
-          <>
-            <Flex
-              direction={selectedOrientation}
-              gap={8}
-              align={selectedOrientation === "column" ? "start" : "center"}
-              justify={"start"}
-              css={{ margin: "8px 0" }}
-            >
-              {selectedValues.map((value) => (
-                <Flex
-                  key={value}
-                  gap={4}
-                  align={"center"}
-                  css={{ flexWrap: "wrap" }}
+          <StyledFlexSelectedItems
+            direction={selectedOrientation}
+            gap={8}
+            align={selectedOrientation === "column" ? "start" : "center"}
+            justify={"start"}
+            css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
+          >
+            {selectedValues.map((value) => (
+              <Flex
+                key={value}
+                gap={4}
+                align={"center"}
+                css={{ flexWrap: "wrap" }}
+              >
+                <BadgeCloseBtn
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleRemove(value);
+                  }}
+                  role="button"
+                >
+                  <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                </BadgeCloseBtn>
+                <Text
+                  typography={"captionMedium"}
+                  fontWeight={"regular"}
+                  color="dark600"
                 >
-                  <BadgeCloseBtn
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    }}
-                    role="button"
-                  >
-                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                  </BadgeCloseBtn>
-                  <Text
-                    typography={"captionMedium"}
-                    fontWeight={"regular"}
-                    color="dark600"
-                  >
-                    {labelByValue[value]}
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
-          </>
+                  {labelByValue[value]}
+                </Text>
+              </Flex>
+            ))}
+          </StyledFlexSelectedItems>
         )}
       </Theme>
     );

package/src/components/MultiSelect/styledComponents.ts

@@ -0,0 +1,159 @@
+import { DropdownMenu } from "@radix-ui/themes";
+import { styled } from "../../styles";
+import { CSS } from "@stitches/react";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+
+export const StyledContent = styled(DropdownMenu.Content, {
+  backgroundColor: "$dark50",
+  borderRadius: "$sm",
+  padding: "$8 0",
+  boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+  zIndex: 999999,
+  minWidth: "var(--radix-dropdown-menu-trigger-width)",
+  maxWidth: "var(--radix-dropdown-menu-trigger-width)",
+});
+
+export const StyledTrigger = styled("div", {
+  minHeight: "40px",
+  borderRadius: "$sm",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "start",
+  alignItems: "center",
+  padding: "$6 $14",
+  boxSizing: "border-box",
+  gap: "4px",
+  width: "100%",
+
+  variants: {
+    color: {
+      default: {
+        border: "1px solid $dark300",
+      },
+      error: {
+        border: "1px solid $error400",
+      },
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        border: "1px solid $dark100",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "default",
+  },
+});
+
+export const itemStyle: CSS = {
+  padding: "$4 $16",
+  minHeight: "$32",
+  boxSizing: "border-box",
+  backgroundColor: "$dark50",
+  display: "block",
+  cursor: "pointer",
+
+  "&:hover": {
+    backgroundColor: "$dark100",
+  },
+};
+
+export const StyledItem = styled("div", {
+  ...itemStyle,
+});
+
+export const BadgeCloseBtn = styled("div", {
+  cursor: "pointer",
+});
+
+export const StyledFlexWithMaxHeight = styled(Flex, {
+  variants: {
+    hasMaxHeight: {
+      true: {
+        overflowY: "auto",
+        "&::-webkit-scrollbar": {
+          width: "4px",
+        },
+        "&::-webkit-scrollbar-track": {
+          backgroundColor: "$dark100",
+          borderRadius: "2px",
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: "$dark300",
+          borderRadius: "2px",
+          "&:hover": {
+            backgroundColor: "$dark400",
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    hasMaxHeight: false,
+  },
+});
+export const StyledFlexSelectedItems = styled(Flex, {
+  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",
+    },
+  },
+});
+export const StyledText = styled(Text, {
+  flex: 1,
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+});
+export const 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",
+        }
+    },
+});