@atlaskit/datetime-picker 19.2.0 → 19.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/datetime-picker
 
+## 19.3.0
+
+### Minor Changes
+
+- [`07e6863319dbc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/07e6863319dbc) -
+  Add an optional clock button for opening the time picker without opening its menu on keyboard
+  focus. Invoke consumer menu callbacks once per clock button activation, including in React Strict
+  Mode. Share the calendar and clock button positioning and spacing through an internal styling-only
+  wrapper.
+
 ## 19.2.0
 
 ### Minor Changes

package/dist/cjs/components/date-picker.compiled.css

@@ -1,15 +1,9 @@
-._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
-._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
-._152tze3t{inset-block-start:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
+._v564vrg3{transition:color .15s}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1k8s{min-height:1.5rem}
 ._1ul91k8s{min-width:1.5rem}
 ._4cvr1h6o{align-items:center}
-._4t3i1osq{height:100%}
 ._i0dl1kw7{flex-basis:inherit}
 ._kqswh2mm{position:relative}
-._kqswstnw{position:absolute}
-._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}

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

@@ -18,7 +18,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _dateFns = require("date-fns");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
-var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
 var _localizationProvider = require("@atlaskit/locale/localization-provider");
@@ -37,6 +36,7 @@ var _isDateDisabled = require("../internal/is-date-disabled");
 var _menu = require("../internal/menu");
 var _menuTopLayer = require("../internal/menu-top-layer");
 var _parseDate = require("../internal/parse-date");
+var _pickerButtonContainer = require("../internal/picker-button-container");
 var _singleValue = require("../internal/single-value");
 var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "calendarLabel", "placeholder", "nextMonthLabel", "previousMonthLabel"],
   _excluded2 = ["MenuPortal"],
@@ -47,13 +47,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 = "19.1.0";
+var packageVersion = "19.2.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
-  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
-  iconSpacingWithClearButtonStyles: "_12l2xy5q",
-  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+  iconContainerStyles: "_v564vrg3 _i0dl1kw7 _syaz1rpy _30l3azsu"
 };
 var analyticsAttributes = {
   componentName: 'datePicker',
@@ -676,8 +674,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     previousMonthLabel: previousMonthLabel,
     shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
     menuInnerWrapper: calendarProps.menuInnerWrapper
-  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_pickerButtonContainer.PickerButtonContainer, {
+    hasClearIndicator: Boolean(getterValue && !hideIcon),
+    xcss: styles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(_button.default, {
     appearance: "subtle",
     label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,

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

@@ -34,7 +34,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.1.0";
+var packageVersion = "19.2.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -509,12 +509,14 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     label: timePickerLabel,
     locale: timePickerProps.locale || locale,
     name: timePickerProps.name,
+    openTimeLabel: timePickerProps.openTimeLabel,
     onBlur: onTimeBlur,
     onChange: onTimeChange,
     onFocus: onTimeFocus,
     parseInputValue: timePickerProps.parseInputValue,
     placeholder: timePickerProps.placeholder,
     selectProps: mergedTimePickerSelectProps,
+    shouldShowTimeButton: timePickerProps.shouldShowTimeButton,
     spacing: timePickerProps.spacing || spacing,
     testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
     timeFormat: timePickerProps.timeFormat,

package/dist/cjs/components/time-picker.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

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

@@ -1,3 +1,4 @@
+/* time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./time-picker.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -13,7 +16,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _dateFns = require("date-fns");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
 var _localizationProvider = require("@atlaskit/locale/localization-provider");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _styles = require("@atlaskit/react-select/styles");
@@ -25,6 +30,7 @@ var _fixedLayerMenu = require("../internal/fixed-layer-menu");
 var _fixedLayerMenuTopLayer = require("../internal/fixed-layer-menu-top-layer");
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 var _parseTokens = require("../internal/parse-tokens");
+var _pickerButtonContainer = require("../internal/picker-button-container");
 var _placeholderDateTime = require("../internal/placeholder-date-time");
 var _singleValue = require("../internal/single-value");
 var _excluded = ["styles"];
@@ -32,7 +38,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.1.0";
+var packageVersion = "19.2.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -42,6 +48,9 @@ var menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
+var styles = {
+  pickerContainer: "_kqswh2mm"
+};
 var analyticsAttributes = {
   componentName: 'timePicker',
   packageName: packageName,
@@ -89,6 +98,8 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
     _ref2$name = _ref2.name,
     name = _ref2$name === void 0 ? '' : _ref2$name,
+    _ref2$openTimeLabel = _ref2.openTimeLabel,
+    openTimeLabel = _ref2$openTimeLabel === void 0 ? 'Open time picker' : _ref2$openTimeLabel,
     _ref2$onBlur = _ref2.onBlur,
     providedOnBlur = _ref2$onBlur === void 0 ? _noop.default : _ref2$onBlur,
     _ref2$onChange = _ref2.onChange,
@@ -102,6 +113,8 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     placeholder = _ref2.placeholder,
     _ref2$selectProps = _ref2.selectProps,
     selectProps = _ref2$selectProps === void 0 ? {} : _ref2$selectProps,
+    _ref2$shouldShowTimeB = _ref2.shouldShowTimeButton,
+    shouldShowTimeButton = _ref2$shouldShowTimeB === void 0 ? false : _ref2$shouldShowTimeB,
     _ref2$spacing = _ref2.spacing,
     spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
     testId = _ref2.testId,
@@ -133,10 +146,14 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isOpen = _useState8[0],
     setIsOpen = _useState8[1];
-  var _useState9 = (0, _react.useState)(defaultValue),
+  var _useState9 = (0, _react.useState)(false),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    value = _useState0[0],
-    setValue = _useState0[1];
+    shouldFocusTimeInput = _useState0[0],
+    setShouldFocusTimeInput = _useState0[1];
+  var _useState1 = (0, _react.useState)(defaultValue),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    value = _useState10[0],
+    setValue = _useState10[1];
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = (0, _react.useReducer)(function (x) {
@@ -158,6 +175,14 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen || !shouldFocusTimeInput) {
+      return;
+    }
+    var innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : containerRef.querySelector('[role="combobox"]');
+    innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+    setShouldFocusTimeInput(false);
+  }, [containerRef, isOpen, shouldFocusTimeInput]);
   var onChange = (0, _react.useCallback)(function (newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
@@ -229,6 +254,23 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
       setClearingFromIcon(false);
     }
   };
+  var onTimeButtonClick = function onTimeButtonClick(event) {
+    var nextIsOpen = !isOpen;
+    setIsOpen(nextIsOpen);
+    if (nextIsOpen) {
+      var _otherSelectProps$onM;
+      (_otherSelectProps$onM = otherSelectProps.onMenuOpen) === null || _otherSelectProps$onM === void 0 || _otherSelectProps$onM.call(otherSelectProps);
+    } else {
+      var _otherSelectProps$onM2;
+      (_otherSelectProps$onM2 = otherSelectProps.onMenuClose) === null || _otherSelectProps$onM2 === void 0 || _otherSelectProps$onM2.call(otherSelectProps);
+    }
+    event.stopPropagation();
+  };
+  var onTimeButtonKeyDown = function onTimeButtonKeyDown(event) {
+    if (!isOpen && (event.key === ' ' || event.key === 'Enter')) {
+      setShouldFocusTimeInput(true);
+    }
+  };
   var ICON_PADDING = 2;
   var GRID_SIZE = 8;
   var l10n = (0, _localizationProvider.createLocalizationProvider)(locale);
@@ -236,6 +278,17 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
     otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);
   var SelectComponent = timeIsEditable ? _creatableSelect.default : _default2.default;
+  var onInputChange = function onInputChange(inputValue, actionMeta) {
+    var _otherSelectProps$onI;
+    (_otherSelectProps$onI = otherSelectProps.onInputChange) === null || _otherSelectProps$onI === void 0 || _otherSelectProps$onI.call(otherSelectProps, inputValue, actionMeta);
+
+    // Keep the menu-opening behavior aligned with DatePicker: entering text
+    // opens the available options, even when the optional time button disables
+    // opening on focus.
+    if (actionMeta.action === 'input-change') {
+      setIsOpen(true);
+    }
+  };
 
   /**
    * There are multiple props that can change how the time is formatted.
@@ -280,7 +333,9 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   } else {
     initialValue = null;
   }
+  var valueId = (0, _react.useId)();
   var SingleValue = (0, _singleValue.makeSingleValue)({
+    id: valueId,
     lang: locale
   });
   var selectComponents = _objectSpread({
@@ -291,6 +346,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     ClearIndicator: _emptyComponent.EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
+  var fullOpenTimeLabel = label ? "".concat(label, ", ").concat(openTimeLabel) : openTimeLabel;
   var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
   var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
     control: function control(base) {
@@ -315,7 +371,8 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, innerProps, {
     ref: setInternalContainerRef,
-    "data-testid": testId && "".concat(testId, "--container")
+    "data-testid": testId && "".concat(testId, "--container"),
+    className: (0, _runtime.ax)([styles.pickerContainer])
   }), /*#__PURE__*/_react.default.createElement("input", {
     name: name,
     type: "hidden",
@@ -323,7 +380,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     "data-testid": testId && "".concat(testId, "--input"),
     onKeyDown: onSelectKeyDown
   }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -335,7 +392,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     isRequired: isRequired,
     menuIsOpen: isOpen && !isDisabled,
     menuPlacement: "auto",
-    openMenuOnFocus: true,
+    openMenuOnFocus: !shouldShowTimeButton,
     onBlur: onBlur,
     onCreateOption: onCreateOption,
     onChange: onChange,
@@ -352,6 +409,21 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId
-  }, otherSelectProps)));
+  }, otherSelectProps, {
+    onInputChange: onInputChange
+  })), shouldShowTimeButton && !isDisabled ? /*#__PURE__*/_react.default.createElement(_pickerButtonContainer.PickerButtonContainer, {
+    hasClearIndicator: renderIconContainer
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: "subtle",
+    label: fullOpenTimeLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_clock.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-icon, #292A2E)"
+      }));
+    },
+    onClick: onTimeButtonClick,
+    onKeyDown: onTimeButtonKeyDown,
+    testId: testId && "".concat(testId, "--open-time-button")
+  })) : null);
 });
 var _default = exports.default = TimePicker;

package/dist/cjs/internal/picker-button-container.compiled.css

@@ -0,0 +1,8 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}

package/dist/cjs/internal/picker-button-container.js

@@ -0,0 +1,24 @@
+/* picker-button-container.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerButtonContainer = void 0;
+require("./picker-button-container.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var styles = {
+  container: "_1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _152tze3t _rjxpze3t",
+  withClearIndicator: "_12l2xy5q",
+  withoutClearIndicator: "_12l21b66"
+};
+var PickerButtonContainer = exports.PickerButtonContainer = function PickerButtonContainer(_ref) {
+  var children = _ref.children,
+    hasClearIndicator = _ref.hasClearIndicator,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([styles.container, hasClearIndicator ? styles.withClearIndicator : styles.withoutClearIndicator, xcss])
+  }, children);
+};

package/dist/es2019/components/date-picker.compiled.css

@@ -1,15 +1,9 @@
-._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
-._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
-._152tze3t{inset-block-start:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
+._v564vrg3{transition:color .15s}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1k8s{min-height:1.5rem}
 ._1ul91k8s{min-width:1.5rem}
 ._4cvr1h6o{align-items:center}
-._4t3i1osq{height:100%}
 ._i0dl1kw7{flex-basis:inherit}
 ._kqswh2mm{position:relative}
-._kqswstnw{position:absolute}
-._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}

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

@@ -11,7 +11,6 @@ import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useSta
 import { isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import IconButton from '@atlaskit/button/icon/button';
-import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
@@ -30,15 +29,14 @@ import { isDateDisabled } from '../internal/is-date-disabled';
 import { Menu } from '../internal/menu';
 import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
+import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.1.0";
+const packageVersion = "19.2.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
-  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
-  iconSpacingWithClearButtonStyles: "_12l2xy5q",
-  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+  iconContainerStyles: "_v564vrg3 _i0dl1kw7 _syaz1rpy _30l3azsu"
 };
 const analyticsAttributes = {
   componentName: 'datePicker',
@@ -606,8 +604,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     previousMonthLabel: previousMonthLabel,
     shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
     menuInnerWrapper: calendarProps.menuInnerWrapper
-  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(PickerButtonContainer, {
+    hasClearIndicator: Boolean(getterValue && !hideIcon),
+    xcss: styles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,

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

@@ -21,7 +21,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.1.0";
+const packageVersion = "19.2.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -485,12 +485,14 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     label: timePickerLabel,
     locale: timePickerProps.locale || locale,
     name: timePickerProps.name,
+    openTimeLabel: timePickerProps.openTimeLabel,
     onBlur: onTimeBlur,
     onChange: onTimeChange,
     onFocus: onTimeFocus,
     parseInputValue: timePickerProps.parseInputValue,
     placeholder: timePickerProps.placeholder,
     selectProps: mergedTimePickerSelectProps,
+    shouldShowTimeButton: timePickerProps.shouldShowTimeButton,
     spacing: timePickerProps.spacing || spacing,
     testId: timePickerProps.testId || testId && `${testId}--timepicker`,
     timeFormat: timePickerProps.timeFormat,

package/dist/es2019/components/time-picker.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

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

@@ -1,10 +1,15 @@
+/* time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
+import "./time-picker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, useCallback, useEffect, useId, useReducer, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import IconButton from '@atlaskit/button/icon/button';
 import __noop from '@atlaskit/ds-lib/noop';
+import ClockIcon from '@atlaskit/icon/core/clock';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -16,10 +21,11 @@ import { FixedLayerMenu } from '../internal/fixed-layer-menu';
 import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
+import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.1.0";
+const packageVersion = "19.2.0";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -29,6 +35,9 @@ const menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
+const styles = {
+  pickerContainer: "_kqswh2mm"
+};
 const analyticsAttributes = {
   componentName: 'timePicker',
   packageName,
@@ -62,12 +71,14 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   label = '',
   locale = 'en-US',
   name = '',
+  openTimeLabel = 'Open time picker',
   onBlur: providedOnBlur = __noop,
   onChange: providedOnChange = __noop,
   onFocus: providedOnFocus = __noop,
   parseInputValue = (time, _timeFormat) => parseTime(time),
   placeholder,
   selectProps = {},
+  shouldShowTimeButton = false,
   spacing = 'default',
   testId,
   timeFormat,
@@ -85,6 +96,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   // TODO: Remove isFocused? Does it do anything?
   const [_, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const [shouldFocusTimeInput, setShouldFocusTimeInput] = useState(false);
   const [value, setValue] = useState(defaultValue);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
@@ -104,6 +116,14 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
+  useEffect(() => {
+    if (!isOpen || !shouldFocusTimeInput) {
+      return;
+    }
+    const innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : containerRef.querySelector('[role="combobox"]');
+    innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+    setShouldFocusTimeInput(false);
+  }, [containerRef, isOpen, shouldFocusTimeInput]);
   const onChange = useCallback((newValue, action) => {
     const rawValue = newValue ? newValue.value || newValue : '';
     const finalValue = rawValue.toString();
@@ -177,6 +197,23 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       setClearingFromIcon(false);
     }
   };
+  const onTimeButtonClick = event => {
+    const nextIsOpen = !isOpen;
+    setIsOpen(nextIsOpen);
+    if (nextIsOpen) {
+      var _otherSelectProps$onM;
+      (_otherSelectProps$onM = otherSelectProps.onMenuOpen) === null || _otherSelectProps$onM === void 0 ? void 0 : _otherSelectProps$onM.call(otherSelectProps);
+    } else {
+      var _otherSelectProps$onM2;
+      (_otherSelectProps$onM2 = otherSelectProps.onMenuClose) === null || _otherSelectProps$onM2 === void 0 ? void 0 : _otherSelectProps$onM2.call(otherSelectProps);
+    }
+    event.stopPropagation();
+  };
+  const onTimeButtonKeyDown = event => {
+    if (!isOpen && (event.key === ' ' || event.key === 'Enter')) {
+      setShouldFocusTimeInput(true);
+    }
+  };
   const ICON_PADDING = 2;
   const GRID_SIZE = 8;
   const l10n = createLocalizationProvider(locale);
@@ -185,6 +222,17 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     ...otherSelectProps
   } = selectProps;
   const SelectComponent = timeIsEditable ? CreatableSelect : Select;
+  const onInputChange = (inputValue, actionMeta) => {
+    var _otherSelectProps$onI;
+    (_otherSelectProps$onI = otherSelectProps.onInputChange) === null || _otherSelectProps$onI === void 0 ? void 0 : _otherSelectProps$onI.call(otherSelectProps, inputValue, actionMeta);
+
+    // Keep the menu-opening behavior aligned with DatePicker: entering text
+    // opens the available options, even when the optional time button disables
+    // opening on focus.
+    if (actionMeta.action === 'input-change') {
+      setIsOpen(true);
+    }
+  };
 
   /**
    * There are multiple props that can change how the time is formatted.
@@ -229,7 +277,9 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   } else {
     initialValue = null;
   }
+  const valueId = useId();
   const SingleValue = makeSingleValue({
+    id: valueId,
     lang: locale
   });
   const selectComponents = {
@@ -241,6 +291,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     })
   };
   const renderIconContainer = Boolean(!hideIcon && value);
+  const fullOpenTimeLabel = label ? `${label}, ${openTimeLabel}` : openTimeLabel;
   const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   const mergedStyles = mergeStyles(selectStyles, {
     control: base => {
@@ -267,7 +318,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     ref: setInternalContainerRef,
-    "data-testid": testId && `${testId}--container`
+    "data-testid": testId && `${testId}--container`,
+    className: ax([styles.pickerContainer])
   }), /*#__PURE__*/React.createElement("input", {
     name: name,
     type: "hidden",
@@ -275,7 +327,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     "data-testid": testId && `${testId}--input`,
     onKeyDown: onSelectKeyDown
   }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId,
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -287,7 +339,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     isRequired: isRequired,
     menuIsOpen: isOpen && !isDisabled,
     menuPlacement: "auto",
-    openMenuOnFocus: true,
+    openMenuOnFocus: !shouldShowTimeButton,
     onBlur: onBlur,
     onCreateOption: onCreateOption,
     onChange: onChange,
@@ -304,6 +356,19 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId
-  }, otherSelectProps)));
+  }, otherSelectProps, {
+    onInputChange: onInputChange
+  })), shouldShowTimeButton && !isDisabled ? /*#__PURE__*/React.createElement(PickerButtonContainer, {
+    hasClearIndicator: renderIconContainer
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: fullOpenTimeLabel,
+    icon: iconProps => /*#__PURE__*/React.createElement(ClockIcon, _extends({}, iconProps, {
+      color: "var(--ds-icon, #292A2E)"
+    })),
+    onClick: onTimeButtonClick,
+    onKeyDown: onTimeButtonKeyDown,
+    testId: testId && `${testId}--open-time-button`
+  })) : null);
 });
 export default TimePicker;

package/dist/es2019/internal/picker-button-container.compiled.css

@@ -0,0 +1,8 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}

package/dist/es2019/internal/picker-button-container.js

@@ -0,0 +1,16 @@
+/* picker-button-container.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./picker-button-container.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const styles = {
+  container: "_1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _152tze3t _rjxpze3t",
+  withClearIndicator: "_12l2xy5q",
+  withoutClearIndicator: "_12l21b66"
+};
+export const PickerButtonContainer = ({
+  children,
+  hasClearIndicator,
+  xcss
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax([styles.container, hasClearIndicator ? styles.withClearIndicator : styles.withoutClearIndicator, xcss])
+}, children);

package/dist/esm/components/date-picker.compiled.css

@@ -1,15 +1,9 @@
-._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
-._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
-._152tze3t{inset-block-start:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
+._v564vrg3{transition:color .15s}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1k8s{min-height:1.5rem}
 ._1ul91k8s{min-width:1.5rem}
 ._4cvr1h6o{align-items:center}
-._4t3i1osq{height:100%}
 ._i0dl1kw7{flex-basis:inherit}
 ._kqswh2mm{position:relative}
-._kqswstnw{position:absolute}
-._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}

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

@@ -19,7 +19,6 @@ import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useSta
 import { isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import IconButton from '@atlaskit/button/icon/button';
-import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
@@ -38,15 +37,14 @@ import { isDateDisabled } from '../internal/is-date-disabled';
 import { Menu } from '../internal/menu';
 import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
+import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.1.0";
+var packageVersion = "19.2.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
-  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
-  iconSpacingWithClearButtonStyles: "_12l2xy5q",
-  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+  iconContainerStyles: "_v564vrg3 _i0dl1kw7 _syaz1rpy _30l3azsu"
 };
 var analyticsAttributes = {
   componentName: 'datePicker',
@@ -669,8 +667,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     previousMonthLabel: previousMonthLabel,
     shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
     menuInnerWrapper: calendarProps.menuInnerWrapper
-  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(PickerButtonContainer, {
+    hasClearIndicator: Boolean(getterValue && !hideIcon),
+    xcss: styles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,

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 = "19.1.0";
+var packageVersion = "19.2.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -503,12 +503,14 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     label: timePickerLabel,
     locale: timePickerProps.locale || locale,
     name: timePickerProps.name,
+    openTimeLabel: timePickerProps.openTimeLabel,
     onBlur: onTimeBlur,
     onChange: onTimeChange,
     onFocus: onTimeFocus,
     parseInputValue: timePickerProps.parseInputValue,
     placeholder: timePickerProps.placeholder,
     selectProps: mergedTimePickerSelectProps,
+    shouldShowTimeButton: timePickerProps.shouldShowTimeButton,
     spacing: timePickerProps.spacing || spacing,
     testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
     timeFormat: timePickerProps.timeFormat,

package/dist/esm/components/time-picker.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

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

@@ -1,16 +1,21 @@
+/* time-picker.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["styles"];
+import "./time-picker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
-import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useId, useReducer, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import IconButton from '@atlaskit/button/icon/button';
 import __noop from '@atlaskit/ds-lib/noop';
+import ClockIcon from '@atlaskit/icon/core/clock';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -22,10 +27,11 @@ import { FixedLayerMenu } from '../internal/fixed-layer-menu';
 import { FixedLayerMenuTopLayer } from '../internal/fixed-layer-menu-top-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
+import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.1.0";
+var packageVersion = "19.2.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -35,6 +41,9 @@ var menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
+var styles = {
+  pickerContainer: "_kqswh2mm"
+};
 var analyticsAttributes = {
   componentName: 'timePicker',
   packageName: packageName,
@@ -82,6 +91,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
     _ref2$name = _ref2.name,
     name = _ref2$name === void 0 ? '' : _ref2$name,
+    _ref2$openTimeLabel = _ref2.openTimeLabel,
+    openTimeLabel = _ref2$openTimeLabel === void 0 ? 'Open time picker' : _ref2$openTimeLabel,
     _ref2$onBlur = _ref2.onBlur,
     providedOnBlur = _ref2$onBlur === void 0 ? __noop : _ref2$onBlur,
     _ref2$onChange = _ref2.onChange,
@@ -95,6 +106,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     placeholder = _ref2.placeholder,
     _ref2$selectProps = _ref2.selectProps,
     selectProps = _ref2$selectProps === void 0 ? {} : _ref2$selectProps,
+    _ref2$shouldShowTimeB = _ref2.shouldShowTimeButton,
+    shouldShowTimeButton = _ref2$shouldShowTimeB === void 0 ? false : _ref2$shouldShowTimeB,
     _ref2$spacing = _ref2.spacing,
     spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
     testId = _ref2.testId,
@@ -126,10 +139,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isOpen = _useState8[0],
     setIsOpen = _useState8[1];
-  var _useState9 = useState(defaultValue),
+  var _useState9 = useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    value = _useState0[0],
-    setValue = _useState0[1];
+    shouldFocusTimeInput = _useState0[0],
+    setShouldFocusTimeInput = _useState0[1];
+  var _useState1 = useState(defaultValue),
+    _useState10 = _slicedToArray(_useState1, 2),
+    value = _useState10[0],
+    setValue = _useState10[1];
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = useReducer(function (x) {
@@ -151,6 +168,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
+  useEffect(function () {
+    if (!isOpen || !shouldFocusTimeInput) {
+      return;
+    }
+    var innerCombobox = containerRef === null || containerRef === void 0 ? void 0 : containerRef.querySelector('[role="combobox"]');
+    innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+    setShouldFocusTimeInput(false);
+  }, [containerRef, isOpen, shouldFocusTimeInput]);
   var onChange = useCallback(function (newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
@@ -222,6 +247,23 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
       setClearingFromIcon(false);
     }
   };
+  var onTimeButtonClick = function onTimeButtonClick(event) {
+    var nextIsOpen = !isOpen;
+    setIsOpen(nextIsOpen);
+    if (nextIsOpen) {
+      var _otherSelectProps$onM;
+      (_otherSelectProps$onM = otherSelectProps.onMenuOpen) === null || _otherSelectProps$onM === void 0 || _otherSelectProps$onM.call(otherSelectProps);
+    } else {
+      var _otherSelectProps$onM2;
+      (_otherSelectProps$onM2 = otherSelectProps.onMenuClose) === null || _otherSelectProps$onM2 === void 0 || _otherSelectProps$onM2.call(otherSelectProps);
+    }
+    event.stopPropagation();
+  };
+  var onTimeButtonKeyDown = function onTimeButtonKeyDown(event) {
+    if (!isOpen && (event.key === ' ' || event.key === 'Enter')) {
+      setShouldFocusTimeInput(true);
+    }
+  };
   var ICON_PADDING = 2;
   var GRID_SIZE = 8;
   var l10n = createLocalizationProvider(locale);
@@ -229,6 +271,17 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
     otherSelectProps = _objectWithoutProperties(selectProps, _excluded);
   var SelectComponent = timeIsEditable ? CreatableSelect : Select;
+  var onInputChange = function onInputChange(inputValue, actionMeta) {
+    var _otherSelectProps$onI;
+    (_otherSelectProps$onI = otherSelectProps.onInputChange) === null || _otherSelectProps$onI === void 0 || _otherSelectProps$onI.call(otherSelectProps, inputValue, actionMeta);
+
+    // Keep the menu-opening behavior aligned with DatePicker: entering text
+    // opens the available options, even when the optional time button disables
+    // opening on focus.
+    if (actionMeta.action === 'input-change') {
+      setIsOpen(true);
+    }
+  };
 
   /**
    * There are multiple props that can change how the time is formatted.
@@ -273,7 +326,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   } else {
     initialValue = null;
   }
+  var valueId = useId();
   var SingleValue = makeSingleValue({
+    id: valueId,
     lang: locale
   });
   var selectComponents = _objectSpread({
@@ -284,6 +339,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     ClearIndicator: EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
+  var fullOpenTimeLabel = label ? "".concat(label, ", ").concat(openTimeLabel) : openTimeLabel;
   var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
@@ -308,7 +364,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     ref: setInternalContainerRef,
-    "data-testid": testId && "".concat(testId, "--container")
+    "data-testid": testId && "".concat(testId, "--container"),
+    className: ax([styles.pickerContainer])
   }), /*#__PURE__*/React.createElement("input", {
     name: name,
     type: "hidden",
@@ -316,7 +373,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     "data-testid": testId && "".concat(testId, "--input"),
     onKeyDown: onSelectKeyDown
   }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -328,7 +385,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     isRequired: isRequired,
     menuIsOpen: isOpen && !isDisabled,
     menuPlacement: "auto",
-    openMenuOnFocus: true,
+    openMenuOnFocus: !shouldShowTimeButton,
     onBlur: onBlur,
     onCreateOption: onCreateOption,
     onChange: onChange,
@@ -345,6 +402,21 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId
-  }, otherSelectProps)));
+  }, otherSelectProps, {
+    onInputChange: onInputChange
+  })), shouldShowTimeButton && !isDisabled ? /*#__PURE__*/React.createElement(PickerButtonContainer, {
+    hasClearIndicator: renderIconContainer
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: fullOpenTimeLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ClockIcon, _extends({}, iconProps, {
+        color: "var(--ds-icon, #292A2E)"
+      }));
+    },
+    onClick: onTimeButtonClick,
+    onKeyDown: onTimeButtonKeyDown,
+    testId: testId && "".concat(testId, "--open-time-button")
+  })) : null);
 });
 export default TimePicker;

package/dist/esm/internal/picker-button-container.compiled.css

@@ -0,0 +1,8 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}

package/dist/esm/internal/picker-button-container.js

@@ -0,0 +1,17 @@
+/* picker-button-container.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./picker-button-container.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var styles = {
+  container: "_1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _152tze3t _rjxpze3t",
+  withClearIndicator: "_12l2xy5q",
+  withoutClearIndicator: "_12l21b66"
+};
+export var PickerButtonContainer = function PickerButtonContainer(_ref) {
+  var children = _ref.children,
+    hasClearIndicator = _ref.hasClearIndicator,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.container, hasClearIndicator ? styles.withClearIndicator : styles.withoutClearIndicator, xcss])
+  }, children);
+};

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type TimePickerBaseProps } from '../types';
 /**

package/dist/types/internal/picker-button-container.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
+type PickerButtonContainerProps = {
+    children: React.ReactNode;
+    hasClearIndicator: boolean;
+    xcss?: StrictXCSSProp<'flexBasis' | 'color' | 'transition', '&:hover'>;
+};
+export declare const PickerButtonContainer: ({ children, hasClearIndicator, xcss, }: PickerButtonContainerProps) => React.JSX.Element;
+export {};

package/dist/types/types.d.ts

@@ -359,6 +359,13 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * The name of the field.
      */
     name?: string;
+    /**
+     * The accessible label for the button that opens the time picker. When `label` is provided,
+     * it is prefixed to this label.
+     *
+     * @default 'Open time picker'
+     */
+    openTimeLabel?: string;
     /**
      * Called when the field is blurred.
      */
@@ -405,6 +412,14 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Hides icon for dropdown indicator.
      */
     hideIcon?: boolean;
+    /**
+     * Provides a functional clock button that opens the time picker. When enabled, focusing the
+     * input with the keyboard does not open the menu; use this button, click the input, or type to
+     * open it instead.
+     *
+     * @default false
+     */
+    shouldShowTimeButton?: boolean;
     /**
      * Format the time with a string that is accepted by [date-fns's format
      * function](https://date-fns.org/v1.29.0/docs/format). **This does not affect

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "19.2.0",
+	"version": "19.3.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,7 +64,7 @@
 		"@atlaskit/code": "^20.0.0",
 		"@atlaskit/codemod-utils": "^5.1.0",
 		"@atlaskit/docs": "^12.3.0",
-		"@atlaskit/form": "^18.1.0",
+		"@atlaskit/form": "^18.2.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/modal-dialog": "^17.0.0",