@atlaskit/datetime-picker 17.1.4 → 17.1.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/datetime-picker
 
+## 17.1.6
+
+### Patch Changes
+
+- [`a8247416bb21a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a8247416bb21a) -
+  Improve accessible description of date picker.
+
+## 17.1.5
+
+### Patch Changes
+
+- [`f5f621a43f60a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f5f621a43f60a) -
+  ts-ignore added as a workaround for help-center typecheck
+
 ## 17.1.4
 
 ### 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.1.3";
+var packageVersion = "0.0.0-development";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -530,14 +530,12 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(_useId.IdProvider, null, function (_ref3) {
+      }), /*#__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 @atlassian/a11y/no-autofocus
-          ,
+          label: label || undefined,
           autoFocus: autoFocus,
           clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true,
@@ -599,72 +597,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
           menuInnerWrapper: calendarProps.menuInnerWrapper
         }));
-      }) : /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
-        appearance: this.props.appearance,
-        "aria-describedby": ariaDescribedBy,
-        label: label || undefined
-        // eslint-disable-next-line @atlassian/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: (0, _datePickerMigration.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: _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
-        ,
-        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
-      })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_useId.IdProvider, {
+      }), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_useId.IdProvider, {
         prefix: "open-calendar-label--"
       }, function (_ref4) {
         var openCalendarLabelId = _ref4.id;

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.1.3";
+var packageVersion = "0.0.0-development";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -547,10 +547,8 @@ 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": (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId : ariaDescribedBy,
-    label: label || undefined
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
+    label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,
     closeMenuOnSelect: true,

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.1.3";
+var packageVersion = "0.0.0-development";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

@@ -38,7 +38,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.1.3";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -296,9 +296,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     xcss: compiledStyles.datePickerContainerStyles
   }, /*#__PURE__*/_react.default.createElement(DatePicker, {
     appearance: appearance,
-    "aria-describedby": datePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
@@ -339,9 +337,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     xcss: compiledStyles.timePickerContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     appearance: timePickerProps.appearance || appearance,
-    "aria-describedby": timePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
     defaultIsOpen: timePickerProps.defaultIsOpen,
     defaultValue: timePickerProps.defaultValue,

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.1.3";
+var packageVersion = "0.0.0-development";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -318,7 +318,9 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
-    clearControlLabel: clearControlLabel,
+    clearControlLabel: clearControlLabel
+    // @ts-ignore - Type mismatch with components - workaround for help-center local consumption
+    ,
     components: selectComponents,
     inputId: id,
     isClearable: true,
@@ -328,13 +330,17 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     menuPlacement: "auto",
     openMenuOnFocus: true,
     onBlur: onBlur,
-    onCreateOption: onCreateOption,
+    onCreateOption: onCreateOption
+    // @ts-ignore - Type mismatch with onChange handler - workaround for help-center local consumption
+    ,
     onChange: onChange,
     options: options,
     onFocus: onFocus,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
-    placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
+    placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime)
+    // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
+    ,
     styles: mergedStyles,
     value: initialValue,
     spacing: spacing

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

@@ -6,14 +6,10 @@ 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.
@@ -49,11 +45,10 @@ function makeSingleValue(_ref) {
       getStyles: getStyles,
       getValue: getValue,
       hasValue: hasValue,
-      innerProps: _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? {
-        id: id
-      } : {}), {}, {
+      innerProps: {
+        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.1.3";
+const packageVersion = "0.0.0-development";
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -509,14 +509,12 @@ class DatePickerComponent extends Component {
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), fg('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(IdProvider, null, ({
+    }), /*#__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 @atlassian/a11y/no-autofocus
-      ,
+      label: label || undefined,
       autoFocus: autoFocus,
       clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true,
@@ -578,73 +576,7 @@ class DatePickerComponent extends Component {
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
       menuInnerWrapper: calendarProps.menuInnerWrapper
-    }))) : /*#__PURE__*/React.createElement(Select, _extends({
-      appearance: this.props.appearance,
-      "aria-describedby": ariaDescribedBy,
-      label: label || undefined
-      // eslint-disable-next-line @atlassian/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({
-          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
-    })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
+    }))), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
       prefix: "open-calendar-label--"
     }, ({
       id: openCalendarLabelId

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.1.3";
+const packageVersion = "0.0.0-development";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -474,10 +474,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     "data-testid": testId && `${testId}--input`
   }), /*#__PURE__*/React.createElement(Select, _extends({
     appearance: appearance,
-    "aria-describedby": fg('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId : ariaDescribedBy,
-    label: label || undefined
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId,
+    label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,
     closeMenuOnSelect: true,

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.1.3";
+const packageVersion = "0.0.0-development";
 const compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.1.3";
+const packageVersion = "0.0.0-development";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -261,9 +261,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     xcss: compiledStyles.datePickerContainerStyles
   }, /*#__PURE__*/React.createElement(DatePicker, {
     appearance: appearance,
-    "aria-describedby": datePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
@@ -304,9 +302,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     xcss: compiledStyles.timePickerContainerStyles
   }, /*#__PURE__*/React.createElement(TimePicker, {
     appearance: timePickerProps.appearance || appearance,
-    "aria-describedby": timePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
     defaultIsOpen: timePickerProps.defaultIsOpen,
     defaultValue: timePickerProps.defaultValue,

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.1.3";
+const packageVersion = "0.0.0-development";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -265,7 +265,9 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
-    clearControlLabel: clearControlLabel,
+    clearControlLabel: clearControlLabel
+    // @ts-ignore - Type mismatch with components - workaround for help-center local consumption
+    ,
     components: selectComponents,
     inputId: id,
     isClearable: true,
@@ -275,13 +277,17 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     menuPlacement: "auto",
     openMenuOnFocus: true,
     onBlur: onBlur,
-    onCreateOption: onCreateOption,
+    onCreateOption: onCreateOption
+    // @ts-ignore - Type mismatch with onChange handler - workaround for help-center local consumption
+    ,
     onChange: onChange,
     options: options,
     onFocus: onFocus,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
-    placeholder: placeholder || l10n.formatTime(placeholderDatetime),
+    placeholder: placeholder || l10n.formatTime(placeholderDatetime)
+    // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
+    ,
     styles: mergedStyles,
     value: initialValue,
     spacing: spacing

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 
 /**
@@ -40,9 +39,7 @@ export const makeSingleValue =
     getValue: getValue,
     hasValue: hasValue,
     innerProps: {
-      ...(fg('platform-dtp_a11y_fix-dsp-23950') ? {
-        id
-      } : {}),
+      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.1.3";
+var packageVersion = "0.0.0-development";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -522,14 +522,12 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), fg('platform-dtp_a11y_fix-dsp-23950') ? /*#__PURE__*/React.createElement(IdProvider, null, function (_ref3) {
+      }), /*#__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 @atlassian/a11y/no-autofocus
-          ,
+          label: label || undefined,
           autoFocus: autoFocus,
           clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true,
@@ -591,72 +589,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
           menuInnerWrapper: calendarProps.menuInnerWrapper
         }));
-      }) : /*#__PURE__*/React.createElement(Select, _extends({
-        appearance: this.props.appearance,
-        "aria-describedby": ariaDescribedBy,
-        label: label || undefined
-        // eslint-disable-next-line @atlassian/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: _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
-        ,
-        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
-      })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
+      }), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(IdProvider, {
         prefix: "open-calendar-label--"
       }, function (_ref4) {
         var openCalendarLabelId = _ref4.id;

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.1.3";
+var packageVersion = "0.0.0-development";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -539,10 +539,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     "data-testid": testId && "".concat(testId, "--input")
   }), /*#__PURE__*/React.createElement(Select, _extends({
     appearance: appearance,
-    "aria-describedby": fg('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId : ariaDescribedBy,
-    label: label || undefined
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
+    label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,
     closeMenuOnSelect: true,

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.1.3";
+var packageVersion = "0.0.0-development";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

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

@@ -31,7 +31,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.1.3";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -289,9 +289,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss: compiledStyles.datePickerContainerStyles
   }, /*#__PURE__*/React.createElement(DatePicker, {
     appearance: appearance,
-    "aria-describedby": datePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
@@ -332,9 +330,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss: compiledStyles.timePickerContainerStyles
   }, /*#__PURE__*/React.createElement(TimePicker, {
     appearance: timePickerProps.appearance || appearance,
-    "aria-describedby": timePickerAriaDescribedBy
-    // eslint-disable-next-line @atlassian/a11y/no-autofocus
-    ,
+    "aria-describedby": timePickerAriaDescribedBy,
     autoFocus: timePickerProps.autoFocus,
     defaultIsOpen: timePickerProps.defaultIsOpen,
     defaultValue: timePickerProps.defaultValue,

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.1.3";
+var packageVersion = "0.0.0-development";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -309,7 +309,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
-    clearControlLabel: clearControlLabel,
+    clearControlLabel: clearControlLabel
+    // @ts-ignore - Type mismatch with components - workaround for help-center local consumption
+    ,
     components: selectComponents,
     inputId: id,
     isClearable: true,
@@ -319,13 +321,17 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     menuPlacement: "auto",
     openMenuOnFocus: true,
     onBlur: onBlur,
-    onCreateOption: onCreateOption,
+    onCreateOption: onCreateOption
+    // @ts-ignore - Type mismatch with onChange handler - workaround for help-center local consumption
+    ,
     onChange: onChange,
     options: options,
     onFocus: onFocus,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
-    placeholder: placeholder || l10n.formatTime(placeholderDatetime),
+    placeholder: placeholder || l10n.formatTime(placeholderDatetime)
+    // @ts-ignore - Type mismatch with styles config - workaround for help-center local consumption
+    ,
     styles: mergedStyles,
     value: initialValue,
     spacing: spacing

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

@@ -1,11 +1,7 @@
 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';
 
 /**
@@ -43,11 +39,10 @@ function makeSingleValue(_ref) {
       getStyles: getStyles,
       getValue: getValue,
       hasValue: hasValue,
-      innerProps: _objectSpread(_objectSpread({}, fg('platform-dtp_a11y_fix-dsp-23950') ? {
-        id: id
-      } : {}), {}, {
+      innerProps: {
+        id: id,
         lang: lang
-      }),
+      },
       isDisabled: isDisabled,
       isMulti: isMulti,
       isRtl: isRtl,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "17.1.4",
+	"version": "17.1.6",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,15 +36,15 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/calendar": "^17.1.0",
 		"@atlaskit/css": "^0.15.0",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/layering": "^3.2.0",
 		"@atlaskit/locale": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/select": "^21.3.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -57,16 +57,16 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/code": "^17.2.0",
+		"@atlaskit/code": "^17.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.6.0",
-		"@atlaskit/popup": "^4.4.0",
+		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/range": "^9.2.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
@@ -113,9 +113,6 @@
 		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
-		},
-		"platform-dtp_a11y_fix-dsp-23950": {
-			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"