@atlaskit/datetime-picker 17.0.17 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 17.1.0
+
+### Minor Changes
+
+- [`cca11d70019df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cca11d70019df) -
+  This fixes a bug with announcing the label for users of assistive technology behind a feature
+  flag. If successful, it will roll out in a future release.
+
+## 17.0.18
+
+### Patch Changes
+
+- [`437668dfbdec9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/437668dfbdec9) -
+  Add explicit types to a number of DST components
+- Updated dependencies
+
 ## 17.0.17
 
 ### Patch Changes

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

@@ -40,7 +40,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /// <reference types="node" />
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.0.16";
+var packageVersion = "17.0.18";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -456,9 +456,6 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         };
       }
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-      var SingleValue = (0, _singleValue.makeSingleValue)({
-        lang: this.props.locale
-      });
       var selectComponents = _objectSpread(_objectSpread(_objectSpread({
         DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
       }, shouldShowCalendarButton ? {
@@ -468,8 +465,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           }));
         }
       } : {}), {}, {
-        Menu: _menu.Menu,
-        SingleValue: SingleValue
+        Menu: _menu.Menu
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
       }), selectProps.components);
@@ -536,7 +532,76 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+      }), (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(_useId.IdProvider, null, function (_ref3) {
+        var valueId = _ref3.id;
+        return /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+          appearance: _this2.props.appearance,
+          "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
+          label: label || undefined
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          ,
+          autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
+          closeMenuOnSelect: true,
+          enableAnimation: false,
+          inputId: id,
+          inputValue: actualSelectInputValue,
+          isDisabled: isDisabled,
+          isRequired: isRequired,
+          menuIsOpen: menuIsOpen,
+          onBlur: _this2.onSelectBlur,
+          onChange: _this2.onSelectChange,
+          onFocus: _this2.onSelectFocus,
+          onInputChange: _this2.handleSelectInputChange,
+          placeholder: (0, _datePickerMigration.getPlaceholder)({
+            placeholder: _this2.props.placeholder,
+            l10n: _this2.state.l10n
+          })
+          // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'
+          ,
+          styles: mergedStyles,
+          value: initialValue
+        }, selectProps, {
+          // 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: _objectSpread(_objectSpread({}, selectComponents), {}, {
+            SingleValue: (0, _singleValue.makeSingleValue)({
+              id: valueId,
+              lang: _this2.props.locale
+            })
+          })
+          // These are below the spread because I don't know what is in
+          // selectProps or not and what wil be overwritten
+          ,
+          isClearable: true,
+          isInvalid: isInvalid,
+          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,
+          calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+          calendarLocale: calendarProps.calendarLocale,
+          calendarMaxDate: calendarProps.calendarMaxDate,
+          calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
+          calendarValue: calendarProps.calendarValue,
+          calendarView: calendarProps.calendarView,
+          calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+          nextMonthLabel: nextMonthLabel,
+          onCalendarChange: calendarProps.onCalendarChange,
+          onCalendarSelect: calendarProps.onCalendarSelect,
+          previousMonthLabel: previousMonthLabel,
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+          menuInnerWrapper: calendarProps.menuInnerWrapper
+        }));
+      }) : /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
         appearance: this.props.appearance,
         "aria-describedby": ariaDescribedBy,
         label: label || undefined
@@ -570,7 +635,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         // 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
+        components: _objectSpread(_objectSpread({}, selectComponents), {}, {
+          SingleValue: (0, _singleValue.makeSingleValue)({
+            lang: this.props.locale
+          })
+        })
         // These are below the spread because I don't know what is in
         // selectProps or not and what wil be overwritten
         ,
@@ -599,8 +668,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         menuInnerWrapper: calendarProps.menuInnerWrapper
       })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_useId.IdProvider, {
         prefix: "open-calendar-label--"
-      }, function (_ref3) {
-        var openCalendarLabelId = _ref3.id;
+      }, function (_ref4) {
+        var openCalendarLabelId = _ref4.id;
         return /*#__PURE__*/React.createElement(_compiled.Box, {
           xcss: (0, _css.cx)(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
         }, /*#__PURE__*/React.createElement(_new.IconButton, {

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

@@ -37,7 +37,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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.0.16";
+var packageVersion = "17.0.18";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -459,7 +459,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     };
   }
   var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
+  var valueId = (0, _useId.useId)();
   var SingleValue = (0, _singleValue.makeSingleValue)({
+    id: valueId,
     lang: propLocale
   });
   var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
@@ -547,7 +549,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     "data-testid": testId && "".concat(testId, "--input")
   }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
     appearance: appearance,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId : ariaDescribedBy,
     label: label || undefined
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
@@ -568,8 +570,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       placeholder: placeholder,
       l10n: l10n
     })
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     // @ts-ignore -- Type 'OptionType' is not assignable to type '{ label: string; value: string; }'
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     styles: mergedStyles,
     value: initialValue

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

@@ -35,7 +35,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 = "17.0.16";
+var packageVersion = "17.0.18";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

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

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

@@ -26,7 +26,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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.0.16";
+var packageVersion = "17.0.18";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.makeSingleValue = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
+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; }
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
-var makeSingleValue = exports.makeSingleValue = function makeSingleValue(_ref) {
-  var lang = _ref.lang;
+var makeSingleValue = exports.makeSingleValue =
+// TODO: Make ID required
+function makeSingleValue(_ref) {
+  var id = _ref.id,
+    lang = _ref.lang;
   return function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className,
@@ -42,9 +49,11 @@ var makeSingleValue = exports.makeSingleValue = function makeSingleValue(_ref) {
       getStyles: getStyles,
       getValue: getValue,
       hasValue: hasValue,
-      innerProps: {
+      innerProps: _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? {
+        id: id
+      } : {}), {}, {
         lang: lang
-      },
+      }),
       isDisabled: isDisabled,
       isMulti: isMulti,
       isRtl: isRtl,

package/dist/es2019/components/date-picker-class.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 = "17.0.16";
+const packageVersion = "17.0.18";
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -431,9 +431,6 @@ class DatePickerComponent extends Component {
       }, /*#__PURE__*/React.createElement(Icon, props));
     }
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-    const SingleValue = makeSingleValue({
-      lang: this.props.locale
-    });
     const selectComponents = {
       DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
       // Only use this new container component if the calendar button is shown.
@@ -444,7 +441,7 @@ class DatePickerComponent extends Component {
         }))
       } : {}),
       Menu,
-      SingleValue,
+      // SingleValue is defined in the render because of UI generator limitations
       ...(!showClearIndicator && {
         ClearIndicator: EmptyComponent
       }),
@@ -514,7 +511,76 @@ class DatePickerComponent extends Component {
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), /*#__PURE__*/React.createElement(Select, _extends({
+    }), fg('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(IdProvider, null, ({
+      id: valueId
+    }) => /*#__PURE__*/React.createElement(Select, _extends({
+      appearance: this.props.appearance,
+      "aria-describedby": ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId,
+      label: label || undefined
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      ,
+      autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
+      closeMenuOnSelect: true,
+      enableAnimation: false,
+      inputId: id,
+      inputValue: actualSelectInputValue,
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      menuIsOpen: menuIsOpen,
+      onBlur: this.onSelectBlur,
+      onChange: this.onSelectChange,
+      onFocus: this.onSelectFocus,
+      onInputChange: this.handleSelectInputChange,
+      placeholder: getPlaceholder({
+        placeholder: this.props.placeholder,
+        l10n: this.state.l10n
+      })
+      // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'
+      ,
+      styles: mergedStyles,
+      value: initialValue
+    }, selectProps, {
+      // 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,
+        SingleValue: makeSingleValue({
+          id: valueId,
+          lang: this.props.locale
+        })
+      }
+      // These are below the spread because I don't know what is in
+      // selectProps or not and what wil be overwritten
+      ,
+      isClearable: true,
+      isInvalid: isInvalid,
+      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,
+      calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+      calendarLocale: calendarProps.calendarLocale,
+      calendarMaxDate: calendarProps.calendarMaxDate,
+      calendarMinDate: calendarProps.calendarMinDate,
+      calendarRef: calendarProps.calendarRef,
+      calendarValue: calendarProps.calendarValue,
+      calendarView: calendarProps.calendarView,
+      calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+      nextMonthLabel: nextMonthLabel,
+      onCalendarChange: calendarProps.onCalendarChange,
+      onCalendarSelect: calendarProps.onCalendarSelect,
+      previousMonthLabel: previousMonthLabel,
+      shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+      menuInnerWrapper: calendarProps.menuInnerWrapper
+    }))) : /*#__PURE__*/React.createElement(Select, _extends({
       appearance: this.props.appearance,
       "aria-describedby": ariaDescribedBy,
       label: label || undefined
@@ -548,7 +614,12 @@ class DatePickerComponent extends Component {
       // 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
+      components: {
+        ...selectComponents,
+        SingleValue: makeSingleValue({
+          lang: this.props.locale
+        })
+      }
       // These are below the spread because I don't know what is in
       // selectProps or not and what wil be overwritten
       ,

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 = "17.0.16";
+const packageVersion = "17.0.18";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -384,7 +384,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }, /*#__PURE__*/React.createElement(Icon, props));
   }
   const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
+  const valueId = useId();
   const SingleValue = makeSingleValue({
+    id: valueId,
     lang: propLocale
   });
   const selectComponents = {
@@ -475,7 +477,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     "data-testid": testId && `${testId}--input`
   }), /*#__PURE__*/React.createElement(Select, _extends({
     appearance: appearance,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": fg('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId : ariaDescribedBy,
     label: label || undefined
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
@@ -496,8 +498,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       placeholder: placeholder,
       l10n: l10n
     })
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     // @ts-ignore -- Type 'OptionType' is not assignable to type '{ label: string; value: string; }'
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     styles: mergedStyles,
     value: initialValue

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

@@ -19,7 +19,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 = "17.0.16";
+const packageVersion = "17.0.18";
 const compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

@@ -24,7 +24,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 = "17.0.16";
+const packageVersion = "17.0.18";
 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 = "17.0.16";
+const packageVersion = "17.0.18";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
-export const makeSingleValue = ({
+export const makeSingleValue =
+// TODO: Make ID required
+({
+  id,
   lang
 }) => ({
   children,
@@ -36,6 +40,9 @@ export const makeSingleValue = ({
     getValue: getValue,
     hasValue: hasValue,
     innerProps: {
+      ...(fg('platform-dtp_a11y_fix-dsp-23950') ? {
+        id
+      } : {}),
       lang
     },
     isDisabled: isDisabled,

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

@@ -32,7 +32,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 = "17.0.16";
+var packageVersion = "17.0.18";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -448,9 +448,6 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         };
       }
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-      var SingleValue = makeSingleValue({
-        lang: this.props.locale
-      });
       var selectComponents = _objectSpread(_objectSpread(_objectSpread({
         DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon
       }, shouldShowCalendarButton ? {
@@ -460,8 +457,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           }));
         }
       } : {}), {}, {
-        Menu: Menu,
-        SingleValue: SingleValue
+        Menu: Menu
       }, !showClearIndicator && {
         ClearIndicator: EmptyComponent
       }), selectProps.components);
@@ -528,7 +524,76 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), /*#__PURE__*/React.createElement(Select, _extends({
+      }), fg('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(IdProvider, null, function (_ref3) {
+        var valueId = _ref3.id;
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          appearance: _this2.props.appearance,
+          "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
+          label: label || undefined
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          ,
+          autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
+          closeMenuOnSelect: true,
+          enableAnimation: false,
+          inputId: id,
+          inputValue: actualSelectInputValue,
+          isDisabled: isDisabled,
+          isRequired: isRequired,
+          menuIsOpen: menuIsOpen,
+          onBlur: _this2.onSelectBlur,
+          onChange: _this2.onSelectChange,
+          onFocus: _this2.onSelectFocus,
+          onInputChange: _this2.handleSelectInputChange,
+          placeholder: getPlaceholder({
+            placeholder: _this2.props.placeholder,
+            l10n: _this2.state.l10n
+          })
+          // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'
+          ,
+          styles: mergedStyles,
+          value: initialValue
+        }, selectProps, {
+          // 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: _objectSpread(_objectSpread({}, selectComponents), {}, {
+            SingleValue: makeSingleValue({
+              id: valueId,
+              lang: _this2.props.locale
+            })
+          })
+          // These are below the spread because I don't know what is in
+          // selectProps or not and what wil be overwritten
+          ,
+          isClearable: true,
+          isInvalid: isInvalid,
+          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,
+          calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+          calendarLocale: calendarProps.calendarLocale,
+          calendarMaxDate: calendarProps.calendarMaxDate,
+          calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
+          calendarValue: calendarProps.calendarValue,
+          calendarView: calendarProps.calendarView,
+          calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+          nextMonthLabel: nextMonthLabel,
+          onCalendarChange: calendarProps.onCalendarChange,
+          onCalendarSelect: calendarProps.onCalendarSelect,
+          previousMonthLabel: previousMonthLabel,
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+          menuInnerWrapper: calendarProps.menuInnerWrapper
+        }));
+      }) : /*#__PURE__*/React.createElement(Select, _extends({
         appearance: this.props.appearance,
         "aria-describedby": ariaDescribedBy,
         label: label || undefined
@@ -562,7 +627,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         // 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
+        components: _objectSpread(_objectSpread({}, selectComponents), {}, {
+          SingleValue: makeSingleValue({
+            lang: this.props.locale
+          })
+        })
         // These are below the spread because I don't know what is in
         // selectProps or not and what wil be overwritten
         ,
@@ -591,8 +660,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         menuInnerWrapper: calendarProps.menuInnerWrapper
       })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
         prefix: "open-calendar-label--"
-      }, function (_ref3) {
-        var openCalendarLabelId = _ref3.id;
+      }, function (_ref4) {
+        var openCalendarLabelId = _ref4.id;
         return /*#__PURE__*/React.createElement(Box, {
           xcss: cx(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
         }, /*#__PURE__*/React.createElement(IconButton, {

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 = "17.0.16";
+var packageVersion = "17.0.18";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -451,7 +451,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     };
   }
   var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
+  var valueId = useId();
   var SingleValue = makeSingleValue({
+    id: valueId,
     lang: propLocale
   });
   var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
@@ -539,7 +541,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     "data-testid": testId && "".concat(testId, "--input")
   }), /*#__PURE__*/React.createElement(Select, _extends({
     appearance: appearance,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": fg('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId : ariaDescribedBy,
     label: label || undefined
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
@@ -560,8 +562,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       placeholder: placeholder,
       l10n: l10n
     })
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     // @ts-ignore -- Type 'OptionType' is not assignable to type '{ label: string; value: string; }'
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     styles: mergedStyles,
     value: initialValue

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

@@ -30,7 +30,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.0.16";
+var packageVersion = "17.0.18";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

@@ -33,7 +33,7 @@ function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.0.16";
+var packageVersion = "17.0.18";
 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 = "17.0.16";
+var packageVersion = "17.0.18";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -1,15 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue"];
+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 from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
-export var makeSingleValue = function makeSingleValue(_ref) {
-  var lang = _ref.lang;
+export var makeSingleValue =
+// TODO: Make ID required
+function makeSingleValue(_ref) {
+  var id = _ref.id,
+    lang = _ref.lang;
   return function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className,
@@ -36,9 +43,11 @@ export var makeSingleValue = function makeSingleValue(_ref) {
       getStyles: getStyles,
       getValue: getValue,
       hasValue: hasValue,
-      innerProps: {
+      innerProps: _objectSpread(_objectSpread({}, fg('platform-dtp_a11y_fix-dsp-23950') ? {
+        id: id
+      } : {}), {}, {
         lang: lang
-      },
+      }),
       isDisabled: isDisabled,
       isMulti: isMulti,
       isRtl: isRtl,

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

@@ -1,20 +1,4 @@
-declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc").DatePickerProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & Omit<Omit<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;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "icon" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "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;
-    onBlur?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onChange?: (((_value: string) => void) & ((value: string) => void)) | undefined;
-    disabledDateFilter?: (((_: string) => boolean) & ((date: string) => boolean)) | undefined;
-    locale?: string | undefined;
-    defaultIsOpen?: boolean | undefined;
-} & {} & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import type { FC, RefAttributes } from 'react';
+import type { DatePickerProps } from '../index';
+declare const DatePicker: FC<React.PropsWithoutRef<DatePickerProps> & RefAttributes<HTMLElement>>;
 export default DatePicker;

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

@@ -4,6 +4,7 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
-export declare const makeSingleValue: ({ lang }: {
+export declare const makeSingleValue: ({ id, lang }: {
+    id?: string;
     lang: string;
 }) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => React.JSX.Element;

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

@@ -1,20 +1,4 @@
-declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc").DatePickerProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & Omit<Omit<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;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "icon" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "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;
-    onBlur?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onChange?: (((_value: string) => void) & ((value: string) => void)) | undefined;
-    disabledDateFilter?: (((_: string) => boolean) & ((date: string) => boolean)) | undefined;
-    locale?: string | undefined;
-    defaultIsOpen?: boolean | undefined;
-} & {} & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import type { FC, RefAttributes } from 'react';
+import type { DatePickerProps } from '../index';
+declare const DatePicker: FC<React.PropsWithoutRef<DatePickerProps> & RefAttributes<HTMLElement>>;
 export default DatePicker;

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

@@ -4,6 +4,7 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
  */
-export declare const makeSingleValue: ({ lang }: {
+export declare const makeSingleValue: ({ id, lang }: {
+    id?: string;
     lang: string;
 }) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "17.0.17",
+	"version": "17.1.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,11 +33,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/button": "^23.4.0",
+		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/calendar": "^17.1.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/locale": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -70,6 +70,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -112,6 +113,9 @@
 		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
+		},
+		"platform-dtp_a11y_fix-dsp-23950": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"