@bitrise/bitkit 12.90.0 → 12.91.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.90.0",
+  "version": "12.91.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -40,6 +40,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-focus-lock": "^2.9.7",
+    "react-imask": "^7.3.0",
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {

package/src/Components/DatePicker/DatePicker.tsx

@@ -53,9 +53,18 @@ const DatePicker = (props: DatePickerProps) => {
   );
 
   const [dateFrom, setDateFrom] = useState(initialRange?.from);
+
+  const { leftViewDate, rightViewDate, updateLeftViewDate, updateRightViewDate } = useViewDate({
+    initalView: dateFrom || selectable?.to,
+  });
+
   useEffect(() => {
     if (!initialRange?.from || !dateFrom?.equals(initialRange.from)) {
-      setDateFrom(initialRange?.from);
+      const newDateFrom = initialRange?.from;
+      setDateFrom(newDateFrom);
+      if (newDateFrom) {
+        updateLeftViewDate(newDateFrom.startOf('month'));
+      }
     }
   }, [initialRange]);
   const [dateTo, setDateTo] = useState(initialRange?.to);
@@ -83,10 +92,6 @@ const DatePicker = (props: DatePickerProps) => {
     handleClose();
   };
 
-  const { leftViewDate, rightViewDate, updateLeftViewDate, updateRightViewDate } = useViewDate({
-    initalView: dateFrom || selectable?.to,
-  });
-
   const isSingleMonthView = mode === 'day' || isMobile;
 
   const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -35,6 +35,10 @@ const days = createElement(
   {},
   ...Array.from({ length: daysCount }).map((_, i) => <DatePickerDay n={i + 1} />),
 );
+
+export const datePickerMinYear = 1990;
+export const datePickerMaxYear = 2100;
+
 const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }: Props) => {
   const onNextMonth = useCallback(() => onViewDateChange(viewDate.plus({ months: 1 })), [onViewDateChange, viewDate]);
   const onPreviousMonth = useCallback(
@@ -63,8 +67,8 @@ const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }:
           <NumberInput
             aria-label="year"
             flexShrink={1}
-            max={2100}
-            min={1990}
+            max={datePickerMaxYear}
+            min={datePickerMinYear}
             onChange={(_, year) => onViewDateChange(viewDate.set({ year }))}
             size="small"
             value={viewDate.year}

package/src/Components/Form/DateInput/DateInput.tsx

@@ -1,5 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { forwardRef } from '@chakra-ui/react';
+import { IMask, useIMask } from 'react-imask';
+import { DateTime } from 'luxon';
+import { datePickerMaxYear, datePickerMinYear } from '../../DatePicker/DatePickerMonth';
 import DatePicker from '../../DatePicker/DatePicker';
 import IconButton from '../../IconButton/IconButton';
 import Input, { InputProps } from '../Input/Input';
@@ -11,37 +14,93 @@ export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholde
 };
 
 const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
-  const { onCalendarClick, onChange, value, ...rest } = props;
+  const { inputRef, onCalendarClick, onChange, value, ...rest } = props;
   const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
 
-  const rightButton = (
-    <IconButton
-      _active={{ background: 'transparent' }}
-      _hover={{ background: 'transparent' }}
-      aria-label="Show date picker"
-      color="icon.tertiary"
-      iconName="Calendar"
-      onClick={() => setIsDatePickerVisible(true)}
-      variant="tertiary"
-    />
+  const dateFormat = 'MM/dd/yyyy';
+
+  const {
+    ref: innerRef,
+    setValue,
+    value: currentValue,
+  } = useIMask<HTMLInputElement>(
+    {
+      autofix: 'pad',
+      blocks: {
+        dd: {
+          from: 1,
+          mask: IMask.MaskedRange,
+          placeholderChar: 'd',
+          to: 31,
+        },
+        LL: {
+          from: 1,
+          mask: IMask.MaskedRange,
+          placeholderChar: 'm',
+          to: 12,
+        },
+        yyyy: {
+          autofix: false,
+          from: datePickerMinYear,
+          mask: IMask.MaskedRange,
+          placeholderChar: 'y',
+          to: datePickerMaxYear,
+        },
+      },
+      format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateFormat) : ''),
+      lazy: false,
+      mask: Date,
+      parse: (str: string) => {
+        try {
+          return DateTime.fromFormat(str, dateFormat).toJSDate();
+        } catch {
+          return DateTime.now().toJSDate();
+        }
+      },
+      pattern: 'LL/dd/yyyy',
+    },
+    {
+      onAccept: (val) => onChange?.(val),
+    },
   );
 
+  useImperativeHandle(inputRef, () => innerRef.current!, []);
+
+  useEffect(() => setValue(value || ''), [value]);
+
+  const currentDate = useMemo(() => {
+    try {
+      return DateTime.fromFormat(currentValue, dateFormat);
+    } catch {
+      return undefined;
+    }
+  }, [currentValue]);
+
   return (
     <DatePicker
       mode="day"
-      onApply={(day) => onChange?.(day?.toLocaleString() || '')}
+      onApply={(day) => setValue(day?.toFormat(dateFormat) || '')}
       onClose={() => setIsDatePickerVisible(false)}
+      selected={currentDate}
       variant="default"
       visible={isDatePickerVisible}
     >
       <Input
         {...rest}
         ref={ref}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder="dd/mm/yyyy"
-        rightAddon={rightButton}
+        inputRef={innerRef}
+        rightAddon={
+          <IconButton
+            _active={{ background: 'transparent' }}
+            _hover={{ background: 'transparent' }}
+            aria-label="Show date picker"
+            color="icon.tertiary"
+            iconName="Calendar"
+            onClick={() => setIsDatePickerVisible(true)}
+            variant="tertiary"
+          />
+        }
         rightAddonPlacement="inside"
-        value={value}
       />
     </DatePicker>
   );

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from './types/chakra';
-export * from './utils/chakra';
+export * from './utils/reexports';
 export * from './hooks';
 
 export { default as theme } from './theme';

package/src/utils/{chakra.ts → reexports.ts}

@@ -1 +1,2 @@
 export { forwardRef, keyframes } from '@chakra-ui/react';
+export { IMask, useIMask } from 'react-imask';