@bitrise/bitkit 12.79.0 → 12.81.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.79.0",
+  "version": "12.81.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
 import { PopoverAnchor } from '@chakra-ui/react';
@@ -44,8 +44,6 @@ export type DatePickerProps = {
 const DatePicker = (props: DatePickerProps) => {
   const { children, onApply, onClose, onClear, visible, selectable, selected, mode, variant = 'default' } = props;
 
-  const isSelectionHappened = useRef(false);
-
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
 
@@ -73,12 +71,12 @@ const DatePicker = (props: DatePickerProps) => {
     setDateFrom(undefined);
   };
 
-  const handleApply = () => {
+  const handleApply = (from: typeof dateFrom, to: typeof dateTo) => {
     if (onApply) {
       if (mode === 'day') {
-        onApply(dateFrom);
+        onApply(from);
       } else {
-        onApply(new DateRange(dateFrom, dateTo));
+        onApply(new DateRange(from, to));
       }
     }
 
@@ -113,46 +111,49 @@ const DatePicker = (props: DatePickerProps) => {
 
   const handleSelect = useCallback(
     (date: DateTime) => {
-      isSelectionHappened.current = true;
+      let previewNew: 'from' | 'to' | undefined;
+      let dateFromNew = dateFrom;
+      let dateToNew = dateTo;
 
-      setPreview(undefined);
       if (mode === 'day') {
-        setDateFrom(date);
+        dateFromNew = date;
       } else if (dateFrom && dateTo) {
         if (!preview) {
-          setPreview('from');
-          setDateFrom(date);
-          setDateTo(undefined);
+          previewNew = 'from';
+          dateFromNew = date;
+          dateToNew = undefined;
         }
       } else if (dateTo && date > dateTo) {
-        setDateFrom(dateTo);
-        setDateTo(date);
+        dateFromNew = dateTo;
+        dateToNew = date;
       } else if (dateFrom && date < dateFrom) {
-        setDateFrom(date);
-        setDateTo(dateFrom);
+        dateFromNew = date;
+        dateToNew = dateFrom;
       } else if (dateFrom) {
-        setDateTo(date);
+        dateToNew = date;
       } else {
-        setPreview('from');
-        setDateFrom(date);
+        previewNew = 'from';
+        dateFromNew = date;
       }
-    },
-    [dateFrom, dateTo, preview],
-  );
 
-  useEffect(() => {
-    if (variant === 'default') {
-      if (!dateFrom || !isSelectionHappened.current || preview) {
-        return;
-      }
+      setPreview(previewNew);
+      setDateFrom(dateFromNew);
+      setDateTo(dateToNew);
 
-      if (mode !== 'day' && !dateTo) {
-        return;
-      }
+      if (variant === 'default') {
+        if (!dateFromNew || previewNew) {
+          return;
+        }
 
-      handleApply();
-    }
-  }, [dateFrom, dateTo, preview, isSelectionHappened.current]);
+        if (mode !== 'day' && !dateToNew) {
+          return;
+        }
+
+        handleApply(dateFromNew, dateToNew);
+      }
+    },
+    [dateFrom, dateTo, preview],
+  );
 
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
@@ -213,7 +214,7 @@ const DatePicker = (props: DatePickerProps) => {
                   </Box>
                   {variant === 'filter' && (
                     <DatePickerFooter
-                      onApply={handleApply}
+                      onApply={() => handleApply(dateFrom, dateTo)}
                       onClose={handleClose}
                       onClear={onClear}
                       selected={currentSelected}

package/src/tokens/tokens.ts

@@ -29,9 +29,9 @@ export const colors = {
 
 export const semanticTokens = {
   colors: {
-    ...looper(commonColors),
     ...legacyTokens,
     sys: looper(tokensJson.system.color.sys),
+    ...looper(commonColors),
   },
 };