@lets-events/react 12.8.3 → 12.8.5

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.3 build
+> @lets-events/react@12.8.5 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 411.36 KB
-CJS ⚡️ Build success in 459ms
-ESM dist/index.mjs 395.98 KB
-ESM ⚡️ Build success in 460ms
+CJS dist/index.js 413.65 KB
+CJS ⚡️ Build success in 336ms
+ESM dist/index.mjs 398.23 KB
+ESM ⚡️ Build success in 337ms
 DTS Build start
-DTS ⚡️ Build success in 8332ms
-DTS dist/index.d.mts 404.05 KB
-DTS dist/index.d.ts  404.05 KB
+DTS ⚡️ Build success in 6837ms
+DTS dist/index.d.mts 404.21 KB
+DTS dist/index.d.ts  404.21 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.8.5
+
+### Patch Changes
+
+- Calendar layout
+
+## 12.8.4
+
+### Patch Changes
+
+- MultiSelect ShowMoreButton
+
 ## 12.8.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4722,13 +4722,14 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     position?: "top" | "bottom" | "top-right" | "bottom-right";
     action?: boolean;
     actionText?: string;
+    actionAlign?: "left" | "center" | "right";
     hasError?: boolean;
     expand?: boolean;
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
 };
-declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;
@@ -13548,6 +13549,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     selectedAllOptions?: boolean;
     selectedAllText?: string;
     selectedScroll?: boolean;
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -4722,13 +4722,14 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     position?: "top" | "bottom" | "top-right" | "bottom-right";
     action?: boolean;
     actionText?: string;
+    actionAlign?: "left" | "center" | "right";
     hasError?: boolean;
     expand?: boolean;
     allowPastDates?: boolean;
     maxDate?: Date;
     maxYearsFromNow?: number;
 };
-declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, actionAlign, calendarLayout, selected, setSelected, position, hasError, expand, allowPastDates, maxDate, maxYearsFromNow, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 type DateRange = {
     from?: Date;
@@ -13548,6 +13549,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     selectedAllOptions?: boolean;
     selectedAllText?: string;
     selectedScroll?: boolean;
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -7892,9 +7892,24 @@ var CalendarFooterStyled = styled("div", {
   padding: "$4 $16",
   display: "flex",
   gap: "1rem",
-  justifyContent: "flex-end",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    }
+  },
+  defaultVariants: {
+    actionAlign: "right"
+  },
   "@media (max-width: 748px)": {
     gap: "0",
     padding: "$4 $12",
@@ -7920,19 +7935,22 @@ var DayPickerWrapperStyled = styled("div", {
     color: "$dark400"
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
     backgroundColor: "transparent",
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
-    cursor: "pointer"
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500"
+    borderColor: "$brand600"
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -8006,7 +8024,8 @@ var DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500"
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
   },
   ".rdp-dropdowns": {
     display: "flex",
@@ -8094,6 +8113,7 @@ function Calendar(_a) {
   var _b = _a, {
     action,
     actionText,
+    actionAlign = "right",
     calendarLayout,
     selected,
     setSelected,
@@ -8106,6 +8126,7 @@ function Calendar(_a) {
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
+    "actionAlign",
     "calendarLayout",
     "selected",
     "setSelected",
@@ -8193,7 +8214,7 @@ function Calendar(_a) {
           endMonth: resolvedMaxDate
         }
       ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Button,
         {
           variant: "text",
@@ -9928,7 +9949,10 @@ var MultiSelect = import_react18.default.forwardRef(
     maxHeight,
     selectedAllOptions = false,
     selectedAllText,
-    selectedScroll = false
+    selectedScroll = false,
+    showMoreButton = false,
+    showMoreButtonLabel = "Carregar mais",
+    showMoreButtonOnClick
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
     const triggerRef = (0, import_react18.useRef)(null);
@@ -10056,19 +10080,51 @@ var MultiSelect = import_react18.default.forwardRef(
                           ]
                         }
                       ),
-                      options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
+                      options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
+                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                        Button,
+                        {
+                          variant: "menuDropdownItem",
+                          color: "brand",
+                          onClick: showMoreButtonOnClick,
+                          fontWeight: "semibold",
+                          type: "button",
+                          css: {
+                            justifyContent: "flex-start",
+                            color: "var(--colors-brand500)!important"
+                          },
+                          children: showMoreButtonLabel
+                        }
+                      )
                     ]
                   }
                 )
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               StyledFlexWithMaxHeight,
               {
                 direction: "column",
                 gap: 8,
                 hasMaxHeight: !!maxHeight,
                 style: maxHeight ? { maxHeight } : void 0,
-                children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
+                children: [
+                  options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
+                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Button,
+                    {
+                      variant: "menuDropdownItem",
+                      color: "brand",
+                      onClick: showMoreButtonOnClick,
+                      fontWeight: "semibold",
+                      type: "button",
+                      css: {
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important"
+                      },
+                      children: showMoreButtonLabel
+                    }
+                  )
+                ]
               }
             )
           }
@@ -13368,21 +13424,27 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDate, selectedTime } = (0, import_react28.useMemo)(() => {
-    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+  const { selectedDateFromIso, selectedTimeFromIso } = (0, import_react28.useMemo)(() => {
+    if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
       if (isNaN(date.getTime())) {
-        return { selectedDate: void 0, selectedTime: void 0 };
+        return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
       }
       const hours = String(date.getHours()).padStart(2, "0");
       const minutes = String(date.getMinutes()).padStart(2, "0");
       const time = `${hours}:${minutes}`;
-      return { selectedDate: date, selectedTime: time };
+      return { selectedDateFromIso: date, selectedTimeFromIso: time };
     } catch (e) {
-      return { selectedDate: void 0, selectedTime: void 0 };
+      return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
+  const [draftDate, setDraftDate] = (0, import_react28.useState)(selectedDateFromIso);
+  const [draftTime, setDraftTime] = (0, import_react28.useState)(selectedTimeFromIso);
+  (0, import_react28.useEffect)(() => {
+    setDraftDate(selectedDateFromIso);
+    setDraftTime(selectedTimeFromIso);
+  }, [selectedDateFromIso, selectedTimeFromIso]);
   const combineDateTime = (0, import_react28.useCallback)(
     (date, time) => {
       if (!date || !time) {
@@ -13397,10 +13459,12 @@ var DateAndTimeFormField = (_a) => {
     [setIsoValue]
   );
   const handleDateChange = (date) => {
-    combineDateTime(date, selectedTime);
+    setDraftDate(date);
+    combineDateTime(date, draftTime);
   };
   const handleTimeChange = (time) => {
-    combineDateTime(selectedDate, time);
+    setDraftTime(time);
+    combineDateTime(draftDate, time);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13416,9 +13480,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         Calendar,
         __spreadValues({
-          selected: selectedDate,
+          selected: draftDate,
           setSelected: (date) => {
-            const d = typeof date === "function" ? date(selectedDate) : date;
+            const d = typeof date === "function" ? date(draftDate) : date;
             handleDateChange(d);
           },
           hasError: haveError,
@@ -13430,9 +13494,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         TimePicker,
         __spreadValues({
-          selected: selectedTime,
+          selected: draftTime,
           setSelected: (value) => {
-            const time = typeof value === "function" ? value(selectedTime) : value;
+            const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
           hasError: haveError

package/dist/index.mjs

@@ -7776,9 +7776,24 @@ var CalendarFooterStyled = styled("div", {
   padding: "$4 $16",
   display: "flex",
   gap: "1rem",
-  justifyContent: "flex-end",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    }
+  },
+  defaultVariants: {
+    actionAlign: "right"
+  },
   "@media (max-width: 748px)": {
     gap: "0",
     padding: "$4 $12",
@@ -7804,19 +7819,22 @@ var DayPickerWrapperStyled = styled("div", {
     color: "$dark400"
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
     backgroundColor: "transparent",
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
-    cursor: "pointer"
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500"
+    borderColor: "$brand600"
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -7890,7 +7908,8 @@ var DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500"
+    borderColor: "$brand600",
+    borderRadius: "0.5rem"
   },
   ".rdp-dropdowns": {
     display: "flex",
@@ -7978,6 +7997,7 @@ function Calendar(_a) {
   var _b = _a, {
     action,
     actionText,
+    actionAlign = "right",
     calendarLayout,
     selected,
     setSelected,
@@ -7990,6 +8010,7 @@ function Calendar(_a) {
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
+    "actionAlign",
     "calendarLayout",
     "selected",
     "setSelected",
@@ -8077,7 +8098,7 @@ function Calendar(_a) {
           endMonth: resolvedMaxDate
         }
       ) }) }),
-      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { children: /* @__PURE__ */ jsx15(
+      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
         Button,
         {
           variant: "text",
@@ -9816,7 +9837,10 @@ var MultiSelect = React10.forwardRef(
     maxHeight,
     selectedAllOptions = false,
     selectedAllText,
-    selectedScroll = false
+    selectedScroll = false,
+    showMoreButton = false,
+    showMoreButtonLabel = "Carregar mais",
+    showMoreButtonOnClick
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = useState8(false);
     const triggerRef = useRef8(null);
@@ -9944,19 +9968,51 @@ var MultiSelect = React10.forwardRef(
                           ]
                         }
                       ),
-                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
+                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
+                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
+                        Button,
+                        {
+                          variant: "menuDropdownItem",
+                          color: "brand",
+                          onClick: showMoreButtonOnClick,
+                          fontWeight: "semibold",
+                          type: "button",
+                          css: {
+                            justifyContent: "flex-start",
+                            color: "var(--colors-brand500)!important"
+                          },
+                          children: showMoreButtonLabel
+                        }
+                      )
                     ]
                   }
                 )
               }
-            ) : /* @__PURE__ */ jsx27(
+            ) : /* @__PURE__ */ jsxs16(
               StyledFlexWithMaxHeight,
               {
                 direction: "column",
                 gap: 8,
                 hasMaxHeight: !!maxHeight,
                 style: maxHeight ? { maxHeight } : void 0,
-                children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
+                children: [
+                  options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
+                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
+                    Button,
+                    {
+                      variant: "menuDropdownItem",
+                      color: "brand",
+                      onClick: showMoreButtonOnClick,
+                      fontWeight: "semibold",
+                      type: "button",
+                      css: {
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important"
+                      },
+                      children: showMoreButtonLabel
+                    }
+                  )
+                ]
               }
             )
           }
@@ -13214,7 +13270,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 import { useController as useController7 } from "react-hook-form";
-import { useCallback as useCallback8, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo4, useState as useState13 } from "react";
 import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13261,21 +13317,27 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDate, selectedTime } = useMemo4(() => {
-    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+  const { selectedDateFromIso, selectedTimeFromIso } = useMemo4(() => {
+    if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
       if (isNaN(date.getTime())) {
-        return { selectedDate: void 0, selectedTime: void 0 };
+        return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
       }
       const hours = String(date.getHours()).padStart(2, "0");
       const minutes = String(date.getMinutes()).padStart(2, "0");
       const time = `${hours}:${minutes}`;
-      return { selectedDate: date, selectedTime: time };
+      return { selectedDateFromIso: date, selectedTimeFromIso: time };
     } catch (e) {
-      return { selectedDate: void 0, selectedTime: void 0 };
+      return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
+  const [draftDate, setDraftDate] = useState13(selectedDateFromIso);
+  const [draftTime, setDraftTime] = useState13(selectedTimeFromIso);
+  useEffect11(() => {
+    setDraftDate(selectedDateFromIso);
+    setDraftTime(selectedTimeFromIso);
+  }, [selectedDateFromIso, selectedTimeFromIso]);
   const combineDateTime = useCallback8(
     (date, time) => {
       if (!date || !time) {
@@ -13290,10 +13352,12 @@ var DateAndTimeFormField = (_a) => {
     [setIsoValue]
   );
   const handleDateChange = (date) => {
-    combineDateTime(date, selectedTime);
+    setDraftDate(date);
+    combineDateTime(date, draftTime);
   };
   const handleTimeChange = (time) => {
-    combineDateTime(selectedDate, time);
+    setDraftTime(time);
+    combineDateTime(draftDate, time);
   };
   return /* @__PURE__ */ jsxs33(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ jsx59(
@@ -13309,9 +13373,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
         Calendar,
         __spreadValues({
-          selected: selectedDate,
+          selected: draftDate,
           setSelected: (date) => {
-            const d = typeof date === "function" ? date(selectedDate) : date;
+            const d = typeof date === "function" ? date(draftDate) : date;
             handleDateChange(d);
           },
           hasError: haveError,
@@ -13323,9 +13387,9 @@ var DateAndTimeFormField = (_a) => {
       /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
         TimePicker,
         __spreadValues({
-          selected: selectedTime,
+          selected: draftTime,
           setSelected: (value) => {
-            const time = typeof value === "function" ? value(selectedTime) : value;
+            const time = typeof value === "function" ? value(draftTime) : value;
             handleTimeChange(time);
           },
           hasError: haveError
@@ -13337,11 +13401,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState13, useCallback as useCallback9 } from "react";
+import { useState as useState14, useCallback as useCallback9 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState13(false);
-  const [progress, setProgress] = useState13(null);
-  const [error, setError] = useState13(null);
+  const [isUploading, setIsUploading] = useState14(false);
+  const [progress, setProgress] = useState14(null);
+  const [error, setError] = useState14(null);
   const {
     onSuccess,
     onError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.8.3",
+  "version": "12.8.5",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Calendar/index.tsx

@@ -22,6 +22,7 @@ export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
   position?: "top" | "bottom" | "top-right" | "bottom-right";
   action?: boolean;
   actionText?: string;
+  actionAlign?: "left" | "center" | "right";
   hasError?: boolean;
   expand?: boolean;
   allowPastDates?: boolean;
@@ -40,6 +41,7 @@ function formatToDateMask(value: string): string {
 export function Calendar({
   action,
   actionText,
+  actionAlign = "right",
   calendarLayout,
   selected,
   setSelected,
@@ -140,7 +142,7 @@ export function Calendar({
             </Box>
 
             {action && (
-              <CalendarFooterStyled>
+              <CalendarFooterStyled actionAlign={actionAlign}>
                 <Button
                   variant="text"
                   color="brand"

package/src/components/Calendar/styledComponents.ts

@@ -76,17 +76,32 @@ export const CalendarFooterStyled = styled("div", {
   borderTop: "2px solid $neutral100",
   padding: "$4 $16",
   display: "flex",
-  gap: '1rem',
-  justifyContent: "flex-end",
+  gap: "1rem",
   alignItems: "center",
   height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start",
+      },
+      center: {
+        justifyContent: "center",
+      },
+      right: {
+        justifyContent: "flex-end",
+      },
+    },
+  },
+  defaultVariants: {
+    actionAlign: "right",
+  },
   "@media (max-width: 748px)": {
-    gap: '0',
+    gap: "0",
     padding: "$4 $12",
     "> div": {
-      padding: '0!important',
-    }
-  }
+      padding: "0!important",
+    },
+  },
 });
 
 export const DayPickerWrapperStyled = styled("div", {
@@ -106,8 +121,8 @@ export const DayPickerWrapperStyled = styled("div", {
     color: "$dark400",
   },
   ".rdp-day_button": {
-    height: "28px",
-    width: "28px",
+    height: "32px",
+    width: "32px",
     borderRadius: "$sm",
     fontSize: "$14",
     color: "$text",
@@ -115,10 +130,13 @@ export const DayPickerWrapperStyled = styled("div", {
     border: "1px solid transparent",
     transition: "all 0.2s ease-in-out",
     cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
   },
   ".rdp-day_button:hover": {
     backgroundColor: "$dark100",
-    borderColor: "$brand500",
+    borderColor: "$brand600",
   },
   ".rdp-day.rdp-disabled .rdp-day_button:hover": {
     backgroundColor: "transparent",
@@ -196,7 +214,8 @@ export const DayPickerWrapperStyled = styled("div", {
   ".rdp-day.rdp-selected .rdp-day_button": {
     backgroundColor: "$brand500",
     color: "$neutral50",
-    borderColor: "$brand500",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem",
   },
   ".rdp-dropdowns": {
     display: "flex",

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -4,7 +4,7 @@ import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { Calendar, CalendarProps } from "../Calendar";
 import { TimePicker, TimePickerProps } from "../TimePicker";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 export type DateAndTimeFormFieldProps = Omit<
     CalendarProps,
@@ -66,25 +66,33 @@ export const DateAndTimeFormField = ({
 
     const { value: isoValue, onChange: setIsoValue } = field;
 
-    const { selectedDate, selectedTime } = useMemo(() => {
-        if (!isoValue) return { selectedDate: undefined, selectedTime: undefined };
+    const { selectedDateFromIso, selectedTimeFromIso } = useMemo(() => {
+        if (!isoValue) return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
 
         try {
             const date = new Date(isoValue);
             if (isNaN(date.getTime())) {
-                return { selectedDate: undefined, selectedTime: undefined };
+                return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
             }
 
             const hours = String(date.getHours()).padStart(2, "0");
             const minutes = String(date.getMinutes()).padStart(2, "0");
             const time = `${hours}:${minutes}`;
 
-            return { selectedDate: date, selectedTime: time };
+            return { selectedDateFromIso: date, selectedTimeFromIso: time };
         } catch {
-            return { selectedDate: undefined, selectedTime: undefined };
+            return { selectedDateFromIso: undefined, selectedTimeFromIso: undefined };
         }
     }, [isoValue]);
 
+    const [draftDate, setDraftDate] = useState<Date | undefined>(selectedDateFromIso);
+    const [draftTime, setDraftTime] = useState<string | undefined>(selectedTimeFromIso);
+
+    useEffect(() => {
+        setDraftDate(selectedDateFromIso);
+        setDraftTime(selectedTimeFromIso);
+    }, [selectedDateFromIso, selectedTimeFromIso]);
+
     const combineDateTime = useCallback(
         (date?: Date, time?: string) => {
             if (!date || !time) {
@@ -102,11 +110,13 @@ export const DateAndTimeFormField = ({
     );
 
     const handleDateChange = (date: Date | undefined) => {
-        combineDateTime(date, selectedTime);
+        setDraftDate(date);
+        combineDateTime(date, draftTime);
     };
 
     const handleTimeChange = (time: string | undefined) => {
-        combineDateTime(selectedDate, time);
+        setDraftTime(time);
+        combineDateTime(draftDate, time);
     };
 
     return (
@@ -123,9 +133,9 @@ export const DateAndTimeFormField = ({
             <Flex gap={12} align="start">
                 <Flex direction="column">
                     <Calendar
-                        selected={selectedDate}
+                        selected={draftDate}
                         setSelected={(date) => {
-                            const d = typeof date === "function" ? date(selectedDate) : date;
+                            const d = typeof date === "function" ? date(draftDate) : date;
                             handleDateChange(d);
                         }}
                         hasError={haveError}
@@ -138,9 +148,9 @@ export const DateAndTimeFormField = ({
 
                 <Flex direction="column">
                     <TimePicker
-                        selected={selectedTime}
+                        selected={draftTime}
                         setSelected={(value) => {
-                            const time = typeof value === "function" ? value(selectedTime) : value;
+                            const time = typeof value === "function" ? value(draftTime) : value;
                             handleTimeChange(time);
                         }}
                         hasError={haveError}
@@ -154,4 +164,4 @@ export const DateAndTimeFormField = ({
     );
 };
 
-export default DateAndTimeFormField
+export default DateAndTimeFormField

package/src/components/MultiSelect/index.tsx

@@ -11,6 +11,7 @@ import {
 import { colors } from "@lets-events/tokens";
 import { ComponentProps, useMemo } from "react";
 import { Flex } from "../Flex";
+import { Button } from "../Button";
 import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
 
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
@@ -31,6 +32,9 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   selectedAllOptions?: boolean;
   selectedAllText?: string;
   selectedScroll?: boolean;
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -50,7 +54,10 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       maxHeight,
       selectedAllOptions = false,
       selectedAllText,
-      selectedScroll = false
+      selectedScroll = false,
+      showMoreButton = false,
+      showMoreButtonLabel = "Carregar mais",
+      showMoreButtonOnClick
     },
     fowardedRef
   ) => {
@@ -182,6 +189,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                       <Text typography={"labelSmall"}>{label}</Text>
                     </CheckboxItem>
                   ))}
+                  {showMoreButton && showMoreButtonOnClick && (
+                    <Button
+                      variant="menuDropdownItem"
+                      color="brand"
+                      onClick={showMoreButtonOnClick}
+                      fontWeight="semibold"
+                      type="button"
+                      css={{
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important",
+                      }}
+                    >
+                      {showMoreButtonLabel}
+                    </Button>
+                  )}
                 </StyledFlexWithMaxHeight>
               </CheckboxGroup>
             ) : (
@@ -196,6 +218,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                     <Text typography={"labelSmall"}>{label}</Text>
                   </StyledItem>
                 ))}
+                {showMoreButton && showMoreButtonOnClick && (
+                  <Button
+                    variant="menuDropdownItem"
+                    color="brand"
+                    onClick={showMoreButtonOnClick}
+                    fontWeight="semibold"
+                    type="button"
+                    css={{
+                      justifyContent: "flex-start",
+                      color: "var(--colors-brand500)!important",
+                    }}
+                  >
+                    {showMoreButtonLabel}
+                  </Button>
+                )}
               </StyledFlexWithMaxHeight>
             )}
           </StyledContent>