@ttoss/components 2.12.5 → 2.12.7

package/dist/esm/DatePicker/index.js

@@ -17,12 +17,18 @@ var DatePicker = /* @__PURE__ */__name(({
   onChange
 }) => {
   const [date, setDate] = React.useState(value);
+  const [pickerSelection, setPickerSelection] = React.useState(value);
   const [isOpen, setIsOpen] = React.useState(false);
   const containerRef = React.useRef(null);
   const isResettingRangeRef = React.useRef(false);
   React.useEffect(() => {
     setDate(value);
   }, [value]);
+  React.useEffect(() => {
+    if (isOpen) {
+      setPickerSelection(date);
+    }
+  }, [isOpen, date]);
   React.useEffect(() => {
     const handleClickOutside = /* @__PURE__ */__name(event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -36,36 +42,50 @@ var DatePicker = /* @__PURE__ */__name(({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  const handleSelect = /* @__PURE__ */__name(range => {
+  const commitSelection = /* @__PURE__ */__name(range => {
     setDate(range);
     onChange?.(range);
-  }, "handleSelect");
+  }, "commitSelection");
   const handlePresetClick = /* @__PURE__ */__name(preset => {
     const range = preset.getValue();
-    handleSelect(range);
+    commitSelection(range);
     setIsOpen(false);
   }, "handlePresetClick");
   const handleDayPickerSelect = /* @__PURE__ */__name(selected => {
-    if (isResettingRangeRef.current && !selected) {
-      isResettingRangeRef.current = false;
+    if (isResettingRangeRef.current && !selected && pickerSelection?.from && !pickerSelection?.to) {
+      commitSelection({
+        from: pickerSelection.from,
+        to: pickerSelection.from
+      });
+      setIsOpen(false);
       return;
     }
     isResettingRangeRef.current = false;
-    if (selected?.from || selected?.to) {
-      handleSelect(selected);
-    } else {
-      handleSelect(void 0);
+    const hadFullRange = date?.from && date?.to;
+    const hadPartialPicker = pickerSelection?.from && !pickerSelection?.to;
+    if (hadFullRange && !hadPartialPicker && selected?.from && selected?.to) {
+      const clickedDay = selected.from.getTime() === date?.from?.getTime() ? selected.to : selected.from;
+      setPickerSelection({
+        from: clickedDay,
+        to: void 0
+      });
+      return;
+    }
+    setPickerSelection(selected);
+    if (selected?.from && selected?.to) {
+      commitSelection(selected);
+      setIsOpen(false);
+    } else if (!selected?.from && !selected?.to) {
+      commitSelection(void 0);
     }
   }, "handleDayPickerSelect");
   const handleDayClick = /* @__PURE__ */__name(day => {
     if (date?.from && date?.to) {
       isResettingRangeRef.current = true;
-      handleSelect({
+      setPickerSelection({
         from: day,
         to: void 0
       });
-    } else {
-      setIsOpen(false);
     }
   }, "handleDayClick");
   return /* @__PURE__ */React.createElement(Flex, {
@@ -242,16 +262,20 @@ var DatePicker = /* @__PURE__ */__name(({
         border: "none",
         fontSize: ["12px", "14px"],
         width: ["32px", "36px"],
-        height: ["32px", "36px"]
+        height: ["32px", "36px"],
+        cursor: "pointer"
       },
       "& .rdp-range_start .rdp-day_button": {
-        backgroundColor: "action.background.primary.default"
+        backgroundColor: "action.background.accent.default",
+        color: "black"
       },
       "& .rdp-range_end .rdp-day_button": {
-        backgroundColor: "action.background.primary.default"
+        backgroundColor: "action.background.accent.default",
+        color: "black"
       },
       "& .rdp-day_button:hover": {
-        backgroundColor: "action.background.accent.default"
+        backgroundColor: "action.background.primary.default",
+        color: "action.text.primary.default"
       },
       "& .rdp-day_selected": {
         backgroundColor: "action.background.accent.default",
@@ -289,7 +313,10 @@ var DatePicker = /* @__PURE__ */__name(({
   }, /* @__PURE__ */React.createElement(DayPicker, {
     mode: "range",
     locale: ptBR,
-    selected: date,
+    selected: pickerSelection?.from ? {
+      from: pickerSelection.from,
+      to: pickerSelection.to ?? pickerSelection.from
+    } : void 0,
     onSelect: /* @__PURE__ */__name(selected => {
       return handleDayPickerSelect(selected);
     }, "onSelect"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.12.5",
+  "version": "2.12.7",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -125,9 +125,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^6.5.1",
     "@ttoss/react-hooks": "^2.1.12",
     "@ttoss/react-i18n": "^2.0.26",
+    "@ttoss/ui": "^6.5.1",
     "@ttoss/react-icons": "^0.5.7"
   },
   "devDependencies": {
@@ -138,11 +138,11 @@
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.35.12",
+    "@ttoss/i18n-cli": "^0.7.38",
     "@ttoss/react-hooks": "^2.1.12",
-    "@ttoss/react-icons": "^0.5.7",
     "@ttoss/react-i18n": "^2.0.26",
-    "@ttoss/i18n-cli": "^0.7.38",
     "@ttoss/test-utils": "^4.0.3",
+    "@ttoss/react-icons": "^0.5.7",
     "@ttoss/ui": "^6.5.1"
   },
   "keywords": [