@atlaskit/datetime-picker 14.1.0 → 14.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 14.1.2
+
+### Patch Changes
+
+- [`728a2eb75d298`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/728a2eb75d298) -
+  Fix bug in handling controlled values.
+
+## 14.1.1
+
+### Patch Changes
+
+- [#143394](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143394)
+  [`ed5f5f38c610a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ed5f5f38c610a) -
+  [ux] update time picker to use updated primitives
+
 ## 14.1.0
 
 ### Minor 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.0";
+var packageVersion = "14.1.2";
 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.0";
+var packageVersion = "14.1.2";
 // 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

@@ -16,7 +16,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
 var _fixedLayerMenu = require("../internal/fixed-layer-menu");
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
@@ -26,10 +25,9 @@ var _excluded = ["styles"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } // eslint-disable-next-line no-restricted-imports
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+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.0";
+var packageVersion = "14.1.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -122,11 +120,11 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     _ = _useState6[0],
     setIsFocused = _useState6[1];
-  var _useState7 = (0, _react.useState)(providedIsOpen || defaultIsOpen),
+  var _useState7 = (0, _react.useState)(defaultIsOpen),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isOpen = _useState8[0],
     setIsOpen = _useState8[1];
-  var _useState9 = (0, _react.useState)(providedValue || defaultValue),
+  var _useState9 = (0, _react.useState)(defaultValue),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     value = _useState10[0],
     setValue = _useState10[1];
@@ -142,6 +140,16 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'selectedTime',
     analyticsData: analyticsContext
   }, analyticsAttributes));
+  (0, _react.useEffect)(function () {
+    if (providedValue) {
+      setValue(providedValue);
+    }
+  }, [providedValue]);
+  (0, _react.useEffect)(function () {
+    if (providedIsOpen) {
+      setIsOpen(providedIsOpen);
+    }
+  }, [providedIsOpen]);
   var onChange = function onChange(newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
@@ -214,6 +222,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   var ICON_PADDING = 2;
+  var GRID_SIZE = 8;
   var l10n = (0, _locale.createLocalizationProvider)(locale);
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
@@ -288,7 +297,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     indicatorsContainer: function indicatorsContainer(base) {
       return _objectSpread(_objectSpread({}, base), {}, {
         paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-        paddingRight: renderIconContainer ? (0, _constants.gridSize)() - ICON_PADDING : 0
+        paddingRight: renderIconContainer ? GRID_SIZE - ICON_PADDING : 0
       });
     }
   });
@@ -323,7 +332,10 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
     styles: mergedStyles,
     value: initialValue,
-    spacing: spacing,
+    spacing: spacing
+    // We need this to get things to work, even though it's not supported.
+    // @ts-ignore
+    ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId

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.0";
+const packageVersion = "14.1.2";
 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.0";
+const packageVersion = "14.1.2";
 // 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,21 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useReducer, useState } from 'react';
-
-// eslint-disable-next-line no-restricted-imports
+import React, { forwardRef, useEffect, useReducer, useState } from 'react';
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
 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.0";
+const packageVersion = "14.1.2";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -78,8 +74,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   const [clearingFromIcon, setClearingFromIcon] = useState(false);
   // TODO: Remove isFocused? Does it do anything?
   const [_, setIsFocused] = useState(false);
-  const [isOpen, setIsOpen] = useState(providedIsOpen || defaultIsOpen);
-  const [value, setValue] = useState(providedValue || defaultValue);
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const [value, setValue] = useState(defaultValue);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   const [, forceUpdate] = useReducer(x => x + 1, 0);
@@ -89,6 +85,16 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     analyticsData: analyticsContext,
     ...analyticsAttributes
   });
+  useEffect(() => {
+    if (providedValue) {
+      setValue(providedValue);
+    }
+  }, [providedValue]);
+  useEffect(() => {
+    if (providedIsOpen) {
+      setIsOpen(providedIsOpen);
+    }
+  }, [providedIsOpen]);
   const onChange = (newValue, action) => {
     const rawValue = newValue ? newValue.value || newValue : '';
     const finalValue = rawValue.toString();
@@ -163,6 +169,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     }
   };
   const ICON_PADDING = 2;
+  const GRID_SIZE = 8;
   const l10n = createLocalizationProvider(locale);
   const {
     styles: selectStyles = {},
@@ -239,7 +246,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     indicatorsContainer: base => ({
       ...base,
       paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-      paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
+      paddingRight: renderIconContainer ? GRID_SIZE - ICON_PADDING : 0
     })
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
@@ -273,7 +280,10 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     placeholder: placeholder || l10n.formatTime(placeholderDatetime),
     styles: mergedStyles,
     value: initialValue,
-    spacing: spacing,
+    spacing: spacing
+    // We need this to get things to work, even though it's not supported.
+    // @ts-ignore
+    ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId

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.0";
+var packageVersion = "14.1.2";
 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.0";
+var packageVersion = "14.1.2";
 // 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,23 +5,19 @@ 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, useReducer, useState } from 'react';
-
-// eslint-disable-next-line no-restricted-imports
+import React, { forwardRef, useEffect, useReducer, useState } from 'react';
 import { format, isValid } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import { FixedLayerMenu } from '../internal/fixed-layer-menu';
 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.0";
+var packageVersion = "14.1.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -114,11 +110,11 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     _ = _useState6[0],
     setIsFocused = _useState6[1];
-  var _useState7 = useState(providedIsOpen || defaultIsOpen),
+  var _useState7 = useState(defaultIsOpen),
     _useState8 = _slicedToArray(_useState7, 2),
     isOpen = _useState8[0],
     setIsOpen = _useState8[1];
-  var _useState9 = useState(providedValue || defaultValue),
+  var _useState9 = useState(defaultValue),
     _useState10 = _slicedToArray(_useState9, 2),
     value = _useState10[0],
     setValue = _useState10[1];
@@ -134,6 +130,16 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'selectedTime',
     analyticsData: analyticsContext
   }, analyticsAttributes));
+  useEffect(function () {
+    if (providedValue) {
+      setValue(providedValue);
+    }
+  }, [providedValue]);
+  useEffect(function () {
+    if (providedIsOpen) {
+      setIsOpen(providedIsOpen);
+    }
+  }, [providedIsOpen]);
   var onChange = function onChange(newValue, action) {
     var rawValue = newValue ? newValue.value || newValue : '';
     var finalValue = rawValue.toString();
@@ -206,6 +212,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var ICON_PADDING = 2;
+  var GRID_SIZE = 8;
   var l10n = createLocalizationProvider(locale);
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
@@ -280,7 +287,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     indicatorsContainer: function indicatorsContainer(base) {
       return _objectSpread(_objectSpread({}, base), {}, {
         paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-        paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
+        paddingRight: renderIconContainer ? GRID_SIZE - ICON_PADDING : 0
       });
     }
   });
@@ -315,7 +322,10 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     placeholder: placeholder || l10n.formatTime(placeholderDatetime),
     styles: mergedStyles,
     value: initialValue,
-    spacing: spacing,
+    spacing: spacing
+    // We need this to get things to work, even though it's not supported.
+    // @ts-ignore
+    ,
     fixedLayerRef: containerRef,
     isInvalid: isInvalid,
     testId: testId

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "14.1.0",
+	"version": "14.1.2",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,14 +37,14 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/calendar": "^15.0.0",
-		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/select": "^17.19.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.60.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"date-fns": "^2.17.0"
@@ -61,7 +61,7 @@
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/modal-dialog": "^12.16.0",
-		"@atlaskit/popup": "^1.26.0",
+		"@atlaskit/popup": "^1.27.0",
 		"@atlaskit/range": "^7.4.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/ssr": "*",