@atlaskit/datetime-picker 17.1.5 → 17.1.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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

@@ -530,7 +530,7 @@ 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,
@@ -597,70 +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,
-        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

@@ -547,7 +547,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": (0, _platformFeatureFlags.fg)('platform-dtp_a11y_fix-dsp-23950') ? ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId : ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
     label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,

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

@@ -509,7 +509,7 @@ 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,
@@ -576,71 +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,
-      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

@@ -474,7 +474,7 @@ 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,
+    "aria-describedby": ariaDescribedBy ? `${ariaDescribedBy} ${valueId}` : valueId,
     label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,

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

@@ -522,7 +522,7 @@ 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,
@@ -589,70 +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,
-        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

@@ -539,7 +539,7 @@ 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,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
     label: label || undefined,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,

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.5",
+	"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,7 +36,7 @@
 		"@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",
@@ -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/"