@atlaskit/datetime-picker 13.0.12 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/datetime-picker
 
+## 13.1.0
+
+### Minor Changes
+
+- [#79261](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79261) [`d679c084e0a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d679c084e0a9) - Add optional `label` prop to DatePicker and TimePicker to supply an accessible name via `aria-label`
+
 ## 13.0.12
 
 ### Patch Changes

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

@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.12";
+var packageVersion = "13.1.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -52,6 +52,7 @@ var datePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -359,6 +360,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         maxDate = _this$props3.maxDate,
         minDate = _this$props3.minDate,
         isInvalid = _this$props3.isInvalid,
+        label = _this$props3.label,
         name = _this$props3.name,
         nextMonthLabel = _this$props3.nextMonthLabel,
         previousMonthLabel = _this$props3.previousMonthLabel,
@@ -430,6 +432,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+          "aria-label": label || undefined,
           appearance: this.props.appearance,
           enableAnimation: false,
           menuIsOpen: menuIsOpen,

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.12";
+var packageVersion = "13.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -240,11 +240,11 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       var _timePickerSelectProp = timePickerSelectProps.styles,
         timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        'aria-label': datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
+        'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, datePickerStyles)
       });
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-        'aria-label': timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
+        'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, timePickerStyles)
       });
 

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

@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.12";
+var packageVersion = "13.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -55,6 +55,7 @@ var timePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -205,6 +206,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         id = _this$props2.id,
         innerProps = _this$props2.innerProps,
         isDisabled = _this$props2.isDisabled,
+        label = _this$props2.label,
         locale = _this$props2.locale,
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
@@ -298,6 +300,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         "data-testid": testId && "".concat(testId, "--input"),
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+        "aria-label": label || undefined,
         appearance: appearance,
         autoFocus: autoFocus,
         components: selectComponents,

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

@@ -16,7 +16,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.12";
+const packageVersion = "13.1.0";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -30,6 +30,7 @@ const datePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -355,6 +356,7 @@ class DatePicker extends Component {
       maxDate,
       minDate,
       isInvalid,
+      label,
       name,
       nextMonthLabel,
       previousMonthLabel,
@@ -430,6 +432,7 @@ class DatePicker extends Component {
         value: value,
         "data-testid": testId && `${testId}--input`
       }), jsx(Select, _extends({
+        "aria-label": label || undefined,
         appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,

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

@@ -15,7 +15,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.12";
+const packageVersion = "13.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -225,12 +225,12 @@ class DateTimePicker extends React.Component {
     } = timePickerSelectProps;
     const mergedDatePickerSelectProps = {
       ...datePickerSelectProps,
-      'aria-label': datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
+      'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
       styles: mergeStyles(styles, datePickerStyles)
     };
     const mergedTimePickerSelectProps = {
       ...timePickerSelectProps,
-      'aria-label': timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
+      'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
       styles: mergeStyles(styles, timePickerStyles)
     };
 

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

@@ -16,7 +16,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 = "13.0.12";
+const packageVersion = "13.1.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -35,6 +35,7 @@ const timePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -180,6 +181,7 @@ class TimePicker extends React.Component {
       id,
       innerProps,
       isDisabled,
+      label,
       locale,
       name,
       placeholder,
@@ -275,6 +277,7 @@ class TimePicker extends React.Component {
       "data-testid": testId && `${testId}--input`,
       onKeyDown: this.onSelectKeyDown
     }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+      "aria-label": label || undefined,
       appearance: appearance,
       autoFocus: autoFocus,
       components: selectComponents,

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

@@ -27,7 +27,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.12";
+var packageVersion = "13.1.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -43,6 +43,7 @@ var datePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -350,6 +351,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         maxDate = _this$props3.maxDate,
         minDate = _this$props3.minDate,
         isInvalid = _this$props3.isInvalid,
+        label = _this$props3.label,
         name = _this$props3.name,
         nextMonthLabel = _this$props3.nextMonthLabel,
         previousMonthLabel = _this$props3.previousMonthLabel,
@@ -421,6 +423,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), jsx(Select, _extends({
+          "aria-label": label || undefined,
           appearance: this.props.appearance,
           enableAnimation: false,
           menuIsOpen: menuIsOpen,

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

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.12";
+var packageVersion = "13.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -234,11 +234,11 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       var _timePickerSelectProp = timePickerSelectProps.styles,
         timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        'aria-label': datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
+        'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
         styles: mergeStyles(styles, datePickerStyles)
       });
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-        'aria-label': timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
+        'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
         styles: mergeStyles(styles, timePickerStyles)
       });
 

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

@@ -28,7 +28,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 = "13.0.12";
+var packageVersion = "13.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -47,6 +47,7 @@ var timePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -197,6 +198,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         id = _this$props2.id,
         innerProps = _this$props2.innerProps,
         isDisabled = _this$props2.isDisabled,
+        label = _this$props2.label,
         locale = _this$props2.locale,
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
@@ -290,6 +292,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         "data-testid": testId && "".concat(testId, "--input"),
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+        "aria-label": label || undefined,
         appearance: appearance,
         autoFocus: autoFocus,
         components: selectComponents,

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

@@ -34,6 +34,7 @@ declare const datePickerDefaultProps: {
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -56,6 +57,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
+        label: string;
         name: string;
         onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
         onChange: (_value: string) => void;
@@ -119,7 +121,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -132,6 +134,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -139,5 +142,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -23,6 +23,7 @@ declare const timePickerDefaultProps: {
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -46,6 +47,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
+        label: string;
         name: string;
         onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
         onChange: (_value: string) => void;
@@ -78,7 +80,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -88,6 +90,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -98,5 +101,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/types.d.ts

@@ -34,6 +34,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
      */
     disabledDateFilter?: (date: string) => boolean;
+    /**
+     * Accessible name for the Date Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
+     */
+    label?: string;
     /**
      * The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.
      */
@@ -190,6 +194,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set if the dropdown is open. Will be `false` if not provided.
      */
     isOpen?: boolean;
+    /**
+     * Accessible name for the Time Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
+     */
+    label?: string;
     /**
      * The name of the field.
      */

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

@@ -34,6 +34,7 @@ declare const datePickerDefaultProps: {
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -56,6 +57,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
+        label: string;
         name: string;
         onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
         onChange: (_value: string) => void;
@@ -119,7 +121,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -132,6 +134,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -139,5 +142,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -23,6 +23,7 @@ declare const timePickerDefaultProps: {
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -46,6 +47,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
+        label: string;
         name: string;
         onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
         onChange: (_value: string) => void;
@@ -78,7 +80,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -88,6 +90,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
+    label: string;
     name: string;
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
@@ -98,5 +101,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/types.d.ts

@@ -34,6 +34,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
      */
     disabledDateFilter?: (date: string) => boolean;
+    /**
+     * Accessible name for the Date Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
+     */
+    label?: string;
     /**
      * The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.
      */
@@ -190,6 +194,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set if the dropdown is open. Will be `false` if not provided.
      */
     isOpen?: boolean;
+    /**
+     * Accessible name for the Time Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
+     */
+    label?: string;
     /**
      * The name of the field.
      */

package/extract-react-types/date-picker-props.tsx

@@ -1,4 +1,4 @@
-import { DatePickerBaseProps } from '../src/components/date-picker';
+import { DatePickerBaseProps } from '../src/types';
 
 export default function DatePickerProps(props: DatePickerBaseProps) {
   return null;

package/extract-react-types/time-picker-props.tsx

@@ -1,4 +1,4 @@
-import { TimePickerBaseProps } from '../src/components/time-picker';
+import { TimePickerBaseProps } from '../src/types';
 
 export default function TimePickerProps(props: TimePickerBaseProps) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.0.12",
+  "version": "13.1.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
     "@atlaskit/locale": "^2.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/select": "^17.1.0",
+    "@atlaskit/select": "^17.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.39.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -61,11 +61,12 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/button": "^17.4.0",
+    "@af/visual-regression": "*",
+    "@atlaskit/button": "^17.7.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/modal-dialog": "^12.10.0",
-    "@atlaskit/popup": "^1.12.0",
+    "@atlaskit/popup": "^1.13.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",