@atlaskit/datetime-picker 18.4.1 → 18.4.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/datetime-picker
 
+## 18.4.2
+
+### Patch Changes
+
+- [`6d3790c08ff19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d3790c08ff19) -
+  Experimental React 19 peer dependency support. This patch widens the peer range; CI coverage is
+  partial.
+- Updated dependencies
+
 ## 18.4.1
 
 ### Patch Changes

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

@@ -17,7 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _dateFns = require("date-fns");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _new = require("@atlaskit/button/new");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
@@ -45,7 +45,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -72,6 +72,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var containerRef = (0, _react.useRef)(null);
   var calendarRef = (0, _react.useRef)(null);
   var calendarButtonRef = (0, _react.useRef)(null);
+  // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
+  // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   var isPointerInteractionRef = (0, _react.useRef)(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -535,17 +537,25 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId && "".concat(testId, "--container"),
-    onBlur: onContainerBlur,
+    onBlur: onContainerBlur
+    // Reset before descendant click handlers run: click happens after native light-dismiss, so
+    // any focus they move is safe to treat as non-pointer focus. Capture also guarantees cleanup
+    // when a descendant stops the bubbling click.
+    ,
     onClickCapture: function onClickCapture() {
       isPointerInteractionRef.current = false;
     },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
-    onKeyDown: onInputKeyDown,
+    onKeyDown: onInputKeyDown
+    // A cancelled pointer produces no click, so clear the tracking state here instead.
+    ,
     onPointerCancelCapture: function onPointerCancelCapture() {
       isPointerInteractionRef.current = false;
-    },
+    }
+    // Capture pointerdown before it moves focus into a descendant Select control.
+    ,
     onPointerDownCapture: function onPointerDownCapture() {
       isPointerInteractionRef.current = true;
     },
@@ -620,7 +630,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     menuInnerWrapper: calendarProps.menuInnerWrapper
   })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
-  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+  }, /*#__PURE__*/React.createElement(_button.default, {
     appearance: "subtle",
     label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
     "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,

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

@@ -16,7 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _dateFns = require("date-fns");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _new = require("@atlaskit/button/new");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _styles = require("@atlaskit/react-select/styles");
@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -492,7 +492,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: dtState.timeValue
   })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     xcss: compiledStyles.iconContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     label: clearControlLabel,
     icon: function icon(iconProps) {

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/cjs/internal/fixed-layer-menu-top-layer.js

@@ -13,8 +13,8 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _components = require("@atlaskit/react-select/components");
-var _placementMap = require("@atlaskit/top-layer/placement-map");
-var _popover = require("@atlaskit/top-layer/popover");
+var _index = require("@atlaskit/top-layer/placement-map/index");
+var _popover = require("@atlaskit/top-layer/popover/popover");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
 var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
 var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Bottom-start placement: time options menu appears below and aligned to the
  * start edge of the trigger (the select input).
  */
-var popupPlacement = (0, _placementMap.fromLegacyPlacement)({
+var popupPlacement = (0, _index.fromLegacyPlacement)({
   legacy: 'bottom-start'
 });
 

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

@@ -10,7 +10,7 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { IconButton } from '@atlaskit/button/new';
+import IconButton from '@atlaskit/button/icon/button';
 import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/calendar';
@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.4.0";
+const packageVersion = "18.4.1";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -59,6 +59,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const containerRef = useRef(null);
   const calendarRef = useRef(null);
   const calendarButtonRef = useRef(null);
+  // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
+  // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   const isPointerInteractionRef = useRef(false);
   const {
     appearance = 'default',
@@ -463,17 +465,25 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   const openCalendarLabelId = `open-calendar-label--${useId()}`;
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId && `${testId}--container`,
-    onBlur: onContainerBlur,
+    onBlur: onContainerBlur
+    // Reset before descendant click handlers run: click happens after native light-dismiss, so
+    // any focus they move is safe to treat as non-pointer focus. Capture also guarantees cleanup
+    // when a descendant stops the bubbling click.
+    ,
     onClickCapture: () => {
       isPointerInteractionRef.current = false;
     },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
-    onKeyDown: onInputKeyDown,
+    onKeyDown: onInputKeyDown
+    // A cancelled pointer produces no click, so clear the tracking state here instead.
+    ,
     onPointerCancelCapture: () => {
       isPointerInteractionRef.current = false;
-    },
+    }
+    // Capture pointerdown before it moves focus into a descendant Select control.
+    ,
     onPointerDownCapture: () => {
       isPointerInteractionRef.current = true;
     },

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

@@ -10,7 +10,7 @@ import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { IconButton } from '@atlaskit/button/new';
+import IconButton from '@atlaskit/button/icon/button';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.4.0";
+const packageVersion = "18.4.1";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.4.0";
+const packageVersion = "18.4.1";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/es2019/internal/fixed-layer-menu-top-layer.js

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useRef } from 'react';
 import { components } from '@atlaskit/react-select/components';
-import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popover } from '@atlaskit/top-layer/popover';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
+import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
 import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
 

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

@@ -16,7 +16,7 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { IconButton } from '@atlaskit/button/new';
+import IconButton from '@atlaskit/button/icon/button';
 import { cx } from '@atlaskit/css';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import CalendarIcon from '@atlaskit/icon/core/calendar';
@@ -38,7 +38,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -65,6 +65,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var containerRef = useRef(null);
   var calendarRef = useRef(null);
   var calendarButtonRef = useRef(null);
+  // Track whether focus was caused by an active pointer gesture. Pointer-driven focus must defer
+  // opening a top-layer popover until click, while keyboard and programmatic focus can open it now.
   var isPointerInteractionRef = useRef(false);
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -528,17 +530,25 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   var openCalendarLabelId = "open-calendar-label--".concat(useId());
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId && "".concat(testId, "--container"),
-    onBlur: onContainerBlur,
+    onBlur: onContainerBlur
+    // Reset before descendant click handlers run: click happens after native light-dismiss, so
+    // any focus they move is safe to treat as non-pointer focus. Capture also guarantees cleanup
+    // when a descendant stops the bubbling click.
+    ,
     onClickCapture: function onClickCapture() {
       isPointerInteractionRef.current = false;
     },
     onFocus: onContainerFocus,
     onClick: onInputClick,
     onInput: onTextInput,
-    onKeyDown: onInputKeyDown,
+    onKeyDown: onInputKeyDown
+    // A cancelled pointer produces no click, so clear the tracking state here instead.
+    ,
     onPointerCancelCapture: function onPointerCancelCapture() {
       isPointerInteractionRef.current = false;
-    },
+    }
+    // Capture pointerdown before it moves focus into a descendant Select control.
+    ,
     onPointerDownCapture: function onPointerDownCapture() {
       isPointerInteractionRef.current = true;
     },

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

@@ -17,7 +17,7 @@ import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { IconButton } from '@atlaskit/button/new';
+import IconButton from '@atlaskit/button/icon/button';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.4.0";
+var packageVersion = "18.4.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

package/dist/esm/internal/fixed-layer-menu-top-layer.js

@@ -6,8 +6,8 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useRef } from 'react';
 import { components } from '@atlaskit/react-select/components';
-import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popover } from '@atlaskit/top-layer/popover';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
+import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
 import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "18.4.1",
+	"version": "18.4.2",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,10 +31,10 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.3.0",
+		"@atlaskit/analytics-next": "^12.4.0",
 		"@atlaskit/button": "^25.2.0",
 		"@atlaskit/calendar": "^19.1.0",
-		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^37.5.0",
 		"@atlaskit/layering": "^5.1.0",
@@ -43,16 +43,16 @@
 		"@atlaskit/popper": "^9.3.0",
 		"@atlaskit/primitives": "^22.4.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/react-select": "^4.8.0",
-		"@atlaskit/select": "^22.8.0",
-		"@atlaskit/tokens": "^16.8.0",
+		"@atlaskit/react-select": "^4.9.0",
+		"@atlaskit/select": "^22.10.0",
+		"@atlaskit/tokens": "^16.9.0",
 		"@atlaskit/top-layer": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0"
+		"react": "^18.2.0 || ^19.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
@@ -79,7 +79,7 @@
 		"jest-in-case": "^1.0.2",
 		"jscodeshift": "^17.0.0",
 		"moment": "^2.29.2",
-		"react": "^18.2.0",
+		"react": "^19.0.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0"
 	},