@atlaskit/datetime-picker 14.1.2 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/datetime-picker
 
+## 15.0.0
+
+### Major Changes
+
+- [#145306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145306)
+  [`3b17d85b64fcd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b17d85b64fcd) -
+  Remove unused analyticsContext prop and add unit tests for analytics.
+
 ## 14.1.2
 
 ### Patch Changes

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

@@ -36,7 +36,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.1.2";
+var packageVersion = "15.0.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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

@@ -32,7 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.1.2";
+var packageVersion = "15.0.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 = "14.1.2";
+var packageVersion = "15.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -53,7 +53,6 @@ var analyticsAttributes = {
  */
 var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var ariaDescribedBy = _ref['aria-describedby'],
-    analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
@@ -137,8 +136,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     forceUpdate = _useReducer2[1];
   var providedOnChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
     fn: providedOnChange,
-    action: 'selectedTime',
-    analyticsData: analyticsContext
+    action: 'selectedTime'
   }, analyticsAttributes));
   (0, _react.useEffect)(function () {
     if (providedValue) {
@@ -150,7 +148,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
-  var onChange = function onChange(newValue, action) {
+  var onChange = (0, _react.useCallback)(function (newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
     setValue(finalValue);
@@ -158,7 +156,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setClearingFromIcon(true);
     }
     providedOnChangeWithAnalytics(finalValue);
-  };
+  }, [providedOnChangeWithAnalytics]);
 
   /**
    * Only allow custom times if timeIsEditable prop is true
@@ -175,9 +173,9 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
       var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
       setValue(formattedValue);
-      providedOnChange(formattedValue);
+      providedOnChangeWithAnalytics(formattedValue);
     } else {
-      providedOnChange(inputValue);
+      providedOnChangeWithAnalytics(inputValue);
     }
   };
   var onMenuOpen = function onMenuOpen() {

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

@@ -19,7 +19,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.1.2";
+const packageVersion = "15.0.0";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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

@@ -18,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.1.2";
+const packageVersion = "15.0.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useEffect, useReducer, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
@@ -11,7 +11,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 = "14.1.2";
+const packageVersion = "15.0.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -37,7 +37,6 @@ const analyticsAttributes = {
  */
 const TimePicker = /*#__PURE__*/forwardRef(({
   'aria-describedby': ariaDescribedBy,
-  analyticsContext,
   appearance = 'default',
   autoFocus = false,
   defaultIsOpen = false,
@@ -82,7 +81,6 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   const providedOnChangeWithAnalytics = usePlatformLeafEventHandler({
     fn: providedOnChange,
     action: 'selectedTime',
-    analyticsData: analyticsContext,
     ...analyticsAttributes
   });
   useEffect(() => {
@@ -95,7 +93,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
-  const onChange = (newValue, action) => {
+  const onChange = useCallback((newValue, action) => {
     const rawValue = newValue ? newValue.value || newValue : '';
     const finalValue = rawValue.toString();
     setValue(finalValue);
@@ -103,7 +101,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       setClearingFromIcon(true);
     }
     providedOnChangeWithAnalytics(finalValue);
-  };
+  }, [providedOnChangeWithAnalytics]);
 
   /**
    * Only allow custom times if timeIsEditable prop is true
@@ -120,9 +118,9 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
       const formattedValue = format(sanitizedInput, formatFormat) || '';
       setValue(formattedValue);
-      providedOnChange(formattedValue);
+      providedOnChangeWithAnalytics(formattedValue);
     } else {
-      providedOnChange(inputValue);
+      providedOnChangeWithAnalytics(inputValue);
     }
   };
   const onMenuOpen = () => {

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

@@ -29,7 +29,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.1.2";
+var packageVersion = "15.0.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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

@@ -28,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.1.2";
+var packageVersion = "15.0.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef, useEffect, useReducer, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
@@ -17,7 +17,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 = "14.1.2";
+var packageVersion = "15.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -43,7 +43,6 @@ var analyticsAttributes = {
  */
 var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var ariaDescribedBy = _ref['aria-describedby'],
-    analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
@@ -127,8 +126,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     forceUpdate = _useReducer2[1];
   var providedOnChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: providedOnChange,
-    action: 'selectedTime',
-    analyticsData: analyticsContext
+    action: 'selectedTime'
   }, analyticsAttributes));
   useEffect(function () {
     if (providedValue) {
@@ -140,7 +138,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setIsOpen(providedIsOpen);
     }
   }, [providedIsOpen]);
-  var onChange = function onChange(newValue, action) {
+  var onChange = useCallback(function (newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
     setValue(finalValue);
@@ -148,7 +146,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setClearingFromIcon(true);
     }
     providedOnChangeWithAnalytics(finalValue);
-  };
+  }, [providedOnChangeWithAnalytics]);
 
   /**
    * Only allow custom times if timeIsEditable prop is true
@@ -165,9 +163,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
       var formattedValue = format(sanitizedInput, formatFormat) || '';
       setValue(formattedValue);
-      providedOnChange(formattedValue);
+      providedOnChangeWithAnalytics(formattedValue);
     } else {
-      providedOnChange(inputValue);
+      providedOnChangeWithAnalytics(inputValue);
     }
   };
   var onMenuOpen = function onMenuOpen() {

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

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types/types.d.ts

@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
-    /**
-     * Additional information to be included in the `context` of analytics events
-     */
-    analyticsContext?: Record<string, any>;
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.

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

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

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

@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
-    /**
-     * Additional information to be included in the `context` of analytics events
-     */
-    analyticsContext?: Record<string, any>;
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "14.1.2",
+	"version": "15.0.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,11 +56,11 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/codemod-utils": "4.2.4",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/modal-dialog": "^12.16.0",
+		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/popup": "^1.27.0",
 		"@atlaskit/range": "^7.4.0",
 		"@atlaskit/section-message": "^6.6.0",