@lets-events/react 12.5.0 → 12.6.0

package/src/components/MultiSelect/index.tsx

@@ -1,243 +1,268 @@
-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 { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
-
-export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-  placeholder?: string;
-  value?: string[];
-  onValueChange?: (v: string[]) => void;
-  options: Array<{
-    label: string;
-    value: string;
-  }>;
-  width?: string;
-  zIndex?: string;
-  showSelectedValues?: boolean;
-  singleSelect?: boolean;
-  selectedOrientation?: "row" | "column";
-  disabled?: boolean;
-  maxHeight?: string;
-  selectedAllOptions?: boolean;
-  selectedAllText?: string;
-  selectedScroll?: boolean;
-};
-
-export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
-  (
-    {
-      placeholder,
-      value: selectedValues = [],
-      onValueChange,
-      options,
-      color,
-      width = "100%",
-      zIndex = "auto",
-      showSelectedValues = true,
-      singleSelect = false,
-      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 {
-          ...prev,
-          [curr.value]: curr.label,
-        };
-      }, {});
-    }, [options]);
-
-    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 === 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]);
-
-    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]
-    );
-
-    return (
-      <Theme style={width !== "100%" ? { width } : undefined}>
-        <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
-          <DropdownMenu.Trigger>
-            <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={handleToggle}
-            >
-              <StyledText
-                typography={"labelMedium"}
-                color={disabled ? "dark400" : undefined}
-              >
-                {text}
-              </StyledText>
-              <FontAwesomeIcon
-                icon={isOpen ? faChevronUp : faChevronDown}
-                size="sm"
-                color={disabled ? colors.dark400 : colors.dark600}
-              />
-            </StyledTrigger>
-          </DropdownMenu.Trigger>
-          <StyledContent
-            css={{
-              width: "100%",
-              zIndex: zIndex === "auto" ? 999999 : zIndex,
-            }}
-          >
-            {!singleSelect ? (
-              <CheckboxGroup
-                value={selectedValues}
-                onValueChange={(v) => {
-                  onValueChange?.(v)
-                  if (allOptionsSelected) {
-                    setAllOptionsSelected(false)
-                  }
-                }}
-              >
-                <StyledFlexWithMaxHeight
-                  direction={"column"}
-                  gap={8}
-                  hasMaxHeight={!!maxHeight}
-                  style={maxHeight ? { maxHeight } : undefined}
-                >
-                  {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>
-                  )}
-
-                  {options.map(({ value, label }, i) => (
-                    <CheckboxItem value={value} css={itemStyle} key={i}>
-                      <Text typography={"labelSmall"}>{label}</Text>
-                    </CheckboxItem>
-                  ))}
-                </StyledFlexWithMaxHeight>
-              </CheckboxGroup>
-            ) : (
-              <StyledFlexWithMaxHeight
-                direction={"column"}
-                gap={8}
-                hasMaxHeight={!!maxHeight}
-                style={maxHeight ? { maxHeight } : undefined}
-              >
-                {options.map(({ value, label }, i) => (
-                  <StyledItem key={i} onClick={() => handleItemClick(value)}>
-                    <Text typography={"labelSmall"}>{label}</Text>
-                  </StyledItem>
-                ))}
-              </StyledFlexWithMaxHeight>
-            )}
-          </StyledContent>
-        </DropdownMenu.Root>
-        {selectedValues.length > 0 && showSelectedValues && (
-          <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" }}
-              >
-                <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>
-        )}
-      </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 { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
+
+export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
+  placeholder?: string;
+  value?: string[];
+  onValueChange?: (v: string[]) => void;
+  options: Array<{
+    label: string;
+    value: string;
+  }>;
+  width?: string;
+  zIndex?: string;
+  showSelectedValues?: boolean;
+  singleSelect?: boolean;
+  selectedOrientation?: "row" | "column";
+  disabled?: boolean;
+  maxHeight?: string;
+  selectedAllOptions?: boolean;
+  selectedAllText?: string;
+  selectedScroll?: boolean;
+};
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      placeholder,
+      value: selectedValues = [],
+      onValueChange,
+      options,
+      color,
+      width = "100%",
+      zIndex = "auto",
+      showSelectedValues = true,
+      singleSelect = false,
+      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 {
+          ...prev,
+          [curr.value]: curr.label,
+        };
+      }, {});
+    }, [options]);
+
+    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 === 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]);
+
+    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]
+    );
+
+    return (
+      <Theme style={width !== "100%" ? { width } : undefined}>
+        <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+          <DropdownMenu.Trigger>
+            <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={handleToggle}
+            >
+              <StyledText
+                typography={"labelMedium"}
+                color={disabled ? "dark400" : undefined}
+              >
+                {text}
+              </StyledText>
+              <FontAwesomeIcon
+                icon={isOpen ? faChevronUp : faChevronDown}
+                size="sm"
+                color={disabled ? colors.dark400 : colors.dark600}
+              />
+            </StyledTrigger>
+          </DropdownMenu.Trigger>
+          <StyledContent
+            css={{
+              width: "100%",
+              zIndex: zIndex === "auto" ? 999999 : zIndex,
+            }}
+          >
+            {!singleSelect ? (
+              <CheckboxGroup
+                value={selectedValues}
+                onValueChange={(v) => {
+                  onValueChange?.(v);
+                  setAllOptionsSelected((v || []).length === options.length);
+                }}
+              >
+                <StyledFlexWithMaxHeight
+                  direction={"column"}
+                  gap={8}
+                  hasMaxHeight={!!maxHeight}
+                  style={maxHeight ? { maxHeight } : undefined}
+                >
+                  {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>
+                  )}
+
+                  {options.map(({ value, label }, i) => (
+                    <CheckboxItem value={value} css={itemStyle} key={i}>
+                      <Text typography={"labelSmall"}>{label}</Text>
+                    </CheckboxItem>
+                  ))}
+                </StyledFlexWithMaxHeight>
+              </CheckboxGroup>
+            ) : (
+              <StyledFlexWithMaxHeight
+                direction={"column"}
+                gap={8}
+                hasMaxHeight={!!maxHeight}
+                style={maxHeight ? { maxHeight } : undefined}
+              >
+                {options.map(({ value, label }, i) => (
+                  <StyledItem key={i} onClick={() => handleItemClick(value)}>
+                    <Text typography={"labelSmall"}>{label}</Text>
+                  </StyledItem>
+                ))}
+              </StyledFlexWithMaxHeight>
+            )}
+          </StyledContent>
+        </DropdownMenu.Root>
+        {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>
+        )}
+      </Theme>
+    );
+  }
+);