@atlaskit/datetime-picker 12.7.7 → 12.7.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/datetime-picker
 
+## 12.7.8
+
+### Patch Changes
+
+- [`e8bb91da805`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e8bb91da805) - [ux] Ensure menu doesn't close when focus moves within it. Makes future keyboard accessibility possible.
+
 ## 12.7.7
 
 ### Patch Changes

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

@@ -37,7 +37,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; } } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -168,12 +168,16 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
+      var _this$containerRef;
+      var newlyFocusedElement = event.relatedTarget;
       if (_this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
         });
-      } else {
+      } else if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        // Don't close menu if focus is staying within the date picker's
+        // container. Makes keyboard accessibility of calendar possible
         _this.setState({
           isOpen: false,
           isFocused: false

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.7.7",
+	"version": "12.7.8",
 	"sideEffects": false
 }

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

@@ -19,7 +19,7 @@ import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.7";
+const packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -146,12 +146,16 @@ class DatePicker extends Component {
       }
     });
     _defineProperty(this, "onSelectBlur", event => {
+      var _this$containerRef;
+      const newlyFocusedElement = event.relatedTarget;
       if (this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         this.setState({
           clearingFromIcon: false
         });
-      } else {
+      } else if (!((_this$containerRef = this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        // Don't close menu if focus is staying within the date picker's
+        // container. Makes keyboard accessibility of calendar possible
         this.setState({
           isOpen: false,
           isFocused: false

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

@@ -17,7 +17,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.7";
+const packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -16,7 +16,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.7";
+const packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.7.7",
+	"version": "12.7.8",
 	"sideEffects": false
 }

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

@@ -30,7 +30,7 @@ import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -161,12 +161,16 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
+      var _this$containerRef;
+      var newlyFocusedElement = event.relatedTarget;
       if (_this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
         });
-      } else {
+      } else if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        // Don't close menu if focus is staying within the date picker's
+        // container. Makes keyboard accessibility of calendar possible
         _this.setState({
           isOpen: false,
           isFocused: false

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

@@ -27,7 +27,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -29,7 +29,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.7";
+var packageVersion = "12.7.8";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.7.7",
+	"version": "12.7.8",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.7.7",
+  "version": "12.7.8",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -52,11 +52,12 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/modal-dialog": "^12.6.0",
-    "@atlaskit/popup": "^1.8.0",
+    "@atlaskit/popup": "^1.9.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,274 @@
+## API Report File for "@atlaskit/datetime-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { DropdownIndicatorProps } from '@atlaskit/select';
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { GroupType } from '@atlaskit/select';
+import { OptionType } from '@atlaskit/select';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import { SelectProps as SelectProps_2 } from '@atlaskit/select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export type Appearance = 'default' | 'none' | 'subtle';
+
+// @public (undocumented)
+export const DatePicker: ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>, "dateFormat" | "formatDisplayLabel" | "isOpen" | "maxDate" | "minDate" | "nextMonthLabel" | "parseInputValue" | "placeholder" | "previousMonthLabel" | "testId" | "value" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>, "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabled" | "disabledDateFilter" | "hideIcon" | "icon" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "locale" | "name" | "onBlur" | "onChange" | "onFocus" | "selectProps" | "spacing">> & Partial<Pick<{
+appearance: Appearance;
+autoFocus: boolean;
+defaultIsOpen: boolean;
+defaultValue: string;
+disabled: string[];
+disabledDateFilter: (_: string) => boolean;
+hideIcon: boolean;
+icon: ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
+id: string;
+innerProps: {};
+isDisabled: boolean;
+isInvalid: boolean;
+name: string;
+onBlur: (event: FocusEvent_2<HTMLInputElement>) => void;
+onChange: (value: string) => void;
+onFocus: (event: FocusEvent_2<HTMLInputElement>) => void;
+selectProps: {};
+spacing: Spacing;
+locale: string;
+}, never>> & RefAttributes<any> & WithContextProps, "analyticsContext" | "appearance" | "autoFocus" | "dateFormat" | "defaultIsOpen" | "defaultValue" | "disabled" | "disabledDateFilter" | "formatDisplayLabel" | "hideIcon" | "icon" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "isOpen" | "key" | "locale" | "maxDate" | "minDate" | "name" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "placeholder" | "previousMonthLabel" | "selectProps" | "spacing" | "testId" | "value" | "weekStartDay"> & RefAttributes<any>>;
+
+// @public (undocumented)
+const datePickerDefaultProps: {
+    appearance: Appearance;
+    autoFocus: boolean;
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    hideIcon: boolean;
+    icon: ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
+    id: string;
+    innerProps: {};
+    isDisabled: boolean;
+    isInvalid: boolean;
+    name: string;
+    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+    selectProps: {};
+    spacing: Spacing;
+    locale: string;
+};
+
+// @public (undocumented)
+export interface DatePickerProps extends WithAnalyticsEventsProps {
+    appearance?: Appearance;
+    autoFocus?: boolean;
+    dateFormat?: string;
+    defaultIsOpen?: boolean;
+    defaultValue?: string;
+    disabled?: string[];
+    disabledDateFilter?: (date: string) => boolean;
+    formatDisplayLabel?: (value: string, dateFormat: string) => string;
+    hideIcon?: boolean;
+    icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
+    id?: string;
+    innerProps?: React.AllHTMLAttributes<HTMLElement>;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isOpen?: boolean;
+    locale?: string;
+    maxDate?: string;
+    minDate?: string;
+    name?: string;
+    nextMonthLabel?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (value: string) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    parseInputValue?: (date: string, dateFormat: string) => Date;
+    placeholder?: string;
+    previousMonthLabel?: string;
+    selectProps?: SelectProps;
+    spacing?: Spacing;
+    testId?: string;
+    value?: string;
+    weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+// @public (undocumented)
+type DatePickerProps_2 = typeof datePickerDefaultProps & DatePickerProps;
+
+// @public (undocumented)
+export const DateTimePicker: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>, "dateFormat" | "parseValue" | "testId" | "timeFormat" | "value"> & Partial<Pick<Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>, "appearance" | "autoFocus" | "datePickerProps" | "datePickerSelectProps" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "locale" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "timeIsEditable" | "timePickerProps" | "timePickerSelectProps" | "times">> & Partial<Pick<{
+    appearance: string;
+    autoFocus: boolean;
+    isDisabled: boolean;
+    name: string;
+    onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    innerProps: {};
+    id: string;
+    defaultValue: string;
+    timeIsEditable: boolean;
+    isInvalid: boolean;
+    datePickerProps: {};
+    timePickerProps: {};
+    datePickerSelectProps: {};
+    timePickerSelectProps: {};
+    times: string[];
+    spacing: string;
+    locale: string;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "appearance" | "autoFocus" | "dateFormat" | "datePickerProps" | "datePickerSelectProps" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "key" | "locale" | "name" | "onBlur" | "onChange" | "onFocus" | "parseValue" | "spacing" | "testId" | "timeFormat" | "timeIsEditable" | "timePickerProps" | "timePickerSelectProps" | "times" | "value"> & React_2.RefAttributes<any>>;
+
+// @public (undocumented)
+const dateTimePickerDefaultProps: {
+    appearance: string;
+    autoFocus: boolean;
+    isDisabled: boolean;
+    name: string;
+    onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    innerProps: {};
+    id: string;
+    defaultValue: string;
+    timeIsEditable: boolean;
+    isInvalid: boolean;
+    datePickerProps: {};
+    timePickerProps: {};
+    datePickerSelectProps: {};
+    timePickerSelectProps: {};
+    times: string[];
+    spacing: string;
+    locale: string;
+};
+
+// @public (undocumented)
+export interface DateTimePickerProps extends WithAnalyticsEventsProps {
+    appearance?: Appearance;
+    autoFocus?: boolean;
+    dateFormat?: string;
+    datePickerProps?: DatePickerProps;
+    datePickerSelectProps?: SelectProps_2<any>;
+    defaultValue?: string;
+    id?: string;
+    innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    locale?: string;
+    name?: string;
+    onBlur?: React_2.FocusEventHandler<HTMLInputElement>;
+    onChange?: (value: string) => void;
+    onFocus?: React_2.FocusEventHandler<HTMLInputElement>;
+    parseValue?: (dateTimeValue: string, date: string, time: string, timezone: string) => {
+        dateValue: string;
+        timeValue: string;
+        zoneValue: string;
+    };
+    spacing?: Spacing;
+    testId?: string;
+    timeFormat?: string;
+    timeIsEditable?: boolean;
+    timePickerProps?: TimePickerProps;
+    timePickerSelectProps?: SelectProps_2<any>;
+    times?: Array<string>;
+    value?: string;
+}
+
+// @public (undocumented)
+type DateTimePickerProps_2 = typeof dateTimePickerDefaultProps & DateTimePickerProps;
+
+// @public (undocumented)
+type SelectProps = any;
+
+// @public (undocumented)
+export type Spacing = 'compact' | 'default';
+
+// @public (undocumented)
+export const TimePicker: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>, "formatDisplayLabel" | "isOpen" | "placeholder" | "testId" | "timeFormat" | "value"> & Partial<Pick<Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>, "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "locale" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "selectProps" | "spacing" | "timeIsEditable" | "times">> & Partial<Pick<{
+    appearance: Appearance;
+    autoFocus: boolean;
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    hideIcon: boolean;
+    id: string;
+    innerProps: {};
+    isDisabled: boolean;
+    isInvalid: boolean;
+    name: string;
+    onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    parseInputValue: (time: string, timeFormat: string) => Date | string;
+    selectProps: {};
+    spacing: Spacing;
+    times: string[];
+    timeIsEditable: boolean;
+    locale: string;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "formatDisplayLabel" | "hideIcon" | "id" | "innerProps" | "isDisabled" | "isInvalid" | "isOpen" | "key" | "locale" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "placeholder" | "selectProps" | "spacing" | "testId" | "timeFormat" | "timeIsEditable" | "times" | "value"> & React_2.RefAttributes<any>>;
+
+// @public (undocumented)
+const timePickerDefaultProps: {
+    appearance: Appearance;
+    autoFocus: boolean;
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    hideIcon: boolean;
+    id: string;
+    innerProps: {};
+    isDisabled: boolean;
+    isInvalid: boolean;
+    name: string;
+    onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    parseInputValue: (time: string, timeFormat: string) => Date | string;
+    selectProps: {};
+    spacing: Spacing;
+    times: string[];
+    timeIsEditable: boolean;
+    locale: string;
+};
+
+// @public (undocumented)
+export interface TimePickerProps extends WithAnalyticsEventsProps {
+    appearance?: Appearance;
+    autoFocus?: boolean;
+    defaultIsOpen?: boolean;
+    defaultValue?: string;
+    formatDisplayLabel?: (time: string, timeFormat: string) => string;
+    hideIcon?: boolean;
+    id?: string;
+    innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isOpen?: boolean;
+    locale?: string;
+    name?: string;
+    onBlur?: React_2.FocusEventHandler<HTMLElement>;
+    onChange?: (value: string) => void;
+    onFocus?: React_2.FocusEventHandler<HTMLElement>;
+    // (undocumented)
+    parseInputValue?: (time: string, timeFormat: string) => Date | string;
+    placeholder?: string;
+    selectProps?: SelectProps_2<any>;
+    spacing?: Spacing;
+    testId?: string;
+    timeFormat?: string;
+    timeIsEditable?: boolean;
+    times?: string[];
+    value?: string;
+}
+
+// @public (undocumented)
+type TimePickerProps_2 = typeof timePickerDefaultProps & TimePickerProps;
+
+// (No @packageDocumentation comment for this package)
+
+```