@atlaskit/datetime-picker 16.0.3 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/datetime-picker
 
+## 16.1.0
+
+### Minor Changes
+
+- [#115611](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/115611)
+  [`5f9efb77e9d97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f9efb77e9d97) -
+  Adds a new prop to allow wrapping the DatePicker calendar, for internal use only.
+
 ## 16.0.3
 
 ### Patch Changes

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

@@ -40,7 +40,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var dropdownIndicatorStyles = (0, _primitives.xcss)({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -515,7 +515,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
-        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
+        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay,
+        menuInnerWrapper: this.props.menuInnerWrapper
       };
 
       // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -618,7 +619,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           onCalendarChange: calendarProps.onCalendarChange,
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
-          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+          menuInnerWrapper: calendarProps.menuInnerWrapper
         })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_useId.IdProvider, {
           prefix: "open-calendar-label--"
         }, function (_ref3) {

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

@@ -38,7 +38,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -509,7 +509,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     onCalendarSelect: onCalendarSelect,
     calendarLocale: locale,
     calendarWeekStartDay: weekStartDay,
-    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay
+    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
 
   // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -615,7 +620,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       onCalendarChange: calendarProps.onCalendarChange,
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
-      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: calendarProps.menuInnerWrapper
     })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_primitives.Box, {
       xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
     }, (0, _react2.jsx)(_new.IconButton, {

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

@@ -37,7 +37,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -37,7 +37,7 @@ function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/menu.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
 var _layering = require("@atlaskit/layering");
@@ -33,7 +34,7 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
-var menuStyles = (0, _react.css)({
+var menuStyles = (0, _react2.css)({
   zIndex: _constants.layers.dialog(),
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -48,7 +49,8 @@ var Menu = exports.Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   var calendarValue = selectProps.calendarValue,
-    calendarView = selectProps.calendarView;
+    calendarView = selectProps.calendarView,
+    MenuInnerWrapper = selectProps.menuInnerWrapper;
   var _getValidDate = getValidDate([calendarValue, calendarView]),
     day = _getValidDate.day,
     month = _getValidDate.month,
@@ -60,9 +62,10 @@ var Menu = exports.Menu = function Menu(_ref) {
     event.stopPropagation();
     event.preventDefault();
   };
-  return (0, _react.jsx)(_layering.Layering, {
+  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : _react.Fragment;
+  return (0, _react2.jsx)(_layering.Layering, {
     isDisabled: false
-  }, (0, _react.jsx)(_fixedLayer.default, {
+  }, (0, _react2.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
     content:
@@ -73,11 +76,11 @@ var Menu = exports.Menu = function Menu(_ref) {
     // firing. This is passed in via the `innerProps`. Therefore, we must
     // pass it in *after* the `innerProps` spread.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react.jsx)("div", (0, _extends2.default)({
+    (0, _react2.jsx)("div", (0, _extends2.default)({
       css: menuStyles
     }, innerProps, {
       onMouseDown: onMenuMouseDown
-    }), (0, _react.jsx)(_calendar.default, {
+    }), (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_calendar.default, {
       day: day,
       month: month,
       year: year,
@@ -95,7 +98,7 @@ var Menu = exports.Menu = function Menu(_ref) {
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay
-    })),
+    }))),
     testId: selectProps.testId
   }));
 };

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

@@ -24,7 +24,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.0.3";
+const packageVersion = "16.1.0";
 const dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -493,7 +493,8 @@ class DatePickerComponent extends Component {
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
       calendarWeekStartDay: weekStartDay,
-      shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
+      shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: this.props.menuInnerWrapper
     };
 
     // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -596,7 +597,8 @@ class DatePickerComponent extends Component {
         onCalendarChange: calendarProps.onCalendarChange,
         onCalendarSelect: calendarProps.onCalendarSelect,
         previousMonthLabel: previousMonthLabel,
-        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+        menuInnerWrapper: calendarProps.menuInnerWrapper
       })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
         prefix: "open-calendar-label--"
       }, ({

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

@@ -23,7 +23,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.0.3";
+const packageVersion = "16.1.0";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -435,7 +435,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onCalendarSelect,
     calendarLocale: locale,
     calendarWeekStartDay: weekStartDay,
-    shouldSetFocusOnCurrentDay
+    shouldSetFocusOnCurrentDay,
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
 
   // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -541,7 +546,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       onCalendarChange: calendarProps.onCalendarChange,
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
-      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: calendarProps.menuInnerWrapper
     })), shouldShowCalendarButton && !isDisabled ? jsx(Box, {
       xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
     }, jsx(IconButton, {

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

@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.0.3";
+const packageVersion = "16.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -18,7 +18,7 @@ const DatePicker = componentWithCondition(
 // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
 () => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.0.3";
+const packageVersion = "16.1.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "16.0.3";
+const packageVersion = "16.1.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/menu.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
@@ -44,7 +44,8 @@ export const Menu = ({
 }) => {
   const {
     calendarValue,
-    calendarView
+    calendarView,
+    menuInnerWrapper: MenuInnerWrapper
   } = selectProps;
   const {
     day,
@@ -58,6 +59,7 @@ export const Menu = ({
     event.stopPropagation();
     event.preventDefault();
   };
+  const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
   return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
@@ -75,7 +77,7 @@ export const Menu = ({
       css: menuStyles
     }, innerProps, {
       onMouseDown: onMenuMouseDown
-    }), jsx(Calendar, {
+    }), jsx(Wrapper, null, jsx(Calendar, {
       day: day,
       month: month,
       year: year,
@@ -93,7 +95,7 @@ export const Menu = ({
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && `${selectProps.testId}--calendar`,
       weekStartDay: selectProps.calendarWeekStartDay
-    })),
+    }))),
     testId: selectProps.testId
   }));
 };

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

@@ -33,7 +33,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -508,7 +508,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
-        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
+        shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay,
+        menuInnerWrapper: this.props.menuInnerWrapper
       };
 
       // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -611,7 +612,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onCalendarChange: calendarProps.onCalendarChange,
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
-          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+          menuInnerWrapper: calendarProps.menuInnerWrapper
         })), shouldShowCalendarButton && !isDisabled ? jsx(IdProvider, {
           prefix: "open-calendar-label--"
         }, function (_ref3) {

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

@@ -29,7 +29,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -500,7 +500,12 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     onCalendarSelect: onCalendarSelect,
     calendarLocale: locale,
     calendarWeekStartDay: weekStartDay,
-    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay
+    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
 
   // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
@@ -606,7 +611,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       onCalendarChange: calendarProps.onCalendarChange,
       onCalendarSelect: calendarProps.onCalendarSelect,
       previousMonthLabel: previousMonthLabel,
-      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
+      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: calendarProps.menuInnerWrapper
     })), shouldShowCalendarButton && !isDisabled ? jsx(Box, {
       xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
     }, jsx(IconButton, {

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

@@ -33,7 +33,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -27,7 +27,7 @@ function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.0.3";
+var packageVersion = "16.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/menu.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
@@ -42,7 +42,8 @@ export var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   var calendarValue = selectProps.calendarValue,
-    calendarView = selectProps.calendarView;
+    calendarView = selectProps.calendarView,
+    MenuInnerWrapper = selectProps.menuInnerWrapper;
   var _getValidDate = getValidDate([calendarValue, calendarView]),
     day = _getValidDate.day,
     month = _getValidDate.month,
@@ -54,6 +55,7 @@ export var Menu = function Menu(_ref) {
     event.stopPropagation();
     event.preventDefault();
   };
+  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
   return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
@@ -71,7 +73,7 @@ export var Menu = function Menu(_ref) {
       css: menuStyles
     }, innerProps, {
       onMouseDown: onMenuMouseDown
-    }), jsx(Calendar, {
+    }), jsx(Wrapper, null, jsx(Calendar, {
       day: day,
       month: month,
       year: year,
@@ -89,7 +91,7 @@ export var Menu = function Menu(_ref) {
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay
-    })),
+    }))),
     testId: selectProps.testId
   }));
 };

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

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "menuInnerWrapper" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
     disabled?: string[] | undefined;
     defaultValue?: string | undefined;
     onFocus?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;

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

@@ -8,7 +8,7 @@ declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc"
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "menuInnerWrapper" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
     disabled?: string[] | undefined;
     defaultValue?: string | undefined;
     onFocus?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;

package/dist/types/types.d.ts

@@ -268,6 +268,13 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * - `6` saturday
      */
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**

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

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "menuInnerWrapper" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
     disabled?: string[] | undefined;
     defaultValue?: string | undefined;
     onFocus?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;

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

@@ -8,7 +8,7 @@ declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc"
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "menuInnerWrapper" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
     disabled?: string[] | undefined;
     defaultValue?: string | undefined;
     onFocus?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;

package/dist/types-ts4.5/types.d.ts

@@ -268,6 +268,13 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * - `6` saturday
      */
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "16.0.3",
+	"version": "16.1.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"