@atlaskit/datetime-picker 12.7.8 → 12.7.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 12.7.10
+
+### Patch Changes
+
+- [`e211efc7c5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e211efc7c5f) - [ux] Add `lang` attribute to value of pickers.
+
+## 12.7.9
+
+### Patch Changes
+
+- [`6f1daf0e449`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f1daf0e449) - Prevent calander from overlaying input when at the bottom of viewport
+
 ## 12.7.8
 
 ### Patch Changes

package/dist/cjs/components/date-picker.js

@@ -29,6 +29,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
+var _singleValue = require("../internal/single-value");
 var _utils = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -37,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -447,9 +448,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var SingleValue = (0, _singleValue.makeSingleValue)({
+        lang: this.props.locale
+      });
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
-        Menu: Menu
+        Menu: Menu,
+        SingleValue: SingleValue
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
       });

package/dist/cjs/components/date-time-picker.js

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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) { (0, _defineProperty2.default)(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; } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/cjs/components/time-picker.js

@@ -25,6 +25,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
+var _singleValue = require("../internal/single-value");
 var _utils = require("./utils");
 var _excluded = ["selectProps"],
   _excluded2 = ["styles"];
@@ -38,7 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -291,9 +292,13 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         label: this.formatTime(value),
         value: value
       };
+      var SingleValue = (0, _singleValue.makeSingleValue)({
+        lang: this.props.locale
+      });
       var selectComponents = _objectSpread({
         DropdownIndicator: _internal.EmptyComponent,
-        Menu: FixedLayerMenu
+        Menu: FixedLayerMenu,
+        SingleValue: SingleValue
       }, hideIcon && {
         ClearIndicator: _internal.EmptyComponent
       });

package/dist/cjs/internal/fixed-layer.js

@@ -61,6 +61,16 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
       if (!containerRef) {
         return /*#__PURE__*/_react.default.createElement("div", null);
       }
+      var divStyles = _objectSpread({
+        background: 'transparent',
+        position: 'absolute',
+        top: 0,
+        height: containerRef.getBoundingClientRect().height,
+        // Don't block the clear button
+        width: containerRef.getBoundingClientRect().width - parseInt(_icon.sizes.small.slice(0, -2)) - (0, _constants.gridSize)()
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') && {
+        pointerEvents: 'none'
+      });
       return (
         /*#__PURE__*/
         /* Need to wrap layer in a fixed position div so that it will render its content as fixed
@@ -71,18 +81,7 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react.default.createElement("div", {
             ref: ref,
             "data-layer-child": true,
-            style: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? {
-              inset: 0,
-              pointerEvents: 'none',
-              background: 'transparent'
-            } : {
-              position: 'absolute',
-              top: 0,
-              height: containerRef.getBoundingClientRect().height,
-              // Don't block the clear button
-              width: containerRef.getBoundingClientRect().width - parseInt(_icon.sizes.small.slice(0, -2)) - (0, _constants.gridSize)(),
-              background: 'transparent'
-            }
+            style: divStyles
           });
         }), /*#__PURE__*/_react.default.createElement(_popper.Popper, null, function (_ref2) {
           var ref = _ref2.ref,

package/dist/cjs/internal/single-value.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeSingleValue = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _select = require("@atlaskit/select");
+var _excluded = ["children"];
+/**
+ * This creates a functional component that `react-select` will use to make the
+ * SingleValue part of the different pickers.
+ */
+var makeSingleValue = function makeSingleValue(_ref) {
+  var lang = _ref.lang;
+  return function (_ref2) {
+    var children = _ref2.children,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, props, {
+      innerProps: {
+        lang: lang
+      }
+    }), children);
+  };
+};
+exports.makeSingleValue = makeSingleValue;

package/dist/es2019/components/date-picker.js

@@ -17,9 +17,10 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
+import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.8";
+const packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -435,9 +436,13 @@ class DatePicker extends Component {
     const menuIsOpen = isOpen && !isDisabled;
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+    const SingleValue = makeSingleValue({
+      lang: this.props.locale
+    });
     const selectComponents = {
       DropdownIndicator: dropDownIcon,
       Menu,
+      SingleValue,
       ...(!showClearIndicator && {
         ClearIndicator: EmptyComponent
       })

package/dist/es2019/components/date-time-picker.js

@@ -17,7 +17,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.8";
+const packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/es2019/components/time-picker.js

@@ -14,9 +14,10 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
+import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.8";
+const packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -265,9 +266,13 @@ class TimePicker extends React.Component {
       label: this.formatTime(value),
       value
     };
+    const SingleValue = makeSingleValue({
+      lang: this.props.locale
+    });
     const selectComponents = {
       DropdownIndicator: EmptyComponent,
       Menu: FixedLayerMenu,
+      SingleValue,
       ...(hideIcon && {
         ClearIndicator: EmptyComponent
       })

package/dist/es2019/internal/fixed-layer.js

@@ -33,6 +33,17 @@ export default class FixedLayer extends React.Component {
     if (!containerRef) {
       return /*#__PURE__*/React.createElement("div", null);
     }
+    const divStyles = {
+      background: 'transparent',
+      position: 'absolute',
+      top: 0,
+      height: containerRef.getBoundingClientRect().height,
+      // Don't block the clear button
+      width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize(),
+      ...(getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') && {
+        pointerEvents: 'none'
+      })
+    };
     return (
       /*#__PURE__*/
       /* Need to wrap layer in a fixed position div so that it will render its content as fixed
@@ -43,18 +54,7 @@ export default class FixedLayer extends React.Component {
       }) => /*#__PURE__*/React.createElement("div", {
         ref: ref,
         "data-layer-child": true,
-        style: getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? {
-          inset: 0,
-          pointerEvents: 'none',
-          background: 'transparent'
-        } : {
-          position: 'absolute',
-          top: 0,
-          height: containerRef.getBoundingClientRect().height,
-          // Don't block the clear button
-          width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize(),
-          background: 'transparent'
-        }
+        style: divStyles
       })), /*#__PURE__*/React.createElement(Popper, null, ({
         ref,
         style,

package/dist/es2019/internal/single-value.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { components } from '@atlaskit/select';
+
+/**
+ * This creates a functional component that `react-select` will use to make the
+ * SingleValue part of the different pickers.
+ */
+export const makeSingleValue = ({
+  lang
+}) => ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, props, {
+    innerProps: {
+      lang
+    }
+  }), children);
+};

package/dist/esm/components/date-picker.js

@@ -28,9 +28,10 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
+import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -440,9 +441,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var SingleValue = makeSingleValue({
+        lang: this.props.locale
+      });
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
-        Menu: Menu
+        Menu: Menu,
+        SingleValue: SingleValue
       }, !showClearIndicator && {
         ClearIndicator: EmptyComponent
       });

package/dist/esm/components/date-time-picker.js

@@ -27,7 +27,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/esm/components/time-picker.js

@@ -27,9 +27,10 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
+import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.8";
+var packageVersion = "12.7.10";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -282,9 +283,13 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         label: this.formatTime(value),
         value: value
       };
+      var SingleValue = makeSingleValue({
+        lang: this.props.locale
+      });
       var selectComponents = _objectSpread({
         DropdownIndicator: EmptyComponent,
-        Menu: FixedLayerMenu
+        Menu: FixedLayerMenu,
+        SingleValue: SingleValue
       }, hideIcon && {
         ClearIndicator: EmptyComponent
       });

package/dist/esm/internal/fixed-layer.js

@@ -55,6 +55,16 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
       if (!containerRef) {
         return /*#__PURE__*/React.createElement("div", null);
       }
+      var divStyles = _objectSpread({
+        background: 'transparent',
+        position: 'absolute',
+        top: 0,
+        height: containerRef.getBoundingClientRect().height,
+        // Don't block the clear button
+        width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize()
+      }, getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') && {
+        pointerEvents: 'none'
+      });
       return (
         /*#__PURE__*/
         /* Need to wrap layer in a fixed position div so that it will render its content as fixed
@@ -65,18 +75,7 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/React.createElement("div", {
             ref: ref,
             "data-layer-child": true,
-            style: getBooleanFF('platform.design-system-team.date-picker-input-a11y-fix_cbbxs') ? {
-              inset: 0,
-              pointerEvents: 'none',
-              background: 'transparent'
-            } : {
-              position: 'absolute',
-              top: 0,
-              height: containerRef.getBoundingClientRect().height,
-              // Don't block the clear button
-              width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize(),
-              background: 'transparent'
-            }
+            style: divStyles
           });
         }), /*#__PURE__*/React.createElement(Popper, null, function (_ref2) {
           var ref = _ref2.ref,

package/dist/esm/internal/single-value.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { components } from '@atlaskit/select';
+
+/**
+ * This creates a functional component that `react-select` will use to make the
+ * SingleValue part of the different pickers.
+ */
+export var makeSingleValue = function makeSingleValue(_ref) {
+  var lang = _ref.lang;
+  return function (_ref2) {
+    var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+    return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, props, {
+      innerProps: {
+        lang: lang
+      }
+    }), children);
+  };
+};

package/dist/types/components/date-picker.d.ts

@@ -216,8 +216,8 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Readonly<DatePickerProps>): void;
     getSafeState: () => {
         inputValue: any;
-        isOpen: boolean;
         value: string;
+        isOpen: boolean;
         isFocused: boolean;
         clearingFromIcon: boolean;
         calendarValue: string;
@@ -261,7 +261,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -281,5 +281,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "maxDate" | "minDate" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "dateFormat" | "placeholder" | "locale" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/date-time-picker.d.ts

@@ -196,7 +196,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "appearance" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -216,5 +216,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "value" | "isInvalid" | "dateFormat" | "locale" | "key" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/time-picker.d.ts

@@ -202,7 +202,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -222,5 +222,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "placeholder" | "locale" | "key" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/internal/single-value.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { OptionType, SingleValueProps } from '@atlaskit/select';
+/**
+ * This creates a functional component that `react-select` will use to make the
+ * SingleValue part of the different pickers.
+ */
+export declare const makeSingleValue: ({ lang }: {
+    lang: string;
+}) => ({ children, ...props }: SingleValueProps<OptionType, false>) => JSX.Element;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -216,8 +216,8 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Readonly<DatePickerProps>): void;
     getSafeState: () => {
         inputValue: any;
-        isOpen: boolean;
         value: string;
+        isOpen: boolean;
         isFocused: boolean;
         clearingFromIcon: boolean;
         calendarValue: string;
@@ -261,7 +261,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "dateFormat" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "name" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -281,5 +281,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "maxDate" | "minDate" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "dateFormat" | "placeholder" | "locale" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "maxDate" | "minDate" | "isOpen" | "name" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat" | "locale" | "weekStartDay" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/date-time-picker.d.ts

@@ -196,7 +196,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "appearance" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "locale" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -216,5 +216,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "value" | "isInvalid" | "dateFormat" | "locale" | "key" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "appearance" | "value" | "id" | "key" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/time-picker.d.ts

@@ -202,7 +202,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "placeholder" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "times" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "id" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -222,5 +222,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "placeholder" | "locale" | "key" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "innerProps" | "isDisabled" | "selectProps" | "appearance" | "value" | "id" | "key" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "analyticsContext" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/internal/single-value.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { OptionType, SingleValueProps } from '@atlaskit/select';
+/**
+ * This creates a functional component that `react-select` will use to make the
+ * SingleValue part of the different pickers.
+ */
+export declare const makeSingleValue: ({ lang }: {
+    lang: string;
+}) => ({ children, ...props }: SingleValueProps<OptionType, false>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.7.8",
+  "version": "12.7.10",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/calendar": "^13.1.0",
+    "@atlaskit/calendar": "^13.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
@@ -41,7 +41,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/modal-dialog": "^12.6.0",

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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