@lets-events/react 12.4.1 → 12.5.0

package/src/components/DoubleCalendar/index.tsx

@@ -1,166 +1,170 @@
-import React, { ComponentProps, useRef, useEffect, useState } from "react";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { DayPicker } from "react-day-picker";
-import { ptBR } from "date-fns/locale";
-import { format, addYears } from "date-fns";
-import { Button } from "../Button";
-import { Box } from "../Box";
-import { TextField, TextFieldSlot } from "../TextField";
-import Icon from "../Icon";
-import {
-    CalendarContentStyled,
-    CalendarFooterStyled,
-    CalendarStyled,
-    DayPickerWrapperStyled,
-    CalendarButtonStyled,
-} from "../Calendar/styledComponents";
-
-export type DateRange = { from?: Date; to?: Date } | undefined;
-
-export type DoubleCalendarProps = ComponentProps<typeof CalendarStyled> & {
-    calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
-    selected: DateRange;
-    setSelected: React.Dispatch<React.SetStateAction<DateRange>>;
-    position?: "top" | "bottom" | "top-right" | "bottom-right";
-    action?: boolean;
-    actionText?: string;
-    hasError?: boolean;
-    expand?: boolean;
-    allowPastDates?: boolean;
-    maxYearsFromNow?: number;
-};
-
-export function DoubleCalendar({
-    action,
-    actionText,
-    calendarLayout,
-    selected,
-    setSelected,
-    position = "bottom",
-    hasError,
-    expand,
-    allowPastDates = false,
-    maxYearsFromNow = 20,
-    ...props
-}: DoubleCalendarProps) {
-    const [startValue, setStartValue] = useState("");
-    const [endValue, setEndValue] = useState("");
-    const [showContainer, setShowCalendar] = useState(false);
-    const initialSelectedRef = useRef<DateRange | undefined>(undefined);
-
-    const dropdownRef = useRef<HTMLDivElement>(null);
-
-    useOnClickOutside(dropdownRef, () => {
-        setShowCalendar(false);
-    });
-    const today = new Date();
-    const maxDate = addYears(today, maxYearsFromNow);
-
-    useEffect(() => {
-        if (selected && selected.from) {
-            setStartValue(format(selected.from, "dd/MM/yyyy"));
-        } else {
-            setStartValue("");
-        }
-
-        if (selected && selected.to) {
-            setEndValue(format(selected.to, "dd/MM/yyyy"));
-        } else {
-            setEndValue("");
-        }
-    }, [selected]);
-
-    return (
-        <div>
-            <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
-                <CalendarButtonStyled
-                    expand={expand}
-                    type="button"
-                    onClick={() =>
-                        setShowCalendar((prev) => {
-                            const next = !prev;
-                            if (!prev) initialSelectedRef.current = selected;
-                            return next;
-                        })
-                    }
-                >
-                    <div style={{ display: "flex", gap: "8px", width: "100%" }}>
-                        <TextField
-                            placeholder="00/00/0000 - 00/00/0000"
-                            type="text"
-                            value={`${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`}
-                            readOnly
-                            inputMode="numeric"
-                            textAlign={"right"}
-                            color={hasError ? "error" : "default"}
-                        >
-                            <TextFieldSlot>
-                                <Icon name="calendar" size={"xl"} />
-                            </TextFieldSlot>
-                        </TextField>
-                    </div>
-                </CalendarButtonStyled>
-
-                {showContainer && (
-                    <CalendarContentStyled position={position}>
-                        <Box>
-                            <DayPickerWrapperStyled>
-                                <DayPicker
-                                    mode="range"
-                                    numberOfMonths={2}
-                                    captionLayout={calendarLayout}
-                                    selected={selected as any}
-                                    onSelect={setSelected}
-                                    required
-                                    locale={ptBR}
-                                    disabled={allowPastDates ? undefined : { before: today }}
-                                    fromMonth={allowPastDates ? undefined : today}
-                                    toMonth={maxDate}
-                                />
-                            </DayPickerWrapperStyled>
-                        </Box>
-
-                        {action && (
-                            <CalendarFooterStyled>
-                                <div style={{ textAlign: "center", padding: "1rem" }}>
-                                    <span>
-                                        {`${selected?.from ? format(selected.from, "dd/MM/yyyy") : "00/00/0000"} — ${selected?.to ? format(selected.to, "dd/MM/yyyy") : "00/00/0000"}`}
-                                    </span>
-                                </div>
-                                <Button
-                                    style={{ margin: "0 0.5rem" }}
-                                    variant="text"
-                                    color="neutral"
-                                    type="button"
-                                    onClick={() => {
-                                        setSelected(initialSelectedRef.current);
-                                        setShowCalendar(false);
-                                    }}
-                                    size={"medium"}
-                                    fontWeight="regular"
-                                >
-                                    Cancelar
-                                </Button>
-                                <Button
-                                    style={{ margin: "0 0.5rem" }}
-                                    variant="text"
-                                    color="brand"
-                                    type="button"
-                                    onClick={() => {
-                                        setShowCalendar(false);
-                                    }}
-                                    size={"medium"}
-                                    fontWeight="medium"
-                                >
-                                    {actionText ?? "Aplicar"}
-                                </Button>
-                            </CalendarFooterStyled>
-                        )}
-                    </CalendarContentStyled>
-                )}
-            </CalendarStyled>
-        </div>
-    );
-}
-
-export default DoubleCalendar;
+import React, { ComponentProps, useRef, useEffect, useState } from "react";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
+import { format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
+import {
+    CalendarContentStyled,
+    CalendarFooterStyled,
+    CalendarStyled,
+    DayPickerWrapperStyled,
+    CalendarButtonStyled,
+} from "../Calendar/styledComponents";
+
+export type DateRange = { from?: Date; to?: Date } | undefined;
+
+export type DoubleCalendarProps = ComponentProps<typeof CalendarStyled> & {
+    calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    selected: DateRange;
+    setSelected: React.Dispatch<React.SetStateAction<DateRange>>;
+    position?: "top" | "bottom" | "top-right" | "bottom-right";
+    action?: boolean;
+    actionText?: string;
+    hasError?: boolean;
+    expand?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+    disabled?: boolean;
+};
+
+export function DoubleCalendar({
+    action,
+    actionText,
+    calendarLayout,
+    selected,
+    setSelected,
+    position = "bottom",
+    hasError,
+    expand,
+    allowPastDates = false,
+    maxYearsFromNow = 20,
+    disabled = false,
+    ...props
+}: DoubleCalendarProps) {
+    const [startValue, setStartValue] = useState("");
+    const [endValue, setEndValue] = useState("");
+    const [showContainer, setShowCalendar] = useState(false);
+    const initialSelectedRef = useRef<DateRange | undefined>(undefined);
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useOnClickOutside(dropdownRef, () => {
+        setShowCalendar(false);
+    });
+    const today = new Date();
+    const maxDate = addYears(today, maxYearsFromNow);
+
+    useEffect(() => {
+        if (selected && selected.from) {
+            setStartValue(format(selected.from, "dd/MM/yyyy"));
+        } else {
+            setStartValue("");
+        }
+
+        if (selected && selected.to) {
+            setEndValue(format(selected.to, "dd/MM/yyyy"));
+        } else {
+            setEndValue("");
+        }
+    }, [selected]);
+
+    return (
+        <div>
+            <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
+                <CalendarButtonStyled
+                    expand={expand}
+                    type="button"
+                    onClick={() =>
+                        setShowCalendar((prev) => {
+                            const next = !prev;
+                            if (!prev) initialSelectedRef.current = selected;
+                            return next;
+                        })
+                    }
+                    disabled={disabled}
+                >
+                    <div style={{ display: "flex", gap: "8px", width: "100%" }}>
+                        <TextField
+                            placeholder="00/00/0000 - 00/00/0000"
+                            type="text"
+                            value={`${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`}
+                            readOnly
+                            inputMode="numeric"
+                            textAlign={"right"}
+                            color={hasError ? "error" : "default"}
+                            disabled={disabled}
+                        >
+                            <TextFieldSlot>
+                                <Icon name="calendar" size={"xl"} />
+                            </TextFieldSlot>
+                        </TextField>
+                    </div>
+                </CalendarButtonStyled>
+
+                {showContainer && (
+                    <CalendarContentStyled position={position}>
+                        <Box>
+                            <DayPickerWrapperStyled>
+                                <DayPicker
+                                    mode="range"
+                                    numberOfMonths={2}
+                                    captionLayout={calendarLayout}
+                                    selected={selected as any}
+                                    onSelect={setSelected}
+                                    required
+                                    locale={ptBR}
+                                    disabled={allowPastDates ? undefined : { before: today }}
+                                    fromMonth={allowPastDates ? undefined : today}
+                                    toMonth={maxDate}
+                                />
+                            </DayPickerWrapperStyled>
+                        </Box>
+
+                        {action && (
+                            <CalendarFooterStyled>
+                                <div style={{ textAlign: "center", padding: "1rem" }}>
+                                    <span>
+                                        {`${selected?.from ? format(selected.from, "dd/MM/yyyy") : "00/00/0000"} — ${selected?.to ? format(selected.to, "dd/MM/yyyy") : "00/00/0000"}`}
+                                    </span>
+                                </div>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="neutral"
+                                    type="button"
+                                    onClick={() => {
+                                        setSelected(initialSelectedRef.current);
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="regular"
+                                >
+                                    Cancelar
+                                </Button>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="brand"
+                                    type="button"
+                                    onClick={() => {
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="medium"
+                                >
+                                    {actionText ?? "Aplicar"}
+                                </Button>
+                            </CalendarFooterStyled>
+                        )}
+                    </CalendarContentStyled>
+                )}
+            </CalendarStyled>
+        </div>
+    );
+}
+
+export default DoubleCalendar;

package/src/components/Drawer/index.tsx

@@ -1,98 +1,100 @@
-import { ComponentProps, ReactNode, useEffect, useRef } from "react";
-import { colors, Colors } from "@lets-events/tokens";
-import Icon from "../Icon";
-import {
-  DrawerOverlayStyled,
-  DrawerContainerStyled,
-  DrawerHeaderDiv,
-  DrawerHeaderTitle,
-  DrawerHeaderCloseButton,
-  GoBackButtonStyled,
-  DrawerWrapper,
-} from "./styledComponents";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { Flex } from "../Flex";
-
-export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
-  isOpen: boolean;
-  onClose: () => void;
-  width?: string;
-  backgroundColor?: keyof Colors;
-  title: string;
-  children?: ReactNode;
-  goBackIcon?: ReactNode;
-  goBackAction?: () => void;
-  zIndex?: number;
-};
-
-export function Drawer({
-  isOpen,
-  onClose,
-  width,
-  backgroundColor,
-  title,
-  children,
-  goBackIcon,
-  goBackAction,
-  zIndex = 1000,
-}: DrawerProps) {
-  useEffect(() => {
-    if (isOpen) {
-      const scrollbarWidth =
-        window.innerWidth - document.documentElement.clientWidth;
-
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-
-    return () => {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    };
-  }, [isOpen]);
-
-  return (
-    <>
-      <DrawerOverlayStyled
-        css={{
-          zIndex,
-        }}
-        onClick={onClose}
-        open={isOpen}
-      />
-      <DrawerWrapper
-        css={{
-          zIndex: zIndex + 1,
-          width: width ?? "34.25rem",
-          maxWidth: "100%"
-        }}
-        open={isOpen}
-      >
-        <DrawerContainerStyled
-          open={isOpen}
-          css={{
-            backgroundColor: colors[backgroundColor ?? "neutral50"],
-          }}
-        >
-          <DrawerHeaderDiv>
-            <Flex gap={8} align="center">
-              {goBackIcon && goBackIcon && (
-                <GoBackButtonStyled type="button" onClick={goBackAction}>
-                  {goBackIcon}
-                </GoBackButtonStyled>
-              )}
-              <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
-            </Flex>
-            <DrawerHeaderCloseButton onClick={onClose}>
-              <Icon size={"xl"} color="$dark600" name="xmark" />
-            </DrawerHeaderCloseButton>
-          </DrawerHeaderDiv>
-          {isOpen ? children : null}
-        </DrawerContainerStyled>
-      </DrawerWrapper>
-    </>
-  );
-}
+import { ComponentProps, ReactNode, useEffect, useRef } from "react";
+import { colors, Colors } from "@lets-events/tokens";
+import Icon from "../Icon";
+import {
+  DrawerOverlayStyled,
+  DrawerContainerStyled,
+  DrawerHeaderDiv,
+  DrawerHeaderTitle,
+  DrawerHeaderCloseButton,
+  GoBackButtonStyled,
+  DrawerWrapper,
+} from "./styledComponents";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { Flex } from "../Flex";
+
+export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
+  isOpen: boolean;
+  onClose: () => void;
+  width?: string;
+  backgroundColor?: keyof Colors;
+  title: string;
+  children?: ReactNode;
+  goBackIcon?: ReactNode;
+  goBackAction?: () => void;
+  zIndex?: number;
+  clickOutsideAvailable?: boolean;
+};
+
+export function Drawer({
+  isOpen,
+  onClose,
+  width,
+  backgroundColor,
+  title,
+  children,
+  goBackIcon,
+  goBackAction,
+  zIndex = 1000,
+  clickOutsideAvailable = true,
+}: DrawerProps) {
+  useEffect(() => {
+    if (isOpen) {
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
+
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <DrawerOverlayStyled
+        css={{
+          zIndex,
+        }}
+        onClick={clickOutsideAvailable ? onClose : undefined}
+        open={isOpen}
+      />
+      <DrawerWrapper
+        css={{
+          zIndex: zIndex + 1,
+          width: width ?? "34.25rem",
+          maxWidth: "100%"
+        }}
+        open={isOpen}
+      >
+        <DrawerContainerStyled
+          open={isOpen}
+          css={{
+            backgroundColor: colors[backgroundColor ?? "neutral50"],
+          }}
+        >
+          <DrawerHeaderDiv>
+            <Flex gap={8} align="center">
+              {goBackIcon && goBackIcon && (
+                <GoBackButtonStyled type="button" onClick={goBackAction}>
+                  {goBackIcon}
+                </GoBackButtonStyled>
+              )}
+              <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+            </Flex>
+            <DrawerHeaderCloseButton onClick={onClose}>
+              <Icon size={"xl"} color="$dark600" name="xmark" />
+            </DrawerHeaderCloseButton>
+          </DrawerHeaderDiv>
+          {isOpen ? children : null}
+        </DrawerContainerStyled>
+      </DrawerWrapper>
+    </>
+  );
+}