@bitrise/bitkit 12.77.0 → 12.78.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.77.0",
+  "version": "12.78.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -11,6 +11,7 @@
   "scripts": {
     "build-storybook": "storybook build",
     "lint": "eslint src --ext ts,tsx",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
     "release": "release-it minor --ci",
     "release-alpha": "release-it --preRelease=alpha --ci",
     "start": "npm run storybook",

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
 import { PopoverAnchor } from '@chakra-ui/react';
@@ -7,6 +7,7 @@ import Popover from '../Popover/Popover';
 import PopoverContent from '../Popover/PopoverContent';
 import Box from '../Box/Box';
 import useResponsive from '../../hooks/useResponsive';
+import Button from '../Button/Button';
 import DatePickerMonth from './DatePickerMonth';
 import { DatePickerContext } from './DatePicker.context';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
@@ -22,6 +23,7 @@ export type DatePickerProps = {
   onClose: () => void;
   onClear?: () => void;
   visible: boolean;
+  variant?: 'default' | 'filter';
 } & (
   | {
       selected?: DateRange;
@@ -40,7 +42,9 @@ export type DatePickerProps = {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, onApply, onClose, onClear, visible, selectable, selected, mode } = props;
+  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');
@@ -89,6 +93,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
   const [isMonthSelector, setIsMonthSelector] = useState<'left' | 'right' | undefined>(undefined);
+
   const handlePreview = useCallback(
     (date: DateTime) => {
       if (!preview) {
@@ -105,8 +110,11 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [preview, dateFrom, dateTo],
   );
+
   const handleSelect = useCallback(
     (date: DateTime) => {
+      isSelectionHappened.current = true;
+
       setPreview(undefined);
       if (mode === 'day') {
         setDateFrom(date);
@@ -131,6 +139,21 @@ const DatePicker = (props: DatePickerProps) => {
     },
     [dateFrom, dateTo, preview],
   );
+
+  useEffect(() => {
+    if (variant === 'default') {
+      if (!dateFrom || !isSelectionHappened.current || preview) {
+        return;
+      }
+
+      if (mode !== 'day' && !dateTo) {
+        return;
+      }
+
+      handleApply();
+    }
+  }, [dateFrom, dateTo, preview, isSelectionHappened.current]);
+
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
     selectable,
@@ -188,13 +211,22 @@ const DatePicker = (props: DatePickerProps) => {
                       />
                     )}
                   </Box>
-                  <DatePickerFooter
-                    onApply={handleApply}
-                    onClose={handleClose}
-                    onClear={onClear}
-                    selected={currentSelected}
-                    mode={mode || 'range'}
-                  />
+                  {variant === 'filter' && (
+                    <DatePickerFooter
+                      onApply={handleApply}
+                      onClose={handleClose}
+                      onClear={onClear}
+                      selected={currentSelected}
+                      mode={mode || 'range'}
+                    />
+                  )}
+                  {variant === 'default' && mode === 'day' && (
+                    <Box display="flex" justifyContent="space-around">
+                      <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
+                        Today
+                      </Button>
+                    </Box>
+                  )}
                 </>
               )}
             </Box>

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -22,12 +22,14 @@ const DatePickerFooter = ({
 
   const styleGrid = (mobile: string, desktop: string) => (mode === 'day' ? mobile : [mobile, desktop]);
 
+  const displayDate = selected?.from || selected?.to;
+
   return (
     <Box
       display="grid"
       gridTemplateColumns="1fr auto 1fr"
-      gridTemplateRows={styleGrid(selected ? '1.25rem 2rem' : '0 2rem', 'unset')}
-      gap={selected ? 24 : 0}
+      gridTemplateRows={styleGrid(displayDate ? '1.25rem 2rem' : '0 2rem', 'unset')}
+      gap={displayDate ? 24 : 0}
       data-testid="footer"
     >
       {!!onClear && (