@bitrise/bitkit 13.89.0 → 13.90.0

package/package.json

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

package/src/Components/DatePicker/DatePicker.context.ts

@@ -1,8 +1,10 @@
 import { createContext } from '@chakra-ui/react-utils';
 import { DateTime } from 'luxon';
 import { DateRange } from './useDateRange';
+import type { DatePickerDayViewProps } from './DatePickerDay';
 
 interface Context {
+  dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
   selected?: DateRange;
   today: DateTime;

package/src/Components/DatePicker/DatePicker.tsx

@@ -14,11 +14,13 @@ import DatePickerMonthSelector from './DatePickerMonthSelector';
 import useDateRange, { DateRange } from './useDateRange';
 import useViewDate from './useViewDate';
 import DatePickerFooter from './DatePickerFooter';
+import { DatePickerDayViewProps } from './DatePickerDay';
 
 export { useDateRange, DateRange };
 
 export type DatePickerProps = {
   children: React.ReactNode;
+  dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
   onClose: () => void;
   onClear?: () => void;
@@ -42,7 +44,18 @@ export type DatePickerProps = {
  * range selection.
  */
 const DatePicker = (props: DatePickerProps) => {
-  const { children, mode, onApply, onClear, onClose, selectable, selected, variant = 'default', visible } = props;
+  const {
+    children,
+    dayTooltip,
+    mode,
+    onApply,
+    onClear,
+    onClose,
+    selectable,
+    selected,
+    variant = 'default',
+    visible,
+  } = props;
 
   const { isMobile } = useResponsive();
   const today = DateTime.now().startOf('day');
@@ -162,6 +175,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   const currentSelected = useDateRange([dateFrom, dateTo]);
   const ctx = useObjectMemo({
+    dayTooltip,
     onPreview: handlePreview,
     onSelect: handleSelect,
     preview,

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -4,6 +4,7 @@ import { BoxProps, useMultiStyleConfig } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
+import Tooltip from '../Tooltip/Tooltip';
 import { useDatePickerContext } from './DatePicker.context';
 
 // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64995
@@ -21,7 +22,9 @@ interface Context {
   viewDate: DateTime;
 }
 export interface DatePickerDayViewProps {
+  tooltip?(day: Pick<DatePickerDayViewProps, 'selectable' | 'date'>): string | undefined;
   onClick: () => void;
+  date: DateTime;
   onMouseEnter: () => void;
   selectable: boolean;
   today: boolean;
@@ -34,6 +37,8 @@ export interface DatePickerDayViewProps {
 const DatePickerDayView = ({
   children,
   currentMonth,
+  date,
+  tooltip,
   onClick,
   onMouseEnter,
   preview,
@@ -58,19 +63,24 @@ const DatePickerDayView = ({
   } else {
     ariaProps.tabIndex = -1;
   }
+
+  const tooltipText = tooltip?.({ selectable, date });
+
   return (
-    <Box
-      {...ariaProps}
-      as="button"
-      disabled={!selectable}
-      onClick={onClick}
-      onFocus={onMouseEnter}
-      onMouseEnter={onMouseEnter}
-      role="option"
-      sx={day}
-    >
-      <Text sx={text}>{children}</Text>
-    </Box>
+    <Tooltip label={tooltipText} isDisabled={!tooltipText}>
+      <Box
+        {...ariaProps}
+        as="button"
+        disabled={!selectable}
+        onClick={onClick}
+        onFocus={onMouseEnter}
+        onMouseEnter={onMouseEnter}
+        role="option"
+        sx={day}
+      >
+        <Text sx={text}>{children}</Text>
+      </Box>
+    </Tooltip>
   );
 };
 const [DatePickerDayContext, useDatePickerDayContext] = createContext<Context>();
@@ -80,6 +90,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   const {
     onPreview,
     onSelect,
+    dayTooltip,
     preview,
     selectable,
     selected,
@@ -143,6 +154,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
   return (
     <DatePickerDayView
       currentMonth={isCurrentMonth}
+      date={date}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       preview={preview}
@@ -150,6 +162,7 @@ const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
       selection={selection}
       showOutsideDays={showOutsideDays}
       today={today.equals(viewDate.set({ day: n - dayOfWeek + 1 }).startOf('day'))}
+      tooltip={dayTooltip}
     >
       {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
       {isCurrentMonth && n - dayOfWeek + 1}

package/src/Components/Filter/Filter.storyData.ts

@@ -56,6 +56,7 @@ export const FILTER_STORY_DATA: FilterData = {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
     isMultiple: true,
+    dayTooltip: ({ date }) => (date > DateTime.now() ? 'Date must be in the past' : undefined),
     selectable: new DateRange(DateTime.now().minus({ days: 15 }), DateTime.now()),
     type: 'dateRange',
   },

package/src/Components/Filter/Filter.types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TypeIconName } from '../Icon/Icon';
-import { DateRange } from '../DatePicker/DatePicker';
+import { DatePickerProps, DateRange } from '../DatePicker/DatePicker';
 
 export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
 
@@ -28,11 +28,13 @@ export type FilterCategoryProps = {
   | {
       type: 'dateRange';
       selectable?: DateRange;
+      dayTooltip?: DatePickerProps['dayTooltip'];
       isMultiple: true;
     }
   | {
       type?: Exclude<FilterType, 'dateRange'>;
       selectable?: never;
+      dayTooltip?: never;
     }
 );
 

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -59,6 +59,7 @@ const FilterDate = (props: FilterDateProps) => {
       onApply={onDateRangeApply}
       onClear={value?.length ? onClearClick : undefined}
       onClose={onClose}
+      dayTooltip={data.date_range.dayTooltip}
       selected={selectedRange}
       visible={isOpen}
       mode="range"