@bitrise/bitkit 12.82.0 → 12.83.0

package/package.json

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

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DateTime } from 'luxon';
 import FocusLock from 'react-focus-lock';
-import { PopoverAnchor } from '@chakra-ui/react';
 import { useObjectMemo } from '../../utils/utils';
 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 PopoverTrigger from '../Popover/PopoverTrigger';
 import DatePickerMonth from './DatePickerMonth';
 import { DatePickerContext } from './DatePicker.context';
 import DatePickerMonthSelector from './DatePickerMonthSelector';
@@ -183,7 +183,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   return (
     <Popover modifiers={[]} isOpen={visible} onClose={onClose} isLazy lazyBehavior="unmount">
-      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverTrigger>{children}</PopoverTrigger>
       <PopoverContent aria-label="select date range">
         <FocusLock returnFocus>
           <DatePickerContext value={ctx}>

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

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { forwardRef } from '@chakra-ui/react';
+import DatePicker from '../../DatePicker/DatePicker';
+import IconButton from '../../IconButton/IconButton';
+import Input, { InputProps } from '../Input/Input';
+
+export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholder'> & {
+  onCalendarClick?(): void;
+  value?: string;
+  onChange?(value: string): void;
+};
+
+const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
+  const { onCalendarClick, value, onChange, ...rest } = props;
+  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
+
+  const rightButton = (
+    <IconButton
+      iconName="Calendar"
+      onClick={() => setIsDatePickerVisible(true)}
+      variant="tertiary"
+      aria-label="Show date picker"
+      _active={{ background: 'transparent' }}
+      _hover={{ background: 'transparent' }}
+      color="icon.tertiary"
+    />
+  );
+
+  return (
+    <DatePicker
+      variant="default"
+      onApply={(day) => onChange?.(day?.toLocaleString() || '')}
+      onClose={() => setIsDatePickerVisible(false)}
+      visible={isDatePickerVisible}
+      mode="day"
+    >
+      <Input
+        {...rest}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder="dd/mm/yyyy"
+        ref={ref}
+        rightAddon={rightButton}
+        rightAddonPlacement="inside"
+        value={value}
+      />
+    </DatePicker>
+  );
+});
+
+export default DateInput;

package/src/index.ts

@@ -330,3 +330,6 @@ export { default as ProgressIndicator } from './Components/ProgressIndicator/Pro
 export type { FilterProps } from './Components/Filter/Filter';
 export { default as Filter } from './Components/Filter/Filter';
 export * from './Components/Filter/Filter.types';
+
+export type { DateInputProps } from './Components/Form/DateInput/DateInput';
+export { default as DateInput } from './Components/Form/DateInput/DateInput';