@atlaskit/datetime-picker 10.4.2 → 11.1.0

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "10.4.2",
+	"version": "11.1.0",
 	"sideEffects": false
 }

package/dist/es2019/components/DatePicker.js

@@ -1,22 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import styled from '@emotion/styled'; // eslint-disable-next-line no-restricted-imports
 
-import { format, isValid, lastDayOfMonth, parse } from 'date-fns';
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
+
+import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { B100, N20 } from '@atlaskit/theme/colors';
+import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/FixedLayer';
+import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "10.4.2";
+const packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -28,24 +31,26 @@ function getDateObj(date) {
 }
 
 function getValidDate(iso) {
-  const date = parse(iso);
+  const date = parseISO(iso);
   return isValid(date) ? getDateObj(date) : {};
 }
 
-const StyledMenu = styled.div`
-  background-color: ${N20};
-  border-radius: ${borderRadius()}px;
-  z-index: ${layers.dialog};
-  ${e200()};
-`;
+const menuStyles = css({
+  zIndex: layers.dialog(),
+  backgroundColor: token('color.background.default', N20),
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`)
+});
 
 const Menu = ({
   selectProps,
   innerProps
-}) => /*#__PURE__*/React.createElement(FixedLayer, {
+}) => jsx(FixedLayer, {
   inputValue: selectProps.inputValue,
   containerRef: selectProps.calendarContainerRef,
-  content: /*#__PURE__*/React.createElement(StyledMenu, innerProps, /*#__PURE__*/React.createElement(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+  content: jsx("div", _extends({
+    css: menuStyles
+  }, innerProps), jsx(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
     disabled: selectProps.calendarDisabled,
     disabledDateFilter: selectProps.calendarDisabledDateFilter,
     minDate: selectProps.calendarMinDate,
@@ -85,7 +90,7 @@ const datePickerDefaultProps = {
 
 };
 
-class DatePicker extends React.Component {
+class DatePicker extends Component {
   constructor(props) {
     super(props);
 
@@ -192,7 +197,7 @@ class DatePicker extends React.Component {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           this.setState({
-            view: format(parsed, 'YYYY-MM-DD')
+            view: format(parsed, convertTokens('YYYY-MM-DD'))
           });
         }
       }
@@ -274,7 +279,7 @@ class DatePicker extends React.Component {
       let changedState = {
         selectedValue: '',
         value: '',
-        view: this.props.defaultValue || format(new Date(), 'YYYY-MM-DD')
+        view: this.props.defaultValue || format(new Date(), convertTokens('YYYY-MM-DD'))
       };
 
       if (!this.props.hideIcon) {
@@ -324,7 +329,7 @@ class DatePicker extends React.Component {
     });
 
     _defineProperty(this, "getSubtleControlStyles", isOpen => ({
-      border: `2px solid ${isOpen ? B100 : `transparent`}`,
+      border: `2px solid ${isOpen ? token('color.border.focus', B100) : `transparent`}`,
       backgroundColor: 'transparent',
       padding: '1px'
     }));
@@ -358,13 +363,8 @@ class DatePicker extends React.Component {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
 
-      const date = parse(value);
-
-      if (dateFormat) {
-        return format(date, dateFormat);
-      }
-
-      return l10n.formatDate(date);
+      const date = parseISO(value);
+      return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
     });
 
     _defineProperty(this, "getPlaceholder", () => {
@@ -463,26 +463,26 @@ class DatePicker extends React.Component {
       calendarDisabledDateFilter: disabledDateFilter,
       calendarMaxDate: maxDate,
       calendarMinDate: minDate,
-      calendarValue: value && format(parse(value), 'YYYY-MM-DD'),
+      calendarValue: value && format(parseISO(value), convertTokens('YYYY-MM-DD')),
       calendarView: view,
       onCalendarChange: this.onCalendarChange,
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
       calendarWeekStartDay: weekStartDay
     };
-    return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    return jsx("div", _extends({}, innerProps, {
       role: "presentation",
       onClick: this.onInputClick,
       onInput: this.onSelectInput,
       onKeyDown: this.onSelectKeyDown,
       ref: this.getContainerRef,
       "data-testid": testId && `${testId}--container`
-    }), /*#__PURE__*/React.createElement("input", {
+    }), jsx("input", {
       name: name,
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), /*#__PURE__*/React.createElement(Select, _extends({
+    }), jsx(Select, _extends({
       enableAnimation: false,
       menuIsOpen: menuIsOpen,
       closeMenuOnSelect: true,

package/dist/es2019/components/DateTimePicker.js

@@ -1,135 +1,92 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from '@emotion/styled'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
 
-import { format, isValid, parse } from 'date-fns';
+import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { mergeStyles } from '@atlaskit/select';
-import * as colors from '@atlaskit/theme/colors';
+import { B100, N0, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
 import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
+import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "10.4.2";
+const packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
-const getBorder = ({
-  appearance,
-  isFocused,
-  isInvalid
-}) => {
-  let color = colors.N20;
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
+const isInvalidBorderStyles = css({
+  borderColor: token('color.iconBorder.danger', R400)
+});
+const isFocusedBorderStyles = css({
+  borderColor: token('color.border.focus', B100)
+});
+const isFocusedStyles = css({
+  backgroundColor: token('color.background.default', N0)
+});
+const subtleBgStyles = css({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+});
+const hoverStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.default', N30),
+    borderColor: token('color.border.neutral', N30)
   }
-
-  if (isFocused) {
-    color = colors.B100;
+});
+const isInvalidHoverStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.default', N0),
+    borderColor: token('color.iconBorder.danger', R400)
   }
-
-  if (isInvalid) {
-    color = colors.R400;
+});
+const isDisabledStyles = css({
+  '&:hover': {
+    cursor: 'default'
   }
-
-  return `border: 2px solid ${color};`;
-};
-
-const getBorderColorHover = ({
-  isFocused,
-  isInvalid,
-  isDisabled
-}) => {
-  let color = colors.N30;
-
-  if (isFocused || isDisabled) {
-    return ``;
-  }
-
-  if (isInvalid) {
-    color = colors.R400;
-  }
-
-  return `border-color: ${color};`;
-};
-
-const getBackgroundColor = ({
-  appearance,
-  isFocused
-}) => {
-  let color = colors.N20;
-
-  if (isFocused) {
-    color = colors.N0;
+});
+const baseContainerStyles = css({
+  display: 'flex',
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  border: `2px solid ${token('color.border.neutral', N20)}`,
+  borderRadius: `${borderRadius()}px`,
+  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
+  '&:hover': {
+    cursor: 'pointer'
   }
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
-  }
-
-  return `background-color: ${color};`;
-};
-
-const getBackgroundColorHover = ({
-  isFocused,
-  isInvalid,
-  isDisabled
-}) => {
-  let color = colors.N30;
-
-  if (isFocused || isDisabled) {
-    return ``;
-  }
-
-  if (isInvalid) {
-    color = colors.N0;
-  }
-
-  return `background-color: ${color};`;
-};
-
-const Flex = styled.div`
-  ${getBackgroundColor}
-  ${getBorder}
-  border-radius: ${borderRadius()}px;
-  display: flex;
-  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
-  &:hover {
-    cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
-    ${getBackgroundColorHover}
-    ${getBorderColorHover}
-  }
-`; // Make DatePicker 50% the width of DateTimePicker
+}); // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 
-const DatePickerContainer = styled.div`
-  flex-basis: 50%;
-  flex-grow: 1;
-  flex-shrink: 0;
-`;
-const TimePickerContainer = styled.div`
-  flex-basis: 50%;
-  flex-grow: 1;
-`;
+const datePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+const timePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1
+});
 const ICON_PADDING = 2;
-const IconContainer = styled.div`
-  flex-basis: inherit;
-  padding-left: ${ICON_PADDING * 2}px;
-  padding-right: ${gridSize()}px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  display: flex;
-  align-items: center;
-  color: ${colors.N70};
-  transition: color 150ms;
-  &:hover {
-    color: ${colors.N500};
+const iconContainerStyles = css({
+  display: 'flex',
+  paddingTop: `6px`,
+  paddingRight: `${gridSize()}px`,
+  paddingBottom: `6px`,
+  paddingLeft: `${ICON_PADDING * 2}px`,
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: token('color.text.lowEmphasis', N70),
+  transition: `color 150ms`,
+  '&:hover': {
+    color: token('color.text.mediumEmphasis', N500)
   }
-`; // react-select overrides (via @atlaskit/select).
+}); // react-select overrides (via @atlaskit/select).
 
 const styles = {
   control: style => ({ ...style,
@@ -228,12 +185,11 @@ class DateTimePicker extends React.Component {
       return this.props.parseValue(value, dateValue, timeValue, zoneValue);
     }
 
-    const parsed = parse(value);
-    const valid = isValid(parsed);
-    return valid ? {
-      dateValue: format(parsed, 'YYYY-MM-DD'),
-      timeValue: format(parsed, 'HH:mm'),
-      zoneValue: format(parsed, 'ZZ')
+    const parsed = parseISO(value);
+    return isValid(parsed) ? {
+      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+      timeValue: format(parsed, convertTokens('HH:mm')),
+      zoneValue: format(parsed, convertTokens('ZZ'))
     } : {
       dateValue,
       timeValue,
@@ -317,16 +273,18 @@ class DateTimePicker extends React.Component {
     // Don't use Date or TimePicker's because they can't be customised
 
     const isClearable = Boolean(dateValue || timeValue);
-    return /*#__PURE__*/React.createElement(Flex, _extends({}, innerProps, {
-      isFocused: isFocused,
-      isDisabled: isDisabled,
-      isInvalid: this.props.isInvalid,
-      appearance: this.props.appearance
-    }), /*#__PURE__*/React.createElement("input", {
+    const notFocusedOrIsDisabled = !(isFocused || isDisabled);
+    return jsx("div", _extends({
+      css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
+    }, innerProps, {
+      "data-testid": testId
+    }), jsx("input", {
       name: name,
       type: "hidden",
       value: value
-    }), /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, bothProps, {
+    }), jsx("div", {
+      css: datePickerContainerStyles
+    }, jsx(DatePicker, _extends({}, bothProps, {
       autoFocus: autoFocus,
       dateFormat: dateFormat,
       hideIcon: true,
@@ -336,7 +294,9 @@ class DateTimePicker extends React.Component {
       value: dateValue,
       locale: locale,
       testId: testId && `${testId}--datepicker`
-    }, datePickerProps))), /*#__PURE__*/React.createElement(TimePickerContainer, null, /*#__PURE__*/React.createElement(TimePicker, _extends({}, bothProps, {
+    }, datePickerProps))), jsx("div", {
+      css: timePickerContainerStyles
+    }, jsx(TimePicker, _extends({}, bothProps, {
       hideIcon: true,
       onChange: this.onTimeChange,
       selectProps: mergedTimePickerSelectProps,
@@ -346,13 +306,12 @@ class DateTimePicker extends React.Component {
       timeFormat: timeFormat,
       locale: locale,
       testId: testId && `${testId}--timepicker`
-    }, timePickerProps))), isClearable && !isDisabled ?
-    /*#__PURE__*/
-    // eslint-disable-next-line styled-components-a11y/click-events-have-key-events,styled-components-a11y/no-static-element-interactions
-    React.createElement(IconContainer, {
+    }, timePickerProps))), isClearable && !isDisabled ? // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    jsx("div", {
+      css: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`
-    }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+    }, jsx(SelectClearIcon, {
       size: "small",
       primaryColor: "inherit",
       label: "clear"

package/dist/es2019/components/TimePicker.js

@@ -9,11 +9,13 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
+import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "10.4.2";
+const packageVersion = "11.1.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -102,13 +104,12 @@ class TimePicker extends React.Component {
         const {
           parseInputValue,
           timeFormat
-        } = this.props; // TODO parseInputValue doesn't accept `timeFormat` as an function arg yet...
-
-        const value = format(parseInputValue(inputValue, timeFormat || defaultTimeFormat), 'HH:mm') || '';
+        } = this.props;
+        const formattedValue = format(parseInputValue(inputValue, timeFormat || defaultTimeFormat), 'HH:mm') || '';
         this.setState({
-          value
+          value: formattedValue
         });
-        this.props.onChange(value);
+        this.props.onChange(formattedValue);
       } else {
         this.onChange(inputValue);
       }
@@ -179,7 +180,7 @@ class TimePicker extends React.Component {
     });
 
     _defineProperty(this, "getSubtleControlStyles", selectStyles => !selectStyles.control ? {
-      border: `2px solid ${this.getSafeState().isFocused ? `${B100}` : `transparent`}`,
+      border: `2px solid ${this.getSafeState().isFocused ? token('color.border.focus', B100) : `transparent`}`,
       backgroundColor: 'transparent',
       padding: '1px'
     } : {});
@@ -208,7 +209,7 @@ class TimePicker extends React.Component {
       }
 
       if (timeFormat) {
-        return format(date, timeFormat);
+        return format(date, convertTokens(timeFormat));
       }
 
       return l10n.formatTime(date);
@@ -294,11 +295,9 @@ class TimePicker extends React.Component {
       }),
       menu: base => ({ ...base,
         ...menuStyles,
-        ...{
-          // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
-          // menu width to the width of our container
-          width: this.containerRef ? this.containerRef.getBoundingClientRect().width : 'auto'
-        }
+        // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
+        // menu width to the width of our container
+        width: this.containerRef ? this.containerRef.getBoundingClientRect().width : 'auto'
       }),
       indicatorsContainer: base => ({ ...base,
         paddingLeft: renderIconContainer ? ICON_PADDING : 0,

package/dist/es2019/components/utils.js

@@ -0,0 +1,89 @@
+// https://github.com/date-fns/date-fns-upgrade/blob/master/src/v2/convertTokens/index.ts
+const tokensMap = {
+  // 'D MMMM': '',
+  // 'Do MMMM': '',
+  // 'DD MMMM': '',
+  M: 'L',
+  Mo: 'Mo',
+  MM: 'LL',
+  MMM: 'LLL',
+  MMMM: 'LLLL',
+  Q: 'q',
+  Qo: 'qo',
+  D: 'd',
+  Do: 'do',
+  DD: 'dd',
+  DDD: 'D',
+  DDDo: 'Do',
+  DDDD: 'DDD',
+  d: 'i',
+  do: 'io',
+  dd: 'iiiiii',
+  ddd: 'iii',
+  dddd: 'iiii',
+  A: 'a',
+  a: 'a',
+  aa: 'aaaa',
+  E: 'i',
+  W: 'I',
+  Wo: 'Io',
+  WW: 'II',
+  YY: 'yy',
+  YYYY: 'yyyy',
+  GG: 'RR',
+  GGGG: 'RRRR',
+  H: 'H',
+  HH: 'HH',
+  h: 'h',
+  hh: 'hh',
+  m: 'm',
+  mm: 'mm',
+  s: 's',
+  ss: 'ss',
+  S: 'S',
+  SS: 'SS',
+  SSS: 'SSS',
+  Z: 'xxx',
+  ZZ: 'xx',
+  X: 't',
+  x: 'T'
+};
+const v1tokens = Object.keys(tokensMap).sort().reverse();
+const tokensRegExp = new RegExp('(\\[[^\\[]*\\])|(\\\\)?' + '(' + v1tokens.join('|') + '|.)', 'g');
+export function convertTokens(format) {
+  const tokensCaptures = format.match(tokensRegExp);
+
+  if (tokensCaptures) {
+    return tokensCaptures.reduce((acc, tokenString, index) => {
+      const v2token = tokensMap[tokenString];
+
+      if (!v2token) {
+        const escapedCaptures = tokenString.match(/^\[(.+)\]$/);
+
+        if (escapedCaptures) {
+          acc.textBuffer.push(escapedCaptures[1]);
+        } else {
+          acc.textBuffer.push(tokenString);
+        }
+      }
+
+      const endOfString = index === tokensCaptures.length - 1;
+
+      if (acc.textBuffer.length && (v2token || endOfString)) {
+        acc.formatBuffer.push(`'${acc.textBuffer.join('')}'`);
+        acc.textBuffer = [];
+      }
+
+      if (v2token) {
+        acc.formatBuffer.push(v2token);
+      }
+
+      return acc;
+    }, {
+      formatBuffer: [],
+      textBuffer: []
+    }).formatBuffer.join('');
+  } else {
+    return format;
+  }
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "10.4.2",
+	"version": "11.1.0",
 	"sideEffects": false
 }