@atlaskit/datetime-picker 13.0.7 → 13.0.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 13.0.9
+
+### Patch Changes
+
+- [#74756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74756) [`8e66f751df96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e66f751df96) - Use feature flag to roll out border width update from 2px to 1px
+
+## 13.0.8
+
+### Patch Changes
+
+- [#70959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70959) [`689672b7c5b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/689672b7c5b0) - [ux] Returns focus to input after pressing `Esc` when inside the calendar popup in a date picker.
+
 ## 13.0.7
 
 ### Patch Changes

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

@@ -39,7 +39,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.7";
+var packageVersion = "13.0.9";
 function getValidDate(iso) {
   var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? {
@@ -243,12 +243,21 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       return calendarValue;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
+      var _this$containerRef3;
       var _this$getSafeState2 = _this.getSafeState(),
         value = _this$getSafeState2.value,
         calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
         case 'escape':
+          // Yes, this is not ideal. The alternative is to be able to place a ref
+          // on the inner input of Select itself, which would require a lot of
+          // extra stuff in the Select component for only this one thing. While
+          // this would be more "React-y", it doesn't seem to pose any other
+          // benefits. Performance-wise, we are only searching within the
+          // container, so it's quick.
+          var innerCombobox = (_this$containerRef3 = _this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
+          innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
           _this.setState({
             isOpen: false
           });
@@ -340,8 +349,8 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:
-     *   1. parseInputValue
-     *   2. locale
+     *   1. `parseInputValue`
+     *   2. `locale`
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseDate", function (date) {
       var _this$props = _this.props,
@@ -357,9 +366,9 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. dateFormat
-     *   3. locale
+     *   1. `formatDisplayLabel`
+     *   2. `dateFormat`
+     *   3. `locale`
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatDate", function (value) {
       var _this$props2 = _this.props,

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.7";
+var packageVersion = "13.0.9";
 var isInvalidBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });
@@ -77,7 +77,7 @@ var isDisabledStyles = (0, _react2.css)({
 var baseContainerStyles = (0, _react2.css)({
   display: 'flex',
   backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
-  border: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(_colors.N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
+  border: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(_colors.N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
   borderRadius: "var(--ds-border-radius, 3px)",
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {

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

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

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

@@ -19,7 +19,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.7";
+const packageVersion = "13.0.9";
 function getValidDate(iso) {
   const date = parseISO(iso);
   return isValid(date) ? {
@@ -220,6 +220,7 @@ class DatePicker extends Component {
       return calendarValue;
     });
     _defineProperty(this, "onInputKeyDown", event => {
+      var _this$containerRef3;
       const {
         value,
         calendarValue
@@ -227,6 +228,14 @@ class DatePicker extends Component {
       const keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
         case 'escape':
+          // Yes, this is not ideal. The alternative is to be able to place a ref
+          // on the inner input of Select itself, which would require a lot of
+          // extra stuff in the Select component for only this one thing. While
+          // this would be more "React-y", it doesn't seem to pose any other
+          // benefits. Performance-wise, we are only searching within the
+          // container, so it's quick.
+          const innerCombobox = (_this$containerRef3 = this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
+          innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
           this.setState({
             isOpen: false
           });
@@ -322,8 +331,8 @@ class DatePicker extends Component {
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:
-     *   1. parseInputValue
-     *   2. locale
+     *   1. `parseInputValue`
+     *   2. `locale`
      */
     _defineProperty(this, "parseDate", date => {
       const {
@@ -341,9 +350,9 @@ class DatePicker extends Component {
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. dateFormat
-     *   3. locale
+     *   1. `formatDisplayLabel`
+     *   2. `dateFormat`
+     *   3. `locale`
      */
     _defineProperty(this, "formatDate", value => {
       const {

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

@@ -15,7 +15,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.7";
+const packageVersion = "13.0.9";
 const isInvalidBorderStyles = css({
   borderColor: `var(--ds-border-danger, ${R400})`
 });
@@ -61,7 +61,7 @@ const isDisabledStyles = css({
 const baseContainerStyles = css({
   display: 'flex',
   backgroundColor: `var(--ds-background-input, ${N20})`,
-  border: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-input, ${N100})`}` : `2px solid ${`var(--ds-border-input, ${N20})`}`,
+  border: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-input, ${N100})`}` : `2px solid ${`var(--ds-border-input, ${N20})`}`,
   borderRadius: "var(--ds-border-radius, 3px)",
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {

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

@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.7";
+const packageVersion = "13.0.9";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -30,7 +30,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.7";
+var packageVersion = "13.0.9";
 function getValidDate(iso) {
   var date = parseISO(iso);
   return isValid(date) ? {
@@ -234,12 +234,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       return calendarValue;
     });
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
+      var _this$containerRef3;
       var _this$getSafeState2 = _this.getSafeState(),
         value = _this$getSafeState2.value,
         calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
       switch (keyPressed) {
         case 'escape':
+          // Yes, this is not ideal. The alternative is to be able to place a ref
+          // on the inner input of Select itself, which would require a lot of
+          // extra stuff in the Select component for only this one thing. While
+          // this would be more "React-y", it doesn't seem to pose any other
+          // benefits. Performance-wise, we are only searching within the
+          // container, so it's quick.
+          var innerCombobox = (_this$containerRef3 = _this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
+          innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
           _this.setState({
             isOpen: false
           });
@@ -331,8 +340,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:
-     *   1. parseInputValue
-     *   2. locale
+     *   1. `parseInputValue`
+     *   2. `locale`
      */
     _defineProperty(_assertThisInitialized(_this), "parseDate", function (date) {
       var _this$props = _this.props,
@@ -348,9 +357,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. dateFormat
-     *   3. locale
+     *   1. `formatDisplayLabel`
+     *   2. `dateFormat`
+     *   3. `locale`
      */
     _defineProperty(_assertThisInitialized(_this), "formatDate", function (value) {
       var _this$props2 = _this.props,

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

@@ -25,7 +25,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.7";
+var packageVersion = "13.0.9";
 var isInvalidBorderStyles = css({
   borderColor: "var(--ds-border-danger, ".concat(R400, ")")
 });
@@ -71,7 +71,7 @@ var isDisabledStyles = css({
 var baseContainerStyles = css({
   display: 'flex',
   backgroundColor: "var(--ds-background-input, ".concat(N20, ")"),
-  border: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(N20, ")")),
+  border: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(N20, ")")),
   borderRadius: "var(--ds-border-radius, 3px)",
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {

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

@@ -29,7 +29,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.7";
+var packageVersion = "13.0.9";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -127,7 +127,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     dateFormat?: string;
     /**
-     * Placeholder text displayed in input
+     * Placeholder text displayed in input.
      */
     placeholder?: string;
     /**
@@ -158,7 +158,7 @@ interface State {
     /**
      * When being cleared from the icon the DatePicker is blurred.
      * This variable defines whether the default onSelectBlur or onSelectFocus
-     * events should behave as normal
+     * events should behave as normal.
      */
     isFocused: boolean;
     clearingFromIcon: boolean;
@@ -242,7 +242,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     getSafeCalendarValue: (calendarValue: string) => string;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClear: () => void;
     onSelectChange: (_value: ValueType<OptionType>, action: ActionMeta) => void;
     refCalendar: (ref: CalendarRef | null) => void;
@@ -251,16 +251,16 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:
-     *   1. parseInputValue
-     *   2. locale
+     *   1. `parseInputValue`
+     *   2. `locale`
      */
     parseDate: (date: string) => Date;
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. dateFormat
-     *   3. locale
+     *   1. `formatDisplayLabel`
+     *   2. `dateFormat`
+     *   3. `locale`
      */
     formatDate: (value: string) => string;
     getPlaceholder: () => string;

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

@@ -127,7 +127,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     dateFormat?: string;
     /**
-     * Placeholder text displayed in input
+     * Placeholder text displayed in input.
      */
     placeholder?: string;
     /**
@@ -158,7 +158,7 @@ interface State {
     /**
      * When being cleared from the icon the DatePicker is blurred.
      * This variable defines whether the default onSelectBlur or onSelectFocus
-     * events should behave as normal
+     * events should behave as normal.
      */
     isFocused: boolean;
     clearingFromIcon: boolean;
@@ -242,7 +242,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     getSafeCalendarValue: (calendarValue: string) => string;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClear: () => void;
     onSelectChange: (_value: ValueType<OptionType>, action: ActionMeta) => void;
     refCalendar: (ref: CalendarRef | null) => void;
@@ -251,16 +251,16 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:
-     *   1. parseInputValue
-     *   2. locale
+     *   1. `parseInputValue`
+     *   2. `locale`
      */
     parseDate: (date: string) => Date;
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. dateFormat
-     *   3. locale
+     *   1. `formatDisplayLabel`
+     *   2. `dateFormat`
+     *   3. `locale`
      */
     formatDate: (value: string) => string;
     getPlaceholder: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.0.7",
+  "version": "13.0.9",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/calendar": "^14.0.3",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.0.0",
@@ -46,9 +46,9 @@
     "@atlaskit/locale": "^2.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/select": "^17.0.3",
+    "@atlaskit/select": "^17.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -61,11 +61,11 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/button": "^17.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/modal-dialog": "^12.10.0",
-    "@atlaskit/popup": "^1.11.0",
+    "@atlaskit/popup": "^1.12.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
@@ -109,10 +109,13 @@
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
+    "platform.design-system-team.update-input-border-wdith_5abwv": {
+      "type": "boolean"
+    },
     "platform.design-system-team.date-picker-input-a11y-fix_cbbxs": {
       "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlassian.design/components/datetime-picker/"
-}
+}