@bitrise/bitkit 12.92.0 → 12.93.0

package/package.json

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

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

@@ -16,6 +16,8 @@ export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholde
 const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
   const { inputRef, onCalendarClick, onChange, value, ...rest } = props;
   const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(true);
 
   const dateFormat = 'MM/dd/yyyy';
 
@@ -48,7 +50,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         },
       },
       format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateFormat) : ''),
-      lazy: false,
+      lazy: !isFocused && isEmpty,
       mask: Date,
       parse: (str: string) => {
         try {
@@ -60,7 +62,10 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
       pattern: 'LL/dd/yyyy',
     },
     {
-      onAccept: (val) => onChange?.(val),
+      onAccept: (val, maskRef) => {
+        onChange?.(val);
+        setIsEmpty(!maskRef.unmaskedValue);
+      },
     },
   );
 
@@ -89,6 +94,9 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         {...rest}
         ref={ref}
         inputRef={innerRef}
+        onBlur={() => setIsFocused(false)}
+        onFocus={() => setIsFocused(true)}
+        placeholder={dateFormat.toLocaleLowerCase()}
         rightAddon={
           <IconButton
             _active={{ background: 'transparent' }}