@bitrise/bitkit 12.89.0 → 12.91.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.89.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/Components/Icons/16x16/Duplicate.tsx

@@ -4,10 +4,14 @@ const Duplicate = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       clipRule="evenodd"
-      d="M12 12v.667a2 2 0 0 1-2 2H3.333a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H4v-.667a2 2 0 0 1 2-2h6.667a2 2 0 0 1 2 2V10a2 2 0 0 1-2 2H12Zm-1.333 0H6a2 2 0 0 1-2-2V5.333h-.667A.667.667 0 0 0 2.667 6v6.667c0 .368.298.666.666.666H10a.667.667 0 0 0 .667-.666V12ZM6 2.667a.667.667 0 0 0-.667.666V10c0 .368.299.667.667.667h6.667a.667.667 0 0 0 .666-.667V3.333a.667.667 0 0 0-.666-.666H6Z"
+      d="M11 13.5C11 14.3284 10.3284 15 9.5 15H2.5C1.67157 15 1 14.3284 1 13.5V6.5C1 5.67157 1.67157 5 2.5 5H9.5C10.3284 5 11 5.67157 11 6.5V13.5ZM9.5 13.5H2.5V6.5H9.5V13.5Z"
       fill="currentColor"
       fillRule="evenodd"
     />
+    <path
+      d="M13.5 11H12V9.5H13.5V2.5H6.5V4H5V2.5C5 1.67157 5.67157 1 6.5 1H13.5C14.3284 1 15 1.67157 15 2.5V9.5C15 10.3284 14.3284 11 13.5 11Z"
+      fill="currentColor"
+    />
   </Icon>
 ));
 

package/src/Components/Icons/24x24/Duplicate.tsx

@@ -4,10 +4,14 @@ const Duplicate = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       clipRule="evenodd"
-      d="M18 18v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-1Zm-2 0H9a3 3 0 0 1-3-3V8H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-1ZM9 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9Z"
+      d="M17 20C17 21.1046 16.1046 22 15 22H4C2.89543 22 2 21.1046 2 20V9C2 7.89543 2.89543 7 4 7H15C16.1046 7 17 7.89543 17 9V20ZM15 20H4V9H15V20Z"
       fill="currentColor"
       fillRule="evenodd"
     />
+    <path
+      d="M19.8571 17H18V14.8571H19.8571V4.14286H9.14286V6H7V4.14286C7 2.95939 7.95939 2 9.14286 2H19.8571C21.0406 2 22 2.95939 22 4.14286V14.8571C22 16.0406 21.0406 17 19.8571 17Z"
+      fill="currentColor"
+    />
   </Icon>
 ));
 

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';