cozy-ui 115.0.2 → 115.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [115.1.0](https://github.com/cozy/cozy-ui/compare/v115.0.2...v115.1.0) (2025-01-02)
+
+
+### Features
+
+* **DatePicker:** Add DatePicker component ([1c5fa03](https://github.com/cozy/cozy-ui/commit/1c5fa03))
+
 ## [115.0.2](https://github.com/cozy/cozy-ui/compare/v115.0.1...v115.0.2) (2024-12-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "115.0.2",
+  "version": "115.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -156,8 +156,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",
+    "@date-io/date-fns": "1",
     "@material-ui/core": "4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
+    "@material-ui/pickers": "3.3.11",
     "@popperjs/core": "^2.4.4",
     "chart.js": "3.7.1",
     "classnames": "^2.2.5",

package/react/DatePicker/Readme.md

@@ -0,0 +1,208 @@
+`Breakpoints` & `I18n` Providers are needed for this component
+
+### Usage
+
+### Date Picker
+
+```jsx
+import React, { useState } from 'react';
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import Variants from 'cozy-ui/docs/components/Variants';
+import DatePicker from 'cozy-ui/transpiled/react/DatePicker';
+
+const placeholder = isTesting() ? "01/01/2025" : undefined;
+
+const initialVariants = [
+  { enableKeyboard: false, clearable: false, showTodayButton: false, disableFuture: false, disablePast: false, disableToolbar: false, autoOk: false, animateYearScrolling: false, disabled: false, readOnly: false }
+];
+
+// Example
+const [selectedDate, setSelectedDate] = useState(null);
+<DemoProvider>
+  <Variants initialVariants={initialVariants}>
+  {variant => (
+      <DatePicker
+        onChange={setSelectedDate}
+        value={selectedDate}
+        placeholder={placeholder}
+        {...variant}
+      />
+    )
+  }
+  </Variants>
+</DemoProvider>
+```
+
+### DateTime Picker
+
+```jsx
+import React, { useState } from 'react';
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import Variants from 'cozy-ui/docs/components/Variants';
+import DatePicker from 'cozy-ui/transpiled/react/DatePicker';
+
+const placeholder = isTesting() ? "01/01/2025" : undefined;
+
+const initialVariants = [
+  { enableKeyboard: false, clearable: false, showTodayButton: false, disableFuture: false, disablePast: false, disableToolbar: false, autoOk: false, animateYearScrolling: false, disabled: false, readOnly: false, ampm: false }
+];
+
+// Example
+const [selectedDate, setSelectedDate] = useState(null);
+<DemoProvider>
+  <Variants initialVariants={initialVariants}>
+  {variant => (
+      <DatePicker
+        mode="dateTime"
+        onChange={setSelectedDate}
+        value={selectedDate}
+        placeholder={placeholder}
+        {...variant}
+      />
+    )
+  }
+  </Variants>
+</DemoProvider>
+```
+
+### Time Picker
+
+```jsx
+import React, { useState } from 'react';
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import Variants from 'cozy-ui/docs/components/Variants';
+import DatePicker from 'cozy-ui/transpiled/react/DatePicker';
+
+const placeholder = isTesting() ? "01/01/2025" : undefined;
+
+const initialVariants = [
+  { enableKeyboard: false, clearable: false, showTodayButton: false, disableFuture: false, disablePast: false, disableToolbar: false, autoOk: false, animateYearScrolling: false, disabled: false, readOnly: false, ampm: false }
+];
+
+// Example
+const [selectedDate, setSelectedDate] = useState(null);
+<DemoProvider>
+  <Variants initialVariants={initialVariants}>
+  {variant => (
+      <DatePicker
+        mode="time"
+        onChange={setSelectedDate}
+        value={selectedDate}
+        placeholder={placeholder}
+        {...variant}
+      />
+    )
+  }
+  </Variants>
+</DemoProvider>
+```
+
+### API
+
+### Inheritance
+
+Any prop not recognized by the pickers and their sub-components are passed down to material-ui [TextField](https://v4.mui.com/api/text-field/#textfield-api) component.
+
+`DateIOType` — date object type of your linked date-io adapter (Date-fns, DayJS, etc.)
+
+### Props
+
+#### **Date Picker**
+
+|name|type|default|description|
+|----|----|-------|-----------|
+|onChange|(date: DateIOType) => void||onChange callback|
+|value|Date||Picker value|
+|allowKeyboardControl|Boolean|true|Enables keyboard listener for moving between days in calendar|
+|autoOk|Boolean|false|Auto accept date on selection|
+|disabled|Boolean||Disable picker and text field|
+|disableFuture|Boolean|false|Disable future dates|
+|disablePast|boolean|false|Disable past dates|
+|disableToolbar|boolean|false|Hide toolbar and show only date/time views|
+|emptyLabel|string|""|Message displaying in text field, if null passed (doesn't work in keyboard mode)|
+|format|string||Format string|
+|initialFocusedDate|Date||Date that will be initially highlighted if null was passed|
+|inputVariant|"standard" \| "outlined" \| "filled"||Pass material-ui text field variant down, bypass internal variant prop|
+|invalidDateMessage|ReactNode|"Invalid Date Format"|Message, appearing when date cannot be parsed|
+|invalidLabel|string|"unknown"|Message displaying in text field if date is invalid (doesn't work in keyboard mode)|
+|labelFunc|(date: DateIOType, invalidLabel: string) => string||Dynamic formatter of text field value|
+|leftArrowButtonProps|Partial<IconButtonProps>||Props to pass to left arrow button|
+|leftArrowIcon|ReactNode||Left arrow icon|
+|loadingIndicator|Element||Custom loading indicator|
+|maxDate|Date|Date(2100-01-01)|Max selectable date|
+|maxDateMessage|ReactNode|"Date should not be after maximal date"|Error message, shown if date is more then maximal date|
+|minDate|Date|Date(1900-01-01)|Min selectable date|
+|minDateMessage|ReactNode|"Date should not be before minimal date"|Error message, shown if date is less then minimal date|
+|onAccept|(date: DateIOType) => void||Callback fired when date is accepted|
+|onClose|() => void||On close callback|
+|onError|(error: ReactNode, value: DateIOType) => void||Callback fired when new error should be displayed (!! This is a side effect. Be careful if you want to rerender the component)|
+|onMonthChange|(date: DateIOType) => void \| Promise<void>||Callback firing on month change. Return promise to render spinner till it will not be resolved|
+|onOpen|Date||On open callback|
+|onYearChange|Date||Callback firing on year change|
+|open|boolean||Controlled picker open state|
+|openTo|"date" \| "year" \| "month"||First view to show in DatePicker|
+|orientation|"portrait" \| "landscape"|"portrait"|Force rendering in particular orientation|
+|PopoverProps|Partial<PopoverProps>||Popover props passed to material-ui Popover (with variant="inline")|
+|readOnly|boolean||Make picker read only|
+|renderDay|(day: DateIOType, selectedDate: DateIOType, dayInCurrentMonth: boolean, dayComponent: Element) => Element||Custom renderer for day|
+|rightArrowButtonProps|Partial<IconButtonProps>||Props to pass to right arrow button|
+|rightArrowIcon|ReactNode||Right arrow icon|
+|shouldDisableDate|(day: DateIOType) => boolean||Disable specific date|
+|strictCompareDates|boolean|false|Compare dates by the exact timestamp, instead of start/end of date|
+|TextFieldComponent|FunctionComponent<TextFieldProps>||Override input component|
+|ToolbarComponent|FunctionComponent<ToolbarComponentProps>||Component that will replace default toolbar renderer|
+|variant|"dialog" \| "inline" \| "static"|'dialog'|Picker container option|
+|views|Array<"year" \| "date" \| "month">||Array of views to show|
+___
+<br>
+
+#### **Keyboard Date Picker**
+
+Additional props for keyboard date picker
+
+|name|type|default|description|
+|----|----|-------|-----------|
+|onChange|(date: DateIOType, isValid: boolean) => void||Keyboard onChange callback, that returns the value of the input when it changes and if it is a valid Date|
+|InputAdornmentProps|Partial<InputAdornmentProps>||Props to pass to keyboard input adornment|
+|inputValue|string||String value for controlling value with pure input string. Overrides value prop|
+|KeyboardButtonProps|Partial<IconButtonProps>||Props to pass to keyboard adornment button|
+|keyboardIcon|ReactNode||Icon displaying for open picker button|
+|mask|string||Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)|
+|maskChar|string|"_"|Char string that will be replaced with number (for "_" mask will be "__/__/____")|
+|refuse|RegExp|/\[^\\d\]+/gi|Refuse values regexp|
+|rifmFormatter|(str: string) => string||Custom formatter to be passed into Rifm component|
+___
+<br>
+
+#### **DateTime & Time Picker**
+
+Additional props for time date picker
+
+|name|type|default|description|
+|----|----|-------|-----------|
+|ampm|boolean||12h/24h view for hour selection clock|
+___
+<br>
+
+### Modal Wrapper
+
+|name|type|default|description|
+|----|----|-------|-----------|
+|cancelLabel|ReactNode|"Cancel"|"CANCEL" label message|
+|clearable|boolean||Show clear action in picker dialog|
+|clearLabel|ReactNode|"Clear"|"Clear" label message|
+|DialogProps|Partial<MuiDialogProps>||Props to be passed directly to material-ui Dialog|
+|okLabel|ReactNode|"OK"|"OK" label message|
+|showTodayButton|boolean||If true today button will be displayed. **Note:** that clear button has higher priority|
+|todayLabel|ReactNode|"TODAY"|"TODAY" label message|
+___
+<br>
+
+### Additional props
+
+|name|type|default|description|
+|----|----|-------|-----------|
+|isValid|() => boolean||Function that returns if the value of the input is a valid Date|
+|enableKeyboard|boolean||Enable the keyboard date picker|
+|mode|"date" \| "time" \| "dateTime"|"date"|Picker mode|
+___

package/react/DatePicker/helpers.js

@@ -0,0 +1,16 @@
+export const makeFormat = ({ ampm, mode, lang }) => {
+  switch (mode) {
+    case 'date':
+      return lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy'
+    case 'time':
+      return lang === 'fr' ? 'HH:mm' : ampm ? 'HH:mm a' : 'HH:mm'
+    case 'dateTime':
+      return lang === 'fr'
+        ? 'dd/LL/yyyy HH:mm'
+        : ampm
+        ? 'LL/dd/yyyy HH:mm a'
+        : 'LL/dd/yyyy HH:mm'
+    default:
+      return lang === 'fr' ? 'dd/LL/yyyy' : ampm ? 'LL/dd/yyyy a' : 'LL/dd/yyyy'
+  }
+}

package/react/DatePicker/helpers.spec.js

@@ -0,0 +1,71 @@
+import { makeFormat } from './helpers'
+
+describe('makeFormat', () => {
+  describe('When lang is "fr"', () => {
+    it('should return the right format for default mode', () => {
+      const format = makeFormat({ lang: 'fr' })
+      expect(format).toBe('dd/LL/yyyy')
+    })
+
+    it('should return the right format for time mode', () => {
+      const format = makeFormat({ mode: 'time', lang: 'fr' })
+      expect(format).toBe('HH:mm')
+    })
+
+    it('should return the right format for dateTime mode', () => {
+      const format = makeFormat({ mode: 'dateTime', lang: 'fr' })
+      expect(format).toBe('dd/LL/yyyy HH:mm')
+    })
+
+    describe('When ampm is true', () => {
+      it('should return the right format for default mode', () => {
+        const format = makeFormat({ ampm: true, lang: 'fr' })
+        expect(format).toBe('dd/LL/yyyy')
+      })
+
+      it('should return the right format for time mode', () => {
+        const format = makeFormat({ mode: 'time', ampm: true, lang: 'fr' })
+        expect(format).toBe('HH:mm')
+      })
+
+      it('should return the right format for dateTime mode', () => {
+        const format = makeFormat({ mode: 'dateTime', ampm: true, lang: 'fr' })
+        expect(format).toBe('dd/LL/yyyy HH:mm')
+      })
+    })
+  })
+
+  describe('When lang is not "fr"', () => {
+    it('should return the right format for default mode', () => {
+      const format = makeFormat({ lang: 'en', ampm: false })
+      expect(format).toBe('LL/dd/yyyy')
+    })
+
+    it('should return the right format for time mode', () => {
+      const format = makeFormat({ mode: 'time', lang: 'en' })
+      expect(format).toBe('HH:mm')
+    })
+
+    it('should return the right format for dateTime mode', () => {
+      const format = makeFormat({ mode: 'dateTime', lang: 'en' })
+      expect(format).toBe('LL/dd/yyyy HH:mm')
+    })
+
+    describe('When ampm is true', () => {
+      it('should return the right format for default mode', () => {
+        const format = makeFormat({ ampm: true, lang: 'en' })
+        expect(format).toBe('LL/dd/yyyy a')
+      })
+
+      it('should return the right format for time mode', () => {
+        const format = makeFormat({ mode: 'time', ampm: true, lang: 'en' })
+        expect(format).toBe('HH:mm a')
+      })
+
+      it('should return the right format for dateTime mode', () => {
+        const format = makeFormat({ mode: 'dateTime', ampm: true, lang: 'en' })
+        expect(format).toBe('LL/dd/yyyy HH:mm a')
+      })
+    })
+  })
+})

package/react/DatePicker/index.jsx

@@ -0,0 +1,289 @@
+import DateFnsUtils from '@date-io/date-fns'
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker as MuiKeyboardDatePicker,
+  KeyboardTimePicker as MuiKeyboardTimePicker,
+  KeyboardDateTimePicker as MuiKeyboardDateTimePicker,
+  DatePicker as MuiDatePicker,
+  TimePicker as MuiTimePicker,
+  DateTimePicker as MuiDateTimePicker
+} from '@material-ui/pickers'
+import cx from 'classnames'
+import formatFNS from 'date-fns/format'
+import isBefore from 'date-fns/isBefore'
+import LocaleEN from 'date-fns/locale/en-US'
+import LocaleFR from 'date-fns/locale/fr'
+import subDays from 'date-fns/subDays'
+import PropTypes from 'prop-types'
+import React, { forwardRef, useState } from 'react'
+
+import { makeFormat } from './helpers'
+import withOwnLocales from './locales/withOwnLocales'
+import useBreakpoints from '../providers/Breakpoints'
+import { useI18n } from '../providers/I18n'
+import { makeStyles } from '../styles'
+
+const localesFNS = {
+  fr: LocaleFR,
+  en: LocaleEN
+}
+
+const useStyles = makeStyles(() => ({
+  overrides: {
+    width: '100%',
+    height: isDesktop => (isDesktop ? '5rem' : 'inherit'),
+    MuiOutlinedInput: {
+      '&:focused': {
+        notchedOutline: {
+          borderColor: 'var(--primaryColor)'
+        }
+      }
+    }
+  }
+}))
+
+const DatePicker = forwardRef(
+  (
+    {
+      className,
+      label,
+      clearable = false,
+      value = null,
+      placeholder,
+      onFocus,
+      onBlur,
+      onChange,
+      minDate,
+      minDateLabelError,
+      format,
+      cancelLabel,
+      clearLabel,
+      okLabel,
+      todayLabel,
+      showTodayButton = false,
+      helperText,
+      errorLabel,
+      inputVariant = 'outlined',
+      inputProps,
+      KeyboardButtonProps,
+      enableKeyboard,
+      mode = 'date',
+      ampm,
+      ...props
+    },
+    ref
+  ) => {
+    const [error, setError] = useState(null)
+    const [isFocused, setIsFocused] = useState(false)
+
+    const { isDesktop } = useBreakpoints()
+    const classes = useStyles(isDesktop)
+    const { t, lang } = useI18n()
+
+    const isError = !isFocused && Boolean(error)
+    const _helperText = isError ? error : helperText ?? null
+    const _format = format || makeFormat({ ampm, mode, lang })
+    const _ampm = ampm ?? !(mode === 'time' || mode === 'dateTime')
+    const _placeholder = placeholder ?? formatFNS(new Date(), _format)
+    const _clearLabel = clearLabel || t('clear')
+    const _todayLabel = todayLabel || t('today')
+    const _cancelLabel = cancelLabel || t('cancel')
+    const _okLabel = okLabel || t('ok')
+    const _minDateLabelError = minDateLabelError
+      ? minDateLabelError
+      : minDate
+      ? t('minDateLabelError', {
+          date: formatFNS(minDate, _format)
+        })
+      : null
+
+    const _KeyboardButtonProps = {
+      'aria-label': label,
+      ...KeyboardButtonProps
+    }
+    const _inputProps = { inputMode: 'numeric', ...inputProps }
+
+    const handleChange = val => {
+      if (val?.toString() !== 'Invalid Date') {
+        if (minDate && isBefore(val, subDays(minDate, 1))) {
+          setError(_minDateLabelError)
+          onChange(val, false)
+          return
+        }
+        setError(null)
+        onChange(val, true)
+      } else if (val === '') {
+        setError(null)
+        onChange(null, true)
+      } else {
+        setError(errorLabel ?? t('invalidDate'))
+        onChange(val, false)
+      }
+    }
+
+    const handleBlur = () => {
+      setIsFocused(false)
+      onFocus?.(true)
+      onBlur?.(false)
+    }
+    const handleFocus = () => {
+      setIsFocused(true)
+      onFocus?.(false)
+      onBlur?.(true)
+    }
+
+    let DatePickerComponent
+    switch (mode) {
+      case 'date':
+        DatePickerComponent = enableKeyboard
+          ? MuiKeyboardDatePicker
+          : MuiDatePicker
+        break
+      case 'time':
+        DatePickerComponent = enableKeyboard
+          ? MuiKeyboardTimePicker
+          : MuiTimePicker
+        break
+      case 'dateTime':
+        DatePickerComponent = enableKeyboard
+          ? MuiKeyboardDateTimePicker
+          : MuiDateTimePicker
+        break
+    }
+
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={localesFNS[lang]}>
+        <DatePickerComponent
+          inputRef={ref}
+          label={label}
+          placeholder={_placeholder}
+          value={value}
+          helperText={_helperText}
+          className={cx(classes.overrides, className)}
+          minDate={minDate}
+          ampm={_ampm}
+          format={_format}
+          onChange={handleChange}
+          error={isError}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          inputVariant={inputVariant}
+          inputProps={_inputProps}
+          KeyboardButtonProps={_KeyboardButtonProps}
+          // Modal start
+          showTodayButton={showTodayButton}
+          todayLabel={_todayLabel}
+          clearable={clearable}
+          clearLabel={_clearLabel}
+          cancelLabel={_cancelLabel}
+          okLabel={_okLabel}
+          // Modal end
+          {...props}
+        />
+      </MuiPickersUtilsProvider>
+    )
+  }
+)
+
+DatePicker.displayName = 'DatePicker'
+
+DatePicker.prototype = {
+  /*
+    Classname to override the input style
+  */
+  className: PropTypes.string,
+  /*
+    Label of the input
+  */
+  label: PropTypes.string,
+  /*
+    Value of th input. If set by default with a Date, isValidDate will be false if the value is empty (KeyboardDatePicker behavior)
+  */
+  value: PropTypes.string.isRequired,
+  /*
+    Placeholder of the input
+  */
+  placeholder: PropTypes.string,
+  /*
+    Function that returns the value of the input when it changes and if it is a valid Date
+  */
+  onChange: PropTypes.func.isRequired,
+  /*
+    Function that returns if the input is blured
+  */
+  onBlur: PropTypes.func,
+  /*
+    Function that returns if the input is focused
+  */
+  onFocus: PropTypes.func,
+  /*
+    Helper text to display when the input is in error
+  */
+  helperText: PropTypes.string,
+  /*
+    Min date selectable with the date picker (exclusive)
+  */
+  minDate: PropTypes.instanceOf(Date),
+  /*
+    Error message when the min date is not respected
+  */
+  minDateLabelError: PropTypes.string,
+  /*
+    Format of the date
+  */
+  format: PropTypes.string,
+  /*
+    Date picker cancellation label
+  */
+  cancelLabel: PropTypes.string,
+  /*
+  Show today button
+ */
+  showTodayButton: PropTypes.bool,
+  /*
+    Date picker today label
+  */
+  todayLabel: PropTypes.string,
+  /*
+    Date picker ok label
+  */
+  okLabel: PropTypes.string,
+  /*
+    Show the clear button
+  */
+  clearable: PropTypes.bool,
+  /*
+    Date picker clear label
+  */
+  clearLabel: PropTypes.string,
+  /*
+    Error message when the date is invalid
+  */
+  errorLabel: PropTypes.string,
+  /*
+    Variant of the input
+  */
+  inputVariant: PropTypes.string,
+  /*
+    Props to override the input
+  */
+  inputProps: PropTypes.object,
+  /*
+    Props to override the keyboard button
+  */
+  KeyboardButtonProps: PropTypes.object,
+  /*
+    Enable the keyboard date picker
+  */
+  enableKeyboard: PropTypes.bool,
+  /*
+    Mode of the date picker. Default is "date"
+  */
+  mode: PropTypes.oneOf(['date', 'time', 'dateTime']),
+  /*
+    Enable the AM/PM selector
+  */
+  ampm: PropTypes.bool
+}
+
+export default withOwnLocales(React.memo(DatePicker))

package/react/DatePicker/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Cancel",
+  "clear": "Clear",
+  "invalidDate": "Invalid date",
+  "ok": "Ok",
+  "today": "Today",
+  "minDateLabelError": "Date should not be before minimal date (%{date})"
+}

package/react/DatePicker/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Annuler",
+  "clear": "Supprimer",
+  "invalidDate": "Date invalide",
+  "ok": "Ok",
+  "today": "Aujourd'hui",
+  "minDateLabelError": "La date ne doit pas être antérieure à la date minimale (%{date})"
+}

package/react/DatePicker/locales/withOwnLocales.jsx

@@ -0,0 +1,10 @@
+import en from './en.json'
+import fr from './fr.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withOnlyLocales(locales)

package/react/index.js

@@ -139,3 +139,4 @@ export { default as Modal } from './Modal'
 export { ListSkeleton, ListItemSkeleton } from './Skeletons'
 export { default as ActionsBar } from './ActionsBar'
 export { default as Markdown } from './Markdown'
+export { default as DatePicker } from './DatePicker'

package/transpiled/react/DatePicker/helpers.js

@@ -0,0 +1,19 @@
+export var makeFormat = function makeFormat(_ref) {
+  var ampm = _ref.ampm,
+      mode = _ref.mode,
+      lang = _ref.lang;
+
+  switch (mode) {
+    case 'date':
+      return lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy';
+
+    case 'time':
+      return lang === 'fr' ? 'HH:mm' : ampm ? 'HH:mm a' : 'HH:mm';
+
+    case 'dateTime':
+      return lang === 'fr' ? 'dd/LL/yyyy HH:mm' : ampm ? 'LL/dd/yyyy HH:mm a' : 'LL/dd/yyyy HH:mm';
+
+    default:
+      return lang === 'fr' ? 'dd/LL/yyyy' : ampm ? 'LL/dd/yyyy a' : 'LL/dd/yyyy';
+  }
+};

package/transpiled/react/DatePicker/index.js

@@ -0,0 +1,331 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "label", "clearable", "value", "placeholder", "onFocus", "onBlur", "onChange", "minDate", "minDateLabelError", "format", "cancelLabel", "clearLabel", "okLabel", "todayLabel", "showTodayButton", "helperText", "errorLabel", "inputVariant", "inputProps", "KeyboardButtonProps", "enableKeyboard", "mode", "ampm"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import DateFnsUtils from '@date-io/date-fns';
+import { MuiPickersUtilsProvider, KeyboardDatePicker as MuiKeyboardDatePicker, KeyboardTimePicker as MuiKeyboardTimePicker, KeyboardDateTimePicker as MuiKeyboardDateTimePicker, DatePicker as MuiDatePicker, TimePicker as MuiTimePicker, DateTimePicker as MuiDateTimePicker } from '@material-ui/pickers';
+import cx from 'classnames';
+import formatFNS from 'date-fns/format';
+import isBefore from 'date-fns/isBefore';
+import LocaleEN from 'date-fns/locale/en-US';
+import LocaleFR from 'date-fns/locale/fr';
+import subDays from 'date-fns/subDays';
+import PropTypes from 'prop-types';
+import React, { forwardRef, useState } from 'react';
+import { makeFormat } from "cozy-ui/transpiled/react/DatePicker/helpers";
+import withOwnLocales from "cozy-ui/transpiled/react/DatePicker/locales/withOwnLocales";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var localesFNS = {
+  fr: LocaleFR,
+  en: LocaleEN
+};
+var useStyles = makeStyles(function () {
+  return {
+    overrides: {
+      width: '100%',
+      height: function height(isDesktop) {
+        return isDesktop ? '5rem' : 'inherit';
+      },
+      MuiOutlinedInput: {
+        '&:focused': {
+          notchedOutline: {
+            borderColor: 'var(--primaryColor)'
+          }
+        }
+      }
+    }
+  };
+});
+var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      _ref$clearable = _ref.clearable,
+      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? null : _ref$value,
+      placeholder = _ref.placeholder,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      minDate = _ref.minDate,
+      minDateLabelError = _ref.minDateLabelError,
+      format = _ref.format,
+      cancelLabel = _ref.cancelLabel,
+      clearLabel = _ref.clearLabel,
+      okLabel = _ref.okLabel,
+      todayLabel = _ref.todayLabel,
+      _ref$showTodayButton = _ref.showTodayButton,
+      showTodayButton = _ref$showTodayButton === void 0 ? false : _ref$showTodayButton,
+      helperText = _ref.helperText,
+      errorLabel = _ref.errorLabel,
+      _ref$inputVariant = _ref.inputVariant,
+      inputVariant = _ref$inputVariant === void 0 ? 'outlined' : _ref$inputVariant,
+      inputProps = _ref.inputProps,
+      KeyboardButtonProps = _ref.KeyboardButtonProps,
+      enableKeyboard = _ref.enableKeyboard,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'date' : _ref$mode,
+      ampm = _ref.ampm,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop;
+
+  var classes = useStyles(isDesktop);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t,
+      lang = _useI18n.lang;
+
+  var isError = !isFocused && Boolean(error);
+
+  var _helperText = isError ? error : helperText !== null && helperText !== void 0 ? helperText : null;
+
+  var _format = format || makeFormat({
+    ampm: ampm,
+    mode: mode,
+    lang: lang
+  });
+
+  var _ampm = ampm !== null && ampm !== void 0 ? ampm : !(mode === 'time' || mode === 'dateTime');
+
+  var _placeholder = placeholder !== null && placeholder !== void 0 ? placeholder : formatFNS(new Date(), _format);
+
+  var _clearLabel = clearLabel || t('clear');
+
+  var _todayLabel = todayLabel || t('today');
+
+  var _cancelLabel = cancelLabel || t('cancel');
+
+  var _okLabel = okLabel || t('ok');
+
+  var _minDateLabelError = minDateLabelError ? minDateLabelError : minDate ? t('minDateLabelError', {
+    date: formatFNS(minDate, _format)
+  }) : null;
+
+  var _KeyboardButtonProps = _objectSpread({
+    'aria-label': label
+  }, KeyboardButtonProps);
+
+  var _inputProps = _objectSpread({
+    inputMode: 'numeric'
+  }, inputProps);
+
+  var handleChange = function handleChange(val) {
+    if ((val === null || val === void 0 ? void 0 : val.toString()) !== 'Invalid Date') {
+      if (minDate && isBefore(val, subDays(minDate, 1))) {
+        setError(_minDateLabelError);
+        onChange(val, false);
+        return;
+      }
+
+      setError(null);
+      onChange(val, true);
+    } else if (val === '') {
+      setError(null);
+      onChange(null, true);
+    } else {
+      setError(errorLabel !== null && errorLabel !== void 0 ? errorLabel : t('invalidDate'));
+      onChange(val, false);
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    setIsFocused(false);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(false);
+  };
+
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(true);
+  };
+
+  var DatePickerComponent;
+
+  switch (mode) {
+    case 'date':
+      DatePickerComponent = enableKeyboard ? MuiKeyboardDatePicker : MuiDatePicker;
+      break;
+
+    case 'time':
+      DatePickerComponent = enableKeyboard ? MuiKeyboardTimePicker : MuiTimePicker;
+      break;
+
+    case 'dateTime':
+      DatePickerComponent = enableKeyboard ? MuiKeyboardDateTimePicker : MuiDateTimePicker;
+      break;
+  }
+
+  return /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, {
+    utils: DateFnsUtils,
+    locale: localesFNS[lang]
+  }, /*#__PURE__*/React.createElement(DatePickerComponent, _extends({
+    inputRef: ref,
+    label: label,
+    placeholder: _placeholder,
+    value: value,
+    helperText: _helperText,
+    className: cx(classes.overrides, className),
+    minDate: minDate,
+    ampm: _ampm,
+    format: _format,
+    onChange: handleChange,
+    error: isError,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    inputVariant: inputVariant,
+    inputProps: _inputProps,
+    KeyboardButtonProps: _KeyboardButtonProps // Modal start
+    ,
+    showTodayButton: showTodayButton,
+    todayLabel: _todayLabel,
+    clearable: clearable,
+    clearLabel: _clearLabel,
+    cancelLabel: _cancelLabel,
+    okLabel: _okLabel // Modal end
+
+  }, props)));
+});
+DatePicker.displayName = 'DatePicker';
+DatePicker.prototype = {
+  /*
+    Classname to override the input style
+  */
+  className: PropTypes.string,
+
+  /*
+    Label of the input
+  */
+  label: PropTypes.string,
+
+  /*
+    Value of th input. If set by default with a Date, isValidDate will be false if the value is empty (KeyboardDatePicker behavior)
+  */
+  value: PropTypes.string.isRequired,
+
+  /*
+    Placeholder of the input
+  */
+  placeholder: PropTypes.string,
+
+  /*
+    Function that returns the value of the input when it changes and if it is a valid Date
+  */
+  onChange: PropTypes.func.isRequired,
+
+  /*
+    Function that returns if the input is blured
+  */
+  onBlur: PropTypes.func,
+
+  /*
+    Function that returns if the input is focused
+  */
+  onFocus: PropTypes.func,
+
+  /*
+    Helper text to display when the input is in error
+  */
+  helperText: PropTypes.string,
+
+  /*
+    Min date selectable with the date picker (exclusive)
+  */
+  minDate: PropTypes.instanceOf(Date),
+
+  /*
+    Error message when the min date is not respected
+  */
+  minDateLabelError: PropTypes.string,
+
+  /*
+    Format of the date
+  */
+  format: PropTypes.string,
+
+  /*
+    Date picker cancellation label
+  */
+  cancelLabel: PropTypes.string,
+
+  /*
+  Show today button
+  */
+  showTodayButton: PropTypes.bool,
+
+  /*
+    Date picker today label
+  */
+  todayLabel: PropTypes.string,
+
+  /*
+    Date picker ok label
+  */
+  okLabel: PropTypes.string,
+
+  /*
+    Show the clear button
+  */
+  clearable: PropTypes.bool,
+
+  /*
+    Date picker clear label
+  */
+  clearLabel: PropTypes.string,
+
+  /*
+    Error message when the date is invalid
+  */
+  errorLabel: PropTypes.string,
+
+  /*
+    Variant of the input
+  */
+  inputVariant: PropTypes.string,
+
+  /*
+    Props to override the input
+  */
+  inputProps: PropTypes.object,
+
+  /*
+    Props to override the keyboard button
+  */
+  KeyboardButtonProps: PropTypes.object,
+
+  /*
+    Enable the keyboard date picker
+  */
+  enableKeyboard: PropTypes.bool,
+
+  /*
+    Mode of the date picker. Default is "date"
+  */
+  mode: PropTypes.oneOf(['date', 'time', 'dateTime']),
+
+  /*
+    Enable the AM/PM selector
+  */
+  ampm: PropTypes.bool
+};
+export default withOwnLocales( /*#__PURE__*/React.memo(DatePicker));

package/transpiled/react/DatePicker/locales/withOwnLocales.js

@@ -0,0 +1,22 @@
+var en = {
+  cancel: "Cancel",
+  clear: "Clear",
+  invalidDate: "Invalid date",
+  ok: "Ok",
+  today: "Today",
+  minDateLabelError: "Date should not be before minimal date (%{date})"
+};
+var fr = {
+  cancel: "Annuler",
+  clear: "Supprimer",
+  invalidDate: "Date invalide",
+  ok: "Ok",
+  today: "Aujourd'hui",
+  minDateLabelError: "La date ne doit pas \xEAtre ant\xE9rieure \xE0 la date minimale (%{date})"
+};
+import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
+export var locales = {
+  en: en,
+  fr: fr
+};
+export default withOnlyLocales(locales);

package/transpiled/react/index.js

@@ -111,4 +111,5 @@ export { default as AlertProvider, useAlert } from './providers/Alert';
 export { default as Modal } from './Modal';
 export { ListSkeleton, ListItemSkeleton } from './Skeletons';
 export { default as ActionsBar } from './ActionsBar';
-export { default as Markdown } from './Markdown';
+export { default as Markdown } from './Markdown';
+export { default as DatePicker } from './DatePicker';