@atlaskit/datetime-picker 15.1.3 → 15.2.0

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

@@ -14,22 +14,29 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
+// This is a deprecated component but we will be able to use the actual hook
+// version very soon from converting this to functional. And also React 18 is on
+// the horizon
+import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
+import { N500, N70 } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
 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 = "15.1.3";
+var packageVersion = "15.2.0";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -48,6 +55,38 @@ var datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
+var pickerContainerStyles = css({
+  position: 'relative'
+});
+var iconContainerStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'absolute',
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  transition: "color 150ms",
+  '&:hover': {
+    color: "var(--ds-text-subtle, ".concat(N500, ")")
+  }
+});
+var iconSpacingWithClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-400, 2rem)"
+});
+var iconSpacingWithoutClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+});
+var calendarButtonStyles = xcss({
+  borderRadius: 'border.radius',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
 var DatePickerComponent = /*#__PURE__*/function (_Component) {
   _inherits(DatePickerComponent, _Component);
   var _super = _createSuper(DatePickerComponent);
@@ -57,6 +96,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, DatePickerComponent);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "containerRef", null);
+    _defineProperty(_assertThisInitialized(_this), "calendarRef", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "calendarButtonRef", /*#__PURE__*/createRef());
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
     _defineProperty(_assertThisInitialized(_this), "getValue", function () {
@@ -76,23 +117,30 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (_ref2) {
-      var _this$containerRef;
       var iso = _ref2.iso;
       _this.setState({
         selectInputValue: '',
         isOpen: false,
         calendarValue: iso,
-        value: iso
+        value: iso,
+        wasOpenedFromCalendarButton: false
       });
       _this.props.onChange(iso);
 
-      // Not ideal, and the alternative is to place a ref on the inner input of the Select
-      // but that would require a lot of extra work on the Select component just for this
-      // focus functionality. While that would be the 'right react' way to do it, it doesnt
-      // post any other benefits; performance wise, we are only searching within the
-      // container, making it quick.
-      var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      // Yes, this is not ideal. The alternative is to be able to place a ref
+      // on the inner input of Select itself, which would require a lot of
+      // extra stuff in the Select component for only this one thing. While
+      // this would be more "React-y", it doesn't seem to pose any other
+      // benefits. Performance-wise, we are only searching within the
+      // container, so it's quick.
+      if (_this.state.wasOpenedFromCalendarButton) {
+        var _this$calendarButtonR;
+        (_this$calendarButtonR = _this.calendarButtonRef.current) === null || _this$calendarButtonR === void 0 || _this$calendarButtonR.focus();
+      } else {
+        var _this$containerRef;
+        var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      }
       _this.setState({
         isOpen: false
       });
@@ -100,7 +148,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
       if (!_this.props.isDisabled && !_this.getIsOpen()) {
         _this.setState({
-          isOpen: true
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -110,7 +159,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         _this.setState({
           isOpen: false,
-          shouldSetFocusOnCurrentDay: false
+          shouldSetFocusOnCurrentDay: false,
+          wasOpenedFromCalendarButton: false
         });
         _this.props.onBlur(event);
       }
@@ -133,7 +183,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         // container. Makes keyboard accessibility of calendar possible
         _this.setState({
           isOpen: false,
-          isFocused: false
+          isFocused: false,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -147,9 +198,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         });
       } else {
         _this.setState({
-          isOpen: true,
+          // Don't open when focused into via keyboard if the calendar button is present
+          isOpen: !_this.props.shouldShowCalendarButton,
           calendarValue: value,
-          isFocused: true
+          isFocused: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       _this.props.onFocus(event);
@@ -172,11 +225,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         }
       }
       _this.setState({
-        isOpen: true
+        isOpen: true,
+        wasOpenedFromCalendarButton: false
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
-      var _this$containerRef4;
       var calendarValue = _this.state.calendarValue;
       var value = _this.getValue();
       var keyPressed = event.key.toLowerCase();
@@ -184,7 +237,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       // If the input is focused and the calendar is not visible, handle space and enter clicks
       if (!_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
         _this.setState({
-          isOpen: true
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       switch (keyPressed) {
@@ -195,11 +249,18 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           // this would be more "React-y", it doesn't seem to pose any other
           // benefits. Performance-wise, we are only searching within the
           // container, so it's quick.
-          var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
-          innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+          if (_this.state.wasOpenedFromCalendarButton) {
+            var _this$calendarButtonR2;
+            (_this$calendarButtonR2 = _this.calendarButtonRef.current) === null || _this$calendarButtonR2 === void 0 || _this$calendarButtonR2.focus();
+          } else {
+            var _this$containerRef4;
+            var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
+            innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+          }
           _this.setState({
             isOpen: false,
-            shouldSetFocusOnCurrentDay: false
+            shouldSetFocusOnCurrentDay: false,
+            wasOpenedFromCalendarButton: false
           });
           break;
         case 'backspace':
@@ -234,7 +295,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
               selectInputValue: '',
               isOpen: false,
               value: safeCalendarValue,
-              calendarValue: safeCalendarValue
+              calendarValue: safeCalendarValue,
+              wasOpenedFromCalendarButton: false
             });
             if (valueChanged) {
               _this.props.onChange(safeCalendarValue);
@@ -253,6 +315,38 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           break;
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "onCalendarButtonKeyDown", function (e) {
+      // We want to stop this from triggering other keydown events, particularly
+      // for space and enter presses. Otherwise, it opens and then closes
+      // immediately.
+      if (e.type === 'keydown') {
+        e.stopPropagation();
+      }
+      _this.setState({
+        isKeyDown: true,
+        wasOpenedFromCalendarButton: true
+      });
+    });
+    // This event handler is triggered from both keydown and click. It's weird.
+    _defineProperty(_assertThisInitialized(_this), "onCalendarButtonClick", function (e) {
+      _this.setState({
+        isOpen: !_this.state.isOpen,
+        wasOpenedFromCalendarButton: true
+      }, function () {
+        var _this$calendarRef;
+        // We don't want the focus to move if this is a click event
+        if (!_this.state.isKeyDown) {
+          return;
+        }
+        _this.setState({
+          isKeyDown: false
+        });
+
+        // Focus on the first button within the calendar
+        (_this$calendarRef = _this.calendarRef) === null || _this$calendarRef === void 0 || (_this$calendarRef = _this$calendarRef.current) === null || _this$calendarRef === void 0 || (_this$calendarRef = _this$calendarRef.querySelector('button')) === null || _this$calendarRef === void 0 || _this$calendarRef.focus();
+      });
+      e.stopPropagation();
+    });
     _defineProperty(_assertThisInitialized(_this), "onClear", function () {
       var changedState = {
         value: '',
@@ -294,6 +388,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       }
     });
     _this.state = {
+      isKeyDown: false,
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
@@ -302,29 +397,36 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(_this.props.locale),
       locale: _this.props.locale,
-      shouldSetFocusOnCurrentDay: false
+      shouldSetFocusOnCurrentDay: false,
+      wasOpenedFromCalendarButton: false
     };
     return _this;
   }
   _createClass(DatePickerComponent, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
       var _this$props = this.props,
         _this$props$appearanc = _this$props.appearance,
         appearance = _this$props$appearanc === void 0 ? 'default' : _this$props$appearanc,
         ariaDescribedBy = _this$props['aria-describedby'],
         _this$props$autoFocus = _this$props.autoFocus,
         autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
-        disabled = _this$props.disabled,
-        disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$hideIcon = _this$props.hideIcon,
         hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
+        _this$props$openCalen = _this$props.openCalendarLabel,
+        openCalendarLabel = _this$props$openCalen === void 0 ? 'Open calendar' : _this$props$openCalen,
+        disabled = _this$props.disabled,
+        disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$icon = _this$props.icon,
         icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
         _this$props$id = _this$props.id,
         id = _this$props$id === void 0 ? '' : _this$props$id,
         _this$props$innerProp = _this$props.innerProps,
         innerProps = _this$props$innerProp === void 0 ? {} : _this$props$innerProp,
+        _this$props$inputLabe = _this$props.inputLabel,
+        inputLabel = _this$props$inputLabe === void 0 ? 'Date picker' : _this$props$inputLabe,
+        inputLabelId = _this$props.inputLabelId,
         _this$props$isDisable = _this$props.isDisabled,
         isDisabled = _this$props$isDisable === void 0 ? false : _this$props$isDisable,
         _this$props$isInvalid = _this$props.isInvalid,
@@ -340,6 +442,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         previousMonthLabel = _this$props.previousMonthLabel,
         _this$props$selectPro3 = _this$props.selectProps,
         selectProps = _this$props$selectPro3 === void 0 ? {} : _this$props$selectPro3,
+        shouldShowCalendarButton = _this$props.shouldShowCalendarButton,
         _this$props$spacing = _this$props.spacing,
         spacing = _this$props$spacing === void 0 ? 'default' : _this$props$spacing,
         testId = _this$props.testId,
@@ -357,7 +460,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         lang: this.props.locale
       });
       var selectComponents = _objectSpread({
-        DropdownIndicator: dropDownIcon,
+        DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
         Menu: Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {
@@ -375,6 +478,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
+        calendarRef: this.calendarRef,
         calendarValue: value && getShortISOString(parseISO(value)),
         calendarView: calendarValue,
         onCalendarChange: this.onCalendarChange,
@@ -383,6 +487,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         calendarWeekStartDay: weekStartDay,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
+
+      // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
       var mergedStyles = mergeStyles(selectStyles, {
         control: function control(base) {
           return _objectSpread(_objectSpread({}, base), disabledStyle);
@@ -403,10 +509,14 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         }),
         value: value
       } : null;
+
+      // `label` takes precedence of the `inputLabel`
+      var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
       return (
         // These event handlers must be on this element because the events come
         // from different child elements.
         jsx("div", _extends({}, innerProps, {
+          css: pickerContainerStyles,
           role: "presentation",
           onBlur: this.onContainerBlur,
           onFocus: this.onContainerFocus,
@@ -425,7 +535,14 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
-          closeMenuOnSelect: true,
+          closeMenuOnSelect: true
+          // FOr some reason, this and the below `styles` type error _only_ show
+          // up when you alter some of the properties in the `selectComponents`
+          // object. These errors are still present, and I suspect have always
+          // been present, without changing the unrelated code. Ignoring as the
+          // component still works as expected despite this error. And also
+          // because the select refresh team may solve it later.
+          ,
           components: selectComponents,
           enableAnimation: false,
           inputId: id,
@@ -450,6 +567,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           spacing: spacing,
           testId: testId
           // These aren't part of `Select`'s API, but we're using them here.
+          // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
           ,
           calendarContainerRef: calendarProps.calendarContainerRef,
           calendarDisabled: calendarProps.calendarDisabled,
@@ -457,6 +575,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           calendarLocale: calendarProps.calendarLocale,
           calendarMaxDate: calendarProps.calendarMaxDate,
           calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
           calendarValue: calendarProps.calendarValue,
           calendarView: calendarProps.calendarView,
           calendarWeekStartDay: calendarProps.calendarWeekStartDay,
@@ -465,7 +584,32 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onCalendarSelect: calendarProps.onCalendarSelect,
           previousMonthLabel: previousMonthLabel,
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-        })))
+        })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
+          name: function name(id) {
+            return "open-calendar-label--".concat(id);
+          }
+        }, function (openCalendarLabelId) {
+          return jsx("div", {
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+          }, inputLabelId && jsx(VisuallyHidden, {
+            id: openCalendarLabelId
+          }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
+            'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
+          } : {
+            'aria-label': fullopenCalendarLabel
+          }, {
+            onClick: _this2.onCalendarButtonClick,
+            onKeyDown: _this2.onCalendarButtonKeyDown,
+            ref: _this2.calendarButtonRef,
+            testId: testId && "".concat(testId, "--open-calendar-button"),
+            type: "button",
+            backgroundColor: "color.background.neutral.subtle",
+            padding: "space.050",
+            xcss: calendarButtonStyles
+          }), jsx(CalendarIcon, {
+            label: ""
+          })));
+        }) : null)
       );
     }
   }], [{

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

@@ -28,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.1.3";
+var packageVersion = "15.2.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -347,6 +347,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         placeholder: datePickerProps.placeholder,
         previousMonthLabel: datePickerProps.previousMonthLabel,
         selectProps: mergedDatePickerSelectProps,
+        shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
         spacing: datePickerProps.spacing || spacing,
         testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
         value: dateValue,

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 = "15.1.3";
+var packageVersion = "15.2.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -271,6 +271,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ClearIndicator: EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
+
+  // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
       return _objectSpread({}, base);
@@ -322,7 +324,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: initialValue,
     spacing: spacing
     // We need this to get things to work, even though it's not supported.
-    // @ts-ignore
+    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
     ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,

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

@@ -39,7 +39,9 @@ export var FixedLayerMenu = function FixedLayerMenu(_ref) {
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx(FixedLayer, {
-    inputValue: selectProps.inputValue,
+    inputValue: selectProps.inputValue
+    //@ts-ignore react-select unsupported props
+    ,
     containerRef: selectProps.fixedLayerRef,
     content: jsx(components.Menu, _extends({}, rest, {
       // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
@@ -67,7 +69,9 @@ export var FixedLayerMenu = function FixedLayerMenu(_ref) {
       // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
       ,
       theme: theme
-    }), children),
+    }), children)
+    //@ts-ignore react-select unsupported props
+    ,
     testId: selectProps.testId
   });
 };

package/dist/esm/internal/menu.js

@@ -65,6 +65,7 @@ export var Menu = function Menu(_ref) {
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
       previousMonthLabel: selectProps.previousMonthLabel,
+      ref: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,

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

@@ -9,6 +9,7 @@ import { type ActionMeta, type InputActionMeta } from '@atlaskit/select';
 import { type DatePickerBaseProps } from '../types';
 type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
+    isKeyDown: boolean;
     isOpen: boolean;
     /**
      * When being cleared from the icon the DatePicker is blurred.
@@ -23,6 +24,7 @@ interface State {
     l10n: LocalizationProvider;
     locale: string;
     shouldSetFocusOnCurrentDay: boolean;
+    wasOpenedFromCalendarButton: boolean;
 }
 declare const datePickerDefaultProps: {
     defaultIsOpen: boolean;
@@ -46,6 +48,8 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     };
     containerRef: HTMLElement | null;
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+    calendarButtonRef: React.RefObject<HTMLButtonElement>;
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
         l10n: LocalizationProvider;
@@ -66,6 +70,8 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onCalendarButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onCalendarButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClear: () => void;
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
@@ -82,7 +88,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "isOpen" | "hideIcon"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -91,5 +97,23 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -52,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

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

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types/types.d.ts

@@ -142,6 +142,37 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Called when the field is focused.
      */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.
+     *
+     * @default 'Date picker'
+     */
+    inputLabel?: string;
+    /**
+     * The ID of the label for the input, used when `shouldShowCalendarButton` is
+     * true. See `shouldShowCalendarButton` description for more details.
+     */
+    inputLabelId?: string;
+    /**
+     * The label associated with the button to open the calendar, rendered via the
+     * `shouldShowCalendarButton` prop. If a `label` prop is provided, this
+     * calendar button label will be prefixed by the value of `label`. If no
+     * `label` prop is provided, this prefix should be manually added. For
+     * example,
+     *
+     * ```tsx
+     * <label id="label" htmlFor="datepicker">Desired Appointment Date</label>
+     * <DatePicker
+     * 	id="datepicker"
+     * 	shouldShowCalendarButton
+     * 	inputLabel="Desired Appointment Date"
+     * 	openCalendarLabel="open calendar"
+     * />
+     * ```
+     *
+     * @default 'open calendar'
+     */
+    openCalendarLabel?: string;
     /**
      * A function for parsing input characters and transforming them into a Date object.
      * By default parses the date string based off the locale.
@@ -155,6 +186,17 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * The aria-label attribute associated with the previous-month arrow.
      */
     previousMonthLabel?: string;
+    /**
+     * Provides a functional calendar button that opens the calendar picker that
+     * lives on the right side of the date picker.
+     *
+     * The accessible name for this button is caculated using either the `label`,
+     * `inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`
+     * prop.
+     *
+     * @default false
+     */
+    shouldShowCalendarButton?: boolean;
     /**
      * The spacing for the select control.
      *