@lets-events/react 11.7.10 → 11.8.0

package/src/components/Modal.tsx

@@ -1,90 +1,90 @@
-import { ComponentProps } from "react";
-import { styled } from "../styles";
-import { Dialog as ModalRadix } from "radix-ui";
-import Icon from "./Icon";
-import { Box } from "./Box";
-import { Text } from "./Text";
-
-const ModalContentStyled = styled(ModalRadix.Content, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  maxWidth: "502px",
-  width: "100%",
-  border: "1px solid $neutral",
-  borderRadius: "$2xl",
-  boxShadow:
-    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  backgroundColor: "$dark50",
-  zIndex: '10001'
-});
-
-const ModalOverlay = styled(ModalRadix.Overlay, {
-  position: "fixed",
-  inset: 0,
-  opacity: 1,
-  backgroundColor: "rgba(0, 0, 0, .5)",
-  zIndex: '10000'
-});
-
-const ModalHeaderStyled = styled("div", {
-  borderBottom: "1px solid $neutral300",
-  padding: "$18 $24",
-  textAlign: "center",
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-const ModalIconClose = styled(Icon, {
-  position: "absolute",
-  right: "$24",
-  cursor: "pointer",
-});
-
-const ModalTitleStyled = styled(ModalRadix.Title, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$18",
-  fontWeight: "medium",
-  fontStyle: "normal",
-  textTransform: "uppercase",
-});
-
-export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
-  trigger?: React.ReactNode;
-  title?: string;
-  children: React.ReactNode;
-};
-
-export function Modal({ children, title, trigger, ...props }: ModalProps) {
-  return (
-    <ModalRadix.Root {...props}>
-      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
-      <ModalRadix.Portal>
-        <ModalOverlay>
-          <ModalContentStyled>
-            {title && (
-              <ModalHeaderStyled>
-                <ModalTitleStyled asChild>
-                  <Text typography={"headline6"} fontWeight={"medium"}>
-                    {title}
-                  </Text>
-                </ModalTitleStyled>
-                <ModalRadix.Close asChild>
-                  <ModalIconClose name="close" size="xl" />
-                </ModalRadix.Close>
-              </ModalHeaderStyled>
-            )}
-            <Box>{children}</Box>
-          </ModalContentStyled>
-        </ModalOverlay>
-      </ModalRadix.Portal>
-    </ModalRadix.Root>
-  );
-}
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { Dialog as ModalRadix } from "radix-ui";
+import Icon from "./Icon";
+import { Box } from "./Box";
+import { Text } from "./Text";
+
+const ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  maxWidth: "502px",
+  width: "100%",
+  border: "1px solid $neutral",
+  borderRadius: "$2xl",
+  boxShadow:
+    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: '10001'
+});
+
+const ModalOverlay = styled(ModalRadix.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: '10000'
+});
+
+const ModalHeaderStyled = styled("div", {
+  borderBottom: "1px solid $neutral300",
+  padding: "$18 $24",
+  textAlign: "center",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const ModalIconClose = styled(Icon, {
+  position: "absolute",
+  right: "$24",
+  cursor: "pointer",
+});
+
+const ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$18",
+  fontWeight: "medium",
+  fontStyle: "normal",
+  textTransform: "uppercase",
+});
+
+export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
+  trigger?: React.ReactNode;
+  title?: string;
+  children: React.ReactNode;
+};
+
+export function Modal({ children, title, trigger, ...props }: ModalProps) {
+  return (
+    <ModalRadix.Root {...props}>
+      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
+      <ModalRadix.Portal>
+        <ModalOverlay>
+          <ModalContentStyled>
+            {title && (
+              <ModalHeaderStyled>
+                <ModalTitleStyled asChild>
+                  <Text typography={"headline6"} fontWeight={"medium"}>
+                    {title}
+                  </Text>
+                </ModalTitleStyled>
+                <ModalRadix.Close asChild>
+                  <ModalIconClose name="close" size="xl" />
+                </ModalRadix.Close>
+              </ModalHeaderStyled>
+            )}
+            <Box>{children}</Box>
+          </ModalContentStyled>
+        </ModalOverlay>
+      </ModalRadix.Portal>
+    </ModalRadix.Root>
+  );
+}

package/src/components/MultiSelect.tsx

@@ -1,218 +1,252 @@
-import { DropdownMenu, Theme } from "@radix-ui/themes";
-import { Button } from "./Button";
-import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";
-import { styled, css } from "../styles";
-import { Text } from "./Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChevronDown,
-  faChevronUp,
-  faX,
-} from "@fortawesome/free-solid-svg-icons";
-import { colors } from "@lets-events/tokens";
-import { ComponentProps, useCallback, useMemo, useRef, useState } from "react";
-import { Flex } from "./Flex";
-import { CSS } from "@stitches/react";
-import React from "react";
-import { Badge } from "./Badge";
-
-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",
-});
-
-const StyledTrigger = styled("div", {
-  minHeight: "40px",
-  borderRadius: "$sm",
-  cursor: "pointer",
-  display: "flex",
-  justifyContent: "start",
-  alignItems: "center",
-  padding: "$6 $14",
-  boxSizing: "border-box",
-  gap: "4px",
-
-  variants: {
-    color: {
-      default: {
-        border: "1px solid $dark300",
-      },
-      error: {
-        border: "1px solid $error400",
-      },
-    },
-  },
-
-  defaultVariants: {
-    color: "default",
-  },
-});
-
-const itemStyle: CSS = {
-  padding: "$4 $16",
-  minHeight: "$32",
-  boxSizing: "border-box",
-  backgroundColor: "$dark50",
-  display: "block",
-
-  "&:hover": {
-    backgroundColor: "$dark100",
-  },
-};
-
-const BadgeWrapper = styled("div", {
-  flex: "1",
-  display: "flex",
-  justifyContent: "start",
-  flexWrap: "wrap",
-  gap: "4px",
-});
-
-const BadgeCloseBtn = styled("div", {
-  borderRadius: "100%",
-  width: "16px",
-  height: "16px",
-  minWidth: "16px",
-  minHeight: "16px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-
-  "&:hover": {
-    backgroundColor: "$dark600",
-  },
-});
-
-export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
-  placeholder?: string;
-  value?: string[];
-  onValueChange?: (v: string[]) => void;
-  options: Array<{
-    label: string;
-    value: string;
-  }>;
-  width?: string;
-  zIndex?: string;
-};
-
-export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
-  (
-    {
-      placeholder,
-      value: selectedValues = [],
-      onValueChange,
-      options,
-      color,
-      width = "100%",
-      zIndex = "auto",
-    },
-    fowardedRef
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const triggerRef = useRef<HTMLDivElement>(null);
-
-    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 menuWidth = triggerRef.current?.offsetWidth;
-
-    return (
-      <Theme>
-        <DropdownMenu.Root open={isOpen} onOpenChange={() => setIsOpen(false)}>
-          <DropdownMenu.Trigger onClick={() => setIsOpen(true)}>
-            <StyledTrigger
-              css={{
-                width,
-              }}
-              ref={(r) => {
-                if (!r) return;
-                triggerRef.current = r;
-                if (fowardedRef) {
-                  if (typeof fowardedRef === "function") fowardedRef(r);
-                  else {
-                    fowardedRef.current = r;
-                  }
-                }
-              }}
-              color={color}
-            >
-              {selectedValues.length === 0 ? (
-                <Text typography={"labelMedium"} css={{ flex: 1 }}>
-                  {placeholder ?? "Selecione"}
-                </Text>
-              ) : (
-                <BadgeWrapper>
-                  {selectedValues.map((value) => {
-                    return (
-                      <Badge key={value} size={"sm"} color={"dark"}>
-                        <Flex justify={"between"} align={"center"}>
-                          <Text typography={"badgeSmall"} color="dark100">
-                            {labelByValue[value]}
-                          </Text>
-                          <BadgeCloseBtn
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleRemove(value);
-                            }}
-                            role="button"
-                          >
-                            <FontAwesomeIcon icon={faX} size="xs" />
-                          </BadgeCloseBtn>
-                        </Flex>
-                      </Badge>
-                    );
-                  })}
-                </BadgeWrapper>
-              )}
-              <FontAwesomeIcon
-                icon={isOpen ? faChevronUp : faChevronDown}
-                size="sm"
-                color={colors.dark600}
-              />
-            </StyledTrigger>
-          </DropdownMenu.Trigger>
-          <StyledContent
-            css={{
-              width: menuWidth ? menuWidth + "px" : width,
-              zIndex,
-            }}
-          >
-            <CheckboxGroup
-              value={selectedValues}
-              onValueChange={(v) => {
-                onValueChange?.(v);
-              }}
-            >
-              <Flex direction={"column"} gap={8}>
-                {options.map(({ value, label }, i) => (
-                  <CheckboxItem value={value} css={itemStyle} key={i}>
-                    <Text typography={"labelSmall"}>{label}</Text>
-                  </CheckboxItem>
-                ))}
-              </Flex>
-            </CheckboxGroup>
-          </StyledContent>
-        </DropdownMenu.Root>
-      </Theme>
-    );
-  }
-);
+import { DropdownMenu, Theme } from "@radix-ui/themes";
+import { Button } from "./Button";
+import { CheckboxGroup, CheckboxItem } from "./CheckboxGroup";
+import { styled, css } from "../styles";
+import { Text } from "./Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronUp,
+  faSquareXmark,
+  faX,
+} from "@fortawesome/free-solid-svg-icons";
+import { colors } from "@lets-events/tokens";
+import { ComponentProps, useCallback, useMemo, useRef, useState } from "react";
+import { Flex } from "./Flex";
+import { CSS } from "@stitches/react";
+import React from "react";
+import { Badge } from "./Badge";
+
+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",
+});
+
+const StyledTrigger = styled("div", {
+  minHeight: "40px",
+  borderRadius: "$sm",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "start",
+  alignItems: "center",
+  padding: "$6 $14",
+  boxSizing: "border-box",
+  gap: "4px",
+
+  variants: {
+    color: {
+      default: {
+        border: "1px solid $dark300",
+      },
+      error: {
+        border: "1px solid $error400",
+      },
+    },
+  },
+
+  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 BadgeWrapper = styled("div", {
+  flex: "1",
+  display: "flex",
+  gap: "4px",
+  marginTop: "8px",
+  flexDirection: "column",
+});
+
+const BadgeCloseBtn = styled("div", {
+  cursor: "pointer",
+});
+
+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;
+};
+
+export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      placeholder,
+      value: selectedValues = [],
+      onValueChange,
+      options,
+      color,
+      width = "100%",
+      zIndex = "auto",
+      showSelectedValues = true,
+      singleSelect = false,
+    },
+    fowardedRef
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    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 menuWidth = triggerRef.current?.offsetWidth;
+
+    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);
+    };
+
+    return (
+      <Theme>
+        <DropdownMenu.Root open={isOpen} onOpenChange={() => setIsOpen(false)}>
+          <DropdownMenu.Trigger onClick={() => setIsOpen(true)}>
+            <StyledTrigger
+              css={{
+                width,
+              }}
+              ref={(r) => {
+                if (!r) return;
+                triggerRef.current = r;
+                if (fowardedRef) {
+                  if (typeof fowardedRef === "function") fowardedRef(r);
+                  else {
+                    fowardedRef.current = r;
+                  }
+                }
+              }}
+              color={color}
+            >
+              <Text
+                typography={"labelMedium"}
+                css={{
+                  flex: 1,
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {text}
+              </Text>
+              <FontAwesomeIcon
+                icon={isOpen ? faChevronUp : faChevronDown}
+                size="sm"
+                color={colors.dark600}
+              />
+            </StyledTrigger>
+          </DropdownMenu.Trigger>
+          <StyledContent
+            css={{
+              width: menuWidth ? menuWidth + "px" : width,
+              zIndex,
+            }}
+          >
+            {!singleSelect ? (
+              <CheckboxGroup
+                value={selectedValues}
+                onValueChange={(v) => {
+                  onValueChange?.(v);
+                }}
+              >
+                <Flex direction={"column"} gap={8}>
+                  {options.map(({ value, label }, i) => (
+                    <CheckboxItem value={value} css={itemStyle} key={i}>
+                      <Text typography={"labelSmall"}>{label}</Text>
+                    </CheckboxItem>
+                  ))}
+                </Flex>
+              </CheckboxGroup>
+            ) : (
+              <Flex direction={"column"} gap={8}>
+                {options.map(({ value, label }, i) => (
+                  <StyledItem key={i} onClick={() => handleItemClick(value)}>
+                    <Text typography={"labelSmall"}>{label}</Text>
+                  </StyledItem>
+                ))}
+              </Flex>
+            )}
+          </StyledContent>
+        </DropdownMenu.Root>
+        {selectedValues.length > 0 && showSelectedValues && (
+          <>
+            <BadgeWrapper>
+              {selectedValues.map((value) => {
+                return (
+                  <Flex gap={4}>
+                    <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>
+                );
+              })}
+            </BadgeWrapper>
+          </>
+        )}
+      </Theme>
+    );
+  }
+);