@lets-events/react 12.11.1 → 12.11.3

package/src/components/MultiSelect/index.tsx

@@ -1,417 +1,418 @@
-import React, { useCallback, useRef, useState } from "react";
-import { DropdownMenu, Theme } from "@radix-ui/themes";
-import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
-import { Text } from "../Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChevronDown,
-  faChevronUp,
-  faSquareXmark,
-} from "@fortawesome/free-solid-svg-icons";
-import { colors } from "@lets-events/tokens";
-import { ComponentProps, useMemo } from "react";
-import { Flex } from "../Flex";
-import { Button } from "../Button";
-import { Modal } from "../Modal";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
-import {
-  CloseBtnStyled,
-  ButtonSelectAllStyled,
-  itemStyle,
-  StyledContent,
-  StyledFlexSelectedItems,
-  StyledFlexWithMaxHeight,
-  StyledItem,
-  StyledModalOptionsWrapper,
-  StyledSectionDivider,
-  StyledSectionTitle,
-  StyledText,
-  StyledTrigger,
-} from "./styledComponents";
-
-const MOBILE_MODAL_MAX_HEIGHT = "90vh";
-const MOBILE_MODAL_HEADER_OFFSET = "65px";
-
-const MOBILE_BREAKPOINT = "(max-width: 840px)";
-
-export type MultiSelectOption = {
-  label: string;
-  value: string;
-};
-
-export type MultiSelectSection = {
-  name: string;
-  options: MultiSelectOption[];
-};
-
-export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-  placeholder?: string;
-  value?: string[];
-  onValueChange?: (v: string[]) => void;
-  options?: MultiSelectOption[];
-  optionsBySection?: MultiSelectSection[];
-  width?: string;
-  zIndex?: string;
-  showSelectedValues?: boolean;
-  singleSelect?: boolean;
-  selectedOrientation?: "row" | "column";
-  disabled?: boolean;
-  maxHeight?: string;
-  selectedAllOptions?: boolean;
-  selectedAllText?: string;
-  selectedScroll?: boolean;
-  showMoreButton?: boolean;
-  showMoreButtonLabel?: string;
-  showMoreButtonOnClick?: () => void;
-  helperTextAfterField?: string;
-};
-
-export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
-  (
-    {
-      placeholder,
-      value: selectedValues = [],
-      onValueChange,
-      options = [],
-      optionsBySection,
-      color,
-      width = "100%",
-      zIndex = "auto",
-      showSelectedValues = true,
-      singleSelect = false,
-      selectedOrientation = "column",
-      disabled = false,
-      maxHeight,
-      selectedAllOptions = false,
-      selectedAllText,
-      selectedScroll = false,
-      showMoreButton = false,
-      showMoreButtonLabel = "Carregar mais",
-      showMoreButtonOnClick,
-      helperTextAfterField = "",
-    },
-    fowardedRef
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState(false);
-    const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
-    const hasSections = !!optionsBySection?.length;
-
-    const resolvedOptions = useMemo((): MultiSelectOption[] => {
-      if (hasSections) {
-        return optionsBySection!.reduce<MultiSelectOption[]>(
-          (acc, section) => acc.concat(section.options),
-          []
-        );
-      }
-      return options;
-    }, [hasSections, options, optionsBySection]);
-
-    const labelByValue = useMemo(() => {
-      return resolvedOptions.reduce<{ [key: string]: string }>((prev, curr) => {
-        return {
-          ...prev,
-          [curr.value]: curr.label,
-        };
-      }, {});
-    }, [resolvedOptions]);
-
-    const handleRemove = useCallback(
-      (value: string) => {
-        const newValue = selectedValues.filter((v) => v !== value);
-        onValueChange?.(newValue);
-      },
-      [selectedValues, onValueChange]
-    );
-
-    const handleSelectAll = useCallback(
-      (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const allSelected = selectedValues.length === resolvedOptions.length;
-        if (allSelected) {
-          onValueChange?.([]);
-          setAllOptionsSelected(false)
-        } else {
-          onValueChange?.(resolvedOptions.map((o) => o.value));
-          setAllOptionsSelected(true)
-        }
-      },
-      [selectedValues, resolvedOptions, onValueChange]
-    );
-
-    const text = useMemo(() => {
-      if (selectedValues.length > 0 && singleSelect) {
-        const value = selectedValues[0];
-        return labelByValue[value];
-      }
-      return placeholder ?? "Selecione";
-    }, [selectedValues, placeholder, singleSelect, labelByValue]);
-
-    const handleItemClick = (v: string) => {
-      onValueChange?.([v]);
-      setIsOpen(false);
-    };
-
-    const handleToggle = useCallback(
-      (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled) return;
-        setIsOpen((prev) => !prev);
-      },
-      [disabled]
-    );
-
-    const triggerElement = (
-      <StyledTrigger
-        ref={(r) => {
-          if (!r) return;
-          triggerRef.current = r;
-          if (fowardedRef) {
-            if (typeof fowardedRef === "function") fowardedRef(r);
-            else fowardedRef.current = r;
-          }
-        }}
-        color={color}
-        disabled={disabled}
-        style={width !== "100%" ? { width } : undefined}
-        onClick={!isMobile ? handleToggle : undefined}
-      >
-        <StyledText
-          typography={"labelMedium"}
-          color={disabled ? "dark400" : undefined}
-        >
-          {text}
-        </StyledText>
-        <FontAwesomeIcon
-          icon={isOpen ? faChevronUp : faChevronDown}
-          size="sm"
-          color={disabled ? colors.dark400 : colors.dark600}
-        />
-      </StyledTrigger>
-    );
-
-    const selectAllBlock = selectedAllOptions && (
-      <>
-        <ButtonSelectAllStyled
-          css={itemStyle}
-          onClick={(e) => {
-            handleSelectAll(e);
-            setIsOpen(false);
-          }}
-          type="button"
-        >
-          <div className={allOptionsSelected ? "checked" : ""}></div>
-          <Text typography="labelSmall">
-            {selectedAllText ? selectedAllText : "Selecionar Todos"}
-          </Text>
-        </ButtonSelectAllStyled>
-        <StyledSectionDivider />
-      </>
-    );
-
-    const showMoreButtonBlock = showMoreButton && showMoreButtonOnClick && (
-      <Button
-        variant="menuDropdownItem"
-        color="brand"
-        onClick={showMoreButtonOnClick}
-        fontWeight="semibold"
-        type="button"
-        css={{
-          justifyContent: "flex-start",
-          color: "var(--colors-brand500)!important",
-        }}
-      >
-        {showMoreButtonLabel}
-      </Button>
-    );
-
-    const renderCheckboxOptions = () => {
-      if (hasSections) {
-        return optionsBySection!.map((section, sectionIndex) => (
-          <React.Fragment key={section.name}>
-            {sectionIndex > 0 && <StyledSectionDivider />}
-            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
-              {section.name}
-            </StyledSectionTitle>
-            {section.options.map(({ value, label }, i) => (
-              <CheckboxItem value={value} css={itemStyle} key={`${section.name}-${i}`}>
-                <Text typography={"labelSmall"}>{label}</Text>
-              </CheckboxItem>
-            ))}
-          </React.Fragment>
-        ));
-      }
-
-      return resolvedOptions.map(({ value, label }, i) => (
-        <CheckboxItem value={value} css={itemStyle} key={i}>
-          <Text typography={"labelSmall"}>{label}</Text>
-        </CheckboxItem>
-      ));
-    };
-
-    const renderSingleSelectOptions = () => {
-      if (hasSections) {
-        return optionsBySection!.map((section, sectionIndex) => (
-          <React.Fragment key={section.name}>
-            {sectionIndex > 0 && <StyledSectionDivider />}
-            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
-              {section.name}
-            </StyledSectionTitle>
-            {section.options.map(({ value, label }, i) => (
-              <StyledItem key={`${section.name}-${i}`} onClick={() => handleItemClick(value)}>
-                <Text typography={"labelSmall"}>{label}</Text>
-              </StyledItem>
-            ))}
-          </React.Fragment>
-        ));
-      }
-
-      return resolvedOptions.map(({ value, label }, i) => (
-        <StyledItem key={i} onClick={() => handleItemClick(value)}>
-          <Text typography={"labelSmall"}>{label}</Text>
-        </StyledItem>
-      ));
-    };
-
-    const optionsContent = !singleSelect ? (
-      <CheckboxGroup
-        value={selectedValues}
-        onValueChange={(v) => {
-          onValueChange?.(v);
-          setAllOptionsSelected((v || []).length === resolvedOptions.length);
-        }}
-      >
-        <StyledFlexWithMaxHeight
-          direction={"column"}
-          gap={8}
-          hasMaxHeight={!!maxHeight && !isMobile}
-          style={maxHeight && !isMobile ? { maxHeight } : undefined}
-        >
-          {selectAllBlock}
-          {renderCheckboxOptions()}
-          {showMoreButtonBlock}
-        </StyledFlexWithMaxHeight>
-      </CheckboxGroup>
-    ) : (
-      <StyledFlexWithMaxHeight
-        direction={"column"}
-        gap={8}
-        hasMaxHeight={!!maxHeight && !isMobile}
-        style={maxHeight && !isMobile ? { maxHeight } : undefined}
-      >
-        {renderSingleSelectOptions()}
-        {showMoreButtonBlock}
-      </StyledFlexWithMaxHeight>
-    );
-
-    const modalZIndex =
-      zIndex === "auto" ? undefined : Number(zIndex);
-
-    return (
-      <Theme style={width !== "100%" ? { width } : undefined}>
-        {isMobile ? (
-          <Modal
-            open={disabled ? false : isOpen}
-            onOpenChange={(open) => !disabled && setIsOpen(open)}
-            trigger={triggerElement}
-            title={placeholder ?? "Selecione"}
-            maxHeight={MOBILE_MODAL_MAX_HEIGHT}
-            zIndex={modalZIndex}
-            preventAutoFocus
-            fitContent
-          >
-            <StyledModalOptionsWrapper
-              css={{ maxHeight: `calc(${MOBILE_MODAL_MAX_HEIGHT} - ${MOBILE_MODAL_HEADER_OFFSET})` }}
-            >
-              {optionsContent}
-            </StyledModalOptionsWrapper>
-          </Modal>
-        ) : (
-          <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
-            <DropdownMenu.Trigger>{triggerElement}</DropdownMenu.Trigger>
-            <StyledContent
-              css={{
-                width: "100%",
-                zIndex: zIndex === "auto" ? 999999 : zIndex,
-              }}
-            >
-              {optionsContent}
-            </StyledContent>
-          </DropdownMenu.Root>
-        )}
-        <div style={{ padding: '4px 8px 0 0' }}>
-          {helperTextAfterField && (
-            <Text typography="captionMedium" fontWeight="regular" color="dark600">
-              {helperTextAfterField}
-            </Text>
-          )}
-          {selectedValues.length > 0 && showSelectedValues && (
-            <StyledFlexSelectedItems
-              direction={selectedOrientation}
-              gap={8}
-              align={selectedOrientation === "column" ? "start" : "center"}
-              justify={"start"}
-              css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
-            >
-              {allOptionsSelected ? (
-                <Flex
-                  key="all-selected"
-                  gap={4}
-                  align={"center"}
-                  css={{ flexWrap: "wrap" }}
-                >
-                  <CloseBtnStyled
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onValueChange?.([]);
-                      setAllOptionsSelected(false);
-                    }}
-                    type="button"
-                  >
-                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                  </CloseBtnStyled>
-                  <Text
-                    typography={"captionMedium"}
-                    fontWeight={"regular"}
-                    color="dark600"
-                  >
-                    {"Todos selecionados"}
-                  </Text>
-                </Flex>
-              ) : (
-                selectedValues.map((value) => (
-                  <Flex
-                    key={value}
-                    gap={4}
-                    align={"center"}
-                    css={{ flexWrap: "wrap" }}
-                  >
-                    <CloseBtnStyled
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleRemove(value);
-                      }}
-                      type="button"
-                    >
-                      <FontAwesomeIcon icon={faSquareXmark} size="sm" />
-                    </CloseBtnStyled>
-                    <Text
-                      typography={"captionMedium"}
-                      fontWeight={"regular"}
-                      color="dark600"
-                    >
-                      {labelByValue[value]}
-                    </Text>
-                  </Flex>
-                ))
-              )}
-            </StyledFlexSelectedItems>
-          )}
-        </div>
-      </Theme>
-    );
-  }
-);
+import React, { useCallback, useRef, useState } from "react";
+import { DropdownMenu, Theme } from "@radix-ui/themes";
+import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
+import { Text } from "../Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronUp,
+  faSquareXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { colors } from "@lets-events/tokens";
+import { ComponentProps, useMemo } from "react";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import {
+  CloseBtnStyled,
+  ButtonSelectAllStyled,
+  itemStyle,
+  StyledContent,
+  StyledFlexSelectedItems,
+  StyledFlexWithMaxHeight,
+  StyledItem,
+  StyledModalOptionsWrapper,
+  StyledSectionDivider,
+  StyledSectionTitle,
+  StyledText,
+  StyledTrigger,
+} from "./styledComponents";
+
+const MOBILE_MODAL_MAX_HEIGHT = "90vh";
+const MOBILE_MODAL_HEADER_OFFSET = "65px";
+
+const MOBILE_BREAKPOINT = "(max-width: 840px)";
+
+export type MultiSelectOption = {
+  label: string;
+  value: string;
+};
+
+export type MultiSelectSection = {
+  name: string;
+  options: MultiSelectOption[];
+};
+
+export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+  placeholder?: string;
+  value?: string[];
+  onValueChange?: (v: string[]) => void;
+  options?: MultiSelectOption[];
+  optionsBySection?: MultiSelectSection[];
+  width?: string;
+  zIndex?: string;
+  showSelectedValues?: boolean;
+  singleSelect?: boolean;
+  selectedOrientation?: "row" | "column";
+  disabled?: boolean;
+  maxHeight?: string;
+  selectedAllOptions?: boolean;
+  selectedAllText?: string;
+  selectedScroll?: boolean;
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
+  helperTextAfterField?: string;
+};
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      placeholder,
+      value: selectedValues = [],
+      onValueChange,
+      options = [],
+      optionsBySection,
+      color,
+      width = "100%",
+      zIndex = "auto",
+      showSelectedValues = true,
+      singleSelect = false,
+      selectedOrientation = "column",
+      disabled = false,
+      maxHeight,
+      selectedAllOptions = false,
+      selectedAllText,
+      selectedScroll = false,
+      showMoreButton = false,
+      showMoreButtonLabel = "Carregar mais",
+      showMoreButtonOnClick,
+      helperTextAfterField = "",
+    },
+    fowardedRef
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const [allOptionsSelected, setAllOptionsSelected] = useState(false);
+    const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+    const hasSections = !!optionsBySection?.length;
+
+    const resolvedOptions = useMemo((): MultiSelectOption[] => {
+      if (hasSections) {
+        return optionsBySection!.reduce<MultiSelectOption[]>(
+          (acc, section) => acc.concat(section.options),
+          []
+        );
+      }
+      return options;
+    }, [hasSections, options, optionsBySection]);
+
+    const labelByValue = useMemo(() => {
+      return resolvedOptions.reduce<{ [key: string]: string }>((prev, curr) => {
+        return {
+          ...prev,
+          [curr.value]: curr.label,
+        };
+      }, {});
+    }, [resolvedOptions]);
+
+    const handleRemove = useCallback(
+      (value: string) => {
+        const newValue = selectedValues.filter((v) => v !== value);
+        onValueChange?.(newValue);
+      },
+      [selectedValues, onValueChange]
+    );
+
+    const handleSelectAll = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const allSelected = selectedValues.length === resolvedOptions.length;
+        if (allSelected) {
+          onValueChange?.([]);
+          setAllOptionsSelected(false)
+        } else {
+          onValueChange?.(resolvedOptions.map((o) => o.value));
+          setAllOptionsSelected(true)
+        }
+      },
+      [selectedValues, resolvedOptions, onValueChange]
+    );
+
+    const text = useMemo(() => {
+      if (selectedValues.length > 0 && singleSelect) {
+        const value = selectedValues[0];
+        return labelByValue[value];
+      }
+      return placeholder ?? "Selecione";
+    }, [selectedValues, placeholder, singleSelect, labelByValue]);
+
+    const handleItemClick = (v: string) => {
+      onValueChange?.([v]);
+      setIsOpen(false);
+    };
+
+    const handleToggle = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        setIsOpen((prev) => !prev);
+      },
+      [disabled]
+    );
+
+    const triggerElement = (
+      <StyledTrigger
+        ref={(r) => {
+          if (!r) return;
+          triggerRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else fowardedRef.current = r;
+          }
+        }}
+        color={color}
+        disabled={disabled}
+        style={width !== "100%" ? { width } : undefined}
+        onClick={!isMobile ? handleToggle : undefined}
+      >
+        <StyledText
+          typography={"labelMedium"}
+          color={disabled ? "dark400" : undefined}
+        >
+          {text}
+        </StyledText>
+        <FontAwesomeIcon
+          icon={isOpen ? faChevronUp : faChevronDown}
+          size="sm"
+          color={disabled ? colors.dark400 : colors.dark600}
+        />
+      </StyledTrigger>
+    );
+
+    const selectAllBlock = selectedAllOptions && (
+      <>
+        <ButtonSelectAllStyled
+          css={itemStyle}
+          onClick={(e) => {
+            handleSelectAll(e);
+            setIsOpen(false);
+          }}
+          type="button"
+        >
+          <div className={allOptionsSelected ? "checked" : ""}></div>
+          <Text typography="labelSmall">
+            {selectedAllText ? selectedAllText : "Selecionar Todos"}
+          </Text>
+        </ButtonSelectAllStyled>
+        <StyledSectionDivider />
+      </>
+    );
+
+    const showMoreButtonBlock = showMoreButton && showMoreButtonOnClick && (
+      <Button
+        variant="menuDropdownItem"
+        color="brand"
+        onClick={showMoreButtonOnClick}
+        fontWeight="semibold"
+        type="button"
+        css={{
+          justifyContent: "flex-start",
+          color: "var(--colors-brand500)!important",
+        }}
+      >
+        {showMoreButtonLabel}
+      </Button>
+    );
+
+    const renderCheckboxOptions = () => {
+      if (hasSections) {
+        return optionsBySection!.map((section, sectionIndex) => (
+          <React.Fragment key={section.name}>
+            {sectionIndex > 0 && <StyledSectionDivider />}
+            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
+              {section.name}
+            </StyledSectionTitle>
+            {section.options.map(({ value, label }, i) => (
+              <CheckboxItem value={value} css={itemStyle} key={`${section.name}-${i}`}>
+                <Text typography={"labelSmall"}>{label}</Text>
+              </CheckboxItem>
+            ))}
+          </React.Fragment>
+        ));
+      }
+
+      return resolvedOptions.map(({ value, label }, i) => (
+        <CheckboxItem value={value} css={itemStyle} key={i}>
+          <Text typography={"labelSmall"}>{label}</Text>
+        </CheckboxItem>
+      ));
+    };
+
+    const renderSingleSelectOptions = () => {
+      if (hasSections) {
+        return optionsBySection!.map((section, sectionIndex) => (
+          <React.Fragment key={section.name}>
+            {sectionIndex > 0 && <StyledSectionDivider />}
+            <StyledSectionTitle typography="labelSmall" fontWeight="semibold" color="dark600">
+              {section.name}
+            </StyledSectionTitle>
+            {section.options.map(({ value, label }, i) => (
+              <StyledItem key={`${section.name}-${i}`} onClick={() => handleItemClick(value)}>
+                <Text typography={"labelSmall"}>{label}</Text>
+              </StyledItem>
+            ))}
+          </React.Fragment>
+        ));
+      }
+
+      return resolvedOptions.map(({ value, label }, i) => (
+        <StyledItem key={i} onClick={() => handleItemClick(value)}>
+          <Text typography={"labelSmall"}>{label}</Text>
+        </StyledItem>
+      ));
+    };
+
+    const optionsContent = !singleSelect ? (
+      <CheckboxGroup
+        value={selectedValues}
+        onValueChange={(v) => {
+          onValueChange?.(v);
+          setAllOptionsSelected((v || []).length === resolvedOptions.length);
+        }}
+      >
+        <StyledFlexWithMaxHeight
+          direction={"column"}
+          gap={8}
+          hasMaxHeight={!!maxHeight && !isMobile}
+          style={maxHeight && !isMobile ? { maxHeight } : undefined}
+        >
+          {selectAllBlock}
+          {renderCheckboxOptions()}
+          {showMoreButtonBlock}
+        </StyledFlexWithMaxHeight>
+      </CheckboxGroup>
+    ) : (
+      <StyledFlexWithMaxHeight
+        direction={"column"}
+        gap={8}
+        hasMaxHeight={!!maxHeight && !isMobile}
+        style={maxHeight && !isMobile ? { maxHeight } : undefined}
+      >
+        {renderSingleSelectOptions()}
+        {showMoreButtonBlock}
+      </StyledFlexWithMaxHeight>
+    );
+
+    const modalZIndex =
+      zIndex === "auto" ? undefined : Number(zIndex);
+
+    return (
+      <Theme style={width !== "100%" ? { width } : undefined}>
+        {isMobile ? (
+          <Modal
+            open={disabled ? false : isOpen}
+            onOpenChange={(open) => !disabled && setIsOpen(open)}
+            trigger={triggerElement}
+            title={placeholder ?? "Selecione"}
+            maxHeight={MOBILE_MODAL_MAX_HEIGHT}
+            zIndex={modalZIndex}
+            preventAutoFocus
+            titleTypography="headline8"
+            fitContent
+          >
+            <StyledModalOptionsWrapper
+              css={{ maxHeight: `calc(${MOBILE_MODAL_MAX_HEIGHT} - ${MOBILE_MODAL_HEADER_OFFSET})` }}
+            >
+              {optionsContent}
+            </StyledModalOptionsWrapper>
+          </Modal>
+        ) : (
+          <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+            <DropdownMenu.Trigger>{triggerElement}</DropdownMenu.Trigger>
+            <StyledContent
+              css={{
+                width: "100%",
+                zIndex: zIndex === "auto" ? 999999 : zIndex,
+              }}
+            >
+              {optionsContent}
+            </StyledContent>
+          </DropdownMenu.Root>
+        )}
+        <div style={{ padding: '4px 8px 0 0' }}>
+          {helperTextAfterField && (
+            <Text typography="captionMedium" fontWeight="regular" color="dark600">
+              {helperTextAfterField}
+            </Text>
+          )}
+          {selectedValues.length > 0 && showSelectedValues && (
+            <StyledFlexSelectedItems
+              direction={selectedOrientation}
+              gap={8}
+              align={selectedOrientation === "column" ? "start" : "center"}
+              justify={"start"}
+              css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
+            >
+              {allOptionsSelected ? (
+                <Flex
+                  key="all-selected"
+                  gap={4}
+                  align={"center"}
+                  css={{ flexWrap: "wrap" }}
+                >
+                  <CloseBtnStyled
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onValueChange?.([]);
+                      setAllOptionsSelected(false);
+                    }}
+                    type="button"
+                  >
+                    <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                  </CloseBtnStyled>
+                  <Text
+                    typography={"captionMedium"}
+                    fontWeight={"regular"}
+                    color="dark600"
+                  >
+                    {"Todos selecionados"}
+                  </Text>
+                </Flex>
+              ) : (
+                selectedValues.map((value) => (
+                  <Flex
+                    key={value}
+                    gap={4}
+                    align={"center"}
+                    css={{ flexWrap: "wrap" }}
+                  >
+                    <CloseBtnStyled
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(value);
+                      }}
+                      type="button"
+                    >
+                      <FontAwesomeIcon icon={faSquareXmark} size="sm" />
+                    </CloseBtnStyled>
+                    <Text
+                      typography={"captionMedium"}
+                      fontWeight={"regular"}
+                      color="dark600"
+                    >
+                      {labelByValue[value]}
+                    </Text>
+                  </Flex>
+                ))
+              )}
+            </StyledFlexSelectedItems>
+          )}
+        </div>
+      </Theme>
+    );
+  }
+);